/* ===== draft B: one day at the patio table. Built on the approved hero's ground, faces and orange ===== */
:root{--tb:0;--cream:#f7efe1;--slab:#26436f;--bar-h:64px;
  --fg:color-mix(in srgb,var(--cream) calc(var(--tb) * 100%),var(--ink));
  --fg-soft:color-mix(in srgb,#cdd6e6 calc(var(--tb) * 100%),var(--soft));
  --fg-rule:color-mix(in srgb,rgba(247,239,225,.22) calc(var(--tb) * 100%),var(--rule))}
html{scroll-behavior:smooth}
html,body{height:auto}
body{background:transparent}
.hero{z-index:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ground{position:fixed;inset:0;z-index:-2;background:var(--ground)}
.sun{position:fixed;inset:-12% -10%;z-index:0;pointer-events:none;mix-blend-mode:multiply;opacity:0;will-change:transform,opacity}
.sun canvas{width:100%;height:100%;display:block}
main{position:relative;z-index:1;color:var(--fg)}
main h2{font-family:"LT Superior",serif;font-weight:400;font-size:clamp(44px,5.6vw,96px);line-height:.98;letter-spacing:-.035em}
main h2 em{font-family:"Herbik",serif;font-style:italic;font-weight:400;letter-spacing:-.02em;color:color-mix(in srgb,#f3c9a8 calc(var(--tb) * 100%),var(--blue))}
.lede-s{font-size:clamp(16px,1.15vw,18px);line-height:1.6;color:var(--fg-soft);max-width:31em;text-wrap:pretty}

.rv{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.goods li.rv{transform:translateY(26px)}.goods li.rv.in{transform:none}
.goods li:nth-child(2){transition-delay:.08s}.goods li:nth-child(3){transition-delay:.16s}.goods li:nth-child(4){transition-delay:.24s}.goods li:nth-child(5){transition-delay:.32s}
/* the hour chip: a little sundial, the page's rhythm mark (9 am, 12 pm, 1 pm, 2 pm, 3 pm) */
.chip{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-soft)}
.chip svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--orange);stroke-width:1.5;stroke-linecap:round}
.chip i{width:18px;height:1px;background:currentColor;opacity:.45}

/* ---------- the slim bar ---------- */
.bar{position:fixed;left:0;right:0;top:0;z-index:40;height:var(--bar-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--side);
  background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--rule);
  transform:translateY(-102%);transition:transform .6s var(--ease)}
.bar.on{transform:none}
.b-brand{display:flex;align-items:center;gap:10px;justify-self:start}
.b-brand svg{width:24px;height:29px}
.b-brand b{font-family:"LT Superior",serif;font-weight:500;font-size:19px;letter-spacing:-.01em}
.b-links{display:flex;gap:4px;font-size:14px;font-weight:500}
.b-links a{padding:7px 13px;border-radius:99px;transition:background .3s var(--ease)}
.b-links a:hover,.b-links a.here{background:rgba(39,35,31,.07)}
.b-r{justify-self:end;display:flex;align-items:center;gap:16px}
.clock{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--soft);min-width:72px}
.clock svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round}
.clock svg line{stroke:var(--orange);stroke-width:1.8}

/* ---------- 9 am / 12 pm: the menu ---------- */
.menu{padding:clamp(110px,12vw,180px) var(--side) 0}
.m-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,120px);align-items:start}
.stage{position:sticky;top:calc(var(--bar-h) + 28px);height:calc(100svh - var(--bar-h) - 56px);max-height:820px;display:flex;align-items:center}
.plate{position:relative;width:100%;aspect-ratio:4/5;max-height:100%;margin:auto 0;border-radius:24px;box-shadow:0 40px 80px -46px rgba(39,35,31,.6)}
.plate>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:24px;opacity:0;transform:scale(1.06);transition:opacity .9s var(--ease),transform 1.6s var(--ease)}
.plate>img.on{opacity:1;transform:none}
.s-cord{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.s-cord line{stroke:rgba(255,252,245,.95);stroke-width:1.2;transition:all .7s var(--ease)}
.s-pin{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--paper);z-index:3;box-shadow:0 0 0 1px rgba(39,35,31,.25),0 2px 6px rgba(39,35,31,.3);transition:transform .7s var(--ease)}
.s-pin::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--orange)}
.s-pin::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(255,252,245,.95);animation:ping 3.2s var(--ease) infinite}
.s-tag{position:absolute;right:-28px;top:9%;z-index:4;width:250px;background:var(--paper);color:var(--ink);border-radius:13px;padding:24px 19px 16px;transform-origin:50% 0;transform:rotate(calc(1.6deg + var(--a,0deg)));
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 22px 44px -18px rgba(39,35,31,.55);transition:top .7s var(--ease)}
.s-tag::before{content:"";position:absolute;top:8px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--ground);box-shadow:inset 0 1px 1.5px rgba(0,0,0,.22)}
.s-tag .k{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.s-tag .t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:"LT Superior",serif;font-size:23px;line-height:1.15;letter-spacing:-.015em;margin-top:7px}
.s-tag .t b{font-family:"Saans",sans-serif;font-weight:600;font-size:16px;font-variant-numeric:tabular-nums}
.s-tag.flip span{animation:flip .55s var(--ease)}
@keyframes flip{0%{opacity:0;transform:translateY(6px);filter:blur(3px)}100%{opacity:1;transform:none;filter:none}}

.mlist{padding-bottom:40px}
.m-head{padding-top:4px}
.m-head h2{margin-top:20px}
.m-head.lunch{margin-top:clamp(96px,10vw,150px)}
.m-ph{display:none}
.rows{list-style:none;margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--ink)}
.rows li{display:block;padding:20px 0 19px;border-bottom:1px solid var(--rule);transition:opacity .5s var(--ease)}
.rows li .r{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:14px}
.rows li b{font-family:"LT Superior",serif;font-weight:400;font-size:clamp(22px,1.75vw,27px);letter-spacing:-.015em;line-height:1.15;transition:color .4s var(--ease)}
.rows li i{border-bottom:1px dotted rgba(39,35,31,.32);transform:translateY(-6px)}
.rows li s{text-decoration:none;font-weight:600;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .4s var(--ease)}
.rows li p{font-size:14.5px;line-height:1.5;color:var(--soft);max-width:30em;margin-top:7px;text-wrap:pretty}
.rows li.g{border:0;padding:30px 0 4px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.rows li.g:first-child{padding-top:16px}
.js-desk .rows li:not(.g){opacity:.42}
.js-desk .rows li.act{opacity:1}
.js-desk .rows li.act s{color:var(--orange)}
.m-pdf{display:inline-flex;gap:8px;margin-top:34px;font-weight:600;font-size:15px;color:var(--orange)}
.m-pdf .ar,.pill .ar{transition:transform .4s var(--ease)}
.m-pdf:hover .ar{transform:translateX(4px)}

/* ---------- 1 pm: the cottage (the page turns their cottage blue) ---------- */
.cot{position:relative;height:260vh;margin-top:clamp(80px,9vw,140px)}
.cot-stick{position:sticky;top:0;height:100svh;overflow:hidden}
.cot-copy{position:absolute;left:0;right:0;top:calc(var(--bar-h) + 6vh);z-index:3;text-align:center;padding:0 var(--side);will-change:opacity,transform}
.cot-copy h2{max-width:17ch;margin:18px auto 0;font-size:clamp(42px,4.9vw,84px);color:var(--fg)}
/* two lines on desktop, always: the building, then what it was */
@media (min-width:761px){ .cot-copy h2{max-width:none;font-size:clamp(40px,min(4.6vw,9vh),84px)} .cot-copy h2 .ln{display:block;white-space:nowrap} }
.cot-copy .chip{color:var(--fg-soft)}
.cot-win{position:absolute;inset:0;z-index:1;--q:0;
  clip-path:inset(calc(46% - var(--q) * 46%) calc(36% - var(--q) * 36%) calc(7% - var(--q) * 7%) calc(36% - var(--q) * 36%) round calc(999px - var(--q) * 999px) calc(999px - var(--q) * 999px) calc(18px - var(--q) * 18px) calc(18px - var(--q) * 18px))}
/* opened all the way, the photo sinks into the blue below it instead of ending on a hard line */
.cot-win::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(38,67,111,0) 76%,rgb(38,67,111) 100%);opacity:var(--q)}
.cot-win img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;transform:scale(calc(1.18 - var(--q) * .18));will-change:transform}
.cot-win::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 62% 62% at 88% 18%,rgba(12,22,42,.74) 0,rgba(12,22,42,.6) 38%,rgba(12,22,42,.22) 70%,rgba(12,22,42,0) 100%);opacity:var(--q)}
.cot-now{position:absolute;right:var(--side);top:calc(var(--bar-h) + 7vh);z-index:3;max-width:min(560px,44vw);text-align:right;color:#fffaf0;opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease);text-shadow:0 1px 2px rgba(8,16,32,.35),0 2px 28px rgba(8,16,32,.5)}
.cot-now span{display:block;font-size:clamp(16px,1.2vw,19px);font-weight:500;margin-bottom:12px;opacity:.92}
.cot-now em{display:block;font-family:"Herbik",serif;font-style:italic;font-size:clamp(38px,3.8vw,64px);line-height:1.02;letter-spacing:-.02em}
.cot-now.in{opacity:1;transform:none}

/* ---------- 2 pm: the shelf ---------- */
.shelf{padding:clamp(120px,12vw,190px) var(--side) 0}
.s-head{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px clamp(40px,6vw,110px);align-items:end}
.s-head .chip{grid-column:1/-1}
.s-head .lede-s{padding-bottom:10px}
.rack{position:relative;max-width:1300px;margin:clamp(60px,6vw,96px) auto 0}
.goods{list-style:none;display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(14px,2vw,34px);padding:0 2.5%;position:relative;z-index:2}
.goods li{position:relative;flex:1 1 0;display:flex;flex-direction:column;align-items:center;cursor:default}
.goods li.wide{flex:1.5 1 0}
.goods img{display:block;width:auto;max-width:100%;height:clamp(200px,21vw,330px);object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 18px 14px rgba(70,44,18,.28)) drop-shadow(0 3px 3px rgba(70,44,18,.25));
  transform-origin:50% 100%;transition:transform .7s var(--ease),filter .7s var(--ease)}
.goods li.wide img{height:clamp(150px,15.5vw,250px)}
.goods li:hover img{transform:translateY(-10px) rotate(var(--lean,0deg));filter:drop-shadow(0 30px 22px rgba(70,44,18,.24)) drop-shadow(0 4px 4px rgba(70,44,18,.2))}
.goods li:nth-child(odd){--lean:-1.2deg}.goods li:nth-child(even){--lean:1.2deg}
.board{position:relative;z-index:1;height:30px;margin-top:-6px;border-radius:4px;background:url(img/plank.jpg) center/100% 100%;
  box-shadow:0 24px 26px -16px rgba(70,44,18,.5),inset 0 2px 0 rgba(255,240,214,.55),inset 0 -3px 0 rgba(110,70,30,.25)}
.swing{position:absolute;top:calc(100% + 36px);left:50%;width:min(220px,17vw);margin-left:calc(min(220px,17vw) / -2);background:var(--paper);color:var(--ink);border-radius:12px;padding:22px 16px 15px;text-align:left;z-index:3;
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 16px 30px -18px rgba(39,35,31,.45);transform-origin:50% -30px;transform:rotate(calc(var(--r,0deg) + var(--a,0deg)))}
.swing::before{content:"";position:absolute;top:8px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--ground);box-shadow:inset 0 1px 1.5px rgba(0,0,0,.22)}
.swing::after{content:"";position:absolute;left:50%;bottom:100%;height:40px;margin-bottom:-26px;border-left:1px solid rgba(39,35,31,.45)}
.goods li:nth-child(odd) .swing{--r:-1.6deg}.goods li:nth-child(even) .swing{--r:1.4deg}
.swing .k{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.swing .t{display:block;font-family:"LT Superior",serif;font-size:19px;line-height:1.15;letter-spacing:-.01em;margin-top:6px}
.swing .d{display:block;font-size:13.5px;line-height:1.45;color:var(--soft);margin-top:6px;text-wrap:pretty}
.rack{padding-bottom:190px}

/* ---------- connect: one cord across the room ---------- */
.connect{padding:clamp(80px,9vw,140px) 0 0}
.c-head{text-align:center;padding:0 var(--side)}
.c-head h2{max-width:16ch;margin:0 auto}
.c-head .lede-s{margin:24px auto 0}
.line-scroll{position:relative;margin-top:clamp(40px,5vw,72px);padding:0 var(--side) 72px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-bottom:-32px}
.line-scroll::-webkit-scrollbar{display:none}
.line{position:relative;display:flex;gap:var(--g,22px);justify-content:center;align-items:flex-start;min-width:max-content;margin:0 auto;padding-top:34px}
.rope{position:absolute;left:0;top:0;width:100%;height:140px;overflow:visible;pointer-events:none}
.rope path{fill:none;stroke:color-mix(in srgb,var(--ink) 55%,transparent);stroke-width:1.3;stroke-dasharray:var(--dl,3000);stroke-dashoffset:var(--dl,3000);transition:stroke-dashoffset 1.8s var(--ease)}
.line.go .rope path{stroke-dashoffset:0}
.note{position:relative;flex:none;width:232px;background:var(--paper);color:var(--ink);border-radius:12px;padding:30px 18px 18px;margin:0;
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 18px 34px -18px rgba(39,35,31,.5);transform-origin:50% -10px;opacity:0;translate:0 -14px;transform:rotate(calc(var(--r,0deg) + var(--a,0deg)));
  transition:opacity .7s var(--ease),translate 1.3s cubic-bezier(.3,1.4,.5,1)}
.line.go .note{opacity:1;translate:0 0}
.note:nth-child(odd){--r:1.3deg}.note:nth-child(even){--r:-1.5deg}
.note .peg{position:absolute;top:-14px;left:50%;width:12px;height:30px;margin-left:-6px;border-radius:3px;background:linear-gradient(90deg,#d9b88c,#c69c66);box-shadow:0 2px 3px rgba(60,38,16,.3),inset 0 0 0 1px rgba(90,60,30,.18)}
.note .peg::after{content:"";position:absolute;left:5px;top:3px;bottom:3px;width:2px;background:rgba(90,60,30,.25)}
.note .k{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.note .t{text-wrap:balance;display:block;font-family:"LT Superior",serif;font-size:21px;line-height:1.15;letter-spacing:-.012em;margin-top:7px}
.note .d{display:block;font-size:14px;line-height:1.45;color:var(--soft);margin-top:8px;text-wrap:pretty}
.note a{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:14px;font-weight:600;color:var(--orange)}
.note a:hover .ar{transform:translateX(3px)}
.note.ph{padding:10px}
.note.ph img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
@media (min-width:1101px){
  .line{--g:clamp(12px,1.3vw,22px);width:100%;max-width:1384px;min-width:0}
  .line .note{width:calc((100% - 5 * var(--g)) / 6)}
}

/* ---------- 3 pm: finale + the whole footer in one screen under the bar ---------- */
.end{position:relative;margin-top:clamp(90px,10vw,150px);display:flex;flex-direction:column;min-height:calc(100svh - var(--bar-h))}
.finale{position:relative;flex:1 1 auto;min-height:380px;overflow:hidden;display:flex;align-items:center;background:linear-gradient(180deg,rgba(254,232,200,0) 0,rgb(254,232,200) 240px)}
.f-art{position:absolute;right:max(0px,calc(50% - 760px));bottom:0;height:118%;width:auto;max-width:none;transform:translateY(3%) scale(1.03);transform-origin:60% 100%;
  transition:transform 2.4s var(--ease),filter 2.4s var(--ease);filter:saturate(.9) brightness(.98);
  /* the painted table dissolves into the panel before the footer, never sliced by it */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%),linear-gradient(180deg,transparent 0,transparent 17%,#000 34%,#000 72%,transparent 97%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 22%),linear-gradient(180deg,transparent 0,transparent 17%,#000 34%,#000 72%,transparent 97%);mask-composite:intersect}
.end.lit .f-art{transform:none;filter:saturate(1.04) brightness(1.01)}
.f-copy{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;padding:0 var(--side)}
.f-copy>*{max-width:min(560px,42vw)}
.f-copy h2{margin-top:16px;font-size:clamp(46px,5.4vw,96px)}
.f-ctas{display:flex;gap:12px;margin-top:clamp(18px,3vh,30px)}
.fl{position:relative;z-index:2;background:var(--slab);color:var(--cream);padding:clamp(30px,4.2vh,46px) var(--side) 0}
.l-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:32px}
.l-mark{display:inline-flex;align-items:center;gap:12px}
.l-mark b{font-family:"LT Superior",serif;font-weight:500;font-size:24px;letter-spacing:-.012em}
.bolt{width:30px;height:36px;stroke:#f3c9a8;transition:filter 1s var(--ease)}
.bolt .fill{fill:transparent;transition:fill .2s}
.end.lit .bolt{animation:lamp 1.6s steps(1) .4s both;stroke:#ffb27a;filter:drop-shadow(0 0 6px rgba(255,140,60,.9)) drop-shadow(0 0 18px rgba(233,72,17,.55))}
.end.lit .bolt .fill{fill:#ff9a55;animation:lampfill 1.6s steps(1) .4s both}
@keyframes lamp{0%{filter:none}12%{filter:drop-shadow(0 0 6px rgba(255,140,60,.9))}20%{filter:none}34%,100%{filter:drop-shadow(0 0 6px rgba(255,140,60,.9)) drop-shadow(0 0 18px rgba(233,72,17,.55))}}
@keyframes lampfill{0%{fill:transparent}12%{fill:#ff9a55}20%{fill:transparent}34%,100%{fill:#ff9a55}}
.l-brand p{font-size:14.5px;line-height:1.5;color:#cdd6e6;margin-top:12px;max-width:24em;text-wrap:balance}
.sign{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;max-width:380px}
.sign label{flex:1 1 180px}
.sign input{width:100%;height:40px;border:0;border-radius:99px;padding:0 16px;font:400 15px/1 "Saans",sans-serif;color:var(--cream);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(247,239,225,.28);outline:none}
.sign input::placeholder{color:#aebad0}
.sign input:focus{box-shadow:inset 0 0 0 1.5px #f3c9a8}
.s-note{flex-basis:100%;font-size:12.5px;color:#aebad0}
.sign .done{flex-basis:100%;font-weight:600;color:#f3c9a8}
.col h4{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#f3c9a8;margin-bottom:12px}
.col a,.col span{display:block;font-size:14.5px;line-height:1.45;padding:4px 0;color:var(--cream)}
.col span{color:#cdd6e6}
.col a{background:linear-gradient(currentColor,currentColor) 0 calc(100% - 3px)/0 1px no-repeat;width:fit-content;transition:background-size .45s var(--ease)}
.col a:hover{background-size:100% 1px}
.legal{max-width:1240px;margin:clamp(22px,3.4vh,40px) auto 0;padding:16px 0 calc(18px + env(safe-area-inset-bottom));border-top:1px solid rgba(247,239,225,.16);display:flex;justify-content:space-between;gap:30px;align-items:flex-end}
.legal p{font-size:12px;line-height:1.5;color:#aebad0;max-width:72em;text-wrap:pretty}
.legal .l-r{white-space:nowrap}
.legal .l-r span{margin:0 6px}

/* ---------- tablets ---------- */
@media (max-width:1100px){
  .b-links{display:none}.bar{grid-template-columns:1fr auto}
  .l-grid{grid-template-columns:1fr 1fr 1fr;row-gap:28px}.l-brand{grid-column:1/-1}
  .goods{overflow:visible}
}

/* ---------- phones: no pinning, no sticky stage; everything in reading order ---------- */
@media (max-width:760px){
  :root{--bar-h:56px}
  .bar{padding:0 16px}.b-brand b{font-size:17px}.b-r .pill{display:none}
  main h2{font-size:clamp(38px,11vw,50px)}
  .menu{padding-top:96px}
  .m-grid{grid-template-columns:1fr;gap:0}
  .stage{display:none}
  .m-ph{display:block;margin:28px 0 0}
  .m-ph img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px}
  .rows{margin-top:26px}
  .rows li b{font-size:20px}
  .cot{height:auto;margin-top:100px;background:var(--slab);padding:72px 0 0}
  /* the blue block melts in from the menu and out into the shelf, no straight seams */
  .cot::before,.cot::after{content:"";position:absolute;left:0;right:0;height:120px;pointer-events:none;z-index:1}
  .cot::before{bottom:100%;height:90px;background:linear-gradient(180deg,rgba(38,67,111,0) 0,rgba(38,67,111,.08) 35%,rgba(38,67,111,.4) 65%,var(--slab) 100%)}
  .cot::after{top:100%;height:90px;background:linear-gradient(180deg,var(--slab) 0,rgba(38,67,111,.4) 35%,rgba(38,67,111,.08) 65%,rgba(38,67,111,0) 100%)}
  .cot,.cot-copy h2{color:var(--cream)}.cot-copy .chip{color:#cdd6e6}.cot h2 em{color:#f3c9a8}
  .cot-stick{position:relative;height:auto;overflow:visible}
  .cot-copy{position:relative;top:auto;text-align:left}
  .cot-copy h2{margin-left:0;font-size:clamp(36px,10vw,46px)}
  .cot-win{position:relative;inset:auto;height:auto;margin:30px 16px 0;clip-path:inset(0 round 160px 160px 14px 14px);aspect-ratio:3/4}
  .cot-win img{transform:none;object-position:42% 60%}
  .cot-win::after,.cot-win::before{display:none}
  .cot-now{position:relative;right:auto;top:auto;max-width:none;text-align:left;opacity:1;transform:none;padding:26px var(--side) 72px;text-shadow:none}
  .cot-now em{font-size:34px}
  .shelf{padding-top:96px}
  .s-head{grid-template-columns:1fr}
  .rack{margin:40px calc(var(--side) * -1) 0;overflow-x:auto;scrollbar-width:none;padding:30px var(--side) 200px}
  .rack::-webkit-scrollbar{display:none}
  .goods{width:max-content;gap:34px;padding:0 20px;justify-content:flex-start}
  .goods li,.goods li.wide{flex:none;width:52vw}
  .goods li.wide{width:70vw}
  .goods img{height:230px}.goods li.wide img{height:170px}
  .board{width:calc(4 * 52vw + 70vw + 4 * 34px + 40px)}
  .swing{width:200px;margin-left:-100px}
  .connect{padding-top:70px}
  .c-head{text-align:left}.c-head h2{margin:0}.c-head .lede-s{margin-left:0}
  .line{justify-content:flex-start}
  .end{margin-top:70px;min-height:0}
  .finale{min-height:0;flex-direction:column}
  .finale{display:flex;flex-direction:column;align-items:stretch;padding-top:24px}
  .chip{font-size:11px;letter-spacing:.08em;white-space:nowrap}
  .f-art{flex:none;position:relative;right:auto;height:auto;width:170%;margin:-70px 0 -40px -58%;order:2;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 66%,transparent 96%);mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 66%,transparent 96%);transform:none}
  .f-copy>*{max-width:none}
  .finale::before{display:none}
  .finale{overflow:hidden}
  .finale::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(38,67,111,0),var(--slab))}
  .f-copy{padding-top:0;text-align:left}
  .f-ctas{justify-content:flex-start;display:none}
  .fl{padding-top:34px}
  .l-grid{grid-template-columns:1fr 1fr;gap:24px 20px}
  .legal{flex-direction:column;align-items:flex-start;gap:8px;padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  body::after{content:"";position:fixed;left:0;right:0;bottom:0;height:calc(96px + env(safe-area-inset-bottom));z-index:29;pointer-events:none;background:linear-gradient(180deg,rgba(245,239,227,0) 0,var(--ground) 22px)}
  .dock .pill.ghost{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
  .dock{z-index:45}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .note,.rope path{transition:none!important;opacity:1!important;stroke-dashoffset:0!important}
  .plate>img,.cot-now,.f-art{transition:none}
  .end.lit .bolt,.end.lit .bolt .fill{animation:none}
}