/* ==========================================================================
   WestCanna BC — site.css
   "Contour": bone paper, the city drawn in fine teal contour lines, big warm
   type, cedar hairlines, teal actions.
   ========================================================================== */

:root {
  --bone:      #F4EFE4;
  --bone-deep: #E9E1D0;
  --teal:      #006080;
  --teal-deep: #00485F;
  --ink:       #00303F;
  --cedar:     #B8865B;
  --cedar-deep:#7A4E2D;
  --sage:      #96BAC7;
  --char:      #002230;

  --disp: 'Bitter', Georgia, 'Times New Roman', serif;   /* the logo's own face */
  --body: 'Albert Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'DM Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --word: Jost, 'Josefin Sans', 'Century Gothic', 'Avenir Next', system-ui, sans-serif;

  --pad: clamp(20px, 5vw, 68px);
  --maxw: 1240px;
  --head-h: 74px;
  --rule: 1px solid rgba(184, 134, 91, 0.42);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html:not(.gate-done) { overflow: hidden; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--char);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; }

.u-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--teal); color: var(--bone); padding: 12px 18px;
  font-family: var(--mono); font-size: 15px;
}
.skip:focus { left: 8px; top: 8px; }

:focus-visible { outline: 2px solid var(--cedar-deep); outline-offset: 3px; }
#main:focus, #main:focus-visible { outline: none; }

/* ---------- type ---------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--disp);
  font-weight: 800;
  color: var(--ink);
  margin: 0;
  font-variation-settings: 'wdth' 100;
}
h1 {
  font-size: clamp(3.6rem, 9vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(2.1rem, 4.3vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.025em;
}
/* BUILD-07 fix (design review): every h2 on the homepage measured exactly
   the same size — the "timid uniform type scale" that reads as template.
   Three tiers now exist: .h2--display for the one or two moments that
   deserve the weight, the base h2 above for most sections, and .h2--util
   for a plain utility ask (a form, a sign-up) that doesn't need to shout. */
.h2--display {
  font-size: clamp(3.2rem, 6.5vw, 5.6rem);
  line-height: .96;
  letter-spacing: -0.03em;
}
.h2--util {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1.05;
}
h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.15; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 22px;
}
.lede { font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.5; max-width: 46ch; }
.mono { font-family: var(--mono); font-size: 15px; letter-spacing: 0.01em; }

/* ---------- layout -------------------------------------------------------- */
.sec { padding: clamp(64px, 8.5vw, 138px) var(--pad); position: relative; }
.wrap { max-width: var(--maxw); margin: 0 auto; }
.sec-bone-deep { background: var(--bone-deep); }
.sec-ink { background: var(--ink); color: rgba(244, 239, 228, 0.86); }
.sec-ink h2, .sec-ink h3 { color: var(--bone); }

.rule-cedar { height: 1px; background: rgba(184, 134, 91, 0.5); border: 0; margin: 0; }

/* ---------- buttons ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--mono); font-size: 14.5px; letter-spacing: 0.13em;
  text-transform: uppercase; text-decoration: none;
  padding: 15px 26px; border: 1px solid transparent; border-radius: 2px;
  cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease;
  line-height: 1;
}
.btn-teal { background: var(--teal); color: var(--bone); }
.btn-teal:hover, .btn-teal:focus-visible { background: var(--teal-deep); }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover, .btn-line:focus-visible { border-color: var(--cedar-deep); color: var(--cedar-deep); }
.btn-bone { background: var(--bone); color: var(--ink); }
.btn-bone:hover, .btn-bone:focus-visible { background: var(--bone-deep); }
.btn-sm { padding: 11px 18px; font-size: 13.5px; }

.tlink {
  font-family: var(--mono); font-size: 14.5px; letter-spacing: 0.08em;
  color: var(--teal-deep); text-decoration: none;
  border-bottom: 1px solid rgba(0, 96, 128, 0.4); padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}
.tlink:hover { color: var(--cedar-deep); border-color: var(--cedar); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- header --------------------------------------------------------
   build-06 fix pass: the compact-on-scroll state used to animate `padding`
   on .site-head/.head-in and `width`/`height` on .brand-mark — all
   layout-triggering, and measured firing a real layout-shift on every
   page's first scroll, in direct violation of the brief's "animate
   transform, opacity, clip-path, mask-position only" rule. .head-in's
   padding is now constant (the box never resizes) and the compact cue is
   the mark alone scaling down via `transform`, which never reflows. */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(244, 239, 228, 0.94);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid rgba(184, 134, 91, 0.34);
}
.head-in {
  max-width: 1560px; margin: 0 auto;
  padding: 14px var(--pad);
  display: flex; align-items: center; gap: 22px;
}
.site-head.is-compact .brand-mark { transform: scale(.773); }
/* compose with the hover/focus lift (css/motion.css) instead of one clobbering
   the other — both are transform, and this selector's higher specificity
   wins regardless of stylesheet order. */
@media (hover: hover) and (pointer: fine) {
  .site-head.is-compact .brand:hover .mark-frame .brand-mark { transform: scale(.773) translateY(-2px); }
}
.site-head.is-compact .brand:focus-visible .mark-frame .brand-mark { transform: scale(.773) translateY(-2px); }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.brand-mark { width: 44px; height: 44px; transition: transform .2s ease; }
.brand-word {
  font-family: var(--word); font-weight: 300; font-size: 22px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
  display: flex; align-items: baseline; gap: 7px; white-space: nowrap;
}
.brand-bc { font-size: 14px; letter-spacing: 0.18em; color: var(--teal); }

.nav { display: flex; gap: 26px; }
.nav a {
  font-family: var(--mono); font-size: 15px; letter-spacing: 0.05em;
  text-decoration: none; color: var(--char); padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a.is-active { color: var(--teal-deep); border-color: var(--cedar); }

/* ---------- the Stores menu -------------------------------------------------
   Stores stays a link to the section; the menu is the extra. It opens on
   hover and on keyboard focus, and Escape shuts it (js/site.js). The panel is
   held open by visibility rather than display so it is out of the tab order
   while closed, and the panel's own padding-top bridges the gap under the
   trigger so a slow pointer never falls through it. */
.nav-drop { position: relative; display: flex; }
.nav-drop-t { display: inline-flex; align-items: center; gap: 7px; }
.nav-drop-t .chev { font-size: 9px; color: var(--cedar-deep); transition: transform .18s ease; }
.nav-drop.is-open > .nav-drop-t { color: var(--teal-deep); border-color: var(--cedar); }
.nav-drop.is-open > .nav-drop-t .chev { transform: rotate(180deg); }

.drop {
  position: absolute; top: 100%; left: -20px; z-index: 70;
  padding-top: 22px; width: 322px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.nav-drop.is-open .drop { opacity: 1; visibility: visible; transform: none; }
.drop-in {
  list-style: none; margin: 0; padding: 0;
  background: var(--bone);
  border: 1px solid rgba(184, 134, 91, .42); border-top: 2px solid var(--teal);
  box-shadow: 0 20px 44px -28px rgba(0, 48, 63, .6);
}
.drop-in li { padding: 15px 20px 14px; }
.drop-in li + li { border-top: 1px solid rgba(184, 134, 91, .32); }
.drop a { padding: 0; border-bottom: 0; text-decoration: none; }
.drop-go { display: block; }
.drop-name {
  display: block; font-family: var(--word); font-weight: 300; font-size: 16.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink);
  transition: color .18s ease;
}
.drop-adr {
  display: block; font-family: var(--body); font-size: 15px; line-height: 1.5;
  color: rgba(0, 34, 48, .74); margin-top: 5px;
}
.drop-go:hover .drop-name, .drop-go:focus-visible .drop-name { color: var(--teal-deep); }
.drop a.drop-tel {
  display: inline-block; margin-top: 9px;
  font-family: var(--mono); font-size: 14px; letter-spacing: .06em; color: var(--teal-deep);
  border-bottom: 1px solid rgba(0, 96, 128, .4); padding-bottom: 2px;
}
.drop a.drop-tel:hover { color: var(--cedar-deep); border-color: var(--cedar); }

.head-right { display: flex; align-items: center; gap: 12px; }
.store-chip {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em;
  background: transparent; border: 1px solid rgba(184, 134, 91, 0.55);
  color: var(--teal-deep); padding: 9px 12px; border-radius: 2px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.store-chip:hover { border-color: var(--cedar-deep); }
.chev { font-size: 12.5px; }

.nav-toggle { display: none; background: transparent; border: 1px solid rgba(184,134,91,.55); border-radius: 2px; padding: 11px 12px; cursor: pointer; }
.bars { display: block; width: 18px; }
.bars i { display: block; height: 1.5px; background: var(--ink); margin: 4px 0; }

.store-pop {
  border-top: 1px solid rgba(184, 134, 91, 0.3);
  background: var(--bone-deep);
}
.store-pop-in {
  max-width: 1560px; margin: 0 auto; padding: 18px var(--pad);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.store-pop .lbl { font-family: var(--mono); font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-deep); margin: 0; }
.store-pop .note { font-size: 15px; margin: 0; color: rgba(0, 34, 48,.72); }

/* ---------- the store switch ---------------------------------------------- */
.switch {
  display: inline-flex; border: 1px solid var(--teal); border-radius: 2px; overflow: hidden;
  background: var(--bone);
}
.switch button {
  font-family: var(--mono); font-size: 14.5px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 11px 20px; border: 0; background: transparent; color: var(--teal-deep);
  cursor: pointer; transition: background .18s ease, color .18s ease;
}
.switch button + button { border-left: 1px solid rgba(0, 96, 128, 0.4); }
.switch button[aria-checked="true"] { background: var(--teal); color: var(--bone); }

/* ---------- the 19+ gate --------------------------------------------------- */
.gate {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 48, 63, 0.9);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
html.gate-done .gate { display: none; }
.gate-card {
  background: var(--bone); max-width: 460px; width: 100%;
  padding: clamp(28px, 5vw, 46px); text-align: center;
  border-top: 3px solid var(--teal);
}
.gate-mark { margin: 0 auto 14px; }
.gate-word {
  font-family: var(--word); font-weight: 300; font-size: 19px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink); margin: 0 0 22px;
  display: flex; justify-content: center; align-items: baseline; gap: 7px;
}
/* the gate's title is a <p>, not a heading: it precedes the page's h1 in DOM
   order and must not sit above it in the outline */
.gate-h {
  font-family: var(--disp); font-weight: 800; color: var(--ink); line-height: 1.05;
  letter-spacing: -0.02em; font-size: clamp(1.6rem, 4vw, 2.1rem); margin: 0 0 12px;
}
.gate-sub { font-size: 16px; color: rgba(0, 34, 48, 0.78); margin-bottom: 26px; }
.gate-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.gate-out { margin-top: 20px; font-size: 16px; }
.gate-out a { display: block; margin-top: 8px; color: var(--teal-deep); }

/* ---------- the contour map ------------------------------------------------ */
.wc-map, .map-ghost { display: block; width: 100%; height: auto; }
.wc-line, .wc-ghost { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wc-line { stroke: var(--sage); stroke-width: 1.15; }
.wc-line.sh { stroke: var(--teal); stroke-width: 1.5; }
.wc-line.rv { stroke: var(--teal); stroke-width: 1.05; opacity: .8; }
.wc-line.bathy { opacity: .45; }
.wc-ghost { stroke: var(--sage); stroke-width: 1.1; }
.wc-ghost.sh { stroke: var(--teal); stroke-width: 1.4; }

.muni-label {
  font-family: var(--disp); font-weight: 800; font-size: 17px; letter-spacing: .1em;
  fill: var(--teal-deep);
  paint-order: stroke; stroke: var(--bone); stroke-width: 5px; stroke-linejoin: round;
}
/* The neighbourhood names are the only place all 86 of them appear on desktop,
   so they are set for reading, not for texture: the softening lives in the
   fill's alpha (7:1 on bone) instead of on `opacity`, which would also make
   the bone halo see-through and let a contour line show straight through a
   name. A 3.4px halo knocks a clean gap out of any line a name crosses. */
.hood {
  font-family: var(--mono); font-size: 13.5px; fill: rgba(0, 34, 48, .78);
  paint-order: stroke; stroke: var(--bone); stroke-width: 3.4px; stroke-linejoin: round;
  transition: fill .25s ease, opacity .25s ease;
}
.muni-leader { stroke: var(--cedar); stroke-width: .8; fill: none; opacity: .5; }
.muni { cursor: pointer; }
.muni:focus { outline: none; }
.muni:focus-visible .muni-label { fill: var(--cedar-deep); }
.wc-map.has-focus .muni:not(.is-on) .hood { opacity: .3; }
.wc-map.has-focus .muni:not(.is-on) .muni-label { opacity: .38; }
.muni.is-on .hood, .muni:hover .hood { fill: var(--char); }

.store-mark .leader { stroke: var(--cedar); stroke-width: 1; fill: none; }
.store-mark .halo { fill: var(--bone); }
.store-mark .dot { fill: var(--teal-deep); }
.store-text {
  font-family: var(--mono); font-size: 14.5px; font-weight: 500; fill: var(--teal-deep);
  paint-order: stroke; stroke: var(--bone); stroke-width: 3.4px; stroke-linejoin: round;
}

/* ---------- 1. hero -------------------------------------------------------- */
#hero { position: relative; overflow: hidden; padding-top: clamp(46px, 6vw, 86px); }
.hero-ghost {
  position: absolute; right: -10%; top: -2%; width: min(124%, 1680px);
  opacity: .22; pointer-events: none; z-index: 0;
}
.hero-in { position: relative; z-index: 1; }
#hero h1 { margin-bottom: 26px; max-width: 15ch; }
#hero .lede { max-width: 40ch; margin-bottom: 34px; font-size: clamp(1.08rem, 1.55vw, 1.3rem); }

.hero-switch { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.hero-switch .lbl {
  font-family: var(--mono); font-size: 13.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal-deep); margin: 0;
}
.status {
  font-family: var(--mono); font-size: 15px; letter-spacing: .04em;
  color: var(--teal-deep); margin: 22px 0 0; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap;
}
.status .sep { color: rgba(184, 134, 91, .8); }
.status .pip {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cedar);
  display: inline-block; flex: none;
}
.status.is-open .pip { background: var(--teal); }

/* ---------- 2. stores: two doors ------------------------------------------- */
#stores { padding-left: 0; padding-right: 0; padding-bottom: 0; }
#stores .sec-head { padding: 0 var(--pad) clamp(30px, 4vw, 52px); }
.doors { display: grid; grid-template-columns: 1fr 1fr; }
.door { position: relative; }
/* both storefront photographs are cut to 4:3 in the file, so the frame is 4:3 and nothing is cropped */
.door-shot { position: relative; overflow: hidden; aspect-ratio: 4 / 3; height: auto; background: var(--bone-deep); }
.door-shot img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  transition: filter .3s ease;
}
.doors:hover .door:not(:hover) .door-shot img { filter: brightness(.92); }

/* the caption sits under the photograph, not over it — the whole storefront shows */
.door-panel {
  position: relative; margin: 0 clamp(16px, 2.4vw, 34px);
  background: var(--bone); padding: clamp(18px, 2vw, 28px);
  border-top: 2px solid var(--teal);
}
.door-panel .tag {
  font-family: var(--mono); font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cedar-deep); margin: 0 0 8px;
}
.door-panel h3 { margin-bottom: 10px; }
.door-panel address { font-style: normal; font-family: var(--mono); font-size: 15px; line-height: 1.75; color: var(--char); }
.door-panel address a { text-decoration: none; }
.door-panel address a:hover { color: var(--teal-deep); }
.door-links { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; }

/* ---------- 3. delivery ----------------------------------------------------- */
#delivery .deliv-top {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
  margin-bottom: clamp(32px, 4vw, 58px);
}
#delivery h2 { margin-bottom: 18px; }
.deliv-facts { list-style: none; margin: 0; padding: 0; }
.deliv-facts li { padding: 14px 0; border-top: var(--rule); font-size: 17px; }
.deliv-facts li:first-child { border-top: 0; padding-top: 0; }
.deliv-facts .k {
  display: block; font-family: var(--mono); font-size: 13px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--cedar-deep); margin-bottom: 5px;
}
.map-frame { width: min(88vw, 1180px); margin: 0 auto; }
.map-caption {
  font-family: var(--mono); font-size: 13.5px; letter-spacing: .08em; color: rgba(0, 34, 48,.78);
  text-align: center; margin: 14px 0 0;
}
.hood-lists { display: none; }
.hood-lists-lbl {
  font-family: var(--mono); font-size: 13.5px; letter-spacing: .08em;
  color: rgba(0, 34, 48,.78); text-align: center; margin: 0;
}
.hood-lists h3 {
  font-family: var(--mono); font-weight: 500; font-size: 13.5px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--teal-deep); margin: 22px 0 6px;
}
.hood-lists p { font-size: 16px; line-height: 1.65; margin: 0; color: rgba(0, 34, 48,.85); }
#delivery .actions { justify-content: center; margin-top: clamp(30px, 4vw, 52px); }

/* ---------- 4. shelf: the index --------------------------------------------- */
#shelf .sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.5vw, 48px); }
/* the rows carry their own side padding so a hovered row has room inside its
   outline; the list is pulled out by the same amount, so the names still line
   up with the heading above and only the hairlines run a little wider */
.idx { --idx-pad: clamp(12px, 1.3vw, 18px); border-top: var(--rule); margin: 0 calc(-1 * var(--idx-pad)); }
.idx-row {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 46px); align-items: baseline;
  padding: clamp(18px, 2vw, 26px) var(--idx-pad); border-bottom: var(--rule);
  transition: background-color .18s ease, box-shadow .18s ease;
}
/* the whole row is the target (Muse's "What are you looking for?" rows); the
   two store links sit above the overlay and keep their own targets */
.idx-hit { position: absolute; inset: 0; z-index: 1; text-decoration: none; }
.idx-hit:focus-visible { outline: 2px solid var(--cedar-deep); outline-offset: -4px; }
/* on hover the row lifts off the bone-deep ground and draws its own cedar
   outline — Muse's bordered category rows, but only when you are on one */
.idx-row:hover, .idx-row:focus-within {
  background-color: var(--bone);
  box-shadow: inset 0 0 0 1px rgba(184, 134, 91, .5);
}
.idx-row:hover .idx-name, .idx-row:focus-within .idx-name { color: var(--teal-deep); }
.idx-name {
  font-family: var(--disp); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  line-height: 1; letter-spacing: -0.02em; color: var(--ink); margin: 0;
  transition: color .18s ease;
}
.idx-note { margin: 0; font-size: 16.5px; color: rgba(0, 34, 48, .82); }
.idx-links { display: flex; gap: 14px; white-space: nowrap; position: relative; z-index: 2; }
#shelf .actions { margin-top: clamp(30px, 4vw, 52px); }

/* ---------- 5. legacy ---------------------------------------------------------
   A dated stamp against one continuous paragraph, split by a cedar rule — the
   store's history read straight through, not parcelled into panels. */
#legacy .legacy-in {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 62px); margin-top: clamp(26px, 3.4vw, 48px); align-items: start;
}
.legacy-stamp { margin: 0; display: block; }
.legacy-since {
  display: block; font-family: var(--mono); font-size: 13px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--cedar-deep); margin-bottom: 8px;
}
.legacy-year {
  display: block; font-family: var(--disp); font-weight: 800;
  font-size: clamp(4rem, 9.4vw, 8.4rem); line-height: .8; letter-spacing: -0.05em;
  color: var(--teal);
}
.legacy-text {
  border-left: var(--rule); padding-left: clamp(22px, 3.2vw, 50px);
  align-self: stretch;
}
.legacy-text h2 { margin-bottom: 20px; max-width: 20ch; }
.legacy-run { font-size: clamp(1.02rem, 1.35vw, 1.16rem); max-width: 58ch; margin: 0; }

/* ---------- the interior band --------------------------------------------------
   Full-bleed photograph, one mono label and one bone button in the bottom-left
   corner — the busy middle of the frame (the counter, the mural) stays clear.
   The scrim is a bottom-anchored gradient so the label reads without a slab. */
.band {
  position: relative; overflow: hidden;
  height: auto; aspect-ratio: 2760 / 1500; /* the photograph's own ratio: the whole frame shows */
  background: var(--ink);
}
.band-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 58%;
}
/* two passes: the floor of the frame, and the bottom-left corner the label and
   the button stand in — the top-right of the photograph is left alone */
.band::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(4, 26, 34, .86), rgba(4, 26, 34, .46) 26%, rgba(4, 26, 34, .12) 56%, rgba(4, 26, 34, 0) 78%),
    linear-gradient(to right, rgba(4, 26, 34, .5), rgba(4, 26, 34, .14) 34%, rgba(4, 26, 34, 0) 58%);
  pointer-events: none;
}
.band-in {
  position: absolute; z-index: 2;
  left: var(--pad); bottom: clamp(24px, 3.4vw, 52px);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(14px, 1.6vw, 20px);
}
.band-lbl {
  font-family: var(--mono); font-size: clamp(11px, 1.1vw, 12.5px);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--bone); margin: 0;
}

/* ---------- 6. curated ------------------------------------------------------- */
.curated-grid {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px); align-items: center;
}
.curated-shot { position: relative; overflow: hidden; background: var(--bone-deep); }
.curated-shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 460 / 691; }
.curated-copy h2 { margin-bottom: 22px; }
.curated-copy p { font-size: clamp(1.02rem, 1.35vw, 1.16rem); max-width: 44ch; }
.curated-copy .actions { margin-top: 30px; }

/* ---------- 7. list -----------------------------------------------------------
   One sentence with the answers written into it, on cedar rules — a line to
   fill in rather than a column of labelled boxes. */

.list-sub { font-size: clamp(1.02rem, 1.3vw, 1.14rem); max-width: 52ch; margin: 16px 0 clamp(30px, 4vw, 48px); }
.say {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 11px; row-gap: 16px; margin: 0; max-width: 1010px;
  font-size: clamp(1.16rem, 2.1vw, 1.62rem); line-height: 1.5; color: var(--ink);
}
.say-w { flex: 0 0 auto; }
.blank { flex: 1 1 15ch; min-width: 11ch; position: relative; display: block; }
.blank-store { flex: 0 1 15ch; }
.say input, .say select {
  width: 100%; font-family: var(--mono); font-size: .82em; line-height: 1.35;
  color: var(--ink); background: transparent; border: 0;
  border-bottom: 1.5px solid var(--cedar); border-radius: 0;
  padding: 2px 2px 7px; -webkit-appearance: none; appearance: none;
}
.say select { padding-right: 20px; cursor: pointer; }
.blank-store::after {
  content: '\25BE'; position: absolute; right: 3px; bottom: 7px;
  font-size: .62em; color: var(--cedar-deep); pointer-events: none;
}
.say input::placeholder { color: rgba(0, 34, 48, .42); }
.say input:focus, .say select:focus { outline: none; border-bottom-color: var(--teal); border-bottom-width: 2px; padding-bottom: 6.5px; }
.list-agree { margin-top: clamp(28px, 3.4vw, 44px); }
.list-end { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); flex-wrap: wrap; margin-top: 22px; }
.list-end .form-note { margin: 0; max-width: 40ch; }
.check { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 13px; font-size: 16px; line-height: 1.5; }
.check input { margin: 3px 0 0; width: 17px; height: 17px; flex: none; accent-color: var(--teal); }
.form-note { font-family: var(--mono); font-size: 13.5px; color: rgba(0, 34, 48,.62); margin-top: 14px; }
.form-msg { margin-top: 14px; font-size: 16px; color: var(--teal-deep); }
.hp { position: absolute; left: -9999px; }

/* ---------- 8. glossary ------------------------------------------------------ */
.gloss { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(34px, 5vw, 76px); border-top: var(--rule); }
.gloss-item { padding: clamp(18px, 2vw, 26px) 0; border-bottom: var(--rule); }
.gloss-item dt {
  font-family: var(--disp); font-weight: 800; font-size: clamp(1.1rem, 1.55vw, 1.32rem);
  color: var(--ink); letter-spacing: -0.01em; margin-bottom: 7px;
}
.gloss-item dd { margin: 0; font-size: 16.5px; color: rgba(0, 34, 48, .84); }
.gloss-close { margin-top: 26px; font-family: var(--mono); font-size: 15px; }
.gloss-close a { color: var(--teal-deep); }

/* ---------- 9. visit --------------------------------------------------------- */
#visit .cols {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 56px); margin-top: clamp(28px, 3.5vw, 50px);
}
#visit h3 {
  font-family: var(--mono); font-weight: 500; font-size: 13.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sage); margin-bottom: 14px;
}
#visit address, #visit p, #visit ul { font-style: normal; font-size: 16px; line-height: 1.75; }
#visit ul { list-style: none; margin: 0; padding: 0; }
#visit a { color: var(--bone); text-decoration: none; border-bottom: 1px solid rgba(150, 186, 199, .4); }
#visit a:hover { border-color: var(--cedar); color: #fff; }
#visit .actions { margin-top: clamp(30px, 4vw, 50px); }
#visit a.btn-bone { color: var(--ink); border-bottom: 0; }
#visit a.btn-bone:hover { color: var(--ink); background: var(--bone-deep); }

/* ---------- 10. notice ------------------------------------------------------- */
#notice { position: relative; overflow: hidden; padding-top: clamp(46px, 5vw, 74px); padding-bottom: clamp(46px, 5vw, 74px); }
.notice-ghost {
  position: absolute; left: 50%; transform: translateX(-50%); top: 0;
  width: min(108%, 1380px); opacity: .2; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 86%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 86%);
}
.notice-in { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.notice-in p { font-family: var(--mono); font-size: 14px; line-height: 1.7; letter-spacing: .02em; color: rgba(0, 34, 48, .8); margin: 0; }
.notice-in strong { color: var(--ink); font-weight: 500; }

/* ---------- footer ------------------------------------------------------------ */
.site-foot { background: var(--ink); color: rgba(244, 239, 228, .78); padding: clamp(40px, 5vw, 66px) var(--pad); }
.foot-in { max-width: var(--maxw); margin: 0 auto; display: flex; gap: clamp(20px, 4vw, 60px); align-items: center; flex-wrap: wrap; justify-content: space-between; }
.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-brand .brand-word { color: var(--bone); font-size: 19px; }
.foot-brand .brand-bc { color: var(--sage); }
.foot-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-nav a, .foot-social a { font-family: var(--mono); font-size: 14.5px; text-decoration: none; color: rgba(244,239,228,.78); border-bottom: 1px solid transparent; }
.foot-nav a:hover, .foot-social a:hover { color: var(--bone); border-color: var(--cedar); }
.foot-social { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; }
.foot-rule { max-width: var(--maxw); margin: clamp(26px, 3vw, 40px) auto; height: 1px; background: rgba(184, 134, 91, .3); }
.foot-low { font-family: var(--mono); font-size: 13.5px; color: rgba(244,239,228,.6); }
.foot-low p { margin: 0; }

/* ---------- the order page ----------------------------------------------------- */
#order-hero { padding-bottom: clamp(34px, 4vw, 56px); }
#order-hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); max-width: 18ch; margin-bottom: 22px; }
.menu-slot { display: none; }
.menu-slot.is-on { display: block; }
/* Until the Dutchie script arrives this panel IS the order page, so it is
   stacked the way Muse stacks a store: the store, one big way in, then the
   three facts a customer actually came for. */
.slot-panel {
  background: var(--bone-deep); border-top: 3px solid var(--teal);
  padding: clamp(30px, 4.4vw, 64px) clamp(22px, 4vw, 64px) clamp(28px, 4vw, 56px);
  text-align: center;
}
.slot-panel .eyebrow { margin-bottom: 14px; }
.slot-panel h2 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); margin-bottom: clamp(22px, 2.6vw, 34px); }
.btn-lg { padding: 19px 42px; font-size: 15px; letter-spacing: .15em; }
.slot-note { font-family: var(--mono); font-size: 13.5px; color: rgba(0, 34, 48,.62); margin: 12px 0 0; }
.slot-rule {
  height: 1px; border: 0; background: rgba(184, 134, 91, .5);
  margin: clamp(26px, 3.4vw, 44px) auto 0; max-width: 720px;
}
/* Hours is the widest of the three — the services line reads as one line */
.slot-blocks {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 44px);
  margin: clamp(26px, 3.2vw, 42px) auto 0; max-width: 980px;
}
.slot-k {
  font-family: var(--mono); font-size: 13px; letter-spacing: .19em; text-transform: uppercase;
  color: var(--cedar-deep); margin: 0 0 9px;
}
.slot-block address, .slot-block p {
  font-style: normal; font-family: var(--body); font-size: 16px; line-height: 1.6;
  color: var(--char); margin: 0 0 3px;
}
.slot-block a { color: var(--teal-deep); text-decoration: none; border-bottom: 1px solid rgba(0, 96, 128, .32); }
.slot-block a:hover { color: var(--cedar-deep); border-color: var(--cedar); }
.slot-pay {
  font-family: var(--mono); font-size: 13.5px; letter-spacing: .04em;
  color: rgba(0, 34, 48, .62); margin: clamp(22px, 2.6vw, 32px) 0 0;
}
.dutchie-anchor:empty { display: none; }

.how { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); }
.how h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin-bottom: 20px; }
.how ol { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.how li { padding: 16px 0; border-top: var(--rule); font-size: 17px; display: flex; gap: 16px; }
.how li::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  font-family: var(--mono); font-size: 13.5px; color: var(--cedar-deep); padding-top: 4px; flex: none;
}
.how .plain li::before { content: none; }

/* ---------- reveal ------------------------------------------------------------- */
.rise { opacity: 0; transform: translateY(16px); }
.is-in .rise, .rise.is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
html.no-motion .rise, html.no-anim .rise { opacity: 1; transform: none; }

/* ==========================================================================
   narrower screens
   ========================================================================== */
@media (max-width: 1080px) {
  #delivery .deliv-top { grid-template-columns: 1fr; }
  .curated-grid { grid-template-columns: 1fr; }
  #visit .cols { grid-template-columns: 1fr 1fr; }
  .notice-in { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --head-h: 64px; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bone); border-bottom: 1px solid rgba(184,134,91,.34);
    flex-direction: column; gap: 0; padding: 8px var(--pad) 18px;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid rgba(184,134,91,.22); }
  .nav-toggle { display: inline-flex; }

  /* inside the phone panel the Stores menu is simply always open: no hover to
     reveal it with, and no second tap to spend */
  .nav-drop { display: block; }
  .nav-drop-t { display: flex; }
  .nav-drop-t .chev { display: none; }
  .drop {
    position: static; width: auto; padding-top: 0;
    opacity: 1; visibility: visible; transform: none;
  }
  .drop-in { background: transparent; border: 0; box-shadow: none; }
  .drop-in li { padding: 12px 0 12px 15px; border-left: 1px solid rgba(184,134,91,.3); }
  .drop-in li + li { border-top: 0; margin-top: 4px; }
  .drop a, .drop a.drop-tel { padding: 0; }
  .drop a { border-bottom: 0; }
  .drop a.drop-tel { border-bottom: 1px solid rgba(0, 96, 128, .4); }
  .head-cta { display: none; }
  .brand-word { font-size: 18px; letter-spacing: .18em; }
  .brand-mark { width: 36px; height: 36px; }

  .doors { grid-template-columns: 1fr; }
  .door-shot { height: auto; }
  #legacy .legacy-in { grid-template-columns: 1fr; gap: clamp(18px,3vw,28px); }
  .legacy-text { border-left: 0; padding-left: 0; border-top: var(--rule); padding-top: clamp(18px,3vw,28px); }
  .idx-row { grid-template-columns: 1fr; gap: 10px; }
  .idx-links { margin-top: 4px; }
  .gloss { grid-template-columns: 1fr; }
  .slot-blocks { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 30px); max-width: 34ch; }
  .slot-rule { max-width: 34ch; }
  .btn-lg { padding: 18px 30px; width: 100%; max-width: 34ch; }
  .how { grid-template-columns: 1fr; }
  .band { height: auto; }
  /* the label runs most of the way across a phone, so the side scrim has to
     reach further than it does on a desktop frame */
  .band::after {
    background:
      linear-gradient(to top, rgba(4, 26, 34, .88), rgba(4, 26, 34, .5) 26%, rgba(4, 26, 34, .14) 56%, rgba(4, 26, 34, 0) 80%),
      linear-gradient(to right, rgba(4, 26, 34, .52), rgba(4, 26, 34, .3) 55%, rgba(4, 26, 34, 0) 92%);
  }
}

/* the map on phones: municipality labels only, names as a list beneath */
@media (max-width: 780px) {
  .map-frame { width: 100%; }
  .wc-map .hood, .wc-map .muni-leader, .wc-map .store-text, .wc-map .store-mark .leader { display: none; }
  /* the names are not on the map here, so the hover instruction would be a lie */
  .map-caption { display: none; }
  .wc-map .muni-label { font-size: 25px; stroke-width: 7px; letter-spacing: .06em; }
  .wc-map .store-mark .dot { r: 8; }
  .wc-map .store-mark .halo { r: 15; }
  .hood-lists { display: block; margin-top: clamp(26px, 5vw, 42px); }
  .hero-ghost { right: -22%; top: 8%; width: 170%; opacity: .14; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  /* the sentence breaks to one blank per line rather than stretching a blank
     across the row and stranding the next words at the right edge */
  .say { row-gap: 4px; }
  .say .blank { flex: 1 1 100%; }
  .say .blank-store { flex: 0 1 15ch; }
  #visit .cols { grid-template-columns: 1fr; }
  .foot-in { flex-direction: column; align-items: flex-start; }
  .door-panel { margin: 0 12px; }
  .store-chip { display: none; }
  .actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ==========================================================================
   BUILD 02 — "THE SHELF"
   A dense, photo-led, product-forward retail homepage. Everything below is
   additive: build 01's shell (header, gate, store switch, contour map,
   storefront diptych, fill-in-the-line sign-up, glossary) is reused as it is.
   ========================================================================== */

:root {
  --cream: #FBF8F1;
  --shelf-w: 236px;
}

/* the store switch hides whole blocks; hidden has to beat display:grid/flex */
[hidden] { display: none !important; }

/* ---------- extra grounds --------------------------------------------------
   Dark bands alternate with bone bands; no more than two light sections run
   together. */
.sec-cream { background: var(--cream); }
.sec-teal { background: var(--teal); color: rgba(244, 239, 228, .9); }
.sec-teal-deep { background: var(--teal-deep); color: rgba(244, 239, 228, .9); }
.sec-teal h2, .sec-teal h3, .sec-teal-deep h2, .sec-teal-deep h3 { color: var(--bone); }
.sec-ink .eyebrow, .sec-teal .eyebrow, .sec-teal-deep .eyebrow { color: var(--sage); }
.sec-ink .lede, .sec-teal .lede, .sec-teal-deep .lede { color: rgba(244, 239, 228, .84); }
.sec-ink .tlink, .sec-teal .tlink, .sec-teal-deep .tlink {
  color: var(--sage); border-bottom-color: rgba(150, 186, 199, .45);
}
.sec-ink .tlink:hover, .sec-teal .tlink:hover, .sec-teal-deep .tlink:hover {
  color: var(--bone); border-color: var(--cedar);
}

/* a section head carrying a label, a heading and a line of running mono */
.head-3 {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 54px); align-items: end;
  margin-bottom: clamp(26px, 3.4vw, 46px);
}
.head-3 h2 { max-width: 24ch; }
.head-3-side {
  font-family: var(--mono); font-size: 15px; line-height: 1.75;
  max-width: 40ch; color: rgba(0, 34, 48, .74); margin: 0;
}
.sec-ink .head-3-side, .sec-teal .head-3-side, .sec-teal-deep .head-3-side { color: rgba(244, 239, 228, .72); }

/* the one dated footnote a page is allowed */
.dated {
  font-family: var(--mono); font-size: 13.5px; line-height: 1.7; letter-spacing: .02em;
  color: rgba(0, 34, 48, .62); margin: clamp(18px, 2.2vw, 28px) 0 0; max-width: 80ch;
}
.sec-ink .dated, .sec-teal .dated, .sec-teal-deep .dated { color: rgba(244, 239, 228, .6); }

/* ==========================================================================
   THE PRODUCT CARD — one component, eight forms
   shelf · grid · tile · dark · tall · row · ledger · poster
   Every form is one <a> to that product's page on the chosen store's live menu.
   ========================================================================== */
.pc {
  display: flex; flex-direction: column; position: relative;
  text-decoration: none; color: inherit;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
}
.pc-shot { display: block; overflow: hidden; background: #fff; }
.pc-shot img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .4s ease; }
.pc:hover .pc-shot img { transform: scale(1.045); }
.pc-txt { display: flex; flex-direction: column; }
.pc-brand {
  font-family: var(--mono); font-size: 13px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--cedar-deep);
}
.pc-name {
  font-family: var(--disp); font-weight: 800; letter-spacing: -.015em;
  color: var(--ink); line-height: 1.12;
}
.pc-meta { font-family: var(--mono); font-size: 13px; letter-spacing: .03em; color: rgba(0, 34, 48, .68); }
.pc-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: auto; }
.pc-price { font-family: var(--disp); font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.pc-go {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-deep); white-space: nowrap;
  border-bottom: 1px solid rgba(0, 96, 128, .34); padding-bottom: 1px;
}
.pc:hover .pc-go, .pc:focus-visible .pc-go { color: var(--cedar-deep); border-color: var(--cedar); }
.pc:focus-visible { outline: 2px solid var(--cedar-deep); outline-offset: 3px; }

.shelf-arrow {
  width: 42px; height: 42px; border: 1px solid rgba(184, 134, 91, .55);
  background: transparent; color: var(--teal-deep); border-radius: 2px; cursor: pointer;
  font-size: 16.5px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.shelf-arrow:hover:not(:disabled) { background: var(--teal); border-color: var(--teal); color: var(--bone); }
.shelf-arrow:disabled { opacity: .32; cursor: default; }
/* BUILD 05 fix: on a dark band the cedar-outlined boxes read as empty squares. */
.sec-ink .shelf-arrow, .sec-teal .shelf-arrow, .sec-teal-deep .shelf-arrow {
  color: rgba(244, 239, 228, .9); border-color: rgba(184, 134, 91, .55);
}
.sec-ink .shelf-arrow:hover:not(:disabled), .sec-teal .shelf-arrow:hover:not(:disabled),
.sec-teal-deep .shelf-arrow:hover:not(:disabled) {
  background: var(--cedar-deep); border-color: var(--cedar-deep); color: var(--bone);
}
.sec-ink .shelf-arrow:disabled, .sec-teal .shelf-arrow:disabled,
.sec-teal-deep .shelf-arrow:disabled { opacity: .45; }

/* --- form 2: the grid card (new on the shelf, topicals) ------------------- */
.grid-12 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.grid-6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.pc--grid { background: var(--bone); border: 1px solid rgba(184, 134, 91, .32); padding-bottom: 15px; }
.pc--grid:hover { transform: translateY(-4px); border-color: var(--cedar); box-shadow: 0 20px 30px -24px rgba(0, 48, 63, .5); }
.pc--grid .pc-shot { aspect-ratio: 5 / 4; }
.pc--grid .pc-txt { padding: 13px 15px 0; gap: 4px; flex: 1; }
.pc--grid .pc-name { font-size: 1rem; }
.pc--grid .pc-foot { padding-top: 11px; }
.pc--grid .pc-price { font-size: 1.02rem; }

/* --- form 3: the square tile (the pre-roll wall, accessories) ------------- */
.tile-wall {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px; background: rgba(184, 134, 91, .42);
  border: 1px solid rgba(184, 134, 91, .42);
}
.pc--tile { background: var(--bone); }
.pc--tile:hover { background: var(--cream); }
.pc--tile .pc-shot { aspect-ratio: 1 / 1; }
.pc--tile .pc-txt { padding: 11px 12px 13px; gap: 3px; flex: 1; }
.pc--tile .pc-brand { font-size: 12px; letter-spacing: .15em; }
.pc--tile .pc-name { font-size: .88rem; }
.pc--tile .pc-meta { font-size: 12.5px; }
.pc--tile .pc-foot { padding-top: 9px; flex-direction: column; align-items: flex-start; gap: 4px; }
.pc--tile .pc-price { font-size: .95rem; }
.pc--tile .pc-go { font-size: 9px; letter-spacing: .1em; }

/* --- form 4: the dark card (vapes and concentrates on teal-ink) ----------- */
.dark-set { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.pc--dark { background: rgba(244, 239, 228, .05); border: 1px solid rgba(150, 186, 199, .22); padding-bottom: 13px; }
.pc--dark:hover { background: rgba(244, 239, 228, .1); border-color: var(--cedar); transform: translateY(-3px); }
.pc--dark .pc-shot { aspect-ratio: 1 / 1; background: var(--cream); }
.pc--dark .pc-txt { padding: 11px 13px 0; gap: 3px; flex: 1; }
.pc--dark .pc-brand { color: var(--sage); font-size: 12px; }
.pc--dark .pc-name { color: var(--bone); font-size: .92rem; }
.pc--dark .pc-meta { color: rgba(244, 239, 228, .6); font-size: 12.5px; }
.pc--dark .pc-foot { padding-top: 10px; flex-direction: column; align-items: flex-start; gap: 4px; }
.pc--dark .pc-price { color: var(--bone); font-size: 1rem; }
.pc--dark .pc-go { color: var(--sage); border-color: rgba(150, 186, 199, .4); font-size: 9px; letter-spacing: .1em; }
.pc--dark:hover .pc-go { color: var(--bone); border-color: var(--cedar); }

/* --- form 5: the tall packaging card (beverages, edibles) ----------------- */
.sip-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.tall-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.pc--tall { background: var(--cream); border-bottom: 2px solid var(--cedar); padding-bottom: 15px; }
.pc--tall:hover { border-bottom-color: var(--teal); transform: translateY(-4px); box-shadow: 0 20px 30px -26px rgba(0, 48, 63, .5); }
.pc--tall .pc-shot { aspect-ratio: 3 / 4; }
.pc--tall .pc-txt { padding: 13px 15px 0; gap: 4px; flex: 1; }
.pc--tall .pc-name { font-size: 1rem; }
.pc--tall .pc-foot { padding-top: 11px; }
.pc--tall .pc-price { font-size: 1.05rem; }

/* --- form 6: the wide row card (accessories, seeds, beverages) ------------ */
.row-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.pc--row { background: var(--bone); border: 1px solid rgba(184, 134, 91, .3); padding-bottom: 14px; }
.pc--row:hover { border-color: var(--cedar); transform: translateY(-3px); }
.pc--row .pc-shot { aspect-ratio: 16 / 11; }
.pc--row .pc-txt { padding: 12px 14px 0; gap: 3px; flex: 1; }
.pc--row .pc-name { font-size: .95rem; }
.pc--row .pc-foot { padding-top: 10px; flex-direction: column; align-items: flex-start; gap: 4px; }
.pc--row .pc-price { font-size: 1rem; }

/* --- form 7: the ledger row (tinctures, oils, capsules) ------------------- */
.ledger-list { border-top: 1px solid rgba(184, 134, 91, .45); }
.pc--ledger {
  flex-direction: row; align-items: center; gap: clamp(12px, 1.8vw, 26px);
  padding: 13px clamp(6px, 1vw, 14px); border-bottom: 1px solid rgba(184, 134, 91, .35);
}
.pc--ledger:hover { background: var(--cream); }
.pc--ledger .pc-shot { width: 64px; height: 64px; flex: none; border: 1px solid rgba(184, 134, 91, .3); }
.pc--ledger .pc-txt {
  flex: 1; flex-direction: row; align-items: baseline; flex-wrap: wrap;
  gap: 4px clamp(12px, 2vw, 30px);
}
.pc--ledger .pc-brand { flex: 0 0 clamp(90px, 11vw, 148px); }
.pc--ledger .pc-name { flex: 1 1 18ch; font-size: 1rem; }
.pc--ledger .pc-meta { flex: 0 0 auto; }
.pc--ledger .pc-foot { flex: 0 0 auto; margin-top: 0; gap: clamp(14px, 2vw, 26px); }
.pc--ledger .pc-price { font-size: 1.05rem; }

/* --- form 8: the lead jar + the menu board (the order page's flower block)
   Type over the photograph was the wrong idea for this photography: every
   product shot off the menu is a cut-out on WHITE, so the scrim that made the
   type legible also cut every nug in half and still left the brand line at
   1.88:1 on near-white. One jar now carries the picture at size; the other
   seven are a menu board of type. ------------------------------------------ */
.flower-split {
  display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 56px); align-items: start;
}
.pc--lead {
  background: var(--bone); border: 1px solid rgba(184, 134, 91, .34);
  border-top: 3px solid var(--teal);
}
.pc--lead:hover { border-color: var(--cedar); border-top-color: var(--cedar); box-shadow: 0 26px 40px -30px rgba(0, 48, 63, .55); }
.pc--lead .pc-shot { background: #fff; aspect-ratio: 1 / 1; display: block; padding: 16px; box-sizing: border-box; }
.pc--lead .pc-shot img { width: 100%; height: 100%; object-fit: contain; }
.pc--lead .pc-txt { padding: clamp(16px, 1.8vw, 24px) clamp(16px, 1.8vw, 24px) clamp(18px, 2vw, 26px); gap: 7px; }
.pc--lead .pc-name { font-size: clamp(1.4rem, 2.2vw, 2rem); }
.pc--lead .pc-meta { font-size: 14px; }
.pc--lead .pc-foot { padding-top: 16px; }
.pc--lead .pc-price { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }

.flower-board { border-top: 2px solid var(--cedar); }
.board-k, .pc--menu .pc-txt {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.5fr) minmax(0, 1.05fr) minmax(0, .82fr);
  gap: 4px clamp(10px, 1.6vw, 26px); align-items: baseline;
}
.board-k {
  margin: 0; padding: 9px clamp(4px, .7vw, 10px);
  font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(0, 34, 48, .5); border-bottom: 1px solid rgba(184, 134, 91, .35);
}
.board-k span:last-child { text-align: right; }
.pc--menu { padding: 13px clamp(4px, .7vw, 10px); border-bottom: 1px solid rgba(184, 134, 91, .3); }
.pc--menu:hover { background: var(--bone); }
.pc--menu .pc-name { font-size: 1rem; }
.pc--menu .pc-meta { font-size: 13px; }
.pc--menu .pc-foot { margin-top: 0; justify-content: flex-end; gap: clamp(10px, 1.3vw, 20px); }
.pc--menu .pc-price { font-family: var(--mono); font-weight: 500; font-size: .96rem; letter-spacing: 0; }

/* --- form 9: the can on the cold-case shelf (the order page's beverages) --
   The photographs are cut-outs on white, so the can is multiplied into the
   cream paper and stands on a drawn cedar shelf line. ---------------------- */
.case-wrap { position: relative; border-bottom: 3px solid var(--cedar); }
.case-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(146px, 13vw, 184px);
  gap: clamp(14px, 2vw, 30px); align-items: end;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  padding: 4px 2px 0; scrollbar-width: none;
}
.case-rail::-webkit-scrollbar { display: none; }
.case-rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.pc--can { background: transparent; scroll-snap-align: start; text-align: center; }
.pc--can .pc-shot {
  background: transparent; width: 100%; aspect-ratio: 4 / 5;
  display: grid; place-items: end center; overflow: visible;
}
.pc--can .pc-shot img { object-fit: contain; max-height: 100%; mix-blend-mode: multiply; }
.pc--can:hover .pc-shot img { transform: translateY(-6px) scale(1.03); }
.pc--can .pc-txt { padding: 12px 2px 16px; gap: 3px; align-items: center; text-align: center; }
.pc--can .pc-brand { font-size: 12px; }
.pc--can .pc-name { font-size: .92rem; }
.pc--can .pc-meta { font-size: 12.5px; }
.pc--can .pc-foot { padding-top: 9px; flex-direction: column; align-items: center; gap: 4px; margin-top: auto; }
.pc--can .pc-price { font-size: 1rem; }
.pc--can .pc-go { font-size: 9px; letter-spacing: .1em; }

/* --- the topicals two-up and the seed rack ------------------------------- */
.top-two {
  display: grid; grid-template-columns: minmax(0, .44fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 58px); align-items: start;
}
.top-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
/* a category of seven cannot fill a five-column row, so the rack is flex and
   the last row grows to the full width — no empty cell, ever */
.seed-rack { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.4vw, 20px); }
.seed-rack .pc--row { flex: 1 1 clamp(180px, 17vw, 214px); }

/* ==========================================================================
   1. HERO — photo-led
   ========================================================================== */
#hero {
  position: relative; overflow: hidden; background: var(--ink); color: rgba(244, 239, 228, .88);
  min-height: 88vh; display: flex; align-items: center;
  padding-top: clamp(40px, 5vw, 78px); padding-bottom: clamp(40px, 5vw, 78px);
}
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% 58%; }
/* the scrim is heaviest at the left, where the type stands, and thins to the
   right so the cedar posts and the painted forest wall stay readable */
#hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(4, 26, 34, .95) 0%, rgba(4, 26, 34, .9) 36%, rgba(4, 26, 34, .6) 68%, rgba(4, 26, 34, .32) 100%),
    linear-gradient(to bottom, rgba(4, 26, 34, .5), rgba(4, 26, 34, .08) 34%, rgba(4, 26, 34, .5));
}
.hero-in {
  position: relative; z-index: 2; width: 100%;
  display: grid; grid-template-columns: minmax(0, clamp(260px, 25vw, 396px)) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 62px); align-items: center;
}
.hero-lockup { display: block; }
.hero-lockup .lockup { width: 100%; height: auto; display: block; }
#hero .eyebrow { color: var(--sage); }
#hero h1 { color: var(--bone); font-size: clamp(3rem, 7.4vw, 6.8rem); max-width: none; margin-bottom: 22px; }
#hero .h1-sub {
  display: block; margin-top: 18px;
  font-size: clamp(1.05rem, 2vw, 1.85rem); line-height: 1.12; font-weight: 800;
  letter-spacing: -.022em; color: var(--sage);
}
#hero .hero-switch .lbl { color: var(--sage); }
#hero .switch { background: rgba(4, 26, 34, .5); border-color: var(--sage); }
#hero .switch button { color: var(--bone); }
#hero .switch button[aria-checked="true"] { background: var(--bone); color: var(--ink); }
#hero .btn-line { border-color: var(--bone); color: var(--bone); }
/* build-06 fix pass: motion.css wipes a --teal-deep fill in behind this label
   on hover; cedar-on-teal-deep measured 3.15:1 (below the 4.5:1 floor this
   brief requires), so the label crosses to bone instead — bone on teal-deep
   measures 8.75:1. */
#hero .btn-line:hover, #hero .btn-line:focus-visible { border-color: var(--teal-deep); color: var(--bone); }
/* The hours line, 16 Sep. Ajay: "make it simple, change the font to something
   similar to the header text, larger, so it contrasts better." It was mono at
   14.5px in sage on a photograph — the lightest type on the darkest ground in
   the hero. Now it is set in --disp, the face taken from their own emblem and
   used by the nav wordmark and the h1 above it, in bone: 11.6:1 on the hero
   scrim against sage's 5.0:1. */
.hero-chip {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid rgba(150, 186, 199, .42); padding: 12px 20px; border-radius: var(--pill);
  margin: 26px 0 0;
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(1.02rem, 1.5vw, 1.3rem); letter-spacing: .005em;
  color: var(--bone);
}
.hero-chip .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--cedar); display: inline-block; flex: none; }
.hero-chip.is-open .pip { background: var(--sage); }
.hero-chip .sep { color: rgba(184, 134, 91, .9); }
.hero-trust {
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(244, 239, 228, .6); margin: 16px 0 0;
}

/* ==========================================================================
   3. #formats — shop by format, nine photo tiles
   ========================================================================== */
.fmt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.fmt {
  position: relative; overflow: hidden; background: var(--ink);
  min-height: clamp(224px, 21vw, 300px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(18px, 2vw, 26px);
  transition: transform .3s ease, box-shadow .3s ease;
}
.fmt:hover { transform: translateY(-5px); box-shadow: 0 28px 44px -30px rgba(0, 48, 63, .75); }
.fmt-collage { position: absolute; inset: 0; }
.fmt-i { position: absolute; display: block; transition: transform .5s ease; }
.fmt-i1 { left: 1%; top: 4%; width: 46%; transform: rotate(-7deg); }
.fmt-i2 { right: 0%; top: -4%; width: 42%; transform: rotate(8deg); }
.fmt-i3 { left: 32%; top: 24%; width: 45%; transform: rotate(-2deg); }
.fmt:hover .fmt-i1 { transform: rotate(-10deg) translateY(-6px); }
.fmt:hover .fmt-i2 { transform: rotate(11deg) translateY(-4px); }
.fmt:hover .fmt-i3 { transform: rotate(-3deg) translateY(-8px) scale(1.04); }
.fmt::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(4, 26, 34, .97) 8%, rgba(4, 26, 34, .8) 42%, rgba(4, 26, 34, .3) 74%, rgba(4, 26, 34, .18) 100%);
}
.fmt-body, .fmt-go { position: relative; z-index: 2; }
.fmt-name {
  font-family: var(--disp); font-weight: 800; font-size: clamp(1.4rem, 2.1vw, 2rem);
  line-height: 1; letter-spacing: -.025em; color: var(--bone); margin: 0 0 8px;
}
.fmt-count { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--sage); margin: 0; }
.fmt-go {
  display: flex; gap: 18px; flex-wrap: wrap;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .3s ease, opacity .3s ease, margin-top .3s ease;
}
.fmt-go .tlink { color: var(--sage); border-bottom-color: rgba(150, 186, 199, .45); }
.fmt-go .tlink:hover { color: var(--bone); border-color: var(--cedar); }
.fmt:hover .fmt-go, .fmt:focus-within .fmt-go { max-height: 90px; opacity: 1; margin-top: 15px; }
/* A phone has no hover, so the reveal has to be open from the start or the
   nine tiles' eighteen shop links cannot be reached at all. */
@media (hover: none) {
  .fmt-go { max-height: 90px; opacity: 1; margin-top: 15px; }
}

/* ==========================================================================
   5. #stats — the numbers band
   ========================================================================== */
.stats {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 clamp(18px, 2.6vw, 40px); margin-top: clamp(28px, 3.4vw, 48px);
}
.stat { border-top: 1px solid rgba(150, 186, 199, .3); padding: clamp(20px, 2.4vw, 30px) 0 0; }
.stat-n {
  font-family: var(--disp); font-weight: 800; font-size: clamp(2.3rem, 4.6vw, 4.1rem);
  line-height: .84; letter-spacing: -.045em; color: var(--bone); margin: 0; display: block;
}
.stat-k {
  font-family: var(--mono); font-size: 13px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--sage); margin: 14px 0 0; line-height: 1.6;
}

/* ==========================================================================
   8. #curated — three pillars on cedar rules
   ========================================================================== */
.cur-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); gap: clamp(28px, 4.4vw, 72px); align-items: start; }
.pillars { border-top: 1px solid rgba(184, 134, 91, .5); margin-top: clamp(20px, 2.4vw, 32px); }
.pillar {
  padding: clamp(18px, 2.2vw, 28px) 0; border-bottom: 1px solid rgba(184, 134, 91, .5);
  display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 38px); align-items: baseline;
}
.pillar-k { font-family: var(--disp); font-weight: 800; font-size: clamp(1.4rem, 2.5vw, 2.1rem); line-height: 1; letter-spacing: -.03em; color: var(--teal-deep); margin: 0; }
.pillar-t { margin: 0; font-size: 17px; line-height: 1.62; color: rgba(0, 34, 48, .86); }
.cur-shot { margin: 0; position: relative; }
.cur-shot img { width: 100%; aspect-ratio: 460 / 691; object-fit: cover; }
.cur-shot figcaption { font-family: var(--mono); font-size: 13px; letter-spacing: .07em; color: rgba(0, 34, 48, .6); margin-top: 10px; }

/* ==========================================================================
   9. #brands — the typographic brand wall
   ========================================================================== */
.brand-wall {
  list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: clamp(18px, 2.4vw, 40px); row-gap: clamp(8px, 1.1vw, 16px);
}
.brand-wall li {
  font-family: var(--disp); font-weight: 800; line-height: 1; letter-spacing: -.025em;
  color: rgba(244, 239, 228, .88); font-size: clamp(1.05rem, 2.2vw, 1.95rem);
}
.brand-wall li:nth-child(4n+2) { font-size: clamp(.92rem, 1.55vw, 1.36rem); color: var(--sage); font-weight: 400; }
.brand-wall li:nth-child(5n+3) { font-size: clamp(1.2rem, 2.8vw, 2.5rem); color: var(--bone); }
.brand-wall li:nth-child(7n+5) { color: var(--cedar); }

/* ==========================================================================
   11. #how — pickup and delivery, three steps each, icons drawn in CSS
   ========================================================================== */
.how-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.4vw, 78px); margin-top: clamp(24px, 3vw, 40px); }
.how-col h3 { font-family: var(--disp); font-size: clamp(1.35rem, 2.2vw, 1.85rem); margin-bottom: 8px; }
.how-col > .eyebrow { margin-bottom: 14px; }
.how-col > p { font-size: 16.5px; color: rgba(0, 34, 48, .82); max-width: 40ch; }
.steps { list-style: none; margin: clamp(18px, 2.2vw, 28px) 0 0; padding: 0; }
.step {
  display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: clamp(14px, 1.8vw, 24px);
  padding: clamp(16px, 2vw, 24px) 0; border-top: 1px solid rgba(184, 134, 91, .45); align-items: start;
}
.step:last-child { border-bottom: 1px solid rgba(184, 134, 91, .45); }
.step-ico { width: 54px; height: 54px; position: relative; border: 1px solid rgba(184, 134, 91, .55); border-radius: 50%; flex: none; }
.step-ico::before, .step-ico::after { content: ''; position: absolute; }
/* a bag: a handle and a body */
.ico-bag::before { left: 17px; top: 14px; width: 20px; height: 10px; border: 1.6px solid var(--teal-deep); border-bottom: 0; border-radius: 10px 10px 0 0; }
.ico-bag::after { left: 14px; top: 23px; width: 26px; height: 17px; border: 1.6px solid var(--teal-deep); }
/* a card with a portrait */
.ico-id::before { left: 13px; top: 18px; width: 28px; height: 19px; border: 1.6px solid var(--teal-deep); border-radius: 2px; }
.ico-id::after { left: 17px; top: 23px; width: 8px; height: 8px; border: 1.6px solid var(--teal-deep); border-radius: 50%; }
/* a door with a handle */
.ico-door::before { left: 18px; top: 13px; width: 20px; height: 28px; border: 1.6px solid var(--teal-deep); }
.ico-door::after { left: 21px; top: 26px; width: 4px; height: 4px; background: var(--teal-deep); border-radius: 50%; }
/* a screen on a stand */
.ico-screen::before { left: 15px; top: 15px; width: 25px; height: 21px; border: 1.6px solid var(--teal-deep); border-radius: 3px; }
.ico-screen::after { left: 20px; top: 38px; width: 15px; height: 1.6px; background: var(--teal-deep); }
/* two cards, offset */
.ico-two::before { left: 12px; top: 16px; width: 22px; height: 15px; border: 1.6px solid var(--teal-deep); }
.ico-two::after { left: 20px; top: 24px; width: 22px; height: 15px; border: 1.6px solid var(--teal-deep); background: var(--bone-deep); }
/* a clock */
.ico-clock::before { left: 15px; top: 14px; width: 25px; height: 25px; border: 1.6px solid var(--teal-deep); border-radius: 50%; }
.ico-clock::after { left: 26px; top: 20px; width: 1.6px; height: 8px; background: var(--teal-deep); }
.step-n { font-family: var(--mono); font-size: 13px; letter-spacing: .18em; color: var(--cedar-deep); margin: 0 0 6px; }
.step-h { font-family: var(--disp); font-weight: 800; font-size: 1.08rem; letter-spacing: -.015em; color: var(--ink); margin: 0 0 6px; }
.step-t { margin: 0; font-size: 16.5px; color: rgba(0, 34, 48, .82); }

/* ==========================================================================
   14. #sip / 15. #vapes — column and row headers
   ========================================================================== */
.sip-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 62px); }
.sip-k, .dark-k {
  font-family: var(--mono); font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cedar-deep); margin: 0 0 16px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(184, 134, 91, .45);
}
.dark-k { color: var(--sage); border-bottom-color: rgba(150, 186, 199, .3); }
.sip-go { margin: 18px 0 0; }
.dark-row + .dark-row { margin-top: clamp(24px, 3vw, 40px); }

/* ==========================================================================
   18. #zones — the five-column neighbourhood index
   ========================================================================== */
.zones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 40px); margin-top: clamp(26px, 3.2vw, 44px); }
.zone { border-top: 1px solid rgba(150, 186, 199, .38); padding-top: 16px; }
.zone h3 { font-family: var(--disp); font-weight: 800; font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--bone); margin: 0 0 3px; letter-spacing: -.02em; }
.zone-n { font-family: var(--mono); font-size: 13px; letter-spacing: .16em; color: var(--sage); margin: 0 0 14px; }
.zone ul { list-style: none; margin: 0; padding: 0; }
.zone li { font-size: 15px; line-height: 1.62; color: rgba(244, 239, 228, .84); }

/* ==========================================================================
   19. #faq — eight practical questions, two columns
   ========================================================================== */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(34px, 5vw, 78px); border-top: 1px solid rgba(184, 134, 91, .45); margin-top: clamp(24px, 3vw, 40px); }
.faq-item { padding: clamp(18px, 2.2vw, 28px) 0; border-bottom: 1px solid rgba(184, 134, 91, .45); }
.faq-q { font-family: var(--disp); font-weight: 800; font-size: clamp(1.05rem, 1.5vw, 1.28rem); color: var(--ink); letter-spacing: -.015em; margin: 0 0 8px; }
.faq-a { margin: 0; font-size: 16.5px; color: rgba(0, 34, 48, .84); }
.sec-ink .faq, .sec-ink .faq-item { border-color: rgba(150, 186, 199, .3); }
.sec-ink .faq-q { color: var(--bone); }
.sec-ink .faq-a { color: rgba(244, 239, 228, .82); }

/* ==========================================================================
   20. #glossary — build 01's seven terms with a mono index letter
   ========================================================================== */
.gloss-item dt { display: flex; align-items: baseline; gap: 12px; }
.gloss-x { font-family: var(--mono); font-weight: 400; font-size: 13px; letter-spacing: .16em; color: var(--cedar-deep); flex: none; }

/* ==========================================================================
   21. #list — the fill-in-the-line form, now on teal
   ========================================================================== */
.sec-teal .say { color: var(--bone); }
.sec-teal .say input, .sec-teal .say select { color: var(--bone); border-bottom-color: rgba(244, 239, 228, .55); }
.sec-teal .say input::placeholder { color: rgba(244, 239, 228, .55); }
.sec-teal .say select option { color: var(--ink); }
.sec-teal .blank-store::after { color: var(--bone); }
/* build-06 fix pass: cedar on this section's teal background measured
   2.21:1 — below the 3:1 UI-component floor and less visible than the
   unfocused resting border. Bone on teal is an already-validated pair
   (6.14:1, FACTS.md) and reads clearly as the field's only focus signal
   since `.say input:focus` (above) sets outline:none. */
.sec-teal .say input:focus, .sec-teal .say select:focus { border-bottom-color: var(--bone); }
.sec-teal .check { color: rgba(244, 239, 228, .92); }
.sec-teal .check input { accent-color: var(--cedar); }
.sec-teal .form-note, .sec-teal .list-sub { color: rgba(244, 239, 228, .8); }
.sec-teal .form-msg { color: var(--bone); }
.sec-teal .btn-teal { background: var(--bone); color: var(--ink); }
.sec-teal .btn-teal:hover { background: var(--cedar); color: var(--bone); }

/* ==========================================================================
   22. #social — the Instagram band (links only; no feed, no people)
   ========================================================================== */
.social-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.social-handle { font-family: var(--disp); font-weight: 800; font-size: clamp(1.8rem, 4vw, 3.2rem); letter-spacing: -.035em; color: var(--teal-deep); margin: 0; text-decoration: none; display: inline-block; }
.social-handle:hover { color: var(--cedar-deep); }
.social-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.social-tile {
  aspect-ratio: 1 / 1; background: var(--bone); border: 1px solid rgba(184, 134, 91, .38);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none; padding: 14px; text-align: center;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.social-tile:hover { background: var(--bone-deep); border-color: var(--cedar); transform: translateY(-3px); }
.social-tile img { width: 42%; max-width: 60px; opacity: .82; }
.social-tile span { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep); }
.social-links { display: flex; gap: 20px; flex-wrap: wrap; margin-top: clamp(20px, 2.4vw, 30px); }

/* ==========================================================================
   25. #signoff — the lockup sign-off band
   ========================================================================== */
#signoff { padding-top: clamp(52px, 6vw, 96px); padding-bottom: clamp(52px, 6vw, 96px); }
.signoff-in { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: clamp(30px, 5vw, 84px); align-items: center; }
.signoff-in .lockup { width: 100%; height: auto; display: block; }
.signoff-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 46px); }
.signoff-cols h3 { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--sage); margin-bottom: 12px; }
.signoff-cols address, .signoff-cols p, .signoff-cols ul { font-style: normal; font-size: 15.5px; line-height: 1.75; margin: 0; }
.signoff-cols ul { list-style: none; padding: 0; }
.signoff-cols a { color: rgba(244, 239, 228, .86); text-decoration: none; border-bottom: 1px solid rgba(150, 186, 199, .34); }
.signoff-cols a:hover { color: var(--bone); border-color: var(--cedar); }

/* ==========================================================================
   THE ORDER PAGE — build 02
   ========================================================================== */
#order-hero { position: relative; overflow: hidden; }
.order-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 252px); gap: clamp(24px, 4vw, 60px); align-items: center; }
.order-hero-in .lockup { width: 100%; height: auto; display: block; }
.rules-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 48px); margin-top: clamp(26px, 3.2vw, 44px); }
.rule-card { border-top: 2px solid var(--cedar); padding-top: clamp(16px, 2vw, 24px); }
.rule-card h3 { font-family: var(--disp); font-weight: 800; font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: var(--bone); margin-bottom: 10px; }
.rule-card p { font-size: 16px; line-height: 1.7; margin: 0 0 8px; color: rgba(244, 239, 228, .84); }
.cat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(20px, 2.4vw, 34px); }
.cat-head h2 { font-size: clamp(1.7rem, 3.1vw, 2.7rem); }
.cat-head .eyebrow { margin-bottom: 10px; }
.cat-go { display: flex; gap: 18px; flex-wrap: wrap; }

/* ==========================================================================
   narrower screens — build 02
   ========================================================================== */
@media (max-width: 1180px) {
  .tile-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dark-set { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .row-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .social-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .hero-in { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 34px); }
  .hero-lockup .lockup { max-width: 300px; }
  .cur-grid { grid-template-columns: 1fr; }
  .signoff-in { grid-template-columns: 1fr; }
  .signoff-in .lockup { max-width: 296px; }
  .order-hero-in { grid-template-columns: 1fr; }
  .order-hero-in .lockup { max-width: 216px; }
  .rules-grid { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .grid-12 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .head-3 { grid-template-columns: 1fr; align-items: start; }
  .fmt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signoff-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .how-2 { grid-template-columns: 1fr; }
  .sip-cols { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar { grid-template-columns: 1fr; gap: 8px; }
  #hero { min-height: 0; }
  .hero-in { display: block; }
  .hero-lockup { margin-bottom: 26px; }
}

@media (max-width: 760px) {
  :root { --shelf-w: 196px; }
  .grid-12, .tall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dark-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sip-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats .stat:last-child { grid-column: span 2; }
  .signoff-cols { grid-template-columns: 1fr; }
  .fmt { min-height: 208px; }
  .pc--ledger { flex-wrap: wrap; }
  .pc--ledger .pc-txt { flex-direction: column; align-items: flex-start; gap: 3px; }
  .pc--ledger .pc-brand, .pc--ledger .pc-name { flex: 0 0 auto; }
  .pc--ledger .pc-foot { flex: 1 1 100%; justify-content: space-between; margin-top: 8px; }
  .cur-shot { max-width: 78%; }
  .cur-shot img { aspect-ratio: 460 / 691; }
}

@media (max-width: 460px) {
  .fmt-grid { grid-template-columns: 1fr; }
  .zones { grid-template-columns: 1fr; }
  #hero h1 { font-size: clamp(2.5rem, 11.5vw, 3.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .pc:hover .pc-shot img, .fmt:hover .fmt-i1, .fmt:hover .fmt-i2, .fmt:hover .fmt-i3 { transform: none; }
}

/* ---------- build 02: patches ------------------------------------------- */
/* the light card forms sit on bone and bone-deep grounds, so their own ground
   is cream — a card the same colour as the page is not a card */
.pc--grid, .pc--row, .pc--tile { background: var(--cream); }
.pc--tile:hover, .pc--grid:hover, .pc--row:hover { background: var(--bone); }

/* the hero photograph is oversized so it has somewhere to travel on scroll */
.hero-photo { top: -7%; bottom: auto; height: 114%; }

/* the order page's pickup steps run across, not down — the homepage's #how
   already owns the two-column stack */
.steps-dark { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); }
.steps-dark .step, .steps-dark .step:last-child { border-color: rgba(150, 186, 199, .3); }
.steps-dark .step-ico { border-color: rgba(150, 186, 199, .45); }
.steps-dark .step-ico::before, .steps-dark .step-ico::after { border-color: var(--sage); }
.steps-dark .ico-door::after, .steps-dark .ico-screen::after, .steps-dark .ico-clock::after { background: var(--sage); }
.steps-dark .ico-two::after { background: var(--teal-deep); }
.steps-dark .step-n { color: var(--cedar); }
.steps-dark .step-h { color: var(--bone); }
.steps-dark .step-t { color: rgba(244, 239, 228, .82); }

/* the order page's delivery steps: three numbered columns on cedar rules */
.how-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(20px, 2.4vw, 32px); }
.hstep { border-top: 2px solid var(--cedar); padding-top: clamp(16px, 2vw, 24px); }
.hstep-n { font-family: var(--disp); font-weight: 800; font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1; letter-spacing: -.045em; color: var(--cedar-deep); margin: 0 0 12px; }
.hstep-h { font-family: var(--disp); font-weight: 800; font-size: clamp(1.05rem, 1.5vw, 1.3rem); letter-spacing: -.015em; color: var(--ink); margin: 0 0 8px; }
.hstep-t { margin: 0; font-size: 16.5px; line-height: 1.62; color: rgba(0, 34, 48, .82); }

/* the ID-and-payment cards, on a light ground */
.rules-light .rule-card h3 { color: var(--ink); }
.rules-light .rule-card p { color: rgba(0, 34, 48, .84); }

/* 16 Sep — Ajay: "there are lines above and below the right option but not
   below the left and middle." `.step:last-child` closes the list with a bottom
   rule, which is right when the steps stack one per row but wrong when .how-3
   lays them out three across: there the "last child" is simply the right-hand
   column, so only that column got underlined. Side by side, the top rules are
   the whole device; the closing rule comes back when they stack. */
.how-3 > .step:last-child { border-bottom: 0; }

@media (max-width: 900px) {
  .steps-dark, .how-3 { grid-template-columns: 1fr; }
  .steps-dark .step:not(:last-child) { border-bottom: 0; }
  .how-3 > .step:last-child { border-bottom: 1px solid rgba(184, 134, 91, .45); }
}

/* ==========================================================================
   BUILD 02 — round two, from the 1440 / 390 captures
   ========================================================================== */

/* --- the hero photograph ----------------------------------------------------
   The frame is almost exactly the photograph's own aspect, so cover showed the
   whole picture — ceiling ducts and all. Scaling about a point low in the frame
   crops to the part that is worth looking at: the round cedar counter with its
   painted mountain mural, the cabinets and the forest wall. */
.hero-photo { top: 0; bottom: 0; height: 100%; transform: scale(1.06); transform-origin: 50% 70%; }

/* --- no cropped photographs -------------------------------------------------
   On phones the hero photograph becomes a full-frame strip above the copy
   instead of a background that loses most of its width; the interior band
   keeps a 16:10 frame; product photographs are always contained. */
@media (max-width: 640px) {
  #hero { min-height: auto; display: block; padding-top: 0; }
  .hero-photo { position: relative; inset: auto; top: auto; bottom: auto; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 62%; transform: none; display: block; }
  #hero::after { display: none; }
  .hero-in { padding-top: 26px; }
  .band { aspect-ratio: 16 / 10; }
  .band-img { object-position: 50% 62%; }
}

/* --- the format tiles --------------------------------------------------------
   Every product photograph off the menu is cut out on white, so rotating three
   of them on a dark tile printed three white rectangles. The tile is now cream
   with the images multiplied into it — the white disappears into the paper —
   and the caption sits in a solid teal-ink bar rather than a gradient. */
.fmt {
  background: var(--cream); border: 1px solid rgba(184, 134, 91, .34);
  padding: 0; min-height: 0; justify-content: flex-end;
}
.fmt::after { content: none; }
.fmt-collage {
  position: relative; inset: auto; width: 100%;
  height: clamp(168px, 16.5vw, 234px); overflow: hidden;
}
.fmt-i { mix-blend-mode: multiply; }
.fmt-i1 { left: 2%; top: 5%; width: 40%; transform: rotate(-7deg); }
.fmt-i2 { right: 2%; top: 1%; width: 36%; transform: rotate(8deg); }
.fmt-i3 { left: 31%; top: 20%; width: 39%; transform: rotate(-2deg); }
.fmt-panel {
  position: relative; z-index: 2; background: var(--ink);
  padding: clamp(15px, 1.7vw, 22px);
}
.fmt:hover { box-shadow: 0 26px 40px -30px rgba(0, 48, 63, .6); }

/* --- the neighbourhood index -------------------------------------------------
   Burnaby has 33 names against North Vancouver's 8, so it takes two columns and
   sets its own list in two — the block reads as one page, not one long spike. */
.zones { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.zone--wide { grid-column: span 2; }
.zone--wide ul { columns: 2; column-gap: clamp(16px, 2vw, 32px); }

/* --- the contour ghost behind the compliance strip --------------------------
   at .2 the lines read as strikethrough across the mono type */
.notice-ghost { opacity: .12; }

/* --- the Instagram band ------------------------------------------------------
   Six identical mark tiles read as placeholders. They are a typographic wall
   now: alternating grounds, each tile carrying a real piece of the store. */
.social-tile {
  aspect-ratio: 1 / 1; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: space-between; text-align: left;
  gap: 10px; padding: clamp(14px, 1.6vw, 20px);
  border: 1px solid rgba(184, 134, 91, .38); text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.social-tile:hover { transform: translateY(-4px); box-shadow: 0 22px 32px -26px rgba(0, 48, 63, .5); }
.st-k { font-family: var(--mono); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; }
.st-b {
  font-family: var(--disp); font-weight: 800; line-height: 1.02; letter-spacing: -.03em;
  font-size: clamp(1.02rem, 1.6vw, 1.42rem);
}
.st-y, .st-arrow { font-family: var(--disp); font-weight: 800; line-height: .82; letter-spacing: -.05em; font-size: clamp(1.9rem, 3.2vw, 2.9rem); }
.social-tile .st-mark { width: clamp(40px, 4.2vw, 58px); height: auto; max-width: none; opacity: .9; }
.st--ink { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.st--ink .st-k { color: var(--sage); }
.st--teal { background: var(--teal); border-color: var(--teal); color: var(--bone); }
.st--teal .st-k { color: rgba(244, 239, 228, .74); }
.st--cedar { background: var(--cedar-deep); border-color: var(--cedar-deep); color: var(--bone); }
.st--cedar .st-k { color: rgba(244, 239, 228, .76); }
.st--bone { background: var(--bone); color: var(--ink); }
.st--bone:hover { background: var(--bone-deep); }
.st--bone .st-k { color: var(--cedar-deep); }

@media (max-width: 1180px) {
  .zones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zone--wide { grid-column: span 2; }
}
@media (max-width: 460px) {
  .zones { grid-template-columns: 1fr; }
  .zone--wide { grid-column: span 1; }
  .zone--wide ul { columns: 2; }
}

/* --- round three -------------------------------------------------------- */
/* every in-page link (#formats, #delivery, #glossary, #visit …) must land
   clear of the sticky header */
main > section { scroll-margin-top: calc(var(--head-h) + 10px); }

/* the Instagram tiles: .social-tile span was still winning on font-size */
.social-tile .st-k { font-family: var(--mono); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; }
.social-tile .st-b {
  font-family: var(--disp); font-weight: 800; text-transform: none; letter-spacing: -.03em;
  font-size: clamp(1.02rem, 1.6vw, 1.42rem); line-height: 1.04;
}
.social-tile .st-y, .social-tile .st-arrow {
  font-family: var(--disp); font-weight: 800; text-transform: none; letter-spacing: -.05em;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: .82;
}
.st--cedar { background: var(--cedar); border-color: var(--cedar); color: var(--ink); }
.st--cedar .st-k { color: rgba(0, 34, 48, .74); }
/* .social-tile span paints teal-deep, which on the teal and ink tiles is 1.5:1
   — the Robson tile's only content is an address nobody could read. A bone
   watermark keeps the tonal idea and puts all six tiles on one level. */
.st--teal .st-b { color: rgba(244, 239, 228, .66); }   /* 3.21:1 on teal  */
.st--ink .st-b, .st--ink .st-arrow { color: rgba(244, 239, 228, .40); }  /* 3.27:1 on ink */
.st--cedar .st-b { color: rgba(0, 34, 48, .74); }   /* 3.28:1 on cedar */

/* the contour ghost behind the compliance strip is texture, not a rule */
.notice-ghost { opacity: .07; }


/* ==========================================================================
   BUILD 02 — round four
   The dead band under the picks shelf, the walled grids that painted their own
   empty cells, the three identical rule-columns on the order page, and the
   flatness: one named scroll idea (the ridge line) plus the four small motions
   that hang off it.
   ========================================================================== */

/* --- walled grids may not paint an empty cell ----------------------------
   .tile-wall carried the cedar ground and the outer hairline, so a row that
   did not fill printed a solid tan rectangle where the missing cards were.
   The ground and the hairline belong to the card. */
.tile-wall { background: transparent; border: 0; gap: 1px; }
.pc--tile { background: var(--cream); outline: 1px solid rgba(184, 134, 91, .34); }
.pc--tile:hover { background: var(--bone); outline-color: var(--cedar); }

/* --- the ridge line ------------------------------------------------------
   The client's own contour drawing, run down the left gutter for the length of
   the page: one path, scrubbed open against document scroll, with a dot that
   rides it and a mono readout that names the band you are standing in. */
.ridge { display: none; }
.ridge-chip { display: none; }

@media (min-width: 1200px) {
  .ridge {
    display: block; position: fixed; left: 0; top: 0; width: 46px; height: 100vh;
    z-index: 2; pointer-events: none;
  }
  .ridge svg { display: block; width: 100%; height: 100%; }
  .ridge .rl-base { fill: none; stroke: rgba(184, 134, 91, .18); stroke-width: 2; vector-effect: non-scaling-stroke; }
  .ridge .rl-draw { fill: none; stroke: var(--cedar); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .ridge-rider {
    position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%;
    background: var(--cedar); box-shadow: 0 0 0 4px rgba(184, 134, 91, .18);
  }
  .ridge-chip {
    display: flex; justify-content: center; align-items: center;
    position: fixed; left: 0; top: 50%; width: 46px; height: 0;
    z-index: 3; pointer-events: none;
  }
  .ridge-chip span {
    writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
    font-family: var(--mono); font-size: 12.5px; letter-spacing: .24em; text-transform: uppercase;
    /* the span carries opacity .9, so .8 alpha composites to ~5.6:1 of ink on
       the #EEE7D8 ground build 04 introduced. Cedar was 2.58:1 there. */
    color: rgba(0, 34, 48, .8); opacity: .9; transition: opacity .3s ease;
  }
  html[data-band-dark] .ridge-chip span { color: var(--cedar); }
}

/* --- the display headings that draw open on scroll ----------------------- */
h2[data-line] { will-change: clip-path; }

/* --- the pre-roll tiles tilt under a real pointer ------------------------ */
@media (pointer: fine) {
  .tile-wall .pc--tile { transform-style: preserve-3d; will-change: transform; }
  .tile-wall .pc--tile::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%),
      rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 62%);
    transition: opacity .3s ease;
  }
  .tile-wall .pc--tile:hover::after { opacity: 1; }
}

/* --- the order page's delivery journey ----------------------------------
   #pickup, #deliver and #rules were three printings of the same
   rule-topped-column block. Pickup keeps the steps; delivery becomes a line
   drawn left to right with three stops on it; the rules become a ledger. */
.journey { position: relative; margin-top: clamp(30px, 3.6vw, 48px); }
.journey-ghost {
  position: absolute; left: -4%; right: -4%; top: 50%; height: 260px;
  transform: translateY(-50%); opacity: .07; pointer-events: none; overflow: hidden;
}
.journey-ghost svg { width: 100%; height: 100%; display: block; }
.jstops {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 54px);
}
.jstops::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, rgba(184, 134, 91, 0) 0%, var(--cedar) 7%, var(--cedar) 93%, rgba(184, 134, 91, 0) 100%);
}
.jstop {
  position: relative; display: grid; grid-template-rows: 1fr auto 1fr;
  min-height: clamp(190px, 19vw, 236px); justify-items: start;
}
.jtop { align-self: end; padding-bottom: clamp(12px, 1.4vw, 18px); }
.jbot { align-self: start; padding-top: clamp(12px, 1.4vw, 18px); }
.jdot {
  width: 13px; height: 13px; border-radius: 50%; background: var(--bone);
  border: 2px solid var(--cedar); position: relative; z-index: 1;
  box-shadow: 0 0 0 6px var(--bone);
}
.jstop-n {
  font-family: var(--mono); font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cedar-deep); margin: 0 0 7px;
}
.jstop-h {
  font-family: var(--disp); font-weight: 800; letter-spacing: -.02em; line-height: 1.06;
  font-size: clamp(1.15rem, 1.9vw, 1.65rem); color: var(--ink); margin: 0;
}
.jstop-t { margin: 0; font-size: 16px; line-height: 1.66; color: rgba(0, 34, 48, .8); max-width: 34ch; }

/* --- the ID and payment ledger ------------------------------------------ */
.rule-ledger { margin: clamp(24px, 3vw, 40px) 0 0; border-top: 2px solid var(--cedar); }
.rule-ledger > div {
  display: grid; grid-template-columns: minmax(0, .34fr) minmax(0, 1fr);
  gap: 6px clamp(18px, 3.4vw, 60px);
  padding: clamp(16px, 2vw, 26px) 0; border-bottom: 1px solid rgba(184, 134, 91, .32);
}
.rule-ledger dt {
  font-family: var(--mono); font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cedar-deep); line-height: 1.6;
}
.rule-ledger dd { margin: 0; font-size: 16.5px; line-height: 1.68; color: rgba(0, 34, 48, .84); }
.rule-ledger dd + dd { margin-top: 8px; }
/* BUILD 05 fix: the ledger was written for a cream panel, but /faq#rules sits
   on sec-ink. The 19+/two-pieces-of-ID/payment copy is legally load-bearing,
   so it gets bone on teal rather than ink on teal. */
.sec-ink .rule-ledger { border-top-color: rgba(184, 134, 91, .7); }
.sec-ink .rule-ledger > div { border-bottom-color: rgba(244, 239, 228, .22); }
.sec-ink .rule-ledger dt { color: rgba(244, 239, 228, .74); }
.sec-ink .rule-ledger dd { color: rgba(244, 239, 228, .92); }

/* --- the order page's section heads, so ten strips do not share one ------- */
.cat-head--stack { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); align-items: end; }
.cat-head--stack .cat-go { flex-direction: column; gap: 9px; align-items: flex-start; }
.cat-head--count .cat-count {
  font-family: var(--mono); font-size: 14.5px; letter-spacing: .05em; line-height: 1.8;
  color: rgba(0, 34, 48, .7); margin: 0; text-align: right; max-width: 30ch;
}
.sec-ink .cat-head--count .cat-count { color: rgba(244, 239, 228, .7); }
.cat-head--solo .cat-go { gap: 0; }

@media (max-width: 1080px) {
  .flower-split, .top-two { grid-template-columns: 1fr; }
  .pc--lead .pc-shot { aspect-ratio: 1 / 1; }
}
@media (max-width: 900px) {
  .jstops { grid-template-columns: 1fr; row-gap: clamp(22px, 4vw, 34px); }
  .jstops::before { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; margin: 0;
    background: linear-gradient(180deg, rgba(184, 134, 91, 0) 0%, var(--cedar) 7%, var(--cedar) 93%, rgba(184, 134, 91, 0) 100%); }
  .jstop { grid-template-rows: auto auto auto; min-height: 0; padding-left: 32px; }
  .jdot { position: absolute; left: -32px; top: 4px; }
  .jtop, .jbot { align-self: start; padding: 0; }
  .jbot { padding-top: 8px; }
  .journey-ghost { display: none; }
  .cat-head--stack { grid-template-columns: 1fr; }
  .rule-ledger > div { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .board-k { display: none; }
  .pc--menu .pc-txt { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); }
  .pc--menu .pc-name { grid-column: 1 / -1; order: -1; }
  .pc--menu .pc-foot { justify-content: space-between; }
  .top-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seed-rack .pc--row { flex: 1 1 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .ridge, .ridge-chip { display: none; }
  .pc--can:hover .pc-shot img { transform: none; }
}

/* --- round four, continued: the pieces the new markup needs -------------- */
.ridge-chip { margin: 0; }
.journey-ghost .wc-ghost { stroke: var(--cedar-deep); stroke-width: 1.5; }

.top-say .lede { margin: 0 0 clamp(14px, 1.8vw, 22px); max-width: 34ch; }
.top-say .body-copy {
  margin: 0 0 clamp(16px, 2vw, 26px); max-width: 38ch;
  font-size: 16px; line-height: 1.72; color: rgba(0, 34, 48, .78);
}
.cat-go--col { flex-direction: column; gap: 9px; align-items: flex-start; }

/* the cold case sits on cream, so the shelf line reads and the cans multiply
   into the paper instead of printing a white box each */
#bev .cat-head { align-items: center; }

/* --- round four, the second pass over the captures ---------------------- */

/* a second dd in a ledger row belongs beside the term, not under it */
.rule-ledger dd { grid-column: 2; }

/* the seed rack: four across, and a short last row grows only to thirds so a
   category of seven cannot print two enormous cards */
.seed-rack .pc--row { flex: 1 1 calc(25% - 15px); max-width: calc(33.333% - 14px); }
@media (max-width: 1180px) {
  .seed-rack .pc--row { flex-basis: calc(33.333% - 14px); max-width: calc(50% - 10px); }
}
@media (max-width: 760px) {
  .seed-rack .pc--row { flex-basis: calc(50% - 10px); max-width: 100%; }
}

/* sip and chew is four and four; squarer shots bring the second row up to
   where it can be seen rather than leaving it a screen below the fold */
.sip-set .pc--tall .pc-shot { aspect-ratio: 1 / 1; }


/* --- round four, third pass: what the 390 captures showed ---------------- */

/* a price and its link must never run out of the card they sit in */
.pc-foot { flex-wrap: wrap; }
@media (max-width: 760px) {
  .pc--tall .pc-foot, .pc--grid .pc-foot, .pc--lead .pc-foot {
    flex-direction: column; align-items: flex-start; gap: 5px;
  }
}

/* the journey turns vertical below 900: the stops read label-first whichever
   side of the line they sat on, and the dots sit ON the line, not off the
   left edge of the screen */
@media (max-width: 900px) {
  .jstop {
    display: flex; flex-direction: column; align-items: flex-start;
    padding-left: 30px; min-height: 0;
  }
  .jstop .jdot { position: absolute; left: 0; top: 4px; box-shadow: none; }
  .jstop:nth-child(2) .jtop { order: 2; }
  .jstop:nth-child(2) .jbot { order: 1; }
  .jtop, .jbot { align-self: stretch; padding: 0; }
  .jbot { padding-top: 8px; }
  /* a one-column ledger puts the rule under its term, not in a phantom
     second column */
  .rule-ledger dd { grid-column: 1; }
}

/* --- round four, fourth pass ------------------------------------------- */

/* "Knowledgeable" is wider than 200px at 2.1rem, so the pillar label ran into
   its own body copy */
.pillar { grid-template-columns: minmax(0, 252px) minmax(0, 1fr); }
.pillar-k { font-size: clamp(1.35rem, 2.2vw, 1.88rem); }

/* the order page's pickup steps run across, so the last one must not carry
   the closing rule the stacked homepage version needs */
@media (min-width: 901px) {
  .steps-dark .step:last-child { border-bottom: 0; }
}


/* ==========================================================================
   BUILD 03 — #glossary as a term ledger
   #faq above it is a two-column hairline question/answer list on a bone
   ground. The glossary was the same recipe with a small numeral bolted on,
   which is the one thing this build may not do twice in a row. It is now a
   full-width ledger on the deep-teal ground: one term to a line, the numeral
   promoted to a large cedar marginal figure in the left gutter so it rhymes
   with the #label marker index rather than with #faq.
   ========================================================================== */
.tlex-lede { max-width: 56ch; margin-bottom: clamp(26px, 3.4vw, 44px); }
.tlex { margin: 0; border-top: 1px solid rgba(184, 134, 91, .55); }
.tlex-row {
  display: grid;
  grid-template-columns: clamp(58px, 6vw, 96px) minmax(0, 1fr) minmax(0, 1.55fr);
  gap: 0 clamp(16px, 2.6vw, 40px);
  align-items: start;
  padding: clamp(20px, 2.5vw, 34px) 0;
  border-bottom: 1px solid rgba(184, 134, 91, .55);
}
.tlex-n {
  font-family: var(--mono); font-weight: 400;
  font-size: clamp(1.6rem, 3.1vw, 2.9rem); line-height: .9;
  letter-spacing: -.02em; color: var(--cedar);
  display: block; padding-top: .18em;
}
.tlex-t {
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(1.5rem, 3.1vw, 2.5rem); line-height: .96; letter-spacing: -.035em;
  color: var(--bone); margin: 0;
}
.tlex-d {
  margin: 0; font-family: var(--mono); font-size: 15.5px; line-height: 1.66;
  color: rgba(244, 239, 228, .85); padding-top: .35em;
}
@media (max-width: 860px) {
  .tlex-row { grid-template-columns: clamp(46px, 11vw, 66px) minmax(0, 1fr); gap: 0 14px; }
  .tlex-d { grid-column: 2; padding-top: 10px; font-size: 15px; }
}


/* ==========================================================================
   BUILD 03 — #vapes as a spec board (order.html)
   #prerolls above it keeps the 6-across card wall. This section is the
   opposite move: one cartridge photographed large against the ink ground and
   the rest of the shelf set as a mono ledger with copper hairlines, so the
   two neighbours share nothing but their type palette.
   ========================================================================== */
.vape-board { display: grid; gap: clamp(22px, 2.6vw, 38px); }
@media (min-width: 981px) {
  .vape-board { grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1.9fr); align-items: start; }
  .vape-board .vl-note { grid-column: 1 / -1; }
}

.vape-hero {
  display: grid; gap: 0; text-decoration: none; color: var(--bone);
  border: 1px solid rgba(184, 134, 91, .5); border-radius: 3px; overflow: hidden;
  background: rgba(244, 239, 228, .04);
  transition: border-color .18s ease, transform .18s ease;
}
.vape-hero:hover, .vape-hero:focus-visible { border-color: var(--cedar); transform: translateY(-2px); }
.vape-hero-shot { background: var(--bone); display: block; padding: clamp(18px, 2.4vw, 34px); }
.vape-hero-shot img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; }
.vape-hero-txt { display: block; padding: clamp(18px, 2.2vw, 28px); }
.vape-hero-k {
  display: block; font-family: var(--mono); font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sage); margin-bottom: 14px;
}
.vape-hero-b {
  display: block; font-family: var(--mono); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cedar); margin-bottom: 6px;
}
.vape-hero-n {
  display: block; font-family: var(--disp); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(1.35rem, 2.3vw, 1.95rem); line-height: 1.02; color: var(--bone);
}
.vape-hero-m {
  display: block; font-family: var(--mono); font-size: 14px; line-height: 1.6;
  color: rgba(244, 239, 228, .74); margin-top: 10px;
}
.vape-hero-f {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline;
  justify-content: space-between; margin-top: 16px;
  border-top: 1px solid rgba(184, 134, 91, .42); padding-top: 12px;
}
.vape-hero-p { font-family: var(--mono); font-size: 16px; color: var(--bone); }

.vape-ledger { min-width: 0; }
.vl-k, .vl-row {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.85fr) 92px 92px 74px 74px 58px;
  gap: 0 14px; align-items: center;
}
.vl-k {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--sage); padding: 0 0 10px; margin: 0;
  border-bottom: 1px solid rgba(184, 134, 91, .6);
}
.vl-k span:nth-child(n+3) { text-align: right; }
.vl-row {
  text-decoration: none; color: rgba(244, 239, 228, .92);
  padding: 13px 0; border-bottom: 1px solid rgba(184, 134, 91, .34);
  transition: background .15s ease, border-color .15s ease;
}
.vl-row:hover, .vl-row:focus-visible {
  background: rgba(184, 134, 91, .12); border-bottom-color: var(--cedar);
}
.vl-b {
  font-family: var(--mono); font-size: 13px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--cedar); overflow-wrap: anywhere;
}
.vl-n { font-size: 16.5px; font-weight: 600; line-height: 1.24; overflow-wrap: anywhere; }
.vl-f, .vl-t, .vl-z, .vl-p {
  font-family: var(--mono); font-size: 14px; text-align: right; color: rgba(244, 239, 228, .78);
  overflow-wrap: anywhere;
}
.vl-p { color: var(--bone); }
.vl-go {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  text-align: right; color: var(--sage);
}
.vl-row:hover .vl-go { color: var(--cedar); }
.vl-note {
  font-family: var(--mono); font-size: 14px; line-height: 1.6;
  color: rgba(244, 239, 228, .6); margin: 18px 0 0; max-width: 72ch;
}
@media (max-width: 980px) {
  .vl-k { display: none; }
  .vl-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px; padding: 14px 0;
  }
  .vl-b { grid-column: 1; }
  .vl-p { grid-column: 2; grid-row: 1; font-size: 15.5px; }
  .vl-n { grid-column: 1 / -1; }
  .vl-f, .vl-t, .vl-z { grid-column: auto; text-align: left; font-size: 13.5px; }
  .vl-f { grid-column: 1 / -1; }
  .vl-t, .vl-z { display: inline; }
  .vl-go { display: none; }
}

/* ==========================================================================
   BUILD 03 — #conc as a format menu board + a topicals inset (order.html)
   #edibles above it keeps the two-column card block. Here the six extract
   formats are set as display words on a cream ground, one to a line, each
   opening on the listings that answer to it.
   ========================================================================== */
.fmtb { border-top: 1px solid rgba(184, 134, 91, .55); }
.fmtb-row { border-bottom: 1px solid rgba(184, 134, 91, .55); }
.fmtb-sum {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
  gap: 8px clamp(16px, 2.4vw, 40px); align-items: center;
  padding: clamp(16px, 2vw, 26px) 0; cursor: pointer; list-style: none;
}
.fmtb-sum::-webkit-details-marker { display: none; }
.fmtb-sum:hover .fmtb-w { color: var(--cedar-deep); }
.fmtb-row[open] .fmtb-w { color: var(--cedar-deep); }
.fmtb-w {
  font-family: var(--disp); font-weight: 800; letter-spacing: -.035em;
  font-size: clamp(1.6rem, 3.3vw, 2.6rem); line-height: .96; color: var(--ink);
  transition: color .15s ease;
}
.fmtb-note { font-size: 16px; line-height: 1.58; color: rgba(0, 34, 48, .78); margin: 0; }
.fmtb-fig { display: grid; justify-items: end; gap: 2px; text-align: right; white-space: nowrap; }
.fmtb-fig b {
  font-family: var(--mono); font-weight: 400; font-size: 20px; color: var(--teal-deep);
}
.fmtb-fig b::after { content: " pulled"; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
.fmtb-fig i {
  font-style: normal; font-family: var(--mono); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cedar-deep);
}
.fmtb-row::after {
  content: ""; display: block;
}
.fmtb-list { padding: 4px 0 clamp(18px, 2vw, 26px); display: grid; gap: 6px; }
.fmtb-foot {
  font-family: var(--mono); font-size: 14px; line-height: 1.7;
  color: rgba(0, 34, 48, .68); margin: 18px 0 clamp(34px, 4.4vw, 62px); max-width: 78ch;
}
@media (max-width: 860px) {
  .fmtb-sum { grid-template-columns: minmax(0, 1fr) auto; }
  .fmtb-note { grid-column: 1 / -1; order: 3; }
  .fmtb-fig { align-self: start; }
}

.top-inset {
  display: grid; gap: clamp(20px, 2.6vw, 40px); align-items: center;
  background: var(--bone); border: 1px solid rgba(184, 134, 91, .45); border-radius: 3px;
  padding: clamp(20px, 2.6vw, 36px);
}
@media (min-width: 861px) { .top-inset { grid-template-columns: minmax(200px, .7fr) minmax(0, 1.6fr); } }
.top-shot { display: block; background: #fff; border-radius: 3px; padding: 18px; }
.top-shot img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; }
.top-body h3 {
  font-family: var(--disp); font-weight: 800; letter-spacing: -.035em;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1; margin: 6px 0 10px; color: var(--ink);
}
.top-lede { font-size: 16.5px; color: rgba(0, 34, 48, .8); margin: 0 0 16px; max-width: 54ch; }
.top-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(184, 134, 91, .45); }
.top-list a {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
  gap: 4px 16px; align-items: baseline; text-decoration: none; color: var(--ink);
  padding: 11px 0; border-bottom: 1px solid rgba(184, 134, 91, .45);
}
.top-list a:hover { background: rgba(184, 134, 91, .1); }
.top-list b { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.top-list span {
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em;
  color: rgba(0, 34, 48, .64); overflow-wrap: anywhere;
}
.top-list em {
  font-style: normal; font-family: var(--mono); font-size: 15px;
  color: var(--teal-deep); text-align: right;
}
.top-go { margin: 16px 0 0; font-family: var(--mono); font-size: 15px; }
@media (max-width: 600px) {
  .top-list a { grid-template-columns: minmax(0, 1fr) auto; }
  .top-list span { grid-column: 1; }
  .top-list em { grid-row: 1; grid-column: 2; }
  .top-list b { grid-column: 1; }
}

/* ==========================================================================
   BUILD 04 — "FRAMES AND MOTION"
   Ajay on build 03: the content sections stretched the screen and ran into one
   another, and the two locations read as one photograph. So: every section's
   content now sits in a framed panel on the bone ground, the two stores are two
   separate cards, and the page moves as you come down it. Everything below is
   additive — builds 01-03 keep their grounds, their type and their tools.
   ========================================================================== */

:root {
  --panel-gut: clamp(16px, 4.4vw, 80px);   /* bone left either side of a panel */
  --panel-gap: clamp(28px, 3.4vw, 56px);   /* bone between two panels */
  --panel-pad: clamp(40px, 3.6vw, 64px);   /* inside a panel */
  --panel-line: rgba(184, 134, 91, .40);
  --panel-r: 10px;
}

/* --- the panel rhythm ----------------------------------------------------
   Only the hero and the full-bleed interior band stay edge to edge. Every
   other section becomes an object sitting on bone: its own surface, a cedar
   hairline, a 10px radius and a gap of plain ground before the next one.
   No ID selectors here, so the ground classes (.sec-cream, .sec-ink ...) still
   win on background without having to be restated. */
main > .sec:not([id="hero"]):not([id="order-hero"]) {
  width: calc(100% - var(--panel-gut) * 2);
  max-width: 1280px;
  margin: 0 auto var(--panel-gap);
  padding: var(--panel-pad);
  border: 1px solid var(--panel-line);
  border-radius: var(--panel-r);
  box-shadow: 0 1px 0 rgba(0, 48, 63, .03), 0 24px 46px -38px rgba(0, 48, 63, .55);
}
/* a section with no ground class of its own paints bone, so it is a panel and
   not a hole in the page */
main > .sec:not([class*="sec-"]) { background-color: var(--bone); }
/* the ground the panels sit on is bone half a step darker — the shadow side of
   the same paper. Without it a bone panel on bone ground is separated by a
   hairline alone, which is exactly the flatness this build is fixing. The
   header, the hero, the band and the footer are untouched. */
main { background: #EEE7D8; }
/* the dark panels carry a quieter hairline than the light ones */
main > .sec.sec-ink, main > .sec.sec-teal, main > .sec.sec-teal-deep {
  border-color: rgba(184, 134, 91, .3);
}

/* the full-bleed pieces keep their own rhythm: a gap under them, nothing else */
main > #hero, main > #order-hero, main > .band { margin-bottom: var(--panel-gap); }
main > .band { border-radius: 0; }

/* the inner wrap is now the panel's own padding box */
main > .sec:not([id="hero"]):not([id="order-hero"]) > .wrap { max-width: 1180px; }

/* pieces that were sized against the viewport have to be sized against the
   panel now, or they push a scrollbar out of it */
.map-frame { width: 100%; max-width: 1180px; }
#stores { padding: var(--panel-pad); }
#notice { overflow: hidden; }
#deliver { overflow: hidden; }

@media (max-width: 900px) {
  :root { --panel-gut: 16px; --panel-gap: 28px; --panel-pad: clamp(22px, 5vw, 34px); --panel-r: 8px; }
}

/* --- 2. two doors, two places -------------------------------------------
   One card per store: the 4:3 storefront inside a rounded frame with its own
   hairline and a soft inner shadow, a mono tag over the frame's top-left, and
   the caption BELOW the photograph inside the card. Broadway is teal, Robson
   is cedar, and Robson hangs 48px lower so the pair never lines up into one
   continuous picture. Nothing else on either page uses this form. */
.two-stores {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  align-items: start;
  margin-top: clamp(26px, 3.2vw, 42px);
}
.scard {
  --acc: var(--teal);
  background: var(--cream);
  border: 1px solid rgba(184, 134, 91, .34);
  border-radius: 12px;
  padding: clamp(12px, 1.1vw, 16px);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.scard--rb { --acc: var(--cedar-deep); margin-top: 48px; }
.scard-frame {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  border: 1px solid rgba(184, 134, 91, .4);
  background: var(--bone-deep);
}
.scard-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
/* the soft inner shadow sits over the photograph, under the tag */
.scard-frame::after {
  content: ''; position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 48, 63, .07), inset 0 26px 44px -34px rgba(0, 48, 63, .9);
}
.scard-tag {
  position: absolute; z-index: 2; left: 12px; top: 12px; margin: 0;
  font-family: var(--mono); font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bone); background: var(--acc);
  padding: 7px 12px; border-radius: 3px;
}
.scard-cap { position: relative; padding: clamp(18px, 1.9vw, 26px) clamp(4px, .7vw, 10px) clamp(6px, .6vw, 10px); }
.scard-cap::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(184, 134, 91, .42);
}
/* hover draws the accent hairline left to right across the caption */
.scard-cap::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--acc); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.scard-cap h3 { margin: 16px 0 10px; }
.scard-cap address {
  font-style: normal; font-family: var(--mono); font-size: 15px; line-height: 1.75; color: var(--char);
}
.scard-cap address a { text-decoration: none; }
.scard-cap address a:hover { color: var(--teal-deep); }
.scard-svc {
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(0, 34, 48, .66); margin: 12px 0 0;
}
.scard-links { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; }
.scard--bw .scard-links .tlink { color: var(--teal); border-bottom-color: rgba(0, 96, 128, .45); }
.scard--rb .scard-links .tlink { color: var(--cedar-deep); border-bottom-color: rgba(122, 78, 45, .45); }

/* the distance between the two doors, standing in the gap between the cards */
.two-stores-gap {
  grid-column: 2; align-self: center; margin: 0;
  writing-mode: vertical-rl; transform: rotate(180deg);
  justify-self: center; white-space: nowrap;
  font-family: var(--mono); font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cedar-deep);
}

@media (pointer: fine) {
  .scard:hover {
    transform: translateY(-4px);
    border-color: var(--acc);
    box-shadow: 0 26px 44px -30px rgba(0, 48, 63, .5);
  }
  .scard:hover .scard-frame img { transform: scale(1.04); }
  .scard:hover .scard-cap::after { transform: scaleX(1); }
}

@media (max-width: 900px) {
  .two-stores { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .scard--rb { margin-top: 0; }
  .two-stores-gap {
    grid-column: 1; writing-mode: horizontal-tb; transform: none;
    padding: 24px 0; text-align: center;
  }
}

/* --- the panel entrance -------------------------------------------------
   js/site.js panels() fades each panel up as one object and then staggers its
   children. Nothing is hidden by CSS: with no GSAP, no JS or reduced motion the
   page reads exactly as it does now. */

/* --- cards lift under a real pointer ------------------------------------ */
@media (pointer: fine) {
  .pc:hover { transform: translateY(-4px); box-shadow: 0 22px 34px -26px rgba(0, 48, 63, .55); }
  .fmt { transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease; }
  .fmt:hover { transform: translateY(-4px); box-shadow: 0 22px 34px -26px rgba(0, 48, 63, .45); }
  .fmt-collage { transition: transform .45s cubic-bezier(.2,.7,.3,1); }
  .fmt:hover .fmt-collage { transform: scale(1.04); }
}

/* --- photographs breathe inside their frames ----------------------------
   The travel is made here, not by the tween: the photograph is 106 % of its
   frame and sits 3 % high, so js/site.js framedPhotos() only moves the window
   up and down inside it. Nothing is scaled and nothing new is cropped. */
[data-para] { overflow: hidden; }
[data-para] > img { top: -3%; height: 106%; }
.cur-frame {
  position: relative; aspect-ratio: 460 / 691; border-radius: 8px;
  border: 1px solid rgba(184, 134, 91, .4); background: var(--bone-deep);
}
.cur-frame img {
  position: absolute; left: 0; width: 100%; height: 100%;
  object-fit: cover; aspect-ratio: auto;
}

/* --- reduced motion: everything is simply there ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .scard, .scard-frame img, .scard-cap::after { transition: none; }
}

/* ==========================================================================
   BUILD 05 — "CONCISE"
   The client's 14 Sep changes: a short homepage, the tools moved into a
   sticky drawer, the locations moved into the footer, categories rebuilt as
   icon tiles with no photograph and no entrance animation.
   ========================================================================== */

/* ---------- the footer: this is where the locations live now -------------- */
.foot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 46px);
  align-items: start;
}
.foot-k {
  font-family: var(--mono); font-size: 13.5px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--sage); margin: 0 0 12px;
}
.foot-store address, .foot-areas p, .foot-nav a {
  font-style: normal; font-size: 16px; line-height: 1.75;
  color: rgba(244, 239, 228, .8);
}
.foot-store address a { color: rgba(244, 239, 228, .9); text-decoration: none; border-bottom: 1px solid rgba(184, 134, 91, .5); }
.foot-store address a:hover { color: var(--bone); border-color: var(--cedar); }
.foot-links { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; }
.foot-links .tlink { color: var(--sage); border-bottom-color: rgba(184, 134, 91, .45); align-self: flex-start; }
.foot-links .tlink:hover { color: var(--bone); }
.foot-areas-line a {
  color: rgba(244, 239, 228, .92); text-decoration: none;
  border-bottom: 1px solid rgba(184, 134, 91, .45);
}
.foot-areas-line a:hover { color: var(--bone); border-color: var(--cedar); }
.foot-areas-note { font-family: var(--mono); font-size: 13.5px; line-height: 1.7; color: rgba(244,239,228,.56); margin-top: 12px; }
.foot-nav { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.foot-nav a { font-family: var(--mono); font-size: 14.5px; text-decoration: none; border-bottom: 1px solid transparent; }
.foot-nav a:hover { color: var(--bone); border-color: var(--cedar); }

.foot-sign {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
  max-width: var(--maxw); margin: 0 auto;
}
.foot-lockup .lockup { width: 100%; height: auto; max-width: 280px; display: block; }
.foot-legal p { font-family: var(--mono); font-size: 13.5px; line-height: 1.85; color: rgba(244,239,228,.62); margin: 0; }
.foot-legal strong { color: rgba(244,239,228,.86); font-weight: 500; }
.foot-legal a { color: var(--sage); }
.foot-c { margin-top: 10px !important; color: rgba(244,239,228,.45) !important; }

@media (max-width: 980px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-sign { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; }
}

/* ---------- the sticky Find and compare button ---------------------------- */
.findbtn {
  position: fixed; z-index: 70;
  top: calc(var(--head-h) + 16px); right: clamp(14px, 2.4vw, 26px);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px; border: 1px solid var(--teal-deep); border-radius: 2px;
  background: var(--teal); color: var(--bone); cursor: pointer;
  font-family: var(--mono); font-size: 14px; letter-spacing: .13em; text-transform: uppercase;
  box-shadow: 0 10px 26px rgba(0, 48, 63, .26);
  transition: background .18s ease, transform .18s ease;
}
.findbtn:hover { background: var(--teal-deep); transform: translateY(-1px); }
.findbtn-ico svg { width: 17px; height: 17px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
html:not(.gate-done) .findbtn { display: none; }

/* BUILD 05 fix: above 1280 the layout has a right gutter for the top-right
   pill; below it the content column runs full width and the fixed button was
   landing on live copy and on one tappable link. Dock it bottom-right for the
   whole range, clear of the edge, and drop to an icon-only dot on phones. */
@media (max-width: 1279px) {
  .findbtn {
    top: auto; bottom: 18px; right: 18px;
    padding: 13px 18px; border-radius: 40px;
    box-shadow: 0 12px 30px rgba(0, 48, 63, .34);
  }
  /* the last band before the footer keeps a lane clear for the pill */
  #notice { padding-bottom: 96px; }
}
/* the labelled pill needs a lane of its own; below tablet it becomes a dot so
   it covers as little live copy as a fixed control can. */
@media (max-width: 860px) {
  .findbtn-t { display: none; }
  .findbtn { padding: 14px; border-radius: 50%; }
}

/* ---------- the drawer ---------------------------------------------------- */
.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer[hidden] { display: none !important; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(0, 48, 63, .5); }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  background: var(--bone);
  border-left: 3px solid var(--teal);
  display: flex; flex-direction: column;
  box-shadow: -18px 0 46px rgba(0, 48, 63, .22);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.22, .8, .24, 1);
}
.drawer.is-open .drawer-panel { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 22px 22px 16px;
  border-bottom: 1px solid rgba(184, 134, 91, .38);
}
.drawer-k { font-family: var(--mono); font-size: 13px; letter-spacing: .17em; text-transform: uppercase; color: var(--teal-deep); margin: 0 0 8px; }
.drawer-h { font-size: clamp(1.6rem, 4.4vw, 2rem); line-height: 1; letter-spacing: -.02em; }
.drawer-x {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(184, 134, 91, .5); background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.drawer-x svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.drawer-x:hover { border-color: var(--cedar-deep); background: var(--bone-deep); }

.drawer-tabs { display: flex; border-bottom: 1px solid rgba(184, 134, 91, .38); background: var(--bone-deep); }
.drawer-tab {
  flex: 1 1 0; min-width: 0;
  padding: 13px 6px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(0, 48, 63, .62); border-bottom: 2px solid transparent;
}
.drawer-tab.is-on { color: var(--teal-deep); border-bottom-color: var(--teal); background: var(--bone); }

.drawer-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 20px 22px 40px; }
.drawer-pan[hidden] { display: none !important; }
.drawer-pan:focus { outline: none; }
.drawer-lede { font-size: 15.5px; line-height: 1.6; color: rgba(0, 34, 48, .78); margin-bottom: 18px; }

/* the three tools, re-laid for a 420 px column */
.drawer .finder-card, .drawer .tool { padding: 16px; }
.drawer .finder-opts { grid-template-columns: 1fr !important; }
.drawer .finder-res { grid-template-columns: 1fr 1fr !important; }
.drawer .cmp-pickers { grid-template-columns: 1fr; gap: 12px; }
.drawer .ws-grid--drawer { display: grid; grid-template-columns: 1fr; gap: 16px; }
.drawer .cmp-heads, .drawer .cmp-row, .drawer .cmp-go { font-size: 14px; }
.drawer .combo-list { max-height: 210px; }

@media (max-width: 560px) {
  .drawer-panel { width: 100%; border-left: 0; border-top: 3px solid var(--teal); }
  .drawer-body { padding: 16px 16px 40px; }
}

/* ---------- #categories: icon tiles, no photograph, no entrance ----------- */
.cat-wrap[hidden] { display: none !important; }
.cat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
.cat-tile { grid-column: span 2; }
.cat-tile:nth-last-child(-n + 2) { grid-column: span 3; }
.cat-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: clamp(20px, 2.2vw, 30px);
  text-decoration: none; color: var(--ink);
  background: var(--bone);
  border: 1px solid rgba(184, 134, 91, .42);
  border-top: 2px solid var(--teal);
  border-radius: 3px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.cat-tile:hover, .cat-tile:focus-visible {
  transform: translateY(-4px);
  border-color: var(--cedar-deep); border-top-color: var(--cedar-deep);
  background: #FBF7EE;
}
.cat-ico { display: block; }
.cat-ico svg {
  width: clamp(40px, 3.6vw, 52px); height: clamp(40px, 3.6vw, 52px); display: block;
  fill: none; stroke: var(--teal); stroke-width: 1.35;
  stroke-linecap: round; stroke-linejoin: round;
}
.cat-tile:hover .cat-ico svg { stroke: var(--cedar-deep); }
.cat-name {
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(2.4rem, 2.9vw, 3rem); line-height: .95; letter-spacing: -.03em;
  overflow-wrap: anywhere;
}
.cat-n {
  font-family: var(--mono); font-size: 14px; letter-spacing: .1em;
  color: var(--teal-deep);
}
/* BUILD 05 fix: .cat-name is pinned at >= 2.4rem at every width (the client
   asked for large type), so the COLUMN COUNT gives way, never the type.
   "Concentrates" wants 237px of line at the 2.4rem floor, so a tile is never
   allowed below about 300px. Eight tiles on a six-column track = three, three,
   then two that split the last row, so the grid closes square instead of
   leaving an orphan. */
@media (max-width: 1160px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-tile, .cat-tile:nth-last-child(-n + 2) { grid-column: auto; }
}
@media (max-width: 760px) {
  .cat-grid { grid-template-columns: 1fr; }
  .cat-name { font-size: 2.4rem; }
}

/* ---------- the concise homepage's own furniture -------------------------- */
.why-3 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(26px, 3vw, 44px);
}
.why-line { border-top: 1px solid rgba(184, 134, 91, .45); padding-top: 18px; }
.why-k {
  font-family: var(--disp); font-weight: 800; font-size: clamp(1.5rem, 2.2vw, 2rem);
  letter-spacing: -.02em; margin: 0 0 10px;
}
.why-t { font-size: 16.5px; line-height: 1.6; color: rgba(0, 34, 48, .78); margin: 0; }
@media (max-width: 760px) { .why-3 { grid-template-columns: 1fr; } }

.deliv-areas {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none;
}
.deliv-areas li {
  font-family: var(--mono); font-size: 14.5px; letter-spacing: .06em;
  padding: 8px 14px; border: 1px solid rgba(184, 134, 91, .5); border-radius: 2px;
  color: var(--teal-deep); background: var(--bone);
}
.sec-ink .deliv-areas li { color: var(--sage); border-color: rgba(184, 134, 91, .45); background: transparent; }

/* ---------- the four new pages ------------------------------------------- */
.page-hero { padding-bottom: clamp(30px, 4vw, 54px); }
.page-hero h1 { font-size: clamp(2.6rem, 6.2vw, 5.2rem); max-width: 16ch; }
.page-hero .lede { margin-top: 20px; }
.story-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 54px); margin-top: clamp(24px, 3vw, 40px);
}
.story-cols p { font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.65; }
@media (max-width: 760px) { .story-cols { grid-template-columns: 1fr; } }

.contact-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 48px); margin-top: clamp(24px, 3vw, 40px);
}
@media (max-width: 860px) { .contact-cols { grid-template-columns: 1fr; } }
.contact-card {
  border: 1px solid rgba(184, 134, 91, .42); border-top: 2px solid var(--teal);
  border-radius: 3px; padding: clamp(20px, 2.4vw, 32px); background: var(--bone);
}
.contact-card h3 { margin-bottom: 14px; }
.contact-card address { font-style: normal; line-height: 1.8; font-size: 16.5px; }
.contact-card ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }

/* ---------- the Dutchie embed slot ---------------------------------------- */
.dutchie-wrap { min-height: 900px; }
.dutchie-wrap iframe { width: 100%; border: 0; display: block; }
.dutchie-note {
  font-family: var(--mono); font-size: 14px; letter-spacing: .05em;
  color: var(--teal-deep); margin-top: 18px;
}
.dutchie-fallback { font-family: var(--mono); font-size: 14.5px; color: var(--teal-deep); }

/* ==========================================================================
   BUILD 05 — crop corrections found by _qa/img-crop-audit
   Nothing on any page may lose more than a few per cent of its frame.
   ========================================================================== */
/* the hero's zoom overscanned nearly a tenth of the photograph off the edges */
.hero-photo { transform: none; }
@media (max-width: 640px) {
  /* the phone strip kept the photograph's own ratio instead of a 3:2 box, so
     nothing is trimmed off its sides */
  .hero-photo { aspect-ratio: 2760 / 1500; }
  .band { aspect-ratio: 2760 / 1500; }
}
/* the timeline's two storefronts are different shapes — one portrait, one
   landscape — so the frame contains them on the ink ground rather than
   cutting 40 % off the Robson shot to fill a portrait box */
.tl-shot { background: #041D27; }
.tl-shot img { object-fit: contain; object-position: 50% 50%; }

/* ---------- /contact: the two storefronts and getting here ----------------
   BUILD 05 fix. The contact page was three bands and the middle one restated
   the footer; these two are the page's own. */
.door-band {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(26px, 3vw, 44px);
}
.door { margin: 0; }
.door img {
  display: block; width: 100%; height: auto; border-radius: 3px;
  border: 1px solid rgba(184, 134, 91, .42);
}
.door figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 14px; }
.door-k {
  font-family: var(--mono); font-size: 13.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cedar);
}
.door-a { font-size: 16.5px; color: rgba(244, 239, 228, .82); }
.door-gap { display: flex; align-items: center; gap: clamp(10px, 2vw, 20px); margin: clamp(20px, 2.4vw, 32px) 0 0; }
.door-gap::before, .door-gap::after { content: ""; flex: 1 1 0; height: 1px; background: rgba(244, 239, 228, .26); }
.door-gap span {
  flex: 0 1 auto; font-family: var(--mono); font-size: 13.5px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(244, 239, 228, .72); text-align: center;
}

.here-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: clamp(26px, 3vw, 44px);
}
.here-card {
  padding: clamp(20px, 2.2vw, 30px);
  background: var(--bone);
  border: 1px solid rgba(184, 134, 91, .42);
  border-top: 2px solid var(--teal);
  border-radius: 3px;
}
.here-card--pay { border-top-color: var(--cedar-deep); }
.here-k {
  font-family: var(--mono); font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cedar-deep); margin: 0 0 10px;
}
.here-card h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.08; margin-bottom: 10px; }
.here-card p { font-size: 16.5px; }
.here-geo {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(184, 134, 91, .3);
  font-family: var(--mono); font-size: 14px; letter-spacing: .04em; line-height: 1.7;
  color: var(--teal-deep); overflow-wrap: anywhere;
}
.here-cta { margin: clamp(24px, 3vw, 40px) 0 0; }

@media (max-width: 980px) { .here-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .door-band { grid-template-columns: 1fr; }
  .here-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BUILD 07 — the eight Dutchie carousels, the two doors back on the
   homepage, and the contact form
   ========================================================================== */

/* --- 1. the carousels ---------------------------------------------------
   Dutchie's iframe prints white cards; bone next to it is a visible seam
   (BRIEF-HOME-07.md), so each panel is the near-white --cream ground with
   real padding around the mount — a mat, not a frameless drop of white on
   bone. The mount reserves the 485px the probe measured at 1280px wide so
   the page does not jump while the script loads; a panel that never answers
   is hidden by js/site.js (dutchieCarousels()), and if every panel in the
   chosen store's four fails, #carousels.is-empty hides the grid and heading,
   leaving only the one link to the menu. */
/* --- the three interior shots (#inside) ---------------------------------
   BUILD 07c fix: this section's markup shipped with NO styles at all —
   .trio and .trio-shot were never written — so three <figure>s stacked at
   their intrinsic widths, leaving one photo adrift against half a page of
   empty cream. Ajay rejected it on sight. Three equal columns, one shared
   frame ratio so the row reads as a set, captions beneath. The ratio is 4/5,
   chosen against the three sources (700x870, 1200x1600, 750x800) so the
   worst crop is about 15% — well inside the "never lose a third" rule. */
.trio {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(20px, 2.6vw, 34px);
}
.trio-shot { margin: 0; }
.trio-shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center;
  border-radius: var(--panel-r, 10px);
  border: 1px solid rgba(184, 134, 91, .34);
  background: var(--cream);
  transition: transform .5s var(--ease, ease);
}
.trio-shot figcaption {
  font-family: var(--mono); font-size: 14px; line-height: 1.6;
  letter-spacing: .02em; color: rgba(0, 48, 63, .66);
  margin-top: 12px; padding-left: 2px;
}
/* the site's card hover: the photo scales inside a frame that does not move */
.trio-shot { overflow: hidden; border-radius: var(--panel-r, 10px); }
@media (hover: hover) and (pointer: fine) {
  .trio-shot:hover img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .trio-shot img { transition: none; }
  .trio-shot:hover img { transform: none; }
}
@media (max-width: 900px) {
  .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio-shot:first-child { grid-column: 1 / -1; }
  .trio-shot:first-child img { aspect-ratio: 3 / 2; }
}
@media (max-width: 560px) {
  .trio { grid-template-columns: 1fr; }
  .trio-shot:first-child img { aspect-ratio: 4 / 5; }
}

/* The store switcher sits with the heading it changes (BUILD 07c). The first
   attempt put it on its own row under a mono caption reading "Compare the two
   counters"; Ajay rejected it — the caption read as a stray label and the
   buttons looked unstyled next to the rest of the site. It is now a proper
   segmented control in the brand's own colours, in the head row, so its job
   is obvious from where it sits: it changes the shop named in the headline. */
.car-head-side { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.car-head-side .head-3-side { margin: 0; }

.switch--store {
  display: inline-flex; padding: 3px; gap: 3px;
  background: rgba(0, 48, 63, .06);
  border: 1px solid rgba(184, 134, 91, .4);
  border-radius: 999px;
}
.switch--store button {
  appearance: none; cursor: pointer; border: 0; background: transparent;
  font-family: var(--mono); font-size: 14.5px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(0, 48, 63, .66);
  padding: 9px 20px; border-radius: 999px;
  transition: background .28s var(--ease, ease), color .28s var(--ease, ease);
}
.switch--store button[aria-checked="true"] {
  background: var(--teal); color: var(--bone);   /* 6.14:1 */
  box-shadow: 0 8px 18px -12px rgba(0, 48, 63, .7);
}
@media (hover: hover) and (pointer: fine) {
  .switch--store button:not([aria-checked="true"]):hover { color: var(--ink); background: rgba(0, 48, 63, .07); }
}
.switch--store button:focus-visible { outline: 2px solid var(--cedar); outline-offset: 2px; }

@media (max-width: 560px) {
  .switch--store { width: 100%; }
  .switch--store button { flex: 1; text-align: center; padding: 11px 10px; }
}

/* One rail per row, full width. Verified live 15 Sep 2026: at half width
   (530px) Dutchie's own carousel lays out three product cards and clips the
   third mid-card at the iframe edge — we cannot style inside their frame, so
   the fix is to give each rail the whole column. At ~1175px their carousel
   fits five whole cards with its own arrow, and nothing is cut. */
.car-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.2vw, 30px); margin-top: clamp(8px, 1vw, 14px);
}
.car-panel {
  background: var(--cream);
  border: 1px solid rgba(184, 134, 91, .34);
  border-radius: var(--panel-r, 10px);
  padding: clamp(12px, 1.4vw, 20px);
  box-shadow: 0 20px 34px -28px rgba(0, 48, 63, .4);
  transition: opacity .3s ease;
}
.car-frame {
  min-height: 485px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--cream);
}
.car-frame iframe { display: block; width: 100%; border: 0; }
.car-foot { margin-top: clamp(18px, 2.2vw, 30px); }
#carousels.is-empty .head-3, #carousels.is-empty .car-grid { display: none; }

@media (max-width: 900px) {
  .car-grid { grid-template-columns: 1fr; }
  .car-frame { min-height: 420px; }
}

/* --- 2. the two doors, back on the homepage ------------------------------
   Same #stores markup as about.html — .two-stores, .scard etc. are already
   styled above (BUILD 04, "two doors, two places"); nothing new needed here
   beyond the section itself sitting in the normal panel rhythm. */

/* --- 3. the contact form --------------------------------------------------
   A plain labelled form (not the sentence-style "say" line the newsletter
   uses below it — a message field does not fit a sentence). Underline
   inputs in the same mono-label voice as the rest of the site. */
.cform-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 30px); margin-bottom: clamp(18px, 2.2vw, 28px);
}
.cfield { display: block; }
.cfield--wide { grid-column: 1 / -1; margin-bottom: clamp(22px, 2.6vw, 32px); }
.cfield-k {
  display: block; font-family: var(--mono); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(0, 34, 48, .66); margin-bottom: 9px;
}
.cfield-k em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .72; }
.cform input[type="text"], .cform input[type="email"], .cform input[type="tel"],
.cform select, .cform textarea {
  width: 100%; display: block; border: none; border-bottom: 1px solid rgba(0, 34, 48, .3);
  background: transparent; font: inherit; font-size: 17px; color: var(--char);
  padding: 7px 2px 8px; border-radius: 0; font-family: var(--body);
}
.cform textarea { resize: vertical; min-height: 108px; line-height: 1.6; }
.cform select { cursor: pointer; }
.cform input:focus, .cform select:focus, .cform textarea:focus {
  outline: none; border-bottom-color: var(--teal); border-bottom-width: 2px; padding-bottom: 7px;
}
.cform input::placeholder, .cform textarea::placeholder { color: rgba(0, 34, 48, .4); }

@media (max-width: 700px) {
  .cform-grid { grid-template-columns: 1fr; }
}

/* The hero's single action (BUILD 07c). With one button instead of three it
   has to carry the weight the row used to: a little taller, a little wider,
   and it stays full width on a phone. */
.btn-lead {
  padding: 18px 34px;
  font-size: 15px;
  letter-spacing: .1em;
}
@media (max-width: 560px) {
  .btn-lead { width: 100%; justify-content: center; }
}

/* --- switch pills, after the type went up (BUILD 07c, Ajay) ---------------
   Raising the mono scale to 14.5px pushed both store switches past their
   boxes: the label ran into the pill's rounded edge and the active pill
   clipped. Two causes, both fixed here — the tracking adds a trailing gap
   after the last letter that the right padding never accounted for, and the
   padding was set for 12.5px type. Equal minimum widths as well, so the two
   options read as one deliberate control rather than two different shapes. */
.switch button,
.switch--store button {
  line-height: 1;
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  padding-top: 13px; padding-bottom: 13px;
  padding-left: 24px;
  padding-right: calc(24px + 0.1em);   /* letter-spacing's trailing space */
  min-width: 9.5em;
}
.switch--store { padding: 4px; gap: 4px; }
.switch--store button { min-width: 9em; }

@media (max-width: 560px) {
  .switch button,
  .switch--store button { min-width: 0; flex: 1; padding-left: 12px; padding-right: calc(12px + 0.1em); }
}


/* --- headings now set in the logo's face (BUILD 07c) ---------------------
   Bitter 800 is a heavier, wider colour than the grotesque it replaced, so
   the display sizes get a touch of negative tracking and a tighter leading
   to keep headlines to the same number of lines they held before. */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--disp);
  font-weight: 800;
  letter-spacing: -0.015em;
}
h1, .h1 { line-height: 1.02; }
h2, .h2 { line-height: 1.06; }
h3, .h3 { line-height: 1.12; }

/* The line under the rails said "Live from the counter you've chosen" — the
   same thing the section's own side note already says two hundred pixels
   above it, set in the smallest type on the page. Ajay cut it. What is left
   is the one thing it was actually for: a way through to the whole menu. */
.car-foot { margin-top: clamp(22px, 2.6vw, 34px); }
.car-foot .btn { font-size: 15px; }

/* --- the two store cards, level and on one colour (Ajay, 15 Sep) ----------
   Build 04 staggered the Robson card 48px down the page and gave it a cedar
   accent, so the pair read as two different objects at two different heights
   with two different badge colours. Ajay asked for them straight, aligned and
   on the same blue. The stagger goes, both cards stretch to a shared height,
   and the Robson accent becomes the brand teal so DOWNTOWN matches OUR
   FLAGSHIP. */
.two-stores { align-items: stretch; }
.scard { display: flex; flex-direction: column; }
.scard .scard-cap { flex: 1; }
.scard--rb { --acc: var(--teal); margin-top: 0; }
.scard--rb .scard-links .tlink {
  color: var(--teal);
  border-bottom-color: rgba(0, 96, 128, .45);
}
@media (max-width: 900px) {
  .scard--rb { margin-top: 0; }
}

/* --- contrast repairs after the blue ramp was unified (15 Sep) ------------
   Measured on the live page with a DOM contrast audit; every pair below was
   under WCAG AA for its size. The numbers in the comments are the ratios
   after the fix. */

/* the active switch option had lost its fill, leaving bone text on bone */
.switch button[aria-checked="true"],
.switch--store button[aria-checked="true"] {
  background: var(--teal) !important;
  color: var(--bone) !important;            /* 6.14:1 */
}
/* the inactive option was too pale to read */
.switch button,
.switch--store button { color: #3D5960; }   /* 5.8:1 on the bone track */

/* the gutter ridge label was cedar on bone-deep at 2.58:1 */
.sec[data-ridge]::before,
.ridge-label,
.sec-ridge { color: var(--cedar-deep); }    /* 5.9:1 */

/* eyebrows sitting on a teal ground */
.sec-teal .eyebrow,
[style*="--teal"] .eyebrow,
.sec[class*="teal"] .eyebrow { color: var(--bone); }   /* 6.14:1 */

/* small print on bone, and the footer's quietest line on the dark ground */
.form-note { color: #3F5457; }              /* 5.4:1 */
.foot-c, .foot-c span { color: #9DB3B6; }   /* 6.6:1 on the ink ground */

/* --- the sign-up, as plain fields (15 Sep) --------------------------------
   Was one running sentence with the inputs inside it; Ajay asked for
   something basic. Three labelled fields on a teal ground, matching the
   contact form above it. */
.list-fields {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px); margin: clamp(22px, 2.6vw, 32px) 0 0;
}
.fld { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.fld-l {
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bone);            /* 6.14:1 on teal */
}
.fld-opt { opacity: .72; letter-spacing: .04em; text-transform: none; }
.fld-i {
  font-family: var(--body); font-size: 16px; color: var(--bone);
  background: transparent; border: 0; border-bottom: 1px solid rgba(244, 239, 228, .5);
  padding: 9px 2px; width: 100%;
  transition: border-color .25s ease;
}
.fld-i::placeholder { color: rgba(244, 239, 228, .55); }
.fld-i:focus { outline: none; border-bottom-color: var(--bone); border-bottom-width: 2px; }
.fld-i:focus-visible { outline: 2px solid var(--cedar); outline-offset: 3px; }
select.fld-i { appearance: none; cursor: pointer; }
select.fld-i option { color: var(--ink); background: var(--bone); }
@media (max-width: 760px) { .list-fields { grid-template-columns: 1fr; } }

/* the last two contrast repairs the audit still reported */
.foot-c, .foot-c *, .foot-legal .foot-c { color: #9DB3B6 !important; }   /* 6.6:1 */
[data-ridge]::before, .sec::before { color: var(--cedar-deep); }         /* 5.9:1 */

/* --- the nav wordmark, in the logo's face and the brand teal (15 Sep) -----
   Ajay: "the font in Legacy to Legal, make that for the WestCanna in the top
   left of the nav bar, and colour it the teal blue we've been sticking with."
   Legacy to Legal is set in --disp (Bitter, the face taken from their own
   emblem), so the wordmark now matches the headline it sits above. Tracking
   comes down because a heavy serif does not need the airy letter-spacing the
   light geometric sans was carrying. */
.site-head .brand-word {
  font-family: var(--disp);
  font-weight: 800;
  letter-spacing: 0.01em;
  font-size: 24px;
  color: var(--teal);                      /* 6.14:1 on the bone header */
}
.site-head .brand-bc {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--teal);
  opacity: .72;
}
/* the gate uses the same wordmark */
.gate-word { font-family: var(--disp); font-weight: 800; letter-spacing: .01em; color: var(--teal); }
.gate-word .brand-bc { color: var(--teal); }

/* The quietest note class was still the smallest type on the page after the
   15 Sep scale-up; Ajay asked for it larger where it carries a real
   instruction (the order page's store-reload note). */
.dated { font-size: 15px; line-height: 1.75; }
.order-hero .dated, #order-hero .dated { font-size: 15.5px; color: rgba(0, 34, 48, .82); }

/* Headings on light grounds take the brand teal rather than near-black ink
   (15 Sep, Ajay: "the header and logo make teal as it's a white background").
   Scoped to the page heroes that sit on bone, so body headings inside dark
   panels are untouched. */
#order-hero h1, .order-hero h1,
#story-hero h1, .story-hero h1 { color: var(--teal); }   /* 6.14:1 on bone */
.lockup--teal { width: 100%; height: auto; display: block; }

/* #story is static by request (15 Sep): no entrance, no heading draw-on, and
   its children are never hidden waiting for a scroll trigger. */
#story, #story * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
#story .rise { opacity: 1; transform: none; }

/* Any section carrying .is-static never moves: no entrance, no heading
   draw-on, nothing left waiting on a scroll trigger. Used on the About page's
   timeline (15 Sep, Ajay) while the homepage copy keeps its motion. */
.is-static, .is-static * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.is-static .rise { opacity: 1; transform: none; }

/* ==========================================================================
   ONE SHAPE (15 Sep, Ajay: "make all the buttons the same exact shape, either
   circle or squared, same with all of the sections — I like the circle")
   The site had 21 things at 2px, 16 at 3px, and a handful at 6, 8, 10, 12, 40,
   100 and 999. Everything that is a button is now a pill; everything that is a
   panel or a framed block shares one radius token. Square corners survive only
   where a square is the point: the product photos inside Dutchie's own iframe,
   which we cannot reach.
   ========================================================================== */
:root { --panel-r: 18px; --pill: 999px; }

/* --- every button, chip and pill ---------------------------------------- */
.btn, .btn-teal, .btn-line, .btn-bone, .btn-sm, .btn-lg, .btn-lead,
.head-cta, .store-chip, .nav-toggle, .burger,
.switch, .switch--store, .switch button, .switch--store button,
.gate-btns button, .gate-btns a,
#wc-drawer-open, .dock-btn, .drawer-close, .wcd-close,
button.tl-arrow, .shelf-arrow, .car-foot .btn, form button[type="submit"],
.list-in button, .contact-form button {
  border-radius: var(--pill) !important;
}
/* the switch is a track with pills inside it, so both get the pill.
   16 Sep — Ajay: "the black layout is not filling the entire list." Once the
   track and the option both became pills, the option was still sitting flush
   against the track's edge, so its curve and the track's curve fought each
   other and a wedge of track showed through at the rounded ends. The store
   switch already solved this by insetting its options; the hero switch now
   does the same, so the filled option floats concentrically inside the track.
   The divider rule between options goes with it — a gap separates them now. */
.switch { overflow: hidden; padding: 4px; gap: 4px; }
.switch button + button { border-left: 0; }

/* --- every panel, card and framed block --------------------------------- */
.sec > .wrap > .panel, .car-panel, .car-frame, .scard, .scard-frame,
.cat-tile, .trio-shot, .trio-shot img, .faq-item, .tl-stop, .tlex-row,
.pc, .fmt, .why-line, .here-card, .store-card, .panel, .frame,
.wc-drawer, .drawer, .gate-card, .cmp-sheet {
  border-radius: var(--panel-r);
}
/* the big framed section panels build 04 introduced */
main .sec > .wrap { border-radius: var(--panel-r); }

/* round things that were deliberately circular stay circular */
.pip, .dot, .tl-dot, .muni-dot, .ridge-dot { border-radius: 50%; }

/* the timeline's three year buttons were the last square ones */
.tl-ticks button, .tl-tick, button.tl-tick, .tl-track button { border-radius: var(--pill) !important; }

/* --- header dropdowns (15 Sep) -------------------------------------------
   The store chip and the Menu nav item both open a real dropdown now. One
   visual language for both: a rounded panel, options that are full-width rows
   with a name and a line of detail, the chosen one marked. */
.nav-drop { position: relative; }
.nav-drop-t {
  font-family: var(--mono); font-size: 15px; letter-spacing: .05em;
  background: none; border: 0; cursor: pointer; color: var(--char);
  padding: 4px 0; display: inline-flex; align-items: center; gap: 6px;
}
.nav-drop-t .chev { font-size: 10px; opacity: .7; transition: transform .2s ease; }
.nav-drop-t[aria-expanded="true"] .chev { transform: rotate(180deg); }

.nav-drop-p, .store-pop {
  position: absolute; z-index: 60; top: calc(100% + 10px);
  min-width: 260px; padding: 8px;
  background: var(--cream);
  border: 1px solid rgba(184, 134, 91, .4);
  border-radius: var(--panel-r);
  box-shadow: 0 26px 44px -26px rgba(0, 34, 48, .5);
}
.nav-drop-p { left: 0; }
.store-pop { right: var(--pad); left: auto; }

.nav-drop-p a, .store-opt {
  display: flex; flex-direction: column; gap: 3px; width: 100%;
  padding: 11px 14px; border: 0; background: transparent; cursor: pointer;
  text-align: left; text-decoration: none; border-radius: calc(var(--panel-r) - 8px);
  transition: background .2s ease;
}
.dd-k { font-family: var(--disp); font-weight: 700; font-size: 16px; color: var(--ink); }
.dd-s { font-family: var(--mono); font-size: 13px; color: rgba(0, 34, 48, .7); }
@media (hover: hover) and (pointer: fine) {
  .nav-drop-p a:hover, .store-opt:hover { background: rgba(0, 96, 128, .08); }
}
.nav-drop-p a:focus-visible, .store-opt:focus-visible { outline: 2px solid var(--cedar); outline-offset: -2px; }
.store-opt[aria-selected="true"] { background: rgba(0, 96, 128, .12); }
.store-opt[aria-selected="true"] .dd-k::after { content: ' \2713'; color: var(--teal); }
.store-pop .note {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
  color: rgba(0, 34, 48, .66); margin: 8px 14px 6px; max-width: 30ch;
}
@media (max-width: 1023px) {
  .nav-drop-p { position: static; min-width: 0; box-shadow: none; border: 0; background: none; padding: 0 0 0 12px; }
}

/* ==========================================================================
   BUILD 08 — button typography, 16 Sep 2026
   Ajay: "the button fonts are too strict — keep it similar to the font of the
   headers, and creative." They were set in --mono, uppercased, at 0.13em
   tracking: a UI-label voice that fought the Bitter headlines above them. They
   now use --disp, the face taken from the client's own emblem and used by the
   headings and the nav wordmark, at its own natural case and tracking. The
   labels are already written in sentence case in the markup, so dropping
   text-transform is what lets them read as words rather than a system stamp.
   Segmented controls (.switch) keep the mono voice — they are controls, not
   calls to action, and they read correctly at their small size.
   ========================================================================== */
.btn, .btn-sm, .btn-lg, .btn-lead, .head-cta, .car-foot .btn,
form button[type="submit"], .list-in button, .contact-form button,
#wc-drawer-open, .dock-btn, .gate-btns button, .gate-btns a {
  font-family: var(--disp);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.btn      { font-size: 1.02rem; }
.btn-sm   { font-size: .95rem; }
.btn-lg   { font-size: 1.14rem; letter-spacing: 0; }
.btn-lead { font-size: 1.1rem;  letter-spacing: 0; }
.head-cta { font-size: .98rem; }
.car-foot .btn { font-size: 1.02rem; }

/* the quiet text link beside a button belongs to the same voice */
.tlink { font-family: var(--disp); font-weight: 700; letter-spacing: 0; font-size: 1.02rem; }

/* Category icons, 16 Sep. Ajay asked for larger, more literal icons; the new
   set is drawn with more detail (a fan leaf, a cartridge, a gummy and a can),
   which needs the room. Was clamp(40px, 3.6vw, 52px). */
.cat-ico svg { width: clamp(58px, 5vw, 78px); height: clamp(58px, 5vw, 78px); stroke-width: 1.5; }
/* the tiles no longer carry a count line, so the name closes the tile */
.cat-tile { gap: 16px; }

/* ==========================================================================
   BUILD 08b — get the typewriter face out of running sentences, 16 Sep 2026
   Ajay, pointing at the hours line under a headline: "all of the text and font
   that is highlighted like this please FIX."
   DM Mono was carrying whole sentences — notes, ledes, side copy, addresses,
   the status line. At 13–15px with letter-spacing it reads as code sitting
   under a serif headline. Every run of real prose now uses --body (Albert
   Sans) at a readable size with normal tracking. The short uppercase micro
   labels (eyebrows, step numbers, column keys) stay in DM Mono on purpose:
   they are a device, not prose, and they are what gives the page its
   engineering edge.
   ========================================================================== */
.status,
.dated,
.head-3-side,
.t-note,
.finder-sub,
.slot-note,
.form-note,
.gloss-close,
.tlex-lede,
.drawer-lede,
.notice-in p,
.foot-low,
.door-panel address,
.foot-store address,
.pc-meta {
  font-family: var(--body);
  letter-spacing: normal;
}

/* the ones that were smallest get a real reading size too */
.status        { font-size: 1.05rem; color: var(--teal-deep); }
.dated,
.slot-note,
.form-note,
.t-note         { font-size: 1rem; }
.head-3-side,
.tlex-lede,
.drawer-lede,
.finder-sub     { font-size: 1.02rem; line-height: 1.6; }
.notice-in p    { font-size: 1rem; line-height: 1.7; }
.door-panel address,
.foot-store address { font-size: 1rem; line-height: 1.8; }
.foot-low       { font-size: .95rem; }
.pc-meta        { font-size: .92rem; }

/* ==========================================================================
   The Dutchie menu, wider — 16 Sep 2026
   Ajay: "increase the width of the Dutchie menu on the ordering pages."
   Every section on the site is capped at 1180px, which is right for reading a
   column of prose and wrong for a product grid: Dutchie lays its cards out to
   the width it is given, so a narrower frame means fewer products per row and
   more scrolling. The menu section alone now runs to 1560px, the same maximum
   the site header already uses, so it is the widest thing on the page without
   inventing a new measure. The heading above it widens with it, so the copy
   still lines up with the menu's own edges.
   The selector carries the two :not() guards from the 1180px rule it has to
   beat, plus #menu, so it wins on specificity without !important.

   Two caps had to move, not one: every section is a panel capped at 1280px,
   and the .wrap inside it was capped again at 1180px. Widening only the inner
   wrap did nothing, because the panel around it was the real constraint. The
   panel keeps its own width: calc(100% - gutters), so it still cannot overflow
   a narrow window.
   ========================================================================== */
main > .sec#menu:not([id="hero"]):not([id="order-hero"]) { max-width: 1680px; }
main > .sec#menu:not([id="hero"]):not([id="order-hero"]) > .wrap { max-width: 1560px; }
.dutchie-wrap { width: 100%; }
.dutchie-wrap iframe { width: 100%; min-width: 100%; }

/* ===================================================================
   GO-LIVE 19 SEP 2026 — the POS transition layer.
   WestCanna is moving its point of sale from Kova to Dutchie, so the
   menu and the stock counts rebuild hour by hour. Online ordering and
   delivery are not switched on yet. Three pieces:

     .wc-transit   the notice that sits wherever the menu is shown
     .soon-chip    an inline "coming soon" pill for a heading or a label
     .soon-note    the line that sits under a call to action

   Drawn from the same parts as the rest of the page: mono eyebrow,
   cedar rule, bone-deep ground. Nothing new is introduced.
   =================================================================== */
.wc-transit {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  align-items: start;
  margin: clamp(22px, 2.6vw, 34px) 0;
  padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.4vw, 30px);
  background: var(--bone-deep);
  border: var(--rule);
  border-left: 3px solid var(--cedar);
}
.sec-bone-deep .wc-transit,
.sec-cream .wc-transit { background: var(--bone); }
.sec-ink .wc-transit,
.sec-teal .wc-transit {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .26);
  border-left-color: var(--sage);
}
.wc-transit__ico {
  width: 26px;
  height: 26px;
  flex: none;
  margin-top: 2px;
  color: var(--cedar);
}
.sec-ink .wc-transit__ico,
.sec-teal .wc-transit__ico { color: var(--sage); }
.wc-transit__ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.wc-transit__k {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cedar-deep);
  margin: 0 0 8px;
}
.sec-ink .wc-transit__k,
.sec-teal .wc-transit__k { color: var(--sage); }
.wc-transit__t { margin: 0; font-size: 16px; line-height: 1.62; color: rgba(0, 48, 63, .86); }
.sec-ink .wc-transit__t,
.sec-teal .wc-transit__t { color: rgba(255, 255, 255, .84); }
.wc-transit__t + .wc-transit__t { margin-top: 10px; }
.wc-transit--tight { margin: clamp(14px, 1.6vw, 20px) 0; padding: clamp(14px, 1.6vw, 18px) clamp(15px, 1.8vw, 22px); }
.wc-transit--tight .wc-transit__t { font-size: 15px; }

.soon-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  vertical-align: middle;
  padding: 5px 11px;
  border: 1px solid rgba(184, 134, 91, .55);
  border-radius: 999px;
  background: rgba(184, 134, 91, .12);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cedar-deep);
  white-space: nowrap;
}
.soon-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cedar);
  flex: none;
}
.sec-ink .soon-chip,
.sec-teal .soon-chip {
  border-color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .9);
}
.sec-ink .soon-chip::before,
.sec-teal .soon-chip::before { background: var(--sage); }

.soon-note {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: rgba(0, 48, 63, .72);
}
.sec-ink .soon-note,
.sec-teal .soon-note { color: rgba(255, 255, 255, .74); }
.actions + .soon-note { margin-top: 14px; }

@media (max-width: 720px) {
  .wc-transit { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .wc-transit__ico { display: none; }
  .wc-transit__t { font-size: 15px; }
}


/* GO-LIVE 19 SEP 2026 — what the menu page shows while Dutchie is still 403ing.
   Same parts as the rest of the page: bone ground, cedar rule, mono labels. */
.dutchie-wrap.is-blocked { min-height: 0 !important; }
.dutchie-wrap.is-blocked iframe,
.dutchie-wrap.is-blocked .dutchie-hold { display: none !important; }

.menu-fallback {
  margin: clamp(10px, 1.4vw, 18px) 0 clamp(18px, 2vw, 26px);
  padding: clamp(26px, 3.4vw, 46px) clamp(22px, 3vw, 44px);
  background: var(--bone);
  border: var(--rule);
  border-top: 3px solid var(--cedar);
}
.menu-fallback__k {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cedar-deep);
  margin: 0 0 12px;
}
.menu-fallback__t {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.58;
  color: rgba(0, 48, 63, .88);
  max-width: 62ch;
}
.menu-fallback__doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 40px);
  padding-top: clamp(18px, 2vw, 26px);
  border-top: var(--rule);
}
.menu-fallback__doors p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(0, 48, 63, .86); }
.menu-fallback__doors .t-k {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cedar-deep);
  margin-bottom: 7px;
}
.menu-fallback__doors a { color: var(--teal); }
.menu-fallback__n {
  margin: clamp(16px, 2vw, 24px) 0 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .02em;
  color: rgba(0, 48, 63, .66);
}
@media (max-width: 720px) {
  .menu-fallback__doors { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* When every carousel on the homepage fails, the heading and the grid are hidden
   (see above) — the transition notice is what remains, so give it room to stand
   on its own rather than floating in a collapsed section. */
#carousels.is-empty .wrap { padding-top: clamp(10px, 1.5vw, 20px); padding-bottom: clamp(10px, 1.5vw, 20px); }
#carousels.is-empty .wc-transit { margin: 0; }


/* 19 SEP 2026 — never paint an unproven Dutchie frame.
   A refused embed (403) renders Chrome's grey broken-document box at full panel
   height. Until a panel has proved itself live — Dutchie's height message, which
   adds .is-live — its frame stays transparent and the panel's own bone ground
   shows through. A live panel fades its frame in. Same rule for the full menu. */
#carousels [data-car-panel] iframe {
  opacity: 0;
  transition: opacity .45s ease;
}
#carousels [data-car-panel].is-live iframe { opacity: 1; }

.dutchie-wrap iframe { opacity: 0; transition: opacity .45s ease; }
.dutchie-wrap.is-live iframe { opacity: 1; }