/* Shared page chrome — the parts every storefront page has in common: the
   brand tokens, the header (mark, nav, beta pill) and the footer.
   Page-specific CSS stays inline in the page that needs it; this file exists
   because index.html and faq.html must not drift apart at the top and bottom
   of the window. */

/* Cormorant Garamond is the face pipeline/compose.py prints on the book's
   cover and title page. Self-hosted (no font CDN) and subset to the Latin
   set these pages use: 792 KB of TTF down to 12 KB. */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/cormorant-garamond-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* The other two title-font choices, used by Step 3's three font-picker
   buttons (.font-handwritten/.font-storybook/.font-bold below) — same faces
   compose.py prints (TITLE_FONTS), same Latin subset-and-woff2 treatment as
   Cormorant Garamond above, so each button previews itself in the real face
   rather than a system-font approximation. */
@font-face {
  font-family: 'Fredoka';
  src: url('/assets/fredoka-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pacifico';
  src: url('/assets/pacifico-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink:#1a1a1a; --line:#d8d8d8; --accent:#e8622c; --muted:#6b6b6b;
  --paper:#faf8f5;
  /* The cover colour the customer picked. Drives the stage badges, so the
     page fills in with the same colour the book will. Overwritten by
     renderSwatches() as soon as /api/config lands. */
  --chosen: var(--accent);
  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --pad: max(1rem, env(safe-area-inset-left));
}
* { box-sizing: border-box; }
body {
  margin: 0; font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink); background: var(--paper);
  padding: 0 var(--pad) calc(2rem + env(safe-area-inset-bottom));
}
.wrap { width: 100%; max-width: 820px; margin: 0 auto; }
.hidden { display: none !important; }  /* beats the page's own display rules */

/* Visible focus everywhere, and only for keyboard users. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Small-caps eyebrow — used for the stage labels and the spec panel. */
.eyebrow {
  font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); font-variant-numeric: tabular-nums;
}

/* ---- Header: the same mark that's printed on the book ---- */
.site-head {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: 1.4rem 0 0;
}
.site-head > a.brand {
  display: flex; align-items: center; gap: .6rem;
  color: inherit; text-decoration: none;
}
.site-head img.mark { width: 44px; height: auto; display: block; }
.site-head .name {
  font-family: var(--display); font-size: 1.35rem; line-height: 1;
  letter-spacing: .01em;
}
/* Non-clickable honesty badge beside the wordmark — we're public but still in
   beta. A static span (no href, not focusable), sits on every page's shared
   header; stays after the beta gate is removed. Low-key: muted, not the accent. */
.site-head .beta-pill {
  align-self: center; font-size: .62rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); background: rgba(26, 26, 26, .06);
  border: 1px solid var(--line); border-radius: 999px; padding: .16rem .5rem;
  line-height: 1; white-space: nowrap;
}
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.1rem; font-size: .9rem; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] {
  color: var(--ink); text-decoration: underline; text-underline-offset: 5px;
}

/* ---- Icon nav (canonical top-right, established on the landing page) -------
   Every page carries the same top-right: a "Questions" text link, then a
   round account icon and cart icon. Applied via `class="site-nav icon-nav"`
   so mountNavBag's `.site-nav` selector still finds the nav to append the
   bag. The cart bag (mountNavBag's `.bag`, or a page's inline cart link) is
   styled here as an icon button so it sits inline with the account icon. */
.icon-nav { gap: .4rem; }
.icon-nav a.txt { color: var(--muted); text-decoration: none; margin-right: .5rem; }
.icon-nav a.txt:hover { color: var(--ink); }
.icon-nav a.txt[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.icon-btn,
.icon-nav .bag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; color: var(--ink);
  text-decoration: none;
}
.icon-btn:hover,
.icon-nav .bag:hover { background: #efe9e2; color: var(--ink); }
.icon-btn svg,
.icon-nav .bag svg { width: 21px; height: 21px; display: block; }
/* The account icon marks the current page with a filled ground, not an
   underline (there's no text to underline). */
.icon-btn[aria-current="page"],
.icon-nav .bag[aria-current="page"] { background: #e7ded2; }
/* Keep the cart count badge riding the icon-button corner. */
.icon-nav .bag { position: relative; }

/* ---- Closed-beta pill ------------------------------------------------- */
/* A static badge, not a control — see index.html for why it's no longer a
   <details> disclosure. */
.beta-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid #e3c98b; background: #fdf6e3; border-radius: 999px;
  padding: .25rem .7rem .25rem .5rem; font-size: .78rem; font-weight: 600;
  letter-spacing: .02em; white-space: nowrap;
}
.beta-pill img { width: 14px; height: 14px; display: block; opacity: .75; }

/* ---- Footer (canonical, shared by every page; built by mountSiteFooter) ----
   One footer, mounted from ui.mjs so its markup lives in a single place. Full-
   width band: `margin-inline: calc(50% - 50vw)` bleeds a width:auto box out to
   the viewport edges regardless of where the page puts its --pad (landing pads
   `.wrap`, every other page pads `body`) — so the band is identical on all of
   them, and unlike `width:100vw` it doesn't count the scrollbar into its width.
   The inner column re-centers the content to the page's 820px measure. */
.site-foot {
  margin: 4rem calc(50% - 50vw) 0;
  padding: 2.6rem var(--pad);
  /* Reserved space for the fixed share-a-thought chip (spec: feedback-surface-
     ux, #450). Scrolled to the bottom, the footer's content clears where the
     fixed chip renders instead of hiding under it. Sized for the chip's full
     (uncollapsed) footprint — unconditional, so it holds before the collapse
     or beta_mode fetch resolves. */
  padding-bottom: calc(4.8rem + env(safe-area-inset-bottom));
  background: #f1ece4; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .88rem;
}
.site-foot .foot-inner { max-width: 820px; margin: 0 auto; }
.site-foot .foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.4rem; max-width: 34rem; }
.site-foot h3 {
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 .7rem;
}
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin: .5rem 0; }
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.site-foot .foot-base {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin-top: 2.2rem; padding-top: 1.1rem; border-top: 1px solid #ddd5c9;
}
.site-foot .foot-base img { width: 26px; height: auto; display: block; opacity: .8; }