/* SELF-HOSTED FONTS (2026-08-07). These were three <link>s to fonts.googleapis.com, which
 * cost 2,390ms of render-blocking on mobile and held dudspuds.com at Performance 85. A
 * third-party stylesheet is the worst shape for this: the browser must resolve DNS, open a
 * TLS connection and parse Google's CSS before it even LEARNS the font URLs, and only then
 * opens a SECOND connection to fonts.gstatic.com to fetch them. Same-origin woff2 collapses
 * that whole chain into one request the browser already has a connection for.
 *
 * display:swap is kept deliberately. The site already used it via Google, so this changes
 * delivery and not appearance; optional would be faster still but would drop the brand face
 * entirely for a first-time visitor, which is a design regression, not a performance win.
 *
 * Latin subset only, matching the subset Google was already serving to these pages.
 * DM Sans and DM Mono are byte-identical copies of the oye repo's, already proven in prod.
 */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 800;font-display:swap;src:url('/assets/fonts/bricolage.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/dm-sans.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/dm-mono-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/dm-mono-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* putridpotatoes: shared design system (warm, light, inviting). v2 rebuild.
   Canvas: warm paper cream. Text: deep warm brown (high contrast). Accents: olive +
   potato-brown (brand), rot-green (the Rot Count semantic), butter-gold (actions). */

:root{
  --bg:#F7EFDF;          /* warm paper cream */
  --bg-soft:#FBF5E9;     /* lighter band */
  --surface:#FFFDF8;     /* cards */
  --panel:#F2E7D0;       /* tan accent panels */
  --line:#E7DBC1;        /* soft warm border */
  --ink:#2C2316;         /* main text, deep warm brown */
  --muted:#7E7155;       /* secondary text */
  --olive:#5E6B26;       /* "putrid" + headings-on-light */
  --brown:#9A6A33;       /* "potatoes" */
  --rot:#6E8233;         /* Rot Count green */
  --rot-deep:#54641F;
  --gold:#E0982C;        /* butter-gold action accent */
  --gold-deep:#C9851F;
  --shadow:0 6px 20px rgba(92,70,33,.10);
  --shadow-lift:0 16px 36px rgba(92,70,33,.18);
  --r:16px;              /* card radius */
  --maxw:1060px;
  --readw:720px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(140% 90% at 50% -20%, var(--bg-soft) 0%, var(--bg) 60%) fixed,
    var(--bg);
  color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:1}
.display{font-family:"Bricolage Grotesque","DM Sans",sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.wm-putrid{color:var(--olive)} .wm-pot{color:var(--brown)}

/* ---- top bar ---- */
header.bar{position:sticky;top:0;z-index:30;background:rgba(247,239,223,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brandmark{display:flex;align-items:center;gap:11px;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:19px}
.brandmark img{height:34px;width:auto;transition:transform .3s}
.brandmark:hover img{transform:rotate(-8deg)}
.dom{font-family:"DM Mono","DM Sans",monospace;font-size:12px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
nav.links{display:flex;gap:26px;font-size:15px;font-weight:600}
nav.links a{color:var(--muted);transition:color .15s}
nav.links a:hover{color:var(--rot-deep)}
.back{color:var(--muted);font-size:15px;font-weight:600}
.back:hover{color:var(--rot-deep)}

/* ---- buttons ---- */
.btn{display:inline-block;background:var(--gold);color:#3a2a08;font-weight:700;font-size:15px;padding:13px 24px;border-radius:11px;box-shadow:var(--shadow);transition:transform .15s,background .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);background:var(--gold-deep);box-shadow:var(--shadow-lift)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--rot);color:var(--rot-deep);background:var(--surface)}

/* ---- sections + type ---- */
section{padding:72px 0}
.kicker,.season-tag,.crumb,.eyebrow{display:block;font-family:"DM Mono","DM Sans",monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--rot-deep);font-weight:700;margin-bottom:12px}
h1,h2,h3{color:var(--ink)}
h2{font-size:clamp(30px,4.6vw,44px);margin-bottom:16px;transition:color .15s}
h2:hover{color:var(--rot-deep)}
.lead{color:var(--muted);font-size:18px;max-width:var(--readw);line-height:1.7}
.lead b{color:var(--ink)}

/* ---- hero (landing) ---- */
.hero{padding:72px 0 28px;text-align:center}
.spudwrap{width:min(210px,46vw);margin:0 auto 10px;cursor:pointer;filter:drop-shadow(0 14px 26px rgba(92,70,33,.22))}
.spudwrap svg{width:100%;height:auto;display:block;transform-origin:60% 90%}
.spudwrap:hover svg{animation:wobble 1.1s ease-in-out}
.spudwrap.sigh svg{animation:sigh 1.5s ease-in-out}
@keyframes wobble{25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
@keyframes sigh{20%{transform:scaleY(.9) scaleX(1.05) translateY(8px)}55%{transform:scaleY(1.03) scaleX(.98)}100%{transform:none}}
.eggtip{font-size:13px;color:var(--muted);opacity:0;transition:opacity .3s;height:16px;letter-spacing:.04em}
.spudwrap:hover + .eggtip{opacity:.85}
h1.title{font-size:clamp(52px,12vw,120px);margin:6px 0 4px}
h1.title .wm-putrid{color:var(--olive)} h1.title .wm-pot{color:var(--brown)}
.tag{font-size:clamp(22px,3.6vw,32px);color:var(--ink);max-width:720px;margin:14px auto 10px;font-weight:700;line-height:1.25}
.subtag{color:var(--muted);font-size:17px;max-width:610px;margin:0 auto;line-height:1.65}
.subtag b{color:var(--brown);font-weight:700}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:30px 0 4px}

/* ---- rot count device ---- */
.rotcount{margin:44px auto 8px;max-width:520px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px 26px;box-shadow:var(--shadow)}
.rotcount .label{font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--rot-deep);font-weight:700}
.rotcount .num{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:66px;line-height:1;color:var(--rot);margin:8px 0 4px}
.rotcount .verdict{font-size:19px;color:var(--ink);font-weight:600}
.rotcount .verdict b{color:var(--brown)}
.rc-gloss{color:var(--muted);font-size:13px;margin-top:12px}

/* ---- departments grid ---- */
.depts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
@media(max-width:760px){.depts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.depts{grid-template-columns:1fr}}
.dept{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s}
.dept:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:var(--rot)}
.dept .d-name{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:20px;color:var(--brown)}
.dept:hover .d-name{color:var(--rot-deep)}
.dept .d-desc{color:var(--muted);font-size:15px;margin-top:7px}
.dept .d-tag{font-family:"DM Mono",monospace;font-size:12px;color:var(--rot-deep);letter-spacing:.08em;text-transform:uppercase;margin-top:14px;display:inline-block}

/* ---- featured breakdown (landing) ---- */
.feature{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:34px;display:flex;gap:30px;align-items:center;box-shadow:var(--shadow)}
@media(max-width:640px){.feature{flex-direction:column;text-align:center}}
.feature .fc{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:60px;color:var(--rot);line-height:1;min-width:130px;text-align:center}
.feature .fc small{display:block;font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--rot-deep);font-weight:700;margin-top:8px}
.feature h3{font-family:"Bricolage Grotesque",sans-serif;font-size:26px;margin-bottom:8px}
.feature p{color:var(--muted);font-size:16px}

/* ---- find us ---- */
.findgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
@media(max-width:560px){.findgrid{grid-template-columns:1fr}}
.find{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s}
.find:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--rot)}
.find h4{font-family:"Bricolage Grotesque",sans-serif;font-size:18px;margin-bottom:12px}
.find .row{display:flex;flex-wrap:wrap;gap:9px}
.pill{display:inline-block;font-size:14px;font-weight:600;padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);color:var(--ink);background:var(--bg-soft);transition:all .15s}
.pill:hover{border-color:var(--rot);color:var(--rot-deep);transform:translateY(-2px)}
.pill.soon{color:var(--muted);cursor:default;background:transparent}
.pill.soon:hover{transform:none;border-color:var(--line);color:var(--muted)}
.ratio{color:var(--muted);font-size:15px;max-width:580px;margin:16px auto 0}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:48px 0;margin-top:36px;text-align:center;background:var(--bg-soft)}
footer .mark{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:16px}
footer p{color:var(--muted);font-size:14px;margin-top:9px}
footer a{color:var(--brown);font-weight:600}
footer a:hover{color:var(--rot-deep)}

/* The footer social row, generated by oye-social-engine from src/brands.data.json. It is NEW:
   the socials lived only in the homepage BODY, so two of three pages linked nothing.

   THIS FOOTER IS LIGHT, and that changes the icon treatment rather than just its colours.
   Every dark-ground brand in this sweep hovers the icon TO the accent. Measured against this
   band (--bg-soft #FBF5E9), --gold #E0982C is 2.22:1 as a foreground and FAILS outright, while
   ink ON gold is 6.40:1. So the hover FILLS with gold and flips the glyph to ink, which is the
   same idea inverted, keeps gold as this brand action accent, and stays readable.

   Resting glyph is --olive #5E6B26 at 5.36:1. WCAG 1.4.11 only asks 3:1 of a non-text graphic,
   so this has room; --gold as a resting colour would not have, at any size. */
.foot-social { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.foot-social .social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--olive);
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}
.foot-social .social-icon svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.foot-social .social-icon:hover {
  color: var(--ink); background: var(--gold); border-color: var(--gold-deep);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .foot-social .social-icon { transition: none; }
  .foot-social .social-icon:hover { transform: none; }
}

/* ---- season hub ---- */
.season-hero{padding:64px 0 18px;text-align:center}
.season-hero h1{font-size:clamp(46px,9vw,86px);margin:8px 0 8px}
.season-hero p{color:var(--muted);font-size:18px;max-width:660px;margin:8px auto 0;line-height:1.7}
.season-hero p b{color:var(--ink)}
.how{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:26px 0 6px}
.how .chip{font-size:14px;border:1.5px solid var(--line);border-radius:999px;padding:9px 17px;color:var(--muted);background:var(--surface)}
.how .chip b{color:var(--rot-deep);font-weight:700}
.thesis{max-width:680px;margin:24px auto 0;font-size:18px;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;line-height:1.65}
.thesis b{color:var(--rot-deep)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:720px){.grid{grid-template-columns:1fr}}
.card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:var(--rot)}
.card .status{font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.card .status.live{color:var(--rot-deep)}
.card .status.soon{color:var(--muted)}
.card h2{font-family:"Bricolage Grotesque",sans-serif;font-size:25px;margin:9px 0 3px;color:var(--brown)}
.card:hover h2{color:var(--rot-deep)}
.card .book{font-size:13.5px;color:var(--muted)}
.card .angle{font-size:16px;color:var(--ink);margin:14px 0 16px;line-height:1.6}
.card .counts{display:flex;gap:12px}
.count{flex:1;border:1px solid var(--line);border-radius:11px;padding:10px;text-align:center;background:var(--bg-soft)}
.count .k{font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700}
.count .v{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:24px;color:var(--rot);line-height:1.15}
.count .v.tbd{color:var(--muted);font-size:16px}
.lean{font-size:13px;color:var(--brown);font-weight:600;margin-top:14px;line-height:1.5}
.lean b{color:var(--rot-deep)}
.note{color:var(--muted);font-size:15px;max-width:700px;margin:34px auto 0;text-align:center;line-height:1.7}
.note b{color:var(--ink)}

/* ---- breakdown post ---- */
article{padding:52px 0 24px}
article .wrap{max-width:var(--readw)}
article h1{font-size:clamp(34px,7vw,56px);line-height:1.05;margin:10px 0 6px}
.meta{color:var(--muted);font-size:15px;margin-bottom:26px}
.hero-count{display:flex;align-items:center;gap:20px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px;margin:8px 0 32px;box-shadow:var(--shadow)}
.hero-count .big{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:58px;color:var(--rot);line-height:1}
.hero-count .big small{display:block;font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--rot-deep);font-weight:700;margin-top:5px}
.hero-count p{color:var(--ink);font-size:16px}
article p{margin:0 0 20px;font-size:18px}
article p.lede{font-size:20px;color:var(--ink)}
.dept-block{border-top:1px solid var(--line);padding-top:26px;margin-top:34px}
.dept-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.dept-head h2{font-family:"Bricolage Grotesque",sans-serif;font-size:25px;color:var(--brown)}
.dept-block:hover .dept-head h2{color:var(--rot-deep)}
.dept-head .cnt{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;color:var(--rot);font-size:21px;white-space:nowrap}
.spot{display:flex;gap:13px;margin:16px 0}
.spot .dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--rot);margin-top:11px;box-shadow:0 0 0 4px rgba(110,130,51,.14)}
.spot p{margin:0;font-size:17px;color:var(--ink)}
.spot b{color:var(--brown)}
.cleared{display:flex;gap:13px;margin:18px 0 4px;padding:16px 18px;background:#FBF1DC;border:1px solid #EAD3A3;border-radius:13px}
.cleared .dot-clear{flex:none;width:9px;height:9px;border-radius:50%;background:var(--gold);margin-top:11px;box-shadow:0 0 0 4px rgba(224,152,44,.16)}
.cleared p{margin:0;font-size:16px;color:var(--ink)}
.cleared b{color:var(--gold-deep)}
.verdict{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px;margin:42px 0 12px;text-align:center}
.verdict .v{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:28px;color:var(--rot-deep)}
.verdict p{color:var(--muted);font-size:16px;margin:10px 0 0}
.disc{color:var(--muted);font-size:13px;max-width:620px;margin:22px auto 0;line-height:1.65}

/* ============ RT / IMDb-style catalog ============ */
/* header search */
.searchbar{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 13px;flex:1;max-width:330px;box-shadow:var(--shadow)}
.searchbar .mag{flex:none;width:15px;height:15px;opacity:.55}
.searchbar input{border:0;background:transparent;font:inherit;font-size:15px;color:var(--ink);width:100%;outline:none}
.searchbar input::placeholder{color:var(--muted)}
.bar .wrap.three{gap:18px}
@media(max-width:680px){.searchbar{order:3;max-width:none;flex-basis:100%}}

/* toolbar: result count + sort/filter chips */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:4px 0 22px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.toolbar .rescount{font-family:"DM Mono",monospace;font-size:13px;color:var(--muted);letter-spacing:.03em}
.toolbar .rescount b{color:var(--ink)}
.toolbar .chips{display:flex;gap:8px;flex-wrap:wrap}
.chipf{font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;border:1.5px solid var(--line);color:var(--muted);background:var(--surface);cursor:pointer;transition:all .15s}
.chipf:hover{border-color:var(--rot);color:var(--rot-deep)}
.chipf.on{border-color:var(--rot);background:var(--rot);color:#fff}

/* catalog poster grid */
.catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.tcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s}
.tcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:var(--rot)}
.tcard .poster{aspect-ratio:3/4;background:radial-gradient(120% 100% at 50% 25%,#E9D6AE,#C9A364);position:relative;display:flex;align-items:center;justify-content:center;padding:18px}
.tcard .poster img{width:62%;height:auto;filter:drop-shadow(0 8px 14px rgba(80,55,20,.28));transition:transform .25s}
.tcard:hover .poster img{transform:rotate(-5deg) scale(1.04)}
.tcard .status-corner{position:absolute;top:10px;left:10px;font-family:"DM Mono",monospace;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:6px}
.status-corner.live{background:var(--rot);color:#fff}
.status-corner.soon{background:rgba(44,35,22,.55);color:#fff}
.status-corner.outlier{background:var(--brown);color:#fff}
.tcard .pscores{position:absolute;bottom:0;left:0;right:0;display:flex;gap:6px;padding:10px;background:linear-gradient(to top,rgba(40,28,12,.78),rgba(40,28,12,0))}
.pscore{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;background:rgba(255,253,248,.94);border-radius:8px;padding:5px 4px}
.pscore .pi{font-size:12px}
.pscore .pn{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:17px;color:var(--rot-deep);line-height:1}
.pscore .pn.tbd{color:var(--muted);font-size:12px;font-weight:700}
.tcard .tmeta{padding:14px 16px 16px}
.tcard .ttitle{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:17px;color:var(--ink);line-height:1.2}
.tcard:hover .ttitle{color:var(--rot-deep)}
.tcard .ttitle span{color:var(--muted);font-weight:600;font-size:.82em}
.tcard .tsub{font-size:13px;color:var(--muted);margin-top:5px}
.tcard .tlean{font-size:12px;color:var(--brown);font-weight:700;margin-top:9px}
.tcard[hidden]{display:none}

/* IMDb-style title header (detail pages) */
.title-hero{display:flex;gap:26px;align-items:flex-start;margin:8px 0 30px}
@media(max-width:560px){.title-hero{flex-direction:column}}
.title-hero .poster{flex:none;width:150px;aspect-ratio:3/4;border-radius:12px;background:radial-gradient(120% 100% at 50% 25%,#E9D6AE,#C9A364);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.title-hero .poster img{width:64%}
.title-hero .th-scores{display:flex;gap:12px;margin-top:14px}
.title-hero .ths{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 16px;box-shadow:var(--shadow)}
.title-hero .ths .pi{font-size:14px}
.title-hero .ths .pn{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:30px;color:var(--rot);line-height:1}
.title-hero .ths .pn.tbd{color:var(--muted);font-size:17px}
.title-hero .ths .pk{font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:4px}

/* ===== density pass: tighten like RT / IMDb ===== */
body{font-size:16px;line-height:1.6}
section{padding:46px 0}
.bar .wrap{height:56px}
.brandmark{font-size:17px}
.brandmark img{height:27px}
.hero{padding:42px 0 14px}
.spudwrap{width:min(128px,27vw);margin-bottom:4px}
h1.title{font-size:clamp(38px,7vw,76px)}
.tag{font-size:clamp(18px,2.7vw,25px);margin:10px auto 6px}
.subtag{font-size:15px;max-width:560px}
.hero-cta{margin:20px 0 0}
.season-hero{padding:38px 0 10px}
.season-hero h1{font-size:clamp(36px,7vw,64px)}
.season-hero p{font-size:16px;max-width:600px}
.thesis{font-size:15.5px;margin-top:16px;padding:13px 0}
.how{margin:16px 0 2px}
h2{font-size:clamp(24px,3.4vw,35px);margin-bottom:11px}
.lead{font-size:16px}
.kicker,.season-tag,.crumb,.eyebrow{margin-bottom:9px}
.toolbar{margin:2px 0 14px;padding-bottom:12px}
.catalog{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.tcard .poster{aspect-ratio:2/3}
.tcard .poster img{width:55%}
.tcard .pscores{padding:8px}
.tcard .pscore{padding:4px 3px}
.tcard .pscore .pn{font-size:15px}
.tcard .tmeta{padding:10px 12px 12px}
.tcard .ttitle{font-size:15px}
.tcard .tsub{font-size:12px;margin-top:3px}
.tcard .tlean{font-size:12px;margin-top:6px}
.depts{gap:12px;margin-top:20px}
.dept{padding:16px}
.dept .d-name{font-size:18px}
.dept .d-desc{font-size:14px}
.findgrid{gap:14px;margin-top:20px}
.find{padding:18px}
.feature{padding:24px;gap:22px}
footer{padding:30px 0;margin-top:22px}

/* ===== the spud sighs wherever he is, on hover (bar logo + every poster) ===== */
.brandmark img, .tcard .poster img { transform-origin: 50% 88%; }
.brandmark:hover img { transform: none; animation: spudsigh 2.1s ease-in-out; }
.tcard:hover .poster img { transform: none; animation: spudsigh 2.1s ease-in-out; }
@keyframes spudsigh {
  0%   { transform: none; }
  50%  { transform: scaleY(1.11) scaleX(.96); }   /* breath in (a little faster) */
  78%  { transform: scaleY(.89) scaleX(1.06); }   /* breath out (much faster) */
  100% { transform: none; }
}

/* ---- 404 ----
   The site had no 404 page, so a bad URL got a bare Cloudflare error page. This one reuses the
   real header, the real footer and the existing .btn and .btn.ghost classes; only the five
   .nf-* rules below are new.

   Contrast measured against the page ground #F7EFDF, not judged by eye:
     --ink   #2C2316  13.1:1   the title
     --muted #7E7155  4.07:1   used ONLY on the 404 eyebrow, which is a label, not body copy
   The lede is --ink rather than --muted for that reason. --gold is 2.05:1 here and is never a
   foreground on this ground; it is the .btn background, where ink on gold measures 6.0:1. */
.nf { padding: 90px 0 110px; max-width: var(--readw); }
.nf-code {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
}
.nf-title { margin: 0 0 14px; color: var(--ink); }
.nf-lede { margin: 0 0 28px; color: var(--ink); font-size: 17px; line-height: 1.6; }
.nf-routes { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 700px) {
  .nf { padding: 60px 0 80px; }
  .nf-lede { font-size: 16px; }
}