/* ==========================================================================
   BROWNS DYNASTY MEDIA — Week 0 stylesheet  ·  v2, August 2026
   Cleveland identity: brown #311D00 · orange #ff3c00 · white
   TYPE: self-hosted Sohne / Sohne Schmal / Sohne Mono, plus Tiempos Text
   reserved for The Athletic page ONLY (see UI.md 3 — the Tiempos rule).
   Two chrome modes: .sitebar (editorial) and .breadcrumb (platform pages)
   ========================================================================== */

@font-face{font-family:'Sohne';src:url('fonts/Sohne-Buch.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Sohne';src:url('fonts/Sohne-Kraftig.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Sohne';src:url('fonts/Sohne-Halbfett.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Sohne';src:url('fonts/Sohne-Dreiviertelfett.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Sohne Schmal';src:url('fonts/SohneSchmal-Halbfett.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Sohne Schmal';src:url('fonts/SohneSchmal-Dreiviertelfett.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Sohne Mono';src:url('fonts/SohneMono-Buch.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Sohne Mono';src:url('fonts/SohneMono-Kraftig.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Tiempos Text';src:url('fonts/TiemposText-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Tiempos Text';src:url('fonts/TiemposText-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Tiempos Text';src:url('fonts/TiemposText-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Tiempos Text';src:url('fonts/TiemposText-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}


:root{
  /* --- Cleveland --- */
  --brown:#311D00;          /* primary ink + chrome */
  --brown-2:#241500;        /* deeper, for gradients + hovers */
  --brown-3:#4a2f0d;        /* lifted brown, borders on dark */
  --orange:#ff3c00;         /* display + accents ONLY (3.56:1 on white) */
  --orange-ink:#c22a00;     /* body-safe orange, 5.79:1 on white — links, small text */
  --orange-soft:#ffe9e2;    /* tint background */

  /* --- surfaces --- */
  --ink:#1b1410;            /* warm near-black body text */
  --ink-2:#3a322c;
  --body:#38312b;
  --muted:#78706a;
  --faint:#a89f97;
  --line:#e2ddd5;           /* warm hairline */
  --line-2:#efebe4;
  --paper:#f6f3ee;          /* bone */
  --paper-2:#ebe6dd;
  --card:#fffdfa;
  --white:#ffffff;

  /* --- type --- */
  --sans:'Sohne',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,Helvetica,Arial,sans-serif;
  --disp:'Sohne Schmal','Archivo','Arial Narrow',sans-serif;   /* display + condensed, one family */
  --cond:var(--disp);                                          /* legacy alias */
  --mono:'Sohne Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* Tiempos is NOT a site font. It is bound to .athletic only — see UI.md 3. */
  --serif:'Tiempos Text',Georgia,'Times New Roman',serif;

  --maxw:1200px;
  --read:720px;             /* article measure */
  --radius:10px;
  --shadow:0 1px 2px rgba(49,29,0,.06), 0 8px 24px rgba(49,29,0,.06);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--orange-ink); text-decoration:none}
a:hover{text-decoration:underline}
hr{border:0; border-top:1px solid var(--line); margin:32px 0}

h1,h2,h3,.section-title,.nav-title{font-family:var(--disp); letter-spacing:.012em; color:var(--ink); line-height:1.14; margin:0 0 .5em}
h1{font-size:clamp(32px,5.2vw,54px); font-weight:700}
h2{font-size:clamp(23px,3vw,32px); font-weight:700}
h3{font-size:19px; font-weight:700}
.eyebrow,.tag,.meta-label{
  letter-spacing:.07em; text-transform:uppercase; font-weight:700;
  font-size:11.5px; color:var(--muted);
}
.eyebrow.accent{color:var(--orange-ink)}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.read{max-width:var(--read); margin:0 auto; padding:0 22px}
.stack>*+*{margin-top:18px}
.muted{color:var(--muted)}
.small{font-size:14px}
.center{text-align:center}

/* ==========================================================================
   1. SITE CHROME — editorial pages
   ========================================================================== */
.sitebar{background:var(--brown); color:#f4ece4; position:sticky; top:0; z-index:60;
  border-bottom:3px solid var(--orange)}
.sitebar .inner{max-width:var(--maxw); margin:0 auto; padding:12px 22px;
  display:flex; align-items:center; gap:18px; justify-content:space-between}
.sitebar .brand{display:flex; align-items:center; gap:11px; min-width:0}
.sitebar .brand img{width:34px; height:34px; object-fit:contain; flex:none}
.sitebar .brand b{display:block; color:#fff; font-size:15px; font-weight:700; letter-spacing:.012em; line-height:1.15}
.sitebar .brand span{display:block; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:#c8a98c}
.sitenav{display:flex; gap:20px; flex-wrap:wrap; justify-content:flex-end}
.sitenav a{color:#e9ded3; font-size:14px; font-weight:500; white-space:nowrap}
.sitenav a:hover{color:#fff; text-decoration:none}
.sitenav a.on{color:#fff; box-shadow:inset 0 -2px 0 var(--orange)}

/* slim chrome — platform pages wear the platform's own UI below this */
.breadcrumb{background:var(--brown); color:#e9ded3; font-size:13.5px}
.breadcrumb .inner{max-width:var(--maxw); margin:0 auto; padding:11px 22px;
  display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.breadcrumb a{color:#f2e7dc}
.breadcrumb .sep{color:#8a6a4c}

.sitefoot{background:var(--brown); color:#c3b3a4; margin-top:64px; padding:34px 0 44px}
.sitefoot .inner{max-width:var(--maxw); margin:0 auto; padding:0 22px; font-size:13px}
.sitefoot b{color:#fff}
.sitefoot .disclaim{margin-top:12px; color:#9c8a79; max-width:760px; line-height:1.65}

/* ==========================================================================
   2. HUB
   ========================================================================== */
.hub-hero{background:var(--white); border-bottom:1px solid var(--line)}
.hub-hero .inner{max-width:var(--maxw); margin:0 auto; padding:38px 22px;
  display:flex; gap:26px; align-items:center; flex-wrap:wrap}
.hub-hero img.mark{width:78px; height:78px; object-fit:contain}
.hub-hero h1{margin:0; font-size:clamp(28px,4.4vw,44px)}
.hub-hero .sub{letter-spacing:.07em; text-transform:uppercase; font-size:12px; color:var(--muted); margin-top:6px; font-weight:600}
.hub-hero .right{margin-left:auto; text-align:right}
.hub-hero .right b{display:block; letter-spacing:.06em; text-transform:uppercase; font-size:12.5px; color:var(--ink)}
.hub-hero .right span{font-size:13px; color:var(--muted)}

.strip{padding:26px 0 6px}
.strip .logos{display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-top:12px; opacity:.62}
.strip .logos img{height:22px; width:auto; filter:grayscale(1)}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:16px 0 10px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); display:block; color:inherit}
.card:hover{text-decoration:none; border-color:#d2c8ba; transform:translateY(-1px); transition:.15s}
.card .head{background:var(--brown); color:#fff; padding:11px 16px; display:flex;
  justify-content:space-between; gap:10px; align-items:center;
  font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:700}
.card.newest .head{background:var(--orange); color:#2a1500}
.card .head .status{opacity:.78; font-weight:600}
.card .body{padding:18px}
.card .body h3{font-size:21px; margin:0 0 8px}
.card .body p{margin:0; color:var(--body); font-size:15px; line-height:1.6}
.card .go{display:inline-block; margin-top:14px; font-size:12.5px; letter-spacing:.06em;
  text-transform:uppercase; font-weight:700; color:var(--orange-ink)}

/* dense index of pages within a week */
.pagelist{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:14px}
.pagelist a{display:flex; gap:12px; align-items:flex-start; background:var(--card);
  border:1px solid var(--line); border-radius:8px; padding:14px 16px; color:inherit}
.pagelist a:hover{text-decoration:none; border-color:#d2c8ba}
.pagelist .k{font:700 11px/1.5 var(--sans); letter-spacing:.07em; text-transform:uppercase;
  color:var(--orange-ink); flex:none; width:96px; padding-top:2px}
.pagelist .t{font-weight:600; color:var(--ink); font-size:15.5px}
.pagelist .d{font-size:13.5px; color:var(--muted); margin-top:2px; line-height:1.5}

/* ==========================================================================
   3. EDITORIAL ARTICLE SHELLS
   ========================================================================== */
.outlet{background:var(--white); border-bottom:1px solid var(--line)}
.outlet .top{max-width:var(--maxw); margin:0 auto; padding:16px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px}
.outlet .masthead{font-family:var(--serif); font-weight:800; font-size:26px; color:#000; letter-spacing:-.01em}
.outlet .masthead img{height:26px; width:auto}
.outlet .acts{display:flex; gap:12px; align-items:center; font-size:13.5px}
.outlet .btn{background:#000; color:#fff; padding:8px 15px; border-radius:5px; font-weight:600}
.outlet .btn.orange{background:var(--orange); color:#2a1500}
.outlet .tabs{max-width:var(--maxw); margin:0 auto; padding:0 22px; display:flex; gap:20px;
  overflow-x:auto; border-top:1px solid var(--line-2)}
.outlet .tabs a{padding:12px 0; font-size:14px; color:#3a3a3a; white-space:nowrap; font-weight:500}
.outlet .tabs a.on{color:#000; font-weight:700; box-shadow:inset 0 -2px 0 #000}

article.piece{background:var(--white); padding:34px 0 56px}
article.piece .hd{max-width:820px; margin:0 auto; padding:0 22px}
article.piece h1{font-family:var(--serif); font-weight:800; font-size:clamp(32px,5.2vw,52px); letter-spacing:-.012em}
article.piece .deck{font-family:var(--serif); font-size:clamp(18px,2.4vw,22px); line-height:1.5; color:#2f2a26; margin:14px 0 0}
.byline{display:flex; align-items:center; gap:12px; margin:26px 0 0; padding:0 0 20px; border-bottom:1px solid var(--line)}
.byline .av{width:42px; height:42px; border-radius:50%; background:var(--brown); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex:none}
.byline .who b{display:block; color:var(--ink); font-size:15px}
.byline .who span{font-size:13px; color:var(--muted)}
.byline .rt{margin-left:auto; font-size:13px; color:var(--muted)}

article.piece .bodycopy{max-width:var(--read); margin:26px auto 0; padding:0 22px;
  font-family:var(--serif); font-size:19px; line-height:1.72; color:#241f1b}
article.piece .bodycopy p{margin:0 0 22px}
article.piece .bodycopy h2{font-family:var(--sans); font-size:23px; margin:38px 0 14px}
article.piece .bodycopy blockquote{margin:30px 0; padding:4px 0 4px 22px; border-left:3px solid var(--orange);
  font-size:22px; line-height:1.5; color:var(--ink)}
article.piece .bodycopy .figure{margin:30px 0}
article.piece .bodycopy .figure figcaption{font-family:var(--sans); font-size:13px; color:var(--muted); margin-top:8px}
.pullstat{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; margin:28px 0; font-family:var(--sans); font-size:15px}
.pullstat b{font-size:30px; color:var(--ink); display:block; line-height:1.1; letter-spacing:-.01em}

/* newspaper (cleveland.com / Plain Dealer) variant */
.paperdoc .bodycopy{font-family:var(--sans); font-size:17.5px; line-height:1.68}
.paperdoc .bodycopy p{margin:0 0 16px}
.paperdoc h1{font-family:var(--sans); font-weight:800}
.paperdoc .dateline{font-weight:700; text-transform:uppercase; letter-spacing:.03em}

/* ==========================================================================
   4. TRANSCRIPTS — press conference, radio, TV, podcast, YouTube
   ========================================================================== */
.transcript{max-width:840px; margin:0 auto; padding:30px 22px 60px}
.roomnote{background:var(--paper-2); border-left:3px solid var(--brown); padding:16px 18px;
  font-size:15px; color:var(--ink-2); border-radius:0 8px 8px 0; margin-bottom:30px}
.qa{border-top:1px solid var(--line); padding:20px 0}
.qa:first-of-type{border-top:0}
.qa .q{font-weight:700; color:var(--ink); margin:0 0 10px}
.qa .q .role{color:var(--muted); font-weight:600; font-size:13px; letter-spacing:.04em; text-transform:uppercase; display:block; margin-bottom:3px}
.qa .a{margin:0 0 14px}
.qa .a+.a{margin-top:14px}
.speaker{font-weight:700; color:var(--orange-ink)}
.stagedir{color:var(--muted); font-style:italic; font-size:15px}

.showhead{background:var(--brown); color:#fff; padding:26px 0}
.showhead .inner{max-width:840px; margin:0 auto; padding:0 22px; display:flex; gap:16px; align-items:center}
.showhead img{width:56px; height:56px; border-radius:10px; object-fit:cover; flex:none; background:#fff}
.showhead h1{color:#fff; margin:0; font-size:26px}
.showhead .meta{color:#d3bda8; font-size:13px; margin-top:4px; letter-spacing:.04em}
.segment{margin:34px 0 0}
.segment .label{display:inline-block; background:var(--orange-soft); color:#8c2000;
  padding:5px 11px; border-radius:999px; font:700 11px/1 var(--sans);
  letter-spacing:.07em; text-transform:uppercase; margin-bottom:14px}
.turn{margin:0 0 15px}
.turn .nm{font-weight:700; color:var(--ink)}
.caller{background:var(--paper-2); border-radius:8px; padding:14px 16px; margin:0 0 15px}
.caller .nm{color:var(--orange-ink)}

/* video/YouTube skin */
.ytshell{max-width:900px; margin:0 auto; padding:24px 22px 60px}
.ytcard{background:var(--white); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:28px}
.ytcard .thumb{background:linear-gradient(135deg,var(--brown),var(--brown-2)); color:#fff;
  padding:38px 22px; font-family:var(--cond); font-size:clamp(24px,4vw,38px); font-weight:600;
  letter-spacing:.01em; line-height:1.12; text-transform:uppercase}
.ytcard .bar{display:flex; gap:12px; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line-2)}
.ytcard .bar img{width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none}
.ytcard .bar b{display:block; color:var(--ink); font-size:15px}
.ytcard .bar span{font-size:13px; color:var(--muted)}
.ytcard .stats{margin-left:auto; font-size:13px; color:var(--muted); text-align:right}
.ytcard .body{padding:18px}

/* ==========================================================================
   5. REDDIT SKIN
   ========================================================================== */
.rdt{background:#fff; min-height:100vh}
.rdt-top{position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid #edeff1;
  display:flex; align-items:center; gap:14px; padding:9px 16px}
.rdt-top .logo{display:flex; align-items:center; gap:7px; font-weight:800; color:#ff4500; font-size:19px}
.rdt-top .logo .dot{width:26px; height:26px; border-radius:50%; background:#ff4500; flex:none}
.rdt-top .search{flex:1; max-width:620px; background:#f6f7f8; border:1px solid #edeff1;
  border-radius:999px; padding:9px 16px; color:#878a8c; font-size:14px}
.rdt-wrap{max-width:800px; margin:0 auto; padding:16px}
.rdt-about{border:1px solid #edeff1; border-radius:10px; padding:16px; margin-bottom:16px; background:#fff}
.rdt-about .k{font:700 12px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:#1c1c1c; margin-bottom:10px}
.rdt-about p{margin:0 0 12px; font-size:14px; color:#1c1c1c}
.rdt-about .nums{display:flex; gap:34px; margin:12px 0}
.rdt-about .nums b{display:block; font-size:17px; color:#1c1c1c}
.rdt-about .nums span{font-size:12px; color:#7c7c7c}
.rdt-about ul{margin:10px 0 0; padding-left:18px; font-size:13.5px; color:#5c5c5c}

.post{border:1px solid #edeff1; border-radius:10px; background:#fff; padding:14px 16px; margin-bottom:16px}
.post .ph{display:flex; align-items:center; gap:8px; font-size:12.5px; color:#7c7c7c; flex-wrap:wrap}
.post .ph .sub{font-weight:700; color:#1c1c1c}
.post .ph .av{width:22px; height:22px; border-radius:50%; background:#ff4500; flex:none}
.post h2{font-size:20px; line-height:1.28; color:#1c1c1c; margin:10px 0; font-weight:600}
.post .flair{display:inline-block; background:#edeff1; color:#1c1c1c; border-radius:4px;
  padding:2px 7px; font-size:11px; font-weight:600; vertical-align:middle; margin-left:4px}
.post .selftext{font-size:14px; color:#1c1c1c; margin:10px 0}
.post .score{font-size:12px; color:#7c7c7c; margin-top:8px}
.post .acts{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
.post .acts span{background:#f6f7f8; border-radius:999px; padding:6px 12px; font-size:12.5px; color:#5c5c5c; font-weight:600}
.botbox{border:1px dashed #d7dade; border-radius:8px; padding:12px 14px; font:13px/1.55 var(--mono); color:#5c5c5c; background:#fbfbfb; margin:10px 0}

.cmt{padding:10px 0 10px 0; border-top:1px solid #f2f3f4}
.cmt .ch{font-size:12.5px; color:#7c7c7c; display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.cmt .u{font-weight:600; color:#1c1c1c; word-break:break-word}
.cmt .fl{background:#edeff1; border-radius:3px; padding:1px 6px; font-size:11px; color:#3a3a3a; max-width:100%; overflow-wrap:anywhere}
.cmt .fl.op{background:#0079d3; color:#fff}
.cmt .tx{font-size:14.5px; color:#1c1c1c; margin:5px 0 4px; line-height:1.55}
.cmt .sc{font-size:12px; color:#7c7c7c; font-weight:600}
.cmt .sc.neg{color:#c33}
.cmt.removed .tx{color:#a0a0a0; font-style:italic}
.d1{margin-left:22px; border-left:2px solid #f2f3f4; padding-left:12px}
.d2{margin-left:44px; border-left:2px solid #f2f3f4; padding-left:12px}
.d3{margin-left:66px; border-left:2px solid #f2f3f4; padding-left:12px}
.d4{margin-left:88px; border-left:2px solid #f2f3f4; padding-left:12px}

/* ==========================================================================
   6. X SKIN
   ========================================================================== */
.xw{background:#fff; max-width:640px; margin:0 auto; border-left:1px solid #eff3f4; border-right:1px solid #eff3f4}
.xhead{position:sticky; top:0; background:rgba(255,255,255,.86); backdrop-filter:blur(8px);
  border-bottom:1px solid #eff3f4; padding:13px 16px; font-weight:800; font-size:19px; color:#0f1419; z-index:30}
.xp{display:flex; gap:12px; padding:13px 16px; border-bottom:1px solid #eff3f4}
.xp .av{width:42px; height:42px; border-radius:50%; flex:none; background:#cfd9de; object-fit:cover}
.xp .bd{flex:1; min-width:0}
.xp .nm{display:flex; gap:5px; align-items:center; flex-wrap:wrap; font-size:14.5px}
.xp .nm b{color:#0f1419}
.xp .nm .h,.xp .nm .t{color:#536471; font-weight:400}
.xp .nm .v{width:15px; height:15px; border-radius:50%; background:#1d9bf0; flex:none; display:inline-block}
.xp .tx{color:#0f1419; font-size:15px; line-height:1.45; margin:3px 0 9px; overflow-wrap:anywhere}
.xp .mt{display:flex; gap:26px; color:#536471; font-size:13px; flex-wrap:wrap}
.xp .label{display:inline-block; background:#eff3f4; color:#536471; font-size:11px;
  padding:1px 6px; border-radius:4px; margin-left:4px}
.xquote{border:1px solid #cfd9de; border-radius:14px; padding:11px 13px; margin:10px 0 0}
.xquote .nm{font-size:13.5px}
.xquote .tx{font-size:14px; margin:3px 0 0}
.xnote{border:1px solid #cfd9de; border-radius:12px; padding:11px 13px; margin:10px 0 0; background:#f7f9f9}
.xnote b{display:block; font-size:13px; color:#0f1419; margin-bottom:4px}
.xnote p{margin:0; font-size:13.5px; color:#536471; line-height:1.45}
.xreplies{padding-left:14px; border-left:2px solid #eff3f4; margin-left:16px}
.xsort{padding:11px 16px; font-size:13px; color:#536471; border-bottom:1px solid #eff3f4}

/* ==========================================================================
   7. INSTAGRAM SKIN
   ========================================================================== */
.ig{max-width:600px; margin:0 auto; background:#fff; border:1px solid #dbdbdb}
.ig+.ig{margin-top:26px}
.ighead{display:flex; align-items:center; gap:11px; padding:12px 14px; border-bottom:1px solid #efefef}
.ighead .av{width:34px; height:34px; border-radius:50%; object-fit:cover; background:#ddd; flex:none}
.ighead b{font-size:14px; color:#262626}
.ighead .loc{font-size:12px; color:#8e8e8e}
.igmedia{background:linear-gradient(135deg,var(--brown),#5a3608); color:#fff; min-height:280px;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:34px 24px;
  font-family:var(--cond); text-transform:uppercase; font-size:clamp(20px,4vw,32px); line-height:1.14; font-weight:600}
.igbar{padding:10px 14px; font-size:14px; color:#262626}
.igbar .likes{font-weight:600}
.igcap{padding:0 14px 10px; font-size:14px; color:#262626; line-height:1.5}
.igcap b{font-weight:600}
.igcomments{padding:0 14px 14px}
.igc{font-size:14px; color:#262626; margin:7px 0; line-height:1.45; overflow-wrap:anywhere}
.igc b{font-weight:600}
.igc .lk{font-size:12px; color:#8e8e8e; margin-left:6px}
.igmeta{padding:0 14px 14px; font-size:11px; color:#8e8e8e; letter-spacing:.02em; text-transform:uppercase}

/* ==========================================================================
   8. TABLES / TRACKER / STOCK
   ========================================================================== */
.tbl{width:100%; border-collapse:collapse; font-size:15px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.tbl th{background:var(--brown); color:#fff; text-align:left; padding:11px 14px;
  font-size:11.5px; letter-spacing:.07em; text-transform:uppercase}
.tbl td{padding:11px 14px; border-top:1px solid var(--line-2); vertical-align:top}
.tbl tr:nth-child(even) td{background:#fbf9f5}
.scroller{overflow-x:auto; -webkit-overflow-scrolling:touch}

.factbox{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--orange);
  border-radius:0 var(--radius) var(--radius) 0; padding:18px 20px; margin:24px 0}
.factbox h3{margin:0 0 8px; font-size:16px}
.factbox p{margin:0; font-size:15px}

.mark{display:inline-block; padding:3px 9px; border-radius:999px; font:700 11px/1.6 var(--sans);
  letter-spacing:.06em; text-transform:uppercase}
.mark.up{background:#e3f3e8; color:#1c5c33}
.mark.down{background:#fbe4de; color:#8c2000}
.mark.flat{background:var(--paper-2); color:var(--muted)}

/* ==========================================================================
   9. MOBILE
   ========================================================================== */
@media(max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .pagelist{grid-template-columns:1fr}
}
@media(max-width:760px){
  body{font-size:16.5px}
  .sitebar .inner{flex-direction:column; align-items:flex-start; gap:10px}
  .sitenav{justify-content:flex-start; gap:14px}
  .sitenav a{font-size:13.5px}
  .hub-hero .right{margin-left:0; text-align:left; width:100%}
  .cards{grid-template-columns:1fr}
  article.piece .bodycopy{font-size:18px}
  .xw{border-left:0; border-right:0}
}
@media(max-width:640px){
  .rdt-wrap{padding:10px}
  .d1{margin-left:8px; padding-left:9px}
  .d2{margin-left:16px; padding-left:9px}
  .d3{margin-left:24px; padding-left:9px}
  .d4{margin-left:30px; padding-left:9px}
  .cmt .tx{font-size:14px}
  .rdt-about .nums{gap:20px}
  .outlet .masthead{font-size:21px}
  .showhead img{width:44px; height:44px}
  .ig{border-left:0; border-right:0}
}
@media(max-width:420px){
  .wrap,.read{padding:0 16px}
  .transcript{padding:22px 16px 46px}
  h1{font-size:27px}
  .post h2{font-size:18px}
}

/* --- NFL flair chips (generated from official team colors) --- */
.cmt .fl.fl-ari{background:#9B2743;color:#fff;border-color:#9B2743}
.cmt .fl.fl-atl{background:#A71930;color:#fff;border-color:#A71930}
.cmt .fl.fl-bal{background:#24125F;color:#fff;border-color:#24125F}
.cmt .fl.fl-buf{background:#003087;color:#fff;border-color:#003087}
.cmt .fl.fl-car{background:#0085CA;color:#fff;border-color:#0085CA}
.cmt .fl.fl-chi{background:#091F2C;color:#fff;border-color:#091F2C}
.cmt .fl.fl-cin{background:#FB4F14;color:#fff;border-color:#FB4F14}
.cmt .fl.fl-cle{background:#EB3300;color:#fff;border-color:#EB3300}
.cmt .fl.fl-dal{background:#0C2340;color:#fff;border-color:#0C2340}
.cmt .fl.fl-den{background:#FB4F14;color:#fff;border-color:#FB4F14}
.cmt .fl.fl-det{background:#0069B1;color:#fff;border-color:#0069B1}
.cmt .fl.fl-gb{background:#203731;color:#fff;border-color:#203731}
.cmt .fl.fl-hou{background:#1D1F2A;color:#fff;border-color:#1D1F2A}
.cmt .fl.fl-ind{background:#002C5F;color:#fff;border-color:#002C5F}
.cmt .fl.fl-jax{background:#101820;color:#fff;border-color:#101820}
.cmt .fl.fl-kc{background:#C8102E;color:#fff;border-color:#C8102E}
.cmt .fl.fl-lv{background:#000000;color:#fff;border-color:#000000}
.cmt .fl.fl-lac{background:#0072CE;color:#fff;border-color:#0072CE}
.cmt .fl.fl-lar{background:#003594;color:#fff;border-color:#003594}
.cmt .fl.fl-mia{background:#008C95;color:#fff;border-color:#008C95}
.cmt .fl.fl-min{background:#582C83;color:#fff;border-color:#582C83}
.cmt .fl.fl-ne{background:#0C2340;color:#fff;border-color:#0C2340}
.cmt .fl.fl-no{background:#D3BC8D;color:#111;border-color:#D3BC8D}
.cmt .fl.fl-nyg{background:#001E62;color:#fff;border-color:#001E62}
.cmt .fl.fl-nyj{background:#115740;color:#fff;border-color:#115740}
.cmt .fl.fl-phi{background:#004851;color:#fff;border-color:#004851}
.cmt .fl.fl-pit{background:#010101;color:#fff;border-color:#010101}
.cmt .fl.fl-sf{background:#A6192E;color:#fff;border-color:#A6192E}
.cmt .fl.fl-sea{background:#0C2340;color:#fff;border-color:#0C2340}
.cmt .fl.fl-tb{background:#A6192E;color:#fff;border-color:#A6192E}
.cmt .fl.fl-ten{background:#418FDE;color:#fff;border-color:#418FDE}
.cmt .fl.fl-was{background:#651C32;color:#fff;border-color:#651C32}
.cmt .fl[class*="fl-"]{border-width:1px;border-style:solid}
.cmt .fl.fl-none{background:#edeff1;color:#3a3a3a}
.award{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:3px;margin-left:4px}
.award.gold{background:#fff3cd;color:#8a6d00}
.award.silver{background:#eceff1;color:#5a6a72}
.award.plat{background:#e6f4f7;color:#146b7d}
.loadmore{font-size:13px;color:#0079d3;font-weight:600;padding:8px 0}

/* ==========================================================================
   10. INSTALLED APP (iOS home screen, display:standalone)
   ========================================================================== */
@media all and (display-mode:standalone){
  /* black-translucent status bar sits over the top of the page */
  .sitebar{padding-top:env(safe-area-inset-top)}
  .breadcrumb{padding-top:env(safe-area-inset-top)}
  .sitefoot{padding-bottom:calc(44px + env(safe-area-inset-bottom))}
  .rdt-top,.xhead{padding-top:calc(9px + env(safe-area-inset-top))}
  /* no browser chrome to swipe back with — keep the in-page back link comfortable */
  .breadcrumb .inner{min-height:44px}
  a,button{-webkit-tap-highlight-color:rgba(255,60,0,.18)}
}
/* never let the notch clip content in landscape */
body{padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right)}


/* ==========================================================================
   THE ATHLETIC — the ONLY surface allowed Tiempos Text.  UI.md 3.
   Their real stack: Tiempos Text for prose, Sohne for furniture.
   ========================================================================== */
.athletic .bodycopy,
.athletic .bodycopy p,
.athletic .deck{font-family:var(--serif); font-size:19px; line-height:1.65; color:#16130f}
.athletic .bodycopy p+p{margin-top:1.15em}
.athletic .hd{font-family:var(--serif); font-weight:600; letter-spacing:-.005em; line-height:1.12}
.athletic .byline,.athletic .kicker,.athletic .credit,
.athletic .eyebrow,.athletic .tag{font-family:var(--sans)}
.athletic .read{max-width:660px}

/* tabular numerals wherever figures stack */
.tbl,.stats,.mt,.sc,.score,.igmeta,.pullstat b,.rank,.prev{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}

/* ==========================================================================
   POWER RANKINGS — espn_power_rankings.html
   ========================================================================== */
.pr-row{display:grid; grid-template-columns:58px 1fr; gap:16px; padding:22px 0; border-top:1px solid var(--line)}
.pr-row:first-of-type{border-top:0}
.pr-rank{font-family:var(--disp); font-size:38px; font-weight:700; line-height:1; color:var(--ink)}
.pr-move{font-family:var(--mono); font-size:11px; margin-top:4px; letter-spacing:.04em}
.pr-move.up{color:#1a7f37} .pr-move.down{color:#b3261e} .pr-move.flat{color:var(--faint)}
.pr-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pr-head img{width:30px; height:30px; object-fit:contain}
.pr-head b{font-family:var(--disp); font-size:20px; letter-spacing:.012em}
.pr-head .rec{font-family:var(--mono); font-size:13px; color:var(--muted)}
.pr-theme{margin-top:10px; font-size:13px; font-weight:600; color:var(--ink)}
.pr-blurb{margin-top:6px; font-size:16px; line-height:1.62}
.pr-sig{margin-top:8px; font-size:13.5px; color:var(--muted); font-style:italic}
.pr-row.cle{background:linear-gradient(90deg,rgba(255,60,0,.05),transparent); margin:0 -14px; padding-left:14px; padding-right:14px}
@media(max-width:480px){
  .pr-row{grid-template-columns:44px 1fr; gap:12px}
  .pr-rank{font-size:30px}
}


/* ==========================================================================
   OVERFLOW GUARDS — added after the 390/768/1280 render sweep
   UI.md 4: tables scroll inside their own wrapper, never dragging the page.
   ========================================================================== */
@media(max-width:640px){
  table{display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
}
/* grid tracks must be allowed to shrink below their content's min-content size */
.qbrow,.cards,.stack>.grid{min-width:0}
/* any avatar image that falls outside its usual container still gets sized */
img.av{width:42px; height:42px; border-radius:50%; object-fit:cover; flex:none}
figure{max-width:100%; margin-left:0; margin-right:0}
figure img{max-width:100%; height:auto}