/* Chrome shared by the app and the static pages: the brand 間, the one
   menu, read · compose · gallery · poems · learn, and in the app the glyph
   言 that leads to /contact. */

/* ---- brand ---- */
.brand {
  position: fixed; top: 26px; left: var(--edge-x); z-index: var(--z-chrome);
  display: flex; align-items: baseline; gap: 15px; line-height: 1;
  text-decoration: none; cursor: pointer;
}
.brand .glyph {
  font-family: var(--font-glyph); font-size: 42px; line-height: 1; color: var(--accent);
  text-shadow: var(--glyph-halo);
  transition: color var(--dur-season) var(--ease-breath), text-shadow var(--dur-state) var(--ease-breath), transform var(--dur-state) var(--ease-breath);
}
.brand .name {
  font-family: var(--font-label); font-weight: 300; font-size: var(--type-4); letter-spacing: 0.52em;
  text-transform: uppercase; color: var(--paper-dim);
  transition: color var(--dur-state) var(--ease-breath);
}
/* it leads home: a quiet link affordance on hover/focus */
.brand:hover .glyph { transform: translateY(-1px); }
.brand:hover .name { color: var(--paper); }
.brand:focus-visible .name { color: var(--accent); }
.brand:focus-visible .glyph { text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 60%, transparent); }

/* ---- mode menu · top centre, level with the brand ---- */
.nav {
  position: fixed; top: 24px; left: 0; right: 0; z-index: var(--z-menu);
  width: max-content; max-width: 100%; margin-inline: auto;
  /* narrows just above the phone layout, where the full gap reached the wordmark */
  display: flex; gap: clamp(18px, 25vw - 140px, 30px);
}
.nav a {
  display: flex; align-items: center; min-height: 44px;
  background: none; border: none; cursor: pointer; text-decoration: none;
  font-family: var(--font-label); font-weight: 300; font-size: var(--type-1);
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--paper-dim);
  padding: 0 2px 0 calc(2px + 0.34em); transition: color var(--dur-state) var(--ease-breath);
}
.nav a[aria-current="page"] { color: var(--accent); }
.nav a:hover { color: var(--paper); }
.nav a:focus-visible { color: var(--accent); }

/* the static pages scroll: there the menu stays at the top of the page
   instead of floating over the centred text */
.nav-page { position: absolute; }

/* ---- leave a word · 言 in the corner the brand faces, level with the menu
   and on the season nav's axis; the quietest ink, its name in aria-label ---- */
.leave-word {
  position: fixed; top: 24px; right: 31px; z-index: var(--z-chrome);
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; text-decoration: none;
  font-family: var(--font-glyph); font-size: 20px; line-height: 1; color: var(--paper-faint);
  transition: color var(--dur-state) var(--ease-breath), opacity var(--dur-hush) var(--ease-breath);
}
.leave-word:hover { color: var(--paper-dim); }
.leave-word:focus-visible { color: var(--accent); }

/* tablets, large phones: five menu words clear the wordmark down to the phone layout */
@media (max-width: 820px) {
  .nav { gap: 14px; }
  .nav a { letter-spacing: 0.2em; padding-left: calc(2px + 0.2em); }
  .leave-word { right: 9px; }
}

/* phones: the glyph alone is the wordmark (the link keeps its aria-label);
   the menu takes a second top row */
@media (max-width: 640px) {
  .brand { left: 18px; top: 16px; }
  .brand .glyph { font-size: 36px; }
  .brand .name { display: none; }
  .nav { top: 60px; }
  /* the top row is full: 言 rests under the glyph, below the menu row, and
     only in read, where the column starts lower (as the ground disc does) */
  .leave-word { top: 106px; left: 14px; right: auto; }
  body[data-mode="compose"] .leave-word,
  body[data-mode="gallery"] .leave-word { display: none; }
}

/* the menu keeps a few pixels inside the screen, so the focus ring of its
   first and last word is never cut */
@media (max-width: 380px) {
  .brand { left: 14px; }
  .leave-word { left: 10px; }
  .nav { gap: 7px; padding-inline: 6px; }
  .nav a { letter-spacing: 0.14em; padding-left: calc(2px + 0.14em); }
}

/* landscape phones: brand top-left with its name, the menu tight enough to
   clear the season row on a 568px-wide phone */
@media (max-height: 480px) and (max-width: 900px) {
  .brand { top: 12px; left: 16px; }
  .brand .glyph { font-size: 34px; }
  .brand .name { display: inline; }
  .nav { top: 8px; gap: 2px; }
  .nav a { letter-spacing: 0.04em; padding-left: calc(2px + 0.04em); }
  /* 言 closes the left column under the brand, sound and ground */
  .leave-word { top: 150px; left: 11px; right: auto; }
  body[data-mode="compose"] .leave-word,
  body[data-mode="gallery"] .leave-word { display: none; }
}

/* the glyph stays put under the pointer */
@media (prefers-reduced-motion: reduce) {
  .brand:hover .glyph { transform: none; }
}