/* ============================================================
   TIFFANY PLUSNICK — page + component CSS
   Loads AFTER foundation.css (skinned) and elements.css.
   Tokens live in foundation.css. Nothing here invents a token.
   Lane + measured provenance: rsmi.md / motion.md
   ============================================================ */

/* ---------- 0. type roles (rsmi.md #3) ---------- */
body { font-optical-sizing: auto; }

.rubric {                                  /* WIRED Mono kicker, measured 11–13px @ 1.1px */
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.33;
  margin: 0;
}
.display {                                 /* display cut: tight leading, negative tracking */
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-variation-settings: "opsz" 36;
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
.prose { font-size: var(--text-lg); line-height: 1.5; max-width: var(--measure); }
.prose p { margin: 0 0 1.1em; }
.prose p:first-of-type::first-letter { /* editorial lede emphasis, not a drop cap */
  font-weight: var(--weight-display);
}

/* ---------- 1. THE NAME CHIP — magenta, reserved (rsmi.md #2) ---------- */
.chip {
  display: inline-block;
  background: var(--magenta);
  color: #000;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px 5px;
  line-height: 1;
  text-decoration: none;
}
.chip--ghost { background: transparent; color: var(--magenta); box-shadow: inset 0 0 0 1px var(--magenta); }

/* ---------- 2. MASTHEAD — fixed black bar (rsmi.md #6, motion.md #2) ---------- */
.masthead {
  position: fixed; inset: 0 0 auto; z-index: 60;
  background: #fff; color: #000;
  border-block-end: 1px solid var(--line);
}
.masthead-in {
  display: flex; align-items: center; gap: var(--s-3);
  padding-inline: var(--px); padding-block: 12px;
  max-width: none;
}
/* Wordmark — Playfair Display for the name, Inter for the role chip. */
.wordmark {
  display: inline-flex; align-items: center; text-decoration: none; color: #000;
  white-space: nowrap; line-height: 1;
}
.wordmark-name {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.7rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
  padding-block-end: 3px;
  background-image: linear-gradient(var(--magenta), var(--magenta));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;    /* the magenta stays, as a rule under the signature */
  transition: background-size var(--dur-2) var(--ease-out);
}
.wordmark:hover .wordmark-name { background-size: 100% 4px; }
.foot .wordmark-name { color: var(--text); }
.mast-nav { display: none; gap: var(--s-3); margin-inline-start: var(--s-4); }
.mast-nav a {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: #000; text-decoration: none; padding: 6px 0;
  transition: color var(--dur-2) var(--ease-inout), text-shadow var(--dur-2) var(--ease-inout);
}
/* magenta fails contrast as text on white — use the text-safe accent fork */
.mast-nav a:hover, .mast-nav a[aria-current="page"] { color: var(--accent-ink); text-shadow: 0 0 0.35px currentColor; }
.mast-cta { margin-inline-start: auto; display: none; align-items: center; gap: var(--s-2); }
@media (min-width: 48rem) { .mast-cta { display: flex; } }
@media (min-width: 62rem) { .mast-nav { display: flex; } }

.chrome-burger {
  appearance: none; background: none; border: 0; color: #000; cursor: pointer;
  margin-inline-start: auto; display: grid; gap: 5px; place-content: center;
  min-width: 48px; min-height: 48px; padding: 12px;
}
.chrome-burger span { display: block; width: 22px; height: 2px; background: currentColor; }
@media (min-width: 62rem) { .masthead .chrome-burger { display: none; } }

/* ---------- 3. THE FILING BAR — the one bespoke signature (motion.md) ---------- */
.filing {
  position: fixed; z-index: 59; inset-block-start: var(--mast-h, 52px); inset-inline: 0;
  display: flex; align-items: center; gap: var(--s-2);
  background: #fff; color: #333;
  padding: 5px var(--px) 6px;
  border-block-end: 1px solid var(--line);
}
.filing-slug {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-2); white-space: nowrap;
  transition: color var(--dur-2) var(--ease-inout);
}
.filing-slug b { color: var(--accent-ink); font-weight: 600; }
.filing-track { position: relative; flex: 1; height: 1px; background: var(--line); overflow: hidden; }
.filing-track::after {
  content: ""; position: absolute; inset: 0;
  background: var(--magenta);
  transform: scaleX(var(--read, 0)); transform-origin: 0 50%;
  will-change: transform;
}
body { padding-block-start: calc(var(--mast-h, 52px) + 22px); }

/* ---------- 4. SPLIT HERO — type on ground, image bled (rsmi.md #1) ---------- */
.split {
  display: grid; grid-template-columns: 1fr;
  background: var(--surface); color: var(--text);
}
.split-type {
  padding: clamp(40px, 7vw, 96px) var(--px);
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-3);
}
.split-media { position: relative; aspect-ratio: 4 / 3; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-credit {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-2);
  padding: 10px var(--px) 12px; margin: 0; max-width: none;
  background: var(--ink-ground); border-block-start: 1px solid #3A5F59;
}
@media (min-width: 55rem) {
  .split { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .split-media { aspect-ratio: auto; min-height: clamp(420px, 56vw, 640px); }
  .split-type { padding-inline-end: clamp(32px, 4vw, 64px); }
}
.hero-h1 { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 4.6rem); }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }

/* ---------- 5. RULED CARD STACK (rsmi.md #4) ---------- */
.ruled { list-style: none; margin: 0; padding: 0; }
.ruled > li { border-block-start: 1px solid var(--line); padding-block: var(--s-3); }
.ruled > li:first-child { border-block-start: 0; }

.story { display: grid; gap: 10px; }
.story-h {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-xl); line-height: 1.12; letter-spacing: -0.015em; margin: 0;
  text-wrap: balance;
}
.story-h a {
  color: inherit; text-decoration: none;
  transition: color var(--dur-2) var(--ease-inout), text-shadow var(--dur-2) var(--ease-inout);
}
.story-h a:hover { color: var(--accent-ink); text-shadow: 0 0 0.4px currentColor; }
.mode-ink .story-h a:hover { color: var(--magenta); }
.story-dek { color: var(--text-2); font-size: var(--text-md); line-height: 1.5; margin: 0; max-width: 54ch; }
.story-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: baseline; }
.story-media { position: relative; overflow: hidden; margin-block-end: 4px; }
.story-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* the lead card: image + type over it (rsmi.md #5) */
.lead { position: relative; display: block; text-decoration: none; color: #fff; }
.lead img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 28% 50%; }
.lead-over {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  padding: clamp(20px, 3vw, 36px);
  display: grid; gap: 10px; justify-items: start;
  /* measured scrim — her news photography has no guaranteed dark corner */
  background: linear-gradient(to top, rgb(0 0 0 / 0.78) 0%, rgb(0 0 0 / 0.55) 45%, rgb(0 0 0 / 0) 100%);
}
.lead-h { font-size: clamp(1.6rem, 1rem + 2.2vw, 2.6rem); color: #fff; }
.lead:hover .lead-h { text-shadow: 0 0 0.5px currentColor; }
@media (min-width: 62rem) { .lead img { aspect-ratio: 3 / 2; } }

/* ---------- 6. EDITORIAL GRID ---------- */
.frontpage { display: grid; gap: var(--s-6); }
@media (min-width: 62rem) {
  .frontpage { grid-template-columns: 7fr 5fr; gap: var(--s-8); align-items: start; }
}
.colrule { border-inline-start: 0; }
@media (min-width: 62rem) { .colrule { border-inline-start: 1px solid var(--line); padding-inline-start: var(--s-6); } }

/* ---------- 7. BEATS ---------- */
.beats { display: grid; gap: 0; }
.beat { border-block-start: 1px solid var(--line); padding-block: var(--s-4); display: grid; gap: 8px; }
.beat-n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent-ink); letter-spacing: 0.1em; }
.mode-ink .beat-n { color: var(--magenta); }
@media (min-width: 55rem) {
  .beat { grid-template-columns: 1fr 2fr; gap: var(--s-4); align-items: start; }
}

/* ---------- 8. STAT ROW ---------- */
.tally { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-3); }
@media (min-width: 48rem) { .tally { grid-template-columns: repeat(4, 1fr); } }
.tally dt { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.tally dd {
  margin: 4px 0 0; font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.2rem); line-height: 1; letter-spacing: -0.03em;
}

/* ---------- 9. CLIP READING PAGE ---------- */
.clip-body { max-width: var(--measure); }
.clip-body p { font-size: var(--text-lg); line-height: 1.55; margin: 0 0 1.05em; }
.clip-body blockquote {
  margin: var(--s-4) 0; padding-inline-start: var(--s-3);
  border-inline-start: 3px solid var(--magenta);
  font-size: var(--text-xl); line-height: 1.25; letter-spacing: -0.01em;
}
.clip-body blockquote p { font-size: inherit; line-height: inherit; margin: 0; }

/* ---------- 10. FOOTER ---------- */
.foot { border-block-start: 1px solid var(--line); }
.foot-grid { display: grid; gap: var(--s-4); }
@media (min-width: 48rem) { .foot-grid { grid-template-columns: 2fr 1fr 1fr; } }
.foot a { color: inherit; text-decoration: none; transition: color var(--dur-2) var(--ease-inout); }
.foot a:hover { color: var(--accent-ink); }
.mode-ink .foot a:hover { color: var(--magenta); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

/* ---------- 11. LINKS + BUTTONS ---------- */
.link-u {
  color: inherit; text-decoration: none;
  box-shadow: inset 0 -1px 0 0 currentColor;
  transition: color var(--dur-2) var(--ease-inout), box-shadow var(--dur-2) var(--ease-inout);
}
.link-u:hover { color: var(--accent-ink); box-shadow: inset 0 -2px 0 0 var(--magenta); }
.mode-ink .link-u:hover { color: var(--magenta); }

.btn-ed {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--magenta); color: #000; text-decoration: none;
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 14px 20px; border: 0; cursor: pointer;
  transition: background var(--dur-2) var(--ease-inout), transform var(--dur-1) var(--ease-out);
}
.btn-ed:hover { background: #fff; }
.btn-ed:active { transform: translateY(1px); }

/* ---------- 12. REVEALS — opacity/transform only, with fail-safe ---------- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in, .reveal-done .reveal {
  opacity: 1; transform: none;
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

/* ---------- 13. REDUCED MOTION — designed static states ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .filing-track::after { transform: none; opacity: 0.35; }
  .btn-ed:active { transform: none; }
}

/* ---------- 14. PRINT — editors print clips ---------- */
@media print {
  .masthead, .filing, .foot, .chrome-burger { display: none; }
  body { padding-block-start: 0; color: #000; background: #fff; }
  .clip-body p { font-size: 11pt; }
}

/* ---------- 15. UTILITIES ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Skip link: the target carries tabindex="-1" or focus stays on <body>. */
.skip {
  position: absolute; inset-block-start: -100%; inset-inline-start: var(--px); z-index: 80;
  background: var(--magenta); color: #000; padding: 12px 16px; text-decoration: none;
  font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase;
  transition: inset-block-start var(--dur-2) var(--ease-out);
}
.skip:focus-visible, .skip:focus { inset-block-start: 8px; }
#main:focus { outline: none; }

/* ---------- 16. FORM (composed from .el-field) ---------- */
.el-form { display: grid; gap: var(--s-3); max-width: var(--measure); }
.el-form label {
  display: block; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); margin-block-end: 8px;
}
.el-form input, .el-form select, .el-form textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--text-md); color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: 0;
  padding: 13px 14px;
  transition: border-color var(--dur-2) var(--ease-inout), box-shadow var(--dur-2) var(--ease-inout);
}
.el-form textarea { resize: vertical; line-height: 1.5; }
.el-form input:hover, .el-form select:hover, .el-form textarea:hover { border-color: var(--text-2); }
.el-form input:focus-visible, .el-form select:focus-visible, .el-form textarea:focus-visible {
  border-color: var(--accent-ink); outline: 2px solid var(--magenta); outline-offset: 1px;
}
.el-field-err { display: none; color: var(--accent-ink); font-size: var(--text-sm); margin: 6px 0 0; }
.el-field.err .el-field-err { display: block; }
.el-field.err input, .el-field.err textarea { border-color: var(--accent-ink); }

/* ---------- 17. EXTERNAL LINK MARK + PHOTO CREDIT NOTE ---------- */
.ext {
  display: inline-block; margin-inline-start: 6px; vertical-align: 0.02em;
  width: 0.58em; height: 0.58em; color: var(--text-2);
}
.story-h a:hover .ext { color: var(--accent-ink); }
.mode-ink .story-h a:hover .ext { color: var(--magenta); }
.byline-note {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent-ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.mode-ink .byline-note { color: var(--magenta); }
.byline-note svg { width: 13px; height: 13px; flex: none; }

/* lead column: the lead card plus one follow story, ruled like the stack */
.lead-col { display: grid; gap: var(--s-4); }
.lead-col > .follow { border-block-start: 1px solid var(--line); padding-block-start: var(--s-4); }

/* Honeypot — hidden by CLIPPING, never by a negative offset.
   `left:-9999px` extends the scrollable area to the LEFT on iOS Safari and is a
   classic cause of sideways scroll on mobile. */
.hp {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- 18. TAP TARGETS (44px floor, incl. inside the menu) ---------- */
.el-menu .wordmark,
.el-menu-bar .wordmark {
  display: inline-flex; align-items: center; min-height: 44px; padding-block: 4px;
}
.el-menu-close { min-width: 48px; min-height: 48px; }
.el-menu-nav a { display: block; min-height: 44px; }

/* ---------- 19. GRAIN — colour floods are never flat-filled ----------
   A newsprint tooth over the teal ground and the menu: feTurbulence noise
   at very low alpha plus a radial depth wash. Decorative, never interactive. */
.mode-ink, .el-menu, .split.mode-ink {
  position: relative;
  background-image:
    radial-gradient(120% 90% at 18% 0%, rgb(255 255 255 / 0.055) 0%, rgb(255 255 255 / 0) 60%),
    radial-gradient(90% 70% at 100% 100%, rgb(255 128 245 / 0.07) 0%, rgb(255 128 245 / 0) 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-blend-mode: normal, normal, overlay;
  background-size: auto, auto, 180px 180px;
}
.mode-ink > *, .el-menu > * { position: relative; z-index: 1; }

/* ---------- 20. PHOTOGRAPH BAND — her credited frames ---------- */
.plates { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 55rem) { .plates { grid-template-columns: repeat(3, 1fr); } }
.plate { display: grid; gap: 10px; margin: 0; }
.plate img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.plate figcaption { font-size: var(--text-sm); line-height: 1.4; color: var(--text-2); max-width: 40ch; }
.plate .rubric { color: var(--accent-ink); }
.mode-ink .plate .rubric { color: var(--magenta); }

/* ---------- 21. STICKY FILTER BAR (work index) ----------
   Keeps the outlet filter reachable through a 25-item index. */
.filterbar {
  position: sticky; z-index: 40;
  inset-block-start: calc(var(--mast-h, 52px) + 22px);
  background: var(--surface);
  padding-block: var(--s-2);
  border-block-end: 1px solid var(--line);
  margin-block-end: var(--s-4);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}

/* ---------- 22. ENTRANCE CHOREOGRAPHY — keyframes, transform/opacity only ---------- */
@keyframes tp-chip-in {
  from { opacity: 0; transform: translateY(6px) scaleX(0.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes tp-rule-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes tp-slug-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.split .chip { animation: tp-chip-in var(--dur-3) var(--ease-out) both; }
.filing-track { transform-origin: 0 50%; animation: tp-rule-draw var(--dur-4) var(--ease-out) both; }
.filing-slug { animation: tp-slug-in var(--dur-3) var(--ease-out) 120ms both; }

@media (prefers-reduced-motion: reduce) {
  .split .chip, .filing-track, .filing-slug { animation: none; }
}

/* tint band — the third ground, between white and ink */
.mode-tint { background: var(--surface); }

/* ---------- 23. PER-SELECTOR SURFACE (craft rule 9) ----------
   The grain rule above is a comma group; these give each tall flood
   its own body so no colour field ships flat. */
.el-menu {
  background-image:
    radial-gradient(110% 80% at 20% 0%, rgb(255 255 255 / 0.06) 0%, rgb(255 255 255 / 0) 62%),
    radial-gradient(80% 60% at 100% 100%, rgb(255 128 245 / 0.10) 0%, rgb(255 128 245 / 0) 58%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: auto, auto, 180px 180px;
}
.section--hero {
  background-image:
    radial-gradient(120% 90% at 18% 0%, rgb(255 255 255 / 0.05) 0%, rgb(255 255 255 / 0) 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: auto, 180px 180px;
}
.split {
  background-image:
    radial-gradient(120% 90% at 12% 0%, rgb(255 255 255 / 0.05) 0%, rgb(255 255 255 / 0) 58%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: auto, 180px 180px;
}

/* ---------- 24. BYLINE PORTRAIT ----------
   Source is 200x200 (the largest LinkedIn serves publicly), so it is
   never rendered above 128px CSS — no upscaling, no soft hero portrait. */
.byline { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.byline-pic {
  width: 112px; height: 112px; flex: none;
  border-radius: 0; overflow: hidden; position: relative;
  box-shadow: 0 0 0 1px var(--line);
}
.mode-ink .byline-pic { box-shadow: 0 0 0 1px #3A5F59; }
.byline-pic img { width: 100%; height: 100%; object-fit: cover; }
.byline-txt { display: grid; gap: 8px; justify-items: start; }
@media (min-width: 48rem) { .byline-pic { width: 128px; height: 128px; } }

/* ---------- 25. PROOF STRIP — real artifacts, not decoration ----------
   Covers and filed pages shown as objects on the page. */
.proof-strip { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); align-items: start; }
@media (min-width: 48rem) { .proof-strip { grid-template-columns: repeat(3, 1fr); } }
.proof { margin: 0; display: grid; gap: 10px; }
.proof img {
  width: 100%; height: auto; display: block;
  box-shadow: 0 18px 40px -22px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(0 0 0 / 0.08);
}
.mode-ink .proof img { box-shadow: 0 18px 40px -20px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.10); }
.proof figcaption { font-size: var(--text-sm); line-height: 1.4; color: var(--text-2); }

/* a filed clip shown beside its text */
.clip-layout { display: grid; gap: var(--s-6); }
@media (min-width: 62rem) {
  .clip-layout { grid-template-columns: minmax(0,1fr) 300px; gap: var(--s-8); align-items: start; }
  .clip-aside { position: sticky; top: calc(var(--mast-h,52px) + 44px); }
}
.clip-aside img { width: 100%; box-shadow: 0 18px 40px -22px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(0 0 0 / 0.08); }

/* ---------- 26. FOOTER RHYTHM ----------
   .rubric is zeroed for use as an inline label, so anywhere it acts as a
   COLUMN HEADING it must re-establish its own bottom space. */
.foot .rubric { margin-block-end: var(--s-2); }
.foot-grid > div + div { margin-block-start: 0; }
.foot ul { gap: 10px; }
.foot ul a { display: inline-block; padding-block: 2px; }
@media (max-width: 47.99rem) {
  .foot-grid { gap: var(--s-5, 40px); }
  .foot-grid > div { padding-block-end: var(--s-2); }
}

/* ---------- 27. HIRE CARD — the commission block earns its right half ---------- */
.hire-card {
  display: grid; gap: var(--s-3); justify-items: start;
  padding: var(--s-4);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.mode-ink .hire-card { background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px #3A5F59; }
.hire-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; }
.hire-list li {
  display: flex; gap: 10px; align-items: baseline;
  font-size: var(--text-md); line-height: 1.45; color: var(--text-2);
  border-block-start: 1px solid var(--line); padding-block-start: 8px;
}
.mode-ink .hire-list li { border-block-start-color: #3A5F59; }
.hire-list li:first-child { border-block-start: 0; padding-block-start: 0; }
.hire-list b { color: var(--text); font-weight: var(--weight-medium); }

/* ---------- 28. RESUME BLOCKS ---------- */
.res-grid { display: grid; gap: var(--s-6); }
@media (min-width: 55rem) { .res-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-6) var(--s-8); } }
.res h3 {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-ink); margin: 0 0 var(--s-2); font-weight: 600;
}
.mode-ink .res h3 { color: var(--magenta); }
.res ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.res li {
  border-block-start: 1px solid var(--line); padding-block: 12px;
  display: grid; gap: 2px;
}
.res li:first-child { border-block-start: 0; padding-block-start: 0; }
.res b { font-weight: var(--weight-medium); }
.res span { color: var(--text-2); font-size: var(--text-sm); line-height: 1.45; }
.res-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.res-inline li { border: 0; padding: 0; }
.res-inline .tagpill {
  display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.06em; padding: 7px 10px; box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2);
}
.mode-ink .res-inline .tagpill { box-shadow: inset 0 0 0 1px #3A5F59; }

/* ---------- 29. MEGA MENU ----------
   Opens on hover-intent OR click/focus, stays while the pointer is over the
   trigger OR the panel, and closes on Escape. Keyboard-reachable throughout. */
.has-mega { position: relative; }
.mega {
  position: fixed; inset-inline: 0;
  inset-block-start: calc(var(--mast-h, 56px) + 22px);
  background: #fff; color: var(--text);
  border-block-start: 1px solid var(--line);
  border-block-end: 1px solid var(--line);
  box-shadow: 0 24px 40px -28px rgb(0 0 0 / 0.35);
  padding: var(--s-5, 40px) var(--px) var(--s-6);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out),
              visibility 0s linear var(--dur-2);
  z-index: 55;
}
.mega[data-open="true"] {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s, 0s, 0s;
}
.mega-in { display: grid; gap: var(--s-5, 40px); max-width: var(--wrap); margin-inline: auto; }
@media (min-width: 62rem) { .mega-in { grid-template-columns: 300px 1fr; gap: var(--s-8); } }
.mega h3 {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-ink); margin: 0 0 var(--s-2); font-weight: 600;
}
.mega-outlets { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mega-outlets a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2);
  padding-block: 12px; border-block-start: 1px solid var(--line);
  color: var(--text); text-decoration: none; font-size: var(--text-md);
  transition: color var(--dur-2) var(--ease-inout);
}
.mega-outlets li:first-child a { border-block-start: 0; }
.mega-outlets a:hover, .mega-outlets a:focus-visible { color: var(--accent-ink); }
.mega-outlets .n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-2); }
.mega-recent { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .mega-recent { grid-template-columns: repeat(3, 1fr); } }
.mega-card { color: var(--text); text-decoration: none; display: grid; gap: 8px; align-content: start; }
.mega-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.mega-card .k { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.mega-card .t {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-lg); line-height: 1.15; letter-spacing: -0.015em;
  transition: color var(--dur-2) var(--ease-inout);
}
.mega-card:hover .t, .mega-card:focus-visible .t { color: var(--accent-ink); }
@media (max-width: 61.99rem) { .mega { display: none; } }
@media (prefers-reduced-motion: reduce) { .mega { transition: none; } }

/* ---------- 30. SECOND NAV — article categories ---------- */
.mast-cats { display: none; gap: var(--s-2); margin-inline-start: auto; align-items: center; }
.mast-cats a {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-2); text-decoration: none; white-space: nowrap;
  padding-block: 6px;
  transition: color var(--dur-2) var(--ease-inout), text-shadow var(--dur-2) var(--ease-inout);
}
.mast-cats a:hover, .mast-cats a:focus-visible { color: var(--accent-ink); text-shadow: 0 0 0.35px currentColor; }
/* Two-tier masthead: the category nav drops to its own row rather than being
   clipped or hidden. Above 94rem everything sits on one line. */
@media (min-width: 62rem) {
  .masthead-in { flex-wrap: wrap; row-gap: 0; }
  .mast-cats { display: flex; order: 4; flex-basis: 100%; margin-inline-start: 0;
    border-block-start: 1px solid var(--line); padding-block: 8px; margin-block-start: 8px; }
  .mast-cta { margin-inline-start: auto; order: 3; }
}
@media (min-width: 94rem) {
  .masthead-in { flex-wrap: nowrap; }
  .mast-cats { flex-basis: auto; order: 2; margin-inline-start: auto;
    border-block-start: 0; padding-block: 0; margin-block-start: 0; }
  .mast-cta { order: 3; margin-inline-start: var(--s-3); }
}

.filter-sep { width: 1px; height: 22px; background: var(--line); margin-inline: 6px; }

/* ---------- 31. CATEGORIES INSIDE THE MOBILE MENU ---------- */
.menu-cats { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: 0; }
.menu-cats a {
  display: block; min-height: 44px; display: flex; align-items: center;
  padding-block: 10px; border-block-start: 1px solid rgb(255 255 255 / 0.16);
  font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none; color: inherit;
  transition: color var(--dur-2) var(--ease-inout);
}
.menu-cats li:first-child a { border-block-start: 0; }
.menu-cats a:hover, .menu-cats a:focus-visible { color: var(--magenta); }

/* ---------- 32. WORDMARK ROLE CHIP ---------- */
.wordmark { gap: 10px; flex-wrap: nowrap; }
.wordmark-role {
  display: inline-block; background: var(--magenta); color: #000;
  font-family: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; line-height: 1;
  padding: 6px 9px 5px; white-space: nowrap;
  transition: background var(--dur-2) var(--ease-inout);
}
.wordmark:hover .wordmark-role { background: #fff; }
.foot .wordmark-role { font-size: 12px; }
@media (max-width: 30rem) {
  .wordmark-role { font-size: 9px; letter-spacing: 0.05em; padding: 5px 6px 4px; }
  .wordmark { gap: 7px; }
  .wordmark-name { font-size: 1.15rem; }
}

/* ---------- 33. EVERY IMAGE IS A LINK ----------
   No inert pictures. Each one goes somewhere and says so on hover/focus:
   the frame lifts its magenta rule and the image warms slightly. */
.imglink { display: block; position: relative; text-decoration: none; color: inherit; overflow: hidden; }
.imglink img { transition: transform var(--dur-3) var(--ease-out), filter var(--dur-3) var(--ease-out); }
.imglink::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 3px;
  background: var(--magenta); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-2) var(--ease-out);
}
.imglink:hover img, .imglink:focus-visible img { transform: scale(1.03); filter: saturate(1.06); }
.imglink:hover::after, .imglink:focus-visible::after { transform: scaleX(1); }
.imglink:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }
/* the split hero fills its cell */
.split-media .imglink, .split-media .imglink picture, .split-media .imglink img { height: 100%; }
.split-media .imglink img { object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
  .imglink img { transition: none; }
  .imglink:hover img, .imglink:focus-visible img { transform: none; }
  .imglink::after { transition: none; }
}

/* masthead fits at every width: the signature shrinks before anything is cut */
@media (max-width: 85.99rem) { .mast-cta { margin-inline-start: auto; } }
@media (max-width: 74rem) {
  .wordmark-name { font-size: 1.25rem; }
  .wordmark-role { font-size: 10px; padding: 5px 7px 4px; }
  .mast-nav { gap: var(--s-2); margin-inline-start: var(--s-3); }
}

/* ---------- 34. NO SIDEWAYS SCROLL ----------
   `clip` (not `hidden`) so position:sticky keeps working. Belt and braces on top
   of fixing the root cause — nothing should be positioned off-viewport anyway. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }
/* long unbroken strings (URLs, file names) must wrap, not push the page wide */
body { overflow-wrap: break-word; }
.clip-body, .story-dek, .prose, figcaption { overflow-wrap: anywhere; }

/* ---------- 35. MOBILE FILTER STRIP ----------
   Ten wrapped chips ate four rows on a phone. Below 62rem the filters become a
   single swipeable row — the page itself never scrolls sideways (see §34). */
@media (max-width: 61.99rem) {
  .filterbar {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    gap: 6px; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-inline-end: 28px;
    /* fade the right edge so it reads as "more this way" */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  .filterbar::-webkit-scrollbar { display: none; }
  .filterbar .filter-btn { flex: none; scroll-snap-align: start; }
  .filterbar .filter-sep { flex: none; }
  .filterbar > span:last-child { flex: none; margin-inline-start: 4px; }
}

/* ghost chip on a LIGHT ground must use the text-safe accent (magenta on white
   measures 1.6:1 and fails); on the ink ground the magenta is correct. */
.masthead .chip--ghost,
.mode-light .chip--ghost, .mode-tint .chip--ghost {
  color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink);
}
.masthead .chip--ghost:hover { background: var(--accent-ink); color: #fff; }

/* ---------- 36. THE MENU IS A DARK SURFACE — declare its ink ----------
   The masthead went white, so `.wordmark { color:#000 }` followed the same
   markup into the dark <dialog> and rendered black on navy (1.3:1).
   Any component reused on a second surface must restate its colours there. */
.el-menu .wordmark { color: var(--ink-cream); }
.el-menu .wordmark-name { color: var(--ink-cream); }
.el-menu .wordmark-role { background: var(--magenta); color: #000; }
.el-menu .el-menu-close { color: var(--ink-cream); }

/* ---------- 37. MAGENTA IS NEVER TEXT ON A LIGHT GROUND ----------
   #FF80F5 on white measures 2.17:1. It is a FILL colour (chips, rules, bars).
   As text it only works on the ink ground; everywhere else use --accent-ink. */
.chip--ghost { color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.mode-ink .chip--ghost,
.el-menu .chip--ghost { color: var(--magenta); box-shadow: inset 0 0 0 1px var(--magenta); }

.rubric[style*="--magenta"] { color: var(--accent-ink) !important; }
.mode-ink .rubric[style*="--magenta"],
.el-menu .rubric[style*="--magenta"],
.split.mode-ink .rubric[style*="--magenta"] { color: var(--magenta) !important; }

/* the filled button is always black on magenta (9.66:1), never white */
.btn-ed, .el-menu .btn-ed, .el-menu-ctas .btn-ed { color: #000; }
.btn-ed:hover, .el-menu .btn-ed:hover { color: #000; background: #fff; }

/* ---------- 38. CATEGORY COLOURS ----------
   One fill per subject. Black text on every one measures >= 4.5:1 (checked in
   the generator, not by eye). The fills are for CHIPS only, never for text. */
[data-cat="local-news"] { --cat: #FF80F5; }
[data-cat="government"] { --cat: #8BE9C0; }
[data-cat="music"] { --cat: #FFD25A; }
[data-cat="world"] { --cat: #8FC7FF; }
[data-cat="comms"] { --cat: #E3B7FF; }

.chip[data-cat], .story-cat {
  background: var(--cat, var(--magenta)); color: #000;
}
/* the filter chip for a category shows its colour when active */
.filter-btn[data-beat][aria-pressed="true"] { background: var(--cat, var(--magenta)); color: #000; box-shadow: none; }
.filter-btn[data-beat] { box-shadow: inset 0 0 0 1px var(--cat, var(--line)); color: var(--text); }
.filter-btn[data-beat]:hover { background: color-mix(in oklab, var(--cat) 30%, transparent); }
/* a category rule under each story card's kicker */
.story-cat {
  display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 8px 3px; line-height: 1;
}
.mast-cats a[data-cat]::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  background: var(--cat); margin-inline-end: 7px; vertical-align: 0.02em;
}
.menu-cats a[data-cat]::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  background: var(--cat); margin-inline-end: 10px; flex: none;
}
.mega-outlets a[data-cat] { }

/* ---------- 39. WORK INDEX GRID ----------
   25 full-width cards made every image 1232px wide. Two columns on desktop keeps
   the images at a sane size and the page scannable. */
@media (min-width: 62rem) {
  .ruled--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
  .ruled--grid > li { border-block-start: 1px solid var(--line); }
  .ruled--grid > li:nth-child(2) { border-block-start: 1px solid var(--line); }
}
.ruled--grid .story-media img { aspect-ratio: 16 / 10; }

/* ---------- 40. MOBILE CATEGORY BAR ----------
   Below 62rem the categories become their own swipeable bar directly under the
   masthead — colour swatch first, so the subject reads before the words. */
@media (max-width: 61.99rem) {
  .mast-cats {
    display: flex; order: 4; flex-basis: 100%;
    margin-inline-start: 0; margin-block-start: 8px;
    border-block-start: 1px solid var(--line);
    padding-block: 9px; gap: var(--s-3);
    overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-inline-end: 26px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
  }
  .mast-cats::-webkit-scrollbar { display: none; }
  .mast-cats a { flex: none; font-size: 11px; }
  .masthead-in { flex-wrap: wrap; row-gap: 0; }
}

/* ---------- 41. FILTERING, ANIMATED ----------
   Cards fade and lift out, the surviving set settles back in on a stagger.
   Transform/opacity only; instant under prefers-reduced-motion. */
.ruled--grid > li { transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.ruled--grid > li.is-leaving { opacity: 0; transform: translateY(-6px) scale(0.985); }
.ruled--grid > li.is-entering { opacity: 0; transform: translateY(10px); }
.ruled--grid > li.is-entered {
  opacity: 1; transform: none;
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  transition-delay: calc(var(--n, 0) * 40ms);
}
.filterbar.is-busy { cursor: progress; }
[data-count] { transition: opacity var(--dur-1) var(--ease-out); }
[data-count].is-ticking { opacity: 0.35; }
@media (prefers-reduced-motion: reduce) {
  .ruled--grid > li,
  .ruled--grid > li.is-leaving,
  .ruled--grid > li.is-entering,
  .ruled--grid > li.is-entered { transition: none; transform: none; opacity: 1; }
}

/* ---------- 42. SMALL-PHONE MASTHEAD FIT ----------
   Must come LAST: an earlier `max-width:74rem` rule has equal specificity and
   would otherwise win. At 390px the logo + role chip + burger must share one row.
   Measured: available 342px, burger 48px -> wordmark must stay under ~286px. */
@media (max-width: 30rem) {
  .wordmark { gap: 7px; }
  .wordmark-name { font-size: 1.2rem; }
  .wordmark-role { font-size: 9.5px; letter-spacing: 0.06em; padding: 5px 7px 4px; }
}