/* ═══════════════════════════════════════════════════════════════════
   ABADDON.NFO — tokens & base
   1-bit system. There is no colour in this file and none anywhere else.
   Every midtone on this site is a halftone screen, not a grey.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── ground & ink ────────────────────────────────────────────── */
  --void:#000000;        /* the ground */
  --pitch:#0a0a0a;       /* panel fill, barely a lift */
  --bone:#dedcd4;        /* primary ink — toner white, never #fff */
  --ash:#7e7c76;         /* secondary ink */
  --dust:#33322f;        /* hairlines and dotted leaders only, never text */
  --line:#4a4844;        /* panel rules */
  --mute:#5a5853;        /* disabled controls only */

  /* ── halftone screens ───────────────────────────────────────────
     Used for rules, bands, progress tracks, hover beds. Chunky on
     purpose: the reference is a photocopy, not a gradient.          */
  --screen-12: radial-gradient(circle at 1px 1px, var(--dust) 1px, #0000 0) 0 0/5px 5px;
  --screen-25: radial-gradient(circle at 1px 1px, var(--ash) 1px, #0000 0) 0 0/3px 3px;
  --screen-50: repeating-conic-gradient(from 0deg, var(--ash) 0% 25%, #0000 0% 50%) 0 0/4px 4px;
  --screen-hi: repeating-conic-gradient(from 0deg, var(--bone) 0% 25%, #0000 0% 50%) 0 0/4px 4px;

  /* ── type ───────────────────────────────────────────────────────
     gothic = Abaddon (sacred) · mono = Systems (institutional)
     term   = the machine's own voice, readouts only                 */
  --gothic:"UnifrakturCook","UnifrakturMaguntia",Luminari,"Papyrus",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --term:"VT323","IBM Plex Mono",ui-monospace,Consolas,monospace;

  --t-micro:.625rem;   /* crop labels, eyebrows      */
  --t-fine:.6875rem;   /* table values, captions     */
  --t-small:.75rem;    /* nav, meta                  */
  --t-body:.875rem;    /* body copy                  */
  --t-lead:1.0625rem;  /* manifesto lead             */
  --t-head:1rem;       /* letterspaced panel titles  */
  --t-sub:1.375rem;    /* gothic subheads            */

  /* the drawn wordmark is art, not type, so it is sized in width */
  --logo-w:clamp(260px,58vw,700px);

  --track-wide:.42em;  /* panel title tracking */
  --track-mid:.22em;
  --track-tight:.08em;

  /* ── measure & rhythm (8px base) ─────────────────────────────── */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem;
  --s5:3rem;  --s6:4.5rem; --s7:7rem;
  --measure:64ch;
  --bar-h:34px;
  --frame-inset:10px;
  --rail-w:132px;
  --tap:44px;          /* minimum touch target on a coarse pointer */
}

/* On a phone the bar is not a status line you read, it is a control you
   hit, so it grows to the touch target. Everything that positions
   against it reads --bar-h, so nothing else has to know. */
@media (max-width:820px){
  :root{ --bar-h:var(--tap); }
}

@media (max-width:640px){
  :root{ --frame-inset:6px; }
}

/* ── reset ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h) + var(--s3))}
img,canvas,svg,iframe{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
:where([hidden]){display:none !important}

body{
  color:var(--bone);
  font-family:var(--mono);
  font-size:var(--t-body);
  line-height:1.72;
  font-weight:400;
  letter-spacing:.01em;
  overflow-x:hidden;
  background:var(--void);
}

/* ── focus: an inverted block, the way a text terminal does it ─── */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--bone);
  outline-offset:2px;
  background:var(--bone);
  color:var(--void);
}

::selection{background:var(--bone);color:var(--void)}

.skip{
  position:absolute;left:var(--s2);top:-100vh;z-index:100;
  background:var(--bone);color:var(--void);
  padding:var(--s1) var(--s2);
  font-size:var(--t-small);letter-spacing:var(--track-mid);
}
.skip:focus{top:var(--s2)}


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