/* ============================================================
   Daylight Coffee — demo site stylesheet
   Design source: Claude Design export "daylight" —
   _ds/daylight-coffee-design-system-59e7d03c-ec64-407f-84c6-81a8404589d9/
   (readme.md + tokens/*.css) and the canvases Home / Menu / About /
   Contact, plus "Hero Directions" (art direction; the Home canvas
   commits to direction 1c — signboard band + 02-126 plaque).

   The token blocks below are encoded VERBATIM from the export's
   tokens/*.css. AA-safe variants follow, each carrying its measured
   contrast ratio and the reason it exists.
   ============================================================ */

/* ---------- tokens/colors.css (verbatim) ----------
   Palette read off the real stall: signboard charcoal, menu-board cream,
   the orange coffee bean in the mark, matcha green from the drinks, kopi brown. */
:root{
  --ink-900:#16181c;--ink-800:#23272f;--ink-700:#333945;--ink-600:#4a505c;--ink-400:#8a9099;--ink-200:#c8ccd2;
  --cream-050:#faf6ee;--cream-100:#f5efe3;--cream-200:#f0e8d9;--cream-300:#e3d8c4;--cream-400:#cfc0a6;
  --paper:#ffffff;
  --bean-100:#fbe4d2;--bean-300:#f0a06a;--bean-500:#e4712a;--bean-600:#c55a1b;--bean-700:#9c4514;
  --sun-200:#fbeec2;--sun-400:#f2c14e;--sun-600:#d19b28;
  --matcha-100:#e6efd6;--matcha-300:#adc481;--matcha-500:#6e8b4e;--matcha-700:#4c6335;
  --kopi-300:#c89c6e;--kopi-500:#96683c;--kopi-700:#6f4526;
  --berry-500:#9c2f47; /* DERIVED, not observed — error states only */

  /* semantic aliases — use these in components */
  --text-primary:var(--ink-900);--text-secondary:var(--ink-600);--text-muted:var(--ink-400);
  --text-inverse:#fff;--text-on-ink:#f5efe3;--text-accent:var(--bean-500);--text-price:var(--ink-900);
  --surface-page:var(--cream-050);--surface-card:var(--paper);--surface-sunk:var(--cream-100);
  --surface-board:var(--cream-200);--surface-ink:var(--ink-800);--surface-ink-deep:var(--ink-900);
  --border-subtle:var(--cream-300);--border-strong:var(--ink-900);--border-on-ink:rgba(245,239,227,.22);
  --accent:var(--bean-500);--accent-hover:var(--bean-600);--accent-press:var(--bean-700);--accent-tint:var(--bean-100);
  --focus-ring:var(--bean-500);
  --status-success:var(--matcha-500);--status-success-tint:var(--matcha-100);
  --status-info:var(--sun-400);--status-info-tint:var(--sun-200);
  --status-error:var(--berry-500);
  --link:var(--bean-600);--link-hover:var(--bean-700);
  --sticker-keyline:#fff;
}

/* ---------- tokens/typography.css (verbatim) ---------- */
:root{
  --text-display-1:clamp(48px,7vw,92px);--text-display-2:clamp(36px,4.6vw,60px);
  --text-h1:40px;--text-h2:30px;--text-h3:22px;--text-h4:18px;
  --text-body-lg:18px;--text-body:16px;--text-body-sm:14px;--text-caption:13px;--text-micro:11px;
  --lh-tight:1.02;--lh-snug:1.16;--lh-normal:1.45;--lh-loose:1.62;
  --track-tighter:-0.03em;--track-tight:-0.015em;--track-normal:0;--track-wide:0.06em;--track-widest:0.14em;
  --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-black:800;

  --type-logotype:var(--weight-bold) var(--text-h2)/var(--lh-tight) var(--font-display);
  --type-display:var(--weight-black) var(--text-display-1)/var(--lh-tight) var(--font-display);
  --type-heading:var(--weight-bold) var(--text-h2)/var(--lh-snug) var(--font-display);
  --type-menu-item:var(--weight-bold) var(--text-h4)/1.2 var(--font-display);
  --type-price:var(--weight-semibold) var(--text-body)/1.2 var(--font-display);
  --type-body:var(--weight-regular) var(--text-body)/var(--lh-normal) var(--font-body);
  --type-desc:var(--weight-regular) var(--text-body-sm)/1.35 var(--font-body);
  --type-label:var(--weight-bold) var(--text-micro)/1.1 var(--font-display);
}

/* ---------- tokens/fonts.css (verbatim declaration; the two families are
   loaded from separate <link> tags in each page, not this @import) ---------- */
:root{
  --font-display:"Archivo","Helvetica Neue",sans-serif;
  --font-body:"Hanken Grotesk","Helvetica Neue",sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;
}

/* ---------- tokens/spacing.css (verbatim) ---------- */
:root{
  --space-0:0;--space-1:2px;--space-2:4px;--space-3:6px;--space-4:8px;--space-5:12px;--space-6:16px;
  --space-7:20px;--space-8:24px;--space-9:32px;--space-10:40px;--space-11:48px;--space-12:64px;
  --space-13:80px;--space-14:120px;
  --gutter-page:24px;--gutter-page-lg:56px;
  --measure-prose:62ch;--width-content:1160px;--width-narrow:720px;
  --section-y:clamp(56px,8vw,120px);
}

/* ---------- tokens/radius.css (verbatim) ---------- */
:root{
  --radius-none:0;--radius-xs:3px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;
  --radius-pill:999px;--radius-circle:50%;
  --border-hairline:1px;--border-medium:2px;--border-thick:3px;
}

/* ---------- tokens/elevation.css (verbatim) ---------- */
:root{
  --shadow-none:none;
  --shadow-sm:0 1px 2px rgba(22,24,28,.07);
  --shadow-md:0 2px 8px rgba(22,24,28,.09);
  --shadow-lg:0 12px 32px rgba(22,24,28,.14);
  --shadow-inset-board:inset 0 0 0 1px var(--cream-300);
  --shadow-sticker:drop-shadow(0 0 3px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 3px 5px rgba(22,24,28,.28));
  --overlay-scrim:linear-gradient(180deg,rgba(22,24,28,0) 0%,rgba(22,24,28,.72) 100%);
}

/* ---------- tokens/motion.css (verbatim) ---------- */
:root{
  --dur-fast:120ms;--dur-base:180ms;--dur-slow:260ms;--dur-bob:2600ms;
  --ease-out:cubic-bezier(.2,.7,.3,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--ease-pop:cubic-bezier(.2,1.3,.4,1);
  --transition-control:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
@keyframes dl-bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-6px) rotate(1.5deg)}}

/* ============================================================
   AA-SAFE VARIANTS
   Four pairs in the export's palette fail WCAG AA. The original
   tokens above are untouched and stay in use for decoration; the
   variants below carry every piece of real text.
   Ratios measured against #faf6ee (cream page) and #ffffff (card).
   ============================================================ */
:root{
  /* --ink-400 #8a9099 measures 2.98:1 on #faf6ee — FAILS AA.
     Same hue family, darkened: 4.84:1 on #faf6ee, 5.22:1 on #fff. */
  --ink-400-aa:#676d76;

  /* --bean-500 #e4712a measures 3.13:1 on #fff and 2.90:1 on #faf6ee —
     FAILS AA both as text and as a fill under white text.
     --bean-700 #9c4514: 6.42:1 on #fff, 5.95:1 on #faf6ee, and
     white-on-it is 6.42:1. Used for menu descriptions, accent links,
     the RECOMMENDED badge, filled accent buttons and the promo strip. */
  --accent-aa:var(--bean-700);

  /* --ink-200 #c8ccd2 measures 1.61:1 on #fff — FAILS AA. The en dash it
     paints is a real value ("we don't make this"), so it gets the AA grey. */
  --dash-aa:var(--ink-400-aa);
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--surface-page);color:var(--text-primary);
  font:var(--weight-regular) var(--text-body-lg)/var(--lh-normal) var(--font-body);
  text-wrap:pretty;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-bold);margin:0;text-transform:uppercase}
p{margin:0}
a{color:var(--link);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--link-hover);text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:var(--border-medium) solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-xs);
}
::selection{background:var(--sun-400);color:var(--ink-900)}

.skip-link{
  position:absolute;left:var(--space-6);top:-64px;z-index:90;
  background:var(--ink-900);color:#fff;padding:12px 18px;border-radius:var(--radius-sm);
  font:var(--type-label);letter-spacing:var(--track-wide);text-transform:uppercase;text-decoration:none;
  transition:top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{top:var(--space-5);color:#fff}

.wrap{max-width:var(--width-content);margin:0 auto;padding-inline:var(--space-9)}

/* Micro-label — the export's --type-label, on the AA grey. */
.eyebrow{
  display:block;font:var(--type-label);letter-spacing:var(--track-widest);
  text-transform:uppercase;color:var(--ink-400-aa);
}
.eyebrow--sun{color:var(--sun-400)}      /* 8.92:1 on --ink-800; charcoal only */
.eyebrow--accent{color:var(--accent-aa)}

/* ============================================================
   Buttons — the export's Button component, plain CSS.
   sm 34 / md 42 / lg 52 in the export; raised to a 44px floor so
   every tap target clears the house minimum.
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 28px;
  font-family:var(--font-display);font-weight:var(--weight-bold);font-size:16px;
  letter-spacing:var(--track-wide);text-transform:uppercase;text-decoration:none;
  border-radius:var(--radius-pill);border:var(--border-medium) solid transparent;
  cursor:pointer;transition:var(--transition-control);
}
.btn:hover{text-decoration:none}
.btn--md{min-height:44px;padding:0 22px;font-size:14px}
.btn--sm{min-height:44px;padding:0 16px;font-size:12px;gap:6px}
.btn--block{width:100%}

.btn--accent{background:var(--accent-aa);border-color:var(--accent-aa);color:#fff}
.btn--accent:hover{background:var(--bean-600);border-color:var(--bean-600);color:#fff}
.btn--accent:active{transform:translateY(1px)}

.btn--primary{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.btn--primary:hover{background:var(--ink-700);border-color:var(--ink-700);color:#fff}
.btn--primary:active{transform:translateY(1px)}

.btn--secondary{background:transparent;border-color:var(--ink-900);color:var(--ink-900)}
.btn--secondary:hover{background:var(--ink-900);color:#fff}

/* The export's "inverse" variant — sun-400 with ink-900 type, 10.50:1.
   The only accent that is allowed to sit on charcoal. */
.btn--inverse{background:var(--sun-400);border-color:var(--sun-400);color:var(--ink-900)}
.btn--inverse:hover{background:#fff;border-color:#fff;color:var(--ink-900)}

/* Uppercase underlined text link — the canvas's second-level action. */
.ulink{
  display:inline-block;font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:13px;letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--accent-aa);text-decoration:underline;text-underline-offset:4px;
  padding-block:6px;
}
.ulink--ink{color:var(--ink-900)}
.ulink--sun{color:var(--sun-400)}
.ulink--sun:hover{color:#fff}

/* Badge — the export's Badge, tone="recommended", on the AA fill. */
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px 4px;
  border-radius:var(--radius-pill);font:var(--type-label);
  letter-spacing:var(--track-widest);text-transform:uppercase;white-space:nowrap;
  background:var(--accent-aa);color:#fff;
}

/* To-confirm treatment — the site's own marker for an unverified value. */
.tc{
  display:inline-block;padding:2px 8px 3px;border-radius:var(--radius-pill);
  font:var(--type-label);letter-spacing:var(--track-widest);text-transform:uppercase;
  background:var(--bean-100);color:var(--bean-700);white-space:nowrap;
  vertical-align:baseline;
}
.tc--onink{background:rgba(242,193,78,.18);color:var(--sun-400)}

/* [PHOTO NEEDED] block — fills an image slot at the slot's own aspect. */
.photo-needed{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;padding:24px;
  background:
    repeating-linear-gradient(135deg,var(--cream-100) 0 12px,var(--cream-200) 12px 24px);
  box-shadow:inset 0 0 0 2px var(--cream-400);
  color:var(--ink-600);
}
.photo-needed .pn-mark{
  font:var(--type-label);letter-spacing:var(--track-widest);text-transform:uppercase;
  color:var(--ink-900);background:var(--sun-200);padding:6px 12px;border-radius:var(--radius-pill);
}
.photo-needed .pn-note{font:var(--type-desc);color:var(--ink-600);max-width:32ch}
.photo-needed svg{color:var(--cream-400)}

/* ============================================================
   Chrome — promo strip + sticky charcoal header
   ============================================================ */
.promo-strip{
  background:var(--accent-aa);color:#fff;       /* white on #9c4514 = 6.42:1 */
  font:var(--type-label);letter-spacing:var(--track-widest);text-transform:uppercase;
  text-align:center;padding:9px 16px;line-height:1.5;
}
.site-header{position:sticky;top:0;z-index:40;background:var(--surface-ink)}
.header-inner{
  max-width:var(--width-content);margin:0 auto;padding:0 var(--space-9);
  min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand .mark{height:44px;width:auto}
.brand .word{height:14px;width:auto}

.nav{display:flex;align-items:center;gap:30px}
.nav a{
  font-family:var(--font-display);font-weight:var(--weight-bold);font-size:13px;
  letter-spacing:var(--track-wide);text-transform:uppercase;
  color:rgba(245,239,227,.62);                  /* 5.95:1 on --ink-800 */
  text-decoration:none;padding:14px 0 10px;
}
.nav a:hover{color:#fff}
.nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -3px 0 var(--sun-400)}

.nav-cta{display:none}
.nav-toggle{
  display:none;align-items:center;gap:9px;min-height:44px;padding:0 16px;
  background:transparent;border:var(--border-medium) solid rgba(245,239,227,.42);
  border-radius:var(--radius-pill);cursor:pointer;
  font-family:var(--font-display);font-weight:var(--weight-bold);font-size:12px;
  letter-spacing:var(--track-wide);text-transform:uppercase;color:#fff;
}
.nav-toggle .bars{display:inline-flex;flex-direction:column;gap:3px}
.nav-toggle .bars i{display:block;width:16px;height:2px;background:#fff}

/* Drawer — hidden IN PLACE with opacity/visibility. Never translateX:
   an off-screen transformed drawer creates horizontal overflow at phone widths. */
.nav-backdrop{
  position:fixed;inset:0;z-index:60;background:rgba(22,24,28,.58);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-base) var(--ease-out),visibility var(--dur-base) var(--ease-out);
}
.nav-backdrop[data-open="true"]{opacity:1;visibility:visible}
.nav-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(330px,88vw);
  background:var(--ink-900);color:var(--text-on-ink);
  border-left:var(--border-medium) solid var(--sun-400);
  padding:16px 22px 28px;display:flex;flex-direction:column;overflow-y:auto;
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-base) var(--ease-out),visibility var(--dur-base) var(--ease-out);
}
.nav-drawer[data-open="true"]{opacity:1;visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px}
.drawer-head img{height:13px;width:auto}
.drawer-close{
  background:none;border:0;color:var(--text-on-ink);font-size:30px;line-height:1;
  cursor:pointer;min-width:44px;min-height:44px;
}
.drawer-link{
  display:block;padding:15px 2px;text-decoration:none;
  font-family:var(--font-display);font-weight:var(--weight-bold);font-size:20px;
  letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-on-ink);
  border-bottom:1px solid var(--border-on-ink);
}
.drawer-link:hover{color:#fff}
.drawer-link[aria-current="page"]{color:var(--sun-400)}
.drawer-cta{margin-top:22px;display:grid;gap:12px}
.drawer-note{
  margin:6px 0 0;font:var(--type-desc);color:rgba(245,239,227,.72);   /* 8.41:1 on --ink-900 */
}
.drawer-note a{color:var(--sun-400)}

/* ============================================================
   Home — signboard hero (Hero Directions 1c, as the Home canvas builds it)
   ============================================================ */
.plaque-band{background:var(--cream-200);display:flex;justify-content:center;padding:22px var(--space-6) 14px}
.plaque{
  background:var(--cream-050);border:1px solid var(--cream-400);
  border-radius:44px 44px var(--radius-sm) var(--radius-sm);
  padding:9px 34px 7px;
  font-family:var(--font-display);font-weight:var(--weight-black);font-size:24px;line-height:1.1;
  letter-spacing:.1em;color:var(--ink-700);font-variant-numeric:tabular-nums;  /* 10.75:1 on cream */
}
.sign-band{
  background:var(--surface-ink);padding:52px var(--space-9) 112px;
  display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;
}
.sign-band .lockup{height:176px;width:auto}
.sign-band .sign-line{
  font:var(--type-label);letter-spacing:.16em;text-transform:uppercase;color:var(--sun-400);
  line-height:1.6;
}

.hero-shell{max-width:1000px;margin:-64px auto 0;padding-inline:var(--space-9);position:relative;z-index:1}
.hero-card{
  background:var(--paper);border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);overflow:hidden;
  display:grid;grid-template-columns:1.15fr .85fr;align-items:stretch;
}
.hero-copy{padding:44px 46px 42px}
.hero-copy h1{
  font-size:42px;line-height:1.02;font-weight:var(--weight-black);
  letter-spacing:-.025em;max-width:14ch;
}
.hero-copy .lead{
  font:var(--weight-regular) 16.5px/1.5 var(--font-body);color:var(--text-secondary);
  max-width:40ch;margin-top:var(--space-6);
}
.hero-actions{display:flex;align-items:center;gap:20px;margin-top:26px;flex-wrap:wrap}
.hero-photo{position:relative;min-height:300px}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}

.ticker{
  display:flex;flex-wrap:wrap;column-gap:14px;row-gap:8px;align-items:baseline;
  border-top:var(--border-medium) solid var(--ink-900);
  margin-top:26px;padding:14px 4px 0;
  font-family:var(--font-display);font-weight:var(--weight-bold);font-size:12px;line-height:1.4;
  letter-spacing:var(--track-wide);text-transform:uppercase;font-variant-numeric:tabular-nums;
  color:var(--ink-900);
}
.ticker .sep{color:var(--bean-600)}
.ticker .more{margin-left:auto;color:var(--accent-aa);text-decoration:underline;text-underline-offset:3px}

/* Home — who's pouring */
.pouring{
  max-width:var(--width-content);margin:0 auto;padding:84px var(--space-9) 76px;
  display:grid;grid-template-columns:1fr 280px;gap:56px;align-items:center;
}
.pouring h2{font-size:34px;line-height:1.06;font-weight:var(--weight-black);letter-spacing:-.02em;margin-top:14px}
.pouring p{font:var(--weight-regular) 17px/1.55 var(--font-body);color:var(--text-secondary);max-width:56ch;margin-top:var(--space-6)}
.pouring .ulink{margin-top:16px}
.pouring-mascot{display:flex;justify-content:center}
.pouring-mascot img{height:150px;width:auto;animation:dl-bob var(--dur-bob) var(--ease-in-out) infinite}

/* Home — why it's worth the queue */
.why{background:var(--surface-ink);color:#fff;padding:84px 0}
.why-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-8);flex-wrap:wrap}
.why-head h2{font-size:34px;line-height:1.06;font-weight:var(--weight-black);letter-spacing:-.02em}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:40px}
.why-item{border-top:1px solid rgba(245,239,227,.25);padding-top:18px}
.why-item .t{
  display:block;margin-top:12px;font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:20px;line-height:1.2;text-transform:uppercase;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.why-item p{font:var(--weight-regular) 15px/1.5 var(--font-body);color:rgba(245,239,227,.72);margin-top:10px}

/* ============================================================
   Menu
   ============================================================ */
.page-head{
  max-width:var(--width-content);margin:0 auto;padding:76px var(--space-9) 0;
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-9);
}
.page-head h1{font-size:52px;line-height:1;font-weight:var(--weight-black);letter-spacing:var(--track-tighter);margin-top:14px}
.page-head p{font:var(--weight-regular) 17px/1.5 var(--font-body);color:var(--text-secondary);max-width:52ch;margin-top:var(--space-6)}
.page-head .head-mascot{height:116px;width:auto;margin:0 28px 2px 0;flex:0 0 auto;animation:dl-bob var(--dur-bob) var(--ease-in-out) infinite}

.feature{max-width:var(--width-content);margin:0 auto;padding:44px var(--space-9) 0}
.feature-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--space-8);align-items:start}
.card{
  background:var(--paper);border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.feature-main{display:grid;grid-template-columns:.9fr 1.1fr}
.feature-main .shot{position:relative;min-height:420px;display:flex}
.feature-main .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature-main .shot .photo-needed{flex:1}
.feature-body{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:28px 32px}
.feature-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.feature-title .n{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:22px;line-height:1.2;text-transform:uppercase;letter-spacing:var(--track-tight)}
.feature-desc{font:var(--weight-regular) 15px/1.4 var(--font-body);color:var(--accent-aa);margin-top:5px}
.feature-price{display:flex;align-items:baseline;gap:10px;border-top:1px solid var(--border-subtle);padding-top:14px;flex-wrap:wrap}
.feature-price .lab{font:var(--type-label);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--ink-400-aa)}
.feature-price .v{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:20px;line-height:1.2;font-variant-numeric:tabular-nums}

/* Side card — image on top at a FIXED aspect so its height never depends
   on the neighbouring card's content (house rule: no crop, no gap). */
.feature-side .shot{aspect-ratio:4/3;position:relative}
.feature-side .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature-side .body{display:flex;align-items:flex-start;gap:var(--space-6);padding:16px 20px 18px}
.feature-side .body .t{flex:1;min-width:0}
.feature-side .n{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:17px;line-height:1.2;text-transform:uppercase;letter-spacing:var(--track-tight)}
.feature-side .d{font:var(--weight-regular) var(--text-body-sm)/1.35 var(--font-body);color:var(--accent-aa);margin-top:3px}
.feature-side .p{min-width:52px;text-align:right;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:15px;line-height:1.2;font-variant-numeric:tabular-nums;margin-top:2px}

/* The full board */
.board-section{max-width:var(--width-content);margin:0 auto;padding:72px var(--space-9) 88px}
.board-section h2{font-size:30px;line-height:1.06;font-weight:var(--weight-black);letter-spacing:-.02em;margin-bottom:var(--space-8)}
.board{background:var(--paper);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:28px 32px 24px}
.board-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
.group-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-5);padding:0 var(--space-4) 6px}
.group-head + .group-head,.board-group + .board-group .group-head{padding-top:26px}
.group-head .g{font:var(--type-label);letter-spacing:var(--track-widest);text-transform:uppercase;color:var(--ink-400-aa)}
.cols{display:flex;gap:14px}
.cols span{
  font:var(--type-label);letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--ink-400-aa);min-width:52px;text-align:right;
}
.row{display:flex;align-items:flex-start;gap:14px;padding:11px var(--space-4);border-bottom:1px solid var(--border-subtle)}
.board-group .row:last-child{border-bottom:0}
.row .rn{flex:1;min-width:0}
.row .n{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:16px;line-height:1.2;text-transform:uppercase;letter-spacing:var(--track-tight)}
.row .d{font:var(--weight-regular) var(--text-body-sm)/1.35 var(--font-body);color:var(--accent-aa);margin-top:3px}
.row .d--muted{color:var(--ink-400-aa)}
.row .p{min-width:52px;text-align:right;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:15px;line-height:1.2;font-variant-numeric:tabular-nums;flex:0 0 auto;white-space:nowrap}
.row .p--none{color:var(--dash-aa)}          /* 5.22:1 on white */
.board-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;
  margin-top:var(--space-6);padding:16px var(--space-4) 0;border-top:var(--border-medium) solid var(--ink-900);
}
.board-foot .fine{
  font-family:var(--font-display);font-weight:var(--weight-bold);font-size:11px;line-height:1.5;
  letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-secondary);
}

/* ============================================================
   About
   ============================================================ */
.about-hero{
  max-width:var(--width-content);margin:0 auto;padding:88px var(--space-9) 0;
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
}
.about-hero h1{font-size:46px;line-height:1.02;font-weight:var(--weight-black);letter-spacing:var(--track-tighter);margin-top:14px}
.about-hero p{font:var(--weight-regular) 17px/1.55 var(--font-body);color:var(--text-secondary);max-width:54ch;margin-top:var(--space-7)}
.about-hero p + p{margin-top:14px}
.about-shot{position:relative}
.about-shot img.photo{width:100%;height:auto;border-radius:var(--radius-sm);display:block}
.about-shot .sticker{position:absolute;left:-34px;bottom:32px;height:110px;width:auto;filter:var(--shadow-sticker)}

.mission{position:relative;margin-top:88px;min-height:430px;overflow:hidden;display:flex}
/* object-position pushed down so the two people at the bar stay in the band on
   wide screens; at phone widths the band crops horizontally instead, so the
   whole frame height shows. */
.mission img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 76%}
.mission .scrim{position:absolute;inset:0;background:var(--overlay-scrim)}
.mission .inner{
  position:relative;max-width:var(--width-content);margin:0 auto;width:100%;
  padding:210px var(--space-9) 48px;align-self:flex-end;
}
.mission .line{
  font-family:var(--font-display);font-weight:var(--weight-black);font-size:38px;line-height:1.08;
  letter-spacing:-.02em;text-transform:uppercase;color:#fff;max-width:24ch;margin-top:12px;
}

.noshort{max-width:var(--width-content);margin:0 auto;padding:88px var(--space-9) 96px}
.noshort-grid{display:grid;grid-template-columns:1fr 360px;gap:64px;align-items:start}
.noshort h2{font-size:34px;line-height:1.06;font-weight:var(--weight-black);letter-spacing:-.02em;margin-bottom:var(--space-4)}
.spec{
  display:grid;grid-template-columns:180px 1fr;gap:0 var(--space-9);padding:20px 0;
  border-bottom:1px solid var(--border-subtle);
}
.spec:first-of-type{border-top:var(--border-medium) solid var(--ink-900);margin-top:18px}
.spec .k{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:16px;line-height:1.3;text-transform:uppercase}
.spec .v{font:var(--weight-regular) 15.5px/1.5 var(--font-body);color:var(--text-secondary)}
.noshort .ulink{margin-top:20px}
.noshort-shot img{width:100%;height:auto;border-radius:var(--radius-sm);display:block}

/* ============================================================
   Contact
   ============================================================ */
.contact-head{max-width:var(--width-content);margin:0 auto;padding:76px var(--space-9) 0}
.contact-head h1{font-size:52px;line-height:1;font-weight:var(--weight-black);letter-spacing:var(--track-tighter);margin-top:14px}
.contact-head p{font:var(--weight-regular) 17px/1.5 var(--font-body);color:var(--text-secondary);max-width:52ch;margin-top:var(--space-6)}

.outlets{
  max-width:var(--width-content);margin:0 auto;padding:40px var(--space-9) 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8);align-items:stretch;
}
.outlet-card{display:flex;flex-direction:column}
/* Fixed aspect on every outlet photo so three cards align and nothing crops
   against a neighbour's text length. */
.outlet-card .shot{aspect-ratio:3/2;position:relative;display:flex}
.outlet-card .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.outlet-card .shot .photo-needed{flex:1}
.outlet-body{padding:26px 28px;display:flex;flex-direction:column;gap:14px;flex:1}
.outlet-body h2{font-size:20px;line-height:1.2;letter-spacing:var(--track-tight)}
.outlet-body .unit{display:block;font:var(--type-label);letter-spacing:var(--track-widest);text-transform:uppercase;color:var(--accent-aa);margin-top:6px}
.outlet-body address{font:var(--weight-regular) 15px/1.45 var(--font-body);color:var(--text-secondary);font-style:normal}
.hours{display:grid;grid-template-columns:auto 1fr;column-gap:var(--space-8);row-gap:6px;margin:0}
.hours dt{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:11px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400-aa);padding-top:3px}
.hours dd{margin:0;font:var(--weight-regular) 14.5px/1.45 var(--font-body);color:var(--text-primary)}
.outlet-body .note{font:var(--type-desc);color:var(--ink-400-aa)}
.outlet-body .ulink{margin-top:auto}

.contact-grid{
  max-width:var(--width-content);margin:0 auto;padding:var(--space-8) var(--space-9) 88px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-8);align-items:stretch;
}
.map-panel{position:relative;min-height:420px}
.map-panel iframe{
  position:absolute;inset:0;width:100%;height:100%;
  border:1px solid var(--border-subtle);border-radius:var(--radius-sm);display:block;
}
.map-pill{
  position:absolute;left:12px;bottom:12px;background:var(--ink-800);color:#fff;
  font:var(--type-label);letter-spacing:.1em;text-transform:uppercase;
  padding:9px 13px;border-radius:var(--radius-pill);
}
.hello{padding:28px 32px;display:flex;flex-direction:column}
.hello-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-6);
  padding:16px 0;border-bottom:1px solid var(--border-subtle);flex-wrap:wrap;
}
.hello-row:first-of-type{margin-top:10px}
.hello-row:last-of-type{border-bottom:0}
.hello-row .k{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:14px;line-height:1.2;text-transform:uppercase;letter-spacing:.02em}
.hello-row .v{font:var(--weight-regular) 15.5px/1.4 var(--font-body);color:var(--text-secondary);text-align:right}
.hello-row a.v{color:var(--accent-aa)}
.hello-foot{
  margin-top:auto;padding-top:18px;border-top:var(--border-medium) solid var(--ink-900);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;
}
.hello-foot .fine{
  font-family:var(--font-display);font-weight:var(--weight-bold);font-size:11px;line-height:1.5;
  letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-secondary);
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:var(--surface-ink-deep);color:var(--text-on-ink);border-top:1px solid rgba(245,239,227,.12);padding:56px 0 32px}
.footer-grid{
  max-width:var(--width-content);margin:0 auto;padding:0 var(--space-9);
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start;
}
.footer-brand .lockup{height:92px;width:auto}
.footer-brand p{font:var(--weight-regular) 15px/1.5 var(--font-body);color:rgba(245,239,227,.72);margin-top:var(--space-6);max-width:340px}
.footer-col .head{display:block;font:var(--type-label);letter-spacing:var(--track-widest);text-transform:uppercase;color:var(--sun-400);margin-bottom:14px}
.outlet-name{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:15px;line-height:1.3;text-transform:uppercase}
.outlet-meta{font:var(--weight-regular) 14px/1.5 var(--font-body);color:rgba(245,239,227,.72);margin:4px 0 14px}
.footer-col .outlet-meta:last-child{margin-bottom:0}
.hello-list{display:flex;flex-direction:column;gap:10px}
.hello-list a,.hello-list span{font:var(--weight-regular) 15px/1.4 var(--font-body);color:rgba(245,239,227,.72)}
.hello-list a{text-decoration:underline;text-underline-offset:3px}
.hello-list a:hover{color:#fff}

.footer-sitemap{
  max-width:var(--width-content);margin:44px auto 0;padding:0 var(--space-9);
}
.footer-sitemap nav{
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:baseline;
  border-top:1px solid var(--border-on-ink);padding-top:18px;
}
.footer-sitemap a,.footer-sitemap .lab{
  font-family:var(--font-display);font-weight:var(--weight-bold);font-size:11px;line-height:1.5;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(245,239,227,.72);
  text-decoration:none;
}
.footer-sitemap a{text-decoration:underline;text-underline-offset:3px}
.footer-sitemap a:hover{color:#fff}
.footer-sitemap .lab{color:var(--sun-400)}
.footer-bottom{
  max-width:var(--width-content);margin:0 auto;padding:18px var(--space-9) 0;
  display:flex;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap;
  font-family:var(--font-display);font-weight:var(--weight-bold);font-size:11px;line-height:1.5;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(245,239,227,.72);
}

/* ============================================================
   Responsive — mobile-first is impossible against a desktop-only
   canvas, so the canvas widths hold to 1100px and step down cleanly.
   ============================================================ */
@media (max-width:1100px){
  .pouring{grid-template-columns:1fr 220px;gap:40px;padding-block:64px 60px}
  .pouring-mascot img{height:126px}
  .noshort-grid{grid-template-columns:1fr 300px;gap:44px}
  .feature-grid{grid-template-columns:1.35fr 1fr}
  .board-cols{column-gap:36px}
  .outlets{gap:var(--space-6)}
  .page-head h1,.contact-head h1{font-size:46px}
}

@media (max-width:960px){
  .hero-card{grid-template-columns:1fr}
  .hero-copy{padding:34px 30px 30px;order:2}
  .hero-copy h1{font-size:36px;max-width:18ch}
  .hero-photo{order:1;min-height:0;aspect-ratio:16/10}
  .about-hero{grid-template-columns:1fr;gap:34px;padding-top:64px}
  .about-shot{max-width:560px}
  .about-shot .sticker{left:auto;right:-10px;bottom:-24px;height:88px}
  .noshort-grid{grid-template-columns:1fr;gap:36px}
  .noshort-shot{max-width:460px}
  .contact-grid{grid-template-columns:1fr}
  .map-panel{min-height:0;aspect-ratio:4/3}
  .outlets{grid-template-columns:repeat(2,1fr)}
  /* Both feature cards become photo-on-top at the same fixed aspect, so neither
     card's image height depends on the other card's text length. */
  .feature-grid{grid-template-columns:1fr 1fr;align-items:stretch}
  .feature-main{grid-template-columns:1fr}
  .feature-main .shot{min-height:0;aspect-ratio:16/10}
  .feature-side .shot{aspect-ratio:16/10}
  .feature-body{justify-content:flex-start;padding:20px 22px 22px}
}

@media (max-width:900px){
  .nav{display:none}
  .nav-cta{display:inline-flex}
  .nav-toggle{display:inline-flex}
  .header-inner{min-height:72px;gap:var(--space-5)}
  .brand .mark{height:36px}
  .brand .word{height:12px}
  .sign-band{padding:44px var(--space-8) 96px}
  .sign-band .lockup{height:132px}
  .why{padding:64px 0}
  .why-grid{grid-template-columns:1fr;gap:28px}
  .why-head h2,.pouring h2,.noshort h2{font-size:30px}
  .board-cols{grid-template-columns:1fr;column-gap:0}
  .board-cols > div + div .board-group:first-child .group-head{padding-top:26px}
  .mission{min-height:0}
  .mission .inner{padding:180px var(--space-8) 40px}
  .mission .line{font-size:32px}
  .page-head{padding-top:60px}
  .page-head .head-mascot{height:92px;margin-right:0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px 40px}
  .footer-brand{grid-column:1/-1}
}

@media (max-width:760px){
  .wrap,.pouring,.page-head,.feature,.board-section,.about-hero,.noshort,
  .contact-head,.outlets,.contact-grid,.footer-grid,.footer-bottom,.footer-sitemap,
  .hero-shell{padding-inline:var(--space-7)}
  .sign-band{padding-inline:var(--space-7)}
  .mission .inner{padding-inline:var(--space-7)}
  .pouring{grid-template-columns:1fr;gap:26px;padding-block:56px 52px}
  .pouring-mascot{justify-content:flex-start}
  .outlets{grid-template-columns:1fr;max-width:520px}
  .footer-brand .lockup{height:76px}
  .board{padding:22px 18px 20px}
  .board-section{padding-block:56px 68px}
  .feature-grid{grid-template-columns:1fr}
  .feature-side{max-width:none}
  .feature-body{padding:22px 22px 24px}
  .noshort{padding-block:64px 72px}
  .hello{padding:24px 22px}
  .page-head{flex-direction:column;align-items:flex-start;gap:var(--space-7)}
  .page-head .head-mascot{order:-1;height:82px;margin:0}
}

@media (max-width:620px){
  .hero-copy h1{font-size:31px}
  .page-head h1,.contact-head h1{font-size:38px}
  .about-hero h1{font-size:34px}
  .mission .line{font-size:26px}
  .mission .inner{padding-top:150px}
  .why-head h2,.pouring h2,.noshort h2{font-size:26px}
  .board-section h2{font-size:26px}
  .spec{grid-template-columns:1fr;gap:6px}
  .hero-actions{gap:14px}
  .hero-actions .btn{width:100%}
  .board-foot,.hello-foot{gap:14px}
  .board-foot .btn,.hello-foot .btn{width:100%}
  .sign-band .lockup{height:110px}
  .plaque{font-size:20px;padding:8px 26px 6px}
  .ticker .more{margin-left:0}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .footer-bottom{gap:10px}
  /* The strip carries three outlet names, so it wraps on a phone. Loosen the
     tracking a little there so three lines of uppercase micro-type stay easy. */
  .promo-strip{letter-spacing:.08em;padding:9px 14px}
}

@media (max-width:430px){
  .header-inner{padding-inline:var(--space-6)}
  .wrap,.pouring,.page-head,.feature,.board-section,.about-hero,.noshort,
  .contact-head,.outlets,.contact-grid,.footer-grid,.footer-bottom,.footer-sitemap,
  .hero-shell{padding-inline:var(--space-6)}
  .sign-band{padding-inline:var(--space-6)}
  .mission .inner{padding-inline:var(--space-6)}
  .brand .word{height:11px}
  .nav-cta{padding:0 12px;font-size:11px}
  .nav-toggle{padding:0 12px}
  .hero-copy{padding:26px 20px 24px}
  .hero-copy h1{font-size:28px}
  .row{gap:10px;padding-inline:2px}
  .row .p{min-width:44px;font-size:14px}
  .cols span{min-width:44px}
  .about-shot .sticker{height:72px;right:0}
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .btn:active{transform:none}
}