/* ============================================================
   alan de vaney — terminal / megalith
   ============================================================ */

:root{
  --bg:        #04070a;
  --bg-2:      #070c11;
  --panel:     rgba(10,18,24,.66);
  --line:      rgba(90,255,190,.16);
  --line-hard: rgba(90,255,190,.34);
  --fg:        #b9d6cc;
  --fg-dim:    #5d7b73;
  --fg-faint:  #33473f;
  --acc:       #4dffb0;   /* phosphor */
  --acc-2:     #ffb347;   /* amber */
  --acc-3:     #6cc5ff;   /* ice */
  --danger:    #ff5f6d;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono",
          Menlo, Consolas, "DejaVu Sans Mono", monospace;

  --gut: clamp(1rem, 4vw, 3.5rem);
  --maxw: 1180px;
  --bar: 46px;
}

/* ---------- underwater (type "dive") ----------
   The 2016 site's ocean, returned for the ruins. Colour shifts ride the
   CSS variables, so the whole terminal submerges with the scene. */
body.underwater{
  --acc:       #39e0ff;
  --acc-2:     #ff8f5e;
  --acc-3:     #9fdcff;
  --line:      rgba(88,214,255,.16);
  --line-hard: rgba(88,214,255,.36);
  --fg:        #b9cfd6;
  --fg-dim:    #5d7580;
  --fg-faint:  #33434c;
}
body.underwater #scanlines{ opacity:.3; }
body.underwater.dense #gl{ opacity:.62; }
body.underwater{
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(57,224,255,.07), transparent 60%),
    radial-gradient(900px 700px at 10% 110%, rgba(159,220,255,.05), transparent 60%),
    #030f16;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  background:var(--bg);
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--mono);
  font-size:15px;
  line-height:1.65;
  color:var(--fg);
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(77,255,176,.055), transparent 60%),
    radial-gradient(900px 700px at 10% 110%, rgba(108,197,255,.045), transparent 60%),
    var(--bg);
  overflow-x:hidden;
  min-height:100vh;
}

::selection{ background:var(--acc); color:#02100a; }

a{ color:var(--acc); text-decoration:none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--acc-2); outline-offset:3px;
}

/* ---------- fixed layers ---------- */

#gl{
  position:fixed; inset:0;
  width:100%; height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
  transition:opacity .6s ease;
}
/* On content-heavy routes the structure is backdrop, not subject. The home
   page keeps it at full strength. */
body.dense #gl{ opacity:.5; }
body.stilled #gl{ opacity:.28; }

/* ---------- skip link ---------- */

#skip{
  position:fixed; top:-4rem; left:var(--gut); z-index:60;
  background:var(--bg-2); color:var(--acc);
  border:1px solid var(--acc); border-radius:2px;
  padding:.7em 1.2em; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  transition:top .2s;
}
#skip:focus{ top:.6rem; }

.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;
}

#scanlines{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.22) 3px,
    rgba(0,0,0,0) 4px
  );
  mix-blend-mode:multiply;
  opacity:.5;
}

#grain{
  position:fixed; inset:-50%; z-index:3; pointer-events:none;
  opacity:.035;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 700ms steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 33%{transform:translate(-2%,1%)} 66%{transform:translate(1%,-2%)} 100%{transform:translate(0,0)}
}
@media (prefers-reduced-motion:reduce){ #grain{ animation:none; } }

/* vignette */
body::after{
  content:""; position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(0,0,0,.72) 100%);
}

/* ---------- top bar ---------- */

#topbar{
  position:fixed; top:0; left:0; right:0; height:var(--bar);
  z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gut);
  background:linear-gradient(to bottom, rgba(4,7,10,.94), rgba(4,7,10,.55) 70%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.brand{ display:flex; align-items:center; gap:.6em; color:var(--fg); }
.brand .glyph{ color:var(--acc); animation:pulse 3.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.brand-name{ font-weight:600; }

#nav{ display:flex; gap:1.6em; }
#nav a{
  color:var(--fg-dim); position:relative; padding:.25em 0;
  transition:color .2s;
}
#nav a::before{ content:"["; opacity:0; margin-right:.15em; transition:opacity .2s; color:var(--acc); }
#nav a::after { content:"]"; opacity:0; margin-left:.15em;  transition:opacity .2s; color:var(--acc); }
#nav a:hover, #nav a.on{ color:var(--acc); }
#nav a:hover::before, #nav a:hover::after,
#nav a.on::before, #nav a.on::after{ opacity:1; }

#menu-toggle{
  display:none; background:none; border:1px solid var(--line);
  color:var(--acc); font:inherit; font-size:18px; line-height:1;
  padding:.25em .5em; cursor:pointer; border-radius:2px;
}

/* ---------- HUD ---------- */

#hud{
  position:fixed; left:var(--gut); bottom:52px; z-index:10;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg-faint);
  border-left:1px solid var(--line-hard);
  padding:.75em .95em .75em .9em;
  opacity:0; animation:fadein 1.2s 1.4s forwards;
  max-width:min(22em, 42vw);
  background:rgba(4,7,10,.82);
  backdrop-filter:blur(7px);
  border-radius:0 3px 3px 0;
}
.hud-site{
  color:var(--acc); font-size:12px; letter-spacing:.16em;
  margin-bottom:.5em; line-height:1.3;
}
.hud-row{ display:flex; gap:.75em; }
.hud-row .k{ width:4.4em; flex:0 0 4.4em; }
.hud-row .v{ color:var(--fg-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hud-step{ display:flex; align-items:center; gap:.55em; margin-top:.7em; }
.hud-step button{
  background:none; border:1px solid var(--line); color:var(--acc);
  font:inherit; font-size:11px; line-height:1; padding:.25em .5em;
  cursor:pointer; border-radius:2px; transition:border-color .2s, background .2s;
}
.hud-step button:hover{ border-color:var(--acc); background:rgba(77,255,176,.12); }
.hud-step #hud-n{ color:var(--fg-dim); min-width:3.4em; text-align:center; }
.hud-all{ color:var(--fg-faint); border-bottom:1px solid transparent; }
.hud-all:hover{ color:var(--acc-2); border-color:var(--acc-2); }
@keyframes fadein{ to{ opacity:1 } }

/* on content-heavy routes the HUD yields the left column to prose */
body.dense #hud{
  left:auto; right:calc(var(--gut) + 10px);
  border-left:0; border-right:1px solid var(--line-hard);
  border-radius:3px 0 0 3px;
  padding:.75em .9em .75em .95em;
}

/* ---------- site catalog ---------- */

.filters{ display:flex; gap:.5em; flex-wrap:wrap; margin-bottom:1.4rem; }
.fbtn{
  font:inherit; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  background:none; border:1px solid var(--line); color:var(--fg-dim);
  padding:.55em 1em; border-radius:2px; cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.fbtn:hover{ color:var(--acc); border-color:var(--acc); }
.fbtn.on{ color:var(--acc); border-color:var(--line-hard); background:rgba(77,255,176,.1); }

.site-list{ border-top:1px solid var(--line); }
.site-row[hidden]{ display:none; }
.site-row{
  display:grid;
  grid-template-columns:2.6em minmax(0,1.5fr) 10em minmax(0,1.2fr) 1.4em;
  align-items:baseline; gap:1.1em;
  width:100%; text-align:left;
  background:none; border:0; border-bottom:1px solid var(--line);
  font:inherit; color:var(--fg);
  padding:.95rem .2rem; cursor:pointer;
  transition:padding-left .25s, background .25s, border-color .25s;
}
.site-row:hover, .site-row.on{ background:rgba(77,255,176,.05); padding-left:.7rem; border-color:var(--line-hard); }
.site-row .idx{ font-size:10.5px; color:var(--fg-faint); letter-spacing:.1em; }
.site-row .col{ display:flex; flex-direction:column; gap:.15em; min-width:0; }
.site-row .t{ color:#dcf5ec; }
.site-row:hover .t, .site-row.on .t{ color:var(--acc); }
.site-row .sub{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-faint); }
.site-row .era{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--acc-2); }
.site-row .form{ font-size:12px; color:var(--fg-dim); }
.site-row .arw{ color:var(--fg-faint); transition:color .25s, transform .25s; justify-self:end; }
.site-row:hover .arw{ color:var(--acc); transform:rotate(45deg); }
.site-row.on .arw{ color:var(--acc); }
#site-card{ min-height:9rem; }

/* ---------- footer ---------- */

#foot{
  position:fixed; left:0; right:0; bottom:0; height:34px; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gut);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-faint);
  border-top:1px solid var(--line);
  background:linear-gradient(to top, rgba(4,7,10,.94), transparent);
  backdrop-filter:blur(6px);
}
#foot a{ color:var(--fg-dim); } #foot a:hover{ color:var(--acc); }

/* ---------- scroll rail ---------- */

#scroll-rail{
  position:fixed; right:0; top:var(--bar); bottom:34px; width:2px; z-index:20;
  background:var(--line);
}
#scroll-bar{
  width:100%; height:0%;
  background:linear-gradient(to bottom, var(--acc), var(--acc-3));
  box-shadow:0 0 10px var(--acc);
}

/* ============================================================
   layout
   ============================================================ */

#app{
  position:relative; z-index:5;
  max-width:var(--maxw);
  margin:0 auto;
  padding:calc(var(--bar) + 2rem) var(--gut) 8rem;
  outline:none;
  transition:opacity .45s ease;
}

section.block{ margin:0 0 clamp(6rem, 16vh, 12rem); }

/* ---------- readable scrim ----------
   Prose sat directly on the wireframe and was close to unreadable, badly so on
   a phone. This lays a soft dark wash under text that fades out to the right,
   so the copy is legible while the structure still shows through beside it. */

.readable{ position:relative; z-index:0; }
.readable::before{
  content:""; position:absolute;
  inset:-2rem -9rem -2rem -50vw;      /* run off the left edge so there is no seam */
  z-index:-1; pointer-events:none;
  background:linear-gradient(to right,
    rgba(4,7,10,.94) 0%, rgba(4,7,10,.94) 72%, rgba(4,7,10,.86) 84%,
    rgba(4,7,10,.5) 93%, rgba(4,7,10,0) 100%);
  /* feather top and bottom so the band never shows a hard horizontal edge */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
}
@media (max-width:900px){
  .readable::before{
    /* Left only. `-50vw` on both sides put the scrim 195px past the right edge on a
       390px phone, which is the whole of the 179px of sideways scroll the site had:
       body's overflow-x:hidden does not stop the document reporting the width. The
       left bleed is what kills the seam; the right side has nothing to hide behind. */
    inset:-1.4rem 0 -1.4rem -50vw;
    background:rgba(4,7,10,.9);
  }
}

/* reveal on scroll */
.rv{
  opacity:0;
  transform:translateY(26px);
  filter:blur(3px);
  transition:opacity .85s cubic-bezier(.2,.7,.2,1),
             transform .85s cubic-bezier(.2,.7,.2,1),
             filter .85s ease;
}
.rv.in{ opacity:1; transform:none; filter:none; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; filter:none; transition:none; }
}

/* .stagger promotes its grandchildren to individual cascading reveals (see app.js) */
.stagger.rv{ opacity:1; transform:none; filter:none; }

/* ---------- section label ---------- */

.label{
  display:flex; align-items:center; gap:1em;
  font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--fg-faint); margin-bottom:1.6rem;
}
.label::after{ content:""; flex:1; height:1px; background:var(--line); }
.label .n{ color:var(--acc); }

/* ---------- type ---------- */

h1,h2,h3,h4{ font-weight:600; line-height:1.06; margin:0 0 .5em; letter-spacing:-.02em; }

h1.display{
  font-size:clamp(2.6rem, 9vw, 6.4rem);
  letter-spacing:-.045em;
  line-height:.92;
  color:#e6fff5;
  text-shadow:0 0 30px rgba(77,255,176,.22);
}
h2{ font-size:clamp(1.5rem, 3.6vw, 2.4rem); color:#dcf5ec; }
h3{ font-size:clamp(1.05rem, 2vw, 1.3rem); color:#dcf5ec; }

p{ margin:0 0 1.1em; max-width:66ch; color:var(--fg); }
.lede{ font-size:clamp(1rem, 1.6vw, 1.16rem); color:#cfe9e0; }
.dim{ color:var(--fg-dim); }
.small{ font-size:12.5px; }

code, kbd{
  font-family:var(--mono); font-size:.9em;
  background:rgba(77,255,176,.09);
  border:1px solid var(--line);
  padding:.08em .38em; border-radius:2px; color:var(--acc);
}
pre{
  background:rgba(2,6,9,.8);
  border:1px solid var(--line);
  border-left:2px solid var(--acc);
  padding:1rem 1.1rem; overflow-x:auto; border-radius:3px;
  font-size:13px; line-height:1.6;
  margin:0 0 1.4em;
}
pre code{ background:none; border:0; padding:0; color:var(--fg); }

blockquote{
  margin:0 0 1.4em; padding:.2rem 0 .2rem 1.2rem;
  border-left:2px solid var(--acc-2);
  color:var(--fg-dim); font-style:normal;
}

hr{ border:0; border-top:1px solid var(--line); margin:3rem 0; }

/* ---------- prompt line ---------- */

.prompt{
  font-size:12.5px; color:var(--fg-dim);
  display:flex; gap:.6em; align-items:baseline; flex-wrap:wrap;
  margin-bottom:1.4rem;
}
.prompt .sym{ color:var(--acc); }
.prompt .cmd{ color:var(--acc-3); }
.caret{
  display:inline-block; width:.55em; height:1em; background:var(--acc);
  vertical-align:-.14em; animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{ 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* ============================================================
   hero
   ============================================================ */

#hero{
  min-height:calc(100vh - var(--bar) - 6rem);
  display:flex; flex-direction:column; justify-content:center;
  padding-bottom:4rem;
}
.hero-meta{
  display:flex; gap:1.2em; flex-wrap:wrap;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-faint); margin-bottom:1.8rem;
}
.hero-meta span{ display:flex; gap:.5em; align-items:center; }
.hero-meta span::before{ content:"▪"; color:var(--acc); font-size:8px; }

.hero-sub{
  font-size:clamp(1rem, 2.2vw, 1.4rem);
  color:var(--acc-3); margin:.8rem 0 1.6rem;
  letter-spacing:-.01em;
}

.hero-links{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:2rem; }

.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  padding:.85em 1.4em;
  border:1px solid var(--line-hard);
  color:var(--acc); background:rgba(77,255,176,.04);
  border-radius:2px;
  transition:background .2s, border-color .2s, transform .2s, box-shadow .2s;
  position:relative;
}
.btn:hover{
  background:rgba(77,255,176,.13);
  border-color:var(--acc);
  transform:translateY(-2px);
  box-shadow:0 6px 26px -10px var(--acc);
}
.btn.ghost{ color:var(--fg-dim); border-color:var(--line); background:none; }
.btn.ghost:hover{ color:var(--acc-2); border-color:var(--acc-2); box-shadow:0 6px 26px -10px var(--acc-2); }

/* scroll cue */
.cue{
  margin-top:auto; padding-top:3rem;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-faint); display:flex; align-items:center; gap:.8em;
}
/* clear the fixed HUD sitting in the bottom-left corner */
@media (min-width:761px){ .cue{ padding-left:24rem; } }
.cue .arrow{ animation:bob 2.2s ease-in-out infinite; color:var(--acc); }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }

/* ============================================================
   panels & cards
   ============================================================ */

.panel{
  position:relative;
  border:1px solid var(--line);
  background:var(--panel);
  backdrop-filter:blur(9px);
  padding:1.6rem 1.7rem;
  border-radius:3px;
}
/* corner brackets */
.panel::before, .panel::after{
  content:""; position:absolute; width:12px; height:12px; pointer-events:none;
  border-color:var(--acc); border-style:solid; opacity:.65;
}
.panel::before{ top:-1px; left:-1px;  border-width:1px 0 0 1px; }
.panel::after { bottom:-1px; right:-1px; border-width:0 1px 1px 0; }

.grid{ display:grid; gap:1rem; }
.grid.two{ grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); }
.grid.three{ grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); }

/* ---------- work cards ---------- */

.work-card{
  display:block; position:relative;
  border:1px solid var(--line);
  background:var(--panel);
  backdrop-filter:blur(9px);
  border-radius:3px; overflow:hidden;
  color:var(--fg);
  transition:border-color .25s, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.work-card:hover{
  border-color:var(--line-hard);
  transform:translateY(-4px);
  box-shadow:0 20px 50px -28px rgba(77,255,176,.5);
}
.work-thumb{
  aspect-ratio:16/9; position:relative;
  background:
    repeating-linear-gradient(45deg, rgba(77,255,176,.05) 0 2px, transparent 2px 9px),
    linear-gradient(140deg, #0a1219, #060d12);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.work-thumb video, .work-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.75) contrast(1.05);
}
.work-thumb .ph{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-faint); text-align:center; padding:1rem;
}
.work-thumb .play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(4,7,10,.35); color:var(--acc); font-size:24px;
  opacity:0; transition:opacity .25s;
}
.work-card:hover .play{ opacity:1; }

.work-body{ padding:1.15rem 1.25rem 1.35rem; }
.work-body h3{ margin-bottom:.35em; }
.work-body p{ font-size:13px; color:var(--fg-dim); margin:0 0 .9em; }

.tags{ display:flex; flex-wrap:wrap; gap:.4em; }
.tag{
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--fg-dim);
  padding:.25em .6em; border-radius:2px;
}
.tag.hot{ border-color:rgba(255,179,71,.4); color:var(--acc-2); }

/* ---------- timeline (resume) ---------- */

.tl{ position:relative; padding-left:1.9rem; }
.tl::before{
  content:""; position:absolute; left:5px; top:.5rem; bottom:.5rem;
  width:1px; background:linear-gradient(to bottom, var(--acc), var(--line) 30%, var(--line) 70%, transparent);
}
.tl-item{ position:relative; margin-bottom:2.6rem; }
.tl-item::before{
  content:""; position:absolute; left:calc(-1.9rem + 1px); top:.55em;
  width:9px; height:9px; border:1px solid var(--acc);
  background:var(--bg); border-radius:1px;
  transform:rotate(45deg);
}
.tl-item .when{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--acc-2); margin-bottom:.35em;
}
.tl-item .where{ font-size:12.5px; color:var(--fg-dim); margin-bottom:.7em; }
.tl-item ul{ margin:.4em 0 0; padding-left:1.1em; }
.tl-item li{ margin-bottom:.35em; color:var(--fg); font-size:14px; }
.tl-item li::marker{ color:var(--acc); content:"› "; }

/* ---------- skills ---------- */

.skill-group{ margin-bottom:1.4rem; }
.skill-group .gname{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-faint); margin-bottom:.6em;
}
.chips{ display:flex; flex-wrap:wrap; gap:.4em; }
.chip{
  font-size:11.5px;
  border:1px solid var(--line); color:var(--fg);
  padding:.3em .7em; border-radius:2px;
  background:rgba(77,255,176,.03);
  transition:border-color .2s,color .2s,background .2s;
}
.chip:hover{ border-color:var(--acc); color:var(--acc); background:rgba(77,255,176,.1); }

/* ---------- stats ---------- */

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.stat{ background:var(--bg-2); padding:1.2rem 1.1rem; }
.stat .num{ font-size:clamp(1.5rem,3.4vw,2.1rem); color:var(--acc); line-height:1; letter-spacing:-.03em; }
.stat .cap{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-faint); margin-top:.6em; }

/* ---------- notes / blog list ---------- */

.note-row{
  display:flex; align-items:baseline; gap:1.2em;
  padding:1.05rem 0; border-bottom:1px solid var(--line);
  transition:padding-left .25s, border-color .25s;
  color:var(--fg);
}
.note-row:hover{ padding-left:.7rem; border-color:var(--line-hard); }
.note-row .date{ font-size:11px; letter-spacing:.14em; color:var(--fg-faint); flex:0 0 8.5em; text-transform:uppercase; }
.note-row .t{ flex:1; color:#dcf5ec; }
.note-row:hover .t{ color:var(--acc); }
.note-row .arw{ color:var(--fg-faint); transition:transform .25s, color .25s; }
.note-row:hover .arw{ color:var(--acc); transform:translateX(4px); }

/* ---------- article ---------- */

.article{ max-width:70ch; }
.article h2{ margin-top:2.4rem; }
.article h3{ margin-top:1.8rem; }
.article img{ max-width:100%; border:1px solid var(--line); border-radius:3px; }
.article ul, .article ol{ padding-left:1.2em; margin:0 0 1.2em; }
.article li{ margin-bottom:.4em; }
.article li::marker{ color:var(--acc); }

.meta-line{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-faint); margin-bottom:2rem;
  display:flex; gap:1.2em; flex-wrap:wrap;
}

/* ---------- video frame ---------- */

.vframe{
  position:relative; aspect-ratio:16/9; width:100%;
  border:1px solid var(--line-hard); border-radius:3px; overflow:hidden;
  background:#02060a; margin:0 0 1.6rem;
}
.vframe video, .vframe iframe{ width:100%; height:100%; border:0; display:block; object-fit:cover; }
.vframe .ph{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.8em;
  color:var(--fg-faint); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  background:repeating-linear-gradient(45deg, rgba(77,255,176,.04) 0 2px, transparent 2px 11px);
  text-align:center; padding:1.5rem;
}
.vframe .ph .big{ font-size:30px; color:var(--acc); letter-spacing:0; }

/* ---------- back link ---------- */

.back{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-dim); margin-bottom:2rem;
}
.back:hover{ color:var(--acc); }
.back::before{ content:"←"; }

/* ---------- placeholder marker ---------- */

.todo{
  border:1px dashed rgba(255,179,71,.4);
  background:rgba(255,179,71,.05);
  color:var(--acc-2);
  font-size:11.5px; letter-spacing:.06em;
  padding:.6em .9em; border-radius:2px;
  margin:0 0 1.4rem;
}
.todo b{ letter-spacing:.16em; text-transform:uppercase; font-size:10px; }

/* ============================================================
   responsive
   ============================================================ */

@media (max-width:900px){
  .site-row{ grid-template-columns:2.4em 1fr 1.4em; gap:.5em 1em; }
  .site-row .era{ grid-column:2; }
  .site-row .form{ grid-column:2; }
}

@media (max-width:760px){
  #hud{ display:none; }
  #menu-toggle{ display:block; }
  #nav{
    position:fixed; top:var(--bar); left:0; right:0;
    flex-direction:column; gap:0;
    background:rgba(4,7,10,.97);
    border-bottom:1px solid var(--line);
    padding:.5rem var(--gut) 1rem;
    display:none;
  }
  #nav.open{ display:flex; }
  #nav a{ padding:.85em 0; border-bottom:1px solid var(--line); }
  .note-row{ flex-wrap:wrap; gap:.3em 1em; }
  .note-row .date{ flex:0 0 auto; }
}