/* PlayerPropsPerson — site theme (parchment / antique gold / royal purple / charcoal ink) */
:root{
  --parch:#f3eee2; --parch2:#e9e1cf; --panel:#fbf8f0; --ink:#241a3a; --muted:#6f6788;
  --gold:#a9822b; --gold-lt:#c8971f; --purple:#5b3ea8; --border:#ddd2b8; --shadow:0 8px 28px rgba(40,30,60,.10);
  --head:Georgia,'Times New Roman',serif; --body:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--parch);color:var(--ink);font-family:var(--body);line-height:1.65;
  background-image:radial-gradient(circle at 50% 0,#faf6ec, var(--parch) 60%);min-height:100vh;}
a{color:var(--purple);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* header */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  max-width:1080px;margin:0 auto;padding:18px 22px;border-bottom:2px solid var(--border)}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)!important;text-decoration:none!important}
.brand img{width:46px;height:46px;border-radius:50%;box-shadow:var(--shadow)}
.brand-name{font-family:var(--head);font-weight:700;font-size:22px;letter-spacing:.3px}
.brand-name .mid{color:var(--purple)}
.site-head nav{display:flex;gap:6px;flex-wrap:wrap}
.site-head nav a{font-size:13.5px;font-weight:600;color:var(--muted);padding:6px 11px;border-radius:20px}
.site-head nav a:hover{background:var(--parch2);color:var(--ink);text-decoration:none}

/* masthead */
.masthead{max-width:1080px;margin:0 auto;padding:52px 22px 26px;text-align:center}
.masthead h1{font-family:var(--head);font-size:52px;margin:0 0 8px;letter-spacing:-.5px}
.masthead h1 .mid{color:var(--purple)}
.masthead p{color:var(--muted);font-size:18px;margin:0}
.masthead.sub{padding:40px 22px 6px}
.masthead.sub h1{font-size:38px}

/* cards / grid */
.featured,.grid,.empty{max-width:1080px;margin:0 auto;padding:14px 22px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.card{display:block;background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);color:var(--ink)!important;text-decoration:none!important;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(40,30,60,.16)}
.featured .card{display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch}
.card-img{min-height:190px;background:#e9e1cf center/cover no-repeat;border-bottom:1px solid var(--border)}
.featured .card-img{border-bottom:0;border-right:1px solid var(--border)}
.card-img--none{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 40% 35%,#33205c,#160c34)}
.card-img--none span{font-family:var(--head);font-weight:900;font-size:56px;font-style:italic;
  color:#c8971f;letter-spacing:-2px;text-shadow:2px 3px 0 #160c34}
.card-body{padding:18px 20px}
.chip{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--gold);background:#f6efdb;border:1px solid #e6d6a8;padding:3px 10px;border-radius:20px}
.card h3{font-family:var(--head);font-size:22px;margin:12px 0 8px;line-height:1.25}
.dek{color:var(--muted);font-size:15px;margin:0 0 12px}
.meta{font-size:12.5px;color:var(--muted);font-weight:600}

/* article */
.article{max-width:720px;margin:0 auto;padding:34px 22px 10px}
.article-head{border-bottom:2px solid var(--border);padding-bottom:18px;margin-bottom:8px}
.article-head h1{font-family:var(--head);font-size:40px;line-height:1.18;margin:14px 0 10px;letter-spacing:-.4px}
.byline{color:var(--muted);font-weight:600;margin:0;font-size:14.5px}
.hero{width:100%;border-radius:14px;margin:22px 0;box-shadow:var(--shadow)}
.prose{font-size:18.5px}
.prose h2{font-family:var(--head);font-size:29px;margin:34px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.prose h3{font-family:var(--head);font-size:23px;margin:26px 0 8px;color:var(--purple)}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:24px}
.prose li{margin:6px 0}
.prose blockquote{margin:22px 0;padding:6px 20px;border-left:4px solid var(--gold);
  background:#f6efdb;border-radius:0 10px 10px 0;color:#4a3f63;font-style:italic}
.prose code{background:#efe7d5;padding:2px 6px;border-radius:5px;font-size:.9em}
.prose pre{background:#241a3a;color:#f3eee2;padding:16px 18px;border-radius:10px;overflow:auto}
.prose pre code{background:none;padding:0}
.prose img{border-radius:12px;box-shadow:var(--shadow);margin:12px 0}
.prose hr{border:0;border-top:2px solid var(--border);margin:30px 0}
.prose strong{color:var(--purple)}
.prose a{border-bottom:1px solid rgba(91,62,168,.35)}

/* share row */
.share{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:36px 0 10px;padding-top:20px;border-top:2px solid var(--border)}
.x-share{background:var(--ink);color:#fff!important;padding:10px 20px;border-radius:24px;font-weight:700;font-size:14.5px;text-decoration:none!important}
.x-share:hover{background:#3a2b5e}
.back{font-weight:700;color:var(--muted)}

/* footer */
.site-foot{margin-top:56px;border-top:2px solid var(--border);background:#efe7d5}
.foot-wrap{max-width:1080px;margin:0 auto;padding:26px 22px;text-align:center}
.motto{font-family:var(--head);font-style:italic;color:var(--gold);font-size:19px;margin:0 0 8px}
.compliance{font-size:13px;color:var(--muted);margin:0 0 6px}
.cc{font-size:12.5px;color:var(--muted);margin:0}

@media(max-width:640px){
  .masthead h1{font-size:38px}.article-head h1{font-size:31px}.prose{font-size:17.5px}
  .featured .card{grid-template-columns:1fr}.featured .card-img{border-right:0;border-bottom:1px solid var(--border)}
}

/* ============ v2 redesign: divisions · bets board · covers · like · comments ============ */
.site-head nav a.on{background:var(--accent);color:#fff}
.masthead{padding:44px 22px 18px}
.masthead h1{font-size:46px}

/* sport accents */
:root{--fball:#2f6f4e;--tennis:#7a5bd0}
.sport-head--football h1,.sport-head--football h2{color:var(--fball)}
.sport-head--tennis h1,.sport-head--tennis h2{color:var(--tennis)}
.chip--football{color:#2f6f4e;background:#e6f0e9;border-color:#bcd8c6}
.chip--tennis{color:#5b3ea8;background:#efe9fb;border-color:#d3c4ee}

/* Today's confirmed bets board (betting-page feel) */
.board{max-width:1080px;margin:8px auto 6px;padding:0 22px}
.board-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:2px solid var(--gold);padding-bottom:8px;margin-bottom:14px}
.board-head h2{font-family:var(--head);font-size:26px;margin:0;color:var(--ink)}
.board-date{color:var(--muted);font-weight:700;font-size:14px}
.bet-group{background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:12px 16px;margin-bottom:12px}
.bet-src{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--head);font-weight:700;font-size:17px;color:var(--ink)!important;text-decoration:none!important;padding-bottom:8px;border-bottom:1px dashed var(--border);margin-bottom:8px}
.bet-reason{font-family:var(--body);font-size:12.5px;font-weight:700;color:var(--purple)}
.bet-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0}
.bet-row+.bet-row{border-top:1px solid #efe9db}
.bet-sel{font-weight:600;font-size:15px}
.bet-meta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.bet-meta .odds{background:var(--ink);color:#fff;font-weight:800;font-size:13px;padding:3px 9px;border-radius:14px}
.bet-meta .book{color:var(--muted);font-size:12px}
.bet-meta .stake{color:var(--gold);font-weight:800;font-size:13px}
.board-foot{color:var(--muted);font-size:12px;text-align:right;margin:2px 0 0}

/* Football / Tennis divisions */
.divisions{max-width:1080px;margin:22px auto 0;padding:0 22px;display:grid;grid-template-columns:1fr 1fr;gap:26px}
.sport-col{min-width:0}
.sport-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:3px solid var(--border);padding-bottom:8px;margin-bottom:16px}
.sport-head h2{font-family:var(--head);font-size:28px;margin:0}
.sport-head--football{border-color:#bcd8c6}
.sport-head--tennis{border-color:#d3c4ee}
.sport-head a{font-size:13px;font-weight:700;color:var(--muted)}
.sport-col .card{margin-bottom:16px}

/* cards: lead + split cover thumb */
.card--lead .card-img{min-height:210px}
.card-img--split{display:flex}
.card-img--split span{flex:1;background-size:cover;background-position:center;display:block}
.card-img--split span+span{border-left:2px solid #fff}

/* article cover (1 or 2 images side by side) */
.cover{margin:0 0 8px;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);max-height:420px}
.cover .cover-img{height:360px;background-size:cover;background-position:center}
.cover--split{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:#fff}
.cover--split .cover-img{height:340px}
.article{max-width:760px}
.article .cover{margin-top:6px}

/* like button */
.like-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);color:var(--muted);
  font-weight:800;font-size:15px;padding:9px 18px;border-radius:24px;cursor:pointer;transition:all .15s}
.like-btn:hover{border-color:#e0aeb8;color:#c0435a}
.like-btn .heart{font-size:17px;line-height:1}
.like-btn.liked{background:#fdecef;border-color:#e9aab6;color:#c0435a}
.like-btn.liked .heart{color:#d33b57}

/* comments */
.comments{max-width:760px;margin:8px auto 0;padding:26px 22px 0;border-top:2px solid var(--border)}
.comments h2{font-family:var(--head);font-size:26px;margin:0 0 16px}
.cmt-form{display:grid;gap:10px;margin-bottom:24px}
.cmt-form .cmt-name{max-width:280px}
.cmt-form input,.cmt-form textarea{background:#fff;border:1px solid var(--border);border-radius:9px;padding:10px 12px;font:inherit;color:var(--ink);width:100%}
.cmt-form input:focus,.cmt-form textarea:focus{outline:none;border-color:var(--purple)}
.cmt-submit{justify-self:start;background:var(--purple);color:#fff;border:0;border-radius:22px;padding:9px 22px;font-weight:800;cursor:pointer}
.cmt-submit:hover{background:#4a3092}
.cmt-submit:disabled{opacity:.6;cursor:default}
.cmt-msg{color:var(--muted);font-size:13px;align-self:center}
.cmt-list{display:grid;gap:14px}
.cmt{background:var(--panel);border:1px solid var(--border);border-radius:11px;padding:12px 15px}
.cmt-top{display:flex;align-items:baseline;gap:10px;margin-bottom:5px}
.cmt-who{font-weight:800;color:var(--purple)}
.cmt-when{color:var(--muted);font-size:12px}
.cmt-body{font-size:15.5px;line-height:1.55}
.cmt-empty{color:var(--muted)}

/* shared comment thread: per-comment likes + one-level replies (.pc lives inside .cmt-list and .qc-list) */
.pc{background:var(--panel);border:1px solid var(--border);border-radius:11px;padding:11px 14px}
.qc-list .pc{padding:9px 11px}
.pc-top{display:flex;align-items:baseline;gap:9px;margin-bottom:4px}
.pc-name{font-weight:800;color:var(--purple);font-size:13.5px}
.pc-time{color:var(--muted);font-size:12px}
.pc-del{margin-left:auto;background:none;border:0;color:#c0392b;font-size:13px;cursor:pointer;padding:0 3px}
.pc-body{font-size:15px;line-height:1.5;color:var(--ink);word-wrap:break-word}
.qc-list .pc-body{font-size:13px}
.pc-actions{display:flex;align-items:center;gap:7px;margin-top:7px}
.pc-like,.pc-reply-btn{background:none;cursor:pointer;font-size:12px;font-weight:700;color:var(--muted);padding:3px 8px;border-radius:14px}
.pc-like{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border)}
.pc-reply-btn{border:0}
.pc-like:hover,.pc-reply-btn:hover{color:var(--purple)}
.pc-like.on{border-color:#e2649a;color:var(--ink)}
.pc-reply-form{display:flex;gap:6px;margin-top:8px}
.pc-reply-form[hidden]{display:none}
.pc-reply-form input{flex:1;min-width:0;font-size:13px;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--ink)}
.pc-reply-form input:focus{outline:none;border-color:var(--purple)}
.pc-reply-form button{font-weight:800;font-size:12.5px;color:#fff;background:var(--purple);border:0;border-radius:8px;padding:7px 13px;cursor:pointer}
.pc-reply-form button:disabled{opacity:.6;cursor:default}
.pc-replies{margin-top:9px;padding-left:12px;border-left:2px solid var(--border);display:grid;gap:9px}
.pc--reply{background:var(--parch2);border-color:transparent;padding:9px 12px}
.cmt-delall{margin-top:14px;background:none;border:1px solid #c0392b;color:#c0392b;border-radius:18px;padding:6px 14px;font-size:12.5px;font-weight:700;cursor:pointer}
.cmt-delall:hover{background:#c0392b;color:#fff}

@media(max-width:760px){
  .divisions{grid-template-columns:1fr;gap:30px}
  .cover .cover-img,.cover--split .cover-img{height:230px}
  .bet-row{flex-wrap:wrap;gap:4px}
}

/* bet result badges + running P/L */
.res{font-weight:800;font-size:11.5px;padding:2px 8px;border-radius:12px;letter-spacing:.4px}
.res--win{color:#1c7a3e;background:#e2f3e7;border:1px solid #b6ddc2}
.res--loss{color:#b23030;background:#f7e5e4;border:1px solid #e6bdba}
.res--void{color:#6f6788;background:#eee9dc;border:1px solid #ddd2b8}
.res-slot:empty{display:none}
.board-pnl{margin-left:10px;font-weight:800}
.board-pnl.pos{color:#1c7a3e}.board-pnl.neg{color:#b23030}
.bet-row .res--win~.res,.bet-row.won{opacity:1}

/* ===== football → purple (both sports now purple, differentiated by icon) ===== */
:root{--fball:#5b3ea8}
.sport-head--football h1,.sport-head--football h2{color:#5b3ea8}
.sport-head--football{border-color:#d3c4ee}
.chip--football{color:#5b3ea8;background:#efe9fb;border-color:#d3c4ee}

/* ===== dropdown nav ===== */
.nav-drop{position:relative;display:inline-block}
.nav-top{background:none;border:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);
  padding:6px 11px;border-radius:20px;cursor:pointer}
.nav-drop:hover .nav-top,.nav-drop.on .nav-top{background:var(--accent);color:#fff}
.nav-top .caret{font-size:10px}
.nav-menu{position:absolute;top:100%;left:0;min-width:190px;background:var(--panel);border:1px solid var(--border);
  border-radius:10px;box-shadow:var(--shadow);padding:6px;margin-top:4px;opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:.14s;z-index:50}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{opacity:1;visibility:visible;transform:none}
.nav-menu a{display:block;padding:8px 12px;border-radius:7px;font-size:14px;font-weight:600;color:var(--ink)}
.nav-menu a:hover{background:var(--parch2);text-decoration:none}
.bet-sel{font-weight:600}

/* ===== history page ===== */
.hist-tabs{max-width:1080px;margin:6px auto 4px;padding:0 22px;display:flex;gap:8px}
.hist-tabs button{background:var(--panel);border:1px solid var(--border);border-radius:22px;padding:8px 18px;
  font-weight:700;font-size:14px;color:var(--muted);cursor:pointer}
.hist-tabs button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.hist-cards{max-width:1080px;margin:10px auto;padding:0 22px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hcard{background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:14px 16px;text-align:center}
.hlab{color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.hval{font-family:var(--head);font-size:30px;font-weight:700;margin:4px 0}
.hval.pos{color:#1c7a3e}.hval.neg{color:#b23030}
.hsub{color:var(--muted);font-size:12px}
.hist-cal{max-width:1080px;margin:16px auto;padding:0 22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.cal-month{background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:14px}
.cal-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.cal-head h3{font-family:var(--head);margin:0;font-size:19px}
.cal-tot{font-weight:800}.cal-tot.pos{color:#1c7a3e}.cal-tot.neg{color:#b23030}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:3px}
.cal-dow span{text-align:center;font-size:11px;font-weight:700;color:var(--muted)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-cell{aspect-ratio:1;border:1px solid var(--border);border-radius:6px;padding:3px;display:flex;flex-direction:column;justify-content:space-between;background:#fff}
.cal-cell.empty{border:0;background:none}
.cal-cell.pos{background:rgba(31,122,62,.14);border-color:rgba(31,122,62,.4)}
.cal-cell.neg{background:rgba(178,48,48,.13);border-color:rgba(178,48,48,.4)}
.cal-cell.flat{background:var(--parch2)}
.cal-d{font-size:11px;color:var(--muted);font-weight:600}
.cal-u{font-size:11px;font-weight:800}
.cal-cell.pos .cal-u{color:#1c7a3e}.cal-cell.neg .cal-u{color:#b23030}
.hist-master{max-width:1080px;margin:20px auto 0;padding:0 22px}
.hist-master h2{font-family:var(--head);font-size:24px;border-bottom:2px solid var(--border);padding-bottom:8px}
.mtable{width:100%;border-collapse:collapse;font-size:14.5px}
.mtable th{text-align:left;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.4px;padding:8px 8px;border-bottom:2px solid var(--border)}
.mtable td{padding:9px 8px;border-bottom:1px solid var(--border)}
.res--pend{color:#8a7d20;background:#f6efcf;border:1px solid #e3d59a}
.hist-empty{color:var(--muted);text-align:center;padding:20px}
@media(max-width:640px){.hist-cards{grid-template-columns:repeat(2,1fr)}}

/* history tabs + nav tabs: purple & bold letters */
.hist-tabs button{color:var(--purple);font-weight:800}
.hist-tabs button.on{background:var(--purple);color:#fff;border-color:var(--purple)}
.site-head nav>a{color:var(--purple);font-weight:800}
.nav-top{color:var(--purple);font-weight:800}
.nav-drop:hover .nav-top,.nav-drop.on .nav-top{color:#fff}

/* ============ Quartz-style redesign: ticker · hamburger drawer · two-col feed ============ */
/* bets ticker (dark market-bar) */
.ticker{background:var(--ink);overflow:hidden;white-space:nowrap;border-bottom:2px solid var(--gold)}
.ticker-track{display:inline-block;white-space:nowrap;padding:9px 0;animation:tkscroll 38s linear infinite;will-change:transform}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tkscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk-lead{color:var(--gold-lt);font-weight:800;letter-spacing:.6px;margin:0 16px;text-transform:uppercase;font-size:13px}
.tk-lead.pos{color:#63d08c}.tk-lead.neg{color:#f2a09a}
.tk-item{color:#efe7d5;font-size:13.5px;margin:0 3px}
.tk-item b{color:#fff}
.tk-sub{padding:0 1px}
.tk-slash{color:#6a5f8a;margin:0 8px;font-weight:700}
.tk-res{margin-left:3px}
.tk-w{color:#63d08c;font-weight:800}.tk-l{color:#f2a09a;font-weight:800}
.tk-dot{color:#6a5f8a;margin:0 12px}

/* header: hamburger left, brand centred */
.site-head{justify-content:space-between}
.menu-btn{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:40px;height:40px;background:none;border:0;cursor:pointer;padding:9px}
.menu-btn span{display:block;height:2.6px;background:var(--ink);border-radius:2px;transition:.2s}
.menu-btn:hover span{background:var(--purple)}
.head-spacer{width:40px}
.brand{margin:0 auto}

/* slide-out sidebar drawer */
.drawer-scrim{position:fixed;inset:0;background:rgba(20,12,30,.45);opacity:0;visibility:hidden;transition:.25s;z-index:60}
body.drawer-open .drawer-scrim{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:82vw;background:var(--panel);border-right:2px solid var(--gold);
  box-shadow:2px 0 26px rgba(40,30,60,.28);transform:translateX(-100%);transition:transform .25s;z-index:70;padding:20px}
body.drawer-open .drawer{transform:none}
.drawer-close{position:absolute;top:12px;right:14px;background:none;border:0;font-size:19px;color:var(--muted);cursor:pointer}
.drawer-nav{display:flex;flex-direction:column;gap:2px;margin-top:30px}
.drawer-home,.drawer-hist{display:block;padding:10px;border-radius:8px;font-weight:800;color:var(--purple)!important}
.drawer-home:hover,.drawer-hist:hover,.drawer-group a:hover{background:var(--parch2);text-decoration:none}
.drawer-group{margin:6px 0;border-top:1px solid var(--border);padding-top:8px}
.drawer-label{display:block;padding:8px 10px 4px;font-family:var(--head);font-size:17px;font-weight:700;color:var(--ink)}
.drawer-label.on{color:var(--purple)}
.drawer-group a{display:block;padding:7px 10px 7px 24px;font-size:14.5px;color:var(--muted);font-weight:600;border-radius:7px}

/* two-column newspaper feed with black centre rule */
.feed{max-width:1080px;margin:16px auto 0;padding:0 22px;display:grid;grid-template-columns:1fr 2px 1fr;gap:26px}
.feed-rule{background:var(--ink);width:2px;border-radius:2px}
.feed-col{min-width:0}
.feed-head{border-bottom:3px solid var(--border);padding-bottom:8px;margin-bottom:8px}
.feed-head h2{font-family:var(--head);font-size:27px;margin:0}
.feed-item{display:grid;grid-template-columns:112px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--border);color:var(--ink)!important;text-decoration:none!important}
.feed-item:hover .fi-body h3{color:var(--purple)}
.fi-img{height:84px;border-radius:8px;background-size:cover;background-position:center;overflow:hidden;box-shadow:var(--shadow)}
.fi-img--split{display:flex}.fi-img--split span{flex:1;background-size:cover;background-position:center;display:block}
.fi-img--split span+span{border-left:2px solid #fff}
.fi-img--none{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 40% 35%,#33205c,#160c34);font-size:30px}
.fi-body h3{font-family:var(--head);font-size:19.5px;margin:6px 0 5px;line-height:1.22}
.fi-body .dek{font-size:14px;margin:0 0 6px}
.fi-body .meta{font-size:12px}

@media(max-width:760px){
  .feed{grid-template-columns:1fr;gap:0}
  .feed-rule{display:none}
  .feed-col+.feed-col{border-top:2px solid var(--ink);margin-top:10px;padding-top:6px}
  .head-spacer{display:none}
}

/* enlarge the main story feed (bigger = more prominent) */
.feed{max-width:1260px;gap:40px;margin-top:20px}
.feed-head{padding-bottom:10px;margin-bottom:14px}
.feed-head h2{font-size:33px}
.feed-item{grid-template-columns:190px 1fr;gap:20px;padding:22px 0}
.fi-img{height:118px}
.fi-body .chip{font-size:12px}
.fi-body h3{font-size:25px;margin:9px 0 8px;line-height:1.2}
.fi-body .dek{font-size:15.5px;margin:0 0 9px;line-height:1.5}
.fi-body .meta{font-size:13px}
.masthead h1{font-size:52px}
@media(max-width:760px){
  .feed-item{grid-template-columns:104px 1fr;gap:13px;padding:16px 0}
  .fi-img{height:78px}
  .fi-body h3{font-size:20px}
  .fi-body .dek{font-size:14px}
}

/* mini diagonal PPP emblem, top-right */
.head-ppp{display:inline-block;font-family:'Arial Black','Helvetica Neue',Arial,sans-serif;font-weight:900;font-style:italic;
  font-size:27px;letter-spacing:-2px;line-height:1;transform:rotate(-14deg);text-decoration:none!important;padding:2px 8px;flex:0 0 auto}
.head-ppp .g{color:#c8971f;text-shadow:1.6px 1.6px 0 rgba(20,12,30,.30)}
.head-ppp .p{color:#5b3ea8;text-shadow:1.6px 1.6px 0 rgba(20,12,30,.30)}
.head-ppp:hover{transform:rotate(-14deg) scale(1.06)}
@media(max-width:520px){.head-ppp{font-size:21px}}

/* comment moderation (admin) */
.cmt-mod{margin-left:12px;background:none;border:1px solid var(--border);color:var(--muted);font-size:11.5px;font-weight:800;padding:3px 11px;border-radius:14px;cursor:pointer;vertical-align:middle}
.cmt-mod:hover{border-color:var(--purple);color:var(--purple)}
.cmt-del{margin-left:auto;background:none;border:0;color:#b23030;font-weight:800;cursor:pointer;font-size:15px;line-height:1;padding:0 4px}
.cmt-del:hover{color:#8a1f1f}
.cmt-delall{margin-top:10px;background:#f7e5e4;border:1px solid #e6bdba;color:#b23030;font-weight:800;font-size:13px;padding:8px 15px;border-radius:8px;cursor:pointer}
.cmt-delall:hover{background:#f2d6d4}

/* article hero (header image) credit + inline image rows/placeholders */
.hero-fig{margin:6px 0 8px}
.hero-credit{font-size:11.5px;color:var(--muted);text-align:right;margin:4px 2px 0;letter-spacing:.3px}
.img-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.img-row:has(>*:only-child){grid-template-columns:1fr}
.img-row img{width:100%;border-radius:12px;box-shadow:var(--shadow);margin:0}
.img-ph{background:repeating-linear-gradient(45deg,#efe7d5,#efe7d5 10px,#e9e1cf 10px,#e9e1cf 20px);border:1px dashed #c9bd9c;border-radius:12px;
  min-height:150px;display:flex;align-items:center;justify-content:center;color:#8a7f66;font-weight:700;font-size:13px;text-align:center;padding:10px}

/* article image sizing: uniform pairs, capped singles */
.img-row img{max-height:500px;object-fit:cover}
.img-row:has(>*:only-child){justify-items:center}
.img-row:has(>*:only-child) img{width:auto;max-width:100%;max-height:560px;object-fit:contain}

/* homepage main-story hero (above the Football/Tennis columns) */
.hero-story{max-width:900px;margin:4px auto 4px;padding:0 22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;
  color:var(--ink)!important;text-decoration:none!important}
.hero-cover{width:100%;min-height:330px;border-radius:16px;background-size:cover;background-position:center;box-shadow:var(--shadow)}
.hero-cover--split{display:flex;overflow:hidden}.hero-cover--split span{flex:1;background-size:cover;background-position:center}
.hero-cover--none{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 40% 35%,#33205c,#160c34);font-size:64px}
.hero-body{width:100%}
.hero-body .chip{font-size:12px}
.hero-body h2{font-family:var(--head);font-size:37px;line-height:1.13;margin:12px 0 12px;letter-spacing:-.4px}
.hero-dek{font-size:17.5px;color:var(--muted);margin:0 auto 14px;line-height:1.5;max-width:640px}
.hero-story:hover h2{color:var(--purple)}
.hero-story+.feed{border-top:2px solid var(--border);padding-top:22px;margin-top:22px}

/* related articles strip (bottom of article, above likes/comments) */
.related{max-width:760px;margin:34px auto 0;padding:24px 22px 0;border-top:2px solid var(--border)}
.related h2{font-family:var(--head);font-size:22px;margin:0 0 14px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.rel-card{display:block;background:var(--panel);border:1px solid var(--border);border-radius:11px;overflow:hidden;box-shadow:var(--shadow);color:var(--ink)!important;text-decoration:none!important;transition:transform .15s}
.rel-card:hover{transform:translateY(-2px)}
.rel-img{height:96px;background-size:cover;background-position:center;border-bottom:1px solid var(--border)}
.rel-img--split{display:flex}.rel-img--split span{flex:1;background-size:cover;background-position:center}
.rel-img--split span+span{border-left:2px solid #fff}
.rel-img--none{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 40% 35%,#33205c,#160c34);font-size:26px}
.rel-body{padding:9px 12px 11px}
.rel-body .chip{font-size:10px;padding:2px 8px}
.rel-body h3{font-family:var(--head);font-size:15px;margin:7px 0 0;line-height:1.22}
.rel-card:hover h3{color:var(--purple)}

@media(max-width:760px){
  .hero-story{grid-template-columns:1fr;gap:14px}
  .hero-cover{min-height:210px}
  .hero-body h2{font-size:28px}
}

/* player-spotlight chip = orange */
.chip--spotlight{color:#c85a12;background:#fdecdd;border-color:#f2c9a3}
.chip--today{color:#1c4e8a;background:#e7eef8;border-color:#bcd0ea}
/* ticker: stake in () */
.tk-stake{color:#d8b25a;font-weight:700}
/* "X units played today" under the ticker */
.ticker-sub{text-align:center;font-size:12px;font-weight:800;color:var(--purple);padding:5px 22px 2px;letter-spacing:.3px}
/* daily record, header top-right */
.head-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.daily-rec{font-size:11.5px;font-weight:800;letter-spacing:.3px;white-space:nowrap}
.daily-rec.even{color:var(--muted)}
.daily-rec.pos{color:#1c7a3e}
.daily-rec.neg{color:#b23030}

/* header spans the FULL width so the hamburger + mini-PPP hug the screen corners on any size */
.site-head{max-width:none}
/* "Today's Bets" + units-played row, directly above the ticker */
.ticker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 22px 5px;background:var(--parch2);border-bottom:1px solid var(--border)}
.tk-title{font-weight:800;font-size:12.5px;letter-spacing:.6px;color:var(--ink);text-transform:uppercase}
.tk-played{font-weight:800;font-size:12.5px;color:var(--purple);letter-spacing:.3px}

/* daily record grouped with the hamburger, top-left; "Today's Bets" label centered above ticker */
.head-left{display:flex;align-items:center;gap:12px}
.ticker-head{justify-content:center}

/* ensure the hamburger bars are visible (empty spans need an explicit width) */
.menu-btn{align-items:stretch}
.menu-btn span{width:24px;min-width:24px;height:3px;background:var(--ink);display:block;border-radius:2px}

/* brand always dead-centre in the header, regardless of the side content widths */
.site-head{position:relative;min-height:52px}
.brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
/* ticker-head: record on the left, "Today's Bets" centred */
.ticker-head{position:relative;justify-content:flex-start}
.ticker-head .daily-rec{font-size:12px}
.ticker-head .tk-title{position:absolute;left:50%;transform:translateX(-50%)}
@media(max-width:680px){.ticker-head .tk-title{display:none}.ticker-head .daily-rec{font-size:10.5px}}

/* record + units-played grouped on the left of the ticker-head */
.th-left{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.th-sep{color:var(--muted)}

/* ticker a tad bigger */
.tk-lead{font-size:15px}
.tk-item{font-size:14.5px}
.ticker-track{padding:11px 0}

/* slow the ticker scroll a touch */
.ticker-track{animation-duration:60s}
.ticker-track{animation-duration:75s}
/* football ticker a touch slower than tennis */
.tk--football .ticker-track{animation-duration:85s}

/* ===== branding: gold-purple-gold wordmark + bigger brand ===== */
.wg{color:var(--gold)}
.wp{color:var(--purple)}
.brand img{width:56px;height:56px}
.brand-name{font-size:27px}
.site-head{min-height:66px}

/* tennis matchday chip = green */
.chip--tennis{color:#2f7d32;background:#e6f3e7;border-color:#bcdcc0}

/* second ticker: tennis-ball colour scheme (bright yellow-green) */
.tk--tennis{background:#cde03a;border-top:2px solid #fff;border-bottom:2px solid #9fb31c}
.tk--tennis .tk-lead{color:#33450d}
.tk--tennis .tk-item{color:#2c3a0e}
.tk--tennis .tk-item b{color:#1b2607}
.tk--tennis .tk-stake{color:#5c6f12}
.tk--tennis .tk-dot{color:#8fa32f}
.tk--tennis .tk-slash{color:#7d9021}
.tk--tennis .tk-w{color:#166b33}
.tk--tennis .tk-l{color:#a52222}

/* ticker labels a touch smaller to fit "Today's Football/Tennis Bets" */
.tk-lead{font-size:12.5px}
.tk-item{font-size:13.5px}

/* in-article anchor jumps (Matches in Focus → headings) clear the sticky ticker */
html{scroll-behavior:smooth}
:target,article h2[id],article h3[id]{scroll-margin-top:104px}

/* Twitter Plays box — bottom-right of the homepage masthead, under the tickers */
/* Twitter Plays — SEPARATE Football + Tennis boxes in a centred row below the masthead */
.tp-col{display:flex;gap:18px;justify-content:center;align-items:flex-start;flex-wrap:wrap;
  max-width:1300px;margin:2px auto 0;padding:0 22px 6px}
.twitter-plays{width:300px;max-width:100%;background:var(--panel);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:10px 13px;text-align:left}
.tp-head{font-family:var(--head);font-weight:800;font-size:14.5px;color:var(--ink);
  border-bottom:2px solid var(--gold);padding-bottom:6px;margin-bottom:7px;display:flex;align-items:center;gap:7px}
.tp--tennis .tp-head{border-bottom-color:#2f7d32}
.tp-date{font-weight:800;color:var(--muted)}
.tp-x{font-size:16px;font-weight:900;color:#0b0b0b}
.tp-list{display:flex;flex-direction:column;max-height:230px;overflow-y:auto}
.tp-row{display:flex;flex-direction:column;gap:1px;padding:5px 0;border-bottom:1px solid #efe9db;
  text-decoration:none;color:var(--ink)!important}
.tp-row:last-child{border-bottom:0}
a.tp-row:hover .tp-sel{text-decoration:underline}
.tp-sel{font-size:12.5px;font-weight:600;line-height:1.25}
.tp-meta{font-size:12px;color:var(--muted)}
.tp-meta b{color:var(--ink)}
.tp-stake{color:var(--gold);font-weight:800}
.tp-res{margin-left:2px}
.tp-w{color:#2f8f4e;font-weight:800}.tp-l{color:#c0392b;font-weight:800}.tp-v{color:var(--muted)}
.tp-match{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--purple);margin:5px 0 1px}
.tp-list .tp-match:first-child{margin-top:0}
.tp-empty{font-size:12px;color:var(--muted);margin:2px 0;line-height:1.4}
@media(max-width:640px){
  .twitter-plays{width:100%;max-width:360px}
  .tp-col{gap:14px}
}

/* community: poll boxes (football + tennis) — vote + like + comments.
   Each poll sits beside its sport's Twitter Plays: football pair (left), tennis pair (right). */
.home-top{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:14px;
  max-width:1400px;margin:2px auto 0;padding:0 18px 6px}
.qotd{box-sizing:border-box;width:300px;max-width:100%;background:var(--panel);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow);padding:12px 15px;text-align:left;display:flex;flex-direction:column}
.qotd-head{border-bottom:2px solid var(--gold);padding-bottom:6px;margin-bottom:9px}
.qotd--tennis .qotd-head{border-bottom-color:#2f7d32}
.qotd-badge{font-family:var(--head);font-weight:800;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:6px}
.qotd-q{font-size:15px;font-weight:700;color:var(--ink);line-height:1.35;margin:0 0 11px}
/* poll options — clickable buttons that fill into result bars after voting */
.poll{display:flex;flex-direction:column;gap:8px}
.poll-opt{position:relative;overflow:hidden;display:block;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--border);border-radius:9px;background:#fff;padding:0;color:var(--ink);font:inherit}
.poll-opt:not(.voted):hover{border-color:var(--purple);background:#faf7ff}
.poll-opt.voted{cursor:default}
.poll-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold);opacity:.22;transition:width .5s ease}
.qotd--tennis .poll-fill{background:#2f7d32}
.poll-opt.mine{border-color:var(--purple)}
.poll-opt.mine .poll-fill{opacity:.34}
.poll-row{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px}
.poll-label{font-size:13.5px;font-weight:700}
.poll-opt.mine .poll-label::after{content:" ✓";color:var(--purple);font-weight:800}
.poll-pct{font-size:13px;font-weight:800;color:var(--muted)}
.poll-total{font-size:11.5px;color:var(--muted);margin:7px 0 0}
/* like + comment toggle row */
.qotd-social{display:flex;gap:8px;margin-top:11px;border-top:1px solid var(--border);padding-top:9px}
.qotd-like,.qotd-cmt-toggle{display:flex;align-items:center;gap:5px;background:var(--parch2);border:1px solid var(--border);
  border-radius:20px;padding:5px 12px;font-size:12.5px;font-weight:800;color:var(--ink);cursor:pointer}
.qotd-like:hover,.qotd-cmt-toggle:hover{background:#e6d6a8}
.qotd-like[aria-pressed="true"]{border-color:#e2649a}
/* comments */
.qotd-comments{margin-top:10px}
.qc-list{display:flex;flex-direction:column;gap:8px;max-height:230px;overflow-y:auto;margin-bottom:9px}
.qc-empty{font-size:12px;color:var(--muted);margin:2px 0}
.qc-form{display:flex;gap:6px}
.qc-form input{flex:1;min-width:0;font-size:13px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--ink)}
.qc-form input:focus{outline:none;border-color:var(--purple)}
.qc-form button{font-weight:800;font-size:13px;color:#fff;background:var(--purple);border:0;border-radius:8px;padding:8px 14px;cursor:pointer}
.qc-form button:hover{background:#4a3190}.qc-form button:disabled{opacity:.6;cursor:default}
.qc-note{font-size:11.5px;color:var(--muted);margin:6px 0 0;min-height:14px}
.qa{border-bottom:1px solid #efe9db;padding-bottom:7px}
.qa:last-child{border-bottom:0}
.qa-top{display:flex;align-items:center;gap:6px;font-size:11.5px}
.qa-name{font-weight:800;color:var(--ink)}
.qa-time{color:var(--muted)}
.qa-del{margin-left:auto;background:none;border:0;color:#c0392b;font-size:12px;cursor:pointer;padding:0 2px}
.qa-text{font-size:13px;color:var(--ink);line-height:1.35;margin:2px 0 0;word-wrap:break-word}
@media(max-width:640px){.qotd{width:100%;max-width:360px}}

/* header "(of Xu risked today)" muted */
.tk-risked{color:var(--muted);font-weight:600}
/* in-article bet result marks (✓/✗) + article return next to "Total staked" */
.ba-mark{margin-left:8px;font-weight:800;font-style:normal}
.ba-w{color:#2f8f4e}.ba-l{color:#c0392b}
.ba-x{color:#111;font-weight:900;font-style:normal}
.ba-void{text-decoration:line-through;text-decoration-color:#111;text-decoration-thickness:2px;opacity:.6}
.art-return{margin-left:6px;font-weight:800;font-style:normal}
.art-return.pos{color:#2f8f4e}.art-return.neg{color:#c0392b}.art-return.even{color:var(--muted)}

/* ===== Login / Sign-up (top-right button + modal) ===== */
.head-right{display:flex;align-items:center;gap:12px;position:relative}
.auth-btn{font-family:var(--body);font-size:12.5px;font-weight:800;color:var(--ink);background:var(--panel);
  border:1.5px solid var(--gold);border-radius:20px;padding:7px 14px;cursor:pointer;white-space:nowrap;
  box-shadow:var(--shadow);transition:background .12s,color .12s}
.auth-btn:hover{background:var(--gold);color:#fff}
.auth-btn.logged-in{border-color:var(--purple);color:var(--purple)}
.auth-btn.logged-in:hover{background:var(--purple);color:#fff}
.auth-menu{position:absolute;top:100%;right:0;margin-top:8px;background:var(--panel);border:1px solid var(--border);
  border-radius:12px;box-shadow:0 14px 36px rgba(40,30,60,.18);padding:10px;min-width:210px;z-index:60;text-align:left}
.auth-menu-name{font-size:12.5px;color:var(--muted);padding:2px 4px 8px;border-bottom:1px solid var(--border);margin-bottom:8px}
.auth-menu button{width:100%;font-weight:700;font-size:13.5px;color:var(--ink);background:var(--parch2);
  border:1px solid var(--border);border-radius:8px;padding:8px;cursor:pointer}
.auth-menu button:hover{background:#e6d6a8}

.auth-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-modal[hidden]{display:none}
.auth-scrim{position:absolute;inset:0;background:rgba(20,12,40,.55)}
.auth-card{position:relative;width:100%;max-width:360px;background:var(--panel);border:1px solid var(--border);
  border-radius:16px;box-shadow:0 24px 64px rgba(20,12,40,.4);padding:26px 24px 22px}
.auth-x{position:absolute;top:12px;right:14px;background:none;border:0;font-size:18px;color:var(--muted);cursor:pointer;line-height:1}
.auth-brand{font-family:var(--head);font-weight:700;font-size:22px;text-align:center;margin:2px 0 16px}
.auth-tabs{display:flex;gap:6px;background:var(--parch2);border-radius:10px;padding:4px;margin-bottom:16px}
.auth-tab{flex:1;font-weight:800;font-size:13.5px;color:var(--muted);background:none;border:0;border-radius:8px;padding:8px;cursor:pointer}
.auth-tab.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
.auth-form{display:flex;flex-direction:column;gap:10px}
.auth-form[hidden]{display:none}
.auth-form input{font-size:15px;padding:11px 13px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--ink)}
.auth-form input:focus{outline:none;border-color:var(--gold)}
.auth-form>button{margin-top:4px;font-weight:800;font-size:15px;color:#fff;background:var(--purple);border:0;border-radius:24px;padding:12px;cursor:pointer}
.auth-form>button:hover{background:#4a3190}
.auth-form>button:disabled{opacity:.6;cursor:default}
.auth-msg{font-size:13px;text-align:center;margin:12px 0 0;min-height:16px}
.auth-msg.err{color:#c0392b}.auth-msg.ok{color:#2f8f4e}
.auth-fine{font-size:11.5px;color:var(--muted);text-align:center;margin:10px 0 0}
body.auth-open{overflow:hidden}
@media(max-width:520px){.auth-btn{font-size:11.5px;padding:6px 11px}.head-right{gap:8px}}

/* auth: forgot-password link, tab hide, verified toast */
.auth-link{background:none;border:0;color:var(--muted);font-size:13px;cursor:pointer;padding:6px;text-decoration:underline;align-self:center}
.auth-link:hover{color:var(--purple)}
.auth-tabs[hidden]{display:none}
.auth-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:24px;font-weight:700;font-size:14px;box-shadow:0 12px 32px rgba(20,12,40,.4);z-index:300;opacity:0;transition:opacity .3s,transform .3s;max-width:90vw;text-align:center}
.auth-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.auth-toast.ok{background:#2f8f4e}.auth-toast.err{background:#c0392b}

/* auth: email-preference tick boxes (signup form + account menu) */
.auth-topics{border:1px solid var(--border);border-radius:9px;padding:9px 12px 11px;margin:2px 0;display:flex;flex-direction:column;gap:7px}
.auth-topics legend{font-size:12px;color:var(--muted);font-weight:700;padding:0 5px;text-transform:uppercase;letter-spacing:.03em}
.auth-topics label{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink);cursor:pointer}
.auth-topics input[type=checkbox]{width:16px;height:16px;accent-color:var(--purple);cursor:pointer}
.auth-prefs{padding:4px 4px 8px;border-bottom:1px solid var(--border);margin-bottom:8px}
.auth-prefs .auth-topics{margin-bottom:8px}
.auth-menu .auth-prefs-save{width:100%;font-size:13px;font-weight:700;padding:8px;border:0;border-radius:8px;background:var(--purple);color:#fff;cursor:pointer}
.auth-menu .auth-prefs-save:hover{background:var(--purple);filter:brightness(1.1)}
.auth-menu .auth-prefs-save:disabled{opacity:.6;cursor:default}
.auth-prefs-msg{font-size:12px;color:var(--muted);text-align:center;margin:6px 0 0;min-height:14px}
.auth-prefs-msg.ok{color:#2f8f4e}

/* auth: password show/hide eyeball */
.pw-wrap{position:relative;display:flex}
.pw-wrap input{width:100%;padding-right:44px}
.pw-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:none;border:0;padding:6px 8px;color:var(--muted);cursor:pointer;display:flex;align-items:center;border-radius:6px;line-height:0}
.pw-eye:hover,.pw-eye.on{color:var(--purple)}
.pw-eye .eye-slash{display:inline}
.pw-eye.on .eye-slash{display:none}

/* ============ mobile polish (small phones) — fixes header overflow + oversized title ============ */
/* never let anything force a horizontal scroll on a phone */
html, body { overflow-x: hidden; }
@media (max-width: 600px) {
  /* header: hamburger + round logo + Log in only. The long wordmark & tilted PPP overflow, so drop them. */
  .brand-name { display: none; }
  .head-ppp { display: none; }
  .brand img { width: 42px; height: 42px; }
  .site-head { min-height: 54px; }
  .auth-btn { font-size: 12px; padding: 6px 12px; }
  /* homepage masthead title must fit the viewport (it's one long word, so it can't wrap) */
  .masthead h1 { font-size: clamp(26px, 8.5vw, 40px); letter-spacing: -.5px; }
  .masthead--home { padding: 30px 16px 14px; }
  .masthead p { font-size: 15px; }
  /* a touch more breathing room in the top boxes */
  .home-top { padding: 0 12px 6px; gap: 12px; }
  .qotd, .twitter-plays { padding: 11px 13px; }
}