/* ==========================================================================
   MID-CENTURY MODERN — one page. Loaded on a/mid-century-modern.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   Paper with its grain; a drawn composition on the right whose inks
   genuinely multiply where they overlap; the name bottom-left. The record
   below is ranked by isolation: narrow columns pulled alternately left and
   right, the empty space kept open, rules on hairlines. Kept apart from
   Googie (dusk sky, neon, tilted script, boomerang panels): here nothing is
   tilted, nothing glows, the ground is cream and the script is one word.
   The shell (rail, top bar, community drawer) is never restyled: every rule
   here is scoped to .mc-hero or .mc-rec.

   Palette (curatorial from material, ours), in the order it builds:
   paper #F3EAD7 · ochre #D19A3A · teal #2E7F7A · mustard #E2B33C
   rust #B5562B · ink #2B2622 · teal-deep #256A66 · rust-deep #9C4520
   Text contrast (WCAG AA) on paper: ink 12.5:1; teal-deep 5.3:1;
   rust-deep 5.3:1; muted #5E5445 6.2:1. Ochre, teal, rust and mustard fail
   as text on paper and are used only as ink shapes and tile grounds. Ink on
   every tile ground 7.6:1 or better.

   Motion: the page holds still. The one moving thing is the limited-
   animation specimen (kcc:w2-motion-2/3): three drawings stepped at eight
   a second, holding its first drawing under reduced motion.
   ========================================================================== */

@font-face {
  font-family: "Josefin MC";
  src: url("fonts/josefin-sans.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Josefin MC";
  src: url("fonts/josefin-sans-italic.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Yellowtail MC";
  src: url("fonts/yellowtail.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

.mc-page {
  --mc-paper: #F3EAD7;
  --mc-ochre: #D19A3A;
  --mc-teal: #2E7F7A;
  --mc-mus: #E2B33C;
  --mc-rust: #B5562B;
  --mc-ink: #2B2622;
  --mc-teal-d: #256A66;
  --mc-rust-d: #9C4520;
  --mc-muted: #5E5445;
  --mc-sage: #9FC9C4;
  --mc-peach: #E8B79D;
  --mc-sand: #EAD9AB;
  --mc-sans: "Josefin MC", "Futura", "Century Gothic", sans-serif;
  --mc-script: "Yellowtail MC", "Brush Script MT", cursive;
  /* Paper grain: a fractal-noise field tinted warm, laid as the ground
     itself (never an overlay, so it never sits over text). */
  --mc-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.mc-page main { background: var(--mc-grain), var(--mc-paper); color: var(--mc-ink); overflow-x: clip; }
/* Present, never arriving: the shell's scroll reveal does not fade the
   record in (outranks site.css's .js-reveal rule). */
.mc-page main > section.mc-rec { opacity: 1; transform: none; transition: none; will-change: auto; }

/* ---- shared register: both roots, nothing outside them ---------------- */
.mc-hero, .mc-rec {
  font: 400 19px/1.65 var(--mc-sans);
  color: var(--mc-ink);
  /* The shell turns synthesis off; bold is a real weight here, italic a real file. */
}
.mc-hero b, .mc-rec b { font-weight: 700; }
.mc-rec a { color: var(--mc-ink); text-decoration-color: var(--mc-rust); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mc-rec a:hover { color: var(--mc-rust-d); }
.mc-hero :focus-visible, .mc-rec :focus-visible { outline: 2px solid var(--mc-rust-d); outline-offset: 4px; }
.mc-rec p { margin: 0 0 16px; }

/* inks: flat fields multiplied where they overlap — overprint */
.mc-ink > * { mix-blend-mode: multiply; }
.mc-f-ochre { fill: var(--mc-ochre); }
.mc-f-teal { fill: var(--mc-teal); }
.mc-f-rust { fill: var(--mc-rust); }
.mc-f-mus { fill: var(--mc-mus); }
.mc-line { fill: none; stroke: var(--mc-ink); stroke-width: 3; stroke-linecap: round; }

/* ---- hero: the composition on the right, the name bottom-left ---------- */
.mc-hero {
  position: relative;
  min-height: min(88vh, 820px);
  display: grid;
  /* The inks keep the upper right, the name the lower left, on separate
     rows so the drawing never sits over it; the upper left stays empty. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-content: end;
  gap: 0 24px;
  padding: 40px clamp(20px, 6vw, 96px) clamp(48px, 10vh, 120px);
}
.mc-art {
  grid-column: 2; grid-row: 1;
  align-self: start;
  width: 100%; max-width: 520px; height: auto;
  justify-self: end;
}
.mc-hero__t { grid-column: 1 / -1; grid-row: 2; position: relative; max-width: 640px; margin-top: -40px; }
.mc-h1 { margin: 0; font: 700 clamp(46px, 7vw, 92px)/0.95 var(--mc-sans); letter-spacing: -0.01em; }
.mc-scr { display: block; font: 400 0.72em/1 var(--mc-script); color: var(--mc-rust-d); margin-bottom: -2px; }
.mc-tag { margin: 16px 0 0; max-width: 30ch; }

/* ---- the record: isolation ranks it ------------------------------------ */
.mc-w { max-width: 1040px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 50px) 120px; }
.mc-s { padding-top: clamp(90px, 14vw, 180px); }
.mc-lab {
  display: block;
  margin: 0;
  font: 700 13px/1.4 var(--mc-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mc-teal-d);
}
.mc-h2 { margin: 6px 0 20px; font: 700 clamp(34px, 5vw, 56px)/1.05 var(--mc-sans); }
.mc-iso { max-width: 520px; }
.mc-iso--r { margin-left: auto; }
.mc-nl { color: var(--mc-muted); }

/* a narrow column with a small overprint in its void */
.mc-split { display: grid; grid-template-columns: minmax(0, 520px) 1fr; gap: 40px; align-items: center; }
.mc-split--r { grid-template-columns: 1fr minmax(0, 520px); }
.mc-pair { width: min(220px, 100%); height: auto; justify-self: center; }

/* meta strip */
.mc-s--meta { padding-top: clamp(40px, 8vw, 90px); }
.mc-meta { margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 40px; }
.mc-meta dt { font: 700 12px/1.4 var(--mc-sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--mc-teal-d); }
.mc-meta dd { margin: 4px 0 0; }

.mc-diag { font-size: 22px; line-height: 1.5; }

/* seen in the work: two drawn specimens, each isolated in its own half */
.mc-seen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; margin-top: 10px; }
.mc-seen__f { margin: 0; max-width: 420px; }
.mc-seen__f--r { justify-self: end; margin-top: 90px; }
.mc-seen figcaption { margin-top: 16px; font-size: 17px; }
.mc-cover { display: grid; align-content: center; justify-items: start; gap: 2px; aspect-ratio: 4 / 3; padding: 26px 30px; background: var(--mc-teal-d); color: var(--mc-paper); }
.mc-cover__sans { font: 700 clamp(30px, 4vw, 44px)/1 var(--mc-sans); letter-spacing: -0.01em; }
.mc-cover__scr { font: 400 clamp(28px, 3.4vw, 38px)/1 var(--mc-script); color: var(--mc-mus); margin-left: 34%; }
.mc-cover__caps { font: 300 clamp(18px, 2.2vw, 24px)/1.2 var(--mc-sans); letter-spacing: 0.34em; text-transform: uppercase; justify-self: end; }
.mc-cycle { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
.mc-pose--2, .mc-pose--3 { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .mc-pose { animation: mc-pose 0.375s steps(1) infinite; }
  .mc-pose--2 { animation-delay: 0.125s; }
  .mc-pose--3 { animation-delay: 0.25s; }
  @keyframes mc-pose { 0%, 33.3% { opacity: 1; } 33.4%, 100% { opacity: 0; } }
}

/* what carries the look */
.mc-tw { overflow-x: auto; }
.mc-ct, .mc-rt { width: 100%; border-collapse: collapse; }
.mc-ct th, .mc-ct td, .mc-rt th, .mc-rt td { padding: 10px 12px 10px 0; border-top: 1.5px solid var(--mc-ink); text-align: left; vertical-align: top; }
.mc-ct tr:last-child th, .mc-ct tr:last-child td { border-bottom: 1.5px solid var(--mc-ink); }
.mc-ct th { width: 13em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 16px; }
.mc-ct th a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.mc-ct th a:hover { text-decoration: underline; text-decoration-color: var(--mc-rust); }
.mc-ct th small { display: block; font: 400 14px/1.3 var(--mc-sans); letter-spacing: 0; text-transform: none; color: var(--mc-rust-d); }
.mc-ct td { padding-top: 20px; }
.mc-ct td p { margin: 0 0 8px; }
.mc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-tags a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--mc-ink); border-radius: 999px; text-decoration: none; }
.mc-swatch { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-swatch span { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 64px; padding: 6px 8px; font: 700 12px/1 var(--mc-sans); letter-spacing: 0.06em; border-radius: 50% 44% 56% 48% / 52% 60% 40% 48%; box-shadow: inset 0 0 0 1.5px var(--mc-ink); }
.mc-asbuilt { font-size: 14px; color: var(--mc-muted); margin-top: 6px !important; }

/* rules on hairlines */
.mc-rules { list-style: none; margin: 0; padding: 0; }
.mc-rules li { display: grid; grid-template-columns: 170px 1fr; gap: 20px; padding: 16px 0; border-top: 1.5px solid var(--mc-ink); }
.mc-rules li:last-child { border-bottom: 1.5px solid var(--mc-ink); }
.mc-ra { font: 700 17px/1.4 var(--mc-sans); letter-spacing: 0.1em; text-transform: uppercase; }
.mc-rk { display: block; font-size: 15px; color: var(--mc-rust-d); }

/* standing */
.mc-firm { color: var(--mc-teal-d); font-weight: 700; }
.mc-cov { margin-top: 40px; }
.mc-rt { font-size: 16px; }
.mc-rt thead th { font: 700 12px/1.4 var(--mc-sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--mc-teal-d); border-top: 0; }
.mc-rt tr:last-child th, .mc-rt tr:last-child td { border-bottom: 1.5px solid var(--mc-ink); }

/* neighbours: each with the space around it */
.mc-conf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 60px; }
.mc-conf li { max-width: 420px; }
.mc-conf li:nth-child(even) { margin-top: 48px; }
.mc-conf a, .mc-conf li > b { display: inline-flex; align-items: center; min-height: 44px; font-size: 24px; }
.mc-conf .mc-rk { margin-bottom: 6px; }

/* use it: organic tiles, each its own ground. The tile colour is set on the
   tile class and on the link, so no generic link rule can outrank it. */
.mc-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mc-rec a.mc-u {
  display: block; padding: 26px 28px;
  color: var(--mc-ink); text-decoration: none;
  border-radius: 60% 40% 50% 50% / 30% 30% 20% 20%;
}
.mc-rec a.mc-u b { display: block; font: 700 24px/1.2 var(--mc-sans); margin-bottom: 4px; }
.mc-rec a.mc-u:hover { color: var(--mc-ink); outline: 2px solid var(--mc-ink); }
.mc-rec a.mc-u--1 { background: var(--mc-mus); }
.mc-rec a.mc-u--2 { background: var(--mc-sage); }
.mc-rec a.mc-u--3 { background: var(--mc-peach); }
.mc-rec a.mc-u--4 { background: var(--mc-sand); }
.mc-foot { margin-top: 32px !important; font-size: 16px; }
.mc-foot a { display: inline-block; padding: 10px 0; }
.mc-foot + .mc-foot { margin-top: 0 !important; }

/* ---- narrow ------------------------------------------------------------ */
@media (max-width: 820px) {
  .mc-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 0; }
  .mc-art { grid-column: 1; max-width: 480px; }
  .mc-hero__t { grid-row: 2; margin-top: 16px; }
  .mc-split, .mc-split--r, .mc-meta, .mc-use, .mc-conf { grid-template-columns: 1fr; }
  .mc-seen { grid-template-columns: 1fr; gap: 48px; }
  .mc-seen__f--r { justify-self: start; margin-top: 0; }
  .mc-split--r .mc-pair { order: 2; }
  .mc-pair { width: 140px; justify-self: end; }
  .mc-conf li:nth-child(even) { margin-top: 0; }
  .mc-rules li { grid-template-columns: 1fr; gap: 4px; }
  .mc-ct th { width: 9em; }
}
@media (max-width: 480px) {
  .mc-hero, .mc-rec { font-size: 17px; }
  .mc-diag { font-size: 19px; }
  .mc-ct th, .mc-ct td { display: block; width: auto; border-top: 0; padding: 4px 0; }
  .mc-ct tr { display: block; border-top: 1.5px solid var(--mc-ink); padding: 6px 0 10px; }
  .mc-ct tr:last-child th, .mc-ct tr:last-child td { border-bottom: 0; }
  .mc-ct tr:last-child { border-bottom: 1.5px solid var(--mc-ink); }
  .mc-ct td { padding-top: 0; }
}