/* ══════════════════════════════════════════════════════════════
   YEDU.Coffee — one stylesheet for the whole site.
   The palette is taken from the printed cup label so the sticker,
   the bags and the website read as one thing.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* from the label */
  --olive:      #4E5A3C;   /* the "YEDU" olive of the printed mark */
  --olive-deep: #3A4430;
  --brown:      #8B5E3C;   /* the ".Coffee" brown                  */
  --brown-deep: #6E4629;

  /* the rest of the system */
  --paper:      #EADFC6;   /* kraft paper      */
  --paper-deep: #DFD1B0;   /* darker kraft     */
  --paper-lift: #F2E9D4;   /* raised cards     */
  --ink:        #241812;   /* dark roast       */
  --ink-soft:   #4A3A2E;   /* body on paper    */
  --sage:       #A7B18C;   /* the bag green    */
  --sage-deep:  #5F6E4A;
  --soil:       #97381C;   /* laterite red     */
  --line:       rgba(36,24,18,.20);
  --line-soft:  rgba(36,24,18,.12);

  /* Fallbacks matter: if Google Fonts is blocked or slow, the page must
     still look like itself. Both display and body fall back to a sans. */
  --display: "Bricolage Grotesque", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:    "Space Mono", ui-monospace, "SFMono-Regular", "Courier New", monospace;

  --pad:  clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 1180px;
  --r:    14px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:5rem; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:800; line-height:1.1; letter-spacing:-.01em; }
:focus-visible{ outline:3px solid var(--soil); outline-offset:2px; border-radius:4px; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:.7rem 1.1rem; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

/* ── wordmark: YEDU olive + .Coffee brown, as printed ─────────── */
.wordmark{ font-family:var(--display); font-weight:800; letter-spacing:.005em; white-space:nowrap; }
.wordmark b{ color:var(--olive); font-weight:800; }
.wordmark i{ color:var(--brown); font-style:normal; font-weight:600; }

/* ── header ───────────────────────────────────────────────────── */
.site-head{
  position:sticky; top:0; z-index:60;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(8px);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
      padding-block:.85rem; }
.brand{ text-decoration:none; font-size:1.3rem; }
.nav-addr{ font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); letter-spacing:.02em; }
.nav-links{ display:flex; gap:1.35rem; align-items:center; }
.nav-links a{
  text-decoration:none; font-size:.94rem; font-weight:500;
  border-bottom:2px solid transparent; padding-bottom:2px;
}
.nav-links a:hover{ border-color:var(--brown); }
.lang-toggle{
  font-family:var(--mono); font-size:.78rem !important; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-soft);
}
.nav-cta{
  background:var(--olive); color:var(--paper) !important;
  padding:.5rem 1.05rem; border-radius:999px; border:none !important; font-weight:600;
}
.nav-cta:hover{ background:var(--brown); }
@media (max-width:900px){
  .nav-addr{ display:none; }
  .nav-links a:not(.nav-cta):not(.lang-toggle){ display:none; }
}

/* ── buttons ──────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  text-decoration:none; font-weight:600; font-family:var(--body);
  padding:.9rem 1.55rem; border-radius:999px; font-size:1rem;
  border:1.5px solid var(--olive); cursor:pointer;
  transition:transform .14s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:active{ transform:scale(.975); }
.btn-primary{ background:var(--olive); color:var(--paper); }
.btn-primary:hover{ background:var(--brown); border-color:var(--brown); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--paper-deep); }
.btn-light{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn-light:hover{ background:var(--sage); border-color:var(--sage); }

/* ── countdown / open sign ────────────────────────────────────── */
.countdown{
  background:var(--olive); color:var(--paper);
  border-bottom:1px solid var(--olive-deep);
}
.count-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem 2.5rem; padding-block:1.15rem; flex-wrap:wrap;
}
.count-label{ display:flex; flex-direction:column; gap:.2rem; max-width:34ch; }
.count-kicker{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sage);
}
.count-label strong{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.05rem, 2vw, 1.28rem); line-height:1.2;
  display:flex; align-items:center; gap:.55rem;
}
.count-sub{ font-size:.9rem; color:#D9D2BE; }
.count-digits{ display:flex; align-items:flex-start; gap:clamp(.7rem, 2.6vw, 1.9rem); }
.count-cell{ display:flex; flex-direction:column; align-items:center; }
.count-num{
  font-family:var(--mono); font-weight:700;
  font-size:clamp(1.8rem, 5vw, 2.7rem); line-height:1;
  font-variant-numeric:tabular-nums; color:var(--paper);
}
.count-unit{
  font-family:var(--mono); font-size:.65rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sage); margin-top:.4rem;
}
.count-sep{
  font-family:var(--mono); font-size:clamp(1.3rem,3.5vw,2rem);
  color:var(--brown); line-height:1.15;
}
.count-label .dot{
  width:.6rem; height:.6rem; border-radius:99px; background:var(--sage);
  box-shadow:0 0 0 0 rgba(167,177,140,.7); animation:pulse 2.4s infinite;
}
.count-label .is-shut .dot{ background:var(--brown); animation:none; }
@keyframes pulse{
  70%{ box-shadow:0 0 0 .55rem rgba(167,177,140,0); }
  100%{ box-shadow:0 0 0 0 rgba(167,177,140,0); }
}

/* ── hero ─────────────────────────────────────────────────────── */
.hero{ padding-block:clamp(2rem, 4.5vw, 3.2rem) clamp(2rem, 4vw, 3rem); }

/* Two columns: brand on the left, the menu card on the right, so the first
   screen answers both "what is this" and "what do you pour, what does it
   cost". align-items:start because the menu is much taller than the brand
   block — centred, it would drag the wordmark down the page. */
.hero-grid{
  display:grid; grid-template-columns:1.08fr .92fr;
  gap:clamp(2rem, 5vw, 4rem); align-items:start;
}

@media (max-width:940px){
  .hero-grid{ grid-template-columns:1fr; gap:1.6rem; }
  /* The hero buttons used to be hidden here, because they pushed the buy
     panel below the fold and the purchase routes mattered more than the
     wayfinding. Both halves of that reasoning have gone: the panel is now
     a strip immediately below this section, and one of these three buttons
     IS the buy route. Restore the rule if the phone hero ever feels long. */
  .hero-grid .hero-sub{ margin-top:.9rem; }
}

/* The menu card lives on the dark window background everywhere else, so all
   its children are already written for light-on-dark. Giving it the ink
   background here keeps every one of those rules working instead of forcing
   a second, light-background variant — and a dark card against the paper
   reads like the printed card pinned up beside the wordmark. */
.hero .menu-card{
  background:var(--ink); color:var(--paper);
  border-color:rgba(234,223,198,.18);
  box-shadow:6px 6px 0 rgba(36,24,18,.13);
  padding:1.5rem 1.6rem;
}

/* ── buy panel ────────────────────────────────────────────────────
   Was the hero's right column; the home page now uses the wider
   .shop-grid cards instead. Still used by any page that wants the
   compact two-route panel in a narrow column. */
.buy-panel{
  background:var(--paper-lift); border:1.5px solid var(--ink);
  border-radius:var(--r); padding:1.5rem 1.6rem 1.4rem;
  box-shadow:6px 6px 0 rgba(36,24,18,.13);
}
.buy-tag{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brown-deep); display:block;
}
.buy-route{ padding-block:1.1rem; border-bottom:1px dashed var(--line); }
.buy-route:first-of-type{ padding-top:.9rem; }
.buy-route:last-of-type{ border-bottom:none; padding-bottom:.4rem; }
.buy-route h2{
  font-size:1.32rem; font-weight:800; line-height:1.15;
}
.buy-route p{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.04em;
  color:var(--sage-deep); margin-top:.35rem;
}
.buy-route .btn{ width:100%; margin-top:.85rem; padding-block:.78rem; }
.buy-foot{
  font-size:.8rem; color:var(--ink-soft); line-height:1.5;
  margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line-soft);
}
.eyebrow{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sage-deep);
  display:flex; align-items:center; gap:.75rem;
}
.eyebrow::before{ content:""; width:2.2rem; height:1px; background:currentColor; flex:none; }
.dict{ margin-top:1.1rem; }
.dict-word{
  font-family:var(--display); font-weight:800;
  /* was 9.5rem — far too much of the fold for one word */
  font-size:clamp(3.2rem, 8.5vw, 6.4rem); line-height:.86; letter-spacing:-.03em;
  color:var(--olive);
}
.dict-meta{
  font-family:var(--mono); font-size:clamp(.74rem, 1.2vw, .84rem);
  color:var(--ink-soft); margin-top:.7rem;
}
.dict-meta em{ font-style:italic; }
.dict-def{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.25rem, 2.4vw, 1.75rem); line-height:1.25;
  max-width:26ch; margin-top:.7rem;
}
.dict-def b{ color:var(--brown); font-weight:800; }
.hero-sub{ max-width:52ch; margin-top:1.1rem; color:var(--ink-soft); font-size:1rem; }
.hero-ctas{ display:flex; gap:.7rem; margin-top:1.4rem; flex-wrap:wrap; }
.hero-ctas .btn{ padding:.72rem 1.25rem; font-size:.94rem; }

/* staged reveal */
.rise{ opacity:0; transform:translateY(16px); animation:rise .65s ease forwards; }
.rise.d1{ animation-delay:.05s } .rise.d2{ animation-delay:.14s }
.rise.d3{ animation-delay:.24s } .rise.d4{ animation-delay:.34s }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ── ticker ───────────────────────────────────────────────────── */
.ticker{ overflow:hidden; border-block:1px solid var(--line); background:var(--paper-deep); }
.ticker-track{ display:flex; width:max-content; animation:scroll 46s linear infinite; padding-block:.75rem; }
.ticker-track span{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); white-space:nowrap;
}
.ticker-track span::after{ content:"·"; margin-inline:1.4rem; color:var(--brown); }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* ── sections ─────────────────────────────────────────────────── */
section.band{ padding-block:clamp(3.2rem, 7vw, 5.5rem); }
.sec-head{ margin-bottom:2.4rem; }
.sec-title{ font-size:clamp(1.8rem, 4.2vw, 2.9rem); max-width:24ch; margin-top:1rem; }
.sec-lede{ margin-top:1rem; max-width:54ch; color:var(--ink-soft); }

/* ── shop routes ──────────────────────────────────────────────── */
.shop{ background:var(--paper-deep); border-block:1px solid var(--line); }

/* The section head stacks eyebrow → title → lede in one narrow column, which
   on a wide screen leaves the right half of the band empty and pushes the
   cards a long way down the page. Two tracks instead: the title keeps the
   left, the lede moves alongside it rather than underneath. Fills the gap
   and takes roughly 90px of height out of the section at the same time.
   Scoped to .shop because it is the only section head carrying a lede —
   .story and .faq-band are eyebrow + title only and should stay stacked. */
.shop .sec-head{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:.9rem 3rem; align-items:end; margin-bottom:2rem;
}
.shop .sec-head .eyebrow{ grid-column:1; grid-row:1; }
.shop .sec-head .sec-title{ grid-column:1; grid-row:2; margin-top:0; max-width:20ch; }
.shop .sec-head .sec-lede{ grid-column:2; grid-row:2; margin-top:0; max-width:48ch; }
@media (max-width:820px){
  .shop .sec-head{ grid-template-columns:1fr; gap:.5rem; }
  .shop .sec-head .sec-title,
  .shop .sec-head .sec-lede{ grid-column:1; grid-row:auto; }
}
.shop-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
.shop-card{
  background:var(--paper-lift); border:1.5px solid var(--ink);
  border-radius:var(--r); padding:1.9rem 1.9rem 1.6rem;
  box-shadow:5px 5px 0 rgba(36,24,18,.14);
  display:flex; flex-direction:column;
}
.shop-card--sub{ background:var(--sage); }
.shop-tag{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brown-deep);
}
.shop-card--sub .shop-tag{ color:var(--olive-deep); }
.shop-card h3{ font-size:1.55rem; margin-top:.55rem; }
.shop-card p{ margin-top:.7rem; color:var(--ink-soft); font-size:.99rem; }
.shop-card--sub p{ color:#2E3323; }
.shop-bullets{ list-style:none; margin-top:1.1rem; display:grid; gap:.4rem; }
.shop-bullets li{ font-size:.92rem; display:flex; gap:.6rem; align-items:baseline; }
.shop-bullets li::before{ content:"—"; color:var(--brown); flex:none; }
.shop-card--sub .shop-bullets li::before{ color:var(--olive-deep); }
.shop-card .btn{ margin-top:1.5rem; }
.shop-host{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  color:var(--ink-soft); margin-top:.7rem; text-align:center;
}
.shop-or{ margin-top:1.8rem; font-size:.95rem; color:var(--ink-soft); max-width:60ch; }
@media (max-width:820px){ .shop-grid{ grid-template-columns:1fr; } }

/* ── buy strip (the reminder under the hero) ───────────────────────
   Not a .band: this is meant to be a single line of furniture between
   the hero and the list, not a section in its own right. The full pitch
   is the .shop band much further down. */
.buy-strip-band{ background:var(--sage); border-block:1px solid var(--line); }
.buy-strip{
  display:flex; align-items:center; justify-content:space-between;
  gap:.9rem 2rem; flex-wrap:wrap; padding-block:1.15rem;
}
.buy-strip-text{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1rem, 2vw, 1.18rem); line-height:1.3;
  color:#2E3323; max-width:42ch;
}
.buy-strip-ctas{ display:flex; gap:.6rem; flex-wrap:wrap; }
.buy-strip-ctas .btn{ padding:.7rem 1.2rem; font-size:.92rem; }
/* The ghost button's default hover tint is a paper colour — invisible on
   sage. Borrow the light variant's behaviour instead. */
.buy-strip-ctas .btn-ghost:hover{ background:var(--paper); border-color:var(--paper); }

/* ── story ────────────────────────────────────────────────────── */
.story{ background:var(--sage); }
.story .eyebrow{ color:var(--olive-deep); }
.story-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem; }
.story-item h3{ font-weight:600; font-size:1.25rem; margin-bottom:.55rem; }
.story-item p{ color:#2E3323; font-size:.99rem; }
.story-mark{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em;
  color:var(--brown-deep); text-transform:uppercase; margin-bottom:.8rem; display:block;
}
.story-note{
  margin-top:2.6rem; padding-top:1.5rem; border-top:1px solid rgba(36,24,18,.22);
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.1rem, 2.3vw, 1.45rem); max-width:48ch;
}
@media (max-width:820px){ .story-grid{ grid-template-columns:1fr; gap:1.9rem; } }

/* ── the window (dark) ──────────────────────────────────────────
   The home page no longer renders a .window section — the menu card and
   the processing explainer both live in the hero, where .hero .menu-card
   gives them this same ink treatment. Everything from .window down to
   .method-tags is therefore unused by index.php. Kept rather than
   deleted: .menu-card and its children are shared with the hero cards,
   and bag.php has not been checked against these selectors. */
.window{ background:var(--ink); color:var(--paper); }
.window .eyebrow{ color:var(--sage); }
.window-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:3.2rem; align-items:start; }
.window h2{ color:var(--paper); margin-block:1rem 1.3rem; }
.window p{ color:#D8CBB4; margin-bottom:1rem; max-width:58ch; }
.window p strong{ color:var(--paper); font-weight:600; }
.methods{ margin-top:1.6rem; }
.methods h4{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sage); font-weight:400; margin-bottom:.7rem;
}
.method-tags{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; }
.method-tags li{
  font-family:var(--mono); font-size:.76rem;
  border:1px solid rgba(234,223,198,.35); color:#D8CBB4;
  padding:.28rem .75rem; border-radius:999px;
}
.menu-card{ border:1px solid rgba(234,223,198,.28); border-radius:var(--r); padding:1.6rem; }
.menu-card h3{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.18em; font-weight:400;
  text-transform:uppercase; color:var(--sage); margin-bottom:1rem;
}
.menu-row{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding-block:.6rem; border-bottom:1px dashed rgba(234,223,198,.2);
}
.menu-row:last-of-type{ border-bottom:none; }
.menu-row .name{ font-weight:500; }
.menu-row .dsc{ font-size:.84rem; color:#B8A98E; display:block; }
.menu-row .prc{ font-family:var(--mono); font-size:.92rem; color:var(--sage); white-space:nowrap; }
.menu-note{ font-size:.8rem; color:#B8A98E; margin-top:1rem; }

/* ── processing explainer (hero, left column) ──────────────────────
   Borrows .menu-card for the frame so the pair read as one thing: the
   reason on the left, the prices on the right. It also gives the brand
   column enough height to stand beside a very tall menu instead of
   trailing off into empty paper. */
.hero-copy .proc-card{ margin-top:2.4rem; }
.proc-lede{
  font-size:.88rem; color:#B8A98E; line-height:1.55;
  margin-bottom:1.4rem; max-width:none;
}
.proc{ display:grid; gap:1.15rem; }
.proc-item{ border-left:2px solid var(--sage); padding-left:1rem; }
.proc-item h4{
  font-family:var(--display); font-weight:600; font-size:1.05rem;
  color:var(--paper); margin-bottom:.3rem; letter-spacing:0;
}
.proc-item p{
  font-size:.88rem; color:#B8A98E; line-height:1.55;
  margin-bottom:0; max-width:46ch;
}
/* The price ladder runs 7.50 → 10.50 with nothing explaining the climb, which
   reads as arbitrary. This answers it where the question gets asked. */
.proc-note{
  margin-top:1.5rem; padding-top:1.2rem;
  border-top:1px solid rgba(234,223,198,.2);
  font-size:.86rem; color:#B8A98E; line-height:1.6; max-width:48ch;
}
.proc-note strong{ color:var(--sage); font-weight:600; }
@media (max-width:900px){ .window-grid{ grid-template-columns:1fr; gap:2.2rem; } }

/* ── visit ────────────────────────────────────────────────────── */
.visit{ background:var(--paper-deep); border-top:1px solid var(--line); }
.visit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3.2rem; align-items:start; }
.visit-addr{ font-size:clamp(1.5rem, 3vw, 2.05rem); line-height:1.15; margin-top:1rem; }
.visit-addr a{ text-decoration:none; border-bottom:3px solid var(--brown); }
.visit-addr a:hover{ color:var(--brown); }
.visit .lede{ margin-top:1rem; color:var(--ink-soft); max-width:46ch; }
.visit-facts{ margin-top:1.7rem; display:grid; gap:.85rem; }
.fact{ display:flex; gap:.9rem; align-items:baseline; font-size:.95rem; }
.fact .k{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sage-deep); min-width:6.5rem; flex:none;
}
.hours{ width:100%; border-collapse:collapse; }
.hours caption{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sage-deep); text-align:left; padding-bottom:.7rem;
}
.hours td{ padding-block:.6rem; border-bottom:1px dashed var(--line); font-size:.97rem; }
.hours td:last-child{ text-align:right; font-family:var(--mono); font-size:.88rem; }
.hours .is-closed td:last-child{ color:var(--ink-soft); }
.hours .is-today td{ font-weight:700; color:var(--brown-deep); }
.hours-note{ font-size:.82rem; color:var(--ink-soft); margin-top:.9rem; }
@media (max-width:820px){ .visit-grid{ grid-template-columns:1fr; gap:2.2rem; } }

/* ── /bag landing page ────────────────────────────────────────── */
.bag-hero{ padding-block:clamp(2.6rem, 7vw, 4.5rem) clamp(1.5rem,3vw,2.5rem); text-align:center; }
.bag-hero .eyebrow{ justify-content:center; }
.bag-hero .eyebrow::after{ content:""; width:2.2rem; height:1px; background:currentColor; flex:none; }
.bag-title{ font-size:clamp(2.1rem, 6.5vw, 3.6rem); margin-top:1.1rem; max-width:16ch; margin-inline:auto; }
.bag-title b{ color:var(--brown); }
.bag-lede{ margin-top:1.1rem; color:var(--ink-soft); max-width:52ch; margin-inline:auto; }
.bag-shop{ padding-bottom:clamp(2.5rem,6vw,4rem); }
.bag-back{ background:var(--ink); color:var(--paper); }
.bag-back h2{ color:var(--paper); font-size:clamp(1.5rem,3.4vw,2.2rem); margin-top:.9rem; }
.bag-back p{ color:#D8CBB4; margin-top:.9rem; max-width:52ch; }
.bag-back .btn{ margin-top:1.5rem; }
.bag-back-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:start; }
.bag-back .hours td{ border-bottom-color:rgba(234,223,198,.2); }
.bag-back .hours caption{ color:var(--sage); }
.bag-back .hours .is-today td{ color:var(--sage); }
.bag-back .hours .is-closed td:last-child{ color:#B8A98E; }
.bag-more{ margin-top:1.2rem; }
.bag-more a{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.06em;
  color:var(--sage); text-decoration:none;
  border-bottom:1px solid rgba(167,177,140,.5); padding-bottom:2px;
}
.bag-more a:hover{ color:var(--paper); border-color:var(--paper); }
@media (max-width:820px){ .bag-back-grid{ grid-template-columns:1fr; gap:2rem; } }

/* ── footer ───────────────────────────────────────────────────── */
.site-foot{ background:var(--ink); color:var(--paper); }
.foot{ display:flex; justify-content:space-between; gap:2.5rem; flex-wrap:wrap; padding-block:2.8rem 2rem; }
.foot-word{ font-size:1.9rem; }
.foot-word b{ color:var(--sage); }
.foot-word i{ color:var(--brown); }
.foot-brand small{
  display:block; font-family:var(--mono); font-size:.73rem; color:#B8A98E;
  margin-top:.6rem; line-height:1.7;
}
.foot-cols{ display:flex; gap:3rem; flex-wrap:wrap; }
.foot-col{ display:flex; flex-direction:column; gap:.45rem; }
.foot-col h4{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; font-weight:400;
  text-transform:uppercase; color:var(--sage); margin-bottom:.35rem;
}
.foot-col a{ color:var(--paper); text-decoration:none; font-size:.92rem; }
.foot-col a:hover{ color:var(--sage); text-decoration:underline; }
.foot-legal{
  border-top:1px solid rgba(234,223,198,.18); padding-block:1.1rem;
  font-family:var(--mono); font-size:.7rem; color:#9C8E76;
}

/* ── scroll reveal ────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .rise,.reveal{ animation:none !important; transition:none !important; opacity:1 !important; transform:none !important; }
  .ticker-track{ animation:none; }
  .count-label .dot{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ══════════════════════════════════════════════════════════════
   CONVERSION LAYER — trust row, the list, FAQ, sticky bar
   ══════════════════════════════════════════════════════════════ */

/* ── trust row under the buy panel ────────────────────────────── */
.trust-row{
  list-style:none; display:flex; flex-wrap:wrap; gap:.35rem 1.1rem;
  margin-top:1rem; padding-inline:.2rem;
}
.trust-row li{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.03em;
  color:var(--ink-soft); display:flex; align-items:baseline; gap:.4rem;
}
.trust-row li::before{ content:"✓"; color:var(--sage-deep); font-weight:700; }

/* ── the list ─────────────────────────────────────────────────── */
.list{ background:var(--ink); color:var(--paper); }
.list .eyebrow{ color:var(--sage); }
.list .sec-title{ color:var(--paper); }
.list .sec-lede{ color:#D8CBB4; }
.list-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width:940px){ .list-grid{ grid-template-columns:1fr; gap:2rem; } }

.list-benefits{ list-style:none; margin-top:1.6rem; display:grid; gap:.75rem; }
.list-benefits li{
  display:flex; gap:.8rem; align-items:baseline; color:#D8CBB4; font-size:.98rem;
}
.list-benefits li::before{
  content:""; flex:none; width:.5rem; height:.5rem; border-radius:99px;
  background:var(--sage); transform:translateY(-.15rem);
}

.list-form-card{
  background:var(--paper); color:var(--ink);
  border-radius:var(--r); padding:1.7rem 1.7rem 1.5rem;
  box-shadow:6px 6px 0 rgba(167,177,140,.22);
}
.list-count{
  margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:.76rem; color:var(--ink-soft);
}
.list-count strong{ color:var(--brown-deep); }

/* ── the signup form ──────────────────────────────────────────── */
.signup .field{ margin-bottom:.8rem; }
.signup .field label{
  display:block; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sage-deep);
  margin-bottom:.3rem;
}
.signup input[type=text], .signup input[type=email]{
  width:100%; padding:.8rem .95rem; font-size:1rem; font-family:var(--body);
  border:1.5px solid var(--line); border-radius:10px;
  background:#fff; color:var(--ink);
}
.signup input:focus{ outline:2px solid var(--brown); outline-offset:1px; border-color:var(--brown); }
.signup-btn{ width:100%; margin-top:.3rem; }
.signup-btn[disabled]{ opacity:.6; cursor:progress; }

/* the honeypot: present for bots, gone for everyone else */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

.consent{
  display:flex; gap:.6rem; align-items:flex-start;
  margin-top:1rem; font-size:.82rem; line-height:1.5; color:var(--ink-soft);
  cursor:pointer;
}
.consent input{ margin-top:.25rem; flex:none; width:1rem; height:1rem; accent-color:var(--olive); }
.signup-fine{ font-size:.75rem; color:var(--sage-deep); margin-top:.7rem; line-height:1.5; }

.signup-status{ margin-top:.9rem; font-size:.88rem; line-height:1.5; display:none; }
.signup-status.is-shown{ display:block; }
.signup-status.is-ok{ color:var(--sage-deep); font-weight:600; }
.signup-status.is-err{ color:var(--soil); }

.signup-banner{
  border-radius:10px; padding:.75rem .95rem; font-size:.9rem; margin-bottom:1rem;
  background:var(--paper-deep); border:1px solid var(--line);
}
.signup-banner.is-ok{ background:var(--sage); border-color:var(--sage-deep); font-weight:600; }
.signup-banner.is-err{ background:#F3D9CF; border-color:var(--soil); color:var(--soil); }

/* success state replaces the form entirely — no dead fields left on screen */
.signup-done{ text-align:left; }
.signup-done h3{ font-size:1.3rem; }
.signup-done p{ margin-top:.5rem; color:var(--ink-soft); font-size:.95rem; }

/* compact variant (footer) */
.signup--compact .signup-fields{ display:flex; gap:.5rem; align-items:flex-end; flex-wrap:wrap; }
.signup--compact .field{ flex:1 1 12rem; margin-bottom:0; }
.signup--compact .signup-btn{ width:auto; margin-top:0; padding-inline:1.2rem; white-space:nowrap; }
.signup--compact input[type=email]{ background:rgba(234,223,198,.1); color:var(--paper); border-color:rgba(234,223,198,.3); }
.signup--compact input[type=email]::placeholder{ color:#8E8371; }
.signup--compact .field label{ color:var(--sage); }
.signup--compact .consent{ color:#B8A98E; font-size:.75rem; }
.signup--compact .signup-fine{ display:none; }

.foot-signup{ max-width:26rem; }
.foot-signup h4{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; font-weight:400;
  text-transform:uppercase; color:var(--sage); margin-bottom:.4rem;
}
.foot-signup > p{ font-size:.82rem; color:#B8A98E; margin-bottom:.9rem; }

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq-band{ background:var(--paper-deep); border-block:1px solid var(--line); }
.faq{ max-width:52rem; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  cursor:pointer; list-style:none; padding-block:1.05rem; padding-right:2.2rem;
  font-family:var(--display); font-weight:600; font-size:1.08rem; position:relative;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:.3rem; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:1.3rem; color:var(--brown); line-height:1;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item summary:hover{ color:var(--brown-deep); }
.faq-a{ padding-bottom:1.1rem; }
.faq-a p{ color:var(--ink-soft); font-size:.97rem; max-width:60ch; }

/* ── sticky mobile CTA ────────────────────────────────────────── */
.sticky-cta{ display:none; }
@media (max-width:720px){
  .sticky-cta{
    display:flex; gap:.55rem; position:fixed; z-index:70;
    left:0; right:0; bottom:0;
    padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter:blur(10px); border-top:1px solid var(--line);
  }
  .sticky-cta .btn{ flex:1; padding:.72rem .6rem; font-size:.92rem; }
  /* keep the footer clear of the bar */
  .site-foot{ padding-bottom:3.8rem; }
}

/* ── confirm / unsubscribe pages ──────────────────────────────── */
.confirm-wrap{ padding-block:clamp(3rem,9vw,6rem); max-width:44rem; }
.confirm-title{ font-size:clamp(2rem,5.5vw,3.1rem); margin-top:1rem; }
.confirm-body{ margin-top:1rem; color:var(--ink-soft); font-size:1.08rem; max-width:48ch; }
.confirm-next{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2rem; }
.confirm-back{ margin-top:2.5rem; font-family:var(--mono); font-size:.8rem; }
.confirm-back a{ color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--line); }
.confirm-back a:hover{ color:var(--brown); }

/* ── grouped menu card ────────────────────────────────────────── */
.menu-group + .menu-group{ margin-top:1.3rem; }
.menu-group-head{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; font-weight:400;
  text-transform:uppercase; color:var(--brown);
  padding-bottom:.45rem; margin-bottom:.2rem;
  border-bottom:1px solid rgba(234,223,198,.22);
}
.menu-row .dsc{ line-height:1.45; padding-right:.6rem; }

/* the robusta paragraph — set apart, because it is the one claim on the
   page a specialty customer will argue with */
.robusta-note{
  margin-top:1.4rem !important; padding:1rem 1.1rem;
  border-left:3px solid var(--sage);
  background:rgba(167,177,140,.09);
  border-radius:0 8px 8px 0;
}
.menu-group-note{
  font-size:.78rem; color:#B8A98E; margin-top:.7rem; line-height:1.5;
  font-style:italic;
}