/* fifthdownsports.com/blog — shared styles for the index and every post.
   The three one-off pages (index, forecast, rooting-guide) each inline their
   own <style> block, which is right for a page that exists once. Posts
   multiply, so they share this file instead of carrying a copy each.
   Same tokens as the hub page; change a color there, change it here. */

:root{
  --green:#278350; --green-hi:#2E9159; --green-lo:#1F6B41;
  --orange:#F97316; --orange-hi:#FB8A3C;
  --bg:#0F1311; --panel:#171C19; --panel-hi:#1D2320;
  --ink:#F5F3EF; --muted:#A8B0AA; --faint:#6E7671; --line:#262D28;
  --display:'Archivo Black',system-ui,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.65}
a{color:inherit}
::selection{background:var(--orange);color:#141414}
img{max-width:100%}

.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:720px}

/* ── Nav — matches the hub page exactly ──────────────── */
/* The site header, and ONLY the site header. This was a bare `nav` selector
   until 12 Aug, which meant any other <nav> on a page — a row of link cards,
   say — silently became a sticky bar that floated over the content behind it.
   Every page's header is a direct child of body; nothing else is. */
body > nav{border-bottom:1px solid var(--line);background:rgba(15,19,17,.85);
    backdrop-filter:blur(10px);position:sticky;top:0;z-index:10}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.lockup{display:flex;align-items:center;gap:10px;text-decoration:none}
.mark{width:32px;height:32px;border-radius:8px;display:block}
.lockup span{font-family:var(--display);font-size:14px;letter-spacing:.08em}
.nav-links{display:flex;gap:26px;font-size:13.5px;font-weight:600;color:var(--muted)}
.nav-links a{text-decoration:none;transition:color .15s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
.nav-links .ig{color:var(--orange)}
/* Phones: the links fold into a hamburger. The wordmark keeps its room. */
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px;margin-right:-10px}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;
             border-radius:2px;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu{display:none;position:absolute;top:100%;left:0;right:0;
      background:rgba(15,19,17,.97);backdrop-filter:blur(10px);
      border-bottom:1px solid var(--line);padding:6px 24px 14px}
@media(max-width:640px){
  .nav-links{display:none}
  .burger{display:block}
  .menu.open{display:grid}
  .menu a{padding:13px 0;font-size:15.5px;font-weight:700;text-decoration:none;
          color:var(--ink);border-bottom:1px solid var(--line)}
  .menu a:last-child{border-bottom:0}
  .menu .ig{color:var(--orange)}
}

/* ── Masthead (index) ────────────────────────────────── */
.masthead{border-bottom:1px solid var(--line);padding:64px 0 52px;
  background-image:linear-gradient(rgba(15,19,17,.86),var(--bg)),
    repeating-linear-gradient(90deg,var(--green-hi) 0 90px,var(--green) 90px 180px)}
.kicker{font-size:12.5px;font-weight:800;letter-spacing:.22em;color:var(--orange-hi);
        text-transform:uppercase;margin-bottom:14px}
.masthead h1{font-family:var(--display);font-size:clamp(34px,5vw,56px);line-height:1.06}
.masthead p{margin-top:18px;color:#E9EFEA;font-size:clamp(15.5px,1.7vw,18px);max-width:32em}

/* ── Post list ───────────────────────────────────────── */
.posts{padding:52px 0 20px;display:grid;gap:18px}
.posts.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.post-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:30px;
  display:flex;flex-direction:column;gap:12px;text-decoration:none;
  transition:transform .18s,border-color .18s,background .18s}
.post-card:hover{transform:translateY(-4px);border-color:#33413a;background:var(--panel-hi)}
.post-card .meta{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-hi)}
.post-card h2{font-family:var(--display);font-size:clamp(20px,2.4vw,26px);line-height:1.18}
.post-card .dek{color:var(--muted);font-size:15px;flex:1}
.post-card .more{font-weight:800;font-size:14.5px;color:var(--orange);
  display:inline-flex;align-items:center;gap:6px}
.post-card .more::after{content:"→";transition:transform .15s}
.post-card:hover .more::after{transform:translateX(3px)}
.post-card.lead{grid-column:1/-1;padding:38px}
.post-card.lead h2{font-size:clamp(26px,3.6vw,38px)}

.empty{background:var(--panel);border:1px dashed var(--line);border-radius:20px;
  padding:48px 30px;text-align:center;color:var(--faint)}

/* ── Article ─────────────────────────────────────────── */
/* The way back. The nav's Blog link does this too, but a reader deep in a
   post shouldn't have to know that — the crumb is the visible path. */
.crumb{padding:26px 0 0;font-size:13.5px;font-weight:800}
.crumb a{text-decoration:none;color:var(--muted);transition:color .15s}
.crumb a:hover{color:var(--ink)}
.article-head{padding:26px 0 34px;border-bottom:1px solid var(--line)}
.article-head h1{font-family:var(--display);font-size:clamp(30px,4.4vw,46px);line-height:1.08;
  text-wrap:balance}
.article-head .dek{margin-top:18px;color:var(--muted);font-size:clamp(16px,1.9vw,19px);
  line-height:1.6}
/* Wrap a record or scoreline in <span class="nb"> so it cannot break
   across lines — "9-" then "3" reads as a typo, not a record. Football
   prose is full of these. */
.nb{white-space:nowrap}
.byline{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:26px;
  font-size:13.5px;color:var(--faint)}
.byline .who{font-weight:800;color:var(--ink)}
.byline .dot{color:var(--line)}
/* Author handles. They differ per platform often enough that naming the
   platform beats two bare @s the reader has to guess between. */
.byline a.social{color:var(--orange);text-decoration:none;font-weight:700}
.byline a.social:hover{color:var(--orange-hi)}
.byline a.social .on{color:var(--faint);font-weight:600}

.article{padding:38px 0 10px;font-size:17.5px;line-height:1.8;color:#E4E7E4}
.article > * + *{margin-top:1.25em}
.article h2{font-family:var(--display);font-size:clamp(21px,2.6vw,27px);color:var(--ink);
  line-height:1.25;margin-top:1.9em}
.article h3{font-family:var(--display);font-size:18.5px;color:var(--ink);margin-top:1.7em}
.article a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.article a:hover{color:var(--orange-hi)}
.article strong{color:var(--ink)}
.article ul,.article ol{padding-left:1.3em}
.article li + li{margin-top:.5em}
.article blockquote{border-left:3px solid var(--orange);padding:4px 0 4px 22px;
  font-size:20px;line-height:1.55;color:var(--ink);font-weight:600}
.article hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.article figure{margin-top:2em}
.article figure img{border-radius:14px;border:1px solid var(--line);display:block}
.article figcaption{margin-top:10px;font-size:13.5px;color:var(--faint)}

/* The funnel: every post ends pointing at the two things that need no
   account. This is the whole reason posts live on our domain. */
.tools{margin:52px 0 0;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tool{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:26px;
  text-decoration:none;display:flex;flex-direction:column;gap:9px;
  transition:transform .18s,border-color .18s,background .18s}
.tool:hover{transform:translateY(-4px);border-color:#33413a;background:var(--panel-hi)}
.tool h3{font-family:var(--display);font-size:17px}
.tool p{color:var(--muted);font-size:14.5px}
.tool span{font-weight:800;font-size:14px;color:var(--orange)}

.backlink{padding:44px 0 0;font-size:14px;font-weight:700;color:var(--muted)}
.backlink a{text-decoration:none}
.backlink a:hover{color:var(--ink)}

/* ══ The room: sharing, take polls, comments ══════════════════════════════
   All of it driven by /blog/community.js. Each block is invisible until that
   file mounts it, so a post with the script removed just loses the features
   rather than showing empty furniture. */

/* ── Share row ───────────────────────────────────────── */
.share{margin:44px 0 0;padding:20px 0 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.share:empty{display:none}
.share-lead{font-family:var(--display);font-size:14px;letter-spacing:.04em}
.share-btns{display:flex;flex-wrap:wrap;gap:10px}
.share .sh{background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:11px;padding:9px 16px;font:800 13.5px var(--body);cursor:pointer;
  text-decoration:none;display:inline-block;transition:border-color .15s,background .15s}
.share .sh:hover{border-color:#3a4a41;background:var(--panel-hi)}
.share .sh.ok{border-color:var(--green-hi);color:#9FE0B5}

/* ── Pull-quote sharing ──────────────────────────────── */
.article blockquote{position:relative}
.quote-share{display:block;margin-top:12px;background:none;border:0;padding:0;
  font:800 12.5px var(--body);letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange);cursor:pointer}
.quote-share:hover{color:var(--orange-hi)}
.quote-share:disabled{color:var(--faint);cursor:default}

/* ── Take polls ──────────────────────────────────────── */
.take-poll{margin:38px 0;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:22px 24px}
.take-poll:empty{display:none}
.tp-q{font-family:var(--display);font-size:17px;line-height:1.35}
.tp-opts{display:grid;gap:10px;margin-top:16px}
.tp-opt{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;
  background:var(--panel-hi);border:1px solid var(--line);border-radius:12px;
  padding:13px 16px;font:inherit;color:var(--ink);cursor:pointer;text-align:left;
  transition:border-color .15s}
.tp-opt:hover{border-color:#3a4a41}
.tp-opt.picked{border-color:var(--green-hi)}
.tp-bar{position:absolute;inset:0 auto 0 0;background:rgba(46,145,89,.24);
  transition:width .45s ease;border-radius:11px 0 0 11px}
.tp-opt.picked .tp-bar{background:rgba(46,145,89,.42)}
.tp-label{position:relative;flex:1;font-weight:700;font-size:15px}
.tp-pct{position:relative;font-family:var(--display);font-size:14px;color:var(--muted)}
.tp-opt.picked .tp-pct{color:#9FE0B5}
.tp-foot{margin-top:12px;font-size:12.5px;color:var(--faint)}

/* ── Comments ────────────────────────────────────────── */
#comments{margin:56px 0 0;padding-top:34px;border-top:1px solid var(--line)}
#comments:empty{display:none}
.cm-head{font-family:var(--display);font-size:clamp(20px,2.6vw,26px)}
.cm-note{margin-top:10px;color:var(--muted);font-size:14.5px}
.cm-note a{color:var(--orange);font-weight:800}
.cm-form{margin-top:18px}
.cm-form textarea{width:100%;background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  font:400 15.5px/1.6 var(--body);resize:vertical;outline:none}
.cm-form textarea:focus{border-color:#3a4a41}
.cm-actions{display:flex;align-items:center;gap:12px;margin-top:10px}
.cm-err{flex:1;color:#F87171;font-size:13px;font-weight:600}
.cm-count{color:var(--faint);font-size:12.5px;font-variant-numeric:tabular-nums}
.cm-form button{background:var(--orange);color:#141414;border:0;border-radius:11px;
  padding:10px 22px;font:800 14px var(--body);cursor:pointer}
.cm-form button:disabled{background:var(--panel-hi);color:var(--faint);cursor:default}
.cm-list{margin-top:26px;display:grid;gap:14px}
.cm-empty{color:var(--faint);font-size:14.5px;padding:6px 0 10px}
.cm{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.cm.hidden-row{opacity:.55;border-style:dashed}
.cm-top{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--faint)}
.cm-top b{color:var(--ink);font-size:14.5px}
.cm-badge{width:26px;height:26px;border-radius:50%;flex:none;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
.cm-badge img{width:80%;height:80%;object-fit:contain;display:block}
.cm-badge.init{background:var(--green);color:#fff;font:800 13px var(--body)}
.cm-joined{color:var(--faint);font-size:11px;border:1px solid var(--line);border-radius:999px;padding:1px 8px}
.cm-rank{color:var(--orange-hi);font:800 10px var(--body);letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(249,115,22,.45);border-radius:999px;padding:1px 8px;text-decoration:none}
a.cm-rank:hover{background:rgba(249,115,22,.12)}
.cm-flag{border:1px solid #7f3b3b;color:#F87171;border-radius:6px;padding:1px 7px;
  font:800 10.5px var(--body);letter-spacing:.08em;text-transform:uppercase}
.cm p{margin-top:9px;font-size:15.5px;line-height:1.65;color:#E4E7E4;
  white-space:pre-wrap;overflow-wrap:anywhere}
.cm-tools{margin-top:10px;display:flex;gap:14px}
.cm-tools:empty{display:none}
.cm-tools button{background:none;border:0;padding:0;color:var(--faint);
  font:700 12.5px var(--body);cursor:pointer}
.cm-tools button:hover{color:var(--ink)}

/* The index cards wear their comment count, so the Press Box looks lived in. */
.card-count{color:var(--orange-hi)}
.card-count::before{content:' · ';color:var(--faint)}

/* ── Footer — matches the hub page ───────────────────── */
.creed{margin:80px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
       background:var(--panel)}
.creed-inner{padding:46px 0;text-align:center}
.creed p{font-family:var(--display);font-size:clamp(17px,2.4vw,24px);color:var(--ink)}
.creed span{color:var(--green-hi)}
footer{padding:52px 0 60px;color:var(--faint);font-size:13.5px}
.foot{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between}
.foot .lockup span{color:var(--muted)}
.foot-links{display:flex;flex-wrap:wrap;gap:22px}
.foot-links a{text-decoration:none;transition:color .15s}
.foot-links a:hover{color:var(--ink)}
.fine{margin-top:26px;line-height:1.9}

a:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:8px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}