/* ==========================================================================
   MEMPHIS — one page. Loaded on a/memphis.html only.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   A field of shapes that share nothing around a name set as tiles that
   disagree; then the record as furniture on a terrazzo floor, each object
   with its own corner, cap, legs and offset. The shell (rail, top bar,
   community drawer) is never restyled: every rule here is scoped to
   .mp-page main, .mp-hero or .mp-rec.

   The palette tokens come first so the record's "as built" row reads them
   in this order. Mint, coral and lemon are the catalogue line's words; no
   fixed palette is documented (kcc:color-3); the exact values are ours.
   ========================================================================== */
.mp-page {
  --mp-cream: #FDF9F0;
  --mp-ink: #191512;
  --mp-mint: #A8E6CE;
  --mp-coral: #FF7B6B;
  --mp-lemon: #FFD94A;
  --mp-blue: #2456E6;
  --mp-red: #E33F2E;
  --mp-paper: #FFF7EA;
  --mp-white: #FFFFFF;
  --mp-display: "Archivo Black MP", "Arial Black", sans-serif;
  --mp-body: "Archivo MP", "Helvetica Neue", Arial, sans-serif;
}
/* Contrast (text/ground, WCAG AA):
   ink on cream 17.6 · paper 17.4 · mint 12.8 · lemon 13.2 · coral 7.2
   paper on blue 5.6 (display tile only) · lemon on ink 13.2 (display tile)
   Yellow, cyan-mint and coral are NEVER text colours on a light ground:
   they are fills and shapes. The red is a wavy underline and a tile fill,
   never text. */

@font-face { font-family: "Archivo MP"; src: url("fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo Black MP"; src: url("fonts/archivo-black.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* The floor: a laminate-style speckle on cream, a 220px tile. */
.mp-page main {
  background: var(--mp-cream) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22220%22%3E%3Cpath%20d%3D%22M69%20100%20l8%201%20l0%204%20l-4%20-1Z%22%20fill%3D%22%23A8E6CE%22/%3E%3Cpath%20d%3D%22M138%20181%20l7%203%20l-1%206%20l-4%200Z%22%20fill%3D%22%23191512%22/%3E%3Cpath%20d%3D%22M107%2094%20l7%20-3%20l-1%205%20l-5%201Z%22%20fill%3D%22%23191512%22/%3E%3Cpath%20d%3D%22M93%20136%20l4%202%20l3%203%20l-6%20-1Z%22%20fill%3D%22%23A8E6CE%22/%3E%3Cpath%20d%3D%22M6%20140%20l9%20-2%20l-3%204%20l-3%20-1Z%22%20fill%3D%22%23FF7B6B%22/%3E%3Cpath%20d%3D%22M194%2098%20l9%203%20l-2%208%20l-8%201Z%22%20fill%3D%22%232456E6%22/%3E%3Cpath%20d%3D%22M56%20158%20l9%203%20l-3%208%20l-3%201Z%22%20fill%3D%22%23FF7B6B%22/%3E%3Cpath%20d%3D%22M61%2043%20l5%20-1%20l2%205%20l-8%200Z%22%20fill%3D%22%23FF7B6B%22/%3E%3Cpath%20d%3D%22M135%20144%20l4%20-1%20l0%206%20l-3%201Z%22%20fill%3D%22%23A8E6CE%22/%3E%3Cpath%20d%3D%22M3%2037%20l3%203%20l0%206%20l-5%202Z%22%20fill%3D%22%23A8E6CE%22/%3E%3Cpath%20d%3D%22M33%2040%20l9%202%20l3%204%20l-4%200Z%22%20fill%3D%22%232456E6%22/%3E%3Cpath%20d%3D%22M90%20151%20l7%202%20l3%206%20l-7%202Z%22%20fill%3D%22%23FF7B6B%22/%3E%3Cpath%20d%3D%22M44%20161%20l3%203%20l-1%203%20l-3%202Z%22%20fill%3D%22%232456E6%22/%3E%3Cpath%20d%3D%22M66%2020%20l7%20-3%20l0%203%20l-6%201Z%22%20fill%3D%22%23FF7B6B%22/%3E%3Cpath%20d%3D%22M81%2025%20l4%20-1%20l-1%205%20l-8%201Z%22%20fill%3D%22%23FFD94A%22/%3E%3Cpath%20d%3D%22M168%204%20l4%20-2%20l-1%208%20l-6%20-1Z%22%20fill%3D%22%23E33F2E%22/%3E%3Cpath%20d%3D%22M38%20135%20l6%20-3%20l2%208%20l-7%201Z%22%20fill%3D%22%23FFD94A%22/%3E%3Cpath%20d%3D%22M74%2076%20l5%20-1%20l2%204%20l-8%20-2Z%22%20fill%3D%22%23191512%22/%3E%3Cpath%20d%3D%22M148%206%20l8%203%20l1%205%20l-4%20-1Z%22%20fill%3D%22%23FF7B6B%22/%3E%3Cpath%20d%3D%22M80%20127%20l9%201%20l2%208%20l-3%20-2Z%22%20fill%3D%22%23A8E6CE%22/%3E%3Cpath%20d%3D%22M189%2026%20l5%201%20l3%203%20l-8%20-2Z%22%20fill%3D%22%23E33F2E%22/%3E%3Cpath%20d%3D%22M127%20139%20l9%203%20l1%203%20l-7%200Z%22%20fill%3D%22%23E33F2E%22/%3E%3Cpath%20d%3D%22M189%2013%20l9%202%20l-2%208%20l-6%200Z%22%20fill%3D%22%23191512%22/%3E%3Cpath%20d%3D%22M115%2051%20l3%20-2%20l1%205%20l-7%202Z%22%20fill%3D%22%23E33F2E%22/%3E%3Cpath%20d%3D%22M123%20199%20l5%203%20l-3%204%20l-5%202Z%22%20fill%3D%22%23191512%22/%3E%3Cpath%20d%3D%22M176%20172%20l8%20-2%20l-2%205%20l-3%201Z%22%20fill%3D%22%232456E6%22/%3E%3Cpath%20d%3D%22M10%2098%20l5%200%20l3%207%20l-6%202Z%22%20fill%3D%22%23FFD94A%22/%3E%3Cpath%20d%3D%22M54%2031%20l4%20-1%20l-3%205%20l-5%200Z%22%20fill%3D%22%232456E6%22/%3E%3Cpath%20d%3D%22M168%2027%20l3%20-2%20l-2%204%20l-8%201Z%22%20fill%3D%22%23FFD94A%22/%3E%3Cpath%20d%3D%22M9%20154%20l6%20-2%20l2%205%20l-7%20-2Z%22%20fill%3D%22%23FFD94A%22/%3E%3Cpath%20d%3D%22M123%20178%20l3%20-3%20l-1%206%20l-3%201Z%22%20fill%3D%22%23FFD94A%22/%3E%3Cpath%20d%3D%22M20%2087%20l8%200%20l-3%207%20l-5%20-2Z%22%20fill%3D%22%232456E6%22/%3E%3Cpath%20d%3D%22M199%20117%20l3%201%20l-3%208%20l-7%202Z%22%20fill%3D%22%23191512%22/%3E%3Cpath%20d%3D%22M32%20123%20l9%202%20l0%204%20l-8%201Z%22%20fill%3D%22%23E33F2E%22/%3E%3Cpath%20d%3D%22M40%2055%20l6%20-3%20l-3%206%20l-5%201Z%22%20fill%3D%22%232456E6%22/%3E%3Cpath%20d%3D%22M165%2037%20l4%20-2%20l1%207%20l-6%200Z%22%20fill%3D%22%23A8E6CE%22/%3E%3Cpath%20d%3D%22M18%2038%20l7%20-3%20l-1%204%20l-5%202Z%22%20fill%3D%22%23FFD94A%22/%3E%3Cpath%20d%3D%22M101%20194%20l7%201%20l3%205%20l-6%201Z%22%20fill%3D%22%23E33F2E%22/%3E%3Cpath%20d%3D%22M86%2076%20l9%20-2%20l-1%203%20l-8%202Z%22%20fill%3D%22%23E33F2E%22/%3E%3Cpath%20d%3D%22M202%20210%20l6%201%20l1%208%20l-5%20-2Z%22%20fill%3D%22%23FFD94A%22/%3E%3Cpath%20d%3D%22M136%20204%20l8%20-2%20l3%208%20l-3%201Z%22%20fill%3D%22%23E33F2E%22/%3E%3C/svg%3E") 0 0 / 220px 220px;
  color: var(--mp-ink);
  overflow-x: clip;
}
/* The record is present, never arriving: the shell's scroll reveal would
   fade the whole floor in (outranks site.css's .js-reveal rule). */
.mp-page main > section.mp-rec { opacity: 1; transform: none; transition: none; will-change: auto; }

/* ---- shared register: both roots, nothing outside them ---------------- */
.mp-hero, .mp-rec { font: 400 18px/1.55 var(--mp-body); color: var(--mp-ink); font-synthesis: style; }
.mp-rec b, .mp-hero b { font-weight: 800; }
.mp-rec a { color: var(--mp-ink); text-decoration: underline wavy var(--mp-red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mp-rec a:hover { background: var(--mp-lemon); }
.mp-hero :focus-visible, .mp-rec :focus-visible { outline: 4px solid var(--mp-blue); outline-offset: 3px; }

/* ---- patterns: decoration only, never under text ---------------------- */
.mp-zig {
  background:
    linear-gradient(135deg, var(--mp-blue) 25%, transparent 25%) -10px 0 / 20px 20px,
    linear-gradient(225deg, var(--mp-blue) 25%, transparent 25%) -10px 0 / 20px 20px,
    linear-gradient(315deg, var(--mp-blue) 25%, transparent 25%) 0 0 / 20px 20px,
    linear-gradient(45deg, var(--mp-blue) 25%, transparent 25%) 0 0 / 20px 20px,
    var(--mp-lemon);
}
.mp-chq { background: conic-gradient(var(--mp-ink) 25%, var(--mp-paper) 0 50%, var(--mp-ink) 0 75%, var(--mp-paper) 0) 0 0 / 24px 24px; }
.mp-dots { background: radial-gradient(var(--mp-ink) 22%, transparent 24%) 0 0 / 16px 16px, var(--mp-coral); }
.mp-squig { background: var(--mp-lemon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Cpath d='M0 8 Q10 0 20 8 T40 8' fill='none' stroke='%23191512' stroke-width='3'/%3E%3C/svg%3E") 0 0 / 40px 16px; }

/* ---- the hero: shapes that share nothing, a name that disagrees -------- */
.mp-hero { position: relative; min-height: min(88vh, 780px); padding: 40px 16px; display: grid; place-items: center; }
.mp-sh { position: absolute; z-index: 0; pointer-events: none; }
.mp-sh--squig { left: 4%; top: 8%; width: 160px; fill: none; stroke: var(--mp-blue); stroke-width: 10; stroke-linecap: round; }
.mp-sh--disc { right: 6%; top: 12%; width: 120px; stroke: var(--mp-ink); stroke-width: 4; }
.mp-sh--disc circle { fill: var(--mp-lemon); }
.mp-sh--disc path { fill: var(--mp-coral); }
.mp-sh--chq { left: 10%; bottom: 14%; width: 130px; height: 90px; border: 4px solid var(--mp-ink); transform: rotate(-12deg); }
.mp-sh--zag { right: 12%; bottom: 10%; width: 170px; fill: none; stroke: var(--mp-red); stroke-width: 9; stroke-linejoin: round; }
.mp-sh--tri { left: 44%; top: 6%; width: 90px; fill: var(--mp-mint); stroke: var(--mp-ink); stroke-width: 4; }
.mp-sh--pill { right: 34%; bottom: 6%; width: 70px; height: 120px; border: 4px solid var(--mp-ink); border-radius: 35px; }

.mp-hero__c { position: relative; z-index: 2; }
.mp-h1 { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.mp-tile {
  display: inline-grid; place-items: center;
  width: clamp(56px, 11vw, 130px); height: clamp(70px, 13vw, 160px);
  font: 400 clamp(48px, 9vw, 110px)/1 var(--mp-display);
  border: 4px solid var(--mp-ink);
}
.mp-tile--1 { background: var(--mp-coral); color: var(--mp-ink); transform: rotate(-6deg); }
.mp-tile--2 { background: var(--mp-mint); color: var(--mp-ink); border-radius: 50%; transform: rotate(5deg); }
.mp-tile--3 { background: var(--mp-lemon); color: var(--mp-ink); border-radius: 0 40px 0 0; transform: rotate(1deg); }
.mp-tile--4 { background: var(--mp-blue); color: var(--mp-paper); transform: rotate(1deg); }
.mp-tile--5 { background: var(--mp-red); color: var(--mp-paper); border-radius: 50% 50% 0 0; transform: rotate(-2deg); }
.mp-tile--6 { background: var(--mp-ink); color: var(--mp-lemon); transform: rotate(-6deg); }
.mp-tile--7 { background: var(--mp-mint); color: var(--mp-ink); border-radius: 0 0 50% 50%; }
.mp-tag { margin: 24px auto 0; width: fit-content; max-width: 36ch; background: var(--mp-paper); border: 4px solid var(--mp-ink); padding: 10px 16px; font-weight: 800; text-align: center; }

/* ---- the floor: objects on a 12-column grid that do not line up -------- */
.mp-floor { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 24px; max-width: 1200px; margin: 0 auto; padding: 40px clamp(14px, 4vw, 40px) 80px; }
.mp-o { position: relative; border: 4px solid var(--mp-ink); padding: 26px 22px 22px; background: var(--mp-paper); min-width: 0; }
.mp-o p { margin: 0 0 10px; }
.mp-o > :last-child, .mp-inset > :last-child { margin-bottom: 0; }
.mp-h2 { margin: 0 0 10px; font: 400 28px/1.1 var(--mp-display); }
.mp-h3 { margin: 18px 0 8px; font: 400 20px/1.2 var(--mp-display); }
.mp-small { font-size: 15px; }
.mp-cap { position: absolute; left: -4px; right: -4px; top: -26px; height: 22px; border: 4px solid var(--mp-ink); border-bottom: 0; }
.mp-leg { position: absolute; bottom: -40px; width: 24px; height: 40px; border: 4px solid var(--mp-ink); border-top: 0; }
.mp-leg--l { left: 20%; }
.mp-leg--r { right: 20%; }

.mp-o1 { grid-column: 1 / span 5; border-radius: 0 80px 0 0; }
.mp-o2 { grid-column: 7 / span 6; margin-top: 60px; border-radius: 50% 50% 12px 12px / 80px 80px 12px 12px; padding-top: 40px; }
.mp-o3 { grid-column: 2 / span 6; transform: rotate(-1deg); align-self: start; }
.mp-o4 { grid-column: 8 / span 5; margin-top: -24px; border-radius: 0 0 90px 0; padding: 22px; }
.mp-o5 { grid-column: 1 / span 7; }
.mp-o6 { grid-column: 8 / span 5; margin-top: 70px; border-radius: 40px 0; }
.mp-o7 { grid-column: 3 / span 8; }
.mp-o8 { grid-column: 1 / span 6; border-radius: 50% 0 0 0 / 60px 0 0 0; padding-top: 34px; }
.mp-o9 { grid-column: 7 / span 6; margin-top: 50px; }

.mp-g--mint { background: var(--mp-mint); }
.mp-g--lemon { background: var(--mp-lemon); }
.mp-g--paper { background: var(--mp-paper); }
.mp-g--white { background: var(--mp-white); }
/* The chequered object keeps its text on a solid panel. */
.mp-g--chq { background: conic-gradient(var(--mp-ink) 25%, var(--mp-paper) 0 50%, var(--mp-ink) 0 75%, var(--mp-paper) 0) 0 0 / 24px 24px; }
.mp-inset { background: var(--mp-paper); border: 3px solid var(--mp-ink); padding: 14px; }

/* 1 · the facts */
.mp-meta { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mp-meta div { border: 3px solid var(--mp-ink); padding: 6px 10px; background: var(--mp-cream); }
.mp-meta dt { font: 800 12px/1.4 var(--mp-body); letter-spacing: .12em; text-transform: uppercase; }
.mp-meta dd { margin: 0; }

/* 2 · the argument */
.mp-claim { font: 400 22px/1.25 var(--mp-display); }
.mp-refuse { background: var(--mp-paper); border: 3px solid var(--mp-ink); padding: 8px; }

/* 3 · recognition: the diagnostic sentence on a coral slab */
.mp-diag { background: var(--mp-coral); border: 3px solid var(--mp-ink); padding: 8px; font-weight: 800; }

/* 4 · rules */
.mp-rules { list-style: none; margin: 0; padding: 0; }
.mp-rules li { margin: 0 0 12px; }
.mp-rules li:last-child { margin-bottom: 0; }
.mp-ev { display: inline-block; font-size: 13px; font-weight: 800; border: 2px solid var(--mp-ink); padding: 0 6px; }

/* 5 · what carries the look */
.mp-tw { overflow-x: auto; }
.mp-ct { width: 100%; border-collapse: collapse; font-size: 16px; }
.mp-ct th, .mp-ct td { padding: 6px; border-bottom: 3px solid var(--mp-ink); text-align: left; vertical-align: top; }
.mp-ct th { width: 34%; font-weight: 800; }
.mp-ct td p { margin: 0 0 6px; }
.mp-ct td > :last-child { margin-bottom: 0; }
.mp-rec .mp-ct th a, .mp-rec .mp-tags a, .mp-rec .mp-links a { display: inline-flex; align-items: center; min-height: 44px; }
.mp-ct small { display: block; width: fit-content; margin-top: 2px; background: var(--mp-coral); color: var(--mp-ink); border: 2px solid var(--mp-ink); padding: 0 6px; font: 800 12px/1.5 var(--mp-body); }
.mp-none { color: var(--mp-ink); }
.mp-tags { display: flex; flex-wrap: wrap; gap: 0 14px; }
.mp-swatch { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.mp-swatch span { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 800 11px/1.2 var(--mp-body); }
.mp-sw__c { display: block; width: 48px; height: 48px; border: 3px solid var(--mp-ink); }
.mp-sw__c--ci { border-radius: 50%; }
.mp-sw__c--ar { border-radius: 50% 50% 0 0; }

/* 6 · what stands behind it */
.mp-res { width: 100%; border-collapse: collapse; font-size: 16px; margin: 10px 0; }
.mp-res th, .mp-res td { padding: 6px; border-bottom: 3px solid var(--mp-ink); text-align: left; }
.mp-firm { font-weight: 800; }

/* 7 · neighbours: the row is the link */
.mp-nbs { list-style: none; margin: 0; padding: 0; }
.mp-nbs li + li { border-top: 3px solid var(--mp-ink); }
.mp-rec .mp-nb { display: block; padding: 10px 0; text-decoration: none; color: var(--mp-ink); }
.mp-nb__n { font: 400 20px/1.2 var(--mp-display); }
.mp-rec a.mp-nb .mp-nb__n { text-decoration: underline wavy var(--mp-red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mp-nb__k { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border: 2px solid var(--mp-ink); padding: 0 6px; margin: 0 4px; background: var(--mp-white); }
.mp-nb__t { display: block; margin-top: 4px; }

/* 8 · use it: two slabs */
.mp-use { display: flex; flex-wrap: wrap; gap: 10px; }
.mp-rec .mp-use a { display: block; flex: 1 1 220px; padding: 12px 16px; border: 4px solid var(--mp-ink); color: var(--mp-ink); text-decoration: none; }
.mp-rec .mp-use__a { background: var(--mp-coral); }
.mp-rec .mp-use__b { background: var(--mp-mint); }
.mp-rec .mp-use__c { background: var(--mp-lemon); }
.mp-rec .mp-use a:hover { background: var(--mp-lemon); }
.mp-use b { display: block; font: 400 20px/1.2 var(--mp-display); margin-bottom: 4px; }

/* 9 · for machines */
.mp-links { display: flex; flex-wrap: wrap; gap: 0 18px; }

/* ---- narrower: the objects stack, straighten and keep their corners ---- */
@media (max-width: 820px) {
  .mp-floor > * { grid-column: 1 / -1 !important; margin-top: 0 !important; transform: none !important; }
  .mp-meta { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mp-sh--squig { width: 100px; top: 4%; }
  .mp-sh--disc { width: 80px; top: 5%; }
  .mp-sh--chq { width: 90px; height: 64px; bottom: 8%; }
  .mp-sh--zag { width: 110px; bottom: 4%; }
  .mp-sh--tri { width: 60px; top: 3%; }
  .mp-sh--pill { width: 48px; height: 84px; right: 40%; bottom: 3%; }
  .mp-h2 { font-size: 24px; }
  .mp-o { padding: 24px 16px 18px; }
  .mp-o2 { border-radius: 50% 50% 12px 12px / 48px 48px 12px 12px; padding-top: 34px; }
}