/* THE HEADER BAR — ONE COPY, TWO PAGES.
   `/` renders it from NextLanding and `/plans` is a static file in public/, so this
   used to be written out twice. Mark 2026-09-19: "reuse the elements... so if tweaked
   later it persists." Both now link this file, which is why it lives in public/ rather
   than beside the component — a static page cannot import from src/.
   The bar is identical on both. What hangs in the nav is not, and does not need to be.
   Sits alongside /css/nx-brand.css, which owns the lockup itself. */

/* ── the bar ── */
.top{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;
  justify-content:space-between;gap:clamp(20px,5vw,44px);flex-wrap:wrap;
  /* ⚠️ THE PADDING IS NOT SYMMETRIC, ON PURPOSE. The band fades out at its bottom edge
     rather than ending at it, so the eye reads the bar as shorter than its box and the
     contents as sitting low in it. Ten pixels off the top and onto the bottom lift
     them without changing the box, which is what the gradient is drawn over — centre it
     properly and it looks wrong again. Mark 2026-09-19, and it is an optical fix. */
  padding-block:calc(clamp(14px,2.4vh,24px) - 10px) calc(clamp(14px,2.4vh,24px) + 10px);
  padding-inline:clamp(18px,4vw,44px);
  color:#F5EFE1;text-shadow:0 1px 3px rgba(0,0,0,.55);
  /* ⚠️ OPAQUE WHERE THE LOCKUP SITS. This bar is fixed, and the gradient started at
     half transparent, so every heading that scrolled under it read through the logo —
     Seth 2026-09-09 caught it at 38 scroll positions, on desktop as well as mobile.
     Solid for the height of the lockup, then fading, keeps the treatment and stops
     the collision. */
  background:linear-gradient(180deg,rgba(14,12,9,.92) 0%,rgba(14,12,9,.86) 58%,transparent 100%);}
/* Over the pale sections below the hero it flips to ink.
   ⚠️ WHEN IT FLIPS IS MEASURED, NOT GUESSED — see /js/nx-header.js, which both pages
   run. Both used to flip early off a fraction of the viewport, and Mark 2026-09-19
   caught the result: a cream bar sitting on a still-black map. */
/* The bar fades from the site's one page tint, #E4DDC9 (Brian and Seth, 2026-09-30). */
.top[data-onpaper]{color:var(--ink);text-shadow:none;
  background:linear-gradient(180deg,rgba(228,221,201,.98) 0%,rgba(228,221,201,.94) 58%,rgba(228,221,201,0) 100%);}
.top[data-onpaper] .cta{border-color:var(--pine);color:var(--pine);}
/* 1.5rem = 24px, which puts the tree mark at 48px, because NextBrand sizes it in
   em. That is the lockup as `/` draws it (25px text, 50px mark) rather than the
   shrunken version this bar was carrying. */
/* ⚠️ SIZE AND TAP TARGET ONLY. The face, the weight and the tracking belong to
   .nx-brand in /css/nx-brand.css, and this rule used to restate them — same specificity,
   two files, so whichever loaded last won. React hoists them in one order on `/` and the
   markup lists them in the other on `/plans`, which is how the same wordmark came out at
   -0.02em on one page and -0.01em on the other. Mark 2026-09-19 saw it swapping tabs.
   One property, one home: nothing about the lockup is declared twice. */
.mark{font-size:1.5rem;min-height:44px;}
.top nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);}
/* ⚠️ `.top nav a`, NOT `.top a`. On `/` the lockup is a span — the landing does not link
   to itself — so a rule on every anchor in the bar never touched it. On `/plans` it IS a
   link, and 0,1,1 quietly beat `.mark`'s 0,1,0: same stylesheet, same markup, a wordmark
   18px on one page and 24px on the other. Mark 2026-09-19. Scoped to the nav, the size
   belongs to the thing it describes. */
/* ⚠️ line-height IS SET, NOT INHERITED. It is unitless on both pages' wrappers and they
   disagree — 1.55 on `/`, 1.6 on `/plans` — so the same link got a 25.3px text box on one
   and a 26.1px box on the other, and centring that inside 44px rounded a pixel apart.
   Mark 2026-09-19: "1 pixel lower in /plans". The box is centred by the flex line anyway,
   so the leading has no job here. */
.top nav a{color:inherit;text-decoration:none;font-size:1.02rem;min-height:44px;
  line-height:1;display:inline-flex;align-items:center;}
.top nav a:hover{text-decoration:underline;text-underline-offset:5px;}
/* ⚠️ THE GAP IS A MARGIN BECAUSE A SPACE CANNOT SURVIVE HERE. `.top a` is an
   inline-flex container, so "Start" and the span are flex items — and flex discards
   whitespace between items and strips it from the start of one. The markup said
   `Start<span> your atlas</span>` and rendered "Startyour atlas". Mark 2026-09-16.
   It goes away with the word on phones, where the span is display:none. */
.ctaLong{margin-left:.3em;}
/* Brian 2026-09-30: the full label is "Add your first ancestor", which cannot sit beside the lockup
   on a narrow phone; there the button says "Start". Two labels, one shown at a time. */
.ctaOne{display:none;}
/* ⚠️ NEVER LET THIS WRAP. Squeezed beside the wordmark on a phone, "Start your
   atlas" broke over three lines inside a 999px radius and rendered as a 78x78
   BLOB — which is the circle Seth 2026-09-09 saw duplicating the hero's own
   button, and the thing his wordmark collision was measuring against. */
.top .cta{border:1px solid currentColor;border-radius:999px;padding:0 20px;white-space:nowrap;}
/* ONE ROW DOWN TO 721. Between 721 and about 940px (a small tablet, a phone sideways) the four
   links and the full pill did not fit beside the wordmark, and .top wraps, so the nav dropped onto
   a second row over the hero's first line (mac, on an iPhone 14 Pro sideways at 734px, 9 Oct).
   Tighter gaps, smaller type and the one-word pill keep it to one row; above 960 nothing changes. */
@media (max-width:960px){
  .top nav{gap:12px;}
  .top nav a{font-size:.9rem;}
  .ctaFull{display:none;}
  .ctaOne{display:inline;}
  .top .cta{padding:0 12px;}
}
/* 720, not 760: a phone turned sideways has a layout viewport of 734px on an iPhone 15 Pro
   (852 less the two 59px insets beside the island; mac read it off the device, Side 80), so
   760 hid the links sideways too. */
@media (max-width:720px){ .top nav a:not(.cta){display:none;} }
/* Side 80: the links hidden above get a door on a phone - a Menu word that opens them as a
   list under the bar, in the bar's own ink and ground. Nothing of this exists above 760px. */
.menuBtn{display:none;}
.topMenu{display:none;}
@media (max-width:720px){
  .menuBtn{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;
    border:0;background:none;color:inherit;font:inherit;font-size:1.02rem;cursor:pointer;}
  .menuBtn[aria-expanded="true"]{text-decoration:underline;text-underline-offset:5px;}
  .topMenu{display:flex;flex-direction:column;flex-basis:100%;padding:4px 0 10px;}
  .topMenu[hidden]{display:none;}
  .topMenu a{color:inherit;text-decoration:none;font-size:1.05rem;min-height:44px;
    display:flex;align-items:center;}
  .top:has(.topMenu:not([hidden])){background:rgba(14,12,9,.96);}
  .top[data-onpaper]:has(.topMenu:not([hidden])){background:rgba(228,221,201,.98);}
}
/* ⚠️ THIS PILL WAS DELETED ON PHONES AND IS BACK ON PURPOSE. It went on 2026-09-09
   because the hero carries the same words in a 369x56 pill on the same screen, and
   two calls to one action were competing for a 320px header. That reasoning still
   holds for the FIRST screen — what it missed is every screen after it. The header
   is position:fixed, so it is the only thing that can reach the six thousand pixels
   between the hero's button and the finale's. The duplication on screen one is the
   price, knowingly paid.
   Compact below 760, and two words below 560: the full label beside the lockup does
   not fit 354px, and squeezed it once wrapped inside its own radius as a 78x78 blob. */
@media (max-width:720px){
  .top .cta{padding:0 14px;font-size:.95rem;}
}
/* ⚠️ 10px OF PADDING IS THE WHOLE MARGIN THIS FITS BY. At 390 the header's content
   box is 354, the lockup is 259 and the flex gap is 20, which leaves 75px. "Start"
   at 15px is about 35 of that, so the padding is what decides whether it fits.
   The two obvious alternatives are both worse: 14px type would put the one word a
   visitor is meant to press below the size floor this page holds everywhere else,
   and shrinking the wordmark would undo a deliberate restoration — the note above
   records it being put BACK to the size `/` draws it at, from exactly the shrunken
   version this bar used to carry. */
@media (max-width:560px){
  .ctaLong{display:none;}
  .ctaFull{display:none;}
  .ctaOne{display:inline;}
  .top .cta{padding:0 10px;}
}