/* pentimento-web · the one stylesheet — shared token layer + brand faces.
   Every route links this; nothing else is shared (PEN-176). Zero external
   requests: the four brand faces below are self-hosted subset woff2
   (Inter + Fraunces = SIL OFL; Special Elite + Permanent Marker = Apache-2.0;
   licences in /fonts/licences/), same-origin only. Every value
   traces to Foundations, except the §W1 web tokens marked NEW. The token
   layer is the ratified Render build-source layer verbatim (PEN-176); the one
   intended difference from the render is that it lives here once instead of
   inlined three times, and the brand faces are wired via @font-face here (the
   render host had no subset woff2 and fell back to local faces — nothing
   else changes). */

/* ── Brand faces · self-hosted subset woff2 · same-origin · SIL OFL ── */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-var.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/fraunces-italic-var.woff2") format("woff2");
}
@font-face {
  font-family: "Special Elite";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/special-elite.woff2") format("woff2");
}
@font-face {
  font-family: "Permanent Marker";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/permanent-marker.woff2") format("woff2");
}

:root {
  /* Paper — Foundations §Palette */
  --pen-canvas:   #F4EFE4;
  --pen-card:     #FBF8F0;
  --pen-inset:    #EDE7D9;
  --pen-hairline: #DDD5C4;

  /* Ink */
  --pen-ink:       #211D19;
  --pen-ink-2:     #5C554C;
  --pen-ink-3:     #8A8177;

  /* Accent — verdigris, the one green. The single spot colour. */
  --pen-accent:      #2F5D50;
  --pen-accent-prs:  #234639;
  --pen-accent-tint: #E4EDE9;

  /* NO RED EXISTS IN THIS FILE. A red value here is a P1. */

  /* Spacing — PenSpace, 4-base */
  --pen-s1: 4px;  --pen-s2: 8px;  --pen-s3: 12px; --pen-s4: 16px;
  --pen-s5: 24px; --pen-s6: 32px; --pen-s7: 48px;

  /* Radius — PenRadius */
  --pen-r-s: 6px; --pen-r-m: 10px; --pen-r-l: 16px;

  /* Duration + curve — PenDur */
  --pen-fast: 150ms; --pen-base: 240ms; --pen-slow: 420ms; --pen-gentle: 650ms;
  --pen-settle: cubic-bezier(0.215, 0.61, 0.355, 1);

  /* Elevation — PenElev. Shadows cast ink, never black. */
  --pen-elev-overlay: 0 -2px 12px rgba(33, 29, 25, .10);

  /* ── NEW · §W1 web tokens ───────────────────────────────────────── */
  --web-measure-page: 48rem;   /* the sheet   */
  --web-measure-read: 34rem;   /* body column */
  --web-torn-amp:     6px;
  --web-torn-wave:    24px;
  --web-halftone-pitch: 6px;

  /* Type — Foundations roles, verbatim px. No web scale invented. */
  --pen-font-ui:    -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
  --pen-font-type:  "Special Elite", "American Typewriter", "Courier New", ui-monospace, monospace;
  --pen-font-accent:"Fraunces", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --pen-font-scrawl:"Permanent Marker", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
}

/* ── Reset + ground ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pen-canvas);
  color: var(--pen-ink);
  font: 400 15px/22px var(--pen-font-ui);          /* PenType.body */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* ── Type roles ─────────────────────────────────────────────────────────── */
.t-titleL      { font: 600 20px/26px var(--pen-font-ui); margin: 0; }
.t-titleM      { font: 600 17px/24px var(--pen-font-ui); margin: 0; }
.t-body        { font: 400 15px/22px var(--pen-font-ui); }
.t-bodyStrong  { font: 600 15px/22px var(--pen-font-ui); }
.t-caption     { font: 400 13px/18px var(--pen-font-ui); color: var(--pen-ink-2); }
.t-label       { font: 500 12px/16px var(--pen-font-ui); letter-spacing: .3px; }
.t-accent      { font: italic 400 21px/28px var(--pen-font-accent); }
.t-zine        { font: 400 14px/21px var(--pen-font-type); text-transform: lowercase; }
.t-scrawl      { font: 400 17px/24px var(--pen-font-scrawl); }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.sheet { width: 100%; max-width: var(--web-measure-page); margin: 0 auto; padding: 0 var(--pen-s4); }
.read  { max-width: var(--web-measure-read); }
@media (min-width: 40rem) { .sheet { padding: 0 var(--pen-s5); } }

/* ── Materials · grain (§W1) ────────────────────────────────────────────
   feTurbulence, seed fixed at 7 → byte-stable tile. Inline data-URI.       */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='7'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
.grain--brand      { opacity: .085; }   /* ≤10% brand cap      */
.grain--functional { opacity: .045; }   /* ≤5%  functional cap */

/* ── Materials · halftone plate (§W1) · pure CSS, zero requests ─────────── */
.halftone {
  background-image: radial-gradient(circle at 1.5px 1.5px, rgba(33,29,25,.18) 1.5px, transparent 1.6px);
  background-size: var(--web-halftone-pitch) var(--web-halftone-pitch);
}
.halftone--functional {
  background-image: radial-gradient(circle at 1.5px 1.5px, rgba(33,29,25,.12) 1.5px, transparent 1.6px);
  background-size: var(--web-halftone-pitch) var(--web-halftone-pitch);
}
/* halftone section rule — a dot row, never a solid line */
.rule-halftone {
  height: var(--web-halftone-pitch); border: 0; margin: var(--pen-s6) 0;
  background-image: radial-gradient(circle at 1.5px 1.5px, rgba(33,29,25,.12) 1.5px, transparent 1.6px);
  background-size: var(--web-halftone-pitch) var(--web-halftone-pitch);
}

/* ── Materials · torn edge (§W1) ────────────────────────────────────────
   Fixed 12-point offset sequence 0,5,2,6,1,4,0,6,3,5,1,4 over a 288px
   repeat. Deterministic — no Math.random anywhere, ever.                   */
.torn-top {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='288' height='400' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L24,5 L48,2 L72,6 L96,1 L120,4 L144,0 L168,6 L192,3 L216,5 L240,1 L264,4 L288,0 L288,400 L0,400 Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='288' height='400' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L24,5 L48,2 L72,6 L96,1 L120,4 L144,0 L168,6 L192,3 L216,5 L240,1 L264,4 L288,0 L288,400 L0,400 Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 288px 100%; mask-size: 288px 100%;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}

/* ── Components ─────────────────────────────────────────────────────────── */
.card {                                    /* PenCard — mounted print */
  background: var(--pen-card);
  border: 1px solid var(--pen-hairline);
  border-radius: var(--pen-r-m);
  padding: var(--pen-s4);
}
.inkbox {                                  /* ink-block, straight — no tilt */
  border: 2px solid var(--pen-ink);
  border-radius: var(--pen-r-s);
  background: var(--pen-card);
  padding: var(--pen-s4);
}
.hair { height: 1px; border: 0; background: var(--pen-hairline); margin: var(--pen-s5) 0; }

/* ── Links — stamped underline, never a fade ────────────────────────────── */
a {
  color: var(--pen-accent);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
a:hover { border-bottom-color: var(--pen-accent); }   /* instant, no transition */
a:active { color: var(--pen-accent-prs); }
a:focus-visible { outline: 2px solid var(--pen-ink); outline-offset: 2px; border-radius: 2px; }

/* ── Motion · §W2 · entrance only, one settle each, never a cycle ───────── */
@keyframes pen-strike {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.strike {
  opacity: 0;
  animation: pen-strike var(--pen-base) var(--pen-settle) forwards;
}
.strike:nth-of-type(1) { animation-delay:   0ms; }
.strike:nth-of-type(2) { animation-delay:  80ms; }
.strike:nth-of-type(3) { animation-delay: 160ms; }
.strike:nth-of-type(4) { animation-delay: 240ms; }
.strike:nth-of-type(5) { animation-delay: 320ms; }
.strike:nth-of-type(6) { animation-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .strike, .tile { animation: none !important; opacity: 1 !important; transform: none !important; }
  * { transition: none !important; }
}

/* ── Skip link — a11y ───────────────────────────────────────────────────── */
.skip {
  position: absolute; left: -9999px;
  background: var(--pen-card); border: 2px solid var(--pen-ink);
  padding: var(--pen-s2) var(--pen-s3); border-radius: var(--pen-r-s);
}
.skip:focus { left: var(--pen-s4); top: var(--pen-s4); z-index: 10; }