/* base.css — resets, typography, archive atoms. Paper/ink register:
   hairline rules, screentone shading, extreme type-scale contrast. */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{ margin:0; font-family:var(--font-body); font-size:15px; line-height:1.65;
  color:var(--fg); background:var(--bg); font-optical-sizing:auto; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; min-height:100vh }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; line-height:1.05; margin:0 0 .5em;
  letter-spacing:.005em; text-wrap:balance; color:var(--ink) }
/* scale jumps are EXTREME: 11px caps labels beside 56–72px display titles */
h1{ font-size:clamp(3.5rem,7vw,4.5rem) } h2{ font-size:clamp(2rem,4vw,2.8rem) } h3{ font-size:1.25rem }
p{ margin:0 0 1em }
/* underlines, not fills, for interactive states */
a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--line); transition:color .2s }
a:hover{ color:var(--accent) }
img,canvas,iframe{ max-width:100%; display:block }
button{ font:inherit; cursor:pointer }
ul{ margin:0; padding:0; list-style:none }
::selection{ background:var(--ink); color:var(--paper) }
.muted{ color:var(--fg-muted) }
.mono{ font-family:var(--font-mono) }
.hidden{ display:none !important }
:focus-visible{ outline:1px solid var(--ink); outline-offset:3px }
.wrap{ width:min(1160px,92vw); margin-inline:auto }
hr{ border:0; border-top:1px solid var(--ink); margin:3rem 0; height:0; opacity:.5 }

/* the wide display line — Didone, spelled like a station id on a title page */
/* Caracura (Nú-Dës, 100% free via dafont) — distorted display face for the
   hero wordmark only; body/display stacks unchanged (STYLE-REFERENCE: local,
   no runtime web-font downloads; file ships with the site). */
@font-face{ font-family:"Caracura"; src:url("../fonts/CARACURA.TTF") format("truetype");
  font-display:swap }
.hero h1, .hero .font-black{ font-family:"Caracura", var(--font-display);
  font-weight:400; letter-spacing:.06em }
/* owner iteration: Caracura reads small (distorted low x-height), so the hero
   wordmark gets its own scale rule, ~40% up from the global h1 clamp */
.hero h1{ font-size:clamp(5.8rem, 12vw, 7.7rem); line-height:1.0; margin:0 0 1.1rem }
.font-black{ font-family:var(--font-display); letter-spacing:.015em; font-weight:500 }
/* panel: bone sheet, 1px hairline, screentone shadow beneath the lip */
.panel, .card{
  background-color:var(--bone);
}
.panel{
  position:relative;
  background-color:var(--paper);
  border:1px solid var(--ink);
  border-radius:0;
  padding:1.6rem;
}
/* the deep shadow is a tight stipple band, not a blur */
.panel::after{
  content:""; position:absolute; left:5px; right:0; top:100%; height:8px; pointer-events:none;
  background:var(--tone-dense); background-size:4px 4px; opacity:.5;
}
/* registration clamps: L-pieces of the hairline, ink cut, not gilded */
.panel::before{
  content:""; position:absolute; top:-1px; left:-1px; width:14px; height:14px; pointer-events:none;
  border-top:1px solid var(--ink); border-left:1px solid var(--ink); opacity:.9;
}
.panel--full{ padding-inline:0; padding-block-start:0 }

/* retired warmth hooks — glow/carve were phosphor. Flattened to ink. */
.glow{ text-shadow:none }
.flicker{ animation:none }
.carve{ font-family:var(--font-black); font-weight:700; color:var(--ink); text-shadow:none }

/* the recurring archive stamp — small, monospaced, ghosted like a rubber
   date stamp on a reel box. CSS-only. */
.stamp{ position:absolute; right:.85rem; top:.85rem; z-index:3; pointer-events:none;
  font-family:var(--font-mono); font-size:11px; font-weight:400; line-height:1.5;
  letter-spacing:.3em; text-transform:uppercase; text-align:right;
  color:var(--fg-muted); opacity:.5 }
.stamp::before{ content:"REC. 04 · UNVERIFIED\A"; white-space:pre }
.stamp::after{ content:"DO NOT DISTRIBUTE"; display:block; opacity:.8 }
.stamp--retained{ color:var(--rust); border:1px solid var(--rust);
  padding:.3rem .55rem; opacity:.6; transform:rotate(-1.2deg) }

/* the horror marker: rust, rare, hairline-boxed. The only accent in the type. */
.seal{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--rust);
  border:1px solid var(--rust); padding:.22rem .6rem; border-radius:1px }

/* the spiral motif — the sanctioned Ito signature. A hairline ink spiral.
   Used 2–3 times site-wide, never as filler. */
/* spiral = brand mark only (favicon + footer lockup). CSS hook for img-less use. */
.spiral{ display:inline-block; width:28px; height:28px; background:url("../img/ink/svg/spiral.svg") center/contain no-repeat }

/* Cover plates = ATMOSPHERE (owner-corrected): soft misty greys, no halftone
   dots, no dither on imagery. Crisp ink is carried by the SVG line elements. */
.art{ position:relative; overflow:hidden; background:var(--bone) }
.art::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(90% 70% at 50% 110%, rgba(154,151,143,.35), transparent 70%) }
.art::after{ content:""; position:absolute; inset:0; pointer-events:none;
  border:1px solid transparent }  /* atmosphere lives in the wash above, not a gradient vignette */
/* one wrong line, quietly: the cave mouth rings, the two cuts, the pattern */
.art[data-art="cave"]::before{ background:
  repeating-radial-gradient(circle at 50% 44%, transparent 0 26px, var(--rule) 26px 27px, transparent 27px 54px),
  radial-gradient(90% 70% at 50% 110%, rgba(154,151,143,.35), transparent 70%) }
.art[data-art="slash"]::before{ background:
  linear-gradient(118deg, transparent 45.2%, rgba(19,19,19,.5) 45.6% 46%, transparent 46.4%),
  linear-gradient(64deg, transparent 57.2%, var(--rule) 57.6% 58%, transparent 58.4%),
  radial-gradient(80% 70% at 50% 100%, rgba(154,151,143,.3), transparent 70%) }
.art[data-art="danmaku"]::before{ background:
  repeating-radial-gradient(circle at 50% 40%, transparent 0 16px, rgba(19,19,19,.14) 16px 17px, transparent 17px 34px),
  radial-gradient(70% 70% at 50% 40%, rgba(154,151,143,.3), transparent 75%) }
/* imagery: drained to monochrome, soft — never binarized, never dithered */
.art.fogged{ filter:grayscale(1) contrast(1.04) brightness(1.02) }
.art__glyph{ position:absolute; inset:0; display:grid; place-items:center; font-size:3rem;
  filter:grayscale(1); z-index:1; opacity:.55 }

/* hero brand panel (home.js uses it): the catalogue's identification card —
   a bone sheet with hairline rules and the mark set dead centre, alone on
   a large field. Negative space is the composition. */
.brand-art{ display:grid; place-items:center; background:var(--paper);
  border:1px solid var(--ink) }
.brand-art__lines{ position:absolute; inset:0; overflow:hidden;
  background:linear-gradient(90deg, transparent 0 49.6%, var(--rule) 49.6% 50.4%, transparent 50.4%) }
.brand-art__core{ position:relative; z-index:2; display:grid; justify-items:center; gap:.9rem;
  padding:2.6rem 3.2rem; border-radius:0;
  border:1px solid var(--ink);
  background:var(--paper) }
.brand-art__core::before,.brand-art__core::after{ content:""; position:absolute; width:7px; height:7px;
  border:1px solid var(--ink); border-radius:50%; background:var(--paper) }
.brand-art__core::before{ top:-4px; left:-4px } .brand-art__core::after{ bottom:-4px; right:-4px }
/* archive-room plate as the card's visual (owner iteration): fills the plate
   area, caption rides the bottom edge; image is the specimen, text the label */
.brand-art__plate{ position:absolute; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px);
  object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(1.02); z-index:1;
  border:1px solid var(--rule) }
.brand-art__core{ background:transparent; border:none; display:grid; place-items:end center;
  height:100%; padding:0 0 .7rem 0 }
.brand-art__core::before,.brand-art__core::after{ display:none }
.brand-art__cap{ font-family:var(--font-mono); font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--paper); text-shadow:0 1px 4px rgba(0,0,0,.85); background:rgba(10,8,8,.45); padding:3px 8px }