/* Fourth&Value — refinement layer.
   Loaded after each page's inline styles; tightens the whole site toward a
   clean, modern, data-terminal look: quieter borders, precise type, calm
   spacing, one restrained accent. */

:root {
  --field: #0a1220;          /* deeper, calmer navy */
  --panel: #101c30;
  --panel-2: #15243c;
  --chalk: #eef2f8;
  --muted: #7e90ab;
  --amber: #f0b429;
  --amber-dim: #6e5a1e;
  --hash: #1a2940;           /* softer hairline */
  --green: #4cc38a;
  --red: #e06c5a;
  --radius: 12px;
  --shadow: 0 6px 24px rgba(0, 0, 0, .28);
}

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { letter-spacing: .01em; }

/* ---------- nav: sticky glass ---------- */
nav.top {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10, 18, 32, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hash);
}
.navrow { padding-top: 12px; padding-bottom: 12px; }
.navrow .brand { letter-spacing: .06em; font-size: 17px; }
.dd > a { font-size: 13.5px; letter-spacing: .05em; padding: 7px 11px; border-radius: 8px; }
.dd .panel { border-radius: 10px; box-shadow: var(--shadow); padding: 5px; min-width: 176px; }
.dd .panel a { border-radius: 7px; font-size: 13.5px; padding: 8px 11px; }
.searchbox input {
  border-radius: 10px; width: 220px; font-size: 13.5px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.searchbox input:focus { box-shadow: 0 0 0 3px rgba(240, 180, 41, .14); }
.results { border-radius: 10px; box-shadow: var(--shadow); }

/* ---------- ticker: thinner, quieter ---------- */
.ticker { background: transparent; }
.tk-item { padding: 7px 14px; }
.tk-lg { font-size: 10.5px; letter-spacing: .12em; }
.tk-score { font-size: 12.5px; }
.tk-st { font-size: 10.5px; }

/* ---------- type: precision over shouting ---------- */
h1 { letter-spacing: -0.015em !important; text-transform: none !important; }
h2 { letter-spacing: .1em; }
.hero h1, .slide-body h2 { text-transform: none !important; letter-spacing: -0.015em !important; }
.teams { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600; }
.sec-head h3 { text-transform: none; letter-spacing: -0.01em; font-size: 21px; }
.kicker { letter-spacing: .14em; }

/* ---------- cards & boards: soft, consistent, responsive to hover ---------- */
.board, a.game, .mcard, .pkcard, a.card, .news-item, .bet {
  border-radius: var(--radius) !important;
  border-color: var(--hash) !important;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
a.game { padding: 15px 18px; }
a.game:hover, a.card:hover, .news-item:hover {
  border-color: #2a3d5e !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
a.game:hover .teams, a.card:hover b { color: var(--chalk); }
.slate { gap: 10px; }

/* best price: precise pill instead of glow */
td.best {
  text-shadow: none !important;
  color: var(--amber);
  position: relative;
}
td.best::after {
  content: ""; position: absolute; inset: 8px 8px;
  background: rgba(240, 180, 41, .08);
  border: 1px solid rgba(240, 180, 41, .25);
  border-radius: 8px; z-index: -1;
}
thead th { font-size: 12px; letter-spacing: .08em; }
tbody td, tbody th { padding-top: 12px; padding-bottom: 12px; }

/* pick box: calmer frame */
.pick-box { border-radius: var(--radius); border-color: var(--hash); background: var(--panel); }
.pick-box h2 { color: var(--muted); }
.score b { text-shadow: none; }

/* ---------- homepage components ---------- */
.hero-car { border-radius: 16px; box-shadow: var(--shadow); }
.slide-img { background: var(--panel-2); }
.htab { border-radius: 10px; font-size: 13px; letter-spacing: .04em; padding: 7px 14px; transition: all .15s ease; }
.htab.on { box-shadow: 0 2px 10px rgba(240, 180, 41, .25); }
.mcard { padding: 16px 18px; gap: 10px; }
.mcard .mtime { font-size: 10.5px; letter-spacing: .06em; }
.mteam b { text-transform: none; letter-spacing: 0; font-size: 15px; }
.mbtn { border-radius: 9px; text-transform: none; letter-spacing: .02em; font-size: 13.5px; transition: all .15s ease; }
.pkcard { border-color: var(--hash) !important; }
.pkcard .pkgame { text-transform: none; letter-spacing: 0; }
.cbtn { width: 36px; height: 36px; box-shadow: var(--shadow); transition: all .15s ease; }
.card-img { background: var(--panel-2); }
.dots .dot { width: 7px; height: 7px; }

/* ---------- ads: quiet frame ---------- */
.ad-slot.ad-on { border-radius: var(--radius); }
.ad-slot .ad-tag { font-size: 9.5px; }

/* ---------- footer ---------- */
footer { font-size: 11.5px; line-height: 1.9; }
footer a { text-decoration: none; }
footer a:hover { color: var(--chalk) !important; }

/* ---------- focus & motion ---------- */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* subtle page entrance */
@media (prefers-reduced-motion: no-preference) {
  .wrap > * { animation: rise .4s ease both; }
  .wrap > *:nth-child(2) { animation-delay: .04s; }
  .wrap > *:nth-child(3) { animation-delay: .08s; }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* picks always one line */
.mpick { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pkline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* matchup hero: tighter with city names */
.hero h1 { font-size: clamp(30px, 5vw, 46px) !important; }

/* ============ refinement pass 2 — quieter, airier, more precise ============ */

/* rhythm: more air everywhere */
.wrap { max-width: 1020px; }
section { margin-top: 64px !important; }
.hero { padding-top: 52px !important; }
footer { margin-top: 88px !important; }

/* section labels: small, calm, no shouting */
h2 { font-family: 'Inter', sans-serif !important; font-size: 12.5px !important;
     font-weight: 600 !important; letter-spacing: .06em !important;
     text-transform: uppercase; color: var(--muted) !important; }
.sec-head h3 { font-size: 19px; font-weight: 600; }
.sec-head a { font-family: 'Inter', sans-serif; font-size: 12.5px; }

/* tables: hairlines only, no boxes-in-boxes */
.board { background: transparent !important; border: none !important; }
.board table { background: var(--panel); border-radius: var(--radius); overflow: hidden; }
thead th { background: rgba(255, 255, 255, .02); font-family: 'Inter', sans-serif;
           font-size: 11px; font-weight: 600; color: var(--muted); }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: rgba(255, 255, 255, .02); }
tbody th, tbody td { border-bottom: 1px solid rgba(255, 255, 255, .05) !important; }

/* numbers: always tabular */
* { font-variant-numeric: tabular-nums; }

/* amber discipline: emphasis, not decoration */
.kicker { color: var(--muted) !important; }
.line { color: var(--chalk); }
.pick { color: var(--muted) !important; }
.tk-item.live .tk-st { color: var(--green); }
.tk-dot { background: var(--green); }

/* cards: barely-there borders, depth from surface */
a.game, .mcard, .pkcard, a.card, .news-item, .bet, .pick-box {
  border-color: rgba(255, 255, 255, .06) !important;
  background: var(--panel) !important;
}
a.game { padding: 16px 20px; }
.when { font-size: 12px; margin-top: 5px; }

/* buttons: solid primary on hover, calm at rest */
.mbtn { border-color: rgba(255, 255, 255, .12); color: var(--chalk); }
.mbtn:hover { background: var(--amber); border-color: var(--amber); color: var(--field); }
.htab { border-color: rgba(255, 255, 255, .1); }
.htab.on { box-shadow: none; }

/* selects & inputs: unified control style */
select, .searchbox input {
  background: var(--panel) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 9px !important;
}

/* prob bar: thinner, semantic */
.prob-bar { height: 6px !important; border-radius: 3px !important; }
.prob-home { background: var(--amber); }
.prob-away { background: #33486b; }

/* hero carousel: flatter, calmer */
.hero-car { box-shadow: none; border-color: rgba(255, 255, 255, .06); }
.slide-body .kick { color: var(--muted); }
.slide-body a.go { font-family: 'Inter', sans-serif; font-size: 13px; }

/* ticker: whisper mode */
.ticker { border-bottom-color: rgba(255, 255, 255, .05); }
.tk-item { border-right-color: rgba(255, 255, 255, .05); }

/* carousels: hide arrows until hover (desktop) */
@media (hover: hover) {
  .cbtn { opacity: 0; transition: opacity .2s ease; }
  .crail:hover .cbtn { opacity: 1; }
}

/* entrance animation: subtler */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* ============ pass 3 — sharper color, same discipline ============ */
:root {
  --amber: #ffb824;          /* hotter gold */
  --blue: #4da3ff;           /* electric data accent */
  --green: #3ddc97;
  --red: #ff6b57;
  --chalk: #f4f7fc;          /* brighter ink */
  --field: #080f1c;          /* deeper base = more contrast */
}
.brand span { color: var(--amber); }
.line { color: var(--amber); font-weight: 500; }        /* odds pop again */
.mml { color: var(--chalk); font-weight: 500; }
.mprob { color: var(--blue); }                           /* implied % = electric blue */
.prob-away { background: var(--blue) !important; opacity: .85; }
.prob-labels b { color: var(--chalk); }
.htab.on { background: var(--amber); border-color: var(--amber); box-shadow: 0 2px 14px rgba(255,184,36,.35); }
.mbtn:hover { box-shadow: 0 4px 16px rgba(255,184,36,.3); }
a.game:hover, a.card:hover, .news-item:hover, .mcard:hover { border-color: rgba(255,184,36,.45) !important; }
.tk-item.live .tk-st { color: var(--green); }
td.best { color: var(--amber); font-weight: 600; }
td.best::after { border-color: rgba(255,184,36,.35); background: rgba(255,184,36,.1); }
.pkcard .pkline { color: var(--amber); }
.dd .panel a:hover { color: var(--amber); }
.sec-head a { color: var(--amber); }
h1 { color: var(--chalk); }
/* gradient signature on the brand row of the homepage hero */
.hero-car { border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--amber), var(--blue)) 1; border-radius: 16px; }

/* ============ pass 4 — brand recolor: royal blue badge palette ============ */
:root {
  --field: #060809;            /* the badge's near-black */
  --panel: #0c1118;
  --panel-2: #121a26;
  --hash: #16202e;
  --amber: #2e6ce8;            /* accent role -> royal blue (from logo #0040a0 family, brightened for contrast) */
  --amber-dim: #123072;
  --blue: #7aa8ff;             /* secondary data accent -> ice blue */
  --chalk: #f5f7fa;
  --muted: #8494ab;
}
.brand span { color: #4d84ff; }
.htab.on { background: var(--amber); border-color: var(--amber); color: #fff; box-shadow: 0 2px 14px rgba(46,108,232,.45); }
.mbtn:hover { background: var(--amber); border-color: var(--amber); color: #fff; box-shadow: 0 4px 16px rgba(46,108,232,.4); }
.btn.gold, .btn[id] { }
td.best { color: #6d9bff; }
td.best::after { border-color: rgba(46,108,232,.5); background: rgba(46,108,232,.14); }
a.game:hover, a.card:hover, .news-item:hover, .mcard:hover { border-color: rgba(77,132,255,.5) !important; }
.line, .pkcard .pkline { color: #6d9bff; }
.mprob { color: var(--blue); }
.prob-home { background: var(--amber); }
.prob-away { background: #223752 !important; }
.sec-head a, .dd .panel a:hover, #reveal b, .kicker { color: #6d9bff !important; }
.hero-car { border-image: linear-gradient(90deg, #2e6ce8, #7aa8ff) 1; }
.cell.near, .key.near { background: #2e6ce8; border-color: #2e6ce8; color: #fff; }  /* wordle 'near' now blue */
.grp b { color: #fff; } .grp span { color: rgba(255,255,255,.8); }
.t0{background:#2e6ce8;} .t1{background:#3ddc97;} .t2{background:#7aa8ff;} .t3{background:#8f7bf0;}

/* ============ pass 5 — LIGHT MODE: white, royal blue, editorial ============ */
:root {
  --field: #f7f9fc;            /* page background */
  --panel: #ffffff;
  --panel-2: #eef2f8;
  --chalk: #0c1626;            /* primary ink */
  --ink-2: #3c4d66;            /* body text */
  --muted: #64748e;
  --hash: #e4e9f1;             /* hairlines */
  --amber: #2456d6;            /* primary accent: deep royal */
  --amber-dim: #b9c9ef;
  --blue: #2e6ce8;
  --green: #0f9d63;
  --red: #d64545;
  --shadow: 0 8px 28px rgba(16, 32, 64, .08);
}
body { background: var(--field); color: var(--chalk); }

/* nav: white glass */
nav.top { background: rgba(255, 255, 255, .85); border-bottom: 1px solid var(--hash); }
.brand { color: var(--chalk) !important; }
.brand span { color: var(--amber); }
.dd > a { color: var(--muted); }
.dd > a:hover, .dd .panel a:hover { color: var(--amber); }
.dd .panel { background: #fff; border: 1px solid var(--hash); }
.dd .panel a { color: var(--ink-2); }
.searchbox input { background: #fff !important; border-color: var(--hash) !important; color: var(--chalk); }
.results { background: #fff; border: 1px solid var(--hash); }
.results a { color: var(--ink-2); }

/* ticker */
.ticker { border-bottom-color: var(--hash); }
.tk-item { border-right-color: var(--hash); }
.tk-score { color: var(--chalk); }
.tk-lg { color: var(--muted); }

/* surfaces: white cards, quiet borders, real shadows on hover */
a.game, .mcard, .pkcard, a.card, .news-item, .bet, .pick-box, .board table, .grp-shell {
  background: #fff !important;
  border-color: var(--hash) !important;
}
a.game:hover, a.card:hover, .news-item:hover, .mcard:hover {
  border-color: #c9d6ef !important;
  box-shadow: var(--shadow);
}
.teams, .gh b { color: var(--chalk); }
.when { color: var(--muted); }
.line, .pkcard .pkline, td.best, .sec-head a, .kicker { color: var(--amber) !important; }
.mml { color: var(--chalk); }
.mprob { color: var(--blue); }

/* tables */
thead th { background: #f2f5fa; color: var(--muted); }
tbody tr:hover { background: #f6f8fc; }
tbody th, tbody td { border-bottom: 1px solid var(--hash) !important; color: var(--ink-2); }
tbody th { color: var(--chalk); }
td.best::after { background: rgba(36, 86, 214, .07); border-color: rgba(36, 86, 214, .3); }

/* headings & prose */
h1, h2, h3 { color: var(--chalk); }
.sub, .lede, p { color: var(--ink-2); }
.htab { background: #fff; border-color: var(--hash); color: var(--muted); }
.htab.on { background: var(--amber); border-color: var(--amber); color: #fff; box-shadow: 0 2px 12px rgba(36, 86, 214, .25); }
.mbtn { border-color: var(--hash); color: var(--chalk); background: #fff; }
.mbtn:hover { background: var(--amber); border-color: var(--amber); color: #fff; }
.btn { background: var(--amber) !important; color: #fff !important; border-color: var(--amber) !important; }
.cbtn { background: #fff; border-color: var(--hash); color: var(--chalk); }
select { background: #fff !important; border-color: var(--hash) !important; color: var(--chalk); }
.prob-away { background: #d7e0ef !important; }
.hero-car { background: #fff; border-color: var(--hash); }
.slide-img, .card-img { background: var(--panel-2); }
.slide-body .kick { color: var(--amber); }
footer { color: var(--muted); border-top: 1px solid var(--hash); }
footer a { color: var(--muted) !important; }
footer a:hover { color: var(--chalk) !important; }
.ad-slot { background: #fff; border: 1px dashed var(--hash); }

/* games (daily/parlay/mini/beat) — flip their local dark vars */
.cell { background: #fff; border-color: #d7deea; color: var(--chalk); }
.cell.miss { background: #e6eaf2; border-color: #e6eaf2; color: var(--muted); }
.key { background: #fff; border-color: var(--hash); color: var(--chalk); }
.key.miss { background: #e6eaf2; color: var(--muted); }
.sq { background: #fff; border-color: #d7deea; color: var(--chalk); }
.sq.word { background: #eaf0fb; }
.sq.blk { background: transparent; border-color: transparent; }
.tile { background: #fff; border-color: var(--hash); color: var(--chalk); }
.tile.sel { background: var(--chalk); color: #fff; border-color: var(--chalk); }
.cl { color: var(--ink-2); }
.cl.on { background: #eaf0fb; color: var(--chalk); }
.gcard, #reveal, .toc, .ex { background: #fff !important; border-color: var(--hash) !important; }
.ex, .ex b { color: var(--ink-2); }
.grp b { color: #fff; } .grp span { color: rgba(255,255,255,.9); }

/* article & guide pages: editorial breathing room */
.wrap { max-width: 980px; }


/* team names in matchup cards: one line always */
.mteam b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* matchup strip: clean rows of three on desktop */
@media (min-width: 860px) { .mrow { grid-template-columns: repeat(3, 1fr); } }

/* ============ pass 6 — top-of-page jewelry ============ */
/* gradient brand bar across the very top */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300;
  background: linear-gradient(90deg, #2456d6, #4d84ff 45%, #8fb3ff 75%, #d9e5ff);
}
/* soft sky wash behind the header zone */
nav.top {
  background: linear-gradient(180deg, #f2f6ff 0%, rgba(255,255,255,.92) 100%);
  box-shadow: 0 1px 0 var(--hash), 0 10px 30px rgba(36, 86, 214, .05);
}
.brand { font-size: 19px !important; }
.brand img { height: 30px !important; width: 30px !important; border-radius: 8px; box-shadow: 0 2px 8px rgba(12,22,38,.18); }

/* nav links: sliding underline on hover */
.dd > a {
  background-image: linear-gradient(var(--amber), var(--amber));
  background-size: 0% 2px; background-repeat: no-repeat; background-position: left calc(100% - 2px);
  transition: background-size .22s ease, color .15s ease; border-radius: 6px;
}
.dd > a:hover { background-size: 100% 2px; }

/* ticker: pill chips */
.ticker { padding: 8px 0 6px; background: transparent; border-bottom: 1px solid var(--hash); }
.tk-item {
  border: 1px solid var(--hash) !important; border-radius: 999px;
  background: #fff; margin: 0 5px; padding: 6px 14px !important;
  box-shadow: 0 1px 2px rgba(16,32,64,.04);
  transition: border-color .15s ease, transform .15s ease;
}
.tk-item:hover { border-color: #b9c9ef !important; transform: translateY(-1px); }
.tk-item.live { border-color: rgba(15,157,99,.45) !important; background: #f2fbf7; }

/* search: pill */
.searchbox input { border-radius: 999px !important; padding-left: 18px; }
.searchbox input::placeholder { color: #9aa8bf; }

/* editorial signature: short royal rule under every page h1 */
h1 { position: relative; padding-bottom: 14px; }
h1::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px;
  border-radius: 2px; background: linear-gradient(90deg, var(--amber), #7aa8ff);
}
.wrap[style*="text-align:center"] h1::after, .wrap h1[style*="text-align"]::after { left: 50%; transform: translateX(-50%); }

/* section heads get a whisper of the accent too */
.sec-head h3 { position: relative; padding-left: 14px; }
.sec-head h3::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px;
  border-radius: 2px; background: linear-gradient(180deg, var(--amber), #7aa8ff);
}

/* ============ pass 7 — header architecture ============ */
.navrow {
  display: flex !important; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; padding-top: 14px !important; padding-bottom: 14px !important;
}
.brand img { height: 40px !important; width: 40px !important; }
.brand-lockup { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: .04em; color: var(--chalk); }
.brand-name b { color: var(--amber); font-weight: 700; }
.brand-tag { font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; letter-spacing: .32em; color: var(--muted); margin-top: 2px; }

/* menu: contained segmented bar */
.menu {
  display: flex; align-items: center; gap: 2px;
  background: #fff; border: 1px solid var(--hash); border-radius: 999px;
  padding: 5px 8px; box-shadow: 0 2px 10px rgba(16, 32, 64, .05);
  margin: 0 auto;
}
.dd > a { padding: 8px 13px; border-radius: 999px; font-size: 13px; background-image: none; }
.dd > a:hover { background: #eef3fd; color: var(--amber); }

/* right cluster: search + CTA */
.nav-right { display: flex; align-items: center; gap: 10px; }
.searchbox input { width: 180px; }
.searchbox input:focus { width: 230px; transition: width .2s ease; }
.nav-cta {
  white-space: nowrap; background: var(--amber); color: #fff; text-decoration: none;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px;
  padding: 10px 16px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(36, 86, 214, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(36, 86, 214, .35); }

@media (max-width: 1080px) {
  .menu { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; }
  .nav-cta { display: none; }
}

/* nav: never wrap ugly — scroll within the pill instead */
.menu { flex-wrap: nowrap !important; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.dd > a { white-space: nowrap; }

/* ============ pass 8 — editorial article design ============ */
.art { max-width: 720px; margin: 0 auto; }
.art-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted); margin: 34px 0 14px; }
.art-pill { background: rgba(36,86,214,.09); color: var(--amber); border: 1px solid rgba(36,86,214,.22);
  border-radius: 999px; padding: 4px 12px; font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: .1em; }
.art h1 { font-size: clamp(30px, 4.6vw, 44px) !important; line-height: 1.12; letter-spacing: -.02em; margin-bottom: 10px; }
.art-hero { width: 100%; max-height: 360px; object-fit: cover; border-radius: 16px;
  margin: 22px 0 26px; box-shadow: 0 12px 36px rgba(16,32,64,.10); background: var(--panel-2); }
.art-lede { font-size: 19px !important; line-height: 1.7; color: var(--chalk) !important;
  font-weight: 450; margin-bottom: 20px; }
.art-lede::first-letter { font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 3.1em; float: left; line-height: .82; margin: 5px 10px 0 0; color: var(--amber); }
.art-p { font-size: 16.5px !important; line-height: 1.85; margin-bottom: 18px; color: var(--ink-2); }
.art-src { border-top: 1px solid var(--hash); padding-top: 16px; margin-top: 28px;
  font-size: 13px; color: var(--muted); }
.art-src a { color: var(--amber); }
/* related strip */
.art-rel { max-width: 980px; margin: 56px auto 0; }
.art-rel h2 { font-family: 'Space Grotesk', sans-serif !important; font-size: 20px !important;
  text-transform: none; letter-spacing: -.01em !important; color: var(--chalk) !important; margin-bottom: 16px; }
.rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.rel-card { background: #fff; border: 1px solid var(--hash); border-radius: 14px; overflow: hidden;
  text-decoration: none; transition: all .15s ease; display: flex; flex-direction: column; }
.rel-card:hover { border-color: #c9d6ef; box-shadow: var(--shadow); transform: translateY(-2px); }
.rel-card img { width: 100%; height: 130px; object-fit: cover; background: var(--panel-2); }
.rel-card b { color: var(--chalk); font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: 15px; line-height: 1.35; padding: 13px 15px 6px; }
.rel-card span { color: var(--muted); font-size: 12px; padding: 0 15px 14px; }

/* ============ pass 9 — mobile navigation ============ */
.mnav-btn { display: none; }
.mnav-sheet { display: none; }
@media (max-width: 860px) {
  .menu { display: none !important; }         /* hover dropdowns are a desktop pattern */
  .nav-cta { display: none; }
  .mnav-btn {
    display: block; background: #fff; border: 1px solid var(--hash); color: var(--chalk);
    font-size: 20px; line-height: 1; padding: 9px 13px; border-radius: 12px; cursor: pointer;
  }
  .navrow { flex-wrap: nowrap; }
  .searchbox input { width: 130px; }
  .searchbox input:focus { width: 160px; }

  body.mnav-open { overflow: hidden; }
  body.mnav-open .mnav-sheet { display: block; }
  .mnav-sheet {
    position: fixed; inset: 0; z-index: 400; background: var(--field);
    overflow-y: auto; padding: 18px 20px 40px;
  }
  .ms-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
  .ms-close { background: #fff; border: 1px solid var(--hash); border-radius: 10px;
    font-size: 16px; padding: 8px 12px; color: var(--chalk); }
  .ms-cta { display: block; text-align: center; background: var(--amber); color: #fff;
    text-decoration: none; font-weight: 600; padding: 13px; border-radius: 12px; margin-bottom: 10px;
    box-shadow: 0 4px 14px rgba(36,86,214,.28); }
  .ms-row { background: #fff; border: 1px solid var(--hash); border-radius: 14px;
    padding: 13px 16px; margin: 8px 0; }
  .ms-main { display: block; color: var(--chalk); text-decoration: none;
    font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 17px; }
  .ms-subs { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 7px; }
  .ms-subs a { color: var(--muted); text-decoration: none; font-size: 13.5px; }
}