@font-face{font-family:"Source Serif";src:url(fonts/source-serif-4.woff2) format("woff2");font-weight:300 600;font-style:normal;font-display:optional}
@font-face{font-family:"Source Serif";src:url(fonts/source-serif-4-italic.woff2) format("woff2");font-weight:300 500;font-style:italic;font-display:optional}
@font-face{font-family:"Google Sans Flex";src:url(fonts/google-sans-flex.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:optional}
:root{
  --espresso:#201109;--roast:#472715;--flour:#F9F7F1;--walnut:#9A6848;--crust:#C1A282;--porcelain:#DBD3CD;
  --ink:#201109;--muted:#5b4636;--serif:"Source Serif",Georgia,"Times New Roman",serif;--sans:"Google Sans Flex",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--r:14px;--pad:clamp(20px,5vw,72px)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--flour);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.03em;line-height:1.15;margin:0}
em{font-style:italic}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--crust);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--espresso);color:var(--flour);padding:10px 14px;z-index:100;border-radius:6px}
.skip:focus{left:8px}
/* grain over everything, subtle (Porter's film look) */
body{position:relative}
body::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:90;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.wrap--narrow{max-width:860px}
section{position:relative}
.dark{background:var(--espresso);color:var(--flour)}
.center{text-align:center;margin-left:auto;margin-right:auto}
.chapter{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--walnut);text-align:center;margin-bottom:22px;display:flex;align-items:center;justify-content:center;gap:14px}
.chapter::before,.chapter::after{content:"";height:1px;width:40px;background:currentColor;opacity:.5}
.chapter--light{color:var(--crust)}
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--walnut);margin-bottom:14px}
.eyebrow--gold{color:var(--crust)}
.h2{font-size:clamp(34px,4.6vw,64px);max-width:16ch}
.h2 em,.h3 em{color:var(--walnut)}
.dark .h2 em,.xmas .h2 em{color:var(--crust)}
.h3{font-size:clamp(24px,2.4vw,32px)}
.lede{font-size:clamp(17px,1.4vw,20px);max-width:56ch;margin-top:20px;color:var(--muted)}
.dark .lede{color:rgba(249,247,241,.78)}
.source{font-size:13px;color:var(--muted);margin-top:28px}
.dark .source,.source--light{color:rgba(249,247,241,.6)}

/* progress + topbar */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:80}
.progress span{display:block;height:100%;background:var(--crust);transform-origin:0 50%;transform:scaleX(0)}
.topbar{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);transition:background .4s var(--ease),padding .4s var(--ease)}
.topbar.is-solid{background:rgba(32,17,9,.92);backdrop-filter:blur(8px);padding:12px var(--pad)}
.topbar__logo{width:96px;height:auto}
.topbar__mark{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.06em;color:rgba(249,247,241,.82)}
.topbar__mark img{width:104px;height:auto}

/* 1 hero */
.hero{height:100svh;min-height:620px;display:grid;place-items:center;overflow:hidden;color:var(--flour);text-align:center}
.hero__media{position:absolute;inset:-6% 0 0 0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero__shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(10,5,2,.25),rgba(10,5,2,.62) 75%),linear-gradient(180deg,rgba(10,5,2,.45),rgba(10,5,2,0) 30%,rgba(10,5,2,.5))}
.hero__inner{position:relative;padding:0 var(--pad);max-width:1100px}
.hero__eyebrow{color:var(--crust)}
.hero__title{font-size:clamp(36px,5vw,74px);line-height:1.08}
.hero__title .line{display:block}
.hero__title em{color:var(--crust)}
.hero__sub{max-width:46ch;margin:26px auto 0;font-size:clamp(16px,1.3vw,19px);color:rgba(249,247,241,.86)}
.hero__cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(249,247,241,.8);min-height:44px}
.hero__cue span{width:1px;height:38px;background:linear-gradient(var(--crust),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 2 see */
.see{padding:clamp(90px,12vw,170px) var(--pad) clamp(80px,10vw,140px);text-align:center}
.see__statement{font-size:clamp(28px,3.6vw,52px);line-height:1.22;max-width:24ch;margin:0 auto}
.see__statement .w{display:inline-block;white-space:pre}
.see__trio{position:relative;max-width:1100px;margin:clamp(60px,8vw,110px) auto 0;height:clamp(380px,46vw,620px)}
.trio{position:absolute;margin:0;border-radius:var(--r);overflow:hidden;box-shadow:0 30px 60px -30px rgba(32,17,9,.45)}
.trio img{width:100%;height:100%;object-fit:cover}
.trio--a{left:0;top:12%;width:34%;height:74%}
.trio--b{left:31%;top:0;width:38%;height:100%;z-index:2}
.trio--c{right:0;top:22%;width:33%;height:70%}
.see__notes{list-style:none;padding:0;margin:clamp(50px,6vw,80px) auto 0;max-width:1100px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:left}
.see__notes li{border-top:1px solid rgba(32,17,9,.18);padding-top:18px;font-size:16px;color:var(--muted)}
.see__k{display:block;font-family:var(--serif);font-size:24px;color:var(--ink);margin-bottom:8px;letter-spacing:-.02em}
.see__notes small{display:block;margin-top:6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--walnut)}

/* 3 opportunity */
.opp{padding:clamp(90px,11vw,150px) 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(249,247,241,.14);border:1px solid rgba(249,247,241,.14);border-radius:var(--r);overflow:hidden;margin-top:60px}
.stat{background:var(--espresso);padding:36px 28px 32px}
.stat__n{font-family:var(--serif);font-size:clamp(52px,5.6vw,84px);line-height:1;color:var(--crust);letter-spacing:-.04em}
.stat__n small{font-size:.32em;margin-left:6px;color:rgba(249,247,241,.7);letter-spacing:0}
.stat__l{margin-top:16px;font-size:15px;color:rgba(249,247,241,.8)}
.opp__row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
.pill{border:1px solid rgba(193,162,130,.45);border-radius:999px;padding:10px 18px;font-size:14px;color:rgba(249,247,241,.88)}
.opp .source{text-align:center}

/* 4 big bakeries strip */
.big{padding:clamp(90px,11vw,150px) 0 clamp(60px,8vw,100px)}
.big__head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.big__head .lede{margin:0;max-width:44ch}
.strip{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);padding:50px var(--pad) 18px;scrollbar-width:thin;scrollbar-color:var(--walnut) transparent;max-width:none}
@media(min-width:1240px){.strip{padding-left:calc((100vw - 1240px)/2 + var(--pad));scroll-padding-left:calc((100vw - 1240px)/2 + var(--pad))}}
.card{flex:0 0 clamp(270px,26vw,340px);min-height:440px;scroll-snap-align:start;border-radius:var(--r);padding:30px 28px;display:flex;flex-direction:column;gap:12px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(32,17,9,.5)}
.card .card__n{font-family:var(--serif);font-size:72px;line-height:1;letter-spacing:-.04em;margin-bottom:auto}
.card h3{font-size:30px}
.card__where{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.card p{font-size:15px}
.card__tag{margin-top:6px;align-self:flex-start;border:1px solid currentColor;border-radius:999px;padding:5px 12px;font-size:12px!important;letter-spacing:.06em;opacity:.85}
.card--espresso{background:var(--espresso);color:var(--flour)}.card--espresso .card__n{color:var(--crust)}
.card--walnut{background:var(--walnut);color:#fff}
.card--roast{background:var(--roast);color:var(--flour)}.card--roast .card__n{color:var(--crust)}
.card--crust{background:var(--crust);color:var(--espresso)}
.card--flour{background:#efe9dd;color:var(--espresso)}.card--flour .card__n{color:var(--walnut)}

/* 5 today */
.today{padding:clamp(80px,10vw,140px) 0;background:#f2eee5}
.mix{margin:56px auto 0;max-width:1000px}
.mix__bar{display:flex;height:96px;border-radius:var(--r);overflow:hidden;gap:3px}
.mix__seg{width:var(--w);display:flex;align-items:flex-end;padding:14px 16px;font-size:14px;color:var(--flour);transform-origin:0 50%}
.mix__seg b{font-family:var(--serif);font-weight:400;font-size:34px;margin-right:8px;line-height:1}
.mix__seg--c{background:var(--roast)}.mix__seg--r{background:var(--walnut)}.mix__seg--s{background:var(--crust);color:var(--espresso)}
.mix__notes{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:22px}
.mix__notes p{border-top:1px solid rgba(32,17,9,.18);padding-top:12px;font-size:15px;color:var(--muted)}
.mix__notes b{font-family:var(--serif);font-weight:400;font-size:28px;color:var(--ink);margin-right:6px}
.today .h3{margin-top:80px}
.best{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.best__item{margin:0;position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4}
.best__item img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.best__item:hover img{transform:scale(1.05)}
.best__item figcaption{position:absolute;left:0;right:0;bottom:0;padding:50px 18px 16px;background:linear-gradient(transparent,rgba(20,10,5,.8));color:var(--flour);font-family:var(--serif);font-size:20px}
.best__item figcaption span{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--crust);margin-bottom:4px}
.today__note{max-width:60ch;margin-top:40px;color:var(--muted)}

/* 6 reels */
.reels{padding:clamp(90px,11vw,150px) 0;overflow:hidden}
.phones{display:flex;justify-content:center;align-items:center;gap:clamp(20px,3vw,48px);margin:64px auto 0;padding:0 var(--pad)}
.phone{margin:0;text-align:center;width:clamp(220px,20vw,290px)}
.phone--mid{width:clamp(250px,23vw,330px)}
.phone__frame{position:relative;border-radius:42px;background:#0d0705;padding:34px 10px 26px;box-shadow:0 0 0 1.5px #3a281d,0 40px 80px -30px rgba(0,0,0,.8)}
.phone__frame::before{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);width:30%;height:14px;background:#1f1510;border-radius:20px;z-index:2}
.phone__frame video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;border-radius:22px;background:#0d0705}
.phone__sound{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(249,247,241,.35);background:rgba(20,10,5,.55);backdrop-filter:blur(6px);color:var(--flour);font:500 13px var(--sans);white-space:nowrap;cursor:pointer;transition:background .25s}
.phone__sound:hover{background:rgba(20,10,5,.8)}
.phone__sound .ico{width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 9v6h4l5 4V5L8 9H4zm12.5 3l3 3-1.4 1.4-3-3-3 3L10.7 15l3-3-3-3 1.4-1.4 3 3 3-3L19.5 9l-3 3z'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 9v6h4l5 4V5L8 9H4zm12.5 3l3 3-1.4 1.4-3-3-3 3L10.7 15l3-3-3-3 1.4-1.4 3 3 3-3L19.5 9l-3 3z'/></svg>") center/contain no-repeat}
.phone__sound[aria-pressed="true"] .ico{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 9v6h4l5 4V5L8 9H4zm11 3a4 4 0 0 0-2-3.5v7A4 4 0 0 0 15 12zm-2-8v2a6 6 0 0 1 0 12v2a8 8 0 0 0 0-16z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 9v6h4l5 4V5L8 9H4zm11 3a4 4 0 0 0-2-3.5v7A4 4 0 0 0 15 12zm-2-8v2a6 6 0 0 1 0 12v2a8 8 0 0 0 0-16z'/></svg>")}
.phone figcaption{margin-top:22px;font-size:14px;color:rgba(249,247,241,.7)}
.phone figcaption b{display:block;font-family:var(--serif);font-weight:400;font-size:22px;color:var(--flour);margin-bottom:4px}
.compare{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;margin-top:110px;background:rgba(249,247,241,.05);border:1px solid rgba(249,247,241,.1);border-radius:24px;padding:clamp(28px,4vw,56px)}
.compare__text p{color:rgba(249,247,241,.8);margin-top:14px}
.compare__stage{position:relative;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;justify-self:center;width:100%;max-width:360px}
.compare__before,.compare__after img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare__after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.compare__after img{object-position:50% 40%}
.compare__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--flour);transform:translateX(-1px);pointer-events:none}
.compare__handle::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;border-radius:50%;background:var(--flour);transform:translate(-50%,-50%);box-shadow:0 6px 20px rgba(0,0,0,.4);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23201109'><path d='M9 6l-6 6 6 6V6zm6 0v12l6-6-6-6z'/></svg>");background-size:22px;background-repeat:no-repeat;background-position:center}
.compare__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare__lbl{position:absolute;top:14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;background:rgba(20,10,5,.6);color:var(--flour);padding:6px 10px;border-radius:999px;pointer-events:none}
.compare__lbl--l{left:14px}.compare__lbl--r{right:14px}

/* 7 often */
.often{padding:clamp(90px,11vw,150px) 0}
.often__grid{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;margin-top:64px;align-items:center}
.month{background:#fff;border-radius:24px;padding:28px;box-shadow:0 30px 60px -40px rgba(32,17,9,.35)}
.month__days,.month__cells{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.month__days span{text-align:center;font-size:12px;letter-spacing:.1em;color:var(--muted);padding-bottom:10px}
.cell{aspect-ratio:1;border-radius:10px;background:#f2eee5;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;padding-bottom:8px}
.cell i{display:block;width:44%;height:7px;border-radius:4px}
.cell .dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--crust)}
.k--r,.cell .r{background:var(--walnut)}.k--c,.cell .c{background:var(--roast)}.k--s{background:var(--crust)}
.month__key{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font-size:13px;color:var(--muted)}
.month__key .k{display:inline-block;width:14px;height:7px;border-radius:4px;margin-right:6px;vertical-align:middle}
.month__key .k--s{width:8px;height:8px;border-radius:50%}
.often__facts{display:flex;flex-direction:column;gap:28px}
.fact{border-left:2px solid var(--crust);padding-left:22px}
.fact__n{font-family:var(--serif);font-size:48px;line-height:1;color:var(--walnut);letter-spacing:-.03em;margin-bottom:8px}
.fact small{display:block;margin-top:6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--walnut)}
.often__sum{max-width:62ch;margin-top:56px;font-family:var(--serif);font-size:clamp(20px,1.8vw,26px);line-height:1.4}

/* 8 ideas bento */
.ideas{padding:clamp(80px,10vw,140px) 0;background:#f2eee5}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:240px;gap:16px;margin-top:56px}
.tile{position:relative;border-radius:var(--r);overflow:hidden;color:var(--flour);background:var(--roast)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.tile:hover img{transform:scale(1.05)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,8,4,0) 35%,rgba(15,8,4,.78))}
.tile__body{position:absolute;left:0;right:0;bottom:0;padding:22px;z-index:1}
.tile__pct{font-size:12px;letter-spacing:.14em;color:var(--crust);margin-bottom:6px}
.tile h3{font-size:28px;margin-bottom:6px}
.tile p:not(.tile__pct){font-size:15px;color:rgba(249,247,241,.86);max-width:36ch}
.tile--xl{grid-column:span 2;grid-row:span 2}
.tile--tall{grid-row:span 2}
.tile--wide{grid-column:span 1}
.tile--text{background:var(--espresso)}
.tile--text::after{display:none}
.series{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.series__item{background:var(--flour);border:1px solid rgba(32,17,9,.12);border-radius:var(--r);padding:22px;font-family:var(--serif);font-size:20px;line-height:1.35}
.series__item span{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--walnut);margin-bottom:8px}

/* 9 people banner */
.people{min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;color:var(--flour)}
.people__media{position:absolute;inset:-8% 0}
.people__media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.people__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,6,3,.82),rgba(12,6,3,.25) 65%,rgba(12,6,3,.1)),linear-gradient(0deg,rgba(12,6,3,.6),transparent 50%)}
.people__inner{position:relative;max-width:720px;padding:0 var(--pad) clamp(60px,9vw,120px)}
.people__q{font-size:clamp(36px,5vw,72px);line-height:1.08;margin-bottom:24px}
.people__q em{color:var(--flour)}
.people__inner p:last-child{font-size:18px;color:rgba(249,247,241,.86);max-width:52ch}

/* 10 shops diptych */
.shops{padding:clamp(90px,11vw,150px) var(--pad);text-align:center}
.shops__title{font-size:clamp(40px,6vw,88px)}
.shops__title em{color:var(--walnut)}
.diptych{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1300px;margin:56px auto 0}
.dip{margin:0;position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5}
.dip img{width:100%;height:100%;object-fit:cover}
.dip figcaption{position:absolute;left:24px;bottom:24px;text-align:left;color:var(--flour);font-size:15px;line-height:1.5;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.dip figcaption span{display:block;font-family:var(--serif);font-size:clamp(34px,3.6vw,52px);letter-spacing:-.03em;line-height:1;margin-bottom:10px}
.dip::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(12,6,3,.7));pointer-events:none}
.dip figcaption{z-index:1}
.shops__line{max-width:58ch;margin:40px auto 0;color:var(--muted);font-size:18px}

/* 11 xmas (the only split section) */
.xmas{display:grid;grid-template-columns:1fr 1.05fr;background:var(--roast);color:var(--flour);min-height:100vh}
.xmas__img{position:relative;overflow:hidden;min-height:520px}
.xmas__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xmas__body{padding:clamp(70px,8vw,120px) var(--pad)}
.xmas__body .chapter{justify-content:flex-start}
.xmas__body .chapter::before{display:none}
.xmas__list{list-style:none;padding:0;margin:40px 0 0;counter-reset:x}
.xmas__list li{counter-increment:x;position:relative;padding:18px 0 18px 46px;border-top:1px solid rgba(249,247,241,.16);color:rgba(249,247,241,.82);font-size:16px}
.xmas__list li::before{content:counter(x,decimal-leading-zero);position:absolute;left:0;top:20px;font-size:12px;letter-spacing:.1em;color:var(--crust)}
.xmas__list b{display:block;font-family:var(--serif);font-weight:400;font-size:22px;color:var(--flour);margin-bottom:4px}
.tbc{display:inline-block;margin-left:6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--espresso);background:var(--crust);border-radius:999px;padding:2px 9px;vertical-align:2px}
.xmas__series{margin-top:30px;padding:24px;border:1px solid rgba(193,162,130,.4);border-radius:var(--r);font-size:17px;color:rgba(249,247,241,.86)}
.xmas__series em{font-family:var(--serif);font-size:22px;color:var(--flour)}

/* 12 directions */
.dirs{padding:clamp(90px,11vw,150px) 0}
.dirs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.dir{background:#fff;border-radius:20px;padding:34px 30px;border:1px solid rgba(32,17,9,.08);display:flex;flex-direction:column;gap:12px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.dir:hover{transform:translateY(-6px);box-shadow:0 30px 50px -34px rgba(32,17,9,.45)}
.dir__k{font-family:var(--serif);font-size:64px;line-height:1;color:var(--crust)}
.dir h3{font-size:28px}
.dir__sub{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--walnut)}
.dir p{color:var(--muted);font-size:16px}
.dir__best{margin-top:auto;padding-top:14px;border-top:1px solid rgba(32,17,9,.12)}
.dir__best b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);font-weight:500}
.dir__rec{background:var(--espresso);color:var(--flour)!important;border-radius:10px;padding:10px 14px;font-size:14px!important}

/* 13 roadmap */
.road{padding:clamp(90px,11vw,150px) 0}
.timeline{list-style:none;padding:0;margin:64px 0 0;position:relative}
.timeline__line{position:absolute;left:11px;top:8px;bottom:8px;width:1px;background:rgba(249,247,241,.16)}
.timeline__line span{position:absolute;inset:0;background:var(--crust);transform-origin:top;transform:scaleY(0)}
.step{position:relative;padding:0 0 56px 64px}
.step::before{content:"";position:absolute;left:4px;top:6px;width:15px;height:15px;border-radius:50%;background:var(--espresso);border:2px solid var(--crust)}
.step__when{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--crust);margin-bottom:8px}
.step h3{font-size:30px;margin-bottom:10px}
.step p:last-child{color:rgba(249,247,241,.78);max-width:58ch}

/* 14 work + about */
.work{padding:clamp(90px,11vw,150px) 0}
.work .h2{max-width:22ch}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:64px;counter-reset:p}
.proc{border-top:1px solid rgba(32,17,9,.2);padding-top:22px}
.proc__n{font-family:var(--serif);font-size:44px;line-height:1;color:var(--crust);margin-bottom:14px}
.proc h3{font-size:24px;margin-bottom:8px}
.proc p{color:var(--muted);font-size:15px}
.about{max-width:780px;margin:110px auto 0;text-align:center}
.about__text{font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);line-height:1.45;letter-spacing:-.02em}
.about__text em{color:var(--walnut)}

/* 15 extras */
.extras{padding:clamp(70px,8vw,110px) 0;background:#f2eee5}
.extras .chapter{justify-content:flex-start}.extras .chapter::before{display:none}
.extras .h3{margin-bottom:28px;max-width:30ch}
.acc{border-top:1px solid rgba(32,17,9,.18)}
.acc:last-child{border-bottom:1px solid rgba(32,17,9,.18)}
.acc summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-family:var(--serif);font-size:22px;position:relative;min-height:44px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:1.5px solid var(--walnut);border-bottom:1.5px solid var(--walnut);transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease)}
.acc[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.acc p{padding:0 0 22px;color:var(--muted);max-width:62ch}

/* investment (removable) */
.invest{padding:clamp(90px,11vw,150px) 0;border-top:1px solid rgba(32,17,9,.12)}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;align-items:stretch}
.tier{position:relative;background:#fff;border:1px solid rgba(32,17,9,.1);border-radius:22px;padding:36px 30px;display:flex;flex-direction:column}
.tier h3{font-size:32px}
.tier__for{color:var(--muted);font-size:15px;margin-top:6px;min-height:46px}
.tier__price{font-family:var(--serif);font-size:54px;letter-spacing:-.03em;margin:22px 0 18px;line-height:1}
.tier__price span{font-family:var(--sans);font-size:15px;letter-spacing:0;color:var(--muted);margin-left:4px}
.tier ul{list-style:none;padding:0;margin:0;border-top:1px solid rgba(32,17,9,.12)}
.tier li{padding:12px 0 12px 26px;border-bottom:1px solid rgba(32,17,9,.08);font-size:15px;position:relative}
.tier li::before{content:"";position:absolute;left:2px;top:19px;width:10px;height:6px;border-left:1.5px solid var(--walnut);border-bottom:1.5px solid var(--walnut);transform:rotate(-45deg)}
.tier--rec{background:var(--espresso);color:var(--flour);border-color:var(--espresso);box-shadow:0 40px 70px -40px rgba(32,17,9,.7)}
.tier--rec .tier__for,.tier--rec .tier__price span{color:rgba(249,247,241,.7)}
.tier--rec ul,.tier--rec li{border-color:rgba(249,247,241,.14)}
.tier--rec li::before{border-color:var(--crust)}
.tier__badge{position:absolute;top:-13px;left:30px;background:var(--crust);color:var(--espresso);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px;font-weight:500}
.setup{margin-top:20px;text-align:center;background:#f2eee5;border-radius:16px;padding:22px;color:var(--muted)}
.setup b{color:var(--ink);font-weight:500}

/* 16 close */
.close{min-height:92vh;display:grid;place-items:center;text-align:center;color:var(--flour);overflow:hidden}
.close__media{position:absolute;inset:-6% 0}
.close__media img{width:100%;height:100%;object-fit:cover}
.close__shade{position:absolute;inset:0;background:rgba(12,6,3,.55)}
.close__inner{position:relative;padding:0 var(--pad)}
.close__title{font-size:clamp(42px,6vw,88px);margin-bottom:18px}
.close__title em{color:var(--crust)}
.close__inner p{font-size:18px;color:rgba(249,247,241,.86)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;margin-top:36px;padding:0 34px;border-radius:999px;background:var(--flour);color:var(--espresso);text-decoration:none;font-weight:500;font-size:16px;letter-spacing:.02em;transition:background .3s,color .3s,transform .4s var(--ease)}
.btn:hover{background:var(--crust)}
.foot{background:var(--espresso);color:rgba(249,247,241,.7);padding:56px var(--pad);text-align:center;font-size:14px}
.foot img{margin:0 auto 20px;width:150px;height:auto}
.foot p+p{margin-top:8px}
.foot__credit{font-size:12px;color:rgba(249,247,241,.55)}

/* reveal starting states: only with JS, never with reduced motion */
.js .reveal{opacity:0;transform:translateY(28px)}
.js .reveal-words .w{opacity:.14}
.js .hero__title .line,.js .hero__eyebrow,.js .hero__sub{opacity:0;transform:translateY(24px)}
.js .mix__seg{transform:scaleX(0)}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .hero__title .line,.js .hero__eyebrow,.js .hero__sub{opacity:1;transform:none}
  .js .reveal-words .w{opacity:1}
  .js .mix__seg{transform:none}
  .timeline__line span{transform:none}
  .hero__cue span{animation:none}
  html{scroll-behavior:auto}
}

/* responsive */
@media (max-width:980px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .best{grid-template-columns:repeat(2,1fr)}
  .compare{grid-template-columns:1fr;gap:30px}
  .often__grid{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px}
  .tile--xl{grid-column:span 2}
  .tile--wide{grid-column:span 2}
  .series,.dirs__grid,.tiers{grid-template-columns:1fr}
  .process{grid-template-columns:repeat(2,1fr)}
  .xmas{grid-template-columns:1fr;min-height:0}
  .xmas__img{min-height:420px}
  .see__notes{grid-template-columns:1fr;gap:24px}
  .mix__notes{grid-template-columns:repeat(2,1fr)}
  .tier--rec{order:-1}
}
@media (max-width:640px){
  body{font-size:16px}
  .topbar__mark span{display:none}
  .topbar__mark{font-size:10px;gap:6px}
  .topbar__mark img{width:84px}
  .topbar__logo{width:78px}
  .see__trio{height:420px}
  .trio--a{width:46%;top:4%;height:60%}
  .trio--b{left:24%;width:52%;top:24%;height:72%}
  .trio--c{width:44%;top:0;height:50%}
  .stat{padding:26px 18px}
  .phones{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;scrollbar-width:none}
  .phone,.phone--mid{flex:0 0 74%;scroll-snap-align:center;width:auto}
  .bento{grid-template-columns:1fr;grid-auto-rows:260px}
  .tile--xl,.tile--tall,.tile--wide{grid-column:auto;grid-row:auto}
  .tile--xl{grid-row:span 1}
  .diptych{grid-template-columns:1fr}
  .process{grid-template-columns:1fr}
  .mix__bar{height:120px}
  .mix__seg{flex-direction:column;align-items:flex-start;justify-content:flex-end;font-size:12px;padding:10px}
  .mix__seg b{font-size:28px}
  .people{min-height:80vh}
  .card{min-height:400px}
  .month{padding:16px}.month__cells,.month__days{gap:5px}
}

.strip__hint{margin-top:34px;margin-bottom:-30px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--walnut);text-align:right}
.strip__hint::after{content:"";display:inline-block;width:28px;height:1px;background:currentColor;margin-left:10px;vertical-align:middle}
.tile--series{background:var(--flour);color:var(--ink);border:1px solid rgba(32,17,9,.12)}
.tile--series::after{display:none}
.tile--series .tile__pct{color:var(--walnut)}
.tile__q{font-family:var(--serif);font-size:22px!important;line-height:1.35;color:var(--ink)!important}
@media (max-width:640px){.tile--series,.tile--text{min-height:0}.bento{grid-auto-rows:minmax(200px,auto)}.tile--series,.tile--text{height:auto}}

.shops__addr{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1300px;margin:26px auto 0;text-align:left}
.shops__addr p{border-top:1px solid rgba(32,17,9,.18);padding-top:16px;color:var(--muted)}
.shops__addr span{display:block;font-family:var(--serif);font-size:clamp(30px,3vw,44px);letter-spacing:-.03em;color:var(--ink);line-height:1.1;margin-bottom:6px}
@media (max-width:640px){.shops__addr{grid-template-columns:1fr}}
/* small text on cream uses a slightly deeper walnut for 4.5:1 contrast; large serif keeps brand walnut */
:root{--walnut-ink:#86573A}
.chapter,.eyebrow,.see__notes small,.fact small,.dir__sub,.strip__hint,.tile--series .tile__pct,.card--flour .card__where{color:var(--walnut-ink)}
.chapter--light,.eyebrow--gold{color:var(--crust)}
@media (max-width:640px){.hero__shade{background:linear-gradient(180deg,rgba(10,5,2,.55),rgba(10,5,2,.6) 50%,rgba(10,5,2,.7))}}
.hero__title,.hero__sub,.people__q,.close__title{text-shadow:0 2px 24px rgba(0,0,0,.35)}