/* =====================================================================
   Coffee on Point — "Roast" redesign (PREVIEW)
   Loaded AFTER assets/styles.css. Nothing here touches the live site until
   the preview is approved.

   Palette — a modern coffee bar:
     Espresso / Roast   the dramatic sections (hero, chef, footer, nav)
     Foam / Oat         the reading sections (menu, events, visit)
     Crema → Caramel    the one warm accent — fills and buttons, never body type
     Matcha             the logo's green, modernised: status and small accents
   Type — Fraunces (warm modern serif) for display, DM Sans for everything else.
   All text pairings checked for contrast (AA 4.5:1) before use.
   ===================================================================== */
:root, :root[data-theme="light"] {
  --espresso:#16100C; --roast:#221812; --roast-2:#2E2119;
  --foam:#FBF8F3; --oat:#F2EBE1; --white:#FFFFFF;
  --crema:#E6AE72; --caramel:#C4733B;
  --grad-crema:linear-gradient(120deg, #EDB97F 0%, #C4733B 100%);
  --matcha:#2F6B49;
  --leaf:#4C700C;   /* sampled from the logo file — the top bar and the footer */

  --ground:var(--foam); --surface:var(--white); --surface-2:var(--oat);
  --ink:#1E1611; --ink-soft:#5C5048; --ink-faint:#6F6459;
  --line:rgba(30,22,17,.10);
  --primary:#9C5322; --primary-deep:#7E4119; --primary-soft:#C4733B;
  --accent:#9C5322; --accent-ink:#7E4119;
  --gilt:#E6AE72; --on-gilt:#16100C;
  --h-band1:#2E2119; --h-band2:#16100C; --h-light:#F6EFE6; --h-accent:#E6AE72; --h-dim:#C8B9A9;

  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono:"DM Sans", system-ui, sans-serif;   /* the labels read as refined small caps, not code */

  --maxw:1200px;
  --r-lg:24px; --r-md:18px; --r-sm:12px;
  --shadow:0 30px 60px -32px rgba(22,16,12,.35);
  --shadow-sm:0 12px 30px -18px rgba(22,16,12,.30);
  --ease:cubic-bezier(.22,1,.36,1);
}

body { font-family:var(--sans); background:var(--foam); color:var(--ink); font-size:17px; letter-spacing:-.005em; }
::selection { background:var(--crema); color:var(--espresso); }
.wrap { max-width:var(--maxw); }

/* labels: refined small caps with a thin rule, not monospace */
.eyebrow { font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.22em; color:var(--primary);
  display:inline-flex; align-items:center; gap:12px; }
.eyebrow::before { content:""; width:28px; height:1px; background:currentColor; opacity:.6; }

/* ---------- top bar: the logo green, see-through ----------
   90% is the lightest the glass can be and still keep white text readable when the bar
   scrolls over the white menu section (measured 4.68:1). Over the hero photo, the picture
   glows through the frost. */
nav { background:rgba(76,112,12,.90); backdrop-filter:saturate(1.25) blur(16px); -webkit-backdrop-filter:saturate(1.25) blur(16px);
  border-bottom:1px solid rgba(255,255,255,.14); }
.nav-in { height:74px; }
.brand .bt b { font-family:var(--serif); font-weight:600; font-size:21px; color:#FFFFFF; letter-spacing:-.01em; }
.brand .bt span { font-family:var(--sans); font-weight:600; font-size:9.5px; letter-spacing:.26em; color:rgba(255,255,255,.92); }
.nav-links { gap:34px; }
.nav-links a { font-size:14.5px; font-weight:500; color:rgba(255,255,255,.92); }
.nav-links a:hover { color:#FFFFFF; }
/* on the green only white is readable — crema text measures 2.94:1 */
.toggle { font-family:var(--sans); font-weight:600; font-size:11.5px; letter-spacing:.1em; color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.42); padding:7px 13px; }
.toggle:hover { border-color:#FFFFFF; color:#FFFFFF; }
.toggle b { color:#FFFFFF; }

/* ---------- buttons: pills, crema is the one that glows ---------- */
.btn { font-family:var(--sans); font-weight:600; font-size:14.5px; letter-spacing:.01em; padding:12px 24px;
  background:var(--grad-crema); color:var(--espresso); border:none;
  box-shadow:0 14px 30px -14px rgba(196,115,59,.85); transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.btn:hover { transform:translateY(-2px); box-shadow:0 18px 36px -14px rgba(196,115,59,.95); }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); box-shadow:none; }
.btn.ghost:hover { border-color:var(--primary); }

/* ---------- hero: cinematic, the photo runs under the glass nav ---------- */
header.hero { margin-top:-74px; padding-top:74px; min-height:min(92vh, 860px); display:flex; align-items:flex-end;
  background-color:var(--espresso);
  background-image:
    linear-gradient(90deg, rgba(22,16,12,.94) 0%, rgba(22,16,12,.80) 28%, rgba(22,16,12,.38) 52%, rgba(22,16,12,.06) 72%),
    linear-gradient(0deg, rgba(22,16,12,.92) 0%, rgba(22,16,12,0) 42%),
    url("/assets/hero.jpg");
  background-size:cover, cover, cover; background-position:center; }
#steam { opacity:.16; }
.hero-in { width:100%; padding:120px 28px 88px; }
.hero h1 { font-family:var(--serif); font-weight:600; font-size:clamp(44px,6.4vw,92px); line-height:.98;
  letter-spacing:-.025em; max-width:13ch; font-variation-settings:"opsz" 144; }
.hero h1 .amp { font-style:italic; font-weight:500; background:var(--grad-crema); -webkit-background-clip:text;
  background-clip:text; color:transparent; }
.hero .eyebrow { color:var(--crema); }
.hero .lede { font-size:clamp(17px,1.6vw,20px); line-height:1.6; color:var(--h-dim); max-width:44ch; margin-top:26px; }
.hero-cta { gap:12px; margin-top:36px; }
.hero .btn { background:var(--grad-crema); color:var(--espresso); }
.hero .btn.ghost { color:var(--h-light); border:1px solid rgba(246,239,230,.28); background:rgba(246,239,230,.04);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.hero .btn.ghost:hover { border-color:var(--h-light); }
.hero-meta { margin-top:52px; padding-top:28px; border-top:1px solid rgba(246,239,230,.14); gap:22px 48px; }
.hero-meta .k { font-family:var(--sans); font-weight:600; letter-spacing:.2em; color:var(--h-dim); }
.hero-meta .v { font-family:var(--serif); font-size:22px; color:var(--h-light); }

/* ---------- sections ---------- */
section { padding:124px 0; }
.sec-head h2, .h2 { font-family:var(--serif); font-weight:600; font-size:clamp(34px,4.6vw,56px);
  line-height:1.02; letter-spacing:-.025em; font-variation-settings:"opsz" 144; }
.sec-head p { font-size:17px; color:var(--ink-soft); }

/* chef: a dark roast section — the story deserves the drama */
.chef { background:var(--roast); color:var(--h-light); border:none; }
.chef .eyebrow { color:var(--crema); }
.chef .h2, .chef blockquote { color:var(--h-light); }
.chef p[style] { color:var(--h-dim) !important; }
.chef blockquote { font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.6vw,30px); line-height:1.35; }
.chef blockquote::before, .chef blockquote::after { color:var(--crema); }
.chef .sig { font-family:var(--sans); font-weight:600; color:var(--h-dim); }
.chef .sig b { color:var(--crema); }
.chef-in { gap:72px; }
.chef-portrait { border-radius:var(--r-lg); border:none; box-shadow:0 40px 80px -40px rgba(0,0,0,.8); }

/* specials: soft pills */
.special { border:none; border-radius:999px; background:var(--white); box-shadow:var(--shadow-sm); padding:12px 22px; }
.special .st { font-family:var(--serif); font-weight:600; }
.special .sd { font-family:var(--sans); }
.special .sp { font-family:var(--sans); font-weight:700; color:var(--primary); }

/* menu: floating white cards on foam */
.menu-grid { gap:24px; margin-top:52px; }
.menu-card { border:none; border-radius:var(--r-lg); padding:32px 30px 26px; box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.menu-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.menu-card h3 { font-family:var(--serif); font-size:27px; letter-spacing:-.015em; }
.menu-card h3 .no { font-family:var(--sans); font-weight:700; font-size:12px; color:var(--espresso);
  background:var(--grad-crema); border-radius:999px; padding:3px 9px; letter-spacing:.04em; }
.menu-card .cat-note { font-size:13.5px; }
.item { border-top:1px solid var(--line); padding:13px 0; }
.item .name { font-weight:500; }
.item .price { font-family:var(--sans); font-weight:700; font-size:15px; color:var(--primary); }

/* events: oat band, white cards */
#events { background:var(--oat) !important; border-top:0 !important; }
.event { border:none; border-radius:var(--r-md); box-shadow:var(--shadow-sm); padding:24px 26px; background:var(--white); }
.event .date { font-family:var(--serif); color:var(--primary); }
.event .date .d { font-size:34px; font-weight:600; }
.event .date .m { font-family:var(--sans); font-weight:600; letter-spacing:.18em; }
.event .et { font-family:var(--serif); font-weight:600; font-size:22px; }
.event .etime { font-family:var(--sans); font-weight:600; color:var(--matcha); }
.event .elink { color:var(--primary); font-weight:600; }

/* visit */
.visit { background:var(--foam); border-top:0; }
.info-row { border-top:1px solid var(--line); }
.info-row .k { font-family:var(--sans); font-weight:600; letter-spacing:.2em; }
.info-row .val .accent { color:var(--matcha); }
.map-card { border:none; border-radius:var(--r-lg); box-shadow:var(--shadow); }
.map-pin .dot { background:var(--caramel); box-shadow:0 8px 20px -6px var(--caramel); }
.map-pin .lbl { font-family:var(--sans); font-weight:600; border:none; box-shadow:var(--shadow-sm); }

/* footer: the logo green, closing every page the same way */
footer { background:var(--leaf); padding:80px 0 52px; color:#FFFFFF; }
footer .foot-brand b { font-family:var(--serif); font-weight:600; font-size:26px; color:#FFFFFF; }
.foot-brand p { color:rgba(255,255,255,.92); }
.foot-col h4 { font-family:var(--sans); font-weight:700; color:#FFFFFF; letter-spacing:.2em; }
.foot-col a { color:rgba(255,255,255,.92); font-weight:500; }
.foot-col a:hover { color:#FFFFFF; text-decoration:underline; }
.foot-legal { font-family:var(--sans); color:rgba(255,255,255,.92); border-top-color:rgba(255,255,255,.22); }

/* ---------- event page ---------- */
.evp-bar { display:block; max-width:none; margin:0; padding:0; background:rgba(76,112,12,.90);
  backdrop-filter:saturate(1.25) blur(16px); -webkit-backdrop-filter:saturate(1.25) blur(16px);
  border-bottom:1px solid rgba(255,255,255,.14); position:sticky; top:0; z-index:50; }
.evp-bar-in { max-width:var(--maxw); margin:0 auto; padding:14px 28px; display:flex; align-items:center;
  justify-content:space-between; gap:14px; }
.evp-brand span { font-family:var(--serif); font-weight:600; font-size:19px; color:#FFFFFF; }
.evp-eyebrow { font-family:var(--sans); font-weight:600; letter-spacing:.22em; color:var(--primary); }
.evp h1 { font-family:var(--serif); font-weight:600; letter-spacing:-.025em; font-variation-settings:"opsz" 144; }
.evp-facts, .evp-card { border:none; border-radius:var(--r-lg); box-shadow:var(--shadow-sm); background:var(--white); }
.evp-card h2 { font-family:var(--serif); font-weight:600; letter-spacing:-.015em; }
.evp-card input, .evp-card select { font-family:var(--sans); background:var(--foam); border:1px solid var(--line);
  border-radius:var(--r-sm); }
.evp-card input:focus, .evp-card select:focus { border-color:var(--caramel); box-shadow:0 0 0 4px rgba(230,174,114,.28); }
.evp-go { font-family:var(--sans); font-weight:700; border-radius:999px; background:var(--grad-crema); color:var(--espresso);
  box-shadow:0 14px 30px -14px rgba(196,115,59,.85); }
.evp-go:hover:not(:disabled) { background:var(--grad-crema); filter:brightness(1.04); }
.evp-total b { font-family:var(--sans); }
.evp-facts .k { color:var(--primary); }
.evp-sh .sh { font-family:var(--sans); border-radius:999px; background:var(--foam); }
.evp-sh .sh-go { background:var(--grad-crema); color:var(--espresso); border-color:transparent; }
.evp-url { font-family:var(--sans); }
.evp-foot { display:none; }   /* the green footer below replaces the bare back link */

/* ---------- ticket ---------- */
.tk-body { background:radial-gradient(120% 90% at 80% 0%, var(--roast-2), var(--espresso) 70%); }
.tk-card { border:none; border-radius:28px; box-shadow:0 40px 80px -30px rgba(0,0,0,.7); background:var(--white); }
.tk-card h1 { font-family:var(--serif); font-weight:600; letter-spacing:-.02em; }
.tk-card .eyebrow { justify-content:center; }
.tk-code { font-family:var(--sans); font-weight:700; color:var(--primary); }
.tk-when { font-family:var(--sans); }

/* phones */
@media (max-width: 760px) {
  header.hero { min-height:88vh;
    background-image:
      linear-gradient(0deg, rgba(22,16,12,.96) 0%, rgba(22,16,12,.78) 45%, rgba(22,16,12,.35) 100%),
      url("/assets/hero-sm.jpg");
    background-size:cover, cover; background-position:center top, center top; }
  .hero-in { padding:96px 28px 56px; }   /* same 28px gutter as the nav, so the text lines up with the logo */
  section { padding:84px 0; }
  .nav-in { height:66px; }
  header.hero { margin-top:-66px; padding-top:66px; }
}
@media (max-width: 560px) {
  .brand .bt b { font-size:17px; }
  .nav-in { height:64px; }
  header.hero { margin-top:-64px; padding-top:64px; }
}

/* section labels sit inside .sec-head, whose "p" rule was out-ranking .eyebrow */
.sec-head p.eyebrow { color:var(--primary); font-size:12px; margin:0; }
/* the event date stacks: big day over a small month */
.event .date .d, .event .date .m { display:block; }
.event .date .m { margin-top:6px; }

/* The logo is a green disc; on the green bar and footer it vanished into them. A thin
   light ring gives the disc its edge back without changing the mark itself. */
.brand img, .foot-brand img, .evp-brand img {
  box-shadow:0 0 0 2px rgba(255,255,255,.88), 0 6px 16px -6px rgba(0,0,0,.4); }

/* ---------- event cards: home (next three) and /events (all) ---------- */
.ecards { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; margin-top:44px; }
.ecard { display:flex; flex-direction:column; background:var(--white); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.ecard:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.ecard-media { display:block; aspect-ratio:2/1; background:radial-gradient(120% 130% at 80% 0%, var(--roast-2), var(--espresso) 70%); }
.ecard-media img { display:block; width:100%; height:100%; object-fit:cover; }
.ecard-ph { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
.ecard-ph b { font-family:var(--serif); font-weight:600; font-size:56px; color:var(--crema); }
.ecard-ph span { font-weight:600; font-size:12px; letter-spacing:.24em; color:var(--h-dim); margin-top:8px; }
.ecard-body { flex:1; display:flex; flex-direction:column; gap:10px; padding:22px 24px 24px; }
.ecard-t { font-family:var(--serif); font-weight:600; font-size:23px; line-height:1.15; letter-spacing:-.015em; margin:0 0 4px; }
.ecard-t a:hover { color:var(--primary); }
.ecard-row { display:flex; gap:10px; align-items:flex-start; margin:0; font-size:15px; color:var(--ink-soft); }
.ecard-row svg { flex:0 0 18px; width:18px; height:18px; margin-top:2px; fill:none; stroke:var(--primary);
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ecard-row b { color:var(--ink); font-weight:600; }
.ecard-row small { display:block; font-size:13px; color:var(--ink-faint); }
.ecard-go { margin-top:auto; align-self:stretch; text-align:center; }
.ecard-body > .ecard-row:last-of-type { margin-bottom:12px; }
.ecards-more { margin:28px 0 0; text-align:right; }
.ecards-more a { font-weight:600; font-size:15px; color:var(--primary); }
.ecards-more a:hover { text-decoration:underline; }
.events-page { min-height:calc(100vh - 74px); padding-top:88px; }
.events-page .sec-head h1 { margin:14px 0 0; }
.ecards-empty { margin-top:40px; padding:40px 32px; background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  text-align:center; }
.ecards-empty p { margin:0 0 20px; font-size:17px; color:var(--ink-soft); }
#rsvp { scroll-margin-top:90px; }   /* the RSVP button lands on the form, clear of the sticky bar */
.nav-links a[aria-current="page"] { color:#FFFFFF; text-decoration:underline; text-underline-offset:6px; }
@media (max-width: 980px) { .ecards { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .ecards { grid-template-columns:1fr; gap:20px; margin-top:32px; } .events-page { padding-top:56px; } }

/* ---------- phone menu: the nav links fold into a button below 820px ---------- */
.nav-burger { display:none; width:40px; height:40px; padding:0; border:1px solid rgba(255,255,255,.42); border-radius:999px;
  background:transparent; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.nav-burger span { display:block; width:16px; height:1.6px; border-radius:2px; background:#FFFFFF; transition:transform .25s var(--ease), opacity .2s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(5.6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-5.6px) rotate(-45deg); }
.nav-panel { border-top:1px solid rgba(255,255,255,.16); }
.nav-panel .wrap { display:flex; flex-direction:column; padding-top:6px; padding-bottom:14px; }
.nav-panel a { display:block; padding:14px 0; font-size:17px; font-weight:500; color:#FFFFFF;
  border-bottom:1px solid rgba(255,255,255,.14); }
.nav-panel a:last-child { border-bottom:0; }
.nav-panel a[aria-current="page"] { text-decoration:underline; text-underline-offset:6px; }
@media (max-width: 820px) { .nav-burger { display:inline-flex; } }
@media (min-width: 821px) { .nav-panel { display:none !important; } }

/* visit: the map is a Google Maps screenshot. Shown whole at its own 4:3 shape so the
   pin stays in view and Google's credits along the bottom are never cropped off. */
.map-card { min-height:0; aspect-ratio:4/3; align-self:center; background:var(--oat); }
.map-card img { display:block; width:100%; height:100%; object-fit:cover; }
.map-card:hover img { filter:brightness(1.02); }