/* ==========================================================================
   NEO-BRUTALISM — one page. Loaded on a/neo-brutalism.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   The friendly product register: thick black outlines, HARD offset shadows
   (blur 0, always — the diagnostic), candy fills on cream (the room's
   ground, not a rule), square corners, chunky pressable
   buttons. The shell (rail, top bar, community drawer) is never restyled:
   every rule here is scoped to .nb-hero or .nb-rec.

   RANK IS OFFSET. Each outlined card sets --o, its shadow offset; the
   masthead carries the biggest (16px), the record steps down card by card
   (10 → 5), the meta chips and the closing line carry the smallest. Every
   pressable thing presses into its own shadow on :active: it moves by --o
   and the shadow collapses to zero.

   The blur specimen is the ONLY place a blurred shadow appears on this
   page, and only in its two failure states.

   Palette (the record's "as built" swatches read it in this order):
   #FFF4E0 cream · #000000 ink · #FF90E8 pink · #FFC900 yellow
   #7BF1A8 mint · #90A8ED blue · #FF7A45 orange · #FFFFFF white
   All text is black: ink on pink 10.4, yellow 13.6, mint 15.0, blue 9.0,
   orange 8.1, cream 19.3. No text is ever set in a candy colour.

   Not Web Brutalism: nothing here is left at browser default. Candy fills,
   hard shadows and designed buttons are this register's; raw Times,
   default blue links and hairlines belong to the neighbour's page.
   ========================================================================== */
@font-face {
  font-family: "ArchivoBlackNB";
  src: url("fonts/archivo-black.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "SpaceGroteskNB";
  src: url("fonts/space-grotesk.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
}

.nb-page {
  --nb-cream: #FFF4E0;
  --nb-k: #000000;
  --nb-pink: #FF90E8;
  --nb-yel: #FFC900;
  --nb-mint: #7BF1A8;
  --nb-blue: #90A8ED;
  --nb-or: #FF7A45;
  --nb-w: #FFFFFF;
  --nb-display: "ArchivoBlackNB", "Arial Black", sans-serif;
  --nb-body: "SpaceGroteskNB", "Helvetica Neue", Arial, sans-serif;
  /* the offset multiplier: full on desktop, eased down on a phone */
  --nb-m: 1;
}
.nb-page main { background: var(--nb-cream); color: var(--nb-k); }
/* The record is present, never arriving: no scroll reveal fades it (outranks site.css .js-reveal). */
.nb-page main > section.nb-rec { opacity: 1; transform: none; transition: none; will-change: auto; }

/* ---- shared register: both roots, nothing outside them ---------------- */
.nb-hero, .nb-rec {
  font: 500 18px/1.55 var(--nb-body);
  color: var(--nb-k);
  font-synthesis: style;
  overflow-wrap: break-word;
}
.nb-hero *, .nb-rec * { box-sizing: border-box; }
.nb-hero a, .nb-rec a { color: var(--nb-k); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.nb-hero a:not(.nb-b):hover, .nb-rec a:not(.nb-b):hover { background: var(--nb-yel); }
.nb-trap a:not(.nb-b):hover, .nb-f-yel a:not(.nb-b):hover { background: var(--nb-w); }
.nb-hero :focus-visible, .nb-rec :focus-visible { outline: 3px solid var(--nb-k); outline-offset: 4px; }

/* the outlined card: thick black line, hard shadow at its own offset */
.nb-b {
  --o: 6px;
  border: 3px solid var(--nb-k);
  /* Square corners: the codified rule (nb-outline, idr:codified). */
  border-radius: 0;
  background: var(--nb-w);
  box-shadow: calc(var(--o) * var(--nb-m)) calc(var(--o) * var(--nb-m)) 0 var(--nb-k);
}

/* ---- fills ------------------------------------------------------------- */
.nb-f-white { background: var(--nb-w); }
.nb-f-pink { background: var(--nb-pink); }
.nb-f-yel { background: var(--nb-yel); }
.nb-f-mint { background: var(--nb-mint); }
.nb-f-blue { background: var(--nb-blue); }
.nb-f-or { background: var(--nb-or); }

/* ---- rank ------------------------------------------------------------- */
.nb-o10 { --o: 10px; }
.nb-o9 { --o: 9px; }
.nb-o8 { --o: 8px; }
.nb-o7 { --o: 7px; }
.nb-o6 { --o: 6px; }
.nb-o5 { --o: 5px; }

/* ---- type -------------------------------------------------------------- */
.nb-h1 { margin: 8px 0 0; font: 400 clamp(48px, 9vw, 112px)/0.92 var(--nb-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.nb-h2 { margin: 0 0 14px; font: 400 clamp(28px, 4vw, 44px)/1.05 var(--nb-display); }
.nb-h3 { margin: 26px 0 12px; font: 400 22px/1.15 var(--nb-display); }
.nb-chip {
  --o: 3px;
  display: inline-block;
  margin: 0;
  padding: 4px 12px;
  background: var(--nb-yel);
  font: 700 13px/1.4 var(--nb-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nb-small { font-size: 16px; }
.nb-lead { font-size: 22px; font-weight: 700; line-height: 1.35; }
.nb-k { font: 700 12px/1.4 var(--nb-body); letter-spacing: 0.06em; text-transform: uppercase; }
.nb-rec p, .nb-hero p { margin: 0 0 12px; }
.nb-rec p:last-child, .nb-hero p:last-child { margin-bottom: 0; }

/* ==========================================================================
   HERO
   ========================================================================== */
.nb-hero, .nb-rec { max-width: 1080px; margin: 0 auto; padding: 40px clamp(0px, 3vw, 40px) 0; }
.nb-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.nb-mast { --o: 16px; background: var(--nb-pink); padding: clamp(24px, 5vw, 50px); }
.nb-def { margin: 14px 0 0; font-size: 21px; font-weight: 700; line-height: 1.35; max-width: 40ch; }
.nb-hero .nb-trap { --o: 8px; margin: 22px 0 0; padding: 16px 18px; background: var(--nb-yel); max-width: 60ch; }

.nb-s { padding: clamp(20px, 4vw, 36px); }
.nb-s--press { --o: 12px; }
.nb-s--blur { --o: 11px; background: var(--nb-blue); }

/* buttons that press into their own shadow — the native motion */
.nb-btns { display: flex; flex-wrap: wrap; gap: 22px; margin: 20px 0 4px; }
.nb-pb {
  --o: 6px;
  min-height: 60px;
  padding: 0 28px;
  color: var(--nb-k);
  font: 400 20px/1 var(--nb-display);
  cursor: pointer;
}
.nb-pb--mint { background: var(--nb-mint); }
.nb-pb--blue { background: var(--nb-blue); }
.nb-pb--or { background: var(--nb-or); min-height: 80px; padding: 0 44px; font-size: 28px; }
.nb-pb:active, .nb-press:active {
  transform: translate(calc(var(--o) * var(--nb-m)), calc(var(--o) * var(--nb-m)));
  box-shadow: 0 0 0 var(--nb-k);
}

/* the blur control — radio-driven, the register dissolving */
.nb-fs { border: 0; padding: 0; margin: 0; }
.nb-fs legend { padding: 0; margin-bottom: 10px; font-weight: 700; }
.nb-bi { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.nb-bl {
  --o: 4px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0 8px 12px 0;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
}
/* selected = pressed into its shadow */
.nb-bi:checked + .nb-bl { background: var(--nb-yel); transform: translate(calc(var(--o) * var(--nb-m)), calc(var(--o) * var(--nb-m))); box-shadow: 0 0 0 var(--nb-k); }
.nb-bi:focus-visible + .nb-bl { outline: 3px solid var(--nb-k); outline-offset: 4px; }
.nb-spec {
  max-width: 420px;
  margin: 16px 0 12px;
  padding: 22px;
  background: var(--nb-mint);
  border: 3px solid var(--nb-k);
  border-radius: 0;
  box-shadow: 10px 10px 0 var(--nb-k);
  font-size: 16px;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.nb-spec b { display: block; font: 400 26px/1.2 var(--nb-display); }
/* the two failure states — the only blurred shadows on this page */
.nb-bi--6:checked ~ .nb-spec { box-shadow: 10px 10px 6px var(--nb-k); }
.nb-bi--16:checked ~ .nb-spec { box-shadow: 0 10px 16px rgba(0, 0, 0, 0.25); border: 1px solid rgba(0, 0, 0, 0.14); }

/* ==========================================================================
   RECORD
   ========================================================================== */
.nb-rec { padding-bottom: 80px; }
.nb-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 40px; }

/* the meta strip */
.nb-meta { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.nb-meta > div { --o: 4px; padding: 10px 14px; }
.nb-meta dt { font: 700 12px/1.4 var(--nb-body); letter-spacing: 0.1em; text-transform: uppercase; }
.nb-meta dd { margin: 2px 0 0; }
.nb-meta--wide { grid-template-columns: 1fr; margin: 18px 0; }
.nb-meta--wide dd a { display: inline; }

/* recognition: the diagnostic sentence as its own card */
.nb-dx { --o: 5px; padding: 14px 16px; font-weight: 700; }
.nb-rec .nb-dx { margin: 16px 0 18px; }
.nb-f-yel .nb-chip { margin-top: 6px; text-transform: none; letter-spacing: 0; font-size: 15px; }

/* what carries the look */
.nb-dims { list-style: none; margin: 16px 0 0; padding: 0; }
.nb-dims > li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 8px 22px; padding: 12px 0; border-top: 3px solid var(--nb-k); }
.nb-dims > li:first-child { border-top: 0; }
.nb-dim { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nb-tag { --o: 4px; display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; text-decoration: none; font-weight: 700; }
.nb-rec a.nb-tag { color: var(--nb-k); text-decoration: none; }
.nb-rec a.nb-tag:hover { background: var(--nb-yel); }
.nb-tags { display: flex; flex-wrap: wrap; gap: 12px; }
.nb-dimv { align-self: center; }
.nb-none { font-style: normal; }
.nb-pal { display: flex; flex-wrap: wrap; gap: 14px 12px; }
.nb-pal span { display: flex; flex-direction: column; gap: 6px; font: 700 13px/1.2 var(--nb-body); }
.nb-pal i { --o: 3px; display: block; width: 58px; height: 44px; }

/* rules */
.nb-n { --o: 3px; display: inline-block; padding: 0 10px; background: var(--nb-yel); font-size: 0.7em; vertical-align: 0.12em; }
.nb-rules { display: grid; gap: 16px; }
.nb-rules article { --o: 5px; padding: 14px 16px; }
.nb-rules h3 { display: inline; margin: 0; font: 400 20px/1.2 var(--nb-display); }
.nb-rules .nb-k { --o: 0px; display: inline-block; margin: 0 0 0 8px; padding: 1px 6px; background: var(--nb-yel); border-width: 2px; border-radius: 0; vertical-align: 0.15em; }
.nb-rules p { margin: 8px 0 0; }

/* what stands behind it */
.nb-firm { font-weight: 700; }
.nb-tw { --o: 5px; margin-top: 18px; overflow-x: auto; padding: 6px 14px; }
.nb-rt { width: 100%; border-collapse: collapse; font-size: 16px; }
.nb-rt th, .nb-rt td { padding: 8px 6px; text-align: left; vertical-align: top; border-bottom: 2px solid var(--nb-k); }
.nb-rt tr:last-child th, .nb-rt tr:last-child td { border-bottom: 0; }
.nb-rt thead th { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.nb-yes { padding: 0 8px; background: var(--nb-mint); border: 2px solid var(--nb-k); border-radius: 0; font-weight: 700; }

/* two phases: the codified kit beside the looser trend as first named (2022) */
.nb-hero .nb-src { margin-top: 18px; }
.nb-src .nb-chip { margin-right: 6px; text-transform: none; letter-spacing: 0; }
.nb-ph { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 8px; }
.nb-ph__f { margin: 0; display: grid; gap: 14px; align-content: start; }
.nb-ph__f figcaption { font-size: 16px; }
.nb-ph__f figcaption .nb-chip { margin: 0 0 8px; text-transform: none; letter-spacing: 0; }
.nb-ph__f figcaption b { display: block; margin-bottom: 2px; }
.nb-ph__spec { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px; min-height: 150px; padding: 18px 10px 12px 0; }
.nb-ph__card { --o: 8px; display: grid; place-items: end start; width: min(150px, 44%); height: 104px; padding: 10px; background: var(--nb-mint); font: 400 20px/1 var(--nb-display); }
.nb-ph__btn { --o: 5px; display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; background: var(--nb-yel); font: 400 18px/1 var(--nb-display); }
/* The 2022 trend as its namer described it: desaturated colour, uneven line weight and corner roundness. */
.nb-ph__spec--22 .nb-ph__card { background: #BFD9C9; border: 4px solid var(--nb-k); border-radius: 18px; box-shadow: 7px 7px 0 var(--nb-k); }
.nb-ph__spec--22 .nb-ph__btn { background: #E6D7A3; border: 2px solid var(--nb-k); border-radius: 6px; box-shadow: 4px 4px 0 var(--nb-k); }

/* often confused with */
.nb-conf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.nb-conf a, .nb-conf li > div { --o: 6px; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 18px; text-decoration: none; }
.nb-conf b { font: 400 24px/1.1 var(--nb-display); }
.nb-conf__t { margin-top: 4px; }

/* use it: chunky pressable tiles */
.nb-use-s .nb-h2 { margin-bottom: 18px; }
.nb-use { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 20px; }
.nb-use a { --o: 5px; display: flex; flex-direction: column; gap: 4px; min-height: 44px; padding: 14px 18px; text-decoration: none; font-size: 16px; }
.nb-use b { font: 400 20px/1.15 var(--nb-display); }
.nb-press { transition: none; }
.nb-end { --o: 2px; margin: 28px 0 0; padding: 18px 20px; }

@media (hover: hover) {
  .nb-press:hover { transform: translate(-2px, -2px); box-shadow: calc(var(--o) * var(--nb-m) + 2px) calc(var(--o) * var(--nb-m) + 2px) 0 var(--nb-k); }
  .nb-press:active { transform: translate(calc(var(--o) * var(--nb-m)), calc(var(--o) * var(--nb-m))); box-shadow: 0 0 0 var(--nb-k); }
}

@media (prefers-reduced-motion: reduce) {
  .nb-spec { transition: none; }
  .nb-press:hover { transform: none; box-shadow: calc(var(--o) * var(--nb-m)) calc(var(--o) * var(--nb-m)) 0 var(--nb-k); }
}

@media (max-width: 820px) {
  .nb-dims > li { grid-template-columns: 1fr; }
  .nb-ph { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .nb-page { --nb-m: 0.6; }
  .nb-hero, .nb-rec { font-size: 17px; }
  .nb-hero, .nb-col { gap: 32px; }
  .nb-def { font-size: 19px; }
  .nb-lead { font-size: 20px; }
  .nb-btns { gap: 16px; }
  .nb-pb--or { padding: 0 32px; font-size: 24px; }
  .nb-rt th, .nb-rt td { padding: 6px 4px; font-size: 15px; }
}