/* alexleloup.com — terminal theme
   Tokens unchanged from the design reference, except --text-faint
   raised from #555049 to #847f72 for WCAG AA contrast on --bg. */

/* ---- self-hosted fonts (latin subsets) ---- */
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/ibm-plex-serif-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Serif'; font-style:italic; font-weight:400; font-display:swap;
  src:url('../fonts/ibm-plex-serif-latin-400-italic.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Serif'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/ibm-plex-serif-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Serif'; font-style:italic; font-weight:500; font-display:swap;
  src:url('../fonts/ibm-plex-serif-latin-500-italic.woff2') format('woff2');
}

:root{
  --bg:#0b0d0c;
  --bg-2:#111413;
  --bg-3:#1a1f1c;
  --text:#e6e1d4;
  --text-dim:#8a8577;
  --text-faint:#847f72;
  --rule:#1f2421;
  --green:#7fc97a;
  --green-deep:#4a8a46;
  --amber:#e4a94a;
  --rust:#d06a4a;
  --blue:#6fa8dc;
  --pink:#d889b0;
  --accent:var(--green);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'JetBrains Mono',monospace;
  font-size:14px; line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
  font-feature-settings:"calt","ss01";
}
/* CRT scanlines, very subtle */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:30;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px);
}
/* vignette */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:29;
  background:radial-gradient(ellipse 100% 80% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}

a{color:var(--text); text-decoration:none}
::selection{ background:var(--green); color:var(--bg)}

:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:60;
  background:var(--green); color:var(--bg);
  padding:8px 14px; font-size:12px; font-weight:600;
}
.skip-link:focus{ left:12px; top:12px }

/* ======= STATUS BAR ======= */
.status{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 16px;
  background:rgba(11,13,12,0.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
  font-size:11px; color:var(--text-dim);
  letter-spacing:.05em;
}
.status .dots{ display:flex; gap:6px; align-items:center}
.status .dot{ width:10px; height:10px; border-radius:50%; background:#3a3a3a}
.status .dot.r{ background:#ff5f56}
.status .dot.y{ background:#ffbd2e}
.status .dot.g{ background:#27c93f}
.status .path{ color:var(--green); font-weight:500}
.status .right{ display:flex; gap:20px; align-items:center}
.status-nav{ gap:14px }
.status-nav a{ color:var(--text-dim); font-size:11px; letter-spacing:.05em; transition:color .15s }
.status-nav a:hover{ color:var(--green) }
.status .right .meta{ color:var(--text-faint)}

/* ======= CONTAINER ======= */
.term{
  max-width:1040px;
  margin:0 auto;
  padding:64px 40px 16px;
  position:relative;
  z-index:5;
}

/* command line */
.cmdline{
  display:flex; align-items:baseline; gap:10px;
  margin:20px 0 6px;
  font-size:14px;
}
.prompt{ color:var(--green); font-weight:500; flex-shrink:0}
.prompt .at{ color:var(--text-faint); font-weight:400}
.prompt .host{ color:var(--blue)}
.prompt .path{ color:var(--amber)}
.cmd{ color:var(--text); font-weight:500}
.cmd .flag{ color:var(--pink)}

/* output block */
.out{
  padding:6px 0 4px 18px;
  border-left:1px solid var(--rule);
  margin-left:2px;
  color:var(--text);
}
.out.tight{ padding-top:2px}
.out .dim{ color:var(--text-dim)}
.out .faint{ color:var(--text-faint)}
.out .k{ color:var(--amber)}
.out .g{ color:var(--green)}
.out .r{ color:var(--rust)}
.out .b{ color:var(--blue)}
.comment{ color:var(--text-faint)}
.comment::before{ content:"# "; color:var(--green-deep)}

/* ======= HERO ======= */
.hero{
  padding-top:40px;
  padding-bottom:12px;
}
.welcome{
  font-size:11px; color:var(--text-faint); letter-spacing:.12em;
  border-bottom:1px dashed var(--rule); padding-bottom:10px; margin-bottom:18px;
  display:flex; justify-content:space-between;
}
.welcome .v{ color:var(--green)}
.ascii{
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(10px,1.1vw,14px); line-height:1.1;
  white-space:pre; color:var(--text);
  margin:24px 0 8px;
  text-shadow:0 0 16px rgba(127,201,122,.15);
}
.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;
}

.ascii-fallback{
  /* visually hidden on desktop (ASCII banner shows the name);
     never display:none — must stay in the a11y tree and SEO */
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
  font-family:'JetBrains Mono',monospace;
  color:var(--text);
  font-weight:600;
}

.hero-title{
  font-family:'IBM Plex Serif',serif; font-style:italic; font-weight:500;
  font-size:24px; line-height:1.3; color:var(--text);
  margin:14px 0 10px;
  text-shadow:0 0 20px rgba(127,201,122,.1);
}

.hero-meta-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  border:1px solid var(--rule);
  padding:14px 18px;
  margin-top:28px;
  font-size:12px;
  background:var(--bg-2);
}
.hero-meta-row .k{ color:var(--text-faint); font-size:10px; letter-spacing:.12em; text-transform:uppercase}
.hero-meta-row .v{ color:var(--text); margin-top:4px}
.hero-meta-row .v .g{ color:var(--green)}
.hero-meta-row .v .a{ color:var(--amber)}

/* ======= NAV (commands) ======= */
.nav-cmds{
  display:flex; gap:4px; flex-wrap:wrap;
  margin-top:20px;
  padding:12px 14px;
  border:1px solid var(--rule);
  background:rgba(0,0,0,.25);
}
.nav-cmds a{
  padding:5px 10px;
  border:1px solid transparent;
  font-size:12px; color:var(--text-dim);
  cursor:pointer;
  transition:all .15s;
}
.nav-cmds a:hover{ border-color:var(--green); color:var(--green); background:rgba(127,201,122,.08)}
.nav-cmds a .s{ color:var(--green-deep); margin-right:4px}

/* ======= SECTIONS ======= */
section{ padding:36px 0; border-top:1px dashed var(--rule)}
section > .sr-only + .cmdline{ margin-top:0 }
section:first-of-type{ border-top:none}

/* ABOUT */
.about-grid{
  display:grid; grid-template-columns:220px 1fr; gap:32px;
  margin-top:14px;
}
.id-card{
  border:1px solid var(--rule);
  background:var(--bg-2);
  padding:14px;
  font-size:11px;
  position:relative;
}
.id-card::before{
  content:"ALEX.ID"; position:absolute; top:-9px; left:14px;
  background:var(--bg); padding:0 6px;
  color:var(--green); font-size:10px; letter-spacing:.12em;
}
.id-photo{
  aspect-ratio:4/5;
  margin-bottom:14px;
  background:
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(127,201,122,.06) 8px 9px),
    linear-gradient(180deg, var(--bg-3) 0%, #0a0e0c 100%);
  border:1px solid var(--rule);
  position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.id-photo img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05);
}
.id-photo .ascii-face{
  font-size:13px; line-height:1.05; white-space:pre;
  color:var(--green); opacity:.55;
  text-align:center;
}
.id-photo .corners::before,
.id-photo .corners::after,
.id-photo::before,
.id-photo::after{
  content:""; position:absolute; width:14px; height:14px;
  border:1px solid var(--green);
}
.id-photo::before{ top:6px; left:6px; border-right:none; border-bottom:none}
.id-photo::after{ bottom:6px; right:6px; border-left:none; border-top:none}
.id-photo .corners::before{ top:6px; right:6px; border-left:none; border-bottom:none}
.id-photo .corners::after{ bottom:6px; left:6px; border-right:none; border-top:none}
.id-photo .tag{
  position:absolute; bottom:0; left:0; right:0;
  font-size:9px; color:var(--text-faint); letter-spacing:.1em;
  text-align:center; padding:3px 0;
  background:rgba(0,0,0,.45); border-top:1px solid var(--rule);
}
.id-row{
  display:flex; justify-content:space-between; padding:4px 0;
  border-bottom:1px dotted var(--rule);
}
.id-row:last-child{border:none}
.id-row .k{ color:var(--text-faint)}
.id-row .v{ color:var(--text)}

.man-page{
  font-size:13px; line-height:1.7;
}
.man-page h3{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:.15em; color:var(--amber);
  margin:0 0 6px; font-weight:500;
}
.man-page .section-man{
  margin-bottom:22px;
}
.man-page p{ margin:0 0 10px; color:var(--text)}
.man-page p.serif{
  font-family:'IBM Plex Serif',serif;
  font-size:16px; line-height:1.55;
  color:var(--text); font-weight:400;
  max-width:62ch;
}
.tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.tag-pill{
  font-size:10px; padding:2px 8px;
  border:1px solid var(--rule);
  color:var(--text-dim);
  background:var(--bg-2);
}

/* EXPERTISE & PROJECTS cards (was .now-*) */
.exp-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
  margin-top:14px;
}
.exp-grid.three{ grid-template-columns:repeat(3,1fr)}
.exp-card{
  border:1px solid var(--rule);
  padding:16px;
  background:var(--bg-2);
  font-size:12px;
  position:relative;
  transition:border-color .2s, transform .2s;
}
.exp-card:hover{ border-color:var(--green) }
.exp-card .k{
  color:var(--green); font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.exp-card .k::before{
  content:""; width:6px; height:6px; background:var(--green); border-radius:50%;
}
.exp-card .title{
  font-family:'IBM Plex Serif',serif; font-size:18px; line-height:1.3;
  color:var(--text); margin-bottom:8px; font-style:italic;
}
.exp-card .sub{ color:#a39d8f; font-size:12.5px; line-height:1.55}

/* CERTS & CONTACT rows */
.contact-output{
  background:var(--bg-2);
  border:1px solid var(--rule);
  margin-top:14px;
  font-size:13px;
}
.c-row{
  display:grid; grid-template-columns:140px 1fr 120px;
  padding:14px 18px;
  border-bottom:1px dashed var(--rule);
  align-items:center;
  transition:background .15s;
}
a.c-row{ cursor:pointer }
.c-row:last-child{border:none}
a.c-row:hover{ background:rgba(127,201,122,.05)}
.c-row .ck{ color:var(--text-faint); font-size:11px; letter-spacing:.1em; text-transform:uppercase}
.c-row .cv{ color:var(--text); font-weight:500}
.c-row .cv .at{ color:var(--amber)}
.c-row .caction{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--green); text-align:right;
  opacity:0; transition:opacity .15s, transform .15s;
  transform:translateX(-6px);
}
.c-row:hover .caction,
.c-row:focus-visible .caction{ opacity:1; transform:translateX(0)}
.c-row .cstatus{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--green); text-align:right;
}
.c-row .cstatus.amber{ color:var(--amber)}

/* certs emphasis */
#certs .cv{ color:var(--amber); font-size:14px }
#certs .cstatus{ font-size:13px; letter-spacing:0 }

/* help box */
.help-output{
  margin-top:14px;
  font-size:13px;
  display:grid; grid-template-columns:1fr 1fr; gap:6px 28px;
}
.help-output div{ display:flex; gap:12px; padding:4px 0}
.help-output .hk{ color:var(--green); min-width:92px}

/* CLI input */
.cli input{
  flex:1;
  background:transparent; border:none; outline:none;
  color:var(--text);
  font-family:'JetBrains Mono',monospace;
  font-size:14px; font-weight:500;
  caret-color:var(--green);
  padding:0;
}
.cli input::placeholder{ color:var(--text-faint)}
.cli-feedback{
  padding:2px 0 4px 18px;
  border-left:1px solid var(--rule);
  margin-left:2px;
  font-size:12px;
  color:var(--text-dim);
  min-height:20px;
}
.cli-feedback .err{ color:var(--rust)}
.cli-feedback .ok{ color:var(--green)}

/* ======= FOOTER ======= */
footer.term-footer{
  border-top:1px dashed var(--rule);
  margin-top:24px;
  padding:20px 40px;
  max-width:1040px; margin-left:auto; margin-right:auto;
  font-size:11px;
  color:var(--text-faint);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
footer.term-footer .fprompt{ color:var(--green)}

/* responsive */
@media (max-width:760px){
  .term{ padding:56px 18px 16px}
  .hero-meta-row{ grid-template-columns:1fr}
  .about-grid{ grid-template-columns:1fr}
  .exp-grid, .exp-grid.three{ grid-template-columns:1fr}
  .c-row{ grid-template-columns:100px 1fr; gap:6px}
  .c-row .caction{ grid-column:1/-1; opacity:1; transform:none; text-align:left; margin-top:4px}
  .c-row .cstatus{ text-align:left}
  .help-output{ grid-template-columns:1fr}
  .ascii{ display:none }
  .ascii-fallback{
    position:static; width:auto; height:auto;
    margin:20px 0 10px; overflow:visible; clip:auto; white-space:normal;
    font-size:30px; letter-spacing:.06em;
    text-shadow:0 0 16px rgba(127,201,122,.2);
  }
  .status-nav{ gap:9px }
  .status-id{ display:none }
  .status .dots{ display:none }
  .status{ justify-content:center }
  .id-card{ display:grid; grid-template-columns:96px 1fr; column-gap:14px; align-items:start }
  .id-photo{ grid-row:1 / span 6; margin-bottom:0 }
  .id-photo .ascii-face{ font-size:6px }
  .id-photo .tag{ display:none }
  .c-row .copy-btn{ justify-self:start }
  .post-header h1{ font-size:26px }
  .post-body{ font-size:16px }
  footer.term-footer{ padding:20px 18px }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* matrix-ish background accent behind ascii */
.hero-wrap{ position:relative}
.hero-wrap::before{
  content:""; position:absolute; top:-30px; right:-30px; width:400px; height:260px;
  background:radial-gradient(circle, rgba(127,201,122,.09), transparent 70%);
  pointer-events:none;
}

/* classes that replace former inline styles (CSP: style-src 'self') */
.status-id{ margin-left:12px }
form.cli{ margin-top:20px }
.notfound-title{ font-size:14px; font-weight:500; margin:0 0 6px }
.nav-cmds.nav-cmds-tight{ margin-top:6px }
.id-card{ align-self:start }

/* contact: email opens mail app; separate copy button */
.c-row a.cv:hover{ color:var(--green) }
.c-row .copy-btn{
  justify-self:end; background:none; cursor:pointer;
  border:1px solid var(--rule); padding:4px 10px;
  font-family:'JetBrains Mono',monospace;
  opacity:1; transform:none;
}
.c-row .copy-btn:hover{ border-color:var(--green) }

/* blog list */
.post-row .ck{ text-transform:none; letter-spacing:.05em }
.post-row .caction{ opacity:1; transform:none }
.all-posts{ display:inline-block; margin-top:12px; font-size:12px; color:var(--green) }

/* blog post page */
.post-header h1{
  font-family:'IBM Plex Serif',serif; font-style:italic; font-weight:500;
  font-size:34px; line-height:1.2; color:var(--text); margin:14px 0 8px;
}
.post-meta{ font-size:11px; color:var(--text-faint); letter-spacing:.08em }
.post-body{
  max-width:680px; margin-top:24px;
  font-family:'IBM Plex Serif',serif; font-size:17px; line-height:1.7; color:var(--text);
}
.post-body .lede{ font-size:19px }
.post-body h2{
  font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--amber); margin:34px 0 8px;
}
.post-body ul{ padding-left:20px }
.post-body li{ margin-bottom:8px }
.post-body code{ font-family:'JetBrains Mono',monospace; font-size:.82em; background:var(--bg-3); padding:1px 5px }
.post-body a{ color:var(--green) }
.post-back{ margin-top:36px; font-size:12px }
.post-back a{ color:var(--green) }

/* keep corner brackets above the portrait photo */
.id-photo::before, .id-photo::after, .id-photo .corners{ z-index:2 }
.id-photo .corners{ position:absolute; inset:0 }
.id-photo .tag{ z-index:2 }

/* blog topic filters */
.tag-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px }
.tag-filters[hidden], .post-row[hidden]{ display:none }
.tag-filter{
  background:none; cursor:pointer;
  border:1px solid var(--rule); padding:5px 10px;
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-dim);
  transition:border-color .15s, color .15s, background .15s;
}
.tag-filter .n{ color:var(--text-faint); margin-left:4px }
.tag-filter:hover{ border-color:var(--green); color:var(--green) }
.tag-filter[aria-pressed="true"]{ border-color:var(--green); color:var(--green); background:rgba(127,201,122,.08) }
.post-meta .post-tag{ color:var(--green) }

/* ======= BLOG NAVIGATION ======= */
.status-nav a[aria-current="page"]{ color:var(--green) }
.crumbs{ font-size:12px; color:var(--text-faint); margin:0 0 4px; letter-spacing:.03em }
.crumbs a{ color:var(--green) }
.crumbs .sep{ margin:0 7px; color:var(--text-faint) }
.post-row .cv{ display:flex; flex-direction:column; gap:3px }
.post-row .pd{ font-weight:400; color:var(--text-dim); font-size:12px; line-height:1.5 }
.blog-tools{ display:flex; flex-direction:column; gap:10px; margin-top:14px }
.blog-tools[hidden], .no-results[hidden]{ display:none }
.blog-tools .tag-filters{ margin-top:0 }
.search-line{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--rule); background:var(--bg-2); padding:8px 12px;
}
.search-line:focus-within{ border-color:var(--green) }
.search-label{ color:var(--green); font-size:13px; flex-shrink:0 }
#postSearch{
  flex:1; min-width:0; background:transparent; border:none; outline:none;
  color:var(--text); font-family:'JetBrains Mono',monospace; font-size:13px; caret-color:var(--green);
}
#postSearch::placeholder{ color:var(--text-faint) }
.linklike{ background:none; border:none; padding:0; font:inherit; color:var(--green); cursor:pointer; text-decoration:underline }
.result-count{ font-size:11px; color:var(--text-faint); margin-top:8px; min-height:14px }
.pn-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:32px 0 0 }
.pn{
  display:flex; flex-direction:column; gap:4px;
  border:1px solid var(--rule); background:var(--bg-2); padding:12px 14px;
  transition:border-color .15s;
}
a.pn:hover{ border-color:var(--green) }
.pn.next{ text-align:right }
.pn.empty{ border:none; background:none }
.pn .pk{ font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--green) }
.pn .pv{ color:var(--text); font-size:13px; line-height:1.45 }
.more-cmd{ margin-top:28px }
@media (max-width:760px){
  .pn-row{ grid-template-columns:1fr }
  .pn.empty{ display:none }
  .pn.next{ text-align:left }
}
.crumbs + .hero, .crumbs + article.hero{ padding-top:14px }
@media (max-width:760px){
  .post-row.c-row{ grid-template-columns:1fr; gap:4px; padding:14px 16px }
  .post-row .ck{ font-size:10px }
  .post-row .caction{ margin-top:6px }
}

/* ======= PIXEL ART ======= */
.px{ display:block; image-rendering:pixelated; flex-shrink:0 }
.exp-card{ position:relative }
.exp-card.has-px > .px, .exp-card.has-px > .px-pair{ position:absolute; top:14px; right:14px }
.exp-card.has-px > .px{ width:40px; height:40px }
.px-pair{ display:flex; gap:4px }
.px-pair .px{ width:30px; height:30px }
.exp-card.has-px .k, .exp-card.has-px .title{ padding-right:56px }
.tag-pill.cred{ color:var(--amber); border-color:rgba(228,169,74,.35) }
.post-row .ck{ display:flex; flex-direction:column; align-items:flex-start; gap:6px }
.post-row .ck .px{ width:32px; height:32px }
.post-art{
  margin:20px 0 4px; height:150px; border:1px solid var(--rule);
  background:radial-gradient(circle, rgba(127,201,122,.13) 1px, transparent 1.6px) 0 0/14px 14px, var(--bg-2);
  display:flex; align-items:center; justify-content:center;
}
.post-art .px{ width:112px; height:112px }
@media (max-width:760px){
  .post-row .ck{ flex-direction:row; align-items:center; gap:8px }
  .post-row .ck .px{ width:24px; height:24px }
  .post-art{ height:120px }
  .post-art .px{ width:88px; height:88px }
}
.post-row .ck{ flex-direction:row; align-items:center; gap:8px }
.post-row .ck .px{ width:28px; height:28px }
.post-row.c-row{ grid-template-columns:170px 1fr 110px }
@media (max-width:760px){
  .post-row.c-row{ grid-template-columns:1fr }
  .post-row .ck .px{ width:24px; height:24px }
}

/* ======= v2: hero scene, boot sequence, section titles ======= */
.scene{
  position:relative; margin:30px 0 0; aspect-ratio:240/50; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(180deg,#000 72%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(180deg,#000 72%,transparent 100%);
  mask-composite:intersect;
}
.scene-layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:46% 50% }
.scene-bg{ image-rendering:pixelated }
.sec-title{
  font-family:'IBM Plex Serif',serif; font-style:italic; font-weight:500;
  font-size:30px; line-height:1.2; color:var(--text);
  margin:6px 0 18px; max-width:28ch;
}
#help .sec-title{ margin-bottom:6px }
.id-photo img{ transition:filter .5s ease }
.id-card:hover .id-photo img, .id-card:focus-within .id-photo img{ filter:none }

/* one orchestrated moment: the hero boots up on load */
.hero .type{
  display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom;
  width:6ch; border-right:2px solid var(--green);
  animation:type .55s steps(6) .25s both, caret 1s steps(1) .8s 2 forwards;
}
.hero .ascii{ animation:draw .9s steps(18) .85s both }
.hero .ascii-fallback{ animation:fadein .4s ease .85s both }
.hero .hero-title{ animation:fadein .5s ease 1.6s both }
.hero .out.tight{ animation:fadein .5s ease 1.85s both }
.hero .hero-meta-row{ animation:fadein .5s ease 2.05s both }
.hero .scene{ animation:fadein 1.2s ease 2.2s both }
@keyframes type{ from{ width:0 } to{ width:6ch } }
@keyframes caret{ 0%{ border-right-color:var(--green) } 50%{ border-right-color:transparent } 100%{ border-right-color:transparent } }
@keyframes draw{ from{ clip-path:inset(0 100% 0 0) } to{ clip-path:inset(0 0 0 0) } }
@keyframes fadein{ from{ opacity:0 } to{ opacity:1 } }
@media (prefers-reduced-motion: reduce){
  .hero .type, .hero .ascii, .hero .ascii-fallback, .hero .hero-title, .hero .out.tight, .hero .hero-meta-row, .hero .scene{ animation:none !important }
  .hero .type{ border-right:none }
}
@media (max-width:760px){
  .scene{ aspect-ratio:auto; height:150px; margin-top:24px }
  .sec-title{ font-size:24px }
}