/* ==========================================================================
   cidy@cidy - global stylesheet
   amber terminal. everything lives inside a drawn box.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --bg:          #0d0a05;
  --bg-deep:     #090702;
  --panel:       #161107;
  --panel-2:     #1c1509;
  --panel-hi:    #241c0d;

  --line:        #6d4f1c;
  --line-soft:   #4a3512;
  --line-hot:    #a87c2a;

  /* amber ramp - the base text colour is now bright enough to read */
  --amber:       #ffbe55;
  --amber-soft:  #f3c87c;
  --amber-dim:   #cb9d4f;
  --amber-faint: #9d7c3e;
  --bone:        #fff3d6;

  /* ansi accents */
  --green:       #a5e252;
  --cyan:        #5fd8d8;
  --yellow:      #ffd95e;
  --red:         #ff7043;
  --violet:      #cba6ff;

  --glow: 0 0 5px rgba(255,190,85,.20);

  --mono: "Share Tech Mono", "Consolas", ui-monospace, "Courier New", Courier, monospace;
  --disp: "Oswald", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;

  --wrap: 1060px;
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  padding:0 14px;
  background-color:var(--bg);
  background-image:
    radial-gradient(130% 90% at 50% -10%, #241a09 0%, transparent 64%),
    linear-gradient(180deg,#0e0b06 0%, #090702 100%);
  color:var(--amber-soft);
  font-family:var(--mono);
  font-size:16px;
  line-height:1.65;
  letter-spacing:.02em;
  text-shadow:var(--glow);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}

/* ---------- CRT overlays (subtle - the screen has to stay readable) ------- */
.scan,.grain,.vig{ position:fixed; inset:0; pointer-events:none; z-index:9000; }

.scan{
  opacity:.16;
  background:repeating-linear-gradient(180deg,
    rgba(0,0,0,.5) 0 1px,
    rgba(0,0,0,0)  1px 3px);
}
.grain{
  opacity:.035;
  mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size:200px 200px;
}
.vig{
  background:radial-gradient(125% 95% at 50% 42%, transparent 58%, rgba(0,0,0,.45) 100%);
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

/* ---------- the outer bezel: this whole page is one terminal ------------- */
.frame{
  position:fixed; inset:5px;
  border:3px double var(--line-hot);
  pointer-events:none; z-index:8990;
}
.frame::before,.frame::after{
  position:absolute; font-family:var(--mono); font-size:13px; line-height:1;
  color:var(--line-hot); background:var(--bg); padding:0 4px;
}
.frame::before{ content:"+"; top:-7px; left:-2px; }
.frame::after{ content:"+"; bottom:-7px; right:-2px; }

/* ---------- layout ------------------------------------------------------- */
/* The header, ticker, content and footer all carry the same left/right rule,
   so a single unbroken box runs from the top of the page to the bottom. */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px; }

main{ position:relative; z-index:1; padding-bottom:0; }
main > .wrap{
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  padding-top:6px;
  padding-bottom:44px;
}

/* ---------- type --------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--disp);
  font-weight:600;
  color:var(--bone);
  letter-spacing:.07em;
  text-transform:uppercase;
  line-height:1.1;
  margin:0 0 12px;
  text-shadow:0 0 12px rgba(255,190,85,.25);
}
h1{ font-size:clamp(30px,5.2vw,50px); }
h2{ font-size:clamp(21px,3vw,27px); }
h3{ font-size:18px; letter-spacing:.1em; }
p{ margin:0 0 15px; }
a{ color:var(--amber); text-decoration:none; border-bottom:1px dotted rgba(255,190,85,.45); }
a:hover{ color:#150f04; background:var(--amber); border-bottom-color:transparent; text-shadow:none; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--cyan); outline-offset:2px;
}
hr{ border:0; border-top:1px solid var(--line); margin:26px 0; }
code,kbd{ font-family:var(--mono); background:#100c06; border:1px solid var(--line); padding:1px 5px; color:var(--cyan); font-size:.9em; }
::selection{ background:var(--amber); color:#150f04; text-shadow:none; }

.dim{ color:var(--amber-dim); }
.faint{ color:var(--amber-faint); }
.tiny{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.lede{ font-size:17px; color:var(--bone); border-left:2px solid var(--line-hot); padding-left:14px; }
.center{ text-align:center; }

/* ---------- the logo: a prompt left sitting at the home directory -------- */
.brand{
  display:block; background:#0b0904;
  border:1px solid var(--line); padding:0; min-width:212px;
  box-shadow:inset 0 0 24px rgba(255,170,50,.07);
}
.brand:hover{ background:#0b0904; border-color:var(--line-hot); }
.brand__chrome{
  display:flex; align-items:center; gap:5px;
  padding:3px 7px; border-bottom:1px solid var(--line-soft); background:#130e06;
}
.brand__chrome i{
  width:7px; height:7px; border:1px solid var(--amber-faint); display:block; border-radius:50%;
}
.brand__chrome span{
  margin-left:5px; font-size:9px; letter-spacing:.18em; color:var(--amber-faint); text-transform:uppercase;
}
.brand__screen{
  padding:7px 9px 9px; font-family:var(--mono); font-size:14px; line-height:1.35; white-space:nowrap;
}
.brand__ps1{ color:var(--bone); }
.brand__ps1 b{ color:var(--green); font-weight:400; }   /* user@host */
.brand__ps1 i{ color:var(--cyan); font-style:normal; }  /* cwd */
.cursor{
  display:inline-block; width:8px; height:14px; background:var(--amber);
  vertical-align:-2px; margin-left:3px; box-shadow:0 0 9px rgba(255,190,85,.6);
  animation:blink 1.1s steps(2,end) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .cursor{ animation:none; } }

/* ---------- header / nav ------------------------------------------------- */
.topbar{ position:sticky; top:0; z-index:60; }
.topbar__in{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:10px 20px; max-width:var(--wrap); margin:0 auto;
  background:linear-gradient(180deg,#100c06,#0c0904);
  border:1px solid var(--line);
  border-bottom:0;
}
.nav{ display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; }
.nav a{
  border:1px solid transparent;
  padding:5px 11px; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber-soft); background:transparent;
}
.nav a:hover{ color:var(--bone); background:var(--panel-2); border-color:var(--line); text-shadow:var(--glow); }
.nav a[aria-current="page"]{
  color:#150f04; background:var(--amber); border-color:var(--amber); text-shadow:none;
}
.nav a::before{ content:"/"; color:var(--cyan); margin-right:5px; }
.nav a[aria-current="page"]::before{ color:#150f04; }

.navtoggle{
  display:none; margin-left:auto;
  background:var(--panel); color:var(--amber-soft); border:1px solid var(--line);
  font-family:var(--mono); font-size:13px; letter-spacing:.12em; padding:6px 12px; cursor:pointer;
}
.navtoggle:hover{ border-color:var(--line-hot); color:var(--bone); }

@media (max-width:820px){
  .navtoggle{ display:block; }
  .nav{ display:none; width:100%; margin:8px 0 2px; flex-direction:column; }
  .nav.is-open{ display:flex; }
  .nav a{ border:1px solid var(--line-soft); }
}

/* status ticker - part of the same box */
.ticker{
  max-width:var(--wrap); margin:0 auto;
  background:#0b0904;
  border:1px solid var(--line);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line);
  overflow:hidden; white-space:nowrap;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber-dim);
}
.ticker__in{ display:inline-block; padding:5px 0; animation:slide 48s linear infinite; }
.ticker__in span{ padding:0 26px; }
.ticker__in span::before{ content:"> "; color:var(--green); }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .ticker__in{ animation:none; } }

/* ---------- panels ------------------------------------------------------- */
.panel{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);
  box-shadow:0 0 0 1px #0b0904, 0 0 0 2px var(--line-soft), inset 0 0 38px rgba(255,170,50,.05);
  position:relative;
}
.panel__bar{
  display:flex; align-items:center; gap:10px;
  padding:7px 12px; border-bottom:1px solid var(--line);
  background:#110d06;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber-dim);
}
.panel__bar b{ color:var(--cyan); font-weight:400; }
.panel__bar .dots{ margin-left:auto; letter-spacing:.3em; color:var(--line-hot); }
.panel__body{ padding:20px; }
.panel__body > *:last-child{ margin-bottom:0; }

/* command echo line - introduces a section */
.cmd{
  font-size:13.5px; color:var(--amber-dim); letter-spacing:.06em;
  border-bottom:1px solid var(--line-soft); padding-bottom:6px; margin:0 0 14px;
}
.cmd::before{ content:"cidy@cidy:/$ "; color:var(--green); }
.cmd b{ color:var(--bone); font-weight:400; }

/* ---------- section headings -------------------------------------------- */
.sect{ margin:40px 0 16px; display:flex; align-items:flex-end; gap:14px; }
.sect h2{ margin:0; }
.sect .rule{ flex:1; height:0; border-top:1px solid var(--line); margin-bottom:9px; }
.sect .meta{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); margin-bottom:6px; white-space:nowrap; opacity:.8; }

/* ---------- hero --------------------------------------------------------- */
.hero{
  position:relative; margin-top:22px;
  border:1px solid var(--line);
  box-shadow:0 0 0 1px #0b0904, 0 0 0 2px var(--line-soft);
  background:#0d0a05;
  overflow:hidden;
}
/* banners are a mix of wide plates and near-square photos - cap the height so
   a tall one does not push the whole page down, and crop it high so the sign
   survives instead of the parking lot */
.hero img{
  display:block; width:100%; height:auto;
  max-height:clamp(260px,40vw,440px); object-fit:cover; object-position:center 35%;
  opacity:.62; filter:sepia(.5) saturate(1.45) hue-rotate(-12deg) contrast(1.05);
}
.hero__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 22px 20px;
  background:linear-gradient(180deg,transparent,rgba(9,7,3,.72) 38%,rgba(9,7,3,.97) 72%);
}
.hero__cap h1{ margin:0 0 6px; }
.hero__cap p{ margin:0; max-width:58ch; color:var(--amber-soft); }

/* ---------- post cards --------------------------------------------------- */
.cards{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(236px,1fr)); }
.card{
  display:flex; flex-direction:column;
  border:1px solid var(--line); background:var(--panel);
  color:inherit;
  transition:border-color .14s ease, transform .14s ease, background .14s ease, box-shadow .14s ease;
}
.card:hover{
  border-color:var(--amber); background:var(--panel-2); transform:translateY(-2px);
  color:inherit; box-shadow:0 0 24px rgba(255,170,50,.14);
}
.card__img{ position:relative; aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--line); background:#0d0a05; }
.card__img img{ width:100%; height:100%; object-fit:cover; object-position:center 28%; opacity:.7; filter:sepia(.45) saturate(1.35) hue-rotate(-10deg); transition:opacity .18s ease; }
.card:hover .card__img img{ opacity:.95; }
.card__cat{
  position:absolute; left:0; bottom:0;
  background:rgba(10,8,4,.92); border-top:1px solid var(--line); border-right:1px solid var(--line);
  color:var(--cyan); font-size:11px; letter-spacing:.18em; text-transform:uppercase; padding:3px 9px;
}
/* card with no photograph on the machine: the category badge comes inside */
.card__cat--inline{ position:static; align-self:flex-start; border:1px solid var(--line); background:#100c06; padding:2px 8px; }
.card__body{ padding:13px 14px 15px; display:flex; flex-direction:column; gap:7px; flex:1; }
.card__date{ font-size:11px; letter-spacing:.18em; color:var(--yellow); text-transform:uppercase; opacity:.85; }
.card__title{ font-family:var(--disp); font-size:19px; letter-spacing:.05em; text-transform:uppercase; color:var(--bone); line-height:1.16; margin:0; }
.card__excerpt{ font-size:14px; color:var(--amber-soft); margin:0; }
.card__more{ margin-top:auto; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); }
.card__more::after{ content:" _"; }

/* ---------- tags --------------------------------------------------------- */
.tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--amber-dim); background:#100c06; border:1px solid var(--line-soft);
  padding:2px 7px;
}
.tag::before{ content:"#"; color:var(--green); }
a.tag:hover{ color:#150f04; background:var(--green); border-color:var(--green); text-shadow:none; }
a.tag:hover::before{ color:#150f04; }

/* ---------- controls ----------------------------------------------------- */
.controls{ display:grid; gap:12px; margin:20px 0 6px; }
.controls__row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.field{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:#0d0a05; padding:0 10px; flex:1 1 250px; }
.field__prompt{ color:var(--green); font-size:14px; white-space:nowrap; }
.field input{
  flex:1; background:transparent; border:0; color:var(--bone);
  font-family:var(--mono); font-size:15px; padding:9px 0; letter-spacing:.04em; min-width:0;
  text-shadow:var(--glow);
}
.field input::placeholder{ color:var(--amber-faint); }
.field:focus-within{ border-color:var(--cyan); box-shadow:0 0 0 1px rgba(95,216,216,.25), inset 0 0 18px rgba(255,170,50,.05); }

.select{ position:relative; display:inline-flex; }
.select select{
  appearance:none; -webkit-appearance:none;
  background:#0d0a05; color:var(--amber-soft); border:1px solid var(--line);
  font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  padding:9px 32px 9px 11px; cursor:pointer;
}
.select::after{ content:"\25BC"; position:absolute; right:11px; top:50%; transform:translateY(-50%); color:var(--cyan); font-size:9px; pointer-events:none; }
.select select:hover{ border-color:var(--line-hot); color:var(--bone); }
.select select option{ background:#0d0a05; color:var(--amber-soft); }

.btn{
  background:#0d0a05; color:var(--amber-soft); border:1px solid var(--line);
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  padding:9px 13px; cursor:pointer;
}
.btn:hover{ color:#150f04; background:var(--amber); border-color:var(--amber); text-shadow:none; }

.filterbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:baseline; }
.filterbar__label{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber-faint); min-width:78px; }
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  background:#0d0a05; color:var(--amber-soft); border:1px solid var(--line);
  padding:4px 10px; cursor:pointer; font-family:var(--mono);
}
.chip:hover{ color:var(--bone); border-color:var(--line-hot); }
.chip.is-on{ background:var(--cyan); color:#0b1414; border-color:var(--cyan); text-shadow:none; }
.chip.is-on .faint{ color:#0b1414; opacity:.75; }
.chip--tag::before{ content:"#"; color:var(--green); }
.chip--tag.is-on{ background:var(--green); color:#131a06; border-color:var(--green); }
.chip--tag.is-on::before{ color:#131a06; }
.chip--tag.is-on .faint{ color:#131a06; opacity:.75; }

.resultline{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-dim);
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  padding:8px 2px; margin:14px 0 0;
}
.resultline b{ color:var(--bone); font-weight:400; }
.resultline .clear{ margin-left:auto; }

/* ---------- post list ---------------------------------------------------- */
.yeargroup{ margin-top:30px; }
.yeargroup__head{
  display:flex; align-items:center; gap:14px;
  font-family:var(--disp); font-size:34px; letter-spacing:.16em; color:var(--amber);
  text-transform:uppercase; margin-bottom:8px;
}
.yeargroup__head .rule{ flex:1; height:0; border-top:1px solid var(--line); }
.yeargroup__head .n{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--amber-faint); }

.postlist{
  list-style:none; margin:0; padding:0;
  border:1px solid var(--line);
  background:#100c06;
}
.postrow{ border-bottom:1px solid var(--line-soft); }
.postrow:last-child{ border-bottom:0; }
.postrow > a{
  display:grid; gap:4px 18px; padding:14px 12px; border:0;
  grid-template-columns:112px 1fr; align-items:start; color:inherit; background:transparent;
  transition:background .12s ease, box-shadow .12s ease;
}
.postrow > a:hover{
  background:var(--panel-2); box-shadow:inset 3px 0 0 var(--amber);
  color:inherit; text-shadow:var(--glow);
}
.postrow__date{ font-size:12px; letter-spacing:.1em; color:var(--yellow); padding-top:3px; white-space:nowrap; opacity:.85; }
.postrow > a:hover .postrow__date{ opacity:1; }
.postrow__main{ min-width:0; }
.postrow__title{
  display:block;
  font-family:var(--disp); font-size:20px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--bone); line-height:1.2; margin:0 0 4px;
}
.postrow__title .cat{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--cyan);
  border:1px solid var(--line); padding:1px 7px; margin-left:9px; vertical-align:middle; text-transform:uppercase;
}
.postrow__excerpt{ display:block; font-size:14px; color:var(--amber-soft); margin:0 0 7px; }
.postrow__meta{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.hit{ background:var(--yellow); color:#1a1400; text-shadow:none; }
@media (max-width:620px){
  .postrow > a{ grid-template-columns:1fr; }
  .postrow__date{ padding-top:0; }
}

.empty{
  border:1px dashed var(--line-hot); background:#0d0a05;
  padding:34px 20px; text-align:center; color:var(--amber-soft); margin-top:24px;
}
.empty b{ color:var(--bone); display:block; font-family:var(--disp); font-size:20px; letter-spacing:.1em; margin-bottom:6px; }

/* ---------- single post -------------------------------------------------- */
.article{
  max-width:80ch;
  border:1px solid var(--line);
  box-shadow:0 0 0 1px #0b0904, 0 0 0 2px var(--line-soft);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  padding:24px 26px 26px;
}
@media (max-width:620px){ .article{ padding:18px 16px 20px; } }
.article__head{ border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:22px; }
.article__kicker{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); margin-bottom:8px; }
.article__meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); margin-top:10px; opacity:.85; }
.article__body{ font-size:16.5px; }
.article__body p{ margin:0 0 17px; }
.article__body h2{ margin:30px 0 12px; font-size:22px; }
.article__body h3{ margin:24px 0 10px; }
.article__body ul,.article__body ol{ margin:0 0 17px; padding-left:22px; }
.article__body li{ margin-bottom:6px; }
.article__body li::marker{ color:var(--green); }
.article__body img{ width:100%; height:auto; border:1px solid var(--line); display:block; opacity:.8; filter:sepia(.45) saturate(1.35) hue-rotate(-10deg); }
.article__body figure{ margin:24px 0; }
/* post images are landscape plates or upright photographs - let the upright
   ones size off their height instead of running the length of the column */
.article__body figure img{ width:auto; max-width:100%; max-height:74vh; margin:0 auto; }
.article__body figcaption{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber-faint); margin-top:7px; }
.article__body blockquote{
  margin:24px 0; padding:14px 18px;
  border-left:2px solid var(--amber); background:#110d06; color:var(--bone);
}
.article__body blockquote p:last-child{ margin:0; }
.article__body pre{
  background:#0a0803; border:1px solid var(--line); padding:14px; overflow-x:auto;
  color:var(--green); font-size:13.5px; line-height:1.6; margin:0 0 20px;
}
.article__body pre code{ background:none; border:0; padding:0; color:inherit; }

.postnav{ display:flex; gap:14px; justify-content:space-between; margin-top:40px; border-top:1px solid var(--line); padding-top:18px; flex-wrap:wrap; }
.postnav a{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; max-width:46%; }
.postnav .spacer{ margin-left:auto; }
@media (max-width:620px){ .postnav a{ max-width:100%; } }

/* ---------- about -------------------------------------------------------- */
.about{ display:grid; gap:26px; grid-template-columns:minmax(240px,330px) 1fr; align-items:start; margin-top:22px; }
@media (max-width:780px){ .about{ grid-template-columns:1fr; } }
.portrait{
  border:1px solid var(--line);
  box-shadow:0 0 0 1px #0b0904, 0 0 0 2px var(--line-soft);
  background:#0d0a05; padding:8px; margin:0;
}
.portrait img{ display:block; width:100%; height:auto; filter:sepia(.5) saturate(1.45) hue-rotate(-12deg) contrast(1.02); opacity:.95; }
.portrait figcaption{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-faint); padding:9px 4px 3px; text-align:center; }
/* a portrait set into a column of prose rather than the side rail */
.portrait--inset{ max-width:300px; margin:18px 0 26px; }

.specs{ width:100%; border-collapse:collapse; font-size:14px; }
.specs th,.specs td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.specs th{ color:var(--cyan); font-weight:400; letter-spacing:.14em; text-transform:uppercase; font-size:11px; width:38%; opacity:.85; }
/* long unbroken values (an email, a url) used to push these tables past the
   panel they sit in - worst in the narrow left rail. `anywhere` counts
   toward min-content width, so the column can actually give. */
.specs td{ color:var(--amber-soft); overflow-wrap:anywhere; }
.specs th{ overflow-wrap:anywhere; }
.specs tr:hover td{ color:var(--bone); }
.specs tr:hover th{ opacity:1; }

/* ---------- media -------------------------------------------------------- */
.mediagrid{
  display:grid; gap:12px; margin-top:8px;
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  grid-auto-flow:dense; /* let square photos backfill the gaps wide videos leave */
}
.thumb{
  position:relative; display:block; border:1px solid var(--line); background:#0d0a05;
  aspect-ratio:16/9; overflow:hidden; cursor:pointer; padding:0;
}
.thumb img{ width:100%; height:100%; object-fit:cover; opacity:.72; filter:sepia(.45) saturate(1.35) hue-rotate(-10deg); transition:opacity .16s ease, transform .3s ease; }
.thumb:hover{ border-color:var(--amber); box-shadow:0 0 22px rgba(255,170,50,.16); }
.thumb:hover img{ opacity:1; transform:scale(1.03); }
.thumb__label{
  position:absolute; left:0; right:0; bottom:0; padding:7px 9px;
  background:linear-gradient(180deg,transparent,rgba(9,7,3,.95));
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-soft); text-align:left;
}
.thumb:hover .thumb__label{ color:var(--bone); }
.thumb__play{
  position:absolute; inset:0; display:grid; place-items:center;
  color:var(--bone); font-size:32px; text-shadow:0 2px 14px #000; opacity:.8;
}
.thumb:hover .thumb__play{ color:var(--amber); opacity:1; }

.lightbox{
  position:fixed; inset:0; z-index:9500; display:none;
  background:rgba(6,4,2,.95); padding:26px 18px;
}
.lightbox.is-open{ display:grid; place-items:center; }
.lightbox__inner{
  max-width:1000px; width:100%; border:1px solid var(--amber);
  box-shadow:0 0 0 3px #0b0904, 0 0 50px rgba(255,170,50,.18);
  background:var(--panel);
}
.lightbox__media{ background:#0a0803; display:grid; place-items:center; min-height:180px; }
.lightbox__media img{ display:block; max-width:100%; max-height:70vh; }
.lightbox__cap{ display:flex; gap:12px; align-items:center; padding:10px 13px; border-top:1px solid var(--line); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-soft); flex-wrap:wrap; }
.lightbox__cap .x{ margin-left:auto; }
.lb-nav{ background:none; border:1px solid var(--line); color:var(--amber-soft); font-family:var(--mono); cursor:pointer; padding:3px 10px; }
.lb-nav:hover{ color:#150f04; background:var(--amber); border-color:var(--amber); text-shadow:none; }

/* ---------- notice ------------------------------------------------------- */
.notice{
  border:1px solid var(--line); border-left:3px solid var(--cyan);
  background:#110d06; padding:14px 16px; font-size:14px; color:var(--amber-soft);
}
.notice b{ color:var(--bone); font-weight:400; }
.notice p:last-child{ margin-bottom:0; }
.notice--warn{ border-left-color:var(--red); }
.notice--warn b{ color:var(--red); }

/* ---------- footer ------------------------------------------------------- */
.foot{ margin-top:0; position:relative; z-index:1; }
.foot__in{
  max-width:var(--wrap); margin:0 auto; padding:24px 20px 20px;
  display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start;
  font-size:12px; letter-spacing:.1em; color:var(--amber-dim);
  background:#0b0904;
  border:1px solid var(--line);
  border-bottom:0;
}
.foot__col{ flex:1 1 200px; }
.foot__col h4{ font-size:12px; letter-spacing:.2em; color:var(--cyan); margin-bottom:8px; }
.foot__col a{ color:var(--amber-soft); border-bottom-color:rgba(243,200,124,.35); }
.foot__col ul{ list-style:none; margin:0; padding:0; }
.foot__col li{ margin-bottom:4px; }
.foot__bottom{
  max-width:var(--wrap); margin:0 auto; padding:8px 20px 24px;
  font-size:11px; letter-spacing:.14em; color:var(--amber-faint); text-transform:uppercase;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  background:#0b0904;
  border:1px solid var(--line);
  border-top:0;
}
/* the way in */
.speck{
  color:#1b1408; border:0; cursor:default; font-size:11px; padding:0 3px;
  transition:color .6s ease;
}
.speck:hover{ color:var(--red); border:0; background:none; text-shadow:none; }

.badges{ display:flex; gap:6px; margin-left:auto; flex-wrap:wrap; }
.badge{
  border:1px solid var(--line-soft); background:#0d0a05; color:var(--amber-faint);
  font-size:9px; letter-spacing:.14em; padding:3px 6px; text-transform:uppercase;
}

/* ---------- two-up layout ------------------------------------------------ */
.split{ display:grid; gap:16px; grid-template-columns:1.35fr 1fr; align-items:start; }
@media (max-width:780px){ .split{ grid-template-columns:1fr; } }

/* ---------- ~/.tungi ----------------------------------------------------- */
.marquee{
  margin-top:14px; border:1px solid var(--line); background:#0d0a05;
  overflow:hidden; white-space:nowrap;
  font-size:12px; letter-spacing:.24em; color:var(--violet); text-transform:uppercase;
}
.marquee__in{ display:inline-block; padding:6px 0; animation:slide 26s linear infinite; }
.marquee__in span{ padding:0 22px; }
@media (prefers-reduced-motion:reduce){ .marquee__in{ animation:none; } }

.shrine-title{ letter-spacing:.24em; }

.hitcounter{
  display:inline-block;
  font-family:var(--mono); font-size:30px; letter-spacing:.22em;
  color:var(--green); background:#0a0803;
  border:1px solid var(--line-hot); padding:8px 14px;
  box-shadow:inset 0 0 22px rgba(165,226,82,.12);
}

/* ---------- misc --------------------------------------------------------- */
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:10px; z-index:9999; background:var(--panel); color:var(--bone); padding:8px 12px; border:1px solid var(--amber); }
.blinktext{ animation:blink 1.15s steps(2,end) infinite; color:var(--green); }
@media (prefers-reduced-motion:reduce){ .blinktext{ animation:none; } }

/* ---------- narrow phones: the shell prompt is too long to keep inline ---- */
@media (max-width:560px){
  body{ padding:0 8px; }
  .frame{ inset:3px; }
  .field__prompt{ display:none; }
  .field::before{ content:"$"; color:var(--green); font-size:15px; }
  .field input{ font-size:14px; }
  .yeargroup__head{ font-size:28px; }
  .panel__body{ padding:15px; }
  .wrap{ padding:0 14px; }
  .topbar__in{ padding:10px 14px; }
  .foot__in,.foot__bottom{ padding-left:14px; padding-right:14px; }
  .foot__bottom{ font-size:10px; }
}

/* ---------- three-column record: field / value / verified by ------------- */
.tablewrap{ overflow-x:auto; }

.specs--3{ min-width:520px; }
.specs--3 thead th{
  width:auto; color:var(--amber-dim);
  border-bottom:1px solid var(--line); opacity:1;
}
.specs--3 tbody th{ width:31%; }
.specs--3 .v{
  width:23%; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--amber-faint);
}
/* a claim signed off by anybody other than Cidy */
.specs--3 .v.other{ color:var(--rust-hi); }
.specs--3 tr:hover .v{ color:var(--amber-dim); }
.specs--3 tr:hover .v.other{ color:var(--red); }
.specs--3 .cont th{ color:var(--amber-faint); }

/* ---------- real media: video thumbs + player --------------------------- */
.thumb video{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:.72; filter:sepia(.45) saturate(1.35) hue-rotate(-10deg);
  transition:opacity .16s ease, transform .3s ease;
  background:#0d0a05; pointer-events:none;
}
.thumb:hover video{ opacity:1; transform:scale(1.03); }
.thumb__dur{ float:right; padding-left:8px; }
/* a file somebody else put on this machine */
.thumb.is-added{ border-color:var(--rust); }
.thumb.is-added .thumb__label{ color:var(--rust-hi); }

.lightbox__media video{
  display:block; max-width:100%; max-height:72vh; background:#000; outline:none;
}

/* [hidden] must beat the display rules above it, or the lightbox shows an
   empty player under a photo (and an empty image under a video) */
[hidden]{ display:none !important; }