/* ==========================================================================
   Aquila Romana, shared design system
   Single source of truth for design tokens + shared components.
   Linked in every page's <head> BEFORE its inline <style>, so a page can
   still override locally, but new work should reach for these tokens/classes
   instead of hand-rolling magic numbers.
   ========================================================================== */

:root {
  /* Declare the design's colour scheme so the browser does NOT force-darken it.
     Without this, Chrome's Auto Dark Mode (on by default for many Android users
     when the system theme or battery saver is dark) re-renders the whole site
     inverted: the cream palette goes near-black and the transparent hero nav
     loses its contrast, so the header reads as missing while scrolling. The
     site chooses its own phase from the clock (see templates/_theme_init.html)
     and this rule states what the DAY phase is; the browser has no way to know
     that unless we say so here, and a forced inversion on top of our own dark
     phases is exactly the double-darkening we do not want.
     The `only` keyword is load-bearing: plain `light` still lets Chrome's Auto
     Dark Theme darken the page, whereas `only light` is the explicit opt-out.
     The [data-theme="dark"] override below keeps the real toggle working: when
     the flag is on and dark is chosen, the scheme flips to dark for real. */
  color-scheme: only light;

  /* ── palette ─────────────────────────────────────────────── */
  --c-bg:            #f3ead6;   /* page background (cream) */
  --c-surface:       #fff;      /* input / raised surface */
  --c-card:          #ede3cc;   /* card / note background */
  --c-text:          #1a1e16;   /* primary text */
  --c-text-body:     #4a443c;   /* body copy */
  --c-text-muted:    #8a8073;   /* secondary / meta */
  --c-label:         #5a5a52;   /* uppercase field labels */
  --c-accent:        #9c3a26;   /* terracotta: button and badge grounds */
  --c-accent-dark:   #7e2e1e;   /* terracotta hover */
  /* Terracotta as TEXT (eyebrows, inline links). Identical to --c-accent in
     daylight, but it has to lift in the dark phases: one colour cannot both
     carry cream button text and read as text on a near-black ground, and
     #9c3a26 on the late-night ground is 2.1:1. Use this for accent-coloured
     type, --c-accent for anything type sits on top of. */
  --c-accent-text:   #9c3a26;
  --c-gold:          #cba24e;   /* gold accent */
  --c-cream:         #f6efdc;   /* light text on dark */
  --c-ink:           #1a1e16;   /* dark button / footer ink */
  --c-border:        #d4c9b4;   /* input / pill border */
  --c-border-dot:    #c4b9a8;   /* radio dot ring */
  --c-hairline:      rgba(26,30,22,.12); /* dividers */
  --c-placeholder:   #b0a898;
  --c-err:           #9c3a26;

  /* ── typography ──────────────────────────────────────────── */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --fs-eyebrow: 11px;   /* uppercase eyebrow / field label */
  --fs-meta:    12px;
  --fs-pill:    13.5px; /* radio pill text */
  --fs-body:    15px;   /* input / body */
  --fs-lead:    17px;

  --ls-eyebrow: .16em;  /* field labels */
  --ls-wide:    .22em;  /* section eyebrows */
  --ls-btn:     .1em;

  /* ── spacing scale (vertical rhythm) ─────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-label: 9px;      /* label → control */
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-field: 22px;     /* control → next label (form rhythm) */
  --sp-5: 28px;
  --sp-6: 36px;
  --sp-7: 44px;
  --sp-8: 56px;
  --sp-9: 80px;

  /* ── radii ───────────────────────────────────────────────── */
  --radius-sm:   2px;   /* inputs, buttons */
  --radius-img:  3px;
  --radius-card: 4px;
  --radius-pill: 30px;

  /* ── layout breakpoint ───────────────────────────────────── */
  --bp-stack: 1040px;
}

/* ── dark-mode token overrides ─────────────────────────────── */
[data-theme="dark"] {
  /* Real dark mode (ENABLE_THEME_TOGGLE on + dark chosen). Flipping the scheme
     here, not on :root, is what lets the light default opt out of Chrome's
     forced auto-darkening without disabling genuine dark mode. */
  color-scheme: dark;

  --c-bg:          #0f1209;
  --c-surface:     #181f13;
  --c-card:        #1c2117;
  --c-text:        #e4dac4;
  --c-text-body:   #bab29a;
  --c-text-muted:  #85837a;   /* 5.0:1 on the evening ground */
  --c-label:       #85837a;
  --c-border:      #2e3829;
  --c-border-dot:  #3a4035;
  --c-hairline:    rgba(228,218,196,.15);
  --c-placeholder: #5a6052;
  --c-err:         #e07060;
  --c-accent-text: #cf7a4a;   /* 5.9:1 on the evening ground */
}

/* ── late-night tier ───────────────────────────────────────
   Set from 23:00 to 06:00 alongside data-theme="dark" (see
   templates/_theme_init.html). Evening dark is still a lit room; this is the
   one read in bed, so the ground drops further, the cream text comes down off
   full brightness, and the terracotta and gold lose their glare. Only tokens
   are re-stated, so every page that themes through them follows automatically.
   Contrast stays above 4.5:1 on body copy (#a49c85 on #070903 is ~9.4:1). */
[data-theme="dark"][data-night="late"] {
  --c-bg:          #070903;
  --c-surface:     #101509;
  --c-card:        #12170d;
  --c-text:        #cfc4a8;
  --c-text-body:   #a49c85;
  --c-text-muted:  #7d7a6e;   /* 4.8:1 on the late ground */
  --c-label:       #7d7a6e;
  --c-accent:      #8a3421;
  --c-accent-dark: #6e2a19;
  --c-accent-text: #c06f43;   /* 5.5:1 on the late ground */
  --c-gold:        #b08f45;
  --c-cream:       #e6dcc4;
  --c-border:      #232b1f;
  --c-border-dot:  #2c3128;
  --c-hairline:    rgba(207,196,168,.12);
  --c-placeholder: #4b5045;
  --c-err:         #cf6555;
}

/* Photography carries its own brightness, so tokens can't dim it. Ease it down
   in the dark phases or a full-bleed hero lights the whole screen back up. */
[data-theme="dark"] .hero-bg,
[data-theme="dark"] .story-fig img,
[data-theme="dark"] .img-stack img,
[data-theme="dark"] .pack-card img,
[data-theme="dark"] .pc-card img,
[data-theme="dark"] .product-card img { filter: brightness(.82) saturate(.94); }
[data-theme="dark"][data-night="late"] .hero-bg,
[data-theme="dark"][data-night="late"] .story-fig img,
[data-theme="dark"][data-night="late"] .img-stack img,
[data-theme="dark"][data-night="late"] .pack-card img,
[data-theme="dark"][data-night="late"] .pc-card img,
[data-theme="dark"][data-night="late"] .product-card img { filter: brightness(.62) saturate(.86); }

/* The shared footer is a fixed dark band in every phase, so it has to keep
   sinking below the page ground or it glows at night. Scoped to a direct child
   of body: collections.html has a second, legitimate <footer> (the citation
   inside the Virgil quote) that must not pick this up. */
[data-theme="dark"] body > footer { background: #0b100c !important; }
[data-theme="dark"][data-night="late"] body > footer { background: #050803 !important; }
/* Its bottom bar is styled for the lighter #161c18 band, where #5a6052 reads at
   4.6:1; on the sunken ground it falls to 3.1:1, so lift it with the ground. */
[data-theme="dark"] body > footer .footer-bottom { color: #808777; }

/* The clock can flip the phase under a page that is already open, so fade the
   change rather than snapping it. Load is unaffected: the attribute is set
   before first paint. */
html, body { transition: background-color .8s ease, color .8s ease; }
@media (prefers-reduced-motion: reduce) {
  html, body { transition: none; }
}

/* ==========================================================================
   Shared components
   ========================================================================== */

/* ── divider ─────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1.5px solid var(--c-hairline);
  margin: 18px 0;
}

/* ── uppercase eyebrow label (section kicker) ────────────── */
.eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent-text);
  margin-bottom: var(--sp-3);
}

/* ── form field label ────────────────────────────────────── */
.field-label {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-label);
  margin-bottom: var(--sp-label);
}

/* ── text input ──────────────────────────────────────────── */
.field {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  font-size: var(--fs-body);
  font-family: inherit;
  color: var(--c-text);
  margin-bottom: var(--sp-field);
  transition: border-color .15s;
}
.field:focus       { outline: none; border-color: var(--c-accent); }
.field::placeholder { color: var(--c-placeholder); }

/* ── radio pills (circle-dot + label) ────────────────────── */
.radio-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--sp-field);
}
.radio-opt { cursor: pointer; }
.radio-opt input { display: none; }
.radio-opt span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 12px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-pill);
  font-weight: 500;
  color: #3a3830;
  transition: all .15s;
  white-space: nowrap;
}
[data-theme="dark"] .radio-opt span { color: #c4b99a; }
.radio-opt span::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--c-border-dot);
  flex-shrink: 0;
  transition: all .15s;
}
.radio-opt input:checked ~ span {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-cream);
}
.radio-opt input:checked ~ span em { color: var(--c-cream) !important; }
.radio-opt input:checked ~ span::before {
  background: #fff;
  border-color: #fff;
  box-shadow: inset 0 0 0 3px var(--c-accent);
}

/* ── button (full-width dark CTA; .btn--accent for terracotta) ─ */
.btn {
  display: block;
  width: 100%;
  padding: 17px;
  background: var(--c-ink);
  color: var(--c-cream);
  border: 2px solid var(--c-ink);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn:hover    { background: var(--c-accent); border-color: var(--c-accent); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
[data-theme="dark"] .btn        { background: var(--c-accent); border-color: var(--c-accent); }
[data-theme="dark"] .btn:hover  { background: var(--c-accent-dark); border-color: var(--c-accent-dark); }

/* ── responsive: long-labelled pickers stack full-width ──── */
@media (max-width: 1040px) {
  .radio-group--stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }
  .radio-group--stack .radio-opt span {
    width: 100%;
    box-sizing: border-box;
  }
}

/* ── No sideways drag, ever ────────────────────────────────
   Two separate things, both needed.

   overflow-x on the root: a decoration wider than the viewport makes the
   DOCUMENT wider than the viewport, and then the page scrolls sideways onto
   blank background. `body { overflow-x: hidden }` alone relies on the body's
   overflow being propagated to the viewport, which only happens while the root
   is `visible` — one stylesheet setting overflow on html silently ends that.
   `clip` rather than `hidden` because clip does not create a scroll container,
   so it cannot break the sticky nav; hidden is listed first for engines that
   do not know clip yet.

   overscroll-behavior-x: that stops the RUBBER BAND. Even with nothing
   overflowing, a horizontal drag on a touch screen bounces the page and shows
   empty space behind it. This is the line that actually answers "it leaves
   empty space when you pull it sideways".

   Fixing the overflow and stopping the bounce are not the same fix, and doing
   only one of them leaves the symptom. */
html {
  overflow-x: hidden;
  overflow-x: clip;
}
html, body { overscroll-behavior-x: none; }

/* ── Land motif ───────────────────────────────────────────
   The SPQR empire map (static/svg/spqr-empire.svg) sits faintly
   behind the land sections. It carries its own colours, so this
   class only positions and fades it. It replaced a schematic of
   the consular roads. */

/* faint decorative watermark behind a section */
.land-watermark {
  position: absolute;
  pointer-events: none;
  color: var(--c-gold);
  opacity: .10;
  z-index: 0;
}

/* small inline emblem next to a wordmark or heading */
