/* ============================================================
   ALLSPIRITS — design tokens
   Palette: near-black ink, warm off-white air, one accent —
   ghost-light amber, for the lamp left burning on an empty stage.
   ============================================================ */
:root{
  --ink:#0B0B0D;
  --air:#EDEAE3;
  --ghost:#D2A24C;
  --smoke:#8E8B83;
  --measure:38rem;
  --pad:clamp(1.25rem,5vw,4rem);
  --display:'Iowan Old Style','Palatino Linotype','Book Antiqua',Palatino,'URW Palladio L',Georgia,serif;
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
}
[data-theme="dark"]{
  --bg:var(--ink);
  --fg:var(--air);
  --dim:var(--smoke);
  --hairline:rgba(237,234,227,.16);
  --slot:rgba(237,234,227,.04);
}
[data-theme="light"]{
  --bg:var(--air);
  --fg:var(--ink);
  --dim:#6B6860;
  --hairline:rgba(11,11,13,.18);
  --slot:rgba(11,11,13,.04);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  transition:background .6s ease,color .6s ease;
}
::selection{background:var(--ghost);color:var(--ink);}
a{color:inherit;text-decoration-color:var(--ghost);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--ghost);}
a:focus-visible,button:focus-visible{outline:2px solid var(--ghost);outline-offset:3px;border-radius:1px;}
.skip{position:absolute;left:-999px;top:0;background:var(--ghost);color:var(--ink);padding:.6rem 1rem;z-index:99;}
.skip:focus{left:1rem;top:1rem;}

/* ---------- nav ---------- */
header.site{
  position:fixed;inset:0 0 auto 0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem var(--pad);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.wordmark{font-family:var(--display);font-size:1.05rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;}
.wordmark:hover{color:var(--fg);}
.wordmark em{font-style:normal;color:var(--ghost);}
nav ul{display:flex;gap:1.6rem;list-style:none;}
nav a{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--dim);}
nav a:hover{color:var(--ghost);}
#themeToggle{
  background:none;border:1px solid var(--hairline);color:var(--dim);
  font:inherit;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.35rem .8rem;cursor:pointer;border-radius:999px;
}
#themeToggle:hover{color:var(--ghost);border-color:var(--ghost);}
@media (max-width:700px){nav ul{display:none;}}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--pad);
}
.hero h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.4rem,7.5vw,5.4rem);
  letter-spacing:.14em;text-transform:uppercase;line-height:1.05;
}
.hero h1 em{font-style:normal;color:var(--ghost);}
.hero p.thesis{
  margin-top:2.2rem;max-width:26ch;
  font-family:var(--display);
  font-size:clamp(1.25rem,3vw,1.9rem);
  line-height:1.45;color:var(--dim);
}
.hero p.thesis strong{font-weight:400;color:var(--fg);}
/* letters condense out of air */
.condense span{
  display:inline-block;opacity:0;filter:blur(10px);transform:translateY(.2em);
  animation:condense 1.4s cubic-bezier(.2,.6,.2,1) forwards;
  animation-delay:calc(var(--i) * 45ms);
}
@keyframes condense{to{opacity:1;filter:blur(0);transform:none;}}
.hero .down{
  margin-top:4rem;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;
}

/* ---------- sections ---------- */
main{display:block;}
section.block{
  padding:clamp(6rem,14vh,10rem) var(--pad);
  border-top:1px solid var(--hairline);
}
.eyebrow{
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ghost);
  margin-bottom:2.4rem;
}
.prose{max-width:var(--measure);}
.prose p + p{margin-top:1.2em;}
.prose .lede{font-family:var(--display);font-size:1.35rem;line-height:1.5;}
h2.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* dissolve-in on scroll */
.reveal{opacity:0;filter:blur(6px);transform:translateY(14px);
  transition:opacity 1.1s ease,filter 1.1s ease,transform 1.1s ease;}
.reveal.in{opacity:1;filter:blur(0);transform:none;}

/* ---------- interstitial quote ---------- */
.interstitial{
  padding:clamp(7rem,20vh,13rem) var(--pad);
  border-top:1px solid var(--hairline);
  text-align:center;
}
.interstitial blockquote{
  font-family:var(--display);
  font-size:clamp(1.4rem,3.4vw,2.3rem);
  line-height:1.6;max-width:34ch;margin:0 auto;
}
.interstitial .word{
  display:inline-block;opacity:0;filter:blur(8px);
  transition:opacity 1.2s ease,filter 1.2s ease;
  transition-delay:calc(var(--w) * 120ms);
}
.interstitial.in .word{opacity:1;filter:blur(0);}
.interstitial .fadeword{transition-duration:2.4s;}
.interstitial.in .fadeword{opacity:.35;}
.interstitial cite{
  display:block;margin-top:2rem;font-style:normal;
  font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);
}

/* ---------- work ---------- */
.flagship{max-width:56rem;}
.flagship h3{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,5vw,3.4rem);letter-spacing:.04em;
}
.flagship .credit{margin-top:.6rem;color:var(--dim);font-size:.95rem;}
.flagship .desc{margin-top:1.6rem;max-width:var(--measure);}
.status{
  display:inline-block;margin-top:1.6rem;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ghost);border:1px solid var(--ghost);
  padding:.35rem .85rem;border-radius:999px;
}
.img-slot{
  margin-top:2.6rem;aspect-ratio:16/7;width:100%;
  background:var(--slot);border:1px dashed var(--hairline);
  display:flex;align-items:center;justify-content:center;
}
.img-slot span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);}
.slate{
  margin-top:5rem;display:grid;gap:1px;background:var(--hairline);
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  border:1px solid var(--hairline);
}
.card{background:var(--bg);padding:2.2rem 1.8rem;display:flex;flex-direction:column;gap:.9rem;transition:background .6s ease;}
.card h4{font-family:var(--display);font-weight:400;font-size:1.5rem;}
.card .form{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);}
.card p{font-size:.95rem;color:var(--dim);}
.card .status{margin-top:auto;align-self:flex-start;}

/* ---------- people ---------- */
.people-grid{display:grid;gap:3rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));max-width:56rem;}
.person h4{font-family:var(--display);font-weight:400;font-size:1.35rem;}
.person .role{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ghost);margin-top:.35rem;}
.person p{margin-top:.8rem;font-size:.95rem;color:var(--dim);}
.person.placeholder h4{color:var(--dim);}

/* ---------- contact & footer ---------- */
.contact a.mail{
  font-family:var(--display);
  font-size:clamp(1.4rem,4vw,2.4rem);
  text-decoration-thickness:1px;
}
footer.site{
  padding:3rem var(--pad);border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:.8rem;color:var(--dim);
}
footer a{color:var(--dim);}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .condense span{animation:none;opacity:1;filter:none;transform:none;}
  .reveal{opacity:1;filter:none;transform:none;transition:none;}
  .interstitial .word{opacity:1;filter:none;transition:none;}
  .interstitial.in .fadeword{opacity:.35;}
  body{transition:none;}
}