/* ============================================================
   iserah.com — BESPOKE STYLESHEET ("dossier")
   Written from scratch 2026-08-12. Operator: "css is shit - total
   overhaul css - use a different style - scrap the entire current css".

   This REPLACES casino-css-chassis. It is not a re-skin: the previous
   two attempts (green+gold-cream, then cobalt-newsroom) were the SAME
   card-and-gradient chassis with different tokens, which is exactly
   why a token roll could not fix the look. css-skin-roulette's own
   scope note allows this — "NOT for restyling a site that has a
   deliberate bespoke theme; those keep their own CSS."

   CONSEQUENCES, deliberate:
   · verify_chassis.py no longer applies. scripts/verify_css.py gates
     the invariants that actually matter instead.
   · cohort C6's template ref changes to this file. Safe: iserah is
     C6's template-proving build and no other site inherits yet.
   · The `ch-` class hooks are UNCHANGED, so ~18,500 words of built
     HTML needed zero edits.

   THE LOOK — deliberately not a card deck:
     ruled rows, not floating cards       hairlines, not shadows
     flat fills, not gradients            sharp corners (2px max)
     outlined rank numerals               ONE accent: oxblood
     warm paper, near-black ink           tabular figures for data

   INVARIANTS THAT SURVIVE THE REWRITE (each an operator rule):
   · page background is LIGHT, always
   · ONE logo-chip colour for every row, and it is LIGHT — pewter
     measured 10/10 operator logos below 3:1 on this roster
   · the bonus is a HIGHLIGHT, never a button; the CTA is the only
     filled, tappable-looking surface in a row
   · nothing above the toplist; first row's CTA inside the 390x844 fold
   · RTL via logical properties only — no left/right
   · toggle labels come from data-more/data-less, never CSS content
   ============================================================ */

:root{
  --paper:#fbfaf7;
  --paper-2:#f4f1ea;
  --card:#ffffff;
  --ink:#14110e;
  --ink-2:#3a332c;
  --ink-3:#6b6156;
  --rule:#ddd6c9;
  --rule-2:#c8bfae;
  --rule-ink:#14110e;
  --accent:#8c1d18;
  --accent-2:#6d1512;
  --accent-wash:#f7eceb;
  --data-bg:#f6eedb;
  --data-bd:#d9c79a;
  --data-ink:#4a3a12;
  --chip:#ffffff;
  --chip-bd:#e3ddd0;
  --display:'Tajawal','IBM Plex Sans Arabic',ui-sans-serif,system-ui,sans-serif;
  --body:'IBM Plex Sans Arabic',Inter,ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --wrap:1080px;
  /* ONE text measure for the whole site, centred. Derived, not guessed: --inner is
     the usable width inside .ch-wrap's 22px gutters, so the table break-out below
     is exact at every viewport instead of a hardcoded -138px. */
  --measure:760px;
  --inner:calc(min(var(--wrap), 100vw) - 44px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.ch{margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--body);font-size:1rem;line-height:1.85;-webkit-font-smoothing:antialiased}
.ch-wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.ch a{color:var(--accent);text-underline-offset:3px}
.ch a:hover{color:var(--accent-2)}
.ch h1,.ch h2,.ch h3,.ch h4{font-family:var(--display);color:var(--ink);
  font-weight:700;line-height:1.25}
.ch p{margin:0 0 1.05em}
.ch strong{color:var(--ink);font-weight:700}
.ch em{font-style:normal;color:var(--ink-3)}
.ch-muted{color:var(--ink-3)}
::selection{background:var(--accent);color:#fff}

/* MASTHEAD ------------------------------------------------- */
.ch-nav{position:sticky;top:0;z-index:1000;background:var(--paper);
  border-bottom:1px solid var(--rule-ink)}
.ch-nav .ch-wrap{display:flex;align-items:center;justify-content:space-between;
  min-height:62px;gap:14px}
.ch-brand{display:inline-flex;align-items:center;text-decoration:none}
.ch-brand img{height:34px;width:auto;display:block}
.ch-nav-links{display:flex;align-items:center;gap:15px;list-style:none;margin:0;
  padding:0;flex-wrap:nowrap;white-space:nowrap}
.ch-nav-links>li{display:flex;align-items:center}
.ch-nav-links a,.ch-dd-toggle{color:var(--ink);text-decoration:none;font-weight:600;
  font-size:.82rem;font-family:var(--body)}
.ch-nav-links>li>a:hover,.ch-dd-toggle:hover{color:var(--accent)}
.ch-nav-cta{border:1px solid var(--rule-ink);padding:9px 14px;color:var(--ink) !important}
.ch-nav-cta:hover{background:var(--ink);color:var(--paper) !important}
.ch-dd{position:relative;display:flex;align-items:center}
.ch-dd-toggle{cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;font:inherit;font-size:.82rem;font-weight:600}
.ch-dd-caret{font-size:.6em;transition:transform .15s}
.ch-dd:hover .ch-dd-caret,.ch-dd:focus-within .ch-dd-caret{transform:rotate(180deg)}
.ch-dd-menu{position:absolute;top:100%;inset-inline-start:-14px;min-width:250px;
  background:var(--card);border:1px solid var(--rule-ink);padding:6px;margin:0;
  list-style:none;display:none;z-index:1001}
.ch-dd:hover .ch-dd-menu,.ch-dd:focus-within .ch-dd-menu{display:block}
.ch-dd-menu li{display:block;margin:0}
.ch-dd-menu a{display:block;padding:10px 12px;color:var(--ink) !important;
  font-weight:500;font-size:.94rem}
.ch-dd-menu a:hover{background:var(--paper-2);color:var(--accent) !important}
.ch-burger,.ch-nav-close,.ch-nav-overlay,#ch-nav-toggle{display:none}
.ch-burger{width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px}
.ch-burger span{display:block;width:22px;height:2px;background:var(--ink)}

/* HERO ----------------------------------------------------- */
.ch-hero{background:var(--paper-2);border-bottom:1px solid var(--rule-ink);padding:30px 0 24px}
.ch-hero-copy{max-width:var(--measure);margin-inline:auto;text-align:start}
.ch-crumb{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 12px;font-weight:600}
.ch-crumb a{color:var(--ink-3);text-decoration:none;display:inline-block;padding:2px 0}
.ch-crumb a:hover{color:var(--accent)}
.ch-hero h1{font-size:clamp(1.65rem,4.6vw,2.9rem);margin:0 0 14px;line-height:1.2}
.ch-lede{font-family:var(--body);font-size:1.06rem;color:var(--ink-2);
  margin:0 0 14px;max-width:64ch;line-height:1.8}
.ch-byline{display:flex;align-items:center;gap:11px;padding-top:12px;
  border-top:1px solid var(--rule-2);font-size:.88rem;color:var(--ink-3);
  max-width:var(--measure);margin-inline:auto;flex-wrap:wrap}
.ch-byline img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--rule)}
.ch-byline a{color:var(--ink);font-weight:700;text-decoration:none}
.ch-byline a:hover{color:var(--accent)}
.ch-upd{display:inline;font-size:.8rem;color:var(--ink-3)}
.ch-upd::before{content:"— "}
.ch-poster{display:block;width:100%;height:auto;margin:0;border:1px solid var(--rule)}

/* SECTIONS ------------------------------------------------- */
.ch-section{padding:34px 0}
.ch-section>.ch-wrap>h2,.ch-content h2{font-size:clamp(1.28rem,2.7vw,1.72rem);
  margin:0 0 10px;padding-top:14px;border-top:2px solid var(--rule-ink)}
.ch-content{max-width:var(--measure);margin-inline:auto}
.ch-content h3{font-size:1.06rem;margin:1.5em 0 .45em;color:var(--ink);
  font-family:var(--body);font-weight:700}
.ch-content ul,.ch-content ol{margin:0 0 1.1em}
.ch-content li{margin-bottom:.5em}
.ch-content ul{list-style:none;padding-inline-start:0}
.ch-content ul>li{position:relative;padding-inline-start:1.05em}
.ch-content ul>li::before{content:"";position:absolute;inset-inline-start:0;top:.85em;
  width:5px;height:1px;background:var(--accent)}
.ch-content ol{counter-reset:s;list-style:none;padding-inline-start:0}
.ch-content ol>li{counter-increment:s;position:relative;padding-inline-start:1.9em}
.ch-content ol>li::before{content:counter(s);position:absolute;inset-inline-start:0;
  top:.15em;font-family:var(--display);font-weight:700;color:var(--accent);font-size:.95rem}
.ch-lead,.toplist-lead{color:var(--ink-2);max-width:70ch;margin:0 0 18px}
.ch-prose{max-width:var(--measure);margin-inline:auto}
.ch-note{border-inline-start:3px solid var(--accent);background:var(--accent-wash);
  padding:12px 14px;margin:1em 0;font-size:.94rem}
.ch-facts{border:1px solid var(--data-bd);background:var(--data-bg);color:var(--data-ink);
  padding:11px 14px;margin:1em 0;font-size:.92rem}
.ch-est{color:var(--ink-3);font-size:.9em}

/* TOPLIST — numbered RULED ROWS ---------------------------- */
.ch-toplist{margin:0;border-top:2px solid var(--rule-ink)}
.ch-card{display:grid;grid-template-columns:52px 1fr 210px;align-items:center;
  gap:0 16px;padding:16px 0;border-bottom:1px solid var(--rule)}
.ch-card.is-top{background:var(--paper-2)}
.ch-rank{font-family:var(--display);font-weight:700;font-size:1.6rem;line-height:1;
  color:var(--accent);text-align:center;padding:7px 0;background:var(--card);
  border:1px solid var(--rule-2)}
.ch-card.is-top .ch-rank{background:var(--accent);color:#fff;border-color:var(--accent)}
.ch-chip{width:132px;height:60px;flex:0 0 auto;box-sizing:border-box;display:flex;
  align-items:center;justify-content:center;overflow:hidden;padding:7px 10px;
  background:var(--chip);border:1px solid var(--chip-bd)}
.ch-chip img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.ch-cell-mid{display:flex;align-items:center;gap:14px;min-width:0}
.ch-cell-txt{min-width:0}
.ch-brand-name{font-family:var(--display);font-weight:700;font-size:1.1rem;
  margin:0 0 .1rem;color:var(--ink)}
.ch-feat{margin:0;color:var(--ink-3);font-size:.88rem}
.ch-descriptor{color:var(--ink-3);font-size:.84rem;margin:.2rem 0 0;max-width:40ch}
.ch-features{display:none}
.ch-rating{display:none}
.ch-bar{position:relative;height:4px;background:var(--rule);margin:.5rem 0 0;max-width:170px}
.ch-bar>span{display:block;height:100%;background:var(--accent)}
.ch-bonus{display:block;text-align:center;background:var(--data-bg);color:var(--data-ink);
  border:1px solid var(--data-bd);border-radius:2px;padding:8px 10px;font-weight:700;
  font-size:.95rem;margin:0 0 8px;cursor:default;pointer-events:none;box-shadow:none}
.ch-cta,.ch-cta:visited{display:block;text-align:center;background:var(--accent);
  color:#fff !important;font-weight:700;font-size:.95rem;letter-spacing:.02em;
  padding:12px 16px;border:1px solid var(--accent);border-radius:2px;text-decoration:none;
  min-height:44px;line-height:20px;transition:background .15s,border-color .15s}
.ch-cta:hover{background:var(--accent-2);border-color:var(--accent-2)}
.ch-cta-block{width:100%}
.ch-cta-note{display:block;text-align:center;font-size:.72rem;color:var(--ink-3);margin-top:6px}
.ch-cta-secondary{display:block;text-align:center;margin-top:6px;font-size:.82rem;
  font-weight:600;color:var(--ink-3);text-decoration:none}

.ch-pick{border:2px solid var(--rule-ink);padding:20px;margin:1.4rem 0 0;
  display:grid;grid-template-columns:1fr 230px;gap:20px;align-items:center;background:var(--paper-2)}
.ch-pick-tag{display:inline-block;background:var(--ink);color:var(--paper);
  font-family:var(--body);font-weight:700;font-size:.68rem;padding:.24rem .6rem;
  letter-spacing:.09em;text-transform:uppercase}
.ch-pick-brand{font-family:var(--display);font-weight:700;font-size:1.35rem;
  margin:.55rem 0 .15rem;color:var(--ink);display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.ch-pick-rate{font-size:.9rem;color:var(--ink-3);border:1px solid var(--rule-2);padding:.1rem .45rem}
.ch-pick-bonus{display:block;font-family:var(--display);font-weight:700;font-size:1.3rem;
  color:var(--accent);margin:.2rem 0 .45rem}
.ch-pick-text{margin:0;color:var(--ink-2);font-size:.94rem;max-width:52ch}

/* TABLES --------------------------------------------------- */
.ch-cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.2rem 0;
  margin-inline:calc((var(--measure) - var(--inner)) / 2)}
.ch-cmp{width:100%;min-width:560px;border-collapse:collapse;font-size:.94rem;background:transparent}
.ch-cmp thead th{text-align:start;font-family:var(--body);font-weight:700;font-size:.76rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink);
  padding:0 12px 8px;border-bottom:2px solid var(--rule-ink)}
.ch-cmp td{padding:11px 12px;border-bottom:1px solid var(--rule);color:var(--ink-2);vertical-align:top}
.ch-cmp tbody tr:nth-child(even){background:var(--paper-2)}

/* FAQ ------------------------------------------------------ */
/* The FAQ is prose, so it takes the text measure — not the wrap. Left wrap-wide,
   the summary's "+" marker sits at inset-inline-end of a 1036px row, ~900px from
   the question it belongs to, which reads as a broken row rather than a control.
   Its H2 is a direct child of .ch-wrap (only the toplist and the FAQ are), so the
   :has() scope pulls that rule to the same width — every section rule then
   measures the block it heads. */
.ch-faq{max-width:var(--measure);margin-inline:auto}
.ch-section:has(>.ch-wrap>.ch-faq)>.ch-wrap>h2{max-width:var(--measure);margin-inline:auto}
.ch-faq details{border-bottom:1px solid var(--rule)}
.ch-faq details:first-child{border-top:2px solid var(--rule-ink)}
.ch-faq summary{cursor:pointer;font-family:var(--display);font-weight:700;color:var(--ink);
  padding:14px 30px 14px 0;list-style:none;position:relative;font-size:1rem}
.ch-faq summary::-webkit-details-marker{display:none}
.ch-faq summary::after{content:"+";position:absolute;inset-inline-end:0;top:13px;
  color:var(--accent);font-weight:700;font-size:1.1rem}
.ch-faq details[open] summary::after{content:"\2212"}
.ch-faq-body{padding:0 0 14px;color:var(--ink-2)}

/* AUTHORS · GRIDS ------------------------------------------ */
.ch-authorcards{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:2px solid var(--rule-ink);margin:1.2rem 0;
  margin-inline:calc((var(--measure) - var(--inner)) / 2)}
.ch-authorcard{position:relative;display:flex;gap:14px;align-items:center;padding:18px 16px;
  color:inherit;border-bottom:1px solid var(--rule)}
/* Stretched link: the <a> wraps only the author's NAME so the anchor text is the
   destination's keyword (rule 6), while this pseudo-element restores the whole card
   as a single tap target. Keyword anchor and big tap target, not one or the other. */
.ch-authorcard a{text-decoration:none;color:var(--ink)}
.ch-authorcard a::after{content:"";position:absolute;inset:0}
.ch-authorcard a:hover{color:var(--accent)}
.ch-authorcard:nth-child(odd){border-inline-end:1px solid var(--rule)}
.ch-authorcard:hover{background:var(--paper-2)}
.ch-authorcard img{width:62px;height:62px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--rule)}
.ch-author-hero{display:flex;gap:22px;align-items:center;padding:20px 0;margin:0 0 8px;
  border-top:2px solid var(--rule-ink);border-bottom:1px solid var(--rule)}
.ch-author-hero img{width:104px;height:104px;object-fit:cover;border:1px solid var(--rule)}
.ch-tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.ch-tags span{border:1px solid var(--rule-2);color:var(--ink-3);padding:3px 9px;font-size:.8rem}
.ch-stats{display:flex;gap:26px;flex-wrap:wrap;margin:14px 0;
  border-top:1px solid var(--rule);padding-top:14px}
.ch-stats .n{font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--accent);line-height:1.1}
.ch-stats .l{color:var(--ink-3);font-size:.8rem}
.ch-cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1px;background:var(--rule);margin:1.3rem 0;border:1px solid var(--rule)}
.ch-mediacard{display:block;background:var(--card);text-decoration:none;color:inherit}
.ch-mediacard img{display:block;width:100%;height:auto}
.ch-mediacard-b{padding:12px 14px}
.ch-mediacard-b h3{margin:0;font-size:.98rem;font-family:var(--display)}
.initials-avatar{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--paper);
  font-family:var(--body);font-weight:700;font-size:15px}

/* FIGURES · ICON ROWS ------------------------------------- */
/* Both are dossier-idiom: hairline frame, flat, caption in the muted ink below the
   rule. No card, no shadow, no radius beyond the 2px the rest of the page uses. */
.ch-figrow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:1.3rem 0}
.ch-figrow figure{margin:0}
.ch-figrow img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.ch-figrow figcaption{margin-top:8px;padding-top:7px;border-top:1px solid var(--rule-2);
  font-size:.84rem;line-height:1.55;color:var(--ink-3)}
.ch-figrow figcaption strong{display:block;color:var(--ink);font-family:var(--display);
  font-size:.94rem;margin-bottom:.1rem}
.ch-figrow figcaption b{color:var(--accent);font-variant-numeric:tabular-nums}

.ch-iconrow{list-style:none;margin:1.2rem 0;padding:0;
  border-top:2px solid var(--rule-ink)}
.ch-iconrow>li{display:grid;grid-template-columns:38px 1fr;gap:0 14px;align-items:start;
  padding:13px 0;border-bottom:1px solid var(--rule)}
.ch-iconrow img{display:block;width:30px;height:30px;margin-top:2px}
.ch-iconrow strong{display:block;font-family:var(--display);color:var(--ink);
  font-size:.99rem;margin-bottom:.12rem}
.ch-iconrow span{display:block;color:var(--ink-2);font-size:.92rem;line-height:1.7}
.ch-iconrow b{color:var(--accent);font-variant-numeric:tabular-nums}

/* FOOTER --------------------------------------------------- */
.ch-foot{background:var(--ink);color:#cfc7bd;margin-top:38px;padding:34px 0 22px;
  border-top:3px solid var(--accent)}
.ch-foot a{color:#e7e1d8;text-decoration:none}
.ch-foot a:hover{color:#fff;text-decoration:underline}
.ch-foot p{color:#b7aea3;font-size:.9rem}
.ch-foot-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:28px;margin-bottom:24px}
.ch-foot-cols h4{color:#fff;margin:0 0 10px;font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;font-family:var(--body)}
.ch-foot-cols ul{list-style:none;margin:0;padding:0;line-height:2.05;font-size:.92rem}
.ch-foot-cols li a{display:inline-block;padding:2px 0}
.ch-rg{border-top:1px solid #3a332c;padding-top:16px;font-size:.82rem;color:#a99f93;
  display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.ch-rg a{color:#e7e1d8;text-decoration:underline}
.ch-18{display:inline-flex;align-items:center;justify-content:center;min-width:32px;
  height:32px;border:2px solid #a99f93;color:#e7e1d8;border-radius:50%;
  font-weight:700;font-size:.76rem;padding:0 5px;flex:none}

/* COLLAPSIBLE LEDE — labels from attributes ---------------- */
.ch-morechk{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.ch-more{display:none}

/* MOBILE <=768px ------------------------------------------- */
@media (max-width:768px){
  .ch-wrap{padding:0 16px}
  .ch-burger{display:flex}
  .ch-nav-links{position:fixed;top:0;inset-inline-end:0;height:100dvh;
    width:86%;max-width:340px;
    background:var(--paper);flex-direction:column;align-items:stretch;gap:0;
    padding:70px 20px 24px;transition:transform .22s ease;
    z-index:1002;overflow-y:auto;border-inline-start:1px solid var(--rule-ink)}
  /* RTL: the panel is anchored to the left, so it closes by translating LEFT. */
  .ch-nav-links{transform:translateX(-100%)}
  [dir="ltr"] .ch-nav-links{transform:translateX(100%)}
  .ch-nav-links>li{display:block;width:100%}
  .ch-nav-links>li>a{display:block;padding:15px 0;font-size:1.125rem;
    border-bottom:1px solid var(--rule);color:var(--ink)}
  .ch-nav-cta{display:block;text-align:center;margin-top:14px;border:1px solid var(--rule-ink)}
  .ch-dd{display:block;width:100%}
  .ch-dd-toggle{display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:15px 0;text-align:start;border-bottom:1px solid var(--rule);
    color:var(--ink);font-size:1.125rem}
  /* The caret was hidden and the submenu was force-open, which made this button a
     294x64 control that did nothing on tap — measured 2026-08-13. It is a real
     disclosure now, so the caret has to be visible and has to move. */
  .ch-dd-caret{display:inline-block;font-size:.8em;color:var(--accent);
    transition:transform .18s}
  .ch-dd-menu{display:block;position:static;border:0;padding:2px 0 8px;
    margin-inline-start:12px;min-width:0;background:transparent}
  .ch-dd-menu a{padding:11px 0;font-size:1rem;color:var(--ink-3) !important}
  /* Collapsed state is applied by NAV_JS, never by CSS alone: with JS off the submenu
     stays open and every link is still reachable, which is the correct no-JS
     fallback. With JS on, the panel starts short and the control works. */
  .ch-dd[data-collapsed="true"] .ch-dd-menu{display:none}
  .ch-dd[data-collapsed="true"] .ch-dd-caret{transform:rotate(-90deg)}
  .ch-dd:hover .ch-dd-menu,.ch-dd:focus-within .ch-dd-menu{display:block}
  .ch-dd[data-collapsed="true"]:hover .ch-dd-menu{display:none}
  .ch-nav-overlay{display:block;position:fixed;inset:0;background:rgba(20,17,14,.4);
    opacity:0;visibility:hidden;transition:opacity .22s;z-index:1001}
  .ch-nav-close{display:flex;align-items:center;justify-content:center;position:absolute;
    top:12px;inset-inline-end:14px;width:44px;height:44px;font-size:28px;line-height:1;
    color:var(--ink);background:transparent;border:0;cursor:pointer;z-index:1003}
  #ch-nav-toggle:checked ~ .ch-wrap .ch-nav-links{transform:translateX(0)}
  #ch-nav-toggle:checked ~ .ch-wrap .ch-nav-overlay{opacity:1;visibility:visible}

  .ch-hero{padding:16px 0 14px}
  .ch-hero h1{font-size:1.42rem;line-height:1.28;margin-bottom:8px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .ch-lede{font-size:.97rem;line-height:1.7;margin-bottom:8px}
  .ch-lede-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    line-clamp:2;overflow:hidden}
  .ch-morechk:checked ~ .ch-lede-clamp{-webkit-line-clamp:initial;line-clamp:initial;display:block}
  .ch-more{display:inline-block;margin:2px 0 0;cursor:pointer;font-family:var(--body);
    font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
    color:var(--accent);border-bottom:1px solid var(--accent);user-select:none}
  .ch-more::before{content:attr(data-more)}
  .ch-morechk:checked ~ .ch-more::before{content:attr(data-less)}
  /* WCAG 2.2 SC 2.5.8: 24x24 minimum. These were 18-22px — measured, not assumed. */
  .ch-foot-cols li a{padding:9px 0;min-height:24px}
  .ch-foot-cols ul{line-height:1.5}
  .ch-crumb a{padding:7px 0;min-height:24px}
  .ch-rg a{display:inline-block;padding:4px 0}
  .ch-brand img{height:38px}
  .ch-byline a{display:inline-block;padding:5px 0;min-height:24px}
  .ch-byline{padding-top:9px;font-size:.82rem;gap:9px}
  .ch-byline img{width:28px;height:28px}
  .ch-upd{display:block;width:100%}
  .ch-upd::before{content:""}

  .ch-section{padding:22px 0}
  .ch-section>.ch-wrap>h2,.ch-content h2{font-size:1.2rem;padding-top:11px}
  .ch-content,.ch-prose,.ch-lede,.ch-byline,.ch-hero-copy,.ch-faq{max-width:none;margin-inline:0}
  .ch-section:has(>.ch-wrap>.ch-faq)>.ch-wrap>h2{max-width:none;margin-inline:0}

  .ch-card{grid-template-columns:40px 1fr;grid-template-areas:"rank mid" "cta cta";
    gap:0 12px;padding:14px 0}
  .ch-card .ch-rank{grid-area:rank;align-self:start;font-size:1.15rem;padding:5px 0}
  .ch-card .ch-cell-mid{grid-area:mid;align-items:flex-start;gap:11px}
  .ch-card .ch-cell-cta{grid-area:cta;margin-top:10px}
  .ch-chip{width:104px;height:50px;padding:5px 7px}
  .ch-descriptor{display:block;font-size:.8rem;margin-top:.15rem}
  .ch-bar{max-width:none;margin-top:.4rem}
  .ch-bonus{font-size:.92rem;padding:7px 10px}
  .ch-cta{padding:12px 14px;min-height:46px}

  .ch-pick{grid-template-columns:1fr;padding:16px}
  .ch-authorcards{grid-template-columns:1fr;margin-inline:0}
  .ch-authorcard:nth-child(odd){border-inline-end:0}
  .ch-author-hero{flex-direction:column;text-align:start;align-items:flex-start}
  .ch-foot-cols{grid-template-columns:1fr;gap:22px}

  .ch-figrow{grid-template-columns:1fr;gap:0;border-top:2px solid var(--rule-ink)}
  .ch-figrow figure{display:grid;grid-template-columns:118px 1fr;gap:0 14px;
    align-items:center;padding:13px 0;border-bottom:1px solid var(--rule)}
  .ch-figrow figcaption{margin:0;padding:0;border-top:0}
  .ch-iconrow>li{grid-template-columns:32px 1fr;gap:0 12px}
  .ch-iconrow img{width:26px;height:26px}
  .ch-cmp-wrap{overflow:visible;margin:1rem 0;margin-inline:0}
  .ch-cmp{min-width:0;font-size:.9rem}
  .ch-cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ch-cmp tr{display:block;border:1px solid var(--rule);margin:0 0 10px;background:var(--card)}
  .ch-cmp tbody tr:nth-child(even){background:var(--card)}
  .ch-cmp td{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
    border:0;border-bottom:1px solid var(--rule);padding:9px 11px;text-align:end}
  .ch-cmp tr td:last-child{border-bottom:0}
  .ch-cmp td::before{content:attr(data-label);font-weight:700;color:var(--ink);
    text-align:start;flex:0 0 45%}
  .ch-cmp td:empty::before,.ch-cmp td[data-label=""]::before{content:""}
  .ch main table:not(.ch-cmp){display:block;max-width:100%;overflow-x:auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}