/* ============================================================================
   ONE TEMPLATE. Dark, always. Every site uses this file unchanged.
   A site's identity = the :root override block (7 values) + its logo.
   Fonts: Barlow Condensed (display) + Work Sans (body).
   ========================================================================= */
:root{
  --accent:#0062ff;          /* primary brand */
  --accent-2:#7b2bff;        /* secondary, for gradients */
  --tint:#0d1220;            /* page bg, TINTED toward the brand — not black */
  --surface:#141a28;
  --surface-2:#1b2233;
  --line:#2a3346;
  --text:#f2f5fa; --muted:#9aa6bb;
  --display:"Barlow Condensed",Impact,sans-serif;
  --body:"Work Sans",system-ui,-apple-system,sans-serif;
  --maxw:1400px;
}
*{box-sizing:border-box}
body{
  margin:0;color:var(--text);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 620px at 12% -8%, color-mix(in srgb,var(--accent) 20%,transparent), transparent 62%),
    radial-gradient(900px 540px at 92% 4%, color-mix(in srgb,var(--accent-2) 16%,transparent), transparent 60%),
    var(--tint);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.03;text-transform:uppercase;font-weight:600}

/* ---- header ---- */
.bar{background:color-mix(in srgb,var(--tint) 82%,#000);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.bar-in{display:flex;align-items:center;gap:38px;height:96px}
/* brand blues sit close to the header's near-black; lift them so the outlined
   parts of a masthead don't disappear */
.bar img.logo{height:74px;width:auto;filter:brightness(1.32) saturate(1.1)}
.bar .word{font-family:var(--display);font-size:44px;font-weight:700;line-height:1}
/* nowrap + min-width:0 — a long category list must clip, never wrap the header
   onto a second line */
/* nav takes the space between logo and search and spreads across it */
.bar nav{display:flex;flex:1;flex-wrap:nowrap;justify-content:space-evenly;gap:10px;min-width:0;
  font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;overflow:hidden}
.bar nav a{position:relative;white-space:nowrap;color:#c2cbdb;padding:8px 2px;
  transition:color .2s ease}
/* the hover mark: an accent rule that wipes out from the centre */
.bar nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(0);transform-origin:center;transition:transform .26s cubic-bezier(.2,.7,.25,1)}
.bar nav a:hover{color:#fff}
.bar nav a:hover::after,.bar nav a.on::after{transform:scaleX(1)}
.bar nav a.on{color:#fff}
.bar .sp{display:none}
/* hamburger — hidden on desktop, drives the dropdown below 900 */
.burg{display:none;flex:none;width:44px;height:40px;padding:9px 8px;border:0;background:none;cursor:pointer;
  flex-direction:column;justify-content:space-between}
.burg span{display:block;height:2.5px;border-radius:2px;background:#dbe3ef;transition:transform .3s,opacity .2s,background .2s}
.burg:hover span{background:var(--accent)}
.bar.open .burg span:nth-child(1){transform:translateY(8.75px) rotate(45deg)}
.bar.open .burg span:nth-child(2){opacity:0}
.bar.open .burg span:nth-child(3){transform:translateY(-8.75px) rotate(-45deg)}
.search{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);
  transition:border-color .2s,box-shadow .2s;
  border-radius:999px;padding:10px 17px;min-width:210px;flex:none}
.search input{background:none;border:0;outline:none;color:var(--text);font-family:var(--body);font-size:15.5px;width:100%}
.search input::placeholder{color:var(--muted)}
.search svg{flex:none;opacity:.7;transition:opacity .2s}
.search:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.search:focus-within svg{opacity:1;color:var(--accent)}

/* one keyboard-focus treatment for everything clickable */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.cta{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:9px 17px;border-radius:4px}

.ad{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:6px;margin:26px 0}
.ad small{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#6b768a}
.ad iframe{border:0;display:block;max-width:100%}

.k{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:8px}
.m{font-size:14px;color:var(--muted)}

/* ============================================================================
   THE STAGE — the top section. A live, auto-advancing cinematic slot with a
   playlist rail beside it. Slow Ken-Burns push on the active frame, crossfade
   between stories, staggered caption entrance, a running progress bar, click
   any rail item to jump, hover anywhere to pause. Not a static grid of boxes.
   ========================================================================= */
.stage{display:grid;grid-template-columns:262px 1fr 348px;gap:14px;height:576px;margin:22px 0 12px}

/* left column — text-only headlines, so the photo isn't half the page */
.stg-side{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:9px;overflow:hidden}
.ss-h{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:14px 16px;color:#fff;background:linear-gradient(90deg,var(--accent),transparent 130%)}
.ss-i{padding:14px 16px;border-top:1px solid var(--line);flex:1 1 0;min-height:0;
  display:flex;flex-direction:column;justify-content:center;transition:background .2s,padding-left .2s}
.ss-i:hover{background:var(--surface-2);padding-left:20px}
.ss-i h4{transition:color .2s}
.ss-i:hover h4{color:var(--accent)}
.ss-i .k{margin-bottom:6px;font-size:11px}
.ss-i h4{font-size:16.5px;font-family:var(--body);font-weight:600;text-transform:none;line-height:1.34;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(prefers-reduced-motion:reduce){.stage *{animation:none!important;transition:none!important}}

.stg-main{position:relative;overflow:hidden;border-radius:9px;background:var(--surface-2);
  box-shadow:0 20px 50px rgba(0,0,0,.45), 0 0 0 1px var(--line)}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease;display:flex;align-items:flex-end}
.slide.on{opacity:1;visibility:visible;z-index:2}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;transform:scale(1.02)}
.slide.on img{animation:kenburns 9s ease-out both}
@keyframes kenburns{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.2%,-1.6%,0)}}
/* ONE shallow scrim, bottom only. The old version stacked a full-height
   vertical fade on a left-hand wash and buried most of the photo. */
.slide .sc{position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.20) 55%,rgba(0,0,0,.62) 70%,
             rgba(0,0,0,.90) 85%,rgba(0,0,0,.99) 100%)}
.slide .cp{position:relative;padding:34px 38px 46px;max-width:60ch}
.slide.on .cp>*{animation:rise .7s cubic-bezier(.2,.7,.25,1) both}
.slide.on .cp>*:nth-child(1){animation-delay:.10s}
.slide.on .cp>*:nth-child(2){animation-delay:.18s}
.slide.on .cp>*:nth-child(3){animation-delay:.28s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* text carries its own legibility so the scrim can stay shallow */
.slide h2{font-size:52px;max-width:19ch;text-shadow:0 2px 4px rgba(0,0,0,.85),0 6px 30px rgba(0,0,0,.75)}
.slide .m{display:block;margin-top:14px;font-size:15px;text-shadow:0 2px 6px rgba(0,0,0,.9)}
.slide .k{font-size:13.5px;text-shadow:0 2px 6px rgba(0,0,0,.9)}
.slide .k::before{content:"";display:inline-block;width:22px;height:2px;background:var(--accent);
  vertical-align:middle;margin-right:9px;margin-bottom:3px}

/* controls */
.stg-main .nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:42px;height:42px;
  border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--tint) 55%,transparent);
  backdrop-filter:blur(6px);color:#fff;font-size:22px;line-height:1;cursor:pointer;
  opacity:0;transition:opacity .25s,background .2s;display:grid;place-items:center;padding-bottom:3px}
.stg-main:hover .nav{opacity:1}
.stg-main .nav:hover{background:var(--accent);border-color:var(--accent)}
.stg-main .prev{left:16px}.stg-main .next{right:16px}
/* NOTE: must not be called .bar — the site header owns that class. */
.stg-main .prog{position:absolute;left:0;right:0;bottom:0;top:auto;height:3px;
  background:color-mix(in srgb,#fff 12%,transparent);z-index:5}
.stg-main .prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* playlist rail */
.stg-rail{display:grid;grid-template-rows:repeat(4,1fr);gap:10px;min-height:0}
.up{position:relative;display:grid;grid-template-columns:32px 110px 1fr;align-items:center;gap:13px;
  background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:12px 14px 12px 4px;
  text-align:left;cursor:pointer;color:inherit;font:inherit;overflow:hidden;min-height:0;
  transition:background .25s,border-color .25s,transform .25s}
.up:hover{background:var(--surface-2);transform:translateX(-3px)}
.up .n{font-family:var(--display);font-size:23px;font-weight:700;color:var(--muted);text-align:center;transition:color .25s}
.up img{width:110px;height:74px;object-fit:cover;object-position:center 15%;border-radius:4px;opacity:.62;transition:opacity .3s}
.up h4{font-size:16.5px;font-family:var(--body);font-weight:600;text-transform:none;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.up .k{font-size:11px}
.up .k{margin-bottom:4px;font-size:9.5px}
.up.on{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 22%,var(--surface)),var(--surface));
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.up.on .n{color:var(--accent)}
.up.on img{opacity:1}
.up.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}

/* ---- TOP AD STRIP — sits ABOVE the header, on its own black band so the
       creative's own black background runs edge to edge. ---- */
/* no black band — the strip carries the page's own background.
   Sizes are pinned so nothing can collapse the creative to a small variant. */
.topad{display:flex;justify-content:center;align-items:flex-start;overflow:hidden;line-height:0;margin:30px 0 4px}
/* directly under the header — no dead band above it */
.topad.flush{margin:0}
.topad iframe{border:0;display:block;width:970px;height:250px;flex:none;max-width:100%}
.ad iframe{flex:none}

/* ---- section heads: coloured rule, not a grey line ---- */
.sh{display:flex;align-items:center;gap:12px;margin:34px 0 14px;padding-top:10px;
    border-top:3px solid transparent;
    border-image:linear-gradient(90deg,var(--accent),var(--accent-2) 40%,transparent 78%) 1}
.sh h2{font-size:34px}
.sh .all{margin-left:auto;font-family:var(--body);font-size:14.5px;color:var(--accent);font-weight:600;
  text-transform:none;display:inline-flex;align-items:center;gap:6px;transition:gap .2s,color .2s}
.sh .all:hover{gap:11px;color:#fff}

.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.g6{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* cards: image lifts and zooms, headline takes the accent */
.card{display:block}
.card .imgw{position:relative;overflow:hidden;border-radius:5px;display:block}
.card img{aspect-ratio:16/10;object-fit:cover;object-position:center 15%;width:100%;background:var(--surface-2);border-radius:5px;
  transition:transform .5s cubic-bezier(.2,.7,.25,1)}
.card:hover img{transform:scale(1.07)}
.card h3{font-size:20px;margin:11px 0 5px;transition:color .2s}
.card:hover h3{color:var(--accent)}
.g6 .card img{aspect-ratio:1/1}
.g6 .card h3{font-size:17px}

/* ---- PROMO SECTION — 3 columns: articles | promo box | articles.
       The middle box is a BRANDING panel. Magazines put the issue cover in it;
       everyone else puts the logo + a tagline. No background image, no video,
       no CTA — it exists to say "this is a real publication". ---- */
.promo{margin-top:36px;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:radial-gradient(900px 460px at 50% 0%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 70%),
             linear-gradient(180deg,var(--surface),var(--tint))}
/* an explicit row height is what makes the three columns line up — without it
   the stretch/1fr children have no height to divide and the section balloons */
.promo .inner{display:grid;grid-template-columns:1fr 470px 1fr;grid-template-rows:640px;gap:26px;align-items:stretch}
/* the two flanking columns stretch to the panel's height so all three columns
   end on the same line — no ragged bottom */
.promo .side{display:grid;gap:18px;grid-auto-rows:1fr;align-content:stretch}
.promo .side .card{display:flex;flex-direction:column;min-height:0}
.promo .side .card .imgw{flex:1;min-height:0}
.promo .side .card img{aspect-ratio:auto;height:100%;width:100%;object-fit:cover;object-position:center 15%}
.promo .side .card h3{font-size:19px;flex:none}

.pbox{position:relative;border-radius:12px;overflow:hidden;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:22px 26px 24px;
  background:linear-gradient(165deg, color-mix(in srgb,var(--accent) 20%,var(--surface)), var(--surface-2));
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px var(--line)}
.pbox p{font-size:17px;line-height:1.45;color:#c7d2e2;margin:0;max-width:34ch}

/* --- with a cover: the cover fills the panel, accent button under it --- */
.pbox .cover-img{width:100%;flex:1;min-height:0;object-fit:contain;
  border-radius:4px;filter:drop-shadow(0 20px 44px rgba(0,0,0,.7));transition:transform .35s}
.pbox:hover .cover-img{transform:translateY(-5px)}
/* deep brand blue, not a light tint — a white masthead on a pale accent is
   unreadable, which is exactly what the first pass did */
.pbox .lbtn{width:100%;flex:none;display:grid;place-items:center;padding:16px 24px;border-radius:9px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 62%,#000),
             color-mix(in srgb,var(--accent) 34%,#000));
  border:1px solid color-mix(in srgb,var(--accent) 70%,transparent);
  box-shadow:0 12px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .25s,background .25s}
.pbox:hover .lbtn{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 74%,#000),
             color-mix(in srgb,var(--accent) 44%,#000))}
.pbox:hover .lbtn{transform:translateY(-2px)}
/* height must be explicit — the masthead SVG has no intrinsic size */
.pbox .lbtn img{height:46px;width:auto;max-width:100%}
.pbox .lbtn.mono img{filter:brightness(0) invert(1)}
.pbox .lbtn.chip img{background:#fff;border-radius:6px;padding:6px 12px;height:62px}

/* --- no cover: the logo plate grows to fill the panel instead of leaving a
       hole, and the tagline is set in display type --- */
.pbox .plate{width:100%;flex:1;min-height:200px;display:grid;place-items:center;
  background:#fff;border-radius:14px;padding:26px;box-shadow:0 18px 44px rgba(0,0,0,.45)}
.pbox .plate img{width:100%;max-width:340px;height:auto}
.pbox .plate.mono{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 78%,#000))}
.pbox .plate.mono img{filter:brightness(0) invert(1)}
.pbox.nocover p{font-family:var(--display);font-size:29px;line-height:1.1;text-transform:uppercase;
  font-weight:600;color:#fff;max-width:22ch}

/* ---- list + rail ---- */
.cols{display:grid;grid-template-columns:1fr 330px;gap:40px;align-items:start;margin-top:8px}
.row-item{display:grid;grid-template-columns:220px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);
  transition:background .2s}
.row-item:hover{background:color-mix(in srgb,var(--surface) 55%,transparent)}
.row-item .imgw{overflow:hidden;border-radius:5px;display:block}
.row-item img{aspect-ratio:16/10;object-fit:cover;object-position:center 15%;width:100%;border-radius:5px;
  transition:transform .5s cubic-bezier(.2,.7,.25,1)}
.row-item:hover img{transform:scale(1.07)}
.row-item h3{font-size:26px;margin:6px 0;transition:color .2s}
.row-item:hover h3{color:var(--accent)}
/* The rail must NOT be sticky as a whole — it is taller than the viewport, so
   pinning it makes everything below the fold unreachable (the tall ad never
   appeared). Only the trailing ad sticks, which is the point of a 600px unit. */
.rail{align-self:start;display:grid;gap:18px}
.rail>[data-fam]:last-child{position:sticky;top:110px}
.box{background:var(--surface);border:1px solid var(--line);padding:18px;border-radius:6px}
.box h2{font-size:24px;margin-bottom:10px}
.rk{display:flex;gap:13px;padding:11px 0;border-bottom:1px solid var(--line)}
.rk:last-child{border:0}
.rk b{font-family:var(--display);font-size:30px;color:var(--accent);width:30px;transition:transform .22s}
.rk h4{font-size:16.5px;font-family:var(--body);font-weight:600;text-transform:none;line-height:1.35;
  transition:color .2s}
.rk:hover h4{color:var(--accent)}
.rk:hover b{transform:scale(1.16)}
/* thumbnail list — fills the rail so the column doesn't run out under the ad */
.pk{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.pk:last-child{border:0;padding-bottom:0}
.pk .imgw{overflow:hidden;border-radius:4px;display:block;height:60px}
.pk img{width:88px;height:60px;object-fit:cover;object-position:center 15%;border-radius:4px;
  transition:transform .45s cubic-bezier(.2,.7,.25,1)}
.pk:hover img{transform:scale(1.1)}
.pk .k{margin-bottom:4px;font-size:10.5px}
.pk h4{font-size:15.5px;font-family:var(--body);font-weight:600;text-transform:none;line-height:1.3;
  transition:color .2s}
.pk:hover h4{color:var(--accent)}

/* ============================ ARTICLE PAGE ============================== */
/* reading progress — tracks the article body, not the whole document */
.rp{position:fixed;top:0;left:0;right:0;height:3px;z-index:80;background:transparent;pointer-events:none}
.rp i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent)}

/* HERO — full-bleed, title sits on the image */
.ahero{position:relative;min-height:600px;display:flex;align-items:flex-end;overflow:hidden;
  border-bottom:1px solid var(--line)}
.ahero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.ah-sc{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 26%,
  rgba(0,0,0,.55) 62%,rgba(0,0,0,.93) 88%,var(--tint) 100%)}
.ah-in{position:relative;padding-top:60px;padding-bottom:38px;max-width:calc(var(--maxw))}
.ah-in .k{font-size:13.5px}
.ah-in .k::before{content:"";display:inline-block;width:24px;height:2px;background:var(--accent);
  vertical-align:middle;margin-right:10px;margin-bottom:3px}
.ah-in h1{font-size:64px;line-height:1.01;margin:4px 0 0;max-width:22ch;
  text-shadow:0 2px 5px rgba(0,0,0,.8),0 8px 40px rgba(0,0,0,.7)}
.ah-in .stand{font-size:21px;line-height:1.5;color:#dbe3ef;margin:18px 0 0;max-width:62ch;font-weight:400;
  text-shadow:0 2px 8px rgba(0,0,0,.9)}
.hcap{margin:12px 0 0;font-size:13.5px;color:var(--muted);line-height:1.5;
  padding-left:12px;border-left:3px solid var(--accent)}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:0 0 14px;font-size:14px;color:#b8c3d4}
.crumbs a{color:#fff}
.crumbs a:hover{color:var(--accent)}
.crumbs em{font-style:normal;color:#93a0b4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44ch}

.art-cols{margin-top:34px}

/* Desktop article pages: let the sidebar travel with the story.
   .rail is align-self:start, so its box is only as tall as its own content and
   the sticky unit stops moving the moment that box scrolls out of view - on a
   long feature it unpinned a screen or two in. Stretching the rail to the full
   grid row and giving its LAST child the remaining space (1fr) means that unit
   has room to stay pinned for the entire length of the article. */
@media(min-width:900px){
  .art-cols .rail{align-self:stretch;grid-template-rows:repeat(3,max-content) 1fr}
  .art-cols .rail>[data-fam]:last-child{position:sticky;top:96px;align-self:start}
}
/* the READING elements are measure-limited; ad units are not, so an in-article
   banner can use the full column instead of looking like a stamp */
.art{max-width:none}
.art>p,.art>h2,.art>blockquote,.art>figure,.art>.toc,.art>.kf,
.art>.tags,.art>.abio,.art>.nextup{max-width:76ch}
.byline{display:flex;align-items:center;gap:14px;margin:26px 0 0;padding:0}
.byline .av{width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-size:19px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.byline strong{display:block;font-size:16.5px}
.byline .m{display:block;margin-top:2px;color:#c3cddc}
.byline .m b{color:var(--accent);font-weight:600}

/* contents jump box */
.toc{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px 22px;margin:0 0 30px}
.toc h3{font-size:15px;letter-spacing:.14em;color:var(--muted);margin-bottom:12px}
.toc a{display:block;padding:8px 0 8px 18px;position:relative;font-size:16.5px;font-weight:600;color:#d8e0ee;
  border-bottom:1px solid var(--line);transition:color .2s,padding-left .2s}
.toc a:last-child{border:0;padding-bottom:0}
.toc a::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3px;
  border-radius:50%;background:var(--accent);opacity:.55;transition:opacity .2s,transform .2s}
.toc a:hover{color:var(--accent);padding-left:24px}
.toc a:hover::before{opacity:1;transform:scale(1.35)}

.art figure{margin:32px 0}
/* portrait sources would otherwise run 1000px tall in the column */
.art figure img{width:100%;max-height:560px;object-fit:cover;object-position:center 20%;border-radius:7px}
.art figcaption{margin-top:10px;font-size:13.5px;color:var(--muted);line-height:1.5;
  padding-left:12px;border-left:3px solid var(--accent)}
.art figcaption .cred{display:block;margin-top:3px;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:#6f7c92}
.art p{font-size:19px;line-height:1.72;margin:0 0 22px;color:#e2e8f2}
.art p.lead{font-size:21px;line-height:1.66}
/* drop cap on the opening paragraph */
.art p.lead::first-letter{float:left;font-family:var(--display);font-size:76px;line-height:.82;
  padding:6px 12px 0 0;color:var(--accent)}
.art .ad{margin:34px 0}

/* ---- real WordPress content: tables, lists, links, embeds ---- */
.art a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.art a:hover{color:#fff;border-bottom-color:#fff}
.art h3{font-size:25px;margin:28px 0 12px}
.art h4{font-size:21px;margin:24px 0 10px}
.art ul,.art ol{margin:0 0 22px;padding-left:24px;max-width:76ch}
.art li{font-size:18.5px;line-height:1.66;margin-bottom:10px;color:#e2e8f2}
.art li::marker{color:var(--accent)}
.art strong{color:#fff}
.art hr{border:0;border-top:1px solid var(--line);margin:32px 0;max-width:76ch}
.art img{height:auto;border-radius:6px}
.art table{width:100%;max-width:76ch;border-collapse:collapse;margin:26px 0;font-size:16.5px;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.art th{text-align:left;font-family:var(--display);font-size:17px;letter-spacing:.05em;text-transform:uppercase;
  background:color-mix(in srgb,var(--accent) 24%,var(--surface));color:#fff;padding:12px 16px;
  border-bottom:1px solid var(--line)}
.art td{padding:12px 16px;border-bottom:1px solid var(--line);color:#dbe3ef;vertical-align:top}
.art tr:last-child td{border-bottom:0}
.art tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
.art iframe{max-width:100%;border:0;border-radius:8px}
.art .wp-block-image,.art figure.aligncenter{margin-left:auto;margin-right:auto}
.art .alignleft{float:none}
.art .wp-caption-text{font-size:13.5px;color:var(--muted)}
/* section-lead paragraph on archive/flat pages */
.phead{padding:26px 0 4px}
.phead h1{font-size:52px;margin:6px 0 0}
.phead p{margin:10px 0 0;color:var(--muted);font-size:16px}

/* ---- pagination ---- */
.pager{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:30px 0 10px;
  padding-top:22px;border-top:1px solid var(--line)}
.pgnums{display:flex;gap:8px;flex-wrap:wrap;margin:0 auto}
.pg{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 14px;border-radius:6px;
  background:var(--surface);border:1px solid var(--line);color:#d3dbe9;font-family:var(--display);
  font-size:18px;font-weight:600;letter-spacing:.03em;transition:background .2s,border-color .2s,color .2s}
.pg:hover{background:color-mix(in srgb,var(--accent) 22%,var(--surface));border-color:var(--accent);color:#fff}
.pg.on{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#000));
  border-color:transparent;color:#fff}
.pg.off{opacity:.35;pointer-events:none}
.pager .gap{color:var(--muted);align-self:center;padding:0 2px}

/* ---- search page ---- */
.bigsearch{display:flex;align-items:center;gap:12px;margin:18px 0 26px;padding:14px 20px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
.bigsearch:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}
.bigsearch svg{flex:none;opacity:.75}
.bigsearch input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);
  font-family:var(--body);font-size:20px}
.bigsearch input::placeholder{color:var(--muted)}
.snone{color:var(--muted);font-size:17px;padding:18px 0}
.seclist{display:grid;gap:2px}
.seclist a{padding:10px 0;border-bottom:1px solid var(--line);font-size:16.5px;font-weight:600;color:#d3dbe9;
  transition:color .2s,padding-left .2s}
.seclist a:last-child{border:0}
.seclist a:hover{color:var(--accent);padding-left:7px}

/* tags, author box, read-next */
.tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:34px 0 0;padding-top:22px;
  border-top:1px solid var(--line)}
.tags span{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.tags a{font-size:14.5px;font-weight:600;padding:7px 14px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);color:#d3dbe9;
  transition:background .2s,border-color .2s,color .2s}
.tags a:hover{background:color-mix(in srgb,var(--accent) 20%,var(--surface));
  border-color:var(--accent);color:#fff}
.abio{display:flex;gap:18px;align-items:flex-start;margin-top:30px;padding:22px;border-radius:9px;
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent)}
.abio .av{width:54px;height:54px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-size:21px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.abio strong{font-size:19px;font-family:var(--display);letter-spacing:.02em}
.abio p{font-size:15.5px;line-height:1.55;color:var(--muted);margin:6px 0 0}
.nextup{display:block;margin-top:26px;padding:20px 24px;border-radius:9px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 26%,var(--surface)),var(--surface));
  border:1px solid var(--line);transition:transform .25s,border-color .25s}
.nextup:hover{transform:translateX(5px);border-color:var(--accent)}
.nextup span{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700}
.nextup h3{font-size:24px;margin-top:8px}
.art h2{font-size:32px;margin:38px 0 16px;padding-top:16px;border-top:1px solid var(--line);scroll-margin-top:120px}
.art blockquote{margin:32px 0;padding:4px 0 4px 24px;border-left:4px solid var(--accent);
  font-family:var(--display);font-size:29px;line-height:1.22;text-transform:uppercase;color:#fff}
/* key-facts panel */
.kf{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:7px;padding:20px 24px;margin:30px 0}
.kf h3{font-size:22px;margin-bottom:12px}
.kf ul{margin:0;padding-left:20px}
.kf li{font-size:16.5px;line-height:1.55;margin-bottom:8px;color:#d5dded}
.kf li::marker{color:var(--accent)}
.kf li:last-child{margin-bottom:0}

/* ---- FOOTER — masthead + section columns + a legal bar ---- */
.foot{margin-top:52px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 70%,var(--tint)),var(--tint))}
.foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-top:44px;padding-bottom:40px}
.fbrand .flogo{height:64px;width:auto;margin-bottom:16px;filter:brightness(1.32) saturate(1.1)}
.fbrand .fword{display:block;font-family:var(--display);font-size:38px;font-weight:700;margin-bottom:14px}
.fbrand p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55;max-width:38ch}
.fcol h4{font-size:19px;letter-spacing:.05em;margin-bottom:14px;
  padding-bottom:10px;border-bottom:2px solid var(--accent);display:inline-block}
.fcol a{display:block;padding:7px 0;color:#c2cbdb;font-size:15.5px;transition:color .2s,padding-left .2s}
.fcol a:hover{color:var(--accent);padding-left:7px}
.fbar{border-top:1px solid var(--line)}
.fbar-in{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding-top:20px;padding-bottom:26px;
  color:var(--muted);font-size:14.5px}
.fmini{margin-left:auto;display:flex;gap:22px}
.fmini a{color:var(--muted)}
.fmini a:hover{color:#fff}
/* ==========================================================================
   RESPONSIVE — 4 tiers.  ≥1200 desktop · 900–1199 tablet landscape ·
   600–899 tablet portrait · <600 phone.  Every ad unit is swapped for one
   that actually fits the column it lands in.
   ========================================================================= */

/* ---------- TABLET LANDSCAPE (≤1199) ---------- */
@media(max-width:1199px){
  .wrap{padding:0 18px}
  .bar-in{gap:20px;height:84px}
  .bar img.logo{height:56px}
  .bar nav{font-size:17px;gap:14px;justify-content:flex-start}
  .search{min-width:170px}
  .stage{grid-template-columns:1fr 300px;grid-template-rows:auto;height:470px}
  .stg-side{display:none}                 /* headline column folds away first */
  .slide h2{font-size:40px}
  .slide .cp{padding:26px 28px 36px}
  .up{grid-template-columns:26px 84px 1fr;gap:10px;padding:9px 11px 9px 3px}
  .up img{width:84px;height:56px}
  .up h4{font-size:14.5px;-webkit-line-clamp:2}
  .g5{grid-template-columns:repeat(4,1fr)}
  .g6{grid-template-columns:repeat(4,1fr)}
  .cols{grid-template-columns:1fr 300px;gap:26px}
  .promo .inner{grid-template-columns:1fr 340px 1fr;grid-template-rows:520px;gap:18px}
  .pbox .lbtn img{height:34px}
  .ah-in h1{font-size:48px}
  .art h1{font-size:44px}
  .foot-in{grid-template-columns:1fr 1fr 1fr;gap:28px}
  .fbrand{grid-column:1/-1}
}

/* ---------- TABLET PORTRAIT (≤899): one column everywhere ---------- */
@media(max-width:899px){
  /* header collapses to  [☰] [logo] [search]  with a dropdown menu */
  .bar-in{height:68px;gap:12px}
  .bar img.logo{height:44px}
  .burg{display:flex}
  .search{flex:1;min-width:0;max-width:320px;margin-left:auto}
  .bar nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;justify-content:flex-start;
    gap:0;font-size:20px;background:color-mix(in srgb,var(--tint) 96%,#000);
    border-bottom:1px solid var(--line);box-shadow:0 24px 50px rgba(0,0,0,.6);
    max-height:0;overflow:hidden;transition:max-height .34s cubic-bezier(.2,.7,.25,1)}
  .bar.open nav{max-height:80vh;overflow-y:auto}
  .bar nav a{padding:15px 22px;border-bottom:1px solid var(--line);width:100%}
  .bar nav a::after{left:22px;right:auto;width:26px;bottom:10px;transform-origin:left}
  .bar nav a:hover{background:var(--surface)}

  .stage{grid-template-columns:1fr;height:auto;gap:10px}
  .stg-main{height:420px}
  .slide h2{font-size:34px;max-width:none}
  .stg-rail{grid-template-rows:none;grid-auto-flow:column;grid-auto-columns:74%;
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
  .up{scroll-snap-align:start}
  .stg-main .nav{opacity:1}

  .g5,.g6,.g4{grid-template-columns:repeat(2,1fr);gap:16px}
  .g6 .card img{aspect-ratio:16/10}
  .sh h2{font-size:27px}
  .row-item{grid-template-columns:150px 1fr;gap:14px}
  .row-item h3{font-size:20px}
  /* KEEP a real sidebar on tablet portrait — a 300px column stacked full width
     is what stranded the tall ad in an empty band. A 260px rail is exactly what
     the 160x600 skyscraper is for. */
  .cols{grid-template-columns:1fr;gap:26px}
  .rail{gap:16px}
  .rail>[data-fam]:last-child{top:82px}
  .box{padding:14px}
  .box h2{font-size:20px}
  .rk b{font-size:25px;width:24px}
  .rk h4{font-size:14.5px}
  .pk{grid-template-columns:70px 1fr;gap:10px}
  .pk .imgw{height:48px}
  .pk img{width:70px;height:48px}
  .pk h4{font-size:14px}
  .promo .inner{grid-template-columns:1fr;grid-template-rows:none;gap:20px}
  .promo .side{grid-auto-rows:auto}
  .promo .side .card .imgw{flex:none}
  .promo .side .card img{aspect-ratio:16/10;height:auto}
  .pbox{max-width:470px;margin:0 auto}

  /* block, not flex — a static image inside a flex row sits BESIDE the text */
  .ahero{min-height:0;display:block}
  .ahero img{position:static;width:100%;height:280px;object-fit:cover}
  .ah-sc{display:none}
  .ah-in{position:static;padding-top:20px;padding-bottom:0}
  .ah-in h1{font-size:36px;max-width:none;text-shadow:none}
  .ah-in .stand{font-size:18px}
  .crumbs em{max-width:24ch}
  .art h1{font-size:36px}
  .art p{font-size:17.5px}
  .art p.lead{font-size:19px}
  .art h2{font-size:26px}
  .art blockquote{font-size:24px}
  .art figure img{max-height:340px}

  /* FOOTER — brand block on top, link columns side by side under it */
  .foot-in{grid-template-columns:repeat(3,1fr);gap:22px 20px;padding-top:34px;padding-bottom:30px}
  .fbrand{grid-column:1/-1;text-align:center;padding-bottom:22px;border-bottom:1px solid var(--line)}
  .fbrand .flogo{height:56px;margin:0 auto 14px}
  .fbrand p{margin:0 auto;max-width:46ch}
  .fcol h4{font-size:17px;margin-bottom:10px}
  .fcol a{padding:6px 0;font-size:15px}
  .fbar-in{flex-direction:column;align-items:center;gap:10px;text-align:center}
  .fmini{margin-left:0}
}

/* real sidebar only where the reading column survives it (≥720) */
@media(min-width:720px) and (max-width:899px){
  .cols{grid-template-columns:1fr 260px;gap:24px}
}
/* below that the rail stacks; its trailing ad would land on the closing banner */
@media(max-width:719px){
  .rail{position:static}
  .rail>[data-fam]:last-child{display:none;position:static}
}

/* ---------- PHONE (≤599) ---------- */
@media(max-width:599px){
  body{font-size:16px}
  .wrap{padding:0 14px}
  .bar img.logo{height:40px}
  .bar nav{font-size:16px;gap:16px}
  .stg-main{height:330px}
  .slide h2{font-size:26px}
  .slide .cp{padding:18px 18px 26px}
  .stg-rail{grid-auto-columns:86%}
  .g5,.g6,.g4{grid-template-columns:1fr;gap:14px}
  .sh{margin:26px 0 12px}
  .sh h2{font-size:24px}
  .row-item{grid-template-columns:110px 1fr;gap:12px}
  .row-item h3{font-size:17.5px}
  .row-item .m{display:none}
  /* below 600 there is no room for a sidebar — stack it, and the ad ladder
     swaps the column units for full-width strips */
  .cols{grid-template-columns:1fr;gap:26px}
  .rail{gap:18px}
  .box{padding:16px}
  /* the rail stacks directly above the closing banner — drop its trailing ad so
     two ad units never sit back to back */
  .rail>[data-fam]:last-child{display:none;position:static}
  .ahero img{height:220px}
  .ah-in h1{font-size:29px}
  .ah-in .stand{font-size:16.5px}
  .art h2{font-size:23px}
  .art blockquote{font-size:21px;padding-left:16px}
  .art figure img{max-height:260px}
  .byline{gap:11px}
  .abio{flex-direction:column;gap:12px}
  .nextup h3{font-size:19px}
  .toc{padding:15px 17px}
  /* phone footer: brand centred, then two link columns, then a wide one */
  .foot-in{grid-template-columns:1fr 1fr;gap:20px 18px;padding-top:28px}
  .foot-in .fcol:last-child{grid-column:1/-1;padding-top:18px;border-top:1px solid var(--line)}
  .foot-in .fcol:last-child h4{font-size:16px}
  .fbrand .flogo{height:48px}
  .fbrand p{font-size:14.5px}
}

/* ---------- AD UNITS ----------
   Sizes are swapped in JS (see ADS_JS) by picking the largest real slot that
   fits the container, so a 970 creative is never clipped into a phone column.
   CSS only stops overflow if the script hasn't run yet. */
.topad iframe,.ad iframe{max-width:100%}
@media(max-width:1199px){.topad iframe{width:auto}}