/* The Born Again Ledger: design system */
:root{
  --paper:#FFFFFF; --paper-2:#F1F5FA; --ink:#0C2D4E; --ink-2:#2B4562; --muted:#5E6E80;
  --field:#1B65AE; --field-2:#0C2D4E; --gold:#D29D37; --gold-2:#E4B95C; --red:#1B65AE; --rule:#D9E1EA;
  --card:#FFFDF8; --shadow:0 1px 2px rgba(27,31,26,.06),0 8px 24px rgba(27,31,26,.08);
  --serif:"Barlow Condensed","Arial Narrow","Inter",sans-serif; --sans:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:720px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;padding:0 16px}
a{color:var(--field);text-decoration:none;border-bottom:1px solid rgba(22,56,40,.35)}
a:hover{border-bottom-color:var(--field)}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto}

/* masthead */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 0 10px;border-bottom:2px solid var(--ink)}
.topbar .brand{font-family:var(--serif);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:13px;border:0;color:var(--ink)}
.topbar .brand small{display:block;font-family:var(--sans);font-weight:500;letter-spacing:.12em;font-size:9px;color:var(--muted);margin-top:2px}
.topbar .meta{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:right;line-height:1.5;max-width:46%}
.topbar .meta b{color:var(--ink);font-weight:600}
.hairline{border-top:1px solid var(--ink);margin-top:3px}

/* hero */
.hero{padding:34px 0 18px;border-bottom:1px solid var(--rule)}
.kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);font-weight:700;margin:0 0 10px}
.hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(40px,9vw,64px);line-height:.98;letter-spacing:-.005em;margin:0 0 14px;text-transform:none}
.hero .dek{font-family:var(--sans);font-size:18px;line-height:1.4;color:var(--ink-2);margin:0 0 16px;font-weight:400}
.dateline{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dateline b{color:var(--ink);font-weight:600}

/* sections */
section.sec{padding:34px 0 8px}
/* Section heads: the loudest thing between the hero and the next section head.
   Scale: hero h1 40-64 > section h2 34-42 > story/card h3 22-30 > section sub 17 > body 16-17. */
.runhead{display:block;border-top:3px solid var(--ink);padding-top:14px;margin:0 0 20px;position:relative}
.runhead::before{content:"";position:absolute;left:0;top:-3px;width:56px;height:3px;background:var(--gold)}
.runhead .num{display:none}
.runhead h2{font-family:var(--serif);font-weight:700;font-size:34px;line-height:1;letter-spacing:.01em;text-transform:uppercase;margin:0;color:var(--ink)}
@media(min-width:900px){.runhead h2{font-size:42px}}
.runhead .sub{display:block;margin:8px 0 0;font-size:17px;line-height:1.4;color:var(--ink-2);font-weight:400;letter-spacing:0;text-transform:none}
p{margin:0 0 16px}
h3{font-family:var(--serif);font-size:28px;line-height:1.1;font-weight:600;margin:0 0 8px;letter-spacing:-.01em}
.small{font-size:14px;color:var(--muted)}
.note{background:var(--paper-2);border-left:3px solid var(--gold);padding:12px 14px;border-radius:4px;font-size:15px;margin:16px 0}
strong{font-weight:700}

/* story cards */
.story{display:grid;grid-template-columns:88px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--rule);align-items:start}
.story:last-child{border-bottom:0}
.story .logo{width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid var(--rule);object-fit:cover;box-shadow:var(--shadow)}
.story .lab{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:4px}
.story h3{font-size:26px;line-height:1.12}
@media(min-width:900px){.story h3{font-size:30px}}
.story p{font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.chip{font-size:12px;background:var(--card);border:1px solid var(--rule);border-radius:999px;padding:4px 10px;color:var(--ink-2);white-space:nowrap}
.chip b{color:var(--ink)}

/* slate cards */
.game{background:var(--card);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow);padding:16px;margin:0 0 14px}
.game .tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;justify-content:space-between}
.game .tag .gow{color:var(--red)}
.side{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:10px 0}
.side + .side{border-top:1px dashed var(--rule)}
.side img{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--rule)}
.side .who{font-family:var(--serif);font-weight:700;font-size:19px;line-height:1.1}
.side .team{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.side .proj{font-family:var(--serif);font-weight:800;font-size:24px;text-align:right;line-height:1}
.side .proj small{display:block;font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.14em;color:var(--muted)}
.bar{height:6px;background:var(--paper-2);border-radius:3px;overflow:hidden;margin:2px 0 8px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--field),var(--field-2))}
.bar i.b{background:linear-gradient(90deg,var(--gold),var(--gold-2))}
.series{font-size:13px;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:10px;margin-top:6px}
.series b{color:var(--ink)}
.series .pick{display:inline-block;margin-top:8px;background:var(--field);color:#fff;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:4px;font-weight:600}
.watch{font-size:15px;margin:10px 0 0}

/* tables */
table{width:100%;border-collapse:collapse;font-size:14px}
@media(max-width:480px){table{font-size:13px}td{padding:8px 4px}}
th{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;font-weight:600;padding:8px 6px;border-bottom:2px solid var(--ink)}
td{padding:9px 6px;border-bottom:1px solid var(--rule);vertical-align:top}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.who{font-weight:700}
td .t{display:block;font-size:12px;color:var(--muted);font-weight:400}
.tablewrap{overflow-x:auto;margin:0 -16px;padding:0 16px}
tr.me td{background:rgba(201,162,39,.10)}

/* draft strip */
.draft{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pick{background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:10px 10px 8px}
.pick .n{font-family:var(--serif);font-weight:800;font-size:22px;color:var(--gold);line-height:1}
.pick .p{font-weight:600;font-size:14px;margin-top:6px;line-height:1.2}
.pick .w{font-size:12px;color:var(--muted);margin-top:3px}

/* lists */
.items{list-style:none;padding:0;margin:0}
.items li{padding:12px 0;border-bottom:1px solid var(--rule);font-size:16px}
.items li:last-child{border-bottom:0}
.items .who{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--field);font-weight:700;display:block;margin-bottom:3px}
.awards{display:grid;grid-template-columns:1fr;gap:10px}
.award{background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:12px 14px}
.award b{font-family:var(--serif);font-size:17px;display:block;margin-bottom:2px}
.award span{font-size:14px;color:var(--ink-2)}
@media(min-width:560px){.awards{grid-template-columns:1fr 1fr}}
.picks li{display:flex;justify-content:space-between;gap:12px}
.picks li b{white-space:nowrap}

/* chart */
figure{margin:0 0 8px}
figcaption{font-size:12px;color:var(--muted);margin-top:6px;letter-spacing:.02em}
svg text{font-family:var(--sans)}

/* footer */
footer{margin:40px 0 30px;padding-top:16px;border-top:2px solid var(--ink);font-size:13px;color:var(--muted)}
footer .brand{font-family:var(--serif);font-weight:800;color:var(--ink);letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.nav{display:flex;gap:16px;font-size:13px;margin:10px 0}

/* index */
.latest{background:var(--field);color:#fff;border-radius:14px;padding:22px 20px;margin:22px 0;box-shadow:var(--shadow)}
.latest .kicker{color:var(--gold-2)}
.latest h2{font-family:var(--serif);font-size:clamp(26px,6vw,36px);line-height:1.08;margin:0 0 10px;font-weight:800}
.latest p{color:rgba(255,255,255,.85);font-size:16px}
.latest a.btn{display:inline-block;background:var(--gold);color:var(--ink);border:0;border-radius:6px;padding:10px 14px;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-top:6px}
.search{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--card);margin:6px 0 14px}
.issue-row{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule)}
.issue-row .no{font-family:var(--serif);font-weight:800;color:var(--gold);font-size:14px;letter-spacing:.06em;line-height:1.3}
.issue-row .no small{display:block;color:var(--muted);font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.12em}
.issue-row h3{font-size:20px;margin:0 0 4px}
.issue-row h3 a{border:0;color:var(--ink)}
.issue-row p{font-size:15px;color:var(--ink-2);margin:0}
.season-head{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:26px 0 4px;border-top:2px solid var(--ink);padding-top:10px}
.empty{color:var(--muted);font-size:14px;padding:12px 0}

.card-img{width:100%;height:auto;border-radius:12px;display:block;margin:10px 0 12px}
.pick-note{color:var(--ink-2);font-size:15px;margin-top:4px}

.topbar .brand{display:flex;align-items:center;gap:12px;text-transform:none;letter-spacing:0}
.topbar .wordmark{height:44px;width:auto;display:block}
.topbar .sitename{font-family:var(--serif);font-weight:700;font-size:20px;letter-spacing:.02em;color:var(--ink);line-height:1}
footer .brand{text-transform:none;letter-spacing:0;font-size:14px}

figure{margin:0}
figure.newscard{margin:0 0 22px}
figure.newscard figcaption{font-size:16px;line-height:1.55;color:var(--ink-2);padding:8px 2px 0}
figure.mcard{margin:0 0 10px}
.items.defs li{font-size:15px}
.story .plate{width:88px;height:88px;border-radius:50%;object-fit:cover;display:block}
@media(min-width:900px){.wrap{max-width:860px}.story{grid-template-columns:128px 1fr;gap:26px}.story .plate{width:128px;height:128px}}

.game figcaption{padding:10px 2px 0}
.game figcaption .score{margin:0 0 6px;font-size:16px}
.game figcaption .score .t{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.score{font-size:15px;color:var(--ink-2);margin:6px 0 0}
.cardhead{font-size:22px;line-height:1.15;margin:0 0 6px}
.cardhead .kick{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--field);font-weight:700;margin-bottom:2px}
.items.power li{display:flex;gap:10px;align-items:flex-start}
.items.power .mini{width:40px;height:40px;border-radius:50%;flex:0 0 auto}
.items.power .arrow{color:var(--gold);font-weight:700}
.items.power .t{display:block;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);font-size:13px}
h3.minor{font-size:18px;margin:18px 0 8px}
@media(max-width:360px){.story{grid-template-columns:1fr}.story .plate{width:72px;height:72px}}

/* picks board and reader-only text */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
figure.picksfig{margin:0 0 14px}

/* moments: one licensed clip per story, never a re-hosted photo */
figure.moment{margin:6px 0 22px}
figure.moment .yt{display:block;position:relative;border:0;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,var(--field),var(--ink));aspect-ratio:16/9;max-width:100%}
figure.moment .yt img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;position:absolute;inset:0}
figure.moment .yt .lab{position:absolute;left:16px;bottom:12px;color:#fff;font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.6)}
figure.moment .yt .play{position:absolute;left:50%;top:50%;width:72px;height:50px;margin:-25px 0 0 -36px;background:var(--gold);border-radius:12px;box-shadow:var(--shadow)}
figure.moment .yt .play::after{content:"";position:absolute;left:29px;top:14px;border-style:solid;border-width:11px 0 11px 20px;border-color:transparent transparent transparent var(--ink)}
figure.moment iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:12px;display:block}
figure.moment .gif{position:relative;border-radius:12px;overflow:hidden;background:var(--paper-2)}
figure.moment .gif iframe{aspect-ratio:auto;height:min(60vw,420px)}
figure.moment figcaption{font-size:15px;line-height:1.5;color:var(--ink-2);padding:8px 2px 0;letter-spacing:0}

/* Commissioner's Desk portrait: floats beside the lede on wide screens, stacks above it on phones */
figure.deskfig{margin:0 0 20px;max-width:100%}
figure.deskfig img{width:100%;height:auto;border-radius:12px;display:block;box-shadow:var(--shadow)}
figure.deskfig figcaption{font-size:13px;color:var(--muted);margin-top:7px;font-style:italic}

/* issue sequence */
nav.seq{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:36px 0 0;padding:14px 0;border-top:3px solid var(--ink);font-size:14px}
nav.seq a{border:0;font-weight:600;color:var(--field)}
nav.seq .share{color:var(--muted);font-size:13px}
nav.seq .share b{color:var(--ink);font-weight:600}

/* publisher photos: their image, their server, credited and linked. Our generated card is the fallback underneath. */
figure.newscard.photo > a{border:0;display:block}
figure.newscard.photo img{width:100%;height:auto;border-radius:12px;display:block;margin:10px 0 0;background:var(--paper-2)}
/* the credit belongs to the publisher photo; if the photo fails the figure loses .photo and the credit goes with it */
figure.newscard:not(.photo) .credit{display:none}
/* on fallback our card carries the headline again, so the caption copy of it goes away */
figure.newscard:not(.photo) .cardhead{display:none}
figure.newscard.photo .credit{display:block;font-size:12px;color:var(--muted);margin-top:8px;letter-spacing:.02em;white-space:nowrap}
figure.newscard.photo .credit a{display:inline;color:var(--muted);border-bottom:1px solid var(--rule)}

/* inline reaction GIF inside a storyline: embedded from the host platform, sized as a reaction not a hero */
figure.reaction{margin:14px 0 4px;max-width:380px}
figure.reaction iframe{width:100%;aspect-ratio:16/10;border:0;border-radius:10px;display:block;background:var(--paper-2)}
figure.reaction figcaption{font-size:13px;line-height:1.45;color:var(--muted);margin-top:7px;font-style:italic}