@font-face{font-family:Onest;src:url(/fonts/onest-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root,html[data-theme=dark]{--bg:#1a1818;--fg:#e8e4e0;--muted:#a09792;--line:rgba(255,255,255,.13);--card:#232020;--accent:#c6ff3d;--accent-text:#c6ff3d;--hover:rgba(255,255,255,.07);--field:#1a1818;--shot1:#2a2727;--shot2:#1f1c1c;--r:22px;--pad:clamp(20px,4vw,56px)}
html[data-theme=light]{--bg:#f3f0e8;--fg:#141414;--muted:#69655d;--line:rgba(0,0,0,.14);--card:#ffffff;--accent:#c6ff3d;--accent-text:#4a7600;--hover:rgba(0,0,0,.06);--field:#f3f0e8;--shot1:#e9e5da;--shot2:#dcd7ca}
*{box-sizing:border-box;margin:0}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
html[data-theme=light]{color-scheme:light}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
[data-lenis-prevent]{overscroll-behavior:contain}
body{background:var(--bg);color:var(--fg);font:400 1rem/1.6 Onest,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,iframe{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#000;padding:8px 14px;border-radius:8px;z-index:300}
.skip:focus{left:8px}

/* loader (only when JS is running) */
.loader{display:none}
.js:not(.embed) .loader{--bg:#181515;--fg:#e8e4e0;--muted:#a09792;position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:clamp(18px,3vw,40px);background:radial-gradient(17% 34% at 3% 76%,#2d1b13 0%,#221710 45%,rgba(24,21,21,0) 100%),linear-gradient(100deg,#181515 45%,#1b1919 100%);color:var(--fg);transition:opacity .6s .5s,visibility 0s 1.1s}
.loader.done{opacity:0;visibility:hidden}
.loader-top,.loader-bottom{width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;font-size:.78rem;color:var(--muted)}
.loader-top b{color:var(--fg)}
.pills{display:flex;flex-direction:column;align-items:center;width:100%}
.pill{position:relative;width:min(86vw,420px);height:112px;padding:20px 0 0 56px;border-radius:999px;background:var(--c);color:rgba(255,255,255,.72);font-weight:600;font-size:.95rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 30px rgba(0,0,0,.35);opacity:0;transform:translateY(70px);animation:pill-in .75s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*.12s)}
.pill+.pill{margin-top:-44px}
.pill::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.25));pointer-events:none}
.loader.done .pill{animation:pill-out .55s cubic-bezier(.6,0,.8,.4) forwards;animation-delay:calc(var(--i)*.07s)}
@keyframes pill-in{to{opacity:1;transform:none}}
@keyframes pill-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-110px)}}
.loader small{display:block;margin-bottom:8px;font:600 .7rem ui-monospace,Menlo,Consolas,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.loader-num{font-size:clamp(4rem,12vw,8.5rem);font-weight:700;line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--fg)}
.loader-line{width:min(220px,40vw);height:2px;margin-bottom:14px;border-radius:2px;background:linear-gradient(90deg,#5e5252,#d5b26f);clip-path:inset(0 var(--rest,100%) 0 0)}
@media(max-width:560px){.loader-top span:last-child{display:none}.pill{height:100px;padding-left:44px}}

/* header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px max(var(--pad),calc((100vw - 1240px)/2));background:linear-gradient(var(--bg),transparent)}
.logo{font-weight:700;text-decoration:none;letter-spacing:-.01em}
.nav-links{display:flex;gap:6px;list-style:none;padding:0;overflow-x:auto;scrollbar-width:none}
.nav-links a{display:block;padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--muted);font-size:.92rem;white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--fg);font:600 .95rem Onest,sans-serif;text-decoration:none;cursor:pointer;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px);background:var(--hover)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#0b0b0b}
.btn-primary:hover{background:#d6ff6a}

/* hero */
.eyebrow{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:.8rem}
h1{font-size:clamp(2.4rem,7vw,5.6rem);line-height:1.02;letter-spacing:-.035em;font-weight:700;max-width:16ch}
h1 em{font-style:normal;color:var(--accent-text)}

/* header: nav + time pill */
.nav-links a{color:var(--fg);opacity:.8}
.nav-links a:hover,.nav-links a[aria-current=page]{opacity:1;background:var(--hover)}
.time-pill{display:flex;align-items:center;gap:10px;margin:0;padding:10px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--muted);font-size:.85rem;white-space:nowrap}
.time-pill b{color:var(--fg);font-weight:600}.time-pill .sep{opacity:.5}
@media(max-width:1000px){.time-pill{display:none}}
@media(max-width:820px){.site-header{padding:14px var(--pad)}.cord{right:-112px}.nav-links{padding-right:44px}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* home hero */
.hero{width:min(1240px,calc(100% - var(--pad)*2));margin:0 auto;min-height:100svh;padding-top:96px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:1fr auto;column-gap:24px}
.hero-copy{align-self:center;padding-bottom:48px}
.hero-copy .eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:26px;text-transform:none;letter-spacing:0;font-size:.85rem}
.hero-copy .eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--muted)}
.hero h1{max-width:none;font-size:clamp(2.6rem,5.6vw,5rem);line-height:1.02;letter-spacing:-.04em}
.hero h1 span{display:block;color:var(--muted)}
.flip{position:relative;isolation:isolate;width:min(100%,600px);height:clamp(92px,11vw,140px);margin-top:26px;transform:rotate(-1.4deg);perspective:1000px}
.flip::before{content:"";position:absolute;inset:10px -10px -12px 10px;z-index:-1;border-radius:16px;background:#000}
.flip-sheet{position:absolute;inset:0;display:flex;align-items:center;padding:0 clamp(18px,2.4vw,34px);border-radius:14px;background:linear-gradient(180deg,#fbf9f5 0,#f6f3ee 18%,#f1ede6 100%);color:#141414;box-shadow:inset 0 10px 12px -10px rgba(0,0,0,.22),inset 0 -2px 0 rgba(0,0,0,.05),0 3px 0 -1px #ebe7e0,0 4px 0 -1px #cfcac1,0 7px 0 -2px #e4dfd7,0 8px 0 -2px #c4beb4,0 11px 0 -3px #ddd8cf,0 12px 0 -3px #b9b3a8,0 22px 28px -10px rgba(0,0,0,.65);backface-visibility:hidden}
.flip-sheet .role{font-size:clamp(1.6rem,3.6vw,3.2rem);font-weight:700;letter-spacing:-.035em;white-space:nowrap}
.flip-top{z-index:2;transform-origin:50% 0}
.flip.turn .flip-top{animation:page-turn .65s cubic-bezier(.55,0,.75,.25) forwards}
@keyframes page-turn{from{transform:rotateX(0)}to{transform:rotateX(-100deg);opacity:.2}}
.flip-rings,.flip-holes{position:absolute;left:26px;right:26px;display:flex;justify-content:space-between;pointer-events:none}.flip-rings{z-index:4;top:-14px}.flip-holes{z-index:3;top:5px}
.flip-rings i{position:relative;width:8px;height:30px;border-radius:4px 4px 5px 5px;background:linear-gradient(90deg,#5a5a5a 0,#f7f7f7 32%,#bdbdbd 58%,#4f4f4f 100%);box-shadow:0 4px 5px -1px rgba(0,0,0,.55),inset 0 -5px 4px -2px rgba(0,0,0,.35)}.flip-rings i::before{content:"";position:absolute;left:1px;right:1px;top:0;height:8px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0))}.flip-holes i{width:14px;height:8px;border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#0b0a0a 0,#1b1918 60%,#3a3633 100%);box-shadow:inset 0 2px 3px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.7);margin:0 -3px}
.flip-count{position:absolute;z-index:4;right:16px;bottom:10px;font:500 .68rem ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;color:#a09b94}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.btn-solid{padding:8px 8px 8px 22px;background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn-solid:hover{background:var(--fg);opacity:.9}
.btn-solid .arrow{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--bg);color:var(--fg)}
.portrait{grid-column:2;grid-row:1;align-self:end;justify-self:end;position:relative;width:min(100%,560px);line-height:0}
.portrait img{width:100%;height:auto;max-height:calc(100svh - 150px);object-fit:contain;object-position:bottom;filter:grayscale(1) contrast(1.05)}
.ability{position:absolute;left:2%;bottom:14%;padding:11px 16px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(20,18,18,.85);color:#e8e4e0;font:600 .8rem Onest,sans-serif;line-height:1;cursor:pointer;backdrop-filter:blur(6px);transition:transform .2s}
.ability:hover{transform:translateY(-2px)}
.hero-foot{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;padding:18px 0 22px;border-top:1px solid var(--line);color:var(--muted);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.hero-foot a{text-decoration:none}.hero-foot a:hover{color:var(--fg)}
@media(max-width:900px){.hero{grid-template-columns:1fr;grid-template-rows:auto auto auto}.hero-copy{padding-bottom:24px}.portrait{grid-column:1;grid-row:2;justify-self:center;width:min(100%,380px)}.hero-foot{grid-row:3}}
/* sections */
section{padding:clamp(56px,9vw,120px) 0}
.wrap{padding:0 var(--pad);max-width:1200px;margin:auto}
h2{font-size:clamp(1.8rem,4.5vw,3.4rem);line-height:1.08;letter-spacing:-.025em;font-weight:700}
.lead{color:var(--muted);max-width:56ch;margin-top:14px}

/* doors */

/* timeline */
.timeline{list-style:none;padding:0;margin-top:40px;border-top:1px solid var(--line)}
.timeline li{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:12px 32px;padding:28px 0;border-bottom:1px solid var(--line)}
.timeline time{color:var(--muted);font-size:.9rem}
.timeline h3{font-size:1.25rem}
.timeline .org{color:var(--accent-text);font-size:.92rem}
.timeline p{color:var(--muted);margin-top:8px;max-width:60ch}
@media(max-width:640px){.timeline li{grid-template-columns:1fr}}

/* skill pages */
.page{max-width:1100px;margin:auto;padding:130px var(--pad) 40px}
.embed .page{padding-top:36px}
.back{display:inline-block;margin-bottom:28px;color:var(--muted);text-decoration:none;font-size:.9rem}
.back:hover{color:var(--fg)}
.projects{display:grid;gap:28px;margin-top:48px}
.project{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.project .shot{min-height:260px;border-radius:14px;background:linear-gradient(135deg,var(--shot1),var(--shot2));display:grid;place-items:center;color:var(--muted);font-size:.85rem}
.tag{color:var(--accent-text);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.project h2{font-size:1.7rem;margin:6px 0}
.project p{color:var(--muted);margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin-top:16px}
.chips li{padding:5px 12px;border:1px solid var(--line);border-radius:999px;font-size:.8rem;color:var(--muted)}
.project .btn{margin-top:18px}
@media(max-width:760px){.project{grid-template-columns:1fr}}

/* cta + footer */
.cta{text-align:center;display:grid;justify-items:center;gap:22px}
.cta .lead{margin:0}
.site-footer{border-top:1px solid var(--line);padding:56px var(--pad) 36px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px;max-width:1200px;margin:auto}
.footer-grid h4{color:var(--muted);font-weight:500;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.footer-grid ul{list-style:none;padding:0;display:grid;gap:8px}
.footer-grid a{text-decoration:none}
.footer-grid a:hover{color:var(--accent-text)}
.legal{max-width:1200px;margin:40px auto 0;color:var(--muted);font-size:.85rem;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
.embed .site-header,.embed .site-footer,.embed .cta,.embed .back{display:none}
.prose{max-width:70ch}.prose h2{font-size:1.5rem;margin:32px 0 8px}.prose p,.prose li{color:var(--muted);margin-top:8px}

/* contact dialog */
dialog{margin:auto;width:min(92vw,520px);padding:30px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--fg)}
dialog::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(4px)}
dialog h2{font-size:1.7rem}
.field{display:grid;gap:6px;margin-top:16px;font-size:.9rem;color:var(--muted)}
.field input,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--field);color:var(--fg);font:inherit}
.field textarea{min-height:110px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dialog-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.thanks{display:none}
dialog.sent form{display:none}
dialog.sent .thanks{display:block}
.thanks p{margin-top:12px;color:var(--muted)}

/* theme switch: hanging pull-cord + date pill */
body{transition:background-color .35s,color .35s}
.project,dialog{transition:background-color .35s,border-color .35s,color .35s}
.cord{position:absolute;top:0;right:calc(max(24px,(100vw - 1240px)/2 - 22px) - 130px);width:260px;pointer-events:none;z-index:60}
.cord-canvas{display:block;width:100%;height:100%}
.cord-grab{position:absolute;left:0;top:0;width:56px;height:64px;margin:-32px 0 0 -28px;padding:0;border:0;border-radius:18px;background:none;cursor:grab;pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent}
.cord-grab:active{cursor:grabbing}
.embed .cord,.embed .time-pill{display:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* colour spotlight that follows the cursor over the portrait */
.portrait img.reveal{position:absolute;left:0;bottom:0;filter:none;pointer-events:none;--mx:50%;--my:50%;--r:0px;opacity:0;transition:opacity .35s ease;-webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 0,#000 38%,transparent 100%);mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 0,#000 38%,transparent 100%)}
.portrait.is-live img.reveal{opacity:1}
.portrait .ability{z-index:2}
@media(hover:none){.portrait img.reveal{display:none}}

/* doors (arched, spring-hinged) */
:root,html[data-theme=dark]{--wall-hi:#2d2a29;--wall:#201d1c;--floor:#171514;--base:#2a2625;--casing:#3b3736;--room:#0e0c0c;--room-sh:rgba(0,0,0,.65);--lamp:rgba(255,226,180,.07);--lift:rgba(0,0,0,.55);--rim:rgba(255,214,160,.4);--glow:255,206,140;--e-soft:cubic-bezier(.16,1,.3,1)}
html[data-theme=light]{--wall-hi:#ece8df;--wall:#ded9cd;--floor:#cfc9bb;--base:#d3cdbf;--casing:#f2efec;--room:#fbfaf8;--room-sh:rgba(26,24,24,.1);--lamp:rgba(255,250,242,.9);--lift:rgba(26,24,24,.3);--rim:rgba(255,255,255,.95);--glow:255,196,128}
.doors{--h:min(6.4vw,9svh,5.2rem);padding-bottom:0;position:relative;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;padding-top:5.5rem;background:linear-gradient(180deg,var(--wall-hi) 0%,var(--wall) 60%);transition:background-color .35s}
.doors-h{text-align:center;font-size:var(--h);letter-spacing:-.045em;line-height:1;padding:0 var(--pad)}
.doors-wall{position:relative;flex:1;display:flex;align-items:flex-end;margin-top:3svh}
.doors-row{width:100%;--gap:clamp(20px,4vw,56px);position:relative;z-index:2;list-style:none;display:flex;justify-content:center;align-items:flex-end;gap:var(--gap);padding:0 var(--pad)}
.doors-row::after{content:"";position:absolute;left:-50vw;right:-50vw;bottom:0;height:1.5rem;z-index:-1;background:var(--base);box-shadow:0 -1px 0 rgba(255,255,255,.1),0 -.5rem .9rem -.45rem rgba(0,0,0,.35)}
.unit{position:relative;container-type:inline-size;width:100%;max-width:min(17.5rem,calc((91svh - 5.5rem - var(--h) - 8px) / 2.25));min-width:110px}
.unit::before{content:"";position:absolute;left:-35%;right:-35%;top:-18%;height:62%;pointer-events:none;z-index:-1;background:radial-gradient(50% 50% at 50% 30%,var(--lamp),transparent 100%);transition:opacity .5s}
.doorway{position:relative;display:block;width:100%;aspect-ratio:1/2.25;cursor:pointer;border-radius:50cqi 50cqi 0 0;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:opacity .5s var(--e-soft),filter .5s var(--e-soft)}
.doorway:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.casing{position:absolute;inset:0;border-radius:50cqi 50cqi 0 0;background:linear-gradient(90deg,rgba(0,0,0,.07),rgba(255,255,255,.12) 3cqi,transparent 6cqi,transparent calc(100% - 6cqi),rgba(0,0,0,.05) calc(100% - 3cqi),rgba(0,0,0,.12)),linear-gradient(180deg,rgba(255,255,255,.18),transparent 30%),var(--casing);box-shadow:inset 0 0 0 1.1cqi rgba(255,255,255,.1),0 1.5cqi 3cqi rgba(0,0,0,.12);transition:box-shadow .5s var(--e-soft)}
.casing::after{content:"";position:absolute;inset:4.6cqi 4.6cqi 0;border-radius:45.4cqi 45.4cqi 0 0;border:.45cqi solid rgba(0,0,0,.12);border-bottom:0}
.opening{position:absolute;inset:7.5cqi 7.5cqi 0;perspective:160cqi;perspective-origin:50% 42%}
.room{position:absolute;inset:0;overflow:hidden;border-radius:42.5cqi 42.5cqi 0 0;background:var(--room);box-shadow:inset 2cqi 0 4cqi var(--room-sh),inset 0 2cqi 4cqi var(--room-sh)}
.room::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s var(--e-soft);box-shadow:inset 0 0 5cqi var(--rim),inset 0 0 1.2cqi var(--rim)}
.door{--dc:var(--door);position:absolute;inset:0;transform-origin:0 50%;transform-style:preserve-3d;border-radius:42.5cqi 42.5cqi 0 0;background:linear-gradient(100deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 30%,rgba(0,0,0,.18) 100%),var(--dc);box-shadow:inset 0 0 0 .3cqi rgba(0,0,0,.28),inset .6cqi 0 0 rgba(255,255,255,.05);transition:box-shadow .5s var(--e-soft)}
.door::after{content:"";position:absolute;top:40cqi;bottom:0;right:0;width:3.4cqi;transform-origin:100% 50%;transform:rotateY(-90deg);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.25)),var(--dc);filter:brightness(.62);pointer-events:none}
.door__flute{position:absolute;inset:8cqi 8cqi 9cqi;border-radius:34.5cqi 34.5cqi 1.2cqi 1.2cqi;background:repeating-linear-gradient(90deg,rgba(255,255,255,.075) 0,rgba(255,255,255,.02) 1cqi,rgba(0,0,0,.13) 2.1cqi,rgba(255,255,255,.075) 2.8cqi);box-shadow:inset 0 0 0 .3cqi rgba(0,0,0,.16),inset 1cqi 1.2cqi 2cqi rgba(0,0,0,.28),inset -.6cqi -.6cqi 1cqi rgba(255,255,255,.07)}
.door__shade{position:absolute;inset:0;border-radius:inherit;background:#000;opacity:calc(var(--o,0)*.5);pointer-events:none}
.plate{position:absolute;left:50%;top:31%;translate:-50% -50%;width:58cqi;padding:2.6cqi 4cqi;border-radius:.9cqi;z-index:1;text-align:center;font-size:5.4cqi;font-weight:600;line-height:1.15;letter-spacing:.09em;text-transform:uppercase;text-wrap:balance;color:#2b2112;text-shadow:0 .28cqi 0 rgba(255,238,196,.55),0 -.15cqi 0 rgba(0,0,0,.25);background:linear-gradient(160deg,#efdfb2 0%,#c9a866 28%,#e3cc92 48%,#a98747 72%,#d2b67a 100%);box-shadow:0 .5cqi 1cqi rgba(0,0,0,.4),inset 0 .3cqi 0 rgba(255,250,228,.7),inset 0 -.3cqi 0 rgba(88,62,22,.45)}
.plate::before,.plate::after{content:"";position:absolute;top:50%;width:1.6cqi;height:1.6cqi;margin-top:-.8cqi;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3cf,#8f6f33 70%);box-shadow:0 .15cqi .2cqi rgba(0,0,0,.4)}
.plate::before{left:1.8cqi}.plate::after{right:1.8cqi}
.handle{position:absolute;right:7cqi;top:59%;width:9.4cqi;height:9.4cqi;border-radius:50%;z-index:1;background:radial-gradient(circle at 36% 30%,#fff6dc 0,#e6cb8a 14%,#b8934c 40%,#80602a 70%,#4d3816 100%);box-shadow:0 0 0 .35cqi rgba(0,0,0,.22),.9cqi 1.5cqi 2cqi rgba(0,0,0,.45),inset -.7cqi -.9cqi 1.1cqi rgba(40,26,6,.55),inset .5cqi .6cqi .8cqi rgba(255,246,220,.4)}
.handle::before{content:"";position:absolute;inset:2.3cqi;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff3d0,#c9a45c 45%,#6f5122 100%);box-shadow:.4cqi .7cqi .9cqi rgba(0,0,0,.45),inset 0 0 0 .2cqi rgba(255,240,200,.35)}
.handle__lever{position:absolute;right:3.6cqi;top:2.75cqi;width:23cqi;height:3.9cqi;border-radius:2.4cqi 1.6cqi 1.6cqi 2.4cqi;transform-origin:21.1cqi 1.95cqi;background:linear-gradient(180deg,#fff5d6 0%,#ecd395 16%,#c39d55 42%,#8e6a2d 72%,#5c4119 100%);box-shadow:.3cqi 2.4cqi 2.2cqi rgba(0,0,0,.38),0 .4cqi .4cqi rgba(0,0,0,.25),inset 0 -.3cqi .4cqi rgba(50,32,8,.45);transition:transform .18s cubic-bezier(.3,.7,.4,1);z-index:1}
.handle__lock{position:absolute;left:4.7cqi;top:15.9cqi;width:5.4cqi;height:10.5cqi;border-radius:2.7cqi;background:radial-gradient(at 38% 28%,#fff3d0 0,#d9b86f 22%,#a07b37 55%,#5e4419 100%);box-shadow:0 0 0 .3cqi rgba(0,0,0,.2),.6cqi 1cqi 1.4cqi rgba(0,0,0,.42),inset -.4cqi -.6cqi .8cqi rgba(40,26,6,.5),inset .3cqi .4cqi .5cqi rgba(255,248,222,.45)}
.handle__lock::before{content:"";position:absolute;left:50%;top:26%;width:1.8cqi;height:1.8cqi;margin-left:-.9cqi;border-radius:50%;background:#17110a}
.handle__lock::after{content:"";position:absolute;left:50%;top:44%;width:.9cqi;height:3.4cqi;margin-left:-.45cqi;border-radius:.4cqi;background:#17110a}
.sill{position:absolute;left:3cqi;right:3cqi;bottom:0;height:1cqi;z-index:2;pointer-events:none;border-radius:1cqi;background:rgba(var(--glow),.95);filter:blur(.7cqi);opacity:.4;transition:opacity .6s var(--e-soft)}
.unit.on .casing{box-shadow:0 0 0 1px rgba(0,0,0,.06),2cqi 5cqi 9cqi var(--lift),-1cqi 2cqi 5cqi rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.3)}
.unit.on .door{box-shadow:inset 0 0 0 .35cqi rgba(0,0,0,.2),inset -2.5cqi 0 3cqi rgba(0,0,0,.18),4cqi 0 7cqi rgba(0,0,0,.45)}
.unit.on .room::after{opacity:1}
.unit.on .sill{opacity:1}
.unit.press .handle__lever{transform:rotate(-32deg)}
.doors.focus .unit:not(.on) .doorway{opacity:.03;filter:saturate(.2)}
.doors.focus .unit:not(.on)::before{opacity:0}
.doors-floor{position:relative;flex:none;height:max(40px,6svh);background:var(--floor);box-shadow:inset 0 14px 18px -10px rgba(0,0,0,.45)}
/* shared description that appears in the space of the faded doors */
.dinfo{position:absolute;z-index:3;pointer-events:none;opacity:0;transform:translateY(.6rem);transition:opacity .35s ease,transform .5s var(--e-soft);max-width:30rem;--dinfo-accent:var(--acc-d)}
html[data-theme=light] .dinfo{--dinfo-accent:var(--acc-l)}
.dinfo.on{opacity:1;transform:none;transition:opacity .45s ease .08s,transform .6s var(--e-soft) .08s}
.dinfo__h{font-size:2rem;font-weight:600;line-height:1.05;letter-spacing:-.02em;color:var(--fg);margin:0 0 .45rem}
.dinfo__t{font:700 .8125rem ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--dinfo-accent);margin-bottom:1.15rem}
.dinfo__p{display:flex;flex-direction:column;gap:.5rem;list-style:none;margin:0;padding:0;font-size:1rem;font-weight:450;line-height:1.35;color:var(--fg)}
.dinfo__p li{display:flex;align-items:center;gap:.7rem}
.dinfo__p li::before{content:"\2713";flex:0 0 auto;display:grid;place-items:center;width:1.05rem;height:1.05rem;border-radius:50%;border:1.5px solid var(--dinfo-accent);color:var(--dinfo-accent);font-size:.6rem;font-weight:800}
.dinfo.on li{animation:liIn .5s var(--e-soft) backwards}
.dinfo.on li:nth-child(2){animation-delay:.05s}.dinfo.on li:nth-child(3){animation-delay:.1s}.dinfo.on li:nth-child(4){animation-delay:.15s}.dinfo.on li:nth-child(5){animation-delay:.2s}
@keyframes liIn{from{opacity:0;transform:translateY(.5rem)}}
.door-cursor{position:fixed;left:0;top:0;z-index:90;pointer-events:none;padding:.6rem 1rem;border-radius:9999px;background:var(--fg);color:var(--bg);font-size:.8125rem;font-weight:500;letter-spacing:.01em;white-space:nowrap;box-shadow:0 .5rem 1.5rem -.5rem rgba(0,0,0,.45);opacity:0;transition:opacity .18s}
.door-cursor.on{opacity:1}
@media(hover:none){.door-cursor,.dinfo{display:none}}
@media(max-width:760px){.doors{min-height:0;padding-bottom:0}.doors-h{font-size:clamp(2rem,9vw,3rem)}.doors-row{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;--gap:22px}.unit{flex:0 0 58vw;max-width:none;scroll-snap-align:center}.doors-row::after{display:none}.dinfo{display:none}}
@media(prefers-reduced-motion:reduce){.doorway,.casing,.door,.room::after,.handle__lever{transition:none}}