/* Salvatore Glass Studio — independent CofeeUI concept. Original illustration; no business imagery. */
:root{
  --ink:#10333d;--ink-deep:#0b2d36;--paper:#f4e8d3;--paper-2:#f8eedb;--gold:#f4b968;--rust:#8a4527;--glow:#ffd99a;--lead:#183b44;
  --focus:#9a3412;--focus-dark:#ffd99a;--header:64px;--pad:clamp(1.1rem,5vw,6rem);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* default "coast" mix, used by the hero and the assembling pane */
  --c0:#f7c17b;--c1:#9fd3cc;--c2:#fff0c0;--c3:#78bcb9;--c4:#ef8460;--c5:#3f9aa2;--c6:#d38452;
}
[data-palette="tide"]{--c0:#9fd3cc;--c1:#78bcb9;--c2:#f6e3a8;--c3:#3f9aa2;--c4:#5db2b2;--c5:#1f6f7b;--c6:#2e8791}
[data-palette="kelp"]{--c0:#cfe3a6;--c1:#b3d48f;--c2:#f4e6a0;--c3:#6f9a5b;--c4:#86ad63;--c5:#3f6f4a;--c6:#55844f}
[data-palette="arbutus"]{--c0:#f4b896;--c1:#ef9b7a;--c2:#ffe2a8;--c3:#d9684a;--c4:#e57d58;--c5:#a8453a;--c6:#bf5842}
[data-palette="lowsun"]{--c0:#f7c17b;--c1:#f5d88e;--c2:#fff0c0;--c3:#e9a46c;--c4:#ef8460;--c5:#b7663f;--c6:#d38452}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--header) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);overflow-wrap:break-word}
img,svg{max-width:100%}
a{color:inherit;text-underline-offset:.2em}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance;overflow-wrap:anywhere;hyphens:auto}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
.close :focus-visible,.site-nav :focus-visible,.passage :focus-visible{outline-color:var(--focus-dark)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;top:-120px;left:1rem;z-index:100;background:#fff;color:var(--ink);padding:.9rem 1.1rem;font-weight:700}
.skip:focus{top:.75rem}
.eyebrow{font:800 .74rem/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;margin:0 0 1rem;color:var(--rust)}
.fine{font-size:.84rem;opacity:.85}
.status{min-height:1.5em;margin:.8rem 0 0;font-weight:700}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.7rem 1.3rem;font:800 1rem/1.2 var(--sans);text-decoration:none;border:2px solid var(--lead);cursor:pointer;background:transparent;color:inherit;text-align:center}
.btn-gold{background:var(--gold);color:#102e34}
.btn-gold:hover{background:#ffd9a0}
.btn-line:hover,.btn-line-ink:hover{background:rgba(16,51,61,.08)}
.btn-ghost{border-color:#f8eedb;color:#f8eedb}
.btn-ghost:hover{background:rgba(248,238,219,.14)}
.btn-ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-line-ink{border-color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.4rem 0}

/* header: direct child of body, sticky */
.site-header{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"brand nav call";align-items:center;column-gap:1rem;padding:.5rem var(--pad);background:var(--paper);border-bottom:2px solid var(--ink);min-height:var(--header)}
.js .site-header{height:var(--header);min-height:0}
.brand{grid-area:brand;display:flex;align-items:center;gap:.65rem;text-decoration:none;min-height:44px}
.brand-mark{width:34px;height:34px;flex:none;background:var(--ink);border-radius:9px;padding:3px}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text b{font:700 1.05rem var(--serif);letter-spacing:.01em;white-space:nowrap}
.brand-text i{font:700 .66rem var(--sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.site-nav{grid-area:nav;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.2rem 1.2rem}
.site-nav a{text-decoration:none;font-weight:700;font-size:.88rem;padding:.55rem .1rem;min-height:44px;display:inline-flex;align-items:center}
.site-nav a:hover{text-decoration:underline}
.call-btn{grid-area:call;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.4rem 1rem;background:var(--gold);color:#102e34;font-weight:800;text-decoration:none;border:2px solid var(--lead);white-space:nowrap}
.call-short{display:none}
.menu-btn{grid-area:call;display:none}
@media (max-width:1180px){
  .js .menu-btn{display:inline-flex;grid-area:menu;align-items:center;min-height:44px;padding:.4rem 1rem;font:800 .95rem var(--sans);background:transparent;border:2px solid var(--ink);color:var(--ink);cursor:pointer}
  .js .menu-btn[hidden]{display:none}
  .js .site-header{grid-template-columns:1fr auto auto;grid-template-areas:"brand menu call"}
  .js .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--ink);padding:.5rem var(--pad) 1rem;gap:0;border-bottom:3px solid var(--gold)}
  .js .site-nav.is-open{display:flex}
  .js .site-nav a{color:#f8eedb;border-bottom:1px solid rgba(248,238,219,.18);font-size:1rem;padding:.6rem 0}
  .call-long{display:none}.call-short{display:inline}
}
@media (max-width:1180px){html:not(.js) .site-header{grid-template-columns:1fr auto;grid-template-areas:"brand call" "nav nav"}html:not(.js) .site-nav{justify-content:flex-start}}
@media (max-width:600px){.brand-text i{display:none}}
@media (max-width:360px){.brand{gap:.45rem}.brand-mark{width:28px;height:28px}.brand-text b{font-size:.94rem}.call-btn,.js .menu-btn{padding:.4rem .7rem}.site-header{column-gap:.5rem}}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);min-height:calc(100svh - var(--header))}
.hero-copy{container-type:inline-size;padding:clamp(1.5rem,4vw,3.5rem) var(--pad);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.concept-note{font-size:.78rem;max-width:56ch;margin:0 0 1.4rem;padding:.55rem .8rem;border:1px dashed rgba(16,51,61,.55);background:rgba(255,255,255,.35)}
.hero h1{font-size:clamp(3rem,22cqi,8.8rem);line-height:.86;letter-spacing:-.045em;font-variation-settings:"SOFT" 100,"WONK" 1;margin:.2rem 0 1.4rem}
.hero h1 span{display:inline-block}
.hero h1 em{display:inline-block;color:var(--rust);font-style:italic}
.lede{max-width:40ch;font-size:1.12rem}
.facts{margin:1rem 0 0;display:grid;gap:.55rem;max-width:56ch;width:100%}
.facts div{display:grid;grid-template-columns:5.2rem 1fr;gap:.8rem;padding-top:.55rem;border-top:1px solid rgba(16,51,61,.35)}
.facts dt{font:800 .72rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--rust);padding-top:.25em}
.facts dd{margin:0;font-size:.95rem}
.hero-art{position:relative;display:grid;place-items:end center;min-height:420px;background:radial-gradient(circle at 50% 38%,#ffe9b0 0,#cfe6d8 38%,#3b7b83 100%);overflow:clip}
.hero-window{width:min(100%,640px);max-height:calc(100svh - var(--header));height:auto}
.art-note{position:absolute;left:1rem;bottom:.8rem;margin:0;padding:.3rem .65rem;background:rgba(244,232,211,.92);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.sh{stroke:var(--lead);stroke-width:8;stroke-linejoin:round}
.hero-cast{opacity:.55;mix-blend-mode:multiply}
.hero-cast-skew{transform-box:view-box;transform:matrix(1,0,.2,-.24,-160,868)}

/* craft: sticky assembly */
.craft{height:330svh;background:var(--ink);color:#f8eedb;position:relative;overflow:clip}
.craft-sticky{position:sticky;top:var(--header);height:calc(100svh - var(--header));display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:3vw;padding:1rem var(--pad)}
.craft .eyebrow,.close .eyebrow,.passage .eyebrow{color:var(--glow)}
.craft-copy{container-type:inline-size}
.craft h2{font-size:clamp(2.2rem,15cqi,5.6rem);line-height:.96;letter-spacing:-.035em;margin:0 0 1rem}
.craft-copy p{max-width:40ch}
.steps{list-style:none;display:flex;gap:.5rem;margin:1.2rem 0;padding:0;flex-wrap:wrap}
.steps li{padding:.4rem .85rem;border:1px solid rgba(248,238,219,.55);font:800 .76rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#bcd3cd;transition:background .3s,color .3s}
.steps li.on{color:#102e34;background:var(--gold);color:#102e34;border-color:var(--gold)}
.craft-stage{height:100%;display:grid;place-items:center;min-height:0;border:1px solid rgba(187,217,208,.35);background:radial-gradient(ellipse at 50% 40%,rgba(244,185,104,.22),transparent 62%),#143642;overflow:clip}
.craft-svg{height:100%;width:100%;max-height:100%}
.cs{transform-box:fill-box;transform-origin:center;transform:translate(calc(var(--dx,0)*var(--k,0)*1px),calc(var(--dy,0)*var(--k,0)*1px)) rotate(calc(var(--rot,0)*var(--k,0)*1deg));opacity:var(--o,1)}
.cs0{--dx:-70;--dy:-30;--rot:-24}.cs1{--dx:80;--dy:-26;--rot:22}.cs2{--dx:10;--dy:-70;--rot:38}.cs3{--dx:-80;--dy:40;--rot:-18}.cs4{--dx:84;--dy:48;--rot:20}.cs5{--dx:-50;--dy:110;--rot:-12}.cs6{--dx:60;--dy:118;--rot:14}
.craft-cartoon *{fill:none;stroke:#f8eedb;stroke-opacity:.42;stroke-width:2;stroke-dasharray:7 7}
.craft-cartoon{opacity:calc(1 - var(--lead-p,1))}
.cs-lead,.cs-frame{fill:none;stroke:var(--lead);stroke-width:8;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--lead-p,1))}
.cs-frame{stroke-width:16;stroke-dashoffset:calc(1 - var(--lead-p,1))}

/* studio */
.studio{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:4vw;align-items:start;padding:clamp(4rem,9vw,8rem) var(--pad);background:var(--paper-2);overflow:clip}
.studio-head{position:sticky;top:calc(var(--header) + 2rem);container-type:inline-size}
.studio h2,.record h2,.guide h2,.visit h2{font-size:clamp(2.2rem,12cqi,5.2rem);line-height:.98;letter-spacing:-.035em;margin-bottom:1rem}
.studio-list{list-style:none;margin:0;padding:0;border-top:3px solid var(--ink)}
.studio-list li{display:grid;grid-template-columns:72px 1fr;gap:1.4rem;align-items:center;padding:1.6rem 0;border-bottom:1px solid rgba(16,51,61,.35)}
.studio-list h3{font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.05;margin-bottom:.35rem}
.studio-list p{margin:0;max-width:56ch}
.glyph{width:64px;height:64px;transform-origin:50% 80%}

/* record */
.record{padding:clamp(4rem,8vw,7rem) var(--pad);background:var(--paper);border-top:2px solid var(--ink);overflow:clip}
.record-inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:4vw;align-items:start}
.record-inner>div{container-type:inline-size}
.record-list{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.record-list li{border:2px solid var(--ink);padding:1.2rem 1.3rem;background:var(--paper-2);position:relative}
.record-list li::after{content:"CHECKED 30 OCT 2026" / "";position:absolute;right:.9rem;top:.7rem;font:800 .62rem var(--sans);letter-spacing:.14em;color:var(--rust);border:1.5px solid var(--rust);padding:.15rem .4rem;transform:rotate(3deg)}
.record-list li.not-claimed::after{content:none}
.record-list h3{font-size:1.5rem;margin:0 0 .4rem;padding-right:8.5rem}
.record-list p{margin:0 0 .6rem}
.record-list a{font-weight:700}
.not-claimed{background:transparent;border-style:dashed}

/* passage: sun, prism, colour */
.passage{height:240svh;background:#e9a46c;position:relative;overflow:clip}
.passage-sticky{position:sticky;top:var(--header);height:calc(100svh - var(--header));overflow:clip;background:linear-gradient(#7aa7ad 0,#f0b27a 55%,#f7d49d 100%)}
.passage-sticky::before{content:"";position:absolute;inset:0;background:linear-gradient(#b9e1dc 0,#fbe7b8 70%,#fff2cf 100%);opacity:var(--q,0)}
.passage-svg{position:absolute;inset:0;width:100%;height:100%}
.passage-title{position:absolute;z-index:3;left:var(--pad);right:var(--pad);bottom:clamp(1rem,5svh,3rem);color:#fff2db;font-size:clamp(3rem,12.5vw,8rem);line-height:.92;letter-spacing:-.04em;max-width:min(100%,11ch);opacity:calc(1 - var(--rise,0)*1.6)}
.passage-title .w{display:inline-block;clip-path:inset(0 calc((1 - var(--w,1))*100%) 0 0);opacity:calc(.15 + var(--w,1)*.85)}
.passage-note{position:absolute;z-index:3;right:var(--pad);bottom:clamp(1rem,5svh,3rem);margin:0;max-width:18ch;color:#fff2db;font-weight:700;text-align:right;opacity:calc(var(--bands,1)*(1 - var(--rise,0)*1.6))}

/* guide */
.guide{padding:clamp(3.5rem,8vw,7rem) var(--pad);background:var(--paper-2);overflow:clip}
.guide-head{max-width:64ch;margin-bottom:2rem;container-type:inline-size}
.guide-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"form stage" "out stage";gap:2rem 4vw;align-items:start}
.guide-form{grid-area:form}.guide-out{grid-area:out}.guide-stage{grid-area:stage;margin:0;position:sticky;top:calc(var(--header) + 1rem)}
fieldset{border:0;padding:0;margin:0 0 1.6rem;min-width:0}
legend{font:800 .78rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rust);margin-bottom:.7rem;padding:0}
.paths,.pals{display:flex;flex-wrap:wrap;gap:.6rem}
.paths legend,.pals legend{width:100%;float:none}
.opt,.pal{position:relative;display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:.6rem 1rem;border:2px solid var(--ink);cursor:pointer;font-weight:700;background:transparent}
.opt input,.pal input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;scroll-margin-top:calc(var(--header) + 24px)}
.opt:has(input:checked){background:var(--ink);color:#fff;text-decoration:underline;text-underline-offset:.3em}
.opt:has(input:checked)::before{content:"✓" / "";font-weight:900}
.pal:has(input:checked){outline:3px solid var(--ink);outline-offset:2px;background:var(--paper)}
.pal:has(input:checked)::after{content:"✓" / "";font-weight:900}
.opt:has(input:focus-visible),.pal:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.pal-chip{width:26px;height:26px;border-radius:50%;background:var(--chip);border:2px solid var(--lead);flex:none}
.detail label{display:block;font:800 .78rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rust);margin-bottom:.5rem}
.detail input{width:100%;min-height:48px;padding:.6rem .8rem;font:400 1rem var(--sans);border:2px solid var(--ink);background:#fff;color:var(--ink);border-radius:0}
.guide-stage-box{background:radial-gradient(ellipse at 50% 38%,rgba(255,255,255,.6),transparent 62%),#e5d6b8;border:2px solid var(--ink);padding:.6rem}
.guide-svg{display:block;width:100%;height:auto;max-height:calc(100svh - var(--header) - 7rem)}
.guide-stage figcaption{font-size:.78rem;margin-top:.5rem;opacity:.85}
.guide-out h3{font-size:clamp(1.9rem,4vw,3rem);line-height:1.02;margin-bottom:.6rem}
.out-label{font:800 .74rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rust);margin:1.3rem 0 .4rem}
.prep{margin:0;padding-left:1.2rem}.prep li{margin:.2rem 0}
blockquote{margin:0;padding:.9rem 1.1rem;border-left:5px solid var(--gold);background:rgba(16,51,61,.07);font-size:1.02rem}
blockquote:focus{outline:3px solid var(--focus);outline-offset:3px}
.note{margin:.9rem 0 0;font-size:.92rem}
.guide-svg .guide-piece,.close-piece{transition:opacity .45s}
.guide-swap{animation:swap .55s ease both;transform-box:fill-box;transform-origin:50% 100%}
@keyframes swap{0%{opacity:.1;transform:translateY(18px) scale(.96)}100%{opacity:1;transform:none}}

/* faq */
.faq{padding:clamp(4rem,8vw,7rem) var(--pad);background:var(--paper-2);border-top:2px solid var(--ink);display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:4vw;align-items:start}
.faq-head{container-type:inline-size}
.faq h2{font-size:clamp(2.2rem,12cqi,5.2rem);line-height:.98;letter-spacing:-.035em;margin-bottom:1rem}
.faq-list{border-top:3px solid var(--ink)}
.faq-item{border-bottom:1px solid rgba(16,51,61,.35)}
.faq-item summary{display:flex;align-items:center;gap:1rem;min-height:56px;padding:.9rem 0;cursor:pointer;list-style:none;font:400 clamp(1.25rem,2.2vw,1.6rem)/1.2 var(--serif)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover .q{text-decoration:underline;text-underline-offset:.2em}
.bead{flex:none;width:18px;height:18px;transform:rotate(45deg);border:2px solid var(--lead);background:transparent;transition:background .35s,transform .45s cubic-bezier(.3,1.5,.5,1)}
.faq-item[open] .bead{background:var(--gold);transform:rotate(225deg)}
.faq-a{padding:0 0 1.1rem calc(18px + 1rem);max-width:62ch}
.faq-a p{margin:0}
.faq-a a{font-weight:700;display:inline-block;padding-block:.2em}
.motion .faq-item[open] .faq-a{animation:answer .45s ease both}
@keyframes answer{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* visit — the one calm chapter */
.visit{padding:clamp(4rem,8vw,7rem) var(--pad);background:var(--paper);border-top:2px solid var(--ink)}
.visit-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4vw;align-items:start}
.visit-inner>div{container-type:inline-size}
.visit-card{font-style:normal;border:2px solid var(--ink);padding:1.6rem;background:var(--paper-2)}
.visit-addr{font:400 clamp(1.5rem,3vw,2.2rem)/1.15 var(--serif);margin-bottom:1rem}
.visit-card a:not(.btn){font-weight:700}
.visit-prep{list-style:none;counter-reset:prep;margin:1.6rem 0 0;padding:0;display:grid;gap:.9rem;max-width:46ch}
.visit-prep li{counter-increment:prep;position:relative;padding-left:2.4rem}
.visit-prep li::before{content:counter(prep) / "";position:absolute;left:0;top:-.05em;font:400 1.5rem/1 var(--serif);color:var(--rust)}
.visit-prep a{font-weight:700;display:inline-block;padding-block:.2em}

/* close */
.close{position:relative;background:var(--ink-deep);color:#f8eedb;padding:clamp(4rem,8vw,7rem) var(--pad);overflow:clip}
.close-patch{position:absolute;inset:-10%;pointer-events:none;mix-blend-mode:screen;background:
  linear-gradient(100deg,transparent 26%,color-mix(in srgb,var(--c0) 30%,transparent) 32%,transparent 40%),
  linear-gradient(100deg,transparent 46%,color-mix(in srgb,var(--c3) 26%,transparent) 54%,transparent 64%),
  linear-gradient(100deg,transparent 70%,color-mix(in srgb,var(--c4) 24%,transparent) 75%,transparent 81%);
  transform:translateX(calc((1 - var(--r,1))*-45%)) skewX(-12deg);opacity:calc(.25 + var(--r,1)*.75)}
.close-cast,.craft-cast{mix-blend-mode:screen}
.close-inner{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:4vw;align-items:center}
.close-copy{container-type:inline-size}
.close h2{font-size:clamp(2.6rem,14cqi,7rem);line-height:.92;letter-spacing:-.04em;margin-bottom:1.2rem;clip-path:inset(0 calc((1 - var(--hw,1))*100%) 0 0)}
.close-pick{font-size:1.1rem}
.close blockquote{background:rgba(248,238,219,.1);border-color:var(--gold)}
.close a:not(.btn){color:#f9c993}
.close-svg{display:block;width:100%;height:auto;max-height:70svh}
.close-glow{opacity:var(--lit,0)}

/* owner + footer */
.owner{background:#d8e4db;color:#153a43;padding:3rem var(--pad);border-top:7px solid #d88b56}
.owner .eyebrow{color:#7a3a1d}
.owner h2{font-size:clamp(1.7rem,3.4vw,3rem);line-height:1.08;max-width:22ch;margin-bottom:1rem}
.owner p{max-width:66ch}
.owner a:not(.btn){font-weight:700;overflow-wrap:anywhere}
.owner-url{overflow-wrap:anywhere;user-select:all}
.owner-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1rem}
.site-footer{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;justify-content:space-between;align-items:flex-end;padding:2rem var(--pad) calc(2rem + env(safe-area-inset-bottom));background:var(--ink);color:#f8eedb}
.site-footer p{margin:0 0 .6rem}.site-footer a{color:#f9c993}.site-footer .fine{max-width:78ch}
.to-top{font-weight:800;min-height:44px;display:inline-flex;align-items:center}
.site-footer :focus-visible{outline-color:var(--focus-dark)}

/* hero entry + loops (only when motion allowed) */
.motion .hero-pane .sh{animation:lightup .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*130ms + 250ms)}
.motion .sh0{--i:0}.motion .sh1{--i:1}.motion .sh2{--i:3}.motion .sh3{--i:2}.motion .sh4{--i:4}.motion .sh5{--i:5}.motion .sh6{--i:6}
@keyframes lightup{0%{opacity:.08;transform:translateY(26px)}100%{opacity:1;transform:none}}
.motion .hero-frame{stroke-dasharray:1;animation:drawframe 1.4s ease-out .1s both}
@keyframes drawframe{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.motion .hero-glint{animation:glint 9s ease-in-out 2.2s infinite}
.motion .hero-cast-skew{animation:castdrift 12s ease-in-out infinite alternate}
@keyframes glint{0%{transform:translateX(-120px) rotate(18deg);opacity:0}15%{opacity:.8}45%{transform:translateX(640px) rotate(18deg);opacity:0}100%{transform:translateX(640px);opacity:0}}
@keyframes castdrift{from{transform:matrix(1,0,.34,-.24,-200,868)}to{transform:matrix(1,0,.06,-.24,-90,868)}}
.hero.off *{animation-play-state:paused!important}
.hero-pane .sh,.hero-pane polygon{transform-box:fill-box;transform-origin:center}

/* reveals — only hidden once JS has confirmed it can reveal them */
.motion.ready [data-reveal]{transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1),clip-path .9s cubic-bezier(.2,.7,.2,1)}
.motion.ready [data-reveal="rise"]:not(.in){opacity:.05;transform:translateY(48px)}
.motion.ready [data-reveal="wipe"]:not(.in){clip-path:inset(0 100% 0 0);opacity:.2;transform:translateX(-24px)}
.motion.ready [data-reveal="stamp"]:not(.in){opacity:.05;transform:translateY(36px) rotate(-2.5deg) scale(.94)}
.motion.ready [data-reveal="wipe"] .glyph{transition:transform .8s cubic-bezier(.3,1.5,.5,1) .35s}
.motion.ready [data-reveal="wipe"]:not(.in) .glyph{transform:scale(.4) rotate(-20deg)}

/* real-time glass (glass-scene.js): a canvas fades in over each illustration; the SVG stays in the
   accessibility tree with its label, and returns if WebGL is unavailable or fails */
.hero-art,.craft-stage,.guide-stage-box,.close-stage{position:relative}
.gl-view{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s ease;pointer-events:none}
.gl-on>.gl-view{opacity:1}
.gl-on>svg{opacity:0;transition:opacity .9s ease}
.gl-on>svg *{animation:none!important}
.guide-stage-box.gl-on,.close-stage.gl-on{background:#0b2d36}
.close-stage{border:1px solid rgba(248,238,219,.22)}
.lights .opt{min-width:0}

/* layout */
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-art{min-height:0;aspect-ratio:1/1.05}
  .hero h1{font-size:clamp(3rem,26cqi,7rem)}
  .craft{height:300svh}
  .craft-sticky{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-content:start;gap:.6rem;padding:.8rem var(--pad)}
  .craft h2{font-size:clamp(1.7rem,9vw,2.6rem);margin-bottom:.4rem}
  .craft-copy p:not(.eyebrow):not(.fine){display:none}
  .craft-copy .fine{display:none}
  .craft-copy .eyebrow{margin-bottom:.4rem}
  .steps{margin:.5rem 0 0}
  .record-inner,.visit-inner,.close-inner{grid-template-columns:minmax(0,1fr)}
  .guide-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "form" "out";gap:1.4rem}
  .guide-stage{position:static}
  .guide-stage-box{display:grid;place-items:center}
  .guide-svg{max-height:34svh;width:auto}
  .faq{grid-template-columns:minmax(0,1fr)}
  .close-stage{order:-1}
  .close-svg{max-height:38svh;width:auto;margin:0 auto}
  .concept-note{font-size:.74rem;padding:.4rem .6rem;margin-bottom:1rem}
  .passage{height:220svh}
  .studio{grid-template-columns:minmax(0,1fr)}.studio-head{position:static;margin-bottom:1.5rem}
  .studio-list li{grid-template-columns:52px 1fr;gap:1rem}
  .passage-note{top:1rem;bottom:auto;text-align:right;max-width:16ch;font-size:.82rem;color:#10333d}
  .glyph{width:48px;height:48px}
}
@media (max-width:420px){
  .record-list h3{padding-right:0;padding-top:1.6rem}
  .facts div{grid-template-columns:1fr;gap:.1rem}
}
/* short screens & landscape phones: no pinned scenes */
@media (max-height:520px){
  .craft,.passage{height:auto}
  .craft-sticky{position:static;height:auto;min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:2rem var(--pad)}
  .craft-stage{height:70svh;min-height:300px}
  .craft-copy p:not(.eyebrow):not(.fine){display:block}
  .passage-sticky{position:relative;top:0;height:max(420px,80svh)}
  .guide-stage{position:static}
  .hero{min-height:0}
  .hero-window{max-height:none}
}

/* print + forced colours */
@media print{
  .site-header,.skip,.menu-btn{position:static!important}
  .craft,.passage{height:auto!important}
  .craft-sticky,.passage-sticky{position:static!important;height:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  .cs{transform:none!important;opacity:1!important}.cs-lead,.cs-frame{stroke-dashoffset:0!important}
  .passage-title .w{clip-path:none!important;opacity:1!important}
  .close h2{clip-path:none!important}
  .gl-view{display:none!important}.gl-on>svg{opacity:1!important}
  .passage{background:#fff}.passage-title{color:#000}
}
@media (forced-colors:active){
  .btn,.call-btn,.opt,.pal{border:2px solid CanvasText}
  .opt:has(input:checked),.pal:has(input:checked){border:4px double Highlight;text-decoration:underline}
  .steps li.on{border:3px solid Highlight}
  :focus-visible{outline:3px solid Highlight}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

.record-list a,.visit-card a:not(.btn),.owner a:not(.btn),.site-footer a,.close .fine a{display:inline-block;padding-block:.35em}