/* ============================================================
   Bababaloo — Player's Handbook to the Nintendo Switch
   Palette: dusty sage / blush / powder-blue on cool off-white
   Type: Bricolage Grotesque (display) + Newsreader (reading)
   ============================================================ */



:root{
  --paper:#eaeeea;        /* cool sage-tinted page bg */
  --paper-2:#f2f5f1;
  --cream:#fbfbf7;        /* raised card */
  --ink:#243139;          /* near-black slate */
  --ink-soft:#48585f;
  --muted:#6d7c81;
  --line:#d5ddd6;
  --line-2:#c3cec5;

  --blush:#ecb7c0;
  --blush-2:#f6dade;
  --blush-deep:#c47c8a;

  --sage:#a7c2a3;
  --sage-2:#cfe0cc;
  --sage-deep:#4a6151;

  --powder:#abccdb;
  --powder-2:#d5e6ef;
  --powder-deep:#4f7c92;

  --accent:#d67d8d;       /* CTA blush-coral */
  --accent-ink:#3a2830;

  --shadow-sm:0 1px 2px rgba(36,49,57,.06), 0 4px 14px rgba(36,49,57,.06);
  --shadow-md:0 6px 26px rgba(36,49,57,.10);
  --shadow-lg:0 20px 60px rgba(36,49,57,.16);

  --r-sm:10px;
  --r-md:18px;
  --r-lg:30px;
  --maxw:1200px;
  --read:820px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Newsreader',Georgia,serif;
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--powder-deep);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--accent)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.disp{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.02}
.label{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.82rem}
.serif{font-family:'Newsreader',Georgia,serif}

/* skip link */
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:999}
.skip:focus{left:0}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:60;background:rgba(234,238,234,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.brand{display:flex;align-items:baseline;gap:.5ch;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.6rem;letter-spacing:-.03em;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand .dot{color:var(--accent)}
.brand .sub{font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);align-self:center;margin-left:.4ch}

.nav{display:flex;align-items:center;gap:6px}
.nav a{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:1rem;color:var(--ink-soft);padding:9px 15px;border-radius:999px;letter-spacing:-.01em}
.nav a:hover{color:var(--ink);background:var(--sage-2)}
.nav a.cta{background:var(--ink);color:var(--cream)}
.nav a.cta:hover{background:var(--accent);color:#fff}

/* mobile nav toggle (CSS only) */
.nav-toggle{display:none}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:12px;border-radius:12px}
.burger span{width:26px;height:2.5px;background:var(--ink);border-radius:2px;transition:.25s}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6ch;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:1.02rem;padding:14px 26px;border-radius:999px;cursor:pointer;border:1.5px solid transparent;transition:transform .15s ease, background .2s ease, color .2s ease;letter-spacing:-.01em}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--ink);color:var(--cream)}
.btn-primary:hover{background:var(--accent);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.btn-blush{background:var(--blush);color:var(--accent-ink)}
.btn-blush:hover{background:var(--accent);color:#fff}
.arrow{transition:transform .2s ease}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- Hero (homepage) ---------- */
.hero{position:relative;padding:clamp(48px,7vw,96px) 0 clamp(56px,7vw,104px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--sage-deep);margin-bottom:26px}
.hero-eyebrow .pill{background:var(--sage-2);color:var(--sage-deep);padding:5px 13px;border-radius:999px;font-size:.7rem}
.hero h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.035em;line-height:.94;font-size:clamp(3.1rem,8.5vw,6rem);margin:0 0 .3em;color:var(--ink)}
.hero h1 .stroke{color:transparent;-webkit-text-stroke:2px var(--ink)}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-lead{font-size:clamp(1.25rem,2.4vw,1.5rem);color:var(--ink-soft);max-width:34ch;margin:0 0 32px;line-height:1.5}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.hero-art{position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:linear-gradient(150deg,var(--powder-2),var(--blush-2))}
.hero-art img{width:100%;height:100%;object-fit:cover}
.hero-badge{position:absolute;bottom:20px;left:20px;background:var(--cream);color:var(--ink);border-radius:18px;padding:14px 20px;box-shadow:var(--shadow-md);max-width:74%}
.hero-badge b{font-family:'Bricolage Grotesque',sans-serif;display:block;font-size:1.05rem}
.hero-badge span{font-size:.92rem;color:var(--muted)}
.blob{position:absolute;border-radius:50%;filter:blur(8px);opacity:.55;z-index:-1}
.blob.b1{width:340px;height:340px;background:var(--blush);top:-80px;right:-60px}
.blob.b2{width:280px;height:280px;background:var(--powder);bottom:-90px;left:-70px}

/* ---------- Section scaffolding ---------- */
.section{padding:clamp(52px,7vw,96px) 0}
.section-head{margin-bottom:clamp(28px,4vw,52px);max-width:60ch}
.section-head .kicker{color:var(--accent);margin-bottom:14px}
.section-head h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;letter-spacing:-.03em;line-height:1.02;font-size:clamp(2.1rem,4.6vw,3.4rem);margin:0 0 .35em;color:var(--ink)}
.section-head p{font-size:1.2rem;color:var(--ink-soft);margin:0;max-width:52ch}
.center{text-align:center;margin-left:auto;margin-right:auto}
.center p{margin-left:auto;margin-right:auto}

/* ---------- Two Ways To Play ---------- */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.way{position:relative;border-radius:var(--r-lg);padding:clamp(28px,3.4vw,44px);overflow:hidden;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;color:var(--ink)}
.way.dock{background:linear-gradient(160deg,var(--powder-2),var(--powder))}
.way.hand{background:linear-gradient(160deg,var(--blush-2),var(--blush))}
.way .tag{position:absolute;top:24px;left:clamp(28px,3.4vw,44px);font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;background:rgba(255,255,255,.6);padding:6px 13px;border-radius:999px}
.way h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.02em;margin:0 0 .3em}
.way p{font-size:1.12rem;color:var(--ink-soft);margin:0 0 20px;max-width:38ch}
.way a{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;color:var(--ink);display:inline-flex;gap:.5ch;align-items:center}
.way a:hover{color:var(--accent)}

/* ---------- Stat strip ---------- */
.stats{background:var(--ink);color:var(--cream);border-radius:var(--r-lg);padding:clamp(34px,4.5vw,60px) clamp(26px,4vw,56px)}
.stats-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;margin-bottom:36px}
.stats-head h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.02em;margin:0;color:var(--cream)}
.stats-head p{margin:0;color:#b7c4c1;font-size:1.05rem;max-width:34ch}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.5vw,34px)}
.stat{border-top:2px solid rgba(255,255,255,.22);padding-top:18px}
.stat .num{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(2.2rem,5vw,3.3rem);line-height:1;letter-spacing:-.03em}
.stat .num.blush{color:var(--blush)}
.stat .num.sage{color:var(--sage)}
.stat .num.powder{color:var(--powder)}
.stat .cap{margin-top:10px;font-size:.98rem;color:#c3cfcc;line-height:1.4}

/* ---------- Field Notes (posts index) ---------- */
.notes-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line-2)}
.note{display:grid;grid-template-columns:auto 1.3fr 1fr;gap:clamp(20px,3vw,44px);align-items:center;padding:clamp(24px,3vw,38px) 0;border-bottom:1px solid var(--line-2);transition:padding-left .25s ease}
.note:hover{padding-left:12px}
.note .idx{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.1rem;color:var(--accent)}
.note .body h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(1.5rem,2.8vw,2.1rem);letter-spacing:-.02em;line-height:1.08;margin:0 0 .35em}
.note .body h3 a{color:var(--ink)}
.note .body h3 a:hover{color:var(--accent)}
.note .body p{margin:0;color:var(--ink-soft);font-size:1.1rem;max-width:46ch}
.note .body .tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sage-deep);background:var(--sage-2);padding:5px 12px;border-radius:999px}
.note .thumb{border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/11;box-shadow:var(--shadow-sm);background:var(--powder-2)}
.note .thumb img{width:100%;height:100%;object-fit:cover}

/* ---------- Guides spotlight ---------- */
.guides{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.guide-card{border-radius:var(--r-lg);overflow:hidden;background:var(--cream);box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.guide-card .pic{aspect-ratio:16/10;overflow:hidden;background:var(--sage-2)}
.guide-card .pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.guide-card:hover .pic img{transform:scale(1.04)}
.guide-card .in{padding:clamp(24px,3vw,36px)}
.guide-card .k{color:var(--powder-deep);margin-bottom:12px}
.guide-card h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.02em;line-height:1.1;margin:0 0 .4em;color:var(--ink)}
.guide-card p{margin:0 0 22px;color:var(--ink-soft);font-size:1.1rem}

/* ---------- About teaser ---------- */
.about-teaser{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,4vw,60px);align-items:center;background:var(--paper-2);border-radius:var(--r-lg);padding:clamp(30px,4vw,60px)}
.about-teaser .pic{border-radius:var(--r-md);overflow:hidden;aspect-ratio:1/1;box-shadow:var(--shadow-md);background:var(--blush-2)}
.about-teaser .pic img{width:100%;height:100%;object-fit:cover}
.about-teaser h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(1.9rem,3.6vw,2.8rem);letter-spacing:-.025em;line-height:1.05;margin:.1em 0 .5em;color:var(--ink)}
.about-teaser p{font-size:1.18rem;color:var(--ink-soft);margin:0 0 18px}

/* ============================================================
   Featured Partners — two distinct treatments
   ============================================================ */
/* shared card */
.partner-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md);padding:22px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.partner-logo{width:100%;height:64px;display:flex;align-items:center;justify-content:center;background:var(--paper-2);border-radius:var(--r-sm);margin-bottom:18px;overflow:hidden}
.partner-logo img{max-width:82%;max-height:72%;object-fit:contain}
.partner-card .pname{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.28rem;letter-spacing:-.01em;margin:0 0 8px}
.partner-card .pname a{color:var(--ink)}
.partner-card .pname a:hover{color:var(--accent)}
.partner-card .pdesc{margin:0;color:var(--ink-soft);font-size:1.02rem;line-height:1.5}
/* CSS-only read-more */
.partner-card .pdesc.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pmore{display:none}
.pmore-lbl{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.92rem;color:var(--powder-deep);cursor:pointer;margin-top:8px;display:inline-block}
.pmore-lbl:hover{color:var(--accent)}
.pmore-lbl .less{display:none}
.pmore:checked ~ .pdesc.clamp{-webkit-line-clamp:unset;display:block}
.pmore:checked ~ .pmore-lbl .more{display:none}
.pmore:checked ~ .pmore-lbl .less{display:inline}
.partner-cta{margin-top:auto;padding-top:18px}
.partner-cta a{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.98rem;color:var(--ink);display:inline-flex;align-items:center;gap:.5ch}
.partner-cta a:hover{color:var(--accent)}

/* treatment A — "Gear We Rate": light cards on sage band, 3-up */
.band-gear{background:linear-gradient(180deg,var(--sage-2),var(--paper))}
.gear-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* treatment B — "Friends of the Cartridge": on ink band, 3-up, powder tint */
.band-friends{background:var(--ink)}
.band-friends .section-head h2{color:var(--cream)}
.band-friends .section-head p{color:#b7c4c1}
.band-friends .section-head .kicker{color:var(--blush)}
.friends-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.band-friends .partner-card{background:#2c3a42;border-color:#3a4a52;box-shadow:none}
.band-friends .partner-logo{background:#222e35}
.band-friends .partner-card .pname a{color:var(--cream)}
.band-friends .partner-card .pname a:hover{color:var(--blush)}
.band-friends .partner-card .pdesc{color:#b7c4c1}
.band-friends .partner-cta a{color:var(--powder)}
.band-friends .partner-cta a:hover{color:var(--blush)}
.band-friends .pmore-lbl{color:var(--powder)}

/* ---------- Newsletter/closing note ---------- */
.closing{text-align:center;background:linear-gradient(150deg,var(--blush-2),var(--powder-2));border-radius:var(--r-lg);padding:clamp(38px,5vw,72px) clamp(24px,4vw,56px)}
.closing h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.025em;margin:0 auto .4em;max-width:18ch;color:var(--ink)}
.closing p{font-size:1.18rem;color:var(--ink-soft);max-width:44ch;margin:0 auto 28px}

/* ============================================================
   Article pages
   ============================================================ */
.article-hero{padding:clamp(40px,5vw,72px) 0 clamp(28px,3vw,40px)}
.article-hero .kicker{color:var(--accent);margin-bottom:18px}
.article-hero h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.02;font-size:clamp(2.4rem,6vw,4.4rem);margin:0 auto;max-width:16ch;color:var(--ink)}
.article-hero.center h1{margin-left:auto;margin-right:auto}
.article-hero .standfirst{font-size:clamp(1.3rem,2.5vw,1.6rem);color:var(--ink-soft);max-width:40ch;margin:24px 0 0;line-height:1.45}
.article-hero.center .standfirst{margin-left:auto;margin-right:auto}
.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.article-tags.center{justify-content:center}

.figure-full{margin:clamp(28px,4vw,48px) 0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--powder-2)}
.figure-full img{width:100%;max-height:560px;object-fit:cover}
figure{margin:0}
figcaption{font-size:.98rem;color:var(--muted);margin-top:12px;font-style:italic;font-family:'Newsreader',serif}
.figure-full figcaption{padding:0 4px}

/* body reading column — generously large */
.prose{max-width:var(--read);margin:0 auto;padding-bottom:clamp(40px,6vw,80px)}
.prose > p{font-size:1.44rem;line-height:1.64;margin:0 0 1.15em;color:#2c3a41}
.prose > p:first-of-type{margin-top:.4em}
.prose h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(1.7rem,3.4vw,2.4rem);letter-spacing:-.02em;line-height:1.1;margin:1.6em 0 .5em;color:var(--ink)}
.prose h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(1.35rem,2.4vw,1.7rem);letter-spacing:-.01em;margin:1.5em 0 .4em;color:var(--ink)}
.prose a{color:var(--powder-deep);text-decoration:underline;text-decoration-color:var(--sage);text-underline-offset:3px;text-decoration-thickness:2px}
.prose a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.prose strong{font-weight:600;color:var(--ink)}
.prose em{font-style:italic}
.prose figure{margin:clamp(26px,3.5vw,40px) 0}
.prose figure img{width:100%;border-radius:var(--r-md);box-shadow:var(--shadow-sm)}

/* drop cap on lead paragraph */
.prose .lead{font-size:1.5rem;color:var(--ink);line-height:1.55}
.prose .lead::first-letter{float:left;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:4.4rem;line-height:.78;padding:.06em .12em 0 0;color:var(--accent)}

/* pull quote */
.pullquote{margin:clamp(30px,4vw,52px) 0;padding:8px 0 8px 30px;border-left:5px solid var(--blush);font-family:'Newsreader',serif;font-style:italic;font-size:clamp(1.5rem,3vw,2rem);line-height:1.3;color:var(--ink)}
.pullquote.center{border:none;text-align:center;padding:0 clamp(10px,4vw,40px)}
.pullquote.center::before{content:"“";display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:3.4rem;line-height:.6;color:var(--blush);margin-bottom:.1em}

/* takeaways / at-a-glance box */
.glance{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(24px,3vw,34px);margin:clamp(28px,4vw,44px) 0}
.glance .glance-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.glance .glance-h .dotmark{width:12px;height:12px;border-radius:50%;background:var(--accent)}
.glance .glance-h span{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.86rem;color:var(--sage-deep)}
.glance ul{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.glance li{position:relative;padding-left:34px;font-size:1.16rem;line-height:1.45;color:var(--ink-soft)}
.glance li::before{content:"";position:absolute;left:0;top:.35em;width:18px;height:18px;border-radius:6px;background:var(--sage-2);border:2px solid var(--sage)}

/* callout */
.callout{background:linear-gradient(150deg,var(--powder-2),var(--blush-2));border-radius:var(--r-md);padding:clamp(24px,3vw,34px);margin:clamp(28px,4vw,44px) 0}
.callout .c-lbl{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;color:var(--accent);margin-bottom:10px}
.callout p{font-size:1.3rem !important;line-height:1.45 !important;color:var(--ink) !important;margin:0 !important}

/* quick facts row */
.quickfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:clamp(28px,4vw,44px) 0}
.quickfact{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md);padding:22px}
.quickfact .qf-num{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:2.2rem;line-height:1;letter-spacing:-.03em;color:var(--sage-deep)}
.quickfact .qf-cap{margin-top:10px;color:var(--muted);font-size:.98rem;line-height:1.35}

/* game entry (ranked list) */
.game{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.6vw,32px);align-items:start;padding:clamp(24px,3vw,36px) 0;border-top:1px solid var(--line-2)}
.game:first-of-type{border-top:none}
.game .rank{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(2.4rem,5vw,3.6rem);line-height:.9;letter-spacing:-.04em;color:var(--blush);min-width:1.6ch}
.game .g-body h3{margin:0 0 .35em}
.game .g-body p{font-size:1.28rem;line-height:1.55;color:#2c3a41;margin:0}
.game .g-pic{margin-top:18px;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:16/9;background:var(--powder-2)}
.game .g-pic img{width:100%;height:100%;object-fit:cover}
.game .g-meta{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.g-badge{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.86rem;color:var(--sage-deep);background:var(--sage-2);padding:6px 14px;border-radius:999px}
.g-badge.a{color:var(--powder-deep);background:var(--powder-2)}
.g-badge.b{color:var(--blush-deep);background:var(--blush-2)}
.g-official{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.86rem;padding:6px 14px;border-radius:999px;border:1.5px solid var(--line-2);color:var(--ink)}
.g-official:hover{border-color:var(--accent);color:var(--accent)}

/* info card (real-world add-on) */
.infocard{background:var(--paper-2);border:1px dashed var(--line-2);border-radius:var(--r-md);padding:20px 24px;margin-top:18px}
.infocard .ic-h{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:10px}
.infocard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:1.02rem}
.infocard dt{color:var(--muted)}
.infocard dd{margin:0;color:var(--ink)}

/* map embed */
.mapwrap{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);margin:clamp(26px,3.5vw,40px) 0;background:var(--powder-2)}
.mapwrap iframe{display:block;width:100%;height:360px;border:0}

/* next/prev + related */
.postnav{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;border-top:1px solid var(--line-2);padding:34px 0;max-width:var(--read);margin:0 auto}
.postnav a{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;color:var(--ink);font-size:1.05rem;display:inline-flex;gap:.6ch;align-items:center}
.postnav a:hover{color:var(--accent)}
.postnav .lbl{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:4px}

.readmore-strip{background:var(--paper-2);padding:clamp(44px,6vw,80px) 0}
.rm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.rm-card{background:var(--cream);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.rm-card .pic{aspect-ratio:16/10;overflow:hidden;background:var(--sage-2)}
.rm-card .pic img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.rm-card:hover .pic img{transform:scale(1.05)}
.rm-card .in{padding:20px 22px}
.rm-card h4{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.18rem;line-height:1.15;letter-spacing:-.01em;margin:0}
.rm-card h4 a{color:var(--ink)}
.rm-card h4 a:hover{color:var(--accent)}

/* ---------- About page ---------- */
.about-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,60px);align-items:center;padding:clamp(40px,5vw,72px) 0}
.about-hero .pic{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow-lg);background:var(--blush-2)}
.about-hero .pic img{width:100%;height:100%;object-fit:cover}
.about-block{max-width:var(--read);margin:0 auto}
.about-block h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.02em;margin:1.4em 0 .4em;color:var(--ink);display:flex;align-items:center;gap:14px}
.about-block h2 .n{font-size:1rem;color:var(--accent);font-weight:700}
.about-block p{font-size:1.36rem;line-height:1.62;color:#2c3a41;margin:0 0 1.1em}

/* ---------- Contact page ---------- */
.contact-hero{padding:clamp(40px,5vw,72px) 0 clamp(20px,3vw,32px);text-align:center}
.contact-hero h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.03em;font-size:clamp(2.6rem,7vw,5rem);margin:0 auto;color:var(--ink)}
.contact-hero p{font-size:clamp(1.25rem,2.4vw,1.5rem);color:var(--ink-soft);max-width:44ch;margin:22px auto 0}
.contact-split{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding-bottom:clamp(44px,6vw,80px)}
.contact-main{background:var(--ink);color:var(--cream);border-radius:var(--r-lg);padding:clamp(30px,4vw,52px);display:flex;flex-direction:column;justify-content:center}
.contact-main .k{color:var(--blush);margin-bottom:14px}
.contact-main h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.02em;margin:0 0 .5em;color:var(--cream)}
.contact-main p{color:#c3cfcc;font-size:1.15rem;margin:0 0 26px}
.mail-big{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(1.3rem,3vw,2rem);letter-spacing:-.02em;color:var(--cream);word-break:break-word;display:inline-flex;align-items:center;gap:.5ch}
.mail-big:hover{color:var(--blush)}
.contact-side{display:flex;flex-direction:column;gap:22px}
.contact-tile{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,3vw,38px)}
.contact-tile h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.35rem;letter-spacing:-.01em;margin:0 0 .5em;color:var(--ink)}
.contact-tile p{margin:0;color:var(--ink-soft);font-size:1.12rem}
.social-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.social-row a{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.98rem;padding:10px 18px;border-radius:999px;background:var(--sage-2);color:var(--sage-deep)}
.social-row a:hover{background:var(--accent);color:#fff}
.hours{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:1.08rem;margin-top:6px}
.hours dt{color:var(--muted)}
.hours dd{margin:0;color:var(--ink);font-weight:500}

/* ---------- Footer (minimal, one centered line) ---------- */
.site-foot{border-top:1px solid var(--line);padding:clamp(34px,4vw,52px) 0}
.foot-inner{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.foot-brand{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.4rem;letter-spacing:-.03em;color:var(--ink)}
.foot-brand .dot{color:var(--accent)}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 4px}
.foot-links a{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:.98rem;color:var(--ink-soft);padding:4px 14px;border-radius:999px}
.foot-links a:hover{color:var(--accent);background:var(--sage-2)}
.foot-links .sep{color:var(--line-2);align-self:center}
.foot-copy{font-size:.92rem;color:var(--muted)}

/* ============================================================
   Polish pass — accessibility, tap targets, tactility, editorial meta
   ============================================================ */

/* keep the mobile nav toggle in the tab order (visually hidden, never display:none) */
.nav-toggle{display:block;position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nav-toggle:focus-visible ~ .burger{outline:2.5px solid var(--accent);outline-offset:3px}

/* visible keyboard focus everywhere interactive */
a:focus-visible,.btn:focus-visible,.pmore-lbl:focus-visible,.burger:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px}

/* comfortable tap targets on touch */
.pmore-lbl{padding:9px 2px;display:inline-block}
.social-row a{padding:13px 20px}
.postnav a{padding:10px 2px}

/* tactile card lift, echoing the image-zoom hovers already in place */
.guide-card,.rm-card{transition:box-shadow .25s ease,transform .25s ease}
.guide-card:hover,.rm-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.note{transition:padding-left .25s ease,background-color .25s ease}
.note:hover{background:var(--paper-2)}

/* editorial byline under an article's standfirst */
.byline{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:24px;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.92rem;color:var(--muted)}
.byline .dotsep{width:4px;height:4px;border-radius:50%;background:var(--line-2);flex:none}
.article-hero.center .byline{justify-content:center}

/* a little more footer character, still one compact block */
.foot-tagline{font-size:.98rem;color:var(--ink-soft);margin:-8px 0 0;max-width:48ch;font-style:italic}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-art{aspect-ratio:16/12;max-height:420px}
  .stat-grid{grid-template-columns:1fr 1fr}
  .gear-grid,.friends-grid,.rm-grid,.quickfacts{grid-template-columns:1fr 1fr}
  .about-hero{grid-template-columns:1fr}
  .about-hero .pic{aspect-ratio:16/11;max-height:420px}
  .about-teaser{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:17px}
  .burger{display:flex}
  .nav{position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:stretch;gap:4px;background:var(--paper-2);border-bottom:1px solid var(--line);padding:16px clamp(20px,5vw,48px) 24px;transform:translateY(-140%);transition:transform .3s ease;box-shadow:var(--shadow-md);max-height:calc(100vh - 76px);overflow:auto}
  .nav-toggle:checked ~ .nav{transform:translateY(0)}
  .nav a{padding:14px 16px;font-size:1.12rem;border-radius:12px}
  .nav a.cta{text-align:center;margin-top:6px}
  .ways,.guides,.contact-split{grid-template-columns:1fr}
  .note{grid-template-columns:1fr;gap:16px}
  .note .idx{font-size:1rem}
  .note .thumb{order:-1;aspect-ratio:16/9}
  .prose .lead::first-letter{font-size:3.6rem}
}
@media (max-width:560px){
  .stat-grid{grid-template-columns:1fr 1fr;gap:20px}
  .gear-grid,.friends-grid,.rm-grid,.quickfacts{grid-template-columns:1fr}
  .game{grid-template-columns:1fr;gap:10px}
  .game .rank{font-size:2.6rem}
  .hero-badge{position:static;margin:14px;max-width:none}
  .foot-links{gap:2px}
  .foot-links .sep{display:none}
  .foot-links a{padding:6px 12px}
  .foot-tagline{font-size:.9rem;margin-top:-2px}
}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
/* ============================================================
   Featured Partners — two distinct treatments
   ============================================================ */
/* shared card */
.partner-card > .sponsor{flex:0 0 auto!important}
.partner-logo{flex-wrap:wrap!important}
.partner-logo > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
   a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-blurb-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name):not(.sponsor-box):not(.sp-logo):not(.sponsor__logo){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.gear-grid .partner-card .partner-logo.partner-logo{background:#121013!important;padding:8px 12px!important;box-sizing:border-box!important;height:46px!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
.gear-grid .partner-card .partner-logo.partner-logo img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;margin:0!important;padding:0!important;background:transparent!important;display:block!important;max-width:none!important;max-height:none!important}
.gear-grid .partner-card .partner-logo.partner-logo{display:block!important;width:100%!important}
.friends-grid .partner-card .partner-logo.partner-logo{padding:8px 12px!important;box-sizing:border-box!important;height:46px!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
.friends-grid .partner-card .partner-logo.partner-logo img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;margin:0!important;padding:0!important;background:transparent!important;display:block!important;max-width:none!important;max-height:none!important}
.friends-grid .partner-card .partner-logo.partner-logo{display:block!important;width:100%!important}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   3212px at 390, 26% of the whole page. Two columns bring it to
   1795px (44% shorter). Checked before writing: no new overflow, smallest mark still
   98px wide, longest blurb 3 lines, tile heights 269-302px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. Only the tier(s) that were one-per-row are touched (.gear-grid, .friends-grid), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .gear-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:20px!important}
    .gear-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .gear-grid > * *{min-width:0!important;max-width:100%}
    .gear-grid img,.gear-grid svg{max-width:100%;height:auto}
  .friends-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:20px!important}
    .friends-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .friends-grid > * *{min-width:0!important;max-width:100%}
    .friends-grid img,.friends-grid svg{max-width:100%;height:auto}
  .gear-grid .pdesc{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
  .friends-grid .pdesc{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}
/* op-heading-levels */
.rm-card h3:where(.rt-h4){font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.18rem; line-height: 1.15; letter-spacing: -0.01em; margin: 0px;}
.rm-card h3:where(.rt-h4) a{color: var(--ink);}
.rm-card h3:where(.rt-h4) a:hover{color: var(--accent);}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.guide-card > div.pic > img,
  article.note > a.thumb > img,
  article.rm-card > a.pic > img,
  div.about-teaser > div.pic > img,
  div.figure-full > figure > img,
  div.g-body > div.g-pic > img,
  div.hero-grid.wrap > div.hero-art > img,
  div.prose > figure > img,
  section.about-hero.wrap > div.pic > img){height:auto}
/* op-img-dims:end */