/* ==========================================================================
   MoralFace – public theme "Editorial feed"
   Charcoal masthead with a scrollable section row, warm grey canvas, white story cards with large pictures and
   serif headlines, ranked "Most read" rail, charcoal footer. Amber/rust accent from the two-tone MoralFace mark.
   Fonts are bundled (Inter for text, Montserrat for brand/labels); headlines use the platform serif. No external requests.

   Contents
   1. Fonts and design tokens        6. Front page            11. Static pages, forms, 404
   2. Base and utilities             7. Listings / search     12. Reader poll and comments
   3. Masthead, section row, search  8. Article               13. Cookie consent, ads, notices
   4. Menu panel                     9. Rails and rankings    14. Footer
   5. Cards                         10. Newsletter            15. Motion, print
   ========================================================================== */

/* ---------- 1. Fonts and design tokens ---------- */
@font-face{font-family:"Montserrat";font-weight:100 900;font-style:normal;font-display:swap;src:url(../fonts/montserrat-var.woff) format("woff")}
@font-face{font-family:"Montserrat";font-weight:100 900;font-style:italic;font-display:swap;src:url(../fonts/montserrat-italic-var.woff) format("woff")}
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/inter-400.woff) format("woff")}
@font-face{font-family:"Inter";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/inter-500.woff) format("woff")}
@font-face{font-family:"Inter";font-weight:600 700;font-style:normal;font-display:swap;src:url(../fonts/inter-600.woff) format("woff")}

:root{
  color-scheme:only light;
  /* surfaces */
  --bg:#f1f0ed; --card:#fff; --band:#e7e5e0; --soft:#f6f5f2; --line:#e2e0db; --line-2:#cfccc5;
  /* text */
  --ink:#151412; --text:#2b2a27; --mute:#696660;
  /* brand: rust for text-level accents (AA on white), amber for marks and fills */
  --accent:#b93f0b; --accent-hover:#8f2f06; --amber:#f0a03a; --amber-2:#f6c744; --on-amber:#1b1a18;
  --link:#b93f0b; --tint:#fbeadf; --tint-ink:#5a2408;
  /* masthead and footer */
  --mast:#1b1a18; --mast-2:#24221f; --mast-ink:#f6f3ee; --mast-mute:#bdb7ad; --foot:#161513;
  /* states */
  --ok-bg:#e4f3e8; --ok-ink:#14532d; --bad-bg:#fbe6e3; --bad-ink:#7a1f12; --note-bg:#fff4d6; --note-ink:#5b4300;
  --img-bg:#e2e0dc; --img-filter:none;
  --shadow-1:0 1px 2px rgba(24,20,14,.06),0 1px 1px rgba(24,20,14,.04);
  --shadow-2:0 6px 20px rgba(24,20,14,.10),0 2px 4px rgba(24,20,14,.05);
  /* type */
  /* reading type like pupperish.com: Montserrat for text and headlines, roomy 1.8 line-height, bold headings.
     --serif is kept as the headline token name so older markup keeps working. */
  --serif:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --brand:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* legacy aliases (kept for markup created by older content / admin previews) */
  --display:var(--serif); --ui:var(--sans); --teal:var(--amber); --teal-ink:var(--accent);
  /* layout */
  --gutter:16px; --maxw:1240px; --rail:360px; --head:58px; --r:6px; --r-sm:4px; --ease:cubic-bezier(.2,.7,.2,1);
}
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#121110; --card:#1c1b19; --band:#171614; --soft:#232220; --line:#2f2d29; --line-2:#3d3a35;
  --ink:#f3f0ea; --text:#d8d4cc; --mute:#a29d94;
  --accent:#f2925a; --accent-hover:#ffb184; --amber:#f0a03a; --link:#f59f6a; --tint:#2b1d14; --tint-ink:#f6cfb4;
  --mast:#0e0d0c; --mast-2:#171614; --foot:#0e0d0c;
  --ok-bg:#16301f; --ok-ink:#a9e3bc; --bad-bg:#3a1b17; --bad-ink:#f3b8ae; --note-bg:#33290f; --note-ink:#f0d9a0;
  --img-bg:#26241f; --img-filter:brightness(.92) contrast(1.03);
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 24px rgba(0,0,0,.5);
}

/* ---------- 2. Base and utilities ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--head) + 16px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,iframe{max-width:100%}
img{display:block;height:auto;filter:var(--img-filter)}
a{color:inherit}
h1,h2,h3,h4,p,li,a,figcaption,blockquote,dd,span{overflow-wrap:break-word}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.skip{position:absolute;left:8px;top:-80px;background:var(--ink);color:var(--bg);padding:12px 16px;z-index:300;text-decoration:none;font-weight:600}
.skip:focus{top:8px}
.wrap,.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{width:100%;max-width:796px;margin-inline:auto;padding-inline:var(--gutter)}
.wrap>*,.narrow>*{min-width:0}
.muted{color:var(--mute)}
main{display:block;min-height:50vh}

/* labels, section headings, buttons, chips */
.kicker{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:8px;font:700 11.5px/1.2 var(--brand);letter-spacing:.08em;text-transform:uppercase}
.kicker a{color:var(--accent);text-decoration:none}
.kicker a:hover{text-decoration:underline;text-underline-offset:3px}
.kicker__flag{padding:3px 7px;border-radius:3px;background:#c8261b;color:#fff;font:700 10.5px/1.2 var(--brand);letter-spacing:.06em}
.pill-demo{padding:2px 6px;border:1px solid var(--line-2);border-radius:3px;font:600 10px/1.2 var(--brand);color:var(--mute);letter-spacing:.04em}
.hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px;margin-bottom:20px}
.hd__t{display:flex;align-items:center;gap:12px;font:800 clamp(24px,1vw + 19px,32px)/1.15 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.hd__t::before{content:"";flex:none;width:5px;height:.9em;border-radius:2px;background:var(--amber)}
.hd__more{display:inline-block;padding:12px 0;margin:-12px 0;font:700 14px/1.2 var(--brand);color:var(--accent);text-decoration:none;white-space:nowrap}
.hd__more:hover{text-decoration:underline;text-underline-offset:3px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border:2px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--card);text-decoration:none;font:700 15px/1 var(--brand);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--line{background:transparent;color:var(--ink)}
.btn--line:hover{background:var(--ink);border-color:var(--ink);color:var(--card)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);text-decoration:none;font:600 14px var(--brand);color:var(--ink)}
.chips a:hover{border-color:var(--accent);color:var(--accent)}
.empty-state{margin:28px 0 12px;padding:clamp(22px,4vw,36px);max-width:760px;border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-1)}
.empty-state h2{margin-bottom:10px;font:800 clamp(24px,2vw + 16px,34px)/1.15 var(--serif);color:var(--ink)}
.empty-state p{margin-bottom:14px;font:400 16.5px/1.6 var(--sans)}
.sec{margin-top:40px}

/* ---------- 3. Masthead, section row, search ---------- */
.flashbar{background:var(--amber);color:var(--on-amber);font:600 14px/1.3 var(--sans)}
.flashbar__in{display:flex;gap:12px;align-items:center;padding-block:8px}
.flashbar__tag{flex:none;padding:3px 8px;border-radius:3px;background:var(--on-amber);color:#fff;font:700 10.5px/1.2 var(--brand);text-transform:uppercase;letter-spacing:.08em}
.flashbar a{text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.flashbar a:hover{text-decoration:underline}

.top{position:sticky;top:0;z-index:60;background:var(--mast);color:var(--mast-ink)}
.top__in{display:flex;align-items:center;gap:6px;max-width:var(--maxw);height:var(--head);margin-inline:auto;padding-inline:max(6px,calc(var(--gutter) - 10px))}
.top__burger{flex:none;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;border-radius:50%;text-decoration:none}
.top__burger span{display:block;width:20px;height:2px;border-radius:2px;background:currentColor}
.top__burger:hover{background:rgba(255,255,255,.08)}
.top__logo{display:block;min-width:0;text-decoration:none;color:inherit}
.top__find{display:none}
.top__tools{display:flex;align-items:center;gap:2px;margin-left:auto}
.top__search,.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;text-decoration:none}
.top__search:hover,.top .theme-toggle:hover{background:rgba(255,255,255,.08)}
.top__search[aria-expanded=true]{background:rgba(255,255,255,.12)}
.theme-toggle .tt-sun{display:none}
:root[data-theme=dark] .theme-toggle .tt-sun{display:block}
:root[data-theme=dark] .theme-toggle .tt-moon{display:none}
.top__cta{display:inline-flex;align-items:center;min-height:36px;margin-left:6px;padding:0 14px;border:1.5px solid rgba(255,255,255,.55);border-radius:6px;font:700 13.5px/1 var(--brand);color:inherit;text-decoration:none;white-space:nowrap}
.top__cta:hover{background:var(--mast-ink);border-color:var(--mast-ink);color:var(--mast)}
.top--light .top__cta{border-color:var(--ink)}.top--light .top__cta:hover{background:var(--ink);color:var(--card)}
.top__burger span{transition:transform .18s ease,opacity .18s ease}
.top__burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.top__burger[aria-expanded=true] span:nth-child(2){opacity:0}
.top__burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* newsletter banner */
.promo{background:linear-gradient(90deg,#f2a33a 0%,#e0662a 45%,#b4366b 100%);color:#fff}
.promo[hidden],.promo-off .promo{display:none}
.promo__in{display:flex;align-items:center;justify-content:center;gap:10px 14px;max-width:var(--maxw);min-height:48px;margin-inline:auto;padding:6px 44px 6px var(--gutter);position:relative}
.promo__in>.ico{flex:none;width:20px;height:20px}
.promo__t{min-width:0;font:700 14.5px/1.25 var(--brand);text-shadow:0 1px 1px rgba(0,0,0,.12)}
.promo__t span{font-weight:500;opacity:.95}
.promo__btn{flex:none;display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border:1.5px solid rgba(255,255,255,.85);border-radius:6px;font:700 13.5px/1 var(--brand);color:#fff;text-decoration:none;white-space:nowrap}
.promo__btn:hover{background:#fff;color:#b4366b}
.promo__x{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:none;color:#fff;cursor:pointer;opacity:.85}
.promo__x:hover{background:rgba(0,0,0,.12);opacity:1}
/* Home / Trending / Latest / Sections */
.segs{background:var(--bg);padding:14px 0 0}
.segs__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border-radius:10px;background:var(--band)}
@media (min-width:900px){.segs__in{max-width:560px}}
.segs a{display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 8px;border-radius:7px;font:600 14px/1 var(--brand);color:var(--mute);text-decoration:none;transition:background .15s,color .15s}
.segs a:hover{color:var(--ink)}
.segs a[aria-current]{background:var(--card);color:var(--ink);box-shadow:var(--shadow-1)}
.top__panel{background:var(--mast-2);border-top:1px solid rgba(255,255,255,.06)}
.top__panel[hidden]{display:none}
.top__panel-in{display:flex;gap:8px;padding-block:12px}
.top__panel input{flex:1;min-width:0;height:46px;padding:0 18px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.06);color:var(--mast-ink);font-size:16px}
.top__panel input::placeholder{color:var(--mast-mute)}
.top__panel input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 2px var(--amber)}
.top__panel button{flex:none;height:46px;padding:0 20px;border:0;border-radius:999px;background:var(--amber);color:var(--on-amber);font:700 14px/1 var(--brand);cursor:pointer}
.top__panel button:hover{background:var(--amber-2)}
.progress{position:absolute;left:0;right:0;bottom:0;height:3px;pointer-events:none}
.progress i{display:block;height:100%;background:var(--amber);transform:scaleX(0);transform-origin:left}

/* light masthead variant (used with an uploaded logo image) */
.top--light{background:var(--card);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.top--light .top__burger:hover,.top--light .top__search:hover,.top--light .theme-toggle:hover{background:var(--soft)}
.top--light .top__panel{background:var(--soft);border-top-color:var(--line)}
.top--light .top__panel input{border-color:var(--line);background:var(--card);color:var(--ink)}
.top--light .top__find input{color:var(--ink)}
.top--light .top__panel input::placeholder,.top--light .top__find input::placeholder{color:var(--mute)}
.top--light .logo--top{color:var(--ink)}.top--light .logo--top .logo__b{color:var(--accent)}

/* logo */
.logo{display:inline-flex;align-items:center;gap:8px;line-height:1}
.logo__mark{flex:none;width:32px;height:32px}
.logo__word{font:800 21px/1 var(--brand);letter-spacing:-.015em;white-space:nowrap}
.logo__b{color:var(--accent)}
.logo--top .logo__b,.logo--foot .logo__b{color:var(--amber)}
.logo__img{height:36px;width:auto;max-width:200px;filter:none}
.logo--foot{color:#fff}
.logo--foot .logo__mark{width:42px;height:42px}.logo--foot .logo__word{font-size:25px}
.logo--menu{color:var(--ink)}

/* section row */
.catnav{position:relative;background:var(--mast-2);border-top:1px solid rgba(255,255,255,.06)}
.catnav__in{display:flex;gap:2px;max-width:var(--maxw);margin-inline:auto;padding-inline:max(6px,calc(var(--gutter) - 10px));overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.catnav__in::-webkit-scrollbar{display:none}
.catnav a{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:46px;padding:0 12px;border-bottom:3px solid transparent;border-top:3px solid transparent;font:600 14px/1 var(--brand);color:var(--mast-mute);text-decoration:none;white-space:nowrap}
.catnav .ico{width:17px;height:17px;opacity:.85}
.catnav a.catnav__first{position:relative;margin-right:8px;color:var(--mast-ink)}
.catnav__first .ico{color:var(--amber);opacity:1}
.catnav__first::after{content:"";position:absolute;right:-5px;top:14px;bottom:14px;width:1px;background:rgba(255,255,255,.18)}
.catnav--light a.catnav__first{color:var(--ink)}.catnav--light .catnav__first::after{background:var(--line)}
.catnav a:hover{color:var(--mast-ink)}
.catnav a[aria-current]{color:var(--mast-ink);border-bottom-color:var(--amber)}
.catnav__arr{position:absolute;top:0;bottom:0;z-index:2;display:flex;align-items:center;justify-content:center;width:44px;border:0;color:var(--mast-ink);cursor:pointer}
.catnav__arr[hidden]{display:none}
.catnav__arr--prev{left:0;background:linear-gradient(90deg,var(--mast-2) 55%,transparent)}
.catnav__arr--next{right:0;background:linear-gradient(270deg,var(--mast-2) 55%,transparent)}
.catnav__arr:hover{color:var(--amber)}
.catnav--light .catnav__arr{color:var(--ink)}.catnav--light .catnav__arr--prev{background:linear-gradient(90deg,var(--card) 55%,transparent)}.catnav--light .catnav__arr--next{background:linear-gradient(270deg,var(--card) 55%,transparent)}
@media (hover:none){.catnav__arr{display:none!important}}
.catnav--light{background:var(--card);border-top-color:var(--line);box-shadow:0 1px 0 var(--line)}
.catnav--light a{color:var(--mute)}.catnav--light a:hover,.catnav--light a[aria-current]{color:var(--ink)}

/* ---------- 4. Menu panel (drops down over the page, quick fade) ---------- */
.drawer{position:fixed;inset:0;z-index:200;visibility:hidden;transition:visibility 0s linear .18s}
.drawer__scrim{position:absolute;inset:0;background:rgba(14,12,10,.55);opacity:0;transition:opacity .18s ease}
.drawer__panel{position:absolute;left:0;top:0;width:100%;max-height:100%;overflow-y:auto;overscroll-behavior:contain;background:var(--card);color:var(--text);padding:0 0 28px;opacity:0;transform:translateY(-14px);transition:opacity .18s ease,transform .18s ease;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.drawer:target,.drawer.is-open{visibility:visible;transition:none}
.drawer:target .drawer__scrim,.drawer.is-open .drawer__scrim{opacity:1}
.drawer:target .drawer__panel,.drawer.is-open .drawer__panel{opacity:1;transform:none}
.drawer__head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;height:var(--head);padding:0 10px 0 16px;background:var(--mast);color:var(--mast-ink)}
.drawer__logo{text-decoration:none;min-width:0;color:inherit}
.logo--menu{color:var(--mast-ink)}.logo--menu .logo__b{color:var(--amber)}
.drawer__close{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:inherit;text-decoration:none}
.drawer__close:hover{background:rgba(255,255,255,.1)}
.drawer__search{display:flex;margin:16px 16px 4px;border:1px solid var(--line);border-radius:999px;background:var(--soft)}
.drawer__search input{flex:1;min-width:0;height:46px;padding:0 18px;border:0;background:none;font-size:16px}
.drawer__search input:focus{outline:none}
.drawer__search:focus-within{border-color:var(--amber);box-shadow:0 0 0 2px var(--amber)}
.drawer__search button{width:48px;border:0;background:none;color:var(--ink);cursor:pointer}
.drawer__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;padding:0 16px}
.drawer__sec{padding:16px 0 6px;border-bottom:1px solid var(--line);min-width:0}
.drawer__sec--wide{grid-column:1/-1}
.drawer__sec:nth-last-child(-n+2){border-bottom:0}
.theme-toggle--label{white-space:nowrap}
.drawer h2{display:flex;align-items:center;gap:8px;margin:0 0 6px;font:700 11px/1.2 var(--brand);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.drawer h2 .ico{width:15px;height:15px}
.drawer__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.drawer li a{display:flex;align-items:center;gap:10px;padding:9px 0;font:600 15px/1.25 var(--sans);text-decoration:none;color:var(--ink)}
.drawer li a .ico{flex:none;color:var(--accent)}
.drawer li a:hover,.drawer li a[aria-current]{color:var(--accent)}
.drawer .follow{margin:6px 0 10px;text-align:left}.drawer .follow__row{justify-content:flex-start}
.drawer .follow__a{width:40px;height:40px}
.theme-toggle--label{width:auto;height:auto;min-height:42px;gap:10px;padding:0 16px;margin:4px 0 12px;border:1px solid var(--line);border-radius:999px;font:600 14px/1 var(--brand);color:var(--ink)}
.theme-toggle--label:hover{border-color:var(--ink)}
html.menu-open{overflow:hidden}

/* ---------- 5. Cards ---------- */
.c{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow-1);overflow:hidden;transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.c:hover{box-shadow:var(--shadow-2)}
.c__pic{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--img-bg)}
.c__pic img{width:100%;height:100%;object-fit:cover;background:var(--img-bg);transition:transform .45s var(--ease)}
.c:hover .c__pic img{transform:scale(1.035)}
.c__body{flex:1;display:flex;flex-direction:column;padding:16px 18px 16px}
.c__title{font:700 clamp(17px,.4vw + 15.5px,20px)/1.3 var(--serif);letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.c__title a{text-decoration:none}
.c__title a::after{content:"";position:absolute;inset:0;z-index:1}
.c:hover .c__title a{color:var(--accent)}
.c__title a:focus-visible{outline:none}
.c:has(.c__title a:focus-visible){outline:3px solid var(--amber);outline-offset:2px}
.c__sum{margin-top:8px;font:400 15px/1.55 var(--sans);color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.c__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px}
.c__meta{display:flex;flex-wrap:wrap;align-items:center;min-width:0;font:500 13px/1.3 var(--sans);color:var(--mute)}
.c__by{font-weight:600;color:var(--text)}
.c__by+time::before{content:"·";margin:0 7px;color:var(--line-2)}
.c__share{position:relative;z-index:2;flex:none;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--card);color:var(--ink);font:600 13px/1 var(--brand);cursor:pointer}
.c__share:hover{border-color:var(--ink)}
.c__share.is-copied{border-color:#2f7d4a;color:#2f7d4a}
/* lead */
.c--lead .c__pic{aspect-ratio:16/9}
.c--lead .c__body{padding:20px clamp(18px,2.4vw,28px) 20px}
.c--lead .c__title{font-size:clamp(26px,1.6vw + 18px,40px);line-height:1.13;letter-spacing:-.015em}
.c--lead .c__sum{margin-top:12px;font-size:16.5px;-webkit-line-clamp:3;color:var(--text)}
/* feed post */
.c--post .c__pic{aspect-ratio:16/9}
.c--post .c__body{padding:18px clamp(16px,2.2vw,24px) 14px}
.c--post .c__title{font-size:clamp(22px,.8vw + 18px,28px);line-height:1.18;letter-spacing:-.01em}
.c--post .c__sum{margin-top:10px;font-size:15.5px;color:var(--text);opacity:.86}
.c--post .c__foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
/* compact feed post (4th story on, tablet and up): picture beside the text */
@media (min-width:700px){
  .feed>.c--post:nth-of-type(n+4){display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr)}
  .feed>.c--post:nth-of-type(n+4) .c__pic{aspect-ratio:auto;min-height:100%}
  .feed>.c--post:nth-of-type(n+4) .c__title{font-size:clamp(20px,.5vw + 17px,23px)}
  .feed>.c--post:nth-of-type(n+4) .c__body{padding:18px 20px 14px}
}
/* wire: picture beside headline */
.c--wire{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:14px;padding:10px}
.c--wire .c__pic{aspect-ratio:4/3;border-radius:var(--r-sm)}
.c--wire .c__body{padding:0}
.c--wire .kicker{margin-bottom:5px;font-size:10.5px}
.c--wire .c__title{font-size:16px;line-height:1.28;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* brief: text only */
.c--brief .c__body{padding:16px 18px}

/* grids */
.grid{display:grid;gap:20px}
.grid__ad{grid-column:1/-1;min-width:0}.grid__ad:has(>.is-held:not(.is-live)){display:none}

/* ---------- 6. Front page ---------- */
.front-zone{padding-top:16px}
.front{display:grid;gap:20px}
.front__side{display:grid;gap:12px;align-content:start}
.front__label{font:700 11.5px/1.2 var(--brand);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding:4px 2px 0}
.layout{display:grid;gap:36px;margin-top:28px}
.feed{display:grid;gap:22px;align-content:start}
.feed>.hd{margin-bottom:-2px}
.feed .ad{margin:4px auto}
.more{margin:8px 0 0;text-align:center}
.band{margin-top:clamp(44px,6vw,64px);padding:clamp(32px,5vw,48px) 0;background:var(--band)}
.explore{margin-top:clamp(40px,6vw,56px)}
.cats__t{display:flex;align-items:center;gap:12px;margin:0 0 16px;font:800 clamp(22px,1vw + 17px,28px)/1.2 var(--serif);color:var(--ink)}
.cats__t::before{content:"";flex:none;width:5px;height:.9em;border-radius:2px;background:var(--amber)}
.cats__l{display:flex;flex-wrap:wrap;gap:8px}
.cats__l a{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);font:600 14px/1 var(--brand);color:var(--ink);text-decoration:none}
.cats__l a:hover{border-color:var(--accent);color:var(--accent)}
.cats__n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--soft);font:700 11px/1 var(--brand);color:var(--mute)}
.follow{margin:36px 0 8px;text-align:center}
.follow h2{margin:0 0 14px;font:800 20px/1.2 var(--serif);color:var(--ink)}
.follow__row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0}
.follow__a{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--c);color:#fff;transition:transform .15s}
.follow__a:hover{transform:translateY(-2px)}

/* ---------- 7. Listings, search, author ---------- */
.lh{margin:0;padding:4px 0 26px;background:var(--card);border-bottom:1px solid var(--line)}
.lh__kicker{margin-top:6px;font:700 12px/1.2 var(--brand);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.lh__title{margin-top:8px;font:800 clamp(30px,3vw + 16px,50px)/1.1 var(--serif);letter-spacing:-.02em;color:var(--ink);text-wrap:balance;overflow-wrap:normal}
.lh__intro{margin-top:12px;max-width:62ch;font:400 17px/1.6 var(--sans);color:var(--mute)}
.lh__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:18px}
.lh__bar:empty{display:none}
.lh__count{margin-top:14px;font:600 13px/1.3 var(--brand);letter-spacing:.02em;color:var(--mute)}
.lh__bar .lh__count{margin:0}
.lh__tools{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--soft);border:1px solid var(--line)}
.lh__tools a{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;text-decoration:none;font:600 13.5px var(--brand);color:var(--mute)}
.lh__tools a:hover{color:var(--ink)}
.lh__tools a.is-on{background:var(--ink);color:var(--card)}
.lh--search .searchbox{margin-top:20px}
.authorhead{display:flex;align-items:flex-start;gap:20px;margin-top:6px}
.authorhead__img{flex:none;width:84px;height:84px;border-radius:50%;object-fit:cover}
.authorhead__ini{display:grid;place-items:center;background:var(--amber);color:var(--on-amber);font:800 34px/1 var(--serif)}
.authorhead__text{min-width:0}
.lh--author .lh__kicker{margin-top:4px}
.list-lead{display:grid;gap:20px;margin:24px 0 20px}
.lh+.wrap>.grid,.lh+.wrap>.sr+.grid{margin-top:24px}
.list-lead+.grid,.list-lead+.grid__ad+.grid{margin-top:0}
.searchbox{display:flex;max-width:640px;margin-top:16px}
.searchbox input{flex:1;min-width:0;height:52px;padding:0 20px;border:1px solid var(--line-2);border-right:0;border-radius:999px 0 0 999px;background:var(--card);font-size:16.5px;color:var(--ink)}
.searchbox input:focus{outline:2px solid var(--amber);outline-offset:-2px}
.searchbox button{height:52px;padding:0 24px;border:0;border-radius:0 999px 999px 0;background:var(--ink);color:var(--card);font:700 14.5px var(--brand);cursor:pointer}
.searchbox button:hover{background:var(--accent);color:#fff}
.pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 14px;margin:40px 0 8px;font:600 14.5px var(--brand)}
.pager__pages{display:flex;gap:6px}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 14px;border-radius:999px;text-decoration:none}
.pager__pages a{background:var(--card);box-shadow:var(--shadow-1)}
.pager a:hover{background:var(--ink);color:var(--card)}
.pager [aria-current]{background:var(--ink);color:var(--card)}
.pager__nav{background:var(--card);box-shadow:var(--shadow-1)}.pager__nav.is-off{opacity:.45;box-shadow:none}
.pager__gap{min-width:auto;padding:0 2px}

/* ---------- 8. Article ---------- */
.story__wrap{display:grid;gap:32px;align-items:start}
.story__main{min-width:0;margin:0 calc(-1 * var(--gutter));padding:4px var(--gutter) 28px;background:var(--card)}
.crumbs{margin:16px 0 14px;font:500 13px/1.4 var(--sans);color:var(--mute)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:2px 0}
.crumbs li{display:flex;min-width:0}
.crumbs li+li::before{content:"›";margin-inline:8px;color:var(--line-2)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--accent);text-decoration:underline}
.crumbs li:last-child{min-width:0}
.crumbs li:last-child span{overflow:hidden;text-overflow:ellipsis}
.story__label{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin-bottom:12px;font:700 12px/1.3 var(--brand);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.story__label a{color:var(--accent);text-decoration:none}
.story__label a:hover{text-decoration:underline}
.story__label span::before{content:"·";margin:0 9px;color:var(--line-2)}
.story__title{font:800 clamp(27px,2vw + 18px,42px)/1.18 var(--serif);letter-spacing:-.02em;color:var(--ink);text-wrap:pretty}
.story__dek{margin-top:14px;font:500 clamp(16.5px,.3vw + 15.5px,19px)/1.6 var(--sans);color:var(--mute)}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin:22px 0 26px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:500 14px/1.35 var(--sans);color:var(--mute)}
.byline p{margin:0;min-width:0}
.byline a{color:var(--ink);font-weight:700;text-decoration:none}.byline a:hover{color:var(--accent);text-decoration:underline}
.byline__img,.byline__ini{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--amber);color:var(--on-amber);display:grid;place-items:center;font:800 17px/1 var(--serif)}
.byline__sep{margin-inline:9px;color:var(--line-2)}
.byline__share{display:flex;gap:6px;margin-left:auto}
.byline__share .sh{width:36px;height:36px;background:var(--card);border:1px solid var(--line);box-shadow:none;color:var(--sh)}
.byline__share .sh svg{width:19px;height:19px}
.byline__share .sh:hover{border-color:var(--sh);background:var(--soft);filter:none}
.prose{font:450 18px/1.8 var(--sans);color:var(--text);overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
.prose>*{max-width:100%}
.prose p:where(:not(.ad *)){margin:0 0 1.3em}
.prose h2:where(:not(.ad *)){margin:1.8em 0 .6em;font:800 clamp(22px,.8vw + 18px,28px)/1.3 var(--serif);letter-spacing:-.015em;color:var(--ink)}
.prose h3:where(:not(.ad *)){margin:1.6em 0 .5em;font:700 21px/1.35 var(--serif);color:var(--ink)}
.prose h4:where(:not(.ad *)){margin:1.4em 0 .4em;font:700 17px/1.3 var(--sans);color:var(--ink)}
.prose a:where(:not(.ad *)){color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:where(:not(.ad *)):hover{color:var(--accent-hover)}
.prose strong:where(:not(.ad *)){color:var(--ink);font-weight:700}
.prose ul:where(:not(.ad *)),.prose ol:where(:not(.ad *)){margin:0 0 1.4em;padding-left:1.3em}
.prose ul:where(:not(.ad *)){list-style:disc}.prose ol:where(:not(.ad *)){list-style:decimal}
.prose li:where(:not(.ad *)){margin-bottom:.5em}
.prose li:where(:not(.ad *))::marker{color:var(--accent)}
.prose blockquote:where(:not(.ad *)){margin:1.3em 0 1.9em;padding:.2em 0 .2em 22px;border-left:4px solid #ff9a3c;font-style:italic;font-size:1.03em;line-height:1.8;color:var(--text)}
.prose blockquote:where(:not(.ad *)):nth-of-type(5n+2){border-left-color:#e8471c}
.prose blockquote:where(:not(.ad *)):nth-of-type(5n+3){border-left-color:#ffb870}
.prose blockquote:where(:not(.ad *)):nth-of-type(5n+4){border-left-color:#ff6a1a}
.prose blockquote:where(:not(.ad *)):nth-of-type(5n+5){border-left-color:#c8341a}
.prose blockquote:where(:not(.ad *)) p:last-child{margin-bottom:0}
/* comment stories (Reddit / AITA): "username" or "username OP:" directly above a quote */
.prose p:where(:not(.ad *)):has(+ blockquote):has(> strong:first-child){margin:1.6em 0 .55em;font-size:1.08em;line-height:1.35}
.prose p:where(:not(.ad *)):has(+ blockquote) > strong:first-child{color:#2a7bbf;font-weight:600}
.prose p:where(:not(.ad *)):has(+ blockquote) > strong + strong{color:var(--ink);font-weight:600}
:root[data-theme=dark] .prose p:where(:not(.ad *)):has(+ blockquote) > strong:first-child{color:#6fb3e6}
.prose img:where(:not(.ad *)){max-width:100%;height:auto;border-radius:var(--r-sm)}
.prose figure:where(:not(.ad *)){margin:1.8em 0}
.prose figcaption:where(:not(.ad *)),.hero figcaption{margin-top:8px;font:400 13px/1.5 var(--sans);color:var(--mute)}
.prose hr:where(:not(.ad *)){border:0;border-top:1px solid var(--line);margin:2.2em 0}
.prose table:where(:not(.ad *)){display:block;max-width:100%;overflow-x:auto}
.prose iframe:where(:not(.ad *)),.prose video:where(:not(.ad *)){width:100%}
.prose pre:where(:not(.ad *)){overflow-x:auto}
.prose .credit{font-size:.85em;color:var(--mute)}
.prose .cmt__time{margin-left:10px;font:400 13px/1 var(--sans);color:var(--mute)}
.hero{margin:0 0 28px}
.story__main .hero{margin-inline:calc(-1 * var(--gutter))}
.hero__pic{background:var(--img-bg);overflow:hidden}
.hero figcaption{padding-inline:var(--gutter)}
.hero__pic img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.hero__credit{font-style:italic}
.source-note{margin:30px 0;padding:14px 16px;background:var(--soft);border-left:4px solid var(--amber);border-radius:0 var(--r-sm) var(--r-sm) 0;font:400 14.5px/1.6 var(--sans)}
.source-note p{margin:0 0 6px}.source-note p:last-child{margin:0}
.source-note a{font-weight:600;color:var(--link)}
.demo-note{margin:0 0 20px;padding:10px 12px;border-left:4px solid var(--amber);background:var(--soft);font:400 13px var(--sans)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 0}
.tags a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:var(--soft);border:1px solid var(--line);text-decoration:none;font:600 13.5px var(--brand);color:var(--ink)}
.tags a:hover{border-color:var(--accent);color:var(--accent)}
.share{margin:32px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.share h2{margin-bottom:14px;font:700 12px/1.2 var(--brand);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.share p{display:flex;flex-wrap:wrap;gap:10px}
.sh{--sh:#555;position:relative;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--sh);color:#fff;cursor:pointer;text-decoration:none;transition:transform .15s,filter .15s}
.sh:hover{filter:brightness(1.1);transform:translateY(-1px)}
.sh--f{--sh:#2a62c4}.sh--p{--sh:#c93131}.sh--t{--sh:#44607c}.sh--l{--sh:#c9531a}.sh--x{--sh:#1b1a18}
:root[data-theme=dark] .sh--x{--sh:#8a8780}
.sh.is-copied::after,.c__share.is-copied::after{content:"Copied";position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:4px 8px;border-radius:4px;background:var(--ink);color:var(--card);font:600 11.5px/1.2 var(--brand);white-space:nowrap;pointer-events:none}
.c__share.is-copied::after{content:none}
.authorbox{display:flex;gap:16px;align-items:flex-start;margin:28px 0 8px;padding:20px;border-radius:var(--r);background:var(--soft)}
.authorbox>div{min-width:0}
.authorbox__img{flex:none;width:60px;height:60px;border-radius:50%;object-fit:cover}
.authorbox__ini{display:grid;place-items:center;background:var(--amber);color:var(--on-amber);font:800 24px/1 var(--serif)}
.authorbox__label{font:700 11px/1.2 var(--brand);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.authorbox__name{margin-top:4px;font:800 19px/1.2 var(--serif)}.authorbox__name a{text-decoration:none;color:var(--ink)}.authorbox__name a:hover{color:var(--accent)}
.authorbox__bio{margin-top:6px;font:400 15px/1.55 var(--sans);color:var(--text)}
.story .band{margin-top:clamp(36px,5vw,56px)}
.band--related .grid{margin-bottom:4px}

/* ---------- 9. Rails and rankings ---------- */
.rail{display:grid;gap:20px}
.rank{padding:18px 18px 8px;border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-1)}
.rank__t{display:flex;align-items:center;gap:10px;margin-bottom:6px;font:800 20px/1.2 var(--serif);color:var(--ink)}
.rank__t::before{content:"";flex:none;width:5px;height:.9em;border-radius:2px;background:var(--amber)}
.rank li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;padding:14px 0;border-top:1px solid var(--line)}
.rank li:first-child{border-top:0}
.rank__n{font:800 26px/1 var(--serif);color:var(--accent)}
.rank__a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;text-decoration:none}
.rank__h{font:600 15px/1.4 var(--serif);color:var(--ink)}
.rank__a:hover .rank__h{color:var(--accent)}
.rank__pic{width:76px;aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;background:var(--img-bg)}
.rank__pic img{width:100%;height:100%;object-fit:cover}

/* ---------- 10. Newsletter ---------- */
.brief{margin-top:clamp(44px,6vw,72px)}
.brief__in{display:grid;gap:18px;padding:clamp(24px,4vw,40px);border-radius:var(--r);border-left:6px solid var(--amber);background:var(--tint);color:var(--tint-ink)}
.brief__in>*{min-width:0}
.brief__eyebrow{font:700 11.5px/1.2 var(--brand);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.brief h2{margin-top:6px;font:800 clamp(24px,1.4vw + 18px,32px)/1.18 var(--serif);color:var(--ink)}
.brief p{margin-top:6px;font:400 15.5px/1.6 var(--sans)}
.brief__row{display:flex;max-width:520px}
.brief__row input{flex:1;min-width:0;height:52px;padding:0 18px;border:1px solid var(--line-2);border-right:0;border-radius:999px 0 0 999px;background:var(--card);font-size:16px;color:var(--ink)}
.brief__row input:focus{outline:2px solid var(--amber);outline-offset:-2px}
.brief__row button{height:52px;padding:0 22px;border:0;border-radius:0 999px 999px 0;background:var(--ink);color:var(--card);font:700 14.5px var(--brand);cursor:pointer}
.brief__row button:hover{background:var(--accent);color:#fff}
.brief__row button:disabled{opacity:.6}
.brief__msg{min-height:1.4em;font-size:14px}
.newsletter__msg.is-ok{color:var(--ok-ink)}.newsletter__msg.is-bad{color:var(--bad-ink)}

/* ---------- 11. Static pages, forms, 404 ---------- */
.page{margin-top:clamp(0px,3vw,28px);padding-top:clamp(24px,4vw,48px);padding-bottom:clamp(32px,5vw,56px);max-width:860px;background:var(--card)}
.page__head h1{font:800 clamp(30px,3vw + 16px,48px)/1.12 var(--serif);letter-spacing:-.02em;color:var(--ink);overflow-wrap:normal;text-wrap:balance}
.page__lede{margin:12px 0 0;font:400 18.5px/1.55 var(--sans);color:var(--mute)}
.page__body{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.page__body .facts{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;margin:0 0 1.2em;font:400 16px/1.5 var(--sans)}
.page__body .facts dt{font-weight:700;color:var(--ink)}.page__body .facts dd{margin:0}
.page__body .legal-note{padding:12px 14px;border-left:4px solid var(--amber);background:var(--soft);font:400 15px/1.55 var(--sans)}
.page__body code{padding:2px 5px;border-radius:4px;background:var(--soft);font:500 .88em ui-monospace,Menlo,Consolas,monospace}
.page__body table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font:400 14.5px/1.5 var(--sans)}
.page__body th,.page__body td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.page__body th{background:var(--soft);font-weight:700;color:var(--ink)}
.page__more{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.page__more a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;background:var(--soft);font:600 13.5px/1.2 var(--brand);color:var(--ink);text-decoration:none}
.page__more a:hover{background:var(--ink);color:var(--card)}
.cards3{display:grid;gap:14px;margin:22px 0}
.cards3>div{padding:16px 18px;border-radius:var(--r);background:var(--soft);border:1px solid var(--line)}
.page__body .cards3 :is(h2,h3){margin:0 0 6px;font:800 17px/1.2 var(--serif);color:var(--ink)}
.cards3 p{margin:0;font:400 15px/1.55 var(--sans)}
.cform{margin:34px 0 8px;padding:clamp(18px,3vw,28px);border-radius:var(--r);background:var(--soft);border:1px solid var(--line)}
.cform h2{margin:0 0 16px;font:800 24px/1.2 var(--serif);color:var(--ink)}
.cform label{display:block;margin-bottom:14px;font:600 14px/1.3 var(--sans);color:var(--ink)}
.cform label span{font-weight:400;color:var(--mute)}
.cform input,.cform select,.cform textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--card);color:var(--ink);font:400 16px/1.4 var(--sans)}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:2px solid var(--amber);outline-offset:0;border-color:var(--amber)}
.cform textarea{resize:vertical;min-height:150px}
.cform__row{display:grid;gap:0 16px}
.page__body .cform__fine,.cform__fine{margin:0 0 16px;font:400 13px/1.5 var(--sans);color:var(--mute)}
.cform__msg{margin:0 0 16px;padding:12px 14px;border-radius:var(--r-sm);font:600 15px/1.45 var(--sans)}
.cform__msg--ok{background:var(--ok-bg);color:var(--ok-ink)}.cform__msg--bad{background:var(--bad-bg);color:var(--bad-ink)}
/* About page */
.page--about{max-width:860px}
.ab-hero{margin:0 0 36px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.ab-hero h1{position:relative;margin:0 0 18px;padding-top:22px;font:800 clamp(36px,6vw,58px)/1.05 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.ab-hero h1::before{content:"";position:absolute;top:0;left:0;width:48px;height:6px;border-radius:3px;background:var(--amber)}
.ab-hero p{margin:0;font:400 clamp(17px,1vw + 14px,20px)/1.7 var(--sans);color:var(--text)}
.ab-body{margin-top:0;padding-top:0;border-top:0;font:400 17px/1.85 var(--sans)}
.ab-body p{margin:0 0 1.4em}
.ab-body h2{margin:2em 0 .8em;font:800 clamp(24px,3vw + 12px,32px)/1.15 var(--serif);color:var(--ink)}
.ab-quote{margin:2em 0;padding:clamp(20px,4vw,32px);border-radius:var(--r);border-left:6px solid var(--amber);background:var(--tint);color:var(--tint-ink);font:600 clamp(20px,2vw + 12px,27px)/1.45 var(--serif);quotes:none}
.prose .ab-stats{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 1.6em;padding:0;list-style:none}
.prose .ab-stats li{flex:1 1 150px;margin:0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);font:500 14.5px/1.4 var(--sans);color:var(--mute)}
.ab-stats strong{display:block;margin-bottom:2px;font:800 26px/1.15 var(--serif);color:var(--ink)}
.prose .ab-cats{padding-left:0;list-style:none}
.prose .ab-cats li{margin:0;padding:10px 0;border-bottom:1px solid var(--line)}
.ab-cats a{font-weight:700}
.ab-touch{margin:44px 0 8px;padding:clamp(26px,5vw,40px) 24px;border-radius:var(--r);text-align:center;color:var(--mast-ink);background:var(--mast)}
.ab-touch h2{margin:0 0 12px;font:800 clamp(24px,3vw + 12px,32px)/1.2 var(--serif);color:#fff}
.ab-touch p{margin:0 auto 24px;max-width:34em;font:400 16.5px/1.7 var(--sans);color:var(--mast-mute)}
.ab-touch__btn{display:inline-block;max-width:100%;padding:15px 28px;border-radius:999px;background:var(--amber);color:var(--on-amber);font:700 16px/1.2 var(--brand);text-decoration:none;overflow-wrap:anywhere}
.ab-touch__btn:hover{background:var(--amber-2)}
/* 404 */
.notfound{display:grid;gap:12px 40px;align-items:center;margin-top:28px;padding:clamp(24px,5vw,56px);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-1)}
.notfound>*{min-width:0}
.notfound .notfound__code{margin:0;font:800 clamp(96px,22vw,220px)/.85 var(--serif);letter-spacing:-.04em;color:var(--amber)}
.notfound h1{font:800 clamp(28px,2.4vw + 16px,44px)/1.1 var(--serif);margin-bottom:12px;color:var(--ink)}
.notfound p{font:400 17px/1.6 var(--sans);margin-bottom:18px;max-width:46ch}
.notfound .searchbox{margin:0 0 18px}

/* ---------- 12. Reader poll and comments ---------- */
.poll{margin:2em 0;padding:24px 24px 26px;border:1px solid var(--line);border-top:5px solid var(--accent);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-1);font-family:var(--sans);font-style:normal;hyphens:none;-webkit-hyphens:none}
.poll__q{margin:0 0 16px;font:800 20px/1.3 var(--serif);color:var(--ink)}
.poll__opts{display:grid;gap:10px}
.poll__o{position:relative;display:flex;align-items:center;gap:14px;min-height:52px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft);cursor:pointer;overflow:hidden;font:500 15.5px/1.35 var(--sans);color:var(--ink);transition:border-color .15s}
.poll__o:hover{border-color:var(--line-2)}
.poll__o input{position:absolute;opacity:0;pointer-events:none}
.poll__dot{position:relative;z-index:1;flex:none;width:22px;height:22px;border:2px solid var(--mute);border-radius:50%;background:var(--card)}
.poll__o input:checked + .poll__dot{border-color:var(--accent)}
.poll__o input:checked + .poll__dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--accent)}
.poll__o input:focus-visible + .poll__dot{outline:3px solid var(--amber);outline-offset:2px}
.poll__t{position:relative;z-index:1;flex:1;min-width:0}
.poll__pc{position:relative;z-index:1;flex:none;font-weight:700;font-variant-numeric:tabular-nums}
.poll__bar{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(240,160,58,.18);transition:width .6s ease}
.poll.is-done .poll__o{cursor:default}
.poll.is-done .poll__o.is-top .poll__bar{background:rgba(240,160,58,.32)}
.poll.is-done .poll__o.is-mine{border-color:var(--accent)}
.poll__foot{display:flex;align-items:center;gap:14px;margin-top:20px}
.poll__btn{padding:13px 26px;border:0;border-radius:999px;background:var(--ink);color:var(--card);font:700 15px/1 var(--brand);cursor:pointer}
.poll__btn:hover{background:var(--accent);color:#fff}
.poll__btn:disabled{opacity:.5;cursor:default}
.poll.is-done .poll__btn{display:none}
.poll__msg{font-size:14px;color:var(--mute)}
.cbox{margin:2em 0 1.4em;padding:16px 16px 14px;border-radius:var(--r);background:var(--tint);border:1px solid color-mix(in srgb,var(--amber) 35%,transparent);font-family:var(--sans);font-style:normal;hyphens:none;-webkit-hyphens:none}
.cbox__form{display:grid;gap:9px;margin:0}
.cbox__head{display:flex;align-items:center;gap:8px;font:700 14.5px/1.2 var(--sans);color:var(--tint-ink)}
.cbox__ico{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff}
.cbox__ico svg{width:15px;height:15px}
.cbox__title{flex:1}
.cbox__n{font-weight:600;font-size:13px;color:var(--mute)}
.cbox__name,.cbox__body{width:100%;margin:0;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--card);color:var(--ink);font:400 15px/1.45 var(--sans)}
.cbox__name{max-width:240px;padding-block:8px;font-size:14px}
.cbox__row{display:flex;gap:8px;align-items:flex-end}
.cbox__body{flex:1;min-height:42px;resize:none;overflow:hidden}
.cbox__name:focus,.cbox__body:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(240,160,58,.25)}
.cbox__btn{flex:none;height:42px;padding:0 18px;border:0;border-radius:var(--r-sm);background:var(--accent);color:#fff;font:700 14px/1 var(--brand);cursor:pointer}
.cbox__btn:hover{background:var(--accent-hover)}
.cbox__btn:disabled{opacity:.55}
.cbox__msg{font-size:13px;color:#c0392b}
.cbox__msg:empty{display:none}
.cmts__list:empty{display:none}

/* ---------- 13. Cookie consent, ads, notices, failed images ---------- */
.consent{position:fixed;inset:0;z-index:200;background:rgba(10,12,14,.45);display:flex;align-items:flex-end;justify-content:center}
.consent,.consent[hidden]{display:none!important} /* banner is switched off; public.js also removes it from cached pages */
.consent__box{background:#fff;color:#111;width:100%;max-width:560px;max-height:75vh;overflow-y:auto;border-radius:14px 14px 0 0;padding:16px 18px calc(14px + env(safe-area-inset-bottom));display:grid;gap:8px;box-shadow:0 -4px 24px rgba(0,0,0,.2)}
.consent h2{font:800 17px/1.25 var(--sans);color:#111}
.consent p{font:400 12.5px/1.45 var(--sans);color:#333}
.consent a{text-decoration:underline;color:inherit}
.consent__btns{display:grid;gap:7px;margin-top:2px}
.consent .btn{min-height:40px;padding:0 14px;background:#fff;color:#1b1a18;border:1.5px solid #1b1a18;font:700 14px/1 var(--sans);border-radius:6px;cursor:pointer;width:100%}
.consent .btn--solid{background:#1b1a18;border-color:#1b1a18;color:#fff}
.consent__prefs{display:grid;gap:8px;border-top:1px solid #e3e3e3;padding-top:8px}
.consent__cat{display:flex;gap:12px;justify-content:space-between;align-items:center}
.consent__cat strong{display:block;font:700 13px/1.3 var(--sans)}.consent__cat span{font:400 12px/1.4 var(--sans);opacity:.8}
.consent__sw{position:relative;flex:none;width:40px;height:22px}
.consent__sw input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.consent__sw i{display:block;width:100%;height:100%;border-radius:11px;background:#9aa0a6;transition:background .15s}
.consent__sw i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.consent__sw input:checked+i{background:#1b1a18}.consent__sw input:checked+i::after{transform:translateX(18px)}
.consent__sw input:disabled+i{opacity:.55}.consent__sw input:focus-visible+i{outline:3px solid #1b1a18;outline-offset:2px}
.consent__partners{list-style:none;margin:0 0 2px;padding:0 0 0 2px;display:grid;gap:4px;font:400 12px/1.4 var(--sans)}
.consent__partners li{display:grid;gap:1px}.consent__partners span{opacity:.75}

.notice{padding:10px 0;font-size:14px;background:var(--ok-bg);color:var(--ok-ink)}
.notice>div{max-width:var(--maxw);margin:auto;padding-inline:var(--gutter)}
.notice--bad{background:var(--bad-bg);color:var(--bad-ink)}
.notice--preview{background:var(--note-bg);color:var(--note-ink)}

.ad{display:flex;flex-direction:column;align-items:center;max-width:100%;margin:28px auto;min-width:0}
.ad__label{margin-bottom:8px;font:500 11px/1 var(--brand);letter-spacing:.12em;color:var(--mute);text-transform:uppercase}
.ad__body{width:100%;max-width:100%;overflow:hidden;text-align:center}
.ad__body img,.ad__body video{max-width:100%;height:auto;display:block;margin-inline:auto;filter:none}
.ad__body iframe,.ad__body ins{max-width:100%;margin-inline:auto;filter:none}
.ad__body ins.adsbygoogle{display:block}
.prose .ad{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal;font-style:normal;line-height:normal;clear:both}
.ad__body [data-type="_mgwidget"],.ad__body [id^="M"][id*="Composite"],.ad__body [data-widget-id]{width:100%;text-align:left}
.ad--article_middle{margin-block:2em}
.ad--footer{margin-bottom:40px}
.ad--in_feed{margin:8px auto;width:100%}
.ad--mh50 .ad__body{min-height:50px}.ad--mh90 .ad__body{min-height:90px}.ad--mh100 .ad__body{min-height:100px}
.ad--mh250 .ad__body{min-height:250px}.ad--mh280 .ad__body{min-height:280px}.ad--mh600 .ad__body{min-height:600px}
.ad.is-held:not(.is-live){display:none}
@media (max-width:899.98px){.ad--desktop{display:none}}
@media (min-width:900px){.ad--mobile{display:none}}

img.img-failed{color:transparent;font-size:0;background:var(--img-bg);object-fit:cover}

/* ---------- 14. Footer ---------- */
.foot{margin-top:clamp(48px,7vw,80px);background:var(--foot);color:#d9d5cc}
.foot__main{display:grid;gap:36px;max-width:var(--maxw);margin:0 auto;padding:48px var(--gutter) 36px}
.foot__logo{display:inline-block;text-decoration:none}
.foot__tag{margin-top:14px;max-width:34ch;font:400 14.5px/1.6 var(--sans);color:#a9a398}
.foot .follow{margin:22px 0 0;text-align:left}
.foot .follow__row{justify-content:flex-start}
.foot .follow__a{width:40px;height:40px;background:rgba(255,255,255,.08);color:#f3f0ea}
.foot .follow__a:hover{background:var(--c)}
.foot__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
.foot__col h2{margin-bottom:12px;font:700 11.5px/1.2 var(--brand);letter-spacing:.12em;text-transform:uppercase;color:#8f8a80}
.foot__col--sections{grid-column:1/-1}
.foot__col--sections ul{columns:2;column-gap:24px}
.foot__col li{break-inside:avoid}
.foot__col a,.foot__col button{display:inline-block;padding:6px 0;border:0;background:none;color:#ece8e0;font:500 14.5px/1.3 var(--sans);text-decoration:none;cursor:pointer;text-align:left}
.foot__col a:hover,.foot__col button:hover{color:var(--amber);text-decoration:underline;text-underline-offset:3px}
.foot__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;max-width:var(--maxw);margin:0 auto;padding:18px var(--gutter) 24px;border-top:1px solid rgba(255,255,255,.08);font:400 13px/1.4 var(--sans);color:#a29d93}
.foot__bar p{margin:0}
.foot__up{color:#d9d5cc;text-decoration:none;font-weight:600}
.foot__up:hover{color:var(--amber)}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width:600px){
  :root{--gutter:24px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .front__side{grid-template-columns:repeat(2,minmax(0,1fr))}
  .front__label{grid-column:1/-1}
  .brief__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:32px}
  .notfound{grid-template-columns:auto minmax(0,1fr)}
  .cards3{grid-template-columns:repeat(3,1fr)}
  .cform__row{grid-template-columns:1fr 1fr}
  .logo__word{font-size:23px}
  .logo__mark{width:36px;height:36px}
}
@media (min-width:700px){
  .foot__cols{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr)}
  .foot__col--sections{grid-column:auto}
  .story__main{margin:20px 0 0;padding:8px clamp(24px,4vw,48px) 36px;border-radius:var(--r);box-shadow:var(--shadow-1)}
  .story__main .hero{margin-inline:0}
  .hero__pic{border-radius:var(--r-sm)}
  .hero figcaption{padding-inline:0}
  .page{border-radius:var(--r);box-shadow:var(--shadow-1);padding-inline:clamp(24px,5vw,56px)}
  .list-lead--solo .c--lead{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .list-lead--solo .c--lead .c__pic{aspect-ratio:auto;min-height:100%}
  .list-lead--solo .c--lead .c__body{justify-content:center;padding:28px 32px}
}
@media (min-width:900px){
  :root{--gutter:32px;--head:64px}
  .logo__word{font-size:26px}
  .logo__mark{width:40px;height:40px}
  .front-zone{padding-top:20px}
  .front{grid-template-columns:minmax(0,1.75fr) minmax(300px,1fr);gap:24px;align-items:start}
  .front--solo{grid-template-columns:minmax(0,1fr)}
  .front__side{grid-template-columns:1fr;gap:12px}
  .prose{font-size:18px;line-height:1.8}
  .foot__main{grid-template-columns:minmax(220px,1fr) minmax(0,2.4fr);gap:48px;padding-top:56px}
  .drawer__panel{left:max(0px,calc((100% - var(--maxw)) / 2 + var(--gutter) - 16px));top:calc(var(--head) + 8px);width:760px;max-height:calc(100% - var(--head) - 24px);border-radius:var(--r);padding-bottom:20px}
  .drawer__head{border-radius:var(--r) var(--r) 0 0}
  .drawer__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .drawer__sec{border-bottom:0}
  .drawer__sec--wide{border-bottom:1px solid var(--line)}
  .drawer__sec--wide .drawer__cols{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:379.98px){
  .logo--top .logo__word{font-size:19px}
  .top__cta{margin-left:2px}
}
@media (min-width:1000px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .top__find{display:flex;align-items:center;margin-left:auto;width:min(340px,30vw);height:40px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.07)}
  .top__find:focus-within{border-color:var(--amber);box-shadow:0 0 0 2px var(--amber)}
  .top__find input{flex:1;min-width:0;height:100%;padding:0 4px 0 18px;border:0;background:none;color:inherit;font-size:14.5px}
  .top__find input::placeholder{color:var(--mast-mute)}
  .top__find input:focus{outline:none}
  .top__find button{display:grid;place-items:center;width:42px;height:100%;border:0;background:none;color:inherit;cursor:pointer}
  .top--light .top__find{border-color:var(--line);background:var(--soft)}
  .top__tools{margin-left:8px}
  .top__search{display:none}
  .top__panel{display:none}
  .catnav a{padding:0 13px;font-size:14px}
  .list-lead{grid-template-columns:minmax(0,2fr) minmax(300px,1fr);align-items:start;gap:24px}
  .list-lead--solo{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:1100px){
  .front{grid-template-columns:minmax(0,1fr) var(--rail);gap:32px}
  .layout{grid-template-columns:minmax(0,1fr) var(--rail);gap:32px}
  .layout__rail{height:100%}
  .rail{position:sticky;top:calc(var(--head) + 20px)}
  .story__wrap{grid-template-columns:minmax(0,780px) 300px;justify-content:center;gap:40px}
  .story__wrap--solo{grid-template-columns:minmax(0,820px)}
  .story__rail{height:100%;padding-top:20px}
}
@media (max-width:599.98px){
  .promo__t span{display:none}
  .promo__in{justify-content:flex-start}
  .top__cta{padding:0 10px;font-size:12.5px;min-height:32px}
  .top .theme-toggle{display:none}
  .top__tools{gap:0}
  .front-zone>.wrap{padding-inline:0}
  .front__lead .c--lead{border-radius:0}
  .front__side{padding-inline:var(--gutter)}
  .feed{margin-inline:calc(-1 * var(--gutter));gap:12px}
  .feed>.hd,.feed>.more,.feed>.muted{padding-inline:var(--gutter)}
  .feed .c--post{border-radius:0}
  .c--post .c__share span{display:none}
  .c--post .c__share{padding:0 11px}
  .byline__share{margin-left:0;width:100%}
  .prose{font-size:17px;line-height:1.8}
  .prose blockquote:where(:not(.ad *)){margin:1em 0 1.6em;padding-left:16px}
  .poll{padding:20px 16px 22px}
  .poll__o{font-size:15px;padding:11px 14px}
  .cbox{padding:14px 12px 12px}
  .page{margin-top:0}
  .page__body table,.page__body tbody,.page__body tr,.page__body td{display:block}
  .page__body thead{display:none}
  .page__body tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .page__body td{border:0;padding:3px 0}
  .brief>.wrap{padding-inline:0}
  .brief__in{border-radius:0}
  .notfound{margin-inline:calc(-1 * var(--gutter));border-radius:0}
  .empty-state{margin-inline:calc(-1 * var(--gutter));border-radius:0}
}

/* ---------- 15. Speed, motion, print ---------- */
/* below-the-fold blocks are only laid out when they come near the screen */
.foot,.band,.explore,.brief{content-visibility:auto;contain-intrinsic-size:auto 640px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .c:hover .c__pic img{transform:none}
}
@media print{
  .top,.catnav,.drawer,.foot,.consent,.ad,.brief,.share,.byline__share,.story__rail,.band,.promo,.segs{display:none!important}
  body{background:#fff}
  .story__main{box-shadow:none;padding:0;margin:0}
  .prose{font-size:12pt}
}