/* ==========================================================================
   ANTI-DESIGN — one page. Loaded on a/anti-design.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   Nothing settles on a shared edge; the title collides with itself; two
   colour systems are left unarbitrated; the one link that matters resists
   the pointer. Every transform is placed, not random, and "Straighten this
   page" (.nd-page--calm) removes all of them at once. The shell (rail, top
   bar, community drawer) is never restyled: every rule here is scoped to
   .nd-hero or .nd-rec.
   ========================================================================== */
@font-face {
  font-family: "WorkSansX";
  src: url("fonts/work-sans.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
.nd-page {
  --nd-ink: #17141B; --nd-blue: #1F3E9E; --nd-lime: #D6FF3F; --nd-cream: #F4EFE2; --nd-pink: #FF3DA6;
  --nd-lilac: #C7D0FF; --nd-mist: #EFEDF3; --nd-night: #0B0D12; --nd-dim: #5b5563;
  --nd-face: "WorkSansX", "Work Sans", "Helvetica Neue", Arial, sans-serif;
  background: var(--paper);
}
.nd-page main { background: var(--nd-cream); color: var(--nd-ink); position: relative; overflow-x: hidden; }
.nd-hero, .nd-rec { font: 400 1.0625rem/1.5 var(--nd-face); color: var(--nd-ink); font-synthesis: weight style; }
.nd-hero a, .nd-rec a { color: var(--nd-blue); text-decoration-thickness: 3px; text-underline-offset: 2px; }
.nd-hero a:hover, .nd-rec a:hover { background: var(--nd-pink); color: var(--nd-ink); }
.nd-hero :focus-visible, .nd-rec :focus-visible { outline: 4px dashed var(--nd-pink); outline-offset: 4px; }
.nd-w { padding: 0 clamp(16px, 4vw, 48px); }

/* ---- hero ---- */
.nd-hero { position: relative; min-height: min(92vh, 900px); padding: 40px clamp(16px, 4vw, 48px) 80px; background: var(--nd-cream); border-bottom: 14px solid var(--nd-blue); overflow: hidden; }
.nd-ttl { margin: 0; position: relative; z-index: 2; font-size: clamp(70px, 17vw, 250px); line-height: 0.72; letter-spacing: -0.04em; padding-top: 40px; font-weight: 900; }
.nd-ttl span { display: inline-block; transition: transform 0.3s steps(3); }
.nd-a1 { font-weight: 900; transform: rotate(-9deg) translateY(0.08em); }
.nd-a2 { font-weight: 100; font-style: italic; color: var(--nd-blue); transform: translateY(-0.2em) scaleX(1.4); }
.nd-a3 { font-weight: 800; color: var(--nd-pink); transform: rotate(14deg); -webkit-text-stroke: 3px var(--nd-ink); }
.nd-a4 { font-weight: 300; transform: scaleX(-1) translateY(0.12em); background: var(--nd-lime); padding: 0 0.04em; }
.nd-a5 { display: block; font-weight: 900; margin-left: clamp(10px, 16vw, 280px); letter-spacing: 0.14em; color: var(--nd-cream); -webkit-text-stroke: 2px var(--nd-ink); transform: rotate(-3deg); }
.nd-a6 { font-weight: 200; font-size: 0.55em; writing-mode: vertical-rl; vertical-align: top; color: var(--nd-blue); }
.nd-frag { position: absolute; z-index: 3; font-weight: 700; padding: 6px 10px; margin: 0; }
.nd-f1 { top: 22px; right: 4%; transform: rotate(90deg) translateX(100%); transform-origin: top right; background: var(--nd-ink); color: var(--nd-lime); font-size: 14px; letter-spacing: 0.3em; }
.nd-f2 { top: 48%; right: 6%; font-size: clamp(18px, 2.2vw, 28px); letter-spacing: 0.6em; font-weight: 200; max-width: 9em; line-height: 1.1; color: var(--nd-blue); }
.nd-f3 { bottom: 120px; left: 38%; background: var(--nd-pink); font-size: clamp(20px, 3vw, 40px); font-weight: 900; transform: rotate(-6deg); color: var(--nd-ink); }
.nd-f4 { bottom: 44px; right: 14%; font-size: 15px; font-weight: 500; text-decoration: line-through wavy var(--nd-pink); transform: rotate(2deg); }
.nd-desc { position: relative; z-index: 3; max-width: 31ch; margin: 48px 0 0 clamp(0px, 50vw, 720px); font-size: clamp(19px, 2vw, 24px); line-height: 1.2; font-weight: 600; background: var(--nd-lilac); padding: 14px 16px; transform: rotate(1.5deg); }
.nd-calm { position: relative; z-index: 4; margin-top: 24px; min-height: 44px; padding: 0 18px; border: 3px solid var(--nd-ink); background: var(--nd-lime); color: var(--nd-ink); font: 800 16px/1 var(--nd-face); cursor: pointer; transform: rotate(-4deg); box-shadow: -8px 8px 0 var(--nd-pink); }
.nd-calm:hover { background: var(--nd-ink); color: var(--nd-lime); }
.nd-blob { position: absolute; z-index: 1; border-radius: 50%; }
.nd-blob--1 { width: 36vw; max-width: 520px; aspect-ratio: 1; background: var(--nd-lime); right: -8vw; top: 10%; mix-blend-mode: multiply; }
.nd-blob--2 { width: 120px; height: 600px; background: var(--nd-pink); border-radius: 0; left: 62%; top: -40px; transform: rotate(34deg); opacity: 0.9; }

/* ---- the record ---- */
.nd-rec { position: relative; }
.nd-rec p { margin: 0 0 14px; }
.nd-meta { margin: 90px 0 0; display: flex; flex-wrap: wrap; gap: 0; }
.nd-meta div { padding: 14px 18px; border: 3px solid var(--nd-ink); margin: -3px 0 0 -3px; }
.nd-meta div:nth-child(1) { background: var(--nd-ink); color: var(--nd-mist); margin-left: 8%; transform: rotate(-2deg); }
.nd-meta div:nth-child(2) { background: var(--nd-lime); margin-top: 36px; }
.nd-meta div:nth-child(3) { background: var(--nd-cream); transform: translateY(-18px); }
.nd-meta div:nth-child(4) { background: var(--nd-pink); margin-left: 24%; }
.nd-meta div:nth-child(5) { background: var(--nd-lilac); transform: rotate(3deg); }
.nd-meta div:nth-child(6) { background: var(--nd-blue); color: var(--nd-cream); margin-top: 52px; }
.nd-meta dt { font-size: 12px; font-weight: 800; letter-spacing: 0.34em; text-transform: uppercase; }
.nd-meta dd { margin: 0; font-size: 20px; font-weight: 600; }

.nd-s { margin: 140px 0; position: relative; }
.nd-rec h2 { font-size: clamp(46px, 9vw, 130px); line-height: 0.82; letter-spacing: -0.05em; margin: 0 0 28px; font-weight: 900; }
.nd-thin { font-weight: 100; font-style: italic; }
.nd-s-carries h2 { margin-left: 18%; color: var(--nd-blue); }
.nd-scroll { overflow-x: auto; }
.nd-carries { border-collapse: collapse; width: 100%; max-width: 1000px; }
.nd-carries tr:nth-child(odd) th { padding-left: 6%; }
.nd-carries tr:nth-child(3n) td { padding-left: 22%; }
.nd-carries tr:nth-child(4n) th { transform: rotate(-2deg); }
.nd-carries th, .nd-carries td { text-align: left; padding: 12px 10px; border-bottom: 2px solid var(--nd-ink); vertical-align: top; }
.nd-carries th a { font-size: 22px; font-weight: 800; color: var(--nd-ink); }
.nd-cl { display: block; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--nd-pink); font-weight: 800; background: var(--nd-ink); width: max-content; padding: 2px 6px; margin-top: 4px; }
.nd-none { color: var(--nd-dim); font-style: italic; }
.nd-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.nd-rec .nd-tags a { border: 2px solid var(--nd-ink); padding: 2px 8px; text-decoration: none; color: var(--nd-ink); }
.nd-spec { font-size: 30px; }
.nd-spec__thin { font-weight: 100; }
.nd-spec__black { font-weight: 900; font-style: italic; }
.nd-swatch { display: flex; flex-wrap: wrap; }
.nd-swatch span { width: 74px; height: 74px; display: flex; align-items: flex-end; padding: 4px; font-size: 12px; font-weight: 700; margin: -6px 0 0 -8px; border: 2px solid var(--nd-ink); }
.nd-swatch span:nth-child(even) { transform: translateY(14px) rotate(6deg); }
.nd-asbuilt { margin: 24px 0 0 !important; }
.nd-note { max-width: 40ch; margin-left: auto; font-weight: 500; transform: rotate(-1deg); }

.nd-argue { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.nd-argue h2 { grid-column: 5 / -1; text-align: right; }
.nd-claim { grid-column: 1 / 9; font-size: clamp(24px, 3.4vw, 46px); line-height: 1.02; font-weight: 300; letter-spacing: -0.02em; }
.nd-claim b { font-weight: 900; background: var(--nd-lime); }
.nd-more { grid-column: 3 / 12; font-size: 19px; max-width: 52ch; margin-left: auto; }
.nd-refuse { grid-column: 7 / -1; margin-top: 30px; background: var(--nd-ink); color: var(--nd-lime); padding: 26px; transform: rotate(180deg); transition: transform 0.5s steps(4); cursor: help; }
.nd-refuse:hover, .nd-refuse:focus { transform: rotate(0); }
.nd-refuse strong { display: block; font-size: 40px; font-weight: 900; color: var(--nd-pink); line-height: 1; }
.nd-refuse small { display: block; margin-top: 10px; font-size: 13px; color: var(--nd-lilac); }

.nd-recog { position: relative; padding: 40px 0; }
.nd-ghost { position: absolute; inset: 0 auto auto -2%; font-size: clamp(120px, 30vw, 420px); font-weight: 900; line-height: 0.8; color: var(--nd-lilac); text-decoration: line-through; text-decoration-color: var(--nd-pink); text-decoration-thickness: 0.08em; z-index: 0; pointer-events: none; letter-spacing: -0.06em; }
.nd-recog h2 { position: relative; z-index: 1; writing-mode: vertical-rl; transform: rotate(180deg); float: left; font-size: clamp(34px, 6vw, 84px); margin: 0 26px 0 0; color: var(--nd-pink); -webkit-text-stroke: 1px var(--nd-ink); }
.nd-body { position: relative; z-index: 1; max-width: 58ch; margin-left: auto; margin-right: 6%; background: var(--nd-cream); padding: 18px; border-left: 10px solid var(--nd-blue); }
.nd-diag { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.1; font-weight: 800; margin-left: -60px !important; background: var(--nd-lime); padding: 10px; transform: rotate(-1.5deg); }
.nd-recog::after { content: ""; display: block; clear: both; }

.nd-rules { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; align-items: start; }
.nd-rule { border: 3px solid var(--nd-ink); padding: 18px; background: var(--nd-mist); }
.nd-rule h3 { margin: 0 0 8px; font-size: 30px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.nd-k { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; padding: 3px 7px; margin-bottom: 8px; }
.nd-k--p { background: var(--nd-blue); color: var(--nd-cream); }
.nd-k--o { background: var(--nd-pink); color: var(--nd-ink); }
.nd-rule p { margin: 0; }
.nd-ev { font-style: italic; color: var(--nd-dim); }
.nd-r1 { grid-column: 2 / 7; transform: rotate(-2deg); }
.nd-r2 { grid-column: 6 / 13; margin-top: 70px; background: var(--nd-lilac); }
.nd-r3 { grid-column: 1 / 5; background: var(--nd-lime); transform: rotate(3deg); }
.nd-r4 { grid-column: 8 / 12; margin-top: -40px; }
.nd-r5 { grid-column: 3 / 11; background: var(--nd-ink); color: var(--nd-mist); transform: rotate(-1deg); }
.nd-r5 .nd-ev { color: var(--nd-lime); }
.nd-r6 { grid-column: 5 / 13; background: var(--nd-pink); transform: rotate(1.5deg); }
.nd-rules-h { margin-left: 40%; }
.nd-rules-p { margin: -10px 0 40px 44% !important; font-weight: 600; }

.nd-behind { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.nd-behind h2 { grid-column: 1 / -1; font-weight: 100; font-style: italic; letter-spacing: 0.02em; }
.nd-txt { grid-column: 1 / 7; }
.nd-txt p { margin: 0 0 12px; }
.nd-bigno { font-size: clamp(28px, 4vw, 52px); font-weight: 900; line-height: 1; background: var(--nd-pink); display: inline-block; padding: 4px 8px; transform: rotate(-2deg); }
.nd-tblw { grid-column: 6 / -1; overflow-x: auto; transform: rotate(1deg); margin-top: 60px; }
.nd-res { border-collapse: collapse; min-width: 480px; width: 100%; background: var(--nd-mist); }
.nd-res th, .nd-res td { border: 2px solid var(--nd-ink); padding: 10px; text-align: left; }
.nd-res thead th { background: var(--nd-ink); color: var(--nd-lime); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }
.nd-res tbody tr:nth-child(odd) td:first-of-type { text-align: right; }
.nd-res tbody tr:nth-child(3n) th { text-align: center; }
.nd-res td.nd-y { background: var(--nd-lime); font-weight: 900; }
.nd-res td.nd-n { background: var(--nd-pink); font-weight: 900; }
.nd-firm { grid-column: 2 / 9; font-size: 22px; font-weight: 800; color: var(--nd-blue); }

.nd-conf { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-end; }
.nd-conf h2 { flex-basis: 100%; }
.nd-rec .nd-conf a, .nd-conf__plain { display: block; max-width: 420px; padding: 22px; border: 3px solid var(--nd-ink); text-decoration: none; color: var(--nd-ink); background: var(--nd-lime); }
.nd-conf a:nth-of-type(2) { background: var(--nd-lilac); margin-bottom: 60px; transform: rotate(-4deg); }
.nd-conf b { display: block; font-size: 34px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.nd-conf small { display: block; font-weight: 700; margin: 6px 0; }
.nd-rec .nd-conf a:hover { background: var(--nd-ink); color: var(--nd-lime); }

.nd-use { min-height: 420px; }
.nd-use h2 { text-align: center; }
.nd-cta { position: relative; display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; align-items: center; min-height: 240px; }
.nd-rec .nd-runaway { position: relative; display: inline-block; padding: 22px 26px; background: var(--nd-blue); color: var(--nd-cream); text-decoration: none; font-weight: 900; font-size: clamp(22px, 3vw, 34px); border: 4px solid var(--nd-ink); transition: transform 0.15s steps(2); max-width: 360px; }
.nd-runaway small, .nd-rev small { display: block; font-size: 15px; font-weight: 500; margin-top: 6px; }
.nd-rec .nd-rev { display: inline-block; padding: 22px 26px; background: var(--nd-pink); color: var(--nd-ink); text-decoration: none; font-weight: 900; font-size: clamp(22px, 3vw, 34px); border: 4px solid var(--nd-ink); max-width: 360px; transform: rotate(3deg); }
.nd-rev .nd-t { display: inline-block; transform: scaleX(-1); }
.nd-rev:hover .nd-t, .nd-rev:focus .nd-t { transform: none; }
.nd-rec .nd-runaway:hover, .nd-rec .nd-rev:hover { background: var(--nd-lime); color: var(--nd-ink); }
.nd-hint { font-size: 14px; font-weight: 600; color: var(--nd-dim); }
.nd-mach-h { font-size: 28px; font-weight: 100; font-style: italic; margin: 60px 0 0 30%; }
.nd-mach { margin: 12px 0 0 30%; display: flex; flex-wrap: wrap; gap: 12px 40px; }
.nd-mach a { font-family: ui-monospace, Menlo, monospace; font-size: 15px; }
.nd-mach a:nth-child(2) { transform: translateY(20px) rotate(-3deg); display: inline-block; }
.nd-pf { padding: 60px clamp(16px, 4vw, 48px); background: var(--nd-ink); color: var(--nd-mist); display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; font: 400 1.0625rem/1.5 var(--nd-face); }
.nd-rec .nd-pf a { color: var(--nd-lime); }
.nd-rec .nd-pf a:hover { background: var(--nd-pink); color: var(--nd-ink); }
.nd-x { font-size: clamp(40px, 10vw, 140px); font-weight: 900; letter-spacing: -0.06em; line-height: 0.8; color: var(--nd-pink); transform: rotate(-4deg); }

/* ---- straighten this page: the accessibility escape hatch ---- */
.nd-page--calm :is(.nd-hero, .nd-rec) * { transform: none !important; writing-mode: horizontal-tb !important; letter-spacing: normal !important; }
.nd-page--calm .nd-ghost, .nd-page--calm .nd-blob, .nd-page--calm .nd-f1 { display: none; }
.nd-page--calm .nd-meta div, .nd-page--calm .nd-note, .nd-page--calm .nd-rules > *, .nd-page--calm .nd-desc, .nd-page--calm .nd-s-carries h2, .nd-page--calm .nd-rules-h, .nd-page--calm .nd-rules-p, .nd-page--calm .nd-mach-h, .nd-page--calm .nd-mach { margin-left: 0 !important; margin-top: 0 !important; }
.nd-page--calm .nd-rules > * { grid-column: 1 / -1 !important; }
.nd-page--calm .nd-diag { margin-left: 0 !important; }
.nd-page--calm .nd-recog h2 { float: none; margin-bottom: 16px; }

@media (max-width: 900px) {
  .nd-a5 { margin-left: 6vw; }
  .nd-desc { margin-left: 0; }
  .nd-f2 { position: static; margin-top: 16px; }
  .nd-f3 { bottom: 40px; left: auto; right: 6%; }
  .nd-f4 { display: none; }
  .nd-argue > *, .nd-behind > *, .nd-rules > * { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .nd-refuse { margin-top: 20px; }
  .nd-meta div { margin-left: 0 !important; }
  .nd-diag { margin-left: 0 !important; }
  .nd-s-carries h2, .nd-rules-h { margin-left: 0; }
  .nd-rules-p { margin-left: 0 !important; }
  .nd-mach-h, .nd-mach { margin-left: 0; }
  .nd-carries td, .nd-carries th { display: block; padding-left: 0 !important; border: 0; }
  .nd-carries tr { display: block; border-bottom: 2px solid var(--nd-ink); padding: 8px 0; }
  .nd-recog h2 { float: none; writing-mode: horizontal-tb; transform: none; margin-bottom: 16px; }
  .nd-body { margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .nd-hero *, .nd-rec * { transition: none !important; animation: none !important; } }