/* MYB News v2 design system (production). One stylesheet for every page.
   Rules of the house:
   - The content layer is solid: iOS grouped grey (#F2F2F7) with white cards, black in dark mode.
   - Liquid Glass is only for the floating layer: top bar controls, tab bar, article toolbar, sheets, play badges.
     Never on stories, rows or comments.
   - Red (#ED1C24, the logo) is an accent: the logo, the live dot, one primary action, links.
   - No text-transform, no all-caps, no emoji, no third-party video thumbnails (plates only).
   Cache-busted as /css/myb2.css?v=N; the number lives in functions/chrome.js (CSS_V). */

/* ======================================================================= tokens */
:root{
  color-scheme: light;
  /* content layer (opaque, never glass) */
  --bg:#F2F2F7; --card:#FFFFFF; --read:#FFFFFF; --sunk:#F2F2F7; --sunk-2:#E5E5EA; --inset:#F2F2F7;
  --ink:#1D1D1F; --ink-2:#636366; --ink-3:#8E8E93;
  --hair:rgba(60,60,67,.18); --hair-2:rgba(60,60,67,.1);
  --fill:rgba(120,120,128,.16); --fill-2:rgba(120,120,128,.1);
  /* brand red: logo, live dot, one primary action, links */
  --red:#ED1C24; --red-text:#C8151C; --red-fill:#E3141B; --red-hover:#CF1218; --red-press:#A51117; --red-wash:rgba(237,28,36,.09);
  --up:#0E7A4C; --down:#C4322A; --green-wash:rgba(14,122,76,.09); --switch-on:#248A3D;
  --cat-taxes:#1F6FCF; --cat-grants:#0E7A4C; --cat-offers:#8E44AD; --cat-health:#B4570A;
  /* glass (floating layer only) */
  --glass-rgb:250,250,252; --glass-a:.78; --glass-a-thick:.92;
  --glass-blur:20px; --glass-sat:180%;
  --glass-solid:rgba(250,250,252,.97);
  --glass-rim:rgba(255,255,255,.85); --glass-rim-2:rgba(255,255,255,.3);
  --glass-stroke:rgba(0,0,0,.07);
  --glass-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 30px -10px rgba(0,0,0,.2);
  --glass-ink-2:#545458;
  --dim:rgba(0,0,0,.4);
  --card-shadow:0 0 0 .5px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.04);
  --band:#111113; --band-2:#1C1C1E;
  /* type: Apple's own fonts on Apple devices (never downloaded there), Inter / Newsreader elsewhere */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;
  --serif:ui-serif,"New York","Newsreader",Georgia,serif;
  --heb:-apple-system,BlinkMacSystemFont,"SF Hebrew","Noto Sans Hebrew","Arial Hebrew",system-ui,sans-serif;
  --read-size:20px; --read-lh:1.6;
  /* shape + space */
  --r-xl:28px; --r-lg:20px; --r-md:14px; --r-sm:10px;
  --gutter:16px; --wide:1240px; --measure:680px;
  --bar-h:56px; --tick-h:0px;
  --ease:cubic-bezier(.32,.72,0,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#000000; --card:#1C1C1E; --sheet-group:#2C2C2E; --read:#000000; --sunk:#1C1C1E; --sunk-2:#2C2C2E; --inset:#2C2C2E;
    --ink:#F5F5F7; --ink-2:#98989F; --ink-3:#6C6C70;
    --hair:rgba(84,84,88,.6); --hair-2:rgba(84,84,88,.35);
    --fill:rgba(120,120,128,.32); --fill-2:rgba(120,120,128,.22);
    --red-text:#FF5C61; --red-wash:rgba(255,92,97,.15); --up:#30D158; --down:#FF6165; --green-wash:rgba(48,209,88,.13);
    --cat-taxes:#64A8FF; --cat-grants:#30D158; --cat-offers:#D69CFF; --cat-health:#FFB067;
    --glass-rgb:30,30,32; --glass-a:.78; --glass-a-thick:.92; --glass-solid:rgba(28,28,30,.97);
    --glass-rim:rgba(255,255,255,.22); --glass-rim-2:rgba(255,255,255,.06); --glass-stroke:rgba(255,255,255,.09);
    --glass-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -10px rgba(0,0,0,.7);
    --glass-ink-2:#AEAEB2; --dim:rgba(0,0,0,.6);
    --card-shadow:0 0 0 .5px rgba(255,255,255,.07);
    --band:#1C1C1E; --band-2:#2C2C2E;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#000000; --card:#1C1C1E; --sheet-group:#2C2C2E; --read:#000000; --sunk:#1C1C1E; --sunk-2:#2C2C2E; --inset:#2C2C2E;
  --ink:#F5F5F7; --ink-2:#98989F; --ink-3:#6C6C70;
  --hair:rgba(84,84,88,.6); --hair-2:rgba(84,84,88,.35);
  --fill:rgba(120,120,128,.32); --fill-2:rgba(120,120,128,.22);
  --red-text:#FF5C61; --red-wash:rgba(255,92,97,.15); --up:#30D158; --down:#FF6165; --green-wash:rgba(48,209,88,.13);
  --cat-taxes:#64A8FF; --cat-grants:#30D158; --cat-offers:#D69CFF; --cat-health:#FFB067;
  --glass-rgb:30,30,32; --glass-a:.78; --glass-a-thick:.92; --glass-solid:rgba(28,28,30,.97);
  --glass-rim:rgba(255,255,255,.22); --glass-rim-2:rgba(255,255,255,.06); --glass-stroke:rgba(255,255,255,.09);
  --glass-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -10px rgba(0,0,0,.7);
  --glass-ink-2:#AEAEB2; --dim:rgba(0,0,0,.6);
  --card-shadow:0 0 0 .5px rgba(255,255,255,.07);
  --band:#1C1C1E; --band-2:#2C2C2E;
}
@media (prefers-contrast: more){
  :root{ --ink-2:#3C3C43; --hair:rgba(60,60,67,.55); --red-text:#A51117; --up:#0A5C38; --down:#9B2019; --glass-a:.97; --glass-a-thick:.99; --glass-stroke:var(--ink); }
  :root[data-theme="dark"]{ --ink-2:#D1D1D6; --hair:rgba(235,235,245,.45); --red-text:#FF8A8E; --up:#4AD968; --down:#FF8A8E; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --ink-2:#D1D1D6; --hair:rgba(235,235,245,.45); --red-text:#FF8A8E; --up:#4AD968; --down:#FF8A8E; }
}
/* story text size, from the Display sheet */
:root[data-size="-1"]{ --read-size:18px; }
:root[data-size="1"]{ --read-size:22px; }
:root[data-size="2"]{ --read-size:25px; --read-lh:1.56; }
@media (min-width:768px){ :root{ --gutter:28px; } }
@media (min-width:1100px){ :root{ --gutter:40px; --read-size:21px; --bar-h:60px; --tick-h:38px; } :root[data-size="-1"]{--read-size:19px} :root[data-size="1"]{--read-size:23px} :root[data-size="2"]{--read-size:26px} }
@media (max-width:640px){ :root{ --glass-blur:16px; } }

/* ======================================================================= base */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--bg); scroll-padding-top:calc(var(--bar-h) + var(--tick-h) + 12px); }
body{ margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.45 var(--sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:hidden; }
body.article{ background:var(--read); }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none!important; }
:focus-visible{ outline:2.5px solid var(--red-text); outline-offset:2px; border-radius:8px; }
.vh{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.i{ width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.i.fill{ fill:currentColor; stroke:none; }
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.wrap{ max-width:calc(var(--wide) + var(--gutter)*2); margin:0 auto; padding:0 var(--gutter); }
.skip{ position:absolute; left:12px; top:-60px; z-index:200; background:var(--card); padding:10px 14px; border-radius:12px; font:600 15px/20px var(--sans); }
.skip:focus{ top:12px; }
[dir="rtl"], .rtl{ font-family:var(--heb); }
.fine{ font:400 13px/18px var(--sans); color:var(--ink-2); }

/* ======================================================================= glass recipe (floating layer only) */
.glass{ position:relative; isolation:isolate; background:rgba(var(--glass-rgb),var(--glass-a));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
          backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:0 0 0 .5px var(--glass-stroke),var(--glass-shadow); color:var(--ink); }
.glass::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(140deg,var(--glass-rim) 0%,var(--glass-rim-2) 35%,transparent 55%,var(--glass-rim-2) 82%,var(--glass-rim) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.glass--thick{ background:rgba(var(--glass-rgb),var(--glass-a-thick)); }
.glass--clear{ background:rgba(255,255,255,.18); -webkit-backdrop-filter:blur(8px) saturate(160%); backdrop-filter:blur(8px) saturate(160%);
  color:#fff; box-shadow:0 0 0 .5px rgba(255,255,255,.3),0 6px 18px -6px rgba(0,0,0,.45); }
.glass--clear::before{ --glass-rim:rgba(255,255,255,.65); --glass-rim-2:rgba(255,255,255,.15); }
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ .glass,.glass--thick{ background:var(--glass-solid); } }
@media (prefers-reduced-transparency: reduce){
  .glass,.glass--thick{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--glass-solid); }
  .glass--clear{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(0,0,0,.42); }
  .bar .bar__edge::after{ display:none; }
  .bar .bar__edge{ height:var(--bar-h); background:var(--bg); box-shadow:0 .5px 0 var(--hair); }
  .article .bar .bar__edge{ background:var(--read); }
}
:root[data-glass="solid"] .glass, :root[data-glass="solid"] .glass--thick{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--glass-solid); }
:root[data-glass="solid"] .glass--clear{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(0,0,0,.42); }
:root[data-glass="solid"] .bar__edge::after{ display:none; }
:root[data-glass="solid"] .bar__edge{ height:var(--bar-h); background:var(--bg); box-shadow:0 .5px 0 var(--hair); }
:root[data-glass="solid"] .article .bar__edge{ background:var(--read); }
@media (prefers-contrast: more){ .glass{ box-shadow:0 0 0 1.5px var(--ink); } .glass::before{ display:none; } }
@media (forced-colors: active){ .glass{ border:1px solid CanvasText; } .glass::before{ display:none; } }

.press{ transition:transform 140ms var(--ease), background-color 140ms; }
.press:active{ transform:scale(.97); }

/* ======================================================================= top bar
   phone: iOS 26 style. No bar background at rest; a soft scroll edge appears once stories scroll beneath.
   desktop (>=1100): one full-width glass bar with the 4-tab nav centred and the market ticker pinned under it. */
.bar{ position:sticky; top:0; z-index:60; height:var(--bar-h); }
.bar__edge{ position:absolute; left:0; right:0; top:0; height:calc(var(--bar-h) + 22px); pointer-events:none; opacity:0; transition:opacity 220ms;
  background:linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 86%, transparent) 55%, color-mix(in srgb, var(--bg) 0%, transparent) 100%); }
.article .bar__edge{ background:linear-gradient(to bottom, var(--read) 0%, color-mix(in srgb, var(--read) 86%, transparent) 55%, color-mix(in srgb, var(--read) 0%, transparent) 100%); }
.bar__edge::after{ content:""; position:absolute; inset:0; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  -webkit-mask:linear-gradient(to bottom,#000 45%,transparent); mask:linear-gradient(to bottom,#000 45%,transparent); }
.is-scrolled .bar__edge{ opacity:1; }
.bar__glass{ display:none; }
.bar__in{ position:relative; height:var(--bar-h); display:flex; align-items:center; gap:12px; }
.bar__logo{ display:flex; align-items:center; height:44px; transition:opacity 200ms, transform 300ms var(--ease); }
.bar__logo img{ height:22px; width:auto; }
.bar__title{ position:absolute; left:50%; top:50%; transform:translate(-50%,-30%); max-width:min(56%, calc(100% - 150px)); font:600 17px/22px var(--sans); opacity:0; transition:opacity 200ms, transform 300ms var(--ease);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
.show-title .bar__title{ opacity:1; transform:translate(-50%,-50%); }
.bar--back .bar__title{ max-width:calc(100% - 128px); }
/* like iOS, the back button drops its label once the title moves into the bar */
.pill-back span{ transition:opacity 160ms; }
.show-title .pill-back{ padding:0; width:44px; justify-content:center; }
.show-title .pill-back span{ display:none; }
.show-title .pill-back .i{ margin-left:-2px; }
.has-lt .bar__logo{ opacity:0; transform:translateY(4px); pointer-events:none; }
.has-lt.show-title .bar__logo{ opacity:1; transform:none; pointer-events:auto; }
.bar__right{ margin-left:auto; display:flex; gap:10px; align-items:center; }
.circle{ width:44px; height:44px; border-radius:999px; display:grid; place-items:center; flex:none; }
.circle .i{ width:22px; height:22px; }
.pill-back{ height:44px; border-radius:999px; display:inline-flex; align-items:center; gap:2px; padding:0 16px 0 10px; font:600 17px/1 var(--sans); flex:none; }
.pill-back .i{ width:22px; height:22px; stroke-width:2.1; }
.nav-desk, .join-btn, .tick, .desk-ic{ display:none; }

/* ======================================================================= large title (iOS) */
.lt{ padding:2px 0 12px; }
.lt__logo{ height:40px; width:auto; margin:0 0 6px -2px; }
.lt h1{ margin:0; font:700 34px/41px var(--display); letter-spacing:-.022em; text-wrap:balance; }
.lt__date{ font:500 15px/20px var(--sans); color:var(--ink-2); display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.lt__date .sep{ color:var(--ink-2); }
.lt__sub{ margin:4px 0 0; font:400 17px/23px var(--sans); color:var(--ink-2); max-width:44ch; }
.crumbs{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; font:500 13px/18px var(--sans); color:var(--ink-2); margin:4px 0 6px; }
.crumbs a{ color:var(--red-text); display:inline-flex; align-items:center; min-height:44px; margin:-13px 0; }
.crumbs a:hover{ text-decoration:underline; text-underline-offset:3px; }
.crumbs .sep{ color:var(--ink-3); }

/* ======================================================================= market tiles (phone strip) */
.mk-h{ display:flex; align-items:baseline; justify-content:space-between; margin:6px 0 8px; }
.mk-h span{ font:500 13px/18px var(--sans); color:var(--ink-2); }
.mk-h button, .mk-h a{ font:600 15px/20px var(--sans); color:var(--red-text); min-height:44px; padding:0 2px; margin:-12px 0; display:inline-flex; align-items:center; }
.tape{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 calc(var(--gutter)*-1); padding:0 var(--gutter) 2px; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter);
  -webkit-mask:linear-gradient(to right,#000 calc(100% - 36px),transparent); mask:linear-gradient(to right,#000 calc(100% - 36px),transparent); min-height:66px; }
.tape::-webkit-scrollbar{ display:none; }
.tape.at-end{ -webkit-mask:none; mask:none; }
.tk{ flex:none; width:calc((100vw - var(--gutter)*2 - 16px)/3.15); min-width:104px; display:grid; gap:1px; scroll-snap-align:start; text-align:left; border-radius:16px; background:var(--card); padding:10px 12px 11px; box-shadow:var(--card-shadow); }
.tk__n{ font:500 13px/17px var(--sans); color:var(--ink-2); white-space:nowrap; }
.tk__v{ font:600 17px/22px var(--sans); letter-spacing:-.01em; white-space:nowrap; }
.tk__c{ font:600 13px/17px var(--sans); white-space:nowrap; }
.up{ color:var(--up); } .down{ color:var(--down); }

/* ======================================================================= section chips / segmented tabs */
.tabs{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:14px calc(var(--gutter)*-1) 4px; padding:2px var(--gutter) 6px; scroll-padding-inline:var(--gutter);
  -webkit-mask:linear-gradient(to right,#000 calc(100% - 40px),transparent); mask:linear-gradient(to right,#000 calc(100% - 40px),transparent); }
.tabs::-webkit-scrollbar{ display:none; }
.tabs.at-end{ -webkit-mask:none; mask:none; }
.tab{ flex:none; display:inline-flex; align-items:center; height:36px; padding:0 15px; border-radius:999px; font:500 15px/36px var(--sans); color:var(--ink); white-space:nowrap; background:var(--card); box-shadow:var(--card-shadow); }
/* aria-selected for tabs, aria-current for links, aria-pressed for filter buttons */
.tab[aria-selected="true"], .tab[aria-current="page"], .tab[aria-pressed="true"]{ background:var(--ink); color:var(--bg); font-weight:600; box-shadow:none; }
.tab:not([aria-selected="true"]):not([aria-current="page"]):not([aria-pressed="true"]):hover{ background:var(--fill); }

/* ======================================================================= story atoms */
.kick{ font:600 13px/18px var(--sans); color:var(--red-text); }
.kick.grey{ color:var(--ink-2); }
.meta{ font:400 13px/18px var(--sans); color:var(--ink-2); display:flex; gap:5px; flex-wrap:wrap; align-items:center; }
.meta .dot::before{ content:"·"; }
.hl{ font-family:var(--display); font-weight:600; letter-spacing:-.012em; margin:0; color:var(--ink); text-wrap:pretty; }
.dek{ font:400 15px/21px var(--sans); color:var(--ink-2); margin:0; text-wrap:pretty; }
.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; }
.pic{ position:relative; overflow:hidden; background:var(--sunk-2); }
.pic img{ width:100%; height:100%; object-fit:cover; }
.pic::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.06); pointer-events:none; }
a:hover .hl, .hov:hover .hl{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }

.card{ display:block; background:var(--card); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--card-shadow); }
.lead .pic{ aspect-ratio:3/2; }
.lead__body{ padding:14px 16px 16px; display:grid; gap:7px; }
.lead .hl{ font-size:27px; line-height:31px; font-weight:700; letter-spacing:-.022em; }
.lead .dek{ font-size:16px; line-height:22px; }

.box{ background:var(--card); border-radius:var(--r-lg); box-shadow:var(--card-shadow); }
.box__h{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 12px; padding:15px 16px 4px; }
.box__h h2{ margin:0; font:700 20px/25px var(--display); letter-spacing:-.015em; }
.box__h .aside{ font:400 13px/18px var(--sans); color:var(--ink-2); white-space:nowrap; }
.box__h a.aside{ color:var(--red-text); font-weight:600; font-size:15px; min-height:44px; display:inline-flex; align-items:center; margin:-12px 0; }
.box__body{ padding:4px 16px 16px; }

/* just in */
.justin{ display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center; padding:12px 12px 13px 16px; margin:12px 0 0; }
.justin__top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.justin__tag{ display:flex; align-items:center; gap:7px; font:700 13px/18px var(--sans); color:var(--red-text); white-space:nowrap; }
.live-dot{ width:8px; height:8px; border-radius:99px; background:var(--red); box-shadow:0 0 0 3px var(--red-wash); flex:none; }
.justin__txt{ display:grid; gap:2px; min-width:0; }
.justin__txt .hl{ font-size:16px; line-height:21px; }
.justin .chev{ color:var(--ink-3); width:18px; height:18px; }
@media (prefers-reduced-motion: no-preference){ .live-dot{ animation:pulse 2.4s ease-in-out infinite; } }
@keyframes pulse{ 50%{ box-shadow:0 0 0 5px transparent; } }

/* rundown (numbered list) */
.rundown ol{ list-style:none; margin:0; padding:0 0 4px; counter-reset:r; }
.rundown li{ counter-increment:r; }
.rundown a{ display:grid; grid-template-columns:20px 1fr; gap:3px 10px; padding:11px 16px 12px; position:relative; }
.rundown a::before{ content:counter(r); font:700 17px/22px var(--display); color:var(--red-text); font-variant-numeric:tabular-nums; }
.rundown li + li a::after{ content:""; position:absolute; top:0; left:46px; right:0; border-top:.5px solid var(--hair); }
.rundown .hl{ font-size:17px; line-height:22px; grid-column:2; }
.rundown .meta{ grid-column:2; }

/* sections */
.sec{ margin-top:30px; }
.sec__h{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 10px; }
.sec__h h2{ margin:0; font:700 22px/28px var(--display); letter-spacing:-.018em; }
.sec__h a{ display:inline-flex; align-items:center; gap:1px; font:500 15px/20px var(--sans); color:var(--red-text); min-height:44px; margin:-8px 0; }
.sec__h a .i{ width:17px; height:17px; stroke-width:2; }
.sec__grid{ display:grid; gap:10px; }
.feature{ display:flex; flex-direction:column; }
.feature .pic{ aspect-ratio:16/9; }
.feature__body{ padding:13px 16px 15px; display:grid; gap:6px; flex:1; align-content:start; }
.feature .hl{ font-size:20px; line-height:25px; font-weight:700; letter-spacing:-.018em; }

/* grouped rows (the iOS list) */
.rows{ background:var(--card); border-radius:var(--r-lg); box-shadow:var(--card-shadow); overflow:hidden; }
.row{ display:grid; grid-template-columns:1fr auto; gap:14px; padding:13px 14px 13px 16px; position:relative; align-items:start; }
.row + .row::before{ content:""; position:absolute; top:0; left:16px; right:0; border-top:.5px solid var(--hair); }
.row__txt{ display:grid; gap:4px; min-width:0; align-content:start; }
.row .hl{ font-size:17px; line-height:22px; }
.row .pic{ width:76px; height:76px; border-radius:12px; }
.more-rows{ display:flex; justify-content:center; padding:14px 0 2px; }

/* pager (lists that page instead of growing forever) */
.pager{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin:16px 2px 0; font:500 15px/20px var(--sans); color:var(--ink-2); }
.pager > :first-child{ justify-self:start; } .pager > :last-child{ justify-self:end; }

/* ======================================================================= video plates
   Designed by us; never a third-party thumbnail. The real picture exists only inside the player, after a tap. */
.plate{ position:relative; display:flex; flex-direction:column; justify-content:space-between; aspect-ratio:16/9; border-radius:var(--r-lg); padding:13px 14px 14px; color:#fff; overflow:hidden; text-align:left; width:100%;
  background:radial-gradient(120% 90% at var(--px,15%) var(--py,0%), rgba(255,255,255,.2), rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.28)), var(--pc,#24201C);
  box-shadow:0 0 0 .5px rgba(0,0,0,.2); }
.bug{ align-self:flex-start; display:inline-flex; align-items:center; height:24px; padding:0 9px; border-radius:7px; background:rgba(255,255,255,.17); font:700 12.5px/1 var(--sans); letter-spacing:.005em; color:#fff; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.plate__t{ font:650 18px/22px var(--display); letter-spacing:-.012em; margin:0; padding-right:56px; text-wrap:pretty;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.plate__t[dir="rtl"]{ padding-right:0; padding-left:56px; font-family:var(--heb); font-weight:700; line-height:25px; text-align:right; }
.plate.rtl .plate__play{ right:auto; left:13px; }
.plate.rtl .plate__when{ text-align:right; }
.plate__when{ display:block; font:500 12.5px/16px var(--sans); color:rgba(255,255,255,.86); margin-top:6px; padding-right:56px; }
.plate.rtl .plate__when{ padding-right:0; padding-left:56px; }
.plate__play{ position:absolute; right:13px; bottom:13px; width:46px; height:46px; border-radius:999px; display:grid; place-items:center; color:#fff;
  background:radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.34), rgba(255,255,255,.14)); box-shadow:inset 0 0 0 .75px rgba(255,255,255,.45),0 6px 16px -6px rgba(0,0,0,.45); }
.plate__play .i{ width:19px; height:19px; margin-left:2px; }
.plate:hover .plate__t{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.rail{ display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; margin:0 calc(var(--gutter)*-1); padding:0 var(--gutter) 2px; scroll-snap-type:x mandatory; scroll-padding:0 var(--gutter); }
.rail::-webkit-scrollbar{ display:none; }
.rail > *{ flex:none; width:min(296px,80vw); scroll-snap-align:start; }
/* mini plate for lists: which newsroom, in its own colour */
.mini{ position:relative; width:112px; height:63px; border-radius:11px; flex:none; overflow:hidden; color:#fff;
  background:radial-gradient(120% 90% at var(--px,15%) 0%, rgba(255,255,255,.2), rgba(255,255,255,0) 60%), var(--pc,#24201C); }
.mini__src{ position:absolute; left:7px; top:7px; right:7px; font:700 11px/13px var(--sans); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini__play{ position:absolute; right:6px; bottom:6px; width:24px; height:24px; border-radius:99px; background:rgba(255,255,255,.22); display:grid; place-items:center; }
.mini__play .i{ width:11px; height:11px; margin-left:1px; }
.vrow{ display:grid; grid-template-columns:112px 1fr; gap:12px; padding:12px 14px; position:relative; align-items:center; text-align:left; width:100%; }
.vrow + .vrow::before{ content:""; position:absolute; top:0; left:138px; right:0; border-top:.5px solid var(--hair); }
.vrow .hl{ font-size:16px; line-height:21px; }
.vrow .meta{ flex-wrap:nowrap; white-space:nowrap; min-width:0; }
.vrow .meta > span:first-child{ overflow:hidden; text-overflow:ellipsis; min-width:0; }
.vrow .row__txt{ min-width:0; }
.vrow .hl[dir="rtl"]{ font-family:var(--heb); }
.vrow:hover .hl{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.vgroup{ font:600 13px/18px var(--sans); color:var(--ink-2); margin:22px 4px 8px; }
.vshows{ display:grid; gap:12px; }
.vfeat .plate{ aspect-ratio:4/3; padding:16px 16px 18px; border-radius:var(--r-xl); }
.vfeat .plate__t{ font-size:26px; line-height:30px; -webkit-line-clamp:4; padding-right:62px; letter-spacing:-.022em; font-weight:700; }
.vfeat .plate__play{ width:56px; height:56px; right:16px; bottom:16px; }
.vfeat .plate__play .i{ width:23px; height:23px; }
.vfeat .bug{ height:28px; font-size:14px; padding:0 11px; border-radius:8px; }
/* the player (inside the player sheet) */
.player{ position:relative; aspect-ratio:16/9; border-radius:20px; overflow:hidden; background:radial-gradient(120% 90% at 15% 0%, rgba(255,255,255,.18), transparent 60%), var(--pc,#24201C); }
.player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.player__cover{ position:absolute; inset:0; display:none; flex-direction:column; justify-content:flex-end; padding:16px; color:#fff; background:radial-gradient(120% 90% at 15% 0%, rgba(255,255,255,.18), transparent 60%), var(--pc,#24201C); }
.player__cover.on{ display:flex; }
.player__cover small{ font:600 13px/18px var(--sans); color:rgba(255,255,255,.85); }
.player__cover b{ font:650 19px/24px var(--display); max-width:32ch; margin-top:2px; }
.player__cover .row2{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.player__cover .btn{ height:40px; }
.player__cover .btn.ghost{ color:#fff; background:rgba(255,255,255,.18); }
.player__wait{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:rgba(255,255,255,.88); font:500 14px/18px var(--sans); }
.player__wait .plate__play{ position:static; }
.vs-title{ font:700 21px/26px var(--display); margin:14px 4px 4px; letter-spacing:-.015em; }
.vs-meta{ margin:0 4px 8px; }

/* ======================================================================= Shorts (/shorts/)
   MYB News's own YouTube Shorts as upright plates we draw: never YouTube's thumbnail. The Short plays upright in the
   player sheet (.player.tall), after a tap. */
.shorts{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.shorts > li{ display:flex; min-width:0; }
.plate--short{ aspect-ratio:9/16; padding:12px 12px 14px; border-radius:var(--r-lg); }
.plate--short .bug{ height:22px; font-size:12px; padding:0 8px; border-radius:7px; }
.plate--short .plate__t{ padding-right:0; font:700 17px/21px var(--display); letter-spacing:-.014em; -webkit-line-clamp:5; }   /* 5 lines end below the play badge at every width */
.plate--short .plate__play{ left:50%; top:34%; right:auto; bottom:auto; transform:translate(-50%,-50%); width:58px; height:58px; }
.plate--short .plate__play .i{ width:23px; height:23px; margin-left:3px; }
.sside{ display:grid; gap:14px; margin-top:22px; align-content:start; }
.sbox{ padding:16px; display:grid; gap:8px; align-content:start; }
.sbox h2{ margin:0; font:700 18px/23px var(--display); letter-spacing:-.012em; }
.sbox p{ margin:0; font:400 15px/21px var(--sans); color:var(--ink-2); }
.sbox .btns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.sbox.links nav{ display:grid; margin:2px -16px -8px; }
.sbox.links a{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:46px; padding:0 16px; font:400 16px/21px var(--sans); position:relative; }
.sbox.links a + a::before{ content:""; position:absolute; top:0; left:16px; right:0; border-top:.5px solid var(--hair); }
.sbox.links a .chev{ width:16px; height:16px; flex:none; color:var(--ink-3); }
.sbox.links a:hover{ color:var(--red-text); }
.player.tall{ aspect-ratio:9/16; width:auto; height:min(60vh,560px); max-width:100%; margin:0 auto; }
@media (max-width:359px){
  .plate--short{ padding:10px 10px 12px; }
  .plate--short .plate__t{ font-size:15.5px; line-height:19px; -webkit-line-clamp:4; }
  .plate--short .plate__play{ width:48px; height:48px; }
  .plate--short .plate__play .i{ width:19px; height:19px; }
}
@media (min-width:768px){
  .shorts{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
  /* four Shorts sit in one row, two in one row, so no row is left with one plate and a gap beside it */
  .shorts[data-n="4"]{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .shorts[data-n="2"], .shorts[data-n="1"]{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:560px; }
  .sside{ grid-template-columns:1fr 1fr; }
  .plate--short .plate__t{ font-size:19px; line-height:24px; }
}
@media (min-width:1100px){
  /* up to five across the full width (--n is set by the page: fewer Shorts, fewer and wider columns, up to 300px), the
     two boxes beneath, so a short list fills its row */
  .sgrid{ margin-top:6px; }
  .shorts{ grid-template-columns:repeat(var(--n,5),minmax(0,1fr)); gap:16px; max-width:calc(var(--n,5) * 300px + (var(--n,5) - 1) * 16px); }
  .sside{ margin-top:28px; gap:16px; }
  .plate--short{ padding:14px 14px 16px; }
  .plate--short .bug{ height:24px; font-size:12.5px; padding:0 9px; }
  .plate--short .plate__t{ font-size:20px; line-height:25px; }
  .plate--short .plate__play{ width:62px; height:62px; }
}

/* dark Watch band */
.band{ background:var(--band); color:#F5F5F7; margin:32px calc(var(--gutter)*-1) 0; padding:22px var(--gutter) 24px; }
.band .sec__h h2{ color:#F5F5F7; }
.band .sec__h a{ color:#FF8A8E; }
.band .sub{ font:400 15px/20px var(--sans); color:#AEAEB2; margin:-6px 2px 14px; }

/* ======================================================================= closing soon + countdown tiles */
.cs a{ display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center; padding:11px 12px 11px 16px; position:relative; }
.cs a + a::before{ content:""; position:absolute; top:0; left:80px; right:0; border-top:.5px solid var(--hair); }
.cs .hl{ font-size:16px; line-height:21px; }
.cs .chev{ color:var(--ink-3); width:17px; height:17px; }
.cd{ width:52px; height:52px; border-radius:13px; background:var(--fill-2); display:grid; place-content:center; text-align:center; gap:0; }
.cd b{ font:700 20px/22px var(--display); font-variant-numeric:tabular-nums; }
.cd span{ font:600 11px/13px var(--sans); color:var(--ink-2); }
.cd.soon{ background:var(--red-wash); }
.cd.soon b, .cd.soon span{ color:var(--red-text); }
.cd .i{ width:24px; height:24px; color:var(--ink-2); }

/* ======================================================================= ask / teaser card */
.ask{ padding:16px; display:grid; gap:12px; }
.ask__who{ display:flex; align-items:center; gap:10px; font:600 15px/20px var(--sans); }
.ask__who img{ width:32px; height:32px; border-radius:999px; }
.ask__who span{ display:block; font-weight:400; color:var(--ink-2); font-size:13px; line-height:16px; }
.ask__q{ font:650 20px/26px var(--display); margin:0; letter-spacing:-.015em; text-wrap:pretty; }
.ask__from{ display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:14px; background:var(--inset); }
.ask__from .hl{ font-size:14px; line-height:19px; }
.ask__from .pic{ width:44px; height:44px; border-radius:9px; flex:none; }
.ask__foot{ display:flex; align-items:center; gap:10px; justify-content:space-between; flex-wrap:wrap; }

/* ======================================================================= buttons (pill, never framed, never caps) */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:44px; padding:0 18px; border-radius:999px; font:600 15px/1 var(--sans); white-space:nowrap; }
.btn .i{ width:19px; height:19px; }
.btn.soft{ background:var(--fill-2); color:var(--ink); }
.btn.soft:hover{ background:var(--fill); }
.btn.red{ background:var(--red-fill); color:#fff; }
.btn.red:hover{ background:var(--red-hover); }
.btn.red:active{ background:var(--red-press); }
.btn.block{ width:100%; }
.btn.sm{ height:36px; padding:0 14px; font-size:14px; }
.btn[disabled], .btn[aria-disabled="true"]{ opacity:.55; cursor:default; }
.btns{ display:flex; gap:10px; flex-wrap:wrap; }
.av{ width:32px; height:32px; border-radius:999px; display:grid; place-items:center; font:600 14px/1 var(--sans); color:#fff; background:var(--ac,#5B5B60); flex:none; }
.av .i{ width:18px; height:18px; }
.av img{ width:100%; height:100%; border-radius:inherit; }

/* ======================================================================= shabbos table, join card, notes */
.shab table{ width:100%; border-collapse:collapse; font:400 15px/20px var(--sans); }
.shab th{ text-align:left; font:500 13px/16px var(--sans); color:var(--ink-2); padding:4px 8px 6px; white-space:nowrap; }
.shab td{ white-space:nowrap; padding:10px 8px; border-top:.5px solid var(--hair); }
.shab th:not(:first-child), .shab td:not(:first-child){ text-align:right; }
.shab td:first-child, .shab th:first-child{ padding-left:16px; font-weight:500; }
.shab td:last-child, .shab th:last-child{ padding-right:16px; }
.note{ padding:8px 16px 14px; margin:0; font:400 13px/18px var(--sans); color:var(--ink-2); }
.join{ padding:20px 18px; display:grid; gap:14px; justify-items:start; }
.join__logo{ height:30px; width:auto; }
.join h2{ margin:0; font:700 21px/26px var(--display); letter-spacing:-.015em; }
.join p{ margin:0; font:400 16px/22px var(--sans); color:var(--ink-2); max-width:42ch; }
.join__txt{ display:grid; gap:6px; }
.join__btns{ display:flex; gap:10px; flex-wrap:wrap; }
.notice{ display:flex; gap:12px; align-items:center; padding:12px 16px; border-radius:18px; background:var(--card); box-shadow:var(--card-shadow); font:400 15px/21px var(--sans); }
.notice .i{ color:var(--ink-2); }
.notice b{ font-weight:600; }
.notice.soft{ background:var(--fill-2); box-shadow:none; }
.empty-state{ padding:28px 18px; text-align:center; display:grid; gap:8px; justify-items:center; }
.empty-state h2{ margin:0; font:700 20px/25px var(--display); }
.empty-state p{ margin:0; font:400 15px/21px var(--sans); color:var(--ink-2); max-width:40ch; }

/* ======================================================================= footer */
.foot{ margin-top:44px; padding-top:26px; padding-bottom:calc(130px + env(safe-area-inset-bottom)); }
.foot__join{ margin-bottom:28px; }
.foot__top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-top:26px; border-top:.5px solid var(--hair); }
.foot__top img{ height:24px; width:auto; }
.foot__top span{ font:500 13px/18px var(--sans); color:var(--ink-2); }
.foot__cols{ display:grid; grid-template-columns:1fr; margin:16px 0 18px; }
.foot__cols h3{ margin:0; font:600 15px/20px var(--sans); color:var(--ink); }
/* phone: one row per group that opens in place (the page script folds them); links are full 44pt targets */
.foot__g + .foot__g{ border-top:.5px solid var(--hair); }
.foot__g summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; cursor:pointer; }
.foot__g summary::-webkit-details-marker{ display:none; }
.foot__g summary .chev{ width:16px; height:16px; color:var(--ink-3); transform:rotate(90deg); transition:transform 220ms var(--ease); }
.foot__g[open] summary .chev{ transform:rotate(-90deg); }
.foot__g nav{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; padding:0 0 10px; }
.foot__cols a, .foot__cols button{ display:flex; align-items:center; min-height:44px; font:400 15px/20px var(--sans); color:var(--ink-2); text-align:left; }
.foot__cols a:hover, .foot__cols button:hover{ color:var(--ink); }
.foot small{ display:block; font:400 13px/18px var(--sans); color:var(--ink-2); }
.foot small + small{ margin-top:6px; }
.foot small a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; }

/* ======================================================================= floating tab bar (phone + tablet) */
.tabbar{ position:fixed; z-index:70; left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); bottom:calc(10px + env(safe-area-inset-bottom) + var(--vv-gap,0px));
  display:flex; gap:10px; align-items:center; transition:transform 360ms var(--ease), opacity 260ms; transform-origin:bottom center; max-width:560px; margin:0 auto; }
.tabbar__main{ flex:1; height:62px; border-radius:999px; display:flex; padding:4px; }
.tabbar__main a{ flex:1; border-radius:999px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; color:var(--ink); font:600 11px/13px var(--sans); min-width:0; }
.tabbar__main a .i{ width:25px; height:25px; stroke-width:1.7; }
.tabbar__main a[aria-current="page"]{ background:var(--fill); }
.tabbar__main a[aria-current="page"] .i{ color:var(--red-text); }
.tabbar__search{ width:62px; height:62px; border-radius:999px; display:grid; place-items:center; flex:none; }
.tabbar__search .i{ width:25px; height:25px; }
.tabbar.compact{ transform:scale(.88) translateY(6px); }
.tabbar.away{ transform:translateY(calc(100% + 30px)); opacity:0; pointer-events:none; }
.tabbar-edge{ position:fixed; left:0; right:0; bottom:0; height:110px; z-index:65; pointer-events:none; transition:opacity 260ms;
  background:linear-gradient(to top, color-mix(in srgb,var(--bg) 88%,transparent) 0%, color-mix(in srgb,var(--bg) 0%,transparent) 100%); }
.tabbar.away + .tabbar-edge, .tb-away .tabbar-edge{ opacity:0; }

/* ======================================================================= article bottom toolbar (phone): glass, like Apple News */
.toolbar{ position:fixed; z-index:70; left:50%; bottom:calc(10px + env(safe-area-inset-bottom) + var(--vv-gap,0px)); transform:translateX(-50%); height:56px; border-radius:999px; display:flex; padding:4px 6px; gap:2px;
  transition:transform 360ms var(--ease), opacity 260ms; }
.toolbar button, .toolbar a{ min-width:56px; height:48px; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:5px; padding:0 10px; font:600 15px/1 var(--sans); color:var(--ink); }
.toolbar .i{ width:23px; height:23px; }
.toolbar [aria-pressed="true"]{ color:var(--red-text); }
.toolbar [aria-pressed="true"] .i{ fill:currentColor; }
.toolbar.away{ transform:translate(-50%, calc(100% + 30px)); opacity:0; pointer-events:none; }
.toolbar-edge{ position:fixed; left:0; right:0; bottom:0; height:100px; z-index:65; pointer-events:none; transition:opacity 260ms;
  background:linear-gradient(to top, color-mix(in srgb,var(--read) 90%,transparent) 0%, color-mix(in srgb,var(--read) 0%,transparent) 100%); }
.tb-away .toolbar-edge{ opacity:0; }

/* ======================================================================= sheets */
.dimmer{ position:fixed; inset:0; z-index:90; background:var(--dim); opacity:0; pointer-events:none; transition:opacity 260ms; }
.dimmer.on{ opacity:1; pointer-events:auto; }
.sheet{ position:fixed; z-index:95; left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom)); max-height:min(88vh,780px); border-radius:34px;
  display:flex; flex-direction:column; transform:translateY(calc(100% + 40px)); transition:transform 460ms var(--ease); visibility:hidden; }
.sheet.on{ transform:none; visibility:visible; }
.sheet.tall{ top:calc(10px + env(safe-area-inset-top)); max-height:none; }
.sheet__grab{ width:36px; height:5px; border-radius:3px; background:var(--ink-3); opacity:.5; margin:8px auto 2px; flex:none; }
.sheet__h{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 12px 8px 20px; flex:none; }
.sheet__h h2{ margin:0; font:700 20px/25px var(--display); letter-spacing:-.012em; }
.sheet__x{ width:40px; height:40px; border-radius:999px; display:grid; place-items:center; background:var(--fill); flex:none; }
.sheet__x .i{ width:18px; height:18px; stroke-width:2.2; }
.sheet__body{ overflow:auto; padding:2px 12px 18px; overscroll-behavior:contain; }
.group{ background:var(--sheet-group, var(--card)); border-radius:20px; overflow:hidden; margin:8px 0; }
.group__label{ font:500 13px/18px var(--sans); color:var(--glass-ink-2); margin:16px 8px 2px; }
.cell{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:50px; padding:10px 16px; position:relative; font:400 16px/21px var(--sans); width:100%; text-align:left; }
.cell + .cell::before{ content:""; position:absolute; top:0; left:16px; right:0; border-top:.5px solid var(--hair); }
.cell b{ font-weight:600; }
.cell .sub{ font-size:13px; line-height:18px; color:var(--ink-2); }
.cell__main{ display:flex; gap:14px; align-items:center; min-width:0; flex:1; }
.cell__main div{ min-width:0; }
.cell__main b{ display:block; font:600 16px/21px var(--sans); }
/* a cell's second line wraps to two lines at most */
.cell__main div > span{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; font:400 13px/18px var(--sans); color:var(--ink-2); overflow:hidden; }
.chev{ color:var(--ink-3); width:17px; height:17px; flex:none; }
.seg{ display:flex; background:var(--fill-2); border-radius:999px; padding:3px; gap:2px; width:100%; }
.seg button{ flex:1; height:34px; border-radius:999px; font:500 14px/1 var(--sans); color:var(--ink-2); padding:0 12px; white-space:nowrap; }
.seg button[aria-pressed="true"]{ background:var(--card); color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04); }
.switch{ width:51px; height:31px; border-radius:999px; background:var(--fill); position:relative; flex:none; transition:background 200ms; }
.switch::after{ content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:999px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); transition:transform 260ms var(--ease); }
.switch[aria-checked="true"]{ background:var(--switch-on); }
.switch[aria-checked="true"]::after{ transform:translateX(20px); }
.field{ display:flex; align-items:center; gap:8px; min-height:46px; padding:0 14px; border-radius:14px; background:var(--card); width:100%; }
.field input, .field select, .field textarea{ flex:1; min-width:0; border:0; background:none; font:400 17px/22px var(--sans); color:var(--ink); outline:none; padding:11px 0; }
.field textarea{ resize:none; }
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-2); }
.field .i{ width:19px; height:19px; color:var(--ink-2); }
.field.round{ border-radius:999px; background:var(--fill-2); }
.field:focus-within{ box-shadow:0 0 0 1.5px var(--ink-3); }
/* the browser's own clear button (blue on Android) is replaced by ours (.field__x, /js/myb2.js) */
.field input[type="search"]::-webkit-search-cancel-button, .field input[type="search"]::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; display:none; }
.field__x{ width:26px; height:26px; margin-right:-6px; border-radius:999px; display:grid; place-items:center; background:var(--ink-3); color:var(--bg); flex:none; }
.field__x[hidden]{ display:none; }
.field__x .i{ width:12px; height:12px; color:inherit; stroke-width:2.6; }
.hint{ font:400 14px/20px var(--sans); color:var(--glass-ink-2); padding:10px 6px 4px; margin:0; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; padding:6px 2px; }
.chips a, .chips button{ display:inline-flex; align-items:center; height:36px; padding:0 14px; border-radius:999px; background:var(--card); font:500 15px/1 var(--sans); box-shadow:0 0 0 .5px var(--hair); }
.results .group a{ display:block; padding:12px 16px; position:relative; }
.results .group a + a::before{ content:""; position:absolute; top:0; left:16px; right:0; border-top:.5px solid var(--hair); }
.results .hl{ font-size:16px; line-height:21px; }
.results mark{ background:var(--red-wash); color:inherit; border-radius:3px; padding:0 1px; }
.mk-row{ display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; }
.mk-row .v{ text-align:right; display:grid; gap:1px; }
.mk-row .v b{ font:600 16px/20px var(--sans); }
.mk-row .v span{ font:600 13px/16px var(--sans); }
.conv{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; padding:12px 16px 14px; }
.conv label{ display:grid; gap:4px; font:500 13px/16px var(--sans); color:var(--ink-2); }
.conv input{ width:100%; height:46px; border-radius:12px; border:0; background:var(--fill-2); padding:0 12px; font:600 19px/1 var(--sans); color:var(--ink); font-variant-numeric:tabular-nums; }
.conv .eq{ font:600 17px/1 var(--sans); color:var(--ink-2); padding-top:18px; }
.check{ display:flex; gap:12px; align-items:flex-start; font:400 15px/21px var(--sans); }
.check input{ width:22px; height:22px; margin:0; accent-color:var(--red-fill); flex:none; }
.toast{ position:fixed; left:50%; top:calc(var(--bar-h) + 10px); transform:translateX(-50%); z-index:120; padding:11px 18px; border-radius:999px; font:600 15px/20px var(--sans); max-width:calc(100vw - 32px); text-align:center; }

/* ======================================================================= article */
.art{ max-width:var(--measure); margin:0 auto; }
.art__kick{ display:flex; gap:6px; align-items:center; margin:6px 0 10px; font:600 15px/20px var(--sans); }
.art__kick a{ color:var(--red-text); display:inline-flex; align-items:center; min-height:44px; margin:-12px 0; }
.art__kick span{ color:var(--ink-2); font-weight:400; }
.art h1{ font:700 30px/35px var(--display); letter-spacing:-.024em; margin:0 0 12px; text-wrap:balance; }
.art__dek{ font:400 19px/27px var(--serif); color:var(--ink-2); margin:0 0 16px; text-wrap:pretty; }
.byline{ display:flex; align-items:center; gap:12px; padding:13px 0; border-top:.5px solid var(--hair); border-bottom:.5px solid var(--hair); }
.byline img{ width:40px; height:40px; border-radius:999px; }
.byline b{ display:block; font:600 15px/20px var(--sans); }
.byline time, .byline span{ font:400 13px/18px var(--sans); color:var(--ink-2); }
.byline > div{ min-width:0; flex:1; }
.byline .cc{ margin-left:auto; display:inline-flex; align-items:center; justify-content:center; gap:6px; height:44px; min-width:44px; padding:0 11px; flex:none; border-radius:999px; background:var(--fill-2); font:600 14px/1 var(--sans); }
.byline .cc .i{ width:19px; height:19px; }
.hero{ margin:16px calc(var(--gutter)*-1) 0; }
.hero .pic{ aspect-ratio:16/10; }
.hero figcaption{ font:400 13px/18px var(--sans); color:var(--ink-2); padding:8px var(--gutter) 0; }
.short{ background:var(--sunk); border-radius:var(--r-lg); padding:18px; margin:22px 0 6px; }
.article .short{ background:var(--bg); }
.short h2{ margin:0 0 10px; font:700 17px/22px var(--display); }
.short ul{ margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.short li{ position:relative; padding-left:18px; font:400 17px/24px var(--sans); }
.short li::before{ content:""; position:absolute; left:1px; top:9px; width:7px; height:7px; border-radius:2px; background:var(--red); }
.short .why, .short .todo{ margin:14px 0 0; padding-top:13px; border-top:.5px solid var(--hair); font:400 17px/24px var(--sans); }
.short b{ font-weight:600; }
.prose{ font-family:var(--serif); font-size:var(--read-size); line-height:var(--read-lh); }
.prose p{ margin:0 0 1em; text-wrap:pretty; hanging-punctuation:first; }
.prose > p:first-child{ margin-top:22px; }
.prose h2{ font:700 22px/28px var(--display); letter-spacing:-.015em; margin:1.6em 0 .5em; }
.prose h3{ font:700 18px/24px var(--display); letter-spacing:-.01em; margin:1.4em 0 .4em; }
.prose ul, .prose ol{ margin:0 0 1em; padding-left:1.2em; }
.prose li{ margin:0 0 .45em; }
.prose a:not(.related){ color:var(--red-text); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.prose strong, .prose b{ font-weight:600; }
.prose blockquote{ margin:1.2em 0; padding:2px 0 2px 18px; border-left:3px solid var(--red); color:var(--ink-2); }
.prose table{ width:100%; border-collapse:collapse; font:400 15px/21px var(--sans); margin:0 0 1.2em; }
.prose th{ text-align:left; font-weight:600; padding:8px 10px; border-bottom:.5px solid var(--hair); }
.prose td{ padding:8px 10px; border-bottom:.5px solid var(--hair); }
.nums-h{ font:700 17px/22px var(--display); margin:28px 0 10px; }
.nums{ display:grid; grid-template-columns:1fr; background:var(--bg); border-radius:var(--r-lg); overflow:hidden; margin:0 0 24px; font-family:var(--sans); }
.nums div{ display:grid; grid-template-columns:112px 1fr; align-items:baseline; gap:12px; padding:13px 16px; position:relative; }
.nums div + div::before{ content:""; position:absolute; top:0; left:16px; right:0; border-top:.5px solid var(--hair); }
.nums b{ font:700 22px/26px var(--display); letter-spacing:-.015em; font-variant-numeric:tabular-nums; }
.nums span{ font:400 15px/20px var(--sans); color:var(--ink-2); }
.related{ display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; padding:13px 14px 13px 16px; margin:6px 0 26px; border-radius:var(--r-lg); background:var(--bg); font-family:var(--sans); }
.related .hl{ font-size:17px; line-height:22px; }
.related .pic{ width:68px; height:68px; border-radius:11px; }
.endacts{ display:flex; gap:8px; flex-wrap:wrap; margin:26px 0 6px; }
/* in dark mode the article page is black, so its inset blocks become cards */
:root[data-theme="dark"] .article .short, :root[data-theme="dark"] .nums, :root[data-theme="dark"] .related{ background:var(--card); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .article .short, :root:not([data-theme="light"]) .nums, :root:not([data-theme="light"]) .related{ background:var(--card); } }

/* comments (iOS grouped list, never glass) */
.talk{ max-width:var(--measure); margin:38px auto 0; }
.talk__h{ display:flex; align-items:baseline; justify-content:space-between; margin:0 2px 4px; }
.talk__h h2{ margin:0; font:700 22px/28px var(--display); letter-spacing:-.015em; }
.talk__h span{ font:400 15px/20px var(--sans); color:var(--ink-2); }
.talk__sub{ margin:0 2px 12px; font:400 15px/21px var(--sans); color:var(--ink-2); }
.article .talk .rows, .article .more .rows{ background:var(--bg); box-shadow:none; }
:root[data-theme="dark"] .article .talk .rows, :root[data-theme="dark"] .article .more .rows{ background:var(--card); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .article .talk .rows, :root:not([data-theme="light"]) .article .more .rows{ background:var(--card); } }
.post{ padding:14px 16px 8px; position:relative; }
.post + .post::before, .post + .compose::before, .compose + .post::before{ content:""; position:absolute; top:0; left:16px; right:0; border-top:.5px solid var(--hair); }
.post__head{ display:flex; gap:10px; align-items:center; }
.post__who{ display:grid; gap:0; min-width:0; }
.post__who b{ font:600 15px/20px var(--sans); display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.post__who small{ font:400 13px/17px var(--sans); color:var(--ink-2); }
.badge{ display:inline-flex; align-items:center; gap:3px; height:20px; padding:0 7px; border-radius:999px; font:600 12px/20px var(--sans); background:var(--red-wash); color:var(--red-text); }
.badge.grey{ background:var(--fill-2); color:var(--ink-2); }
.badge .i{ width:13px; height:13px; stroke-width:2.2; }
.post__txt{ margin:8px 0 0; font:400 16.5px/24px var(--sans); text-wrap:pretty; overflow-wrap:anywhere; }
.post__acts{ display:flex; gap:2px; margin:4px 0 0 -10px; align-items:center; }
.post__acts button{ white-space:nowrap; display:inline-flex; align-items:center; gap:5px; height:44px; padding:0 10px; border-radius:999px; font:500 14px/1 var(--sans); color:var(--ink-2); }
.post__acts button:hover{ background:var(--fill-2); }
.post__acts .i{ width:18px; height:18px; }
.post__acts .more-b{ margin-left:auto; }
.post__acts button[aria-pressed="true"]{ color:var(--red-text); }
.post__acts button[aria-pressed="true"] .i{ fill:currentColor; }
.post.best{ background:var(--green-wash); }
.best__tag{ display:flex; align-items:center; gap:6px; font:600 14px/18px var(--sans); color:var(--up); margin:0 0 10px; }
.best__tag .i{ width:18px; height:18px; }
.replies{ margin:4px 0 6px 18px; padding-left:14px; border-left:2px solid var(--hair); }
.replies .post{ padding:10px 0 4px; }
.replies .post::before{ display:none; }
.compose{ display:grid; gap:10px; padding:12px 14px 14px 16px; position:relative; }
.compose .field{ background:var(--fill-2); border-radius:16px; align-items:flex-start; }
.compose__row{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.more{ max-width:var(--measure); margin:38px auto 0; }

/* ======================================================================= community (boards, threads, composer) */
.boards{ background:var(--card); border-radius:var(--r-lg); box-shadow:var(--card-shadow); overflow:hidden; }
.boards .cell{ min-height:62px; padding:10px 14px 10px 16px; }
.boards .cell + .cell::before{ left:64px; }
.tile{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:#fff; flex:none; background:var(--tc,#636366); }
.tile .i{ width:20px; height:20px; stroke-width:1.9; }
.thr{ display:grid; gap:5px; padding:13px 16px; position:relative; }
.thr + .thr::before{ content:""; position:absolute; top:0; left:16px; right:0; border-top:.5px solid var(--hair); }
.thr .hl{ font-size:17px; line-height:22px; }
.thread-head{ margin:2px 0 14px; }
.thread-head h1{ font:700 27px/32px var(--display); letter-spacing:-.022em; margin:6px 0 0; text-wrap:balance; }
.linked{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; margin:10px 0 2px; padding:11px 12px 11px 14px; border-radius:16px; background:var(--inset); }
.linked .hl{ font-size:15px; line-height:20px; }
.linked .pic{ width:52px; height:52px; border-radius:10px; }
.sortbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:22px 2px 10px; }
.sortbar h2{ margin:0; font:700 20px/25px var(--display); }
.sortbar .seg{ width:auto; }
.sortbar .seg button{ height:30px; font-size:13px; }
.rules ol{ margin:0; padding:0 16px 0 36px; font:400 15px/21px var(--sans); display:grid; gap:7px; }
.composer{ position:fixed; z-index:70; left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); bottom:calc(10px + env(safe-area-inset-bottom) + var(--vv-gap,0px)); display:flex; gap:8px; align-items:center; height:60px; border-radius:999px; padding:6px; }
.composer__btn{ flex:1; height:48px; border-radius:999px; background:var(--fill-2); display:flex; align-items:center; gap:10px; padding:0 8px; font:400 16px/1 var(--sans); color:var(--glass-ink-2); text-align:left; }
.composer__btn .av{ width:32px; height:32px; background:var(--fill); color:var(--ink-2); }
.send{ width:48px; height:48px; border-radius:999px; display:grid; place-items:center; background:var(--red-fill); color:#fff; flex:none; }
.send .i{ width:22px; height:22px; stroke-width:2.2; }

/* ======================================================================= grants board ("What you can get") */
.gchips{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:4px calc(var(--gutter)*-1) 14px; padding:2px var(--gutter) 6px; }
.gchips::-webkit-scrollbar{ display:none; }
.gcard{ background:var(--card); border-radius:var(--r-lg); box-shadow:var(--card-shadow); padding:16px; display:grid; gap:12px; scroll-margin-top:90px; }
.gcard + .gcard{ margin-top:12px; }
.gcard__top{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; }
.gcard .cd{ width:62px; height:62px; border-radius:16px; }
.gcard .cd b{ font-size:24px; line-height:26px; }
.gcard h2{ margin:2px 0 0; font:700 19px/24px var(--display); letter-spacing:-.015em; text-wrap:pretty; }
.gfacts{ margin:0; display:grid; gap:7px; font:400 15px/21px var(--sans); }
.gfacts div{ display:grid; grid-template-columns:72px 1fr; gap:10px; }
.gfacts dt{ color:var(--ink-2); }
.gfacts dd{ margin:0; }
.gacts{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:8px; padding-top:12px; border-top:.5px solid var(--hair); }
.gacts .btn{ flex-direction:column; height:58px; gap:3px; padding:0 6px; border-radius:16px; font:600 13px/16px var(--sans); }
.gacts .btn .i{ width:21px; height:21px; }
.gcard.flash{ box-shadow:0 0 0 2px var(--red-text); }
.cat{ font:600 13px/18px var(--sans); }
.cat.Taxes{ color:var(--cat-taxes); } .cat.Grants, .cat.Refunds{ color:var(--cat-grants); } .cat.Offers{ color:var(--cat-offers); } .cat.Health{ color:var(--cat-health); }

/* ======================================================================= FAQ (details/summary, iOS grouped) */
.faq{ background:var(--card); border-radius:var(--r-lg); box-shadow:var(--card-shadow); overflow:hidden; }
.faq details{ position:relative; }
.faq details + details::before{ content:""; position:absolute; top:0; left:16px; right:0; border-top:.5px solid var(--hair); }
.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:12px 14px 12px 16px; font:600 16px/22px var(--sans); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; width:9px; height:9px; border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3); transform:rotate(45deg) translateY(-3px); flex:none; transition:transform 200ms var(--ease); }
.faq details[open] summary::after{ transform:rotate(225deg) translateY(-1px); }
.faq .faq__a{ padding:0 16px 14px; font:400 16px/23px var(--sans); color:var(--ink-2); }
.faq .faq__a p{ margin:0 0 .6em; }
.faq .faq__a a{ color:var(--red-text); text-decoration:underline; text-underline-offset:2px; }

/* ======================================================================= document pages (about, privacy, terms, join, cluster pages) */
.doc{ max-width:var(--measure); margin:0 auto; }
.doc .lt{ padding-top:8px; }
.doc .lt h1{ font-size:34px; line-height:40px; }
.doc__lede{ font:400 19px/27px var(--serif); color:var(--ink-2); margin:6px 0 0; text-wrap:pretty; }
.doc__card{ background:var(--card); border-radius:var(--r-lg); box-shadow:var(--card-shadow); padding:4px 20px 8px; margin-top:16px; }
.doc__card .prose > p:first-child{ margin-top:16px; }
.doc .sec{ margin-top:26px; }

/* ======================================================================= desktop + tablet */
@media (min-width:768px){
  /* the footer groups are always open from here up: headings, not buttons */
  .foot__cols{ grid-template-columns:repeat(3,1fr); gap:18px 24px; }
  .foot__g + .foot__g{ border-top:0; }
  .foot__g summary{ min-height:0; cursor:default; pointer-events:none; margin:0 0 4px; }
  .foot__g summary .chev{ display:none; }
  .foot__g summary h3{ font-size:13px; line-height:18px; }
  .foot__g nav{ display:block; padding:0; }
  .foot__cols a, .foot__cols button{ display:block; min-height:0; font:400 15px/34px var(--sans); }
  .vshows{ grid-template-columns:1fr 1fr; }
  .lt h1{ font-size:40px; line-height:46px; }
  .lead .hl{ font-size:32px; line-height:36px; }
  .sec__grid.two{ grid-template-columns:7fr 5fr; align-items:start; }
  .rail > *{ width:320px; }
  .art h1{ font-size:42px; line-height:47px; }
  .art__dek{ font-size:21px; line-height:30px; }
  .hero{ margin:18px 0 0; }
  .hero .pic{ border-radius:var(--r-lg); }
  .hero figcaption{ padding:8px 2px 0; }
  .nums{ grid-template-columns:repeat(3,1fr); background:none!important; gap:8px; overflow:visible; }
  .nums div{ display:block; background:var(--bg); border-radius:18px; padding:14px 14px 13px; }
  :root[data-theme="dark"] .nums div{ background:var(--card); }
  .nums div + div::before{ display:none; }
  .nums span{ display:block; margin-top:4px; font-size:14px; line-height:19px; }
  .sheet{ left:50%; right:auto; width:540px; bottom:auto; top:50%; border-radius:34px; transform:translate(-50%,-46%) scale(.98); opacity:0; transition:transform 400ms var(--ease), opacity 220ms; max-height:min(84vh,780px); }
  .sheet.on{ transform:translate(-50%,-50%); opacity:1; }
  .sheet.tall{ top:50%; height:min(80vh,720px); }
  .sheet__grab{ display:none; }
  .sheet__h{ padding-top:16px; }
  .vfeat .plate{ aspect-ratio:16/9; padding:22px 22px 24px; }
  .vfeat .plate__t{ font-size:34px; line-height:39px; max-width:20ch; }
  .gcard{ padding:20px; }
  .gacts{ display:flex; }
  .gacts .btn{ flex-direction:row; height:40px; padding:0 14px; border-radius:999px; font-size:14px; gap:7px; }
  .gacts .btn .i{ width:18px; height:18px; }
  .doc .lt h1{ font-size:42px; line-height:48px; }
  .doc__card{ padding:6px 32px 14px; }
}
@media (prefers-color-scheme: dark) and (min-width:768px){ :root:not([data-theme="light"]) .nums div{ background:var(--card); } }
@media (min-width:1100px){
  .tabbar,.tabbar-edge,.toolbar,.toolbar-edge{ display:none!important; }
  .foot{ padding-bottom:44px; }
  /* desktop bar: one full-width glass bar (apple.com style) with the market ticker pinned under it */
  .bar{ height:calc(var(--bar-h) + var(--tick-h)); transition:transform 380ms var(--ease); }
  .bar__glass{ display:block; position:absolute; inset:0; border-radius:0; box-shadow:0 .5px 0 var(--hair); }
  .bar__glass::before{ display:none; }
  .bar__edge{ display:none; }
  .bar.tucked{ transform:translateY(calc(var(--bar-h) * -1)); }
  .bar__in{ height:var(--bar-h); }
  .bar__logo, .has-lt .bar__logo{ opacity:1!important; transform:none!important; pointer-events:auto!important; }
  .bar__logo img{ height:26px; }
  .bar__title{ display:none; }
  .nav-desk{ display:flex; position:absolute; left:50%; transform:translateX(-50%); height:42px; padding:3px; border-radius:999px; gap:2px; background:var(--fill-2); }
  .nav-desk a{ display:flex; align-items:center; gap:7px; height:36px; padding:0 15px; border-radius:999px; font:500 15px/1 var(--sans); color:var(--ink); }
  .nav-desk a .i{ width:19px; height:19px; color:var(--ink-2); }
  .nav-desk a[aria-current="page"]{ background:var(--card); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.1),0 0 0 .5px rgba(0,0,0,.04); }
  .nav-desk a[aria-current="page"] .i{ color:var(--red-text); }
  .nav-desk a:not([aria-current="page"]):hover{ background:var(--fill-2); }
  .bar .circle.glass, .bar .pill-back.glass{ background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .bar .circle.glass::before, .bar .pill-back.glass::before{ display:none; }
  .bar .circle:hover, .bar .pill-back:hover{ background:var(--fill-2); }
  .desk-ic{ display:grid; }
  .join-btn{ display:inline-flex; height:40px; padding:0 18px; border-radius:999px; align-items:center; gap:7px; font:600 15px/1 var(--sans); background:var(--red-fill); color:#fff; }
  .join-btn:hover{ background:var(--red-hover); }
  .join-btn .i{ width:19px; height:19px; }
  .tick{ display:flex; position:relative; height:var(--tick-h); align-items:center; gap:22px; border-top:.5px solid var(--hair-2); font:500 13.5px/18px var(--sans); white-space:nowrap; overflow:hidden; }
  .tick__lab{ color:var(--ink-2); font-weight:600; display:flex; align-items:center; gap:8px; }
  .tick__lab .i{ width:19px; height:19px; }
  .tick button{ display:inline-flex; gap:6px; align-items:center; color:var(--ink); min-height:32px; padding:0 6px; margin:0 -6px; border-radius:8px; }
  .tick button:hover{ background:var(--fill-2); }
  .tick button span:first-child{ color:var(--ink-2); }
  .tick button:hover span:first-child{ color:var(--ink); }
  .tick__at{ margin-left:auto; color:var(--ink-2); }
  .lt{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; padding:22px 0 4px; }
  .lt__logo{ display:none; }
  .lt h1{ font-size:44px; line-height:50px; }
  .lt h1.vh-phone{ position:static!important; width:auto; height:auto; clip:auto; overflow:visible; }
  .doc .lt{ display:block; }
  .grid4 .row .pic{ display:none; }
  .tabs{ margin:14px 0 2px; padding:2px 0 4px; -webkit-mask:none; mask:none; flex-wrap:wrap; overflow:visible; }
  .mk-h, .tape{ display:none; }
  .top3{ grid-template-columns:300px minmax(0,1fr) 300px; grid-template-areas:"run lead side"; gap:22px; margin-top:16px; }
  .t-lead{ grid-area:lead; } .t-run{ grid-area:run; } .t-side{ grid-area:side; }
  .top3 .lead .hl{ font-size:38px; line-height:42px; letter-spacing:-.026em; }
  .top3 .lead .dek{ font-size:17px; line-height:25px; }
  .top3 .lead__body{ padding:18px 22px 22px; gap:9px; }
  .justin{ margin-top:16px; }
  .justin__txt{ display:flex; gap:14px; align-items:baseline; }
  .justin .hl{ font-size:17px; }
  .sec{ margin-top:44px; }
  .sec__h h2{ font-size:26px; line-height:32px; }
  .band{ margin:48px calc(50% - 50vw) 0; padding:30px calc(50vw - 50%) 34px; }
  .band .wrap2{ max-width:var(--wide); margin:0 auto; }
  .rail{ margin:0; padding:0; overflow:visible; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  .rail > *{ width:auto; }
  .grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:start; }
  .grid4 .colh{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 10px; }
  .grid4 .colh h2{ margin:0; font:700 21px/26px var(--display); letter-spacing:-.015em; }
  .grid4 .colh a{ font:500 14px/20px var(--sans); color:var(--red-text); display:inline-flex; align-items:center; }
  .grid4 .colh a .i{ width:16px; height:16px; }
  .big4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .big4 .feature .pic{ aspect-ratio:16/10; }
  .big4 .feature .hl{ font-size:18px; line-height:23px; }
  /* a card set as text fills its height like its neighbours: a larger headline, more summary, the time at the foot */
  .big4 .feature:not(:has(.pic)) .feature__body{ align-content:stretch; grid-template-rows:auto 1fr auto; padding:18px 18px 16px; }
  .big4 .feature:not(:has(.pic)) .hl{ font-size:22px; line-height:27px; letter-spacing:-.02em; }
  .big4 .feature:not(:has(.pic)) .dek{ -webkit-line-clamp:6; align-self:start; }
  .big4 .feature:not(:has(.pic)) .meta{ align-self:end; }
  .duo{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:22px; align-items:start; }
  .duo > .sec{ margin-top:0; }
  .trio{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); gap:22px; align-items:start; }
  .art h1{ font-size:46px; line-height:51px; }
  .artgrid{ display:grid; grid-template-columns:minmax(0,var(--measure)) 300px; gap:56px; justify-content:center; }
  .artgrid .art, .artgrid .talk, .artgrid .more{ margin-left:0; margin-right:0; }
  .artgrid > aside{ position:sticky; top:calc(var(--bar-h) + var(--tick-h) + 16px); align-self:start; display:grid; gap:16px; margin-top:12px; transition:top 380ms var(--ease); }
  .bar.tucked ~ main .artgrid > aside, .bar.tucked ~ main .comm > aside, .bar.tucked ~ main .vgrid > aside{ top:calc(var(--tick-h) + 14px); }
  .comm{ display:grid; grid-template-columns:290px minmax(0,1fr) 300px; gap:26px; align-items:start; }
  .comm > aside{ position:sticky; top:calc(var(--bar-h) + var(--tick-h) + 14px); display:grid; gap:16px; }
  .vgrid{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:28px; align-items:start; }
  .vgrid > aside{ position:sticky; top:calc(var(--bar-h) + var(--tick-h) + 14px); transition:top 380ms var(--ease); }
  .vshows{ display:grid; grid-template-columns:repeat(3,1fr)!important; gap:16px; }
  .vgrid aside .sec{ margin-top:0!important; }
  .vgrid .vside{ display:grid; grid-template-columns:1fr; gap:14px; }
  .ggrid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; align-items:start; }
  .glist{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
  .glist .gcard + .gcard{ margin-top:0; }
  .ggrid aside{ position:sticky; top:calc(var(--bar-h) + var(--tick-h) + 14px); display:grid; gap:16px; }
  .foot__cols{ grid-template-columns:repeat(5,1fr); gap:18px 24px; }
  .join.wide{ grid-template-columns:auto 1fr auto; align-items:center; gap:28px; padding:24px 28px; }
  .latest ol{ list-style:none; margin:0; padding:4px 16px 12px 16px; }
  .latest li{ display:grid; grid-template-columns:14px 1fr; gap:2px 10px; position:relative; padding-bottom:12px; }
  .latest li::before{ content:""; width:9px; height:9px; border-radius:9px; border:2px solid var(--ink-3); background:var(--card); margin-top:4px; grid-row:span 3; position:relative; z-index:1; }
  .latest li.now::before{ border-color:var(--red); background:var(--red); }
  .latest li::after{ content:""; position:absolute; left:6px; top:12px; bottom:-4px; border-left:1.5px solid var(--hair); }
  .latest li:last-child::after{ display:none; }
  .latest time{ font:600 12.5px/16px var(--sans); color:var(--ink-2); }
  .latest li.now time{ color:var(--red-text); }
  .latest .hl{ font-size:15px; line-height:20px; }
  .latest .meta{ font-size:12.5px; }
  .mkmod{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:4px 8px 8px; }
  .mkmod button{ text-align:left; padding:10px 10px 12px; border-radius:14px; display:grid; gap:2px; }
  .mkmod button:hover{ background:var(--fill-2); }
  .mkmod .n{ font:500 13px/17px var(--sans); color:var(--ink-2); }
  .mkmod .v{ font:600 20px/25px var(--display); letter-spacing:-.01em; }
  .mkmod .c{ font:600 13px/17px var(--sans); }
  .mkconv{ display:flex; align-items:center; gap:12px; margin:0 16px 16px; padding:10px 14px; border-radius:14px; background:var(--inset); font:500 14px/18px var(--sans); color:var(--ink-2); }
  .mkconv input{ width:120px; height:38px; border:0; border-radius:10px; background:var(--card); padding:0 10px; font:600 17px/1 var(--sans); color:var(--ink); font-variant-numeric:tabular-nums; }
  .mkconv b{ margin-left:auto; font:600 19px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; }
}
/* phones: section chips and filter buttons are a full finger wide */
@media (max-width:767px){
  .tab{ height:40px; line-height:40px; }
  .chips a, .chips button{ height:40px; }
}
/* very narrow screens and large text (an iPhone in Display Zoom, Safari page zoom): nothing is cut off at the edge.
   Buttons may wrap onto two lines, and the tab bar keeps its icons (the labels stay for screen readers). */
@media (max-width:359px){
  .btn{ white-space:normal; height:auto; min-height:44px; padding-top:10px; padding-bottom:10px; line-height:1.25; text-align:center; max-width:100%; }
  .join__btns{ width:100%; }
  .join__btns .btn{ flex:1 1 100%; }
  .tabbar__main a{ font-size:10px; letter-spacing:-.01em; }
}
@media (max-width:339px){
  .tabbar__main a span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .tabbar__main a .i{ width:27px; height:27px; }
}
@media (max-width:1099px){ .only-desk{ display:none!important; } }
@media (min-width:1100px){ .only-phone{ display:none!important; } }
.top3{ display:grid; gap:12px; margin-top:4px; }
.top3 > *, .box, .ask, .card, .rows{ min-width:0; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition-duration:1ms!important; animation:none!important; }
  .tabbar.compact{ transform:none; }
}
@media print{ .bar,.tabbar,.tabbar-edge,.toolbar,.toolbar-edge,.composer,.sheet,.dimmer,.foot__join{ display:none!important; } body{ background:#fff; } }

/* ======================================================================= small shared pieces (from the document pages) */
.nw{ white-space:nowrap; }   /* a phone number or a price that must not break across lines */
/* numbered steps (join, WhatsApp status) */
.steps{ list-style:none; margin:16px 0 0; padding:0; counter-reset:st; background:var(--card); border-radius:var(--r-lg); box-shadow:var(--card-shadow); overflow:hidden; }
.steps > li{ counter-increment:st; display:grid; grid-template-columns:34px 1fr; gap:2px 14px; padding:15px 16px 16px; position:relative; align-items:start; }
.steps > li::before{ content:counter(st); grid-row:span 3; width:34px; height:34px; border-radius:999px; background:var(--red-wash); color:var(--red-text);
  font:700 17px/34px var(--display); text-align:center; font-variant-numeric:tabular-nums; }
.steps > li + li::after{ content:""; position:absolute; top:0; left:64px; right:0; border-top:.5px solid var(--hair); }
.steps b{ display:block; font:600 17px/23px var(--sans); padding-top:5px; text-wrap:pretty; }
.steps p{ margin:3px 0 0; font:400 15px/21px var(--sans); color:var(--ink-2); text-wrap:pretty; }
.steps .btn{ justify-self:start; margin-top:11px; }
/* a callout under a card */
.callout{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; margin-top:12px; padding:14px 16px; border-radius:var(--r-lg);
  background:var(--fill-2); font:400 15px/21px var(--sans); color:var(--ink); }
.callout .i{ width:22px; height:22px; color:var(--red-text); margin-top:-1px; }
.callout b{ font-weight:600; }
.callout a{ color:var(--red-text); font-weight:600; }