/* ============================================================
   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;
  /* 4.37:1 and 2.03:1 against the ground before this, which fails AA on the nav links and
     every HUD label they are used for. Same two hues, lifted to 6.0 and 4.7. */
  --fg-dim:    #6e9488;
  --fg-faint:  #5f8177;
  --acc:       #4dffb0;   /* phosphor */
  --acc-2:     #ffb347;   /* amber */
  --acc-3:     #6cc5ff;   /* ice */
  --danger:    #ff5f6d;

  /* The ground, as channels, so every scrim and gradient below can set its own alpha
     against it. Eight places used to hardcode 4,7,10 and none of them could follow a
     theme. --vig is the vignette's ink, which is heavy on black and barely there on paper. */
  --ink:       4,7,10;
  /* The accent as channels, for the low-alpha washes behind hovers and chips, and the
     brightest text on the page, which is lighter than --fg on black and darker on paper. */
  --acc-rgb:   77,255,176;
  --fg-bright: #e6fff5;
  --fg-head:   #dcf5ec;   /* headings: a step above --fg, a step below --fg-bright */
  --glow:      0 0 30px rgba(var(--acc-rgb),.22);
  --on-acc:    #02100a;
  --vig:       0,0,0,.72;

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

/* ---------- light ----------
   A terminal on paper rather than a terminal turned inside out. The ground is warm
   off-white, the ink is nearly black, and the phosphor becomes a deep green that still
   reads as phosphor at 5.9:1 instead of the 15:1 glow that only works on black.

   Scoped past `.underwater` on purpose: the ocean is dark whichever theme is set, and
   `body.underwater` further down owns those variables outright when it is on. */
:root[data-theme="light"] body:not(.underwater){
  --bg:        #eef1ea;
  --bg-2:      #e6eae2;
  --panel:     rgba(255,255,255,.66);
  --line:      rgba(8,105,74,.20);
  --line-hard: rgba(8,105,74,.40);
  --fg:        #16211d;
  --fg-dim:    #44584f;
  --fg-faint:  #5a6d64;
  --acc:       #08694a;
  --acc-2:     #8a5300;
  --acc-3:     #14618f;
  --danger:    #a8202b;
  --ink:       238,241,234;
  --on-acc:    #f4f7f1;
  --vig:       0,0,0,.10;
  --acc-rgb:   8,105,74;
  /* On black the brightest text is lighter than --fg; on paper it is darker. Same role,
     opposite direction, which is why it cannot just be --fg. */
  --fg-bright: #0b1512;
  --fg-head:   #12201b;
  /* A glow around near-black type on paper is a smudge. */
  --glow:      none;
}
:root[data-theme="light"] body:not(.underwater){
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(8,105,74,.06), transparent 60%),
    radial-gradient(900px 700px at 10% 110%, rgba(20,97,143,.05), transparent 60%),
    var(--bg);
}
:root[data-theme="light"]{ background:#eef1ea; }

/* The overlays are all darkening effects, which on a pale ground read as dirt rather
   than as a CRT. Scanlines go nearly away and the grain goes entirely. */
:root[data-theme="light"] body:not(.underwater) #scanlines{ opacity:.14; }
:root[data-theme="light"] body:not(.underwater) #grain{ opacity:.02; }
/* The wireframe is drawn in ink now (see setTheme in megalith.js) and does not need to
   be dimmed as far to stay behind the text. */
:root[data-theme="light"] body:not(.underwater).dense #gl{ opacity:.62; }
:root[data-theme="light"] body:not(.underwater).stilled #gl{ opacity:.34; }

/* ---------- 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;
}

/* The light theme dives into sunlit shallows rather than the deep: pale water
   for paper, the same hues taken down to ink, exactly as the dry light theme
   does it. Higher specificity than body.underwater above, so it wins there. */
:root[data-theme="light"] body.underwater{
  --bg:        #dcedf0;
  --bg-2:      #d2e6ea;
  --panel:     rgba(255,255,255,.66);
  --acc:       #0b6c8a;
  --acc-2:     #a85a20;
  --acc-3:     #14618f;
  --line:      rgba(11,108,138,.22);
  --line-hard: rgba(11,108,138,.42);
  --fg:        #14262c;
  --fg-dim:    #40606b;
  --fg-faint:  #587681;
  --ink:       220,237,240;
  --on-acc:    #f2f8f9;
  --vig:       0,0,0,.10;
  --acc-rgb:   11,108,138;
  --fg-bright: #0a181d;
  --fg-head:   #10222a;
  --glow:      none;
}
:root[data-theme="light"] body.underwater{
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(11,108,138,.08), transparent 60%),
    radial-gradient(900px 700px at 10% 110%, rgba(20,97,143,.06), transparent 60%),
    #dcedf0;
}
:root[data-theme="light"] body.underwater #scanlines{ opacity:.14; }
:root[data-theme="light"] body.underwater #grain{ opacity:.02; }
:root[data-theme="light"] body.underwater.dense #gl{ opacity:.62; }

*,*::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(var(--acc-rgb),.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:var(--on-acc); }

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(var(--vig)) 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(var(--ink),.94), rgba(var(--ink),.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; }

/* The sun and the moon share one button and one box; only one is ever drawn. Both are
   strokes rather than fills so they inherit the accent like every other mark on the page. */
#theme{
  background:none; border:1px solid var(--line); border-radius:2px;
  color:var(--acc); cursor:pointer; padding:.3em; margin-left:1.4em;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, color .2s;
}
#theme:hover{ border-color:var(--line-hard); }
#theme svg{
  width:15px; height:15px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
/* The moon means "you are in the dark one"; the sun appears once you are in the light one,
   so the icon always names the theme you are in rather than the one you would get. */
#theme .i-sun{ display:none; }
:root[data-theme="light"] #theme .i-moon{ display:none; }
:root[data-theme="light"] #theme .i-sun{ display:block; }
/* The moon is a solid disc with a bite out of it, so it wants a fill and no stroke. */
#theme .i-moon path{ fill:currentColor; stroke:none; }

#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(var(--ink),.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(var(--acc-rgb),.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(var(--acc-rgb),.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(var(--acc-rgb),.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:var(--fg-head); }
.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(var(--ink),.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(var(--ink),.94) 0%, rgba(var(--ink),.94) 72%, rgba(var(--ink),.86) 84%,
    rgba(var(--ink),.5) 93%, rgba(var(--ink),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(var(--ink),.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:var(--fg-bright);
  text-shadow:var(--glow);
}
h2{ font-size:clamp(1.5rem, 3.6vw, 2.4rem); color:var(--fg-head); }
h3{ font-size:clamp(1.05rem, 2vw, 1.3rem); color:var(--fg-head); }

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

code, kbd{
  font-family:var(--mono); font-size:.9em;
  background:rgba(var(--acc-rgb),.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(var(--acc-rgb),.04);
  border-radius:2px;
  transition:background .2s, border-color .2s, transform .2s, box-shadow .2s;
  position:relative;
}
.btn:hover{
  background:rgba(var(--acc-rgb),.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; }

/* ---------- the keys card (?) ---------- */
#foot-mid button{
  background:none; border:none; color:var(--fg-faint); font:inherit;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer; padding:.2em .5em;
}
#foot-mid button:hover{ color:var(--acc); }
#help{
  background:var(--panel); color:var(--fg);
  border:1px solid var(--line-hard); border-radius:6px;
  padding:1.6rem 1.9rem; min-width:min(26rem, 90vw);
  backdrop-filter:blur(12px);
}
#help::backdrop{ background:rgba(var(--ink),.55); backdrop-filter:blur(3px); }
#help h2{ font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--acc); margin-bottom:1.1em; }
#help dl div{ display:flex; gap:1.2em; padding:.42em 0; border-bottom:1px solid var(--line); }
#help dt{ font-family:inherit; color:var(--acc-2); min-width:7.5em; }
#help dd{ color:var(--fg-dim); }
#help form{ margin-top:1.3rem; text-align:right; }

/* ---------- markdown tables ---------- */
.tbl{ overflow-x:auto; margin:1.2em 0; }
.tbl table{ border-collapse:collapse; font-size:13.5px; }
.tbl th, .tbl td{ border:1px solid var(--line); padding:.55em .95em; text-align:left; }
.tbl th{ color:var(--acc); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.tbl td:first-child{ color:var(--fg-dim); }

/* ---------- liquid glass (type "glass") ----------
   The refraction itself is an SVG displacement filter that glass.js applies
   per element through backdrop-filter. CSS owns the material: a thinner
   tint so there is something behind the pane to bend, a lit rim, and
   corners round enough for the lens to read. */
body.glassmode .panel,
body.glassmode .work-card,
body.glassmode #hud{
  border-radius:14px;
  background:linear-gradient(155deg,
    color-mix(in srgb, var(--panel) 55%, transparent),
    color-mix(in srgb, var(--panel) 22%, transparent));
  box-shadow:
    inset 1px 1px 0 color-mix(in srgb, var(--fg) 16%, transparent),
    inset 0 0 24px -8px color-mix(in srgb, var(--fg) 14%, transparent),
    0 20px 50px -30px rgba(0,0,0,.6);
}
/* the corner brackets fight round corners, so they sit this one out */
body.glassmode .panel::before,
body.glassmode .panel::after{ display:none; }

/* The HUD floats over whatever the page puts behind it, including dark video
   posters in the light theme, so its tint stays thick enough to read through. */
body.glassmode #hud{
  background:linear-gradient(155deg,
    color-mix(in srgb, var(--panel) 88%, transparent),
    color-mix(in srgb, var(--panel) 62%, transparent));
}

/* Buttons become lozenges of the same material. The backdrop-filter here is
   the fallback for browsers that cannot refract; where they can, glass.js
   overrides it inline with the lens. */
body.glassmode .btn{
  border-radius:999px;
  background:linear-gradient(155deg,
    color-mix(in srgb, var(--panel) 45%, transparent),
    color-mix(in srgb, var(--panel) 16%, transparent));
  backdrop-filter:blur(6px) saturate(140%);
  box-shadow:inset 1px 1px 0 color-mix(in srgb, var(--fg) 14%, transparent);
}

/* Note rows become slim panes instead of ruled lines. */
body.glassmode .note-row{
  border:1px solid var(--line);
  border-radius:12px;
  padding:1.05rem 1.15rem;
  margin-bottom:.6rem;
  background:linear-gradient(155deg,
    color-mix(in srgb, var(--panel) 50%, transparent),
    color-mix(in srgb, var(--panel) 18%, transparent));
  backdrop-filter:blur(6px) saturate(140%);
  box-shadow:inset 1px 1px 0 color-mix(in srgb, var(--fg) 12%, transparent);
}
body.glassmode .note-row:hover{ padding-left:1.7rem; }

.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(var(--acc-rgb),.5);
}
.work-thumb{
  aspect-ratio:16/9; position:relative;
  background:
    repeating-linear-gradient(45deg, rgba(var(--acc-rgb),.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(var(--ink),.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(var(--acc-rgb),.03);
  transition:border-color .2s,color .2s,background .2s;
}
.chip:hover{ border-color:var(--acc); color:var(--acc); background:rgba(var(--acc-rgb),.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:var(--fg-head); }
.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(var(--acc-rgb),.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(var(--ink),.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; }
}