/* ==========================================================================
   NEW WAVE TYPOGRAPHY — one page. Loaded on a/new-wave-typography.html only.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   One six-column grid under hero and record. Every block has a seat on it
   (--nw-seat) and may sit off it (--nw-at, or a transform in the hero).
   body.nw-show draws the columns and prints each seat; body.nw-snap puts
   every block back on its seat. The shell (rail, top bar, community drawer)
   is never restyled: every rule is scoped to .nw-page main, .nw-sheet or
   .nw-rec.

   The violence stays on display type: the hero's title, its specimen and
   its halftone film are turned, displaced and layered. In the record only the
   section headings turn; sections move by whole columns (grid placement,
   no transform), so no sentence is rotated, tracked or covered.

   Palette: paper, ink, the bright magenta, cyan, yellow; a deep magenta for
   small text; one grey for secondary text.
   Contrast (text/ground, WCAG AA):
   ink #111111 on paper #F2F0EA 16.2 · on yellow #FFD500 13.3
   deep magenta #B8006A on paper 5.7 · white on it 6.5
   grey #5E5C57 on paper 5.8
   The bright #E6007E is 3.9:1 on paper: display sizes only (large text).
   Cyan #009BD1 is 2.8:1: never text that must be read (halftone film, overlay,
   the aria-hidden margin word).
   ========================================================================== */
@font-face {
  font-family: "NW Archivo";
  src: url("fonts/archivo.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

.nw-page {
  --nw-paper: #F2F0EA;
  --nw-ink: #111111;
  --nw-mag: #E6007E;
  --nw-cy: #009BD1;
  --nw-yel: #FFD500;
  --nw-magd: #B8006A;
  --nw-grey: #5E5C57;
  --nw-face: "NW Archivo", "Helvetica Neue", Arial, sans-serif;
  --nw-gap: 20px;
}
.nw-page main { background: var(--nw-paper); color: var(--nw-ink); overflow-x: clip; }

/* ---- shared: the sheet, the grid, the overlay --------------------------- */
.nw-sheet { position: relative; max-width: 1180px; margin: 0 auto; padding: 30px clamp(16px, 4vw, 40px) 40px; font: 400 17px/1.55 var(--nw-face); font-stretch: 100%; color: var(--nw-ink); }
.nw-grid { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--nw-gap); }
.nw-overlay { position: absolute; inset: 0; z-index: 0; display: none; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--nw-gap); pointer-events: none; }
.nw-overlay i { background: rgba(0, 155, 209, .10); border-inline: 1px solid rgba(0, 155, 209, .6); }
.nw-show .nw-overlay { display: grid; }
.nw-dep { display: none; }
.nw-show .nw-dep { display: block; width: max-content; max-width: 100%; margin: 0 0 10px; padding: 2px 7px; background: var(--nw-magd); color: #FFFFFF; font: 700 11px/1.5 var(--nw-face); font-stretch: 75%; letter-spacing: .1em; text-transform: uppercase; }
.nw-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.nw-sheet :focus-visible { outline: 3px solid var(--nw-magd); outline-offset: 3px; }

/* The stepped shape: four solid steps, each a step lower than the last. */
.nw-steps { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr 3fr; align-items: end; height: 32px; margin: 26px 0 40px; }
.nw-steps i { height: 32px; background: var(--nw-ink); }
.nw-steps i:nth-child(2) { height: 24px; }
.nw-steps i:nth-child(3) { height: 16px; }
.nw-steps i:nth-child(4) { height: 8px; }
.nw-steps--flip { transform: scaleX(-1); }

/* ---- hero -------------------------------------------------------------- */
.nw-hero { overflow-x: clip; container-type: inline-size; }
.nw-ctrl { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; position: relative; z-index: 2; }
.nw-btn { min-height: 44px; padding: 0 16px; border: 2px solid var(--nw-ink); border-radius: 0; background: var(--nw-paper); color: var(--nw-ink); font: 700 14px/1 var(--nw-face); font-stretch: 75%; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.nw-btn:hover { background: var(--nw-yel); }
.nw-btn[aria-pressed="true"] { background: var(--nw-ink); color: var(--nw-paper); }

.nw-el { position: relative; z-index: 1; min-width: 0; transform: translate(var(--nw-dx, 0), var(--nw-dy, 0)) rotate(var(--nw-rot, 0deg)); }
.nw-snap .nw-el { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .nw-el, .nw-h2 { transition: transform .5s steps(2, end); }
}

/* Film: hard-cut sheets of transparent film carrying a coarse halftone
   screen, stacked in strata behind the specimen. The dot is left showing
   (the documented surface); nothing is blurred or airbrushed. */
.nw-film { position: absolute; z-index: 0; pointer-events: none; mix-blend-mode: multiply; }
.nw-film--m { right: 16%; top: 46%; width: 36%; height: 230px; background: radial-gradient(circle, var(--nw-mag) 36%, transparent 38%) 0 0 / 11px 11px; transform: rotate(-4deg); opacity: .8; }
.nw-film--c { right: -1%; top: 60%; width: 30%; height: 210px; background: radial-gradient(circle, var(--nw-cy) 30%, transparent 32%) 0 0 / 14px 14px; transform: rotate(3deg); opacity: .85; }
.nw-film--y { left: 4%; top: 32%; width: 24%; height: 130px; background: var(--nw-yel); opacity: .5; }
.nw-el--note { grid-column: 1 / span 3; margin: 36px 0 0; max-width: 34ch; font-size: 14px; line-height: 1.45; color: var(--nw-ink); }
.nw-el--note .nw-k { margin-bottom: 2px; }

.nw-el--title { grid-column: 1 / -1; }
.nw-h1 { margin: 0; font-family: var(--nw-face); font-size: clamp(36px, 13.5cqi, 150px); white-space: nowrap; line-height: .86; font-weight: 300; font-stretch: 125%; letter-spacing: -.03em; color: var(--nw-ink); }
.nw-t1 { font-weight: 900; font-stretch: 62%; letter-spacing: .3em; }
.nw-t2 { font-weight: 900; font-stretch: 125%; }
.nw-t2b { color: var(--nw-mag); font-weight: 100; font-stretch: 62%; }
.nw-t3 { font-weight: 100; font-stretch: 62%; }
.nw-t4 { font-weight: 900; font-stretch: 125%; }

/* The defining line: one column right of its seat, level. */
.nw-el--def { grid-column: 2 / span 4; }
.nw-snap .nw-el--def { grid-column: 1 / span 4; }
.nw-def { margin: 0; max-width: 30ch; font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; font-stretch: 100%; line-height: 1.25; }

.nw-el--vert { grid-column: 6; justify-self: end; align-self: start; writing-mode: vertical-rl; --nw-rot: 180deg; --nw-dy: 30px; font: 900 14px/1 var(--nw-face); font-stretch: 62%; letter-spacing: .4em; text-transform: uppercase; color: var(--nw-magd); }
.nw-snap .nw-el--vert { transform: rotate(180deg); }

/* The specimen: two columns off its seat and turned — the biggest departure. */
.nw-el--spec { grid-column: 3 / span 4; margin-top: 56px; --nw-rot: 6deg; transform-origin: left top; }
.nw-snap .nw-el--spec { grid-column: 1 / span 4; }
.nw-spec { margin: 0; font-size: clamp(40px, 9cqi, 112px); line-height: .92; letter-spacing: -.02em; }
.nw-sp { display: block; font-weight: 200; font-stretch: 125%; }
.nw-sp--b { font-weight: 500; font-stretch: 100%; padding-left: .6em; }
.nw-spx { font-weight: 900; font-stretch: 62%; letter-spacing: .14em; color: var(--nw-mag); }

/* ---- the record --------------------------------------------------------- */
.nw-rec { background: var(--nw-paper); color: var(--nw-ink); font-synthesis: style; }
.nw-rec .nw-sheet { padding-top: 0; padding-bottom: 80px; }
.nw-rec p { margin: 0 0 12px; max-width: 68ch; }
.nw-rec b { font-weight: 800; }
.nw-rec em { font-style: italic; }
.nw-rec a { color: var(--nw-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.nw-rec a:hover { background: var(--nw-yel); }

.nw-s { grid-column: var(--nw-at); position: relative; z-index: 1; min-width: 0; margin-top: 64px; }
.nw-snap .nw-s { grid-column: var(--nw-seat); }
.nw-h2 { display: inline-block; margin: 0 0 30px; font-family: var(--nw-face); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; font-weight: 900; font-stretch: 62%; letter-spacing: .24em; text-transform: uppercase; transform: rotate(var(--nw-turn, 0deg)); transform-origin: left center; }
.nw-snap .nw-h2 { transform: none; }
.nw-n { display: inline-block; margin-left: .3em; padding: 0 .35em; background: var(--nw-magd); color: #FFFFFF; letter-spacing: 0; font-stretch: 100%; }
.nw-small { font-size: 15px; color: var(--nw-grey); }
.nw-big { font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; line-height: 1.3; }
.nw-dx { border-left: 8px solid var(--nw-ink); padding-left: 16px; }
.nw-firm { font-weight: 700; }
.nw-k { display: block; margin-bottom: 6px; font: 700 12px/1.4 var(--nw-face); font-stretch: 75%; letter-spacing: .12em; text-transform: uppercase; color: var(--nw-magd); }

/* The meta strip */
.nw-meta { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px var(--nw-gap); }
.nw-meta dt, .nw-pairs dt { padding-top: 6px; border-top: 2px solid var(--nw-ink); font: 700 12px/1.4 var(--nw-face); font-stretch: 75%; letter-spacing: .14em; text-transform: uppercase; }
.nw-meta dd { margin: 4px 0 0; }
.nw-pairs { margin: 16px 0; display: grid; gap: 12px; max-width: 68ch; }
.nw-pairs > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 16px; }
.nw-pairs dd { margin: 0; padding-top: 4px; }

/* The margin word beside recognition: decoration, cyan, set vertical. */
.nw-word { grid-column: 1 / span 2; justify-self: center; align-self: start; margin-top: 72px; writing-mode: vertical-rl; transform: rotate(180deg); font: 900 56px/1 var(--nw-face); font-stretch: 62%; letter-spacing: .1em; text-transform: uppercase; color: var(--nw-cy); }

/* Tables */
.nw-tw { overflow-x: auto; margin-top: 8px; }
.nw-ct { width: 100%; border-collapse: collapse; font-size: 16px; }
.nw-ct th, .nw-ct td { padding: 10px 12px 10px 0; border-top: 2px solid var(--nw-ink); text-align: left; vertical-align: top; }
.nw-ct tbody th { width: 13rem; font: 700 13px/1.5 var(--nw-face); font-stretch: 75%; letter-spacing: .12em; text-transform: uppercase; }
.nw-ct tbody th a { display: inline-flex; align-items: center; min-height: 44px; }
.nw-ct tbody th small { display: block; font: 700 11px/1.4 var(--nw-face); letter-spacing: .1em; color: var(--nw-magd); }
.nw-ct thead th { font: 700 12px/1.4 var(--nw-face); font-stretch: 75%; letter-spacing: .14em; text-transform: uppercase; border-top-width: 8px; }
.nw-ct td p { margin: 0 0 6px; }
.nw-rt tbody th { width: auto; }
.nw-none { color: var(--nw-grey); }
.nw-tags { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.nw-tags a { display: inline-flex; align-items: center; min-height: 44px; }
.nw-swatch { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.nw-chip { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.4 var(--nw-face); font-stretch: 75%; letter-spacing: .06em; }
.nw-chip i { width: 22px; height: 22px; border: 1px solid var(--nw-ink); }

/* Rules: three columns, each card a step lower than the one before. */
.nw-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px var(--nw-gap); align-items: start; }
.nw-rule { border-top: 8px solid var(--nw-ink); padding-top: 12px; }
.nw-rule--1 { margin-top: 30px; }
.nw-rule--2 { margin-top: 60px; }
.nw-snap .nw-rule { margin-top: 0; }
.nw-rule h3 { margin: 0 0 4px; font-family: var(--nw-face); font-size: 20px; font-weight: 900; font-stretch: 62%; letter-spacing: .14em; text-transform: uppercase; }
.nw-rule p { margin: 0 0 8px; }
.nw-ev { display: inline-block; padding: 1px 6px; border: 2px solid var(--nw-ink); font: 700 12px/1.4 var(--nw-face); font-stretch: 75%; letter-spacing: .1em; text-transform: uppercase; }

/* Neighbours and exits: tiles */
.nw-conf, .nw-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nw-gap); }
.nw-use { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nw-rec a.nw-tile, .nw-rec div.nw-tile { display: block; min-height: 44px; padding: 18px 20px; border: 2px solid var(--nw-ink); color: var(--nw-ink); background: var(--nw-paper); text-decoration: none; }
.nw-rec a.nw-tile:hover { background: var(--nw-yel); }
.nw-rec a.nw-tile--y { background: var(--nw-yel); }
.nw-rec a.nw-tile--y:hover { background: var(--nw-ink); color: var(--nw-paper); }
.nw-tile b { display: block; margin-bottom: 6px; font-size: 20px; font-weight: 900; font-stretch: 75%; }
.nw-tile > span { display: block; }
.nw-rec .nw-tile--y:hover .nw-k { color: var(--nw-paper); }
.nw-conf__n { font-size: clamp(26px, 3.2vw, 40px) !important; line-height: 1; font-stretch: 62% !important; letter-spacing: .08em; text-transform: uppercase; }
.nw-conf__t { margin-top: 4px; }
.nw-mach, .nw-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 20px !important; }
.nw-mach span { font: 700 12px/1.4 var(--nw-face); font-stretch: 75%; letter-spacing: .14em; text-transform: uppercase; }
.nw-mach a, .nw-foot a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- narrow: two columns, every block full width ------------------------ */
@media (max-width: 860px) {
  .nw-grid, .nw-overlay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nw-grid > *, .nw-snap .nw-grid > * { grid-column: 1 / -1; }
  .nw-show .nw-dep, .nw-el--vert, .nw-word { display: none; }
  .nw-el--spec { --nw-rot: 3deg; margin-top: 40px; }
  .nw-film--m { right: 10%; width: 60%; }
  .nw-film--c { width: 50%; }
  /* The note lands on the cyan film at this width: give it paper to sit on, so it keeps AA contrast. */
  .nw-el--note { background: var(--nw-paper); box-shadow: 0 0 0 6px var(--nw-paper); }
  .nw-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nw-rules, .nw-use { grid-template-columns: minmax(0, 1fr); }
  .nw-rule--1, .nw-rule--2 { margin-top: 0; }
  .nw-s { margin-top: 48px; }
}
@media (max-width: 560px) {
  .nw-meta, .nw-conf { grid-template-columns: minmax(0, 1fr); }
  .nw-pairs > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .nw-ct tbody th { width: 8.5rem; }
}