/* ================================================================
   BRYME — THE PUBLICATION DESIGN SYSTEM (v6 "Brass & Ink")
   ----------------------------------------------------------------
   A complete visual rebuild: the site as a typeset publication.
   Paper · Ink · Navy · Brass, with green reserved for verification
   and red for closed status — colour means something, always.
   Two families only: a serif for everything editorial, a sans for
   everything utilitarian. Rules and whitespace carry the hierarchy;
   boxes appear only where function demands them.
   ================================================================ */

:root {
  /* paper */
  --paper: #f6f2e8;
  --paper-2: #eee8d9;
  --sheet: #fdfbf4;
  /* ink */
  --ink: #1d2531;
  --muted: #49525f;
  --dim: #626773;
  /* structure */
  --navy: #16324f;
  --navy-deep: #0f2438;
  /* the accent */
  --brass: #856116;
  --brass-bright: #c39a2e;
  --lime: #7fa814; --lime-bright: #a4c62c;
  /* status — used for nothing else */
  --green: #1f6b47;
  --red: #a03028;
  --gold: #8f6a1e;
  --blue: #1e3a5f;
  --green-dark: #175236;
  --lime: #8f6a1e;
  --accent: #8f6a1e;
  /* lines & depth */
  --line: rgba(29, 37, 49, .2);
  --line-strong: rgba(29, 37, 49, .42);
  --shadow: 0 1px 2px rgba(29, 37, 49, .05), 0 12px 34px rgba(29, 37, 49, .08);
  --radius: 4px;
  --max: 1120px;
  /* type */
  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html[data-theme="dark"] {
  --paper: #141a24;
  --paper-2: #10151d;
  --sheet: #1a212c;
  --ink: #e7e3d8;
  --muted: #9aa1ad;
  --dim: #838994;
  --navy: #aec4e0;
  --navy-deep: #0f151f;
  --brass: #d0aa52;
  --brass-bright: #ddb763;
  --lime: #a9cf55; --lime-bright: #bcdc6a;
  --green: #4fae85;
  --red: #e07a6d;
  --gold: #c9a24f;
  --blue: #a7bedb;
  --green-dark: #6cc39a;
  --lime: #c9a24f;
  --accent: #c9a24f;
  --line: rgba(231, 227, 216, .15);
  --line-strong: rgba(231, 227, 216, .34);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 38px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

/* ---------------- base ---------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; min-height: 100vh; color: var(--ink); background: var(--paper);
  font: 16px/1.65 var(--sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); }
::selection { background: rgba(178, 138, 53, .28); }
.wrap { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brass-bright); outline-offset: 3px; border-radius: 2px;
}
.skip-link { position: fixed; z-index: 200; top: 10px; left: 10px; transform: translateY(-160%); padding: 10px 16px; background: var(--navy); color: var(--sheet); font-weight: 700; border-radius: 3px; }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------- the masthead ---------------- */
.site-head { position: sticky; z-index: 50; top: 0; background: var(--paper); border-bottom: 1px solid var(--line-strong); }
.site-head::before { content: ""; display: block; height: 6px; background: var(--navy); border-bottom: 1px solid var(--brass-bright); }
.mast-in { display: flex; align-items: baseline; gap: 26px; padding: 22px 0 14px; }
.mast-brand {
  font-family: var(--serif); font-size: 44px; line-height: .9; font-weight: 700;
  letter-spacing: .16em; color: var(--ink); text-transform: uppercase;
}
.mast-brand:hover { color: var(--navy); }
.mast-brand .mast-section { font-family: var(--sans); font-size: .38em; font-weight: 800; letter-spacing: .22em; color: var(--brass); vertical-align: .2em; white-space: nowrap; }
.mast-edition { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.mast-date { font-size: 10.5px; font-weight: 800; letter-spacing: .22em; color: var(--brass); text-transform: uppercase; }
.mast-tag { font-family: var(--serif); font-style: italic; font-size: 13.5px; color: var(--muted); }
.mast-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.main-nav { border-top: 1px solid var(--line); background: var(--paper); }
.mast-nav { display: flex; align-items: center; gap: 4px; min-height: 46px; }
.main-nav a {
  padding: 8px 13px; color: var(--muted); font-size: 12px; font-weight: 750;
  letter-spacing: .12em; text-transform: uppercase;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--lime-bright); }
.main-nav a.nav-cta { color: var(--sheet); background: var(--navy); border-radius: 2px; margin-left: 8px; padding: 7px 14px; }
.main-nav a.nav-cta:hover { background: var(--navy-deep); box-shadow: none; color: var(--sheet); }
.nav-search-form { display: inline-flex; }
.nav-search-form input {
  width: 150px; padding: 7px 11px; font: 13px var(--sans); color: var(--ink);
  background: var(--sheet); border: 1px solid var(--line); border-radius: 2px;
}
.nav-search-form input:focus { width: 190px; border-color: var(--brass); outline-offset: 0; }
.theme-toggle, .nav-toggle {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  background: none; border: 1px solid var(--line); border-radius: 2px; color: var(--muted); cursor: pointer;
}
.theme-toggle:hover, .nav-toggle:hover { color: var(--ink); border-color: var(--line-strong); }
.icon-moon { display: none; }
html[data-theme="dark"] .icon-moon { display: block; }
html[data-theme="dark"] .icon-sun { display: none; }
.nav-toggle { display: none; }

/* ---------------- layout rhythm ---------------- */
.section { padding: clamp(44px, 7vw, 84px) 0; }
.section.alt { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 28px; margin-bottom: 30px; }
.section-head p { color: var(--muted); font-size: 14px; max-width: 380px; margin: 0; }
.section-head h2, .section-head h1 {
  font-family: var(--serif); font-weight: 700; letter-spacing: -.012em;
  font-size: clamp(24px, 3.4vw, 34px); line-height: 1.12; margin: 6px 0 0;
}
.eyebrow, .kicker {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 10px;
  color: var(--brass); font-size: 11.5px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
}
.kicker-dot { width: 8px; height: 8px; background: var(--lime-bright); box-shadow: 0 0 0 3px rgba(164, 198, 44, .22); }
.section-head h2::after, .toc-head h2::after {
  content: ""; display: block; width: 46px; height: 4px; background: var(--lime-bright); margin-top: 14px;
}

/* ---------------- buttons & actions ---------------- */
.btn {
  min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 20px; border: 1px solid var(--navy); border-radius: 2px;
  background: var(--navy); color: var(--sheet); font: 700 13.5px var(--sans);
  letter-spacing: .04em; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.btn.secondary { background: transparent; color: var(--navy); border-color: var(--line-strong); }
.btn.secondary:hover { border-color: var(--navy); background: rgba(30, 58, 95, .06); color: var(--navy); }
html[data-theme="dark"] .btn.secondary { color: var(--navy); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------------- breadcrumb ---------------- */
.breadcrumb { padding: 18px 0 12px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--brass); }

/* ---------------- page hero (article opening) ---------------- */
.page-hero { padding: clamp(26px, 4.5vw, 54px) 0 34px; border-bottom: 3px double var(--line-strong); margin-bottom: 10px; }
.page-hero h1 {
  font-family: var(--serif); font-weight: 700; letter-spacing: -.015em;
  font-size: clamp(31px, 5.2vw, 52px); line-height: 1.08; margin: 10px 0 0; max-width: 21em;
}
.page-hero > p { font-family: var(--serif); font-size: clamp(16.5px, 2vw, 19.5px); line-height: 1.55; color: var(--muted); max-width: 62ch; margin: 16px 0 0; }
.page-hero .article-dek { font-style: italic; }
.level-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 20px 0 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.level-line .level-desc { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--muted); }
.byline { margin: 14px 0 0; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; max-width: none; }
.byline a { color: var(--navy); font-weight: 650; border-bottom: 1px solid rgba(30, 58, 95, .35); }
.byline a:hover { color: var(--brass); border-color: var(--brass); }
.page-hero .btn { margin-top: 22px; min-height: 40px; }

/* ---------------- the reading experience ---------------- */
.prose, .legal-prose { max-width: 720px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) 0 26px; }
.prose h2, .legal-prose h2 {
  font-family: var(--serif); font-weight: 700; letter-spacing: -.01em;
  font-size: clamp(23px, 3vw, 30px); line-height: 1.16;
  margin: 46px 0 12px; padding-top: 26px; border-top: 1px solid var(--line);
}
.prose > h2:first-child, .legal-prose > h2:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.prose h3, .legal-prose h3 { font-family: var(--serif); font-size: 20px; margin: 30px 0 8px; }
.prose h3::before {
  content: ""; display: inline-block; width: 20px; height: 4px;
  background: var(--lime-bright); margin-right: 11px; vertical-align: middle; border-radius: 1px;
}
.prose p, .prose li, .legal-prose p, .legal-prose li {
  font-family: var(--serif); font-size: 18px; line-height: 1.78; color: var(--ink);
}
.prose p { margin: 0 0 19px; }
.prose li + li, .legal-prose li + li { margin-top: 9px; }
.prose ul, .prose ol, .legal-prose ul, .legal-prose ol { padding-left: 26px; margin: 0 0 19px; }
.prose a, .legal-prose a { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(30, 58, 95, .35); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover, .legal-prose a:hover { color: var(--brass); text-decoration-color: var(--brass); }
.prose strong, .legal-prose strong { color: var(--ink); }
.prose blockquote, .legal-prose blockquote {
  margin: 34px 0; padding: 6px 0 6px 26px; border-left: 4px solid var(--lime-bright);
  font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.5; color: var(--ink);
}
.prose hr, .legal-prose hr { border: 0; height: 3px; width: 72px; background: var(--lime-bright); margin: 46px auto; border-radius: 1px; }
.prose table, .legal-prose table, .compare-table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 24px 0; }
/* The generators wrap every comparison table in .compare-scroll, but the class
   had no rule, so a 4-column table (422px) widened the page instead of
   scrolling. Squeezing four columns into 358px is not legible, so the wrapper
   scrolls and the document stays exactly viewport-wide. Same pattern as
   .mast-nav above. */
.compare-scroll {
  overflow-x: auto; overflow-y: hidden; max-width: 100%;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.compare-scroll > .compare-table { margin: 24px 0; min-width: 520px; }
/* Submission URLs are published as bare prose text ("When open, use
   https://uncannymagazine.moksha.io/publication/uncanny-magazine."). A
   63-character unbreakable token overflows its 328px list item and inflates
   every ancestor's scrollWidth, so the document measured 526px on a 390px
   screen. A scan of all 517 published writers pages found 385 such tokens in
   .prose alone, the longest 103 characters. break-word wraps a token only when
   it would otherwise overflow, and unlike `anywhere` it leaves intrinsic
   min-content sizing alone, so no other layout moves. */
.prose, .legal-prose, .prose-essay, .page-hero, .quick-facts, .tl { overflow-wrap: break-word; }
.prose th, .legal-prose th, .compare-table th {
  text-align: left; font: 800 11.5px var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); border-bottom: 2px solid var(--ink); padding: 8px 10px 8px 0;
}
.prose td, .legal-prose td, .compare-table td { font-family: var(--serif); font-size: 15.5px; border-bottom: 1px solid var(--line); padding: 10px 10px 10px 0; vertical-align: top; }
.prose img { border: 1px solid var(--line); padding: 6px; background: var(--sheet); }
.notice { border-left: 3px solid var(--red); padding: 10px 16px; background: rgba(160, 48, 40, .06); font-size: 14.5px; }
.prose .notice, .legal-prose .notice { font-family: var(--sans); }

/* guide reference furniture */
.guide-toc { border: 1px solid var(--line); background: var(--sheet); padding: 20px 24px; margin: 0 0 34px; }
.guide-toc b { font: 800 11.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.guide-toc ol { margin: 10px 0 0; }
.guide-toc li { font-family: var(--sans); font-size: 14.5px; }

/* ---------------- essays: the literary layout ---------------- */
.essay-hero h1 { border-bottom: 0; }
.essay-hero .essay-dek { font-family: var(--serif); font-style: italic; font-size: clamp(17px, 2.2vw, 21px); color: var(--muted); margin: 18px 0 0; max-width: 58ch; }
.prose-essay { max-width: 680px; }
.prose-essay > * { border-bottom: 1px solid var(--line); padding-bottom: 26px; margin-bottom: 26px; }
.prose-essay > *:last-child { border-bottom: 0; }
.prose-essay > p:first-of-type::first-letter {
  float: left; font-family: var(--serif); font-size: 3.9em; line-height: .78;
  padding: 6px 12px 0 0; font-weight: 700; color: var(--navy);
}
.prose-essay h2 { border-top: 0; padding-top: 0; }
.prose-essay h2::before { content: none; }

/* ---------------- indexes: typed lists, not card walls ---------------- */
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 44px; }
.guide-card {
  display: block; padding: 18px 0 20px; border-bottom: 1px solid var(--line);
  transition: border-color .15s ease;
}
.guide-card:hover { border-color: var(--lime); }
.guide-card h3 { font-family: var(--serif); font-size: 18.5px; line-height: 1.28; margin: 0 0 6px; }
.guide-card:hover h3 { color: var(--navy); }
.guide-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 44px; }
.path-card { display: flex; flex-direction: column; padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.path-card:hover { border-color: var(--brass); }
.card-num { font: 800 11px var(--sans); letter-spacing: .18em; color: var(--brass); }
.path-card h3 { font-family: var(--serif); font-size: 19px; margin: 8px 0 6px; }
.path-card p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.card-link { margin-top: auto; font: 750 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
.guide-card:hover .card-link, .path-card:hover .card-link { color: var(--navy); }

/* ---------------- the opportunity dossier (ledger) ---------------- */
.job-card {
  display: flex; flex-direction: column; padding: 22px 0 24px; border-bottom: 1px solid var(--line);
}
.job-card:hover { border-color: var(--lime); }
.job-card-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.job-card-title { font-family: var(--serif); font-size: 21px; line-height: 1.22; margin: 0 0 4px; }
.job-card:hover .job-card-title { color: var(--navy); }
.job-card-sub { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.pub-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0 0 6px; border-top: 1px solid var(--line); }
.pub-facts dt { font: 800 10.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); padding: 9px 0 1px; }
.pub-facts dd { margin: 0; font-size: 14.5px; padding-bottom: 9px; border-bottom: 1px dotted var(--line); }
.pub-facts dd:last-child { border-bottom: 0; }
.job-card-foot { margin-top: auto; padding-top: 14px; }
.verify-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font: 800 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 9px; border: 1px solid currentColor; border-radius: 2px;
}
.verify-badge.accepting, .verify-badge.rolling { color: var(--green); }
.verify-badge.upcoming, .verify-badge.limited, .verify-badge.needs-verification { color: var(--brass); }
.verify-badge.closed { color: var(--red); }
.verify-badge.verify { color: var(--navy); }
.pay-approx { color: var(--dim); font-size: 12.5px; }

/* filters (functional panels — allowed to be boxes) */
#opp-filter, .filter-bar {
  border: 1px solid var(--line); border-top: 3px solid var(--brass-bright); background: var(--sheet);
  padding: 16px 18px; margin: 0 0 30px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
#opp-filter select, #opp-filter input, .filter-bar select, .filter-bar input, .tk-field input, .tk-field select, .tk-field textarea {
  font: 13.5px var(--sans); color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 2px; padding: 8px 10px;
}
.filter-chip {
  display: inline-flex; align-items: center; padding: 6px 12px; cursor: pointer;
  font: 700 12px var(--sans); letter-spacing: .04em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; background: transparent;
}
.filter-chip:hover { color: var(--ink); border-color: var(--line-strong); }
.filter-chip.is-on { color: var(--sheet); background: var(--navy); border-color: var(--navy); }
.filter-status { font-size: 13px; color: var(--muted); }
/* A <select> sizes to its longest option, and .opp-filter-grid is a flex item of
   #opp-filter, so the default min-width:auto kept it at the option's intrinsic
   width (360px) and pushed the page 7px wide on a 390px screen. min-width:0 lets
   the flex item shrink; the control then fills its cell and the browser ellipsises
   the option text instead of overflowing. */
/* Deliberately minimal: .opp-field also styles rows in the opportunity list and
   the fields already stack full width, so only the shrinking behaviour changes.
   No display:flex here - that would turn the stacked fields into columns. */
.opp-filter-grid, .opp-filter-search { min-width: 0; }
.opp-filter-grid { flex: 1 1 100%; }
.opp-filter-grid select, .opp-filter-grid input, .opp-filter-search input {
  width: 100%; min-width: 0; max-width: 100%;
}
.empty, [id$="-empty"] { padding: 34px 0; color: var(--muted); font-family: var(--serif); font-style: italic; }

/* ---------------- country atlas ---------------- */
.country-chip, .chip-card {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
  border: 1px solid var(--line); border-left: 4px solid var(--lime-bright); background: var(--sheet);
}
.country-chip:hover, .chip-card:hover { border-color: var(--brass); border-left-color: var(--navy); }
.chip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.chip-card b { font-family: var(--serif); font-size: 17px; }
.chip-card span { color: var(--muted); font-size: 13px; }
.chip-name { font-weight: 700; }
.chip-n { color: var(--lime); font-weight: 800; font-size: 12.5px; letter-spacing: .08em; }

/* ---------------- home: cover, contents, desk, archive ---------------- */
.cover { padding: clamp(48px, 8vw, 104px) 0 clamp(40px, 6vw, 72px); border-bottom: 3px double var(--line-strong); }
.cover-line { color: var(--brass); font: 800 11.5px var(--sans); letter-spacing: .24em; text-transform: uppercase; margin: 0 0 22px; }
.cover-title {
  font-family: var(--serif); font-weight: 700; letter-spacing: -.018em;
  font-size: clamp(38px, 6.6vw, 74px); line-height: 1.02; margin: 0; max-width: 15em;
}
.cover-title em { font-style: italic; color: var(--navy); }
.cover-dek { font-family: var(--serif); font-size: clamp(17px, 2.2vw, 21px); line-height: 1.6; color: var(--muted); max-width: 60ch; margin: 26px 0 0; }
.cover-facts { display: flex; flex-wrap: wrap; gap: 34px; margin: 38px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.cover-facts div { display: flex; flex-direction: column; gap: 2px; }
.cover-facts b { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--ink); }
.cover-facts span { font: 750 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.cover-facts .asof { align-self: center; margin-left: auto; font: italic 13px var(--serif); color: var(--dim); }
.toc { list-style: none; margin: 0; padding: 0; counter-reset: toc; border-top: 1px solid var(--line-strong); }
.toc li { border-bottom: 1px solid var(--line); }
.toc a { display: flex; align-items: baseline; gap: 26px; padding: 20px 6px; transition: background .15s ease, padding-left .15s ease; }
.toc a:hover { background: var(--sheet); padding-left: 14px; }
.toc-num { font: 800 13px var(--sans); letter-spacing: .1em; color: var(--lime); min-width: 34px; }
.toc-body { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.toc-body b { font-family: var(--serif); font-size: clamp(19px, 2.6vw, 25px); letter-spacing: -.01em; }
.toc-body small { color: var(--muted); font-size: 13.5px; }
.toc-go { color: var(--brass-bright); font-family: var(--serif); }
.toc a:hover .toc-go { color: var(--lime); }
.feature { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); padding: 10px 0 8px; }
.feature-kicker { color: var(--brass); font: 800 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; margin: 0 0 12px; }
.feature-title { font-family: var(--serif); font-weight: 700; font-size: clamp(27px, 4vw, 44px); line-height: 1.08; letter-spacing: -.014em; margin: 0 0 14px; }
.feature-title a:hover { color: var(--navy); }
.feature-dek { font-family: var(--serif); font-size: 17.5px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; }
.feature-meta { font: 750 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.feature-meta b { color: var(--green); }
.feature-side { border-left: 1px solid var(--line); padding-left: clamp(20px, 3vw, 36px); }
.desk { margin-top: 54px; }
.desk-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
.desk-head h3 { font: 800 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; margin: 0; }
.desk-head span { font: italic 13px var(--serif); color: var(--dim); }
.desk-row {
  display: grid; grid-template-columns: minmax(0, 2.2fr) 1fr 1fr 1.2fr; gap: 18px;
  align-items: baseline; padding: 13px 4px; border-bottom: 1px solid var(--line);
}
.desk-row:hover { background: var(--sheet); }
.desk-pub { font-family: var(--serif); font-size: 17px; }
.desk-pub small { display: block; font: 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-top: 2px; }
.desk-cell { font-size: 13.5px; color: var(--muted); }
.desk-cell.st-accepting, .desk-cell.st-rolling { color: var(--green); font-weight: 700; }
.desk-cell.st-closed { color: var(--red); }
.desk-cell.st-upcoming, .desk-cell.st-limited, .desk-cell.st-needs-verification { color: var(--brass); }
.desk-foot { padding: 16px 4px 0; }
.tool-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); columns: 2; column-gap: 56px; }
.tool-index li { break-inside: avoid; border-bottom: 1px solid var(--line); }
.tool-index a { display: block; padding: 15px 4px; }
.tool-index a:hover { background: var(--sheet); }
.tool-index b { font-family: var(--serif); font-size: 17.5px; display: block; }
.tool-index a:hover b { color: var(--navy); }
.tool-index span { font-size: 13.5px; color: var(--muted); }
.archive-line { font-family: var(--serif); font-size: clamp(18px, 2.6vw, 24px); line-height: 1.6; max-width: 30em; margin: 0; }
.archive-line a { border-bottom: 1px solid var(--brass); color: var(--ink); }
.archive-line a:hover { color: var(--brass); }
.archive-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* trust strip */
.trust-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--sheet); }
.trust-grid { display: flex; flex-wrap: wrap; gap: 10px 40px; padding: 18px 0; }
.trust-item { font: 650 13px var(--sans); color: var(--muted); display: inline-flex; gap: 9px; align-items: center; }
.trust-icon { color: var(--green); font-weight: 900; }

/* legacy hero/verify-card on /writing/ hub & others */
.hero { padding: clamp(40px, 6vw, 72px) 0 30px; border-bottom: 3px double var(--line-strong); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.hero h1 { font-family: var(--serif); font-weight: 700; letter-spacing: -.015em; font-size: clamp(32px, 5vw, 54px); line-height: 1.06; margin: 8px 0 0; }
.hero h1 em { color: var(--navy); font-style: italic; }
.hero-copy { font-family: var(--serif); font-size: clamp(16.5px, 2vw, 19.5px); line-height: 1.6; color: var(--muted); max-width: 58ch; margin: 20px 0 0; }
.verify-card { border: 1px solid var(--line); border-top: 3px solid var(--brass-bright); background: var(--sheet); padding: 20px 22px; }
.verify-title { font: 800 12px var(--sans); letter-spacing: .18em; text-transform: uppercase; margin: 0; color: var(--ink); }
.live-tag { color: var(--green); font: 800 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.verify-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.verify-date { font: italic 13.5px var(--serif); color: var(--dim); margin: 6px 0 14px; }
.metric-row { display: flex; gap: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.metric b { display: block; font-family: var(--serif); font-size: 27px; line-height: 1; }
.metric span { font: 700 10.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.verify-note { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 14px 0 0; }
.location-picker { margin-top: 34px; }
.location-picker-label { font: 800 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 14px; }
.location-picker-hint { color: var(--dim); font-weight: 500; text-transform: none; letter-spacing: 0; }

/* section category nav strip */
.section-nav {
  display: flex; overflow-x: auto; gap: 2px; border-bottom: 1px solid var(--line-strong);
  background: var(--paper-2); padding: 0 18px; scrollbar-width: none;
}
.section-nav::-webkit-scrollbar { display: none; }
.section-nav a {
  padding: 11px 11px; white-space: nowrap; color: var(--muted);
  font: 700 12px var(--sans); letter-spacing: .06em;
}
.section-nav a:hover { color: var(--ink); }
.section-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--lime-bright); }

/* ---------------- tools (instruments) ---------------- */
.tool-box {
  border: 1px solid var(--line-strong); border-top: 4px solid var(--navy); background: var(--sheet);
  padding: clamp(18px, 3.5vw, 38px); margin: 10px 0 30px;
}
.tool-prose > p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 16px; }
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 6px 0; }
.tool-input label { display: block; font: 750 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.tool-input input, .tool-input select, .tool-input textarea {
  width: 100%; padding: 10px 12px; font: 14px var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px;
}
.tool-input input:focus, .tool-input select:focus, .tool-input textarea:focus { border-color: var(--brass); }
.tool-note, .meta, .source-line { font: 12.5px var(--sans); color: var(--dim); line-height: 1.55; }
.source-line { display: flex; justify-content: space-between; gap: 18px; padding-top: 14px; border-top: 1px solid var(--line); margin-top: 26px; }
#agr-sheet, #inv-sheet, #ltr-sheet { box-shadow: var(--shadow); }

/* ---------------- tracker (the writer's desk) ---------------- */
.tk-field { display: flex; flex-direction: column; gap: 6px; }
.tk-field label { font: 750 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---------------- drawer & mobile nav ---------------- */
#drawer-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(15, 21, 31, .5); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
#drawer-backdrop.show { opacity: 1; pointer-events: auto; }
#site-drawer {
  position: fixed; z-index: 100; top: 0; right: 0; bottom: 0; width: min(360px, 88vw);
  background: var(--paper); border-left: 1px solid var(--line-strong);
  transform: translateX(102%); transition: transform .22s ease; overflow-y: auto; padding: 0 22px 30px;
}
#site-drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 14px; border-bottom: 3px double var(--line-strong); margin-bottom: 8px; }
.drawer-head .logo { font-family: var(--serif); font-weight: 700; letter-spacing: .14em; font-size: 19px; }
.drawer-close { background: none; border: 1px solid var(--line); border-radius: 2px; color: var(--muted); width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; }
.drawer-group { padding: 14px 0; border-bottom: 1px solid var(--line); }
.drawer-group > b, .drawer-group .drawer-group-title { display: block; font: 800 10.5px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin-bottom: 8px; }
.drawer-group a { display: block; padding: 5px 0; font-size: 14px; color: var(--ink); }
.drawer-group a:hover { color: var(--navy); }
.drawer-sub a { display: inline-block !important; margin-right: 12px; font-size: 13px !important; color: var(--muted) !important; }
.drawer-note { font: italic 13px var(--serif); color: var(--dim); }
.logo { display: inline-flex; align-items: center; gap: 9px; }
.logo-mark {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--navy); color: var(--sheet);
  font: 700 15px var(--serif); border-radius: 2px;
}
/* Batch 14b: the badge letter lives in CSS, not in the DOM — an aria-hidden
   "B" text node next to the "BRYME" wordmark still concatenated into a
   doubled-B artifact in innerText/scrapers. Pseudo-content never enters
   text extraction. */
.logo-mark::before { content: "B"; }
.bottom-nav, .mobile-nav {
  position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: none;
  grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line-strong);
  background: var(--paper); padding-bottom: env(safe-area-inset-bottom, 0);
}
/* 52px minimum: WCAG 2.5.8 target size and the gate both want >=50px. The
   icon and the label are separate flex rows so the height is explicit
   rather than whatever the wrapped inline text happens to measure. */
.bottom-nav a, .mobile-nav a {
  min-width: 0; min-height: 52px; padding: 8px 2px; color: var(--dim);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-align: center; font: 750 9.5px var(--sans);
  letter-spacing: .04em; text-transform: uppercase;
}
.bottom-nav a > span:first-child, .mobile-nav a > span:first-child { font-size: 15px; line-height: 1; }
.bottom-nav a[aria-current="page"], .mobile-nav a[aria-current="page"] { color: var(--brass); }
.mn-ico { display: block; font-size: 14px; }

/* ---------------- footer (colophon) ---------------- */
.site-foot { margin-top: 40px; border-top: 3px double var(--line-strong); background: var(--paper-2); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; padding: 44px 0 30px; }
.foot-brand p { font: italic 14px var(--serif); color: var(--muted); line-height: 1.6; max-width: 34ch; }
.foot-col { display: flex; flex-direction: column; gap: 8px; }
.foot-col b { font: 800 10.5px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin-bottom: 4px; }
.foot-col a { font-size: 13.5px; color: var(--muted); }
.foot-col a:hover { color: var(--navy); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 16px 0 26px; border-top: 1px solid var(--line); font: 12px var(--sans); color: var(--dim); }

/* ---------------- misc utilities ---------------- */
.home-search { display: flex; gap: 10px; max-width: 520px; margin: 26px auto 0; }
.home-search input { flex: 1; padding: 12px 14px; font: 15px var(--sans); color: var(--ink); background: var(--sheet); border: 1px solid var(--line-strong); border-radius: 2px; }
.opp-list { border-top: 1px solid var(--line-strong); }
.opp-field { border-bottom: 1px solid var(--line); }
.opp-field:hover { background: var(--sheet); }
.board-listed { font: 750 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
.wide { max-width: none; }
.integrity-notice { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--brass-bright); background: var(--sheet); font-size: 13px; color: var(--muted); }

/* ---------------- motion (restrained) ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .site-head, .cover-title, .cover-dek { animation-name: bsettle; animation-duration: .5s; animation-fill-mode: both; }
  .cover-dek { animation-delay: .08s; }
  @keyframes bsettle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------- responsive: the mobile composition ---------------- */
@media (max-width: 1020px) {
  .guide-grid, .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature { grid-template-columns: 1fr; }
  .feature-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 36px); }
  .mast-in { flex-wrap: wrap; gap: 8px 16px; padding: 14px 0 10px; }
  .mast-brand { font-size: 31px; }
  .mast-tag { display: none; }
  .mast-date { font-size: 9.5px; }
  .mast-tools { margin-left: auto; }
  .nav-search-form { display: none; }
  .nav-toggle { display: inline-grid; }
  .mast-nav { overflow-x: auto; scrollbar-width: none; }
  .mast-nav::-webkit-scrollbar { display: none; }
  .main-nav a { padding: 12px 10px; font-size: 11px; white-space: nowrap; }
  .main-nav a.nav-cta { margin-left: 2px; }
  .bottom-nav, .mobile-nav { display: grid; }
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body.drawer-open { overflow: hidden; }
  .guide-grid, .card-grid, .chip-grid { grid-template-columns: 1fr; }
  .tool-grid { grid-template-columns: 1fr; }
  .section { padding: 36px 0; }
  .section-head { flex-direction: column; gap: 8px; margin-bottom: 22px; }
  .desk-row { grid-template-columns: 1fr; gap: 3px; padding: 14px 2px; }
  .desk-cell { padding-left: 2px; }
  .tool-index { columns: 1; }
  .cover-facts { gap: 22px; }
  .cover-facts b { font-size: 24px; }
  .cover-facts .asof { flex-basis: 100%; margin-left: 0; }
  .pub-facts { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 22px; padding: 32px 0 20px; }
  .prose p, .prose li, .legal-prose p, .legal-prose li { font-size: 16.5px; line-height: 1.72; }
  .page-hero h1 { font-size: clamp(28px, 8.4vw, 38px); }
  .home-search { width: 100%; }
}

/* ---------------- print: the book leaves the screen ---------------- */
@media print {
  .site-head, .mobile-nav, .bottom-nav, .site-foot, .actions, .btn, #site-drawer, #drawer-backdrop, .section-nav { display: none !important; }
  body { background: #fff; color: #000; }
  .prose, .prose-essay { max-width: none; }
}

/* masthead home icon */
.main-nav a.home-link { display: inline-grid; place-items: center; min-width: 24px; padding: 8px 10px; color: var(--brass); }
.main-nav a.home-link svg { width: 17px; height: 17px; }
.main-nav a.home-link:hover { color: var(--navy); box-shadow: inset 0 -3px 0 var(--lime-bright); }

/* ---------------- the writing studio (the desk) ---------------- */
.studio-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 4px 0 16px; }
.st-goalwrap { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 260px; }
.st-goalwrap label { font: 750 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.st-goalwrap input { width: 90px; padding: 7px 9px; font: 14px var(--sans); color: var(--ink); background: var(--sheet); border: 1px solid var(--line); border-radius: 2px; }
.st-track { flex: 1; max-width: 220px; height: 8px; background: var(--paper-2); border: 1px solid var(--line); }
.st-fill { height: 100%; width: 0; background: var(--lime-bright); transition: width .3s ease; }
.st-meter-txt { font: italic 12.5px var(--serif); color: var(--dim); }
.st-btns { display: flex; gap: 8px; }
.studio-desk { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
.st-side { border: 1px solid var(--line); border-top: 3px solid var(--navy); background: var(--sheet); padding: 16px 16px 14px; }
.st-side-head b, .st-export b { display: block; font: 800 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin-bottom: 10px; }
.st-list { max-height: 300px; overflow-y: auto; margin-bottom: 12px; }
.st-draft { display: flex; align-items: center; justify-content: space-between; gap: 6px; border-bottom: 1px solid var(--line); }
.st-draft.st-cur .st-open b { color: var(--navy); }
.st-draft.st-cur { box-shadow: inset 3px 0 0 var(--lime-bright); }
.st-open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; background: none; border: 0; padding: 9px 4px; text-align: left; cursor: pointer; font-family: var(--sans); }
.st-open b { font-family: var(--serif); font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-open span { font: 11.5px var(--sans); color: var(--dim); }
.st-acts { display: flex; gap: 6px; }
.st-ren, .st-del { background: none; border: 0; color: var(--dim); font: 11px var(--sans); cursor: pointer; padding: 4px 2px; }
.st-ren:hover, .st-del:hover { color: var(--red); }
.st-none { font: italic 13.5px var(--serif); color: var(--dim); padding: 8px 2px; }
.st-export b { margin-top: 6px; }
.st-export div { display: flex; flex-wrap: wrap; gap: 6px; }
.st-export .btn { min-height: 34px; padding: 6px 11px; font-size: 12px; }
.st-export p { font: italic 12px var(--serif); color: var(--dim); margin: 10px 0 0; }
.st-paper { border: 1px solid var(--line-strong); border-top: 4px solid var(--navy); background: var(--sheet); padding: clamp(20px, 3.5vw, 44px); display: flex; flex-direction: column; }
#st-title { font-family: var(--serif); font-size: 24px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 0 0 12px; margin-bottom: 16px; }
#st-text { font-family: var(--serif); font-size: 18px; line-height: 1.85; color: var(--ink); background: transparent; border: 0; min-height: 54vh; resize: vertical; padding: 0; }
#st-title:focus, #st-text:focus { outline: none; border-color: var(--brass); }
.st-statusrow { display: flex; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.st-stats { font: 12.5px var(--sans); color: var(--muted); }
.st-status { font: 700 12.5px var(--sans); color: var(--green); opacity: 0; transition: opacity .2s ease; }
.st-status[data-on] { opacity: 1; }
.st-status[data-on]::before { content: "\2713\00a0\00a0"; }
body.studio-focus .site-head, body.studio-focus .site-foot, body.studio-focus .mobile-nav, body.studio-focus .bottom-nav, body.studio-focus .breadcrumb, body.studio-focus .page-hero, body.studio-focus .section.alt { display: none !important; }
body.studio-focus { padding-bottom: 0; }
#st-printpage { display: none; }
@media print {
  body.studio-focus .st-btns, body.studio-focus .st-statusrow { display: flex !important; }
  .studio-desk, .studio-bar, .st-side, .st-btns, .st-statusrow { display: none !important; }
  #st-printpage { display: block; }
  #st-printpage h2 { font-family: var(--serif); margin: 0 0 14px; }
  #st-printpage div { font-family: var(--serif); font-size: 12pt; line-height: 1.65; white-space: pre-wrap; }
}
@media (max-width: 860px) {
  .studio-desk { grid-template-columns: 1fr; }
  .st-list { max-height: 180px; }
  #st-text { min-height: 40vh; }
}

/* ---------------- STEP 6: atlas board, mega-menu, A-Z index ---------------- */
/* minmax(0, 1fr), not 1fr: a 1fr track refuses to shrink below its items'
   min-content width, so at 768px the six-column board overflowed its 720px
   .wrap by 11px and widened the whole document. Hiding any one tile did not
   help - the grid just reflowed another tile into the same over-wide track. */
.atlas-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.atlas-tile { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 14px; border: 1px solid var(--line); border-bottom: 3px solid var(--brass-bright); background: var(--sheet); min-height: 64px; min-width: 0; overflow-wrap: break-word;
  transition: border-color .15s ease, transform .15s ease; }
.atlas-tile:hover { border-color: var(--lime); transform: translateY(-2px); }
.atlas-tile b { font-family: var(--serif); color: var(--ink); line-height: 1.15; }
.atlas-tile span { font: 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.atlas-tile.big { grid-column: span 2; grid-row: span 2; }
.atlas-tile.big b { font-size: 24px; }
.atlas-tile.big span { font-size: 12px; color: var(--brass); font-weight: 800; }
.atlas-tile.mid { grid-column: span 2; }
.atlas-tile.mid b { font-size: 18px; }
.atlas-tile.small b { font-size: 15px; }
.atlas-note { font: italic 13px var(--serif); color: var(--muted); align-self: center; }
.has-mega { position: relative; }
.mega { display: none; position: absolute; z-index: 80; left: 0; top: 100%; min-width: 300px; background: var(--paper); border: 1px solid var(--line-strong); border-top: 3px solid var(--lime-bright); box-shadow: var(--shadow); padding: 12px 0; }
.has-mega:hover .mega, .has-mega:focus-within .mega { display: grid; }
.mega a { display: block; padding: 9px 18px; font: 500 13.5px var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.mega a:hover { color: var(--navy); background: var(--sheet); box-shadow: none; }
.az-row { display: grid; grid-template-columns: 42px 1fr; gap: 18px; border-bottom: 1px solid var(--line); padding: 14px 0; }
.az-row b { font-family: var(--serif); font-size: 21px; color: var(--brass); }
.az-links { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.az-links a { font-size: 14px; color: var(--ink); border-bottom: 1px solid var(--line); padding: 2px 0; }
.az-links a:hover { color: var(--navy); border-color: var(--brass); }
/* Tablet: six columns are unreadable at 768px and the old 760px breakpoint left
   761-1023px on the desktop board, which is what overflowed. Listed before the
   760px rule so the narrower layout still wins below it. */
@media (max-width: 1023px) { .atlas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .atlas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .atlas-tile.big { grid-column: span 2; } }


/* Batch 12 (audit LOW: heavy DOMs): offscreen cards on the long writers lists
   skip rendering work on low-end devices. The DOM-based filter engines
   (opp-filter.js, article-filter.js) keep their contract - every card stays in
   the document, JS-off still shows everything, nothing is hidden by default. */
.job-card { content-visibility: auto; contain-intrinsic-size: auto 260px; }
.article-row { content-visibility: auto; contain-intrinsic-size: auto 150px; }

/* Batch 13 (re-audit): the facet filters (opp-filter.js, writing-filter.js,
   article-filter.js, level-filter.js, country-filter.js, tracker.js,
   purpose-finder.js) hide matches by setting the hidden ATTRIBUTE. Author
   display rules like `.job-card { display: flex }` override the UA default
   `[hidden] { display: none }`, so filtering updated the result count but
   never actually hid a card. This restore is global and !important so every
   component's hidden toggle works regardless of its own display rule. */
[hidden] { display: none !important; }

/* Batch 14 — the submission docket.
   Six answers per publication in one place, plus an explicit list of the ones
   the publication does not give. Sits directly under the page hero, because
   the decision it supports (is this pitch worth an evening) happens before the
   reader scrolls. Colours come only from the theme variables so the dark set
   inherits; the "Not stated" state is typed as text and the accent border is
   emphasis, never the signal. */
.docket-section { padding-top: 0; }
.docket { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; padding: clamp(22px, 3.4vw, 38px);
  border: 1px solid var(--line); border-top: 3px solid var(--navy); background: var(--sheet); }
.docket h2 { margin: 0 0 10px; font-family: var(--serif); font-size: clamp(24px, 3.6vw, 33px);
  line-height: 1.15; letter-spacing: -.02em; }
.docket-lede { max-width: 76ch; margin: 0 0 26px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.docket-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; margin: 0; }
.docket-row { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 0 18px; align-content: start;
  padding: 15px 0; border-top: 1px solid var(--line); }
.docket-row dt { margin: 0; padding-top: 3px; color: var(--muted); font-size: 10.5px; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase; }
.docket-row dd { margin: 0; }
.docket-row dd b { display: block; color: var(--ink); font-family: var(--serif); font-size: 17px;
  font-weight: 600; line-height: 1.4; overflow-wrap: break-word; }
.docket-row.gap { border-top-color: var(--brass); }
.docket-row.gap dt { color: var(--brass); }
.docket-row.gap dd b { color: var(--muted); }
.docket-note { display: block; margin-top: 6px; color: var(--muted); font-size: 13.5px; line-height: 1.65; }
.docket-gaps { margin-top: 28px; padding: 20px 22px; border-left: 3px solid var(--red);
  background: rgba(160, 48, 40, .06); }
.docket-gaps h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 19px; }
.docket-gaps p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.docket-gaps ul { margin: 0; padding-left: 20px; }
.docket-gaps li { color: var(--ink); font-size: 14px; line-height: 1.7; }
.docket-gaps li + li { margin-top: 6px; }
.docket-src { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--dim); font-size: 12.5px; line-height: 1.65; }
@media (max-width: 1020px) { .docket-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .docket { width: calc(100% - 36px); }
  .docket-row { grid-template-columns: 1fr; gap: 4px; }
  .docket-row dt { padding-top: 0; }
}

/* The evidence citation carries a full source URL, and a 70-character URL does
   not wrap by default — seven publication pages overflowed a 390px viewport on
   mobile until validate:browser caught it. URLs are the one place aggressive
   breaking is correct. */
.docket-note { overflow-wrap: anywhere; }
.docket-note a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 2px; overflow-wrap: anywhere; }
.docket-note a:hover { color: var(--brass); }

/* Lean editorial compatibility layer — replaces the 263 KB legacy platform sheet. */
.shell{width:min(calc(100% - 32px),var(--max));margin-inline:auto}
.top{position:sticky;z-index:50;top:0;border-bottom:1px solid var(--line);background:rgba(7,16,13,.9);backdrop-filter:blur(18px)}
.top .shell{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-size:18px;font-weight:950;letter-spacing:.08em}.brand b{color:var(--green)}
.topnav{display:flex;align-items:center;gap:5px}.topnav a{padding:9px 11px;border-radius:9px;color:var(--muted);font-size:13.5px;font-weight:750}.topnav a:hover,.topnav a.active,.topnav a[aria-current="page"]{color:var(--ink);background:rgba(0, 0, 0, .05)}
.top-tools{display:flex;align-items:center}.header-search{padding:8px 13px;border:1px solid var(--line);border-radius:10px;color:var(--lime);font-size:13px;font-weight:850}
.crumb{padding:24px 0 0;color:var(--muted);font-size:13px}.crumb a{color:#c9d5cf}.crumb a:hover{color:var(--green)}
.article-hero{position:relative;isolation:isolate;overflow:hidden;min-height:360px;margin:20px 0 0;padding:110px clamp(20px,5vw,58px) 42px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.article-hero-photo:before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--hero-img);background-size:cover;background-position:center}
.article-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,12,9,.16),rgba(5,12,9,.93) 83%)}
.article-hero .eyebrow{color:var(--lime);font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.article-hero h1{max-width:880px;margin:10px 0 12px;font-size:clamp(34px,6vw,64px);line-height:1.04;letter-spacing:-.045em;color:#fff}
.article-hero .lead{max-width:760px;margin:0;color:#3a3a38;font-size:17px;line-height:1.55}
.article-meta{display:flex;flex-wrap:wrap;gap:7px 14px;margin-top:18px;color:#bdc9c3;font-size:13px}.article-meta a{color:#fff;text-decoration:underline;text-underline-offset:3px}.article-meta span+span:before{content:"·";margin-right:14px;color:var(--dim)}
.article-byline{margin:12px 0 0;color:var(--muted);font-size:13px}
.article-body,.legal-prose{width:min(100%,780px);padding:42px 0 84px}
.prose h2{margin:42px 0 12px;font-size:clamp(25px,4vw,35px);line-height:1.18;letter-spacing:-.025em}.prose h3{margin:28px 0 8px;font-size:21px}.prose p,.prose li{color:#3a3a38;font-size:18px;line-height:1.82}.prose li+li{margin-top:8px}.prose ul,.prose ol{padding-left:24px}.prose a{color:var(--lime);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}.prose blockquote{margin:28px 0;padding:8px 0 8px 22px;border-left:3px solid var(--green);color:var(--ink);font-size:22px;line-height:1.5}
.article-source{padding:12px 16px;border-left:3px solid var(--gold);background:rgba(240,199,106,.07);color:#f4dba2!important;font-size:14px!important}
.article-related,.sp-related{margin-top:54px;padding-top:28px;border-top:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:16px}.tile{display:block;min-width:0}.poster{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.poster img{width:100%;height:100%;object-fit:cover;display:block}.tile h3{margin:9px 0 3px;font-size:14px;line-height:1.35}.tile-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:11px}.type-badge{padding:2px 6px;border-radius:4px;background:var(--panel-2);color:var(--green);font-size:9px;font-weight:900;letter-spacing:.07em}.tile-play{display:none}
.list{display:grid;gap:10px}.row{display:block;padding:14px 0;border-bottom:1px solid var(--line)}.row b{display:block}.meta{color:var(--muted)!important}
.sp-source,.sp-faq{margin:30px 0;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.sp-source h2,.sp-faq h2{margin-top:0}.sp-source p,.sp-source-note{font-size:14px!important;color:var(--muted)!important}
.sp-related h2{font-size:20px}.sp-rel-grid{display:flex;flex-wrap:wrap;gap:9px}.sp-rel{padding:7px 12px;border:1px solid var(--line);border-radius:999px;color:#3a3a38;font-size:13px}.sp-rel:hover{border-color:var(--green)}
.sp-table-wrap{max-width:100%;overflow-x:auto;margin:24px 0;border:1px solid var(--line);border-radius:12px}.sp-table{width:100%;min-width:620px;border-collapse:collapse;font-size:14px}.sp-table th,.sp-table td{padding:11px 13px;border-bottom:1px solid var(--line);text-align:left}.sp-table th{color:var(--muted);background:var(--panel);font-size:11px;text-transform:uppercase;letter-spacing:.07em}
.vcat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.vcat{display:flex;min-height:140px;flex-direction:column;justify-content:flex-end;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.vcat b{font-size:16px}.vcat span{margin-top:5px;color:var(--muted);font-size:12px}.vcat-photo{position:relative;isolation:isolate;overflow:hidden;color:#fff}.vcat-photo:before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--card-img);background-size:cover;background-position:center}.vcat-photo:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,12,9,.15),rgba(5,12,9,.92))}
.section{padding:56px 0}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:22px}.section-head h2{margin:0;font-size:30px}.section-head a{color:var(--green);font-weight:800}
.send-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:18px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.send-bar p{margin:0;color:var(--muted);font-size:13px}.send-wa{padding:8px 13px;border-radius:9px;background:#25d366;color:#06150e;font-size:13px;font-weight:900}
.quiet-link{border:0;background:transparent;color:var(--lime);font:inherit;font-weight:800;cursor:pointer}
.mobile-nav{display:none}.footer{border-top:1px solid var(--line);padding:54px 0 40px;background:#050b09}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px}.footer-brand p,.footer-note,.footer small{color:var(--muted);font-size:13px}.footer-col{display:flex;flex-direction:column;gap:8px}.footer-col h4{margin:0 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.1em}.footer-col a{color:var(--muted);font-size:13px}.footer-col a:hover{color:var(--green)}
.integrity-notice{position:relative;z-index:5;width:min(calc(100% - 32px),var(--max));margin:12px auto;padding:13px 18px;border:1px solid rgba(255,190,100,.38);border-radius:8px;background:#281b0d;color:#f3d7ad;font-size:13px}.integrity-notice b{color:#ffd08a}
@media(max-width:760px){
 .shell{width:min(calc(100% - 24px),var(--max))}.top .shell{min-height:58px}.topnav{display:none}.header-search{display:inline-flex}.article-hero{min-height:300px;margin-top:12px;padding:84px 18px 26px}.article-hero h1{font-size:clamp(30px,10vw,44px)}.article-hero .lead{font-size:15px}.article-body,.legal-prose{padding:28px 0 64px}.prose h2{margin-top:32px;font-size:25px}.prose p,.prose li{font-size:16px;line-height:1.72}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.section{padding:40px 0}.section-head h2{font-size:25px}.footer{padding-bottom:84px}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.mobile-nav{position:fixed;z-index:60;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);background:rgba(24, 24, 22, .97);padding-bottom:env(safe-area-inset-bottom,0)}.mobile-nav a{min-width:0;padding:8px 1px;color:var(--muted);text-align:center;font-size:9px;font-weight:800}.mobile-nav a[aria-current="page"]{color:var(--ink);background:rgba(143, 106, 30, .1)}.mobile-nav .mn-ico{display:block;color:var(--accent);font-size:14px}.integrity-notice{width:calc(100% - 24px)}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}