/* ============================================================
   THE HUNCH TRAIL — SHARED DESIGN SYSTEM
   Used by every page on the site (index, terms, privacy,
   bookshop_links, form_received). Page-specific styles live in
   a <style> block in each page; this file is the common base:
   tokens, reset, header, footer, buttons, and a few components
   reused across pages (page banners, prose/legal typography).
============================================================ */

:root{
	--ink:#1B1712;
	--ink-soft:#3A332A;
	--parchment:#EFE6D3;
	--parchment-dim:#E4D8BE;
	--parchment-deep:#DCCEAF;
	--gold:#B98A32;
	--gold-light:#D1A550;
	--oxblood:#7A2E27;
	/* "BUY THE BOOK" CTA colour.
	   Round 5, item 4: changed from the previous burnt-orange (#9C4A1D)
	   to the requested #7A2E27 — which is exactly the existing --oxblood
	   token, so this aliases that token rather than repeating the hex, per
	   DRY. Change --oxblood and both stay in step automatically.
	   --accent-cta-light is only the hover state: the same hue lifted
	   slightly so the button still visibly responds to a pointer. */
	--accent-cta:var(--oxblood);
	--accent-cta-light:#9A3A2D;
	/* Item 4 (round 4): brightened red for the "Want to buy it?" mark,
	   used ONLY where a .mark sits on the dark .case-card background
	   (see .mark-on-dark below) — not a global change to .mark, since
	   every other .mark on the page sits on the light parchment
	   background where the plain --oxblood already reads fine. */
	--oxblood-bright:#DD7E62;
	/* Round 6: border colour for the site's marketing CTA buttons
	   (.btn-primary / .btn-accent / .btn-ghost — see that rule below).
	   A warm saddle-brown chosen to sit between the existing --gold
	   (#B98A32) and --oxblood (#7A2E27) tokens in hue, so it reads as
	   part of the same warm palette rather than an unrelated colour.
	   Kept light enough (vs. near-black --ink and dark --oxblood) that
	   a 3px border in it stays visible as an outline on every CTA fill
	   colour it needs to sit on: gold, oxblood and transparent-on-dark. */
	--cta-border:#7C5430;
	--verdigris:#5C6B58;
	--white:#FFFFFF;
	--line:rgba(27,23,18,0.16);
	--line-dark:rgba(239,230,211,0.22);
	--shadow:0 18px 40px rgba(20,16,10,0.22);
	--radius:3px;
	--maxw:1120px;
	--font-display:'Fraunces', Georgia, serif;
	--font-body:'Libre Franklin', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-mono:'IBM Plex Mono', 'Courier New', monospace;
	--font-brand:'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
	--ease:cubic-bezier(.2,.7,.2,1);
	--header-h:76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
/* Offsets anchor-jump targets so the sticky header never covers the
   top of the section being scrolled to (fixes overshoot on jump links). */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px);}
body{margin:0;background:var(--parchment);color:var(--ink-soft);font-family:var(--font-body);font-weight:400;line-height:1.65;font-size:1.0625rem;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);font-weight:600;line-height:1.08;margin:0 0 .5em;letter-spacing:-0.01em;}
p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}
ul{margin:0;padding:0;}
button{font-family:inherit;}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
	*{animation-duration:0.001ms !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);padding:.8em 1.2em;z-index:9999;font-family:var(--font-mono);font-size:.8rem;}
.skip-link:focus{left:1rem;top:1rem;}

/* ---------- Utility ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem;}
.eyebrow{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--gold);display:inline-flex;align-items:center;gap:.6em;margin-bottom:1.1em;}
.eyebrow::before{content:"";width:1.6em;height:1px;background:var(--gold);display:inline-block;}
.section-dark .eyebrow{color:var(--gold-light);}
.mark{color:var(--oxblood);font-weight:600;}
.section-dark .mark{color:var(--gold-light);}
/* Item 4 (round 4): opt-in modifier for a .mark that sits on the
   .case-card's dark translucent background (as opposed to .section-dark,
   which is a different, solid-dark background already handled above).
   Applied directly on the one span that needs it, rather than scoping by
   ancestor, so it can't accidentally pick up unrelated .mark spans later
   added inside a .case-card. */
.mark-on-dark{color:var(--oxblood-bright);}
.lede{font-size:1.2rem;color:var(--ink-soft);max-width:62ch;}
/* Item 1: text-columns previously capped these paragraphs at 70ch,
   which left them visibly narrower than the other full-width elements
   in the same sections (.steps, .price-note, .exhibit-grid,
   .proof-grid all have no such cap). The cap is removed here so these
   paragraphs share the same right margin as everything else, per
   explicit instruction. Trade-off worth knowing: on wide desktop
   screens this produces lines of ~120+ characters, well past the
   ~65-75 character range usually considered comfortable to read. */
.center-head{max-width:640px;}
hr.rule{border:none;border-top:1px solid var(--line);margin:2.4rem 0;}

section{padding:clamp(3.5rem,7vw,6.5rem) 0;}
.section-dark{background:var(--ink);color:rgba(239,230,211,0.86);}
.section-dark h2,.section-dark h3{color:var(--parchment);}
.section-alt{background:var(--parchment-dim);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--font-mono);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;padding:.95em 1.6em;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease);}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--gold);color:var(--ink);box-shadow:0 10px 22px rgba(185,138,50,0.35);}
.btn-primary:hover{background:var(--gold-light);}
.btn-ghost{background:transparent;color:var(--parchment);border-color:var(--line-dark);}
.btn-ghost:hover{border-color:var(--gold-light);color:var(--gold-light);}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--parchment);}
/* "BUY THE BOOK" CTA — same .btn base as .btn-primary (size, shape and
   hover-lift all inherited), just its own colour so it reads as a
   distinct, secondary call to action next to the gold .btn-primary.
   The shadow tint is the button's own RGB so it reads as that colour's
   shadow rather than a leftover from the previous accent colour. */
.btn-accent{background:var(--accent-cta);color:var(--parchment);box-shadow:0 10px 22px rgba(122,46,39,0.35);}
.btn-accent:hover{background:var(--accent-cta-light);}
/* Round 6: thick brown border + slightly rounder corners, on the site's
   actual marketing CTAs only — .btn-primary, .btn-accent and .btn-ghost.
   That's the 5 CTA buttons on index.html (2x primary, 2x accent, 1x
   ghost) plus, for free, the 2 header nav CTAs, which are already
   built from .btn-primary/.btn-accent + a shared .header-cta sizing
   class (see partials/header.html) — no separate header rule needed,
   per DRY. Deliberately does NOT touch .btn-outline, which on this
   site is only ever the contact-form Submit button and the FAQ
   "View all" toggle — utility controls, not marketing CTAs.
   Specificity here matches .btn/.btn-ghost above (single class each),
   so this rule relies on appearing later in the file to win the
   cascade — same pattern the existing .btn-ghost border-color rule
   already relies on.
   3px is "thick" against the 1px border every .btn carries by default.
   6px is double the site's --radius (3px) — noticeably softer without
   going pill-shaped, so these buttons still read as part of the same
   fairly square, plaque-like button language as the untouched ones. */
.btn-primary,.btn-accent,.btn-ghost{border-width:3px;border-color:var(--cta-border);border-radius:6px;}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.is-visible{opacity:1;transform:none;}

/* ============================================================
   HEADER (shared across every page)
============================================================ */
#header{position:sticky;top:0;z-index:500;background:rgba(27,23,18,0.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid transparent;transition:transform .28s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);}
#header.is-scrolled{border-color:var(--line-dark);box-shadow:0 6px 20px rgba(0,0,0,0.25);}

/* ---------- Auto-hiding header (touchscreens only) ----------
   Round 7, item 1. On a touchscreen the whole header bar slides up out
   of the way as soon as the visitor scrolls down the page, and drops
   back the moment they scroll back up. It is always on screen at page
   load and whenever the page is at the top.

   The .is-hidden class is added and removed by assets/js/hunch-theme.js,
   which also refuses to hide the bar while the menu is open.

   Scoped to touchscreens using the same "does this visitor have a real
   mouse?" test the homepage already uses for the loupe and for its
   mouse-vs-touch instruction copy — here in its negated form, so it
   matches everything that is NOT hover-capable-with-a-fine-pointer. A
   desktop mouse user keeps the header pinned exactly as before.

   Only the .is-hidden rule needs to live inside the media query. The
   transition is declared once on #header above, which costs a desktop
   visitor nothing because no transform is ever applied there. */
@media not all and (hover:hover) and (pointer:fine){
	#header.is-hidden{transform:translateY(-100%);}
}
#header .bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-top:.9rem;padding-bottom:.9rem;}
/* Note: only top/bottom padding is set above (not the shorthand "padding")
   so the left/right padding from .wrap (1.5rem) still comes through — a
   plain "padding: .9rem 0" here would silently zero out that side spacing,
   since #header .bar is more specific than .wrap. */
/* nowrap keeps the wordmark on one line; it is a flex item, so without this
   it can break in two when the bar gets tight and throw the row off balance. */
#header h1{margin:0;font-size:1.15rem;color:var(--parchment);font-family:var(--font-brand);font-weight:600;white-space:nowrap;}
#header h1 a{text-decoration:none;color:inherit;}
.headerTM,.trademark{font-size:.55em;vertical-align:super;}
/* ---------- Desktop nav spacing (round 6) ----------
   The gap between nav items is set ONCE, here, and never changed by a
   media query. That is the whole point: a single font-size plus a single
   gap means every pair of labels is separated by the same distance at
   every viewport width the horizontal nav appears at, and that distance
   does not shift as the window is resized.

   Why .72rem / 1.1rem and not the previous .78rem / 1.7rem: the six
   labels total 48 characters, and IBM Plex Mono advances 0.6em per
   character (0.66em once the .06em letter-spacing is counted). At
   .78rem with a 1.7rem gap the row measures ~531px, which stops fitting
   beside the logo and the two CTA buttons at about 1069px and made the
   labels break onto two lines below that. At .72rem / 1.1rem it measures
   ~453px and fits comfortably from 1024px (landscape iPad) upward.

   line-height is deliberately below 1 to keep the line box tight around
   the single row of uppercase text; these labels have no descenders, so
   nothing is clipped. It must be set on the <ul>, not the <a>, because
   the <li> line box inherits its "strut" from the nearest block ancestor. */
.site-nav ul{display:flex;list-style:none;gap:1.1rem;align-items:center;line-height:0.9;}
/* white-space:nowrap is what actually guarantees even spacing. Without it a
   flex item may shrink to its min-content width and break "Hidden Details"
   over two lines, which gives items different heights and ragged edges —
   the effect that reads as uneven spacing. With it, a label is either on
   one line or the whole row moves to its own line (see the media query
   below); it can never half-break. */
.site-nav a{text-decoration:none;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(239,230,211,0.78);white-space:nowrap;transition:color .15s var(--ease);}
.site-nav a:hover{color:var(--gold-light);}

/* ---------- The squeeze band: 861px to 1023px ----------
   Fixed costs in the header bar are ~538px at any width: .wrap padding
   (48px), the logo (~143px), the two CTA buttons (~299px) and two 24px
   flex gaps. That leaves only ~323px for the nav at 861px, against the
   ~453px it needs — so at these widths the nav genuinely cannot share a
   row with everything else at a legible size.

   Rather than shrink the text to ~9px or hide anything, the nav drops to
   its own full-width row underneath, where it has ~813px to work with.
   Still horizontal, still one line, still the same single gap value, so
   the spacing rhythm is identical to the wide-screen layout.

   order:3 sends it below the logo and buttons (both at the default
   order:0) and flex-basis:100% forces it onto a row of its own.
   --header-h is re-stated because the header is now ~96px tall instead
   of 76px, and that token drives html{scroll-padding-top}, which is what
   stops anchor jumps landing underneath the sticky header. */
@media (min-width:861px) and (max-width:1023px){
	:root{--header-h:96px;}
	#header .bar{flex-wrap:wrap;row-gap:.9rem;}
	.site-nav{order:3;flex-basis:100%;}
	.site-nav ul{justify-content:center;}
}

.header-actions{display:flex;align-items:center;gap:1rem;}
/* Round 5, item 2: shrink both header CTA buttons ~20%.
   Only font-size is set. The shared .btn rule sizes its padding in `em`
   (.95em 1.6em), so padding scales with the font automatically — one
   declaration shrinks the buttons' width AND height together by the same
   20%, with no second rule to keep in sync and no risk of the text and the
   box scaling by different amounts. .85rem x 0.8 = .68rem. */
.header-cta{font-size:.68rem;}
.nav-toggle{display:none;background:none;border:1px solid var(--line-dark);color:var(--parchment);width:2.6rem;height:2.6rem;border-radius:var(--radius);align-items:center;justify-content:center;cursor:pointer;}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:16px;height:2px;background:currentColor;position:relative;transition:transform .2s;}
.nav-toggle span::before{position:absolute;top:-5px;}
.nav-toggle span::after{position:absolute;top:5px;}

@media (max-width:860px){
	/* position:absolute, not fixed (changed in round 7, item 1).
	   Fixed was fine while the header never moved, but a transformed
	   ancestor becomes the containing block for its fixed-position
	   descendants — so the moment the auto-hide above puts a transform
	   on #header, a fixed panel would start measuring itself from the
	   header box instead of from the viewport, and jump. Anchoring the
	   panel to the header explicitly (top:100% means "immediately below
	   the bar") renders in exactly the same place, and keeps the two
	   locked together whatever the header is doing. #header is
	   position:sticky, which counts as positioned, so it is already the
	   containing block this needs — no extra rule required. */
	.site-nav{position:absolute;top:100%;left:0;right:0;background:var(--ink);border-bottom:1px solid var(--line-dark);padding:1rem 1.5rem 1.5rem;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);max-height:calc(100vh - var(--header-h));overflow-y:auto;}
	.site-nav.is-open{opacity:1;transform:none;pointer-events:auto;}
	.site-nav ul{flex-direction:column;align-items:flex-start;gap:1rem;}
	.nav-toggle{display:flex;}
	/* Item 2 (round 4): was ".header-actions .btn-primary" — narrowed
	   to a shared ".header-cta" class (now on both header buttons, see
	   partials/header.html) so any current or future header CTA button
	   hides here on narrow screens without needing its own copy of this
	   rule, per DRY. */
	.header-actions .header-cta{display:none;}

	/* Item 1: on small touchscreen layouts, give the logo (h1, left edge)
	   and the nav-toggle handle (right edge) extra breathing room, equally
	   on both sides, instead of sitting right at the screen edge. */
	#header .bar{padding-left:2.25rem;padding-right:2.25rem;}

	/* Item 2: center all footer content on small touchscreen layouts. */
	#footer .wrap{flex-direction:column;align-items:center;text-align:center;}
}

/* ============================================================
   PAGE BANNER — compact interior-page header (terms, privacy,
   bookshop links, form-received). Not used on the homepage,
   which has its own full hero.
============================================================ */
.page-banner{background:var(--ink);color:var(--parchment);padding:clamp(3rem,7vw,4.5rem) 0 clamp(2.2rem,5vw,3rem);}
.page-banner h1{color:var(--parchment);font-size:clamp(1.9rem,4vw,2.9rem);max-width:20ch;}
.page-banner .lede{color:rgba(239,230,211,0.78);}
.page-banner .eyebrow{color:var(--gold-light);}

/* ============================================================
   PROSE — legal / long-form document typography
============================================================ */
.prose{max-width:74ch;}
.prose h3{font-size:1.2rem;margin-top:2.1rem;padding-top:1.6rem;border-top:1px solid var(--line);color:var(--ink);}
.prose h3:first-child{margin-top:0;padding-top:0;border-top:none;}
.prose h4{font-family:var(--font-mono);text-transform:uppercase;font-size:.8rem;letter-spacing:.05em;color:var(--oxblood);margin-top:1.4rem;}
.prose p{font-size:1rem;color:var(--ink-soft);}
.prose ul{list-style:none;padding:0;margin:0 0 1.15em;}
.prose ul li{padding-left:1.3em;position:relative;margin-bottom:.5em;}
.prose ul li::before{content:"—";position:absolute;left:0;color:var(--gold);}
.prose a{color:var(--oxblood);text-decoration:underline;text-underline-offset:2px;}
.prose b{color:var(--ink);}
.meta-line{font-family:var(--font-mono);font-size:.82rem;color:var(--ink-soft);background:var(--parchment-deep);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1.2rem;display:inline-block;margin-bottom:2rem;}
.provider-line{font-size:.85rem;color:var(--ink-soft);opacity:.8;margin-top:2.5rem;}

/* Pill nav (used for jump-links, e.g. bookshop countries) */
.pill-nav{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 2.2rem;}
.pill-nav a{font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;background:var(--white);border:1px solid var(--line);border-radius:100px;padding:.5em 1.1em;color:var(--ink-soft);transition:all .15s var(--ease);}
.pill-nav a:hover{border-color:var(--gold);color:var(--ink);background:var(--parchment-deep);}

/* ============================================================
   FOOTER (shared)
============================================================ */
#footer{background:var(--ink);color:rgba(239,230,211,0.65);padding:3rem 0 2.2rem;font-size:.88rem;}
#footer .wrap{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;}
#footer a{color:rgba(239,230,211,0.82);text-decoration:underline;text-underline-offset:2px;}
#footer .legal-lines{line-height:1.7;}

/* ============================================================
   LIGHTBOX (shared structure; only wired up where used)
============================================================ */
.lightbox{position:fixed;inset:0;background:rgba(10,8,6,0.92);display:none;align-items:center;justify-content:center;z-index:1000;padding:2rem;}
.lightbox.is-open{display:flex;}
.lightbox img{max-width:100%;max-height:88vh;box-shadow:0 20px 60px rgba(0,0,0,.6);}
.lightbox-close{position:absolute;top:1.4rem;right:1.6rem;background:none;border:1px solid rgba(239,230,211,.4);color:var(--parchment);width:2.6rem;height:2.6rem;border-radius:50%;font-size:1.4rem;line-height:1;cursor:pointer;}
.lightbox-close:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);}