:root{
  --bg:#0A0D14;
  --bg-raised:#10141D;
  --bg-panel:#1B1C20;
  --bg-panel-hover:#242529;
  --panel-border:rgba(139,149,214,0.28);
  --ink:#E8E6DF;
  --ink-dim:#9BA3B0;
  --mist:#6B7685;
  --green:#6FCF97;
  --violet:#8B95D6;
  --violet-glow:rgba(139,149,214,0.55);
  --green-glow:rgba(111,207,151,0.5);
  --hairline:rgba(232,230,223,0.09);
  --hairline-strong:rgba(232,230,223,0.16);
  --maxw:920px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(ellipse 900px 600px at 78% 8%, rgba(139,149,214,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 10% 60%, rgba(111,207,151,0.05), transparent 65%),
    var(--bg);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
.starfield{ position:absolute; top:0; left:0; z-index:-1; pointer-events:none; }
.glow-green{ text-shadow:0 0 12px var(--green-glow); }
.glow-violet{ text-shadow:0 0 14px var(--violet-glow); }
@keyframes charge{ 0%, 100% { opacity:1; } 50% { opacity:0.45; } }
.charge{ animation:charge 4.5s ease-in-out infinite; }
.charge.slow{ animation-duration:6s; animation-delay:.8s; }
@keyframes current-sweep{ 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
.current-line{ position:relative; }
.current-line::before{
  content:''; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--violet-glow) 45%, var(--green-glow) 55%, transparent);
  background-size:60% 100%;
  animation:current-sweep 7s linear infinite;
  opacity:0.6;
}
@media (prefers-reduced-motion: reduce){
  .charge{ animation:none; }
  .current-line::before{ animation:none; background-position:0 0; opacity:0.25; }
}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit;}

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:28px clamp(24px,5vw,64px);
  background:linear-gradient(to bottom, rgba(10,13,20,0.97) 65%, rgba(10,13,20,0));
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
.brand{font-size:15px; letter-spacing:0.02em; text-decoration:none;}
.brand .dim{color:var(--mist);}
nav.links{display:flex; gap:32px; font-size:13px;}
nav.links a{
  color:var(--ink-dim); text-decoration:none; letter-spacing:0.03em;
  position:relative; transition:color .25s ease;
}
nav.links a:hover, nav.links a:focus-visible{color:var(--green); text-shadow:0 0 10px var(--green-glow);}
nav.links a:focus-visible{outline:1px solid var(--green); outline-offset:4px;}
nav.links a.current{color:var(--ink);}

/* ---------- HERO ---------- */
.hero{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:60px clamp(24px,5vw,64px) 100px;
  position:relative;
}
.hero-inner{max-width:var(--maxw); position:relative; z-index:2;}
.eyebrow{
  font-size:13px; color:var(--green); letter-spacing:0.12em; text-transform:uppercase;
  margin:0 0 22px; text-shadow:0 0 10px var(--green-glow);
}
h1{
  font-family:'Fraunces', serif; font-weight:400; font-optical-sizing:auto;
  font-size:clamp(34px, 5.4vw, 58px); line-height:1.12; letter-spacing:-0.01em;
  margin:0 0 28px; max-width:780px;
}
h1 em{font-style:italic; color:var(--violet); font-weight:400;}
.tagline{
  font-size:14px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--mist); margin:0 0 40px;
}
.lede{ font-size:17px; line-height:1.7; color:var(--ink-dim); max-width:560px; margin:0; }
.lede strong{color:var(--ink); font-weight:500;}

/* ambient ink signature */
.ink-field{
  position:absolute; top:0; right:0; width:min(60vw,720px); height:100%;
  z-index:1; opacity:0.9; pointer-events:none;
}
.ink-field svg{width:100%; height:100%;}
.ink-path{
  fill:none; stroke:var(--violet); stroke-width:1.6; stroke-linecap:round;
  opacity:0.75; stroke-dasharray:1400; stroke-dashoffset:1400;
  animation-name:settle, pulse-glow;
  animation-duration:2.8s, 4s;
  animation-timing-function:cubic-bezier(.16,.85,.3,1), ease-in-out;
  animation-delay:.3s, 3.1s;
  animation-iteration-count:1, infinite;
  animation-fill-mode:forwards, none;
}
.ink-path.two{stroke:var(--green); opacity:0.5; animation-delay:.6s, 3.4s;}
.ink-path.three{stroke:var(--ink-dim); opacity:0.35; animation-name:settle; animation-duration:2.8s; animation-delay:.9s; animation-fill-mode:forwards;}
@keyframes settle{ to { stroke-dashoffset:0; } }
@keyframes pulse-glow{ 0%, 100% { stroke-opacity:0.5; } 50% { stroke-opacity:1; } }
@media (prefers-reduced-motion: reduce){ .ink-path{ animation:none !important; stroke-dashoffset:0; } }
.scroll-cue{
  position:absolute; bottom:40px; left:clamp(24px,5vw,64px);
  font-size:11px; color:var(--mist); letter-spacing:0.1em;
  display:flex; align-items:center; gap:10px;
}
.scroll-cue .line{width:28px; height:1px; background:var(--mist);}

/* ---------- SECTION SHELL ---------- */
section{
  max-width:var(--maxw); margin:0 auto;
  padding:96px clamp(24px,5vw,64px);
  border-top:1px solid var(--hairline);
  position:relative;
}
.sec-eyebrow{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--mist); margin:0 0 8px; }
.sec-title{
  font-family:'Fraunces', serif; font-weight:400; font-size:clamp(22px,2.6vw,30px);
  margin:0 0 48px; max-width:640px; line-height:1.3;
}

/* ---------- PILLARS ---------- */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.pillar{border-top:1px solid var(--hairline-strong); padding-top:22px;}
.pillar .idx{font-size:12px; color:var(--green);}
.pillar h3{ font-family:'Fraunces', serif; font-weight:500; font-size:19px; margin:14px 0 4px; }
.pillar .label{ font-size:11px; letter-spacing:0.1em; color:var(--mist); text-transform:uppercase; margin:0 0 16px; }
.pillar p{font-size:14.5px; line-height:1.7; color:var(--ink-dim); margin:0;}

/* ---------- WRITINGS (directory style) ---------- */
.dir{border:1px solid var(--panel-border); border-radius:3px; overflow:hidden; background:var(--bg-panel);}
.dir-row{
  display:flex; gap:18px; align-items:baseline;
  padding:18px 22px; border-bottom:1px solid var(--hairline);
  text-decoration:none; color:inherit; transition:background .2s ease;
}
.dir-row:last-child{border-bottom:none;}
.dir-row:hover, .dir-row:focus-visible{background:var(--bg-panel-hover);}
.dir-row:focus-visible{outline:1px solid var(--green); outline-offset:-2px;}
.file{font-size:14px; color:var(--green); white-space:nowrap; flex-shrink:0; min-width:220px;}
.file .path{color:var(--mist);}
.desc{font-size:14px; color:var(--ink-dim); line-height:1.6;}
.dir-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:20px; font-size:13px; color:var(--mist); }
.dir-foot a{color:var(--violet); text-decoration:none;}
.dir-foot a:hover{color:var(--ink);}

/* ---------- DOORS (about / support) ---------- */
.doors{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--panel-border); border:1px solid var(--panel-border);}
.door{background:var(--bg-panel); padding:40px; display:flex; flex-direction:column; gap:14px;}
.door .tag{font-size:12px; color:var(--mist);}
.door h3{font-family:'Fraunces', serif; font-weight:400; font-size:22px; margin:0;}
.door p{font-size:14.5px; line-height:1.7; color:var(--ink-dim); margin:0; flex-grow:1;}
.door-link{
  font-size:13px; letter-spacing:0.04em; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; margin-top:6px; transition:gap .2s ease;
}
.door-link.green{color:var(--green); text-shadow:0 0 10px var(--green-glow);}
.door-link.violet{color:var(--violet); text-shadow:0 0 10px var(--violet-glow);}
.door-link:hover{gap:12px;}

/* ---------- ARTICLE / LONG-FORM (essays, poems, about, support) ---------- */
.back-link{
  display:inline-flex; align-items:center; gap:8px; font-size:13px;
  color:var(--mist); text-decoration:none; margin-bottom:44px; transition:gap .2s ease, color .2s ease;
}
.back-link:hover{color:var(--green); gap:12px;}
.article-meta{ font-size:12px; color:var(--mist); letter-spacing:.08em; text-transform:uppercase; margin:0 0 16px; }
.article-title{
  font-family:'Fraunces', serif; font-weight:400;
  font-size:clamp(28px,4.5vw,44px); line-height:1.16; margin:0 0 20px; max-width:760px;
}
.article-sub{ font-size:15px; color:var(--ink-dim); max-width:600px; line-height:1.65; margin:0 0 48px; }
.article-body{max-width:680px;}
.article-body p{font-size:16.5px; line-height:1.85; color:var(--ink); margin:0 0 24px;}
.article-body blockquote{
  margin:32px 0; padding-left:20px; border-left:2px solid var(--panel-border);
  font-style:italic; color:var(--ink-dim); font-family:'Fraunces',serif; font-size:17px; line-height:1.75;
}
.article-body .poem-line{ margin:0 0 6px; font-family:'Fraunces',serif; font-size:19px; line-height:1.65; color:var(--ink); }
.article-body .stanza-break{height:26px;}
.article-body .sig{ margin-top:40px; font-family:'Fraunces',serif; font-style:italic; color:var(--ink-dim); font-size:14.5px; }
.source-note{
  margin-top:56px; padding-top:24px; border-top:1px solid var(--hairline);
  font-size:12.5px; color:var(--mist); line-height:1.75; max-width:680px;
}

/* ---------- FOOTER ---------- */
footer{
  max-width:var(--maxw); margin:0 auto;
  padding:40px clamp(24px,5vw,64px) 60px;
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--hairline);
  font-size:12px; color:var(--mist);
}

@media (max-width:760px){
  .pillars{grid-template-columns:1fr; gap:36px;}
  .doors{grid-template-columns:1fr;}
  .ink-field{opacity:0.4;}
  .file{min-width:0;}
  .dir-row{flex-direction:column; gap:6px;}
  nav.links{gap:20px;}
}