/* ============================================================
   Kisaw — sample-site stylesheet
   (Phase 4, Session B · premium elevation Session C, 2026-08-20)
   ============================================================
   This demo wears its OWN palette. It shares nothing with
   site/css/tokens.css on purpose: a prospect must see a site that
   looks like THEIRS, not like JL Digital's brand. Only the two
   locked font files are shared (same URLs as the rest of the site,
   so a visitor coming from jldigitalph.com already has them cached).

   Direction: "tuba sunset table" — San Juan's actual dinner hour.
   The whole page is one continuous sundown: golden-hour amber at
   the top, dusk in the middle, night at the bottom — and JL's own
   dark closing band IS the night the page was heading toward.
   - Top:        sun-amber sky (the grill lights at four)
   - Middle:     rust and dusk (dinner)
   - Bottom:     night (tuba and the lamp)
   - One accent: sun-yellow, reserved for the primary action alone

   The premium elevation (2026-08-20, approved on the decision page)
   keeps the world and raises the execution:
   - the sun is a drawn object now, and it SETS as you scroll
     (CSS scroll timeline; the still high sun is the fallback)
   - the hero-to-menu seam is a horizon with the last of the light
   - film grain over the big gradient fields (kills banding on cheap
     panels, adds atmosphere; ~700 bytes of inline SVG)
   - desktop compositions: two-column golden-hour hero, staggered
     dishes, a drawn night seascape beside the directions, the form
     as a lit window
   - the lamp behaves like a lamp: brighter pool, visible cord edge,
     light falling off down the board
   - designed hover / focus / active states on everything tappable

   Every colour pair below was checked against WCAG AA (computed
   2026-08-19; elevation zones re-sampled from the render 2026-08-20;
   the header zone is pinned to the top amber so its small text never
   rides the darker stops):
     nav ink   #4a2410 on amber #f6a83c      6.82:1
     h1        #fffaf0 on worst sampled ground #d29246-zone  3.6:1 (display size, ≥3 AA large)
     lede      #fffaf0 on worst sampled ground #bb5030  4.69:1 (sampled from render, 390px)
     caption   #fde9c8 on plate #2a1520     14.4:1
     price     #f3d9b8 on dusk #5c2b3a       8.29:1
     CTA ink   #3a1c10 on sun #fbd35f       10.78:1
     menu text #f3e2cf on night #241f33     12.58:1
     menu peso #f3d9b8 on night #241f33     10.90:1 (sand — the peso
                              moved off sun-yellow when the CTA-only
                              rule landed; ledger corrected 2026-08-20)
     form text #f3e2cf on deep #1d1933     13.39:1
     input ink #2a1a12 on paper #fff8ee    15.87:1
     footer    #cfc6bd on #141422          10.81:1
     jl-text   #e9e9ed on #161826          14.54:1
     jl-accent #9184d9 on #161826           5.45:1
     sec-title #fffaf0 on seam zone #7c333a  ≥7:1 (large; sampled)
     board h3  #fde9b8 on pooled card top    ≥8:1 (sampled with the
                              raised lamp pool — light text, so the
                              pool may never brighten past this)
   Never put #ffe9c4 links on #b34a30 (4.49:1 — fails small-text AA);
   hero-zone links use #fff2dc underlined instead.
   Focus rings are per-band via --ring: sun-yellow on the dark bands,
   nav ink on the amber header, jl-accent in the JL bands.
   ============================================================ */

/* The two locked families, pointed at the SAME woff2 files the whole
   site uses (../../ because this file lives in samples/css/). Never a
   third family — differentiation comes from palette and layout. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../assets/fonts/fraunces-600.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../assets/fonts/public-sans.woff2") format("woff2");
}

:root {
  /* One committed dark-warm look. color-scheme: dark keeps native
     form controls and scrollbars from flashing white inside the
     night sections on browsers that honour it. */
  color-scheme: dark;

  /* the sundown, top to bottom */
  --amber:      #f6a83c;  /* the four-o'clock sky — header + hero top */
  --amber-deep: #e5762f;  /* the sun leaning down */
  --rust:       #b34a30;  /* the last of the light — hero bottom */
  --ember:      #8f3a32;  /* the horizon — where hero hands to menu */
  --dusk:       #5c2b3a;  /* just after the sun goes */
  --night:      #241f33;  /* early night — the menu's hour */
  --deep:       #1d1933;  /* late night — the form's hour */
  --foot:       #141422;  /* the sea after dark — fictional footer */

  /* light in the dark */
  --sun:        #fbd35f;  /* sun-yellow: the primary action — plus the
                             LIGHT SOURCES that are the world itself
                             (the drawn sun, the lamp's shade, the
                             selection highlight). Never a resting
                             surface, never a price, never a border. */
  --sun-ink:    #3a1c10;  /* text on sun-yellow */
  --bright:     #fffaf0;  /* headline white */
  --cream:      #fff2dc;  /* hero small text */
  --sand:       #f3d9b8;  /* dusk-zone secondary */
  --milk:       #f3e2cf;  /* night-zone body */
  --soft:       #cfc6bd;  /* footer text */
  --nav-ink:    #4a2410;  /* dark ink on the amber header */
  --paper:      #fff8ee;  /* form inputs — a lit window in the night */
  --paper-ink:  #2a1a12;

  /* JL Digital's own dark voice, used ONLY in the two truth bands.
     Declared here so this page never imports the main tokens file. */
  --jl-night:   #161826;
  --jl-text:    #e9e9ed;
  --jl-bright:  #f3f5fe;
  --jl-accent:  #9184d9;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pad-x: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Radius scale + two shadow tiers, used deliberately: the board is
     the deepest object on the page, the dishes the shallowest. */
  --r-m: 10px;
  --r-l: 16px;
  --shadow-rest: 0 2px 8px rgba(8, 6, 16, 0.25), 0 10px 24px rgba(8, 6, 16, 0.4);
  --shadow-raised: 0 4px 12px rgba(8, 6, 16, 0.3), 0 18px 44px rgba(8, 6, 16, 0.55);

  /* Per-band focus-ring colour: every band that changes its ground
     restates --ring so the ring never sinks into it. */
  --ring: var(--sun);

  /* Film grain: a tiled turbulence speckle. One tiny inline SVG, no
     request — the CSP already allows data: images. Painted over the
     big gradient fields to stop banding on cheap Android panels. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ---- reset-lite ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  /* Anchor links (nav → #menu etc.) land with breathing room. */
  scroll-padding-top: 24px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  /* The night is the page's resting ground; the amber lives in the
     header and hero gradients above it. Anything that overscrolls
     shows night, not white. */
  background: var(--night);
  color: var(--milk);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  /* The default grey tap flash reads as a glitch on cheap Android —
     a warm sun wash matches the page's one daylight. */
  -webkit-tap-highlight-color: rgba(251, 211, 95, 0.18);
}
img { max-width: 100%; height: auto; display: block; }
/* Kills the 300ms double-tap delay on older mobile browsers without
   touching pinch-zoom — every tappable thing on the page. */
a, button, input, select, textarea, label { touch-action: manipulation; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  line-height: 1.12;
  margin: 0 0 0.5em;
  /* Balanced rag on headings — no stranded last words. Old WebViews
     simply ignore it. */
  text-wrap: balance;
}
/* Display-size Fraunces wants a touch of negative tracking; the body
   sans stays at its natural fit. */
h1 { letter-spacing: -0.015em; }
h2 { letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a {
  color: var(--sand);
  text-underline-offset: 3px;
  transition: color 150ms var(--ease);
}
a:hover { color: var(--bright); }

/* The browser surfaces nobody draws still carry the sundown. */
::selection { background: var(--sun); color: var(--sun-ink); }
input, textarea { caret-color: var(--amber); }

/* One visible focus style everywhere — thick, offset, recoloured per
   band through --ring. */
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--foot);
  color: var(--bright);
  padding: 10px 18px;
  z-index: 10;
}
.skip-link:focus { left: 12px; top: 12px; }

.wrap {
  max-width: 1060px;
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* ---- JL truth bands (dark voice) ------------------------------- */
/* The note sits at the very top IN NORMAL FLOW so it prints, survives
   any screenshot crop, and is the first thing a prospect reads. */
.jl-note {
  background: var(--jl-night);
  color: var(--jl-text);
  padding: 14px var(--pad-x);
  font-size: 15px;
  line-height: 1.55;
  --ring: var(--jl-accent);
}
.jl-note p { margin: 0; max-width: 72ch; }
.jl-note strong { color: var(--jl-bright); font-weight: 700; }
.jl-note a { color: var(--jl-accent); }
.jl-note a:hover { color: var(--jl-bright); }

.jl-close {
  background: var(--jl-night);
  color: var(--jl-text);
  padding: clamp(56px, 9vw, 96px) var(--pad-x);
  --ring: var(--jl-accent);
}
.jl-close .inner { max-width: 720px; margin: 0 auto; }
.jl-close h2 {
  color: var(--jl-bright);
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  margin-bottom: 0.6em;
}
.jl-close p { max-width: 62ch; }
.jl-close strong { color: var(--jl-bright); }
.jl-close a { color: var(--jl-accent); }
.jl-close a:hover { color: var(--jl-bright); }
.jl-close .jl-rule {
  border: 0;
  height: 1px;
  background: rgba(233, 233, 237, 0.16);
  margin: 0 0 28px;
}
.jl-close .btn-jl {
  display: inline-block;
  background: var(--jl-accent);
  color: var(--jl-night);
  font-weight: 700;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 6px;
  margin: 6px 18px 6px 0;
  transition: background-color 150ms var(--ease), transform 120ms var(--ease);
}
.jl-close .btn-jl:hover { background: var(--jl-bright); color: var(--jl-night); }
.jl-close .btn-jl:active { transform: translateY(1px); }

/* ---- demo header ------------------------------------------------ */
/* Pinned to the TOP amber only (no gradient here) so the small nav
   ink never rides down to a stop where its 4.5:1 breaks — see the
   contrast table in the header comment. */
.site-head {
  display: flex;
  align-items: center;
  gap: 12px 22px;
  flex-wrap: wrap;
  padding: 16px var(--pad-x);
  background: var(--amber);
  color: var(--nav-ink);
  /* on amber the sun-yellow ring would vanish into the sky */
  --ring: var(--nav-ink);
}
.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--nav-ink);
  text-decoration: none;
  margin-right: auto;
}
.site-head nav {
  display: flex;
  gap: 4px 20px;
  flex-wrap: wrap;
  align-items: center;
}
.site-head nav a {
  color: var(--nav-ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  /* comfortable tap size on a phone */
  padding: 10px 2px;
  position: relative;
}
/* A dark-ink underline that slides in — compositor-only. */
.site-head nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  height: 2px;
  background: var(--nav-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms var(--ease);
}
.site-head nav a:hover::after,
.site-head nav a:focus-visible::after { transform: scaleX(1); }

/* ---- buttons ---------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  text-align: center;
  border-radius: var(--r-m);
  padding: 15px 28px;
  border: 0;
  cursor: pointer;
  transition: background-color 150ms var(--ease), transform 120ms var(--ease),
              box-shadow 120ms var(--ease);
}
/* Sun-yellow belongs to the primary action and nothing else on the
   page — the one point of full daylight left after sundown. The
   ledge it sits on finally presses: hover lifts it a hair, active
   drops it onto the ledge. */
.btn-sun {
  background: var(--sun);
  color: var(--sun-ink);
  box-shadow: 0 3px 0 #b98f2e;
}
.btn-sun:hover {
  background: #ffdf7e;
  color: var(--sun-ink);
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #b98f2e;
}
.btn-sun:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #b98f2e;
}

/* ---- hero: the golden hour -------------------------------------- */
/* One gradient carries the hour down from amber to rust to the ember
   horizon. The name and tagline sit in the LOWER half, where the
   ground has darkened past #c85a2e and white display type clears AA
   for large text. Grain rides on top of the gradient. */
.hero {
  position: relative;
  overflow: hidden;
  /* Pixel stops, not percentages: the sky must have darkened past
     #d76a2f (3.37:1 under headline white) before the name begins at
     ~70px, whatever the hero's total height is. The bottom eases to
     ember so the menu's horizon picks up the exact same value. */
  background:
    var(--grain),
    linear-gradient(180deg, var(--amber) 0, var(--amber-deep) 30px, #c85a2e 100px, var(--rust) 200px, var(--ember) 100%);
  padding: clamp(30px, 6vw, 64px) 0 clamp(56px, 9vw, 96px);
}
/* The drawn sun: a real disc with a layered halo, hanging in the
   four-o'clock sky. It replaces the old background radial so it can
   move. Decorative — aria-hidden in the markup. */
.hero .sun {
  position: absolute;
  top: 16px;
  right: 24px;
  width: clamp(110px, 14vw, 190px);
  height: clamp(110px, 14vw, 190px);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%,
    #fff6dc 0 26%, #fde9b8 40%, rgba(251, 211, 95, 0.65) 58%, rgba(251, 211, 95, 0) 72%);
  filter: drop-shadow(0 0 36px rgba(253, 233, 184, 0.75));
}
/* THE page's one scroll moment: the sun sets as you scroll toward
   dinner. Progressive — browsers without scroll timelines keep the
   still high sun (which is the designed static state), and reduced
   motion never sees it move. Compositor-only. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero .sun {
      animation: sunset linear both;
      animation-timeline: scroll(root);
      animation-range: 0 110vh;
    }
    @keyframes sunset {
      from { transform: translateY(0); opacity: 1; }
      to   { transform: translateY(240px); opacity: 0.15; }
    }
  }
}
.hero .wrap { position: relative; }
.hero h1 {
  /* vw-led at phone widths (text-only zoom cannot overflow it),
     capped before it outgrows the display register on desktop. */
  font-size: clamp(3rem, 19vw, 6rem);
  color: var(--bright);
  margin: clamp(40px, 10vw, 80px) 0 0.1em;
}
.hero .lede {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  /* Headline white, not cream: the lede's first line sits where the
     sky is still ~#bb5030, and cream lands a hair under 4.5:1 there
     (sampled 4.41 at 390px wide). White clears 4.69+ down the zone. */
  color: var(--bright);
  max-width: 44ch;
  margin-bottom: 1.4em;
}
.hero .lede b { font-weight: 800; }

/* The framed golden-hour photograph — the approved comp's one big
   move: the food is IN the first viewport. The warm under-glow is
   the grill's own coals warming the frame from below. */
.hero .shot {
  position: relative;
  border: 3px solid rgba(255, 250, 240, 0.85);
  border-radius: var(--r-m);
  overflow: hidden;
  margin: 0;
  box-shadow: 0 6px 40px rgba(229, 118, 47, 0.45), var(--shadow-rest);
}
.hero .shot img { width: 100%; }
.hero .shot figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 16px 10px;
  font-size: 14px;
  color: var(--cream);
  /* solid enough under the text line for its 14.4:1 — the gradient
     above it only eases the photo into the caption */
  background: linear-gradient(transparent, rgba(42, 21, 32, 0.88) 55%);
}

/* three prices under the photo, then the one sun-lit action */
.hero .trio {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 34px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-variant-numeric: tabular-nums;
}
.hero .trio b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--bright);
}
.hero .trio li { color: var(--cream); font-size: 15px; }
.hero .cta { margin-top: 16px; }

/* Desktop: a true two-column golden hour — identity left, the framed
   photo right in a taller crop, hanging past the horizon into the
   dusk. No markup change: the grid places the existing children. */
@media (min-width: 900px) {
  .hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: clamp(36px, 5vw, 72px);
    align-items: start;
  }
  .hero h1,
  .hero .lede,
  .hero .trio,
  .hero .cta { grid-column: 1; }
  .hero .shot {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: stretch;
    /* the photo's bottom edge crosses the hero→menu seam */
    margin-bottom: -72px;
    z-index: 1;
  }
  .hero .shot img {
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
  .hero .trio { margin-top: 34px; }
  .hero .cta { margin-top: 26px; }
}

/* ---- menu: the lamplit hour ------------------------------------- */
/* The seam IS the horizon: the menu opens on the same ember the hero
   ended on, with a band of last light lying right on the joint, then
   falls to dusk and night. */
.menu {
  background:
    var(--grain),
    radial-gradient(60% 44px at 50% 0%, rgba(229, 118, 47, 0.3), transparent),
    linear-gradient(180deg, var(--ember) 0, var(--dusk) 140px, var(--night) 100%);
  padding: clamp(56px, 9vw, 104px) 0;
}
@media (min-width: 900px) {
  /* room for the hero photo hanging over the horizon */
  .menu { padding-top: clamp(96px, 12vw, 132px); }
}
.sec-title {
  font-size: clamp(1.8rem, 5vw, 3.3rem);
  color: var(--bright);
  max-width: 20ch;
}
.sec-intro {
  color: var(--sand);
  max-width: 56ch;
  margin-bottom: 2.2em;
}

.menu-grid {
  display: grid;
  gap: clamp(28px, 5vw, 44px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 860px) {
  /* photos on the left, the lamplit card holding the right */
  .menu-grid { grid-template-columns: 1.1fr 1fr; }
}
.dishes { display: grid; gap: clamp(20px, 4vw, 32px); }
.dish { margin: 0; position: relative; }
.dish img {
  width: 100%;
  border-radius: var(--r-m);
  box-shadow: var(--shadow-rest);
  /* one shared tonal wash puts both dishes in the same hour as the
     dusk around them — the crops are chosen, not inherited */
  filter: saturate(1.06) contrast(1.03) sepia(0.06);
}
/* deliberate crops: the sinugba wide, the kinilaw tall — different
   on purpose, both decided. aspect-ratio degrades to the intrinsic
   ratio on old WebViews, which is the previous design. */
.dish:nth-child(1) img { aspect-ratio: 4 / 3; object-fit: cover; }
.dish:nth-child(2) img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 860px) {
  /* staggered, the second dish leaning toward the lamp's column —
     the two columns finish together instead of ragged */
  .dish:nth-child(2) {
    width: 88%;
    margin-left: auto;
    margin-right: -28px;
    z-index: 1;
  }
}
.dish figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 2px 0;
  font-size: 15px;
  color: var(--milk);
}
.dish figcaption .peso {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  /* sand, not sun-yellow: the page's one daylight belongs to the CTA */
  color: var(--sand);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The card the lamp hangs over: tonight's full list. The glow is the
   lamp's own light, not decoration — it is the scene. On desktop the
   card rides along as the dish photos scroll (sticky costs no JS and
   fills the column's dead space with motion that means something). */
.board {
  position: sticky;
  top: 24px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(251, 211, 95, 0.22), transparent 60%),
    #241a28;
  border-radius: var(--r-l);
  /* the lamp's light catches the card's top edge */
  border-top: 1px solid rgba(253, 233, 184, 0.28);
  padding: 40px 24px 26px;
  box-shadow: var(--shadow-raised);
}
/* cord and lamp, drawn in CSS: a dark drop from the top edge with a
   lit edge so it reads against the dusk, and a sun-glass shade that
   actually lights the card below it */
.board::before {
  content: "";
  position: absolute;
  left: 50%; top: -26px;
  transform: translateX(-50%);
  width: 8px; height: 26px;
  background: linear-gradient(90deg, var(--foot) 0 5px, rgba(253, 233, 184, 0.35) 5px);
}
.board::after {
  content: "";
  position: absolute;
  left: 50%; top: -2px;
  transform: translateX(-50%);
  width: clamp(34px, 4vw, 46px);
  height: clamp(20px, 2.4vw, 27px);
  border-radius: 4px 4px 14px 14px;
  background: var(--sun);
  box-shadow: 0 8px 34px 8px rgba(251, 211, 95, 0.45);
}
.board h3 {
  font-size: 1.5rem;
  color: #fde9b8;
  text-align: center;
  margin-bottom: 0.9em;
}
.board dl { margin: 0; }
/* The light falls off down the list: rows near the lamp glow a step
   brighter than the ones at the card's dark bottom. Dotted leaders
   carry the eye from dish to price, the way a chalk board rules. */
.board .mi {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px dashed rgba(253, 233, 184, 0.3);
}
.board .mi dt { order: 1; }
.board .mi::after {
  content: "";
  order: 2;
  flex: 1;
  min-width: 18px;
  border-bottom: 1px dotted rgba(253, 233, 184, 0.35);
  transform: translateY(-4px);
}
.board .mi dd { order: 3; }
.board .mi:nth-child(n+3) { border-bottom-color: rgba(253, 233, 184, 0.2); }
.board .mi:nth-child(n+5) { border-bottom-color: rgba(253, 233, 184, 0.13); }
.board .mi:last-child { border-bottom: 0; }
.board dt { font-weight: 600; color: var(--bright); font-size: 16px; }
.board dt small {
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--sand);
}
.board dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  /* sand family for the same reason as .peso: only the CTA wears sun */
  color: var(--sand);
  font-size: 1.1rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.board .board-note {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--sand);
  text-align: center;
}

/* ---- find us: night --------------------------------------------- */
.find {
  background: linear-gradient(180deg, var(--night) 0%, var(--deep) 100%);
  padding: clamp(56px, 9vw, 104px) 0 clamp(40px, 7vw, 72px);
}
.find address {
  font-style: normal;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  color: var(--bright);
  margin-bottom: 0.8em;
}
.find p { max-width: 56ch; }
.find .hours {
  display: inline-block;
  border: 1px solid rgba(243, 226, 207, 0.3);
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--milk);
  font-size: 15px;
  margin-top: 6px;
}
/* Desktop: the directions get a companion — a drawn night seascape.
   Horizon line, the moon's path shimmering on the water, and the
   line that deserves display type. Not a map (the written directions
   stay the way directions actually work here); pure gradients, and
   decorative, so it hides from assistive tech in the markup. */
.find-scene { display: none; }
@media (min-width: 900px) {
  .find .wrap {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    column-gap: clamp(36px, 5vw, 72px);
    align-items: center;
  }
  .find-scene {
    display: flex;
    align-items: flex-end;
    min-height: 320px;
    border-radius: var(--r-l);
    border: 1px solid rgba(243, 226, 207, 0.18);
    padding: 26px 28px;
    overflow: hidden;
    background:
      /* the moon path on the water */
      linear-gradient(180deg, transparent 52%, rgba(253, 233, 184, 0.12) 53%, transparent 56%, rgba(253, 233, 184, 0.07) 60%, transparent 64%, rgba(253, 233, 184, 0.05) 70%, transparent 76%),
      /* the moon, low over the sea */
      radial-gradient(46px 46px at 74% 38%, rgba(253, 233, 184, 0.85) 0 26%, rgba(253, 233, 184, 0.25) 55%, transparent 75%),
      /* sky above the horizon, sea below it */
      linear-gradient(180deg, #211d31 0 52%, #171428 52% 100%);
  }
  .find-scene .scene-line {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.9rem;
    color: var(--bright);
    margin: 0;
    text-wrap: balance;
  }
  /* The scene says it in display type at this width — the chip does
     not need to say it twice on one screen. */
  .find .hours .sun-line { display: none; }
}

/* ---- book: the lit window --------------------------------------- */
.book {
  background: var(--deep);
  padding: clamp(40px, 7vw, 72px) 0 clamp(56px, 9vw, 104px);
}
/* The form IS the lit window in the night — a warmer surface with
   lamplight leaking out from behind it into the deep. */
.book form {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  max-width: 560px;
  background: #262040;
  border: 1px solid rgba(243, 226, 207, 0.14);
  border-radius: var(--r-l);
  padding: clamp(20px, 4vw, 32px);
  box-shadow: 0 0 60px 8px rgba(246, 168, 60, 0.12), var(--shadow-rest);
}
@media (min-width: 640px) {
  .book form { grid-template-columns: 1fr 1fr; }
  .book .field-wide, .book .form-actions { grid-column: 1 / -1; }
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 15px; color: var(--milk); }
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  /* 16px floor so old-Android browsers never zoom the page on focus */
  font-size: 16px;
  color: var(--paper-ink);
  background: var(--paper);
  border: 1.5px solid #6b5a6e;
  border-radius: 8px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color 150ms var(--ease);
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--amber); }
/* the native chevron replaced with a drawn one that matches the ink */
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232a1a12' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.field textarea { min-height: 110px; resize: vertical; }
.book .aside-note { color: var(--sand); font-size: 15px; margin: 14px 0 0; }

/* ---- fictional footer ------------------------------------------- */
.site-foot {
  background: var(--foot);
  padding: 36px var(--pad-x) 44px;
  color: var(--soft);
  font-size: 15px;
}
.site-foot .foot-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--bright);
  margin-bottom: 6px;
}
.site-foot p { margin: 0 0 4px; }
.site-foot a { color: var(--soft); }
.site-foot a:hover { color: var(--bright); }

/* ---- motion: one authored moment -------------------------------- */
/* The golden hour arrives once, on load: name, line, photo rise as
   the sun would let them. Compositor-only, and fully disabled under
   reduced motion. The only other motion is the sun's scroll-driven
   setting, declared beside the sun itself. */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 0.7s var(--ease) both; }
  .rise-2 { animation-delay: 0.12s; }
  .rise-3 { animation-delay: 0.24s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---- print ------------------------------------------------------- */
/* A leave-behind that survives the office printer: the sundown goes
   white, text goes black, the truth notes stay visible and readable. */
@media print {
  body, .hero, .menu, .find, .book, .site-foot, .site-head { background: #fff; color: #000; }
  .hero h1, .hero .lede, .hero .lede b, .hero .trio b, .hero .trio li,
  .hero .shot figcaption,
  .sec-title, .sec-intro, .board dt, .board dt small, .board dd, .board h3,
  .dish figcaption, .dish figcaption .peso, .find address, .find p,
  .field label, .site-foot, .site-foot .foot-brand, .brand, .site-head nav a { color: #000; }
  .hero .shot figcaption { background: #fff; position: static; }
  .board, .find .hours, .book form { background: #fff; border: 1px solid #000; box-shadow: none; }
  .board::before, .board::after { display: none; }
  .hero .sun, .find-scene { display: none; }
  .dish img { filter: none; }
  .jl-note, .jl-close { background: #fff; color: #000; border: 2px solid #000; }
  .jl-note a, .jl-close a, .jl-close h2, .jl-note strong, .jl-close strong { color: #000; }
  .jl-close .btn-jl, .btn { border: 2px solid #000; background: #fff; color: #000; box-shadow: none; }
  .rise, .rise-2, .rise-3 { animation: none; }
  .site-head nav { display: none; } /* anchor links mean nothing on paper */
}