/* ─────────────────────────────────────────────
   NIGHT STUDY — design system
   A nocturnal field notebook: indigo walls,
   terminal glow, hairline structure.
   ───────────────────────────────────────────── */

/* ── Fonts ──────────────────────────────────── */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/fraunces-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/fraunces-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/fraunces-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300;font-display:swap;src:url("/fonts/fraunces-latin-300-italic.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/fraunces-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/space-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/space-mono-latin-700-normal.woff2") format("woff2")}

/* ── Tokens ─────────────────────────────────── */
/* Dark is the default. Explicit [data-theme] wins;
   the prefers-color-scheme block is the system fallback. */
:root{
  color-scheme: light dark;

  /* dark (default) */
  --bg: #0d0d18;
  --surface: #141424;
  --ink: #e6e2d6;
  --ink-soft: #8d89a0;
  --indigo: #8d7ce6;        /* accent: links, italics, drop cap, hovers */
  --indigo-deep: #4B3F8F;   /* borders, glows, favicon */
  --glow: rgba(75, 63, 143, .35);
  --ember: #d98e4a;         /* SPARINGLY: ::selection bg tint, active-nav dot only */
  --line: rgba(230, 226, 214, .14);
  --line-soft: rgba(230, 226, 214, .07);
  --ease: cubic-bezier(.2, .8, .2, 1);

  --serif: "Fraunces", Georgia, serif;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg: #f1eee6;
    --surface: #e9e5da;
    --ink: #1a1826;
    --ink-soft: #625d72;
    --indigo: #4B3F8F;
    --indigo-deep: #4B3F8F;
    --glow: rgba(75, 63, 143, .10);
    --ember: #b06a28;
    --line: rgba(26, 24, 38, .18);
    --line-soft: rgba(26, 24, 38, .08);
  }
}
:root[data-theme="light"]{
  --bg: #f1eee6;
  --surface: #e9e5da;
  --ink: #1a1826;
  --ink-soft: #625d72;
  --indigo: #4B3F8F;
  --indigo-deep: #4B3F8F;
  --glow: rgba(75, 63, 143, .10);
  --ember: #b06a28;
  --line: rgba(26, 24, 38, .18);
  --line-soft: rgba(26, 24, 38, .08);
}
:root[data-theme="dark"]{
  --bg: #0d0d18;
  --surface: #141424;
  --ink: #e6e2d6;
  --ink-soft: #8d89a0;
  --indigo: #8d7ce6;
  --indigo-deep: #4B3F8F;
  --glow: rgba(75, 63, 143, .35);
  --ember: #d98e4a;
  --line: rgba(230, 226, 214, .14);
  --line-soft: rgba(230, 226, 214, .07);
}

/* ── Reset / base ───────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:300;
  font-size:19px;
  line-height:1.7;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .5s ease, color .5s ease;
  overflow-x:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1}
img,svg,canvas{display:block;max-width:100%}
h1,h2,h3,h4{font-optical-sizing:auto;font-weight:400}
em,i{font-style:italic;color:var(--indigo)}
strong{font-weight:600}
a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--indigo);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .3s var(--ease), text-decoration-color .3s var(--ease),
             text-decoration-thickness .2s var(--ease), text-underline-offset .2s var(--ease);
}
a:hover{text-decoration-thickness:2px;text-underline-offset:4px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--indigo);outline-offset:3px}

::selection{background:var(--indigo-deep);color:var(--ink)}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) ::selection{background:color-mix(in srgb, var(--ember) 30%, transparent);color:var(--ink)}
}
:root[data-theme="light"] ::selection{background:color-mix(in srgb, var(--ember) 30%, transparent);color:var(--ink)}
:root[data-theme="dark"] ::selection{background:var(--indigo-deep);color:var(--ink)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.wrap{width:100%;max-width:700px;margin:0 auto;padding:0 24px}

/* ── Atmosphere ─────────────────────────────── */
/* Desk lamp: ambient glow from top-center, faint pool low-right. */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1100px 640px at 50% -14%, var(--glow), transparent 70%),
    radial-gradient(760px 560px at 86% 106%, color-mix(in srgb, var(--glow) 55%, transparent), transparent 72%);
}
/* Grain: full-viewport turbulence noise. */
body::after{
  content:"";
  position:fixed;inset:0;z-index:2;
  pointer-events:none;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Cursor bloom (positioned by /js/heat.js) */
.heat-bloom{
  position:fixed;top:0;left:0;width:340px;height:340px;border-radius:50%;
  pointer-events:none;z-index:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, var(--glow) 0%, transparent 62%);
  mix-blend-mode:screen;
  opacity:0;transition:opacity .4s ease;
  will-change:transform;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .heat-bloom{mix-blend-mode:normal}
}
:root[data-theme="light"] .heat-bloom{mix-blend-mode:normal}
:root[data-theme="dark"] .heat-bloom{mix-blend-mode:screen}

/* Blinking terminal cursor — ▍ at the end of the home intro */
.cursor{
  display:inline-block;
  font-family:var(--mono);
  font-style:normal;
  color:var(--indigo);
  margin-left:.08em;
  animation:blink 1.1s steps(1, end) infinite;
}
@keyframes blink{50%{opacity:0}}

/* ── Topbar ─────────────────────────────────── */
.topbar{
  border-bottom:1px solid var(--line-soft);
  padding:44px 0 16px;
}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.brand{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:lowercase;
}
.brand a{text-decoration:none;color:var(--ink);transition:color .3s var(--ease)}
.brand a:hover{color:var(--indigo)}
.nav{display:flex;align-items:center;gap:20px}
.nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:lowercase;
  color:var(--ink-soft);text-decoration:none;
  transition:color .3s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a.active{color:var(--ink)}
.nav a.active::before{
  content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--ember);margin-right:7px;vertical-align:2px;
}
.toggle{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:lowercase;
  color:var(--ink-soft);
  border:1px solid var(--line-soft);border-radius:999px;padding:5px 11px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.toggle:hover{color:var(--ink);border-color:var(--indigo)}
.swatch{
  width:9px;height:9px;border-radius:50%;flex:none;
  background:linear-gradient(135deg, var(--indigo) 0 50%, var(--ink) 50% 100%);
}

/* ── Eyebrow / hairline rule ────────────────── */
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--ink-soft);
}
.bar{flex:1;height:1px;background:var(--line);min-width:24px}

/* ── Home intro ─────────────────────────────── */
main > .eyebrow{margin-top:64px}
.intro{
  margin:28px auto 8px;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(24px, 3.4vw, 28px);
  line-height:1.58;
  letter-spacing:.002em;
}
.intro em{font-style:italic;color:var(--indigo)}

/* ── Fun pass: more / currently / clock ─────── */
.clock:empty{display:none}
.more{
  margin-top:30px;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.more summary{
  list-style:none;cursor:pointer;
  padding:16px 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:lowercase;
  color:var(--ink-soft);
  transition:color .3s var(--ease);
}
.more summary::-webkit-details-marker{display:none}
.more summary::marker{content:""}
.more summary:hover{color:var(--indigo)}
.more-mark-open{display:none}
.more[open] .more-mark-open{display:inline}
.more[open] .more-mark-closed{display:none}
.more-body{
  font-family:var(--serif);font-weight:300;
  font-size:19px;line-height:1.7;
  padding:2px 0 4px;
}
.more-link{
  display:inline-block;
  margin:12px 0 20px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:lowercase;
  color:var(--ink-soft);text-decoration:none;
  transition:color .3s var(--ease);
}
.more-link:hover{color:var(--indigo)}
.currently{
  margin-top:20px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--ink-soft);
}

/* ── Home sections ──────────────────────────── */
.section{margin-top:68px}
.section-head{
  display:flex;align-items:center;gap:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:lowercase;
  color:var(--ink-soft);
  margin-bottom:4px;
}
.section-head a{
  color:var(--ink-soft);text-decoration:none;
  transition:color .3s var(--ease);
}
.section-head a:hover{color:var(--indigo)}
.section-head .bar{background:var(--line-soft)}

/* ── Index rows ─────────────────────────────── */
.rows{border-top:1px solid var(--line)}
.rows .row{
  position:relative;
  display:grid;
  grid-template-columns:44px 96px 1fr auto;
  grid-template-areas:"no date main cat";
  gap:6px 18px;
  align-items:baseline;
  padding:20px 0;
  border-bottom:1px solid var(--line-soft);
  text-decoration:none;color:inherit;
  transition:padding-left .3s var(--ease);
}
.rows .row::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;
  background:var(--indigo);
  opacity:0;transition:opacity .3s var(--ease);
}
.rows .row:hover{padding-left:14px}
.rows .row:hover::before{opacity:1}
.rows .row:hover .row-title{color:var(--indigo)}
.row-no,.row-date,.row-cat{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:lowercase;
  color:var(--ink-soft);
}
.row-no{grid-area:no}
.row-date{grid-area:date;white-space:nowrap}
.row-main{grid-area:main;display:block}
.row-cat{grid-area:cat;text-align:right}
.row-title{
  display:block;
  font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.32;
  color:var(--ink);
  transition:color .3s var(--ease);
}
.row-sub{
  display:block;
  margin-top:4px;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:15px;line-height:1.5;
  color:var(--ink-soft);
  max-width:56ch;
}

/* ── Archive page head ──────────────────────── */
.page-head{padding:68px 0 36px}
.page-head .eyebrow{margin-bottom:30px}
.page-head h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(52px, 11vw, 88px);
  line-height:.98;letter-spacing:-.02em;
  text-transform:lowercase;
}

/* ── Article ────────────────────────────────── */
.article{padding:64px 0 8px}
.kicker{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:lowercase;
  color:var(--ink-soft);
  margin-bottom:30px;
}
.title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(40px, 7.5vw, 64px);
  line-height:1.04;letter-spacing:-.015em;
}
.standfirst{
  margin-top:22px;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(19px, 2.6vw, 23px);line-height:1.5;
  color:var(--ink-soft);
}
.standfirst em{color:var(--indigo)}
.meta{
  margin-top:28px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:lowercase;
  color:var(--ink-soft);
}

/* ── Prose ──────────────────────────────────── */
.prose{margin-top:48px;font-size:19px;line-height:1.7}
.prose > * + *{margin-top:1.15em}
.prose h2{font-weight:400;font-size:28px;line-height:1.25;margin-top:2.1em}
.prose h3{font-weight:600;font-size:20px;line-height:1.3;margin-top:1.8em}
.prose em{font-style:italic;color:var(--indigo)}
.prose strong{font-weight:600;color:var(--ink)}
.prose blockquote{
  margin-top:1.6em;margin-bottom:1.6em;
  padding:2px 0 2px 22px;
  border-left:1px solid var(--indigo);
  font-style:italic;color:var(--ink-soft);
}
.prose blockquote em{color:var(--indigo)}
.prose code{
  font-family:var(--mono);font-size:.82em;
  background:var(--surface);
  border:1px solid var(--line-soft);border-radius:3px;
  padding:.12em .38em;
}
.prose pre{
  font-family:var(--mono);font-size:13.5px;line-height:1.65;
  background:var(--surface);
  border:1px solid var(--line-soft);border-radius:4px;
  padding:18px 20px;overflow-x:auto;
}
.prose pre code{background:none;border:0;padding:0;font-size:inherit}
.prose ul,.prose ol{padding-left:1.35em}
.prose li + li{margin-top:.4em}
.prose li::marker{color:var(--indigo)}
.prose hr{border:0;width:72px;height:1px;background:var(--line);margin:2.6em 0}
.prose img{border:1px solid var(--line-soft);border-radius:4px}

.backlink{
  display:inline-block;margin-top:56px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:lowercase;
  color:var(--ink-soft);text-decoration:none;
  transition:color .3s var(--ease);
}
.backlink:hover{color:var(--indigo)}

/* ── About manifesto ────────────────────────── */
.manifesto{margin-top:44px}
.manifesto > * + *{margin-top:1.15em}
.manifesto em{font-style:italic;color:var(--indigo)}
.manifesto > p:first-of-type::first-letter{
  float:left;
  font-family:var(--serif);font-weight:400;
  font-size:3.6em;line-height:.74;
  color:var(--indigo);
  padding:.1em .14em 0 0;
}

/* ── Link list (about / contact) ────────────── */
.links{
  margin-top:44px;padding-top:24px;
  border-top:1px solid var(--line-soft);
  display:flex;gap:14px 26px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:lowercase;
}
.links a{color:var(--ink-soft)}
.links a:hover{color:var(--ink)}

/* ── Footer ─────────────────────────────────── */
.foot{
  margin-top:96px;
  border-top:1px solid var(--line-soft);
  padding:26px 24px 64px;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px 28px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:lowercase;
  color:var(--ink-soft);
}
.foot a{color:var(--ink-soft);text-decoration-color:var(--line)}
.foot a:hover{color:var(--ink);text-decoration-color:var(--indigo)}

/* ── 404 ────────────────────────────────────── */
.notfound{padding:104px 0 40px}
.notfound h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(96px, 22vw, 180px);line-height:.9;letter-spacing:-.02em;
  color:var(--indigo);
}
.notfound p{
  margin-top:20px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:lowercase;
  color:var(--ink-soft);
}

/* ── Responsive ─────────────────────────────── */
@media (max-width:820px){
  .topbar{padding-top:32px}
  .rows .row{
    grid-template-columns:auto auto 1fr;
    grid-template-areas:
      "no date cat"
      "main main main";
    row-gap:8px;
  }
  .row-cat{justify-self:end}
}
@media (max-width:520px){
  .wrap{padding:0 20px}
  .foot{padding-left:20px;padding-right:20px;flex-direction:column;gap:8px}
  .nav{gap:14px}
  main > .eyebrow{margin-top:44px}
  .intro{margin-top:22px}
  .article,.page-head{padding-top:48px}
}

/* ── Reduced motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
  .cursor{animation:none}
  .heat-bloom{display:none}
}