/* ===========================================================
   Vyoma Swan — field record, white theme (polish pass)
   paper #FAFAF7   ink #16191C   indigo #21406F   brass #8C6430
=========================================================== */

:root{
  --paper: #FAFAF7;
  --paper-2: #F2F0E9;
  --ink: #16191C;
  --ink-dim: #565A55;
  --ink-faint: #8A8E86;
  --indigo: #21406F;
  --brass: #8C6430;
  --line: rgba(22,25,28,.11);
  --line-soft: rgba(22,25,28,.06);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  /* spacing scale */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 88px;

  --rail-w: 268px;
  --edge: 48px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--indigo); color:var(--paper); padding:10px 16px; z-index:999;
}
.skip-link:focus{ left:16px; top:16px; }

/* ---------- page shell ---------- */
.page{
  display:grid;
  grid-template-columns: var(--rail-w) 1fr;
  max-width:1280px;
  margin:0 auto;
  min-height:100vh;
}

/* ---------- rail (sidebar index) ---------- */
.rail{
  border-right:1px solid var(--line);
  padding:var(--sp-6) var(--sp-4);
  position:sticky; top:0; align-self:start; height:100vh;
  display:flex; flex-direction:column;
  overflow-y:auto;
}
.rail-top{ margin-bottom:var(--sp-6); }
.brand{ display:flex; align-items:flex-start; gap:var(--sp-2); margin-bottom:var(--sp-2); }
.brand-mark{ width:28px; height:auto; margin-top:4px; flex-shrink:0; }
.brand-word{
  font-family:var(--display); font-weight:440; font-style:italic;
  font-size:1.2rem; line-height:1.14; color:var(--ink);
}
.brand-tag{
  font-family:var(--mono); font-size:.7rem; line-height:1.6;
  letter-spacing:.02em; color:var(--ink-faint);
  margin:0; padding-left:40px;
}

.rail-index{
  display:flex; flex-direction:column; gap:2px;
  padding:var(--sp-3) 0; margin-bottom:var(--sp-3);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.rail-index a{
  display:flex; align-items:baseline; gap:10px;
  font-size:.92rem; color:var(--ink-dim);
  padding:7px 0;
  transition:color .15s ease;
}
.rail-index a span{
  font-family:var(--mono); font-size:.68rem; color:var(--brass);
  min-width:26px;
}
.rail-index a:hover, .rail-index a:focus-visible{ color:var(--indigo); }

.rail-data{ margin:0 0 auto; }
.rail-data > div{
  display:flex; justify-content:space-between; gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:.71rem;
}
.rail-data dt{ color:var(--ink-faint); letter-spacing:.03em; text-transform:uppercase; }
.rail-data dd{ margin:0; color:var(--ink); text-align:right; }

.rail-follow{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:.78rem; color:var(--indigo);
  margin-top:var(--sp-3); padding-top:var(--sp-2);
  border-top:1px solid var(--line);
  transition:color .15s ease;
}
.rail-follow:hover, .rail-follow:focus-visible{ color:var(--brass); }
.rail-follow .arrow{ font-size:.9em; }

/* ---------- main document ---------- */
main{ min-width:0; }
.doc{ padding:var(--sp-7) var(--edge) 0; max-width:760px; }

.doc-head h1{
  font-family:var(--display); font-weight:340;
  font-size:clamp(2.3rem, 4.4vw, 3.5rem);
  line-height:1.1; letter-spacing:-.01em;
  margin:0 0 var(--sp-3); color:var(--ink);
}
.doc-head h1 em{ font-style:italic; font-weight:440; color:var(--brass); }

.doc-intro{
  font-size:1.14rem; color:var(--ink-dim);
  max-width:52ch; font-style:italic;
  margin:0;
}

/* ---------- figure / chart ---------- */
.chart{
  margin:var(--sp-6) 0 var(--sp-6);
  padding:var(--sp-4) var(--sp-3) var(--sp-3);
  background:var(--paper-2);
  border:1px solid var(--line);
}
.chart svg{ width:100%; height:auto; display:block; }
.axis{ stroke:var(--ink-faint); stroke-width:1; }
.ticks line{ stroke:var(--ink-faint); stroke-width:1; }
.ticks text{
  font-family:var(--mono); font-size:10px; fill:var(--ink-faint);
  text-anchor:middle;
}
.marker-line{ stroke:var(--brass); stroke-width:1; stroke-dasharray:3 3; opacity:.8; }
.marker-label{
  font-family:var(--mono); font-size:10.5px; fill:var(--brass);
}
.trace{ fill:none; stroke-width:1.4; }
.trace-1{ stroke:var(--indigo); opacity:.85; }
.trace-2{ stroke:var(--brass); opacity:.7; }
.trace-3{ stroke:var(--ink); opacity:.35; }

/* constellation figure */
.constellation{ margin-top:var(--sp-5); }
.const-line{ stroke:var(--indigo); stroke-width:1; opacity:.55; }
.const-star{ fill:var(--brass); }
.const-label{
  font-family:var(--mono); font-size:11px; fill:var(--ink-dim);
  letter-spacing:.01em;
}

figcaption{
  font-family:var(--mono); font-size:.76rem; color:var(--ink-faint);
  margin-top:var(--sp-2); line-height:1.6;
}
.fig-tag{ color:var(--brass); margin-right:8px; }

/* ---------- doc sections ---------- */
.doc-section{
  padding:var(--sp-6) 0;
  border-top:1px solid var(--line);
  max-width:64ch;
}
.doc-section-last{ padding-bottom:var(--sp-6); }

.doc-section h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.4rem, 2.6vw, 1.85rem);
  line-height:1.25; color:var(--ink);
  margin:0 0 var(--sp-3); letter-spacing:-.005em;
  display:flex; align-items:baseline; gap:12px;
}
.sec-num{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  color:var(--brass); letter-spacing:.02em;
}

.doc-section p{ margin:0 0 var(--sp-2); color:var(--ink); }
.doc-section p:last-child{ margin-bottom:0; }
.doc-section em{ color:var(--brass); font-style:italic; }
strong{ color:var(--ink); font-weight:600; }

/* pipeline (current work) */
.pipeline{
  list-style:none; margin:var(--sp-4) 0 0; padding:0;
  display:flex; flex-direction:column;
}
.pipeline li{
  display:grid; grid-template-columns:54px 1fr;
  gap:var(--sp-2);
  position:relative;
  padding-bottom:var(--sp-4);
}
.pipeline li:last-child{ padding-bottom:0; }
.pipeline li::before{
  content:"";
  position:absolute; left:26px; top:34px; bottom:0;
  width:1px; background:var(--line);
}
.pipeline li:last-child::before{ display:none; }
.pipe-marker{
  width:52px; height:52px;
  border:1px solid var(--indigo);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.8rem; color:var(--indigo);
  background:var(--paper);
  flex-shrink:0;
}
.pipeline h3{
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size:1.15rem; color:var(--ink); margin:4px 0 var(--sp-1);
}
.pipeline p{ margin:0; color:var(--ink-dim); font-size:.98rem; }

/* roadmap checklist */
.roadmap-list{
  list-style:none; margin:var(--sp-4) 0 0; padding:0;
}
.roadmap-list li{
  display:flex; align-items:center; gap:14px;
  padding:15px 0;
  border-top:1px solid var(--line);
  font-size:1rem;
}
.roadmap-list li:first-child{ border-top:none; }

.rm-dot{
  width:11px; height:11px; border-radius:50%;
  flex-shrink:0;
  box-sizing:border-box;
}
.is-done .rm-dot{ background:var(--indigo); border:1px solid var(--indigo); }
.is-progress .rm-dot{
  background:var(--paper); border:2px solid var(--brass);
}
.is-upcoming .rm-dot{
  background:var(--paper); border:1px solid var(--ink-faint);
}

.rm-label{
  flex:1;
  font-family:var(--display); font-style:italic; font-weight:440;
  color:var(--ink);
}
.is-done .rm-label{ color:var(--ink-dim); }

.rm-status{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.is-done .rm-status{ color:var(--indigo); }
.is-progress .rm-status{ color:var(--brass); }
.is-upcoming .rm-status{ color:var(--ink-faint); }

/* founder */
.founder-line{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:1.22rem !important; line-height:1.5;
  color:var(--ink-dim) !important;
}
.founder-line strong{ color:var(--ink); }
.founder-line a{
  color:var(--indigo); border-bottom:1px solid var(--indigo);
}
.founder-line a:hover, .founder-line a:focus-visible{ color:var(--brass); border-color:var(--brass); }

/* ---------- footer ---------- */
.doc-footer{
  max-width:760px;
  margin:0 var(--edge);
  padding:var(--sp-3) 0 var(--sp-6);
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-1);
}
.doc-footer p{
  margin:0; font-size:.74rem; color:var(--ink-faint);
  font-family:var(--mono); letter-spacing:.01em;
}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  :root{ --edge:24px; }
  .page{ grid-template-columns:1fr; }
  .rail{
    position:static; height:auto;
    border-right:none; border-bottom:1px solid var(--line);
    padding:var(--sp-4) var(--sp-3);
    flex-direction:row; flex-wrap:wrap; align-items:center;
    gap:var(--sp-2) var(--sp-4);
  }
  .rail-top{ margin-bottom:0; flex:1 1 auto; min-width:200px; }
  .brand-tag{ display:none; }
  .rail-index{
    flex-direction:row; flex-wrap:wrap; gap:4px var(--sp-3);
    border:none; padding:0; margin:0;
    order:3; flex-basis:100%;
  }
  .rail-index a{ padding:2px 0; }
  .rail-data{ display:flex; gap:var(--sp-3); margin:0; }
  .rail-data > div{ flex-direction:column; gap:2px; border:none; padding:0; }
  .rail-data dd{ text-align:left; }
  .rail-follow{ border:none; margin:0; padding:0; }
  .doc{ padding-top:var(--sp-4); }
}

@media (max-width: 560px){
  body{ font-size:16px; }
  .chart{ padding:var(--sp-2) var(--sp-2) var(--sp-2); }
  .pipeline li{ grid-template-columns:44px 1fr; gap:14px; }
  .pipe-marker{ width:44px; height:44px; font-size:.74rem; }
  .pipeline li::before{ left:21px; }
}