/* DiceFloor redesign — df.css
   Shared chrome (tokens, helpers, util/masthead/nav, footer, mobile shell) + per-page sections.
   Source of truth: ~/Desktop/dicefloor-design/*.html (approved 2026-07-06). Sections are appended per page as they are wired. */

/* ================= Tokens ================= */
:root{
  --paper:#f6f4ef;
  --paper-2:#eeebe2;
  --card:#fffdf9;
  --ink:#141311;
  --ink-2:#403c36;
  --ink-3:#736e64;
  --ink-4:#a9a394;
  --hair:#d8d3c6;
  --hair-dark:#141311;
  --accent:#c0392b;
  --accent-2:#992d22;
  --shadow-card:0 12px 36px -14px rgba(35,25,12,.18),0 2px 6px -2px rgba(35,25,12,.07);
  --serif:"Fraunces","Newsreader",Georgia,serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  /* 1248 = 1200px of content + the 24px gutter either side. Raised from 1200 on
     2026-07-27 so the wider desktop look survived the gutter fix: before that,
     the affected rows had no gutter and ran the full 1200. Tablet is unaffected
     — below 1248 the container is viewport-width and the gutter still applies. */
  --container:1248px;
}
/* dark-mode skeleton: override tokens under [data-theme="dark"] later */

/* ================= Reset ================= */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block;background:var(--paper-2)}
a{color:inherit;text-decoration:none}
a:hover .hl,.hl:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,h4,p,ul{margin:0;padding:0}
ul{list-style:none}

/* ================= Type helpers ================= */
.caps{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-size:10.5px;font-weight:700;color:var(--ink)}
.kicker{font-family:var(--sans);text-transform:uppercase;letter-spacing:.13em;font-size:10px;font-weight:700;color:var(--accent)}
.kicker .k2{color:var(--ink-3)}
.meta{font-family:var(--sans);font-size:11px;color:var(--ink-3);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dek{font-family:var(--serif);font-weight:300;color:var(--ink-2);font-size:13px;line-height:1.42}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hd{font-family:var(--serif);font-weight:600;color:var(--ink);letter-spacing:-.01em}
.hd-hero{font-size:30px;line-height:1.08;font-weight:650}
.hd-hero2{font-size:24px;line-height:1.1;font-weight:650}
.hd-lg{font-size:22px;line-height:1.12}
.hd-md{font-size:16px;line-height:1.18}
.hd-sm{font-size:14.5px;line-height:1.22}
.hd-xs{font-size:13.5px;line-height:1.25}
.listen-pill{display:inline-block;background:transparent;border:1px solid var(--ink);color:var(--ink);font-family:var(--sans);font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;border-radius:999px;padding:2px 8px;line-height:1;vertical-align:1px;flex:0 0 auto;cursor:pointer}
.listen-pill:hover{border-color:var(--accent);color:var(--accent)}
.listen-pill.playing{background:var(--accent);border-color:var(--accent);color:#fff}

/* ================= Layout ================= */
/* The 24px here is the site's side gutter. Section classes are applied to the
   SAME element (class="container hero"), so any of them declaring a `padding`
   shorthand wipes it out — a shorthand sets all four sides. Use padding-top /
   padding-bottom longhands in those rules, never the shorthand. Invisible on a
   desktop monitor, where the centred 1200px container leaves natural margin;
   on a tablet the container fills the screen and content touches the glass. */
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.hair{height:1px;background:var(--hair);border:0;margin:0}
.hair.dark{background:var(--hair-dark)}
.desktop{display:block}
.mobile{display:none}

/* ================= Utility bar ================= */
.util{font-family:var(--sans);font-size:11.5px;color:var(--ink-2)}
.util .row{display:flex;justify-content:space-between;align-items:center;padding-top:8px;padding-bottom:8px}
.util .left,.util .right{display:flex;align-items:center;gap:18px}
.util .date{color:var(--ink-3)}
.util a:hover{color:var(--accent)}
.pill{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border:1px solid var(--hair);border-radius:999px;font-size:11px;color:var(--ink-2)}
.pill:hover{border-color:var(--ink-3)}
.pill .bullet{width:5px;height:5px;border-radius:50%;background:var(--accent)}
/* Restoring the 24px gutter leaves the utility row about 50px short of fitting
   on one line between 821 and 880px (iPad 11" portrait). Tighten the item
   spacing just there rather than let it wrap mid-phrase ("Submit a / tip").
   Desktop spacing is untouched. */
@media (min-width:821px) and (max-width:1023px){
  .util .left,.util .right{gap:11px}
  .util a,.util .pill{white-space:nowrap}
}

/* ================= Masthead ================= */
.masthead{text-align:center;padding-top:16px;padding-bottom:10px}
.wordmark{line-height:1;display:inline-block;white-space:nowrap}
.wordmark .dice{font-family:var(--serif);font-weight:300;font-style:italic;color:var(--accent)}
.wordmark .floor{font-family:var(--sans);font-weight:300;color:var(--ink);letter-spacing:.03em}
.masthead .wordmark{font-size:46px}
.tagline{font-family:var(--sans);font-size:11.5px;color:var(--ink-3);margin-top:6px;letter-spacing:.03em}

/* ================= Nav ================= */
.nav{position:relative}
.nav ul{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap}
.nav a{display:inline-block;position:relative;font-family:var(--sans);text-transform:uppercase;letter-spacing:.11em;font-size:11px;font-weight:600;color:var(--ink);padding:9px 0}
.nav a:hover{color:var(--accent)}
.nav a.active{color:var(--accent)}
/* active marker sits on the hr below the nav: 2px line, 1px inside + 1px over the hairline */
.nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
.nav .search-btn{position:absolute;right:24px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:7px;color:var(--ink-2)}
.nav .search-btn svg{width:15px;height:15px}
.nav .search-btn input{border:0;background:transparent;padding:2px 4px;font-family:var(--sans);font-size:12px;width:130px;outline:none;color:var(--ink)}

/* ================= Hero ================= */
.hero{display:grid;grid-template-columns:1fr 2.05fr 1fr;padding-top:18px;padding-bottom:26px}
.hero > *{min-width:0}
.hero .col-l{padding-right:22px;border-right:1px solid var(--hair)}
.hero .col-c{padding:0 22px}
.hero .col-r{padding-left:22px;border-left:1px solid var(--hair)}
.rail-label{margin-bottom:10px}
.rail-label .caps{font-size:11px}
.rail-item{padding:11px 0;border-top:1px solid var(--hair)}
.rail-item:first-of-type{border-top:0;padding-top:0}
.rail-item .kicker{display:inline-block;margin-bottom:4px}
.rail-item .dek{margin-top:4px}
.rail-item .meta{margin-top:5px}

.lead-img{width:100%;aspect-ratio:16/9;object-fit:cover}
.lead-block{text-align:center}
.lead-block .kicker{margin-top:12px;display:inline-block}
.lead-block .hd-hero{margin:6px auto 6px;max-width:24ch}
.lead-block .hd-hero2{margin:6px auto 5px;max-width:30ch}
.lead-block .dek{max-width:52ch;margin:0 auto}
.lead-block .meta{justify-content:center;margin-top:7px}
.lead-split{border-top:1px solid var(--hair);margin-top:18px;padding-top:18px}

.audio-item{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid var(--hair)}
.audio-item:first-of-type{border-top:0;padding-top:0}
.play{width:33px;height:33px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:1px}
.play:hover{background:var(--accent-2)}
.play svg{width:11px;height:11px;fill:#fff;margin-left:2px}
.audio-item a.t{cursor:pointer}
.audio-item .t{font-family:var(--serif);font-weight:450;font-size:13px;line-height:1.28;color:var(--ink)}
.audio-item .d{font-family:var(--sans);font-size:10.5px;color:var(--ink-3);margin-top:2px}
.rail-more{margin-top:10px;display:inline-block;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--accent)}
.pod-block{margin-top:16px;padding-top:12px;border-top:1px solid var(--hair)}
.pod-item{display:flex;gap:10px;padding:8px 0}
.pod-item img{width:44px;height:44px;object-fit:cover;flex:0 0 auto}
.pod-item .t{font-family:var(--serif);font-weight:450;font-size:13px;line-height:1.28}
.pod-item .d{font-family:var(--sans);font-size:10.5px;color:var(--ink-3);margin-top:2px}
.pod-subs{margin-top:10px;padding-top:12px;border-top:1px solid var(--hair)}
.pod-subs .caps{display:block;margin-bottom:8px}
/* auto-fit, not 1fr 1fr: side by side where the rail is wide enough, stacked
   where it isn't. Fixed columns overflowed the rail by 5px at tablet width. */
.pod-subs .btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.pod-subs .sub-btn{padding:5px 12px;font-size:10.5px;justify-content:center}

/* ================= Sections ================= */
.section{padding:22px 0 26px}
.section.band{background:var(--paper-2);padding:26px 0 30px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sec-head{display:flex;align-items:baseline;gap:14px;padding-bottom:9px;border-bottom:2px solid var(--hair-dark);margin-bottom:18px}
.sec-head .caps{font-size:12px;letter-spacing:.16em}
.sec-head .spacer{flex:1}
.sec-head a{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--ink-3)}
.sec-head a:hover{color:var(--accent)}
.card{min-width:0}
.card .meta{margin-top:5px}
.card .kicker{margin-top:8px;display:inline-block}
.card .kicker + .hd,.card .kicker + a .hd{margin-top:3px}
.card .hd{display:block;margin-top:8px}
.card .kicker ~ .hd{margin-top:3px}
.card .dek{margin-top:4px}

/* Lead + thumb-grid (Fox "Business" pattern) */
.pat-split{display:grid;grid-template-columns:1.15fr 1fr;gap:0}
.pat-split .lead-side{padding-right:24px;border-right:1px solid var(--hair)}
.pat-split.mirror{grid-template-columns:1fr 1.15fr}
.pat-split.mirror .lead-side{order:2;padding-right:0;padding-left:24px;border-right:0;border-left:1px solid var(--hair)}
.pat-split.mirror .grid-side{order:1;padding-left:0;padding-right:24px}
.pat-split .lead-side img{width:100%;aspect-ratio:16/9;object-fit:cover}
.grid-side{padding-left:24px;display:grid;grid-template-columns:1fr 1fr;gap:0 22px;align-content:start}
.tg-item{display:grid;grid-template-columns:1fr 64px;gap:10px;padding:10px 0;border-bottom:1px solid var(--hair);align-items:start}
.tg-item:nth-last-child(-n+2){border-bottom:0}
.tg-item img{width:64px;height:64px;object-fit:cover}
.tg-item .hd-sm{margin-top:3px}

/* Band: 4 cards + headline strip */
.pat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pat-band .card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.band-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:18px;padding-top:14px;border-top:1px solid var(--hair)}
.band-strip .card .hd{margin-top:2px}

/* 5-across compact */
.pat5{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.pat5 .card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.pat5 .card .meta{margin-top:7px}
.pat5 .card .hd{margin-top:3px}
.pat5.wide-lead{grid-template-columns:1.9fr repeat(3,1fr)}
.pat5.wide-lead .card:first-child img{aspect-ratio:16/9}

/* Latest + about */
.pat-latest{display:grid;grid-template-columns:2.1fr 1fr;gap:0}
.latest-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;padding-right:24px;border-right:1px solid var(--hair);align-content:start}
.lt-item{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--hair);align-items:start}
.lt-item:nth-last-child(-n+2){border-bottom:0}
.lt-item img{width:88px;height:66px;object-fit:cover}
.lt-item .hd-sm{margin-top:3px}
.lt-item .dek{margin-top:3px}
.about-box{margin-left:24px;background:var(--paper-2);padding:18px 18px 20px;align-self:start}
.about-box .caps{font-size:11px}
.about-box .wordmark{font-size:26px;margin-top:10px}
.about-box p{font-family:var(--serif);font-weight:300;font-size:13px;line-height:1.5;color:var(--ink-2);margin-top:8px}
.about-box .links{margin-top:12px;display:flex;flex-direction:column;gap:6px;font-family:var(--sans);font-size:11.5px;font-weight:600}
.about-box .links a{color:var(--accent)}

/* ================= Footer ================= */
footer.site{border-top:2px solid var(--hair-dark);margin-top:10px;padding:34px 0 18px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.foot .wordmark{font-size:34px}
.foot .tag2{font-family:var(--serif);font-weight:300;font-size:13px;color:var(--ink-2);max-width:34ch;margin-top:10px;line-height:1.5}
.foot h4{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-size:10.5px;color:var(--ink-3);margin-bottom:12px;font-weight:700}
.foot ul{display:flex;flex-direction:column;gap:7px;font-family:var(--sans);font-size:12.5px;color:var(--ink-2)}
.foot a:hover{color:var(--accent)}
.foot-app{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);max-width:34ch}
.foot-app h4{margin-bottom:6px}
.foot-app p{font-family:var(--serif);font-weight:300;font-size:12.5px;color:var(--ink-2);line-height:1.5}
/* install buttons appear only once the browser says the site is installable */
.foot-install,.sh-install{display:none;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.foot-install{margin-top:8px}
.sh-install{margin:6px 0 2px}
html.df-can-install .foot-install,html.df-can-install .sh-install{display:inline-block}
.colophon{border-top:1px solid var(--hair);margin-top:28px;padding-top:14px;display:flex;justify-content:space-between;font-family:var(--sans);font-size:11.5px;color:var(--ink-3)}
.colophon a:hover{color:var(--accent)}

/* ================= Mobile ================= */
@media (max-width:820px){
  .desktop{display:none}
  .mobile{display:block}
}
/* Flat app shell (2026-07-15 mobile-app pass): single paper ground, no card.
   --m-tab-h = tab bar height WITHOUT the safe-area inset. */
:root{--m-tab-h:54px}
.m-shell{min-height:100vh;background:var(--paper);padding:14px 16px calc(var(--m-tab-h) + 74px + env(safe-area-inset-bottom))}

.m-card{background:transparent;border-radius:0;box-shadow:none;padding:0;min-height:0}

/* bottom tab bar — mobile only */
.m-tab,.m-sheet,.m-sheet-bg{display:none}
@media (max-width:820px){
  .m-tab{position:fixed;left:0;right:0;bottom:0;z-index:57;height:calc(var(--m-tab-h) + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);align-items:start;background:var(--card);border-top:1px solid var(--hair);padding:7px 4px calc(env(safe-area-inset-bottom))}
  .m-tab .tb{display:flex;flex-direction:column;align-items:center;gap:3px;font-family:var(--sans);font-size:8.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:2px 0}
  .m-tab .tb svg{width:19px;height:19px}
  .m-tab .tb.is-active{color:var(--accent)}

  /* bottom sheets (Read / Listen / More) — they stop at the tab bar's top edge and sit
     under it in z-order, so the tab bar stays tappable to switch or re-toggle sheets */
  .m-sheet-bg{display:block;position:fixed;inset:0;background:rgba(28,28,26,.32);z-index:56;opacity:0;pointer-events:none;transition:opacity .22s ease}
  .m-sheet-bg.open{opacity:1;pointer-events:auto}
  .m-sheet{display:block;position:fixed;left:0;right:0;bottom:calc(var(--m-tab-h) + env(safe-area-inset-bottom));z-index:56;background:var(--card);border-top:1px solid var(--hair);border-radius:18px 18px 0 0;box-shadow:0 -10px 34px rgba(28,28,26,.14);padding:12px 20px 18px;max-height:72vh;overflow-y:auto;transform:translateY(calc(103% + var(--m-tab-h) + env(safe-area-inset-bottom)));transition:transform .26s ease}
  .m-sheet.open{transform:none}
  .m-sheet .grip{width:34px;height:4px;border-radius:2px;background:var(--hair);margin:0 auto 12px}
  .m-sheet>.caps{display:block;margin-bottom:4px}
  .sh-row{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--hair)}
  .sh-row:last-of-type{border-bottom:0}
  .sh-icn{width:38px;height:38px;border-radius:50%;background:var(--paper);border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;color:var(--ink-2);flex:0 0 auto}
  .sh-icn svg{width:17px;height:17px}
  .sh-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .sh-txt .n{font-family:var(--serif);font-weight:600;font-size:15px;color:var(--ink)}
  .sh-txt .s{font-family:var(--serif);font-weight:300;font-size:12px;color:var(--ink-3)}
  .sh-chev{width:15px;height:15px;color:var(--ink-4);flex:0 0 auto}
  .sh-links{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
  .sh-links a{font-family:var(--serif);font-weight:450;font-size:14.5px;color:var(--ink);padding:10px 0;border-bottom:1px solid var(--hair)}
  .sh-app{margin-top:12px}
  .sh-app summary{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);cursor:pointer;padding:4px 0}
  .sh-app p{font-family:var(--serif);font-weight:300;font-size:12.5px;color:var(--ink-2);line-height:1.5;padding:6px 0 2px;max-width:40ch}
  .sh-follow{margin-top:12px;padding-top:12px;border-top:1px solid var(--hair);display:flex;align-items:center;gap:14px}
  .sh-follow .caps{font-size:9.5px;color:var(--ink-3)}
  .sh-follow a{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--ink-2)}

  /* settings toggles */
  .sh-set{margin-top:12px;padding-top:12px;border-top:1px solid var(--hair)}
  .sh-set>.caps{display:block;margin-bottom:2px;font-size:9.5px;color:var(--ink-3)}
  .sh-tog{padding:9px 0;border-bottom:1px solid var(--hair)}
  .sh-tog:last-child{border-bottom:0;padding-bottom:0}
  .sh-tog .t{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .sh-tog .n{font-family:var(--serif);font-weight:600;font-size:14px;color:var(--ink)}
  .sh-tog p{font-family:var(--serif);font-weight:300;font-size:11.5px;color:var(--ink-3);line-height:1.45;margin-top:3px;max-width:44ch}
  .sh-tog.is-off{opacity:.38}
  .sh-tog.is-off .sw{pointer-events:none}
  .sw{position:relative;width:36px;height:21px;border-radius:999px;background:var(--hair);flex:0 0 auto;transition:background .18s ease}
  .sw .knob{position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:var(--card);box-shadow:0 1px 3px rgba(28,28,26,.25);transition:transform .18s ease}
  .sw[aria-checked="true"]{background:var(--accent)}
  .sw[aria-checked="true"] .knob{transform:translateX(15px)}
}

/* reversed bottom bar — html class set pre-paint (inline head script) + df-chrome.js */
html.df-swap-tab .m-tab{direction:rtl}
html.df-swap-tab .m-tab .tb{direction:ltr}
.m-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--hair)}
.m-header .wordmark{font-size:24px}
.m-header .date{font-family:var(--sans);font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em}
.m-feed{display:flex;flex-direction:column}
.m-story{padding:14px 0;border-bottom:1px solid var(--hair)}
.m-story:last-child{border-bottom:0}
.m-story.lead{padding-top:0}
.m-story.lead img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px}
.m-story.lead .kicker{margin-top:12px;display:inline-block}
.m-story.lead h2{font-family:var(--serif);font-weight:650;font-size:21px;line-height:1.12;margin-top:4px}
.m-story.lead .dek{margin-top:5px;font-size:13.5px}
.m-story.lead .meta{margin-top:6px}
.m-story.med{display:grid;grid-template-columns:1fr 84px;gap:12px;align-items:start}
.m-story.med img{width:84px;height:84px;object-fit:cover;border-radius:10px;grid-column:2}
.m-story.med .body{grid-column:1;grid-row:1}
.m-story.med h3{font-family:var(--serif);font-weight:600;font-size:15px;line-height:1.2;margin-top:3px}
.m-story.med .dek{margin-top:3px;font-size:12.5px}
.m-story.med .meta{margin-top:5px}
/* per-category front-page sections — thumbs zig-zag via .flip, outline pill closes each */
.m-sechead{padding:18px 0 8px;border-bottom:1px solid var(--hair-dark)}
.m-fsec:first-child .m-sechead{padding-top:2px}
.m-fsec .m-story.lead{padding-top:14px}
.m-fsec.flip .m-story.med{grid-template-columns:84px 1fr}
.m-fsec.flip .m-story.med img{grid-column:1;grid-row:1}
.m-fsec.flip .m-story.med .body{grid-column:2;grid-row:1}
.m-fsec .audio-item:first-of-type{border-top:0;margin-top:4px}
/* Front-page audio rows reuse the desktop rail component — bump titles to the
   mobile story size so they don't read as fine print next to .m-story h3. */
.m-fsec .audio-item{padding:11px 0}
.m-fsec .audio-item .t{font-size:15px;font-weight:600;line-height:1.2}
.m-fsec .audio-item .d{font-size:11px;margin-top:3px}
.m-pill{display:block;width:max-content;margin:16px auto 6px;background:transparent;border:1px solid rgba(20,19,17,.5);border-color:color-mix(in srgb, var(--ink) 50%, transparent);border-radius:999px;padding:8px 18px;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink)}
.m-pill.right{margin-right:0}
.m-games{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:14px}
.m-game{display:flex;align-items:center;gap:11px;border:1px solid var(--hair);border-radius:12px;padding:9px 11px;background:var(--card)}
.m-game .gm-tile{width:42px;height:42px;border-radius:9px;overflow:hidden}
.m-game .n{font-family:var(--serif);font-weight:600;font-size:14px;color:var(--ink)}

/* bottom audio bar — full-width, gammonfrog anatomy in the df skin.
   Top edge doubles as progress line (--df-progress) and click-to-seek strip. */
.m-player{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--hair);box-shadow:0 -6px 24px rgba(28,28,26,.07);padding:9px 14px calc(9px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;z-index:56}
.m-player::before{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--hair-dark);opacity:.35;pointer-events:none}
.m-player::after{content:'';position:absolute;left:0;top:-1px;height:2px;width:var(--df-progress,0%);background:var(--accent);transition:width .15s linear;pointer-events:none}
.m-player .seek-edge{position:absolute;left:0;right:0;top:-6px;height:12px;cursor:pointer}
.m-player .ctl{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);flex:0 0 auto}
.m-player .ctl.main{background:var(--accent);color:#fff;width:33px;height:33px}
.m-player .ctl svg{width:11px;height:11px;fill:currentColor}
.m-player .info{flex:1;min-width:0;cursor:pointer}
.m-player .np{font-family:var(--sans);font-size:9.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.09em}
.m-player .title{font-family:var(--serif);font-weight:450;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.m-player .queue{position:relative;color:var(--ink-2);flex:0 0 auto;padding:4px 2px}
.m-player .badge{position:absolute;top:-3px;right:-6px;background:var(--accent);color:#fff;font-size:8.5px;font-weight:700;border-radius:8px;padding:1px 4.5px;font-family:var(--sans)}
.m-player .x{color:var(--ink-3);flex:0 0 auto;padding:4px 2px}

/* queue drawer — bottom sheet above the bar */
.m-drawer-bg{position:fixed;inset:0;background:rgba(28,28,26,.32);z-index:54}
.m-drawer-bg[hidden]{display:none}
.m-drawer{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--hair);box-shadow:0 -10px 34px rgba(28,28,26,.12);z-index:55;max-height:72vh;display:flex;flex-direction:column;padding:0 16px}
.m-drawer[hidden]{display:none}
@media (min-width:821px){
  .m-drawer .dq-player,.m-drawer .dq-head,.m-drawer .dq-list,.m-drawer .dq-tabs{width:min(680px,100%);margin-left:auto;margin-right:auto}
}
/* on mobile the audio bar + queue drawer ride above the tab bar (which owns the safe area) */
@media (max-width:820px){
  .m-player{bottom:calc(var(--m-tab-h) + env(safe-area-inset-bottom));padding:9px 14px}
  .m-drawer{bottom:calc(var(--m-tab-h) + env(safe-area-inset-bottom))}
}
.dq-head{display:flex;align-items:center;gap:10px;padding:13px 0 11px;border-bottom:1px solid var(--hair)}
.dq-head .caps{color:var(--accent)}
.dq-head .spacer{flex:1}
.dq-meta{font-family:var(--sans);font-size:10.5px;color:var(--ink-3)}
.dq-clear{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.dq-clear:hover{color:var(--accent)}
.dq-x{display:flex;align-items:center;gap:4px;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-left:14px;padding-left:14px;border-left:1px solid var(--hair)}
.dq-x:hover{color:var(--accent)}
.dq-player{padding:15px 0 13px;border-bottom:1px solid var(--hair)}
.dq-title{font-family:var(--serif);font-weight:600;font-size:16.5px;line-height:1.25;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dq-ctls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px}
.dq-ctls .ctl{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.dq-ctls .ctl svg{width:12px;height:12px;fill:currentColor}
.dq-ctls .ctl.main{background:var(--accent);color:#fff;width:44px;height:44px}
.dq-ctls .ctl.main svg{width:15px;height:15px}
.dq-skip{font-family:var(--sans);font-size:10.5px;font-weight:700;color:var(--ink-2);border:1px solid var(--hair);border-radius:999px;padding:5px 10px;white-space:nowrap}
.dq-skip:hover{border-color:var(--accent);color:var(--accent)}
.dq-scrub{position:relative;height:3px;background:var(--hair);margin-top:15px;border-radius:2px}
.dq-scrub .fill{position:absolute;left:0;top:0;bottom:0;width:var(--df-progress,0%);background:var(--accent);border-radius:2px;pointer-events:none}
.dq-seek{position:absolute;left:0;top:-8px;width:100%;height:19px;margin:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.dq-times{display:flex;justify-content:space-between;font-family:var(--sans);font-size:10px;color:var(--ink-3);margin-top:6px}
.dq-speeds{display:flex;justify-content:center;gap:7px;margin-top:11px}
.dq-speed{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--ink-2);border:1px solid var(--hair);border-radius:999px;padding:3.5px 9px}
.dq-speed.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.dq-list{overflow-y:auto;padding:6px 0 12px;min-height:60px}
.dq-item{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px solid var(--hair);cursor:pointer}
.dq-item:last-child{border-bottom:0}
.dq-item .n{font-family:var(--sans);font-size:10px;color:var(--ink-3);flex:0 0 16px}
.dq-item .t{font-family:var(--serif);font-weight:500;font-size:13.5px;line-height:1.3;color:var(--ink);flex:1;min-width:0}
.dq-item:hover .t{color:var(--accent)}
.dq-item .k{font-family:var(--sans);font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);white-space:nowrap}
.dq-item .rm{color:var(--ink-3);flex:0 0 auto;align-self:center;padding:5px;margin-right:-5px}
.dq-item .rm:hover{color:var(--accent)}
.dq-item .rm svg{width:11px;height:11px;display:block}
.dq-empty{font-family:var(--sans);font-size:11px;color:var(--ink-3);padding:16px 0 18px;text-align:center}

/* wiring fixes */
.m-player[hidden]{display:none}

/* ================= Article page ================= */
:root{--article:1020px;--fs-body:17px}
.art-wrap{max-width:var(--article);margin:0 auto;padding:0 24px}
.crumbs{padding:16px 0 0;font-family:var(--sans);font-size:11px;color:var(--ink-3)}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{margin:0 6px;color:var(--ink-4)}
.art-head{text-align:center;padding:22px 0 18px;max-width:760px;margin:0 auto}
.art-head .kicker{font-size:11px}
.art-title{font-family:var(--serif);font-weight:650;font-size:40px;line-height:1.06;letter-spacing:-.012em;margin-top:10px}
.art-dek{font-family:var(--serif);font-weight:300;font-size:17px;line-height:1.45;color:var(--ink-2);margin:12px auto 0;max-width:56ch}
.byline{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 14px;padding:14px 0 0}
.byline .who{display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-size:15px;font-weight:450}
.byline .names{text-align:left}
.byline .by{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink)}
.byline .by a:hover{color:var(--accent)}
.byline .role{font-family:var(--sans);font-size:11px;color:var(--ink-3)}
.byline .when{font-family:var(--sans);font-size:11px;color:var(--ink-3)}
.listen-btn{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px;border-radius:999px;background:var(--accent);color:#fff;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.02em}
.listen-btn:hover{background:var(--accent-2)}
.listen-btn svg{width:10px;height:10px;fill:#fff;margin-left:1px}
.aA{display:inline-flex;align-items:center;border:1px solid var(--hair);border-radius:999px;overflow:hidden;background:var(--card)}
.aA button{padding:5px 12px;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink-2);line-height:1}
.aA button:hover{color:var(--accent)}
.aA button:disabled{color:var(--ink-4);cursor:default}
.aA .lbl{padding:5px 10px;font-family:var(--serif);font-size:12px;color:var(--ink-3);border-left:1px solid var(--hair);border-right:1px solid var(--hair);user-select:none}
.aA .lbl .big{font-size:15px}
.art-fig{margin:4px 0 0;position:relative}
.art-fig .listen-btn{position:absolute;left:14px;bottom:14px;box-shadow:0 2px 12px rgba(28,28,26,.35)}
.art-fig img{width:100%;aspect-ratio:16/8.2;object-fit:cover}
.art-fig figcaption{font-family:var(--sans);font-size:11px;color:var(--ink-3);padding:8px 2px 0;display:flex;gap:6px}
.art-fig figcaption .cr{color:var(--ink-4);margin-left:auto;white-space:nowrap}
.art-grid{display:grid;grid-template-columns:1fr 296px;gap:0;padding:26px 0 8px}
.art-grid > *{min-width:0}
.art-main{padding-right:36px;border-right:1px solid var(--hair)}
.art-side{padding-left:26px}
.prose{font-family:var(--serif);font-weight:400;font-size:var(--fs-body);line-height:1.62;color:var(--ink-2);max-width:66ch;margin:0 auto}
.prose p{margin:0 0 1.15em}
.prose p:first-of-type::first-letter{font-family:var(--serif);font-weight:600;font-size:3.15em;line-height:.82;float:left;padding:.06em .09em 0 0;color:var(--ink)}
.prose h2,.prose h3{font-family:var(--serif);font-weight:650;font-size:1.35em;line-height:1.2;color:var(--ink);margin:1.5em 0 .55em;letter-spacing:-.01em}
.prose h3{font-size:1.15em}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.3em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:.35em}
.prose em{font-style:italic}
.prose blockquote,.prose .pull{border-top:2px solid var(--hair-dark);border-bottom:1px solid var(--hair);margin:1.6em 0;padding:1em .2em .9em;font-family:var(--serif);font-style:italic;font-weight:450;font-size:1.32em;line-height:1.32;color:var(--ink);text-align:center}
.prose blockquote p{margin:0}
.prose .pull .who{display:block;font-style:normal;font-family:var(--sans);font-size:.52em;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:.9em}
.prose figure{margin:1.6em 0}
.prose figure img{width:100%;aspect-ratio:16/9;object-fit:cover}
.prose figcaption{font-family:var(--sans);font-size:11px;line-height:1.4;color:var(--ink-3);padding-top:7px}
.prose > p:last-of-type::after{content:"◆";color:var(--accent);font-size:.72em;margin-left:7px;display:inline-block}
.art-foot{max-width:66ch;margin:6px auto 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 0 4px;border-top:1px solid var(--hair)}
.tag{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--hair);border-radius:999px;padding:4px 11px}
.tag:hover{border-color:var(--accent);color:var(--accent)}
.art-foot .share{margin-left:auto;display:flex;gap:12px;color:var(--ink-3)}
.art-foot .share a:hover{color:var(--accent)}
.art-foot .share svg{width:15px;height:15px;fill:currentColor}
.author-box{max-width:66ch;margin:18px auto 0;background:var(--paper-2);padding:18px 20px;display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:start}
.author-box .avatar{width:46px;height:46px;font-size:19px}
.author-box .name{font-family:var(--serif);font-weight:600;font-size:16px}
.author-box .bio{font-family:var(--serif);font-weight:300;font-size:13px;line-height:1.5;color:var(--ink-2);margin-top:4px}
.author-box .more{display:inline-block;margin-top:8px;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--accent)}
.side-block{margin-bottom:24px}
.side-label{padding-bottom:8px;border-bottom:2px solid var(--hair-dark);margin-bottom:4px}
.side-label .caps{font-size:11px}
.side-item{padding:11px 0;border-bottom:1px solid var(--hair)}
.side-item:last-child{border-bottom:0}
.side-item .kicker{display:inline-block;margin-bottom:3px}
.side-item .meta{margin-top:4px}
.art-side .audio-item{border-top:0;border-bottom:1px solid var(--hair)}
.art-side .audio-item:first-of-type{padding-top:9px}
.art-side .audio-item:last-of-type{border-bottom:0}
.nl-box{background:var(--paper-2);padding:16px 16px 18px}
.nl-box .caps{font-size:11px}
.nl-box p{font-family:var(--serif);font-weight:300;font-size:13px;line-height:1.5;color:var(--ink-2);margin-top:8px}
.nl-box form{display:flex;margin-top:12px;border:1px solid var(--hair);background:var(--card)}
.nl-box input{flex:1;min-width:0;border:0;background:transparent;padding:8px 10px;font-family:var(--sans);font-size:12px;outline:none;color:var(--ink)}
.nl-box button{background:var(--accent);color:#fff;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:0 14px}
.nl-box button:hover{background:var(--accent-2)}
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.rel-grid .card{min-width:0}
.rel-grid .card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.rel-grid .card .meta{margin-top:7px}
.rel-grid .card .hd{display:block;margin-top:3px;font-size:14.5px;line-height:1.22}
.rel-grid .card .dek{margin-top:4px}
/* article — mobile */
.m-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.m-back{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink-2)}
.m-back svg{width:14px;height:14px;stroke:currentColor}
.m-top .listen-btn{padding:5px 12px;font-size:10.5px}
.m-art img.hero{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px}
.m-art .kicker{display:inline-block;margin-top:13px;font-size:10.5px}
.m-art h1{font-family:var(--serif);font-weight:650;font-size:23px;line-height:1.12;letter-spacing:-.01em;margin-top:5px}
.m-art .dek{font-size:14px;margin-top:7px;line-height:1.45}
.m-byline{display:flex;align-items:center;gap:10px;margin-top:13px}
.m-byline .avatar{width:32px;height:32px;font-size:14px}
.m-byline .by{font-family:var(--sans);font-size:12px;font-weight:600}
.m-byline .when{font-family:var(--sans);font-size:10.5px;color:var(--ink-3);margin-top:1px}
.m-aA{margin:10px 0 0}
.m-art .prose{max-width:none;margin-top:14px;font-size:calc(var(--fs-body) - 1px)}
.m-art .prose p:first-of-type::first-letter{font-size:2.9em}
.m-art .prose figure img{border-radius:10px}
.m-art .pull{font-size:1.22em}
.m-tags{display:flex;flex-wrap:wrap;gap:7px;padding:14px 0 0;border-top:1px solid var(--hair);margin-top:4px}
.m-author{background:var(--paper-2);border-radius:12px;padding:14px 15px;display:grid;grid-template-columns:40px 1fr;gap:12px;margin-top:16px}
.m-author .avatar{width:40px;height:40px;font-size:16px}
.m-author .name{font-family:var(--serif);font-weight:600;font-size:14.5px}
.m-author .bio{font-family:var(--serif);font-weight:300;font-size:12.5px;line-height:1.45;color:var(--ink-2);margin-top:3px}
.m-author .more{display:inline-block;margin-top:6px;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--accent)}
.m-rel{margin-top:18px}
.m-rel .caps{font-size:10px;color:var(--ink-3)}

/* ================= Category page ================= */
.cat-head{padding-top:26px;text-align:center}
.cat-head .caps{color:var(--accent);letter-spacing:.2em}
.cat-title{font-family:var(--serif);font-weight:650;font-size:52px;line-height:1;letter-spacing:-.015em;margin-top:8px}
.cat-dek{font-family:var(--serif);font-weight:300;font-size:15px;line-height:1.5;color:var(--ink-2);max-width:60ch;margin:10px auto 0}
.cat-meta{font-family:var(--sans);font-size:11px;color:var(--ink-3);margin-top:8px}
.cat-meta a{color:var(--accent);font-weight:600}
.chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:16px 0 20px}
.chip{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--hair);border-radius:999px;padding:5px 13px;cursor:pointer}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.active{background:var(--hair-dark);border-color:var(--hair-dark);color:var(--paper)}
.cat-lead{display:grid;grid-template-columns:1fr 296px;gap:0;padding-top:20px}
.cat-lead > *{min-width:0}
.cat-lead .lead-wrap{display:grid;grid-template-columns:1.45fr 1fr;gap:0;padding-right:26px;padding-bottom:26px;border-right:1px solid var(--hair)}
.cat-lead .lead-wrap > *{min-width:0}
.cat-lead .big{padding-right:24px;border-right:1px solid var(--hair)}
.cat-lead .big img{width:100%;aspect-ratio:16/9.5;object-fit:cover}
.cat-lead .big .kicker{margin-top:12px;display:inline-block}
.cat-lead .big .hd{font-size:23px;line-height:1.12;margin-top:4px;font-weight:650}
.cat-lead .big .dek{font-size:13.5px;margin-top:6px;max-width:64ch}
.cat-lead .big .meta{margin-top:7px}
.cat-lead .two{padding-left:24px;display:flex;flex-direction:column}
.cat-lead .two article{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--hair)}
.cat-lead .two article:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.cat-lead .two img{width:100%;aspect-ratio:16/8;object-fit:cover}
.cat-lead .two .kicker{margin-top:9px;display:inline-block}
.cat-lead .two .hd{margin-top:3px;font-size:16px}
.cat-lead .two .meta{margin-top:5px}
.cl-rail{padding-left:26px}
.cl-rail .tg-item:nth-last-child(-n+2){border-bottom:1px solid var(--hair)}
.cl-rail .tg-item:last-child{border-bottom:0}
.load-more{display:block;margin:22px auto 0;padding:8px 26px;border:1px solid var(--accent);border-radius:999px;background:var(--card);font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.load-more:hover{background:var(--accent);color:#fff}
.load-more[hidden]{display:none}
.cat-grid{display:grid;grid-template-columns:1fr 296px;gap:0;padding-bottom:8px}
.cat-grid > *{min-width:0}
.cat-main{padding-right:26px;border-right:1px solid var(--hair)}
.cat-side{padding-left:26px}
.list-label{padding-bottom:9px;border-bottom:2px solid var(--hair-dark)}
.list-label .caps{font-size:12px;letter-spacing:.16em}
.row-item{display:grid;grid-template-columns:200px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--hair);align-items:start}
.row-item img{width:200px;aspect-ratio:3/2;object-fit:cover}
.row-item .kicker{display:inline-block}
.row-item .hd{margin-top:3px;font-size:18px;line-height:1.16}
.row-item .dek{margin-top:4px;max-width:62ch}
.row-item .meta{margin-top:6px}
.row-item[hidden]{display:none}
.most-read{counter-reset:mr}
.mr-item{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:11px 0;border-bottom:1px solid var(--hair);align-items:start}
.mr-item:last-child{border-bottom:0}
.mr-item::before{counter-increment:mr;content:counter(mr);font-family:var(--serif);font-style:italic;font-weight:450;font-size:24px;line-height:1;color:var(--accent)}
.mr-item .meta{margin-top:4px}
.cat-side .audio-item{border-top:0;border-bottom:1px solid var(--hair)}
.cat-side .audio-item:first-of-type{padding-top:9px}
.cat-side .audio-item:last-of-type{border-bottom:0}
/* category — mobile */
.m-cat-head{padding-bottom:14px;border-bottom:1px solid var(--hair);margin-bottom:4px}
.m-cat-head .caps{color:var(--accent);font-size:10px;letter-spacing:.18em}
.m-cat-head h1{font-family:var(--serif);font-weight:650;font-size:30px;line-height:1;letter-spacing:-.01em;margin-top:5px}
.m-cat-head .dek{font-size:13px;margin-top:6px}
.m-chips{display:flex;gap:7px;overflow-x:auto;padding:12px 0 2px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent 100%)}
.m-chips::-webkit-scrollbar{display:none}
.m-chips .chip{flex:0 0 auto;font-size:10px;padding:4px 11px}
.m-cat-head + .m-feed .m-story.lead{padding-top:6px}
.m-story[hidden]{display:none}

/* ================= Listen page ================= */
.ls-head{padding-top:26px;text-align:center}
.ls-head .caps{color:var(--accent);letter-spacing:.2em}
.ls-title{font-family:var(--serif);font-weight:650;font-size:52px;line-height:1;letter-spacing:-.015em;margin-top:8px}
.ls-dek{font-family:var(--serif);font-weight:300;font-size:15px;line-height:1.5;color:var(--ink-2);max-width:56ch;margin:10px auto 0}
.ls-actions{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:14px}
.play-all{display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:999px;background:var(--accent);color:#fff;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.04em}
.play-all:hover{background:var(--accent-2)}
.play-all svg{width:11px;height:11px;fill:#fff;margin-left:1px}
.ls-count{font-family:var(--sans);font-size:11px;color:var(--ink-3)}
.ls-grid{display:grid;grid-template-columns:1fr 312px;gap:0;padding-top:20px;padding-bottom:8px}
.ls-grid > *{min-width:0}
.ls-main{padding-right:26px;border-right:1px solid var(--hair)}
.ls-side{padding-left:26px}
.ls-main .list-label{display:flex;align-items:baseline}
.list-label .spacer{flex:1}
.list-label .sort{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--ink-3)}
.list-label .sort a{color:var(--ink-3);cursor:pointer}
.list-label .sort a.on{color:var(--accent)}
.track{display:grid;grid-template-columns:34px 1fr auto;gap:14px;padding:13px 10px 13px 0;border-bottom:1px solid var(--hair);align-items:center;position:relative}
.track:hover{background:linear-gradient(90deg,transparent,rgba(192,57,43,.035) 12%,rgba(192,57,43,.035) 88%,transparent)}
.track .play{width:33px;height:33px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.track .play:hover{background:var(--accent-2)}
.track .play svg{width:11px;height:11px;fill:#fff;margin-left:2px}
.track .t-body{min-width:0}
.track .t-title{font-family:var(--serif);font-weight:600;font-size:16px;line-height:1.2;color:var(--ink)}
.track .t-meta{margin-top:3px}
.track .t-right{display:flex;align-items:center;gap:14px}
.track .dur{font-family:var(--sans);font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.track .add{color:var(--ink-4);display:inline-flex}
.track .add:hover{color:var(--accent)}
.track .add svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.track.playing{background:linear-gradient(90deg,transparent,rgba(192,57,43,.05) 10%,rgba(192,57,43,.05) 90%,transparent)}
.track.playing::before{content:"";position:absolute;left:-14px;top:10px;bottom:10px;width:3px;background:var(--accent)}
.track.playing .t-title{color:var(--accent-2)}
.track .eq{display:none;align-items:flex-end;gap:2px;height:14px;width:18px}
.track.playing .eq{display:inline-flex}
.track.playing .play svg.i-play{display:none}
.track .play svg.i-pause{display:none}
.track.playing .play svg.i-pause{display:block;margin-left:0}
.eq span{width:3px;background:var(--accent);animation:eq 1s ease-in-out infinite}
.eq span:nth-child(1){animation-delay:0s}
.eq span:nth-child(2){animation-delay:.25s}
.eq span:nth-child(3){animation-delay:.5s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}
.month-sep{padding:16px 0 6px;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4)}
.track[hidden],.m-track[hidden],.month-sep[hidden],.m-month[hidden]{display:none}
/* listen sidebar: now playing + queue */
.np-card{background:var(--paper-2);padding:18px;position:sticky;top:18px}
.np-card .caps{font-size:10.5px;color:var(--accent)}
.np-art{width:100%;aspect-ratio:16/9;object-fit:cover;margin-top:12px}
.np-title{font-family:var(--serif);font-weight:600;font-size:17px;line-height:1.2;margin-top:12px}
.np-kicker{margin-top:5px}
.np-bar{height:3px;background:var(--hair);margin-top:14px;position:relative}
.np-bar .fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--accent)}
.np-bar .knob{position:absolute;left:0%;top:50%;width:11px;height:11px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%)}
.np-times{display:flex;justify-content:space-between;font-family:var(--sans);font-size:10.5px;color:var(--ink-3);margin-top:6px;font-variant-numeric:tabular-nums}
.np-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px}
.np-controls .ctl{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.np-controls .ctl:hover{color:var(--accent)}
.np-controls .ctl svg{width:15px;height:15px;fill:currentColor}
.np-controls .ctl.main{background:var(--accent);color:#fff;width:44px;height:44px}
.np-controls .ctl.main:hover{background:var(--accent-2)}
.np-controls .ctl.main svg{width:16px;height:16px}
.np-extra{display:flex;justify-content:center;gap:10px;margin-top:12px}
.np-chip{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.06em;border:1px solid var(--hair);border-radius:999px;padding:3px 10px;color:var(--ink-2);background:var(--card)}
.np-chip:hover{border-color:var(--accent);color:var(--accent)}
.queue-block{margin-top:22px}
.ls-side .side-label{display:flex;align-items:baseline}
.side-label .spacer{flex:1}
.side-label a{font-family:var(--sans);font-size:10.5px;font-weight:600;color:var(--ink-3)}
.side-label a:hover{color:var(--accent)}
.q-item{display:grid;grid-template-columns:16px 1fr auto;gap:10px;padding:10px 0;border-bottom:1px solid var(--hair);align-items:center}
.q-item:last-child{border-bottom:0}
.q-item .grip{color:var(--ink-4);cursor:grab}
.q-item .grip svg{width:12px;height:12px;fill:currentColor}
.q-item .t{font-family:var(--serif);font-weight:450;font-size:13px;line-height:1.25;color:var(--ink)}
.q-item .d{font-family:var(--sans);font-size:10.5px;color:var(--ink-3);margin-top:2px}
.q-item .dur{font-family:var(--sans);font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.pod-promo{margin-top:22px;background:var(--paper-2);padding:16px 16px 18px}
.pod-promo .caps{font-size:10.5px}
.pod-promo .row{display:flex;gap:12px;margin-top:12px}
.pod-promo img{width:56px;height:56px;object-fit:cover;flex:0 0 auto}
.pod-promo .t{font-family:var(--serif);font-weight:600;font-size:14px;line-height:1.25}
.pod-promo .d{font-family:var(--sans);font-size:11px;color:var(--ink-3);margin-top:3px}
.pod-promo .more{display:inline-block;margin-top:10px;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--accent)}
/* listen — mobile */
.m-ls-head{padding-bottom:4px}
.m-ls-head .caps{color:var(--accent);font-size:10px;letter-spacing:.18em}
.m-ls-head h1{font-family:var(--serif);font-weight:650;font-size:30px;line-height:1;letter-spacing:-.01em;margin-top:5px}
.m-ls-head .dek{font-size:13px;margin-top:6px}
.m-ls-actions{display:flex;align-items:center;gap:12px;margin-top:12px}
.m-ls-actions .play-all{padding:7px 15px;font-size:11px}
.m-ls-actions .ls-count{font-size:10.5px}
.m-ls-head + .m-chips{border-bottom:1px solid var(--hair);padding-bottom:12px}
.m-track{display:grid;grid-template-columns:34px 1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--hair);align-items:center;position:relative}
.m-track:last-of-type{border-bottom:0}
.m-track .play{width:33px;height:33px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.m-track .play svg{width:11px;height:11px;fill:#fff;margin-left:2px}
.m-track .t-title{font-family:var(--serif);font-weight:600;font-size:14.5px;line-height:1.22;color:var(--ink)}
.m-track .t-meta{margin-top:3px}
.m-track .dur{font-family:var(--sans);font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.m-track.playing .t-title{color:var(--accent-2)}
.m-track.playing::before{content:"";position:absolute;left:-16px;top:8px;bottom:8px;width:3px;background:var(--accent)}
.m-track .eq{display:none;align-items:flex-end;gap:2px;height:12px;width:16px;margin-top:4px}
.m-track.playing .eq{display:inline-flex}
.m-month{padding:14px 0 4px;font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4)}

/* ================= Podcast page ================= */
.pd-hero{display:grid;grid-template-columns:218px 1fr;gap:30px;padding-top:30px;padding-bottom:24px;align-items:center}
.pd-art{width:218px;height:218px;object-fit:cover;box-shadow:var(--shadow-card)}
.pd-hero .caps{color:var(--accent);letter-spacing:.2em}
.pd-title{font-family:var(--serif);font-weight:650;font-size:46px;line-height:1.02;letter-spacing:-.015em;margin-top:8px}
.pd-dek{font-family:var(--serif);font-weight:300;font-size:15px;line-height:1.5;color:var(--ink-2);max-width:62ch;margin-top:10px}
.pd-meta{margin-top:10px;font-size:11.5px}
.pd-meta b{color:var(--ink);font-weight:600}
.pd-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px}
.sub-btn{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--hair);border-radius:999px;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--ink-2)}
.sub-btn:hover{border-color:var(--accent);color:var(--accent)}
.sub-btn svg{width:14px;height:14px;fill:currentColor}
/* Brand marks as alpha masks so they follow the pill's text color on hover. */
.pod-icn{display:inline-block;flex:0 0 auto;width:14px;height:14px;background:currentColor;mask-position:center;mask-size:contain;mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat}
.pod-icn.apple{mask-image:url(../images/logo-apple-podcasts.png);-webkit-mask-image:url(../images/logo-apple-podcasts.png)}
.pod-icn.spotify{mask-image:url(../images/logo-spotify.png);-webkit-mask-image:url(../images/logo-spotify.png)}
.pd-band{background:var(--paper-2);padding:24px 0 26px}
.pd-latest{display:grid;grid-template-columns:400px 1fr;gap:28px;align-items:center}
.pd-latest img{width:100%;aspect-ratio:16/10;object-fit:cover}
.pd-latest .caps{color:var(--accent)}
.pd-latest .caps .en{color:var(--ink-3);letter-spacing:.1em}
.pd-latest h2{font-family:var(--serif);font-weight:600;font-size:30px;line-height:1.1;letter-spacing:-.01em;margin-top:8px}
.pd-latest .dek{font-size:14px;margin-top:9px;max-width:58ch}
.pd-latest .meta{margin-top:9px;font-size:11.5px}
.pd-latest .row{display:flex;align-items:center;gap:14px;margin-top:14px}
.pd-latest .notes{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--accent)}
.ls-main .chips{justify-content:flex-start;padding:14px 0 4px}
.ep{display:grid;grid-template-columns:46px 34px 1fr auto;gap:14px;padding:15px 10px 15px 0;border-bottom:1px solid var(--hair);align-items:center;position:relative}
.ep:hover{background:linear-gradient(90deg,transparent,rgba(192,57,43,.035) 12%,rgba(192,57,43,.035) 88%,transparent)}
.ep .num{font-family:var(--serif);font-weight:300;font-size:24px;color:var(--ink-4);font-variant-numeric:tabular-nums;text-align:right;line-height:1}
.ep .play{width:33px;height:33px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.ep .play:hover{background:var(--accent-2)}
.ep .play svg{width:11px;height:11px;fill:#fff;margin-left:2px}
.ep .e-body{min-width:0}
.ep .e-title{font-family:var(--serif);font-weight:600;font-size:16.5px;line-height:1.2;color:var(--ink)}
.ep .e-guest{font-family:var(--serif);font-weight:300;font-style:italic;font-size:12.5px;color:var(--ink-2);margin-top:3px}
.ep .e-meta{margin-top:4px}
.ep .e-right{display:flex;align-items:center;gap:14px}
.ep .dur{font-family:var(--sans);font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ep .add{color:var(--ink-4);display:inline-flex}
.ep .add:hover{color:var(--accent)}
.ep .add svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.ep.playing{background:linear-gradient(90deg,transparent,rgba(192,57,43,.05) 10%,rgba(192,57,43,.05) 90%,transparent)}
.ep.playing::before{content:"";position:absolute;left:-14px;top:10px;bottom:10px;width:3px;background:var(--accent)}
.ep.playing .e-title{color:var(--accent-2)}
.ep.playing .num{color:var(--accent)}
.ep .eq{display:none;align-items:flex-end;gap:2px;height:14px;width:18px}
.ep.playing .eq{display:inline-flex}
.ep.playing .play svg.i-play{display:none}
.ep .play svg.i-pause{display:none}
.ep.playing .play svg.i-pause{display:block;margin-left:0}
.ep[hidden]{display:none}
/* podcast sidebar */
.hosts-card{background:var(--paper-2);padding:18px}
.hosts-card .caps{font-size:10.5px;color:var(--accent)}
.host{display:flex;gap:12px;margin-top:14px;align-items:center}
.host img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.host .n{font-family:var(--serif);font-weight:600;font-size:14.5px;line-height:1.2}
.host .r{font-family:var(--sans);font-size:11px;color:var(--ink-3);margin-top:2px;line-height:1.35}
.start-block{margin-top:22px}
.start-block .side-label{display:flex;align-items:baseline}
.start-item{display:grid;grid-template-columns:30px 1fr auto;gap:10px;padding:11px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.start-item:last-child{border-bottom:0}
.start-item .n{font-family:var(--serif);font-weight:300;font-size:22px;color:var(--ink-4);line-height:1;font-variant-numeric:tabular-nums}
.start-item .t{font-family:var(--serif);font-weight:450;font-size:13px;line-height:1.25;color:var(--ink)}
.start-item .d{font-family:var(--sans);font-size:10.5px;color:var(--ink-3);margin-top:2px}
.start-item .dur{font-family:var(--sans);font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.sub-card{margin-top:22px;background:var(--paper-2);padding:16px 16px 18px}
.sub-card .caps{font-size:10.5px}
.sub-card p{font-family:var(--serif);font-weight:300;font-size:12.5px;line-height:1.45;color:var(--ink-2);margin-top:8px}
.sub-card .col{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.sub-card .sub-btn{background:var(--card);justify-content:flex-start}
.sub-card .rss-line{font-family:var(--sans);font-size:11px;color:var(--ink-3);margin-top:11px}
.sub-card .rss-line a{color:var(--accent);font-weight:600}
.aa-promo{margin-top:22px;background:var(--paper-2);padding:16px 16px 18px}
.aa-promo .caps{font-size:10.5px}
.aa-promo .row{display:flex;gap:12px;margin-top:12px}
.aa-promo img{width:56px;height:56px;object-fit:cover;flex:0 0 auto}
.aa-promo .t{font-family:var(--serif);font-weight:600;font-size:14px;line-height:1.25}
.aa-promo .d{font-family:var(--sans);font-size:11px;color:var(--ink-3);margin-top:3px}
.aa-promo .more{display:inline-block;margin-top:10px;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--accent)}
/* podcast — mobile */
.m-pd-head{display:flex;gap:14px;align-items:center;padding-bottom:4px}
.m-pd-head img{width:76px;height:76px;border-radius:12px;object-fit:cover;flex:0 0 auto;box-shadow:var(--shadow-card)}
.m-pd-head .caps{color:var(--accent);font-size:10px;letter-spacing:.18em}
.m-pd-head h1{font-family:var(--serif);font-weight:650;font-size:24px;line-height:1.02;letter-spacing:-.01em;margin-top:4px}
.m-pd-head .hosts{font-family:var(--sans);font-size:10.5px;color:var(--ink-3);margin-top:4px}
.m-pd-dek{font-family:var(--serif);font-weight:300;font-size:13px;line-height:1.45;color:var(--ink-2);margin-top:10px}
.m-pd-actions{display:flex;gap:8px;overflow-x:auto;padding:12px 0;scrollbar-width:none;align-items:center;border-bottom:1px solid var(--hair);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent 100%)}
.m-pd-actions::-webkit-scrollbar{display:none}
.m-pd-actions .play-all{padding:7px 15px;font-size:11px;flex:0 0 auto}
.m-pd-actions .sub-btn{padding:6px 12px;font-size:10.5px;flex:0 0 auto;background:var(--card)}
.m-latest{background:var(--paper-2);border-radius:14px;padding:13px 14px 15px;margin-top:14px}
.m-latest .caps{font-size:9.5px;color:var(--accent)}
.m-latest .caps .en{color:var(--ink-3);letter-spacing:.1em}
.m-latest .t{font-family:var(--serif);font-weight:600;font-size:17px;line-height:1.18;margin-top:6px}
.m-latest .g{font-family:var(--serif);font-weight:300;font-style:italic;font-size:12px;color:var(--ink-2);margin-top:3px}
.m-latest .row{display:flex;align-items:center;gap:10px;margin-top:10px}
.m-latest .play-all{padding:6px 13px;font-size:10.5px}
.m-latest .meta{font-size:10.5px}
/* mobile episode ledger: no numerals (user 2026-07-18), play column fits the 33px standard */
.m-ep{display:grid;grid-template-columns:34px 1fr auto;gap:11px;padding:13px 0;border-bottom:1px solid var(--hair);align-items:center;position:relative}
.m-ep:last-of-type{border-bottom:0}
.m-ep .num{display:none}
.m-ep .play{width:33px;height:33px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.m-ep .play svg{width:11px;height:11px;fill:#fff;margin-left:2px}
.m-ep .e-title{font-family:var(--serif);font-weight:600;font-size:14.5px;line-height:1.22;color:var(--ink)}
.m-ep .e-guest{font-family:var(--serif);font-weight:300;font-style:italic;font-size:11.5px;color:var(--ink-2);margin-top:2px}
.m-ep .e-meta{margin-top:3px}
.m-ep .dur{font-family:var(--sans);font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.m-ep.playing .e-title{color:var(--accent-2)}
.m-ep.playing .num{color:var(--accent)}
.m-ep.playing::before{content:"";position:absolute;left:-16px;top:8px;bottom:8px;width:3px;background:var(--accent)}
.m-ep .eq{display:none;align-items:flex-end;gap:2px;height:12px;width:16px}
.m-ep.playing .eq{display:inline-flex}
.m-ep[hidden]{display:none}

/* ================= About page ================= */
.ab-head{padding-top:28px;padding-bottom:22px;text-align:center}
.ab-head .caps{color:var(--accent);letter-spacing:.2em}
.ab-title{font-family:var(--serif);font-weight:650;font-size:46px;line-height:1.05;letter-spacing:-.015em;margin-top:8px;max-width:22ch;margin-left:auto;margin-right:auto}
.ab-dek{font-family:var(--serif);font-weight:300;font-size:15px;line-height:1.5;color:var(--ink-2);max-width:58ch;margin:12px auto 0}
.ab-grid{display:grid;grid-template-columns:1fr 312px;gap:0;padding-top:22px;padding-bottom:8px}
.ab-grid > *{min-width:0}
.ab-main{padding-right:30px;border-right:1px solid var(--hair)}
.ab-side{padding-left:26px}
.sec-label{display:flex;align-items:baseline;padding-bottom:9px;border-bottom:2px solid var(--hair-dark);margin-top:30px}
.sec-label:first-child{margin-top:0}
.sec-label .caps{font-size:12px;letter-spacing:.16em}
.sec-label .spacer{flex:1}
.sec-label .aside{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--ink-3)}
.ab-prose{padding-top:16px}
.ab-prose p{font-family:var(--serif);font-weight:300;font-size:15.5px;line-height:1.62;color:var(--ink-2);margin:0 0 14px;max-width:66ch}
.ab-prose p b{font-weight:600;color:var(--ink)}
.ab-prose p:last-child{margin-bottom:0}
.ab-prose.dropcap > p:first-child::first-letter{font-family:var(--serif);font-weight:600;font-size:52px;line-height:.82;float:left;padding:6px 8px 0 0;color:var(--accent)}
.ab-prose a{color:var(--accent);font-weight:450}
.cover-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;padding-top:6px}
.cover-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.cover-grid .cover-item:nth-last-child(-n+2){border-bottom:0}
.cover-item .n{font-family:var(--serif);font-weight:300;font-size:20px;color:var(--ink-4);line-height:1;font-variant-numeric:tabular-nums;flex:0 0 26px;text-align:right}
.cover-item .t{font-family:var(--serif);font-weight:600;font-size:15px;line-height:1.2}
.cover-item .d{font-family:var(--sans);font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.4}
.timeline{padding-top:10px}
.tl-item{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--hair)}
.tl-item:last-child{border-bottom:0}
.tl-item .y{font-family:var(--serif);font-weight:300;font-size:20px;color:var(--accent);line-height:1.15;font-variant-numeric:tabular-nums;text-align:right}
.tl-item .t{font-family:var(--serif);font-weight:600;font-size:14.5px;line-height:1.25}
.tl-item .d{font-family:var(--serif);font-weight:300;font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.45}
.std-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;padding-top:12px}
.std{padding:12px 0;border-bottom:1px solid var(--hair)}
.std-grid .std:nth-last-child(-n+2){border-bottom:0}
.std .t{font-family:var(--serif);font-weight:600;font-size:14px;line-height:1.25}
.std .d{font-family:var(--serif);font-weight:300;font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.std .d a{color:var(--accent);font-weight:600}
/* about sidebar */
.nl-card{background:var(--paper-2);padding:18px}
.nl-card .caps{font-size:10.5px;color:var(--accent)}
.nl-card p{font-family:var(--serif);font-weight:300;font-size:12.5px;line-height:1.45;color:var(--ink-2);margin-top:8px}
.nl-card form{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.nl-card input{border:1px solid var(--hair);background:var(--card);padding:8px 12px;font-family:var(--sans);font-size:12px;color:var(--ink);outline:none}
.nl-card input:focus{border-color:var(--accent)}
.nl-card button{background:var(--accent);color:#fff;font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.04em;padding:9px 0}
.nl-card button:hover{background:var(--accent-2)}
.nl-card .fine{font-family:var(--sans);font-size:10px;color:var(--ink-3);margin-top:9px;line-height:1.4}
.tip-card{margin-top:22px;border:1px solid var(--hair-dark);padding:16px 16px 18px}
.tip-card .caps{font-size:10.5px}
.tip-card p{font-family:var(--serif);font-weight:300;font-size:12.5px;line-height:1.5;color:var(--ink-2);margin-top:8px}
.tip-card .go{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--accent)}
.tip-card .go svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.faq-block{margin-top:22px}
.faq{padding:11px 0;border-bottom:1px solid var(--hair)}
.faq:last-child{border-bottom:0}
.faq .q{font-family:var(--serif);font-weight:450;font-size:13px;line-height:1.3;color:var(--ink)}
.faq .a{font-family:var(--sans);font-size:11px;color:var(--ink-3);margin-top:3px;line-height:1.45}
.faq .a a{color:var(--accent);font-weight:600}
/* about — mobile */
.m-ab-head{padding-bottom:6px}
.m-ab-head .caps{color:var(--accent);font-size:10px;letter-spacing:.18em}
.m-ab-head h1{font-family:var(--serif);font-weight:650;font-size:27px;line-height:1.08;letter-spacing:-.01em;margin-top:5px}
.m-ab-head .dek{font-size:13px;margin-top:8px}
.m-sec{font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);border-bottom:1px solid var(--hair);padding:16px 0 7px;margin-bottom:4px}
.m-ab-prose p{font-family:var(--serif);font-weight:300;font-size:14px;line-height:1.58;color:var(--ink-2);margin:12px 0 0}
.m-ab-prose p b{font-weight:600;color:var(--ink)}
.m-ab-prose.dropcap > p:first-child::first-letter{font-family:var(--serif);font-weight:600;font-size:42px;line-height:.82;float:left;padding:5px 7px 0 0;color:var(--accent)}
.m-cover{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.m-cover:last-of-type{border-bottom:0}
.m-cover .n{font-family:var(--serif);font-weight:300;font-size:17px;color:var(--ink-4);line-height:1;flex:0 0 22px;text-align:right;font-variant-numeric:tabular-nums}
.m-cover .t{font-family:var(--serif);font-weight:600;font-size:14px;line-height:1.2}
.m-cover .d{font-family:var(--sans);font-size:11px;color:var(--ink-3);margin-top:2px;line-height:1.4}
.m-std{padding:11px 0;border-bottom:1px solid var(--hair)}
.m-std:last-of-type{border-bottom:0}
.m-std .t{font-family:var(--serif);font-weight:600;font-size:13.5px;line-height:1.25}
.m-std .d{font-family:var(--serif);font-weight:300;font-size:12px;color:var(--ink-2);margin-top:3px;line-height:1.45}
.m-nl{background:var(--paper-2);border-radius:14px;padding:14px 14px 16px;margin-top:18px}
.m-nl .caps{font-size:9.5px;color:var(--accent)}
.m-nl p{font-family:var(--serif);font-weight:300;font-size:12.5px;line-height:1.45;color:var(--ink-2);margin-top:6px}
.m-nl form{display:flex;gap:8px;margin-top:11px}
.m-nl input{flex:1;min-width:0;border:1px solid var(--hair);background:var(--card);padding:8px 11px;font-family:var(--sans);font-size:12px;color:var(--ink);outline:none;border-radius:8px}
.m-nl input:focus{border-color:var(--accent)}
.m-nl button{background:var(--accent);color:#fff;font-family:var(--sans);font-size:11px;font-weight:700;padding:8px 14px;border-radius:8px;flex:0 0 auto}
.m-tip{border:1px solid var(--hair-dark);border-radius:14px;padding:14px 14px 16px;margin-top:14px}
.m-tip .caps{font-size:9.5px}
.m-tip p{font-family:var(--serif);font-weight:300;font-size:12.5px;line-height:1.45;color:var(--ink-2);margin-top:6px}
.m-tip .go{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-family:var(--sans);font-size:11px;font-weight:700;color:var(--accent)}
.m-tip .go svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}

/* ================= Contact page ================= */
.ct-head{padding-top:28px;padding-bottom:22px;text-align:center}
.ct-head .caps{color:var(--accent);letter-spacing:.2em}
.ct-title{font-family:var(--serif);font-weight:650;font-size:46px;line-height:1.05;letter-spacing:-.015em;margin-top:8px}
.ct-dek{font-family:var(--serif);font-weight:300;font-size:15px;line-height:1.5;color:var(--ink-2);max-width:54ch;margin:12px auto 0}
.ct-grid{display:grid;grid-template-columns:1fr 312px;gap:0;padding-top:22px;padding-bottom:8px}
.ct-grid > *{min-width:0}
.ct-main{padding-right:30px;border-right:1px solid var(--hair)}
.ct-side{padding-left:26px}
.desk{display:grid;grid-template-columns:150px 1fr auto;gap:18px;padding:15px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.desk .t{font-family:var(--serif);font-weight:600;font-size:15.5px;line-height:1.2}
.desk .d{font-family:var(--serif);font-weight:300;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.desk .e{font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--accent);white-space:nowrap;cursor:pointer}
.desk .e:hover{text-decoration:underline;text-underline-offset:2px}
.tip-band{border:1px solid var(--hair-dark);margin-top:26px;padding:20px 22px 22px;position:relative}
.tip-band .caps{color:var(--accent)}
.tip-band h3{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.15;margin-top:7px}
.tip-band p{font-family:var(--serif);font-weight:300;font-size:13px;line-height:1.55;color:var(--ink-2);margin-top:8px;max-width:60ch}
.tip-ways{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 24px;margin-top:14px}
.tip-way{border-top:1px solid var(--hair);padding-top:11px}
.tip-way .w{font-family:var(--sans);text-transform:uppercase;letter-spacing:.12em;font-size:9.5px;font-weight:700;color:var(--ink-3)}
.tip-way .v{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--accent);margin-top:4px;word-break:break-word}
.tip-way .v a{color:var(--accent)}
.tip-way .n{font-family:var(--sans);font-size:10.5px;color:var(--ink-3);margin-top:3px;line-height:1.4}
.form-wrap{padding-top:18px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f-field{margin-bottom:14px}
.f-field label{display:block;font-family:var(--sans);text-transform:uppercase;letter-spacing:.12em;font-size:9.5px;font-weight:700;color:var(--ink-3);margin-bottom:6px}
.f-field input,.f-field select,.f-field textarea{width:100%;border:1px solid var(--hair);background:var(--card);padding:10px 12px;font-family:var(--sans);font-size:13px;color:var(--ink);outline:none;border-radius:0;-webkit-appearance:none;appearance:none}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{border-color:var(--accent)}
.f-field textarea{min-height:150px;resize:vertical;line-height:1.55}
.f-field .sel{position:relative}
.f-field .sel::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:translateY(-65%) rotate(45deg);pointer-events:none}
.f-foot{display:flex;align-items:center;gap:16px;margin-top:4px}
.f-send{background:var(--accent);color:#fff;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.04em;padding:10px 26px}
.f-send:hover{background:var(--accent-2)}
.f-note{font-family:var(--sans);font-size:10.5px;color:var(--ink-3);line-height:1.4;max-width:40ch}
/* contact sidebar */
.rt-card{background:var(--paper-2);padding:18px}
.rt-card .caps{font-size:10.5px;color:var(--accent)}
.rt-card p{font-family:var(--serif);font-weight:300;font-size:12.5px;line-height:1.5;color:var(--ink-2);margin-top:8px}
.rt-card .row{display:flex;align-items:baseline;gap:10px;border-top:1px solid var(--hair);margin-top:12px;padding-top:10px}
.rt-card .row:first-of-type{border-top:0;margin-top:10px;padding-top:0}
.rt-card .k{font-family:var(--serif);font-weight:600;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;flex:0 0 74px}
.rt-card .v{font-family:var(--sans);font-size:11px;color:var(--ink-3);line-height:1.4}
.soc-block{margin-top:22px}
.soc{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--hair)}
.soc:last-child{border-bottom:0}
.soc .n{font-family:var(--serif);font-weight:450;font-size:13.5px;color:var(--ink)}
.soc .h{font-family:var(--sans);font-size:10.5px;color:var(--ink-3)}
.soc:hover .n{color:var(--accent)}
.ct-side .nl-card{margin-top:22px}
/* contact — mobile */
.m-ct-head{padding-bottom:6px}
.m-ct-head .caps{color:var(--accent);font-size:10px;letter-spacing:.18em}
.m-ct-head h1{font-family:var(--serif);font-weight:650;font-size:27px;line-height:1.08;letter-spacing:-.01em;margin-top:5px}
.m-ct-head .dek{font-size:13px;margin-top:8px}
.m-desk{padding:12px 0;border-bottom:1px solid var(--hair)}
.m-desk:last-of-type{border-bottom:0}
.m-desk .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.m-desk .t{font-family:var(--serif);font-weight:600;font-size:14.5px;line-height:1.2}
.m-desk .e{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--accent);white-space:nowrap;cursor:pointer}
.m-desk .d{font-family:var(--serif);font-weight:300;font-size:12px;color:var(--ink-2);margin-top:3px;line-height:1.45}
.m-tip h3{font-family:var(--serif);font-weight:600;font-size:17px;line-height:1.15;margin-top:6px}
.m-tip .way{border-top:1px solid var(--hair);margin-top:11px;padding-top:9px}
.m-tip .w{font-family:var(--sans);text-transform:uppercase;letter-spacing:.12em;font-size:9px;font-weight:700;color:var(--ink-3)}
.m-tip .v{font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--accent);margin-top:3px;word-break:break-word}
.m-tip .v a{color:var(--accent)}
.m-form{padding-top:12px}
.m-form .f-field{margin-bottom:12px}
.m-form label{display:block;font-family:var(--sans);text-transform:uppercase;letter-spacing:.12em;font-size:9px;font-weight:700;color:var(--ink-3);margin-bottom:5px}
.m-form input,.m-form select,.m-form textarea{width:100%;border:1px solid var(--hair);background:var(--card);padding:10px 12px;font-family:var(--sans);font-size:13px;color:var(--ink);outline:none;border-radius:10px;-webkit-appearance:none;appearance:none}
.m-form input:focus,.m-form select:focus,.m-form textarea:focus{border-color:var(--accent)}
.m-form textarea{min-height:120px;resize:vertical;line-height:1.55}
.m-form .sel{position:relative}
.m-form .sel::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:translateY(-65%) rotate(45deg);pointer-events:none}
.m-form .f-send{width:100%;background:var(--accent);color:#fff;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.04em;padding:11px 0;border-radius:10px}
.m-form .f-note{font-family:var(--sans);font-size:10px;color:var(--ink-3);margin-top:8px;line-height:1.4;text-align:center}
.m-soc{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--hair)}
.m-soc:last-of-type{border-bottom:0}
.m-soc .n{font-family:var(--serif);font-weight:450;font-size:13.5px;color:var(--ink)}
.m-soc .h{font-family:var(--sans);font-size:10.5px;color:var(--ink-3)}

/* ================= 404 page ================= */
.nf{padding-top:52px;padding-bottom:40px;text-align:center}
.nf .caps{color:var(--accent);letter-spacing:.22em}
.dice-pair{display:flex;justify-content:center;gap:18px;margin:26px 0 8px}
.die{width:74px;height:74px;background:var(--card);border:1.5px solid var(--hair-dark);border-radius:14px;position:relative;box-shadow:var(--shadow-card)}
.die.d1{transform:rotate(-9deg)}
.die.d2{transform:rotate(7deg)}
.die .pip{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--accent);left:50%;top:50%;transform:translate(-50%,-50%)}
@media (prefers-reduced-motion:no-preference){
  .die.d1{animation:settle1 .9s cubic-bezier(.2,1.6,.4,1) both}
  .die.d2{animation:settle2 1s .08s cubic-bezier(.2,1.6,.4,1) both}
  @keyframes settle1{0%{transform:translateY(-26px) rotate(-40deg);opacity:0}100%{transform:translateY(0) rotate(-9deg);opacity:1}}
  @keyframes settle2{0%{transform:translateY(-32px) rotate(32deg);opacity:0}100%{transform:translateY(0) rotate(7deg);opacity:1}}
}
.nf-title{font-family:var(--serif);font-weight:650;font-size:64px;line-height:1;letter-spacing:-.02em;margin-top:22px}
.nf-title em{font-style:italic;font-weight:450;color:var(--accent)}
.nf-dek{font-family:var(--serif);font-weight:300;font-size:16px;line-height:1.55;color:var(--ink-2);max-width:52ch;margin:14px auto 0}
.nf-dek b{font-weight:600;color:var(--ink)}
.nf-search{display:flex;justify-content:center;margin-top:26px}
.nf-search .box{display:flex;align-items:center;gap:10px;width:min(440px,100%);border:1px solid var(--hair);background:var(--card);padding:11px 15px}
.nf-search .box:focus-within{border-color:var(--accent)}
.nf-search svg{width:15px;height:15px;flex:0 0 auto;color:var(--ink-3)}
.nf-search input{flex:1;border:0;background:transparent;font-family:var(--sans);font-size:13px;color:var(--ink);outline:none}
.nf-actions{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:18px}
.nf-home{display:inline-flex;align-items:center;gap:9px;padding:9px 22px;border-radius:999px;background:var(--accent);color:#fff;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.04em}
.nf-home:hover{background:var(--accent-2)}
.nf-alt{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink-2)}
.nf-alt:hover{color:var(--accent)}
.rescue{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;padding-top:26px;padding-bottom:10px}
.rescue > *{min-width:0}
.rescue .col{padding:0 26px;border-right:1px solid var(--hair)}
.rescue .col:first-child{padding-left:0}
.rescue .col:last-child{border-right:0;padding-right:0}
.r-label{padding-bottom:8px;border-bottom:2px solid var(--hair-dark);margin-bottom:4px}
.r-label .caps{font-size:11px}
.r-item{display:block;padding:11px 0;border-bottom:1px solid var(--hair)}
.r-item:last-child{border-bottom:0}
.r-item .t{font-family:var(--serif);font-weight:450;font-size:13.5px;line-height:1.3;color:var(--ink)}
.r-item .d{font-family:var(--sans);font-size:10.5px;color:var(--ink-3);margin-top:3px;display:block}
.r-item.sec{display:flex;justify-content:space-between;align-items:baseline}
.r-item.sec .n{font-family:var(--sans);font-size:10px;color:var(--ink-4);font-weight:700}
.r-play{display:grid;grid-template-columns:26px 1fr auto;gap:10px;padding:10px 0;border-bottom:1px solid var(--hair);align-items:center}
.r-play:last-child{border-bottom:0}
.r-play .play{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.r-play .play svg{width:9px;height:9px;fill:#fff;margin-left:1.5px}
.r-play .t{font-family:var(--serif);font-weight:450;font-size:12.5px;line-height:1.25;color:var(--ink)}
.r-play .dur{font-family:var(--sans);font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.nf-report{text-align:center;font-family:var(--sans);font-size:11px;color:var(--ink-3);padding:18px 0 6px}
.nf-report a{color:var(--accent);font-weight:600}
/* 404 — mobile */
.m-nf{text-align:center;padding:26px 4px 6px}
.m-nf .caps{color:var(--accent);font-size:10px;letter-spacing:.2em}
.m-nf .dice-pair{margin:20px 0 4px}
.m-nf .die{width:58px;height:58px;border-radius:11px}
.m-nf .die .pip{width:10px;height:10px}
.m-nf h1{font-family:var(--serif);font-weight:650;font-size:40px;line-height:1;letter-spacing:-.015em;margin-top:18px}
.m-nf h1 em{font-style:italic;font-weight:450;color:var(--accent)}
.m-nf .dek{font-family:var(--serif);font-weight:300;font-size:13.5px;line-height:1.5;color:var(--ink-2);margin-top:10px}
.m-nf .nf-search{margin-top:20px}
.m-nf .nf-search .box{border-radius:12px}
.m-nf .nf-home{margin-top:16px}
.m-r{display:block;padding:11px 0;border-bottom:1px solid var(--hair);text-align:left}
.m-r:last-of-type{border-bottom:0}
.m-r .t{font-family:var(--serif);font-weight:450;font-size:13.5px;line-height:1.3;color:var(--ink)}
.m-r .d{font-family:var(--sans);font-size:10.5px;color:var(--ink-3);margin-top:3px;display:block}

/* ================= Articles index page ================= */
/* Head reuses .cat-head/.cat-title/.cat-dek/.cat-meta; .chips here are anchor jump links, not filters. */
.ix-sec{padding:22px 0 10px}
.ix-sec .sec-head .ix-n{font-family:var(--serif);font-style:italic;font-weight:450;font-size:14px;color:var(--ink-3)}
.ix-grid{display:grid;grid-template-columns:1.05fr 1.7fr;gap:0}
.ix-grid > *{min-width:0}
.ix-lead{padding-right:26px;border-right:1px solid var(--hair)}
.ix-lead-in{position:sticky;top:18px}
.ix-lead img{width:100%;aspect-ratio:16/9;object-fit:cover}
.ix-lead .kicker{margin-top:11px;display:inline-block}
.ix-lead .hd{font-size:21px;line-height:1.14;margin-top:4px;display:block}
.ix-lead .dek{margin-top:5px}
.ix-lead .meta{margin-top:6px}
.ix-list{padding-left:26px;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-content:start}
.ix-item{padding:10px 0;border-bottom:1px solid var(--hair)}
.ix-item .kicker{display:inline-block}
.ix-item .hd{margin-top:2px;display:block}
.ix-item .meta{margin-top:4px}
.ix-grid.mirror .ix-lead{order:2;padding-right:0;padding-left:26px;border-right:0;border-left:1px solid var(--hair)}
.ix-grid.mirror .ix-list{order:1;padding-left:0;padding-right:26px}
/* articles index — mobile */
.m-ix-sec{padding:4px 0 12px}
.m-ix-head{display:flex;align-items:baseline;gap:8px;padding:14px 0 8px;border-bottom:2px solid var(--hair-dark)}
.m-ix-head .caps{font-size:11px;letter-spacing:.16em}
.m-ix-head .n{font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--ink-3)}
.m-ix-head a{margin-left:auto;font-family:var(--sans);font-size:10.5px;font-weight:600;color:var(--ink-3)}
.m-ix-item{display:block;padding:10px 0;border-bottom:1px solid var(--hair)}
.m-ix-item:last-child{border-bottom:0}
.m-ix-item .kicker{font-size:9.5px}
.m-ix-item h3{font-family:var(--serif);font-weight:600;font-size:14.5px;line-height:1.22;margin-top:2px}
.m-ix-item .meta{margin-top:4px}

/* ================= Directory pages (/cruise-lines/, /land-casinos/) ================= */
.dir-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 38px}
a.dir-item{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--hair)}
.dir-item .t{font-family:var(--serif);font-weight:450;font-size:16px;line-height:1.25;color:var(--ink)}
.dir-item .d{font-family:var(--sans);font-size:10.5px;color:var(--ink-3);white-space:nowrap;letter-spacing:.02em}
.dir-item .d::after{content:" ↗"}
.dir-item:hover .t,.dir-item:hover .d{color:var(--accent)}
.dir-note{border:1.5px solid var(--ink);padding:26px 28px;margin-top:34px;display:flex;align-items:baseline;justify-content:space-between;gap:28px;flex-wrap:wrap}
.dir-note .lead{font-family:var(--serif);font-weight:600;font-size:19px}
.dir-note p{font-family:var(--sans);font-size:13px;color:var(--ink-2);max-width:56ch;margin-top:6px}
.dir-note a.go{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
/* mobile */
.m-dir-item{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--hair)}
.m-dir-item .t{font-family:var(--serif);font-weight:500;font-size:14.5px;line-height:1.25;color:var(--ink)}
.m-dir-item .d{font-family:var(--sans);font-size:10px;color:var(--ink-3);white-space:nowrap}
.m-dir-item .d::after{content:" ↗"}
.m-dir-note{border:1.5px solid var(--ink);padding:18px;margin-top:22px}
.m-dir-note .lead{font-family:var(--serif);font-weight:600;font-size:16px}
.m-dir-note p{font-family:var(--sans);font-size:12.5px;color:var(--ink-2);margin-top:5px}
.m-dir-note a.go{display:inline-block;margin-top:10px;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}

/* ================= Games ================= */
/* Games are ported from the gammonfrog build and keep its token names;
   aliases below resolve them into the df palette. JS reads some of these
   off :root (getComputedStyle) for canvas colors, so they must live here,
   not on a wrapper. --mono maps to the sans stack: df has no mono voice. */
:root{
  --rule:var(--hair-dark);
  --rule-soft:var(--hair);
  --paper-3:#e2ddcd;
  --accent-ink:#fff;
  --gutter:16px;
  --mono:var(--sans);
}
.game-shell{max-width:var(--container);margin:0 auto;padding:0 24px 48px}
.game-shell main{font-variant-numeric:tabular-nums}
@media (max-width:820px){
  .game-shell{padding:4px 12px calc(96px + env(safe-area-inset-bottom)) 58px}
  .game-shell .crumbs{padding-top:10px}
}

/* Game action buttons — df pill treatment. Each game styles its own
   `.xx-btn` at 0-1-0 in a body <style>; these 0-2-0 rules outrank them,
   while the games' own :active / :disabled / aria-pressed states (0-2-0,
   later in the document) still win their ties and stay intact. */
.game-shell .btn,
.game-shell .bg-btn,.game-shell .bj-btn,.game-shell .brk-btn,.game-shell .ch-btn,
.game-shell .g48-btn,.game-shell .mj-btn,.game-shell .ms-btn,.game-shell .pln-btn,
.game-shell .sdk-btn,.game-shell .snk-btn,.game-shell .ttt-new,
.game-shell .bc-btn,.game-shell .cr-btn,.game-shell .dw-btn,.game-shell .fc-btn,
.game-shell .rl-btn,.game-shell .sol-btn,.game-shell .sp-btn,.game-shell .vp-btn,
.game-shell .yc-btn{
  font-family:var(--sans);font-weight:600;letter-spacing:.08em;
  border-radius:999px;border-color:var(--hair);background:var(--card);color:var(--ink-2);
}
.game-shell .mj-opt{border-color:var(--hair-dark);background:var(--card);border-radius:12px}
.game-shell .bg-veil .btn,.game-shell .ch-veil .btn,.game-shell .g48-veil .btn,
.game-shell .ms-veil .btn,.game-shell .sdk-veil .btn{
  font-family:var(--sans);font-weight:600;letter-spacing:.08em;
  border-radius:999px;border-color:var(--hair-dark);background:var(--card);color:var(--ink);
}
.game-shell .bg-btn.primary,.game-shell .bj-btn.primary,
.game-shell .bc-btn.primary,.game-shell .cr-btn.primary,.game-shell .fc-btn.primary,
.game-shell .rl-btn.primary,.game-shell .sol-btn.primary,.game-shell .sp-btn.primary,
.game-shell .vp-btn.primary,.game-shell .yc-btn.primary{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.game-shell .bj-toggle,.game-shell .sol-toggle,.game-shell .sp-toggle{
  font-family:var(--sans);font-weight:600;letter-spacing:.08em;
  border-radius:999px;border-color:var(--hair);background:var(--card);color:var(--ink-2);
}
/* segmented controls become rounded pill groups */
.game-shell .ch-seg,.game-shell .ms-seg,.game-shell .sdk-seg,.game-shell .ttt-seg{
  border-radius:999px;overflow:hidden;border-color:var(--hair);background:var(--card);
}
.game-shell .ch-seg button,.game-shell .ms-seg button,.game-shell .sdk-seg button,.game-shell .ttt-seg button{
  font-family:var(--sans);font-weight:600;letter-spacing:.08em;
}

/* ---- Games hub ---- */
.gm-hub .cat-head{padding-bottom:24px}
.gm-label{padding:26px 0 9px;border-bottom:2px solid var(--hair-dark);display:flex;align-items:baseline;justify-content:space-between}
.gm-label .n{font-family:var(--sans);font-size:11px;color:var(--ink-3)}
.gm-tile{position:relative;background:var(--paper-2);border:1px solid var(--hair);flex:0 0 auto}
.gm-tile svg{position:absolute;inset:0;width:100%;height:100%}
.gm-tile .fi{fill:var(--ink)}
.gm-tile .fa{fill:var(--accent)}
.gm-tile .fw{fill:var(--card)}
.gm-tile .fp{fill:var(--paper-2)}
.gm-tile .fn{fill:none}
.gm-tile .fg{fill:#2e7d4f}
.gm-tile .si{stroke:var(--ink)}
.gm-tile .sa{stroke:var(--accent)}
.gm-tile text{font-family:var(--sans);font-weight:700}
.gm-feat{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:24px 0 32px}
.gm-feat a{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center}
.gm-feat .gm-tile{width:150px;aspect-ratio:1}
.gm-feat h3{margin-top:4px}
.gm-feat .dek{margin-top:6px}
.gm-feat .meta{margin-top:8px}
.gm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 30px;padding:22px 0 32px}
.gm-grid a{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center}
.gm-grid .gm-tile{width:64px;aspect-ratio:1}
.gm-grid h3{margin-top:3px}
.gm-foot{padding:4px 0 40px;font-family:var(--sans);font-size:11px;color:var(--ink-4)}
/* mobile hub rows */
.m-gm-group{padding-top:16px}
.m-gm-row{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--hair)}
.m-gm-row:last-child{border-bottom:0}
.m-gm-row .gm-tile{width:56px;aspect-ratio:1;border-radius:12px;overflow:hidden}
.m-gm-row h3{font-family:var(--serif);font-weight:600;font-size:16px;line-height:1.2}
.m-gm-row .dek{margin-top:2px;font-size:12.5px}

/* ================= Front rail banners + audio-item playing + queue tabs ================= */
/* hero left rail: directory text banners under the article list */
.rail-banner{display:block;border:1.5px solid var(--ink);padding:13px 14px;margin-top:18px}
.rail-banner+.rail-banner{margin-top:12px}
.rail-banner .bt{font-family:var(--serif);font-weight:600;font-size:16px;line-height:1.2;margin-top:5px}
.rail-banner p{font-family:var(--sans);font-size:11.5px;color:var(--ink-2);line-height:1.4;margin-top:4px}
.rail-banner .go{display:inline-block;margin-top:9px;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.rail-banner:hover .bt{color:var(--accent-2)}

/* audio-item rows flip to a pause glyph while their track is actually playing */
.audio-item .play .i-pause{display:none}
.audio-item.playing .play .i-play{display:none}
.audio-item.playing .play .i-pause{display:block;margin-left:0}
.audio-item.playing .t{color:var(--accent-2)}

/* queue drawer tabs: audio articles vs podcast, separate queues */
.dq-tabs{display:flex;gap:22px;border-bottom:1px solid var(--hair)}
.dq-tab{position:relative;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding:11px 0 10px;display:flex;align-items:center;gap:6px}
.dq-tab:hover{color:var(--ink)}
.dq-tab.is-on{color:var(--accent)}
.dq-tab.is-on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
.dq-tab .c{font-size:9px;line-height:1;background:var(--paper-2);color:var(--ink-2);border-radius:999px;padding:2.5px 6px}
.dq-tab.is-on .c{background:var(--accent);color:#fff}

/* Career Skills grid: pull-quote strip under the story rows */
.gs-quote{grid-column:1/-1;margin:0;padding:18px 10px 6px;border-top:1px solid var(--hair);text-align:center}
.gs-quote::before{content:"\201C";display:block;font-family:var(--serif);font-weight:600;font-size:34px;line-height:.5;color:var(--accent);margin-bottom:8px}
.gs-quote p{font-family:var(--serif);font-weight:300;font-style:italic;font-size:16.5px;line-height:1.45;color:var(--ink);margin:0 auto;max-width:44ch}
.gs-quote cite{display:block;margin-top:9px;font-style:normal;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.gs-quote cite a{color:var(--accent)}
.gs-quote cite a:hover{color:var(--accent-2)}
.grid-side.has-quote .tg-item:nth-last-child(-n+3){border-bottom:0}

/* ================= Favorites (ribbon + /favorites/) ================= */
.fav{display:inline-flex;align-items:center;justify-content:center;width:24px;height:20px;padding:0;color:var(--ink);cursor:pointer;flex:0 0 auto;vertical-align:-5px}
.fav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.fav:hover{color:var(--accent)}
.fav.on{color:var(--accent)}
.fav.on svg{fill:currentColor}
.m-top-tools{display:flex;align-items:center;gap:10px}
.m-top .fav{width:38px;height:30px;justify-content:flex-end}
.m-top .fav svg{width:20px;height:20px}
/* mobile lists: pill + ribbon on their own line under the byline/date meta */
.m-act{display:flex;align-items:center;gap:10px;margin-top:7px}
/* mobile article: Listen moves onto the hero image, bottom-left */
.m-hero-wrap{position:relative}
.m-hero-wrap .listen-btn{position:absolute;left:10px;bottom:10px;padding:5px 12px;font-size:10.5px;box-shadow:0 2px 12px rgba(28,28,26,.35)}
/* /favorites/ page */
.fav-wrap{max-width:680px;margin:0 auto;padding:8px 0 46px}
.fav-row{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid var(--hair)}
.fav-row:last-child{border-bottom:0}
.fav-row .body{flex:1;min-width:0}
.fav-row .kicker{font-size:9.5px}
.fav-row h3{font-family:var(--serif);font-weight:600;font-size:16px;line-height:1.25;margin-top:2px}
.fav-row a:hover h3{color:var(--accent)}
.fav-row .meta{margin-top:4px}
.fav-row .fav{margin-top:3px}
.fav-empty{font-family:var(--serif);font-weight:300;font-size:14px;color:var(--ink-3);padding:20px 0}
.mobile .fav-row h3{font-size:14.5px}
.mobile [data-fav-list]{padding-bottom:8px}

/* ================= Tech-edit round 2026-07-18 ================= */
/* popovers: header socials + article Share (df-chrome.js toggles .pop-wrap.open) */
.pop-wrap{position:relative;display:inline-flex}
[data-pop-toggle]{cursor:pointer}
.pop-menu{position:absolute;top:calc(100% + 7px);right:0;z-index:60;min-width:150px;background:var(--card);border:1px solid var(--hair);border-radius:12px;box-shadow:0 10px 30px rgba(28,28,26,.14);padding:5px 0;display:none}
.pop-wrap.open .pop-menu{display:block}
.pop-menu a{display:block;padding:8px 16px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--ink-2);white-space:nowrap}
.pop-menu a:hover{color:var(--accent);background:var(--paper)}
.pop-menu.up{top:auto;bottom:calc(100% + 7px)}
/* desktop article tools row: Share + aA + ribbon, flush right where the column
   meets the sidebar separator; all at the listen-btn's 30px height */
.art-tools{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.share-pill{height:30px;display:inline-flex;align-items:center;padding:0 15px;border:1px solid var(--hair);border-radius:999px;background:var(--card);font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer}
.share-pill:hover{color:var(--accent);border-color:var(--accent)}
.art-tools .aA{height:30px;align-items:stretch}
.art-tools .aA .lbl{display:flex;align-items:center}
.art-tools .fav{width:32px;height:30px}
.art-tools .fav svg{width:19px;height:19px}
/* mobile article: aA rides the byline row; Share sits right in the tags row */
.m-byline .m-aA{margin-left:auto;margin-top:0}
.m-share{margin-left:auto}
button.tag{cursor:pointer;background:transparent}
button.tag:hover{color:var(--accent);border-color:var(--accent)}
/* mobile: slightly larger pill + ribbon (user 2026-07-18) */
@media (max-width:820px){
  .listen-pill{font-size:9.5px;padding:3px 11px}
  .m-act .fav{width:27px;height:23px}
  .m-act .fav svg{width:17px;height:17px}
}

/* ================= Account (/account/ + header icon) ================= */
.util .acct-ic{display:inline-flex;align-items:center;color:var(--ink-2)}
.util .acct-ic svg{width:16px;height:16px}
.util .acct-ic:hover{color:var(--accent)}
.acct-wrap{max-width:680px;margin:0 auto;padding:8px 0 46px}
.acct-wrap .caps{display:block;color:var(--accent);font-size:10px;margin-bottom:6px}
.acct-new,.acct-have,.acct-linked{padding:20px 0;border-bottom:1px solid var(--hair)}
.acct-linked{border-bottom:0}
.acct-wrap p{font-family:var(--serif);font-weight:300;font-size:14px;line-height:1.55;color:var(--ink-2);max-width:58ch}
.acct-btn{display:inline-flex;align-items:center;height:34px;padding:0 18px;border-radius:999px;background:var(--accent);color:#fff;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;margin-top:12px;flex:0 0 auto}
.acct-btn:hover{background:var(--accent-2)}
.acct-ghost{display:inline-flex;align-items:center;height:32px;padding:0 16px;border-radius:999px;border:1px solid var(--hair);background:transparent;color:var(--ink-2);font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.acct-ghost:hover{color:var(--accent);border-color:var(--accent)}
.acct-form{display:flex;gap:10px;margin-top:12px;max-width:430px}
.acct-form .acct-btn{margin-top:0;align-self:center}
.acct-input{flex:1;min-width:0;border:1px solid var(--hair);border-radius:999px;padding:8px 16px;font-family:var(--sans);font-size:13px;letter-spacing:.06em;background:var(--card);color:var(--ink)}
.acct-input:focus{outline:none;border-color:var(--accent)}
.acct-code{font-family:var(--serif);font-weight:650;font-size:30px;letter-spacing:.05em;margin:4px 0 14px;user-select:all;word-break:break-all}
.acct-row{display:flex;gap:10px;flex-wrap:wrap}
.acct-warn{font-size:12.5px;color:var(--ink-3);margin-top:14px}
.acct-status{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--accent);padding-top:14px;min-height:20px}
[data-acct] .acct-linked{display:none}
[data-acct].linked .acct-linked{display:block}
[data-acct].linked .acct-new,[data-acct].linked .acct-have{display:none}
@media (max-width:820px){
  .acct-code{font-size:23px}
  .acct-form{flex-wrap:wrap}
}