@layer tokens, base, voices, chrome, content, frames, mechanics, responsive, craft;

@layer tokens{
  :root{
    color-scheme:dark;
    /* base */
    --ink:#0A0910; --well:#100E16; --raised:#15131B;
    --border:rgba(233,228,218,.10); --border-2:rgba(233,228,218,.14);
    --bone:#E9E4DA; --bone-2:#B9B4AC; --muted:#807B84; --quiet:#7E7A86;
    /* accents — warm register (chrome) */
    --oxblood:#8C1C2B; --garnet:#E0566B; --gold:#C99A3E;
    --glow-gold:rgba(201,154,62,.45);
    /* accents — cool register (photographs + sanctioned exceptions only) */
    --neon-cyan:#21D4D8; --neon-magenta:#FF2E6A;
    --neon-c:#00e5ff; --neon-m:#ff007f;
    --glow-c:rgba(0,229,255,.40); --glow-m:rgba(255,0,127,.40);
    --plum:#43264A; --fir:#1B2E22;
    /* typefaces */
    --font-display:'Cormorant Garamond',Georgia,serif;
    --font-mono:'IBM Plex Mono',ui-monospace,monospace;
    --font-body:'IBM Plex Sans',system-ui,sans-serif;
    --font-jp:'Yuji Syuku','Shippori Mincho','Noto Serif JP','Hiragino Mincho ProN',serif;
    /* spacing scale */
    --s1:4px; --s2:8px; --s3:12px; --s4:20px;
    --s5:32px; --s6:52px; --s7:84px; --s8:136px;
    /* easing */
    --ease:cubic-bezier(.22,1,.36,1);
    --t-fast:180ms; --t-base:320ms; --t-slow:600ms; --t-develop:900ms;
    --gutter:clamp(20px,6vw,72px);
  }
}

@layer base{
  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0; color:var(--bone);
    /* obsidian floor with a faint oxblood warmth from above — no neon in chrome */
    background:
      radial-gradient(140% 120% at 50% -10%, rgba(140,28,43,.055), transparent 60%),
      #060608;
    background-attachment:fixed;
    font-family:var(--font-body); font-size:16px; line-height:1.7;
    -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  }
  /* animated grain canvas sits behind everything (main.js) */
  #noise{
    position:fixed; inset:0; width:100%; height:100%;
    pointer-events:none; z-index:0; opacity:.05; mix-blend-mode:soft-light;
  }
  /* fixed texture — static grain (before) + scanline (after) */
  body::before,body::after{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:99;
  }
  body::before{
    opacity:.04; background-size:170px;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  body::after{
    background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.05) 3px 4px);
  }
  /* custom crosshair cursors — bone default, gold for interactives, cyan viewfinder for frames */
  body{
    cursor:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cline x1='12' y1='1' x2='12' y2='8' stroke='%23E9E4DA' stroke-width='1' opacity='.42'/%3E%3Cline x1='12' y1='16' x2='12' y2='23' stroke='%23E9E4DA' stroke-width='1' opacity='.42'/%3E%3Cline x1='1' y1='12' x2='8' y2='12' stroke='%23E9E4DA' stroke-width='1' opacity='.42'/%3E%3Cline x1='16' y1='12' x2='23' y2='12' stroke='%23E9E4DA' stroke-width='1' opacity='.42'/%3E%3Ccircle cx='12' cy='12' r='1.2' stroke='%23E9E4DA' stroke-width='1' opacity='.42' fill='none'/%3E%3C/svg%3E") 12 12, crosshair;
  }
  a, button, [role="button"]{
    cursor:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cline x1='12' y1='1' x2='12' y2='8' stroke='%23C99A3E' stroke-width='1' opacity='.72'/%3E%3Cline x1='12' y1='16' x2='12' y2='23' stroke='%23C99A3E' stroke-width='1' opacity='.72'/%3E%3Cline x1='1' y1='12' x2='8' y2='12' stroke='%23C99A3E' stroke-width='1' opacity='.72'/%3E%3Cline x1='16' y1='12' x2='23' y2='12' stroke='%23C99A3E' stroke-width='1' opacity='.72'/%3E%3Ccircle cx='12' cy='12' r='2.5' fill='%23C99A3E' opacity='.78'/%3E%3C/svg%3E") 12 12, pointer;
  }
  ::selection{ background:var(--oxblood); color:var(--bone); }
  ::-webkit-scrollbar{ width:10px; }
  ::-webkit-scrollbar-track{ background:#060608; }
  ::-webkit-scrollbar-thumb{ background:#1c1922; border:2px solid #060608; }
  ::-webkit-scrollbar-thumb:hover{ background:#2a2632; }
  a{ color:inherit; }
  img,svg{ display:block; }
  h1,h2,h3,p,figure{ margin:0; }
  h1,h2,h3{ text-wrap:balance; }
  p{ text-wrap:pretty; }
  section{ padding-block:var(--s7); scroll-margin-top:64px; }
  .wrap{ max-width:1120px; margin-inline:auto; padding-inline:var(--gutter); }
}

@layer voices{
  .label{
    font-family:var(--font-mono); font-size:11px; font-weight:400;
    letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  }
  .statement{ font-family:var(--font-display); font-weight:500; color:var(--bone); }
  .editorial{ font-family:var(--font-display); font-style:italic; font-weight:400; color:var(--bone-2); }
  .mono{ font-family:var(--font-mono); }
  /* Japanese glyph register — force JIS 2004 variants so characters render
     with Japanese stroke forms, not CJK-unified (Chinese-biased) fallbacks. */
  [lang="ja"], .hud nav a.jp{ font-variant-east-asian: jis04; }
}

@layer chrome{
  /* skip link */
  .skip{
    position:fixed; top:10px; left:10px; z-index:300;
    padding:8px 14px; background:var(--raised); border:1px solid var(--border-2);
    font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--gold); text-decoration:none;
    transform:translateY(-200%); transition:transform var(--t-fast) var(--ease);
  }
  .skip:focus-visible{ transform:none; }

  /* nav bar — solid ink chrome, never glassy */
  .hud{
    position:sticky; top:0; z-index:200;
    background:var(--ink); border-bottom:1px solid var(--border);
  }
  .hud-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--s4); height:48px;
  }
  .hud-mark{
    display:flex; align-items:center; gap:var(--s3);
    text-decoration:none; color:var(--bone);
  }
  .hud-mark .glyph{
    font-family:var(--font-jp); font-size:15px; line-height:1; color:var(--bone-2);
    border:1px solid var(--border-2); padding:3px 5px 4px;
    transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
               text-shadow var(--t-fast) var(--ease);
    /* sanctioned exception: boot-glitch */
    animation:glitchIn .85s var(--ease) .3s 1 both;
  }
  .hud-mark:hover .glyph{
    border-color:rgba(201,154,62,.5); color:var(--gold);
    text-shadow:0 0 8px var(--glow-gold);
  }
  .hud-mark .name{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.22em;
    text-transform:uppercase;
  }
  .hud nav{ display:flex; gap:clamp(14px,3vw,32px); }
  .hud nav a{
    display:inline-block; min-width:5.5ch; text-align:center;
    font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; text-decoration:none; color:var(--muted);
    padding:6px 2px; transition:color var(--t-fast) var(--ease);
  }
  /* glitch-into-Japanese (main.js drives the scramble) */
  .hud nav a.jp{
    font-family:var(--font-jp); letter-spacing:.1em; text-transform:none;
    color:var(--gold);
  }
  .hud nav a:hover{ color:var(--gold); }
  .hud nav a[aria-current="true"]{ color:var(--gold); }
  .hud-state{
    display:flex; align-items:center; gap:var(--s4);
    font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--quiet);
  }
  .hud-state .dot{
    display:inline-block; width:5px; height:5px; background:var(--muted);
    margin-right:6px; vertical-align:1px;
    transition:background var(--t-slow) var(--ease);
  }
  .hud-state .link.up .dot{ background:var(--gold); }
  .hud-state time{ color:var(--muted); font-variant-numeric:tabular-nums; }

  /* search bar */
  .query{ border-bottom:1px solid var(--border); background:var(--ink);
    transition:border-color var(--t-base) var(--ease); }
  .query:focus-within{ border-bottom-color:rgba(201,154,62,.4); }
  .query .wrap{ display:flex; align-items:center; gap:var(--s3); height:40px; }
  .query .prompt{ font-family:var(--font-mono); font-size:12px; color:var(--gold); }
  .query input{
    flex:1; background:none; border:none; color:var(--bone);
    font-family:var(--font-mono); font-size:12px; letter-spacing:.04em;
    caret-color:var(--gold);
  }
  .query input:focus{ outline:none; }
  .query input::placeholder{ color:var(--quiet); }
  .query .count{
    font-family:var(--font-mono); font-size:11px; color:var(--quiet);
    font-variant-numeric:tabular-nums;
  }

  /* scroll position indicator */
  .rebate{
    position:fixed; right:14px; bottom:14px; z-index:150;
    font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--quiet);
    opacity:0; transition:opacity var(--t-base) var(--ease);
    pointer-events:none; user-select:none;
  }
  .rebate.on{ opacity:1; }
}

@layer content{
  /* hero */
  .hero{ position:relative; padding-block:clamp(72px,14vh,148px) var(--s8); overflow:clip; }
  /* one-shot boot scan — neutral bone, no neon */
  .hero::after{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(180deg, transparent, rgba(140,28,43,.26), transparent);
    background-size:100% 180px; background-repeat:no-repeat;
    opacity:0; animation:heroScan 1.5s var(--ease) .25s 1;
  }
  .hero h1, .hero p, .hero .seal{ position:relative; z-index:1; }
  .hero .tate{ z-index:1; }
  /* the seal — oxblood hanko, bone glyph, uneven ink (the Press) */
  .hero .seal{
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    width:46px; height:46px; background:var(--oxblood);
    font-family:var(--font-jp); font-size:22px; color:var(--bone);
    border-radius:2px; margin-bottom:var(--s6);
    transform:rotate(-1.2deg);
  }
  .hero .seal::after{
    content:""; position:absolute; inset:0; border-radius:2px;
    mix-blend-mode:overlay; opacity:.45;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .hero h1{
    font-family:var(--font-display); font-weight:500;
    font-size:clamp(54px,9vw,86px); line-height:.95;
    letter-spacing:.04em;
    transition:text-shadow var(--t-slow) var(--ease);
  }
  .hero h1:hover{
    text-shadow:-2px 0 rgba(130,70,255,.52), 2px 0 rgba(50,100,255,.44);
  }
  .hero .editorial{ font-size:clamp(20px,2.6vw,27px); margin-top:var(--s4); }
  .hero .sub{
    margin-top:var(--s5); font-family:var(--font-mono); font-size:11px;
    letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  }
  .hero .sub .x{ color:var(--garnet); }
  .hero .est{
    margin-top:var(--s2); font-family:var(--font-mono); font-size:11px;
    letter-spacing:.08em; color:var(--quiet);
  }
  /* vertical margin label — tategaki, quiet */
  .tate{
    position:absolute; top:18%; right:calc(var(--gutter) * .25);
    writing-mode:vertical-rl; font-family:var(--font-jp);
    font-size:13px; letter-spacing:.35em; color:var(--quiet);
    user-select:none;
  }

  /* record list */
  .section-head{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s5);
  }
  .section-head h2{
    font-family:var(--font-display); font-weight:500;
    font-size:clamp(34px,5vw,46px); line-height:1.05;
  }
  .section-head .label{ color:var(--quiet); }
  .hint{ display:none; transition:color var(--t-fast) var(--ease); }
  .section-head .label:hover .hint{ color:var(--gold); }
  #record{ padding-top:var(--s6); }

  .entry{
    display:grid; grid-template-columns:96px 1fr; gap:var(--s5);
    padding-block:var(--s5) var(--s6);
    border-top:1px solid var(--border);
    transition:border-color var(--t-fast) var(--ease);
  }
  .entry:hover, .entry:focus-within{ border-top-color:var(--border-2); }
  .entry[hidden]{ display:none; }
  .idx{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
    color:var(--quiet); padding-top:6px;
    transition:color var(--t-fast) var(--ease), text-shadow var(--t-fast) var(--ease);
  }
  .entry:hover .idx, .entry:focus-within .idx{ color:var(--muted); }
  .idx .cls{ display:block; margin-top:var(--s1); text-transform:uppercase; letter-spacing:.16em; }
  .entry h3{
    font-family:var(--font-display); font-weight:500;
    font-size:clamp(21px,2.6vw,26px); line-height:1.2;
  }
  .entry h3.h-ed{ font-style:italic; font-weight:400; }
  /* clickable entry titles take gold — the kit's link metal */
  .entry h3 a{
    color:inherit; text-decoration:none;
    transition:color var(--t-fast) var(--ease);
  }
  .entry h3 a:hover{ color:var(--gold); }
  .entry h3 a::after{
    content:" \2197"; font-family:var(--font-mono); font-size:.5em;
    vertical-align:.4em; color:var(--quiet);
    transition:color var(--t-fast) var(--ease);
  }
  .entry h3 a:hover::after{ color:var(--gold); }
  .entry .meta{
    margin-top:var(--s2); font-family:var(--font-mono); font-size:12px;
    letter-spacing:.06em; color:var(--muted);
  }
  .entry .note{
    margin-top:var(--s3); max-width:60ch; color:var(--bone-2); font-size:15px;
  }
  .entry .readout{ margin-top:var(--s4); }

  /* about / contact */
  .operator .editorial{ font-size:clamp(20px,2.4vw,25px); }
  .operator .body{ margin-top:var(--s4); max-width:64ch; color:var(--bone-2); }
  .operator .body + .body{ margin-top:var(--s4); }
  .ledger{
    margin-top:var(--s5); font-family:var(--font-mono); font-size:12px;
    letter-spacing:.08em; color:var(--quiet);
  }
  .signal ul{ list-style:none; margin:0; padding:0; }
  .signal li{
    display:flex; align-items:baseline; gap:var(--s4);
    padding-block:var(--s3); border-top:1px solid var(--border);
    transition:border-color var(--t-fast) var(--ease);
  }
  .signal li:last-child{ border-bottom:1px solid var(--border); }
  .signal li:hover{ border-top-color:var(--border-2); }
  .signal .proto{
    flex:0 0 96px; font-family:var(--font-mono); font-size:11px;
    letter-spacing:.16em; text-transform:uppercase; color:var(--quiet);
  }
  .signal a{
    font-family:var(--font-mono); font-size:13px; letter-spacing:.04em;
    color:var(--bone-2); text-decoration:none; padding-block:4px;
    transition:color var(--t-fast) var(--ease);
  }
  .signal a:hover{ color:var(--gold); }

  /* the blackwall — one oxblood rule before the footer */
  .blackwall{
    border:none; height:1px; margin:var(--s7) 0 0;
    background:var(--oxblood); position:relative; overflow:visible;
  }
  .blackwall::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, rgba(233,228,218,.5), transparent);
    background-size:200px 100%; background-repeat:no-repeat;
    opacity:.5;
  }
  footer{ padding-block:var(--s6) var(--s7); }
  footer .glyph{
    font-family:var(--font-jp); font-size:17px; color:var(--quiet); cursor:help;
    transition:color var(--t-base) var(--ease);
  }
  footer .glyph:hover{ color:var(--bone-2); text-shadow:-.6px 0 rgba(33,212,216,.45), .6px 0 rgba(255,46,106,.4); transition:color var(--t-base) var(--ease), text-shadow var(--t-base) var(--ease); }
  footer p{
    margin-top:var(--s3); font-family:var(--font-mono); font-size:11px;
    letter-spacing:.08em; color:var(--quiet);
  }
  footer .origin{ margin-top:var(--s2); color:#5d5963; font-size:10.5px; }

  /* per-post pages */
  .post{ padding-block:var(--s7) var(--s8); max-width:760px; }
  .post .idx{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--quiet); padding:0;
  }
  .post h1{
    font-family:var(--font-display); font-weight:500;
    font-size:clamp(34px,6vw,56px); line-height:1.04; letter-spacing:.01em;
    margin-top:var(--s3);
  }
  .post h1.h-ed{ font-style:italic; font-weight:400; }
  .post .meta{
    margin-top:var(--s3); font-family:var(--font-mono); font-size:12px;
    letter-spacing:.06em; color:var(--muted);
  }
  .post .body{ margin-top:var(--s5); color:var(--bone-2); max-width:64ch; }
  .post .body p + p{ margin-top:var(--s4); }
  .post .readout{ margin-top:var(--s5); }
  .post-back{
    margin-top:var(--s7); font-family:var(--font-mono); font-size:12px;
    letter-spacing:.06em;
  }
  .post-back a{ color:var(--quiet); text-decoration:none; transition:color var(--t-fast) var(--ease); }
  .post-back a:hover{ color:var(--gold); }
  /* archive index list */
  .archive ul{ list-style:none; margin:0; padding:0; }
  .archive li{
    border-top:1px solid var(--border);
    transition:border-color var(--t-fast) var(--ease);
  }
  .archive li:last-child{ border-bottom:1px solid var(--border); }
  .archive li:hover{ border-top-color:var(--border-2); }
  .archive a{
    display:grid; grid-template-columns:96px 1fr; gap:var(--s4);
    padding-block:var(--s4); text-decoration:none; color:inherit;
  }
  .archive .idx{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--quiet);
  }
  .archive .t{ font-family:var(--font-display); font-weight:500; font-size:clamp(19px,2.4vw,23px); }
  .archive a:hover .t{ color:var(--gold); }
}

@layer frames{
  /* image frames — the ONE place saturation lives (the Develop) */
  figure.shot{ max-width:680px; }
  .frame{
    position:relative; aspect-ratio:3/2; overflow:hidden;
    background:#0B0A13; border:1px solid var(--border);
    cursor:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cline x1='16' y1='2' x2='16' y2='11' stroke='%2321D4D8' stroke-width='1' opacity='.6'/%3E%3Cline x1='16' y1='21' x2='16' y2='30' stroke='%2321D4D8' stroke-width='1' opacity='.6'/%3E%3Cline x1='2' y1='16' x2='11' y2='16' stroke='%2321D4D8' stroke-width='1' opacity='.6'/%3E%3Cline x1='21' y1='16' x2='30' y2='16' stroke='%2321D4D8' stroke-width='1' opacity='.6'/%3E%3Crect x='13' y='13' width='6' height='6' stroke='%2321D4D8' stroke-width='.75' opacity='.6' fill='none'/%3E%3C/svg%3E") 16 16, crosshair;
    filter:saturate(.08) brightness(.92);
    transition:filter var(--t-develop) var(--ease),
               border-color var(--t-base) var(--ease),
               box-shadow var(--t-base) var(--ease);
  }
  .frame::before,.frame::after{
    content:""; position:absolute; inset:-12%;
    transition:filter var(--t-develop) var(--ease),
               transform var(--t-develop) var(--ease);
  }
  .frame::before{ filter:blur(19px); transform:scale(1.025); }
  .frame::after{ filter:blur(6.5px); transform:scale(1.015); }
  .entry:hover .frame, .entry:focus-within .frame, .frame.developed{
    filter:none; border-color:rgba(0,229,255,.42);
    box-shadow:0 0 26px rgba(0,229,255,.14), inset 0 0 30px rgba(0,0,0,.4);
  }
  .entry:hover .frame::before, .entry:focus-within .frame::before,
  .frame.developed::before{ filter:blur(14px); transform:scale(1); }
  .entry:hover .frame::after, .entry:focus-within .frame::after,
  .frame.developed::after{ filter:blur(3px); transform:scale(1); }
  .frame .vig{
    position:absolute; inset:0;
    background:radial-gradient(ellipse at 50% 42%, transparent 42%, rgba(5,4,9,.6) 100%);
  }
  .frame .grain{
    position:absolute; inset:0; opacity:.09; background-size:140px;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  figcaption{
    margin-top:var(--s3); font-family:var(--font-mono); font-size:11px;
    letter-spacing:.1em; color:var(--quiet);
  }

  /* frame f-a */
  .f-a::before{
    background:
      radial-gradient(circle at 15% 68%, rgba(33,212,216,.7) 0 4%, transparent 5.5%),
      radial-gradient(circle at 31% 38%, rgba(33,212,216,.45) 0 6%, transparent 7.5%),
      radial-gradient(circle at 71% 62%, rgba(255,46,106,.4) 0 4.5%, transparent 6%),
      radial-gradient(circle at 86% 26%, rgba(33,212,216,.5) 0 3.5%, transparent 5%),
      radial-gradient(circle at 56% 82%, rgba(201,154,62,.35) 0 3%, transparent 4.5%),
      radial-gradient(circle at 44% 16%, rgba(33,212,216,.3) 0 6.5%, transparent 8%),
      linear-gradient(to top, rgba(33,212,216,.14), transparent 38%);
  }
  .f-a::after{
    background:
      radial-gradient(circle at 22% 56%, rgba(33,212,216,.95) 0 1.5%, transparent 2.4%),
      radial-gradient(circle at 78% 40%, rgba(255,46,106,.85) 0 1.2%, transparent 2%),
      radial-gradient(circle at 61% 70%, rgba(233,228,218,.55) 0 .8%, transparent 1.5%),
      radial-gradient(circle at 39% 28%, rgba(33,212,216,.6) 0 1%, transparent 1.8%);
  }
  /* frame f-b */
  .f-b::before{
    background:
      radial-gradient(circle at 76% 64%, rgba(255,46,106,.65) 0 5%, transparent 6.5%),
      radial-gradient(circle at 58% 30%, rgba(255,46,106,.4) 0 6%, transparent 7.5%),
      radial-gradient(circle at 22% 50%, rgba(33,212,216,.45) 0 4%, transparent 5.5%),
      radial-gradient(circle at 38% 78%, rgba(201,154,62,.45) 0 3.5%, transparent 5%),
      radial-gradient(circle at 12% 22%, rgba(255,46,106,.3) 0 5%, transparent 6.5%),
      linear-gradient(to top, rgba(255,46,106,.1), transparent 42%);
  }
  .f-b::after{
    background:
      radial-gradient(circle at 70% 58%, rgba(255,46,106,.9) 0 1.4%, transparent 2.2%),
      radial-gradient(circle at 30% 44%, rgba(33,212,216,.8) 0 1.1%, transparent 1.9%),
      radial-gradient(circle at 50% 74%, rgba(201,154,62,.7) 0 .9%, transparent 1.6%),
      radial-gradient(circle at 84% 24%, rgba(233,228,218,.5) 0 .7%, transparent 1.4%);
  }
  /* frame f-c */
  .f-c::before{
    background:
      radial-gradient(circle at 18% 34%, rgba(33,212,216,.5) 0 3.5%, transparent 5%),
      radial-gradient(circle at 34% 66%, rgba(255,46,106,.5) 0 4%, transparent 5.5%),
      radial-gradient(circle at 52% 26%, rgba(255,46,106,.35) 0 3%, transparent 4.5%),
      radial-gradient(circle at 68% 58%, rgba(33,212,216,.55) 0 4.5%, transparent 6%),
      radial-gradient(circle at 84% 36%, rgba(201,154,62,.4) 0 3%, transparent 4.5%),
      radial-gradient(circle at 90% 76%, rgba(255,46,106,.45) 0 3.5%, transparent 5%),
      linear-gradient(105deg, transparent 40%, rgba(255,46,106,.16) 47%, rgba(33,212,216,.16) 53%, transparent 60%);
  }
  .f-c::after{
    background:
      radial-gradient(circle at 26% 48%, rgba(33,212,216,.85) 0 1.1%, transparent 1.9%),
      radial-gradient(circle at 46% 64%, rgba(255,46,106,.85) 0 1.3%, transparent 2.1%),
      radial-gradient(circle at 64% 38%, rgba(233,228,218,.5) 0 .7%, transparent 1.4%),
      radial-gradient(circle at 80% 60%, rgba(33,212,216,.7) 0 1%, transparent 1.8%),
      radial-gradient(circle at 56% 18%, rgba(255,46,106,.6) 0 .9%, transparent 1.6%);
  }

  /* lightbox dialog */
  .enlarger{
    background:var(--ink); border:1px solid var(--border-2);
    padding:var(--s4); margin:auto; max-width:none;
  }
  .enlarger::backdrop{ background:rgba(4,4,8,.92); }
  .enlarger .v-frame{ width:min(86vw, calc(76vh * 1.5)); cursor:auto; }
  .enlarger .v-row{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:var(--s4); margin-top:var(--s3); flex-wrap:wrap;
  }
  .enlarger figcaption{ margin-top:0; }
  .enlarger .v-nav{ display:flex; gap:var(--s4); }
  .enlarger button{
    background:none; border:none; padding:8px 4px; cursor:pointer;
    font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--muted);
    transition:color var(--t-fast) var(--ease);
  }
  .enlarger button:hover{ color:var(--gold); }
  .enlarger .v-count{
    font-family:var(--font-mono); font-size:11px; color:var(--quiet);
    font-variant-numeric:tabular-nums;
  }
  .v-frame.snap, .v-frame.snap::before, .v-frame.snap::after{ transition:none; }
  /* lens CA flash on caption when a print develops in the enlarger */
  #v-cap{ transition:text-shadow 650ms var(--ease); }
  #v-cap.ca{ text-shadow:-4px 0 rgba(33,212,216,.78), 4px 0 rgba(255,46,106,.68); transition:none; }
}

@layer mechanics{
  /* boot sequence */
  .boot{ opacity:0; animation:settle var(--t-slow) var(--ease) forwards; }
  .boot-1{ animation-delay:.05s } .boot-2{ animation-delay:.16s }
  .boot-3{ animation-delay:.27s } .boot-4{ animation-delay:.38s }
  .boot-5{ animation-delay:.49s }
  @keyframes settle{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
  /* the seal presses in, then breathes neon like a Shinjuku sign that won't stay still */
  .hero .seal.boot{
    animation:
      press var(--t-slow) var(--ease) .05s both,
      sealCA 3.5s ease-in-out .9s infinite;
  }
  @keyframes press{
    from{ opacity:0; transform:rotate(-1.2deg) scale(1.08); text-shadow:none; }
    to{ opacity:1; transform:rotate(-1.2deg) scale(1); text-shadow:none; }
  }
  @keyframes sealCA{
    0%,100%{ text-shadow:-1.5px 0 rgba(33,212,216,.72), 1.5px 0 rgba(255,46,106,.62); }
    35%{ text-shadow:-3px 0 rgba(33,212,216,.46), 2px 0 rgba(255,46,106,.4); }
    65%{ text-shadow:-.8px 0 rgba(33,212,216,.85), 3px 0 rgba(255,46,106,.74); }
  }
  /* tactile power-on flicker — blurple CA, like a CRT finding its beam */
  @keyframes flicker{
    0%,100%{ opacity:1; text-shadow:none; }
    7%{ opacity:.82; text-shadow:-1px 0 rgba(130,70,255,.3), 1px 0 rgba(50,100,255,.24); }
    14%{ opacity:1; text-shadow:none; }
    21%{ opacity:.91; text-shadow:-2.5px 0 rgba(130,70,255,.46), 2px 0 rgba(50,100,255,.38); }
    28%{ opacity:1; text-shadow:none; }
    34%{ opacity:.97; text-shadow:-1px 0 rgba(130,70,255,.18), 1px 0 rgba(50,100,255,.14); }
  }
  .hero h1.boot{
    animation:settle var(--t-slow) var(--ease) .16s both,
              flicker 0.5s linear .72s 1;
  }
  /* boot-glitch — sanctioned exception, nav glyph */
  @keyframes glitchIn{
    0%   { opacity:0; transform:translate(0,0); clip-path:inset(0 0 100% 0); text-shadow:none; }
    12%  { opacity:1; transform:translate(-2px,1px); clip-path:inset(0 0 55% 0);
           text-shadow:-2px 0 var(--neon-m), 2px 0 var(--neon-c); }
    24%  { transform:translate(2px,-1px); clip-path:inset(45% 0 0 0);
           text-shadow:2px 0 var(--neon-m), -2px 0 var(--neon-c); }
    36%  { transform:translate(-1px,0); clip-path:inset(0 0 25% 0);
           text-shadow:-1px 0 var(--neon-c), 1px 0 var(--neon-m); }
    52%  { transform:translate(1px,0); clip-path:inset(15% 0 35% 0); text-shadow:none; }
    70%  { transform:none; clip-path:inset(0 0 0 0); }
    100% { opacity:1; transform:none; clip-path:inset(0 0 0 0); text-shadow:none; }
  }
  @keyframes heroScan{
    0%{ opacity:0; background-position:0 -220px; }
    18%{ opacity:1; }
    100%{ opacity:0; background-position:0 130%; }
  }
  /* tategaki — writes through lens aberration, then settles to a slow neon breath */
  .tate{
    animation:
      tateCA 1.8s var(--ease) .5s both,
      tatePulse 4s ease-in-out 2.4s infinite;
  }
  @keyframes tateCA{
    0%{ clip-path:inset(0 0 100% 0); text-shadow:-5px 0 rgba(33,212,216,1), 5px 0 rgba(255,46,106,1); }
    30%{ clip-path:inset(0 0 45% 0); text-shadow:-4px 0 rgba(33,212,216,.85), 4px 0 rgba(255,46,106,.8); }
    65%{ clip-path:inset(0 0 5% 0); text-shadow:-2px 0 rgba(33,212,216,.55), 2px 0 rgba(255,46,106,.45); }
    100%{ clip-path:inset(0 0 0% 0); text-shadow:-.5px 0 rgba(33,212,216,.22), .5px 0 rgba(255,46,106,.18); }
  }
  @keyframes tatePulse{
    0%,100%{ text-shadow:-.5px 0 rgba(33,212,216,.22), .5px 0 rgba(255,46,106,.18); }
    50%{ text-shadow:-1.5px 0 rgba(33,212,216,.38), 1.5px 0 rgba(255,46,106,.32); }
  }
  .reveal{
    opacity:0; transform:translateY(12px);
    transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  }
  .reveal.in{ opacity:1; transform:none; }
  /* colon blink — the terminal heartbeat on HUD clocks */
  .hud-state .sep{ animation:colonBlink 1s step-end infinite; }
  @keyframes colonBlink{ 0%,49%{ opacity:1; } 50%,99%{ opacity:0; } }
  /* the blackwall shimmer — one ambient loop */
  .blackwall::after{ animation:traverse 16s linear infinite; }
  @keyframes traverse{
    from{ background-position:-200px 0 } to{ background-position:calc(100% + 200px) 0 }
  }
  /* system readout — sanctioned exception, neon pulse on the live graph */
  .readout svg{ overflow:visible; }
  .readout svg path{ animation:linePulse 3s ease-in-out infinite; }
  @keyframes linePulse{
    0%,100%{ stroke:#8f99a3; filter:drop-shadow(0 0 0 rgba(0,229,255,0)); }
    50%{ stroke:#d4eef2; filter:drop-shadow(0 0 4px rgba(0,229,255,.65)); }
  }
  .readout svg circle{ animation:dotPulse 2.2s ease-in-out infinite; }
  @keyframes dotPulse{
    0%,100%{ filter:drop-shadow(0 0 2px rgba(201,154,62,.4)); }
    50%{ filter:drop-shadow(0 0 8px rgba(201,154,62,.8)); }
  }
}

@layer responsive{
  @media (hover:hover) and (pointer:fine){ .hint{ display:inline; } }
  @media (max-width:1099px), (hover:none){ .rebate{ display:none; } }
  @media (max-width:1000px){
    .tate{ display:none; }
  }
  @media (max-width:760px){
    .hud-state .ore,.hud-state .link{ display:none; }
    .entry{ grid-template-columns:1fr; gap:var(--s3); }
    .idx .cls{ display:inline; margin:0 0 0 var(--s3); }
    .signal .proto{ flex-basis:72px; }
    section{ padding-block:var(--s6); }
    .enlarger{ padding:var(--s3); }
    .enlarger .v-frame{ width:92vw; }
  }
}

@layer craft{
  :focus{ outline:none; }
  :focus-visible{ outline:1px solid var(--gold); outline-offset:3px; border-radius:2px; }
  .frame:focus-visible{ outline:1px solid var(--gold); outline-offset:3px; box-shadow:0 0 22px rgba(201,154,62,.25); }

  @media (prefers-contrast:more){
    :root{
      --quiet:#9A96A2; --muted:#A8A3AE;
      --border:rgba(233,228,218,.22); --border-2:rgba(233,228,218,.3);
    }
  }
  @media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    #noise{ display:none; }
    .boot{ animation:none; opacity:1; }
    .hero .seal.boot{ animation:none; opacity:1; transform:rotate(-1.2deg); text-shadow:none; }
    .hud-mark .glyph{ animation:none; }
    .tate{ animation:none; text-shadow:none; }
    .hud-state .sep{ animation:none; opacity:1; }
    .hero h1{ transition:none; }
    .hero::after{ animation:none; opacity:0; }
    .readout svg path, .readout svg circle{ animation:none; filter:none; }
    .reveal{ opacity:1; transform:none; transition:none; }
    .frame, .frame::before, .frame::after{ transition:none; }
    .frame{ filter:none; }
    .frame::before{ filter:blur(14px); transform:scale(1); }
    .frame::after{ filter:blur(3px); transform:scale(1); }
    .blackwall::after{ animation:none; opacity:0; }
    .hud-state .dot{ transition:none; }
    .rebate{ transition:none; }
  }
  @media print{
    body{ background:#fff; color:#141318; }
    #noise, body::before, body::after, .hud, .query, .skip,
    .blackwall, .tate, .readout, .rebate{ display:none; }
    .reveal{ opacity:1; transform:none; }
    .frame{ filter:none; border-color:#999; box-shadow:none; }
    .editorial, .note, .body{ color:#3a3742; }
    .label, .idx, .meta, figcaption, .ledger,
    footer p, .section-head .label{ color:#6a6672; }
    .signal a, .entry h3 a{ color:#141318; }
    .hero .seal{ background:none; color:#8C1C2B; border:1px solid #8C1C2B; transform:none; }
    .hero .seal::after{ display:none; }
  }
}