/* Salteo website · v0.9 · the pastry portrait opens; events, classes, pastries and story built out */
@font-face{font-family:"Source Serif 4";src:url("../fonts/source-serif-4.woff2?v=3681312afe") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Overpass";src:url("../fonts/overpass.woff2?v=9f4b8c94e0") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Overpass Mono";src:url("../fonts/overpass-mono.woff2?v=941bc10378") format("woff2");font-weight:300 700;font-display:swap}
:root{
  --paper:#FFFFFF; --ink:#1C1B19; --ink-2:#6E6B65; --ink-3:#AAA7A1; --rule:#D9D6D1;
  --orange:#FC5D00;
  --stone:#F4F3F0; --stone-2:#EEECE8; --print:#F7F6F2; --ink-well:#2A2926; --err:#B42318; --err-on-orange:#5A0F00;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Overpass",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Overpass Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --hdr:84px; --edge:clamp(20px,3.4vw,48px); --gap:clamp(136px,15vw,232px);
  --t1:13px; --t2:15px; --t3:clamp(24px,2.3vw,30px); --t4:clamp(40px,4.8vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t1)/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure{margin:0;font-weight:400}
button{font:inherit;color:inherit}
.u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
.u:hover{text-decoration-color:var(--ink-3)}
:focus-visible{outline:1.5px solid var(--orange);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:10px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px}
.skip:focus{left:12px}
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.02em}
.muted{color:var(--ink-2)}
[hidden]{display:none!important}

/* header: wordmark centred, words either side */
.hdr{position:sticky;top:0;z-index:40;height:var(--hdr);background:var(--paper);transition:transform .6s var(--ease)}
.hdr.is-hidden{transform:translateY(-100%)}
.hdr-in{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--edge)}
.hdr nav{display:flex;gap:30px}
.hdr .r{justify-content:flex-end}
.hdr nav a{position:relative;padding:6px 0}
.hdr nav a::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.hdr nav a:hover::after,.hdr nav a[aria-current="page"]::after{transform:scaleX(1)}
.brand{display:flex;align-items:center;justify-content:center;height:44px;line-height:0;padding:0}
.brand img{height:16.64px;width:auto}
.hdr .m{display:none;align-items:center;min-height:44px;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;line-height:1;cursor:pointer}
.hdr .m.l{justify-self:start;text-align:left}
.hdr .m.r{justify-self:end;text-align:right}

.hdr.over{position:fixed;left:0;right:0;background:transparent}
.hdr.over .brand{opacity:0;transform:translateY(-6px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hdr.over.past{background:var(--paper)}
.hdr.over.past .brand{opacity:1;transform:none}
body.has-cover main{padding-top:0}

/* the cover: the front of the box at full scale, lifted away on scroll */
.intro{position:relative;height:250vh}
@supports (height:100svh){.intro{height:250svh}}
.intro-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--paper)}
.cover-3d{position:absolute;inset:0;z-index:3;perspective:1500px;perspective-origin:50% -4%;pointer-events:none}
.cover-3d .cover{pointer-events:auto}
.cover{position:absolute;inset:0;transform-origin:50% 0;will-change:transform,opacity;z-index:3}
.cover-face{position:absolute;inset:0;background:var(--orange);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:calc(var(--hdr) + 12px) var(--edge) 0}
.cover-mark{width:min(88vw,1400px);height:auto}
.cover-url{margin-top:clamp(18px,2.4vw,34px);color:#fff;font-weight:700;font-size:clamp(17px,1.5vw,21px);letter-spacing:.01em}
.cover-foot{position:absolute;left:var(--edge);right:var(--edge);bottom:clamp(20px,3.4vh,40px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;color:var(--ink)}
.cover-foot h1{font-family:var(--serif);font-size:clamp(17px,1.45vw,21px);line-height:1.4;max-width:30ch;font-variation-settings:"opsz" 20}
.cue{display:flex;align-items:center;gap:12px;white-space:nowrap}
.cue i{display:block;width:1px;height:38px;background:var(--ink);transform-origin:50% 0;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:1}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .cover-mark{animation:rise 1.5s var(--ease) both}
  .cover-url,.cover-foot{animation:fade 1.2s .7s var(--ease) both}
  @keyframes rise{from{clip-path:inset(0 0 100% 0);transform:translateY(24px)}to{clip-path:inset(0 0 0 0);transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}
.stage3d{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--hdr) + 8px) var(--edge) 28px;z-index:1}
.bx-btn{position:relative;display:block;width:100%;flex:1;min-height:0;cursor:pointer;-webkit-tap-highlight-color:transparent;outline-offset:-8px}
.bx-fallback{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:auto;height:auto;max-width:min(560px,86vw);max-height:92%}
.bx-live .bx-fallback{display:none}
.bx-gl{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none;max-width:none}
.bx-scene{position:absolute;inset:0;perspective:2800px;perspective-origin:50% 30%}
.bx{position:absolute;left:50%;top:54%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.bx-f,.bx-hinge{position:absolute;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.bx-hinge{left:0;top:0;width:0;height:0}
.bx-front{background:linear-gradient(180deg,#f6f5f2,#e9e7e2)}
.bx-right{background:linear-gradient(180deg,#e0ded8,#d3d0c9)}
.bx-left{background:linear-gradient(180deg,#eceae6,#e2e0db)}
.bx-back{background:linear-gradient(180deg,#e9e7e2,#dddad4)}
.bx-bottom{background:#cfccc5}
.bx-top{background:linear-gradient(160deg,#ffffff,#f2f1ee)}
.bx-front,.bx-right,.bx-left,.bx-back,.bx-top{box-shadow:inset 0 0 0 .6px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.7)}
.bx-shadow{background:radial-gradient(ellipse at 50% 50%,rgba(40,32,24,.28) 0%,rgba(40,32,24,.11) 38%,rgba(0,0,0,0) 62%);filter:blur(6px);-webkit-backface-visibility:visible;backface-visibility:visible}
.bx-lid,.bx-flabel{position:absolute;display:block;max-width:none;transition:opacity .45s var(--ease)}
.bx-lid{border-radius:3px 3px 0 0;box-shadow:0 0 0 .5px rgba(0,0,0,.1)}
.bx-flabel{border-radius:0 0 3px 3px;box-shadow:0 0 0 .5px rgba(0,0,0,.1)}
.bx-lid.fading{opacity:0}
.bx-inner{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.bx-liner{background:linear-gradient(135deg,#f7f3eb,#ece5d8 60%,#f4efe6);box-shadow:0 0 0 .5px rgba(0,0,0,.05)}
.bx-under{background:linear-gradient(180deg,#b78c5c,#a57a4c)}
.bx-flap{background:linear-gradient(180deg,#f4f3f0,#e8e6e1)}
.bx-items{position:absolute;inset:0;z-index:1;pointer-events:none;visibility:hidden}
.bx-item{position:absolute;left:0;top:0;height:auto;max-width:none;will-change:transform,opacity;transition:opacity .35s ease}
.bx-sh{position:absolute;left:0;top:0;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(70,46,22,.42),rgba(70,46,22,0) 70%);filter:blur(1.5px)}
.stage-cap{position:relative;z-index:3;display:grid;text-align:center;min-height:78px}
.stage-cap>div{grid-area:1/1;opacity:0;transform:translateY(8px);transition:opacity .8s var(--ease),transform .8s var(--ease);pointer-events:none}
.stage-cap>div.on{opacity:1;transform:none;pointer-events:auto}
.capB .cta{margin-top:10px;display:flex;gap:14px;justify-content:center;align-items:baseline}
.capB .sample{color:var(--ink-3)}
.stage-cap .serif{font-size:clamp(17px,1.4vw,20px);line-height:1.4}
.stage-cap .lidcap{margin-top:8px}

/* the object */
.stage{min-height:calc(100svh - var(--hdr));display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--edge) clamp(40px,6vh,72px);text-align:center}
.object{position:relative;display:block;width:min(760px,90vw);margin:0 auto;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.object img{width:100%;height:auto;transition:opacity 1s var(--ease)}
.object img.next{position:absolute;inset:0;opacity:0}
.object img.next.in{opacity:1}
.stage h1{font-family:var(--serif);font-size:clamp(18px,1.5vw,21px);line-height:1.45;max-width:34ch;margin:clamp(8px,1.6vh,20px) auto 0;font-variation-settings:"opsz" 20}
.lidcap{margin-top:10px;color:var(--ink-2);display:flex;gap:10px;justify-content:center;align-items:baseline}
.lidcap .mono{color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .object{animation:arrive 1.6s var(--ease) both}
  @keyframes arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* lanes: a short menu, set like a card at a good table */
.lanes{padding:var(--gap) var(--edge) 0;text-align:center}
.lane{display:block;padding:clamp(18px,2.2vw,30px) 0}
.lane .t{display:block;font-family:var(--serif);font-size:var(--t4);line-height:1.04;letter-spacing:-.016em;font-variation-settings:"opsz" 60;transition:color .45s var(--ease)}
.lane .s{display:block;margin-top:12px;color:var(--ink-2)}
.lane:hover .t,.lane:focus-visible .t{color:var(--orange)}

/* index with a preview, set large */
.doors{padding:var(--gap) var(--edge) 0}
.doors-in{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,88px);align-items:center}
.doors-list{list-style:none;margin:0;padding:0}
.door{display:block;padding:clamp(14px,1.8vw,24px) 0;border-top:1px solid var(--rule)}
.doors-list li:last-child .door{border-bottom:1px solid var(--rule)}
.door .t{display:block;font-family:var(--serif);font-size:clamp(44px,6.4vw,104px);line-height:.98;letter-spacing:-.024em;font-variation-settings:"opsz" 60;transition:color .5s var(--ease),transform .7s var(--ease)}
.door .s{display:flex;justify-content:space-between;gap:16px;margin-top:12px;color:var(--ink-2)}
.door .go{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
.door.on .t,.door:hover .t,.door:focus-visible .t{color:var(--orange);transform:translateX(10px)}
.doors-view{position:relative;aspect-ratio:4/5;background:var(--stone);overflow:hidden}
.doors-view figure{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .7s var(--ease),transform 1.2s var(--ease)}
.doors-view figure.on{opacity:1;transform:none}
.doors-view img{width:100%;height:100%;object-fit:cover}
.door-img{display:none}

/* the route */
.route2{padding:var(--gap) var(--edge) 0}
.route2 h2{text-align:center;font-family:var(--serif);font-size:var(--t3);line-height:1.2}
.journey{list-style:none;padding:0;position:relative;max-width:1180px;margin:clamp(48px,6vw,80px) auto 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.journey::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--jp,0))}
.journey::after{content:"";position:absolute;top:0;left:calc(var(--jp,0) * 100%);width:11px;height:11px;margin-left:-5px;border-radius:50%;background:var(--orange)}
.stop{position:relative;padding-top:30px}
.stop::before{content:"";position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}
.stop.on::before{background:var(--ink);box-shadow:none}
.stop .pl,.stop .wh{transition:color .4s}
.stop:not(.on) .pl{color:var(--ink-3)}
.stop .pl{font-family:var(--serif);font-size:clamp(20px,1.9vw,27px);line-height:1.15}
.stop .wh{margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--ink-2)}

/* prints */
.pr img{width:100%}
.pr.kl img{outline:1px solid rgba(28,27,25,.09);outline-offset:-1px}
.pr figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px;text-align:left}
.pr figcaption .t{font-family:var(--serif);font-size:14px;line-height:1.3}
.pr figcaption .n{font-family:var(--mono);font-size:11px;color:var(--ink-2);white-space:nowrap}

/* the archive, hung rather than gridded */
.archive{padding:var(--gap) var(--edge) 0}
.hang{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.hang .h1{grid-column:1 / span 3}
.hang .h2{grid-column:5 / span 2;margin-top:clamp(80px,13vw,184px)}
.hang .h3{grid-column:8 / span 2;margin-top:clamp(20px,3vw,40px)}
.hang .h4{grid-column:11 / span 2;margin-top:clamp(56px,9vw,120px)}
.route{max-width:56ch;margin:clamp(72px,9vw,120px) auto 0;text-align:center;color:var(--ink-2);font-size:var(--t1)}
.route a{color:var(--ink)}

/* the list */
.list{padding:var(--gap) var(--edge);text-align:center}
.list h2{font-family:var(--serif);font-size:var(--t3);line-height:1.2;font-variation-settings:"opsz" 30}
.list .sub{margin-top:10px;color:var(--ink-2)}
.lf{max-width:440px;margin:40px auto 0;text-align:left}
.lf .row{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--ink)}
.lf input[type=email],.lf input[type=tel]{flex:1;min-width:0;border:0;background:transparent;font:400 var(--t2)/1.4 var(--sans);color:var(--ink);padding:13px 0 12px;border-radius:0;outline:none}
.lf input::placeholder{color:var(--ink-3)}
.lf .go{background:none;border:0;padding:13px 0 12px;font-weight:600;cursor:pointer;letter-spacing:.01em}
.lf .go:hover{color:var(--ink-2)}
.lf .opts{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:14px;color:var(--ink-2)}
.toggles{display:flex;gap:16px;flex-wrap:wrap}
.toggles button{background:none;border:0;padding:2px 0;cursor:pointer;color:var(--ink-3);transition:color .3s}
.toggles button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
.lf .addphone{background:none;border:0;padding:2px 0;cursor:pointer;color:var(--ink-2);white-space:nowrap}
.lf .phone{margin-top:22px}
.consent{display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:start;margin-top:14px;font-size:12px;line-height:1.55;color:var(--ink-2)}
.consent input{width:14px;height:14px;margin:2px 0 0;accent-color:var(--ink)}
.consent a{color:var(--ink)}
.lf .err{min-height:0;margin-top:12px;color:var(--err)}
.lf .fine{margin-top:18px;font-size:12px;color:var(--ink-3)}
.lf .fine a{color:var(--ink-2)}
.lf-done{margin-top:40px}
.lf-done .serif{font-size:var(--t3);line-height:1.2}
.lf-done .muted{margin-top:8px}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}

/* page heads */
.phead{padding:clamp(80px,11vw,160px) var(--edge) clamp(56px,7vw,104px);text-align:center}
.phead h1{font-family:var(--serif);font-size:var(--t4);line-height:1.04;letter-spacing:-.016em;font-variation-settings:"opsz" 60}
.phead p{max-width:44ch;margin:18px auto 0;color:var(--ink-2);font-size:var(--t2);line-height:1.55}
.solo{display:flex;justify-content:center;padding:0 var(--edge)}

/* enquiry */
.ef{max-width:640px;margin:0 auto;padding:0 var(--edge) var(--gap)}
.g2{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
.f{display:block;margin:0 0 30px}
.f>span{display:block;font-size:12px;color:var(--ink-2)}
.f>span em{font-style:normal;color:var(--ink-3)}
.f input,.f select,.f textarea{width:100%;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:transparent;font:400 var(--t2)/1.5 var(--sans);color:var(--ink);padding:9px 0 10px;-webkit-appearance:none;appearance:none;transition:border-color .3s}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-bottom-color:var(--ink)}
.f select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231C1B19' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 2px center;padding-right:22px}
.f textarea{min-height:132px;resize:vertical}
.ef .check{display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:start;color:var(--ink-2);margin:4px 0 28px}
.ef .check input{width:14px;height:14px;margin:2px 0 0;accent-color:var(--ink)}
.submit{display:block;width:100%;height:56px;border:0;border-radius:0;background:var(--ink);color:#fff;font:500 14px/1 var(--sans);letter-spacing:.02em;cursor:pointer;transition:background .3s}
.submit:hover{background:#000}
.submit:disabled{background:var(--ink-2);cursor:default}
.ef .err{margin:0 0 16px;color:var(--err)}
.ef .fine{margin-top:16px;font-size:12px;color:var(--ink-3);text-align:center}
.ef .fine a{color:var(--ink-2)}
.sent{text-align:center;padding:24px 0}
.sent .serif{font-size:var(--t3);line-height:1.2}
.sent .muted{margin-top:10px}

/* prose */
.prose{max-width:620px;margin:0 auto;padding:0 var(--edge) var(--gap);font-size:14px;line-height:1.75}
.prose h2{font-family:var(--serif);font-size:20px;line-height:1.3;margin:44px 0 8px}
.prose p{color:var(--ink)}
.prose a{text-decoration:underline;text-underline-offset:.3em}

/* drawer and menu */
.drawer{position:fixed;inset:0;z-index:60;visibility:hidden}
.drawer.is-open{visibility:visible}
.drawer .scrim{position:absolute;inset:0;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .45s var(--ease)}
.drawer.is-open .scrim{opacity:1}
.drawer .panel{position:absolute;top:0;right:0;bottom:0;width:min(500px,100%);background:var(--paper);border-left:1px solid var(--rule);padding:30px clamp(24px,3.4vw,48px);overflow:auto;transform:translateX(100%);transition:transform .6s var(--ease)}
.drawer.is-open .panel{transform:none}
.drawer .x{display:flex;justify-content:flex-end}
.drawer .x button{background:none;border:0;cursor:pointer;padding:6px 0}
.drawer .in{margin-top:clamp(64px,14vh,140px);text-align:center}
.drawer .in h2{font-family:var(--serif);font-size:var(--t3);line-height:1.2}
.drawer .in .sub{margin-top:10px;color:var(--ink-2)}
.sheet{position:fixed;inset:0;z-index:50;background:var(--paper);display:none;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.sheet.is-open{display:flex}
.sheet a{font-family:var(--serif);font-size:36px;line-height:1.3}
.sheet .x{position:absolute;top:18px;left:var(--edge);background:none;border:0;padding:8px 0;cursor:pointer}

.hang [data-speed]{will-change:transform}
/* tear-off confirmation */
.lf{transform-origin:0 100%}
.lf.tearing{animation:tear .7s var(--ease) forwards}
.lf.tearing .row{border-bottom-style:dashed}
@keyframes tear{0%{transform:none;opacity:1}25%{transform:translateY(-3px) rotate(-.6deg);opacity:1}100%{transform:translate(-14px,-72px) rotate(-7deg);opacity:0}}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
/* the ending: the front of the box, with the list inside */
.end{background:var(--orange);color:var(--ink);padding:clamp(96px,11vw,160px) var(--edge) 0;position:relative}
.end-list{max-width:520px;margin:0 auto;text-align:center}
.end-list h2{font-family:var(--serif);font-size:clamp(30px,3.2vw,44px);line-height:1.12;font-variation-settings:"opsz" 44}
.end-list .sub{margin-top:12px}
.end .lf .row{border-bottom-color:var(--ink)}
.end .lf input::placeholder{color:rgba(28,27,25,.62)}
.end .toggles button{color:rgba(28,27,25,.62)}
.end .toggles button[aria-pressed="true"]{color:var(--ink)}
.end .lf .addphone,.end .consent,.end .lf .fine,.end .lf .fine a,.end .consent a{color:var(--ink)}
.end .lf .err{color:var(--err-on-orange)}
.end .lf-done .muted{color:var(--ink)}
.end-mark{display:block;width:min(86vw,1400px);height:auto;margin:clamp(96px,11vw,168px) auto 0}
.end-url{text-align:center;margin-top:clamp(14px,1.6vw,24px);color:#fff;font-weight:700;font-size:19px}
.end .legal{color:var(--ink);padding-top:clamp(48px,6vw,80px)}
.end .legal a:hover{color:#000}

/* the front of the box */

.front{background:var(--orange);color:#fff;text-align:center;padding:clamp(104px,13vw,184px) var(--edge) clamp(56px,6vw,80px);margin-top:clamp(56px,7vw,96px)}
.front img{width:min(64%,900px);margin:0 auto}
.front .url{margin-top:clamp(22px,2.6vw,36px);font-weight:700;font-size:19px;letter-spacing:.01em}
.legal{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding:22px var(--edge) calc(22px + env(safe-area-inset-bottom));font-size:12px;color:var(--ink-2)}
.legal nav{display:flex;gap:22px;flex-wrap:wrap}
.legal a:hover{color:var(--ink)}

/* arrival of the rest */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(12px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
  .rv.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* phones and narrow panes */
@media (max-width:860px){
  :root{--hdr:64px}
  .hdr nav{display:none}
  .hdr .m{display:inline-flex}
  .brand img{height:13.52px}
  .stage{min-height:auto;padding-top:24px;padding-bottom:8px}
  .hang{grid-template-columns:1fr 1fr;column-gap:20px;row-gap:44px}
  .hang .h1{grid-column:1}
  .hang .h2{grid-column:2;margin-top:96px}
  .hang .h3{grid-column:1;margin-top:0}
  .hang .h4{grid-column:2;margin-top:64px}
  .g2{grid-template-columns:1fr}
  .lf .opts{flex-direction:column;gap:12px}
  .front img{width:84%}
  .intro{height:240vh}
  @supports (height:100svh){.intro{height:240svh}}
  .cover-3d{perspective-origin:50% 0}
  .cover-mark{width:92vw}
  .stage3d{padding-bottom:20px}
  .stage-cap{min-height:92px}
  .doors-in{grid-template-columns:1fr}
  .doors-view{display:none}
  .door-img{display:block;margin:4px 0 16px;aspect-ratio:4/3;background:var(--stone)}
  .door .s{flex-wrap:wrap}
  .door-img img{width:100%;height:100%;object-fit:cover}
  .door .t{font-size:clamp(40px,11vw,56px)}
  .door.on .t{color:var(--ink);transform:none}
  .journey{grid-template-columns:1fr;gap:28px;padding-left:28px}
  .journey::before{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto;transform-origin:50% 0;transform:scaleY(var(--jp,0))}
  .journey::after{left:0;top:calc(var(--jp,0) * 100%);margin-left:0;margin-top:-5px}
  .stop{padding-top:0}
  .stop::before{left:-28px;top:6px}
  .cover-foot{flex-direction:column;align-items:flex-start}
  .cue{display:none}
  .front .url{font-size:19px}
  .legal{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  .cover-3d{position:relative;perspective:none}
  .intro{height:auto}
  .intro-pin{position:relative;height:auto;overflow:visible;perspective:none}
  .cover{position:relative;height:100svh}
  .stage3d{position:relative;min-height:90svh}
  .stage-cap{opacity:1;transform:none}
  .hdr.over{position:sticky;background:var(--paper)}
}

/* ===== v0.7: conversion-led home. The box opens by itself; classes and events are bookable from the first screen ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;background:var(--ink);color:#fff;font:500 13px/1 var(--sans);letter-spacing:.02em;white-space:nowrap;border:0;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.btn:hover{background:#000}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.hdr .acts{display:flex;justify-content:flex-end;align-items:center;gap:26px}
.hdr .acts .u{padding:6px 0}
.sheet-acts{display:flex;flex-direction:column;gap:10px;margin-top:30px;width:min(320px,80vw)}
.sheet-acts .btn{height:50px;font-size:14px}

.hero{position:relative;display:flex;flex-direction:column;align-items:center;padding:6px var(--edge) clamp(16px,2.6vh,28px)}
.hero-obj{position:relative;width:100%;max-width:1100px;height:clamp(300px,calc(100svh - var(--hdr) - 262px),660px)}
.hero-obj .bx-btn{position:absolute;inset:0;height:auto}
.bx-gl{opacity:0;transition:opacity .7s var(--ease)}
.bx-live .bx-gl{opacity:1}
.hero-txt{text-align:center;margin-top:clamp(2px,.8vh,10px)}
.hero-txt h1{font-family:var(--serif);font-size:clamp(22px,2.05vw,29px);line-height:1.2;letter-spacing:-.008em;font-variation-settings:"opsz" 30}
.hero-txt p{margin-top:7px;color:var(--ink-2);font-size:var(--t2)}
.bar{width:100%;max-width:1040px;margin-top:clamp(16px,2.8vh,28px);display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.bar .half{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0}
.bar .half:first-child{padding-right:30px;background:linear-gradient(to bottom,var(--ink-3) 0 3px,transparent 3px 7px) right top/1px 7px repeat-y}
.bar .half:last-child{padding-left:30px}
.bar h2{font-family:var(--serif);font-size:21px;line-height:1.15;font-variation-settings:"opsz" 24}
.bar .nx{margin-top:5px;color:var(--ink-2);font-size:13px;line-height:1.45}
.bar .nx time{color:var(--ink)}
.bar .nx .ln{display:block}
.bar .nx .sub{margin-top:2px;font-family:var(--mono);font-size:11px;color:var(--ink);font-variant-numeric:tabular-nums}
.hero .sample{margin-top:12px;text-align:center}
.sample{color:var(--ink-3)}

.sec{padding:var(--gap) var(--edge) 0;max-width:1280px;margin:0 auto}
.sec.first{padding-top:0}
.sec-hd{display:flex;justify-content:space-between;align-items:baseline;gap:28px;padding-bottom:16px;border-bottom:1px solid var(--ink)}
.sec-hd h2{font-family:var(--serif);font-size:var(--t4);line-height:1;letter-spacing:-.02em;font-variation-settings:"opsz" 60}
.sec-hd p{max-width:46ch;color:var(--ink-2);font-size:var(--t2);line-height:1.5;text-align:right}
.sec-hd .sample{text-align:right}

.fmts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,3.4vw,56px)}
.fmt{display:flex;flex-direction:column;padding-top:28px}
.fmt h3{font-family:var(--serif);font-size:clamp(22px,1.9vw,27px);line-height:1.15;font-variation-settings:"opsz" 30}
.fmt .line{margin-top:8px;color:var(--ink-2);font-size:var(--t2);line-height:1.5;min-height:3em}
.fmt dl{margin:18px 0 0;border-top:1px solid var(--rule)}
.fmt dl div{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px solid var(--rule)}
.fmt dt{color:var(--ink-2)}
.fmt dd{margin:0;text-align:right}
.fmt .from{margin-top:18px;font-family:var(--serif);font-size:20px;line-height:1.2}
.fmt .u{margin-top:12px;align-self:flex-start;font-weight:600}
.ev.first .sample{margin-top:28px;text-align:center}

.seal{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,104px);align-items:center;margin-top:clamp(80px,9vw,136px)}
.seal-sec .seal{margin-top:0}
.seal-img img,.bxs-img img,.pg-img img{width:100%;background:var(--stone)}
.seal-img{max-width:460px}
.seal-txt .big{font-size:clamp(26px,2.6vw,38px);line-height:1.16;letter-spacing:-.01em;max-width:19ch;font-variation-settings:"opsz" 40}
.seal-txt .muted{margin-top:16px;font-size:var(--t2)}
.seal-txt .cta{margin-top:28px}

.sess{list-style:none;margin:0;padding:0}
.ses{display:grid;grid-template-columns:132px minmax(0,1fr) 150px 116px 84px;align-items:baseline;column-gap:22px;padding:19px 0;border-bottom:1px solid var(--rule)}
.ses .d{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
.ses .d .clk{margin-left:10px;color:var(--ink-2)}
.ses .tt{font-family:var(--serif);font-size:clamp(19px,1.6vw,23px);line-height:1.2}
.ses .meta{color:var(--ink-2)}
.ses .st{font-family:var(--mono);font-size:11px}
.ses .bk{justify-self:end;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
.ses.out .tt,.ses.out .st,.ses.out .d{color:var(--ink-3)}
.ses.out .bk{font-weight:400;color:var(--ink-2)}
.cl-more{display:flex;flex-wrap:wrap;gap:12px 44px;margin-top:24px;color:var(--ink-2)}
.cl-more a{color:var(--ink)}
.takehome{margin-top:22px;color:var(--ink-2);font-size:var(--t2)}

.bxs{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,104px);align-items:center}
.bxs-txt h2{font-family:var(--serif);font-size:var(--t4);line-height:1;letter-spacing:-.02em;font-variation-settings:"opsz" 60}
.bxs-txt p{margin-top:16px;color:var(--ink-2);font-size:var(--t2);line-height:1.55;max-width:34ch}
.bxs-txt .cta{margin-top:22px;color:var(--ink);font-weight:600}

.pg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,104px);align-items:center}
.pg-img{max-width:460px}
.pg .blk + .blk{margin-top:44px;padding-top:44px;border-top:1px solid var(--rule)}
.pg h2{font-family:var(--sans);font-weight:800;font-size:clamp(26px,2.4vw,34px);line-height:1;letter-spacing:-.03em}
.pg p{margin-top:10px;color:var(--ink-2);font-size:var(--t2);line-height:1.55;max-width:40ch}
.pg .cta{margin-top:20px}

.ef-hd{padding-top:var(--gap);margin-bottom:40px;text-align:center}
.ef-hd h2{font-family:var(--sans);font-weight:800;font-size:clamp(30px,3vw,40px);line-height:1;letter-spacing:-.03em}
.ef-hd .sub{margin-top:10px;color:var(--ink-2);font-size:var(--t2)}
.step{border:0;margin:0;padding:0;min-width:0}
.js-steps .step.is-done{display:none}
.ef .err{min-height:0}
.back{background:none;border:0;padding:0;color:var(--ink-2);text-decoration:underline;text-underline-offset:.3em;cursor:pointer;font-size:inherit}

.actbar{display:none}

@media (max-width:860px){
  .hdr .acts{display:none}
  .hero{padding-top:2px}
  .hero-obj{height:clamp(236px,calc(100svh - var(--hdr) - 400px),420px)}
  .hero-txt h1{font-size:21px}
  .hero-txt p{font-size:14px}
  .bar{grid-template-columns:1fr;border-bottom:0;margin-top:14px}
  .bar .half{flex-direction:column;align-items:stretch;gap:12px;padding:15px 0;border-bottom:1px solid var(--rule)}
  .bar .half:first-child{padding-right:0;background:none}
  .bar .half:last-child{padding-left:0}
  .bar .btn{width:100%;height:48px;font-size:14px}
  .sec-hd{flex-direction:column;align-items:flex-start;gap:10px}
  .sec-hd p,.sec-hd .sample{text-align:left}
  .fmts{grid-template-columns:1fr}
  .fmt{padding-top:30px}
  .fmt .line{min-height:0}
  .seal,.bxs,.pg{grid-template-columns:1fr}
  .seal-img,.pg-img{max-width:340px}
  .ses{grid-template-columns:minmax(0,1fr) auto;row-gap:5px;padding:17px 0}
  .ses .d{grid-column:1}
  .ses .st{grid-column:2;justify-self:end}
  .ses .tt{grid-column:1 / -1}
  .ses .meta{grid-column:1}
  .ses .bk{grid-column:2}
  .actbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--rule);transform:translateY(110%);transition:transform .45s var(--ease)}
  .actbar.on{transform:none}
  .actbar .btn{height:46px;font-size:14px}
  .end{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.bx-gl{transition:none}}

/* ===== v0.8: two voices (highway sans for the present, serif for the past), the seal composer, seats as marks ===== */
h1,h2,h3,.seal-for{text-wrap:balance}
p,dd,li{text-wrap:pretty}
.js .bx-btn .bx-fallback:not(.ns){display:none}
.bx-static .bx-fallback{display:block!important}
.hd{display:grid;gap:14px;padding-bottom:clamp(26px,3vw,40px)}
.hd h2{font-family:var(--sans);font-weight:800;font-size:clamp(46px,6vw,92px);line-height:.9;letter-spacing:-.035em}
.hd p{max-width:44ch;color:var(--ink-2);font-size:var(--t2);line-height:1.5}
.bar h2{font-family:var(--sans);font-weight:800;font-size:20px;letter-spacing:-.01em}
.bar .nx .sub{font-family:var(--sans);font-weight:600;font-size:13px;color:var(--ink)}
.today{margin-top:12px;text-align:center;font-family:var(--serif);font-size:13px;color:var(--ink-2)}
.today .n{font-family:var(--mono);font-size:11px;color:var(--ink)}
.sample{margin-top:22px;font-size:12px;color:var(--ink-3)}

/* the seal composer */
.cmp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5.5vw,96px);align-items:center;border-top:1px solid var(--ink);padding-top:clamp(28px,3.4vw,48px)}
.cmp-stage{background:var(--stone);display:flex;align-items:center;justify-content:center;padding:clamp(28px,4.4vw,64px) clamp(20px,3vw,48px)}
.seal-card{width:min(100%,340px);background:#fff;display:flex;flex-direction:column;align-items:center;padding-top:9%;box-shadow:0 0 0 .5px rgba(28,27,25,.08),0 1px 1px rgba(28,27,25,.05),0 22px 40px -30px rgba(28,27,25,.45)}
.seal-ph{width:58%}
.seal-ph img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;transition:opacity .35s var(--ease)}
.seal-ph img.swap{opacity:0}
.seal-cap{width:58%;display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:9px}
.seal-cap .t{font-family:var(--serif);font-size:14px;line-height:1.2}
.seal-cap .n{font-family:var(--mono);font-size:11px;white-space:nowrap}
.seal-src{width:58%;margin-top:4px;font-size:7.2px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.seal-perf{width:88%;height:8px;margin:17px 0 14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M0 4 Q3.5 0.6 7 4 T14 4' fill='none' stroke='%231C1B19' stroke-width='1'/%3E%3C/svg%3E") repeat-x left center/14px 8px}
.seal-for{max-width:86%;font-family:var(--serif);font-size:clamp(16px,1.45vw,19px);line-height:1.25;text-align:center;overflow-wrap:anywhere}
.seal-date{margin-top:4px;font-family:var(--serif);font-style:italic;font-size:13px;color:var(--ink-2)}
.seal-note{margin-top:13px;font-size:7.2px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.seal-front{align-self:stretch;margin-top:20px;background:var(--orange);display:flex;flex-direction:column;align-items:center;padding:21px 0 15px}
.seal-front img{width:46%;height:auto}
.seal-front span{margin-top:7px;color:#fff;font-weight:700;font-size:9.5px;letter-spacing:.01em}
.cmp-tabs{display:flex;flex-wrap:wrap;gap:4px 26px;border-bottom:1px solid var(--rule)}
.cmp-tabs button{background:none;border:0;padding:0 0 12px;margin:0;font:700 15px/1.25 var(--sans);color:var(--ink-3);cursor:pointer;box-shadow:inset 0 -2px 0 transparent;transition:color .3s var(--ease),box-shadow .3s var(--ease)}
.cmp-tabs button:hover{color:var(--ink-2)}
.cmp-tabs button[aria-selected="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.cmp-line{margin-top:18px;color:var(--ink-2);font-size:var(--t2)}
.cmp-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:18px 0 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cmp-facts div{padding:12px 14px 13px 0}
.cmp-facts div + div{padding-left:14px;border-left:1px solid var(--rule)}
.cmp-facts dt{font-size:12px;color:var(--ink-2)}
.cmp-facts dd{margin:4px 0 0;font-weight:600;line-height:1.35}
.cmp-fields{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1fr);gap:22px;margin-top:28px}
.cf>span{display:block;font-size:12px;color:var(--ink-2)}
.cf input{width:100%;height:42px;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;padding:0;font:400 var(--t2)/1.4 var(--sans);color:var(--ink);-webkit-appearance:none;appearance:none}
.cf input:focus{outline:none;border-bottom-width:2px}
.stp{display:flex;align-items:center;justify-content:space-between;height:42px;border-bottom:1px solid var(--ink)}
.stp button{width:34px;height:34px;border:0;background:none;padding:0;font:400 20px/1 var(--sans);color:var(--ink);cursor:pointer}
.stp button:disabled{color:var(--ink-3);cursor:default}
.stp output{font-weight:700;font-variant-numeric:tabular-nums;font-size:var(--t2)}
.cmp-est{margin-top:26px;font-size:var(--t2);color:var(--ink-2)}
.cmp-est b{color:var(--ink);font-weight:800;font-size:30px;letter-spacing:-.025em;font-variant-numeric:tabular-nums;vertical-align:-3px}
.cmp-est .est-n{margin-left:6px;font-size:12px;color:var(--ink-3)}
.cmp-go{margin-top:20px}
.cmp-reply{margin-top:12px;color:var(--ink-2);font-size:13px}

/* classes: the date, what you make, seats as marks */
.sess{border-top:1px solid var(--ink)}
.ses{grid-template-columns:140px 80px minmax(0,1fr) 168px 76px;align-items:center;padding:14px 0}
.ses .d{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:end;font-family:var(--sans);font-size:inherit}
.ses .dn{grid-row:1 / 3;font-weight:300;font-size:50px;line-height:.82;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.ses .dm{font-weight:800;font-size:14px;line-height:1}
.ses .dw{font-family:var(--mono);font-size:11px;color:var(--ink-2);margin-top:3px}
.ses .d .clk{display:none}
.ses .px{display:block;width:72px;height:72px}
.ses .px img{width:72px;height:72px;object-fit:contain;transition:transform .6s var(--ease)}
.ses:hover .px img{transform:scale(1.08) rotate(-4deg)}
.ses .tt{font-family:var(--sans);font-size:inherit}
.ses .nm{display:block;font-weight:700;font-size:clamp(17px,1.5vw,21px);line-height:1.2;letter-spacing:-.01em}
.ses .meta{display:block;margin-top:4px;color:var(--ink-2)}
.ses .st{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:inherit}
.marks{display:inline-flex;gap:3px}
.marks i{display:block;width:8px;height:8px;box-shadow:inset 0 0 0 1px var(--ink)}
.marks i.t{background:var(--ink)}
.ses .sl{font-size:12px;white-space:nowrap}
.ses.out .marks i{box-shadow:inset 0 0 0 1px var(--ink-3);background:var(--ink-3)}
.ses.out .dn,.ses.out .dm,.ses.out .nm{color:var(--ink-3)}
.ses.out .px img{opacity:.45;filter:grayscale(1)}
.cl-more{gap:10px 40px}

/* the class programme */
.prog{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--ink)}
.prog li{position:relative;padding:16px 18px 0 0}
.prog li::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;background:var(--ink)}
.prog li:last-child::before{background:var(--orange)}
.prog time{font-family:var(--mono);font-size:12px}
.prog span{display:block;margin-top:7px;color:var(--ink-2);font-size:14px;line-height:1.45}

/* office boxes: the four photographs in rotation */
.bx3 .hd{justify-items:center;text-align:center}
.bx3-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,4vw,64px);align-items:end}
.bx3-img img{width:100%;background:var(--stone)}
.eds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:28px 20px}
.eds li{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:baseline}
.eds img{grid-column:1 / -1;width:100%;aspect-ratio:4/5;object-fit:cover;margin-bottom:9px;outline:1px solid rgba(28,27,25,.08);outline-offset:-1px}
.eds .n{font-family:var(--mono);font-size:11px}
.eds .t{font-family:var(--serif);font-size:14px}
.eds .td{grid-column:1 / -1;margin-top:3px;font-size:12px;font-weight:700;color:var(--orange)}
.bx3-cta{margin-top:clamp(28px,3vw,40px);text-align:center}

.sft::before{content:" · "}
.phead h1{font-family:var(--sans);font-weight:800;font-size:clamp(52px,7vw,104px);line-height:.9;letter-spacing:-.04em}
[data-page="archive"] .phead h1,[data-page="story"] .phead h1,[data-page="privacy"] .phead h1,[data-page="sms-terms"] .phead h1,[data-page="thanks"] .phead h1,[data-page="404"] .phead h1{font-family:var(--serif);font-weight:400;font-size:var(--t4);line-height:1.04;letter-spacing:-.016em}
.sent .seal-card{margin:0 auto 22px;width:min(100%,280px)}
.sent .stamp{display:inline-block;margin-bottom:18px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:5px 8px;box-shadow:inset 0 0 0 1px var(--ink)}

@media (max-width:860px){
  .hd h2{font-size:clamp(42px,13vw,64px)}
  .cmp{grid-template-columns:1fr;gap:28px}
  .cmp-stage{padding:28px 18px}
  .seal-card{width:min(88%,320px)}
  .seal-ph,.seal-cap,.seal-src{width:64%}
  .seal-cap .t{font-size:13px}
  .cmp-facts{grid-template-columns:1fr 1fr}
  .cmp-facts div:nth-child(3){padding-left:0;border-left:0}
  .cmp-facts div:nth-child(n+3){border-top:1px solid var(--rule)}
  .cmp-fields{grid-template-columns:1fr 1fr;gap:18px 18px}
  .cf-for{grid-column:1 / -1}
  .cmp-go .btn{width:100%;height:48px;font-size:14px}
  .ses{grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"d tt px" "st st bk";row-gap:10px;column-gap:14px;padding:16px 0}
  .ses .d{grid-area:d;grid-template-columns:1fr;row-gap:2px}
  .ses .dn{grid-row:auto;font-size:38px}
  .ses .tt{grid-area:tt}
  .ses .px{grid-area:px;width:56px;height:56px}
  .ses .px img{width:56px;height:56px}
  .ses .st{grid-area:st}
  .ses .bk{grid-area:bk}
  .prog{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--ink);padding-left:18px}
  .prog li{padding:0 0 18px}
  .prog li::before{left:-22px;top:5px}
  .bx3-in{grid-template-columns:1fr}
  .eds{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .eds .t{display:none}
}

/* ===== v0.9: the pastry portrait opens the site (chosen study A); events, classes, pastries and story built out ===== */
:root{--cap:19px}
.hdr .l,.hdr .r{gap:34px}
.hdr nav a{padding:11px 0 7px}
.brand img{height:calc(var(--cap) * 1.04);width:auto}
.hdr .m.r{display:none}
.btn{height:50px;padding:2px 26px 0;font:600 15px/1 var(--sans);letter-spacing:.014em;border-radius:2px}
.btn.ghost{box-shadow:inset 0 0 0 1.5px var(--ink)}
.act{display:inline-flex;align-items:center;min-height:44px;padding-top:2px;font:600 15px/1 var(--sans);letter-spacing:.014em;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:7px;transition:text-decoration-color .35s var(--ease)}
.act:hover{text-decoration-color:rgba(28,27,25,.4)}
.sheet-acts .act{justify-content:center}

/* the first screen: one pastry on the orange field; the descriptor and both routes at its foot. No animation. */
.fs-stage{position:relative;height:calc(100vh - var(--hdr));height:calc(100svh - var(--hdr));min-height:540px;overflow:hidden;background:var(--orange)}
.fs-object{position:absolute;inset:0;margin:0;z-index:1;pointer-events:none}
.fs-object img{position:absolute;max-width:none;width:auto;height:min(131%,80vw);left:60%;top:51%;transform:translate(-49.6%,-47.5%)}
.fs-copy{position:absolute;z-index:3;left:var(--edge);bottom:clamp(36px,6.6vh,76px);width:min(470px,40vw)}
.fs-copy h1{font-family:var(--serif);font-size:clamp(23px,1.9vw,32px);line-height:1.2;letter-spacing:-.008em;font-variation-settings:"opsz" 30;max-width:16em;color:var(--ink)}
.fs-actions{display:flex;align-items:center;gap:32px;margin-top:clamp(22px,3.2vh,32px)}
.fs-primary{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:2px 30px 0;background:var(--paper);color:var(--ink);font:600 15px/1 var(--sans);letter-spacing:.014em;border-radius:2px;white-space:nowrap;transition:background-color .35s var(--ease),color .35s var(--ease)}
.fs-primary:hover{background:var(--ink);color:var(--paper)}
.fs-secondary,.fs-more{display:inline-flex;align-items:center;min-height:44px;padding-top:2px;font:600 15px/1 var(--sans);letter-spacing:.014em;white-space:nowrap;color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:7px;transition:text-decoration-color .35s var(--ease)}
.fs-secondary:hover,.fs-more:hover{text-decoration-color:rgba(28,27,25,.45)}
.fs-more{display:none}
.fs-tag{position:absolute;z-index:3;right:var(--edge);bottom:clamp(22px,3.6vh,34px);font:400 11px/1.4 var(--mono);letter-spacing:.02em;color:rgba(28,27,25,.74)}
.fs :focus-visible{outline-color:var(--ink)}

/* sections */
.sec-more{margin-top:26px}
.sec-more.c{text-align:center}
.sec-more .act{display:inline;min-height:0;line-height:1.7;text-underline-offset:5px}
.ph-acts{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px 30px;margin-top:28px!important}
.invite{padding:var(--gap) var(--edge) clamp(96px,10vw,150px);text-align:center}
.invite h2{font-family:var(--sans);font-weight:800;font-size:clamp(40px,5vw,72px);line-height:.92;letter-spacing:-.035em}
.invite p{max-width:42ch;margin:16px auto 0;color:var(--ink-2);font-size:var(--t2)}
.invite .iv-acts{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px 30px;margin-top:28px;color:var(--ink)}

/* how events work */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.steps li{padding:18px 22px 0 0}
.steps li + li{padding-left:22px;border-left:1px solid var(--rule)}
.steps .sn{font-family:var(--mono);font-size:12px}
.steps h3{margin-top:10px;font-family:var(--sans);font-weight:800;font-size:22px;line-height:1.1;letter-spacing:-.02em}
.steps p{margin-top:8px;color:var(--ink-2);font-size:var(--t2);line-height:1.5}

/* what shapes the quote, questions */
.qf-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,104px);border-top:1px solid var(--ink);padding-top:28px}
.qf-in.one{grid-template-columns:minmax(0,1fr);max-width:820px}
.h3x{font-family:var(--sans);font-weight:800;font-size:clamp(26px,2.4vw,34px);line-height:1;letter-spacing:-.03em}
.qf-list{list-style:none;margin:18px 0 0;padding:0}
.qf-list li{padding:11px 0;border-bottom:1px solid var(--rule);font-size:var(--t2)}
.qf-note{margin-top:16px;color:var(--ink-2);font-size:13px;line-height:1.55;max-width:40ch}
.faq{margin:18px 0 0}
.faq div{padding:14px 0;border-bottom:1px solid var(--rule)}
.faq dt{font-weight:700;font-size:var(--t2)}
.faq dd{margin:6px 0 0;color:var(--ink-2);font-size:var(--t2);line-height:1.55;max-width:60ch}

/* pastries */
.px-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center;border-top:1px solid var(--ink);padding-top:clamp(20px,3vw,40px)}
.pgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}
.pgrid li{display:flex;flex-direction:column;align-items:center;text-align:center}
.pgrid img{width:min(100%,190px);aspect-ratio:1;object-fit:contain;transition:transform .6s var(--ease)}
.pgrid li:hover img{transform:scale(1.05) rotate(-3deg)}
.pgrid .t{margin-top:8px;font-family:var(--sans);font-weight:700;font-size:15px}
.pgrid .d{margin-top:3px;font-family:var(--serif);font-size:14px;color:var(--ink-2);line-height:1.35}
.px.first .pgrid{grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--ink);padding-top:clamp(24px,3vw,40px)}
.boxsec{display:flex;flex-direction:column;align-items:center}
.box-stage{position:relative;width:100%;height:clamp(320px,38vw,520px)}
.box-stage .bx-btn{position:absolute;inset:0;height:auto}
.box-cap{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:4px}
.box-cap .today{margin-top:0}
button.act{background:none;border:0;border-radius:0;margin:0;padding:2px 0 0;color:var(--ink);cursor:pointer}
.st .sec-more{margin-top:clamp(96px,10vw,150px)}
.bxp-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,4vw,64px);align-items:center;border-top:1px solid var(--ink);padding-top:clamp(20px,3vw,40px)}

/* our story */
.st .journey{margin-top:clamp(36px,5vw,64px)}
.st .hang{margin-top:clamp(72px,9vw,128px)}
.st.first .journey{margin-top:0}
.honest{padding:clamp(80px,9vw,136px) var(--edge) var(--gap);text-align:center}
.honest .serif{max-width:34ch;margin:0 auto;font-size:clamp(20px,1.9vw,26px);line-height:1.35}
.honest p + p{margin-top:18px}

/* the event brief: on screen and on paper */
.brief{max-width:860px;margin:0 auto;padding:clamp(48px,7vw,96px) var(--edge) var(--gap)}
.br-mark{height:22px;width:auto}
.br-hd h1{margin-top:28px;font-family:var(--sans);font-weight:800;font-size:clamp(40px,5vw,64px);line-height:.95;letter-spacing:-.035em}
.br-hd p{margin-top:14px;color:var(--ink-2);font-size:var(--t2);max-width:52ch}
.br-acts{display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px;margin-top:24px!important}
.br-sec{margin-top:40px;padding-top:18px;border-top:1px solid var(--ink)}
.br-sec h2{font-family:var(--sans);font-weight:800;font-size:18px;letter-spacing:-.01em;margin-bottom:12px}
.br-t{width:100%;border-collapse:collapse;font-size:13px}
.br-t th{text-align:left;font-weight:600;color:var(--ink-2);padding:6px 10px 8px 0;border-bottom:1px solid var(--rule)}
.br-t td{padding:10px 10px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.br-t td span{color:var(--ink-2)}
.br-2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.br-sec ul,.br-steps{margin:0;padding-left:18px;font-size:var(--t2);line-height:1.7}
.br-foot p{font-size:var(--t2)}
.br-foot p + p{margin-top:6px;color:var(--ink-2)}
@media print{
  .hdr,.sheet,.end,.perf,.actbar,.drawer,.no-print,.skip{display:none!important}
  body{font-size:11pt}
  .brief{padding:0;max-width:none}
  .br-sec{break-inside:avoid}
  a{text-decoration:none}
}

@media (max-width:1100px) and (min-width:701px){
  .fs-object img{height:min(118%,74vw);left:64%;top:47%}
  .fs-copy{width:min(400px,44vw)}
}
@media (max-width:860px){
  :root{--cap:15px}
  .px-in,.bxp-in{grid-template-columns:1fr}
  .px.first .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 12px}
  .pgrid .d{display:none}
  .steps{grid-template-columns:1fr 1fr;row-gap:26px}
  .steps li:nth-child(3){padding-left:0;border-left:0}
  .qf-in{grid-template-columns:1fr}
  .br-2{grid-template-columns:1fr}
  .br-t thead{display:none}
  .br-t tr{display:grid;grid-template-columns:1fr 1fr;padding:10px 0;border-bottom:1px solid var(--rule)}
  .br-t td{border:0;padding:3px 10px 3px 0}
  .br-t td:first-child{grid-column:1 / -1}
}
@media (max-width:700px){
  :root{--hdr:60px}
  .fs-stage{display:flex;flex-direction:column}
  .fs-object{position:relative;inset:auto;flex:1 1 auto;min-height:0;overflow:visible}
  .fs-object img{height:min(98%,136vw);left:50%;top:50%}
  .fs-copy{position:relative;left:auto;right:auto;bottom:auto;width:auto;padding:0 var(--edge) calc(14px + env(safe-area-inset-bottom))}
  .fs-copy h1{font-size:clamp(19px,5.2vw,22px);line-height:1.22;max-width:17em}
  .fs-actions{display:grid;grid-template-columns:1fr auto;gap:4px 16px;margin-top:18px}
  .fs-primary{grid-column:1 / -1}
  .fs-secondary{justify-self:start}
  .fs-more{display:inline-flex;justify-self:end}
  .fs-tag{top:12px;bottom:auto;font-size:10px}
}
@media (max-width:700px) and (max-height:700px){
  .fs-copy h1{font-size:19px}
  .fs-actions{margin-top:14px}
}

/* ===== landing studies (24 Oct 2026): Today's label, The bench, the live index ===== */
/* Study 2 · The bench: the archive photograph that explains classes and team events */
.bn{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(28px,4vw,72px);height:calc(100vh - var(--hdr));height:calc(100svh - var(--hdr));min-height:600px;padding:clamp(14px,2.6vh,32px) var(--edge) clamp(26px,5vh,56px)}
.bn-photo{grid-column:2;margin:0;display:flex;flex-direction:column;min-height:0}
.bn-photo img{display:block;width:100%;flex:1 1 auto;min-height:0;object-fit:cover;object-position:55% 42%;background:var(--stone)}
.bn-photo figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-top:10px;font-family:var(--serif);font-size:14px;line-height:1.35;color:var(--ink-2)}
.bn-photo .n{font-family:var(--mono);font-size:12px;color:var(--ink);white-space:nowrap}
.bn-copy{grid-column:1;grid-row:1;align-self:end;padding-bottom:30px}
.bn-copy h1{font-family:var(--serif);font-size:clamp(22px,1.9vw,32px);line-height:1.2;letter-spacing:-.008em;max-width:15em;font-variation-settings:"opsz" 30}
.bn-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-top:24px}
.bn-more{display:none}

/* Study 3 · the live index: the three ways in, with today's facts */
.ix{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(20px,3vh,36px);min-height:calc(100vh - var(--hdr));min-height:calc(100svh - var(--hdr));padding:clamp(18px,3.4vh,44px) var(--edge) clamp(22px,3.4vh,40px)}
.ix-lead{font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.7vw,28px);line-height:1.28;letter-spacing:-.006em;max-width:27em}
.ix-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ix-row{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px) 150px;align-items:center;column-gap:clamp(20px,3vw,48px);padding:clamp(4px,1.1vh,12px) 0 clamp(2px,.8vh,8px);border-bottom:1px solid var(--ink)}
.ix-row::before{content:"";position:absolute;inset:0 calc(-1 * var(--edge));z-index:-1;background:var(--orange);transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--ease)}
.ix-row:hover::before,.ix-row:focus-visible::before{transform:scaleY(1)}
.ix-row:focus-visible{outline:none}
.ix-w{font-family:var(--sans);font-weight:800;font-size:clamp(64px,min(11vw,19vh),184px);line-height:.9;letter-spacing:-.045em;padding-top:.06em}
.ix-d{font-size:var(--t2);line-height:1.45;color:var(--ink-2);transition:color .4s var(--ease)}
.ix-row:hover .ix-d,.ix-row:focus-visible .ix-d{color:var(--ink)}
.ix-go{justify-self:end;font-weight:600;font-size:15px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:7px;white-space:nowrap}
.ix-peek{position:fixed;left:0;top:0;z-index:6;width:min(240px,18vw);margin:0;pointer-events:none;opacity:0;transform:translate3d(-50%,-50%,0);transition:opacity .25s var(--ease)}
.ix-peek img{display:block;width:100%;height:auto;box-shadow:0 18px 40px -24px rgba(28,27,25,.5)}
.ix-peek.on{opacity:1}
.ix-sample{font-size:12px;color:var(--ink-3)}

@media (max-width:700px){
  .bn{display:flex;flex-direction:column;height:auto;min-height:calc(100svh - var(--hdr));padding:0 0 calc(18px + env(safe-area-inset-bottom))}
  .bn-photo img{flex:none;width:100%;height:auto;aspect-ratio:957/664}
  .bn-photo figcaption{padding:0 var(--edge);font-size:13px}
  .bn-copy{padding:22px var(--edge) 0;align-self:stretch}
  .bn-copy h1{font-size:clamp(19px,5.2vw,22px)}
  .bn-acts{display:grid;grid-template-columns:1fr auto;gap:4px 16px;margin-top:18px}
  .bn-acts .btn{grid-column:1 / -1;height:54px}
  .bn-more{display:inline-flex;justify-self:end}
  .ix-row{grid-template-columns:1fr auto;grid-template-areas:"w w" "d go";row-gap:4px;padding:10px 0 12px}
  .ix-w{grid-area:w;font-size:clamp(56px,17vw,76px)}
  .ix-d{grid-area:d;font-size:14px}
  .ix-go{grid-area:go;font-size:14px}
  .ix-peek{display:none}
}

/* ===== Study 1 · Today's label, v2: the landing is the seal on today's box; on phones the screen is the label ===== */
.lb{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;column-gap:clamp(32px,5vw,96px);height:calc(100vh - var(--hdr));height:calc(100svh - var(--hdr));min-height:600px;background:var(--paper)}
.lb-line{grid-area:1 / 1;align-self:center;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;margin:0 0 0 var(--edge);text-align:right}
.lb-for{font-family:var(--serif);font-size:clamp(26px,2.5vw,42px);line-height:1.08;letter-spacing:-.014em;font-variation-settings:"opsz" 48}
.lb-day{margin-top:8px;font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.25vw,20px);color:var(--ink-2)}
.lb-print{grid-area:1 / 2;align-self:center;margin:clamp(16px,3vh,40px) 0 clamp(12px,2vh,24px);width:clamp(180px,calc((100svh - var(--hdr)) * .35),380px)}
.lb-ph{display:block;width:100%;aspect-ratio:4/5;padding:0;border:0;background:var(--stone);overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:pan-y}
.lb-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .35s var(--ease)}
.lb-ph img.swap{opacity:0}
.lb-print figcaption{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:10px;margin-top:10px}
.lb-print .t{font-family:var(--serif);font-size:14px;line-height:1.25}
.lb-print .n{font-family:var(--mono);font-size:12px;white-space:nowrap}
.lb-print .src{grid-column:1 / -1;grid-row:2;margin-top:4px;font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.lb-offer{grid-area:1 / 3;align-self:center;justify-self:start;max-width:380px;margin-right:var(--edge)}
.lb-offer h1{font-family:var(--serif);font-size:clamp(22px,1.8vw,30px);line-height:1.22;letter-spacing:-.008em;font-variation-settings:"opsz" 30}
.lb-acts{display:flex;align-items:center;flex-wrap:wrap;gap:8px 28px;margin-top:22px}
.lb-primary{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:2px 26px 0;background:var(--ink);color:var(--paper);font:600 15px/1 var(--sans);letter-spacing:.014em;border-radius:2px;white-space:nowrap;transition:background-color .35s var(--ease)}
.lb-primary:hover{background:#000}
.lb-secondary,.lb-more{display:inline-flex;align-items:center;min-height:44px;padding-top:2px;font:600 15px/1 var(--sans);letter-spacing:.014em;white-space:nowrap;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:7px}
.lb-more{display:none}
.lb-perf{grid-area:2 / 1 / 3 / 4;position:relative;height:10px;margin:0 var(--edge);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Cpath d='M0 5 Q4.5 .8 9 5 T18 5' fill='none' stroke='%231C1B19' stroke-width='1.1'/%3E%3C/svg%3E") repeat-x left center/18px 10px}
.lb-perf i{display:none}
.lb-front{grid-area:3 / 1 / 4 / 4;margin-top:clamp(12px,2vh,22px);background:var(--orange)}
.lb-mark{grid-area:3 / 1 / 4 / 4;align-self:center;justify-self:center;width:calc(100% - 2 * var(--edge));margin-top:clamp(12px,2vh,22px);padding:clamp(18px,3vh,34px) 0 clamp(16px,2.6vh,30px);display:flex;justify-content:center}
.lb-mark img{display:block;width:100%;height:auto;max-height:25vh;object-fit:contain}

/* phones: the screen is the label. Photograph above the perforation, the orange front below with the offer and both routes in the thumb zone. */
@media (max-width:700px){
  .lb{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto auto;column-gap:0;min-height:560px}
  .lb-line{grid-area:1 / 1;justify-self:stretch;flex-direction:row;justify-content:space-between;align-items:baseline;margin:12px var(--edge) 10px;text-align:left}
  .lb-for{font-size:17px;letter-spacing:-.006em}
  .lb-day{margin-top:0;font-size:14px}
  .lb-print{grid-area:2 / 1;align-self:stretch;width:auto;margin:0 var(--edge);display:flex;flex-direction:column;min-height:0}
  .lb-ph{flex:1 1 0;height:0;min-height:140px;aspect-ratio:auto}
  .lb-print figcaption{grid-template-columns:auto 1fr auto;margin-top:8px}
  .lb-print .src{grid-column:2;grid-row:1;margin:0 0 0 10px;align-self:center;font-size:7.5px}
  .lb-perf{grid-area:3 / 1;margin:14px 0 0;height:12px;background-size:16px 10px;background-position:left center}
  .lb-front{grid-area:4 / 1 / 6 / 2;margin-top:0}
  .lb-mark{grid-area:4 / 1;width:auto;margin:0 var(--edge);padding:18px 0 4px}
  .lb-mark img{max-height:none}
  .lb-offer{grid-area:5 / 1;z-index:1;justify-self:stretch;max-width:none;margin:0 var(--edge);padding:12px 0 calc(14px + env(safe-area-inset-bottom))}
  .lb-offer h1{font-size:clamp(18px,5vw,21px);line-height:1.24;max-width:18em;color:var(--ink)}
  .lb-acts{display:grid;grid-template-columns:1fr auto;gap:2px 16px;margin-top:14px}
  .lb-primary{grid-column:1 / -1;height:52px;background:var(--paper);color:var(--ink)}
  .lb-primary:hover{background:var(--ink);color:var(--paper)}
  .lb-secondary{justify-self:start;color:var(--ink)}
  .lb-more{display:inline-flex;justify-self:end;color:var(--ink)}
}
@media (max-width:700px) and (max-height:700px){
  .lb-line{margin:8px var(--edge) 6px}
  .lb-mark{padding-top:12px}
  .lb-offer h1{font-size:17px}
  .lb-acts{margin-top:10px}
  .lb-primary{height:48px}
}

/* phones: the booking bar takes over from the label's orange front once it has scrolled away */
@media (max-width:860px){
  .actbar{background:var(--orange);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-top:0;grid-template-columns:1fr auto;align-items:center;gap:10px 18px;padding:10px var(--edge) calc(10px + env(safe-area-inset-bottom))}
  .actbar .btn{background:var(--paper);color:var(--ink);box-shadow:none;height:48px}
  .actbar .btn.ghost{background:transparent;box-shadow:none;height:auto;padding:0;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}
}

/* phones on the home page: rows of classes, pastries and prints become swipeable strips */
@media (max-width:700px){
  .m-snap .sess,.m-snap .pgrid,.m-snap .hang{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:var(--edge);gap:12px;margin:0 calc(-1 * var(--edge));padding:2px var(--edge) 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .m-snap .sess::-webkit-scrollbar,.m-snap .pgrid::-webkit-scrollbar,.m-snap .hang::-webkit-scrollbar{display:none}
  .m-snap .sess{border-top:0}
  .m-snap .ses{flex:0 0 76%;scroll-snap-align:start;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"d px" "tt tt" "st bk";row-gap:12px;column-gap:10px;padding:16px;border:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper)}
  .m-snap .ses .d{grid-area:d;grid-template-columns:auto 1fr;row-gap:0}
  .m-snap .ses .dn{grid-row:1 / 3;font-size:44px}
  .m-snap .ses .px{grid-area:px;width:64px;height:64px}
  .m-snap .ses .px img{width:64px;height:64px}
  .m-snap .ses .tt{grid-area:tt}
  .m-snap .ses .st{grid-area:st}
  .m-snap .ses .bk{grid-area:bk;align-self:center}
  .m-snap .pgrid li{flex:0 0 40%;scroll-snap-align:start}
  .m-snap .pgrid .d{display:block}
  .m-snap .hang{align-items:flex-start;max-width:none;column-gap:12px;row-gap:0;margin-top:40px}
  .m-snap .hang > div{flex:0 0 62%;scroll-snap-align:start;margin:0!important;transform:none!important}
  .cmp-home .cmp-stage,.cmp-home .cf-for,.cmp-home .cf-d{display:none}
  .cmp-home .cmp-fields{grid-template-columns:1fr;margin-top:22px}
}

/* ===== Study 4 · The invitation, filled in: the full wordmark, a two-part ticket (classes | events) and a sentence you complete ===== */
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hdr-home .brand{opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.hdr-home.brand-on .brand{opacity:1;pointer-events:auto}
.hdr-city{grid-column:2;grid-row:1;justify-self:center;font-size:13px;letter-spacing:.006em;transition:opacity .35s var(--ease)}
.hdr-home.brand-on .hdr-city{opacity:0}
.hdr-home .brand{grid-column:2;grid-row:1}
.iv-hero{position:relative;display:flex;flex-direction:column;min-height:calc(100vh - var(--hdr));min-height:calc(100svh - var(--hdr));padding:clamp(2px,.8vh,10px) var(--edge) clamp(14px,2.2vh,24px)}
.iv-mark{margin:0;line-height:0;text-align:center}
.iv-mark img{display:inline-block;width:100%;height:auto;max-height:24vh;object-fit:contain}
.iv-sub{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin:clamp(8px,1.4vh,16px) 0 clamp(14px,2.4vh,28px)}
.iv-sub span:first-child{order:2;text-align:right;font-family:var(--serif);font-size:clamp(17px,1.35vw,22px);line-height:1.3}
.iv-day{order:1;font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.2vw,19px);color:var(--ink-2);white-space:nowrap}
.iv-ticket{position:relative;flex:1 1 auto;min-height:400px;perspective:1600px;animation:ivUp .8s var(--ease) both .12s}
.iv-tilt{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,5fr) 0 minmax(0,7fr);box-shadow:inset 0 0 0 1px var(--ink),0 30px 60px -48px rgba(28,27,25,.55);transition:transform .6s var(--ease);will-change:transform}
.iv-half{position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(20px,2.4vw,36px)}
.iv-cl{background:var(--paper);color:var(--ink);box-shadow:inset 1px 1px 0 var(--ink),inset 0 -1px 0 var(--ink)}
.iv-ev{background:var(--orange);color:var(--ink)}
.iv-k{font-family:var(--serif);font-size:14px;line-height:1.2}
.iv-t{display:block;margin:clamp(8px,1.6vh,20px) 0 0;font-family:var(--sans);font-weight:800;font-size:clamp(44px,min(5.6vw,10vh),92px);line-height:.88;letter-spacing:-.045em}
.iv-cl .iv-t{max-width:5.2em}
.iv-ev .iv-t{max-width:4.2em}
.iv-next{display:block;margin:auto 0 0;padding-top:20px}
.iv-date{display:flex;align-items:flex-end;gap:clamp(10px,1vw,16px)}
.iv-date b{font-weight:200;font-size:clamp(56px,min(6.2vw,10vh),112px);line-height:.74;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.iv-date i{display:block;font-style:normal;font-weight:800;font-size:clamp(18px,1.55vw,24px);line-height:1;letter-spacing:-.015em}
.iv-date i span{display:block;margin-top:6px;font-weight:500;font-size:13px;letter-spacing:0;color:var(--ink-2)}
.iv-what{display:block;margin-top:clamp(12px,1.8vh,18px)}
.iv-ttl{display:block;font-weight:700;font-size:clamp(15px,1.15vw,17px);line-height:1.25}
.iv-meta{display:block;margin-top:4px;color:var(--ink-2);font-size:13px}
.iv-seats{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;margin-top:9px;font-size:13px}
.iv-links{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:18px;padding-top:14px;border-top:1px solid var(--ink)}
.iv-go,.iv-gift{font-weight:600;font-size:15px;letter-spacing:.014em;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:7px}
.iv-go::after{content:"";position:absolute;inset:0;z-index:1}
.iv-gift{position:relative;z-index:2;font-weight:500;text-decoration-thickness:1px;text-decoration-color:rgba(28,27,25,.45)}
.iv-gift:hover{text-decoration-color:currentColor}
.iv-go:focus-visible,.iv-gift:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.iv-cl:hover .iv-go{text-decoration-color:rgba(28,27,25,.45)}
.iv-pastry{position:absolute;z-index:3;top:clamp(-64px,-4vw,-36px);right:clamp(14px,2.6vw,40px);width:clamp(140px,14.5vw,236px);height:auto;transform:rotate(-9deg);filter:drop-shadow(0 18px 16px rgba(28,27,25,.22));transition:transform .7s var(--ease);animation:ivDrop 1s var(--ease) both .5s;pointer-events:none}
.iv-cl:hover .iv-pastry{transform:rotate(-3deg) translateY(-8px)}
.iv-perf{position:relative;z-index:2;width:0}
.iv-perf::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:repeating-linear-gradient(to bottom,var(--ink) 0 6px,transparent 6px 12px);transform-origin:50% 0;animation:ivSeam .9s var(--ease) both .35s}
.iv-perf i{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}
.iv-perf .n1{left:-9px;top:-9px}
.iv-perf .n2{left:-9px;bottom:-9px}
.iv-lib{margin-top:auto;padding-top:22px;max-width:calc(100% - clamp(120px,10vw,170px))}
.iv-sentence{font-family:var(--serif);font-size:clamp(21px,min(2vw,3.6vh),28px);line-height:1.38;letter-spacing:-.01em;font-variation-settings:"opsz" 32}
.iv-field{display:inline-block;white-space:nowrap}
.iv-field select,.iv-field input{font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;border-bottom:2px solid currentColor;border-radius:0;margin:0;padding:0 2px 2px;-webkit-appearance:none;appearance:none;line-height:1.15;vertical-align:baseline}
.iv-field select{cursor:pointer;padding-right:.85em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231C1B19' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .08em center/.42em auto}
.iv-field input{cursor:text;min-width:4ch}
.iv-field input::placeholder{color:rgba(28,27,25,.5);opacity:1}
.iv-field select:focus,.iv-field input:focus{outline:none;border-bottom-color:var(--paper)}
.iv-field select:focus-visible,.iv-field input:focus-visible{outline:none;border-bottom-color:var(--paper);box-shadow:0 2px 0 var(--paper)}
.iv-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:24px}
.iv-btn{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:2px 30px 0;border:0;border-radius:2px;background:var(--paper);color:var(--ink);font:600 15px/1 var(--sans);letter-spacing:.014em;cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease)}
.iv-btn:hover{background:var(--ink);color:var(--paper)}
.iv-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.iv-est{display:flex;flex-direction:column;gap:3px;font-size:14px;line-height:1.3}
.iv-est b{font-weight:800;font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.iv-where{font-size:13px;color:rgba(28,27,25,.72)}
.iv-reply{margin-top:12px;font-size:13px;line-height:1.4;color:rgba(28,27,25,.78)}
.iv-seal{position:absolute;top:clamp(18px,2.4vw,34px);right:clamp(18px,2.4vw,34px);width:340px;transform-origin:100% 0;transform:scale(var(--ss,.42)) rotate(4deg);pointer-events:none;animation:ivSeal .9s var(--ease) both .7s}
.iv-seal .seal-card{width:340px;box-shadow:0 1px 1px rgba(28,27,25,.08),0 30px 50px -30px rgba(28,27,25,.45)}
.iv-ev.tear{animation:ivTear .34s var(--ease) forwards}
.iv-foot{display:flex;justify-content:space-between;gap:20px;margin-top:clamp(12px,1.8vh,18px);font-size:12px;color:var(--ink-2)}
.iv-foot a{color:var(--ink);white-space:nowrap}
@keyframes ivUp{from{transform:translateY(22px)}to{transform:none}}
@keyframes ivDrop{from{transform:translateY(-26px) rotate(-22deg)}to{transform:rotate(-9deg)}}
@keyframes ivSeam{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes ivSeamX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ivSeal{from{opacity:0;transform:scale(var(--ss,.42)) rotate(14deg) translateY(-40px)}to{opacity:1;transform:scale(var(--ss,.42)) rotate(4deg)}}
@keyframes ivTear{to{transform:translate(14px,10px) rotate(2.6deg);box-shadow:0 30px 40px -24px rgba(28,27,25,.5)}}
@media (min-width:1600px){.iv-seal{--ss:.5}}
@media (max-width:1100px) and (min-width:901px){.iv-seal{--ss:.34}}

/* sealed with your name */
.sl-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,104px);align-items:center;border-top:1px solid var(--ink);padding-top:clamp(28px,3.4vw,48px)}
.sl-stage{background:var(--stone);display:flex;align-items:center;justify-content:center;padding:clamp(28px,4.4vw,64px) clamp(20px,3vw,48px)}
.sl-txt h2{font-family:var(--sans);font-weight:800;font-size:clamp(40px,4.6vw,72px);line-height:.92;letter-spacing:-.035em}
.sl-txt > p{margin-top:16px;max-width:40ch;color:var(--ink-2);font-size:var(--t2);line-height:1.5}
.sl-steps{margin:22px 0 0;padding:0;list-style:none;counter-reset:s;border-top:1px solid var(--rule)}
.sl-steps li{counter-increment:s;position:relative;padding:11px 0 11px 30px;border-bottom:1px solid var(--rule);font-size:var(--t2);line-height:1.45}
.sl-steps li::before{content:counter(s);position:absolute;left:0;top:14px;font-family:var(--mono);font-size:12px}
.sl-steps b{font-weight:700}
.sl-acts{display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px;margin-top:26px!important}

/* tablets and phones: the ticket stacks, classes above, events below in the thumb zone */
@media (max-width:900px){
  .iv-hero{min-height:0;padding:2px var(--edge) 22px}
  .iv-mark img{max-height:none}
  .iv-sub{display:block;margin:10px 0 clamp(26px,5vw,40px)}
  .iv-sub span:first-child{display:block;text-align:left;font-size:clamp(16px,2.4vw,20px);line-height:1.35;max-width:24em}
  .iv-day{display:none}
  .iv-ticket{flex:none;min-height:0;perspective:none}
  .iv-tilt{position:relative;inset:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 0 auto}
  .iv-half{padding:clamp(18px,3.4vw,30px)}
  .iv-cl{box-shadow:inset 1px 1px 0 var(--ink),inset -1px 0 0 var(--ink)}
  .iv-t{margin-top:8px;font-size:clamp(28px,6.4vw,54px);line-height:.95}
  .iv-cl .iv-t,.iv-ev .iv-t{max-width:none}
  .iv-pastry{top:clamp(-40px,-5vw,-30px);right:clamp(4px,2vw,24px);width:clamp(80px,17vw,150px)}
  .iv-next{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(12px,2.4vw,22px);align-items:start;margin-top:clamp(14px,2.4vw,22px);padding-top:0}
  .iv-date{display:block}
  .iv-date b{display:block;font-size:clamp(46px,9vw,76px);line-height:.8}
  .iv-date i{margin-top:6px;font-size:clamp(13px,2vw,17px)}
  .iv-date i span{display:none}
  .iv-what{margin-top:0}
  .iv-ttl{font-size:clamp(15px,2.1vw,17px)}
  .iv-meta{font-size:13px}
  .iv-links{margin-top:14px;padding-top:12px}
  .iv-go,.iv-gift{font-size:15px}
  .iv-perf{width:auto;height:0}
  .iv-perf::before{top:-1px;bottom:auto;left:0;right:0;width:auto;height:2px;background:repeating-linear-gradient(to right,var(--ink) 0 6px,transparent 6px 12px);transform-origin:0 50%;animation-name:ivSeamX}
  .iv-perf .n1{left:-9px;top:-9px}
  .iv-perf .n2{left:auto;right:-9px;top:-9px;bottom:auto}
  .iv-lib{max-width:calc(100% - 140px);padding-top:14px}
  .iv-sentence{font-size:clamp(19px,3.4vw,28px);line-height:1.45}
  .iv-row{margin-top:18px}
  .iv-seal{--ss:.32}
  .iv-foot{margin-top:14px}
  .sl-in{grid-template-columns:1fr;gap:26px}
  .sl-stage{padding:28px 18px}
  .sl-card{width:min(88%,320px)}
}
@media (max-width:700px){
  .hdr-city{font-size:12px}
  .iv-sub{margin-bottom:28px}
  .iv-lib{max-width:none}
  .iv-row{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}
  .iv-btn{height:52px;width:100%}
  .iv-est{flex-direction:column;gap:2px}
  .iv-reply{margin-top:8px;font-size:13px}
  .iv-seal{display:none}
}
@media (max-width:700px) and (max-height:700px){
  .iv-sub{margin:8px 0 22px}
  .iv-half{padding:16px}
  .iv-next{margin-top:12px}
}
@media (prefers-reduced-motion:reduce){
  .iv-ticket,.iv-pastry,.iv-perf::before,.iv-seal{animation:none!important}
}


/* ===== Validated fixes (25 Oct 2026): each one answers a measured failure (axe-core / Lighthouse / emulation) ===== */
/* contrast: every text on orange is ink (5.97:1); muted text on white uses ink-2 (5.3:1) instead of ink-3 (2.39:1) */
.iv-where,.iv-reply{color:var(--ink)}
.seal-front span{color:var(--ink)}
.ses.out .tt,.ses.out .st,.ses.out .d,.ses.out .dn,.ses.out .dm,.ses.out .nm,.ses.out .sl{color:var(--ink-2)}
.ses.out .nm{text-decoration:line-through;text-decoration-thickness:1px}
.sample{color:var(--ink-2)}
.stop:not(.on) .pl{color:var(--ink-2)}
.toggles button,.end .toggles button{color:var(--ink)}
.toggles button[aria-pressed="true"]{text-decoration-thickness:2px}
/* long names never widen the page on narrow phones; the field scrolls instead */
.iv-name,.iv-field input{max-width:100%}
/* a transparent border is invisible normally and becomes the button's outline in forced-colours mode */
.iv-btn{border:2px solid transparent}
@media (forced-colors: active){
  .iv-tilt{border:1px solid CanvasText}
  .iv-perf::before{background:none;width:0;left:-1px;border-left:2px dashed CanvasText}
  .iv-perf i{border:1px solid CanvasText}
  .marks i{forced-color-adjust:none;background:Canvas;border:1px solid CanvasText;box-shadow:none}
  .marks i.t{background:CanvasText}
}
@media (forced-colors: active) and (max-width:900px){
  .iv-perf::before{width:auto;height:0;top:-1px;left:0;border-left:0;border-top:2px dashed CanvasText}
}

/* ===== Invitation v3 (25 Oct 2026): a two-part card with die-cut notches and a micro-perforated seam ===== */
.iv-tilt{--notch:11px;--card:var(--stone);box-shadow:none;filter:drop-shadow(0 1px 1px rgba(28,27,25,.07)) drop-shadow(0 26px 34px rgba(28,27,25,.11))}
.iv-cl{background:var(--card);box-shadow:none;
  -webkit-mask:radial-gradient(circle var(--notch) at 100% 0,#0000 98%,#000 100%) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at 100% 100%,#0000 98%,#000 100%) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle var(--notch) at 100% 0,#0000 98%,#000 100%) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at 100% 100%,#0000 98%,#000 100%) bottom/100% 51% no-repeat}
.iv-ev{
  -webkit-mask:radial-gradient(circle var(--notch) at 0 0,#0000 98%,#000 100%) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at 0 100%,#0000 98%,#000 100%) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle var(--notch) at 0 0,#0000 98%,#000 100%) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at 0 100%,#0000 98%,#000 100%) bottom/100% 51% no-repeat}
.iv-perf::before{animation:none;transform:none;top:calc(var(--notch) + 12px);bottom:calc(var(--notch) + 12px);left:-2px;width:4px;background:radial-gradient(circle,var(--paper) 1.3px,transparent 1.8px) center top/4px 9px repeat-y}
.iv-perf i{display:none}
.iv-pastry{right:calc(58.333% + clamp(14px,2.6vw,40px));filter:none}
.iv-tilt:has(.iv-cl:hover) .iv-pastry{transform:rotate(-3deg) translateY(-8px)}
/* guests: an exact number, 6 or more */
.iv-num input{cursor:text;text-align:center;padding:0 .14em 2px;font-variant-numeric:tabular-nums}
.iv-hint{color:var(--ink)}
.iv-hint.warn{font-weight:700}
.iv-from b{font-weight:800;font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .iv-cl{box-shadow:none;
    -webkit-mask:radial-gradient(circle var(--notch) at 0 100%,#0000 98%,#000 100%) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% 100%,#0000 98%,#000 100%) right/51% 100% no-repeat;
            mask:radial-gradient(circle var(--notch) at 0 100%,#0000 98%,#000 100%) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% 100%,#0000 98%,#000 100%) right/51% 100% no-repeat}
  .iv-ev{
    -webkit-mask:radial-gradient(circle var(--notch) at 0 0,#0000 98%,#000 100%) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% 0,#0000 98%,#000 100%) right/51% 100% no-repeat;
            mask:radial-gradient(circle var(--notch) at 0 0,#0000 98%,#000 100%) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% 0,#0000 98%,#000 100%) right/51% 100% no-repeat}
  .iv-perf::before{top:-2px;bottom:auto;left:calc(var(--notch) + 12px);right:calc(var(--notch) + 12px);width:auto;height:4px;background:radial-gradient(circle,var(--paper) 1.3px,transparent 1.8px) left center/9px 4px repeat-x}
  .iv-pastry{right:clamp(4px,2vw,24px)}
}
@media (forced-colors: active){
  .iv-tilt{filter:none;border:0}
  .iv-cl,.iv-ev{-webkit-mask:none;mask:none;border:1px solid CanvasText}
  .iv-perf::before{background:none;border-left:2px dotted CanvasText}
}
@media (forced-colors: active) and (max-width:900px){ .iv-perf::before{border-left:0;border-top:2px dotted CanvasText} }

/* sealed with your name: header first, then the four steps, then the seal they lead to */
.iv-hero + .sl{padding-top:clamp(80px,8.5vw,136px)}
.sl-in{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(36px,6vw,104px);align-items:start;border-top:0;padding-top:0}
.sl-stage{order:2}
.sl-steps{margin-top:0}
@media (max-width:900px){
  .iv-hero + .sl{padding-top:clamp(64px,12vw,96px)}
  .sl-in{grid-template-columns:1fr}
}
/* the box opens with scrolling; nothing to click */
.bx-btn{cursor:default}
.box-cap{display:block;margin-top:12px;text-align:center;font-family:var(--serif);font-size:13px;line-height:1.4;color:var(--ink-2)}

/* the opening shares the sections' grid, so every left edge lines up down the page */
.iv-hero{max-width:1280px;margin-left:auto;margin-right:auto}

/* contrast, events and classes pages: muted UI text uses ink-2 (5.3:1) instead of ink-3 (2.39:1) */
.cmp-tabs button{color:var(--ink-2)}
.cmp-tabs button:hover{color:var(--ink)}
.cmp-est .est-n,.cmp-est .est-n span{color:var(--ink-2)}
.f span em{color:var(--ink-2)}
.lf .fine,.ef .fine{color:var(--ink-2)}
.lf .fine a,.ef .fine a{color:var(--ink)}

/* ===== Invitation v5 (25 Oct 2026) ===== */
/* the small seal keeps its own gutter, so no line of the sentence can run underneath it at any size */
.iv-ev{--ss:.42}
.iv-seal{--ss:inherit}
@media (min-width:1600px){.iv-ev{--ss:.42}}
@media (max-width:1100px) and (min-width:901px){.iv-ev .iv-seal{display:none}}
@media (min-width:1101px){.iv-lib{max-width:calc(100% - 340px * var(--ss) - 64px)}}
@media (max-width:1100px) and (min-width:901px){.iv-lib{max-width:none}}
@media (max-width:900px){.iv-ev{--ss:.32} .iv-lib{max-width:calc(100% - 340px * var(--ss) - 44px)}}
@media (max-width:700px){.iv-lib{max-width:none}}
/* the class's pastry sits on the classes card, beside the next class it belongs to */
.iv-next{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:clamp(12px,2vw,28px);margin:auto 0 0;padding-top:20px}
.iv-nx{margin:0}
.iv-cl .iv-pastry{position:relative;top:auto;right:auto;z-index:auto;width:clamp(116px,11vw,176px);height:auto;margin:0 -4px -2px 0;transform:rotate(-6deg);filter:drop-shadow(0 12px 12px rgba(28,27,25,.18));transition:transform .7s var(--ease)}
.iv-cl:hover .iv-pastry,.iv-tilt:has(.iv-cl:hover) .iv-pastry{transform:rotate(-2deg) translateY(-6px)}
@keyframes ivDrop{from{transform:translateY(-18px) rotate(-16deg)}to{transform:rotate(-6deg)}}
@media (max-width:900px){
  .iv-next{display:block;margin-top:clamp(14px,2.4vw,22px);padding-top:0}
  .iv-nx{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(12px,2.4vw,22px);align-items:start}
  .iv-cl .iv-pastry{position:absolute;top:clamp(10px,2.6vw,22px);right:clamp(10px,2.6vw,22px);width:clamp(84px,19vw,128px);margin:0}
}
/* sealed with your name: the four steps frame the seal, two on each side; the actions sit beneath */
.sl-in{grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr);grid-template-areas:"sa stage sb" "acts acts acts";column-gap:clamp(28px,4.5vw,72px);row-gap:clamp(28px,3vw,44px);align-items:stretch}
.sl-steps{border-top:0;display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:clamp(8px,2vw,28px) 0}
.sl-steps.sa{grid-area:sa;counter-reset:s 0}
.sl-steps.sb{grid-area:sb;counter-reset:s 2}
.sl-steps li{border-bottom:0;border-top:1px solid var(--ink);padding:14px 0 0 30px;max-width:30ch}
.sl-steps li::before{top:16px}
.sl-steps.sa li{justify-self:end}
.sl-stage{grid-area:stage;order:0;align-self:center;padding:clamp(24px,3vw,44px)}
.sl-card{width:clamp(220px,20vw,288px)}
.sl-acts{grid-area:acts;justify-content:center;margin-top:0!important}
@media (max-width:900px){
  .sl-in{grid-template-columns:1fr;grid-template-areas:"stage" "sa" "sb" "acts";row-gap:0}
  .sl-stage{margin-bottom:26px}
  .sl-card{width:min(78%,300px)}
  .sl-steps{padding:0;gap:0}
  .sl-steps li{max-width:none;padding:14px 0 14px 30px}
  .sl-acts{justify-content:flex-start;margin-top:22px!important}
}
/* the family archive: four prints hung level, the same size, still; two by two on phones */
.prints{list-style:none;padding:0;margin:clamp(48px,6vw,88px) auto 0;max-width:1180px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.6vw,40px);align-items:start}
.prints li{margin:0}
.prints .pr img{display:block;aspect-ratio:4/5;object-fit:cover;background:var(--stone);box-shadow:0 1px 1px rgba(28,27,25,.08),0 16px 28px -20px rgba(28,27,25,.45);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
@media (hover:hover){.prints .pr:hover img{transform:translateY(-4px);box-shadow:0 1px 1px rgba(28,27,25,.08),0 22px 34px -20px rgba(28,27,25,.5)}}
@media (max-width:700px){.prints{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px;margin-top:40px}}
@media (prefers-reduced-motion:reduce){.prints .pr img{transition:none}}

/* seal section, balanced: a centred header over a symmetric composition; the steps sit beside the seal, not spread to its corners */
@media (min-width:901px){
  .sl .hd{justify-items:center;text-align:center}
  .sl .hd p{margin:0 auto}
  .sl-steps{justify-content:center;gap:clamp(28px,3vw,44px);padding:0}
  .sl-steps.sa{align-items:flex-end}
  .sl-steps.sb{align-items:flex-start}
}
.sl-steps li b{display:block;margin-bottom:5px;font-family:var(--sans);font-weight:800;font-size:clamp(17px,1.35vw,20px);line-height:1.15;letter-spacing:-.01em}
.sl-steps li{font-size:15px;line-height:1.5;color:var(--ink-2)}
.sl-steps li b{color:var(--ink)}

/* copy v2 (25 Oct 2026): small functional lines */
.iv-nl{display:block;margin-bottom:3px;color:var(--ink-2);font-size:13px;line-height:1.3}
.sl-cap{grid-area:cap;margin:0;text-align:center;color:var(--ink-2);font-size:13px;line-height:1.45}
.sl-in{grid-template-areas:"sa stage sb" "cap cap cap" "acts acts acts"}
@media (max-width:900px){.sl-in{grid-template-areas:"stage" "cap" "sa" "sb" "acts"} .sl-cap{text-align:left;margin:-10px 0 18px}}
.st-note{max-width:60ch;margin:22px auto 0;text-align:center;color:var(--ink-2);font-size:13px;line-height:1.45}
.phead p.ph-occ{margin-top:10px;font-size:14px;color:var(--ink-2)}

@media (max-width:700px){.iv-foot{flex-direction:column;align-items:flex-start;gap:6px}}

/* arriving at the proposal form: clear of the sticky header */
#plan{scroll-margin-top:calc(var(--hdr) + 12px)}
.ef-facts{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin:14px 0 0;padding:0;color:var(--ink);font-size:13px}
.ef-facts li{position:relative;padding-left:14px}
.ef-facts li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--orange)}

/* ===== Landing v6 (25 Oct 2026): full-bleed bands, one vertical rhythm ===== */
:root{--stone:#F4F3F0; --band-y:clamp(76px,9vw,136px)}
.iv-hero{padding-bottom:clamp(28px,3.4vw,48px)}
.band{padding:var(--band-y) 0}
.band > .sec{padding-top:0!important}
.band-stone{background:var(--stone)}
.band-ink{background:var(--ink);color:var(--paper)}
.band .hd{padding-bottom:clamp(32px,3.6vw,52px)}
/* how an event works sits on stone: the seal needs no panel of its own */
.band-stone .sl-stage{background:transparent;padding:0}
/* pastries on stone, a little larger */
.band-stone .pgrid img{width:min(100%,220px)}
.band-stone .px-in{border-top-color:rgba(28,27,25,.25)}
/* our story, still: one large print, the route as a quiet list, three prints as a strip */
.st2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,104px);align-items:start}
.st2-feature{margin:0;max-width:470px}
.st2-feature img{display:block;width:100%;height:auto;aspect-ratio:593/791;object-fit:cover;background:var(--ink-well);box-shadow:0 0 0 10px var(--print),0 30px 60px -30px rgba(0,0,0,.6)}
.st2-feature figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:22px;font-size:13px;color:rgba(255,255,255,.72)}
.st2-feature figcaption .t{font-family:var(--serif);font-size:14px;color:var(--paper)}
.st2-txt h2{font-family:var(--sans);font-weight:800;font-size:clamp(46px,6vw,92px);line-height:.9;letter-spacing:-.035em;color:var(--paper)}
.st2-lead{margin-top:18px;font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);line-height:1.2;color:var(--paper)}
.itin{list-style:none;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;border-top:1px solid rgba(255,255,255,.22)}
.itin li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.22)}
.itin .pl{font-family:var(--serif);font-size:clamp(18px,1.6vw,22px);line-height:1.25;color:var(--paper)}
.itin .wh{flex:0 1 auto;min-width:0;max-width:62%;font-size:13px;color:rgba(255,255,255,.72);text-align:right}
.st2-strip{list-style:none;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.st2-strip .pr img{display:block;aspect-ratio:4/5;object-fit:cover;box-shadow:0 0 0 5px var(--print)}
.st2-strip .pr figcaption{margin-top:12px}
.st2-strip .pr figcaption .t{color:var(--paper);font-size:13px}
.st2-strip .pr figcaption .n{color:rgba(255,255,255,.72)}
.st2-note{margin-top:22px;font-size:13px;line-height:1.45;color:rgba(255,255,255,.72)}
.st2-more{margin-top:14px}
.band-ink .act{color:var(--paper)}
@media (max-width:900px){
  .st2{grid-template-columns:1fr}
  .st2-feature{max-width:min(86vw,420px);margin:0 auto}
  .st2-txt h2{font-size:clamp(42px,13vw,64px)}
}
@media (max-width:700px){ .itin li{flex-direction:column;gap:2px} .itin .wh{text-align:left} }
/* the closing band: the money action once more, after the story */
.cta-end{text-align:center}
.cta-end h2{font-family:var(--serif);font-size:clamp(30px,3.4vw,46px);line-height:1.1;font-variation-settings:"opsz" 44}
.cta-end p{max-width:46ch;margin:14px auto 0;color:var(--ink-2);font-size:var(--t2);line-height:1.5}
.cta-end .ce-acts{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 28px;margin-top:26px}
/* the route, everywhere: a still list (no scroll-driven line or dots) */
.journey::before,.journey::after{display:none!important}
.stop::before{display:none!important}
.stop{padding-top:14px!important;border-top:1px solid var(--rule)}
.stop .pl,.stop:not(.on) .pl{color:var(--ink)!important}
@media (max-width:900px){ .journey{padding-left:0!important;gap:0!important} .stop{padding:14px 0!important;border-bottom:0} .stop .wh{margin-top:4px} }
@media (forced-colors: active){ .band-ink{border-top:1px solid CanvasText} }

.band-stone .px-in{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
.band-stone .box-stage{height:clamp(340px,40vw,580px)}
@media (max-width:900px){.band-stone .px-in{grid-template-columns:1fr}}
@media (max-width:700px){.st2-strip .pr figcaption{flex-direction:column;align-items:flex-start;gap:1px}.st2-strip .pr figcaption .t{font-size:12px}}

#plan .ef-hd{scroll-margin-top:calc(var(--hdr) + 20px)}
@media (max-width:700px){#plan .ef-hd{scroll-margin-top:24px}}

/* ===== The kind-of-event picker (25 Oct 2026): a native select; where supported, rich options ===== */
.iv-kind select{max-width:100%}
@supports (appearance: base-select){
  .iv-kind select.is-rich,.iv-kind select.is-rich::picker(select){appearance:base-select}
  .iv-kind select.is-rich{display:inline-flex;align-items:baseline;gap:0;border:0;border-bottom:2px solid currentColor;background:transparent;padding:0 2px 2px;color:inherit;font:inherit;line-height:1.15;cursor:pointer;vertical-align:baseline}
  .iv-kind select.is-rich::picker-icon{content:"";display:inline-block;flex:none;width:.42em;height:.26em;margin-left:.32em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231C1B19' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s var(--ease);align-self:center}
  .iv-kind select.is-rich:open::picker-icon{transform:rotate(180deg)}
  .iv-kind .iv-kind-btn{all:unset;display:inline;font:inherit;color:inherit;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
  .iv-kind selectedcontent .o-d,.iv-kind selectedcontent .o-p{display:none}
  .iv-kind select.is-rich::picker(select){position-area:block-end span-inline-end;position-try-fallbacks:flip-block;border:0;border-radius:16px;padding:6px;margin:10px 0;background:#fff;color:var(--ink);width:min(400px,calc(100vw - 32px));box-shadow:0 0 0 1px rgba(28,27,25,.08),0 28px 64px -28px rgba(28,27,25,.5);font-family:var(--sans);font-size:15px;letter-spacing:0;line-height:1.3;opacity:0;translate:0 -4px;transition:opacity .16s ease,translate .16s var(--ease),overlay .16s allow-discrete,display .16s allow-discrete}
  .iv-kind select.is-rich:open::picker(select){opacity:1;translate:0 0}
  @starting-style{.iv-kind select.is-rich:open::picker(select){opacity:0;translate:0 -4px}}
  .iv-kind select.is-rich option{display:grid;grid-template-columns:1fr auto;column-gap:16px;row-gap:3px;padding:12px 14px;border-radius:11px;font-family:var(--sans);font-size:15px;cursor:pointer;outline:none;white-space:normal}
  .iv-kind select.is-rich option::checkmark{display:none}
  .iv-kind option .o-t{grid-column:1;grid-row:1;font-weight:700;line-height:1.25}
  .iv-kind option .o-p{grid-column:2;grid-row:1;justify-self:end;align-self:center;font-size:13px;color:var(--ink-2);white-space:nowrap}
  .iv-kind option .o-d{grid-column:1 / -1;grid-row:2;font-family:var(--serif);font-size:14px;line-height:1.35;color:var(--ink-2)}
  .iv-kind select.is-rich option:hover,.iv-kind select.is-rich option:focus-visible{background:var(--stone)}
  .iv-kind select.is-rich option:checked{background:var(--stone-2)}
  .iv-kind select.is-rich option:checked .o-p{color:var(--ink)}
  @media (prefers-reduced-motion: reduce){.iv-kind select.is-rich::picker(select){transition:none}}
}

/* ===== Classes page by hierarchy (25 Oct 2026): dates first, then what you make, the morning, private and gifts ===== */
.cl-head .cl-facts{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin:20px auto 0;padding:0;font-size:14px;color:var(--ink-2)}
.cl-head .cl-facts b{color:var(--ink);font-weight:700}
.cl-head .cl-facts li+li{position:relative}
.cl-head .cl-facts li+li::before{content:"";position:absolute;left:-14px;top:.62em;width:3px;height:3px;border-radius:50%;background:var(--ink-3)}
.mo-grp+.mo-grp{margin-top:clamp(28px,3.4vw,44px)}
.mo{font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:.02em;color:var(--ink);padding-bottom:10px;border-bottom:1px solid var(--ink);margin:0 0 4px}
.kgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.kgrid li{display:flex;flex-direction:column;align-items:flex-start}
.kgrid img{width:min(100%,240px);aspect-ratio:1;object-fit:contain;margin-bottom:14px}
.kgrid h3{font-family:var(--sans);font-weight:700;font-size:17px;line-height:1.25}
.kgrid p{margin-top:6px;font-family:var(--serif);font-size:15px;line-height:1.45;color:var(--ink-2);max-width:32ch}
@media (max-width:700px){.kgrid{grid-template-columns:1fr;gap:28px}.kgrid li{display:grid;grid-template-columns:96px 1fr;column-gap:16px;align-items:center}.kgrid img{width:96px;margin:0;grid-row:span 2}.kgrid p{margin-top:2px}}

/* ===== Our story v3 (25 Oct 2026): the archive table. Still until you touch it. ===== */
.st2-table{max-width:470px}
.st2-stage{position:relative;width:100%;aspect-ratio:593/791;display:flex;align-items:center;justify-content:center}
.st2-print{position:relative;width:100%;aspect-ratio:var(--ar,.75);max-height:100%;background:var(--print);box-shadow:0 0 0 10px var(--print),0 30px 60px -30px rgba(0,0,0,.6);transform-origin:50% 50%;will-change:transform}
.st2-front,.st2-front img{display:block;width:100%;height:100%}
.st2-front img{object-fit:cover;background:var(--ink-well)}
.st2-back[hidden]{display:none}
.st2-print.is-back{box-shadow:0 0 0 10px var(--print),0 22px 44px -26px rgba(0,0,0,.55)}
.st2-cap{display:flex;align-items:baseline;gap:12px;margin-top:22px;font-size:13px;color:rgba(255,255,255,.72)}
.st2-cap .t{font-family:var(--serif);font-size:14px;color:var(--paper)}
.st2-cap .n{flex:1}
.st2-turn{all:unset;cursor:pointer;color:var(--paper);font-size:13px;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:1px}
.st2-turn:hover{border-bottom-color:var(--paper)}
.st2-turn:focus-visible{outline:2px solid var(--paper);outline-offset:4px;border-radius:2px}
.st2-thumb{all:unset;display:block;cursor:pointer;transition:transform .35s var(--ease)}
.st2-thumb:disabled{cursor:default}
.st2-thumb:not(:disabled):hover{transform:translateY(-3px)}
.st2-thumb:focus-visible{outline:2px solid var(--paper);outline-offset:6px}
.st2-thumb img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;box-shadow:0 0 0 5px var(--print)}
.st2-hint{color:rgba(255,255,255,.72)}
@media (max-width:900px){.st2-table{max-width:min(86vw,420px);margin:0 auto}}
@media (prefers-reduced-motion: reduce){.st2-thumb{transition:none}}

.st2-front[hidden]{display:none}

.st2-table{width:100%;justify-self:start}
@media (max-width:900px){.st2-table{justify-self:center;margin:0}}
.st2-strip .pr figcaption{min-height:2.6em}

@supports (appearance: base-select){
  .iv-kind option .o-s{display:none}
  .iv-kind selectedcontent .o-t{display:none}
  .iv-kind selectedcontent .o-s{display:inline}
}

@media (min-width:1101px){.iv-sentence{font-size:clamp(21px,min(1.8vw,3.3vh),26px)}}
@media (max-width:380px){.iv-sentence{font-size:clamp(18px,5.2vw,21px)}}

/* classes: the dates belong on the first screen */
.cl-head{padding-bottom:clamp(20px,2.6vw,36px)}
.cl-head + .band{padding-top:clamp(20px,2.4vw,36px)}
.cl-head + .band .hd{padding-bottom:clamp(18px,2vw,28px)}
@media (max-width:700px){
  .cl-head .cl-facts{display:grid;grid-template-columns:auto auto;justify-content:center;gap:4px 18px;text-align:left}
  .cl-head .cl-facts li+li::before{display:none}
  .cl-head p:first-of-type{font-size:15px}
}

.cl-head{padding-top:clamp(36px,5vw,84px)}
.cl-head h1{font-size:clamp(44px,5.2vw,72px)}
.cl2 .hd h2,.kinds .hd h2,.pr2 .hd h2{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.02em;line-height:1.1}
.cl2 .hd p,.kinds .hd p,.pr2 .hd p{margin-top:8px}
.cl2 .hd p{max-width:52ch}
.pg .blk h2{font-size:clamp(22px,2.2vw,28px)}

/* ===== Archive table, refined turn (25 Oct 2026): a dog-eared corner, a slight lean, a real perspective turn ===== */
.st2-tilt{position:relative;display:flex;align-items:center;justify-content:center;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease);filter:drop-shadow(0 22px 22px rgba(0,0,0,.42)) drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.st2-print{box-sizing:border-box;padding:10px;width:100%;background:var(--print);box-shadow:none!important;--ear:20px;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ear)),calc(100% - var(--ear)) 100%,0 100%);transition:clip-path .4s var(--ease);cursor:pointer;-webkit-tap-highlight-color:transparent}
.st2-print.is-back{box-shadow:none!important}
.st2-front{width:100%;height:100%;overflow:hidden}
/* the folded corner: the back of the paper shows; on the back, the photograph side shows */
.st2-ear{position:absolute;right:0;bottom:0;width:var(--ear);height:var(--ear);pointer-events:none;transition:width .4s var(--ease),height .4s var(--ease);
  background:linear-gradient(135deg,#D9D1BF 0%,#E8E1D2 30%,#F2ECE1 47%,rgba(0,0,0,.18) 49.2%,transparent 50%)}
.st2-print.is-back .st2-ear{background:linear-gradient(135deg,#2B2A27 0%,#3A3833 34%,#4A4741 47%,rgba(0,0,0,.25) 49.2%,transparent 50%)}
@media (hover:hover) and (pointer:fine){ .st2-tilt:hover .st2-print{--ear:30px} }
.st2-table.is-turning .st2-tilt{transition:none}
.st2-turn{display:inline-flex;align-items:center;gap:6px}
.st2-turn-i{flex:none;transition:transform .45s var(--ease)}
.st2-turn:hover .st2-turn-i{transform:rotate(-40deg)}
@media (max-width:520px){ .st2-print{--ear:16px;padding:8px} }
@media (prefers-reduced-motion: reduce){ .st2-tilt,.st2-print,.st2-ear,.st2-turn-i{transition:none} }
@media (forced-colors: active){ .st2-ear{display:none} .st2-print{clip-path:none} }

/* the back of the print carries the secondary mark: a strip of blue chef's tape, stuck on at the top right */
.st2-back .b-tape{position:absolute;top:clamp(12px,1.8vw,20px);right:clamp(10px,1.6vw,18px);width:var(--tape);height:auto;transform:rotate(3.5deg);transform-origin:70% 40%;filter:drop-shadow(0 1px 1px rgba(28,27,25,.22)) drop-shadow(0 3px 6px rgba(28,27,25,.08));pointer-events:none;user-select:none}

/* small landscape prints (phones): the back tightens so everything stays on the paper */
.st2-print{container-type:size;container-name:print}

/* ===== Design check (26 Oct 2026, Designed, Not Generated) ===== */
input[type=checkbox],input[type=radio]{accent-color:var(--ink)}
.ses .dn{min-width:2ch;text-align:right}
@media (max-width:860px){.ses .dn{min-width:0;text-align:left}}
@media (max-width:700px){.ses .dn{min-width:2ch;text-align:right}}
/* phone cards sit side by side, so their dates need no shared column: natural width keeps clear of the pastry */
@media (max-width:700px){.m-snap .ses .dn{min-width:0;text-align:left}}
section[id]{scroll-margin-top:calc(var(--hdr) + 12px)}

/* ===== The back of an archive print, v3 (27 Oct 2026): a record, not a note =====
   What an archive keeps on the back of a print (cf. the New York Times morgue prints): a number, a typed caption slip glued on,
   a stamp with the fields still to fill in, and the kind of print. Only what is visible or confirmed; blank lines are the unknowns. */
.st2-back{position:absolute;inset:0;overflow:hidden;color:var(--ink);background:var(--print);--tape:clamp(96px,34%,172px);
  padding:clamp(16px,6.2cqw,30px) clamp(16px,6.2cqw,30px) clamp(14px,5cqw,24px);
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;align-content:space-between;row-gap:12px}
.st2-back[hidden]{display:none}
.st2-back .b-hd{max-width:calc(100% - var(--tape) - 12px)}
.st2-back .b-no{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.st2-back .b-t{font-family:var(--serif);font-size:clamp(19px,6.4cqw,30px);line-height:1.12;margin-top:4px}
/* the typed caption, glued on: a whiter slip, slightly off square */
.st2-back .b-slip{background:var(--paper);padding:clamp(12px,5cqw,24px) clamp(14px,5.4cqw,26px);transform:rotate(-.5deg);
  box-shadow:0 1px 1px rgba(28,27,25,.10),0 8px 18px -12px rgba(28,27,25,.30)}
.st2-back .b-d{font-family:var(--mono);font-size:clamp(12px,3.6cqw,16px);line-height:1.6;color:var(--ink);overflow-wrap:break-word}
/* the archive stamp: what is still to be found out, as blank lines */
.st2-back .b-id{justify-self:start;width:min(100%,clamp(220px,76cqw,340px));padding:clamp(10px,3.4cqw,18px) clamp(12px,4cqw,20px) clamp(12px,3.8cqw,20px);
  border:1.5px solid rgba(28,27,25,.7);color:rgba(28,27,25,.84);transform:rotate(-1.5deg);transform-origin:0 100%}
.st2-back .b-id-t{font-family:var(--sans);font-weight:800;font-size:clamp(12px,3.6cqw,16px);line-height:1.1}
.st2-back .b-f{display:flex;align-items:flex-end;gap:10px;margin-top:clamp(9px,3.6cqw,17px);font-family:var(--mono);font-size:clamp(11px,3cqw,13px);line-height:1}
.st2-back .b-f[hidden]{display:none}
.st2-back .b-fl{flex:none;width:4.4em}
.st2-back .b-fv{flex:1;align-self:stretch;border-bottom:1px solid rgba(28,27,25,.42)}
.st2-back .b-src{font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.st2-back .b-tape{position:absolute;top:clamp(12px,4cqw,20px);right:clamp(10px,3.4cqw,18px)}
/* wide prints: caption on the left, stamp under the tape on the right */
@container print (orientation: landscape){
  .st2-back{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(14px,4cqw,26px);row-gap:clamp(8px,3cqh,16px);align-content:stretch}
  .st2-back .b-hd{grid-column:1;grid-row:1;max-width:none}
  .st2-back .b-slip{grid-column:1;grid-row:2;align-self:start}
  .st2-back .b-src{grid-column:2;grid-row:2;align-self:start}
  .st2-back .b-id{grid-column:2;grid-row:2;align-self:end;justify-self:stretch;width:auto;margin-right:clamp(6px,2cqw,12px)}
  .st2-back .b-d{font-size:clamp(11px,2.9cqw,14px);line-height:1.5}
  .st2-back .b-t{font-size:clamp(16px,4.6cqw,28px)}
  .st2-back .b-id-t{font-size:clamp(11px,2.9cqw,14px)}
  .st2-back .b-f{font-size:clamp(10px,2.6cqw,12px);margin-top:clamp(6px,2.4cqw,12px)}
}
/* small prints (phones): everything tightens so it stays on the paper */
@container print (max-height: 300px){
  .st2-back{padding:12px 14px;--tape:92px;row-gap:8px;column-gap:12px}
  .st2-back .b-no{font-size:10px}
  .st2-back .b-t{margin-top:2px}
  .st2-back .b-slip{padding:8px 10px}
  .st2-back .b-d{font-size:11px;line-height:1.45}
  .st2-back .b-id{padding:7px 9px 9px}
  .st2-back .b-id-t{font-size:11px}
  .st2-back .b-f{font-size:10px;margin-top:6px;gap:7px}
  .st2-back .b-src{font-size:10px}
  .st2-back .b-tape{top:8px;right:8px}
}
@media (forced-colors: active){ .st2-back .b-id{border-color:CanvasText} .st2-back .b-fv{border-color:CanvasText} .st2-back .b-slip{border:1px solid CanvasText} }
/* the narrowest phones (about 320 px): smaller type and paddings so nothing leaves the paper */
@container print (max-width: 300px){
  .st2-back{padding:12px 12px 10px;row-gap:8px;column-gap:10px;--tape:88px}
  .st2-back .b-no{font-size:10px}
  .st2-back .b-t{font-size:17px}
  .st2-back .b-slip{padding:9px 10px}
  .st2-back .b-d{font-size:11px;line-height:1.45}
  .st2-back .b-id{width:100%;padding:8px 10px 10px}
  .st2-back .b-id-t{font-size:11px}
  .st2-back .b-f{font-size:10px;margin-top:7px;gap:7px}
  .st2-back .b-src{font-size:10px}
  .st2-back .b-tape{top:8px;right:8px}
}
@container print (max-width: 300px) and (orientation: landscape){
  .st2-back .b-t{font-size:15px}
  .st2-back .b-d{font-size:10px;line-height:1.4}
  .st2-back .b-src{font-size:9px}
  .st2-back .b-id{padding:5px 8px 7px;margin:0 6px 9px 0}
  .st2-back{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
  .st2-back .b-slip{padding:7px 8px}
  .st2-back .b-d{line-height:1.38}
  .st2-back .b-id-t{font-size:10px}
  .st2-back .b-f{margin-top:4px}
}

/* events headline: keep the two halves of the line together where they fit */
@media (min-width:390px){.phead h1 .nw{white-space:nowrap}}

/* ===== Classes in preview (27 Oct 2026): no public booking yet; the list is the way in =====
   The ticket keeps its place but carries a box-office stamp instead of a date; rows lose dates and seats;
   the classes page explains the three stages and asks two optional questions that plan the first dates. */
.iv-date.iv-stamp b{display:inline-block;font-weight:800;font-size:clamp(20px,1.85vw,30px);line-height:1;letter-spacing:-.005em;padding:.36em .5em .3em;border:2px solid currentColor;border-radius:3px;transform:rotate(-5deg);transform-origin:0 100%;font-variant-numeric:normal}
.iv-pvn{color:var(--ink)}
/* preview rows: pastry, class, status, Notify me */
.sess.pv .ses{grid-template-columns:80px minmax(0,1fr) 120px;grid-template-areas:"px tt bk"}
.sess.pv .ses .px{grid-area:px}
.sess.pv .ses .tt{grid-area:tt}
.sess.pv .ses .st{grid-area:st}
.sess.pv .ses .bk{grid-area:bk}
.sess.pv .pvs{font-family:var(--mono);font-size:11px;color:var(--ink)}
@media (max-width:860px){
  .sess.pv .ses{grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"px tt bk";row-gap:4px;column-gap:14px}
  .sess.pv .ses .bk{align-self:center}
  .sess.pv .ses .st{justify-self:start}
}
@media (max-width:700px){
  .m-snap .sess.pv .ses{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tt px" "bk bk";row-gap:12px}
  .m-snap .sess.pv .ses .bk{justify-self:end}
}
/* classes page: status line, the three stages, the list with optional questions */
.cl-status{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:18px auto 0;max-width:60ch;font-size:var(--t2);line-height:1.45;color:var(--ink)}
.pv-stamp{display:inline-block;flex:none;font-weight:800;font-size:13px;line-height:1;padding:.42em .6em .36em;border:1.5px solid currentColor;border-radius:3px;transform:rotate(-4deg)}
.pvw .hd h2{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.02em;line-height:1.1}
.pvw .hd p{max-width:62ch;margin-top:8px}
.pv-stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.pv-stages li{position:relative;padding:18px 28px 0 0}
.pv-stages li::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;background:var(--ink-3)}
.pv-stages li.on::before{background:var(--orange)}
.pv-stages .w{display:block;font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.pv-stages b{display:block;margin-top:6px;font-weight:800;font-size:clamp(18px,1.5vw,22px);line-height:1.2;letter-spacing:-.01em}
.pv-stages p{margin-top:6px;max-width:32ch;color:var(--ink-2);font-size:14px;line-height:1.45}
@media (max-width:700px){
  .pv-stages{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--ink);padding-left:18px}
  .pv-stages li{padding:0 0 22px}
  .pv-stages li::before{left:-22px;top:5px}
}
.list .list-sub{max-width:52ch;margin:10px auto 0;color:var(--ink-2)}
.cp{display:grid;gap:16px;margin-top:22px}
.cp[hidden]{display:none}
.cp-why{font-size:13px;color:var(--ink-2)}
.cp-g{min-width:0;margin:0;padding:0;border:0}
.cp-l{float:left;width:100%;margin-bottom:8px;padding:0;font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.cp-o{clear:both;display:flex;flex-wrap:wrap;gap:6px 20px}
.cp label{display:inline-flex;align-items:center;gap:8px;min-height:30px;font-size:14px;line-height:1.3;color:var(--ink);cursor:pointer}
.cp input[type=checkbox]{flex:none;width:16px;height:16px;margin:0;accent-color:var(--ink)}
.cp-x{display:grid;gap:2px;padding-top:12px;border-top:1px solid var(--rule)}
@media (forced-colors: active){ .iv-date.iv-stamp b,.pv-stamp{border-color:CanvasText} }
@media (max-width:900px){
  .iv-date.iv-stamp b{font-size:clamp(15px,3.9vw,19px);border-width:1.5px;padding:.38em .5em .32em;max-width:5.4em;text-align:center;line-height:1.05}
}
@media (max-width:359px){ .iv-xs{display:none} }
/* archive print backs: a known place or date is typed on its line (27 Oct 2026, No. 03 from the Library of Congress) */
.st2-back .b-f.kn{flex-wrap:wrap;row-gap:2px}
.st2-back .b-fv.known{flex:1 1 7em;align-self:auto;min-width:0;padding-bottom:2px;line-height:1.2}
.st2-name{margin-top:10px;font-family:var(--serif);font-size:clamp(16px,1.35vw,19px);line-height:1.35;color:rgba(255,255,255,.78)}
/* Our story table: a square stage, so every print gets the same long edge and landscape prints are no longer half the size of portraits; prints sit on the bottom edge so the caption never moves (27 Oct 2026) */
@media (min-width:901px){ .st2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .st2-table{max-width:560px} }
.st2-stage{aspect-ratio:1/1;align-items:flex-end}
@media (max-width:900px){ .st2-stage{aspect-ratio:4/5} }  /* phones: one column, so a portrait-friendly stage keeps the backs readable; landscape prints still span the full width */

/* Print backs v4 (27 Oct 2026): what the client should know. Number and chapter, who or what, where and when (only what we know), one line of story, the source. No blank fields, no descriptions of the picture. */
.st2-back{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(10px,3cqh,18px)}
.st2-back .b2-no{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;max-width:calc(100% - var(--tape) - 14px);line-height:1.3}
.st2-back .b2-no [data-a-no]{font-family:var(--mono);font-size:clamp(10px,2.6cqi,12px);color:var(--ink-2)}
.st2-back .b2-ch{font-family:var(--sans);font-size:clamp(11px,2.8cqi,13px);color:var(--ink-2)}
.st2-back .b2-main{display:flex;flex-direction:column;gap:clamp(6px,2.2cqh,12px)}
.st2-back .b2-t{font-family:var(--serif);font-size:clamp(19px,8.4cqi,38px);line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
.st2-back .b2-m{font-family:var(--sans);font-weight:600;font-size:clamp(11px,3cqi,14px);letter-spacing:.01em;color:var(--ink-2)}
.st2-back .b2-m[hidden]{display:none}
.st2-back .b2-s{font-family:var(--serif);font-size:clamp(13px,4.6cqi,20px);line-height:1.42;max-width:32ch;text-wrap:pretty}
.st2-back .b2-src{font-family:var(--sans);font-size:clamp(10px,2.6cqi,12px);color:var(--ink-2)}
@container print (orientation: landscape){
  .st2-back .b2-t{font-size:clamp(17px,5.6cqi,34px)}
  .st2-back .b2-s{font-size:clamp(12px,3.2cqi,18px);max-width:44ch}
}
@container print (max-width: 300px){ .st2-back .b2-s{font-size:12px;line-height:1.38} .st2-back .b2-no [data-a-no],.st2-back .b2-ch,.st2-back .b2-src{font-size:10px} }
@container print (max-height: 230px){ .st2-back{gap:6px} .st2-back .b2-main{gap:4px} .st2-back .b2-t{font-size:17px} .st2-back .b2-s{font-size:11.5px;line-height:1.34} }

/* Our story, in order: three chapters with the generation as the heading (home page, ink band) */
.chron{list-style:none;margin:clamp(26px,3.2vw,40px) 0 0;padding:0;border-top:1px solid rgba(255,255,255,.22)}
.chron li{display:grid;grid-template-columns:minmax(0,10.5em) minmax(0,1fr);gap:6px 24px;align-items:baseline;padding:clamp(14px,1.6vw,18px) 0;border-bottom:1px solid rgba(255,255,255,.22)}
.chron h3{font-family:var(--sans);font-weight:700;font-size:15px;line-height:1.3;color:var(--paper)}
.chron p{font-family:var(--serif);font-size:clamp(15px,1.25vw,17px);line-height:1.45;color:rgba(255,255,255,.82)}
@media (max-width:600px){ .chron li{grid-template-columns:1fr} }

/* Our story page: one row per chapter, the photographs beside their chapter */
.chs-list{list-style:none;margin:0 auto;padding:0;max-width:1180px}
.ch{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);padding:clamp(32px,4.4vw,60px) 0;border-top:1px solid var(--rule);align-items:start}
.ch:first-child{border-top:0;padding-top:0}
.ch-txt h2{font-family:var(--sans);font-weight:800;font-size:clamp(26px,2.6vw,36px);line-height:1.05;letter-spacing:-.02em}
.ch-txt p{margin-top:12px;font-family:var(--serif);font-size:clamp(17px,1.4vw,20px);line-height:1.45;max-width:36ch}
.ch-acts{display:flex;flex-wrap:wrap;gap:8px 20px}
.ch-prints{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,2vw,28px);align-items:end}
.ch-prints.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ch-prints.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ch-prints.n1{grid-template-columns:minmax(0,1fr)}
.ch-prints .pr{margin:0;width:100%;max-width:none}
.ch-prints .pr img{display:block;width:100%;height:auto;box-shadow:0 0 0 6px var(--print)}
.ch-prints figcaption{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;margin-top:14px}
.ch-prints figcaption .t{font-family:var(--serif);font-size:15px;line-height:1.3}
.ch-prints figcaption .n{font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.ch-prints figcaption .m{grid-column:1/-1;font-size:12px;line-height:1.4;color:var(--ink-2)}
.ch-solo .ch-txt{grid-column:1/-1}
@media (max-width:900px){ .ch{grid-template-columns:1fr} }
@media (max-width:560px){ .ch-prints.n3{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* What you make: four classes */
@media (min-width:701px){ .kgrid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:701px) and (max-width:1060px){ .kgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.chron-light{border-top-color:var(--rule)} .chron-light li{border-bottom-color:var(--rule)} .chron-light h3{color:var(--ink)} .chron-light p{color:var(--ink-2)}
@container print (orientation: portrait){
  .st2-back .b2-t{font-size:clamp(20px,9.6cqi,42px)}
  .st2-back .b2-m{font-size:clamp(11px,3.3cqi,15px)}
  .st2-back .b2-s{font-size:clamp(13px,5cqi,21px);line-height:1.4}
  .st2-back .b2-main{gap:clamp(8px,2.6cqh,16px)}
}
.st2-more{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px} .st2-more .st2-hint{font-size:13px;color:rgba(255,255,255,.72)}
.sec.chs{padding-top:clamp(4px,1.6vw,20px)}

/* Classes: the two lines under the list, one action each (27 Oct 2026) */
.cl-more{display:grid;justify-items:start;gap:8px;margin-top:26px}
.cl-more p{font-size:15px;line-height:1.5;color:var(--ink-2)}
.cl-more p a{margin-left:4px}
/* Line breaks: short text is balanced so no line ends on a lone word; paragraphs wrap without orphans (27 Oct 2026) */
h1,h2,h3,.hd p,.phead p,.st2-lead,.sl-cap,.iv-sub,.kgrid h3,.kgrid p,.cl-more p,figcaption,.seal-cap .t,.sl-steps li,.steps p,.ch-txt p,.chron p,.pv-stages p,.qf-note,.iv-reply{text-wrap:balance}
.faq dd,.faq p,.ch-txt p,.kinds p,.pv p,.lf .sub,.end-list .sub{text-wrap:pretty}
.pgrid .t,.pgrid .d,.eds .t{text-wrap:balance}
/* Salteo chapter: today, as a photograph rather than a print (no white mat) */ .ch-prints .ch-photo img{box-shadow:none;border-radius:2px}
/* How an event works without the caption row (27 Oct 2026) */ .sl-in{grid-template-areas:"sa stage sb" "acts acts acts"} @media (max-width:900px){.sl-in{grid-template-areas:"stage" "sa" "sb" "acts"}}
/* Hero note: group size on its own line, then the promise (27 Oct 2026) */ .iv-reply .iv-hint{display:block}

/* Events on the landing (27 Oct 2026, v3): the user's photographs lead. Phones: a list with the photo at the left. 701px and up: a gallery, two across, four across from 1100px; links share one baseline */
.evx{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink);display:grid;grid-template-columns:minmax(0,1fr)}
.evx-row{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:18px;align-items:start;padding:20px 0;border-bottom:1px solid var(--rule)}
.evx-ph{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;border-radius:2px;background:var(--rule)}
.evx-tx{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.evx-n{margin:0;font-family:var(--sans);font-weight:700;font-size:clamp(19px,1.6vw,22px);line-height:1.2;letter-spacing:-.01em}
.evx-d{margin:8px 0 0;font-family:var(--serif);font-size:clamp(15.5px,1.25vw,17px);line-height:1.45;max-width:40ch}
.evx-f{margin:6px 0 0;color:var(--ink-2);font-size:var(--t2);line-height:1.45}
.evx-go{margin-top:12px;white-space:nowrap;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
.evx-go:hover{text-decoration-thickness:2px}
.evx-more{margin:26px 0 0;color:var(--ink-2);font-size:var(--t2)}
.evx-more a{color:var(--ink)}
@media (min-width:701px){
  .evx{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,36px);row-gap:clamp(36px,4vw,52px);padding-top:clamp(24px,2.6vw,36px)}
  .evx-row{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;row-gap:18px;padding:0;border:0}
  .evx-tx{height:100%}
  .evx-go{margin-top:auto;padding-top:14px}
  .evx-more{margin-top:clamp(32px,3.4vw,44px);padding-top:clamp(20px,2vw,26px);border-top:1px solid var(--rule)}
}
@media (min-width:1100px){.evx{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Pastry grid (27 Oct 2026): the six pastries at equal visual weight on one baseline, one name line, a short description */
.pgrid{gap:clamp(30px,3vw,44px) clamp(16px,2vw,28px)}
.pgrid img,.band-stone .pgrid img{width:min(100%,200px);height:auto;aspect-ratio:1/1;object-fit:contain}
.pgrid .t{margin-top:8px;font-size:16px;line-height:1.25}
.pgrid .d{margin-top:5px;font-size:14.5px;line-height:1.4;max-width:24ch}
/* Events: each fact on its own line */
.evx-f{margin-top:10px}
.evx-f span{display:block}
.band-stone .px-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.pgrid .d{max-width:none}
.evx-f span{text-wrap:balance}
@media (max-width:900px){.band-stone .px-in{grid-template-columns:1fr}}
@media (max-width:700px){.m-snap .pgrid li{flex:0 0 46%}.pgrid .d{font-size:14px;line-height:1.38}}
@media (min-width:701px) and (max-width:900px){.pgrid .d{display:block}}

/* Our story on phones and tablets (28 Oct 2026): the heading, then the print with its three thumbnails right under it, then the chapters,
   so a chosen photograph changes in view; the script also brings the print into view if it has been scrolled away */
@media (max-width:900px){
  .st2{gap:0}
  .st2-txt{display:contents}
  .st2-txt h2{order:1}
  .st2-lead{order:2}
  .st2-table{order:3;margin-top:clamp(26px,7vw,40px)}
  .st2-strip{order:4;width:100%;max-width:min(86vw,420px);justify-self:center;margin-top:20px}
  .st2 .chron{order:5;margin-top:clamp(34px,9vw,52px)}
  .st2-more{order:6}
}

/* Our story on phones and tablets (28 Oct 2026): the frame takes the height of the photograph shown (set by the script), so landscape prints
   sit right under the text with no empty band above; the print keeps its top edge and the height eases when the photograph changes */
@media (max-width:900px){
  .st2-stage.is-fluid{aspect-ratio:auto;align-items:flex-start;transition:height .34s cubic-bezier(.22,.61,.36,1)}
}
@media (max-width:900px) and (prefers-reduced-motion: reduce){ .st2-stage.is-fluid{transition:none} }

/* the turn control keeps its label on one line; the caption beside it wraps instead (28 Oct 2026) */
.st2-turn{white-space:nowrap;flex:none}