/* Refinement, 15 Oct 2026 (Ashish: same colours, used subtly; elegant and premium).
   The four flower colours, petal mist, gold and night stay. Deep colours carry words, names and fine lines;
   soft tints replace full-colour fields; at most one dark section a page; less space between sections. */
.atf{--veil-h:#F3E3E7;--veil-l:#E7E1EF;--veil-b:#E9E3EE;--veil-m:#F2E8EA;--veil-g:#E2EAE4;--violet:#24135F;--hair:rgba(36,19,95,.14);--sec:clamp(88px,8vw,140px)}
.sf-veil-h{background:var(--veil-h);--cover:var(--veil-h)}
.sf-veil-l{background:var(--veil-l);--cover:var(--veil-l)}
.sf-veil-b{background:var(--veil-b);--cover:var(--veil-b)}
.sf-veil-m{background:var(--veil-m);--cover:var(--veil-m)}
.sf-veil-g{background:var(--veil-g);--cover:var(--veil-g)}
.sf-violet{background:#24135F;--cover:#24135F;color:#FFFFFF}

/* photo spots waiting for a photo: a soft tone with the gold monogram, never a grey box */
.slot.empty::before{content:"";position:absolute;left:50%;top:50%;width:min(36%,170px);aspect-ratio:3/2;translate:-50% -50%;background:url(/assets/img/mono-gold.svg) center/contain no-repeat;opacity:.2;pointer-events:none}
.slot.empty.dk::before,.hs .slot.empty::before,.fmom .slot.empty::before,.bloom .slot.empty::before,.sf-violet .slot.empty::before{background-image:url(/assets/img/mono-foil.svg);opacity:.16}
.hs .slot.empty::before{top:36%;width:min(22%,220px)}
.fp .slot.empty::before,.next .slot.empty::before{display:none}
.hs1 .slot{--sf:#2B2140}.hs2 .slot{--sf:#33202D}.hs3 .slot{--sf:#231B3F}.hs4 .slot{--sf:#2A1B3A}

/* ---------- home ---------- */
.track{font-size:clamp(56px,7vw,112px)}
.live .hpan .track{font-size:clamp(44px,7vh,96px)}
.hpan-cta{background:var(--veil-m)}

/* moments: four panels side by side; the one you point at opens wide (round 3) */
.mom{padding-top:var(--sec)}
.mom-h{font-size:clamp(48px,6vw,104px)}
.mps{display:flex;gap:4px;height:clamp(520px,78vh,820px);margin-top:clamp(40px,4.4vw,72px)}
.mp{position:relative;flex:1 1 0;min-width:0;overflow:hidden;transition:flex-grow 1.1s cubic-bezier(.76,0,.24,1)}
.mp.on{flex-grow:4.4}
.mp .slot{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.mp:not(.on) .slot{transform:scale(1.06)}
.mp .slot.empty::before{width:min(40%,150px)}
.mp:not(.on) .slot.empty::before{opacity:.12}
.mp::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(26,18,36,.62),rgba(26,18,36,.08) 46%,rgba(26,18,36,0) 70%);opacity:0;transition:opacity .6s}
.mp:has(.slot.has-ph)::after{opacity:1}
.mp-b{position:absolute;inset:0;z-index:2;appearance:none;border:0;background:none;margin:0;padding:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.mp:has(.slot.has-ph) .mp-b{color:#FFFFFF}
.mp-b:focus-visible{outline:2px solid #A8854F;outline-offset:-6px}
.mp-tx{position:absolute;left:clamp(20px,2.4vw,44px);right:clamp(20px,2.4vw,44px);bottom:clamp(24px,3vw,52px);display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.mp-t{display:block;font-weight:500;line-height:.98;letter-spacing:-.01em}
.mp.on .mp-t{font-size:clamp(44px,4.6vw,80px);font-style:italic}
.mp:not(.on) .mp-t{writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(22px,1.8vw,30px);white-space:nowrap;opacity:.88}
.mp-p{display:block;max-width:34ch;font-size:clamp(15px,1.1vw,17px);line-height:1.55;opacity:.86}
.mp:not(.on) .mp-p{display:none}
.mp.on .mp-tx{animation:mpin .9s cubic-bezier(.2,.7,.2,1) .3s both}
@keyframes mpin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mp,.mp .slot{transition:none}.mp.on .mp-tx{animation:none}}

/* why flowers: where the two flowers grow, two photographs set as a spread (15 Oct) */
.why{position:relative;background:transparent;color:var(--ink);--cover:#EEE6EC;margin-top:var(--sec);padding:0 0 clamp(40px,4vw,72px)}
.why .fz-why{display:none}
.why h2{grid-column:1/10;font-size:clamp(40px,4.6vw,80px);font-weight:500;line-height:1.02;margin:0 0 clamp(56px,6vw,104px);color:#24135F}
.why .c-sky{color:#9B8FB3}.why h2 em{color:#24135F}
.wf{margin:0;min-width:0}
.wf1{grid-column:1/7;grid-row:2}
.wf2{grid-column:8/13;grid-row:2/4;margin-top:clamp(120px,14vw,240px)}
.wf-ph{position:relative;overflow:hidden;aspect-ratio:4/5;background:#E4DAE0}
.wf-ph .fpic{display:block;width:100%;height:100%;object-fit:cover}
.live .wf-ph .fpic{scale:calc(1.12 - var(--p,1) * .12)}
.live .wf-ph{clip-path:inset(calc((1 - var(--p,1)) * 10%) calc((1 - var(--p,1)) * 8%))}
.wf figcaption{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap);align-items:baseline;margin-top:26px;padding-top:22px;border-top:1px solid rgba(168,133,79,.4)}
.wf h3{margin:0;font-size:clamp(34px,3.2vw,54px);font-style:italic;font-weight:500;line-height:1}
.wf p{margin:0;font-size:15.5px;line-height:1.6;color:var(--body)}
.wf p strong,.wf p em{color:var(--ink)}
.wf-end{grid-column:1/6;grid-row:3;align-self:start;margin-top:clamp(64px,6vw,104px)}
.wf-end h3{margin:0 0 14px;font-size:clamp(30px,2.6vw,44px);font-weight:500;line-height:1.05;color:#8F6200}
.wf-end p{margin:0;font-size:15.5px;line-height:1.6;color:var(--body);max-width:40ch}
.wf-end .small{margin:18px 0 22px;color:var(--mute);font-size:12.5px}
/* a photo spot standing in with a flower photograph until the real photo is uploaded */
.slot.standin .fpic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* turn the can around: a soft marigold tint, two pictures side by side */
.turn{background:var(--veil-m);--cover:var(--veil-m);padding:clamp(80px,8vw,128px) 0}
.turn-v{aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.turn-v .tv{position:relative;left:auto;top:auto;width:auto;box-shadow:none}
.turn-v .tv2{margin-top:14%}
.turn-v .tv .slot{aspect-ratio:3/4;--sf:rgba(90,59,0,.07)}
.turn h2{font-size:clamp(40px,4.2vw,72px)}
.turn .claims svg *{stroke:#9A7638}
.turn .claims li{border-top-color:var(--hair)}

/* the bloom: night and gold instead of violet (round 2); the serves as a bar menu */
.sf-night{background:#1A1224;--cover:#1A1224;color:#FFFFFF}
.bloom{background:#1A1224;--cover:#1A1224;padding:clamp(80px,8vw,128px) 0}
.bloom .slot.empty::before,.sf-night .slot.empty::before{background-image:url(/assets/img/mono-foil.svg);opacity:.16}
.bl-top{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end}
.bl-top .bl-h{grid-column:1/8;font-size:clamp(42px,4.6vw,80px)}
.bl-side{grid-column:9/13;display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-bottom:.3em}
.bl-side .bl-sub{margin:0;font-size:clamp(24px,2vw,32px);line-height:1.15;color:#E9D3A6}
.bloom .bl-side .lede{color:rgba(255,255,255,.74);margin:0}
.bloom .bl-side .pill{background:#E9D3A6;color:#1A1224;margin-top:6px}
.bl-body{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;margin-top:clamp(52px,5.4vw,88px)}
.bl-ph{grid-column:1/5;margin:0;position:sticky;top:96px;min-width:0}
.bl-ph .slot{aspect-ratio:4/5;--sf:#241B2E}
.bl-menu{grid-column:1/-1;min-width:0}
.bl-body .bl-menu{grid-column:6/13}
.fieldc .bl-menu,.cks-s .bl-menu{margin-top:clamp(44px,4.6vw,72px)}
.bl-note{grid-column:1/-1;color:rgba(255,255,255,.5) !important;margin-top:36px !important}

/* the menu: a column a flower, a row a spirit, gold hairlines */
.mn{--gold:#C7A069;--rule:rgba(199,160,105,.24);--cg:clamp(22px,2.6vw,44px)}
.mn-hd,.mn-r{display:grid;grid-template-columns:minmax(76px,.4fr) repeat(var(--n),minmax(0,1fr));column-gap:var(--cg)}
.mn-hd{padding-bottom:20px}
.mn-f{appearance:none;border:0;background:none;padding:0;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(22px,1.8vw,28px);line-height:1.1;color:var(--fc);display:flex;align-items:center;gap:12px;text-align:left;cursor:default}
.mn-f i{width:6px;height:6px;border-radius:50%;background:var(--fc);flex:none}
.mn-r{border-top:1px solid var(--rule);padding:clamp(26px,2.6vw,40px) 0}
.mn-r:last-child{border-bottom:1px solid var(--rule)}
.mn-s{margin:0;padding-top:.5em;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(20px,1.6vw,24px);line-height:1;color:var(--gold)}
.mn-c{position:relative;min-width:0}
.mn-r .mn-c + .mn-c::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--cg) / -2);width:1px;background:var(--rule)}
.mn-k{display:none;margin:0 0 10px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fc)}
.mn-n{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(32px,2.8vw,46px);line-height:1;letter-spacing:-.01em;color:#F6EFE6;transition:color .35s ease}
.mn-c:hover .mn-n{color:var(--fc)}
.mn-l{margin:9px 0 0;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(18px,1.35vw,20px);line-height:1.3;color:rgba(255,255,255,.7)}
.mn-g{margin:14px 0 0;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,211,166,.62)}
.mn:not(.mn-multi){max-width:900px}

/* the recipe under each serve */
.rc-d{margin-top:16px}
.rc-d summary{list-style:none;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:#E9D3A6}
.rc-d summary::-webkit-details-marker{display:none}
.rc-d .tg{position:relative;width:11px;height:11px}.rc-d .tg::before,.rc-d .tg::after{top:5px;background:#E9D3A6}
.rc-dl{margin:16px 0 2px;padding-top:16px;border-top:1px solid var(--rule,rgba(255,255,255,.14));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
.rc-dl > div{min-width:0}.rc-dl .rc-m{grid-column:1/-1}
.rc-dl dt{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(233,211,166,.8);margin:0 0 5px}
.rc-dl dd{margin:0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.82)}
.rc-dl ol{margin:0;padding-left:18px}
.rc-dl li{margin:0 0 4px;padding-left:2px}
.rc-dl li::marker{color:#E9D3A6;font-size:12px;font-weight:700}

/* founder quote, find us, doors, questions: closer together, calmer type */
.quote{padding-top:var(--sec)}
.q-b blockquote{font-size:clamp(34px,3.6vw,60px)}
.find{padding-top:var(--sec)}
.giant{font-size:clamp(76px,11vw,184px);line-height:.84;color:#24135F}
.stores,.map{margin-top:clamp(36px,4vw,56px)}
.map{aspect-ratio:16/11}
.doors{margin-top:var(--sec)}
.door{min-height:clamp(540px,42vw,680px)}
.d-bars{background:var(--veil-l);color:#24135F;--cover:var(--veil-l)}
.d-bars p.dp{color:var(--body)}
.d-bars .pill{background:#24135F;color:#FFFFFF}
.d-bars .slot.dk{--sf:rgba(36,19,95,.07);--sc:#2B2340}
.d-bars .slot.empty.dk::before{background-image:url(/assets/img/mono-gold.svg);opacity:.2}
.d-gift{background:var(--veil-m);--cover:var(--veil-m)}
.faq{padding-top:var(--sec)}
.faq-h h2{font-size:clamp(44px,4.6vw,78px)}
.ft{margin-top:var(--sec);padding-top:clamp(64px,6vw,100px)}
.city label em{color:#E9D3A6}
.ft-mark{margin-top:clamp(56px,6vw,96px)}
.ft-mark img{max-width:1120px}

/* ---------- flower pages ---------- */
.taste{padding-top:var(--sec)}
.tags{font-size:clamp(52px,6vw,100px)}
.fwhy{color:var(--ink);margin-top:var(--sec);padding:clamp(80px,8vw,128px) 0}
.fwhy h2{font-size:clamp(48px,5.4vw,92px)}
.fwhy .origin{color:var(--body)}
.qual{border-top-color:var(--hair)}
.qual p{color:var(--body)}
.fwhy .small{color:var(--mute)}
.fwhy .slot{--sf:rgba(36,19,95,.07)}
.fmom{margin-top:var(--sec);height:clamp(480px,46vw,720px)}
.ways-s{padding-top:var(--sec)}
.ways-s h2{font-size:clamp(44px,4.6vw,78px)}
.way{border-top-width:1px}
.cks-s{margin-top:var(--sec);padding:clamp(80px,8vw,128px) 0}
.fin{background:transparent;--cover:#EEE6EC;padding:var(--sec) 0 0}
.fin-c h2{color:#24135F}
.fin .claims li{color:#24135F;border-top-color:var(--hair)}
.fin .claims svg *{stroke:#9A7638}
.fin .small,.nt-cap{color:var(--mute)}
.fin-ph .slot{--sf:rgba(36,19,95,.06);--sc:var(--body)}
.nt th{color:#24135F;border-bottom-color:rgba(36,19,95,.3)}
.nt td{border-bottom-color:var(--hair)}
.next{margin-top:var(--sec)}

/* ---------- inner pages ---------- */
.s{padding-top:clamp(80px,8vw,136px)}
.fieldc{margin-top:clamp(80px,8vw,136px);padding:clamp(72px,7vw,120px) 0}
.phero:not(.dk) .phero-sub.it{color:#8C6A35}
.thero-h{font-size:clamp(56px,7vw,124px)}
.flavor-l{font-size:clamp(48px,6vw,104px);margin-top:clamp(48px,5vw,88px)}

@media (max-width:1100px){
.mps{height:clamp(480px,64vh,640px)}
.wf1{grid-column:1/7}.wf2{grid-column:7/13;margin-top:80px}
.wf figcaption{grid-template-columns:minmax(0,1fr);gap:10px}
.wf-end{grid-column:1/7}
.bl-top .bl-h,.bl-side{grid-column:1/-1}.bl-side{margin-top:28px}
.bl-ph{grid-column:1/-1;position:static}.bl-ph .slot{aspect-ratio:16/9}
.bl-body .bl-menu{grid-column:1/-1;margin-top:44px}
.turn-v{grid-column:1/13;max-width:none}
}
@media (max-width:760px){
.mom-h{font-size:40px}
.mom-h .ln:nth-child(2){text-align:left}
.fp .tile,.next .tile{display:none}
.mom-h{font-size:44px}
.mps{flex-direction:column;height:auto;gap:3px}
.mp{flex:none;height:78px;transition:height .9s cubic-bezier(.76,0,.24,1)}
.mp.on{height:min(122vw,560px)}
.mp:not(.on) .mp-t{writing-mode:horizontal-tb;transform:none;font-size:25px}
.mp-tx{left:var(--gut);right:var(--gut);bottom:22px;gap:12px}
.mp:not(.on) .mp-tx{bottom:24px}
.mp.on .mp-t{font-size:44px}
.why h2{grid-column:1/-1;font-size:34px}
.why h2 .ln,.why h2 .ln > span{display:inline;margin:0;padding:0}.why h2 .ln::after{content:" "}
.mp:not(.on) .slot.empty::before{display:none}
.wf1,.wf2,.wf-end{grid-column:1/-1;grid-row:auto}
.wf2{margin-top:48px;width:84%;justify-self:end}
.wf-end{margin-top:48px}
.why h2{margin-bottom:44px}
.why h2{font-size:30px}
.turn-v{grid-column:1/-1}
.bl-top .bl-h{font-size:40px}
.bl-ph .slot{aspect-ratio:4/3}
.mn-hd{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:22px}
.mn-hd > span{display:none}
.mn-f{cursor:pointer;font-size:20px;padding:9px 18px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rule);transition:box-shadow .3s,background .3s}
.mn-f[aria-selected="true"]{box-shadow:inset 0 0 0 1px var(--fc);background:rgba(255,255,255,.05)}
.mn-r{grid-template-columns:64px minmax(0,1fr);column-gap:16px;row-gap:26px;padding:24px 0}
.mn-r .mn-c{grid-column:2}
.mn-r .mn-c + .mn-c::before{display:none}
.mn-multi .mn-c.off,.mn-x{display:none}
.mn-s{font-size:19px}
.mn-n{font-size:32px}
.mn-l{font-size:18px}
.giant{font-size:24vw}
.door{min-height:560px}
.tags{font-size:52px}
.fwhy h2{font-size:46px}
.fmom{height:540px}
.ways-s h2{font-size:40px}
.thero-h{font-size:52px}
.flavor-l{font-size:42px}
}

/* meet the flowers: narrower panels, so the sideways pin needs about half the scrolling */
@media (min-width:761px){
.live .hpan-intro{width:min(32vw,520px)}
.live .hpan .fp{width:min(46vw,780px)}
.live .hpan-cta{width:min(28vw,420px)}
.live .hpan .fp-name{font-size:clamp(92px,9.4vw,160px)}
.live .hpan .fp-txt{width:min(48%,300px)}
}

/* round 2: a slimmer top bar, so the first screen shows more */
.hdr,.mnu-top{height:68px}
.hdr-logo img,.mnu-logo img{height:36px}
.hdr .pill{height:40px;padding:0 18px}
.hdr .icon-btn{width:40px;height:40px}
.live .hero{height:max(620px,calc(var(--vh,100vh) - 68px))}
@media (max-width:760px){
.hdr,.mnu-top{height:58px}
.hdr-logo img,.mnu-logo img{height:30px}
.hdr .icon-btn{width:38px;height:38px}
.live .hero{height:max(600px,calc(var(--vh,100vh) - 58px))}
}

/* round 3: a light footer, gold wordmark on the lavender tint */
.ft{background:var(--veil-l);color:var(--body)}
.ft-mark img{content:url(/assets/img/wordmark-gold.svg)}
.city label{color:#24135F}
.city label em{color:#A8854F}
.city input{border-color:rgba(27,20,32,.22);color:var(--ink)}
.city input::placeholder{color:rgba(27,20,32,.45)}
.ft .sent{color:#24135F}
.city .cfld,.city .agree{color:var(--body)}
.cfld span{color:#8C6A35}
.city .agree input{accent-color:#24135F}
.city .agree a{color:#24135F}
.ft-cols h4{color:#8C6A35}
.ft-cols a{color:var(--ink)}
.soc a{box-shadow:inset 0 0 0 1px rgba(27,20,32,.2);color:#8C6A35}
.soc a:hover{background:#24135F;color:#FFFFFF}
.legal{border-top-color:rgba(27,20,32,.14);color:var(--mute)}
.legal a{color:var(--body)}
.fs-logo{box-shadow:0 0 0 1px rgba(27,20,32,.1)}

/* round 3: flowers cut from photographs, used as design elements across the site. One flower a section at most,
   at the edges, behind the words (the section is its own layer, the flower sits just above its background). */
.has-fl{position:relative;isolation:isolate}
.flw{position:absolute;z-index:-1;display:block;height:auto;max-width:none;pointer-events:none;user-select:none;-webkit-user-drag:none;width:var(--w,240px);rotate:var(--r,0deg);scale:var(--fx,1) 1;filter:drop-shadow(0 22px 26px rgba(27,20,32,.14))}
.flw-up{z-index:3}
.dk .flw,.sf-night .flw,.bloom .flw,.cks-s .flw{filter:drop-shadow(0 24px 34px rgba(0,0,0,.5))}
@media (max-width:760px){.flw{width:var(--wm,calc(var(--w,240px) * .62))}.flw-nph{display:none}}

/* ---------- the flower photographs and the cans (15 Oct, Ashish's photos and pack mockups) ---------- */
.fpic{display:block;width:100%;height:100%;object-fit:cover}
/* meet the flowers: the flower's photo fills its panel, a tint veil keeps the words readable, the can stands in front */
.fp-ph .fp-bg{position:absolute;inset:-6% 0;z-index:0}
.fp-ph .fp-bg .fpic{object-position:70% 50%}
.fp-ph::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(238,230,236,.9) 0%,rgba(238,230,236,.66) 30%,rgba(238,230,236,.1) 58%,rgba(238,230,236,0) 100%)}
.fp-ph::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(238,230,236,.86) 0%,rgba(238,230,236,.4) 20%,rgba(238,230,236,0) 42%)}
.fp-ph .fp-name{z-index:3;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.fp-ph .fp-txt{z-index:3}
.fp-ph .fp-desc{color:var(--ink)}
.fp-canw{position:absolute;right:10%;bottom:5%;height:72%;z-index:2;filter:drop-shadow(0 30px 34px rgba(27,20,32,.42)) drop-shadow(0 4px 6px rgba(27,20,32,.2))}
.fp-can{display:block;height:100%;width:auto}
.live .fp-canw{translate:0 var(--sy,0px)}
.fp-ph .fz-can{z-index:2;opacity:.7}
@media (max-width:1100px){.fp-canw{right:8%;height:64%}}
@media (max-width:760px){.fp-ph::before{background:linear-gradient(180deg,rgba(238,230,236,.9) 0%,rgba(238,230,236,.3) 40%,rgba(238,230,236,0) 70%)}.fp-ph::after{background:linear-gradient(0deg,rgba(238,230,236,.92) 0%,rgba(238,230,236,.6) 30%,rgba(238,230,236,0) 55%)}.fp-canw{right:4%;bottom:6%;height:54%}.fp-ph .fp-bg .fpic{object-position:70% 40%}.fp-ph .fp-txt{width:52%;bottom:28px}.fp-ph .fp-line{font-size:24px}.fp-ph .fp-desc{font-size:14px}}
.slot.standin .cand{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* turn the can around: the two sides of the can, large, overlapping (15 Oct) */
.turn-v{grid-column:1/8;display:block;aspect-ratio:1/0.92;align-self:center}
.turn-v .tv{position:absolute;width:auto}
.turn-v .tv1{left:0;top:0;width:56%}
.turn-v .tv2{left:46%;top:24%;width:52%;margin:0;z-index:2;box-shadow:0 0 0 clamp(8px,.9vw,14px) var(--veil-m)}
.turn-v .tv .slot{aspect-ratio:1/1}
.turn-t{grid-column:9/13}
.fin-ph .slot.standin{aspect-ratio:1/1}
@media (max-width:1100px){.turn-v{grid-column:1/13;max-width:640px;aspect-ratio:1/0.95}.turn-t{grid-column:1/13}}
@media (max-width:760px){.turn-v{grid-column:1/-1;max-width:none}.turn-t{grid-column:1/-1}}

/* generated photos: keep the top of the hero pictures (cans, pours) when the viewport is shorter than 16:10 */
.hs .slot.has-ph img{object-position:50% 22%}
.hs::after{background:linear-gradient(180deg,rgba(12,6,18,0) 34%,rgba(12,6,18,.6) 100%),linear-gradient(90deg,rgba(12,6,18,.28) 0%,rgba(12,6,18,0) 48%)}
.phero-ph .slot.has-ph img,.fh .slot.has-ph img{object-position:50% 18%}
.fmom .slot.has-ph img{object-position:50% 30%}
@media (max-width:760px){.fmom .slot.has-ph img{object-position:72% 30%}}



/* corners: edge-to-edge pictures stay square; framed pictures take a soft radius; the founder keeps the arch */
.atf{--rad:clamp(14px,1.5vw,24px)}
.slot.has-ph,.slot.standin,.slot.empty,.wf-ph{border-radius:var(--rad);overflow:hidden}
.hs .slot,.fmom .slot,.door-ph .slot,.fp .slot{border-radius:0}
.phero-ph .slot,.fh .slot{border-radius:var(--rad) 0 0 var(--rad)}
.slot.arch{border-radius:999px 999px 0 0}
.mp{border-radius:var(--rad);overflow:hidden}
.turn-v .tv .slot{border-radius:10px}
.bl-ph .slot{border-radius:var(--rad)}
@media (max-width:760px){.phero-ph .slot,.fh .slot{border-radius:0}.mp{border-radius:12px}}

/* Turn the can: the story panel of each can, side by side, aligned, like two pages */
.turn-v{grid-column:1/8;aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px);align-items:start}
.turn-v .tv{position:static;width:auto;margin:0}
.turn-v .tv1,.turn-v .tv2{left:auto;top:auto;width:auto;z-index:auto;box-shadow:none}
.turn-v .tv .slot{aspect-ratio:1000/908;border-radius:10px;box-shadow:0 18px 40px -22px rgba(42,27,58,.45)}
.turn-v .tv .slot.standin .cand{object-fit:cover;object-position:50% 50%}
.tv-cap{margin:12px 2px 0;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8C6A35}
@media (max-width:760px){.turn-v{grid-template-columns:1fr;gap:18px}}

/* Opening: headline and its line stack on the left, so nothing sits over the cans (subjects live in the right half) */
@media (min-width:1101px){
.hero .h1{grid-column:1/8}
.hero .hside{grid-column:1/6;grid-row:2;margin-top:26px;padding:0;flex-direction:row;align-items:center;gap:28px}
.hero .ht{row-gap:0}
.hero .hsub{max-width:30ch}
}