/* Seven Story: portfolio page. Storybook (CSS 3D) and booth build (WebGL). */
:root{
  --base:#F5F0E8;--page:#FAF6EF;--text:#241C18;--sage:#8C9F9C;--sage-deep:#5b6c66;
  --taupe:#B7A99A;--gold:#B49A63;--card:#EFE8DC;
  --pad:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--base)}
body{color:var(--text);font-family:'Manrope',system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:'DM Sans',system-ui,sans-serif;font-weight:500;letter-spacing:-.03em;line-height:1.06}
a{color:inherit;text-decoration:none}
ol,ul{list-style:none}
img,svg{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:60;background:var(--text);color:var(--base);padding:10px 14px;font-size:13px}
.skip:focus{top:12px}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

/* ---------- header (matches the home page) ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px var(--pad);border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease}
.site-header.solid{background:rgba(245,240,232,.92);border-bottom-color:rgba(36,28,24,.14)}
.logo{display:block;background:#F4EFE9;padding:6px 10px;border-radius:5px;flex:none}
.logo img{display:block;height:30px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.navlinks{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px);font-size:13.5px}
.navlinks a{position:relative;display:block;padding:6px 0}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.navlinks a:hover::after,.navlinks a:focus-visible::after,.navlinks a[aria-current]::after{transform:scaleX(1)}
.btn-dark{display:inline-flex;align-items:center;gap:10px;background:var(--text);color:var(--base);padding:13px 18px;font-size:13.5px;font-weight:500;line-height:1.2;border-radius:3px;border:1px solid var(--text);white-space:nowrap;transition:background .25s ease}
.btn-dark span{transition:transform .25s ease;display:inline-block}
.btn-dark:hover span,.btn-dark:focus-visible span{transform:translate(2px,-2px)}
.btn-dark:hover{background:#3a2f29}
.menu-btn{display:none;font:inherit;color:inherit;background:none;border:0;cursor:pointer;font-size:13.5px;padding:10px 4px;position:relative}
.menu-btn::after{content:"";position:absolute;left:4px;right:4px;bottom:6px;height:1px;background:var(--gold)}
@media(max-width:719px){
  .logo{padding:5px 8px}.logo img{height:25px}
  .site-header .btn-dark{padding:11px 13px;font-size:13px;order:1}
  .menu-btn{display:block;order:2}
  .navlinks{display:none;position:absolute;top:calc(100% + 6px);right:var(--pad);min-width:190px;flex-direction:column;align-items:stretch;gap:0;background:var(--card);border:1px solid rgba(36,28,24,.14);border-radius:8px;padding:8px 18px;font-size:15px;box-shadow:0 14px 30px -18px rgba(36,28,24,.45)}
  .navlinks.open{display:flex}
  .navlinks li+li{border-top:1px solid rgba(36,28,24,.14)}
  .navlinks a{padding:13px 0}
  .navlinks a::after{bottom:8px}
}
@media(max-height:480px){
  .site-header{padding-top:7px;padding-bottom:7px}
  .logo{padding:4px 8px}.logo img{height:24px}
  .site-header .btn-dark{padding:9px 13px}
}

/* ---------- pinned journey ---------- */
.journey{position:relative;height:2300vh;height:2300svh}
.nogl .journey{height:1420vh;height:1420svh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(120% 90% at 50% 60%,#F8F4EC 0%,var(--base) 55%,#EAE3D8 100%)}
.layer{position:absolute;inset:0}
.hud{position:absolute;left:var(--pad);bottom:20px;z-index:6;font-size:10px;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:12px;transition:opacity .4s;pointer-events:none}
.hud i{display:block;width:34px;height:1px;background:var(--gold)}
.rail{position:absolute;right:clamp(8px,1.6vw,22px);top:50%;height:110px;width:1px;background:rgba(36,28,24,.15);z-index:6;transform:translateY(-50%)}
.rail b{position:absolute;inset:0;background:var(--gold);transform-origin:top;transform:scaleY(0)}

@media(max-height:480px){.hud{display:none}}

/* ---------- Part 1: the storybook ---------- */
.book-layer{perspective:2600px}
.cam{position:absolute;left:50%;top:var(--cy,52%);width:0;height:0;transform-style:preserve-3d}
.book{--ov:.45em;--ox:1.25em;--fr:.8em;--fl:0em;--gut:.6;--bt:16px;position:absolute;left:calc(var(--pw)*-1);top:calc(var(--ph)/-2);width:calc(var(--pw)*2);height:var(--ph);transform-style:preserve-3d;font-size:var(--fs,16px)}
/* desk shadows: one wide and soft, one tight where the book touches */
.bsh,.bct{position:absolute;pointer-events:none}
.bsh{top:2%;height:98%;width:calc(50% + var(--ox));background:rgba(36,28,24,.26);filter:blur(calc(var(--ph)/13));transform:translate3d(0,7%,-60px)}
.bct{top:calc(var(--ov)*-1);height:calc(100% + var(--ov)*2);width:calc(50% + var(--ox));background:rgba(36,28,24,.42);filter:blur(calc(var(--ph)/85));transform:translate3d(0,1.1%,-58px);border-radius:.4em}
.bsh.r,.bct.r{left:50%}.bsh.l,.bct.l{right:50%}
/* back board, a little larger than the pages */
.board{position:absolute;left:50%;top:calc(var(--ov)*-1);width:calc(var(--pw) + var(--ox));height:calc(100% + var(--ov)*2);transform-style:preserve-3d;transform:translateZ(calc(-18px - var(--bt)))}
.board .top,.face.cover,.face.inside{background-color:var(--taupe);background-image:repeating-linear-gradient(0deg,rgba(36,28,24,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px)}
.board .top{position:absolute;inset:0;border-radius:0 .45em .45em 0}
.edge{position:absolute;background:#9a8c7e;backface-visibility:hidden}
.edge.eb{left:0;top:100%;width:100%;height:4px;transform-origin:top center;transform:rotateX(-90deg)}
.edge.ef{left:100%;top:0;height:100%;width:4px;transform-origin:left center;transform:rotateY(90deg)}
.spine{position:absolute;right:50%;top:calc(var(--ov)*-1);height:calc(100% + var(--ov)*2);width:calc(22px + var(--bt));background:#a39587;transform-origin:right center;transform:translateZ(3px) rotateY(-90deg)}
/* page block: gilded edges that show as a fan beside the pages and as a strip below them */
.blk{position:absolute;top:0;height:100%;transform-style:preserve-3d}
.blk.r{left:50%;width:calc(var(--pw) + var(--fr));transform:translateZ(-16.5px)}
.blk.l{right:50%;width:calc(var(--pw) + var(--fl));transform:translateZ(-13px);visibility:hidden}
.blk .top{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#efe3c8 0 1px,#c9b17c 1px 2px,#f6eedb 2px 3.5px);border-radius:0 .2em .2em 0;box-shadow:inset 0 0 0 1px rgba(180,154,99,.35)}
.blk.l .top{border-radius:.2em 0 0 .2em;inset:0 auto 0 0;width:var(--fl)}
.blk .gb{position:absolute;left:0;top:100%;width:100%;height:calc(15px + var(--bt));transform-origin:top center;transform:translateZ(15.5px) rotateX(-90deg);background:repeating-linear-gradient(0deg,#efe3c8 0 1px,#c4ab74 1px 2px,#f3e9d2 2px 3px)}
.blk.l .gb{height:calc(3px + var(--bt)*.6);transform:translateZ(2px) rotateX(-90deg)}
.blk .gf{position:absolute;left:100%;top:0;height:100%;width:calc(15px + var(--bt));transform-origin:left center;transform:translateZ(15.5px) rotateY(90deg);background:repeating-linear-gradient(90deg,#efe3c8 0 1px,#c4ab74 1px 2px,#f3e9d2 2px 3px)}
.ribbon{position:absolute;left:calc(50% + 2.4em);top:calc(100% - .3em);width:.78em;height:3.6em;background:linear-gradient(90deg,#50615b,var(--sage-deep) 40%,#6c7e78);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);transform:translateZ(-16px) rotate(3deg);transform-origin:top center}
.leaf{position:absolute;left:50%;top:0;width:var(--pw);height:100%;transform-origin:left center;transform-style:preserve-3d}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--page);overflow:hidden;padding:2.5em 2.3em 2.6em;border-radius:0 .35em .35em 0;display:flex;flex-direction:column}
.face.b{transform:rotateY(180deg);border-radius:.35em 0 0 .35em}
/* soft paper grain */
.face::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.075;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .11 0 0 0 0 .09 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
/* gutter shadow, deeper while a page is turning */
.face::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--gut);background:linear-gradient(90deg,rgba(36,28,24,.25),rgba(36,28,24,.08) 6%,rgba(36,28,24,.02) 16%,transparent 26%)}
.face.b::after{background:linear-gradient(270deg,rgba(36,28,24,.25),rgba(36,28,24,.08) 6%,rgba(36,28,24,.02) 16%,transparent 26%)}
.face .dim{position:absolute;inset:0;opacity:0;pointer-events:none;z-index:3}
.face.sage{background:var(--sage)}
.face.tp{background:var(--card)}
/* the cover board: larger than the pages, with its own thickness */
.leaf.cv .face{inset:calc(var(--ov)*-1) calc(var(--ox)*-1) calc(var(--ov)*-1) 0}
.leaf.cv .cover{transform:translateZ(4px);border-radius:0 .5em .5em 0}
.leaf.cv .edge.eb{left:0;top:calc(100% + var(--ov));width:calc(100% + var(--ox));transform:translateZ(4px) rotateX(-90deg)}
.leaf.cv .edge.ef{left:calc(100% + var(--ox));top:calc(var(--ov)*-1);height:calc(100% + var(--ov)*2);transform:translateZ(4px) rotateY(90deg)}
.face.inside{padding:0;border-radius:.5em 0 0 .5em}
.inside::before,.inside::after{display:none}
.inside .paper{position:absolute;inset:var(--ov) 0 var(--ov) var(--ox);background:var(--sage);padding:2.5em 2.3em 2.6em;display:flex;flex-direction:column;border-radius:.3em 0 0 .3em;overflow:hidden}
.inside .paper::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;background-image:inherit}
.inside .paper::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--gut);background:linear-gradient(270deg,rgba(36,28,24,.25),rgba(36,28,24,.08) 6%,rgba(36,28,24,.02) 16%,transparent 26%)}
.face.cover{align-items:flex-start;justify-content:space-between;padding:3.2em 3em 3em 3.1em}
.cover::after{opacity:1;background:linear-gradient(90deg,rgba(36,28,24,.3),rgba(36,28,24,.05) 2.2em,rgba(255,255,255,.14) 2.7em,transparent 3.6em),linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) calc(var(--sheen,40%) - 8%),rgba(255,255,255,.3) var(--sheen,40%),rgba(255,255,255,.12) calc(var(--sheen,40%) + 10%),transparent calc(var(--sheen,40%) + 34%))}
.cover .frame{position:absolute;inset:1.5em 1.5em 1.5em 2.9em;border:1px solid var(--gold);opacity:.75;pointer-events:none;box-shadow:0 1px 0 rgba(255,255,255,.25),inset 0 1px 0 rgba(36,28,24,.18)}
.cover .plate{background:#F4EFE9;padding:.5em .8em;border-radius:.25em;box-shadow:0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(36,28,24,.06);position:relative}
.cover img{height:2.5em;width:auto}
.cover .ttl{position:relative}
.cover h1{font-size:5em;font-weight:700;letter-spacing:-.045em;color:#9f9183;text-shadow:0 -1px 1px rgba(36,28,24,.55),0 1.5px 0 rgba(255,255,255,.42)}
.cover .sub{font-size:.7em;letter-spacing:.18em;text-transform:uppercase;margin-top:1.1em;display:flex;align-items:center;gap:1em}
.cover .sub::before{content:"";width:2.6em;height:1px;background:linear-gradient(90deg,#8f7a48,#e2cf9c 45%,#a8905a)}
.cover .open{font-size:.7em;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:1em;position:relative}
.cover .open i{display:block;width:1px;height:2.6em;background:var(--text);transform-origin:top;animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.pn{position:absolute;bottom:1.2em;font-size:.58em;letter-spacing:.16em;text-transform:uppercase}
.face.f .pn{right:2.3em}.face.b .pn{left:2.3em}
.ey{font-size:.64em;letter-spacing:.15em;text-transform:uppercase;display:flex;align-items:center;gap:.9em;margin-bottom:1.5em}
.ey i{display:block;flex:none;width:2.4em;height:1px;background:var(--gold);transform-origin:left;transform:scaleX(0);transition:transform .9s .15s ease}
.on .ey i{transform:scaleX(1)}
.sage .ey i{background:var(--text)}
.pill{display:inline-block;border:1px solid currentColor;border-radius:99em;padding:.25em .9em;font-size:.94em;letter-spacing:.15em}
.big{font-size:2.85em;font-weight:700;margin-top:auto;margin-bottom:auto}
.big span{color:var(--sage-deep)}
.sage .big span{color:var(--page)}
.med{font-size:2.05em}
.body{font-size:.9em;line-height:1.7;max-width:26em}
.body+.body{margin-top:.9em}
.rv{opacity:0;transform:translateY(1em);transition:opacity .7s ease,transform .7s ease}
.on .rv{opacity:1;transform:none}
.on .rv.d1{transition-delay:.12s}.on .rv.d2{transition-delay:.26s}.on .rv.d3{transition-delay:.4s}.on .rv.d4{transition-delay:.54s}
.mt{margin-top:auto}.mb{margin-bottom:auto}
.kinds{margin-top:1.6em}
.kinds li{border-top:1px solid var(--gold);padding:.7em 0 .8em;display:flex;gap:1em;align-items:baseline;font:500 1.02em/1.25 'DM Sans',sans-serif;letter-spacing:-.01em}
.kinds small{font:400 .62em 'Manrope',sans-serif;letter-spacing:.14em;flex:none}
.sign-off{font:500 1.2em/1.2 'DM Sans',sans-serif;letter-spacing:-.02em;color:var(--sage-deep)}
.steps{display:flex;gap:1.2em;font-size:.66em;letter-spacing:.14em;text-transform:uppercase}
.steps span{padding-top:.7em;border-top:1px solid var(--text);flex:1}

.runs li{border-top:1px solid var(--gold);padding:.65em 0 .75em;font-size:.84em;line-height:1.5;display:grid;grid-template-columns:7.2em 1fr;gap:.8em}
.runs b{font:500 .78em 'Manrope',sans-serif;letter-spacing:.14em;text-transform:uppercase;padding-top:.25em}
.seven{margin-top:1em}
.seven li{border-top:1px solid rgba(36,28,24,.14);padding:.46em 0 .5em;font:500 .9em/1.25 'DM Sans',sans-serif;letter-spacing:-.01em;display:grid;grid-template-columns:6.6em 1fr;gap:.6em;align-items:baseline}
.seven small{font:400 .66em 'Manrope',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-deep)}
.seven.plain li{grid-template-columns:1.6em 1fr;font-size:1.22em;padding:.55em 0 .6em;border-top-color:var(--gold)}
.seven.plain small{font-size:.5em}
.book[data-mode="wide"] .seven{margin-top:.5em}
.book[data-mode="wide"] .seven li{padding:.26em 0 .28em;font-size:.82em}
.book[data-mode="wide"] .seven.plain li{font-size:1em;padding:.3em 0 .32em}
.book[data-mode="wide"] .runs li{padding:.4em 0 .45em}
/* right-hand pages: a visual and a short list */
.vis{flex:1 1 0;min-height:0;position:relative;container-type:size}
.made{margin-top:1.1em;border-top:1px solid var(--gold);padding-top:.8em}
.made h3{font:500 .6em 'Manrope',sans-serif;letter-spacing:.15em;text-transform:uppercase;margin-bottom:.7em}
.made ul{columns:2;column-gap:1.6em;font-size:.76em;line-height:1.4}
.made li{break-inside:avoid;padding:0 0 .5em .95em;position:relative}
.made li::before{content:"";position:absolute;left:0;top:.55em;width:.34em;height:.34em;border-radius:50%;background:var(--sage)}

/* sample 1: one-page overview mock */
.sheet{position:absolute;top:4%;left:50%;height:92%;aspect-ratio:.78;background:#fff;border:1px solid rgba(36,28,24,.12);box-shadow:0 .6em 1.6em rgba(36,28,24,.12);transform:translateX(-50%) translateY(8%) rotate(0deg);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s;font-size:.62em;font-size:4.1cqh;padding:1.6em 1.5em;display:flex;flex-direction:column;gap:.9em}
.sheet.s2{background:var(--card);padding:0}
.on .sheet{opacity:1}
.on .sheet.s1{transform:translateX(-54%) rotate(-2deg);transition-delay:.15s}
.on .sheet.s2{transform:translateX(-42%) translateY(1.5%) rotate(4deg)}
.sh-tag{font-size:.74em;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-deep);display:flex;align-items:center;gap:.7em}
.sh-tag::before{content:"";width:1.6em;height:1px;background:var(--gold)}
.sheet i{display:block;height:.42em;border-radius:.2em;background:rgba(36,28,24,.13);transform:scaleX(0);transform-origin:left;transition:transform .8s ease .5s}
.on .sheet i{transform:scaleX(1)}
.sheet .h{height:1em;background:var(--text);opacity:.85;border-radius:.15em;width:82%}
.sheet .h.h2{width:56%;margin-top:-.35em}
.sheet .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em;margin-top:.5em}
.sheet .cols div{background:var(--card);padding:.8em .65em 1em;display:flex;flex-direction:column;gap:.45em;opacity:0;transform:translateY(.8em);transition:opacity .5s,transform .5s}
.sheet .cols div:nth-child(1){background:rgba(140,159,156,.42)}
.on .sheet .cols div{opacity:1;transform:none}
.on .sheet .cols div:nth-child(1){transition-delay:.7s}.on .sheet .cols div:nth-child(2){transition-delay:.82s}.on .sheet .cols div:nth-child(3){transition-delay:.94s}
.sheet b{font:500 .78em/1.2 'DM Sans',sans-serif;letter-spacing:-.01em;min-height:2.4em}
.sheet .cols i:last-child{width:62%}
.sheet .line{margin-top:auto;border-left:2px solid var(--gold);padding:.2em 0 .3em .8em;display:flex;flex-direction:column;gap:.5em}
.sheet .line b{min-height:0;color:var(--sage-deep)}
.sheet .line i:last-child{width:70%}

/* sample 2: the page that scrolls inside itself */
.qwin{flex:1 1 0;min-height:0;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 84%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 84%,transparent)}
.qlist{will-change:transform;padding:2.2em 0 5em;position:relative}
.qlist::before{content:"";position:absolute;left:.32em;top:0;bottom:0;width:1px;background:rgba(36,28,24,.18)}
.qi{position:relative;padding:.75em 0 .85em 1.9em;opacity:.32;transition:opacity .4s}
.qi::before{content:"";position:absolute;left:0;top:1em;width:.7em;height:.7em;border-radius:50%;background:var(--page);border:1px solid var(--sage-deep);transition:background .4s}
.qi.act{opacity:1}
.qi.act::before{background:var(--sage)}
.qi small{font-size:.6em;letter-spacing:.15em;text-transform:uppercase;color:var(--sage-deep);display:block;margin-bottom:.3em}
.qi span{font:500 1.02em/1.28 'DM Sans',sans-serif;letter-spacing:-.015em;display:block}
.note{font-size:.66em;line-height:1.5;margin-top:.7em;color:#5d524b}

/* line drawings (sample 3 and the floor plan) */
.vis svg,.planbox svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.planbox svg{overflow:hidden}
.draw .ln{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s ease var(--d,0s)}
.on .draw .ln,.draw.on .ln{stroke-dashoffset:0}
.draw .fl{opacity:0;transition:opacity .7s ease var(--d,0s)}
.on .draw .fl,.draw.on .fl{opacity:1}
.draw text{font-family:'DM Sans',sans-serif;font-weight:500;letter-spacing:.02em;fill:var(--text)}
.planbox{flex:1 1 0;min-height:0;position:relative}
.plan-cap{display:flex;justify-content:space-between;gap:1em;align-items:baseline;border-top:1px solid var(--gold);padding-top:.8em;margin-top:.8em;font-size:.72em}
.plan-cap b{font:500 1.15em 'DM Sans',sans-serif;letter-spacing:-.01em}
.plan-cap span{letter-spacing:.14em;text-transform:uppercase;font-size:.84em}

/* short landscape screens: wider pages */
.book[data-mode="wide"] .face:not(.cover):not(.inside),.book[data-mode="wide"] .inside .paper{padding:1.7em 2em 2em}
.book[data-mode="wide"] .cover{padding:2.4em 2.6em 2.3em 3em}
.book[data-mode="wide"] .cover h1{font-size:4em}
.book[data-mode="wide"] .ey{margin-bottom:1em}
.book[data-mode="wide"] .big{font-size:2.5em}
.book[data-mode="wide"] .med{font-size:1.8em}
.book[data-mode="wide"] .body{max-width:none;line-height:1.6}
.book[data-mode="wide"] .kinds{margin-top:.9em}
.book[data-mode="wide"] .kinds li{padding:.45em 0 .5em}
.book[data-mode="wide"] .made{margin-top:.7em;padding-top:.6em}
.book[data-mode="wide"] .made ul{columns:2}
.book[data-mode="wide"] .pn{bottom:.7em}

/* ---------- Part 2: the booth build ---------- */
.build-layer{opacity:0;visibility:hidden}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.panel{position:absolute;left:var(--pad);top:50%;transform:translateY(-46%);width:min(31vw,350px);z-index:4}
.tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;display:flex;gap:12px;align-items:center;margin-bottom:14px}
.tag i{width:34px;height:1px;background:var(--gold);display:block;flex:none}
.panel h2{font-size:clamp(26px,min(3.1vw,6.4vh),42px);margin-bottom:clamp(14px,3vh,26px)}
.steps3{display:flex;gap:14px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:clamp(14px,3vh,26px)}
.steps3 li{flex:1;padding-top:8px;border-top:1px solid rgba(36,28,24,.2);opacity:.4;transition:opacity .4s,border-color .4s}
.steps3 li.on{opacity:1;border-color:var(--gold)}
.callouts{display:grid}
.callouts li{grid-area:1/1;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease;visibility:hidden}
.callouts li.act{opacity:1;transform:none;visibility:visible}
.callouts small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:6px}
.callouts h3{font-size:clamp(19px,min(1.9vw,4.6vh),25px);margin-bottom:8px;letter-spacing:-.02em}
.callouts p{font-size:clamp(12.5px,min(1.1vw,3.5vh),14.5px);line-height:1.65;max-width:34ch}
@media(max-height:480px){
  .panel{width:min(34vw,300px);transform:translateY(-42%)}
  .tag{margin-bottom:6px;font-size:9px}
  .panel h2{font-size:20px;margin-bottom:8px}
  .steps3{margin-bottom:10px;font-size:8.5px;gap:8px}
  .callouts p{line-height:1.5}
}
/* phones in portrait: the callouts become a bottom sheet */
@media(max-width:820px) and (max-aspect-ratio:1/1){
  .panel{left:10px;right:10px;top:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));width:auto;transform:none;background:rgba(250,246,239,.93);border:1px solid rgba(36,28,24,.1);border-radius:14px;padding:14px 16px 16px;box-shadow:0 10px 30px rgba(36,28,24,.1)}
  .panel .tag{display:none}
  .panel h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .steps3{margin-bottom:12px;font-size:9.5px}
  .callouts small{margin-bottom:4px}
  .steps3{display:none}
  .callouts h3{font-size:19px;margin-bottom:5px}
  .callouts p{font-size:13.5px;line-height:1.55;max-width:none}
  .hud.in-build{opacity:0!important}
}

/* no WebGL: the same words, laid out as a plain section */
.build-static{position:relative;inset:auto;opacity:1!important;visibility:visible!important;background:var(--page);padding:clamp(56px,8vw,110px) var(--pad);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.build-static #gl{display:none}
.build-static .panel{position:static;transform:none;width:auto;background:none;border:0;box-shadow:none;padding:0}
.build-static .panel .tag{display:flex}
.build-static .panel h2{position:static;width:auto;height:auto;clip-path:none;font-size:clamp(28px,4vw,46px);margin-bottom:26px}
.build-static .steps3{display:none}
.build-static .callouts{display:block}
.build-static .callouts li{opacity:1;visibility:visible;transform:none;border-top:1px solid var(--gold);padding:16px 0 18px}
.build-static .callouts small{display:block}
.build-static .callouts p{max-width:52ch;font-size:14.5px}
.fallback-plan{display:none}
.build-static .fallback-plan{display:block;position:sticky;top:90px;background:var(--card);border:1px solid rgba(36,28,24,.1);padding:clamp(14px,3vw,34px)}
.build-static .fallback-plan .planbox{aspect-ratio:460/360}
@media(max-width:820px){.build-static{grid-template-columns:1fr}.build-static .fallback-plan{position:static}}

/* ---------- closing ---------- */
.closing{position:relative;z-index:2;background:var(--sage);padding:clamp(72px,11vw,150px) var(--pad)}
.closing .in{max-width:1126px;margin:0 auto}
.closing h2{font-size:clamp(34px,5.4vw,68px);margin:0 0 clamp(26px,4vw,44px);max-width:14ch}
.closing .tag i{background:var(--text)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px}
.closing .btn-dark{padding:17px 22px;font-size:14px}
.back{position:relative;font-size:14px;padding:4px 0}
.back::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--text);transform:scaleX(.0);transform-origin:left;transition:transform .25s}
.back:hover::after,.back:focus-visible::after{transform:scaleX(1)}
.foot{background:var(--base);padding:22px var(--pad);font-size:12px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  .cover .open i{animation:none}
  .rv,.ey i,.sheet,.sheet i,.sheet .cols div,.draw .ln,.draw .fl,.callouts li{transition-duration:.01s!important;transition-delay:0s!important}
}

.built{opacity:.6;transition:opacity .2s}.built:hover,.built:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:3px}