/* The shop's pages — home, Wholesale, About, each lot's page — share this sheet, the nav,
   the cart and the footer. Fonts and colour tokens are in /brand/theo.css,
   which every page of the shop carries; the Tailwind utilities the pages use
   are compiled ahead of time into /brand/shop.tw.css (tools/build_shop_css.py).

   The feel is quiet luxury: a frosted nav, plates drawn up out of a dark
   slot as they enter, headlines rising out of a mask, and a footer that
   unboxes. All of it runs on the compositor — no scroll handlers, and nothing
   is kept on its own GPU layer (will-change) when it isn't moving, which is
   what made scrolling stutter before. See REVEAL below. */
html{scroll-padding-top:104px;scrollbar-gutter:stable}   /* the page doesn't jump when the cart locks scrolling */
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body{-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6}
/* one face, Mona Sans (brand/theo.css): headings in its semibold, reading
   text in its regular, and every label, link and button in sentence case —
   no spaced capitals, which is what made the old pages read as a template */
h1,h2,h3{text-wrap:balance}
.accent{color:rgb(var(--c-clay))}
[data-tone="dark"] .accent{color:rgb(var(--c-ember))}
.lbl{font-family:var(--f-sans);font-size:13px;font-weight:600}
:focus-visible{outline:2px solid rgb(var(--c-clay));outline-offset:3px}
[data-tone="dark"] :focus-visible{outline-color:rgb(var(--c-bone))}

/* ── the nav: the green site's pill, one bar and two tones ────────────
   A rounded rectangle at 22px, not a capsule — every surface on the page is
   one, plates at 40 and cards at 20. The tint carries the contrast on its
   own; tone describes the ground behind the pill, not the page's theme, so
   both the surface and the ink are literal colours.                    */
.navpill{position:relative;display:flex;align-items:center;gap:12px;max-width:100%;
  padding:10px 10px 10px 18px;border-radius:22px;border:1px solid transparent;
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  transition-property:background-color,color,border-color,box-shadow;
  transition-duration:.42s;transition-timing-function:var(--ease-tone);
  animation:navdrop .9s var(--ease) .1s both}
/* it drops in once, on `translate`, so the tone crossfade is never interrupted */
@keyframes navdrop{from{translate:0 -85px}to{translate:0 0}}
.navpill[data-tone="dark"]{background:rgba(22,20,18,.6);color:#F5F3EF;
  border-color:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 30px -14px rgba(0,0,0,.45)}
.navpill[data-tone="light"]{background:rgba(250,248,245,.74);color:#1D1B18;
  border-color:rgba(29,27,24,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 30px -16px rgba(29,27,24,.2)}
/* the glass catches a hairline of light along its top edge, as real glass does */
.brand{display:flex;align-items:center;flex:none;margin:-8px 4px -8px 0;padding:8px 0;text-decoration:none}
.brand-img{display:block;height:27px;width:auto;transition:filter .42s var(--ease-tone)}
.navpill[data-tone="dark"] .brand-img{filter:invert(1)}
.nav-links{align-items:center;gap:6px}
.nav-link{position:relative;display:inline-flex;align-items:center;min-height:34px;padding:0 10px;
  border:1px solid transparent;border-radius:12px;background:none;cursor:pointer;
  font-family:var(--f-sans);font-size:13.5px;font-weight:500;color:inherit;text-decoration:none;opacity:.86;
  transition:background-color .42s var(--ease-tone),border-color .42s var(--ease-tone),opacity .28s var(--ease-h)}
/* the page links (and Menu) are plain words; the actions beside them — Account
   and Cart — are the boxed ones. A word answers the pointer with an underline that
   wipes in from the left, as the footer's links do; an open Shop menu keeps it. */
.nav-link:hover,.nav-link[aria-expanded="true"]{opacity:1}
.nav-link::after{content:"";position:absolute;left:10px;right:10px;bottom:7px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease-h)}
.nav-drop .nav-link::after{right:26px}                  /* under the word, not the chevron */
.nav-link:hover::after,.nav-link[aria-expanded="true"]::after{transform:scaleX(1)}
.mobile-nav{position:fixed;left:16px;right:16px;top:78px;z-index:45;padding:8px;border-radius:20px;
  background:rgb(var(--c-cream));border:1px solid rgb(var(--c-sand));
  box-shadow:0 24px 50px -28px rgba(29,24,18,.28)}
.mobile-nav a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:12px;
  font-family:var(--f-sans);font-size:14px;font-weight:500;
  color:rgb(var(--c-espresso));text-decoration:none}
.mobile-nav a:hover{background:rgb(var(--c-paper))}
/* Shop opens to its shelves only when asked */
.mobile-nav .msub summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 14px;
  border-radius:12px;cursor:pointer;list-style:none;font-family:var(--f-sans);font-size:14px;font-weight:500;color:rgb(var(--c-espresso))}
.mobile-nav .msub summary::-webkit-details-marker{display:none}
.mobile-nav .msub summary:hover{background:rgb(var(--c-paper));transform:none}
.mobile-nav .msub .chev{width:10px;height:10px;transition:transform .3s var(--ease-h)}
.mobile-nav .msub[open] .chev{transform:rotate(180deg)}

/* ── inline highlighted phrase ─────────────────────────────────────── */
/* an inline-block, exactly as tall as its line: so in a tightly set headline it never covers the
   tails of the letters on the line above (an inline's background is as tall as the font's own box, taller
   than such a line). Kept to short phrases, which don't break across lines. */
.mark{display:inline-block;background:rgb(var(--c-paper));border-radius:8px;padding:0 .38em}   /* exactly its line's height */
.mark-dark{background:rgb(var(--c-bone) / .14);border-radius:8px;padding:.06em .38em;
      box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ══ REVEAL — two gestures, one rhythm ════════════════════════════════
   Nothing appears until it has come a tenth of the way up the screen, so
   you see it arrive rather than finding it already there.
     · Display headlines rise 130px out of a mask (shop.js wraps each in a
       .clip) with a 2° lean that settles — clipped, not faded, so the type
       emerges from nothing.
     · Everything else rises 40px and fades in.
   Both run on the same long expo-out curve, and whatever arrives in the same
   moment is staggered 90ms in reading order — top to bottom, left to right —
   so a row lands as a row and a heading leads its copy, never at random.

   They move `translate` and `rotate`, not `transform`, so a card's own hover
   lift works during and after its entrance. Hidden only when scripts run:
   without them, or with reduced motion asked for, everything is just there. */
.clip{display:block;overflow:hidden;padding-bottom:calc(.08em + var(--foot,0px));margin-bottom:calc(-1 * var(--foot,0px))}
/* --foot (shop.js): room under the mask for the tails of g, p and y — a quarter of the headline's own size, which
   a big tightly set headline needs and its parent's .08em is not — taken back below, so nothing under it moves */
/* the opening photograph settles into place as the page opens */
@keyframes settle{from{scale:1.07}to{scale:1}}
.js .hero-img{animation:settle 2s var(--ease) both}
@keyframes reveal{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
@keyframes rise{from{translate:0 var(--rise,130px);rotate:2deg}to{translate:0 0;rotate:0deg}}
.js .ap{opacity:0}
.js .ap.in{animation:reveal 1s var(--ease) both;animation-delay:var(--ap-delay,0ms)}
.js .ap-display{opacity:1;transform-origin:25% 50%}
.js .ap-display:not(.in){translate:0 var(--rise,130px);rotate:2deg}
.js .ap-display.in{animation:rise 1.15s var(--ease) both;animation-delay:var(--ap-delay,0ms)}
@media (max-width:900px){.js .ap-display{--rise:100px}}
/* cards scrolling past a sticky list: in from the side, 15px, as the green site's */
@keyframes slide{from{opacity:0;translate:15px 0}to{opacity:1;translate:0 0}}
.js .ap-slide.in{animation:slide .44s var(--ease) both;animation-delay:var(--ap-delay,0ms)}
@media (prefers-reduced-motion: reduce){
  .js .ap{opacity:1}.js .ap.in,.js .ap-display.in,.js .ap-slide.in,.js .hero-img{animation:none}
  .js .ap-display:not(.in){translate:none;rotate:none}
  .clip{overflow:visible}
}

/* ══ HOVER — everything you can act on moves under the pointer ═══════ */
a,button,summary,input,select,[role="tab"]{
  transition:transform .32s var(--ease-h),background-color .32s var(--ease-h),
             color .32s var(--ease-h),opacity .32s var(--ease-h),box-shadow .32s var(--ease-h)}
button:not(.plain):hover,a.btn:hover{transform:translateY(-3px)}
button:not(.plain):active{transform:translateY(-1px) scale(.985)}
summary:hover{transform:translateX(3px)}
@media (prefers-reduced-motion: reduce){
  a,button,summary,input,select,[role="tab"]{transition:none}
  button:hover,a:hover{transform:none}
}

/* the green site's button: mono, upper case, on a capsule */
.btn-ink{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;
  padding:0 20px;border-radius:999px;background:rgb(var(--c-espresso));color:rgb(var(--c-cream));
  font-family:var(--f-sans);font-size:14.5px;font-weight:500;
  white-space:nowrap}
.btn-ink:hover{background:rgb(var(--c-espresso) / .84);color:rgb(var(--c-cream))}
.chip{align-self:flex-start;display:inline-flex;align-items:center;height:fit-content;padding:6px 12px;border-radius:8px;
  background:rgb(var(--c-paper));color:rgb(var(--c-mute));
  font-family:var(--f-sans);font-size:13px;font-weight:500}

/* ══ THE LOT CARD — the green site's .lc, carrying a pack and a price ══ */
.lc{position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:24px 26px 20px;border-radius:20px;background:rgb(var(--c-paper));
  border:1px solid transparent;color:rgb(var(--c-espresso));
  transition:transform .42s var(--ease-h),box-shadow .42s var(--ease-h),background-color .42s var(--ease-h)}
.lc:hover{transform:translateY(-8px);background:rgb(var(--c-cream));border-color:rgb(var(--c-sand));
  box-shadow:0 20px 44px -28px rgba(29,24,18,.24)}
.lc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:rgb(var(--c-clay));opacity:0;transition:opacity .42s var(--ease-h)}
.lc:hover::before{opacity:1}
.lc-glow{position:absolute;top:-70px;right:-70px;width:200px;height:200px;border-radius:50%;pointer-events:none;
  display:none}     /* surfaces are told apart by tone, not by a glow */
.lc-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-height:22px}
.lc-roast{display:inline-flex;align-items:center;gap:7px;color:rgb(var(--c-clay));
  font-family:var(--f-sans);font-size:12.5px;font-weight:500}
.lc-roast::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
/* a lot from abroad says its country; any lot with a cupping score carries it in a ring, at the end of the row */
.lc-country{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;background:rgb(var(--c-sand) / .7);
  color:rgb(var(--c-espresso));font-family:var(--f-sans);font-size:12px;font-weight:500}
.lc-score{margin-left:auto;display:inline-grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;
  border:1.5px solid rgb(var(--c-clay));color:rgb(var(--c-espresso));font-family:var(--f-sans);font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* a lot's badge, and Micro-Lot: outlined in copper */
.lc-tag{display:inline-block;padding:4px 10px;border-radius:999px;
  border:1px solid rgb(var(--c-clay));color:rgb(var(--c-clay));
  font-family:var(--f-sans);font-size:12px;font-weight:500}
/* a lot page's badge row: its badges, and "Roast to order" — filled, so the two never read as one */
.lc-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.lc-rto{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid rgb(var(--c-espresso));
  background:rgb(var(--c-espresso));color:rgb(var(--c-cream));font-family:var(--f-sans);font-size:12px;font-weight:500}
/* a card's first two lines: its roast with its badge at the right; then "Roast to order" with its score ring at the right —
   each line the same height on every card, whatever it holds, so photos, names and prices line up across a row */
.lc>.lc-top{min-height:28px}
.lc>.lc-top .lc-tag{margin-left:auto;white-space:nowrap}
.lc-line2{display:flex;align-items:center;gap:6px;min-height:46px;margin-top:8px}
.lc-line2 .lc-score{width:46px;height:46px;font-size:15.5px}     /* a fifth larger than on the lot's page */
/* the pack: one box on every card — a photo fills it, the drawn pack sits in its middle */
.lc-pack{display:flex;justify-content:center;align-items:center;aspect-ratio:4/3;margin:14px 0 20px}
.lc-pack svg{width:37%;height:auto;transition:transform .5s var(--ease-h)}
.lc:hover .lc-pack svg{transform:translateY(-4px)}
.lc h3{font-family:var(--f-sans);font-weight:600;font-size:clamp(22px,2vw,26px);line-height:1.1;
  letter-spacing:-.025em;margin:0 0 9px;transition:color .32s var(--ease-h)}
.lc:hover h3{color:rgb(var(--c-clay))}
.lc-est{display:flex;align-items:center;gap:7px;margin:0;font-size:14px;color:rgb(var(--c-mute))}
.lc-est svg{width:14px;height:14px;flex:none;opacity:.55}
.lc-notes{flex:1;margin:14px 0 0;font-size:13.5px;line-height:1.55;color:rgb(var(--c-ink))}
.lc-fill{flex:1}                                   /* no notes: the space they would take, so the price row still sits at the foot */
.lc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;
  padding-top:16px;border-top:1px solid rgb(var(--c-espresso) / .13)}
.lc-price{font-family:var(--f-sans);font-weight:600;font-size:21px;letter-spacing:-.02em;white-space:nowrap}
.lc-price s{margin-right:6px;font-size:14px;font-weight:400;color:rgb(var(--c-mute))}
.lc-price .lc-from{margin:0 5px 0 0}                 /* a box's "From", before its price */
.lc-price small{margin-left:4px;font-family:var(--f-sans);font-size:12.5px;font-weight:500;color:rgb(var(--c-mute))}
.lc-add{position:relative;z-index:2;min-height:40px;padding:0 16px}
/* a lot sold in more than one size: chips above the price, the chosen one inked */
.lc-sizes{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.lc-size{min-height:30px;padding:0 12px;border-radius:999px;border:1px solid rgb(var(--c-sand));background:transparent;
  color:rgb(var(--c-ink));font-family:var(--f-sans);font-size:12.5px;font-weight:500;cursor:pointer}
.lc-size:hover:not(:disabled){border-color:rgb(var(--c-espresso) / .5)}
.lc-size[aria-pressed="true"]{border-color:rgb(var(--c-espresso));color:rgb(var(--c-espresso));background:rgb(var(--c-cream))}
.lc-size:disabled{opacity:.4;text-decoration:line-through;cursor:not-allowed}
/* a lot with photos shows the first in place of the drawn pack */
.lc-pack.lc-photo{display:block;aspect-ratio:auto}
.lc-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:rgb(var(--c-cream))}
.lc-flag{display:inline-block;width:18px;height:13.5px;margin-left:7px;vertical-align:-2px;border-radius:2px;object-fit:cover}
/* the whole card opens the lot's page; Add stays its own button above it */
.lc-link{color:inherit;text-decoration:none}
.lc-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.lc-link:focus-visible{outline:none}
.lc:has(.lc-link:focus-visible){outline:2px solid rgb(var(--c-clay));outline-offset:3px}
.lc-out{font-family:var(--f-sans);font-size:12.5px;font-weight:500;color:rgb(var(--c-mute))}
.est-tab{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:12px;
  border:1px solid rgb(var(--c-sand));background:transparent;color:rgb(var(--c-ink));
  font-family:var(--f-sans);font-size:13.5px;font-weight:500}
.est-tab:hover{background:rgb(var(--c-paper));color:rgb(var(--c-espresso))}
.est-tab[aria-selected="true"],.est-tab[aria-pressed="true"]{background:rgb(var(--c-espresso));border-color:rgb(var(--c-espresso));color:rgb(var(--c-cream))}

/* ══ THE COPPER PLATE — the green site's "Why buy", in the shop's colour ══
   Glass on copper: mono tabs on the left, one frosted card on the right.
   The plate's own ground is a gradient, so it needs no photograph. */
.copper{background:
    radial-gradient(70% 80% at 88% 8%,rgba(214,182,148,.22) 0%,rgba(214,182,148,0) 60%),
    radial-gradient(80% 90% at 6% 100%,rgba(10,8,6,.85) 0%,rgba(10,8,6,0) 62%),
    linear-gradient(118deg,#140F0B 0%,#241A13 40%,#3A2A1E 74%,#4F3A2A 100%);
  color:#F5F3EF}
.val-tab{display:inline-flex;align-items:center;min-height:40px;padding:4px 14px;border-radius:8px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(245,243,239,.66);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  font-family:var(--f-sans);font-size:14px;font-weight:500;text-align:left;
  transition:min-height .4s var(--ease),color .4s var(--ease),background-color .4s var(--ease)}
.val-tab:hover{color:#F5F3EF}
.val-tab[aria-current="step"]{min-height:46px;color:#F5F3EF;background:rgba(255,255,255,.14)}
.val-card{display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:clamp(320px,64vh,580px);
  padding:40px;border-radius:24px;background:rgba(20,15,11,.42);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(26px) saturate(155%);backdrop-filter:blur(26px) saturate(155%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 70px -44px rgba(0,0,0,.6)}
/* the green site's sticky section: the heading and the steps stay pinned 100px from the top while the cards
   scroll past beside them, each lighting its step as it passes mid-screen. Two columns from 1280px, as there;
   below that the cards stack and the list goes — each card names its step itself. */
.val-grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(48px,10.4vw,150px);align-items:start}
.val-stick{position:sticky;top:100px}
.val-tabs{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.val-cards{display:flex;flex-direction:column;gap:40px}
@media (max-width:1279.98px){
  .val-grid{grid-template-columns:minmax(0,1fr);gap:clamp(40px,8vw,100px)}
  .val-stick{position:relative;top:auto}
  .val-tabs{display:none}
  .val-card{min-height:0}
}
@media (max-width:809.98px){.val-cards{gap:12px}.val-card{padding:24px}}

/* headline with objects set inline between its lines */

/* ── the footer card sits above whatever ground comes before it ────── */
.over{position:relative;z-index:10}

/* ── plates: cards that overlap the section before them ─────────────────
   The green site's model, which fixed the same faults there. Every plate is
   pulled 45px up over the section before it, so its rounded corners sit on
   that section's own ground: nothing bleeds a painted seam, nothing scales
   in, and a corner can never show a colour that isn't really behind it.
   Where a plate seems to rise over a photograph, it is the photograph that
   moves — it drifts down as its section leaves (.drift, on a scroll timeline
   the section names), so the plate after it arrives over a moving picture. */
:root{--fx-gap:45px;--r-plate:40px;--land:210px}
@media (max-width:809.98px){:root{--r-plate:24px;--land:130px}}
.slot{background:rgb(var(--c-night))}
section.panel-card{margin-top:calc(-1 * var(--fx-gap))}
.drift-host{view-timeline:--drift}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    @keyframes drift{to{translate:0 30%}}
    .drift{animation:drift linear both;animation-timeline:--drift;animation-range:exit 0% exit 100%}
    .js .hero-img.drift{animation:settle 2s var(--ease) both,drift linear both;
      animation-timeline:auto,--drift;animation-range:normal,exit 0% exit 100%}
  }
}

/* ── footer: a card that lands ─────────────────────────────────────────
   It sits clear of every edge on an even margin, on the colour of the plate
   above it — a light page does not end in a slab of black. The card is the
   ground's opposite and only ever pure black or pure white — and so is
   everything in it: no accent, no dimmed grey. Black on a light page,
   white on a dark one (and the two swap in the dark theme, where the light
   page is itself dark). As it enters it lands from 210px up and 95% scale
   over its own height, centred, as the green site's does. */
.foot-holder{position:relative;z-index:20;display:flow-root}   /* above the sections (10), so the card lands over them */
.foot-card{--fgap:clamp(14px,2.2vw,30px);margin:var(--fgap);border-radius:var(--r-plate);transform-origin:50% 50%;
  background:var(--fc-bg);color:var(--fc-ink)}
/* the black card, and the white one: every colour inside is set from these */
.foot-holder--light .foot-card{--fc-bg:#000;--fc-ink:#FFF;--fc-accent:#FFF;--fc-logo:invert(1);
  --fc-field:#000;--fc-field-edge:#FFF;--fc-btn:#FFF;--fc-btn-ink:#000;
  box-shadow:0 30px 60px -44px rgba(0,0,0,.35)}
.foot-holder--dark .foot-card,
.foot-card.white{--fc-bg:#FFF;--fc-ink:#000;--fc-accent:#000;--fc-logo:none;
  --fc-field:#FFF;--fc-field-edge:#000;--fc-btn:#000;--fc-btn-ink:#FFF;
  box-shadow:0 36px 80px -40px rgba(0,0,0,.55)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .foot-holder--light .foot-card{
  --fc-bg:#FFF;--fc-ink:#000;--fc-accent:#000;--fc-logo:none;
  --fc-field:#FFF;--fc-field-edge:#000;--fc-btn:#000;--fc-btn-ink:#FFF}}
:root[data-theme="dark"] .foot-holder--light .foot-card{--fc-bg:#FFF;--fc-ink:#000;--fc-accent:#000;--fc-logo:none;
  --fc-field:#FFF;--fc-field-edge:#000;--fc-btn:#000;--fc-btn-ink:#FFF}
/* the ground: the page continuing past its last plate, deep enough for the card to land from */
.foot-holder--light{background:rgb(var(--c-cream));
  padding-top:max(0px,calc(var(--land) - clamp(14px,2.2vw,30px) - 96px))}
.foot-holder--dark{background:rgb(var(--c-night));margin-top:calc(-1 * var(--fx-gap));
  padding-top:max(0px,calc(var(--land) - clamp(14px,2.2vw,30px)))}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .foot-card{animation:land linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    @keyframes land{from{transform:translateY(calc(-1 * var(--land))) scale(.95)}to{transform:none}}
    @media (max-width:809.98px){@keyframes land{from{transform:translateY(calc(-1 * var(--land)))}to{transform:none}}}
  }
}
.foot-in{max-width:1240px;margin:0 auto;padding:clamp(38px,5vw,60px) 28px clamp(26px,3vw,34px)}
.foot-sub{display:grid;gap:22px;padding-bottom:clamp(34px,4.4vw,54px);margin-bottom:clamp(30px,4vw,46px);
  border-bottom:1px solid currentColor}
@media (min-width:900px){.foot-sub{grid-template-columns:1fr minmax(0,460px);align-items:center}}
.foot-sub > *,.foot-main > *{min-width:0}            /* grid items may shrink below their content, so nothing overflows the card */
.foot-sub h2{margin:0;font-family:var(--f-sans);font-weight:600;font-size:clamp(17px,1.5vw,20px);
  line-height:1.35;letter-spacing:-.01em;max-width:none;text-wrap:pretty;color:inherit}
.foot-sub h2 .accent{color:var(--fc-accent)}
.foot-form{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 18px;border-radius:999px;
  background:var(--fc-field);border:1px solid var(--fc-field-edge)}
.foot-form input{min-width:0;width:100%;flex:1;align-self:stretch;background:transparent;border:0;font:inherit;font-size:14px;color:inherit}
.foot-form input::placeholder{color:currentColor;opacity:.5}
.foot-form input:focus{outline:none}
.foot-form button{flex:none;min-height:44px;padding:0 18px;border-radius:999px;background:var(--fc-btn);color:var(--fc-btn-ink);
  font-family:var(--f-sans);font-size:13px;font-weight:500}
.foot-form button:hover{background:var(--fc-bg);color:var(--fc-ink);box-shadow:inset 0 0 0 1px var(--fc-ink)}
/* The body of the card: the mark on the left, three groups of links on the
   right. A grid, so every width lays out the same way on purpose:
     wide     mark | three columns
     tablet   mark and Instagram across the top, three columns below
     phone    the same, with the columns two-up                         */
.foot-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px 64px;align-items:start}
.foot-brand{display:grid;gap:22px;justify-items:start}
.foot-mark{display:inline-flex;align-items:center;color:inherit;text-decoration:none}
.foot-logo{display:block;height:clamp(34px,3.6vw,46px);width:auto;filter:var(--fc-logo)}
.foot-social{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:inherit;
  border:1px solid currentColor}
.foot-social:hover{background:var(--fc-ink);color:var(--fc-bg);border-color:var(--fc-ink);transform:translateY(-2px)}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(150px,auto));gap:28px clamp(40px,5vw,80px)}
.foot-col{display:grid;gap:14px;align-content:start;margin:0;padding:0;list-style:none}
/* one style for every link in the card */
.foot-col a{position:relative;display:inline-block;padding-bottom:3px;white-space:nowrap;color:inherit;text-decoration:none;
  font-family:var(--f-sans);font-size:13.5px;font-weight:500;
  transition:opacity .28s var(--ease-h),transform .32s var(--ease-h)}
.foot-col a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease-h)}
.foot-col a:hover{transform:translateY(-2px)}
.foot-col a:hover::after{transform:scaleX(1)}
/* the last line: three plain statements, nothing to click */
.foot-legal{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;
  margin-top:clamp(36px,4.4vw,56px);padding-top:18px;border-top:1px solid currentColor;
  font-family:var(--f-sans);font-size:13px;line-height:1.6}
.foot-card :focus-visible{outline-color:currentColor}
@media (max-width:1023.98px){
  .foot-main{grid-template-columns:1fr}
  .foot-brand{grid-template-columns:auto auto;justify-content:space-between;align-items:center;width:100%}
  .foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1099.98px){
  .foot-legal{flex-direction:column}           /* three across only where they fit on one line */
}
@media (max-width:639.98px){
  .foot-in{padding-left:24px;padding-right:24px}
  .foot-sub{gap:18px}
  .foot-main{gap:32px}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}
  .foot-col{gap:4px}
  .foot-col a{padding:9px 0 8px;font-size:14px}           /* a finger-sized row on a phone */
  .foot-col a::after{bottom:5px}
}
/* a phone: the three lists as two even columns — what there is to buy and how it reaches you side by side, the
   policies under the first and the green site under the second — not a third list alone under the first */
@media (min-width:360px) and (max-width:639.98px){
  .foot-cols{grid-auto-flow:row dense;gap:4px 20px}
  .foot-col{display:contents}
  .foot-col:nth-child(1) li,.foot-col:nth-child(3) li{grid-column:1}
  .foot-col:nth-child(2) li,.foot-col:nth-child(3) li:last-child{grid-column:2}
  .foot-col:nth-child(3) li:first-child,.foot-col:nth-child(3) li:last-child{margin-top:26px}   /* the gap between groups */
}
@media (max-width:359.98px){
  .foot-cols{grid-template-columns:1fr;gap:22px}
  .foot-form button{padding:0 14px}
}

/* ══ THE BAG ═══════════════════════════════════════════════════════════
   A drawer from the right on desktop, the full width on a phone. It sits
   above the nav; while it is open the page behind is
   inert and does not scroll.                                         */
/* Account and Cart are filled — the pill's inverse, as the green site's Contact
   is: a light button on the dark pill, a dark one on the light pill. The count
   inside Cart is the button's inverse again, so it always reads. A hover does not
   move it: the box turns clay, the shop's accent, plain to see on either pill. */
.nav-bag{position:relative;display:flex;align-items:center;gap:6px;height:34px;
  padding:0 10px;border:1px solid transparent;border-radius:12px;
  transition:background-color .25s ease,color .25s ease}
.navpill[data-tone="dark"] .nav-bag{background:rgba(245,243,239,.96);color:#1D1B18}
.navpill[data-tone="light"] .nav-bag{background:#1D1B18;color:#F5F3EF}
.navpill .nav-bag:hover{background:#8B5E3C;color:#F5F3EF}
.bag-count{min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  font-family:var(--f-sans);font-size:11px;font-weight:600;line-height:18px;text-align:center;
  font-variant-numeric:tabular-nums}
.navpill[data-tone="dark"] .bag-count{background:#1D1B18;color:#F5F3EF}
.navpill[data-tone="light"] .bag-count{background:#F5F3EF;color:#1D1B18}
.bag-count.pop{animation:bagpop .45s var(--ease-h)}
@keyframes bagpop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
html.bag-open{overflow:hidden}

.bag-scrim{position:fixed;inset:0;z-index:60;background:rgba(18,15,12,.36);opacity:0;
  pointer-events:none;transition:opacity .35s ease}
.bag-scrim.on{opacity:1;pointer-events:auto}
.bag{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(440px,100vw);
  display:flex;flex-direction:column;background:rgb(var(--c-cream));color:rgb(var(--c-espresso));
  transform:translateX(104%);visibility:hidden;transition:transform .4s var(--ease-h),visibility 0s .4s;
  box-shadow:-24px 0 70px -34px rgba(18,15,12,.35)}
@media (min-width:640px){.bag{border-radius:24px 0 0 24px}}
/* closed, it is out of sight entirely — its shadow no longer shades the page's right edge */
.bag.on{transform:none;visibility:visible;transition:transform .4s var(--ease-h),visibility 0s}
.bag-head{display:flex;align-items:center;justify-content:space-between;
  padding:22px 24px 16px;border-bottom:1px solid rgb(var(--c-sand))}
.bag-head h2{margin:0;font-family:var(--f-sans);font-weight:600;font-size:24px;letter-spacing:-.025em}
.bag-x{width:40px;height:40px;margin:-8px -10px -8px 0;display:grid;place-items:center;
  border-radius:12px;transition:background .2s ease}
.bag-x:hover{background:rgb(var(--c-espresso) / .06)}
.bag-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 24px;list-style:none;margin:0}
.bag-line{display:grid;grid-template-columns:52px 1fr auto;gap:14px;padding:18px 0;
  border-bottom:1px solid rgb(var(--c-espresso) / .08)}
.bag-thumb{width:52px;height:64px;display:grid;place-items:center;border-radius:10px;background:rgb(var(--c-paper))}
.bag-thumb img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.bag-name{font-family:var(--f-sans);font-weight:600;font-size:16px;letter-spacing:-.015em;line-height:1.25}
.bag-picks{margin-top:4px;font-size:12.5px;line-height:1.45;color:rgb(var(--c-ink))}
.bag-meta{margin-top:4px;font-family:var(--f-sans);font-size:12.5px;font-weight:500;color:rgb(var(--c-mute))}
.bag-grind{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;color:rgb(var(--c-mute))}
.bag-grind select{min-height:36px;padding:0 30px 0 10px;border:1px solid rgb(var(--c-espresso) / .14);
  border-radius:10px;background:rgb(var(--c-cream));font:inherit;font-size:13px;color:rgb(var(--c-espresso));
  appearance:none;-webkit-appearance:none;cursor:pointer;      /* the same arrow as the lot page's */
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.bag-row{display:flex;align-items:center;gap:14px;margin-top:10px}
.qty{display:inline-flex;align-items:center;border:1px solid rgb(var(--c-espresso) / .15);border-radius:999px}
.qty button{width:36px;height:36px;display:grid;place-items:center;font-size:16px;border-radius:999px}
.qty button:hover:not(:disabled){background:rgb(var(--c-espresso) / .06)}
.qty button:disabled{opacity:.3;cursor:not-allowed}
.qty span{min-width:22px;text-align:center;font-family:var(--f-sans);font-size:13px;font-variant-numeric:tabular-nums}
.bag-remove{min-height:36px;font-size:12.5px;color:rgb(var(--c-mute));text-decoration:underline;text-underline-offset:3px}
.bag-remove:hover{color:rgb(var(--c-clay))}
.bag-price{font-family:var(--f-sans);font-weight:600;font-size:18px;text-align:right;white-space:nowrap}
.bag-price s{display:block;font-size:13px;font-weight:400;color:rgb(var(--c-mute))}
.bag-empty{padding:48px 0;text-align:left}
.bag-empty p:first-child{font-family:var(--f-sans);font-weight:600;font-size:20px;letter-spacing:-.02em}
.bag-link{margin-top:16px}
.bag-notice{margin-top:16px;padding:12px 14px;border-radius:12px;font-size:12.5px;line-height:1.5;
  color:rgb(var(--c-ink));background:rgb(var(--c-clay) / .1);border-left:2px solid rgb(var(--c-clay))}
.bag-foot{padding:18px 24px 24px;border-top:1px solid rgb(var(--c-sand))}
.ship-meter{height:3px;margin-top:8px;border-radius:2px;background:rgb(var(--c-espresso) / .1);overflow:hidden}
.ship-meter i{display:block;height:100%;width:0;background:rgb(var(--c-clay));
  transition:width .45s var(--ease-h)}
.bag-go{width:100%;min-height:52px;margin-top:16px}
.bag-note{margin-top:10px;font-size:12.5px;line-height:1.5;color:rgb(var(--c-ink));text-align:center}

.bag-toast{position:fixed;top:84px;left:50%;z-index:55;display:flex;align-items:center;gap:14px;
  padding:8px 8px 8px 18px;border-radius:14px;background:#1D1B18;color:#F5F3EF;font-size:13.5px;
  box-shadow:0 14px 36px -16px rgba(18,15,12,.4);transform:translate(-50%,-12px);opacity:0;
  visibility:hidden;transition:opacity .3s ease,transform .3s var(--ease-h),visibility 0s .3s}
.bag-toast.on{opacity:1;visibility:visible;transform:translate(-50%,0);
  transition:opacity .3s ease,transform .3s var(--ease-h),visibility 0s}
.bag-toast button{min-height:34px;padding:0 14px;border-radius:10px;background:#F5F3EF;color:#1D1B18;
  font-family:var(--f-sans);font-size:13px;font-weight:500;white-space:nowrap}
@media (prefers-reduced-motion: reduce){.bag,.bag-scrim,.bag-toast,.ship-meter i{transition:none}}

details > summary{list-style:none}
details > summary::-webkit-details-marker{display:none}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ══ THE SHOP MENU — four shelves under one word ════════════════════════
   Opens on hover where there is a pointer, on click or Enter anywhere. A
   transparent bridge spans the gap under the button so the pointer can
   travel down to the panel without it closing. */
.nav-drop{position:relative;display:flex}
.nav-drop .chev{width:9px;height:9px;margin-left:7px;transition:transform .3s var(--ease-h)}
.nav-drop[data-open] .chev{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 14px);left:-12px;z-index:5;width:320px;padding:8px;border-radius:18px;
  background:rgb(var(--c-cream));color:rgb(var(--c-espresso));border:1px solid rgb(var(--c-sand));
  box-shadow:0 28px 60px -32px rgba(29,24,18,.3);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .3s var(--ease-h),visibility 0s .3s}
.nav-drop[data-open] .drop{opacity:1;visibility:visible;transform:none;
  transition:opacity .2s ease,transform .3s var(--ease-h),visibility 0s}
.drop::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.drop a{display:grid;grid-template-columns:1fr;align-items:baseline;gap:3px 12px;padding:12px 14px;border-radius:12px;
  color:inherit;text-decoration:none}
.drop a:hover,.drop a:focus-visible{background:rgb(var(--c-paper));transform:none}
.drop b{font-family:var(--f-sans);font-size:17px;font-weight:600;letter-spacing:-.015em}
.drop small{grid-column:1/-1;font-size:12.5px;line-height:1.45;color:rgb(var(--c-mute))}
.nav-link[aria-current="page"]{opacity:1}
.navpill[data-tone="dark"] .nav-link[aria-current="page"]{background:rgba(245,243,239,.12)}
.navpill[data-tone="light"] .nav-link[aria-current="page"]{background:rgba(29,27,24,.06)}
/* Account and Cart say what they are where there is room */
.nav-lbl{font-family:var(--f-sans);font-size:13.5px;font-weight:500}
@media (max-width:1099px){.nav-lbl{display:none}}
.mobile-nav .sub{min-height:44px;padding-left:26px;font-size:13.5px;color:rgb(var(--c-ink))}

/* ══ SHELVES — the four kinds of coffee, then the estates within one ════ */
.anchor{position:absolute;top:0;display:block}
.shelf-tab{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:14px;
  border:1px solid rgb(var(--c-sand));background:transparent;color:rgb(var(--c-ink));
  font-family:var(--f-sans);font-size:13.5px;font-weight:500}
.shelf-tab:hover{background:rgb(var(--c-paper));color:rgb(var(--c-espresso))}
.shelf-tab[aria-selected="true"]{background:rgb(var(--c-espresso));border-color:rgb(var(--c-espresso));color:rgb(var(--c-cream))}
.shelf-tab span{min-width:20px;padding:2px 6px;border-radius:999px;background:rgb(var(--c-espresso) / .07);font-size:12px;text-align:center}
.shelf-tab[aria-selected="true"] span{background:rgb(var(--c-cream) / .16)}
.est-tab.chip-sm{min-height:34px;padding:0 14px;font-size:13px}
.shelf-empty{grid-column:1/-1;display:grid;gap:12px;justify-items:start;padding:clamp(28px,4vw,48px);border-radius:20px;
  background:rgb(var(--c-paper))}
.shelf-empty h3{margin:0;font-family:var(--f-sans);font-weight:600;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.025em;line-height:1.1}
.shelf-empty p{max-width:52ch;margin:0;font-size:15px;line-height:1.6;color:rgb(var(--c-ink))}
.shelf-empty .foot-form{width:min(460px,100%);margin-top:8px;background:rgb(var(--c-cream))}

/* ══ ONE LOT — /coffee/<lot> ═════════════════════════════════════════════
   The card's own parts, larger: the pack on its paper ground beside the name
   and price, then the coffee as a list of facts, then the estate in one
   short paragraph. Labels in the muted ink, values in the full one. */
.pd{min-height:70vh}
.pd-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:rgb(var(--c-mute));
  font-family:var(--f-sans);font-size:13px;font-weight:500}
.pd-crumbs a{color:inherit;text-decoration:none;padding:12px 0;margin:-12px 0}
.pd-crumbs a:hover{color:rgb(var(--c-clay))}
.pd-top{display:grid;gap:clamp(28px,4vw,64px);margin-top:24px;align-items:center}
@media (min-width:900px){.pd-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.pd-media{position:relative;overflow:hidden;display:grid;place-items:center;aspect-ratio:4/3;
  border-radius:24px;background:rgb(var(--c-paper))}
@media (min-width:900px){.pd-media{aspect-ratio:5/4}}
.pd-media svg{position:relative;height:clamp(170px,22vw,290px);width:auto}
.pd-media .lc-glow{top:-120px;right:-120px;width:440px;height:440px;opacity:1}
.pd-buy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.pd-buy .lc-top{width:100%}
.pd-name{margin:16px 0 0;font-family:var(--f-sans);font-weight:600;font-size:clamp(36px,4.6vw,62px);
  line-height:1.02;letter-spacing:-.035em}
.pd-buy .lc-est{margin-top:14px;font-size:15px}
.pd-notes{margin:20px 0 0;max-width:40ch;font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:rgb(var(--c-ink))}
.pd-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 22px;width:100%;
  margin-top:28px;padding-top:22px;border-top:1px solid rgb(var(--c-espresso) / .13)}
.pd-row .lc-price{font-size:clamp(26px,2.4vw,32px)}
.pd-add{min-height:52px;padding:0 30px}
/* the choices before Add: a size (chips, when there is more than one) and a grind */
.pd-opts{display:grid;gap:16px;width:100%;margin-top:26px}
.pd-opt{display:grid;gap:8px}
.pd-opt-k{font-size:13px;font-weight:600;color:rgb(var(--c-espresso))}
.pd-sizes{display:flex;flex-wrap:wrap;gap:8px}
.pd-size{min-height:40px;padding:0 18px;font-size:14px}
.pd-opt select{width:min(100%,320px);min-height:46px;padding:0 40px 0 14px;border-radius:12px;font:inherit;font-size:15px;
  border:1px solid rgb(var(--c-espresso) / .16);background:rgb(var(--c-cream));color:rgb(var(--c-espresso));
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.pd-opt select:focus{outline:2px solid rgb(var(--c-clay));outline-offset:2px}
/* a lot's photos: the first large, the rest as thumbnails to swap in */
.pd-gal{display:block;aspect-ratio:auto;background:none;overflow:visible}
.pd-gal #pdMain{display:block;width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:24px;background:rgb(var(--c-paper))}
.pd-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pd-thumb{width:72px;height:72px;padding:0;border-radius:12px;overflow:hidden;border:1px solid transparent;cursor:pointer;background:none}
.pd-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pd-thumb[aria-pressed="true"]{border-color:rgb(var(--c-espresso))}
.pd-sec{margin-top:clamp(56px,7vw,96px);padding-top:24px;border-top:1px solid rgb(var(--c-sand))}
.pd-unit{margin:10px 0 0;font-size:13px;line-height:1.5;color:rgb(var(--c-mute))}
/* "Roast to order" on a lot's page: what it means, and how long to rest it */
.pd-rto{margin:18px 0 0;padding:14px 16px;border-radius:14px;background:rgb(var(--c-sand) / .45);
  font-size:14px;line-height:1.6;color:rgb(var(--c-ink))}
.pd-rto b{font-weight:600}
.pd-dl{display:grid;margin:18px 0 0}
@media (min-width:768px){.pd-dl{grid-template-columns:1fr 1fr;column-gap:clamp(32px,5vw,72px)}}
.pd-dl div{display:grid;grid-template-columns:minmax(96px,34%) minmax(0,1fr);gap:16px;padding:15px 0;
  border-bottom:1px solid rgb(var(--c-espresso) / .1)}
.pd-dl dt{padding-top:4px;color:rgb(var(--c-mute));
  font-family:var(--f-sans);font-size:13px;font-weight:500}
.pd-dl dd{margin:0;font-size:15.5px;line-height:1.5;color:rgb(var(--c-espresso))}
/* the sampler box: the coffees to add sit in the buying column, between what it is and what it costs;
   each row names its coffee (.pk-txt), and the box keeps a count of its packs (.pk-head) */
.pd-top--pick{align-items:start}
@media (min-width:900px){.pd-top--pick .pd-media{position:sticky;top:104px}}   /* the pack stays in view beside the list */
/* on a smaller laptop the list takes more of the row, so two boxes still sit side by side with room to read */
@media (min-width:900px) and (max-width:1199.98px){.pd-top--pick{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}}
.pk-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;
  font-size:13px;font-weight:600;color:rgb(var(--c-espresso))}
.pk-head b{font-weight:500;color:rgb(var(--c-mute))}
.pk-txt{display:grid;gap:2px;flex:1;min-width:0}
.pk-txt b{font-size:14px;font-weight:600;line-height:1.3}
.pk-txt small{font-size:12px;line-height:1.35;color:rgb(var(--c-mute))}
.pk-notes{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-add:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* the estate: one paragraph, set wide enough to read in four or five lines */
.pd-est h2{margin:14px 0 0;font-family:var(--f-sans);font-weight:600;font-size:clamp(26px,2.8vw,36px);
  line-height:1.1;letter-spacing:-.025em}
.pd-sum{margin:16px 0 0;max-width:780px;font-size:17px;line-height:1.7;color:rgb(var(--c-ink))}

/* ══ FORMS ON A PAGE — the wholesale enquiry ════════════════════════════ */
.wf{display:grid;gap:16px}
.wf .two{display:grid;gap:16px}
@media (min-width:640px){.wf .two{grid-template-columns:1fr 1fr}}
.wf .f{display:flex;flex-direction:column;gap:7px}
.wf label{font-family:var(--f-sans);font-size:12.5px;font-weight:500;color:rgb(var(--c-mute))}
.wf label small{font-size:inherit;font-weight:400}
.wf input,.wf textarea{width:100%;min-height:52px;padding:13px 16px;border-radius:14px;border:1px solid rgb(var(--c-espresso) / .14);
  background:rgb(var(--c-cream));font:inherit;font-size:15.5px;color:rgb(var(--c-espresso))}
.wf textarea{min-height:170px;resize:vertical;line-height:1.55}
.wf input:focus,.wf textarea:focus{outline:none;border-color:rgb(var(--c-clay));box-shadow:0 0 0 3px rgb(var(--c-clay) / .16)}
.wf [data-bad] input,.wf [data-bad] textarea{border-color:rgb(var(--c-bad))}
.wf .err{font-size:12.5px;color:rgb(var(--c-bad))}
.wf .err:empty{display:none}
.wf .msg{padding:12px 14px;border-radius:12px;font-size:13.5px;line-height:1.5;background:rgb(var(--c-bad) / .08);border-left:3px solid rgb(var(--c-bad))}
.wf .send{justify-self:start;min-height:52px;padding:0 28px}
.trap{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.done-card{display:grid;gap:12px;justify-items:start}
.done-card h3{margin:0;font-family:var(--f-sans);font-weight:600;font-size:clamp(26px,3vw,36px);letter-spacing:-.025em;line-height:1.08}
.point{padding:clamp(22px,2.6vw,30px);border-radius:20px;background:rgb(var(--c-paper))}
.point h3{margin:14px 0 8px;font-family:var(--f-sans);font-weight:600;font-size:21px;letter-spacing:-.02em;line-height:1.15}
.point p{margin:0;font-size:14.5px;line-height:1.6;color:rgb(var(--c-ink))}
.point .num{font-family:var(--f-sans);font-size:13px;font-weight:500;color:rgb(var(--c-clay))}
.go-card{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:250px;padding:clamp(24px,3vw,36px);
  border-radius:24px;background:rgb(var(--c-paper));color:rgb(var(--c-espresso));text-decoration:none}
.go-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px -28px rgba(29,24,18,.24)}
.go-card h3{margin:10px 0 0;font-family:var(--f-sans);font-weight:600;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.025em;line-height:1.1}
.go-card p{margin:10px 0 0;max-width:40ch;font-size:15px;line-height:1.6;color:rgb(var(--c-ink))}

/* the sampler box you build: a row per coffee (its pack price, a grind, Add), then the box itself */
.sb-list{display:grid;margin-top:18px;border-top:1px solid rgb(var(--c-espresso) / .12)}
.sb-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center;padding:14px 0;border-bottom:1px solid rgb(var(--c-espresso) / .12)}
.sb-act{grid-column:1/-1;display:flex;gap:8px}
.sb-grind{flex:1;min-height:40px;padding:0 30px 0 12px;border:1px solid rgb(var(--c-espresso) / .16);border-radius:10px;background:rgb(var(--c-cream));
  font:inherit;font-size:14px;color:rgb(var(--c-espresso));appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.sb-add{min-height:40px;padding:0 18px}
.sb-price{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.sb-box{margin-top:22px;padding:16px;border-radius:16px;background:rgb(var(--c-sand) / .35)}
.sb-packs{display:grid;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.sb-packs li{display:grid;grid-template-columns:minmax(0,1fr) auto 32px;gap:10px;align-items:center;font-size:14px}
.sb-packs .sb-empty{display:block;color:rgb(var(--c-mute));font-size:13.5px}
.sb-rm{width:32px;height:32px;display:grid;place-items:center;border-radius:999px;font-size:13px}
.sb-rm:hover{background:rgb(var(--c-espresso) / .08)}