/* The Sliger Pro Collective — foyer stylesheet.
   Glossy black + metallic silver per the SPC Vision & Brand Handoff (2026-08-25).
   Division accents: bookkeeping keeps the Sliger petrol; notary blue/silver;
   ceremony warm gold. */
:root{
  --night:#07090b;
  --panel:#0d1013;
  --panel-2:#111418;
  --line:rgba(255,255,255,.09);
  --line-soft:rgba(255,255,255,.05);
  --text:#e9ebee;
  --muted:#9aa1a9;
  --silver:#c9ced4;
  --petrol:#43BFAE;
  --notary:#5b8ddb;
  --ceremony:#c9a24b;
  --gold-soft:rgba(201,162,75,.55);
  --maxw:1120px;
  --r:10px;
  --f-display:"Bricolage Grotesque",system-ui,sans-serif;
  --f-body:"Instrument Sans",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--text);font-family:var(--f-body);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--silver)}
.w{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.chrome{background:linear-gradient(178deg,#ffffff 8%,#c7ccd2 34%,#7c828a 49%,#e6e9ed 56%,#a7adb5 78%,#d6dade 96%);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
h1,h2,h3{font-family:var(--f-display);line-height:1.12;margin:0 0 16px;font-weight:700}
h1{font-size:clamp(1.9rem,4.4vw,3.1rem)}
h2{font-size:clamp(1.5rem,3vw,2.15rem)}
.lede{color:var(--muted);font-size:1.08rem;max-width:60ch}
.btn{display:inline-block;background:linear-gradient(180deg,#f2f4f6,#c2c8cf 55%,#9aa1a9);color:#0b0d0f;font-weight:700;font-family:var(--f-display);padding:14px 26px;border-radius:8px;text-decoration:none;border:1px solid rgba(255,255,255,.35);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 8px 22px rgba(0,0,0,.5)}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;color:var(--silver);border:1px solid var(--line);box-shadow:none}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;color:#000;padding:8px 12px;z-index:99;border-radius:6px}

/* intro — elevator doors */
.intro{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:transparent;pointer-events:none}
.intro .door{position:absolute;top:0;bottom:0;width:51%;background:linear-gradient(100deg,#151009 0%,#241a10 28%,#382a19 50%,#1d150c 74%,#120d07 100%);border-right:1px solid rgba(201,162,75,.35);box-shadow:inset 0 0 120px rgba(0,0,0,.7)}
.intro .door.l{left:0}
.intro .door.r{right:0;border-right:0;border-left:1px solid rgba(201,162,75,.35)}
.intro .seam{position:absolute;top:0;bottom:0;left:50%;width:2px;background:linear-gradient(180deg,rgba(201,162,75,.5),rgba(201,162,75,.08));transform:translateX(-50%)}
.intro .mark{position:relative;z-index:2;width:min(420px,70vw);filter:drop-shadow(0 12px 40px rgba(0,0,0,.8));opacity:0}
.intro.play{pointer-events:auto}
.intro.play .mark{animation:markIn 1.1s .2s ease forwards}
.intro.play .door.l{animation:doorL 1s 1.7s cubic-bezier(.7,0,.3,1) forwards}
.intro.play .door.r{animation:doorR 1s 1.7s cubic-bezier(.7,0,.3,1) forwards}
.intro.play .seam{animation:seamOut .4s 1.7s ease forwards}
.intro.play .mark{animation:markIn 1.1s .2s ease forwards,markOut .7s 1.75s ease forwards}
.intro.play{animation:introGone .01s 2.8s forwards}
@keyframes markIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes markOut{to{opacity:0;transform:scale(1.05)}}
@keyframes doorL{to{transform:translateX(-102%)}}
@keyframes doorR{to{transform:translateX(102%)}}
@keyframes seamOut{to{opacity:0}}
@keyframes introGone{to{visibility:hidden;pointer-events:none}}
.intro-skip{position:absolute;right:22px;bottom:22px;z-index:3;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:8px 14px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.intro[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* header */
header.site{position:sticky;top:0;z-index:40;background:rgba(7,9,11,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.bar{display:flex;align-items:center;gap:22px;max-width:var(--maxw);margin:0 auto;padding:12px 24px}
.brand img{display:block;height:44px;width:auto}
nav.desk{display:flex;gap:22px;margin-left:auto;align-items:center}
nav.desk a{color:var(--muted);text-decoration:none;font-family:var(--f-display);font-size:.95rem}
nav.desk a:hover{color:var(--text)}
.cta-sm{display:inline-block;background:linear-gradient(180deg,#f2f4f6,#c2c8cf 55%,#9aa1a9);color:#0b0d0f;font-weight:700;font-family:var(--f-display);font-size:.9rem;padding:10px 18px;border-radius:7px;text-decoration:none}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:6px;padding:9px 10px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--silver);margin:4px 0}
.mnav{display:none}
@media(max-width:880px){
  nav.desk,.cta-sm{display:none}
  .burger{display:block}
  .mnav{display:none;position:fixed;inset:0;top:69px;z-index:39;background:var(--night);padding:26px;flex-direction:column;gap:4px;overflow:auto}
  .mnav.open{display:flex}
  .mnav a{color:var(--text);text-decoration:none;font-family:var(--f-display);font-size:1.25rem;padding:13px 4px;border-bottom:1px solid var(--line-soft)}
  body.mnav-lock{overflow:hidden}
}

/* hero */
.hero{padding:76px 0 40px;text-align:center;position:relative}
.hero .mark{width:min(560px,86vw);margin:0 auto 26px;display:block}
.hero .lede{margin:0 auto 30px}
.hero-acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* directory board */
.board-sec{padding:70px 0}
.board{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:14px;padding:10px 0;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.board-head{display:flex;align-items:baseline;justify-content:space-between;padding:20px 28px 12px;border-bottom:1px solid var(--line)}
.board-head h3{margin:0;font-family:var(--f-mono);font-weight:500;font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.floor{display:grid;grid-template-columns:72px 1fr auto;gap:18px;align-items:start;padding:22px 28px;border-bottom:1px solid var(--line-soft)}
.floor:last-child{border-bottom:0}
.floor .no{font-family:var(--f-mono);font-size:1.05rem;color:var(--silver);border:1px solid var(--line);border-radius:8px;text-align:center;padding:10px 0;background:rgba(255,255,255,.02)}
.floor h4{margin:2px 0 6px;font-family:var(--f-display);font-size:1.18rem}
.floor p{margin:0 0 10px;color:var(--muted);font-size:.95rem;max-width:56ch}
.floor .links{display:flex;flex-wrap:wrap;gap:8px}
.floor .links a{font-size:.88rem;color:var(--text);text-decoration:none;border:1px solid var(--line);border-radius:99px;padding:6px 14px;background:rgba(255,255,255,.03)}
.floor .links a:hover{border-color:var(--silver)}
.floor .links span.soon{font-size:.88rem;color:var(--muted);border:1px dashed var(--line);border-radius:99px;padding:6px 14px}
.chip{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:5px 13px;border-radius:2px;white-space:nowrap;
  color:#241a08;background:linear-gradient(180deg,#e8d9ae,#b08d3f 62%,#8a6c2c);
  border:1px solid rgba(0,0,0,.55);box-shadow:0 1px 3px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow:0 1px 0 rgba(255,244,214,.35)}
.chip.avail{color:#14181c;background:linear-gradient(180deg,#e3e7ec,#a9b0b8 62%,#7b828a);text-shadow:0 1px 0 rgba(255,255,255,.35)}
.chip.soon{color:#f0e4c2;background:linear-gradient(180deg,#7c6b45,#57472a 62%,#3b2f1a);text-shadow:0 1px 1px rgba(0,0,0,.6)}
.chip.dev{color:#e2e5e8;background:linear-gradient(180deg,#6a7076,#4a5056 62%,#33383d);text-shadow:0 1px 1px rgba(0,0,0,.6)}
@media(max-width:640px){.floor{grid-template-columns:1fr;gap:8px}.floor .no{display:inline-block;padding:6px 14px;width:auto}.floor .chip{justify-self:start}}
.legend{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 10px}
.trans-note{color:var(--muted);font-size:.92rem;border-left:2px solid var(--silver);padding-left:14px;max-width:70ch}

/* divisions */
.divisions{padding:60px 0}
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:26px}
.dcard{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--acc,#888);border-radius:12px;padding:26px;display:flex;flex-direction:column;gap:10px}
.dcard h3{margin:0;font-size:1.2rem}
.dcard p{margin:0;color:var(--muted);font-size:.95rem;flex:1}
.dcard .fam{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--acc,#888)}
.dcard a.go{color:var(--text);text-decoration:none;font-family:var(--f-display);font-weight:600}
.dcard a.go:hover{text-decoration:underline}

/* about + contact */
.about{padding:60px 0;border-top:1px solid var(--line-soft)}
.about .grid{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:start}
@media(max-width:760px){.about .grid{grid-template-columns:1fr}}
.side-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px}
.side-card h3{font-size:1.02rem;margin-bottom:12px}
.side-card ul{list-style:none;margin:0;padding:0}
.side-card li{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:.93rem}
.side-card li span{color:var(--muted)}
.contact{padding:60px 0;border-top:1px solid var(--line-soft)}
.cwrap{display:grid;grid-template-columns:1fr 1.2fr;gap:44px}
@media(max-width:820px){.cwrap{grid-template-columns:1fr}}
.cmeth a{display:block;color:var(--text);text-decoration:none;border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:12px;background:var(--panel)}
.cmeth a strong{display:block;font-family:var(--f-display)}
.cmeth a span{color:var(--muted);font-size:.85rem}
.cform{display:grid;gap:14px}
.cform .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.cform .two{grid-template-columns:1fr}}
.cform label{display:block;font-size:.85rem;font-weight:600;margin-bottom:5px}
.cform input,.cform select,.cform textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font:inherit;font-size:.95rem}
.cform textarea{min-height:110px;resize:vertical}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:2px solid var(--silver);outline-offset:1px}
.cmsg{min-height:1.4em;font-size:.9rem;color:var(--muted)}

/* page head for division pages */
.phead{padding:70px 0 30px;border-bottom:1px solid var(--line-soft)}
.phead .crumb{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.phead .crumb a{color:var(--muted);text-decoration:none}
.sbody{padding:50px 0}
.ticks{list-style:none;margin:18px 0;padding:0}
.ticks li{padding:9px 0 9px 30px;position:relative;border-bottom:1px solid var(--line-soft);color:var(--text)}
.ticks li::before{content:"—";position:absolute;left:2px;color:var(--acc,#888)}

/* footer */
footer.site{border-top:1px solid var(--line);margin-top:70px;padding:44px 0 30px;background:var(--panel)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
@media(max-width:760px){.fgrid{grid-template-columns:1fr}}
.fbrand img{height:52px;width:auto;margin-bottom:14px}
.fnap{color:var(--muted);font-size:.92rem;margin:0 0 8px}
.fnap a{color:var(--silver)}
.fcol h3{font-family:var(--f-mono);font-weight:500;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{margin:8px 0}
.fcol a{color:var(--text);text-decoration:none;font-size:.94rem}
.fcol a:hover{text-decoration:underline}
.fbottom{max-width:var(--maxw);margin:30px auto 0;padding:18px 24px 0;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.85rem}
.fbottom a{color:var(--muted)}
.band{padding:70px 0;text-align:center;border-top:1px solid var(--line-soft)}
.band p{color:var(--muted);max-width:62ch;margin:0 auto 26px}
.band-note{font-size:.9rem;margin-top:18px}


/* ── The house: foyer, doors, hallways ─────────────────────────────── */
.manor{position:relative;background:
  radial-gradient(58% 34% at 50% 0%, rgba(255,196,120,.10), transparent 70%),
  linear-gradient(180deg,#0b0c0e 0%,#0a0a0c 55%,#08090a 100%)}
.manor::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 2px, transparent 2px 160px)}
.manor .w{position:relative}
.foyer-head{text-align:center;padding:64px 0 8px}
.foyer-head .mark{width:min(520px,84vw);margin:0 auto 18px;display:block}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:clamp(18px,3vw,38px);align-items:end;padding:42px 0 22px}
@media(max-width:560px){.doors{grid-template-columns:repeat(2,1fr);gap:16px}}
.doorway{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--text);perspective:1000px;--wing:#9aa1a9}
.lintel{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.frame{position:relative;width:100%;max-width:230px;aspect-ratio:10/19;border:6px solid #241c12;border-bottom:0;border-radius:3px 3px 0 0;background:#050505;
  box-shadow:0 0 0 1px rgba(201,162,75,.22), 0 26px 60px rgba(0,0,0,.6)}
.glowroom{position:absolute;inset:0;background:
  radial-gradient(80% 90% at 50% 60%, color-mix(in srgb, var(--wing) 42%, transparent), transparent 75%);
  opacity:0;transition:opacity .5s}
.leaf{position:absolute;inset:0;transform-origin:left center;transition:transform .55s cubic-bezier(.6,.05,.3,1);
  background:
    linear-gradient(100deg, rgba(10,7,3,.5) 0%, rgba(22,15,8,.25) 45%, rgba(8,5,2,.55) 100%),
    url('/assets/img/tex-wood-v.jpg');
  background-size:auto,190px;
  border-right:1px solid rgba(0,0,0,.8);box-shadow:inset 0 0 40px rgba(0,0,0,.55)}
.leaf .panel{position:absolute;left:14%;right:14%;border:2px solid rgba(0,0,0,.55);border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -8px 18px rgba(0,0,0,.5);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.25))}
.leaf .p1{top:6%;height:20%}
.leaf .p2{top:30%;height:20%}
.leaf .p3{top:55%;height:16%}
.leaf .p4{top:75%;height:19%}
.leaf .knob{position:absolute;right:8%;top:49%;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #fdf3d8, #b08d3f 55%, #6d5423);box-shadow:0 1px 4px rgba(0,0,0,.8)}
.leaf .plate{position:absolute;left:50%;top:12%;transform:translateX(-50%);width:64%;padding:5px 4px;text-align:center;
  background:linear-gradient(180deg,#e8d9ae,#b08d3f 60%,#8a6c2c);border-radius:2px;border:1px solid rgba(0,0,0,.45);
  color:#241a08;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;
  box-shadow:0 1px 3px rgba(0,0,0,.6)}
.doorway:hover .leaf,.doorway:focus-visible .leaf{transform:rotateY(-26deg)}
.doorway:hover .glowroom,.doorway:focus-visible .glowroom{opacity:1}
.doorway.opening .leaf{transform:rotateY(-78deg)}
.doorway.opening .glowroom{opacity:1}
.doorway.shut .leaf{transition:transform .18s}
.doorway.shut:hover .leaf{transform:rotateY(-7deg)}
.hang{position:absolute;left:50%;top:38%;transform:translateX(-50%) rotate(-3deg);background:#efe6d2;color:#4a3d22;
  font-family:var(--f-mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:2px;
  box-shadow:0 3px 8px rgba(0,0,0,.6);white-space:nowrap}
.hang::before{content:"";position:absolute;left:50%;top:-11px;width:1px;height:11px;background:rgba(201,162,75,.7)}
.sill{width:118%;max-width:270px;height:9px;background:linear-gradient(180deg,#2c2317,#171209);border-radius:2px;
  box-shadow:0 10px 24px rgba(0,0,0,.65)}
.doorlabel{margin-top:14px;text-align:center}
.doorlabel strong{display:block;font-family:var(--f-display);font-size:1.06rem}
.doorlabel span{display:block;color:var(--muted);font-size:.82rem;margin-top:3px;max-width:24ch}
.doorlabel .chip{display:inline-block;margin-top:9px}
.lamp{width:8px;height:8px;border-radius:50%;background:var(--wing);box-shadow:0 0 10px var(--wing);margin-bottom:8px;opacity:.9}
.lamp.off{background:#3a3f45;box-shadow:none}
.floorline{height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,75,.3),transparent);margin-top:-1px}
.marble{height:64px;background:
  radial-gradient(60% 200% at 50% -80%, rgba(255,196,120,.06), transparent),
  linear-gradient(180deg,#101113,#0a0b0c);border-top:1px solid rgba(255,255,255,.05)}
.butler{color:var(--muted);text-align:center;max-width:52ch;margin:6px auto 0;font-size:1.02rem}

/* hallway pages */
.hallway{padding:26px 0 10px}
.hall-head{padding:56px 0 8px;text-align:center}
.hall-head .crumb{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.hall-head .crumb a{color:var(--muted);text-decoration:none}
.hall-head .crumb a:hover{color:var(--text)}
.runner{height:5px;max-width:520px;margin:26px auto 0;border-radius:3px;background:linear-gradient(90deg,transparent,var(--wing,#9aa1a9),transparent);opacity:.5}
.backdoor{display:inline-block;margin-top:8px;color:var(--muted);text-decoration:none;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--line);border-radius:99px;padding:8px 16px}
.backdoor:hover{color:var(--text);border-color:var(--silver)}


/* ── cinematic layer ───────────────────────────────────────────────── */
.foyer{overflow:hidden;position:relative;min-height:92vh;display:flex;flex-direction:column;justify-content:flex-start}
.foyer>.w{width:100%}
.beams{position:absolute;left:50%;top:-6%;width:0;height:0;pointer-events:none}
.beams i{position:absolute;bottom:0;left:0;width:190px;height:78vh;transform-origin:50% 100%;
  background:linear-gradient(180deg, rgba(230,235,240,.14), rgba(230,235,240,.03) 60%, transparent);
  clip-path:polygon(38% 100%, 62% 100%, 100% 0, 0 0);filter:blur(6px);margin-left:-95px}
.beams i:nth-child(1){animation:sweepA 14s ease-in-out infinite}
.beams i:nth-child(2){animation:sweepB 14s ease-in-out infinite;opacity:.7}
@keyframes sweepA{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(18deg)}}
@keyframes sweepB{0%,100%{transform:rotate(22deg)}50%{transform:rotate(-16deg)}}
.sconce{position:absolute;top:-2px;width:5px;height:5px;border-radius:50%;background:#ffca7a;
  box-shadow:0 0 12px 4px rgba(255,190,110,.45), 0 0 30px 10px rgba(255,170,80,.12);animation:flick 3.2s infinite}
.sconce.l{left:-16px}.sconce.r{right:-16px}
@keyframes flick{0%,100%{opacity:.85}44%{opacity:1}52%{opacity:.6}60%{opacity:.95}78%{opacity:.75}}
.doors3d{perspective:1500px}
.doors3d .doorway .frame,.doors3d .doorway .sill{transform:rotateY(var(--tilt,0deg))}
.doors3d .doorway .frame{transition:transform .5s}
@media(max-width:560px){.doors3d .doorway .frame,.doors3d .doorway .sill{transform:none}}
.wash{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(70% 70% at 50% 55%, color-mix(in srgb, var(--wing,#c9ced4) 55%, transparent), rgba(5,6,7,.92) 78%)}
.wash.on{opacity:1}
.parallax{will-change:transform}
.reflect{position:relative}
.reflect::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:70px;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.035), transparent)}

/* corridor (wing hallway) */
.corridor{position:relative;padding:30px 0 40px;overflow:hidden}
.corridor::before{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(560px,80vw);height:220px;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--wing,#9aa1a9) 16%, transparent));
  clip-path:polygon(42% 0, 58% 0, 100% 100%, 0 100%);opacity:.5;pointer-events:none}
.hallwalls{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(10px,3vw,40px);align-items:end;perspective:1400px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wall{display:flex;gap:clamp(14px,2.5vw,30px);align-items:end}
.wall.left{justify-content:flex-end}
.wall.left .doorway .frame,.wall.left .doorway .sill{transform:rotateY(34deg)}
.wall.right .doorway .frame,.wall.right .doorway .sill{transform:rotateY(-34deg)}
.wall .doorway{max-width:200px}
.wall .doorway:hover .leaf{transform:rotateY(-30deg)}
.endcap{text-align:center;max-width:300px;padding-bottom:30px}
.endcap .crest{width:110px;height:110px;margin:0 auto 16px;border-radius:50%;border:1px solid var(--gold-soft);
  display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%, #1a1d21, #0a0b0d);
  box-shadow:0 0 40px color-mix(in srgb, var(--wing,#9aa1a9) 25%, transparent)}
.endcap .crest img{width:76%;filter:drop-shadow(0 2px 8px rgba(0,0,0,.8))}
@media(max-width:860px){
  .hallwalls{grid-template-columns:1fr;justify-items:center;gap:26px}
  .wall{flex-wrap:wrap;justify-content:center}
  .wall.left .doorway .frame,.wall.left .doorway .sill,
  .wall.right .doorway .frame,.wall.right .doorway .sill{transform:rotateY(0)}
  .endcap{order:-1}
}
@media (prefers-reduced-motion:reduce){
  .beams i,.sconce{animation:none}
  .leaf,.doors3d .doorway .frame{transition:none}
  .wash{transition:none}
}


/* ── scenery: the house itself ─────────────────────────────────────── */
.scene{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.foyer>.w,.foyer .floorline,.foyer .marble{position:relative;z-index:1}

/* paneled walls + wainscot */
.wainscot{position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(180deg,#14100a 0%,#0d0a06 100%);
  border-top:1px solid rgba(201,162,75,.22);box-shadow:inset 0 14px 30px rgba(0,0,0,.55)}
.wainscot::before{content:"";position:absolute;inset:14% 0 12% 0;
  background:repeating-linear-gradient(90deg,
    transparent 0 34px, rgba(255,255,255,.028) 34px 36px,
    transparent 36px 176px, rgba(0,0,0,.5) 176px 178px, transparent 178px 210px)}
.paneling{position:absolute;inset:0 0 30% 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 220px),
    linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%)}

/* gothic windows + moonlight */
.gwin{position:absolute;top:7%;width:clamp(70px,8vw,130px);aspect-ratio:10/26;
  border:2px solid rgba(201,162,75,.30);border-bottom-width:4px;border-radius:999px 999px 0 0;
  background:
    linear-gradient(180deg, rgba(150,180,235,.16), rgba(90,115,180,.07) 45%, rgba(30,40,70,.05));
  box-shadow:0 0 70px rgba(150,180,255,.14), inset 0 0 40px rgba(150,180,255,.08)}
.gwin::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:
    linear-gradient(rgba(201,162,75,.28), rgba(201,162,75,.28)) 50% 0/2px 100% no-repeat,
    repeating-linear-gradient(0deg, transparent 0 22%, rgba(201,162,75,.24) 22% calc(22% + 2px))}
.gwin .moon{position:absolute;left:22%;top:13%;width:26%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #f4f7ff, #b9c8ea 65%, rgba(185,200,234,.25));
  box-shadow:0 0 26px 8px rgba(200,215,255,.35)}
.gwin.wl{left:4%}
.gwin.wr{right:4%}
@media(max-width:900px){.gwin.wl{left:-30px}.gwin.wr{right:-30px}}
.beamfall{position:absolute;top:6%;width:170px;height:74%;opacity:.5;filter:blur(4px);
  background:linear-gradient(180deg, rgba(165,190,245,.14), rgba(165,190,245,.02) 70%, transparent);
  clip-path:polygon(18% 0, 60% 0, 100% 100%, 42% 100%)}
.beamfall.bl{left:3.5%;transform:skewX(7deg)}
.beamfall.br{right:3.5%;transform:skewX(-7deg) scaleX(-1)}
@media(max-width:900px){.beamfall{display:none}}

/* chandelier */
.chand{position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(300px,34vw);
  filter:drop-shadow(0 0 18px rgba(255,190,110,.28))}
.chandglow{position:absolute;left:50%;top:-40px;transform:translateX(-50%);width:560px;height:300px;
  background:radial-gradient(50% 55% at 50% 30%, rgba(255,196,120,.16), transparent 70%);filter:blur(2px)}
.cflame{animation:flick 2.7s infinite}
.cflame:nth-child(odd){animation-delay:1.1s}

/* marble floor in perspective */
.floorplane{position:absolute;left:-14%;right:-14%;bottom:0;height:30%;
  transform:perspective(640px) rotateX(52deg);transform-origin:50% 100%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 150px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 2px, transparent 2px 110px),
    linear-gradient(180deg,#191b1f 0%,#0c0d0f 90%)}
.floorplane::after{content:"";position:absolute;inset:0;
  background:radial-gradient(45% 60% at 50% 20%, rgba(255,196,120,.07), transparent 70%)}

/* dust motes */
.motes span{position:absolute;bottom:18%;width:3px;height:3px;border-radius:50%;
  background:rgba(255,220,170,.5);filter:blur(.5px);opacity:0;animation:mote 11s linear infinite}
.motes span:nth-child(1){left:16%;animation-delay:0s}
.motes span:nth-child(2){left:28%;animation-delay:2.5s;animation-duration:14s}
.motes span:nth-child(3){left:44%;animation-delay:5s}
.motes span:nth-child(4){left:57%;animation-delay:1.2s;animation-duration:13s}
.motes span:nth-child(5){left:71%;animation-delay:7s}
.motes span:nth-child(6){left:84%;animation-delay:3.8s;animation-duration:16s}
@keyframes mote{0%{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:.6}55%{opacity:.35}
  100%{transform:translateY(-46vh) translateX(26px);opacity:0}}

/* corridor scenery: receding walls, ceiling lights, runner carpet */
.hallscene{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.corridor{position:relative}
.corridor .hallwalls{position:relative;z-index:1}
.sidewall{position:absolute;top:0;bottom:0;width:26%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 46px),
    linear-gradient(90deg,#131007 0%, rgba(19,16,7,0) 100%)}
.sidewall.sl{left:0;transform:skewY(6deg);transform-origin:left}
.sidewall.sr{right:0;transform:skewY(-6deg) ;transform-origin:right;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 46px),
    linear-gradient(270deg,#131007 0%, rgba(19,16,7,0) 100%)}
.ceilglow{position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle, rgba(255,196,120,.22), transparent 70%)}
.ceilglow.g1{top:2%;width:150px;height:70px}
.ceilglow.g2{top:12%;width:100px;height:48px;opacity:.75}
.ceilglow.g3{top:20%;width:64px;height:30px;opacity:.5}
.carpet{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(640px,86vw);height:62%;opacity:.85;
  background:
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--wing,#9aa1a9) 20%, #14100a) 100%);
  clip-path:polygon(46.5% 0, 53.5% 0, 100% 100%, 0 100%)}
.carpet::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 12%, rgba(201,162,75,.35) 100%);
  clip-path:polygon(47.4% 0, 47.9% 0, 6% 100%, 3% 100%)}
.carpet::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 12%, rgba(201,162,75,.35) 100%);
  clip-path:polygon(52.1% 0, 52.6% 0, 97% 100%, 94% 100%)}

/* room ambience (notary / ceremony) */
.room{position:relative;overflow:hidden}
.room>.w{position:relative;z-index:1}
.room .wainscot{height:30%}
.hearth{position:absolute;right:-40px;bottom:-30px;width:420px;height:300px;
  background:radial-gradient(55% 55% at 60% 80%, rgba(255,150,60,.20), rgba(255,120,40,.06) 55%, transparent 75%);
  filter:blur(6px);animation:hearthflick 4.5s ease-in-out infinite}
@keyframes hearthflick{0%,100%{opacity:.85;transform:scale(1)}40%{opacity:1;transform:scale(1.04)}70%{opacity:.7;transform:scale(.98)}}
@media (prefers-reduced-motion:reduce){.motes span,.cflame,.hearth{animation:none}}

.phead.room{padding:96px 0 80px}
.phead.room .lede{position:relative;z-index:1}


/* ── the 3D foyer ──────────────────────────────────────────────────── */
.foyer3d{position:relative;height:100vh;min-height:660px;overflow:hidden;background:#040506;
  perspective:1150px;perspective-origin:50% 44%}
.rspace{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;transition:transform .12s ease-out;pointer-events:none}
.rspace .doorway,.rspace .grandstair{pointer-events:auto}
.f-face{position:absolute}
.f-back{inset:0;transform:translateZ(-800px);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  background:
    linear-gradient(180deg, rgba(3,3,5,.93) 0%, rgba(7,5,4,.78) 42%, rgba(8,6,4,.7) 100%),
    url('/assets/img/tex-wood.jpg');
  background-size:auto,460px}
.f-floor{left:0;right:0;bottom:0;height:800px;transform-origin:50% 100%;transform:rotateX(90deg);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 130px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 130px),
    linear-gradient(0deg,#1a1c21 0%,#101114 100%)}
.f-floor::before{content:"";position:absolute;left:50%;top:0;height:34%;width:300px;transform:translateX(-50%);
  background:linear-gradient(90deg, rgba(201,162,75,.5) 0 5px, transparent 5px 12px,
    #3c1114 12px calc(100% - 12px), transparent calc(100% - 12px) calc(100% - 5px), rgba(201,162,75,.5) calc(100% - 5px) 100%),
    #34090c;opacity:.8}
.f-floor::after{content:"";position:absolute;inset:0;
  background:radial-gradient(50% 55% at 50% 12%, rgba(255,196,120,.12), transparent 70%)}
.f-ceil{left:0;right:0;top:0;height:800px;transform-origin:50% 0%;transform:rotateX(-90deg);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.4) 0 3px, transparent 3px 190px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.4) 0 3px, transparent 3px 190px),
    linear-gradient(180deg, rgba(6,6,8,.9), rgba(4,4,5,.86)),
    url('/assets/img/tex-wood.jpg');
  background-size:auto,auto,auto,520px}
.f-ceil::after{content:"";position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:480px;height:380px;
  background:radial-gradient(closest-side, rgba(255,196,120,.28), rgba(255,180,90,.08) 55%, transparent 75%)}
.f-left,.f-right{top:0;bottom:0;width:800px;
  background:
    linear-gradient(180deg, rgba(3,3,5,.92) 0%, rgba(7,5,4,.76) 50%, rgba(7,5,4,.7) 100%),
    url('/assets/img/tex-wood.jpg');
  background-size:auto,440px}
.f-left{left:0;transform-origin:0% 50%;transform:rotateY(90deg)}
.f-right{right:0;transform-origin:100% 50%;transform:rotateY(-90deg)}
.f-left::after,.f-right::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:
    linear-gradient(180deg, rgba(10,7,4,.55), rgba(6,4,2,.7)),
    url('/assets/img/tex-wood.jpg');
  background-size:auto,380px;border-top:2px solid rgba(201,162,75,.28)}
.wallwin{position:absolute;top:14%;left:50%;transform:translateX(-50%);width:150px;aspect-ratio:10/24;
  border:2px solid rgba(201,162,75,.3);border-radius:999px 999px 0 0;
  background:linear-gradient(180deg, rgba(150,180,235,.18), rgba(90,115,180,.07) 45%, rgba(30,40,70,.05));
  box-shadow:0 0 110px rgba(150,180,255,.3), inset 0 0 60px rgba(150,180,255,.16)}
.wallwin::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:
    linear-gradient(rgba(201,162,75,.26), rgba(201,162,75,.26)) 50% 0/2px 100% no-repeat,
    repeating-linear-gradient(0deg, transparent 0 22%, rgba(201,162,75,.22) 22% calc(22% + 2px))}
.wallwin .moon{position:absolute;left:24%;top:12%;width:25%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #f4f7ff, #b9c8ea 65%, rgba(185,200,234,.25));
  box-shadow:0 0 26px 8px rgba(200,215,255,.35)}
.wsconce{position:absolute;width:6px;height:6px;border-radius:50%;background:#ffca7a;
  box-shadow:0 0 14px 5px rgba(255,190,110,.5), 0 0 44px 16px rgba(255,170,80,.14);animation:flick 3.4s infinite}
.wsconce.s1{top:38%;left:18%}
.wsconce.s2{top:38%;left:82%;animation-delay:1.4s}

/* back-wall dressing */
.f-back .paneling{position:absolute;inset:0 0 34% 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 210px),
    linear-gradient(180deg, rgba(0,0,0,.4), transparent 35%)}
.f-back .wainscot2{position:absolute;left:0;right:0;bottom:0;height:34%;
  background:
    linear-gradient(180deg, rgba(10,7,4,.5) 0%, rgba(6,4,2,.66) 100%),
    url('/assets/img/tex-wood.jpg');
  background-size:auto,380px;
  border-top:2px solid rgba(201,162,75,.28);box-shadow:inset 0 14px 30px rgba(0,0,0,.5)}
.f-back .wainscot2::before{content:"";position:absolute;inset:16% 0 10% 0;
  background:repeating-linear-gradient(90deg,
    transparent 0 30px, rgba(255,255,255,.026) 30px 32px,
    transparent 32px 168px, rgba(0,0,0,.5) 168px 170px, transparent 170px 200px)}
.wallmark{position:relative;z-index:1;width:min(420px,38vw);margin-bottom:5vh;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.9)) drop-shadow(0 0 30px rgba(230,235,240,.08))}
.f-back .doors{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2.6vw,44px);align-items:end;width:min(1140px,94%);padding:0}
.f-back .frame{max-width:255px}
.f-back .doorlabel strong{font-size:.98rem}
.f-back .doorlabel span{font-size:.76rem}
.f-back .doorway .doorlabel{order:-1;margin:0 0 12px}
.f-back .doorway .lintel{display:none}
.f-back .doorway .sill{margin-bottom:0}
.f-back .doorway{--tilt:0deg}
.f-back .doorway .frame,.f-back .doorway .sill{transform:none}
/* ground-contact shadows */
.f-back .doorway .sill{box-shadow:0 10px 24px rgba(0,0,0,.65), 0 22px 40px 6px rgba(0,0,0,.5)}

/* wood grain + hinges */
.leaf::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(94deg, rgba(0,0,0,.14) 0 2px, transparent 2px 5px, rgba(255,255,255,.02) 5px 6px, transparent 6px 12px);
  opacity:.5;mix-blend-mode:overlay}
.hinge{position:absolute;left:-1px;width:7px;height:24px;border-radius:2px;
  background:linear-gradient(90deg,#6d5423,#e6cf8c 45%,#6d5423);box-shadow:0 1px 3px rgba(0,0,0,.7)}
.hinge.h1{top:12%}
.hinge.h2{top:68%}

/* overlay UI on the 3D stage */
.foyer-ui{position:absolute;left:0;right:0;bottom:14px;z-index:2;text-align:center;pointer-events:none}
.foyer-ui .butler{margin:0 auto 6px;font-size:.95rem;text-shadow:0 2px 6px rgba(0,0,0,.9)}
.scrollcue{display:inline-block;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(5px);opacity:1}}

/* flatten on small screens / reduced motion */
@media(max-width:880px){
  .foyer3d{height:auto;min-height:0;perspective:none;padding:0}
  .rspace{position:relative;inset:auto}
  .f-left,.f-right,.f-ceil,.f-floor{display:none}
  .f-back{position:relative;inset:auto;transform:none;padding:46px 0 34px}
  .f-back .doors{grid-template-columns:repeat(2,1fr);width:92%}
  .foyer-ui{position:relative;bottom:auto;margin:10px 0 20px}
}
@media (prefers-reduced-motion:reduce){.rspace{transition:none}.scrollcue,.wsconce{animation:none}}


/* ── realism pass: ambient occlusion, materials, furniture ─────────── */
.foyer3d::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(115% 95% at 50% 42%, transparent 52%, rgba(0,0,0,.55) 100%)}
.f-back{box-shadow:inset 0 0 200px 30px rgba(0,0,0,.55)}
.f-left{box-shadow:inset -160px 0 200px -60px rgba(0,0,0,.7), inset 0 -80px 120px -50px rgba(0,0,0,.6)}
.f-right{box-shadow:inset 160px 0 200px -60px rgba(0,0,0,.7), inset 0 -80px 120px -50px rgba(0,0,0,.6)}
.f-floor{box-shadow:inset 0 200px 220px -80px rgba(0,0,0,.75), inset 200px 0 220px -120px rgba(0,0,0,.5), inset -200px 0 220px -120px rgba(0,0,0,.5)}
.f-ceil{box-shadow:inset 0 -200px 220px -80px rgba(0,0,0,.8)}
/* baseboards */
.f-back .wainscot2::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;
  background:linear-gradient(180deg,#241c12,#0c0906);border-top:1px solid rgba(201,162,75,.35)}
.f-left::before,.f-right::before{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;z-index:1;
  background:linear-gradient(180deg,#241c12,#0c0906);border-top:1px solid rgba(201,162,75,.3)}
/* sconce light pools above the doors */
.f-back .doorway{position:relative}
.f-back .doorway::before{content:"";position:absolute;left:50%;top:-4%;transform:translateX(-50%);
  width:170%;height:52%;pointer-events:none;
  background:radial-gradient(50% 46% at 50% 34%, rgba(255,196,120,.11), transparent 72%)}
/* floor sheen */
.f-floor .sheen{position:absolute;left:50%;top:0;transform:translateX(-50%);width:76%;height:46%;
  background:radial-gradient(50% 90% at 50% 0%, rgba(220,228,238,.07), transparent 75%)}
/* portraits on the side walls */
.portrait{position:absolute;top:47%;left:50%;transform:translateX(-50%);width:132px;aspect-ratio:3/4;
  padding:9px;background:linear-gradient(160deg,#d9c07a,#8a6c2c 55%,#5c4520);
  box-shadow:0 8px 22px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,244,214,.5)}
.portrait i{display:block;width:100%;height:100%;
  background:
    radial-gradient(60% 46% at 50% 34%, rgba(120,110,96,.4), rgba(38,34,28,.9) 70%),
    linear-gradient(165deg,#191512,#0a0908)}
.portrait::after{content:"";position:absolute;inset:9px;
  background:linear-gradient(115deg, rgba(255,255,255,.10), transparent 34%)}
/* chandelier hanging in the room */
.f-chand{left:50%;top:0;width:280px;height:340px;transform:translateX(-50%) translateZ(-300px);
  pointer-events:none}
.f-chand .chain{position:absolute;left:50%;top:0;width:2px;height:74px;transform:translateX(-50%);
  background:linear-gradient(180deg,#3a3126,#191410)}
.f-chand .body{position:absolute;left:50%;top:70px;transform:translateX(-50%);width:180px;height:64px}
.f-chand .body::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:14px;height:56px;
  background:linear-gradient(90deg,#151009,#4a3b22 50%,#151009);border-radius:6px}
.f-chand .body::after{content:"";position:absolute;left:0;right:0;top:26px;height:30px;
  border:3px solid #241c12;border-top:0;border-radius:0 0 90px 90px}
.f-chand .cf{position:absolute;top:14px;width:5px;height:10px;border-radius:50% 50% 40% 40%;
  background:radial-gradient(circle at 50% 80%, #ffe9b8, #ffb45e 70%, rgba(255,150,60,.25));
  box-shadow:0 0 12px 4px rgba(255,190,110,.55), 0 0 34px 12px rgba(255,170,80,.16);
  animation:flick 2.9s infinite}
.f-chand .cf.c1{left:6px}
.f-chand .cf.c2{left:48px;top:8px;animation-delay:.7s}
.f-chand .cf.c3{left:88px;top:4px;animation-delay:1.5s}
.f-chand .cf.c4{left:128px;top:8px;animation-delay:.3s}
.f-chand .cf.c5{left:170px;animation-delay:1.1s}
.f-chand .halo{position:absolute;left:50%;top:44px;transform:translateX(-50%);width:340px;height:220px;
  background:radial-gradient(50% 50% at 50% 40%, rgba(255,196,120,.22), transparent 72%)}

/* ── the grand staircase ───────────────────────────────────────────── */
.f-back .doors.doors5{grid-template-columns:1fr 1fr 1.55fr 1fr 1fr;align-items:end;width:min(1240px,96%)}
.stairway{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  text-decoration:none;color:var(--text);pointer-events:auto;padding-bottom:0}
.stairway .arch{position:relative;width:60%;aspect-ratio:10/17;border:4px solid #241c12;border-bottom:0;
  border-radius:999px 999px 0 0;overflow:hidden;
  box-shadow:0 0 0 1px rgba(201,162,75,.3), 0 20px 50px rgba(0,0,0,.55);
  background:
    radial-gradient(80% 60% at 50% 96%, rgba(255,196,120,.30), rgba(255,180,90,.08) 55%, transparent 80%),
    linear-gradient(180deg,#07080b 0%,#0b0a08 100%)}
.stairway .arch::before{content:"";position:absolute;left:8%;right:8%;bottom:0;height:46%;
  background:repeating-linear-gradient(0deg, rgba(201,162,75,.28) 0 2px, transparent 2px 12px);
  -webkit-mask-image:linear-gradient(180deg,transparent, #000 60%);mask-image:linear-gradient(180deg,transparent, #000 60%);
  opacity:.6}
.stairway .arch::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(115deg, rgba(255,255,255,.05), transparent 40%)}
.stairway .landing{width:62%;height:13px;border-radius:2px 2px 0 0;margin-top:-2px;
  background:
    linear-gradient(180deg, rgba(48,34,18,.3) 0%, rgba(12,8,4,.6) 100%),
    url('/assets/img/tex-wood.jpg');
  background-size:auto,240px;
  border-top:1px solid rgba(255,255,255,.16);box-shadow:0 3px 6px rgba(0,0,0,.6);position:relative}
.stairway .landing::before{content:"";position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);width:38%;
  background:linear-gradient(180deg, rgba(90,20,24,.85), rgba(60,17,20,.85));
  border-left:2px solid rgba(201,162,75,.4);border-right:2px solid rgba(201,162,75,.4)}
.stairway .flight{position:relative;width:185%;display:flex;flex-direction:column-reverse;align-items:center}
.stairway .step{height:15px;border-radius:2px 2px 0 0;
  background:
    linear-gradient(180deg, rgba(48,34,18,.28) 0%, rgba(12,8,4,.62) 100%),
    url('/assets/img/tex-wood.jpg');
  background-size:auto,240px;
  border-top:1px solid rgba(230,207,140,.3);box-shadow:0 3px 5px rgba(0,0,0,.6);position:relative}
.stairway .step::before{content:"";position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);width:34%;
  background:linear-gradient(180deg, rgba(90,20,24,.85), rgba(60,17,20,.85));
  border-left:2px solid rgba(201,162,75,.4);border-right:2px solid rgba(201,162,75,.4)}
.stairway .step{height:16px}
.stairway .s1{width:100%}
.stairway .s2{width:94%}
.stairway .s3{width:88%}
.stairway .s4{width:82%}
.stairway .s5{width:76%}
.stairway .s6{width:70%}
.stairway .s7{width:64%}
.stairway .s8{width:58%}
.stairway .s9{width:52%}
.stairway .s10{width:46%}
.stairway .rail{position:absolute;bottom:0;width:5px;height:196px;
  background:repeating-linear-gradient(0deg,#241c12 0 6px, rgba(201,162,75,.55) 6px 8px);border-radius:3px}
.stairway .rail::after{content:"";position:absolute;top:-4px;left:-3px;right:-3px;height:6px;border-radius:3px;
  background:linear-gradient(90deg,#8a6c2c,#e6cf8c 50%,#8a6c2c)}
.stairway .rail.rl{left:1%;transform:rotate(19deg);transform-origin:bottom}
.stairway .rail.rr{right:1%;transform:rotate(-19deg);transform-origin:bottom}
.stairway .stairlabel{margin-top:12px;text-align:center}
.stairway .stairlabel strong{display:block;font-family:var(--f-display);font-size:1rem}
.stairway .stairlabel span{display:block;color:var(--muted);font-size:.76rem;margin-top:2px}
.stairway:hover .arch{box-shadow:0 0 0 1px rgba(201,162,75,.5), 0 0 46px rgba(255,196,120,.22), 0 20px 50px rgba(0,0,0,.55)}
@media(max-width:880px){
  .f-back .doors.doors5{grid-template-columns:repeat(2,1fr)}
  .stairway{grid-column:1 / -1;order:-1;margin-bottom:18px}
  .f-chand,.portrait{display:none}
}

/* ── video opener ──────────────────────────────────────────────────── */
.intro.vintro{background:#000;opacity:1;transition:opacity .6s ease}
.intro.vintro .vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.intro.vintro.done{opacity:0}


/* gallery level + columns */
.gallery{position:absolute;left:0;right:0;top:19%;height:16%;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,3,2,.72), rgba(8,6,3,.5)),
    url('/assets/img/tex-wood.jpg');
  background-size:auto,420px;
  border-bottom:3px solid #1a1309;box-shadow:0 6px 18px rgba(0,0,0,.6)}
.gallery::before{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  background:repeating-linear-gradient(90deg,
    transparent 0 12px, rgba(14,10,5,.9) 12px 17px, transparent 17px 29px);
  border-top:3px solid #2a1f12;border-bottom:4px solid #241a0d}
.gallery::after{content:"";position:absolute;left:0;right:0;bottom:36%;height:3px;
  background:linear-gradient(90deg,#5c4520,#c9a24b 20%,#8a6c2c 50%,#c9a24b 80%,#5c4520)}
.gports{position:absolute;left:5%;right:5%;top:4%;height:52%;display:flex;justify-content:space-between}
.gports i{width:4.2%;height:100%;background:linear-gradient(165deg,#171310,#0a0908);
  border:3px solid;border-image:linear-gradient(160deg,#d9c07a,#5c4520) 1;
  box-shadow:0 3px 8px rgba(0,0,0,.7)}
.mcol{position:absolute;bottom:0;top:19%;width:44px;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(60,42,22,.15) 30%, rgba(255,240,210,.06) 48%, rgba(0,0,0,.5) 100%),
    url('/assets/img/tex-wood-v.jpg');
  background-size:auto,170px;
  box-shadow:0 0 26px rgba(0,0,0,.7)}
.mcol::before{content:"";position:absolute;left:-7px;right:-7px;top:-4px;height:16px;
  background:linear-gradient(180deg,#3a2b16,#17100a);border-radius:2px;border-bottom:2px solid rgba(201,162,75,.35)}
.mcol::after{content:"";position:absolute;left:-7px;right:-7px;bottom:0;height:20px;
  background:linear-gradient(180deg,#241a0d,#0d0906);border-top:2px solid rgba(201,162,75,.3)}
.mcol.c-l{left:35.5%}
.mcol.c-r{right:35.5%}
/* moonlight shafts pooling on the floor */
.f-floor .pool{position:absolute;top:6%;width:24%;height:34%;filter:blur(10px);opacity:.5;
  background:radial-gradient(50% 60% at 50% 50%, rgba(165,190,240,.16), transparent 75%)}
.f-floor .pool.pl{left:2%}
.f-floor .pool.pr{right:2%}
@media(max-width:880px){.gallery,.mcol{display:none}}


/* ── atrium layout: doors on side walls, grand switchback stair, fountain ── */
.f-left,.f-right{pointer-events:none}
.f-left .doorway,.f-right .doorway{position:absolute;bottom:10px;width:158px;pointer-events:auto;z-index:2}
.f-left .doorway .frame,.f-right .doorway .frame{max-width:158px}
.f-left .doorway .doorlabel strong,.f-right .doorway .doorlabel strong{font-size:.9rem}
.f-left .doorway .doorlabel span,.f-right .doorway .doorlabel span{font-size:.72rem}
.f-left .d1{left:170px}
.f-left .d2{left:470px}
.f-right .d1{right:170px}
.f-right .d2{right:470px}
/* wraparound mezzanine on the side walls */
.gallery.gside{left:0;right:0}
/* the grand switchback stair */
.grandstair{position:relative;z-index:1;width:min(720px,62%);display:flex;flex-direction:column;align-items:center;
  text-decoration:none;color:var(--text)}
.gs-build{position:relative;width:100%;height:340px}
/* upper return flights rising outward to the mezzanine */
.uflight{position:absolute;bottom:118px;width:36%;height:200px;
  background:
    repeating-linear-gradient(180deg, rgba(230,207,140,.16) 0 2px, rgba(10,7,3,.72) 2px 15px),
    url('/assets/img/tex-wood.jpg');
  background-size:auto,240px}
.uflight.ul{left:1%;clip-path:polygon(0 0, 100% 62%, 100% 100%, 0 38%)}
.uflight.ur{right:1%;clip-path:polygon(100% 0, 0 62%, 0 100%, 100% 38%)}
.uflight::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(255,220,160,.05), rgba(0,0,0,.35))}
.urail{position:absolute;bottom:196px;width:38%;height:110px;pointer-events:none}
.urail.ul{left:-2%;background:linear-gradient(to top right, transparent 47%, rgba(201,162,75,.7) 48%, rgba(201,162,75,.7) 51%, transparent 52%)}
.urail.ur{right:-2%;background:linear-gradient(to top left, transparent 47%, rgba(201,162,75,.7) 48%, rgba(201,162,75,.7) 51%, transparent 52%)}
/* landing */
.gs-landing{position:absolute;left:50%;bottom:112px;transform:translateX(-50%);width:44%;height:16px;
  background:
    linear-gradient(180deg, rgba(48,34,18,.3) 0%, rgba(12,8,4,.66) 100%),
    url('/assets/img/tex-wood.jpg');
  background-size:auto,240px;
  border-top:2px solid rgba(230,207,140,.35);border-radius:2px 2px 0 0;box-shadow:0 4px 9px rgba(0,0,0,.6)}
.gs-landing::before{content:"";position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);width:34%;
  background:linear-gradient(180deg, rgba(90,20,24,.85), rgba(60,17,20,.85));
  border-left:2px solid rgba(201,162,75,.4);border-right:2px solid rgba(201,162,75,.4)}
/* landing arch backdrop */
.gs-arch{position:absolute;left:50%;bottom:128px;transform:translateX(-50%);width:26%;height:150px;
  border:4px solid #241c12;border-bottom:0;border-radius:999px 999px 0 0;overflow:hidden;
  box-shadow:0 0 0 1px rgba(201,162,75,.3);
  background:
    radial-gradient(80% 62% at 50% 96%, rgba(255,196,120,.32), rgba(255,180,90,.08) 55%, transparent 82%),
    linear-gradient(180deg,#060709 0%,#0a0906 100%)}
/* lower flight */
.lflight{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:52%;
  display:flex;flex-direction:column-reverse;align-items:center}
.lflight .step{height:16px;border-radius:2px 2px 0 0;position:relative;
  background:
    linear-gradient(180deg, rgba(48,34,18,.28) 0%, rgba(12,8,4,.62) 100%),
    url('/assets/img/tex-wood.jpg');
  background-size:auto,240px;
  border-top:1px solid rgba(230,207,140,.3);box-shadow:0 3px 5px rgba(0,0,0,.6)}
.lflight .step::before{content:"";position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);width:34%;
  background:linear-gradient(180deg, rgba(90,20,24,.85), rgba(60,17,20,.85));
  border-left:2px solid rgba(201,162,75,.4);border-right:2px solid rgba(201,162,75,.4)}
.lflight .t1{width:100%}
.lflight .t2{width:95%}
.lflight .t3{width:90%}
.lflight .t4{width:85%}
.lflight .t5{width:80%}
.lflight .t6{width:75%}
.lflight .t7{width:70%}
.lrail{position:absolute;bottom:0;width:6px;height:128px;
  background:repeating-linear-gradient(0deg,#241c12 0 6px, rgba(201,162,75,.55) 6px 8px);border-radius:3px}
.lrail::after{content:"";position:absolute;top:-4px;left:-3px;right:-3px;height:6px;border-radius:3px;
  background:linear-gradient(90deg,#8a6c2c,#e6cf8c 50%,#8a6c2c)}
.lrail.ll{left:20%;transform:rotate(17deg);transform-origin:bottom}
.lrail.lr{right:20%;transform:rotate(-17deg);transform-origin:bottom}
/* newel posts */
.newel{position:absolute;bottom:0;width:12px;height:52px;border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,#17100a,#4a3826 50%,#17100a)}
.newel::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:18px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #e6cf8c, #8a6c2c 60%, #4a3826)}
.newel.nl{left:17.5%}
.newel.nr{right:17.5%}
.grandstair .stairlabel{position:absolute;left:-9999px}
.grandstair:hover .gs-arch{box-shadow:0 0 0 1px rgba(201,162,75,.55), 0 0 46px rgba(255,196,120,.25)}
/* fountain centerpiece */
.f-fountain{left:50%;bottom:0;width:360px;height:250px;transform:translateX(-50%) translateZ(-420px);
  transform-origin:50% 100%;pointer-events:none}
.f-fountain .fshadow{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);width:340px;height:52px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent 75%)}
.f-fountain .basin{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:320px;height:74px}
.f-fountain .basin::before{content:"";position:absolute;inset:0;border-radius:50%/46%;
  background:linear-gradient(180deg,#2c2f36 0%,#191b20 45%,#0c0d10 100%);
  box-shadow:inset 0 -8px 18px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.5)}
.f-fountain .basin::after{content:"";position:absolute;left:6%;right:6%;top:8%;height:46%;border-radius:50%;
  background:
    radial-gradient(60% 70% at 50% 40%, rgba(120,165,210,.2), rgba(55,85,130,.14) 60%, rgba(25,35,60,.2));
  box-shadow:inset 0 2px 8px rgba(0,0,0,.5)}
.f-fountain .pillar{position:absolute;left:50%;bottom:56px;transform:translateX(-50%);width:26px;height:74px;
  background:linear-gradient(90deg,#15171c,#454a56 50%,#15171c)}
.f-fountain .bowl{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);width:150px;height:38px}
.f-fountain .bowl::before{content:"";position:absolute;inset:0;border-radius:50%/44%;
  background:linear-gradient(180deg,#2c2f36 0%,#15171b 60%,#0b0c0f 100%);
  box-shadow:inset 0 -5px 10px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.5)}
.f-fountain .bowl::after{content:"";position:absolute;left:8%;right:8%;top:8%;height:44%;border-radius:50%;
  background:radial-gradient(60% 70% at 50% 40%, rgba(120,165,210,.22), rgba(35,50,85,.16))}
.f-fountain .spray{position:absolute;left:50%;bottom:148px;transform:translateX(-50%);width:6px;height:56px;border-radius:3px;
  background:linear-gradient(180deg, rgba(190,220,250,.5), rgba(150,190,235,.12));filter:blur(1px);
  animation:spray 2.6s ease-in-out infinite}
@keyframes spray{0%,100%{transform:translateX(-50%) scaleY(1);opacity:.8}50%{transform:translateX(-50%) scaleY(1.12);opacity:1}}
.f-fountain .shimmer{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:250px;height:34px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(150,190,235,.08), transparent 75%);
  animation:spray 3.4s ease-in-out infinite}
/* mobile door strip fallback */
.mobile-doors{display:none}
@media(max-width:880px){
  .mobile-doors{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:26px 22px 8px}
  .mobile-doors a{border:1px solid var(--line);border-radius:10px;padding:16px;text-decoration:none;color:var(--text);
    background:var(--panel)}
  .mobile-doors a strong{display:block;font-family:var(--f-display)}
  .mobile-doors a span{color:var(--muted);font-size:.85rem}
  .f-fountain{display:none}
}
@media (prefers-reduced-motion:reduce){.f-fountain .spray,.f-fountain .shimmer{animation:none}}


/* ── SVG grand stair + atmosphere + noir grade ─────────────────────── */
.gs-svg{display:block;width:min(760px,64vw);height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.6))}
.grandstair{padding-bottom:0}

/* portraits with actual paintings + picture lights (back gallery only) */
.gports{position:absolute;left:10%;right:10%;top:6%;height:56%;display:flex;justify-content:space-between}
.gports i{position:relative;width:9%;height:100%;
  border:4px solid;border-image:linear-gradient(160deg,#d9c07a,#5c4520) 1;
  background:
    radial-gradient(46% 30% at 50% 30%, rgba(122,98,70,.65), rgba(60,46,32,.4) 55%, transparent 75%),
    radial-gradient(70% 44% at 50% 66%, rgba(78,60,42,.5), transparent 75%),
    linear-gradient(165deg,#241d15,#0c0a07 70%);
  box-shadow:0 4px 12px rgba(0,0,0,.7)}
.gports i::before{content:"";position:absolute;left:12%;right:12%;top:-14px;height:8px;border-radius:4px;
  background:linear-gradient(180deg,#e6cf8c,#8a6c2c)}
.gports i::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(80% 40% at 50% 0%, rgba(255,214,150,.22), transparent 70%),
    linear-gradient(115deg, rgba(255,255,255,.07), transparent 40%)}
.gallery.gside .gports{display:none}

/* windows: mid-wall, tall, moonlit — clear of the gallery */
.wallwin{top:40%;width:170px;aspect-ratio:10/20}

/* haze planes for depth */
.haze{left:-10%;right:-10%;top:0;bottom:0;pointer-events:none}
.haze.hz1{transform:translateZ(-240px);
  background:radial-gradient(70% 46% at 50% 78%, rgba(148,170,200,.05), transparent 75%)}
.haze.hz2{transform:translateZ(-560px);
  background:radial-gradient(64% 52% at 50% 60%, rgba(150,170,205,.075), transparent 72%)}
/* volumetric moon shaft cutting across the hall */
.moonshaft{left:0;top:0;width:56%;height:100%;transform:translateZ(-600px);pointer-events:none;
  filter:blur(9px);opacity:.65;mix-blend-mode:screen;
  background:linear-gradient(117deg, transparent 12%, rgba(168,196,240,.17) 30%, rgba(168,196,240,.05) 52%, transparent 66%)}
/* floor fog */
.floorfog{position:absolute;left:0;right:0;bottom:0;height:26%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, rgba(120,140,170,.05) 45%, rgba(90,105,130,.1) 100%);
  filter:blur(2px)}

/* noir grade: cooler, deeper vignette */
.foyer3d::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(115% 95% at 50% 42%, transparent 46%, rgba(2,4,10,.62) 100%),
    linear-gradient(180deg, rgba(4,7,14,.22), transparent 30%, transparent 72%, rgba(3,5,10,.3) 100%)}

/* columns meet the gallery underside */
.mcol{top:35%}
.mcol.c-l{left:36.5%}
.mcol.c-r{right:36.5%}
@media (prefers-reduced-motion:reduce){.moonshaft{opacity:.3}}

.moonshaft.ms2{left:auto;right:0;transform:translateZ(-600px) scaleX(-1);opacity:.4}