/* ===================================================================
RANGO'S BAKES — production stylesheet
Ported 1:1 from Rangos Bakes Tray Section.dc.html (design of record).
All colour/spacing/type values are literal from that source unless
flagged "GAP-FILL" (see build report for the full list).
=================================================================== */
/* ---- fonts (Google Fonts is loaded from , not here) ---- */
/* ---- root custom properties (the --bake browning system) ----
NOTE: --howCols and --capShow existed in the source but had zero
consumers there (confirmed dead/vestigial) — intentionally dropped.
UPDATE (responsive-layer pass): --sx, --pinH, --heroH, --trayOffset,
--hdrShow, --buildCols, --shPos, --shMB, --shLift used to be written
by JS on every resize purely to toggle between two hardcoded literal
values at a width/height threshold. That's exactly what real CSS
@media queries are for, so those thresholds have been re-expressed
as plain @media rules (see "RESPONSIVE LAYER" at the bottom of this
file) and the properties themselves — plus the JS that wrote them —
have been removed. Only the genuinely runtime/physics-driven custom
properties remain here: --bake/--paper/--hot/--tray/--rail (the
scroll-coupled browning ramp), --pull/--spin (tray drag spring),
--bite (bite sequence), --shutter (scroll-coupled shutter lift). */
:root{
--bake:.30;
--paper:#f2ebd9;
--ink:#1c1a17;
--tray:#e5d8b6;
--rail:#ded2b2;
--deep:#2e1a10;
--hot:#c6362b;
--pull:0px;
--spin:0deg;
--bite:0;
--shutter:0;
}
*{box-sizing:border-box}
html{background:#f2ebd9}
/* Kills the translucent blue flash iOS/Android paint over any tapped element.
This is the tap highlight only — :focus-visible outlines are a separate
mechanism and are deliberately left intact for keyboard users. */
html, body, a, button, input, textarea, select, label, [role="button"], [tabindex]{
-webkit-tap-highlight-color:transparent;
-webkit-touch-callout:none;
}
/* The hero "DM TO ORDER" CTA is an in-page jump to #build, so the travel is
animated rather than instant. Suppressed under reduced-motion, where a long
scripted scroll is exactly what the user asked not to have. */
@media (prefers-reduced-motion:no-preference){
html{scroll-behavior:smooth}
}
body{
margin:0;
background:#f2ebd9;
color:var(--ink);
font-family:'Martian Mono',ui-monospace,monospace;
-webkit-font-smoothing:antialiased;
overflow-x:clip;
position:relative;
}
img{max-width:100%;display:block}
a{color:#c6362b;text-decoration:none}
a:hover{color:#8a4a1e}
*:focus-visible{outline:3px solid #c6362b;outline-offset:3px}
@keyframes om-pulse{0%,100%{opacity:1}50%{opacity:.35}} /* declared for parity with source; unused there too */
/* ---- skip link (GAP-FILL: not in source, added for a11y/req.6) ---- */
.skip-link{
position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
background:#f6f2e7;color:#1c1a17;padding:12px 18px;z-index:100;border:1.5px solid #1c1a17;
font-size:12px;font-weight:700;letter-spacing:.08em;
}
.skip-link:focus{left:12px;top:12px;width:auto;height:auto;overflow:visible}
/* ---- full-bleed decorative overlays (grain + halftone) ---- */
.grain-overlay{
position:fixed;inset:0;z-index:60;pointer-events:none;mix-blend-mode:multiply;
opacity:calc(.09 + var(--bake) * .1);
background-image:url("data:image/svg+xml;utf8,");
background-size:180px 180px;
}
.dot-overlay{
position:fixed;inset:0;z-index:59;pointer-events:none;mix-blend-mode:multiply;
opacity:calc(var(--bake) * .12);
background-image:radial-gradient(#2e1a10 32%,transparent 33%);
background-size:5px 5px;
}
/* ===================================================================
NAV PILL (persistent, links out to /baked-brain.html)
=================================================================== */
.nav-pill{
position:fixed;right:6vw;top:14px;z-index:70;
display:flex;align-items:center;gap:10px;
padding:8px 13px 8px 9px;background:#fffdf6;border:1.5px solid #1c1a17;color:#1c1a17;
box-shadow:4px 5px 0 rgba(46,26,16,.22);transform:rotate(-1.1deg);
}
.nav-icon{
position:relative;flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid #1c1a17;
background:repeating-linear-gradient(45deg,rgba(46,26,16,.12) 0 5px,rgba(255,255,255,.2) 5px 10px);
}
.nav-icon .dash{position:absolute;top:3px;bottom:3px;left:50%;width:0;border-left:1.5px dashed rgba(28,26,23,.75)}
.nav-icon .dot{position:absolute;width:4px;height:4px;border-radius:50%;background:#1c1a17}
.nav-icon .dot-1{left:5px;top:7px}
.nav-icon .dot-2{right:5px;top:13px}
.nav-icon .dot-3{left:10px;bottom:4px;width:3px;height:3px;background:#c6362b}
.nav-pill-text{display:flex;flex-direction:column;gap:2px}
.nav-pill-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13px;line-height:1;letter-spacing:-.015em}
.nav-pill-sub{font-size:8px;font-weight:600;letter-spacing:.13em;color:#7a6a5a}
/* ===================================================================
SECTION 1 — HERO
=================================================================== */
.hero{position:relative;height:240vh}
.hero-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.hero-h1{
position:absolute;left:calc(6vw - .06em);top:8vh;margin:0;
font-family:'Bricolage Grotesque',sans-serif;
font-size:clamp(56px,13vw,190px);line-height:.82;letter-spacing:-.035em;
font-variation-settings:'wght' calc(480 + var(--bake) * 320),'wdth' calc(88 + var(--bake) * 12);
color:var(--ink);
}
/* "दिल se, dough तक." — display-scale, not the small script line it replaced.
Values taken verbatim from the refined design doc. The two Devanagari words
are set in Anek Devanagari; the Latin runs stay in Bricolage. */
.hero-tagline{
position:absolute;left:6vw;top:calc(8vh + clamp(96px,21.5vw,318px));margin:0;
font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
font-size:clamp(30px,5vw,64px);line-height:1.06;letter-spacing:-.02em;
color:var(--hot);transform:rotate(-1.1deg);
}
.hero-tagline .deva{
font-family:'Anek Devanagari',sans-serif;font-weight:600;
font-size:1.06em;letter-spacing:0;
}
.hero-photo-wrap{
position:absolute;right:6vw;top:50%;transform:translateY(-50%);
display:flex;flex-direction:column;align-items:center;gap:18px;
}
.hero-cookie{
appearance:none;font:inherit;padding:0;margin:0;
position:relative;width:clamp(200px,30vw,400px);height:clamp(200px,30vw,400px);
border-radius:50%;border:1.5px solid var(--ink);
background:repeating-linear-gradient(45deg,rgba(46,26,16,.1) 0 7px,rgba(255,255,255,.16) 7px 14px);
cursor:pointer;
}
.hero-cookie-label{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
padding:0 10%;font-size:9px;font-weight:600;line-height:1.8;letter-spacing:.08em;color:var(--ink);
}
.bite-mask{position:absolute;border-radius:50%;background:var(--paper);pointer-events:none}
.bite-mask-1{right:-6%;top:4%;width:34%;height:34%;opacity:clamp(0,calc((var(--bite,0) - 0.4) * 2),1)}
.bite-mask-2{right:-4%;top:34%;width:44%;height:44%;opacity:clamp(0,calc((var(--bite,0) - 1.4) * 2),1)}
.bite-mask-3{left:34%;bottom:-8%;width:52%;height:52%;opacity:clamp(0,calc((var(--bite,0) - 2.4) * 2),1)}
.bite-mask-4{left:-12%;top:12%;width:66%;height:66%;opacity:clamp(0,calc((var(--bite,0) - 3.4) * 2),1)}
.bite-readout{display:flex;gap:10px;align-items:center}
.bite-num{font-size:10px;font-weight:600;letter-spacing:.12em}
.bite-copy{font-family:'Shantell Sans',cursive;font-style:italic;font-size:clamp(16px,1.9vw,22px);color:var(--hot)}
/* Tap-to-bite affordance — mobile only (see RESPONSIVE LAYER); hidden
everywhere else because tablet-landscape/desktop keep scroll-scrub. */
.tap-hint{display:none;margin-top:2px;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--ink)}
.status-card{
position:absolute;left:6vw;bottom:8vh;max-width:min(420px,80vw);
border:1.5px solid var(--ink);background:rgba(255,253,246,.96);padding:18px 20px;
transform:rotate(-1.4deg);
}
.status-card .tape{
position:absolute;left:-20px;top:-13px;width:58px;height:18px;background:#e6dfc9;
border-left:1px dashed #b9b09a;border-right:1px dashed #b9b09a;transform:rotate(-19deg);
}
.status-day{font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--hot)}
.status-line{
margin-top:10px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
font-size:clamp(20px,2.5vw,30px);line-height:1.02;letter-spacing:-.02em;color:#1c1a17;
}
.status-cta{
display:inline-block;margin-top:14px;padding:11px 15px;background:#c6362b;color:#f6f2e7;
font-size:11px;font-weight:700;letter-spacing:.1em;
}
/* ===================================================================
SECTION 2 — SHUTTER TRANSITION PANEL
=================================================================== */
.shutter-wrap{position:relative}
/* Sticky at every breakpoint. svh (small viewport height) rather than vh so a
mobile URL bar expanding or collapsing can't leave the panel taller than the
screen; vh first as the fallback where svh is unsupported. On desktop the two
units are identical, so this costs nothing there. */
.shutter{
position:sticky;top:0;z-index:6;
height:100vh;margin-bottom:-100vh;
height:100svh;margin-bottom:-100svh;
transform:translate3d(0,calc(var(--shutter,0) * -101%),0);will-change:transform;
background:var(--paper);box-shadow:0 18px 34px rgba(46,26,16,calc(.18 + var(--shutter,0) * .3));
overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:0 6vw;
}
.shutter .corrugated{
position:absolute;inset:0;pointer-events:none;
background-image:repeating-linear-gradient(180deg,rgba(46,26,16,.16) 0 1.5px,rgba(46,26,16,.03) 1.5px 5px,transparent 5px 54px);
}
.shutter-h2{
margin:0;max-width:10em;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
font-size:clamp(38px,6.4vw,86px);line-height:.92;letter-spacing:-.025em;text-wrap:balance;
color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.4px var(--ink);
background-image:radial-gradient(rgba(46,26,16,.5) 21%,transparent 22%),
repeating-linear-gradient(-52deg,rgba(198,54,43,.9) 0 16px,rgba(224,165,33,.92) 16px 32px,rgba(143,160,122,.9) 32px 48px,rgba(94,113,134,.9) 48px 64px);
background-size:9px 9px,auto;-webkit-background-clip:text;background-clip:text;
}
/* GAP-FILL: safety net for browsers without background-clip:text support
(none named in the source, added so the headline never renders invisible) */
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
.shutter-h2{color:var(--ink);-webkit-text-fill-color:var(--ink);background-image:none}
}
.shutter-rail{
position:absolute;left:0;bottom:0;width:100%;height:26px;background:var(--rail);
border-top:2px solid var(--ink);box-shadow:inset 0 6px 12px rgba(46,26,16,.28);
}
/* ===================================================================
SECTION 3 — "THE SIX" PINNED TRAY
=================================================================== */
.tray-pin{position:relative;height:calc(340vh + 85vh)}
.tray-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--paper)}
.tray-header{display:block;position:absolute;left:6vw;top:34px;z-index:3}
.tray-h2{
margin:0;display:flex;align-items:baseline;gap:.22em;font-family:'Bricolage Grotesque',sans-serif;
font-weight:800;font-size:clamp(30px,4.4vw,58px);line-height:.94;letter-spacing:-.02em;
}
.outline-word{color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.6px var(--ink)}
@supports not (-webkit-text-stroke:1px black){
.outline-word{color:var(--ink);-webkit-text-fill-color:var(--ink)}
}
.rail{position:absolute;left:0;width:100%;height:14px;background:var(--rail);border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
/* --railUp/--railDn: measured at runtime from the tray's actual
rendered height (site.js rails()) so the bars sit exactly at the
tray's own half-height instead of an assumed guess. The literal
fallback values match the original hardcoded guess exactly, so
nothing changes before JS runs / if JS is blocked. */
.rail-top{top:calc(50% + 34px + var(--railUp,-250px))}
.rail-bottom{top:calc(50% + 34px + var(--railDn,236px))}
.tray-scroller{position:relative;height:100%;overflow-x:hidden;overflow-y:hidden;scroll-snap-type:x mandatory}
.tray{
position:absolute;left:0;top:calc(50% + 34px);
transform:translate3d(var(--pull),-50%,0);
display:flex;align-items:center;gap:44px;padding:26px 6vw;
border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--tray);
box-shadow:0 calc(6px + var(--bake) * 26px) calc(10px + var(--bake) * 34px) rgba(46,26,16,calc(.1 + var(--bake) * .3));
}
/* will-change promotes the six cards to their own layers so the per-frame
rotate() composites instead of repainting them inside the tray. */
.cookie-card{flex:none;width:300px;scroll-snap-align:center;position:relative;will-change:transform}
.cookie-card-1{transform:rotate(calc(var(--spin) * -1 - 3deg))}
.cookie-card-2{transform:rotate(calc(var(--spin) + 2.5deg))}
.cookie-card-3{transform:rotate(calc(var(--spin) * -1 - 1.5deg))}
.cookie-card-4{transform:rotate(calc(var(--spin) + 4deg))}
.cookie-card-5{transform:rotate(calc(var(--spin) * -1 - 2deg))}
.cookie-card-6{transform:rotate(calc(var(--spin) + 1.5deg))}
.swatch{position:absolute;width:290px;height:290px;border:1.5px solid var(--ink)}
.cookie-card-1 .swatch{left:-14px;top:26px;background:#8fa07a;transform:rotate(-2.5deg)}
.cookie-card-2 .swatch{left:-10px;top:30px;background:#5e7186;transform:rotate(2deg)}
.cookie-card-3 .swatch{left:-16px;top:24px;background:#a79bc8;transform:rotate(-3deg)}
.cookie-card-4 .swatch{left:-8px;top:32px;background:#e0a521;transform:rotate(3deg)}
.cookie-card-5 .swatch{left:-15px;top:28px;background:#c96a3c;transform:rotate(-2deg)}
.cookie-card-6 .swatch{left:-12px;top:30px;background:#d9a0a3;transform:rotate(2.5deg)}
.card-num-row{position:relative;display:flex;justify-content:space-between;align-items:baseline}
.card-num{font-size:26px;font-weight:700;letter-spacing:-.02em}
.card-photo{
position:relative;display:block;margin-top:14px;width:262px;height:262px;
border-radius:50%;border:1.5px solid var(--ink);object-fit:cover;background:var(--tray);
}
.card-title{
position:relative;margin:20px 0 0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
font-size:25px;line-height:1;letter-spacing:-.015em;
}
.card-desc{position:relative;margin:10px 0 0;font-family:'Shantell Sans',cursive;font-style:italic;font-size:17px;line-height:1.3;text-wrap:pretty}
/* ===================================================================
SECTION 4 — "ONE BATCH A WEEK"
=================================================================== */
.batch{padding:clamp(48px,6vw,84px) 6vw clamp(50px,6vw,86px);background:var(--paper)}
.batch-header{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-end}
.batch-h2{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(32px,4.8vw,62px);line-height:.9;letter-spacing:-.03em}
.batch-today{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right}
.today-tag{font-size:10px;font-weight:600;letter-spacing:.14em}
.batch-cutoff{font-family:'Shantell Sans',cursive;font-style:italic;font-size:clamp(18px,2.3vw,30px);line-height:1.15;color:var(--ink)}
/* Was `-6vw` left/right, which cancelled .batch's 6vw padding and ran the week
strip edge-to-edge while the heading and the payment row stayed inset. Now 0,
so all three align on the same left/right margin. */
.week-wrap{margin:clamp(24px,2.8vw,38px) 0 0;overflow-x:auto;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:rgba(255,253,246,.3)}
.week-grid{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr))}
/* Mobile-only alternate presentation of the SAME weekly schedule as a
vertical list (see RESPONSIVE LAYER). Kept in the DOM always; today()
in site.js paints the TODAY highlight into whichever is visible. */
.week-list{display:none;margin:clamp(24px,2.8vw,38px) -6vw 0;border-top:2px solid var(--ink)}
.week-list-row{display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:12px;align-items:center;padding:15px 6vw;border-bottom:1px dashed rgba(28,26,23,.3)}
.week-list-day{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:14px;letter-spacing:-.01em}
.week-list-label{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15px;line-height:1.15}
.week-list-label.week-list-rest{font-family:'Shantell Sans',cursive;font-style:italic;font-weight:400}
.week-list-tag{font-size:11px;font-weight:700;letter-spacing:.1em;background:#c6362b;color:#f6f2e7;padding:4px 7px;white-space:nowrap;opacity:0}
.day-bg{grid-row:1/-1}
.day-bg:not(:first-child){border-left:1px dashed rgba(28,26,23,.3)}
/* TODAY sits stacked ABOVE the day name, left-aligned with it — it used to be
pushed to the opposite edge of the cell by space-between, which read as
belonging to the next day. The flag keeps its box even at opacity:0 so every
cell is the same height and nothing shifts when the day changes. */
.day-cell{grid-row:1;padding:13px 14px 0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.day-chip{padding:3px 6px;font-size:10px;font-weight:700;letter-spacing:.14em}
.today-flag{order:-1;align-self:flex-start;font-size:9px;font-weight:700;letter-spacing:.1em;background:#c6362b;color:#f6f2e7;padding:3px 6px;white-space:nowrap;opacity:0}
.status-band{grid-row:2;margin:15px 8px;box-sizing:border-box}
.status-band.open{padding:13px 16px;border:1.5px dashed var(--ink);min-height:74px;display:flex;flex-wrap:wrap;gap:7px 18px;align-items:center}
.status-band.close{padding:13px 14px;background:#c6362b;color:#f6f2e7;min-height:74px;display:flex;flex-direction:column;justify-content:center}
.status-band.rest{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink)}
.status-band.delivery{padding:13px 14px;background:#fffdf6;color:#1c1a17;border:1.5px solid #1c1a17;min-height:74px;display:flex;flex-direction:column;justify-content:center}
.cell-label{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(15px,1.55vw,23px);line-height:1.02;letter-spacing:-.01em}
.dough-rests{font-family:'Shantell Sans',cursive;font-style:italic;font-size:14px}
.facts-row{margin-top:clamp(20px,2.4vw,30px);display:flex;flex-wrap:wrap;gap:12px 40px;align-items:baseline}
.fact{display:flex;flex-wrap:wrap;gap:5px 10px;align-items:baseline}
.footnote-label{font-size:10px;font-weight:600;letter-spacing:.14em}
.footnote-value{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(16px,1.6vw,21px);letter-spacing:-.015em}
/* ===================================================================
SECTION 5 — "BUILD YOUR BOX" (dark)
=================================================================== */
.build{position:relative;background:#2e1a10;color:#f6f2e7;padding:clamp(72px,9vw,116px) 6vw clamp(64px,8vw,104px);overflow:hidden}
.build-header{display:flex;flex-wrap:wrap;gap:34px;justify-content:space-between;align-items:flex-end}
.build-h2{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(44px,8.6vw,124px);line-height:.84;letter-spacing:-.035em}
.build-sub{margin:0;max-width:20ch;font-family:'Shantell Sans',cursive;font-style:italic;font-size:clamp(17px,2vw,26px);line-height:1.25}
.build-grid{margin-top:clamp(36px,4.6vw,64px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.9fr);gap:clamp(30px,3.6vw,54px);align-items:start}
.build-left{min-width:0;display:flex;flex-direction:column;gap:clamp(30px,3.4vw,46px)}
.build-topbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;border-bottom:1.5px dashed #5c4632;padding-bottom:14px}
.box-tag{display:flex;align-items:baseline;gap:10px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(20px,2.4vw,30px);line-height:1;letter-spacing:-.02em}
.step-label{font-size:10px;font-weight:600;letter-spacing:.14em;color:#a8917c}
.mode-row{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.mode-btn{
appearance:none;font:inherit;text-align:left;cursor:pointer;background:transparent;color:#f6f2e7;
display:flex;align-items:center;gap:12px;padding:10px 15px;border:1.5px dashed currentColor;
}
.mode-btn.is-active{background:#f6f2e7;color:#1c1a17;border-style:solid}
.mode-icon{display:flex;flex-direction:column;gap:4px;padding:5px;border:1px solid currentColor}
.mode-icon-row{display:flex;gap:4px}
.mode-dot{width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.9}
.mode-dot.dim{opacity:.45}
.mode-icon-divider{border-top:1px dashed currentColor;opacity:.75}
.mode-text{display:flex;flex-direction:column;gap:5px}
.mode-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:14px;line-height:1;letter-spacing:-.01em}
.mode-sub{font-size:9px;font-weight:600;letter-spacing:.14em}
.flav-grid{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:12px}
.flav-btn{
appearance:none;font:inherit;text-align:left;cursor:pointer;position:relative;
background:#f6f2e7;color:#1c1a17;border:1.5px solid #1c1a17;padding:10px;
display:flex;flex-direction:column;gap:10px;outline-offset:2px;
}
.flav-btn.is-selected{outline:3px solid #c6362b}
.flav-swatch{display:flex;align-items:center;justify-content:center;height:76px;border:1px solid #1c1a17}
.flav-dot{width:56px;height:56px;border-radius:50%;border:1.5px solid #1c1a17;background:repeating-linear-gradient(45deg,rgba(46,26,16,.14) 0 6px,rgba(255,255,255,.18) 6px 12px)}
.flav-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13px;line-height:1.08;letter-spacing:-.005em}
.check-badge{position:absolute;right:-2px;top:-2px;background:#c6362b;color:#f6f2e7;font-size:9px;font-weight:700;letter-spacing:.1em;padding:5px 7px;opacity:0}
.flav-btn.is-selected .check-badge{opacity:1}
.build-right{position:sticky;top:22px;min-width:0;max-width:430px;width:100%}
.order-pad{margin-top:16px;background:#f6f2e7;color:#1c1a17;border:1.5px solid #1c1a17;padding:20px;box-shadow:9px 11px 0 rgba(0,0,0,.28)}
.order-pad-header{display:flex;justify-content:space-between;gap:14px;align-items:baseline;border-bottom:1.5px solid #1c1a17;padding-bottom:12px}
.order-eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;color:#c6362b}
.order-note{font-size:10px;font-weight:600;letter-spacing:.12em}
.order-list{margin-top:14px;max-height:min(48vh,430px);overflow-y:auto;display:flex;flex-direction:column;gap:11px}
/* .order-box is a plain, non-interactive wrapper (position:relative only)
so the real select/remove controls below can be siblings instead of one
being nested inside the other. .order-box-select carries the visual
styling the old interactive .order-box div used to have. */
.order-box{position:relative}
.order-box-select{appearance:none;font:inherit;text-align:left;display:block;width:100%;cursor:pointer;color:#1c1a17;border:1.5px solid #1c1a17;background:rgba(255,253,246,.4);padding:13px 14px 14px;outline-offset:-1.5px}
.order-box-select.is-active{background:#e0a521}
.order-box-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.order-box-label{display:flex;align-items:baseline;gap:9px;min-width:0}
.box-label{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px;line-height:1;letter-spacing:-.01em}
/* Sits at the same top-right position the old flex/space-between layout
put it in, but as an absolutely-positioned sibling of .order-box-select
rather than a descendant, so no button is nested inside another. */
.remove-btn{position:absolute;top:13px;right:14px;appearance:none;font:inherit;cursor:pointer;flex:none;background:transparent;color:#1c1a17;border:1.5px dashed #1c1a17;padding:6px 9px;font-size:8px;font-weight:700;letter-spacing:.12em;opacity:1}
.remove-btn.is-disabled{opacity:.25;pointer-events:none}
.order-box-body{margin-top:12px;display:flex;flex-wrap:wrap;gap:13px;align-items:center}
.slot-tray{flex:none;display:flex;flex-direction:column;gap:6px;padding:8px;border:1.5px solid #1c1a17;background-color:#fffdf6;background-image:repeating-linear-gradient(45deg,rgba(46,26,16,.05) 0 8px,transparent 8px 16px)}
.slot-row{display:flex;gap:6px}
.slot{width:30px;height:30px;border-radius:50%;border:1.5px dashed #1c1a17;background:transparent}
.slot.filled{border-style:solid}
.slot-split{border-top:1.5px dashed rgba(28,26,23,.55);opacity:0}
.slot-split.is-visible{opacity:1}
.order-lines{flex:1;min-width:120px;display:flex;flex-direction:column;gap:8px}
.order-line{display:flex;justify-content:space-between;gap:10px;align-items:baseline;border-bottom:1px dashed rgba(28,26,23,.35);padding-bottom:7px}
.line-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13px;line-height:1.08;letter-spacing:-.008em}
.line-qty{font-size:11px;font-weight:700;white-space:nowrap}
.order-hint{font-family:'Shantell Sans',cursive;font-style:italic;font-size:15px;color:#8a4a1e}
.add-box-btn{appearance:none;font:inherit;cursor:pointer;width:100%;margin-top:12px;padding:14px;background:transparent;color:#1c1a17;border:1.5px dashed #1c1a17;font-size:11px;font-weight:700;letter-spacing:.1em}
.order-cta{
margin-top:16px;display:flex;align-items:center;justify-content:center;gap:12px;padding:19px 20px;
text-align:center;background:transparent;color:#1c1a17;border:1.5px dashed #1c1a17;
font-size:12px;font-weight:700;letter-spacing:.08em;
}
.order-cta.is-ready{background:#c6362b;color:#f6f2e7;border-style:solid}
.order-cta[aria-disabled="true"]{pointer-events:none}
/* ===================================================================
FOOTER
=================================================================== */
.site-footer{background:#2e1a10;color:#a8917c;padding:0 6vw 46px}
.footer-row{border-top:1px dashed #5c4632;padding-top:20px;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;font-size:10px;font-weight:600;letter-spacing:.12em;line-height:1.9}
/* ===================================================================
RESPONSIVE LAYER
===================================================================
Breakpoint contract (authoritative):
MOBILE : viewport < 700w OR any viewport under 560h
TABLET : 700-1279w, portrait vs landscape decided by aspect ratio
DESKTOP : >= 1280w
Tablet-landscape and desktop keep the existing choreography above
completely unchanged (pinned horizontal tray, two-column builder) —
nothing in this section touches them except two independent,
pre-existing height-only thresholds (739.98px, tap-target sizing)
that were already live in production, just JS-driven before.
"Portrait vs landscape" below uses the `orientation` media feature
(matches when height >= width) rather than a literal `height > width`
comparison. The two differ only for a perfectly square viewport
(height === width), which `orientation` classifies as portrait while
a strict `>` would call it landscape — an edge case that does not
occur on any real device and isn't worth a JS-driven exact match.
=================================================================== */
/* ---- pre-existing short-viewport behaviour (now pure CSS) ----
Only reachable by tablet-landscape/desktop widths, since anything
under 560h is already classified MOBILE by the rule above and gets
its own treatment (tray-header/rails don't exist as absolute-
positioned elements there — see the stack block below, which is
later in the cascade and wins for those cases). */
@media (max-height:739.98px){
.tray-header{display:none}
.rail-top{top:calc(50% + var(--railUp,-250px))}
.rail-bottom{top:calc(50% + var(--railDn,236px))}
.tray{top:50%}
}
/* ---- STACK: mobile OR tablet-portrait OR prefers-reduced-motion ----
Per the designer's key rule: "Phone and tablet portrait drop the
horizontal tray entirely — the six sit in a grid. Desktop and
tablet landscape keep the approved choreography." Reduced-motion is
folded in here too so a full-width desktop honouring that OS setting
also gets the non-pinned, non-scroll-jacked layout (this mirrors
site.js's existing pre-this-change behaviour of collapsing the pin/
sticky mechanics for reduced-motion regardless of viewport size). */
@media
(max-width:699.98px),
(max-height:559.98px),
(min-width:700px) and (max-width:1279.98px) and (min-height:560px) and (orientation:portrait),
(prefers-reduced-motion:reduce)
{
/* HERO — stacked flow instead of the pinned/absolute poster */
.hero{height:auto}
.hero-sticky{
position:relative;top:auto;height:auto;min-height:100vh;overflow:visible;
display:flex;flex-direction:column;justify-content:space-between;gap:24px;
padding:76px 6vw 32px;
}
.hero-h1{position:static;left:auto;top:auto;margin:0}
.hero-tagline{position:static;left:auto;top:auto;margin:10px 0 0}
.hero-photo-wrap{position:static;right:auto;top:auto;transform:none;align-self:center;margin:8px 0}
.status-card{position:static;left:auto;bottom:auto;width:100%;max-width:480px;margin:0}
/* SHUTTER — full-screen, but NOT pinned here.
The desktop choreography is a reveal: the shutter is pinned and slides up
off a tray that is itself pinned underneath it. That needs the revealed
content to hold still, which needs it to be shorter than the viewport. On
phone and tablet portrait the six become a grid roughly three screens
tall, so it can never be pinned — and a pinned shutter sliding off
unpinned content just drags the cookies up with it. So here the panel is
a normal full-screen section that scrolls away on its own, and the six
begin cleanly below it. Nothing overlaps, nothing rides up. */
.shutter{
position:relative;top:auto;transform:none;box-shadow:none;
height:auto;margin-bottom:0;padding:56px 6vw;
min-height:100vh;
min-height:100svh;
}
/* "THE SIX" — no horizontal drag; becomes a grid of cards.
.tray-sticky STAYS sticky though. The shutter above it is pinned and has a
-100svh margin that pulls this section up underneath it, so if this scrolls
at page rate while the shutter is held, the cookies visibly ride up with the
shutter instead of being revealed by it. Pinning the top of the grid holds
them still for the length of the lift, exactly as on desktop. No fixed
height and no overflow:hidden here — the grid is several screens tall and
must be free to scroll once the reveal has finished. */
.tray-pin{height:auto}
.tray-sticky{position:relative;top:auto;height:auto;overflow:visible}
.tray-header{display:block;position:static;left:auto;top:auto;margin:20px 6vw 14px}
.rail{display:none}
.tray-scroller{position:static;height:auto;overflow:visible;scroll-snap-type:none}
.tray{
position:static;left:auto;top:auto;transform:none;
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
align-items:stretch;gap:24px;padding:24px 6vw;
}
.cookie-card{width:auto;scroll-snap-align:none}
.cookie-card-1,.cookie-card-2,.cookie-card-3,.cookie-card-4,.cookie-card-5,.cookie-card-6{transform:none}
.swatch{display:none}
.card-photo{width:100%;height:auto;aspect-ratio:1;margin-top:8px}
.card-num{font-size:18px}
.card-title{margin:14px 0 0;font-size:19px}
.card-desc{margin:8px 0 0;font-size:14px}
/* hero is no longer pinned/scroll-scrubbed here (see rationale
above), so bite progress is tap-driven for every "stack" config,
not just true mobile — site.js gates the scroll auto-track off
with the same `!stack` boolean. */
.tap-hint{display:block}
}
/* ---- REDUCED MOTION: the only place the shutter stops being sticky ----
Everywhere else it keeps the pinned slide-up at every breakpoint. A
scroll-driven panel that slides over the content is precisely the effect
this OS setting asks to be spared, so here it flattens into a normal
full-screen block with no transform and no negative margin. */
@media (prefers-reduced-motion:reduce){
.shutter{
position:relative;top:auto;transform:none;box-shadow:none;
height:auto;margin-bottom:0;padding:56px 6vw;
min-height:100vh;
min-height:100svh;
}
}
/* ---- MOBILE ONLY: width < 700 OR height < 560 ---- */
@media (max-width:699.98px), (max-height:559.98px){
/* six cookies: a true 2-up grid (see build-report FLAG — the design
handoff's own reference file has a bug that collapses this to a
1-column list; the authoritative spec text calls for 2-up, so
that's what's implemented here) */
.tray{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:20px 6vw}
.card-num{font-size:15px}
.card-title{margin:10px 0 0;font-size:17px}
.card-desc{margin:5px 0 0;font-size:13px}
/* week dial becomes a list — zero sideways scroll */
.week-wrap{display:none}
.week-list{display:block}
/* Build Your Box: single-column on true mobile only (tablet-portrait
has its own single-column rule below; tablet-landscape/desktop keep
the two-column builder from the base .build-grid rule untouched). */
.build-grid{grid-template-columns:minmax(0,1fr)}
/* a11y fix: 10px/9px text floor raised to 11px on mobile only; desktop/
tablet keep the values already approved for those layouts */
.bite-num,.status-day,.today-tag,.step-label,
.nav-pill-sub,.remove-btn,.hero-cookie-label,.footnote-label,
.mode-sub,.check-badge,.order-eyebrow,.order-note,.footer-row,
/* week list: .day-chip was 10px, .today-flag 9px — both render inside the
mobile week list, so they belong to the same floor */
.day-chip,.today-flag{font-size:11px}
}
/* ---- TABLET PORTRAIT ONLY: 700-1279w, height >= width, height >= 560 ---- */
@media (min-width:700px) and (max-width:1279.98px) and (min-height:560px) and (orientation:portrait){
.hero-sticky{padding:88px 6vw 48px;gap:30px}
/* six cookies: 3-up grid */
.tray{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;padding:26px 6vw}
.card-num{font-size:20px}
.card-title{margin:16px 0 0;font-size:20px}
.card-desc{margin:8px 0 0;font-size:15px}
/* week dial: the 7-column grid needs 840px minimum and doesn't fit the
700-1279px tablet-portrait band (still 6px short at the 834px
reference viewport) — use the same list presentation as mobile so
there's zero hidden sideways content. */
.week-wrap{display:none}
.week-list{display:block}
/* order pad centred at 560, single-column builder */
.build-grid{grid-template-columns:minmax(0,1fr)}
.build-right{position:relative;top:auto;max-width:min(560px,100%);margin:0 auto}
}
/* ---- Real defect fix: tap targets under 44px on touch input ----
Scoped to (pointer:coarse) rather than a viewport width so it fixes
the actual reported problem (touch hit area) without changing
desktop mouse/trackpad sizing at any width, including tablet-
landscape/desktop where the approved choreography must not change. */
/* Also bound to the mobile width band, not pointer:coarse alone. A phone
requesting the desktop site, or any browser that misreports pointer type,
would otherwise keep the 39px/25px hit areas. Desktop widths are unaffected
either way, so the approved desktop sizing still cannot change. */
@media (pointer:coarse), (max-width:699.98px), (max-height:559.98px){
.status-cta{min-height:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.remove-btn{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
}