/* ---------------------------------------------------------------------------
   THEME — THE GUEST'S PAGES · "FALL INTO FOLIAGE" POSTER LOOK
   ---------------------------------------------------------------------------
   Used by the pages a guest sees: the event home page, picking a time, giving
   details, sending a deposit, and their own booking afterwards. Nothing a
   vendor or an operator opens loads this file.

   THIS IS THE APPROVED PROTOTYPE'S EXACT PALETTE (Heather, Aug 2026). Every
   hex below is from the spec — do not substitute, round or "improve" any of
   them. The look, in the spec's own three rules:

     1. HARD EDGES, NO ROUNDING. Boxes carry 3px ink borders; thin dividers
        are 1.5px. Chips are square.
     2. OFFSET DROP SHADOW, NOT BLUR. 8px 8px 0 — a hard poster shadow.
        No gradients anywhere.
     3. RUST IS THE ONLY BRIGHT COLOUR. #c14f1f for the CTA, time markers and
        "spots left"; everything else is ink-brown on cream. Backgrounds are
        never tinted with it.

   ⚠️ ONE LOOK, BOTH SCHEMES. The approved design commits to sand-and-cream
   and defines no dark palette, so the old dark-mode block is deliberately
   GONE — inventing dark values would break "do not substitute". A guest at
   night gets a light page, like a real poster. If a dark variant is ever
   designed, it comes from another approved spec, not from guesswork here.

   ⚠️ THIS FILE ALSO CARRIES THE FACE'S STRUCTURAL SIGNATURE — the section at
   the bottom sets border weights, square chips, uppercase display type and
   mono meta labels on this face's own classes. That bends the "colours and
   fonts only" rule on purpose: those treatments ARE this theme's identity,
   and keeping them here means the poster look arrives and leaves as ONE file
   while site.css/app.css stay theme-neutral for the staff and landing faces.

   ⚠️ TWO FILES ARE PAIRED WITH THIS ONE:
   - scripts/brand.js measures per-host colours against THIS surface and THIS
     button-text colour (SURFACE / ON_DARK constants). Change --c-surface or
     --c-ink-inverse here and change them there.
   - --c-surface is duplicated by hand in each guest page's
     <meta name="theme-color"> (a meta tag cannot read a CSS variable):
         pages/index.html · pages/book.html · pages/confirmation.html
--------------------------------------------------------------------------- */

/* Archivo (display) + Karla (body) — the spec's exact import. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Karla:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
  /* --- Brand ------------------------------------------------------------ */
  /* Rust is the CTA: the RESERVE bar of the prototype is .button here. Hover
     goes to INK — further into the poster, never a softened rust. */
  --c-brand:            #c14f1f;
  --c-brand-strong:     #2b1d12;
  --c-accent:           #c14f1f;

  /* --- Surfaces --------------------------------------------------------- */
  /* HER CALL (Aug 31): the page is the same cream as the tiles and buttons,
     not the darker sand it used to be. The look holds because nothing here
     was ever separated by tone — every box on this face is drawn by an ink
     border, so a card on a page of its own colour still reads as a card. */
  --c-surface:          #f4ecdd;  /* paper/cream — MIRRORED IN the three pages */
  --c-surface-raised:   #f4ecdd;  /* the same: cards sit flat on the page      */
  --c-surface-sunken:   #e7ddc8;  /* the old sand, now a genuine recess        */

  /* --- Ink -------------------------------------------------------------- */
  --c-ink:              #2b1d12;  /* ink — headings, borders, dark bars      */
  --c-ink-muted:        #4a3a2a;  /* body brown — paragraph text             */
  --c-ink-faint:        #7a6a55;  /* muted brown — meta labels, captions     */
  --c-ink-inverse:      #f4ecdd;  /* cream text on rust/ink blocks           */

  /* --- Lines ------------------------------------------------------------ */
  /* Every line on this face is ink. Weight, not colour, tells box from
     divider — see the structural section below. */
  --c-line:             #2b1d12;
  --c-line-strong:      #2b1d12;

  /* --- Status ----------------------------------------------------------- */
  /* The spec is silent on status colours, so the hues stay the theme's
     earthy originals and only the washes are re-warmed onto this paper.
     Colour is never the only signal — every status carries words too. */
  --c-ok:               #3f6b46;
  --c-warn:             #9a6b1f;
  --c-danger:           #8f3a2f;
  --c-ok-wash:          #e6e9d4;
  --c-warn-wash:        #f0e5c7;
  --c-danger-wash:      #eeddd1;

  /* --- Focus and depth -------------------------------------------------- */
  --c-focus:            #c14f1f;
  --c-backdrop:         rgba(43, 29, 18, 0.5);

  /* The poster shadow: hard offset, zero blur, and never a glow. */
  --shadow-1: 8px 8px 0 rgba(43, 29, 18, 0.18);
  --shadow-2: 12px 12px 0 rgba(43, 29, 18, 0.18);

  /* --- Paper ------------------------------------------------------------ */
  /* A guest prints nothing, but the contract asks for them. */
  --c-paper:            #ffffff;
  --c-paper-ink:        #1a1a1a;
  --c-paper-line:       #b0b0b0;

  /* --- Type ------------------------------------------------------------- */
  --font-display: "Archivo", "Archivo Black", system-ui, sans-serif;
  --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* --- Shape (guest face only) ------------------------------------------ */
  /* base.css sets the rounded defaults every face shares; this face square-
     cuts everything. Only guest pages load this file, so the staff tools and
     the landing keep their corners. */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
}

/* ===========================================================================
   THE POSTER STRUCTURE — this face's own signature
   ===========================================================================
   Rules below reach structural classes on purpose (see the header note).
   Two border tiers, from the spec: BOXES are 3px ink, THIN DIVIDERS 1.5px.
=========================================================================== */

/* --- Display type: heavy, uppercase, tight ------------------------------- */

.lede,
.section-title,
.card__title,
.deposit__amount {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* --- Meta labels: small mono caps, wide-tracked -------------------------- */

.card__vendor,
.eyebrow,
.event-facts dt,
.handle__where,
.slot-day {
  font-family: var(--font-mono);
  font-size: 0.625rem;              /* the spec's 10px meta size */
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

/* The vendor's name above a card title is the poster's little kicker. */
.card__vendor { color: var(--c-ink); }

/* --- Links: ink at rest, rust on hover (the spec's own inversion) -------- */

:where(a) { color: var(--c-ink); }
:where(a):hover { color: var(--c-accent); }

/* --- Boxes: 3px ink, square, offset shadow ------------------------------- */

.card {
  border-width: 3px;
}

.note {
  border-width: 1.5px;
  border-left-width: 4px;
}

.field input,
.field textarea,
.move-select {
  border-width: 3px;
  background: var(--c-surface-raised);
}

.deposit {
  border: 3px solid var(--c-ink);
}

dialog { border-width: 3px; }

.skip { border-width: 3px; }

.message { border-width: 1.5px; border-left-width: 4px; }

/* --- Buttons: the RESERVE bar ------------------------------------------- */

.button {
  border: 3px solid var(--c-ink);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.button--quiet { border-color: var(--c-ink); }

/* --- Time chips: square, 3px ink, rust for what matters ------------------ */

.slot {
  border-width: 3px;
}

/* Three to a row leaves each chip about a third of a phone — the type comes
   down to match, and the border with it. */
.slot__time {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
}

.slot { border-width: 2px; }

/* "SPOTS LEFT" is one of rust's three jobs — bold, like every other rust
   mark, and tracked in rather than out now the chip is a third of a row. */
.slot__state {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-accent);
}

/* A taken time steps back: thin muted dashes, and its state goes quiet —
   rust is for spots you can still have. */
.slot[disabled] {
  border-width: 1.5px;
  border-color: var(--c-ink-faint);
}
.slot[disabled] .slot__state { color: var(--c-ink-faint); }

.slot--chosen,
.slot[aria-pressed="true"] {
  border-width: 3px;
  border-color: var(--c-ink);
  background: var(--c-surface-raised);
}

/* --- Small square chips --------------------------------------------------- */

.fact {
  border: 1.5px solid var(--c-ink);
  border-radius: 0;
  background: var(--c-surface-raised);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

.status-word {
  border-radius: 0;
  border-width: 1.5px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- Thin rules ----------------------------------------------------------- */

.foot { border-top-width: 1.5px; }

.handle { border: 1.5px solid var(--c-ink); }

/* --- The poster event page ------------------------------------------------ */

.poster-title {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* The date strip: the day in ink, the hours in rust — both mono caps. */
.poster-strip__date,
.poster-strip__time,
.lineup-head__spots,
.lineup-row__meta,
.host-row__where {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The row meta shares its width with a photo and a button, but 10px mono was
   working against the one thing this line has to do — be read. Bumped (her
   call, Aug 31); the length coming off the line pays for the extra width. */
.lineup-row__meta {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.poster-strip__date { color: var(--c-ink); }
.poster-strip__time { color: var(--c-accent); }
.lineup-head__spots { color: var(--c-accent); }
.lineup-row__meta,
.host-row__where { color: var(--c-ink-faint); }

/* The date strip closes on its own rule, above the title. */
.poster-strip { border-bottom: 3px solid var(--c-ink); }

/* The address reads as an address — mixed case, not shouted. */
.host-row__where { text-transform: none; letter-spacing: 0.02em; }

.hero__img { border-width: 3px; border-color: var(--c-ink); }

.hero__band {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 800;
}

.lineup > li { border-color: var(--c-ink); border-bottom-width: 1.5px; }
/* The first card draws NO rule of its own: the "Choose your adventure"
   heading above it carries the section-weight rule now, and two would read
   as a box around the heading. */
.lineup > li:first-child { border-top-width: 0; }
/* The LAST card closes on the next section's own rule rather than drawing a
   second one a gap above it — two parallel lines where the design has one. */
.lineup > li:last-child { border-bottom-width: 0; }

.lineup-row__img { border: 1.5px solid var(--c-ink); }

.lineup-row__title {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* "N OF M SPOTS OPEN" — rust's job, in mono caps, at the row's own scale.
   BOLD rather than bigger (her call): rust carries the urgent facts on this
   page, and weight makes them carry without growing the type — which also
   buys back the contrast the small sizes cost. */
.lineup-row__spots {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Every other rust mark on this face, same treatment, same size. */
.poster-strip__time,
.lineup-head__spots,
.chart__bar--chip > span {
  font-weight: 700;
}

/* The row's button is the prototype's SMALL ink block, not a second rust
   bar — rust stays reserved for the availability marks. Compact type to
   match its compact box. */
.lineup-row__btn--rsvp {
  background: var(--c-ink);
  border-color: var(--c-ink);
  border-width: 1.5px;
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
}
.lineup-row__btn--rsvp:hover {
  background: var(--c-brand);
  border-color: var(--c-ink);
}

.tile { border-width: 3px; }

.tile__bar {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.who-row__logo { border-width: 2px; }

.reserve-bar {
  border-width: 3px;
  box-shadow: 0 -6px 0 rgba(43, 29, 18, 0.12);
}

.reserve-bar__tally {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* The reserve bar's button is cream-outlined on rust, like the prototype. */
.reserve-bar .button {
  background: transparent;
  border-color: var(--c-ink-inverse);
  color: var(--c-ink-inverse);
}
.reserve-bar .button:hover {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-ink-inverse);
}

/* --- The schedule chart --------------------------------------------------- */
/* The spec's two lineup browns exist exactly for these bars. All-night
   strips rotate ink → brown → brown; a one-off block is rust at its hour. */

/* The approved chart, measured: a thick rule under the heading, small mono
   "5PM" hours, thin single-line strips, two-line rust blocks with the time
   underneath. The strip text is NOT css-uppercased — the name arrives in
   caps and "· all night" stays lowercase, exactly as the design writes it. */
/* ⚠️ The chart carries NO rule of its own. The thick rules on this page sit
   ABOVE each section's heading (see the section-divider block below) and
   above the first lineup row — a rule between THE LINEUP and its own axis
   reads as a divider inside a section rather than between two. */

.chart__axis {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.chart__bar > span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.chart__bar-time {
  font-weight: 700;
}

.chart__bar--ink  > span { background: #2b1d12; }
.chart__bar--b1   > span { background: #8a5a2b; }
.chart__bar--b2   > span { background: #a8703d; }
.chart__bar--rust > span { background: #c14f1f; width: auto; }

/* A free moment — the raffle drawing — is the prototype's dashed chip:
   rust words in a dashed rust outline, nothing filled in, time over name.
   SMALL on purpose — it is a marker for a moment, and a wide box reads as a
   long block on a strip where width means duration. */
.chart__bar--chip > span {
  background: transparent;
  border: 1.5px dashed #c14f1f;
  color: #c14f1f;
  width: auto;
  align-items: center;
  padding: 2px 6px;
  min-height: 0;
  font-size: 0.625rem;
  line-height: 1.25;
}

/* --- The maker page ------------------------------------------------------- */

.detail-photo__img { border: 3px solid var(--c-ink); }

.detail-ph { border: 1.5px dashed var(--c-ink-faint); }

/* One-line chips in the approved page's own type: "20 MIN", "$75",
   "$25 DEPOSIT" — bold display caps in a 1.5px ink box. */
.fact--stat {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-ink);
  border-width: 1.5px;
}

.lineup-row__ph { border: 1.5px dashed var(--c-ink-faint); }

/* Word-only choices (the placement list) sit in a compact row of outlined
   buttons, like the approved page — not a stack of full-width boxes. */
.choices--text {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.choices--text li { display: contents; }

.choices--text .choice {
  width: auto;
  min-height: 0;
  padding: 9px 14px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  border: 1.5px solid var(--c-ink);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.2;
}

/* The ink fill alone marks the chosen one — no extra word (her call).
   aria-checked still says it out loud for anyone not looking at colour. */
.choices--text .choice__tick { display: none; }

.choices--text .choice[aria-checked="true"] {
  background: var(--c-ink);
  color: var(--c-ink-inverse);
}

/* --- Section rules on the maker page: the approved page's thick dividers. */
/* --- Section dividers -----------------------------------------------------
   The approved pages are ruled between sections, never inside one: a thick
   ink line above each heading. Written once here for both faces of the guest
   experience — the party page's sections and the maker page's steps. */
#experiences-view,
#amenities-view,
#who-view,
#lineup-choose,
.page--detail #design-section,
.page--detail #placement-section,
.page--detail #step-times,
.page--detail #step-details,
.page--detail #step-deposit {
  border-top: 3px solid var(--c-ink);
  padding-top: var(--space-4);
}

/* --- The flash sheet: its rust button and its popup ----------------------- */

/* Rust with the ink border, like PAY $25 — this face's way of saying "the
   one to tap". Cream on rust measures 4.80. */
.button--rust {
  background: var(--c-brand);
  border-color: var(--c-ink);
  color: var(--c-ink-inverse);
}

.button--rust:hover {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-ink-inverse);
}

/* The popup wears the poster: hard ink frame, cream chrome, the page dimmed
   behind it with the theme's own backdrop brown. */
.sheet-dialog {
  border: 3px solid var(--c-ink);
  border-radius: 0;
  background: var(--c-surface);
}

.sheet-dialog::backdrop {
  background: var(--c-backdrop);
}

.sheet-dialog__bar {
  border-bottom: 2px solid var(--c-ink);
}

/* --- The RSVP screen, to the approved page's letter ----------------------- */

.hold-bar {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.hold-bar__clock {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.rsvp-table { border-width: 2px; }
.rsvp-table__val--rust { color: #c14f1f; }

/* Placeholder-labelled fields, like the approved form. */
.rsvp-form .field input::placeholder { color: var(--c-ink-faint); }
.rsvp-form .field input { border-width: 2px; }

.pay-box { border-width: 2px; }

.pay-row__handle { font-family: var(--font-mono); font-size: 0.8125rem; }

/* RUST, not ink (her call): this is the one thing on the screen a guest must
   actually go and do, and rust is what this face uses to say so. The ink
   border stays — every box on this page is drawn by one. Cream on rust
   measures 4.80, comfortably readable. */
.pay-row__btn {
  background: var(--c-brand);
  border-color: var(--c-ink);
  color: var(--c-ink-inverse);
  font-size: 0.75rem;
}

.pay-row__btn:hover {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-ink-inverse);
}

.rsvp-warn { border-width: 2px; }
.rsvp-warn__head {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* SUBMIT RSVP sleeps in the approved tan until the box is ticked. */
.rsvp-submit[disabled] {
  background: #b6a888;
  border-color: #b6a888;
  color: var(--c-ink-inverse);
  opacity: 1;
}

/* A SELECTED time fills ink, exactly like the approved grid. The :hover
   variants are spelled out because app.css's own hover rule (rust border,
   sunken fill) is MORE specific and was winning the moment the finger was
   still over the button — cream text on a cream fill, unreadable. */
.slot[aria-pressed="true"],
.slot[aria-pressed="true"]:hover:not([disabled]) {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-ink-inverse);
}
.slot[aria-pressed="true"] .slot__state { color: var(--c-ink-inverse); }

/* The venue chip reads as the others until it is touched, then it answers in
   rust like every other live thing on this face. */
.fact--link:hover,
.fact--link:focus-within {
  border-color: var(--c-accent);
}

.fact--link .fact__link:hover,
.fact--link .fact__link:focus-visible {
  color: var(--c-accent);
}

/* The film wears the same 3px ink frame as the still it replaces. */
.hero__video { border-width: 3px; border-color: var(--c-ink); }