/* ===================================================================
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}
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);
}
.hero-tagline{
position:absolute;left:6vw;top:calc(8vh + clamp(96px,21.5vw,318px));margin:0;
font-family:'Shantell Sans',cursive;font-style:italic;
font-size:clamp(18px,2.4vw,30px);color:var(--hot);transform:rotate(-1.2deg);
}
.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}
.shutter{
position:sticky;top:0;height:100vh;margin-bottom:-100vh;z-index:6;
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));
}
.cookie-card{flex:none;width:300px;scroll-snap-align:center;position:relative}
.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)}
.week-wrap{margin:clamp(24px,2.8vw,38px) -6vw 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)}
.day-cell{grid-row:1;padding:13px 14px 0;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.day-chip{padding:3px 6px;font-size:10px;font-weight:700;letter-spacing:.14em}
.today-flag{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 — no sticky pin / slide-up overlap, just a stacked panel */
.shutter{position:relative;top:auto;height:auto;min-height:0;margin-bottom:0;padding:56px 6vw;box-shadow:none;transform:none}
/* "THE SIX" — no pin, no horizontal drag; becomes a grid of cards */
.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}
}
/* ---- 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}
}