/* ==========================================================================
   PULP — one page. Loaded on a/pulp.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   A cheap cover on a rack, then the record on the same stock. Every rule
   here is scoped to .pl-hero or .pl-rec; the shell (rail, top bar,
   community drawer) is never restyled.

   Type in two inks on cream stock (our reading); the cover's image area is
   reserved for a painted scene (documented: covers were paintings printed in
   colour on coated stock; none is held). The first five hex values below are the page's
   "as built" swatches:
   #E8D6A8 stock · #1D2340 blue-black ink · #D2382B red ink
   #9E2418 red ink, heavy impression (the red wherever it is small text)
   #CDB98A the rack behind the sheet
   Text on #E8D6A8, WCAG: blue-black 10.7 · heavy red 5.4 · red 3.4 (display
   only, 24px and up, or never text). Stock on blue-black 10.7; stock on red
   3.4 (banners at 24px and up only).

   Motionless: the record names motion as researched absence. No animation,
   no transition, and the shell's scroll reveal is overridden below.
   ========================================================================== */
@font-face {
  font-family: "Anton PL";
  src: url("fonts/anton.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin PL";
  src: url("fonts/libre-franklin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin PL";
  src: url("fonts/libre-franklin-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

.pl-page {
  --pl-paper: #E8D6A8;
  --pl-blue: #1D2340;
  --pl-red: #D2382B;
  --pl-redtx: #9E2418;
  --pl-rack: #CDB98A;
  --pl-display: "Anton PL", Impact, "Arial Narrow", sans-serif;
  --pl-text: "Libre Franklin PL", "Franklin Gothic Medium", Arial, sans-serif;
}
.pl-page main { background: var(--pl-rack); }
/* The record is present, never arriving: outranks site.css's .js-reveal rule. */
.js-reveal .pl-page main > section.pl-rec { opacity: 1; transform: none; transition: none; will-change: auto; }

/* ---- shared register: both roots, nothing outside them ---------------- */
.pl-hero, .pl-rec { font: 500 18px/1.55 var(--pl-text); color: var(--pl-blue); }
.pl-hero b, .pl-rec b { font-weight: 700; }
.pl-rec a { color: var(--pl-blue); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pl-rec a:hover { background: rgba(210, 56, 43, 0.2); }
.pl-rec :focus-visible { outline: 3px solid var(--pl-blue); outline-offset: 3px; }

/* The sheet: cover and record are one piece of stock on the rack. */
.pl-cover, .pl-stock { max-width: 1000px; margin: 0 auto; background-color: var(--pl-paper); }
.pl-hero { padding: clamp(10px, 3vw, 30px) clamp(0px, 2vw, 30px) 0; }
.pl-rec { padding: 0 clamp(0px, 2vw, 30px) clamp(10px, 3vw, 30px); }

/* Two plates: the real text in the blue ink, the red impression offset
   behind it. The red copy has empty alternative text, so nothing reads twice. */
.pl-two { position: relative; display: inline-block; isolation: isolate; color: var(--pl-blue); max-width: 100%; }
.pl-two::before {
  content: attr(data-t);
  content: attr(data-t) / "";
  position: absolute; left: 0; top: 0; width: 100%;
  color: var(--pl-red);
  transform: translate(0.045em, 0.035em);
  z-index: -1;
  pointer-events: none;
}

/* ---- hero: the cover -------------------------------------------------- */
.pl-cover {
  position: relative; isolation: isolate; overflow: clip;
  padding: clamp(16px, 4vw, 40px);
  /* The cover is coated stock as published: no foxing, no pulp grain.
     Aged paper is the collector's copy (kcc:surface-4). */
}
.pl-price {
  position: absolute; right: clamp(14px, 3vw, 24px); top: clamp(14px, 3vw, 24px);
  width: clamp(64px, 9vw, 84px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pl-red); color: var(--pl-paper);
  font: 400 clamp(24px, 3.4vw, 32px)/1 var(--pl-display);
  transform: rotate(12deg); mix-blend-mode: multiply;
}
.pl-kick { margin: 0; padding-right: 96px; font: 400 clamp(20px, 3vw, 32px)/1.1 var(--pl-display); letter-spacing: 0.06em; color: var(--pl-red); mix-blend-mode: multiply; }
.pl-h1 { margin: 6px 0 0; font: 400 clamp(110px, 25vw, 290px)/0.86 var(--pl-display); letter-spacing: -0.01em; text-transform: uppercase; overflow-wrap: anywhere; }
.pl-banner {
  display: inline-block; max-width: 100%; margin: 24px 0 26px;
  padding: 10px 20px;
  background: var(--pl-red); color: var(--pl-paper);
  font: 400 clamp(24px, 3vw, 34px)/1.12 var(--pl-display); text-transform: uppercase; letter-spacing: 0.01em;
  transform: rotate(-4deg); transform-origin: left center;
}
/* The cover's image area, reserved for a painted scene (none is held). Set
   as the original placeholder panel; its screen is now a plain ink field,
   since halftone was withdrawn. */
.pl-img { margin: 0; }
.pl-slot {
  position: relative; height: clamp(240px, 38vw, 380px);
  border: 4px solid var(--pl-blue);
  background: var(--pl-blue);
  display: grid; place-items: center; text-align: center; overflow: hidden;
}
.pl-slot::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 40% 40%, rgba(232, 214, 168, 0.35) 0 20%, transparent 60%); }
.pl-slot p {
  position: relative; max-width: 34ch; margin: 0 16px; padding: 10px 16px;
  background: var(--pl-paper); border: 3px solid var(--pl-blue);
  font: 700 14px/1.4 var(--pl-text); text-transform: uppercase; letter-spacing: 0.04em;
}
.pl-img figcaption, .pl-hatch figcaption { margin-top: 8px; font-size: 14px; line-height: 1.45; font-style: italic; max-width: 68ch; }
.pl-img figcaption b, .pl-hatch figcaption b { font-style: normal; color: var(--pl-redtx); }
.pl-strip {
  margin: 26px -20px 4px; padding: 12px 24px;
  background: var(--pl-blue); color: var(--pl-paper); text-align: center;
  font: 400 clamp(18px, 2.2vw, 24px)/1.25 var(--pl-display); letter-spacing: 0.06em; text-transform: uppercase;
  transform: rotate(-1.5deg);
}

/* ---- the record ------------------------------------------------------- */
.pl-stock { overflow: clip; box-shadow: inset 0 0 40px rgba(150, 100, 40, 0.15); }
.pl-meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px;
  margin: 0; padding: clamp(24px, 4vw, 40px); border-top: 6px double var(--pl-blue);
  font-size: 16px;
}
.pl-meta dt, .pl-cap, .pl-note b, .pl-links span, .pl-ct small, .pl-rt thead th {
  font: 700 12px/1.4 var(--pl-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pl-redtx);
}
.pl-meta dd { margin: 4px 0 0; }

/* The interiors' shading in one ink (kcc:technique-2): stipple, then
   coarse crosshatching light and heavy. Irregular stipple from two offset
   dot fields of different pitch, never a regular screen. */
.pl-hatch { margin: 0 clamp(16px, 4vw, 40px) clamp(24px, 4vw, 40px); }
.pl-tones { display: grid; grid-template-columns: repeat(3, 1fr); height: 56px; border: 3px solid var(--pl-blue); }
.pl-tones i:nth-child(1) { background:
  radial-gradient(circle, var(--pl-blue) 0 1.2px, transparent 1.6px) 0 0 / 7px 9px,
  radial-gradient(circle, var(--pl-blue) 0 1px, transparent 1.4px) 3px 4px / 11px 8px; }
.pl-tones i:nth-child(2) { background: repeating-linear-gradient(45deg, var(--pl-blue) 0 1.5px, transparent 1.5px 7px); }
.pl-tones i:nth-child(3) { background:
  repeating-linear-gradient(45deg, var(--pl-blue) 0 2px, transparent 2px 6px),
  repeating-linear-gradient(-45deg, var(--pl-blue) 0 2px, transparent 2px 6px); }

.pl-sec { padding: clamp(24px, 4vw, 40px); border-top: 6px double var(--pl-blue); }
.pl-sec h2 { margin: 0 0 14px; font: 400 clamp(34px, 5vw, 58px)/1 var(--pl-display); letter-spacing: 0.01em; text-transform: uppercase; overflow-wrap: anywhere; }
.pl-rec p { margin: 0 0 1em; max-width: 68ch; }
.pl-rec .pl-cap { margin: 0 0 18px; }
.pl-rec .pl-big { font: 700 clamp(22px, 2.6vw, 28px)/1.3 var(--pl-text); max-width: 34ch; }

/* The refusal, set as the cover sets a promise: an angled red banner. */
.pl-rec .pl-refuse {
  display: inline-block; max-width: 100%; margin: 12px 0 8px;
  padding: 12px 20px;
  background: var(--pl-red); color: var(--pl-paper);
  font: 400 clamp(24px, 3vw, 30px)/1.15 var(--pl-display); letter-spacing: 0.01em;
  transform: rotate(-2deg); transform-origin: left center;
}
.pl-refuse b { font-weight: 400; text-transform: uppercase; margin-right: 0.3em; }
/* The diagnostic, set as the cover's strip. */
.pl-rec .pl-dx {
  max-width: none; margin: 22px -12px; padding: 14px 22px;
  background: var(--pl-blue); color: var(--pl-paper);
  font: 400 clamp(24px, 2.6vw, 28px)/1.25 var(--pl-display); letter-spacing: 0.02em;
  transform: rotate(-1deg);
}

.pl-nl { font-style: italic; }
.pl-tw { overflow-x: auto; }
.pl-ct, .pl-rt { width: 100%; border-collapse: collapse; margin: 0 0 1em; font-size: 16px; }
.pl-ct th, .pl-ct td, .pl-rt th, .pl-rt td { padding: 10px 10px 10px 0; border-bottom: 2px solid var(--pl-blue); text-align: left; vertical-align: top; }
.pl-ct th { width: 30%; font-weight: 400; }
.pl-ct th a { display: inline-flex; align-items: center; min-height: 44px; font: 400 22px/1.1 var(--pl-display); text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; }
.pl-ct th a:hover { text-decoration: underline; }
.pl-ct small { display: block; }
.pl-ct td p { margin: 0 0 0.4em; }
.pl-tags a { display: inline-flex; align-items: center; min-height: 44px; margin-right: 14px; }
.pl-swatch { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 4px 0; }
.pl-chip { display: flex; flex-direction: column; gap: 4px; font: 700 12px/1.2 var(--pl-text); letter-spacing: 0.04em; }
.pl-chip i { display: block; width: 60px; height: 40px; border: 2px solid var(--pl-blue); }
.pl-rt tbody th { font-weight: 700; }

.pl-rules { list-style: none; margin: 0; padding: 0; }
.pl-rules li { padding: 18px 0; border-top: 2px solid var(--pl-blue); }
.pl-rules li:last-child { padding-bottom: 0; }
.pl-rules h3 {
  display: inline-block; margin: 0 12px 6px 0; padding: 4px 12px;
  background: var(--pl-blue); color: var(--pl-paper);
  font: 400 22px/1.15 var(--pl-display); letter-spacing: 0.04em; text-transform: uppercase;
  transform: rotate(-2deg);
}
.pl-k { font-style: italic; font-size: 16px; color: var(--pl-redtx); }
.pl-rec .pl-rules p { margin: 4px 0 0; }
.pl-rules small { display: block; margin-top: 6px; font-size: 14px; font-style: italic; }
.pl-rules li.pl-ctx { border: 2px dashed var(--pl-blue); padding: 18px; margin-top: 18px; }

.pl-firm { font-weight: 700; }
.pl-note { margin: 0 0 1.2em; padding: 14px 18px; border: 3px solid var(--pl-blue); max-width: 68ch; }
.pl-note b { display: block; margin-bottom: 4px; }
.pl-rec .pl-note p { margin: 0; }

.pl-conf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pl-conf > a, .pl-conf > div { display: block; padding: 16px 18px; border: 3px solid var(--pl-blue); color: var(--pl-blue); text-decoration: none; }
.pl-conf b { display: block; font: 400 26px/1.1 var(--pl-display); text-transform: uppercase; letter-spacing: 0.02em; }
.pl-conf > a b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pl-conf i { display: block; margin: 2px 0 6px; font-size: 15px; color: var(--pl-redtx); }
.pl-conf span { display: block; font-size: 16px; }

/* Exits: blue plates with the red plate landing where the press put it. */
.pl-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 6px 6px 8px 0; }
.pl-rec .pl-use a {
  display: block; padding: 18px 20px; text-decoration: none;
  background: var(--pl-blue); color: var(--pl-paper); font-size: 16px;
  box-shadow: 6px 5px 0 var(--pl-red);
}
.pl-rec .pl-use a:hover { background: var(--pl-blue); box-shadow: 3px 2px 0 var(--pl-red); }
.pl-rec .pl-use a:focus-visible { outline: 3px solid var(--pl-blue); outline-offset: 6px; }
.pl-use b { display: block; margin-bottom: 6px; font: 400 24px/1.1 var(--pl-display); text-transform: uppercase; letter-spacing: 0.03em; color: var(--pl-paper); }
.pl-rec .pl-links { margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; }
.pl-links span { flex-basis: 100%; }
.pl-links a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 760px) {
  .pl-meta { grid-template-columns: 1fr 1fr; }
  .pl-conf, .pl-use { grid-template-columns: 1fr; }
  /* The ledger stacks: area over its entry, so the swatches get the full width. */
  .pl-ct th, .pl-ct td { display: block; width: auto; }
  .pl-ct th { border-bottom: 0; padding-bottom: 0; }
}
@media (max-width: 420px) {
  .pl-hero, .pl-rec { font-size: 17px; }
  .pl-kick { padding-right: 80px; }
  .pl-strip { margin-inline: -16px; }
  .pl-rec .pl-dx { margin-inline: -16px; }
}