/* ===== 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)}
.c-head h2 em{white-space:nowrap}
.m-note{margin-top:22px;font-size:14.5px;color:var(--soft)}
.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 li.trio{flex:2.1 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(170px,17.5vw,280px)}
.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:min(268px,calc((100% - 4 * var(--g)) / 5))}
}

/* ---------- 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 h3{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}
  .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))}
  .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}
}
.s-tag .t{flex-wrap:wrap;row-gap:4px}.s-tag .t > span,.s-tag .t b{white-space:nowrap}

/* ---------- round 2, Ale's final list (11-03) ---------- */
.m-menu{margin-top:30px}
.soc{display:inline-flex;gap:4px}
.soc a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--ink);transition:background .3s var(--ease),color .3s var(--ease)}
.soc a:hover{background:var(--orange);color:#fff}
.soc svg{width:19px;height:19px}
.nav-r .soc a{width:36px;height:36px}
.col a.sl{display:flex;align-items:center;gap:9px;font-weight:600;background:none}
.col a.sl svg{width:18px;height:18px;flex:none;color:#f3c9a8}
.col a.sl:hover{color:#f3c9a8}
.loyal{margin-top:clamp(80px,9vw,140px);background:var(--orange);color:#fff4e6;position:relative}
.ly-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,90px);align-items:center;padding:clamp(64px,7.5vw,120px) var(--side)}
.ly-k{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.loyal h2{margin-top:16px;color:#fff4e6}
.loyal h2 em{display:block;color:#ffd9b0}
.ly-d{margin-top:22px;font-size:clamp(16px,1.15vw,18px);line-height:1.55;max-width:27em;text-wrap:pretty}
.ly-b{margin-top:30px;background:#fff4e6;color:#b5340a;border:0}
.ly-b:hover{background:#fff}
.panel{display:grid;grid-template-columns:repeat(8,1fr);gap:clamp(8px,1vw,16px);padding:clamp(18px,2vw,30px);border-radius:18px;background:rgba(90,24,0,.2);box-shadow:inset 0 0 0 1px rgba(255,244,230,.2)}
.panel i{aspect-ratio:1;border-radius:50%;background:rgba(90,24,0,.34);box-shadow:inset 0 2px 5px rgba(60,14,0,.5);transition:background .9s var(--ease),box-shadow .9s var(--ease)}
.panel i.on{background:#ffe9c7;box-shadow:0 0 18px 4px rgba(255,225,170,.75);transition-duration:.18s}
@media (max-width:1100px){.ly-in{grid-template-columns:1fr}.panel{max-width:560px}}
@media (max-width:760px){.soc{gap:0}.soc a,.nav-r .soc a{width:32px;height:32px}.b-r{gap:8px}.clock{min-width:0}.nav-r{gap:6px}.panel{grid-template-columns:repeat(8,1fr);gap:7px;padding:14px}}
@media (max-width:380px){.nav .brand b{white-space:nowrap;font-size:16px}.nav-r .pill svg{display:none}}

/* ==========================================================================
   polish pass (11-03): everything below refines the page as one system
   ========================================================================== */
:root{--to:0;--ground-now:#f5efe3;--orange-g:#db400e;
  --fg-soft:color-mix(in srgb,color-mix(in srgb,#ffe9d6 calc(var(--to) * 100%),#cdd6e6) calc(var(--tb) * 100%),var(--soft));
  --mark:color-mix(in srgb,#fff4e6 calc(var(--to) * 100%),var(--orange));
  --em:color-mix(in srgb,color-mix(in srgb,#ffe0bd calc(var(--to) * 100%),#f3c9a8) calc(var(--tb) * 100%),var(--blue))}
main h2 em{color:var(--em)}
button.pill{border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}
.fl :focus-visible,.loyal :focus-visible{outline-color:#ffd9b0}
#loyalty,#visit{scroll-margin-top:var(--bar-h)}
.sun canvas{opacity:.14}
.chip svg{stroke:var(--mark)}
.chip{white-space:nowrap}

/* the bar belongs to the day: it takes the page's light, never a grey frost over it */
.bar{color:var(--fg);background:color-mix(in srgb,var(--ground-now) 90%,transparent);box-shadow:0 1px 0 var(--fg-rule)}
.b-brand svg *{stroke:var(--mark)}
.b-links a:hover,.b-links a.here{background:color-mix(in srgb,var(--fg) 12%,transparent)}
.bar .soc a{color:var(--fg)}
.soc a:hover,.bar .soc a:hover{background:var(--mark);color:color-mix(in srgb,#b5340a calc(var(--to) * 100%),#fff)}
.clock{color:var(--fg-soft)}
.clock svg{stroke:var(--fg)}
.clock svg line{stroke:var(--mark)}
.bar .pill.solid{background:var(--mark);color:color-mix(in srgb,#b5340a calc(var(--to) * 100%),#fff);box-shadow:none}
.bar .pill.solid:hover{background:color-mix(in srgb,#fff calc(var(--to) * 100%),var(--orange-d))}

/* hero nav gets its own room at narrow laptop widths */
@media (max-width:1240px){ .links{display:none} .nav{grid-template-columns:1fr auto} }

/* ---------- menu: four things, so each one gets to be big and legible on any light ---------- */
.plate>img,.plate>.slot{position:absolute;inset:0;width:100%;height:100%;border-radius:24px;opacity:0;transform:scale(1.04);transition:opacity .9s var(--ease),transform 1.6s var(--ease)}
.plate>.slot.on{opacity:1;transform:none}
.slot{display:grid;align-content:center;justify-items:center;gap:6px;text-align:center;color:#8a6f4b;background:#efe4cf;box-shadow:inset 0 0 0 1px rgba(90,60,30,.08)}
.slot::before{content:"";position:absolute;inset:14px;border:1px solid rgba(90,60,30,.16);border-radius:14px;pointer-events:none}
.slot svg{width:34px;height:41px;color:var(--orange);margin-bottom:12px}
.slot b{font-family:"Herbik",serif;font-style:italic;font-weight:400;font-size:clamp(28px,3vw,44px);line-height:1.05;letter-spacing:-.015em;color:var(--blue)}
.slot small{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-top:8px}
.plate.nopin .s-pin,.plate.nopin .s-cord{opacity:0}
.s-pin,.s-cord{transition:transform .7s var(--ease),opacity .4s var(--ease)}
.s-tag .t{display:block}
.rows{border-top-color:var(--fg)}
.rows li{border-bottom-color:var(--fg-rule);padding:24px 0 23px}
.rows li b{font-size:clamp(26px,2.25vw,35px)}
.rows li i{border-bottom-color:color-mix(in srgb,var(--fg) 32%,transparent)}
.rows li p{font-size:16px;line-height:1.5;color:var(--fg-soft);margin-top:9px;max-width:32em}
.rows li s{font-size:15px}
.js-desk .rows li:not(.g){opacity:.5;cursor:default}
.js-desk .rows li:hover{opacity:.85}
.js-desk .rows li.act{opacity:1}
.m-foot{display:flex;align-items:center;gap:22px;margin-top:34px}
.m-note{margin:0;font-size:14.5px;line-height:1.35;color:var(--fg-soft)}
.m-menu{margin:0}

/* ---------- cottage: the arch frames the sign in their window, and the open photo melts into whatever light the page has reached ---------- */
@media (min-width:761px){ .cot-copy{top:calc(var(--bar-h) + 7.5vh)} }
.cot-win::before{background:linear-gradient(180deg,transparent 80%,var(--ground-now) 100%)}
.cot-win img{object-position:50% 50%;transform:translate(calc((1 - var(--q)) * -14%),calc((1 - var(--q)) * -2.8%)) scale(calc(1.55 - var(--q) * .55))}
/* the re-shoot gave this line calm open sky: it needs only a breath of shade, not a dark patch */
.cot-win::after{background:radial-gradient(ellipse 58% 56% at 90% 16%,rgba(12,28,58,.34) 0,rgba(12,28,58,.2) 45%,rgba(12,28,58,0) 100%)}

/* ---------- shelf: stocked at true scale, sitting ON the board, tags that never touch ---------- */
.s-head{align-items:end}
.s-side .lede-s{padding-bottom:0}
.t-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-weight:600;font-size:15.5px;color:var(--orange-d)}
.t-link .ar{transition:transform .4s var(--ease)}
.t-link:hover .ar{transform:translateX(4px)}
.goods{--h:clamp(200px,18vw,290px);gap:clamp(14px,2vw,30px)}
.goods li,.goods li.trio{flex:var(--f,1) 1 0;min-width:0}
.goods li::before{content:"";position:absolute;left:6%;right:6%;bottom:-6px;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(58,32,8,.55),rgba(58,32,8,0));z-index:-1;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.goods li:hover::before{opacity:.5;transform:scaleX(.86)}
.goods img,.goods li.wide img{height:calc(var(--h) * var(--s,1));width:auto;max-width:100%;filter:drop-shadow(9px 5px 10px rgba(70,44,18,.2))}
.goods li:hover img{transform:translateY(-8px) rotate(var(--lean,0deg));filter:drop-shadow(12px 12px 16px rgba(70,44,18,.2))}
.packs{display:flex;align-items:flex-end;justify-content:center;width:100%}
.packs img,.goods li:hover .packs img{height:calc(var(--h) * .6);max-width:none;margin:0 -3.5%;transform-origin:50% 100%;transform:rotate(var(--lean))}
.packs img:nth-child(1){--lean:-3.5deg}.packs img:nth-child(2){--lean:.6deg;position:relative;z-index:1}.packs img:nth-child(3){--lean:3.4deg}
.goods li:hover .packs img{transform:translateY(-6px) rotate(var(--lean))}
.swing{left:0;right:0;margin:0 auto;width:min(100%,232px);padding:22px 15px 15px}
.swing .t{font-size:clamp(17px,1.35vw,20px)}
.rack{padding-bottom:230px}
.board{height:32px}

/* ---------- loyalty ---------- */
.loyal{margin-top:0;background:none;color:var(--fg);display:flex;align-items:center;min-height:calc(100svh - var(--bar-h));padding:clamp(72px,8vw,120px) var(--side)}
.ly-in{width:100%;max-width:1240px;margin:0 auto;padding:0;grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);gap:clamp(40px,5.5vw,90px)}
.loyal h2{color:inherit;font-size:clamp(42px,4.7vw,78px)}
.loyal h2 em{color:var(--em)}
.ly-d{font-size:clamp(17px,1.25vw,19px);font-weight:500;color:color-mix(in srgb,#fff calc(var(--tb) * 100%),var(--soft))}
.ly-form{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px;max-width:460px}
.ly-form label{flex:1 1 180px}
.ly-form input{width:100%;height:50px;border:0;border-radius:99px;padding:0 20px;font:400 16px/1 "Saans",sans-serif;color:var(--fg);background:color-mix(in srgb,rgba(255,244,230,.16) calc(var(--tb) * 100%),rgba(255,252,245,.7));box-shadow:inset 0 0 0 1px color-mix(in srgb,rgba(255,244,230,.5) calc(var(--tb) * 100%),var(--rule));outline:none;transition:box-shadow .3s var(--ease),background .3s var(--ease)}
.ly-form input::placeholder{color:var(--fg-soft)}
.ly-form input:focus{box-shadow:inset 0 0 0 1.5px var(--fg)}
.ly-form .pill{background:#fff4e6;color:#b5340a;box-shadow:0 12px 24px -14px rgba(90,24,0,.8)}
.ly-form .pill:hover{background:#fff}
.ly-form .done{flex-basis:100%;font-size:17px;font-weight:600}

/* a working board: walnut, brass, real lamps (same materials as their exchange hero) */
.panel{position:relative;display:block;grid-template-columns:none;gap:0;padding:clamp(18px,2.2vw,30px);border-radius:10px;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.02) 0 2px,rgba(0,0,0,.05) 2px 5px),linear-gradient(170deg,#452b1d 0%,#2a1a12 58%,#1f130d 100%);
  box-shadow:inset 0 0 0 1px rgba(255,220,150,.12),inset 0 2px 0 rgba(255,220,150,.18),0 34px 60px -30px rgba(70,16,0,.85),0 2px 0 #160d08}
.scr{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e8c98a,#8c6529 70%,#4a3214);box-shadow:0 1px 1px rgba(0,0,0,.5)}
.scr::after{content:"";position:absolute;left:1px;right:1px;top:4px;height:1px;background:rgba(40,24,8,.7);transform:rotate(38deg)}
.p-plate{display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;margin:0 auto;padding:7px 14px 6px;border-radius:3px;background:linear-gradient(180deg,#e3bc72,#b5843a);color:#2a1a12;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,240,200,.6),0 1px 2px rgba(0,0,0,.5)}
.p-plate i{width:3px;height:3px;border-radius:50%;background:#2a1a12}
.p-field{position:relative;display:grid;grid-template-columns:repeat(6,1fr);row-gap:clamp(6px,1vw,14px);margin-top:clamp(14px,1.8vw,24px);touch-action:manipulation;--j:clamp(26px,2.8vw,40px)}
.jk{display:flex;flex-direction:column;align-items:center;gap:clamp(5px,.7vw,9px);padding:clamp(4px,.6vw,8px) 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.jk .lamp{width:clamp(8px,.85vw,12px);aspect-ratio:1;border-radius:50%;background:#5b3a26;box-shadow:inset 0 2px 3px rgba(0,0,0,.5),0 0 0 2px #1a0f0a;transition:background-color .6s var(--ease),box-shadow .6s var(--ease)}
.jk .sock{width:var(--j);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,#0c0705 0 35%,#2b1a10 38% 47%,#e3bc72 53%,#b5843a 70%,#7a5320 94%,#3b2614 100%);box-shadow:0 2px 0 rgba(255,220,150,.12),0 3px 8px rgba(0,0,0,.45);transition:transform .35s var(--ease),filter .35s var(--ease)}
.jk:hover .sock{transform:scale(1.07);filter:brightness(1.18)}
.jk:hover .lamp{background:#8a5a2c}
.jk.on .lamp,.jk.ring .lamp{transition-duration:.14s;background:#ffb54a;box-shadow:inset 0 -2px 3px rgba(170,90,0,.35),0 0 0 2px #1a0f0a,0 0 16px 5px rgba(255,181,74,.6)}
.jk.ring .lamp{animation:ring 1.5s steps(1) both}
@keyframes ring{0%,30%,60%,90%{background:#ffb54a;box-shadow:inset 0 -2px 3px rgba(170,90,0,.35),0 0 0 2px #1a0f0a,0 0 16px 5px rgba(255,181,74,.6)}15%,45%,75%,100%{background:#5b3a26;box-shadow:inset 0 2px 3px rgba(0,0,0,.5),0 0 0 2px #1a0f0a}}
.p-cords{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.p-hint{margin-top:clamp(8px,1.2vw,16px);text-align:center;font-size:12px;letter-spacing:.03em;color:rgba(255,243,226,.62)}

/* ---------- Shed Room: five equal notices on one cord, their bottoms follow its curve ---------- */
.connect{padding-top:clamp(40px,4vw,70px)}
.c-head h2{margin-top:18px}
.note{display:flex;flex-direction:column;aspect-ratio:4/5;padding:32px 22px 22px}
.note .t{font-size:clamp(24px,2vw,31px);line-height:1.08;letter-spacing:-.02em;margin-top:10px}
.note .d{font-size:15.5px;line-height:1.42;margin-top:12px}
.note a{margin-top:auto;padding-top:14px;font-size:14.5px;color:var(--orange-d)}
.note.ph{padding:10px}
.note.ph img{height:100%;aspect-ratio:auto;border-radius:6px}
.note .peg{width:13px;height:34px;margin-left:-6.5px;top:-17px;border-radius:3px 3px 2px 2px;background:linear-gradient(90deg,#e0c294 0,#d2ab75 48%,#a97f4b 50%,#caa26b 52%,#c69c66 100%);box-shadow:0 2px 3px rgba(60,38,16,.34)}
.note .peg::after{left:-1px;right:-1px;top:13px;bottom:auto;width:auto;height:4px;border-radius:1px;background:linear-gradient(180deg,#d9d6cf,#8e8a82);box-shadow:0 1px 1px rgba(40,24,8,.35)}

/* ---------- finale + footer share the page's grid ---------- */
.end{margin-top:clamp(50px,5vw,90px)}
.f-copy{width:min(1240px,100%);padding:0 var(--side);max-width:none;box-sizing:content-box;width:auto}
@media (min-width:761px){ .f-copy{box-sizing:border-box;width:min(1240px,calc(100% - 2 * var(--side)));padding:0} }
.l-grid{grid-template-columns:minmax(0,1.42fr) minmax(0,1fr) minmax(0,.95fr) minmax(0,.8fr) minmax(0,1.15fr)}
.col a.sl{font-weight:500}
.col a.sl em{font-style:normal}
.col a.sl .sh{display:none}
.col a.sl svg{width:17px;height:17px}

/* ---------- tablets ---------- */
@media (max-width:1100px){
  .l-grid{grid-template-columns:1fr 1fr 1fr}
  .ly-in{grid-template-columns:minmax(0,1fr) minmax(0,1.14fr)}
  .panel{max-width:none;width:100%}
  .swing{padding:20px 12px 13px}
}

/* below 900 the board gets the full width under the copy */
@media (max-width:900px){ .ly-in{grid-template-columns:1fr} }

/* ---------- phones ---------- */
@media (max-width:760px){
  .bar{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--ink)}
  .slot{position:relative;aspect-ratio:4/3;border-radius:18px;height:auto}
  .slot b{font-size:30px}
  .m-ph .slot svg{width:28px;height:34px;margin-bottom:6px}
  .m-foot{gap:16px}
  .cot-copy h2 .ln{display:block}
  .cot-win img{transform:none;object-position:58% 60%}
  .cot-win{inset:auto}
  /* shelf: one swipe, snapping product to product */
  .rack{scroll-snap-type:x proximity;padding:30px var(--side) 190px}
  .goods{--h:250px;gap:34px}
  .goods li,.goods li.trio{flex:none;width:52vw;scroll-snap-align:center}
  .goods li.trio{width:84vw}
  .board{width:calc(4 * 52vw + 84vw + 4 * 34px + 40px)}
  .swing{width:200px}
  /* loyalty: its own block, same as the cottage */
  .loyal{display:block;min-height:0;margin-top:90px;padding:64px var(--side) 70px;background:var(--orange-g);color:#fff4e6;position:relative}
  .loyal h2{color:#fff4e6;font-size:clamp(38px,11vw,50px)}
  .loyal h2 em{color:#ffe0bd}
  .loyal .chip{color:#ffe9d6}
  .loyal .chip svg{stroke:#fff4e6}
  .ly-d{color:#fff}
  .ly-form .pill{flex:1 1 100%}
  .panel{padding:18px 12px 14px;margin-top:6px}
  .scr{transform:scale(.8)}
  .connect{padding-top:130px}
  .note{width:236px;padding:28px 18px 18px}
  .end{margin-top:40px}
  .f-copy{width:auto;margin:0;padding:0 var(--side);box-sizing:border-box}
  .l-grid{grid-template-columns:1fr 1fr}
  .col a.sl .lg{display:none}
  .col a.sl .sh{display:inline}
}
@media (prefers-reduced-motion:reduce){ .jk.ring .lamp{animation:none} }
/* phones: the orange is a fixed block, so the form keeps its cream */
@media (max-width:760px){ .ly-form input{color:#fff;background:rgba(255,244,230,.16);box-shadow:inset 0 0 0 1px rgba(255,244,230,.5)} .ly-form input::placeholder{color:#ffe3cc} .ly-form input:focus{box-shadow:inset 0 0 0 1.5px #fff4e6} }

/* ==========================================================================
   Ale's photos (11-04) + the etched window logo comes alive
   ========================================================================== */
.plate>img{object-position:50% 50%}
.r-ph{display:none}
/* the same vector sits exactly over the logo etched in her croissant photo: same 3:4 viewBox, sliced like object-fit:cover */
.logo-live{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:1;mix-blend-mode:screen;opacity:0;transition:opacity .7s var(--ease)}
.logo-live.live{opacity:1}
.logo-live svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ll-rays line{fill:none;stroke:#ffc766;stroke-width:15;stroke-dasharray:.34 1.1;stroke-dashoffset:1.34;filter:drop-shadow(0 0 16px rgba(255,180,70,.75))}
.live .ll-rays line{animation:rayrun 4.6s cubic-bezier(.35,0,.25,1) infinite;animation-delay:calc(var(--i) * 70ms)}
@keyframes rayrun{0%{stroke-dashoffset:1.34}55%,100%{stroke-dashoffset:-.34}}
.ll-oval{fill:none;stroke:#ffe6b0;stroke-width:15;opacity:0;filter:drop-shadow(0 0 18px rgba(255,190,90,.7))}
.ll-bolt{fill:rgba(255,178,70,.16);stroke:#fff3d1;stroke-width:19;stroke-linejoin:miter;opacity:0;filter:drop-shadow(0 0 22px rgba(255,180,70,.95))}
.live .ll-bolt{animation:boltlamp 4.6s steps(1) infinite}
.live .ll-oval{animation:ovalglow 4.6s var(--ease) infinite}
@keyframes boltlamp{0%{opacity:0}3%{opacity:1}6%{opacity:.15}10%{opacity:1}13%{opacity:.35}16%,62%{opacity:1}66%{opacity:.75}72%{opacity:.5}80%{opacity:.25}90%,100%{opacity:0}}
@keyframes ovalglow{0%,10%{opacity:0}22%,58%{opacity:.75}90%,100%{opacity:0}}

/* little rays around every logo: they fire on load and when you point at it */
.brand,.b-brand,.l-mark{position:relative}
.mk-rays{position:absolute;pointer-events:none;overflow:visible;fill:none;stroke:var(--mk,var(--orange));stroke-width:1.5;stroke-linecap:round}
.mk-rays line{stroke-dasharray:1 1;stroke-dashoffset:1}
.mk-rays.fire line{animation:mkfire 1.15s var(--ease) both;animation-delay:calc(var(--i) * 16ms)}
@keyframes mkfire{0%{stroke-dashoffset:1;opacity:1}50%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-1;opacity:.2}}
.b-brand .mk-rays{--mk:var(--mark)}
.l-mark .mk-rays{--mk:#ffb27a}
.end.lit .l-mark .mk-rays line{animation:mkstay 1.2s var(--ease) both;animation-delay:calc(.5s + var(--i) * 26ms)}
@keyframes mkstay{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}

/* finale: gold rays, the same etched gold as her window, rising behind the painted table */
.f-rays{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none;stroke:#d9983a;stroke-width:2.2;stroke-linecap:round}
.f-rays line{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:.72;transition:stroke-dashoffset 1.5s var(--ease);transition-delay:calc(var(--i) * 34ms)}
.end.lit .f-rays line{stroke-dashoffset:0}

@media (max-width:760px){
  .m-ph img{aspect-ratio:4/5}
  .r-ph{display:block;position:relative;margin:0 0 16px;border-radius:18px;overflow:hidden}
  .r-ph img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
  .rows li{padding-top:20px}
  .f-rays{display:none}
}
@media (prefers-reduced-motion:reduce){
  .logo-live.live{opacity:.8}
  .live .ll-rays line{animation:none;stroke-dasharray:none;stroke-dashoffset:0;opacity:.5}
  .live .ll-bolt{animation:none;opacity:.8}.live .ll-oval{animation:none;opacity:.5}
  .mk-rays.fire line,.end.lit .l-mark .mk-rays line{animation:none}
  .end.lit .l-mark .mk-rays line,.end.lit .f-rays line{stroke-dashoffset:0;transition:none}
}

/* big windows: the painted table stays clear of the headline, it never runs under the words */
@media (min-width:761px){ .f-art{height:min(118%,36.5vw,700px)} }

/* ==========================================================================
   Ale's logos + the live loyalty program (11-04)
   ========================================================================== */
.brand svg{width:23px;height:38px;color:var(--orange)}
.b-brand svg{width:19px;height:31px;color:var(--mark)}
.b-brand svg path{stroke:none}
.loyal h2{font-size:clamp(42px,4.6vw,76px)}
.ly-steps{list-style:none;margin-top:clamp(22px,2.6vw,34px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.7vw,26px)}
.ly-steps li{display:block}
.ly-steps i{display:block;margin-bottom:12px;width:11px;height:11px;border-radius:50%;background:#ffe9c7;box-shadow:0 0 12px 3px rgba(255,225,170,.7)}
.ly-steps b{font-family:"LT Superior",serif;font-weight:500;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.01em;white-space:nowrap}
.ly-steps b{display:block}
.ly-steps span{display:block;margin-top:5px;text-wrap:pretty;font-size:15px;line-height:1.38;font-weight:500;color:color-mix(in srgb,#fff calc(var(--tb) * 100%),var(--soft))}
.ly-join{display:flex;align-items:center;gap:20px;margin-top:clamp(20px,2.4vw,30px)}
.ly-qr{flex:none;display:block;width:124px;height:124px;padding:6px;border-radius:10px;background:#fff;box-shadow:0 16px 30px -18px rgba(70,16,0,.85);transition:transform .4s var(--ease)}
.ly-qr:hover{transform:translateY(-3px)}
.ly-qr img{display:block;width:100%;height:100%}
.ly-scan{font-family:"Herbik",serif;font-style:italic;font-size:clamp(25px,2.1vw,32px);line-height:1.05;letter-spacing:-.015em;margin-bottom:12px}
.ly-b{margin:0;background:#fff4e6;color:#b5340a;box-shadow:0 12px 24px -14px rgba(90,24,0,.8)}
.ly-b:hover{background:#fff}

/* posters on the cord, in their own artwork, until the Shed Room photos arrive */
.note.poster img{border-radius:4px}

/* the real logo, signing the page: the bolt lights, rays fly out, then the letters come on one at a time like lines on a board */
.l-mark{display:block;width:clamp(140px,11.4vw,172px)}
.rd{display:block;width:100%;height:auto;overflow:visible;fill:#f7dcc2}
.rd-fallback{font-family:"LT Superior",serif;font-weight:500;font-size:24px}
.rd ~ .rd-fallback{display:none}
.rd-rays path{transform-box:view-box;transform-origin:961px 976px;transform:scale(.74);opacity:0;fill:#f3c9a8;transition:transform 1.1s var(--ease),opacity .4s linear;transition-delay:calc(.45s + var(--i) * 20ms)}
.rd-on .rd-rays path{transform:none;opacity:1}
.rd-text path{opacity:0;transition:opacity .16s linear;transition-delay:calc(1.05s + var(--i) * 42ms)}
.rd-on .rd-text path{opacity:1}
.rd-core{opacity:0;transition:opacity .3s linear .1s}
.rd-on .rd-core{opacity:1}
.rd-dots{opacity:0;transition:opacity .9s var(--ease) .7s}
.rd-on .rd-dots{opacity:.75}
.rd-lamp{fill:#ff9a55;opacity:0}
.rd-on .rd-lamp{animation:rdlamp 1.3s steps(1) .15s both;filter:drop-shadow(0 0 20px rgba(255,140,60,.85))}
@keyframes rdlamp{0%{opacity:0}10%{opacity:1}18%{opacity:.1}30%{opacity:1}38%{opacity:.25}48%,100%{opacity:1}}
.rd.sweep .rd-rays path{animation:rdsweep .85s var(--ease) both;animation-delay:calc(var(--i) * 16ms)}
@keyframes rdsweep{0%,100%{transform:none;fill:#f3c9a8}45%{transform:scale(1.07);fill:#ffb27a}}
.bolt{display:none}

@media (max-width:760px){
  .ly-steps{grid-template-columns:1fr;gap:14px}
  .ly-steps li{display:grid;grid-template-columns:14px 1fr;column-gap:14px}
  .ly-steps i{margin:7px 0 0}
  .ly-steps span{grid-column:2;margin-top:1px;color:#fff}
  .ly-qr,.ly-scan{display:none}
  .ly-join{display:block}
  .ly-b{width:100%}
  .l-mark{width:150px}
}
@media (prefers-reduced-motion:reduce){
  .rd *{transition:none!important;animation:none!important}
  .rd-rays path,.rd-text path,.rd-core,.rd-lamp{opacity:1;transform:none}
  .rd-dots{opacity:.75}
}

/* ==========================================================================
   11-04 round 3: one button system, the wow end, the board, the shop head
   ========================================================================== */

/* ---------- BUTTONS. No glow, no darker-orange hover. Every button is a line on the board:
   its lamp comes on and the colour floods out from that point. Solid: from the lamp. With an arrow: from the arrow. ---------- */
.pill{position:relative;isolation:isolate;overflow:hidden;height:52px;padding:0 26px;gap:11px;font:500 15px/1 "Saans",sans-serif;letter-spacing:.012em;
  --sw:var(--slab);--sw-c:#fff4e6;--o:29px;box-shadow:none;transition:color .4s var(--ease),transform .25s var(--ease),box-shadow .4s var(--ease)}
.pill::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sw);clip-path:circle(0 at var(--o) 50%);transition:clip-path .75s cubic-bezier(.2,.9,.25,1)}
.pill::after{content:"";order:-1;flex:none;width:7px;height:7px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,244,230,.82);transition:background .25s linear,box-shadow .35s var(--ease)}
.pill:has(.ar),.pill:has(svg){--o:calc(100% - 32px)}
.pill:has(svg){--o:34px}
.pill:has(.ar)::after,.pill:has(svg)::after{display:none}
.pill.solid,.pill.solid:hover{background:var(--orange);box-shadow:none}
.pill.ghost,.pill.ghost:hover{background:rgba(255,252,245,.62);box-shadow:inset 0 0 0 1px rgba(39,35,31,.2);--sw:var(--orange);--sw-c:#fff}
.pill.sm{height:42px;padding:0 20px;font-size:14px;--o:24px}
.pill.sm:has(svg){--o:28px}
@media (hover:hover){
  .pill:hover,.pill.solid:hover,.pill.ghost:hover,.ly-b:hover{color:var(--sw-c)}
  .pill:hover::before{clip-path:circle(150% at var(--o) 50%)}
  .pill:hover::after{background:#ffd98a;box-shadow:inset 0 0 0 1.5px #ffd98a,0 0 0 2px rgba(255,217,138,.22),0 0 10px 2px rgba(255,190,90,.8)}
  .pill:hover svg{color:#ffd98a}
  .pill:hover .ar{transform:translateX(3px)}
}
.pill:active{transform:scale(.975);transition-duration:.1s}
.ly-b,.ly-b:hover{background:#fff4e6;box-shadow:none;--sw:var(--slab);--sw-c:#fff4e6;color:#b5340a}
.ly-b::after{box-shadow:inset 0 0 0 1.5px #b5340a}
.bar .pill.solid,.bar .pill.solid:hover{background:var(--mark);box-shadow:none;--sw:color-mix(in srgb,var(--slab) calc(var(--to) * 100%),color-mix(in srgb,#fff4e6 calc(var(--tb) * 100%),var(--slab)));--sw-c:color-mix(in srgb,#fff4e6 calc(var(--to) * 100%),color-mix(in srgb,var(--slab) calc(var(--tb) * 100%),#fff4e6))}
.fl .pill,.sign .pill{--sw:#fff4e6;--sw-c:var(--slab)}
.dock .pill{box-shadow:none}

/* ---------- SHOP HEAD: headline takes its width, the description gets the rest and sits in three lines ---------- */
.s-head{grid-template-columns:max-content minmax(0,1fr);column-gap:clamp(36px,4.2vw,64px)}
.s-head h2 em{display:block}
.s-side .lede-s{max-width:none;font-size:clamp(16px,1.12vw,17.5px)}

/* ---------- LOYALTY: two columns that share a top and a bottom edge. Steps ruled like the menu; descriptions and "Scan to join" share one left edge ---------- */
.ly-in{align-items:stretch}
.ly-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.ly-copy .chip{line-height:20px}
.loyal h2{margin-top:clamp(14px,1.5vw,22px)}
.ly-steps{display:block;width:100%;margin-top:clamp(20px,2.2vw,30px);border-top:1px solid color-mix(in srgb,var(--fg) 34%,transparent)}
.ly-steps li{display:grid;grid-template-columns:24px 126px minmax(0,1fr);align-items:center;padding:clamp(9px,.85vw,12px) 0;border-bottom:1px solid color-mix(in srgb,var(--fg) 34%,transparent)}
.ly-steps i{margin:0;width:9px;height:9px;box-shadow:0 0 10px 2px rgba(255,225,170,.65)}
.ly-steps b{font-size:clamp(17px,1.32vw,19.5px)}
.ly-steps span{margin:0;font-size:14.5px;line-height:1.32}
.ly-join{margin-top:auto;padding-top:22px;gap:26px;align-items:stretch}
.ly-act{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:4px 0}
.ly-scan{margin:0}

/* the board: a walnut case, a recessed face, brass along the rails, an ivory number under every line */
.panel{padding:clamp(14px,1.3vw,18px);border-radius:7px;
  background:repeating-linear-gradient(91deg,rgba(0,0,0,.09) 0 2px,transparent 2px 7px,rgba(255,220,170,.05) 7px 9px,transparent 9px 19px),linear-gradient(135deg,#774a2c,#4f2f1c 52%,#633c24);
  box-shadow:inset 0 1px 0 rgba(255,225,180,.28),inset 0 -2px 0 rgba(30,15,5,.5),0 38px 60px -32px rgba(70,16,0,.9),0 3px 0 #2b190e}
.p-face{position:relative;padding:clamp(14px,1.5vw,20px) clamp(10px,1.4vw,20px) clamp(10px,1.1vw,14px);border-radius:3px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.012) 0 2px,rgba(0,0,0,.04) 2px 5px),linear-gradient(180deg,#22150e,#170e09);
  box-shadow:inset 0 3px 12px rgba(0,0,0,.8),inset 0 0 0 1px rgba(0,0,0,.6),0 0 0 1px rgba(227,188,114,.34)}
.scr{width:8px;height:8px}
.p-plate{margin-bottom:clamp(10px,1.2vw,16px)}
.p-field{margin-top:0;row-gap:clamp(2px,.35vw,5px);--j:clamp(24px,2.45vw,35px);padding:clamp(6px,.7vw,10px) 0;border-top:1px solid rgba(227,188,114,.3);border-bottom:1px solid rgba(227,188,114,.3)}
.jk{gap:clamp(3px,.4vw,6px);padding:clamp(3px,.4vw,6px) 0}
.jk u{display:block;min-width:19px;padding:1.5px 3px 1px;border-radius:1.5px;background:linear-gradient(180deg,#efe2c8,#d9c9a8);color:#3a2616;font:600 8px/1 "Saans",sans-serif;letter-spacing:.04em;text-align:center;text-decoration:none;box-shadow:0 1px 1px rgba(0,0,0,.6)}
.p-hint{margin-top:clamp(8px,.9vw,12px);font-size:11.5px;letter-spacing:.06em;color:rgba(239,226,200,.72)}

/* ---------- THE END: the hero's bookend. Same table, late light. The line runs the page's full width and the sun comes up from the drinks ---------- */
.end{min-height:calc(100svh - var(--bar-h))}
.finale{display:block;flex:1 1 auto;min-height:0;background:linear-gradient(180deg,rgba(254,232,200,0) 0,rgb(254,232,200) 160px)}
.f-copy,.f-copy>*{max-width:none}
.f-copy{position:relative;z-index:3;width:min(1240px,calc(100% - 2 * var(--side)));margin:0 auto;padding:clamp(16px,2.6vh,28px) 0 0}
.f-top{display:flex;align-items:center;justify-content:space-between;gap:24px}
.f-ctas{margin:0}
.f-copy h2{margin:clamp(6px,1vh,12px) 0 0;text-align:center;white-space:nowrap;line-height:1;letter-spacing:-.04em;font-size:clamp(46px,9.8vw,155px)}
.f-copy h2 #fline{display:inline-block}
.f-art{right:auto;bottom:auto;transform-origin:50% 100%;transform:translateY(2%) scale(1.02);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(180deg,transparent 0,transparent 26%,#000 44%,#000 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(180deg,transparent 0,transparent 26%,#000 44%,#000 100%);mask-composite:intersect}
.f-rays{z-index:2;stroke-width:2.2}
.f-rays line{opacity:.8}
.end.lit .f-rays line{animation:raybreathe 5.5s ease-in-out infinite;animation-delay:calc(1.6s + var(--i) * 90ms)}
@keyframes raybreathe{0%,100%{opacity:.8}50%{opacity:.42}}

/* footer: the logo stands beside the links; sign-up and legal below */
.fl{padding-top:clamp(20px,3vh,32px)}
.l-grid{align-items:start;row-gap:clamp(12px,1.8vh,18px)}
.l-brand{grid-row:1 / span 2}
.l-mark{width:clamp(136px,11.2vw,168px)}
.l-sign{grid-column:2 / -1;margin:0;max-width:none;align-items:center;flex-wrap:nowrap;gap:10px}
.l-sign label{flex:0 1 270px}
.l-sign .s-note{flex:1 1 auto;flex-basis:auto;margin-left:8px}
.l-sign .done{flex-basis:auto}
.col h3{margin-bottom:9px}
.col a,.col span{padding:3px 0}
.now{display:flex!important;align-items:center;gap:8px;color:#fff4e6!important;font-weight:500}
.now b{font-weight:500}
.now i{flex:none;width:8px;height:8px;border-radius:50%;background:#ffb54a;box-shadow:0 0 10px 2px rgba(255,181,74,.75)}
.now.closed i{background:#5d6e8e;box-shadow:inset 0 1px 1px rgba(0,0,0,.4)}
.legal{margin-top:clamp(12px,1.8vh,20px);padding:12px 0 calc(14px + env(safe-area-inset-bottom))}

@media (max-width:1100px){
  .l-grid{grid-template-columns:1fr 1fr 1fr}
  .l-brand{grid-row:auto;grid-column:1/-1}
  .l-sign{grid-column:1/-1}
  .ly-in{align-items:center}
  .s-head{grid-template-columns:1fr}
}
@media (max-width:900px){ .ly-join{margin-top:0} }
@media (max-width:760px){
  .pill{height:50px}
  .ly-steps li{grid-template-columns:20px minmax(0,1fr);row-gap:1px}
  .ly-steps span{grid-column:2}
  .ly-join{padding-top:20px}
  .ly-act{padding:0;width:100%}
  .jk u{display:none}
  .p-face{padding:12px 8px 8px}
  .finale{padding:18px 0 0}
  .f-copy{width:auto;margin:0;padding:0 var(--side);text-align:center}
  .f-top{justify-content:center}
  .f-copy h2{white-space:normal;font-size:clamp(46px,14vw,62px);margin-top:12px}
  .f-copy h2 em{display:block}
  .f-art{left:auto;width:170%;height:auto;margin:-58px 0 -36px -38%;transform:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 70%,transparent 98%);mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 70%,transparent 98%)}
  .l-grid{grid-template-columns:1fr 1fr}
  .l-sign{flex-wrap:wrap}
  .l-sign label{flex:1 1 180px}
  .l-sign .s-note{flex-basis:100%;margin:0}
}

/* corners: every button is a key cut from the same stock as the page's paper tags (12px), not a pill. Inputs and nav chips follow */
.pill{border-radius:12px}
.pill.sm{border-radius:10px}
.sign input,.ly-form input{border-radius:12px}
.pill.sm~label input,.l-sign input{border-radius:10px;height:42px}
.links a,.b-links a{border-radius:10px}
.dock{border-radius:20px}.dock .pill{border-radius:13px}
.bar .pill.solid{--o:24px}

/* the shelf cords stop at the punched hole instead of running through the words */
.swing::after{height:40px;margin-bottom:-12px}

/* shop headline a step down so the description holds three lines at every laptop and desktop width */
.s-head h2{font-size:clamp(44px,5.15vw,78px)}

/* loyalty: step names get their own column */
.ly-steps li{grid-template-columns:24px 136px minmax(0,1fr)}

.f-rays{z-index:2}
@media (max-width:1100px){
  .end{min-height:0}
  .finale{min-height:clamp(420px,58vw,560px)}
}
@media (max-width:760px){ .finale{min-height:0} .ly-steps li{grid-template-columns:20px minmax(0,1fr)} }

/* resting lamps read on every button colour */
.pill.ghost::after{box-shadow:inset 0 0 0 1.5px rgba(39,35,31,.5)}
.bar .pill.solid::after{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#b5340a calc(var(--to) * 100%),rgba(255,244,230,.82))}
@media (hover:hover){
  .bar .pill.solid:hover::after,.pill.ghost:hover::after{background:#ffd98a;box-shadow:inset 0 0 0 1.5px #ffd98a,0 0 0 2px rgba(255,217,138,.22),0 0 10px 2px rgba(255,190,90,.8)}
}
.bar .pill.solid:hover{color:var(--sw-c)}

/* loyalty: QR gap makes "Scan to join" share the descriptions' left edge */
.ly-join{gap:36px}

/* the sun runs behind the big line, like a poster */
.f-rays{stroke-width:2}
.f-rays line{opacity:.62}
@keyframes raybreathe{0%,100%{opacity:.62}50%{opacity:.3}}
.f-copy h2{position:relative}

@media (max-width:1100px){ .l-grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:20px} .l-grid .col a.sl .lg{font-size:13.5px} }

@media (max-width:760px){
  .l-grid{grid-template-columns:1fr 1fr}
  .finale{display:flex;flex-direction:column;align-items:stretch;padding:22px 0 0}
  .f-copy{order:1;position:relative;z-index:3}
  .f-art{order:2;position:relative;display:block;left:auto;top:auto;right:auto;bottom:auto;width:170%;max-width:none;height:auto!important;margin:-34px 0 -18px -35%;transform:none}
  .finale::after{height:70px}
  .f-top{flex-direction:column;gap:14px}
  .f-ctas{display:none}
}

/* ==========================================================================
   11-04: the footer on the nav's edges + the full phone pass
   ========================================================================== */
:root{--side:max(clamp(20px,4.2vw,72px),env(safe-area-inset-left),env(safe-area-inset-right))}
.pill,a,button,.jk{-webkit-tap-highlight-color:transparent}

/* the ending and the footer run out to the same edges as the top bar */
.f-copy{width:min(1800px,calc(100% - 2 * var(--side)))}
.l-grid,.legal{max-width:1800px}
.legal{align-items:flex-end}
.legal p{max-width:none}
.l-rr{flex:none;text-align:right}
.l-rr a{transition:color .3s var(--ease)}
.l-rr a:hover{color:#fff4e6}
.l-rr .l-r+.l-r{margin-top:1px}
.l-rr .l-r:last-child a{color:#f3c9a8}

/* "Email us" wherever the full address would crowd its column */
@media (max-width:900px){ .col a.sl .lg{display:none} .col a.sl .sh{display:inline} }

@media (max-width:760px){
  /* hero: the table comes up under the lede, no dead air */
  .hero{padding-bottom:20px}
  .scene{aspect-ratio:1/.7;margin-top:14px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 84%,transparent 100%)}
  .chips{padding-top:6px}
  .menu{padding-top:52px}
  .m-head.lunch{margin-top:64px}
  .cot{margin-top:72px}
  /* type you can read, a field iOS won't zoom into */
  .chip{font-size:11.5px}
  .sign input,.l-sign input{font-size:16px}
  /* thumbs: every link in the footer gets a 40px row, social icons a 44px target */
  .col a,.col a.sl{padding:9px 0;line-height:1.3}
  .col span{padding:4px 0}
  .soc a{position:relative}
  .soc a::after{content:"";position:absolute;inset:-6px}
  .t-link{padding:10px 0;margin-top:6px}
  .l-rr{text-align:left}
  .l-rr a,.legal .l-r a{display:inline-block;padding:7px 0}
  .legal br{display:none}
  /* no scrolling effects a phone pays for: still leaves, no blend, no blur */
  .sun{mix-blend-mode:normal;will-change:auto}
  .leaves [data-image-wind],.leaves .drift{filter:none!important;animation:none}
  .dock{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
}
/* phone on its side: same reading order as a phone, wide picture, its own buttons */
@media (max-height:520px) and (min-width:761px) and (max-width:1100px){
  .dock{display:none}
  body::after{display:none}
  .links{display:none}
  .scene{aspect-ratio:2.5/1;margin-top:10px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 84%,transparent 100%)}
  .scene img{width:100%;left:50%}
  .copy{padding-top:22px;max-width:none}
  .ctas{display:flex!important;justify-content:flex-start;margin-top:18px}
  .ctas .ghost{display:inline-flex}
  .lede{max-width:44em}
  h1{font-size:44px}
  .chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:8px var(--side) 0}
  .chips li{font-size:13px;font-weight:500;padding:8px 12px;border-radius:99px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule)}
  .stage{height:calc(100svh - var(--bar-h) - 24px);top:calc(var(--bar-h) + 12px)}
  .plate{aspect-ratio:auto;height:100%;width:auto;aspect-ratio:4/5}
  .s-tag{display:none}
  .cot-copy h2{font-size:34px}
  .cot-now em{font-size:30px}
}

@media (max-width:1100px){ .legal br{display:none} }
/* the smallest phones: one clean bar, one column of links */
@media (max-width:360px){
  .b-brand b{white-space:nowrap}
  .clock{display:none}
}
@media (max-width:340px){
  .l-grid{grid-template-columns:1fr}
  .l-sign{flex-wrap:wrap}
}
/* phone on its side: the cottage line clears the arch */
@media (max-height:520px) and (min-width:761px) and (max-width:1100px){
  .cot-copy{top:calc(var(--bar-h) + 8px)}
  .cot-copy h2{margin-top:6px;font-size:27px}
  .cot-now{top:calc(var(--bar-h) + 10px)}
}

/* tablets upright: the hanging cards would sit on the cups, so the same four facts become chips under the table */
@media (min-width:761px) and (max-width:1000px) and (min-height:521px){
  .tag,.cords,.pin{display:none}
  .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;position:absolute;left:var(--side);right:var(--side);bottom:12px;z-index:6}
  .chips li{font-size:13.5px;font-weight:500;padding:9px 14px;border-radius:10px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule),0 8px 18px -12px rgba(39,35,31,.5)}
}
@media (max-width:760px){ .chips li{border-radius:10px} }

/* ==========================================================================
   11-04 phones, second pass: looked at screen by screen.
   Clean colour blocks with straight edges, one flush action bar, photos cropped
   to their subject, the ending composed for a narrow screen.
   ========================================================================== */
@media (max-width:760px){
  /* the action bar is part of the page's frame, nothing shows beside or under it */
  .dock{left:0;right:0;bottom:0;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-radius:0;background:var(--paper);box-shadow:0 -1px 0 var(--rule)}
  .dock .pill{height:50px;border-radius:12px;gap:9px}
  .dock .pill::after{display:none}
  .dock .pill svg{flex:none;width:17px;height:17px}
  .dock .pill.ghost{color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px rgba(39,35,31,.26)}
  .legal{align-items:flex-start;padding-bottom:calc(92px + env(safe-area-inset-bottom))}

  /* one top bar from the first screen on: same height, same parts, Call lives in the bar below */
  .nav{height:56px;padding:0 16px;align-items:center}
  .nav-r .pill{display:none}
  .nav .brand{gap:10px}
  .nav .brand svg{width:19px;height:31px}
  .nav .brand b{font-size:17px}

  /* paper stays paper: no dappled smudges behind the copy */
  .sun,.leaves{visibility:hidden}

  /* the headline always breaks on the phrase */
  .copy h1 em{display:block}
  /* while a photo loads: a warm tile, never its alt text */
  .f-art,.m-ph img,.r-ph img{color:transparent}
  .m-ph img,.r-ph img{background:#e6d9c3}

  /* hero facts: a tidy two-up list, not a scatter of pills */
  .hero{padding-bottom:0}
  .chips{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;padding:6px var(--side) 0}
  .chips li{padding:12px 0;font-size:14px;line-height:1.3;background:none;border-radius:0;box-shadow:none;border-top:1px solid var(--rule)}

  /* menu: the tray runs edge to edge, each item below it is a calm picture and its line */
  .menu{padding-top:64px}
  .m-ph{margin:24px calc(var(--side) * -1) 0}
  .m-ph img{aspect-ratio:4/3;border-radius:0}
  .rows{margin-top:32px;border-top:0}
  .rows li{padding:0 0 36px;border-bottom:0}
  .rows li:last-child{padding-bottom:0}
  .rows li b{font-size:23px}
  .r-ph{margin:0 0 14px;border-radius:14px}
  .r-ph img{aspect-ratio:4/3}
  .r-logo img{aspect-ratio:4/5}
  li[data-ph="cookie"] .r-ph img{object-position:50% 72%}
  li[data-ph="latte"] .r-ph img{object-position:50% 90%}
  li[data-ph="matcha"] .r-ph img{object-position:50% 30%}
  li[data-ph="pour"] .r-ph img{aspect-ratio:1/1;object-position:50% 45%}
  .m-head.lunch{margin-top:72px}
  .m-head.lunch + .rows{margin-top:24px}
  .m-foot{margin-top:28px}

  /* colour blocks with clean edges */
  .cot{margin-top:64px;padding-top:64px}
  .cot-win{margin:30px var(--side) 0}
  .cot-now{padding:28px var(--side) 56px}
  .shelf{padding-top:64px}
  .rack{margin-top:8px;padding-bottom:156px}
  .loyal{margin-top:32px;padding:56px var(--side) 56px}
  .connect{padding-top:64px}

  /* the Shed Room: cards only as tall as their words, posters the same height, each swipe lands on a card */
  .line-scroll{margin-top:24px;padding-bottom:44px;margin-bottom:0;scroll-snap-type:x proximity;scroll-padding-left:var(--side)}
  .line{align-items:stretch}
  .note{aspect-ratio:auto;scroll-snap-align:start}
  .note a{margin-top:auto;padding-top:16px}
  .note.ph{width:184px;padding:8px}
  .note.ph img{height:100%;aspect-ratio:auto}

  /* the ending: centred, the table fills the width and runs straight into the footer, its light rising to the words */
  .end{margin-top:0}
  .finale{padding:56px 0 0;overflow:hidden}
  .finale::after{display:none}
  .f-copy{width:auto;margin:0;padding:0 var(--side);text-align:center}
  .f-art{order:2;width:196%;max-width:none;height:auto!important;margin:-25vw 0 -7.6vw -45.6%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%);mask-image:linear-gradient(180deg,transparent 0,#000 38%)}
  .f-rays{display:block}
  .end.lit .f-rays line{animation:none}

  /* footer: the roundel stands on its own line, the lamp sits at the first line of its text */
  .fl{position:relative;padding-top:44px}
  .l-brand{display:flex;justify-content:center;margin-bottom:8px}
  .l-mark{width:172px}
  .now{align-items:flex-start!important}
  .now i{margin-top:.42em}
}
@media (max-width:340px){ .l-sign .pill{flex:1 1 100%} }
/* small phones: the first line of the headline and the eyebrow both hold on one line */
@media (max-width:375px){
  .copy h1{font-size:calc((100vw - 40px) / 7.9)}
  .eyebrow .ey-s{white-space:nowrap;font-size:10.5px;letter-spacing:.07em}
}