/* ============================================================
   base.css — the press.
   structure + the print-degradation system. reads tokens only.
   ============================================================ */

@import url("tokens.css");

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; text-transform:lowercase }
html,body{ margin:0; min-height:100% }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mono);
  font-size:var(--fs);
  line-height:var(--lh);
  letter-spacing:var(--track);
  font-variant-ligatures:none;
  position:relative;
  overflow-x:hidden;
}

::selection{ background:var(--f-mag); color:var(--paper-hi) }
a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--hair2) }
a:hover{ border-bottom-color:var(--accent); color:var(--accent) }

/* ------------------------------------------------------------
   1. the stock — grain, foxing, uneven light
   ------------------------------------------------------------ */

body::before{                       /* paper tooth */
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:calc(var(--grain) * .09);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
body::after{                        /* uneven light across the sheet */
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:
    radial-gradient(120% 80% at 22% 8%,  var(--paper-hi) 0%, transparent 58%),
    radial-gradient(90%  70% at 92% 96%, var(--foxing)   0%, transparent 52%),
    radial-gradient(70%  60% at 4%  88%, var(--paper-lo) 0%, transparent 60%);
  mix-blend-mode:multiply; opacity:.55;
}

/* ------------------------------------------------------------
   2. the plate — page furniture
   ------------------------------------------------------------ */

.plate{
  max-width:var(--plate-w); margin:0 auto;
  padding:clamp(26px,5vh,64px) var(--margin) clamp(80px,14vh,180px);
  position:relative;
}

/* tiny type in the margins: folios, slugs, plate numbers */
.slug{
  position:absolute; font-size:var(--fs-xs); letter-spacing:var(--track-w);
  color:var(--ink-3); white-space:nowrap; user-select:none;
}
.slug.tl{ top:14px; left:var(--margin) }
.slug.tr{ top:14px; right:var(--margin) }
.slug.bl{ bottom:26px; left:var(--margin) }
.slug.br{ bottom:26px; right:var(--margin) }
.folio{
  position:absolute; right:10px; top:50%; transform:translateY(-50%) rotate(90deg);
  transform-origin:right center; font-size:var(--fs-xs);
  letter-spacing:var(--track-w); color:var(--ink-4); user-select:none;
}
@media (max-width:760px){ .folio{ display:none } }

.col{ max-width:var(--measure) }
.col p{ margin:0 0 1.15em }

/* ------------------------------------------------------------
   3. misregistration — the plates never line up
   ------------------------------------------------------------ */

.reg{
  text-shadow:
    calc(var(--reg-x) * -1) var(--reg-y) 0 var(--reg-a),
    var(--reg-x)            var(--reg-y) 0 var(--reg-b);
}
.reg-hard{ --reg-x:1.6px; }
.reg-hard{
  text-shadow:
    -1.6px  .4px 0 var(--reg-a),
     1.6px -.4px 0 var(--reg-b),
     0      0    0 currentColor;
}

/* headings drift slowly out of register */
/* headings are the body face, only larger — tracking must match or the
   same font reads as a different one at display size */
h1,h2,h3{ font-family:var(--mono); font-weight:300; margin:0;
          letter-spacing:var(--track) }
h1{
  font-size:clamp(21px,3.4vw,32px); line-height:1.14;
  animation:reg-drift var(--drift) ease-in-out infinite;
}
@keyframes reg-drift{
  0%,100%{ text-shadow:-1.4px 0 0 var(--reg-a),  1.4px 0 0 var(--reg-b) }
  33%    { text-shadow:-.3px .6px 0 var(--reg-a), 2.2px -.4px 0 var(--reg-b) }
  66%    { text-shadow:-2.4px -.5px 0 var(--reg-a), .4px .5px 0 var(--reg-b) }
}

/* ------------------------------------------------------------
   4. redaction — a pruned fragment
   ------------------------------------------------------------ */

.redact{
  position:relative; color:transparent !important; user-select:none;
  background:var(--ink);
  box-shadow:0 0 0 1px var(--ink);
  filter:url(#rough);
  padding:0 .12em;
}
.redact::selection{ background:var(--ink) }
.bar{                                /* a full-width redaction rule */
  display:block; height:var(--h,15px); background:var(--ink);
  margin:var(--mt,10px) 0 var(--mb,10px);
  width:var(--w,100%); margin-left:var(--x,0);
  filter:url(#rough);
}

/* ------------------------------------------------------------
   5. smear — merged fragments bleeding
   ------------------------------------------------------------ */

.smear{
  display:block; height:var(--h,16px); width:var(--w,40%);
  margin-left:var(--x,0);
  background:var(--c,var(--accent));
  opacity:var(--smear);
  mix-blend-mode:multiply;
  filter:url(#rough) blur(.3px);
  transform:skewX(var(--sk,0deg));
}
/* an inline smear over live text — the ink lands on the words */
.ink{
  position:relative; display:inline;
  background:linear-gradient(var(--c,var(--accent)),var(--c,var(--accent)));
  background-size:100% var(--ih,.82em);
  background-position:0 var(--iy,.16em);
  background-repeat:no-repeat;
  mix-blend-mode:multiply;
  padding:0 .1em;
}
/* stacked pass — riso banding inside the block */
.smear.pass{
  background-image:repeating-linear-gradient(
    90deg, var(--c) 0 3px, color-mix(in srgb, var(--c) 62%, transparent) 3px 7px);
}

/* ------------------------------------------------------------
   6. drag — the scanline smear band
   ------------------------------------------------------------ */

/* discrete ink slabs dragged sideways — not a spectrum sweep */
.drag{
  position:relative; height:var(--h,64px); margin:var(--mt,28px) 0;
  opacity:1; mix-blend-mode:multiply; pointer-events:none;
  background:
    repeating-linear-gradient(0deg,
      rgba(18,17,15,.26) 0 1px, transparent 1px 5px),
    linear-gradient(90deg,
      transparent   0    4%,
      var(--f-grn)  4%   12%,
      transparent   12%  14%,
      var(--f-org)  14%  22%,
      var(--f-mag)  22%  30%,
      var(--ink)    30%  39%,
      var(--f-cyn)  39%  46%,
      transparent   46%  50%,
      var(--f-red)  50%  56%,
      var(--f-ylw)  56%  62%,
      transparent   62%  65%,
      var(--f-vio,var(--f-blu)) 65% 72%,
      var(--f-pink) 72%  79%,
      var(--f-blu)  79%  90%,
      transparent   90%  100%);
  filter:blur(.35px) url(#rough);
}
/* a lighter second impression, offset — the plate ran twice */
.drag::after{
  content:""; position:absolute; left:2.5%; right:-1%; top:22%; bottom:14%;
  background:inherit; opacity:.6; filter:blur(1.4px);
}

/* ------------------------------------------------------------
   7. underprint — illegible degraded text behind everything
   ------------------------------------------------------------ */

.under{
  position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  user-select:none; color:var(--ink-4); font-size:var(--fs-xs); line-height:1.42;
  opacity:.34; white-space:pre-wrap; word-break:break-all;
  mix-blend-mode:multiply; filter:blur(.15px);
  /* the substrate is strongest in the margins and drops away under the column */
  mask-image:
    linear-gradient(180deg, transparent, #000 7%, #000 88%, transparent),
    linear-gradient(90deg, #000 0 6%, rgba(0,0,0,.22) 22%,
                           rgba(0,0,0,.14) 58%, rgba(0,0,0,.5) 78%, #000 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.under.dense{ opacity:.6; color:var(--ink-3) }

/* ------------------------------------------------------------
   8. ascii plates
   ------------------------------------------------------------ */

pre.art{
  margin:26px 0; font-size:11px; line-height:1.15; white-space:pre;
  overflow-x:auto; color:var(--ink);
  text-shadow:-1px 0 0 var(--reg-a), 1px 0 0 var(--reg-b);
}
pre.art.tint{ color:var(--accent) }
.caption{
  font-size:var(--fs-xs); letter-spacing:var(--track-w);
  color:var(--ink-3); margin:-14px 0 30px;
}

/* ------------------------------------------------------------
   9. rules + furniture
   ------------------------------------------------------------ */

hr.rule{ border:0; border-top:1px solid var(--hair); margin:34px 0 }
.meta{ font-size:var(--fs-xs); letter-spacing:var(--track-w); color:var(--ink-3) }
.nav{ display:flex; flex-wrap:wrap; gap:6px 20px; font-size:var(--fs-sm);
      letter-spacing:.1em; padding-top:18px; border-top:1px solid var(--hair) }
.nav .sep{ color:var(--ink-4) }

.hide{ display:none !important }