/* ==========================================================================
   MAXIMALISM — one page. Loaded on a/maximalism.html only.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   A striped hero with the name under a double drop, a ticker of marginalia,
   then the record as cream and white cards, tilted and overlapping, on slabs
   of clashing pattern (dots, check, chevron, wave, the flower field, stripe).
   The shell (rail, top bar, community drawer) is never restyled: every rule
   here is scoped to .mx-page main, .mx-hero, .mx-ticker or .mx-rec.

   No rest area on the surface; every line of text sits on a solid card or
   plate, so the density never costs the reading. Three registers at once:
   Abril Fatface display, Playfair Display italic, Space Grotesk text.

   Contrast (text/ground, WCAG AA):
   ink #141014 on cream #FFF4DC 17.3 · white 18.9 · saffron #F4B400 10.2
   · coral #FF6B4A 6.7 · every pastel cell above 11
   saffron on ink 10.2 (chips, ticker) · magenta #D1167A on cream 4.7,
   on white 5.1 (italic heading halves only, all at display size)
   The violet, cobalt, emerald and magenta grounds never carry text.
   ========================================================================== */
@font-face { font-family: "Abril Fatface"; src: url("fonts/abril-fatface.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("fonts/playfair-italic.woff2") format("woff2-variations"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk.woff2") format("woff2-variations"); font-weight: 300 700; font-display: swap; }

.mx-page {
  --mx-mag: #D1167A;
  --mx-em: #0E7C5A;
  --mx-cob: #1E3FAF;
  --mx-saf: #F4B400;
  --mx-cor: #FF6B4A;
  --mx-vio: #5B2A86;
  --mx-cream: #FFF4DC;
  --mx-ink: #141014;
  --mx-white: #FFFFFF;
  --mx-mint: #B7F0D6;
  --mx-pink: #FFD0E6;
  --mx-blue: #C9D4FF;
  --mx-peach: #FFC7B8;
  --mx-sky: #9FD3FF;
  --mx-bleed: var(--s6);
  --mx-display: "Abril Fatface", "Bodoni 72", Didot, Georgia, serif;
  --mx-italic: "Playfair Display", Georgia, serif;
  --mx-text: "Space Grotesk", system-ui, sans-serif;
}
@media (max-width: 60rem) { .mx-page { --mx-bleed: var(--s4); } }

/* The ground: the flower field, full-bleed under every slab. */
.mx-page main {
  background: var(--mx-vio) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22120%22%20height%3D%22120%22%3E%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22%235B2A86%22/%3E%3Cg%20transform%3D%22translate%2830%2030%29%22%3E%3Cellipse%20rx%3D%2210%22%20ry%3D%2222%22%20fill%3D%22%23FF6B4A%22/%3E%3Cellipse%20rx%3D%2210%22%20ry%3D%2222%22%20fill%3D%22%23F4B400%22%20transform%3D%22rotate%2860%29%22/%3E%3Cellipse%20rx%3D%2210%22%20ry%3D%2222%22%20fill%3D%22%23D1167A%22%20transform%3D%22rotate%28120%29%22/%3E%3Ccircle%20r%3D%227%22%20fill%3D%22%23FFF4DC%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2890%2090%29%20rotate%2820%29%22%3E%3Cellipse%20rx%3D%2210%22%20ry%3D%2222%22%20fill%3D%22%23FF6B4A%22/%3E%3Cellipse%20rx%3D%2210%22%20ry%3D%2222%22%20fill%3D%22%23F4B400%22%20transform%3D%22rotate%2860%29%22/%3E%3Cellipse%20rx%3D%2210%22%20ry%3D%2222%22%20fill%3D%22%23D1167A%22%20transform%3D%22rotate%28120%29%22/%3E%3Ccircle%20r%3D%227%22%20fill%3D%22%23FFF4DC%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2890%2020%29%20rotate%2840%29%22%3E%3Cellipse%20rx%3D%2210%22%20ry%3D%2222%22%20fill%3D%22%23FF6B4A%22/%3E%3Cellipse%20rx%3D%2210%22%20ry%3D%2222%22%20fill%3D%22%23F4B400%22%20transform%3D%22rotate%2860%29%22/%3E%3Cellipse%20rx%3D%2210%22%20ry%3D%2222%22%20fill%3D%22%23D1167A%22%20transform%3D%22rotate%28120%29%22/%3E%3Ccircle%20r%3D%227%22%20fill%3D%22%23FFF4DC%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2820%2095%29%20rotate%2870%29%22%3E%3Cellipse%20rx%3D%2210%22%20ry%3D%2222%22%20fill%3D%22%23FF6B4A%22/%3E%3Cellipse%20rx%3D%2210%22%20ry%3D%2222%22%20fill%3D%22%23F4B400%22%20transform%3D%22rotate%2860%29%22/%3E%3Cellipse%20rx%3D%2210%22%20ry%3D%2222%22%20fill%3D%22%23D1167A%22%20transform%3D%22rotate%28120%29%22/%3E%3Ccircle%20r%3D%227%22%20fill%3D%22%23FFF4DC%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 120px;
  color: var(--mx-ink);
  overflow-x: clip;
}
/* The record is present, never arriving: outranks site.css's .js-reveal. */
.mx-page main > section.mx-rec { opacity: 1; transform: none; transition: none; will-change: auto; }

/* ---- shared register: hero and record, nothing outside them ----------- */
.mx-hero, .mx-ticker, .mx-rec { margin-inline: calc(-1 * var(--mx-bleed)); }
.mx-hero, .mx-rec { font: 500 18px/1.55 var(--mx-text); color: var(--mx-ink); font-synthesis: none; }
.mx-rec a { color: var(--mx-ink); text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--mx-mag); text-underline-offset: 3px; }
.mx-rec a:hover { background-color: var(--mx-saf); }
.mx-hero :focus-visible, .mx-rec :focus-visible { outline: 4px solid var(--mx-saf); outline-offset: 2px; box-shadow: 0 0 0 8px var(--mx-ink); }
.mx-rec p { margin: 0 0 12px; }
.mx-rec p:last-child { margin-bottom: 0; }
.mx-rec b { font-weight: 700; }
.mx-it { font-family: var(--mx-italic); font-style: italic; font-weight: 800; }
.mx-small { font-size: 15px; }
.mx-k { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* The tints (cells and tiles). Ink text on every one. */
.mx-t--saf { background-color: var(--mx-saf); }
.mx-t--mint { background-color: var(--mx-mint); }
.mx-t--pink { background-color: var(--mx-pink); }
.mx-t--blue { background-color: var(--mx-blue); }
.mx-t--peach { background-color: var(--mx-peach); }
.mx-t--cream { background-color: var(--mx-cream); }

/* ---- the patterns ------------------------------------------------------- */
.mx-p-stripe { background: repeating-linear-gradient(45deg, var(--mx-mag) 0 18px, var(--mx-saf) 18px 36px, var(--mx-cob) 36px 54px); }
.mx-p-dot { background: radial-gradient(var(--mx-cream) 30%, transparent 32%) 0 0 / 28px 28px, radial-gradient(var(--mx-cream) 30%, transparent 32%) 14px 14px / 28px 28px, var(--mx-em); }
.mx-p-dot2 { background: radial-gradient(var(--mx-saf) 30%, transparent 32%) 0 0 / 22px 22px, radial-gradient(var(--mx-cor) 30%, transparent 32%) 11px 11px / 22px 22px, var(--mx-cob); }
.mx-p-check { background: conic-gradient(var(--mx-ink) 25%, var(--mx-cor) 0 50%, var(--mx-ink) 0 75%, var(--mx-cor) 0) 0 0 / 40px 40px; }
.mx-p-chev { background: linear-gradient(135deg, var(--mx-cob) 25%, transparent 25%) -20px 0 / 40px 40px, linear-gradient(225deg, var(--mx-cob) 25%, transparent 25%) -20px 0 / 40px 40px, linear-gradient(315deg, var(--mx-cob) 25%, transparent 25%) 0 0 / 40px 40px, linear-gradient(45deg, var(--mx-cob) 25%, transparent 25%) 0 0 / 40px 40px, var(--mx-saf); }
.mx-p-wave { background: radial-gradient(circle at 50% 100%, transparent 40%, var(--mx-mag) 41% 55%, transparent 56%) 0 0 / 60px 30px, var(--mx-vio); }
.mx-p-leaf { background: transparent; } /* the ground itself shows through */

/* ---- hero ---------------------------------------------------------------- */
.mx-hero { padding: clamp(30px, 6vw, 70px) clamp(16px, 4vw, 50px) clamp(50px, 8vw, 90px); }
.mx-tag { display: inline-block; max-width: 100%; margin: 0; padding: 10px 16px; border: 4px solid var(--mx-ink); background: var(--mx-cream); font: 700 20px/1.35 var(--mx-text); transform: rotate(-2deg); }
.mx-tag--def { display: table; margin-top: 18px; font-size: clamp(18px, 2.2vw, 24px); transform: rotate(1.5deg); }
.mx-tag--line { display: table; margin-top: 16px; background: var(--mx-white); font-size: clamp(17px, 1.9vw, 21px); font-weight: 500; transform: rotate(-1deg); }
.mx-tag--line .mx-it { font-size: 1.1em; }
.mx-tag__k { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mx-h1 {
  margin: 18px 0 0;
  font: 400 clamp(46px, 10.5vw, 180px)/.9 var(--mx-display);
  color: var(--mx-cream);
  -webkit-text-stroke: 3px var(--mx-ink);
  paint-order: stroke fill;
  text-shadow: 8px 8px 0 var(--mx-mag), 16px 16px 0 var(--mx-ink);
  overflow-wrap: break-word;
}
.mx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.mx-chips li { padding: 6px 14px; border-radius: 999px; background: var(--mx-ink); color: var(--mx-saf); font: 700 15px/1.4 var(--mx-text); }
.mx-chips li:nth-child(4n+2) { background: var(--mx-saf); color: var(--mx-ink); }
.mx-chips li:nth-child(4n+3) { background: var(--mx-cream); color: var(--mx-ink); }
.mx-chips li:nth-child(4n+4) { background: var(--mx-cor); color: var(--mx-ink); }

/* The ticker: marginalia, aria-hidden; still under reduced motion. */
.mx-ticker { overflow: hidden; padding: 10px 0; background: var(--mx-ink); color: var(--mx-saf); font: italic 800 clamp(18px, 2.4vw, 26px)/1.3 var(--mx-italic); white-space: nowrap; }
.mx-ticker span { display: inline-block; padding-left: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .mx-ticker span { animation: mx-tk 40s linear infinite; }
  @keyframes mx-tk { to { transform: translateX(-50%); } }
}

/* ---- the slabs and cards --------------------------------------------------- */
.mx-rec { margin-block: 0; }
.mx-slab { position: relative; padding: clamp(28px, 5vw, 60px) clamp(16px, 4vw, 50px); }
.mx-ov { margin-top: -40px; }
.mx-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.mx-card { position: relative; min-width: 0; padding: clamp(18px, 3vw, 32px); border: 6px solid var(--mx-ink); background: var(--mx-cream); box-shadow: 12px 12px 0 var(--mx-ink); }
.mx-card--w { background: var(--mx-white); }
/* Tilts and overlaps: each later card sits over the earlier one's padding,
   never over its text (the overlap is under 32px, the padding at least 18px
   plus the 6px border). */
.mx-c--arg { grid-column: 1 / span 7; transform: rotate(-1deg); }
.mx-c--paid { grid-column: 8 / -1; margin: 120px 0 0 -18px; transform: rotate(2deg); }
.mx-c--rec { grid-column: 2 / span 10; }
.mx-c--line { grid-column: 1 / span 6; transform: rotate(1.5deg); }
.mx-c--conf { grid-column: 7 / -1; margin: 90px 0 0 -22px; transform: rotate(-2deg); }
.mx-c--meta { grid-column: 1 / span 7; }
.mx-c--rules { grid-column: 8 / -1; margin: 60px 0 0 -20px; }
.mx-c--solo { grid-column: 1 / -1 !important; margin: 0 !important; }

.mx-h2 { margin: 0 0 14px; font: 400 clamp(36px, 5.6vw, 70px)/.95 var(--mx-display); color: var(--mx-ink); overflow-wrap: break-word; }
.mx-h2 .mx-it { color: var(--mx-mag); }
.mx-h3 { margin: 22px 0 10px; font: 400 28px/1.1 var(--mx-display); }
.mx-lead { font: 400 clamp(24px, 3vw, 34px)/1.2 var(--mx-display); }
.mx-refuse { font-size: 20px; }
.mx-refuse b { color: var(--mx-mag); }
.mx-diag { padding: 10px 12px; border: 4px solid var(--mx-ink); background: var(--mx-saf); font-weight: 700; }

/* what it pays: the costs, struck through */
.mx-paid { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 14px; padding: 0; list-style: none; }
.mx-paid li { padding: 6px 14px; border: 4px solid var(--mx-ink); background: var(--mx-saf); font: 400 clamp(20px, 2.6vw, 30px)/1.25 var(--mx-display); text-decoration: line-through; text-decoration-thickness: 4px; }
.mx-paid li:nth-child(3n+2) { background: var(--mx-cor); }
.mx-paid li:nth-child(3n+3) { background: var(--mx-sky); }

/* abundance against noise */
.mx-demo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 16px; }
.mx-demo figure { margin: 0; min-width: 0; }
.mx-field { position: relative; height: 470px; border: 5px solid var(--mx-ink); overflow: hidden; }
.mx-l { position: absolute; max-width: 58%; padding: 6px 10px; border: 3px solid var(--mx-ink); background: var(--mx-cream); color: var(--mx-ink); font: 700 15px/1.3 var(--mx-text); transform: rotate(var(--mx-r, 0deg)); }
.mx-field--noise .mx-l { color: transparent; background: repeating-linear-gradient(90deg, var(--mx-ink) 0 3px, transparent 3px 7px) center / 100% 6px no-repeat, var(--mx-cream); }
.mx-demo figcaption { margin-top: 10px; font-size: 15px; }

/* often confused with */
.mx-conf, .mx-rules, .mx-dims { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mx-rec .mx-conf a, .mx-conf div { display: block; min-height: 44px; padding: 10px 14px; border: 4px solid var(--mx-ink); background: var(--mx-cream); text-decoration: none; }
.mx-conf a b { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--mx-mag); text-underline-offset: 3px; }
.mx-conf .mx-k { display: inline; margin-left: 6px; }
.mx-conf__t { display: block; }

/* the record */
.mx-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.mx-meta div { min-width: 0; padding: 10px; border: 4px solid var(--mx-ink); }
.mx-meta .mx-meta__wide { grid-column: 1 / -1; }
.mx-meta dt { font: 700 13px/1.4 var(--mx-text); letter-spacing: .12em; text-transform: uppercase; }
.mx-meta dd { margin: 0; overflow-wrap: break-word; }
.mx-tblw { max-width: 100%; overflow-x: auto; margin: 0 0 14px; border: 4px solid var(--mx-ink); background: var(--mx-white); }
.mx-res { width: 100%; border-collapse: collapse; font-size: 16px; }
.mx-res th, .mx-res td { padding: 8px 12px; text-align: left; vertical-align: top; }
.mx-res thead th { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.mx-res tbody tr > * { border-top: 3px solid var(--mx-ink); }
.mx-yn { display: inline-block; padding: 0 8px; border: 2px solid var(--mx-ink); font-weight: 700; }

/* rules */
.mx-rule { padding: 14px 16px; border: 5px solid var(--mx-ink); background: var(--mx-white); }
.mx-rule > b { display: block; font: 400 26px/1.1 var(--mx-display); }
.mx-rule .mx-k { margin: 4px 0 6px; }
.mx-rule p { margin: 0 !important; }

/* what carries the look */
.mx-dims li { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 8px 18px; align-items: start; padding: 10px 14px; border: 4px solid var(--mx-ink); background: var(--mx-cream); }
.mx-dimv p { margin: 0 !important; }
.mx-dimv > * + * { margin-top: 8px !important; }
.mx-none { font-size: 15px; }
.mx-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-rec a.mx-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 3px solid var(--mx-ink); border-radius: 999px; background-color: var(--mx-pink); font-weight: 700; text-decoration: none; }
.mx-rec a.mx-pill--dim { background-color: var(--mx-white); }
.mx-rec a.mx-pill:hover { background-color: var(--mx-saf); }
.mx-k--carry { margin-top: 6px; }
.mx-pal { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-pal span { display: grid; gap: 4px; width: 84px; font-size: 12px; font-weight: 700; }
.mx-pal i { display: block; height: 64px; border: 3px solid var(--mx-ink); }

/* use it */
.mx-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mx-rec .mx-use a { display: block; min-height: 44px; padding: 18px; border: 5px solid var(--mx-ink); font-size: 17px; text-decoration: none; }
.mx-use b { display: block; font: 400 30px/1.15 var(--mx-display); }
.mx-rec .mx-use a:hover { box-shadow: 6px 6px 0 var(--mx-ink); }
@media (prefers-reduced-motion: no-preference) {
  .mx-rec .mx-use a { transition: transform .15s; }
  .mx-rec .mx-use a:hover { transform: rotate(-1deg); }
}
.mx-more { margin: 16px 0 0 !important; }
.mx-more a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }

/* ---- responsive: one column, the tilts and overlaps come off ---------- */
@media (max-width: 820px) {
  .mx-grid > * { grid-column: 1 / -1 !important; margin: 0 !important; transform: none !important; }
  .mx-grid > * + * { margin-top: 28px !important; }
  .mx-demo, .mx-meta, .mx-use { grid-template-columns: minmax(0, 1fr); }
  .mx-dims li { grid-template-columns: minmax(0, 1fr); }
  /* The field stacks: the layers keep their tilt and brush, never cover. */
  .mx-field { height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 10px; }
  .mx-l { position: relative; left: auto !important; top: auto !important; max-width: 88%; }
  .mx-l:nth-child(even) { align-self: flex-end; }
}
@media (max-width: 480px) {
  .mx-hero, .mx-rec { font-size: 17px; }
  .mx-card { border-width: 5px; box-shadow: 7px 7px 0 var(--mx-ink); }
  .mx-slab { padding-right: 23px; }
  .mx-h1 { -webkit-text-stroke-width: 2px; text-shadow: 5px 5px 0 var(--mx-mag), 10px 10px 0 var(--mx-ink); }
  .mx-tag { font-size: 17px; }
}