/* Cascara Coffee Company
   Base and desktop rules first; the phone block is the LAST thing in this file, so it wins
   over every section rule above it.

   The tokens below are the design system the app inherits. They come from Yusef's Pantone
   spec (418 C olive, 7527 C bone, 7555 metallic gold), the guide's accent page (sage, stone)
   and the shop itself — bright marble, sage walls, gold. */

/* Self-hosted, SIL OFL 1.1, licences beside the files. Latin subset only. */
@font-face{font-family:'Jost';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/assets/fonts/jost-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/newsreader-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/newsreader-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --olive:#51534A;          /* Pantone 418 C, published sRGB */
  --olive-deep:#43463B;     /* the olive the guide itself prints */
  --bone:#D6D2C4;           /* Pantone 7527 C */
  --paper:#F7F4EC;
  --paper-2:#EEEADF;
  --sage:#7E856B;
  --stone:#C1B9AF;
  --ink:#2E302A;
  --muted:#5F6157;
  --tagc:#566048;
  --rule:rgba(46,48,42,.15);
  --rule-dark:rgba(214,210,196,.2);
  /* Pantone 7555 is a METALLIC: no flat colour is it. These stops are sampled across the
     gold swatch in the brand guide; every gold surface carries the gradient, never a fill. */
  --gold:linear-gradient(100deg,#A4792B 0%,#C0932C 20%,#D5AD53 40%,#BF9842 62%,#D8B054 88%,#EBC86D 100%);
  --gold-text:#D8B65F;      /* small gold type on the dark grounds */
  --gold-ink:#7E5D1C;       /* gold-family type on paper, dark enough to read */
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --wrap:1180px;
  --hdr:68px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 12px)}
/* Desktop and laptop draw at 90%: Nathaniel judged the whole design at 90% browser zoom and it
   reads best there, so every visitor now gets that at 100% (2026-09-30; matched against a real
   90% zoom, pixel for pixel). The film's full-screen stage is left out so it still fills the
   screen and keeps its scroll length; its captions and cue are in. Phones (<=820px) and the
   order page, whose SpotOn frame fills the screen, stay at 100%. */
@media (min-width:821px){
  body:not(.orderp)>*:not(.film),.film .beats,.film .cue{zoom:.9}
  html:not(:has(body.orderp)){scroll-padding-top:calc((var(--hdr) + 12px) * .9)}
}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-weight:400;letter-spacing:-.012em;line-height:1.06;text-wrap:balance}
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip{position:fixed;left:10px;top:-70px;z-index:95;background:var(--paper);color:var(--ink);
  border:1px solid var(--rule);border-radius:8px;padding:11px 16px;text-decoration:none;
  font-size:14px;font-weight:600;transition:top .14s}
.skip:focus{top:10px}
.page:focus{outline:none}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
  padding:13px 26px;border-radius:999px;border:1px solid transparent;
  transition:background-position .6s ease,transform .2s ease,border-color .2s,background-color .2s}
/* the metallic: a gradient twice as wide as the button, so hover slides the light across it */
.btn.gold{background:var(--gold);background-size:220% 100%;background-position:0 0;
  color:#1C1A12;box-shadow:inset 0 1px 0 rgba(255,240,200,.45),0 1px 2px rgba(40,30,10,.18)}
.btn.gold:hover{background-position:100% 0;transform:translateY(-1px)}
.btn.ghost{border-color:currentColor}
.btn.ghost:hover{transform:translateY(-1px)}
.on-dark .btn.ghost:hover,.beat .btn.ghost:hover{background-color:rgba(214,210,196,.12)}
.on-paper .btn.ghost:hover{background-color:rgba(46,48,42,.05)}

/* ---------------------------------------------------------------- loader (home) */
.loader{position:fixed;inset:0;z-index:90;background:var(--olive-deep);display:grid;
  place-items:center;transition:opacity .55s ease}
.loader.done{opacity:0;pointer-events:none}
.lwrap{text-align:center;width:min(240px,60vw);color:var(--bone)}
.lwrap svg{width:54px;height:auto;margin:0 auto 24px;fill:currentColor}
.ltrack{height:2px;background:rgba(214,210,196,.18);border-radius:2px;overflow:hidden}
.ltrack i{display:block;height:100%;width:0;background:var(--gold);transition:width .25s linear}
.lpct{margin-top:12px;font-size:11px;letter-spacing:.26em;color:rgba(214,210,196,.8)}
.lfail{display:none;margin-top:16px;font-size:13px;line-height:1.5;color:rgba(214,210,196,.85)}
.loader.failed .lfail{display:block}
.loader.failed .ltrack,.loader.failed .lpct{display:none}

/* ---------------------------------------------------------------- header */
#hdr{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--hdr);display:flex;
  align-items:center;gap:22px;padding:0 clamp(18px,3.4vw,40px);color:var(--bone);
  background:linear-gradient(rgba(24,26,20,.55),rgba(24,26,20,0));
  transition:background .34s ease,color .34s ease,box-shadow .34s ease}
#hdr.on-light{color:var(--ink);background:linear-gradient(rgba(247,244,236,.72),rgba(247,244,236,0))}
#hdr.past,#hdr.solid{background:var(--paper);color:var(--ink);box-shadow:0 1px 0 var(--rule)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand .mk{width:32px;height:32px;fill:currentColor;flex:none}
.brand .bar{width:1px;height:26px;background:currentColor;opacity:.55}
.brand .nm{height:15px;width:auto;fill:currentColor}

.readout{display:flex;align-items:center;gap:10px;margin-left:8px;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;opacity:.8;transition:opacity .3s}
#hdr.past .readout{opacity:0;pointer-events:none}
.readout .num{font-weight:600}
.readout .track{display:block;width:56px;height:2px;background:currentColor;opacity:.3;
  border-radius:2px;overflow:hidden}
.readout .track i{display:block;height:100%;width:0;background:currentColor;opacity:1}

.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.nav a:not(.btn){font-size:14px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;padding:8px 0;border-bottom:1px solid transparent}
.nav a:not(.btn):hover,.nav a[aria-current]{border-bottom-color:currentColor}
.nav .btn{padding:10px 20px;font-size:13px}
.nav .lang{min-width:28px;text-align:center}   /* "ES" / "EN" alone is under the 24px tap minimum */
/* phones: the pages the bar has no room for, behind one button (native <details>, no script) */
.pages{display:none;position:static}
.pages summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:40px;height:40px;margin-right:-8px}
.pages summary::-webkit-details-marker{display:none}
.pages summary span{width:22px;height:15px;background:linear-gradient(currentColor 0 0) top/100% 2px no-repeat,
  linear-gradient(currentColor 0 0) center/100% 2px no-repeat,linear-gradient(currentColor 0 0) bottom/100% 2px no-repeat}
.pages-panel{position:absolute;top:100%;left:0;right:0;display:grid;padding:8px 22px 18px;background:var(--paper);
  color:var(--ink);box-shadow:0 1px 0 var(--rule),0 18px 30px rgba(20,22,17,.18)}
.nav .pages-panel a{font-size:15px;padding:14px 0;border-bottom:1px solid var(--rule)}
.nav .pages-panel a:last-child{border-bottom:0}
.pages:not([open]) .pages-panel{display:none}

/* ---------------------------------------------------------------- film (home) */
.film{height:480vh;position:relative;background:#1F211B;margin-bottom:-1px}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#1F211B}
#c,#pc{position:absolute;inset:0;width:100%;height:100%;display:block}
#pc{pointer-events:none;mix-blend-mode:screen}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 46%,transparent 46%,rgba(12,13,10,.55) 100%)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.5'/></svg>")}
/* the film ends in the bright shop; the page below is paper, so the last shot melts into it */
.fadeout{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(247,244,236,0) 38%,var(--paper) 100%)}

.beats{position:absolute;inset:0;display:grid;align-items:center;
  padding:var(--hdr) clamp(20px,6vw,90px) 0;pointer-events:none}
.beat{grid-area:1/1;opacity:0;visibility:hidden;will-change:opacity,transform;
  justify-self:end;text-align:left;max-width:min(560px,44vw);color:var(--bone);
  position:relative;isolation:isolate}
/* a soft plate of shadow behind the words only — it reads as lens falloff, not a box */
.beat::before{content:"";position:absolute;inset:-22% -26%;z-index:-1;pointer-events:none;
  background:radial-gradient(56% 60% at 50% 50%,rgba(20,22,17,.74),rgba(20,22,17,.34) 60%,transparent 80%)}
.beat h2{font-size:clamp(38px,5vw,72px);line-height:1.02;text-shadow:0 2px 40px rgba(12,13,10,.6)}
.beat h2 em{color:#EFE6CF}
.beat .sub{margin-top:18px;font-family:var(--serif);font-size:clamp(17px,1.6vw,21px);
  line-height:1.5;color:rgba(239,234,221,.9);max-width:34ch;text-shadow:0 1px 18px rgba(12,13,10,.7)}
.beat .kick{font-size:12px;letter-spacing:.26em;text-transform:uppercase;margin-bottom:16px;
  color:rgba(239,234,221,.92)}
.beat.opening{max-width:min(520px,42vw)}
.beat.opening .wm{display:block}
.beat.opening .wm img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 2px 24px rgba(12,13,10,.55))}
/* the last two moments are bright (the pour, the shop), so their words turn to ink on a
   light plate; the finale sits low, on the paper the film is fading into */
.beat.light{color:var(--ink)}
.beat.light::before{background:radial-gradient(56% 60% at 50% 50%,rgba(247,244,236,.8),rgba(247,244,236,.45) 60%,transparent 80%)}
.beat.light h2,.beat.light .sub,.beat.light .kick{color:var(--ink);text-shadow:none}
.beat.light h2 em{color:var(--ink)}
.beat.light .btn.ghost{color:var(--ink)}
.beat.finale{justify-self:start;align-self:end;margin-bottom:8vh}
.beat.left{justify-self:start}   /* the dallah's bright ginger sits right of centre */
.beat .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;pointer-events:auto}
.beat .btn.ghost{color:var(--bone)}
.cue{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);font-size:11px;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(239,234,221,.78);display:flex;
  flex-direction:column;align-items:center;gap:8px;transition:opacity .4s}
.cue span{width:1px;height:28px;background:linear-gradient(rgba(239,234,221,.8),transparent)}

/* ---------------------------------------------------------------- page scaffolding */
.page{position:relative;z-index:2;background:var(--paper)}
.sect{padding:clamp(64px,8vw,120px) clamp(20px,4vw,44px)}
.inner{max-width:var(--wrap);margin:0 auto}
.tag{display:block;font-size:12px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--tagc);margin-bottom:18px}
.lede{font-family:var(--serif);font-size:clamp(18px,1.7vw,21px);line-height:1.6;color:var(--muted);
  max-width:60ch}
.fine{font-size:14px;color:var(--muted);line-height:1.6}
.sect h2{font-size:clamp(34px,4.4vw,60px);margin-bottom:22px}
.more{display:inline-block;margin-top:34px;font-size:14px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;padding:6px 0;border-bottom:1px solid currentColor}

.fx [data-rv]{opacity:0;transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.22,.7,.3,1),transform .8s cubic-bezier(.22,.7,.3,1)}
.fx [data-rv].in{opacity:1;transform:none}
/* keyboard focus inside a section shows it at once, even mid-fade: the observer can start the
   fade one Tab earlier, and site.js's focusin skips a section that already has .in */
.fx [data-rv]:focus-within{opacity:1;transform:none;transition:none}

/* the girih band — the brand's own hem, as on the shirt and the cup in the guide */
.band{height:30px;background-color:var(--olive-deep);background-image:url(/assets/girih.svg);
  background-size:auto 60px;background-position:center;background-repeat:repeat-x}

/* ---------------------------------------------------------------- home */
.intro{padding-top:clamp(40px,5vw,72px)}
.intro .inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:end}
.intro h2{margin-bottom:0;max-width:14ch}

.obar{background:var(--paper-2);border-block:1px solid var(--rule);
  padding:22px clamp(20px,4vw,44px)}
.obar .inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px clamp(18px,3vw,36px)}
.obar p{font-size:17px}
.obar .btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

.signature{position:relative;background:var(--olive-deep);color:var(--bone);overflow:hidden}
.signature::after{content:"";position:absolute;inset:0 0 0 58%;pointer-events:none;opacity:.14;
  background-image:url(/assets/girih.svg);background-size:auto 236px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.signature .inner{position:relative;z-index:1}
.signature .tag{color:var(--gold-text)}
.signature .lede{color:rgba(214,210,196,.82)}
.sig{list-style:none;margin-top:44px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(30px,5vw,80px);max-width:900px}
.sig li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:18px 0;border-top:1px solid var(--rule-dark)}
.sig .n{font-size:clamp(19px,1.7vw,23px);line-height:1.25}
.sig .v{font-size:14px;letter-spacing:.04em;color:var(--gold-text);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.signature .more{color:var(--bone)}

.pots .inner{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,96px);align-items:center}
.ladder{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ladder caption{text-align:left;font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tagc);padding-bottom:12px}
.ladder th,.ladder td{padding:15px 0;border-top:1px solid var(--rule);font-weight:400}
.ladder th{text-align:left;font-size:19px}
.ladder td{text-align:right;font-size:17px;color:var(--muted)}
.ladder tr:last-child th,.ladder tr:last-child td{border-bottom:1px solid var(--rule)}

.visit{background:var(--paper-2)}
.visit .shead{margin-bottom:40px}
.one .vgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:stretch}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:18px;padding:30px}
.card h2,.card h3{font-size:28px;margin-bottom:10px}
/* several shops: every card ends on its buttons, so short and tall cards line up */
.cards .card{display:flex;flex-direction:column}
.cards .acts{margin-top:auto;padding-top:22px}
.cnote{margin-top:10px;font-size:15px;line-height:1.5;color:var(--muted)}
.addr{font-size:17px;line-height:1.5}
.tel{display:inline-block;font-weight:500;text-decoration:none;padding:4px 0;min-height:24px;
  border-bottom:1px solid var(--rule)}
.tel:hover{border-bottom-color:currentColor}
.hours{width:100%;margin:18px 0 8px;border-collapse:collapse;font-size:15px}
.hours th{text-align:left;font-weight:500;padding:7px 0}
.hours td{text-align:right;padding:7px 0;color:var(--muted);font-variant-numeric:tabular-nums}
.hours tr+tr th,.hours tr+tr td{border-top:1px solid var(--rule)}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.vmap{border-radius:18px;overflow:hidden;background:var(--paper);min-height:400px}
.vmap iframe{width:100%;height:100%;min-height:400px;border:0;display:block}

.open{margin-top:10px;font-size:15px;font-weight:500;color:var(--muted)}
.open.is-open{color:#3D6630}
.open.is-open::before,.open.soon::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:currentColor;margin-right:8px;vertical-align:.08em}
.open.soon{color:var(--gold-ink)}

.rewards{text-align:center}
.rewards .inner{max-width:760px}
.rewards .lede{margin:0 auto}
.rewards .acts{justify-content:center;margin-top:30px}
.rewards .fine{margin-top:16px;color:rgba(214,210,196,.78)}

.appband{text-align:center}
.appband .inner{max-width:760px}
.appband .lede{margin:0 auto}
.appband .mk{width:56px;height:56px;margin:0 auto 26px;fill:var(--olive)}

/* ---------------------------------------------------------------- inner pages */
.sub .page{padding-top:var(--hdr)}
.phead{padding:clamp(56px,7vw,100px) clamp(20px,4vw,44px) clamp(36px,4vw,56px)}
.phead h1{font-size:clamp(44px,6.4vw,88px);margin-bottom:20px}
.phead .acts{margin-top:28px}
.phead .acts+.fine{margin-top:16px}

/* menu */
/* the section bar stays under the header all the way down the menu (Nathaniel, 2026-09-30) */
.mnav{position:sticky;top:var(--hdr);z-index:20;background:var(--paper);border-bottom:1px solid var(--rule)}
.mnav ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;
  max-width:var(--wrap);margin:0 auto;padding:12px clamp(20px,4vw,44px)}
.mnav a{display:block;white-space:nowrap;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;padding:8px 14px;border-radius:999px;border:1px solid transparent}
.mnav a:hover{border-color:var(--rule)}
.msec{margin-bottom:64px;scroll-margin-top:var(--mnav, 58px)}   /* html scroll-padding already clears the header */
.msec h2{font-size:clamp(28px,2.6vw,36px);margin-bottom:6px}
.mnote{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:17px;margin-bottom:6px}
.mgrid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:22px;margin-top:18px}
.mcard{background:#fff;border:1px solid var(--rule);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column}
.mcard img,.mcard .ph{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  background:var(--paper-2)}
.mcard .ph{display:grid;place-items:center;background:var(--olive-deep) url(/assets/girih.svg) center/auto 160px}
.mcard .ph svg{width:64px;height:64px;fill:var(--bone);opacity:.9}
.mc{padding:14px 16px 16px}
.mrow{display:flex;align-items:baseline;gap:12px}
.mrow h3,.mrow h4{font-size:19px;line-height:1.25;font-weight:400}
.mrow .p{margin-left:auto;white-space:nowrap;font-size:16px;font-weight:500;font-variant-numeric:tabular-nums}
.mc .t{display:inline-block;margin-top:6px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tagc);border:1px solid var(--rule);border-radius:999px;padding:3px 10px}
.msizes{margin-top:8px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.mdesc{margin-top:6px;font-family:var(--serif);font-size:16px;line-height:1.45;color:var(--muted)}
.mdisc{margin:-6px 0 34px;max-width:70ch}
.opts{background:var(--paper-2)}
.ogrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px clamp(26px,4vw,56px);margin-top:36px}
.ogrid h3{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--tagc);
  font-weight:500;margin-bottom:10px}
.ogrid ul{list-style:none}
.ogrid li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-top:1px solid var(--rule);font-size:16px}
.ogrid li span{color:var(--muted);font-variant-numeric:tabular-nums}

/* our story, catering */
/* the Mocha engraving printed over a watercolour wash: multiply turns its white paper into
   the wash, so the lines read as ink on the page rather than a picture pasted on it */
.yem{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
/* behind the text, reaching left under the engraving; no isolation anywhere above it, or the
   engraving's multiply would blend against nothing and its paper would show white */
.ytext{position:relative}
.ytext::before{content:"";position:absolute;z-index:-1;inset:-16% -9% -14% -34%;
  background:url(/assets/story/wash.svg) center/100% 100% no-repeat}
.engr img{width:100%;height:auto;mix-blend-mode:multiply}
.engr figcaption{margin-top:10px;font-family:var(--serif);font-style:italic;font-size:14px;color:var(--muted)}
/* the ingredient row: renders on white, multiplied so the white becomes the page's cream */
.ingr{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:30px 14px;
  margin-top:44px;text-align:center}
/* each render leaves ~20% white around its subject; scaling into it makes the subject bigger
   without widening the row, and the multiplied white stays invisible where it overlaps */
.ingr img{width:100%;height:auto;mix-blend-mode:multiply;transform:scale(1.2)}
.ingr h3{font-size:24px;margin-top:14px}
.ingr p{font-family:var(--serif);font-size:16px;line-height:1.4;color:var(--muted);margin-top:4px}
.ggroup{margin-top:48px}
.ggroup h3{font-size:clamp(24px,2.2vw,30px)}
.ggroup .mnote{margin-top:6px}
.guide .acts{margin-top:48px}
.cx{margin-top:22px}
.feats a[href^="tel:"]{white-space:nowrap}
/* three and five cards: three across, so none sits alone in a four-column row */
@media (min-width:821px){.mgrid.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* the "What to order" groups carry a fourth card for phones' two-across grid; desktop keeps three */
@media (min-width:821px){.guide .ggroup .mgrid>li:nth-child(4){display:none}}

/* location */
.lgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:start}
.lgrid .hours{max-width:420px}

/* order: SpotOn's ordering page framed under the site's own header */
.orderp .foot{display:none}
.obar2{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 20px;
  padding:12px clamp(20px,4vw,44px);border-bottom:1px solid var(--rule);font-size:15px}
.obar2 a{text-decoration:underline;padding:4px 0}
.obar2 .oh{font-size:15px;line-height:1.4;letter-spacing:0}
/* the frame takes whatever height the bar leaves, so SpotOn's own cart bar at the bottom of
   its page stays on screen however many rows the bar wraps to on a phone */
.orderpage{display:flex;flex-direction:column;height:100dvh;box-sizing:border-box}
.oframe{display:block;width:100%;flex:1;min-height:0;border:0;background:#fff}

/* with more than one shop: the menu's shop switch, and the order page's Pickup / Delivery.
   One pill, the chosen segment lit in olive. */
.shops,.modes{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--paper);
  border:1px solid var(--rule);border-radius:999px}
.shops{margin-top:24px}
.shops a,.obar2 .modes a{display:inline-flex;align-items:center;min-height:36px;padding:0 18px;
  border-radius:999px;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:var(--ink)}
.obar2 .modes a{min-height:30px;padding:0 14px}
.shops a:hover,.modes a:hover{background:var(--paper-2)}
.shops a[aria-current],.modes a[aria-current]{background:var(--olive-deep);color:var(--bone)}
.omodes{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}

/* app, privacy */
.doc{max-width:720px}
.doc h2{font-size:clamp(24px,2.4vw,30px);margin:44px 0 12px}
.doc p,.doc li{font-family:var(--serif);font-size:19px;line-height:1.65;color:#3E4038}
.doc p+p{margin-top:14px}
.doc ul{margin:10px 0 0 1.1em}
.doc li+li{margin-top:6px}
.feats{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;
  margin-top:40px;max-width:900px}
.feats li{padding:22px 0;border-top:1px solid var(--rule)}
.feats h3{font-size:22px;margin-bottom:6px}
.feats p{font-family:var(--serif);font-size:18px;color:var(--muted)}

/* ---------------------------------------------------------------- toast (desktop click-to-call) */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  background:var(--olive-deep);color:var(--bone);font-size:14px;padding:12px 20px;
  border-radius:999px;z-index:80;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--olive-deep);color:var(--bone)}
.foot .inner{box-sizing:content-box;padding-inline:clamp(20px,4vw,44px)}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;
  padding-block:clamp(56px,6vw,84px) 44px}
.fwm{max-width:250px}
.fwm img{display:block;width:min(250px,100%);height:auto}
.fwm .fmark{width:120px;margin:40px auto 0}
.foot h2{font-size:12px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-text);margin-bottom:14px}
.foot ul{list-style:none}
.foot li+li{margin-top:4px}
.foot a{text-decoration:none;display:inline-block;padding:4px 0;min-height:24px}
.foot a:hover{text-decoration:underline}
.foot p{font-size:15px;line-height:1.6;color:rgba(214,210,196,.86)}
.floc>*{display:block;padding:0;min-height:24px;line-height:24px}
.floc+.floc{margin-top:18px}
.floc .fn{font-size:16px;font-weight:500;color:var(--bone)}
.fsoon{color:var(--gold-text)}
.fbase{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  border-top:1px solid var(--rule-dark);padding-block:22px 30px}
.fbase p{font-size:13px;color:rgba(214,210,196,.78)}
.fbase a{display:inline;padding:0;min-height:0;text-decoration:underline}

/* just above phone width, the film's chapter readout and the full nav don't both fit */
@media (max-width:900px){.readout{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  [data-rv]{opacity:1;transform:none}
}

/* ================================================================
   PHONE — must stay LAST so it beats the section rules above.
   ================================================================ */
@media (max-width:820px){
  body{font-size:16px}
  :root{--hdr:78px}
  #hdr{gap:12px;padding:0 16px}
  .brand .mk{width:42px;height:42px}
  .brand .nm{height:13px}
  .readout,.nav .nl-x{display:none}
  .nav{gap:16px}
  .nav a:not(.btn){font-size:16px}
  .nav .btn{padding:12px 22px;font-size:15px}
  .pages summary span{width:28px;height:19px}
  .pages{display:block}
  .nav .lx{display:none}

  .beats{align-items:end;padding:0 22px 13vh}
  .beat,.beat.finale{justify-self:center;text-align:center;max-width:92vw}
  /* the phone film ends on the cup in the lower half of the screen: the closing words sit
     mid-screen, above it, so the cup stays in full view */
  .beat.finale{align-self:center;margin-bottom:15vh;display:flex;flex-direction:column;align-items:center}
  /* "Now pouring in..." signs off under the buttons; the light plate reaches lower to sit behind it */
  .beat.finale .kick{order:3;margin:22px 0 0;font-size:16px}
  .beat.finale::before{inset:-22% -26% -46%}
  .fadeout{display:none}      /* its paper wash sits on the lower half, where the phone film ends on the cup */
  .beats .beat:nth-child(2){margin-bottom:8vh}   /* "Cascara means husk": nearer the husk it names */
  .beats .beat:nth-child(3){align-self:start;margin-top:16vh}   /* "qishr": above the falling husk */
  .beat.opening{max-width:84vw}
  .beat h2{font-size:clamp(34px,9.6vw,52px)}
  .beat .sub{margin-left:auto;margin-right:auto;font-size:24px}
  .beat .ctas{justify-content:center}
  .cue{bottom:22px}

  .lede,.feats p{font-size:20px}   /* the grey text under the headings */
  .mnote{font-size:19px}
  .cnote{font-size:17px}

  .sect{padding:56px 20px}
  .intro .inner,.pots .inner,.one .vgrid,.lgrid,.yem{grid-template-columns:1fr;gap:28px}
  .ytext::before{inset:-28px -20px -24px}
  .ingr{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 14px}
  .ingr img{transform:none}
  .ingr h3{font-size:19px}
  .ingr p{font-size:17px}
  .sig{grid-template-columns:1fr}
  .signature::after{inset:0;opacity:.08}
  .vmap,.vmap iframe{min-height:300px}
  .mgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .mc{padding:10px 12px 12px}
  .mrow{flex-direction:column;gap:2px}
  .mrow h3,.mrow h4{font-size:16px}
  .mrow .p{margin-left:0}
  /* phones: one row that scrolls sideways, instead of four wrapped rows of chips */
  .mnav ul{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .mnav ul::-webkit-scrollbar{display:none}
  .ogrid{grid-template-columns:1fr 1fr;gap:28px 22px}
  .feats{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr;gap:34px 24px}
  .fwm{grid-column:1/-1}
}
@media (max-width:480px){.brand .bar,.brand .nm{display:none}}   /* room for the pages button */
@media (max-width:420px){
  .brand .bar,.brand .nm{display:none}
  .ogrid{grid-template-columns:1fr}
  .ingr{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Restated last so no width query above can undo it: under reduced motion the film is one
   still frame, not 480vh of scroll to sit through. */
@media (prefers-reduced-motion:reduce){
  .film{height:100vh}
}