/* ==========================================================================
   PA TODOS CAFE
   Vanilla CSS. Two colours, two typefaces, no gradients anywhere.

   COLOUR RULE (strict): the page only ever uses #e8e0d5 and #4d6347.
   The ground is always green and the ink is always cream — there is no light
   scheme. Softer tones are mixed between those two, never a third hue.

   TYPE RULE: UT Bangro is the character font (headings, wordmark, numbers).
   Montserrat is the friendly font (body, labels, UI). This is the same pairing
   the supplied logo and window artwork are built from.

   SHAPE RULE: media, panels and cards are square (0 radius). Only interactive
   elements are pill. Nothing in between.
   ========================================================================== */

@font-face {
  font-family: "UT Bangro";
  src: url("assets/fonts/UTBangro.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Italic.woff2") format("woff2");
  font-weight: 400 600; font-style: italic; font-display: swap;
}

:root {
  color-scheme: dark;
  --cream: #e8e0d5;
  --green: #4d6347;
  --brown: #6f4e37;   /* coffee brown, used only for the Our story tab */

  /* one scheme only: green ground, cream ink. there is no light mode. */
  --bg:   var(--green);
  --fg:   var(--cream);
  --soft: color-mix(in srgb, var(--cream) 78%, var(--green));
  --rule: color-mix(in srgb, var(--cream) 30%, var(--green));
  --panel: color-mix(in srgb, var(--cream) 8%, var(--green));

  --display: "UT Bangro", ui-sans-serif, system-ui, sans-serif;
  --body: "Montserrat", ui-sans-serif, system-ui, sans-serif;

  --r-box: 0px;      /* media and panels are square. only interactive is pill. */
  --shell: min(1680px, 93vw);
  --gut: clamp(1.25rem, 4vw, 3.75rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
}


/* dashed rails standing just outside the measure, so wide screens read as
   ruled paper rather than a narrow column floating in green */
.rails { position: fixed; inset: 0; pointer-events: none; z-index: 1; display: none; }
.rails i {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: repeating-linear-gradient(to bottom,
              var(--rule) 0 9px, transparent 9px 20px);
  opacity: .55;
}
.rails i:first-child { left:  calc(50% - var(--shell) / 2 - 34px); }
.rails i:last-child  { right: calc(50% - var(--shell) / 2 - 34px); }
@media (min-width: 1500px) { .rails { display: block; } }

/* the 93vw cap gives wide screens breathing room, but on a phone it just
   pinched another 14px off each side, so the measure goes full width there */
@media (max-width: 900px) { :root { --shell: 100%; } }

/* ---------- reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  background: var(--bg);
}
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: clamp(1rem, .95rem + .2vw, 1.08rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
a { color: inherit; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--fg); color: var(--bg); padding: .75rem 1.25rem; border-radius: 999px;
}
.skip:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 4px; }

/* ---------- type -------------------------------------------------------- */
.display { font-family: var(--display); line-height: 1.02; letter-spacing: -.01em; }
.d-xl { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.d-lg { font-size: clamp(1.9rem, 3.9vw, 3.1rem); }
.d-md { font-size: clamp(1.35rem, 2.1vw, 1.85rem); }
.lede { font-size: clamp(1.05rem, 1rem + .45vw, 1.28rem); line-height: 1.6; max-width: 46ch; }
.body-w { max-width: 62ch; }
.soft { color: var(--soft); }

/* ---------- buttons ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .82rem 1.6rem; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .12s ease;
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn--fill { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--fill:hover { background: var(--soft); border-color: var(--soft); }
.btn--line { background: transparent; color: var(--fg); border-color: currentColor; }
.btn--line:hover { background: var(--fg); color: var(--bg); }

/* ==========================================================================
   SPLASH
   Sits on the green ground the page itself uses, so the handover is a
   fade-through on one continuous surface rather than a curtain lift.
   Shown once per session so page-to-page navigation is not blocked.
   ========================================================================== */
.splash {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--green);
  transition: opacity .55s var(--ease), visibility .55s;
}
.splash__art { width: min(62vmin, 560px); aspect-ratio: 1; }
.splash__art svg { width: 100%; height: 100%; }
.splash[data-state="out"] { opacity: 0; visibility: hidden; }
.splash[data-state="out"] .splash__art { transform: scale(.94); transition: transform .55s var(--ease); }

/* content waits, then fades in through the same ground */
body[data-splash-state="pending"] .page { opacity: 0; }
.page { opacity: 1; transition: opacity .5s var(--ease) .12s; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 80;
  height: 84px; display: flex; align-items: center;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.nav__in { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); width: 100%; }
.nav__brand { display: flex; align-items: center; margin-right: auto; text-decoration: none; }
.nav__brand img { height: 40px; width: auto; }
.nav__links { display: flex; align-items: center; gap: clamp(.9rem, 2.2vw, 2rem); }
.nav__link {
  text-decoration: none; font-size: .95rem; font-weight: 500;
  position: relative; padding: .3rem 0; white-space: nowrap;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link--brown {
  background: var(--brown); color: var(--cream);
  border-radius: 999px; padding: .5rem 1.15rem;
  transition: background-color .2s var(--ease);
}
.nav__link--brown::after { display: none; }   /* the underline does not fit a pill */
.nav__link--brown:hover,
.nav__link--brown[aria-current="page"] { background: color-mix(in srgb, var(--brown) 84%, #000); }

.nav__bubble {
  background: var(--fg); color: var(--bg); border-radius: 999px;
  padding: .6rem 1.5rem; font-weight: 700; font-size: .95rem; text-decoration: none;
  transition: background-color .2s var(--ease), transform .18s var(--ease);
}
.nav__bubble:hover { background: var(--soft); transform: translateY(-2px); }
.nav__bubble[aria-current="page"] { background: var(--soft); }
.nav__burger {
  display: none; background: none; border: 1.5px solid var(--rule); border-radius: 999px;
  width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer;
}
.nav__burger svg { width: 22px; height: 22px; }
.demo-chip {
  display: inline-flex; align-items: center; padding: .3rem .7rem; border-radius: 999px;
  border: 1.5px solid var(--rule); color: var(--soft);
  font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 1000px) { .nav__demo { display: none; } }

@media (max-width: 900px) {
  .nav { height: 70px; }
  .nav__brand img { height: 28px; }   /* the lockup is wide; it crowds the burger otherwise */
  .nav__burger { display: inline-flex; }
  .nav__links {
    position: fixed; inset: 70px 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 0; padding: .5rem var(--gut) 1.5rem;
    background: var(--bg); border-bottom: 1px solid var(--rule);
    clip-path: inset(0 0 100% 0); transition: clip-path .4s var(--ease);
  }
  .nav__links[data-open="true"] { clip-path: inset(0 0 0 0); }
  .nav__link { padding: .95rem 0; border-bottom: 1px solid var(--rule); font-size: 1.05rem; }
  .nav__link--brown { align-self: start; border-bottom: 0; margin-block: .55rem; padding: .6rem 1.25rem; }
  .nav__link::after { display: none; }
  .nav__link--brown {
  background: var(--brown); color: var(--cream);
  border-radius: 999px; padding: .5rem 1.15rem;
  transition: background-color .2s var(--ease);
}
.nav__link--brown::after { display: none; }   /* the underline does not fit a pill */
.nav__link--brown:hover,
.nav__link--brown[aria-current="page"] { background: color-mix(in srgb, var(--brown) 84%, #000); }

.nav__bubble { margin-top: 1rem; text-align: center; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { padding-block: clamp(1.5rem, 4vh, 3rem) 0; }
.hero__shot {
  border-radius: var(--r-box); overflow: hidden; background: var(--green);
}
.hero__shot img { width: 100%; height: auto; }
.hero__copy {
  display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: 1fr; align-items: start;
  padding-block: clamp(2.5rem, 6vh, 4.5rem);
}
@media (min-width: 900px) { .hero__copy { grid-template-columns: 1.1fr .9fr; } }
.hero__copy h1 { max-width: 14ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* the cup drawing sits under the headline, filling the column the sticky
   headline used to leave empty. a plain image of the cream artwork — no CSS
   masking, so there is nothing for a browser to fail to support. */
.hero__head { display: grid; width: fit-content; }
.hero__mark {
  width: min(300px, 72%); height: auto;
  margin-top: clamp(1.5rem, 4vw, 2.75rem);
  justify-self: center;
}
@media (max-width: 899px) { .hero__mark { width: min(220px, 55%); } }

/* framed photos: a mat in the page's other colour, so the picture reads as
   something hung on the wall rather than bled into it */
.framed { border: 7px solid var(--fg); }
@media (max-width: 899px) { .framed { border-width: 5px; } }
/* taller than the copy beside it, which is what gives the sticky text
   something to hold still against */
@media (min-width: 900px) { .split .framed { aspect-ratio: 1 / 1; } }

/* page header for the inner pages */
.phead { padding-block: clamp(2.5rem, 7vh, 5rem) clamp(1.5rem, 4vh, 2.5rem); }
/* roasted beans behind the Grind header only: full bleed, running from the
   nav rule down to the top of "Coffee". darkened so cream type still reads. */
.phead--beans {
  position: relative; isolation: isolate;
  background-image: url("assets/img/beans-band.jpg");
  background-size: cover; background-position: center;
}
.phead--beans::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--green) 62%, #000);
  opacity: .6;   /* the beans image has its highlights rolled off, so the
                    scrim can sit this light and the type still holds up */
}
.phead--beans .lede { color: var(--cream); }
.phead h1 { max-width: 18ch; margin-bottom: 1rem; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.sect { padding-block: clamp(3rem, 8vh, 6rem); }
.sect--green { background: var(--green); color: var(--cream); }
/* inverted block: cream stock, green ink. redefining the tokens is enough,
   every component below already reads from them. */
.sect--cream {
  --bg: var(--cream);
  --fg: var(--green);
  --soft: color-mix(in srgb, var(--green) 72%, var(--cream));
  --rule: color-mix(in srgb, var(--green) 28%, var(--cream));
  --panel: color-mix(in srgb, var(--green) 7%, var(--cream));
  background: var(--cream); color: var(--green);
}
.sect--green .soft { color: color-mix(in srgb, var(--cream) 80%, var(--green)); }
.sect--panel { background: var(--panel); }
.sect__head { max-width: 60ch; }
.sect__head .display { margin-bottom: .9rem; }

.reveal { animation: rise .01s linear both; animation-timeline: view(); animation-range: entry 6% entry 46%; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* two-up and three-up text blocks */
.cols { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; margin-top: clamp(2rem, 5vh, 3rem); }
@media (min-width: 760px) { .cols--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .cols--3 { grid-template-columns: repeat(3, 1fr); } }
.col h3 { font-family: var(--display); font-size: 1.35rem; margin-bottom: .5rem; }
.col p { color: var(--soft); }
.sect--green .col p { color: color-mix(in srgb, var(--cream) 80%, var(--green)); }

/* picture + text split */
.split { display: grid; gap: clamp(1.75rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split--flip > figure { order: -1; }
@media (max-width: 899px) { .split--flip > figure { order: 0; } }
.split figure { border-radius: var(--r-box); overflow: hidden; background: var(--green); aspect-ratio: 4 / 3; }
.split figure img { width: 100%; height: 100%; object-fit: cover; }
.split p + p { margin-top: 1rem; }
/* copy sits at the top of its column so a drawing can fill the space under it */
@media (min-width: 900px) { .split__top { align-self: start; } }
/* copy stacks at the top of the column, the drawing settles at the bottom */
@media (min-width: 900px) {
  .split__top { align-self: stretch; display: flex; flex-direction: column; }
  .bagmark { margin-top: auto; }
}
.bagmark {
  display: block; width: min(360px, 96%); height: auto;
  margin-left: auto; margin-right: 0; margin-bottom: 0;
  padding-top: clamp(1.5rem, 3.5vw, 2.25rem);
}
.bagmark__body  { fill: var(--brown); }
.bagmark__mouth { fill: color-mix(in srgb, var(--brown) 38%, var(--cream)); }
.bagmark__panel { fill: color-mix(in srgb, var(--brown) 55%, var(--cream)); }
.bagmark__seam  { stroke: color-mix(in srgb, var(--brown) 55%, #000); }
.bagmark__beans ellipse { fill: color-mix(in srgb, var(--brown) 40%, #000); }
.bagmark__beans path { stroke: color-mix(in srgb, var(--brown) 35%, var(--cream)); stroke-width: 2.5; stroke-linecap: round; }
@media (max-width: 899px) { .bagmark { width: min(290px, 82%); } }

/* ==========================================================================
   GROWERS  (Transparency, on Our story)
   ========================================================================== */
.growers {
  display: grid; gap: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: 1fr; margin-top: clamp(2rem, 5vh, 3rem);
}
@media (min-width: 620px) { .growers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .growers { grid-template-columns: repeat(4, 1fr); } }
.grower img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-box); background: var(--green);
}
.grower h3 { font-family: var(--display); font-size: 1.2rem; margin: 1rem 0 .35rem; }
.grower p { color: var(--soft); font-size: .95rem; }

/* ==========================================================================
   MENU
   ========================================================================== */


@media (min-width: 680px) { .menu__cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .menu__cols { grid-template-columns: repeat(4, 1fr); } }



.menu__row span:first-child { font-weight: 500; }
.menu__row span:last-child { font-family: var(--display); font-variant-numeric: tabular-nums; }


/* ==========================================================================
   THE GRIND
   ========================================================================== */
.grind__grid { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); grid-template-columns: 1fr; margin-top: clamp(2rem, 5vh, 3rem); }
@media (min-width: 700px)  { .grind__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .grind__grid { grid-template-columns: repeat(4, 1fr); } }
.bag {
  border: 1px solid var(--rule); border-radius: var(--r-box); background: var(--panel);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .28s var(--ease);
}
.bag:hover { transform: translateY(-3px); }
.bag__pic { flex: none; overflow: hidden; background: var(--panel); aspect-ratio: 29 / 45; }  /* portrait product shots */
.bag__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.bag:hover .bag__pic img { transform: scale(1.045); }
.bag__body { padding: clamp(1.1rem, 2vw, 1.6rem); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.bag__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.bag__name { font-family: var(--display); font-size: clamp(1.3rem, 1.1rem + .6vw, 1.65rem); }
/* body font on purpose: UT Bangro's $ shares the closed form of its S, so
   "$19" reads as "819" in the display face */
.bag__price { font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.bag__origin { font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.bag__notes { color: var(--soft); }
.bag__buy { display: flex; gap: .55rem; margin-top: auto; padding-top: 1.1rem; flex-wrap: wrap; }
.sel { position: relative; flex: 1 1 8.5rem; min-width: 8.5rem; }
.sel select {
  appearance: none; -webkit-appearance: none; width: 100%;
  padding: .78rem 2.3rem .78rem 1.05rem; border-radius: 999px;
  border: 1.5px solid var(--rule); background: transparent; color: var(--fg);
  font-size: .9rem; cursor: pointer;
}
.sel svg { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; pointer-events: none; color: var(--soft); }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gal { display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); grid-template-columns: repeat(2, 1fr); margin-top: clamp(2rem, 5vh, 3rem); }
@media (min-width: 900px) { .gal { grid-template-columns: repeat(3, 1fr); } }
.gal figure { border-radius: var(--r-box); overflow: hidden; background: var(--green); }
.gal img { width: 100%; height: 100%; object-fit: cover; }
.gal figure:nth-child(4n + 1) { aspect-ratio: 4 / 5; }
.gal figure:nth-child(4n + 2) { aspect-ratio: 1; }
.gal figure:nth-child(4n + 3) { aspect-ratio: 1; }
.gal figure:nth-child(4n)     { aspect-ratio: 4 / 5; }
@media (min-width: 900px) { .gal figure:nth-child(6n + 1) { grid-row: span 2; aspect-ratio: 3 / 4; } }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.ct__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .ct__grid { grid-template-columns: 1.05fr .95fr; } }
.field { display: grid; gap: .45rem; margin-bottom: 1.1rem; }
.field label { font-size: .88rem; font-weight: 600; }
.field input, .field textarea {
  width: 100%; padding: .82rem 1.1rem; border-radius: 999px;
  border: 1.5px solid var(--rule); background: var(--panel); color: var(--fg);
}
.field textarea { border-radius: var(--r-box); min-height: 8rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--soft); }
.field .hint { font-size: .82rem; color: var(--soft); }
.field .err { font-size: .82rem; font-weight: 600; }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: var(--fg); border-width: 2px; }
.form__note { margin-top: 1rem; font-size: .92rem; color: var(--soft); display: flex; gap: .5rem; align-items: flex-start; }
.form__ok {
  margin-top: 1.1rem; padding: 1rem 1.2rem; border-radius: var(--r-box);
  background: var(--panel); border: 1.5px solid var(--fg); font-size: .95rem;
}
[hidden] { display: none !important; }
.ct__facts { display: grid; gap: 1.6rem; align-content: start; }
.ct__fact { display: grid; grid-template-columns: 22px 1fr; gap: .9rem; align-items: start; }
.ct__fact svg { width: 22px; height: 22px; margin-top: .2rem; }
.ct__fact h3 { font-family: var(--display); font-size: 1.15rem; margin-bottom: .25rem; }
.ct__fact a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.ct__fact a:hover { border-bottom-color: currentColor; }
.ct__hours div { display: flex; justify-content: space-between; gap: 1rem; max-width: 22rem; }
.ct__pic { border-radius: var(--r-box); overflow: hidden; aspect-ratio: 4 / 3; margin-top: .5rem; }
.ct__pic img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- demo notes -------------------------------------------------- */
.demo-note {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin-top: clamp(1.25rem, 3vh, 2rem); font-size: .9rem; color: var(--soft);
}
.demo-note strong { font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; flex: none; }
.sect--green .demo-note { color: color-mix(in srgb, var(--cream) 78%, var(--green)); }
.demo-badge {
  position: fixed; z-index: 90; left: 1rem; bottom: 1rem;
  display: flex; align-items: center; gap: .7rem; max-width: min(24rem, calc(100vw - 2rem));
  padding: .7rem .8rem .7rem 1rem; border-radius: 999px;
  background: var(--fg); color: var(--bg); font-size: .84rem; line-height: 1.35;
}
.demo-badge b { font-weight: 700; }
.demo-badge button {
  flex: none; width: 26px; height: 26px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 22%, transparent);
  border: none; color: inherit;
}
.demo-badge button:hover { background: color-mix(in srgb, var(--bg) 38%, transparent); }
.demo-badge button svg { width: 14px; height: 14px; }
@media (max-width: 620px) { .demo-badge { font-size: .78rem; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ft { background: color-mix(in srgb, var(--green) 82%, #000); color: var(--cream); padding-block: clamp(3rem, 7vh, 5rem) 5rem; }
.ft__top { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 820px) { .ft__top { grid-template-columns: 1.3fr 1fr 1fr; } }
.ft__logo { width: clamp(170px, 20vw, 240px); }
.ft__blurb { margin-top: 1.15rem; color: color-mix(in srgb, var(--cream) 78%, var(--green)); max-width: 34ch; }
.ft h2 { font-family: var(--display); font-size: 1.1rem; margin-bottom: .9rem; }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.ft a { text-decoration: none; color: inherit; }
.ft__links a:hover { text-decoration: underline; }
.ft__demo {
  margin-top: 1.15rem; padding: .85rem 1.05rem; border-radius: var(--r-box);
  border: 1px solid color-mix(in srgb, var(--cream) 40%, var(--green));
  color: color-mix(in srgb, var(--cream) 88%, var(--green)); font-size: .88rem; max-width: 44ch;
}
.ft__social { display: flex; gap: .55rem; margin-top: 1.4rem; }
.ft__social a {
  width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center;
  border: 1.5px solid color-mix(in srgb, var(--cream) 34%, var(--green));
  transition: background-color .22s, color .22s;
}
.ft__social a:hover { background: var(--cream); color: var(--green); }
.ft__social svg { width: 20px; height: 20px; }
.ft__base {
  margin-top: clamp(2rem, 5vh, 3rem); padding-top: 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--cream) 26%, var(--green));
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between;
  font-size: .88rem; color: color-mix(in srgb, var(--cream) 72%, var(--green));
}

/* ==========================================================================
   FALLBACKS
   ========================================================================== */
@supports not (animation-timeline: view()) {
  .reveal { opacity: 1; transform: none; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; animation: none !important; }
  .splash { transition: none; }
  .page { transition: none; }
  * { transition-duration: .01ms !important; }
}

/* ==========================================================================
   MOSAIC GALLERY
   Column masonry so the images stack at their own heights instead of being
   forced into a grid. Square corners, tight gutters.
   ========================================================================== */
.mosaic { columns: 2; column-gap: 10px; margin-top: clamp(2rem, 5vh, 3rem); }
@media (min-width: 780px)  { .mosaic { columns: 3; } }
@media (min-width: 1180px) { .mosaic { columns: 4; column-gap: 12px; } }
.mosaic__it { break-inside: avoid; margin: 0 0 10px; overflow: hidden; background: var(--green); }
@media (min-width: 1180px) { .mosaic__it { margin-bottom: 12px; } }
.mosaic__it img { width: 100%; height: auto; display: block; transition: transform .6s var(--ease), filter .4s var(--ease); }
.mosaic__it:hover img { transform: scale(1.03); }

/* ==========================================================================
   PRODUCT RAIL  (The Grind)
   ========================================================================== */
/* every product is on screen at once — nothing hides behind a sideways scroll */
.rail {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.1rem);
  margin-top: clamp(1.5rem, 4vh, 2.25rem);
  padding-inline: max(var(--gut), calc((100% - var(--shell)) / 2 + var(--gut)));
}
@media (min-width: 900px) { .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* the cards get narrow two-up on a phone, so ease the padding and type down */
@media (max-width: 560px) {
  .prod__body { padding: .75rem .8rem .85rem; gap: .3rem; }
  .prod__name { font-size: 1.1rem; }
  .prod__short { font-size: .78rem; }
  .prod__add { padding-block: .6rem; font-size: .82rem; }
}
.prod {
  display: flex; flex-direction: column; cursor: pointer;
  background: var(--panel); border: 1px solid var(--rule);
  transition: border-color .2s var(--ease);
}
.prod:hover { border-color: var(--soft); }
.prod__open {
  display: block; padding: 0; border: 0; background: var(--green);
  cursor: pointer; overflow: hidden; width: 100%; aspect-ratio: 4 / 5;
}
.prod__open img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.prod:hover .prod__open img { transform: scale(1.04); }
.prod__body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.prod__top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.prod__name { font-family: var(--display); font-size: 1.35rem; line-height: 1; }
.prod__price { font-weight: 700; font-size: .98rem; white-space: nowrap; }
.prod__short { font-size: .85rem; line-height: 1.5; color: var(--soft); }
.prod__add { margin-top: auto; justify-content: center; padding-block: .7rem; font-size: .9rem; }

/* ==========================================================================
   CART + PRODUCT SHEET
   ========================================================================== */
.cart-btn {
  position: relative; flex: none; width: 46px; height: 46px; cursor: pointer;
  display: grid; place-items: center; border-radius: 999px;
  background: transparent; border: 1.5px solid var(--rule); color: var(--fg);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.cart-btn:hover { background: var(--fg); color: var(--bg); }
.cart-btn svg { width: 21px; height: 21px; }
.cart-btn__n {
  position: absolute; top: -5px; right: -5px; min-width: 21px; height: 21px;
  border-radius: 999px; background: var(--fg); color: var(--bg);
  font-size: .7rem; font-weight: 700; display: grid; place-items: center; padding: 0 5px;
  border: 2px solid var(--bg);
}
@media (max-width: 900px) { .cart-btn { order: 3; margin-left: .4rem; } }

.scrim {
  position: fixed; inset: 0; z-index: 150; background: rgba(20, 26, 18, .5);
  opacity: 0; transition: opacity .3s var(--ease);
}
.scrim[data-on="true"] { opacity: 1; }

.cart {
  position: fixed; z-index: 160; top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw); background: var(--bg); color: var(--fg);
  border-left: 1px solid var(--rule);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .38s var(--ease);
  visibility: hidden;
}
.cart[data-on="true"] { transform: none; visibility: visible; }
.cart__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem var(--gut) 1rem; border-bottom: 1px solid var(--rule);
}
.cart__body { flex: 1; overflow-y: auto; padding: .5rem var(--gut); }
.cart__empty { padding: 1.5rem var(--gut); color: var(--soft); }
.cart__foot { border-top: 1px solid var(--rule); padding: 1.15rem var(--gut) 1.5rem; }
.cart__total { display: flex; justify-content: space-between; font-family: var(--display); font-size: 1.2rem; margin-bottom: .9rem; }
.cart__checkout { width: 100%; justify-content: center; opacity: .5; cursor: not-allowed; }
.cart__note { margin-top: .8rem; font-size: .8rem; line-height: 1.5; color: var(--soft); }
.cart__note strong { text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; margin-right: .4rem; }

.line { display: grid; grid-template-columns: 62px 1fr; gap: .85rem; padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.line__pic { width: 62px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--green); }
.line__n { font-family: var(--display); font-size: 1.05rem; line-height: 1.1; }
.line__v { font-size: .78rem; color: var(--soft); margin-bottom: .45rem; }
.line__row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--rule); border-radius: 999px; }
.qty button {
  width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer;
  background: none; border: 0; color: inherit; border-radius: 999px;
}
.qty button:hover { background: var(--rule); }
.qty svg { width: 12px; height: 12px; }
.qty span { min-width: 24px; text-align: center; font-size: .85rem; font-weight: 600; }

.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  background: none; border: 1.5px solid var(--rule); border-radius: 999px; color: inherit;
}
.icon-btn:hover { background: var(--fg); color: var(--bg); }
.icon-btn svg { width: 16px; height: 16px; }

.sheet {
  position: fixed; inset: 0; z-index: 170; display: grid; place-items: center;
  padding: var(--gut); opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.sheet[data-on="true"] { opacity: 1; visibility: visible; }
.sheet__panel {
  position: relative; background: var(--bg); border: 1px solid var(--rule);
  width: min(880px, 100%); max-height: 88vh; overflow-y: auto;
  display: grid; grid-template-columns: 1fr;
  transform: translateY(14px); transition: transform .32s var(--ease);
}
.sheet[data-on="true"] .sheet__panel { transform: none; }
@media (min-width: 760px) { .sheet__panel { grid-template-columns: 5fr 6fr; } }
.sheet__close { position: absolute; top: .9rem; right: .9rem; z-index: 2; background: var(--bg); }
.sheet__pic { background: var(--green); }
.sheet__pic img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.sheet__body { padding: clamp(1.5rem, 3vw, 2.5rem); }
.sheet__meta { font-size: .8rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--soft); margin-bottom: .5rem; }
.sheet__price { font-weight: 700; margin: .4rem 0 1.1rem; }
.sheet__copy p { margin-bottom: .9rem; font-size: .95rem; }
.sheet__buy { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { margin-top: clamp(1.75rem, 4vh, 2.5rem); border-top: 1px solid var(--rule); }
.faq__it { border-bottom: 1px solid var(--rule); }
.faq__it summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.1rem 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.25;
}
.faq__it summary::-webkit-details-marker { display: none; }
.faq__it summary i {
  flex: none; width: 20px; height: 20px; position: relative;
}
.faq__it summary i::before, .faq__it summary i::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; background: currentColor;
  transition: transform .28s var(--ease);
}
.faq__it summary i::after { transform: rotate(90deg); }
.faq__it[open] summary i::after { transform: rotate(0deg); }
.faq__a {
  display: grid; grid-template-rows: 0fr; max-width: 68ch; color: var(--soft);
  transition: grid-template-rows .4s var(--ease);
}
.faq__a > p { overflow: hidden; padding-bottom: 0; transition: padding .4s var(--ease); }
.faq__it[open] .faq__a { grid-template-rows: 1fr; }
.faq__it[open] .faq__a > p { padding-bottom: 1.25rem; }

/* ==========================================================================
   COMMUNITY POSTS
   ========================================================================== */
.post {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(2rem, 5vh, 3.25rem); border-bottom: 1px solid var(--rule);
  align-items: start;
}
.post:first-child { padding-top: 0; }
@media (min-width: 900px) { .post { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .post:nth-child(even) .post__pic { order: 2; } }
.post__pic { overflow: hidden; background: var(--green); aspect-ratio: 3 / 2; position: sticky; top: 110px; }
.post__pic img { width: 100%; height: 100%; object-fit: cover; }
.post__when { font-size: .8rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--soft); margin-bottom: .5rem; }
.post__body h2 { margin-bottom: .9rem; }
.post__body p { margin-bottom: .85rem; max-width: 58ch; }

@media (prefers-reduced-motion: reduce) {
  .cart, .sheet, .sheet__panel, .scrim { transition: none !important; }
  .post__pic { position: static; }
}

/* ==========================================================================
   SECTION GRAPHICS
   ========================================================================== */
.ruler { display: flex; align-items: center; gap: 1rem; padding-block: clamp(1.5rem, 4vh, 2.5rem); }
.ruler span { flex: 1; height: 1px; background: var(--rule); }
.ruler i {
  flex: none; width: 9px; height: 9px; border: 1.5px solid var(--fg); transform: rotate(45deg);
}
.tag {
  display: inline-block; margin-bottom: .7rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--soft); border: 1.5px solid var(--rule); padding: .3rem .7rem; border-radius: 999px;
}
.sect--green .tag { color: color-mix(in srgb, var(--cream) 80%, var(--green)); border-color: color-mix(in srgb, var(--cream) 34%, var(--green)); }

/* ==========================================================================
   COLOURWAYS + ANGLE VIEWER (product sheet)
   ========================================================================== */
.sheet__pic { position: relative; }
.sheet__pic img { transition: opacity .25s var(--ease); }
.sheet__pic[data-swap="true"] img { opacity: 0; }
.angle {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; border: 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--fg);
  opacity: 0; transition: opacity .25s var(--ease), background-color .2s;
}
.sheet__pic:hover .angle, .angle:focus-visible { opacity: 1; }
.angle:hover { background: var(--bg); }
.angle svg { width: 18px; height: 18px; }
.angle--prev { left: .75rem; }
.angle--next { right: .75rem; }
@media (hover: none) { .angle { opacity: 1; } }

.dots { position: absolute; left: 0; right: 0; bottom: .85rem; display: flex; justify-content: center; gap: .4rem; z-index: 2; }
.dots button {
  width: 8px; height: 8px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--fg); background: transparent; transition: background-color .2s;
}
.dots button[aria-current="true"] { background: var(--fg); }

.ways { margin-top: 1.35rem; }
.ways__label { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); margin-bottom: .55rem; }
.ways__label b { color: var(--fg); }
.ways__row { display: flex; gap: .55rem; }
.ways__row button {
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer; padding: 0;
  border: 1.5px solid var(--rule); position: relative;
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.ways__row button:hover { transform: scale(1.08); }
.ways__row button[aria-pressed="true"] { border-color: var(--fg); border-width: 2px; }
.ways__row button[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: -5px; border: 1px solid var(--rule); border-radius: 999px;
}

/* ==========================================================================
   MENU FILTERS
   ========================================================================== */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: clamp(1.5rem, 4vh, 2.25rem); }
.chip {
  padding: .55rem 1.15rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--rule); background: transparent; color: var(--fg);
  font-size: .88rem; font-weight: 600;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.menu__group { transition: opacity .3s var(--ease); }
.menu__group[hidden] { display: none; }
.menu__row { transition: background-color .18s var(--ease); padding: .15rem .4rem; margin-inline: -.4rem; }
.menu__row:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--fg);
  font: inherit; text-decoration: underline; text-underline-offset: 3px;
}
.menu__decaf { margin-top: .75rem; color: var(--soft); font-size: .92rem; max-width: 56ch; }

/* ==========================================================================
   PAGE TRANSITION
   A container transform: the page lifts out, the next one settles in, on the
   same ground. Uses the View Transition API where it exists and degrades to a
   plain fade where it does not.
   ========================================================================== */
/* One JS-driven container transform, used everywhere. Cross-document view
   transitions were skipping on file:// and leaving a hard cut, so this does
   not rely on them at all. Outgoing page lifts and fades, incoming settles. */
html[data-leaving="true"] .page {
  opacity: 0; transform: translateY(-8px) scale(.994);
}
.page {
  opacity: 1; transform: none;
  transition: opacity .30s var(--ease), transform .30s var(--ease);
  /* no will-change, and the settle animation fills backwards only. either one
     would make .page the containing block for its position:fixed children,
     which pinned the mobile menu to the top of the document. */
}
body[data-splash-state="pending"] .page { transition: none; }
@keyframes pageSettle { from { opacity: 0; transform: translateY(10px) scale(1.004); } }
body:not([data-splash-state="pending"]) .page { animation: pageSettle .42s var(--ease) backwards; }

@media (prefers-reduced-motion: reduce) {
  html[data-leaving="true"] .page { opacity: 1; transform: none; }
  body:not([data-splash-state="pending"]) .page { animation: none; }
  .faq__a, .faq__a > p, .sheet__pic img { transition: none !important; }
}

/* ==========================================================================
   HOME: sticky hero headline, boxed topics
   ========================================================================== */
.hero__text p + p { margin-top: 1rem; }
.hero__text p:not(.lede) { color: var(--soft); }
@media (min-width: 900px) {
  .hero__copy { align-items: start; }
  .split__stick { position: sticky; top: 108px; align-self: start; }
}
.cols--boxed .col {
  border: 1px solid var(--rule); padding: clamp(1.25rem, 2.5vw, 1.9rem);
  background: color-mix(in srgb, var(--cream) 8%, transparent);
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.cols--boxed .col:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--cream) 14%, transparent); }
.sect--green .cols--boxed .col { border-color: color-mix(in srgb, var(--cream) 30%, var(--green)); }
.cols--boxed .col h3 { margin-bottom: .6rem; }

/* ==========================================================================
   MENU SHEET
   Laid out like a printed menu card: an oversized title, photo rows under
   ruled category headings, then two text-only columns and a footer.
   ========================================================================== */
/* the menu is a printed card: always cream stock with green ink, in both modes */
.sheetmenu {
  background: #e8e0d5; color: #4d6347;
  padding-block: clamp(2.5rem, 6vh, 4.5rem) clamp(3rem, 7vh, 5rem);
}
.sheetmenu__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.sheetmenu__top h1 {
  font-size: clamp(2.6rem, 8vw, 6.4rem); line-height: .92; letter-spacing: -.02em; margin: 0;
}
.sheetmenu__mark { width: clamp(64px, 9vw, 120px); height: auto; flex: none; margin-top: .5rem; }


.mcat { margin-bottom: clamp(2rem, 4.5vh, 3rem); }
.mcat__h {
  display: flex; align-items: center; gap: 1rem; margin: 0 0 1.25rem;
  font-family: var(--body); font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.mcat__h i { flex: 1; height: 1px; background: currentColor; opacity: .35; }
.mcat__grid { display: grid; gap: clamp(1rem, 2.5vw, 2rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .mcat__grid { grid-template-columns: repeat(4, 1fr); } }
.mitem__pic { aspect-ratio: 1; overflow: hidden; margin-bottom: .7rem; background: #e8e0d5; }
.mitem__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.mitem:hover .mitem__pic img { transform: scale(1.05); }
.mitem__row { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.mitem__row h3 { font-family: var(--body); font-size: .95rem; font-weight: 700; line-height: 1.2; }
.mitem__row span { font-size: .95rem; opacity: .6; font-variant-numeric: tabular-nums; }
.mitem__note { font-size: .78rem; font-style: italic; opacity: .6; margin-top: .15rem; }

.sheetmenu__cols { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: 1fr; margin-top: clamp(1.5rem, 4vh, 2.5rem); }
@media (min-width: 700px) { .sheetmenu__cols { grid-template-columns: 1fr 1fr; } }
.mcol__h { font-family: var(--body); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .5rem; }
.mcol ul { list-style: none; margin: 0; padding: 0; }
.mcol li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  transition: padding-left .2s var(--ease);
}
.mcol li:hover { padding-left: .4rem; }
.mcol li span:first-child { font-weight: 600; font-size: .95rem; }
.mcol li span:last-child { opacity: .6; font-variant-numeric: tabular-nums; }

.sheetmenu__foot {
  display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between;
  margin-top: clamp(2rem, 5vh, 3.5rem); padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.7;
}
.sheetmenu__hours { text-align: right; }
.sheetmenu__milk { opacity: .6; }


/* ==========================================================================
   WORDMARK TICKER
   Full-bleed marquee under the demo note. Two identical halves scrolling as
   one track, so the loop point never shows.
   ========================================================================== */
.ticker {
  overflow: hidden; margin-top: clamp(2rem, 5vh, 3.25rem);
  padding-block: clamp(1rem, 2.5vh, 1.75rem);
  border-block: 1px solid var(--rule);
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track { display: flex; width: max-content; animation: tickerRun 34s linear infinite; }
.ticker__track img {
  height: clamp(26px, 3.2vw, 44px); width: auto; flex: none;
  margin-inline: clamp(1.5rem, 4vw, 3.5rem); opacity: .85;
}
@keyframes tickerRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }


/* ==========================================================================
   PHONE
   ========================================================================== */
.cart-btn[hidden] { display: none; }

@media (max-width: 899px) {
  /* --- full-screen menu, cream, large type ------------------------------ */
  .nav__links {
    position: fixed; inset: 70px 0 0 0; z-index: 90;
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0; padding: 1.25rem var(--gut) 2rem;
    background: var(--cream); color: var(--green);
    border-bottom: 0; overflow-y: auto; overscroll-behavior: contain;
    clip-path: inset(0 0 100% 0); transition: clip-path .38s var(--ease);
  }
  .nav__links[data-open="true"] { clip-path: inset(0 0 0 0); }
  .nav__link {
    padding: 1.15rem 0; font-size: 1.5rem; font-weight: 500;
    border-bottom: 1px solid color-mix(in srgb, var(--green) 22%, var(--cream));
  }
  .nav__bubble {
    margin-top: 1.5rem; text-align: center; font-size: 1.15rem; padding: .95rem 1.5rem;
    background: var(--green); color: var(--cream);
  }

  /* --- hero runs edge to edge and shows the whole shopfront ------------- */
  .hero { padding-top: 0; }
  .hero__shot { margin-inline: calc(var(--gut) * -1); }

  /* --- hero copy reads like an article: drawing right, text around it --- */
  .hero__copy { display: block; padding-block: 1.75rem 2.25rem; }
  .hero__head, .hero__text { display: contents; }
  .hero__copy h1 { max-width: none; margin-bottom: .9rem; }
  .hero__mark {
    float: right; width: 38%; max-width: 190px;
    margin: .1rem 0 .6rem 1rem;
  }
  .hero__text p + p { margin-top: .85rem; }
  .hero__cta { clear: both; }

  /* --- article-style split: picture right, copy wrapping ---------------- */
  .split--article { display: block; }
  .split--article > figure {
    float: right; width: 46%; aspect-ratio: 3 / 4;
    margin: .2rem 0 .75rem 1rem;
  }
  .split--article > div::after { content: ""; display: block; clear: both; }

  /* --- growers two up --------------------------------------------------- */
  .growers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
  .grower figcaption h3 { font-size: 1rem; }
  .grower figcaption p { font-size: .8rem; }
}

/* the Our story page header sits on cream stock. phone only for now, since
   that is where this was asked for. */
@media (max-width: 899px) {
  .phead--cream {
    --bg: var(--cream); --fg: var(--green);
    --soft: color-mix(in srgb, var(--green) 72%, var(--cream));
    --rule: color-mix(in srgb, var(--green) 28%, var(--cream));
    background: var(--cream); color: var(--green);
  }
}

/* --- overall type + rhythm on a phone ---------------------------------- */
@media (max-width: 620px) {
  body { font-size: .95rem; line-height: 1.6; }
  .d-xl { font-size: clamp(2rem, 9vw, 2.7rem); }
  .d-lg { font-size: clamp(1.55rem, 7vw, 2.1rem); }
  .d-md { font-size: 1.2rem; }
  .lede { font-size: 1rem; line-height: 1.55; }
  .sect { padding-block: clamp(2.25rem, 6vh, 3.25rem); }
  .phead { padding-block: 1.75rem 1.25rem; }
  .col h3 { font-size: 1.15rem; }
  .col p, .split p { font-size: .92rem; }
  .btn { padding: .72rem 1.3rem; font-size: .88rem; }
  .post__body p { font-size: .92rem; }
  .faq__it summary span { font-size: 1rem; }
  .ft { padding-block: 2.5rem 3.5rem; }
}

/* the figure sits first in source so a phone can float it; on a wide screen
   put the columns back the way round they read */
@media (min-width: 900px) {
  .split--article > div    { grid-column: 1; grid-row: 1; }
  .split--article > figure { grid-column: 2; grid-row: 1; }
}