/* ==========================================================================
   Page chrome: the one shared header and the one shared footer.

   Every page links this and nothing else for its nav/footer styling. The rules
   are fully tokenised, so a brand pack (esfera.css) restyles the chrome purely
   by overriding palette tokens.

   This exists because the sibling Gattopardo project learned it the hard way:
   its homepage carried a bespoke header and a second inline copy of the footer,
   the two drifted (a missing link, different labels), and both had to be
   maintained by hand. Do not reintroduce a per page nav or footer here.
   ========================================================================== */

/* ── nav ─────────────────────────────────────────────────── */
.std-nav { background: var(--c-bg); border-bottom: 1px solid var(--c-hairline); position: sticky; top: 0; z-index: 100; }
.std-nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 28px; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.std-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c-text); flex-shrink: 0; }
.nav-brand { font-family: var(--font-serif); font-size: 20px; font-weight: 600; letter-spacing: .18em; }
.nav-brand-sub { font-style: italic; font-weight: 500; font-size: .72em; letter-spacing: .14em; opacity: .82; }
.std-nav-right { display: flex; align-items: center; gap: 26px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.std-link { text-decoration: none; color: var(--c-text); opacity: .75; transition: opacity .15s; }
.std-link:hover { opacity: 1; }
.std-buy { text-decoration: none; background: var(--c-accent); color: var(--c-cream); padding: 9px 20px; border-radius: 2px; white-space: nowrap; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; color: var(--c-text); line-height: 0; }

#std-mobile-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 60; background: var(--c-bg); border-top: 1px solid var(--c-hairline); box-shadow: 0 18px 40px rgba(0,0,0,.14); padding: 8px 28px 22px; }
#std-mobile-menu a { display: block; padding: 15px 2px; color: var(--c-text); text-decoration: none; font-size: 15px; letter-spacing: .04em; border-bottom: 1px solid var(--c-hairline); }
#std-mobile-menu a:last-child { border-bottom: none; }
#std-mobile-menu a.mm-cta { margin-top: 12px; background: var(--c-accent); color: var(--c-cream); text-align: center; border-radius: 2px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; border-bottom: none; }

/* ── breadcrumb ──────────────────────────────────────────────
   Chrome rather than product styling: it sits under the nav on every inner
   page, and it moved here the moment a second page (land.html) needed it.

   Same 1200 and the same 28px gutter as .std-nav-inner, so the trail starts
   directly under the wordmark. It was 1440/36, which started it well to the
   left of both the nav and the page content.

   `width: 100%` is load bearing: product.html's body is a column flexbox, and
   a flex item with `margin: 0 auto` and no width shrinks to fit its text, so
   the trail was floating in the middle of the page rather than starting at the
   left. */
.breadcrumb-bar { width: 100%; max-width: 1200px; margin: 0 auto; padding: 14px 28px 0; }
.breadcrumb { font-size: 12px; color: var(--c-text-muted); display: flex; align-items: center; gap: 6px; }
.breadcrumb a { text-decoration: none; color: var(--c-text-muted); }
.breadcrumb a:hover { color: var(--c-accent); }

/* ── footer ──────────────────────────────────────────────── */
footer { background: var(--c-footer); color: var(--c-footer-text); margin-top: 20px; }
.foot-inner { max-width: 1180px; margin: 0 auto; padding: 72px 28px 28px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
.foot-seal { color: var(--c-gold); margin-bottom: 18px; }
.foot-brand-name { font-family: var(--font-serif); font-size: 22px; letter-spacing: .16em; color: var(--c-cream); margin-bottom: 12px; }
.foot-blurb { font-family: var(--font-serif); font-size: 16px; line-height: 1.6; margin: 0; max-width: 34ch; }
.foot-col h3 { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--c-gold); margin: 0 0 18px; }
.foot-col a { display: block; text-decoration: none; color: var(--c-footer-text); font-size: 14.5px; padding: 7px 0; transition: color .15s; }
.foot-col a:hover { color: var(--c-cream); }

/* The five legal links live in the footer bottom bar, not in a column. Keeping
   them in one fixed place matters most on the page a buyer sees right after
   paying. Same rule as the Gattopardo footer. */
.foot-bottom { border-top: 1px solid rgba(246,242,230,.12); max-width: 1180px; margin: 0 auto; padding: 22px 28px 40px; display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; font-size: 13px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-legal a { color: var(--c-footer-text); text-decoration: none; }
.footer-legal a:hover { color: var(--c-cream); }
.foot-stamp { color: var(--c-footer-dim); font-size: 12px; }
.foot-stamp a { color: var(--c-gold); text-decoration: none; }

/* The build stamp: which deploy is actually in front of you. Quieter than
   everything around it and on its own line, because it is for us rather than
   for a reader, and it must never compete with the legal links. Its value comes
   from version.json, written per deploy by generate_version.py — the previous
   footer carried a hardcoded year, which answers no question anyone has. */
.foot-build {
  flex-basis: 100%; order: 4;
  color: var(--c-footer-dim); opacity: .55;
  font-size: 11px; letter-spacing: .04em; font-variant-numeric: tabular-nums;
}

/* Map data credit. OpenStreetMap is ODbL, so the attribution is a licence
   term rather than a nicety and has to be visible somewhere. It sits here,
   once, instead of on the map artwork: the owner asked for it off the map.
   flex-basis:100% drops it onto its own line under the legal links. Removing
   it puts the site out of licence. See LAND.md. */
.foot-credit { flex-basis: 100%; color: var(--c-footer-dim); font-size: 11.5px; order: 3; }
.foot-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.foot-credit a:hover { color: var(--c-cream); }

/* ── responsive ──────────────────────────────────────────── */
/* Between the collapse point and the max-width, tighten the link gap. Five
   links leave only about 15px of slack just above the breakpoint, which the
   fallback serif can eat on its own before Cormorant loads. */
@media (max-width: 1200px) { .std-nav-right { gap: 20px; } }
@media (max-width: 900px) {
  .foot-inner { grid-template-columns: 1fr 1fr; gap: 36px; }
  .foot-brand { grid-column: 1 / -1; }
}
/* The inline links collapse into the hamburger at 1060px, not 760px. Five of
   them (Shop, The Certificate, The Land, Coming Home, The Voyage) plus the
   wordmark, the Buy now and the 24px gap measure 929px, and the inner has
   56px of padding, so anything under about 985px overflowed and scrolled the
   whole page sideways. Measured in the browser, not guessed. The threshold is
   set at 1060 rather than 985 to leave slack for the wordmark rendering wider
   in the fallback serif before Cormorant loads. Adding a sixth link or a
   longer label means re-measuring this. */
@media (max-width: 1060px) {
  .std-nav .hide-mobile { display: none !important; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 760px) {
  .std-nav-inner { padding: 0 18px; gap: 12px; }
  .breadcrumb-bar { padding: 14px 18px 0; }
  .nav-brand { font-size: 16px; letter-spacing: .06em; white-space: nowrap; }
  .nav-brand-sub { display: none; }
  .std-nav-right { gap: 14px; }
}
@media (max-width: 640px) {
  .foot-inner { grid-template-columns: 1fr; }
}
/* Below ~350px there is genuinely no room for the wordmark beside the seal,
   the Buy now and the hamburger. Hide it rather than let it ellipsise. */
@media (max-width: 350px) { .nav-brand { display: none; } }

/* ── The page head ────────────────────────────────────────────────────────────
   The centred head block: sphere mark, gold eyebrow, italic Cormorant h1, lead,
   gold rule. Used by /land and /certificate, and it lives here rather than in
   each page's own <style> because it was in both and they did not match: the
   certificate page was written with its own values (46px mark against 56,
   clamp(40px,6vw,62px) against clamp(52px,8vw,92px), a 92px half-opacity rule
   against a 56px solid one) so the two pages wore visibly different headers.

   THE VAR FALLBACKS ARE LOAD BEARING. `--quiet` and `--gold-text` are declared on
   `.land`, page-locally, and the land page's head has always used them. Written as
   `var(--gold-text, var(--c-accent-text))` this rule takes the local value inside
   .land and the global token everywhere else, so moving the block here changed
   nothing on /land while still working on a page that never declares them. Do not
   "simplify" these to a single colour without checking /land against a screenshot. */
.head { text-align: center; padding: clamp(56px,10vw,96px) 0 0; max-width: 720px; margin: 0 auto; }
.head-mark { height: 56px; width: 56px; display: block; margin: 0 auto 28px; color: var(--c-gold); }
.head-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold-text, var(--c-accent-text));
  margin-bottom: 22px;
}
.head h1 {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(52px,8vw,92px); line-height: .98; letter-spacing: -.01em;
  margin: 0 0 24px; text-wrap: balance;
}
.head-lead {
  font-family: var(--font-serif); font-size: clamp(20px,2.4vw,25px); line-height: 1.55;
  color: var(--quiet, var(--c-text-muted)); margin: 0 auto; max-width: 560px;
  text-wrap: pretty;
}
.head-rule { width: 56px; height: 1px; background: var(--c-gold); margin: 40px auto 0; }

/* ── The body reset: PAINT ONLY, NO LAYOUT ────────────────────────────────────
   Every page declared this in its own <style>, and two did not declare it at all:
   /certificate and the story pages had NO background and NO font stack, so they fell
   through to the browser's transparent canvas and Times. On a light canvas that
   passes for correct, which is why it shipped.

   So the default lives here. A page that needs something different still overrides
   it, because chrome.css is linked before the page's own <style>.

   ══ THIS RULE MUST NEVER DECLARE display, flex-direction, min-height OR overflow ══

   It did, for one deploy, and it broke the homepage. The first version carried
   `display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden`,
   copied from the five pages that DO declare those themselves. index.html does not,
   so the shared rule reached it and turned its body into a column flexbox. **Two
   sections then collapsed:** `#packs` went from 1180px to 341px and its three pack
   cards from 1124px to 285px, and the closing `.section` went from 620px to 413px.

   The mechanism is already written down one file over, for the land page:
   a `margin: 0 auto` block with no `width` FILLS its parent under `display: block`,
   but auto margins in the cross axis disable stretch in a column flexbox, so the
   same block shrink-to-fits instead. Both collapsed sections are exactly that
   shape, `max-width` plus `margin: 0 auto` and no `width`. Measured in a browser
   before and after, not reasoned about.

   So a shared body rule may set how the page is PAINTED and nothing about how it is
   LAID OUT. The five pages wanting a sticky-footer column say so in their own
   <style>, where the author can see the container the sections sit in.
   `test_the_shared_body_rule_declares_no_layout_properties` fails if this comes back.

   NOT UNIFIED: land.html and legal.html hardcode `#f6f1e7` where index.html,
   success.html and 404.html use `var(--c-bg)` (#f0e9da). Two different creams, and
   that predates this rule. It is left alone deliberately rather than "tidied" into
   one value, because changing it would restyle two finished pages to fix something
   nobody has complained about. The default below follows the majority. */
body {
  margin: 0; background: var(--c-bg); color: var(--c-text);
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased;
}

/* ── border-box, which is the box MODEL and not the layout ────────────────────
   Seven pages declared this identical line in their own <style> and the three new
   ones did not, which is a gap that hides: under `content-box`, a container with
   `width: 100%` and `padding: 0 24px` is 48px WIDER than its parent.

   /certificate, /claim and the three story pages all use exactly that pattern, so
   all of them scrolled sideways by 48px on a 375px phone. It went unseen because
   the shared body rule above briefly carried `overflow-x: hidden`, which CLIPPED
   the overflow rather than preventing it: the pages looked fine and the content
   was 48px off the right edge. Removing that clip is what surfaced this.

   `.land` uses the same `max-width` + `width: 100%` + padding pattern and has
   always been fine, because land.html carries its own copy of this line. So the
   rule was never optional, only duplicated, and the copy nobody wrote is the one
   that mattered. Unlike the flex column above, this is safe to share: it is the
   box model, it says nothing about how children are placed, and all seven pages
   already declare it identically, so it changes nothing for them.
   `test_border_box_is_declared_for_every_page` fails if it goes missing again. */
*, *::before, *::after { box-sizing: border-box; }