/* ============================================================
   Somnaut — "Полусон"
   One dark commitment. One easing family. One rhythm.
   ponytail: no light theme on purpose — a dream has one look,
   and print styles cover the only case that needed the other.
   ============================================================ */

/* ---- 1. Tokens ------------------------------------------- */
:root{
  color-scheme:dark;

  --void:#06070c;
  --fog:#0b0d15;
  --fg:#eceaf4;
  --dim:#8d8ba6;
  --faint:#2e3040;
  --line:#191c29;

  --lucid:#8aa2ff;
  --ember:#ff7a45;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.87,0,.13,1);
  --t1:150ms; --t2:300ms; --t3:600ms; --t4:1200ms;

  --pad:clamp(1.25rem,5vw,4rem);
  --stack:clamp(5rem,15vh,11rem);
  --measure:68ch;
  --shell:74rem;

  --fs-mark:clamp(4.2rem,18vw,15rem);
  --fs-xl:clamp(2.1rem,6vw,4.4rem);
  --fs-l:clamp(1.5rem,3vw,2.2rem);
  --fs-m:clamp(1.1rem,1.3vw,1.35rem);
  --fs-b:clamp(1rem,.35vw + .92rem,1.125rem);
  --fs-s:.875rem;
  --fs-xs:.75rem;
}

/* ---- 2. Fonts (self-hosted: the privacy policy promises it) */
@font-face{
  font-family:Fraunces;
  src:url(/fonts/fraunces.woff2) format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:InterVar;
  src:url(/fonts/inter.woff2) format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---- 3. Reset -------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
body{
  margin:0;
  min-height:100svh;
  /* The canvas is opaque and covers this, so it costs nothing when WebGL
     runs — and it is the whole backdrop when it does not, or with JS off. */
  background:
    radial-gradient(120% 80% at 50% 0%,#12162a 0%,transparent 60%),
    radial-gradient(90% 60% at 80% 100%,#160f14 0%,transparent 55%),
    var(--void);
  color:var(--fg);
  font:400 var(--fs-b)/1.6 InterVar,ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--lucid);color:var(--void)}
:focus-visible{outline:2px solid var(--lucid);outline-offset:4px;border-radius:2px}

.skip{
  position:fixed;top:0;left:0;z-index:200;
  padding:.75rem 1.25rem;background:var(--lucid);color:var(--void);
  font-size:var(--fs-s);font-weight:600;
  transform:translateY(-110%);transition:transform var(--t2) var(--ease);
}
.skip:focus{transform:none}

/* ---- 4. Type styles -------------------------------------- */
.display{
  font-family:Fraunces,ui-serif,Georgia,serif;
  font-optical-sizing:auto;
  font-weight:400;
  letter-spacing:-.03em;
  line-height:.94;
}
.eyebrow{
  font-size:var(--fs-xs);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--dim);
  margin-bottom:1.75rem;
}
.eyebrow::before{
  content:"";display:inline-block;
  width:1.75rem;height:1px;margin-right:.85rem;
  vertical-align:.28em;background:var(--faint);
}
.dim{color:var(--dim)}

/* Links: one hairline that draws itself in. */
a{color:inherit;text-decoration:none}
.u{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 1px;
  transition:background-size var(--t2) var(--ease),color var(--t2) var(--ease);
  padding-bottom:.12em;
}
.u:hover,.u:focus-visible{background-size:100% 1px}

/* ---- 5. Backdrop: the field ------------------------------ */
#field{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:-2;display:block;
  opacity:0;transition:opacity var(--t4) var(--ease);
}
.is-ready #field{opacity:1}
/* Reading pages keep the field, quiet and frozen. */
.reading.is-ready #field{opacity:.3}

/* ---- 6. Boot: an EEG line that opens the site ------------ */
.boot{
  position:fixed;inset:0;z-index:150;
  background:var(--void);
  display:grid;place-items:center;
  transition:opacity var(--t3) var(--ease),visibility var(--t3);
}
html:not(.js) .boot{display:none}
.boot__line{
  display:block;height:1px;width:5rem;background:var(--fg);
  transform-origin:50% 50%;
  animation:pulse 2.2s var(--ease-io) infinite;
}
@keyframes pulse{
  0%,100%{transform:scaleX(.35);opacity:.35}
  50%{transform:scaleX(1);opacity:.9}
}
.boot.is-open .boot__line{animation:spike 620ms var(--ease) forwards}
@keyframes spike{
  0%{transform:scaleX(.35)}
  22%{transform:scaleX(.06);opacity:1}
  100%{transform:scaleX(60);opacity:0}
}
.boot.is-open{opacity:0;visibility:hidden;transition-delay:320ms}

/* ---- 7. Cursor: the lucid point -------------------------- */
.cursor{
  position:fixed;top:0;left:0;z-index:120;
  width:30px;height:30px;margin:-15px 0 0 -15px;
  border:1px solid var(--lucid);border-radius:50%;
  pointer-events:none;opacity:0;
  transition:opacity var(--t2),width var(--t2) var(--ease),
             height var(--t2) var(--ease),margin var(--t2) var(--ease),
             background-color var(--t2) var(--ease),border-color var(--t2) var(--ease);
}
.has-cursor .cursor{opacity:.75}
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor .redact{cursor:none}
.has-cursor .cursor.is-near{
  width:56px;height:56px;margin:-28px 0 0 -28px;
  background:color-mix(in srgb,var(--lucid) 12%,transparent);
  border-color:var(--ember);
}

/* ---- 8. Chrome: topbar ----------------------------------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem var(--pad);
  font-size:var(--fs-s);
}
.topbar::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb,var(--void) 72%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  opacity:0;
}
@supports (animation-timeline:scroll()){
  .topbar::before{
    animation:fade-in linear both;
    animation-timeline:scroll(root);
    animation-range:0 140px;
  }
}
@keyframes fade-in{to{opacity:1}}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:500;letter-spacing:-.01em}
.brand svg{width:20px;height:20px;transition:transform var(--t3) var(--ease)}
.brand:hover svg{transform:rotate(-10deg)}
.topbar nav{display:flex;gap:1.5rem;color:var(--dim)}
.topbar nav a:hover{color:var(--fg)}
@media(max-width:34rem){.topbar nav a[data-opt]{display:none}}
@media(max-width:30rem){.brand__ent{display:none}}

/* ---- 9. Layout ------------------------------------------- */
.shell{width:min(100% - var(--pad)*2,var(--shell));margin-inline:auto}
main{position:relative;z-index:1}
section{padding-block:0 var(--stack)}

/* ---- 10. Hero -------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:8rem 5rem;
}
/* fit-content: the rule under the lockup spans exactly the wordmark */
.wordmark{
  display:block;width:fit-content;max-width:100%;
  font-size:var(--fs-mark);
  margin-left:-.055em;             /* optical: pull the S onto the grid */
}
.mark{font-size:1em;display:flex;flex-wrap:wrap}
.lockup{
  display:block;
  margin-top:.7rem;padding-top:.75rem;
  border-top:1px solid color-mix(in srgb,var(--dim) 38%,transparent);
  font-family:InterVar,ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(.6rem,1.1vw,.92rem);
  font-weight:500;letter-spacing:.06em;
  color:var(--dim);
  /* one word per letter + justify = the tracking spreads to the exact width */
  text-align:justify;text-align-last:justify;
}
.mark .g{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.mark i{display:block;font-style:normal}
.js .mark i{transform:translateY(105%);opacity:0}
.js.is-ready .mark i{
  animation:glyph 900ms var(--ease) forwards;
  animation-delay:calc(var(--i) * 42ms + 120ms);
}
@keyframes glyph{
  from{transform:translateY(105%);opacity:0;filter:blur(6px)}
  to{transform:none;opacity:1;filter:blur(0)}
}
.hero__sub{
  font-size:var(--fs-l);color:var(--dim);
  margin-top:1.6rem;max-width:22ch;text-wrap:balance;
}
.hero__meta{
  margin-top:auto;padding-top:4rem;
  display:flex;flex-wrap:wrap;gap:.5rem 2rem;
  font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.js .lockup,.js .hero__sub,.js .hero__meta{opacity:0}
.js.is-ready .lockup{animation:rise 900ms var(--ease) 430ms forwards}
.js.is-ready .hero__sub{animation:rise 900ms var(--ease) 520ms forwards}
.js.is-ready .hero__meta{animation:rise 900ms var(--ease) 700ms forwards}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.cue{
  position:absolute;bottom:1.75rem;left:50%;translate:-50% 0;
  display:grid;justify-items:center;gap:.7rem;
  font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
}
.cue span{
  display:block;width:1px;height:2.5rem;
  background:linear-gradient(var(--faint),transparent);
  animation:drip 2.6s var(--ease-io) infinite;
}
@keyframes drip{
  0%{transform:scaleY(0);transform-origin:50% 0}
  50%{transform:scaleY(1);transform-origin:50% 0}
  50.1%{transform:scaleY(1);transform-origin:50% 100%}
  100%{transform:scaleY(0);transform-origin:50% 100%}
}

/* ---- 11. Reveals (native scroll-driven, degrades to visible) */
@supports (animation-timeline:view()){
  .rise{
    animation:rise linear both;
    animation-timeline:view();
    animation-range:entry 8% cover 34%;
  }
}

/* ---- 12. Manifesto --------------------------------------- */
.lead{
  font-family:Fraunces,ui-serif,Georgia,serif;
  font-optical-sizing:auto;font-weight:300;
  font-size:var(--fs-xl);line-height:1.14;letter-spacing:-.025em;
  max-width:19ch;text-wrap:balance;
}
.lead em{font-style:italic;color:var(--lucid)}
.after{margin-top:2.5rem;max-width:46ch;color:var(--dim);font-size:var(--fs-m)}

/* ---- 13. Redacted spec ----------------------------------- */
.spec__list{border-top:1px solid var(--line);max-width:44rem}
.row{
  display:grid;grid-template-columns:9rem 1fr;gap:1rem;
  padding:1.05rem 0;border-bottom:1px solid var(--line);
  align-items:baseline;
}
.row dt{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.row dd{font-size:var(--fs-m)}
@media(max-width:34rem){.row{grid-template-columns:1fr;gap:.3rem}}

.redact{
  position:relative;display:inline-block;
  color:var(--dim);cursor:help;
}
.redact::after{
  content:"";position:absolute;inset:-.18em -.4em;
  background:var(--faint);border-radius:2px;
  transform-origin:0 50%;
}
.redact:hover::after,.redact:focus-visible::after{animation:peek 1.1s var(--ease)}
@keyframes peek{
  0%{transform:scaleX(1)}
  16%{transform:scaleX(0)}
  62%{transform:scaleX(0)}
  100%{transform:scaleX(1)}
}
.spec__note{margin-top:1.5rem;font-size:var(--fs-s);color:var(--dim)}

/* ---- 14. Who --------------------------------------------- */
.who__list{display:grid;border-top:1px solid var(--line);max-width:44rem}
.who__list li{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 1rem;
  padding:1.35rem .1rem;border-bottom:1px solid var(--line);
  transition:padding-left var(--t3) var(--ease),background-color var(--t3) var(--ease);
}
.who__list li:hover{padding-left:1.2rem;background:color-mix(in srgb,var(--fog) 65%,transparent)}
.who__name{font-family:Fraunces,ui-serif,serif;font-size:var(--fs-l);font-weight:400;letter-spacing:-.02em}
.who__role{font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}

/* ---- 15. Contact + footer -------------------------------- */
.contacts{display:grid;border-top:1px solid var(--line);max-width:44rem}
.contacts li{
  display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:baseline;gap:.35rem 1rem;padding:1.15rem .1rem;
  border-bottom:1px solid var(--line);
}
.contacts span{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.contacts a{font-size:var(--fs-m)}
.contacts a:hover{color:var(--ember)}

.foot{border-top:1px solid var(--line);padding:3rem var(--pad) 2.5rem;position:relative;z-index:1}
.foot__in{
  width:min(100%,var(--shell));margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:1.5rem 3rem;justify-content:space-between;align-items:flex-end;
}
.foot nav{display:flex;flex-wrap:wrap;gap:1.25rem;font-size:var(--fs-s);color:var(--dim)}
.foot nav a:hover{color:var(--fg)}
.colophon{font-size:var(--fs-xs);color:var(--dim);max-width:36ch;line-height:1.7}
.colophon+.stamp{margin-top:.75rem}
.stamp{font-size:var(--fs-xs);letter-spacing:.16em;color:var(--dim);font-variant-numeric:tabular-nums}

/* ---- 16. Reading pages ----------------------------------- */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:110;
  background:var(--lucid);transform:scaleX(0);transform-origin:0 50%;
}
@supports (animation-timeline:scroll()){
  .progress{animation:grow linear both;animation-timeline:scroll(root)}
}
@keyframes grow{to{transform:scaleX(1)}}

.reading main{padding-top:8rem;padding-bottom:5rem}
.layout{
  width:min(100% - var(--pad)*2,var(--shell));margin-inline:auto;
  display:grid;gap:3rem;grid-template-columns:minmax(0,1fr);
}
@media(min-width:64rem){
  .layout{
    grid-template-columns:13rem minmax(0,var(--measure));
    gap:clamp(3rem,6vw,6rem);justify-content:center;
  }
  .toc{
    position:sticky;top:6.5rem;align-self:start;
    max-height:calc(100svh - 9rem);overflow-y:auto;overflow-x:hidden;
    scrollbar-width:thin;scrollbar-color:var(--faint) transparent;
  }
}
@media(max-width:63.99rem){.toc{display:none}}
/* minmax(0,1fr): without it the grid track sizes to the longest label,
   the item overflows the panel, and text-overflow never fires */
.toc ol{display:grid;grid-template-columns:minmax(0,1fr);gap:.15rem;font-size:var(--fs-s)}
.toc a{
  display:block;padding:.3rem 0 .3rem .9rem;color:#7a7891;
  border-left:1px solid var(--line);
  transition:color var(--t2) var(--ease),border-color var(--t2) var(--ease);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.toc a:hover{color:var(--fg)}
.toc a.is-active{color:var(--fg);border-color:var(--lucid)}
.toc .lvl3{padding-left:1.7rem;font-size:var(--fs-xs)}

.prose{max-width:var(--measure)}
.prose h1{
  font-family:Fraunces,ui-serif,serif;font-optical-sizing:auto;font-weight:400;
  font-size:var(--fs-xl);letter-spacing:-.03em;line-height:1.02;margin-bottom:.6rem;
}
.prose h2{
  font-family:Fraunces,ui-serif,serif;font-weight:400;font-size:var(--fs-l);
  letter-spacing:-.02em;line-height:1.2;margin:3.2rem 0 .9rem;
  scroll-margin-top:6.5rem;position:relative;
}
.prose h3{font-size:var(--fs-m);font-weight:600;margin:2rem 0 .6rem;scroll-margin-top:6.5rem;position:relative}
.prose p,.prose li{color:#d6d4e2;text-wrap:pretty}
.prose p+p{margin-top:1rem}
.prose ul{margin:1rem 0;display:grid;gap:.55rem}
.prose ul li{position:relative;padding-left:1.4rem}
.prose ul li::before{content:"";position:absolute;left:.15rem;top:.75em;width:5px;height:1px;background:var(--lucid)}
.prose strong{color:var(--fg);font-weight:600}
.prose a{
  color:var(--lucid);
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px;
  transition:background-size var(--t2) var(--ease),color var(--t2) var(--ease);
}
.prose a:hover{color:var(--ember);background-size:100% 2px}
.prose .meta{color:var(--dim);font-size:var(--fs-s);margin-bottom:2.5rem}
.prose .lede{color:var(--dim);font-size:var(--fs-m);margin-bottom:2rem;max-width:44ch}

.anchor{
  position:absolute;left:-1.6rem;top:0;width:1.6rem;
  color:var(--dim);opacity:0;font-weight:400;background:none;
  transition:opacity var(--t2) var(--ease);
}
h2:hover>.anchor,h3:hover>.anchor,.anchor:focus-visible{opacity:1}
@media(max-width:80rem){.anchor{display:none}}

.prose table{border-collapse:collapse;width:100%;margin:1.4rem 0;font-size:var(--fs-s);display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:.65rem .8rem;text-align:left;vertical-align:top}
.prose th{
  color:var(--dim);font-weight:600;font-size:var(--fs-xs);
  letter-spacing:.1em;text-transform:uppercase;background:var(--fog);
}
.prose code{background:var(--fog);border:1px solid var(--line);padding:.1rem .4rem;border-radius:3px;font-size:.9em}

/* ---- 17. 404 --------------------------------------------- */
.lost{min-height:100svh;display:grid;align-content:center;gap:1.25rem}
.back{margin-top:2.5rem;font-size:var(--fs-m);color:var(--lucid)}
.back:hover{color:var(--ember)}
.lost h1{font-size:clamp(5rem,22vw,16rem);line-height:.85}

/* ---- 18. Dreaming (type "sleep") ------------------------- */
.dreaming{--lucid:#c08aff;--ember:#ff5fa2}
.dreaming .display,.dreaming .lead,.dreaming .who__name,
.dreaming .prose h1,.dreaming .prose h2{
  font-variation-settings:"opsz" 9;
  animation:drift 7s var(--ease-io) infinite alternate;
}
@keyframes drift{
  from{letter-spacing:-.03em;transform:skewX(0)}
  to{letter-spacing:.012em;transform:skewX(-1.6deg)}
}

/* ---- 19. Cross-page transitions (native, 6 lines) -------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out 240ms var(--ease-io) both}
::view-transition-new(root){animation:vt-in 460ms var(--ease) both}
@keyframes vt-out{to{opacity:0;filter:blur(5px)}}
@keyframes vt-in{from{opacity:0;filter:blur(5px)}}

/* ---- 20. Reduced motion ---------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .js .lockup,.js .hero__sub,.js .hero__meta,.js .mark i{opacity:1!important;transform:none!important;filter:none!important}
  .redact::after{animation:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}

/* ---- 21. Print: legal pages have to survive paper -------- */
@media print{
  :root{--fg:#000;--dim:#444;--line:#bbb;--lucid:#000}
  #field,.boot,.cursor,.topbar,.progress,.toc,.cue,.anchor,.foot nav,.skip{display:none!important}
  body{background:#fff;color:#000;font-size:10.5pt}
  .prose p,.prose li,.prose strong{color:#000}
  .prose a{color:#000;background:none;text-decoration:underline}
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
  .prose h2,.prose h3{break-after:avoid}
  .prose table,.prose ul{break-inside:avoid}
  .reading main{padding-top:0}
  .layout{display:block}
  .foot{border-color:#bbb}
}