/* ==========================================================================
   MEXICAN GRAPHIC VERNACULAR — one page. Loaded on a/mexican-graphic-vernacular.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   One broadside on unbleached stock: a six-column grid of framed
   compartments, rank carried by frame weight (6 / 3 / 1.5 px), never by
   size. The hero is cells 1–7; the record continues the grid. Motionless.
   The shell (rail, top bar, community drawer) is never restyled: every
   rule here is scoped to .mv-sheet or .mv-rec.

   CULTURAL PROTOCOL: no calavera or festival iconography on this canvas.

   Colour (saturated flats, SUPPORTED; the values are ours):
   paper #F4ECD8 · ink #1D1D1B · pink #E4007C · teal #00A19A
   yellow #FFC20E · orange #EC5F24 · board #D9CFB6
   Text contrast, WCAG AA at the sizes used:
   ink on paper 14.3 · ink on board 10.9 · ink on teal 5.3 · ink on orange 5.0
   ink on yellow 10.4. Pink carries no text (the artifact's orange measured
   4.48 under 12px labels, so it moved one step lighter). Swatch labels sit
   on paper beneath each chip, never on the colour.
   ========================================================================== */
@font-face {
  font-family: "Alfa Slab One MV";
  src: url("fonts/alfa-slab-one.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin MV";
  src: url("fonts/libre-franklin.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-display: swap;
}

.mv-page {
  --mv-paper: #F4ECD8;
  --mv-ink: #1D1D1B;
  --mv-pink: #E4007C;
  --mv-teal: #00A19A;
  --mv-yel: #FFC20E;
  --mv-or: #EC5F24;
  --mv-board: #D9CFB6;
  --mv-slab: "Alfa Slab One MV", Rockwell, serif;
  --mv-sans: "Libre Franklin MV", "Helvetica Neue", Arial, sans-serif;
}
.mv-page main { background: var(--mv-board); color: var(--mv-ink); overflow-x: hidden; }
/* Motionless: the shell's scroll reveal never fades the record. The sheet is
   present, never arriving. (Outranks site.css's .js-reveal rule.) */
.mv-page main > section.mv-rec { opacity: 1; transform: none; transition: none; will-change: auto; }

/* ---- the sheet ------------------------------------------------------------ */
.mv-sheet {
  max-width: 1180px;
  margin: 0 auto;
  background: var(--mv-paper);
  padding: clamp(12px, 2.4vw, 26px);
  border: 1px solid #B9AE94;
  font: 400 17px/1.55 var(--mv-sans);
  color: var(--mv-ink);
}
.mv-sheet--hero { margin-top: clamp(10px, 3vw, 30px); border-bottom: 0; padding-bottom: 6px; }
.mv-rec { padding: 0 0 clamp(10px, 3vw, 30px); }
.mv-rec .mv-sheet { border-top: 0; padding-top: 6px; }
.mv-sheet a { color: var(--mv-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.mv-sheet a:hover { background: var(--mv-yel); }
.mv-sheet :focus-visible { outline: 3px solid var(--mv-ink); outline-offset: 3px; }
.mv-sheet b { font-weight: 800; }

.mv-bs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }

/* ---- the compartment -------------------------------------------------------- */
.mv-cell { position: relative; background: var(--mv-paper); display: flex; flex-direction: column; min-width: 0; }
.mv-f6 { border: 6px solid var(--mv-ink); }
.mv-f3 { border: 3px solid var(--mv-ink); }
.mv-f15 { border: 1.5px solid var(--mv-ink); }
.mv-s1 { grid-column: span 1; }
.mv-s2 { grid-column: span 2; }
.mv-s3 { grid-column: span 3; }
.mv-s4 { grid-column: span 4; }
.mv-s6 { grid-column: span 6; }

.mv-img { position: relative; min-height: 120px; }
.mv-f6 > .mv-img { border-bottom: 6px solid var(--mv-ink); }
.mv-f3 > .mv-img { border-bottom: 3px solid var(--mv-ink); }
.mv-f15 > .mv-img { border-bottom: 1.5px solid var(--mv-ink); }
.mv-img svg { display: block; width: 100%; height: auto; }
.mv-img--pink { background: var(--mv-pink); display: grid; place-items: center; }
.mv-img--pink svg { width: 160px; max-width: 80%; }
.mv-img--teal { background: var(--mv-teal); min-height: 60px; }

.mv-body { padding: 14px 16px 10px; flex: 1; }
.mv-body > p { margin: 0 0 0.7em; }
.mv-body > p:last-child { margin-bottom: 0; }
.mv-capt {
  margin: 0; padding: 6px 16px 8px;
  font: 600 12px/1.4 var(--mv-sans); letter-spacing: 0.06em; text-transform: uppercase;
  border-top: 1.5px solid var(--mv-ink);
}

/* ---- type ------------------------------------------------------------------ */
.mv-title { margin: 0; font: 400 clamp(36px, 7vw, 86px)/0.95 var(--mv-slab); letter-spacing: 0.01em; overflow-wrap: break-word; }
.mv-recid { margin: 0 0 8px; font: 600 12px/1.5 var(--mv-sans); letter-spacing: 0.06em; text-transform: uppercase; overflow-wrap: anywhere; }
.mv-h { margin: 0 0 8px; font: 400 clamp(22px, 2.6vw, 30px)/1.1 var(--mv-slab); }
.mv-title + .mv-h { margin-top: 14px; }
.mv-grade, .mv-n { font: 600 12px/1 var(--mv-sans); letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle; }
.mv-n { font-size: 0.8em; font-family: var(--mv-slab); letter-spacing: 0; }
.mv-h3 { margin: 18px 0 6px; font: 400 20px/1.15 var(--mv-slab); }
.mv-sub { font-size: 14px; }

/* ---- hero plates -------------------------------------------------------------- */
.mv-nb { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.mv-nb > div { height: 90px; display: flex; align-items: flex-end; padding: 4px 6px; font: 600 12px/1.25 var(--mv-sans); }
.mv-nb__bleed { background: var(--mv-or); }
.mv-nb__comp { background: var(--mv-teal); border: 3px solid var(--mv-ink); }
.mv-nb > .mv-nb__comp { padding: 0; }
/* the caption strip grows with its text, so a wrapped caption never runs into the image */
.mv-nb__comp span { flex: 1; background: var(--mv-paper); padding: 4px 6px; }
.mv-two { display: grid; grid-template-columns: 1fr 1fr; }
.mv-two > div + div { border-left: 3px solid var(--mv-ink); }
.mv-two svg { height: 160px; }
.mv-half .mv-flat { flex: 1; }
.mv-flat {
  min-height: 140px; display: grid; place-items: center; text-align: center; padding: 8px;
  font: 800 14px/1.2 var(--mv-sans); letter-spacing: 0.1em; text-transform: uppercase;
}
.mv-flat--teal { background: var(--mv-teal); }
.mv-flat--or { background: var(--mv-or); }

/* ---- record: facts ------------------------------------------------------------- */
.mv-meta { margin: 0; display: grid; gap: 4px; }
.mv-meta > div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; border-bottom: 1.5px solid var(--mv-ink); padding: 3px 0; }
.mv-meta dt { font: 800 12px/1.9 var(--mv-sans); letter-spacing: 0.08em; text-transform: uppercase; }
.mv-meta dd { margin: 0; }
.mv-note { margin: 12px 0 0; font-size: 15px; }

/* ---- record: what carries the look -------------------------------------------- */
.mv-tw { overflow-x: auto; max-width: 100%; }
.mv-ct, .mv-rt { width: 100%; border-collapse: collapse; font-size: 15px; }
.mv-ct th, .mv-ct td, .mv-rt th, .mv-rt td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1.5px solid var(--mv-ink); }
.mv-ct th { width: 30%; font-weight: 800; }
.mv-ct th a { display: inline-block; min-height: 44px; line-height: 44px; margin: -8px 0; }
.mv-ct th small { display: block; font: 600 11px/1.3 var(--mv-sans); letter-spacing: 0.08em; text-transform: uppercase; }
.mv-ct td p { margin: 0 0 6px; }
.mv-ct td p:last-child { margin-bottom: 0; }
.mv-nl { font-size: 15px; }
.mv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mv-tags a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 1.5px solid var(--mv-ink); text-decoration: none; }
.mv-swatch { display: flex; flex-wrap: wrap; gap: 0; border: 1.5px solid var(--mv-ink); }
.mv-swatch span { flex: 1 1 88px; font: 600 12px/1 var(--mv-sans); letter-spacing: 0.04em; }
.mv-swatch span + span { border-left: 1.5px solid var(--mv-ink); }
.mv-swatch i { display: block; height: 40px; border-bottom: 1.5px solid var(--mv-ink); }
.mv-swatch b { display: block; padding: 6px; font-weight: 600; }
.mv-asbuilt { font: 600 11px/1 var(--mv-sans); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 6px !important; }
.mv-rt thead th { font: 800 12px/1.4 var(--mv-sans); letter-spacing: 0.08em; text-transform: uppercase; }
.mv-rt tbody th { font-weight: 600; }

/* ---- record: rules -------------------------------------------------------------- */
.mv-rules { list-style: none; margin: 0; padding: 0; }
.mv-rules li { padding: 8px 0; border-bottom: 1.5px solid var(--mv-ink); }
.mv-k {
  display: inline-block; margin-right: 4px; padding: 1px 6px;
  font: 800 11px/1.5 var(--mv-sans); letter-spacing: 0.1em; text-transform: uppercase;
  border: 1.5px solid var(--mv-ink);
}
.mv-ev { font: 600 12px/1 var(--mv-sans); letter-spacing: 0.04em; text-decoration: underline dotted; text-underline-offset: 3px; }

/* ---- record: neighbours and exits ----------------------------------------------- */
.mv-conf, .mv-exits { list-style: none; margin: 0; padding: 0; }
.mv-conf li { border-bottom: 1.5px solid var(--mv-ink); }
.mv-conf a, .mv-conf li > b { display: block; padding: 10px 0; text-decoration: none; }
.mv-conf a b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.mv-conf__t { display: block; margin-top: 4px; font-size: 15px; }
.mv-exits li { padding: 6px 0; }
.mv-exits a { display: inline-block; min-height: 44px; line-height: 44px; font-weight: 800; }
.mv-exits li { line-height: 1.4; }

/* ---- small screens -------------------------------------------------------------- */
@media (max-width: 900px) {
  .mv-bs { grid-template-columns: 1fr 1fr; }
  .mv-bs > .mv-cell { grid-column: span 2; }
  .mv-bs > .mv-half { grid-column: span 1; }
  .mv-meta > div { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 520px) {
  .mv-bs > .mv-half { grid-column: span 2; }
  .mv-body { padding: 12px 12px 8px; }
  .mv-capt { padding: 6px 12px 8px; }
  .mv-ct th { width: 38%; }
}

/* research-dimension table at phone width: no fixed floor, cells wrap (QA 2026-09-29) */
@media (max-width: 480px) {
  .mv-rt { min-width: 0; }
  .mv-rt th, .mv-rt td { padding-inline: 6px; overflow-wrap: break-word; }
}