/* M Hudson AI Studio — shared design system for the projects/ exhibit (switcher + per-project pages). */
:root{
  --ink:#1a1a2e; --ink-2:#12121f; --slate:#2d5a7b; --bronze:#b8762a;
  --paper:#e8f0f6; --paper-dim:#aebccb; --line:rgba(232,240,246,.12);
  --card:rgba(232,240,246,.035); --card-hover:rgba(232,240,246,.06);
  --serif:'Cormorant',Georgia,serif; --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans); color:var(--paper); background:var(--ink-2); -webkit-font-smoothing:antialiased; line-height:1.6; overflow-x:hidden;}
body::before{content:''; position:fixed; inset:0; z-index:-2;
  background:radial-gradient(1200px 700px at 75% -5%, rgba(45,90,123,.35), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(184,118,42,.16), transparent 55%),
    linear-gradient(180deg,#1a1a2e 0%, #12121f 100%);}
body::after{content:''; position:fixed; inset:0; z-index:-1; opacity:.035; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px}

/* ---------- header + project nav tabs (shared across pages) ---------- */
header.site{padding:26px 0 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px}
header.site .logo{background:#fff;border-radius:10px;padding:7px 14px;display:inline-flex;align-items:center;line-height:0}
header.site .logo img{height:34px;display:block}
.brand{display:flex; align-items:center; gap:12px; font-size:13px; letter-spacing:.28em; text-transform:uppercase; color:var(--paper-dim)}
.brand b{color:var(--paper); font-weight:600}
.brand .dot{width:6px;height:6px;border-radius:50%;background:var(--bronze);box-shadow:0 0 12px var(--bronze)}
.pnav{display:flex; gap:8px; flex-wrap:wrap; margin:22px 0 0; padding-bottom:18px; border-bottom:1px solid var(--line)}
.pnav a{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-dim); text-decoration:none; padding:9px 16px; border:1px solid var(--line); border-radius:30px; transition:.2s; white-space:nowrap}
.pnav a:hover{color:var(--paper); border-color:rgba(184,118,42,.45)}
.pnav a.active{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.pnav a .st{font-size:9px; letter-spacing:.1em; opacity:.7; margin-left:7px}
.pnav a.soon{opacity:.6}

/* ---------- hero ---------- */
.hero{padding:46px 0 26px; max-width:880px}
.eyebrow{font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--bronze); margin-bottom:20px}
h1{font-family:var(--serif); font-weight:500; font-size:clamp(38px,6.4vw,68px); line-height:1.04; letter-spacing:-.01em}
h1 em{font-style:italic; color:var(--paper-dim)}
.lede{font-family:var(--serif); font-weight:400; font-size:clamp(18px,2.3vw,23px); color:var(--paper-dim); margin-top:24px; max-width:720px; line-height:1.45}
.meta{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:30px; font-size:12.5px; letter-spacing:.04em; color:var(--paper-dim)}
.meta span{display:flex; align-items:center; gap:8px} .meta b{color:var(--paper); font-weight:500}
.meta .pip{width:5px;height:5px;border-radius:50%;background:var(--slate)}

/* ---------- sections / station heads ---------- */
section{padding:50px 0 8px}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding-bottom:15px; margin-bottom:26px}
.sec-head h2{font-family:var(--serif); font-weight:500; font-size:27px}
.sec-head h2 small{display:block; font-family:var(--sans); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); margin-bottom:7px}
.sec-head .count{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-dim); text-align:right; white-space:nowrap}
.station-tag{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--bronze)}

.lead-row{display:grid; grid-template-columns:1.25fr .85fr; gap:26px; align-items:start}
@media(max-width:820px){ .lead-row{grid-template-columns:1fr} }

/* before/after slider */
.ba{position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/9; background:#0d0d18; user-select:none}
.ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.ba .after{clip-path:inset(0 0 0 50%)}
.ba .divider{position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--bronze); box-shadow:0 0 14px rgba(184,118,42,.7); transform:translateX(-1px); pointer-events:none}
.ba .handle{position:absolute; top:50%; left:50%; width:42px; height:42px; margin:-21px 0 0 -21px; border-radius:50%; background:rgba(18,18,31,.78); border:1px solid var(--bronze); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; color:var(--paper); font-size:15px; pointer-events:none}
.ba input[type=range]{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize}
.ba .lab{position:absolute; bottom:12px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; background:rgba(18,18,31,.72); backdrop-filter:blur(6px); color:var(--paper); padding:5px 11px; border-radius:20px; border:1px solid var(--line)}
.ba .lab.l{left:12px} .ba .lab.r{right:12px; color:var(--bronze)}

.lead-note{font-size:14.5px; color:var(--paper-dim); line-height:1.6}
.lead-note h3{font-family:var(--serif); font-weight:500; font-size:23px; color:var(--paper); margin-bottom:12px; line-height:1.15}
.lead-note b{color:var(--paper); font-weight:500}
.tools{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.tool{font-size:11px; letter-spacing:.06em; color:var(--paper-dim); border:1px solid var(--line); border-radius:14px; padding:5px 11px}

figure{margin:0}
video,.plate img{width:100%; display:block; border-radius:14px; border:1px solid var(--line); background:#0d0d18}
figcaption{font-size:12.5px; color:var(--paper-dim); margin-top:10px; letter-spacing:.02em}
figcaption b{color:var(--paper); font-weight:500}

.grid{display:grid; gap:16px; grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){ .grid,.grid.three,.grid.four{grid-template-columns:1fr 1fr} }
@media(max-width:480px){ .grid,.grid.three,.grid.four{grid-template-columns:1fr} }
.feature{margin:42px 0 0;padding:22px;border:1px solid var(--line);border-left:2px solid var(--bronze);border-radius:14px;background:linear-gradient(180deg,rgba(184,118,42,.05),transparent 60%)}
.plate{position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#0d0d18}
.plate img{border:0; border-radius:0; aspect-ratio:16/9; object-fit:cover; transition:.4s}
.plate:hover img{transform:scale(1.03)}
.plate .cap{position:absolute; left:12px; bottom:12px; right:12px; display:flex; justify-content:space-between; align-items:flex-end; gap:10px}
.plate .nm{font-family:var(--serif); font-size:18px; color:var(--paper); text-shadow:0 2px 12px rgba(0,0,0,.6)}
.plate .tg{font-size:10px; letter-spacing:.14em; text-transform:uppercase; background:rgba(18,18,31,.7); backdrop-filter:blur(6px); color:var(--paper); padding:5px 10px; border-radius:16px; border:1px solid var(--line); white-space:nowrap}
.refs{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:6px}
@media(max-width:680px){ .refs{grid-template-columns:repeat(3,1fr)} }
.refs img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:10px; border:1px solid var(--line); opacity:.92}
.refs .ref-item{position:relative; overflow:hidden; border-radius:10px; cursor:help}
.refs .ref-item img{border-radius:10px; transition:.3s}
.refs .ref-item:hover img{opacity:1; transform:scale(1.05)}
.refs .ref-cap{position:absolute; left:0; right:0; bottom:0; padding:22px 9px 9px; font-size:10px; line-height:1.32; color:var(--paper); background:linear-gradient(transparent,rgba(18,18,31,.94)); opacity:0; transition:.3s; pointer-events:none}
.refs .ref-cap b{color:var(--bronze); font-weight:600; display:block; margin-bottom:2px; letter-spacing:.04em}
.refs .ref-item:hover .ref-cap{opacity:1}

/* angle × lighting carousel */
.carousel{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#0d0d18}
.cz-stage{position:relative; aspect-ratio:16/9; background:#0d0d18}
.cz-stage img{width:100%; height:100%; object-fit:cover; display:block}
.cz-stage .cz-cap{position:absolute; left:14px; bottom:14px; font-family:var(--serif); font-size:21px; color:var(--paper); text-shadow:0 2px 14px rgba(0,0,0,.7)}
.cz-controls{padding:16px 18px 18px; display:flex; flex-direction:column; gap:12px; border-top:1px solid var(--line)}
.cz-row{display:flex; gap:12px; align-items:center}
.cz-lbl{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); width:54px; flex:none}
.cz-tabs{display:flex; gap:8px; flex-wrap:wrap}
.cz-tab{font-family:var(--sans); font-size:12px; letter-spacing:.04em; padding:7px 14px; border:1px solid var(--line); border-radius:20px; color:var(--paper-dim); background:transparent; cursor:pointer; transition:.2s}
.cz-tab:hover{border-color:rgba(184,118,42,.5); color:var(--paper)}
.cz-tab.active{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.cz-tab:disabled{opacity:.25; cursor:not-allowed}

.note{font-size:13.5px; color:var(--paper-dim); margin-top:20px; padding:16px 18px; border:1px solid var(--line); border-left:2px solid var(--bronze); border-radius:8px; background:var(--card)}
.note b{color:var(--paper); font-weight:500}
.pending{display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--bronze)}
.pending::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--bronze); box-shadow:0 0 10px var(--bronze)}

/* ---------- project switcher (index) cards ---------- */
.switch{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px}
@media(max-width:820px){ .switch{grid-template-columns:1fr} }
.pcard{display:block; text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--card); transition:.35s ease}
.pcard:hover{background:var(--card-hover); border-color:rgba(184,118,42,.35); transform:translateY(-3px)}
.pcard .viz{position:relative; aspect-ratio:16/10; background:#0d0d18; overflow:hidden}
.pcard .viz img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:.4s}
.pcard:hover .viz img{transform:scale(1.04); opacity:1}
.pcard .viz .badge{position:absolute; top:14px; left:14px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; background:rgba(18,18,31,.74); backdrop-filter:blur(6px); color:var(--paper); padding:6px 11px; border-radius:18px; border:1px solid var(--line)}
.pcard .pb{padding:22px 22px 26px}
.pcard .pb .sub{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); margin-bottom:8px}
.pcard .pb h3{font-family:var(--serif); font-weight:500; font-size:26px; line-height:1.08}
.pcard .pb p{font-size:13.5px; color:var(--paper-dim); margin-top:10px}
.pcard .stns{display:flex; gap:7px; margin-top:16px; flex-wrap:wrap}
.pcard .stn{font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:12px; border:1px solid var(--line); color:var(--paper-dim)}
.pcard .stn.on{color:var(--paper); border-color:rgba(184,118,42,.5)}
.pcard .stn.soon{opacity:.4}
.pcard .go{margin-top:18px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper)}

/* asset-status badges (per-project pages with incoming data) */
.status{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:20px;border:1px solid var(--line)}
.status.live{color:#7fd1a3;border-color:rgba(127,209,163,.4)} .status.live::before{content:'';width:7px;height:7px;border-radius:50%;background:#7fd1a3}
.status.incoming{color:var(--bronze);border-color:rgba(184,118,42,.4)} .status.incoming::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--bronze);box-shadow:0 0 10px var(--bronze)}
.station-stub{border:1px dashed var(--line);border-radius:16px;padding:30px;text-align:center;color:var(--paper-dim);background:var(--card)}
.station-stub .st{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)}
.station-stub h3{font-family:var(--serif);font-weight:500;font-size:24px;color:var(--paper);margin:8px 0 10px}

.close{padding:54px 0 20px; max-width:800px}
.close p{font-family:var(--serif); font-size:21px; color:var(--paper-dim); line-height:1.5}
.close p b{color:var(--paper); font-weight:500; font-style:normal}
footer{border-top:1px solid var(--line); margin-top:44px; padding:28px 0 60px; font-size:12px; color:var(--paper-dim); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px}
footer .lic{max-width:620px; line-height:1.6}

/* ---------- shared primitive: fullscreen toggle (R2) ---------- */
.fs-toggle{position:absolute; top:12px; right:12px; z-index:6; width:34px; height:34px; border-radius:50%;
  background:rgba(18,18,31,.78); border:1px solid var(--line); color:var(--paper); font-size:16px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(6px); transition:.2s}
.fs-toggle:hover{border-color:var(--bronze); color:var(--bronze)}
.carousel,.ba{position:relative}
.walk-frame{position:relative; border:1px solid var(--line); border-radius:16px; overflow:hidden; aspect-ratio:16/9; background:#0d0d18}
.walk-frame iframe{width:100%; height:100%; border:0; display:block}

/* ---------- shared primitive: one-scene-at-a-time flow (pilot — Lehman) ---------- */
body.scene-mode .scene{display:none}
body.scene-mode .scene.active{display:block}
body.scene-mode .pnav{display:none}
.topbar-tab{position:fixed; top:0; left:50%; transform:translateX(-50%); z-index:21; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper-dim); background:rgba(18,18,31,.75); border:1px solid var(--line); border-top:none;
  border-radius:0 0 14px 14px; padding:6px 16px 7px; cursor:pointer; backdrop-filter:blur(6px)}
.topbar-tab:hover{color:var(--paper); border-color:rgba(184,118,42,.45)}
.topbar{position:fixed; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 28px; background:linear-gradient(180deg, rgba(18,18,31,.94), transparent);
  opacity:0; transform:translateY(-100%); transition:opacity .3s, transform .3s; pointer-events:none}
.topbar.show{opacity:1; transform:translateY(0); pointer-events:auto}
.topbar .scene-nav{display:flex; gap:8px; align-items:center}
.topbar .scene-btn{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--paper-dim);
  background:rgba(232,240,246,.06); border:1px solid var(--line); border-radius:20px; padding:8px 14px; cursor:pointer; transition:.2s}
.topbar .scene-btn:hover,.topbar .scene-btn.active{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.topbar .scene-count{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-dim); white-space:nowrap}
@media(max-width:820px){ .topbar{flex-wrap:wrap; padding:12px 16px} }