/* liminal — hero.
   Proportions and type scale taken from the reference site's own stylesheet
   rather than eyeballed: --pad 4.1vw, h1 clamp(78,7.3vw,136) at -.065em and
   line-height .99, deck clamp(17,1.6vw,25), the sculpture absolutely placed
   from 32% to 99% of the width. Palette, wordmark and copy are ours.
   Headline is Inter 500: Chris asked for a little more weight than 400. */

@font-face{font-family:"Instrument Serif";src:url("assets/InstrumentSerif-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/Inter-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/Inter-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --void:#000208; --deep:#000c12; --room:#00171e; --wall:#012a30;
  --stone:#407575; --light:#d0eee7; --vermillion:#ff5b2e; --acid:#f5f400; --muted:#879b99;
  --line:#d0eee72b;
  --pad:4.1vw;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--void); color:var(--light);
  font-family:var(--sans); font-weight:400; font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

.frame{
  position:relative; height:100svh; min-height:700px;
  margin:14px; border:1px solid rgba(64,117,117,.28); border-radius:18px;
  overflow:hidden; isolation:isolate;
  background:radial-gradient(ellipse at 74% 56%,
    #0b3a3f 0%, #04242b 26%, #011a20 54%, #000a10 84%, var(--void) 100%);
}

/* ------------------------------------------------------------------ header */
header{
  position:absolute; left:var(--pad); right:var(--pad); top:32px;
  display:flex; align-items:center; justify-content:space-between; z-index:5;
}
.wordmark{font-family:var(--serif); font-size:33px; letter-spacing:.012em; color:var(--acid)}
nav{display:flex; align-items:center; gap:44px; font-size:14px; color:#b7c9c6}
nav a:hover{color:var(--light)}
.pill{
  border:1px solid rgba(208,238,231,.38); border-radius:99px;
  padding:15px 24px; color:var(--light); font-size:14px;
}
.pill:hover{background:var(--light); color:var(--void)}

/* -------------------------------------------------------------------- copy */
main{position:absolute; inset:0}
.copy{
  position:absolute; left:var(--pad); top:48%;
  transform:translateY(-46%); z-index:3; max-width:44%;
  pointer-events:none;
}
.copy a{pointer-events:auto}
h1{
  margin:0 0 29px; font-weight:500;
  font-size:clamp(78px,7.3vw,136px);
  letter-spacing:-.065em; line-height:.99;
  color:#f2fbf8;
}
.deck{
  margin:0 0 44px; font-size:clamp(17px,1.6vw,25px);
  color:#b4c8c4; letter-spacing:-.025em; line-height:1.5;
}
.cta{
  display:inline-flex; align-items:center; gap:42px;
  background:var(--acid); color:#11140d;
  border-radius:99px; padding:18px 25px; font-size:14px; line-height:1.4;
}
.cta:hover{background:#ffff6b}

/* ------------------------------------------------------------------- stage */
.stage{
  position:absolute; left:32%; right:1%; top:13%; bottom:10%;
  z-index:1; cursor:default; will-change:transform;
}
.stage:after{
  content:''; position:absolute; width:64%; height:6%; bottom:14%; left:18%;
  border-radius:50%; background:#0008; filter:blur(22px); z-index:-1;
  pointer-events:none;
}
.stage canvas{
  position:absolute; width:100%; height:100%; object-fit:contain;
  opacity:0; transition:opacity .6s ease;
}
body.ready .stage canvas{opacity:1}
.stage.dragging{cursor:grabbing!important}

/* ------------------------------------------------------------------ footer */
footer{
  position:absolute; bottom:35px; left:var(--pad); right:var(--pad);
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:15px; z-index:5;
}
.label{font-size:10px; letter-spacing:.2em; color:#b2c6c2}
.label:before{
  content:''; display:inline-block; width:38px; height:1px;
  background:#6d8b88; vertical-align:middle; margin-right:20px;
}
.controls{display:flex; gap:8px; margin-left:auto; margin-right:28px; align-items:center}
.controls button{
  background:transparent; border:1px solid var(--line); color:#b7cbc7;
  font-size:10px; padding:10px 13px; border-radius:99px; white-space:nowrap;
}
.controls button:hover{border-color:var(--acid); color:var(--acid)}
.status{font-size:10px; color:var(--stone); letter-spacing:.04em}
.hint{font-size:11px; color:#9fb5b1}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1000px){
  :root{--pad:5vw}
  nav{gap:22px; font-size:12px}
  .frame{min-height:920px}
  .copy{top:130px; transform:none; max-width:86%}
  h1{font-size:76px; line-height:.99}
  .deck{font-size:17px; margin-bottom:25px}
  .stage{left:8%; right:0; top:430px; bottom:92px}
  footer{bottom:28px}
  .controls{margin-right:0; gap:5px}
  .controls button{font-size:9px; padding:9px 11px}
}
@media (max-width:600px){
  :root{--pad:7vw}
  header{top:28px}
  .wordmark{font-size:25px}
  nav{font-size:11px; gap:18px}
  .copy{top:108px}
  h1{font-size:60px; letter-spacing:-.055em}
  .deck{font-size:15px; max-width:300px}
  .cta{font-size:12px; padding:15px 20px; gap:30px}
  .stage{left:0; right:0; top:400px; bottom:120px}
  footer{flex-direction:column; align-items:flex-start; gap:14px}
  .controls{margin:0}
  .status{display:none}
}
@media (max-width:600px) and (max-height:760px){
  .copy{top:96px}
  h1{font-size:50px; margin-bottom:20px}
  .deck{margin-bottom:20px}
}
@media (prefers-reduced-motion:reduce){
  .stage canvas{transition:none}
}

/* ------------------------------------------------- touch targets on phones
   Every link and button a thumb has to hit is at least 44px tall, per Apple's
   guidance. Type size and layout are unchanged: only the hit area grows. */
.pill-short{display:none}
@media (max-width:600px){
  nav{gap:14px; font-size:12px}
  nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 4px}
  nav .pill{display:inline-flex; min-height:44px; padding:0 16px; font-size:12px; white-space:nowrap}
  .pill-long{display:none}
  .pill-short{display:inline}
  .cta{min-height:44px}
  .site-footer .foot-grid a,
  .site-footer .foot-base a,
  .site-footer .legal a{display:inline-block; min-height:44px; line-height:44px}
  .site-footer .foot-brand .wordmark{display:inline-block; min-height:44px; line-height:44px}
  .pillar-link,.as-link{display:inline-flex; align-items:center; min-height:44px}
  header .wordmark,.page-header .wordmark{display:inline-flex; align-items:center; min-height:44px}
  .controls button{min-height:44px; display:inline-flex; align-items:center}
  .ask button,.pb-form button,.pb-ask button{min-height:44px}
  .citation{display:block; padding:6px 0}
  .source-list a{display:flex; align-items:center; min-height:44px}
}

/* ------------------------------------------------------------ the front door
   Every "Talk to Vivian" on the site: her face in the header pill and the acid
   buttons, who you are about to meet on the home finale, a way in from her card
   on the practice page, and the quiet line back to her on the contact page.
   Words and address live in door.js (one constant). */
.pill.door,.page-header .pill.door{display:inline-flex; align-items:center; gap:10px; padding:7px 22px 7px 7px}
.pill.door img{width:30px; height:30px; border-radius:50%; object-fit:cover; object-position:50% 40%;
  border:1px solid rgba(208,238,231,.35); flex:none}
.pill.door:hover img{border-color:var(--void)}
.cta.door{gap:14px; padding:8px 25px 8px 8px}
.cta.door img{width:36px; height:36px; border-radius:50%; object-fit:cover; object-position:50% 40%; flex:none}
.finale .meet{display:flex; align-items:center; justify-content:center; gap:14px; margin:0 0 30px}
.finale .meet img{width:64px; height:64px; border-radius:50%; object-fit:cover; object-position:50% 40%;
  border:1px solid rgba(208,238,231,.3)}
.finale .meet p{margin:0; text-align:left; font-size:13px; line-height:1.45; color:#a2bab6}
.finale .meet b{display:block; font-family:var(--serif); font-weight:400; font-size:24px; color:#f2fbf8; letter-spacing:.005em}
.person .talk-link{display:inline-flex; align-items:center; gap:10px; margin-top:6px; font-size:15px; color:var(--acid);
  border-bottom:1px solid rgba(245,244,0,.35); padding-bottom:3px}
.person .talk-link:hover{color:#ffff6b}
.door-aside{display:flex; align-items:center; gap:16px; margin:34px 0 0; padding:14px 18px 14px 14px; max-width:560px;
  border:1px solid rgba(208,238,231,.18); border-radius:16px; background:rgba(0,23,30,.5)}
.door-aside img{width:52px; height:52px; border-radius:50%; object-fit:cover; object-position:50% 40%; flex:none}
.door-aside p{margin:0; font-size:14px; line-height:1.55; color:#b4c8c4}
.door-aside a{color:var(--acid); border-bottom:1px solid rgba(245,244,0,.35)}
@media (max-width:600px){
  nav .pill.door,.page-header nav .pill.door{padding:0 14px 0 5px; gap:8px}
  .pill.door img{width:32px; height:32px}
  .cta.door{padding:6px 20px 6px 6px}
  .cta.door img{width:32px; height:32px}
  .person .talk-link{min-height:44px}
}