/* ============================================================================
   DUBAI FAST LIVING — Final V1 · ARTICLE
   Loads after final.css. The V5 article components (key facts, tables,
   calendar strip, muhurat chart, places, flow, steps, FAQs, recap) with one
   layout shared by every kind of story: Modern's header across the top, then
   the floating contents on the left, the reading column with the photo at its
   head, and a side column on the right. The FINAL V1 block at the end adds the
   news and interview parts.
   ========================================================================== */


:root{ --a-top:calc(var(--head-h) + 18px); --a-toc-w:210px; }
@media (max-width:1023px){ :root{ --a-top:calc(var(--head-h) + 62px); } }

.a{padding-top:18px}
.a-ic{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* ─────────────────────────────────────────────────────────────── HEAD */
.a-head{max-width:none}
.a-crumb{display:flex; flex-wrap:wrap; gap:6px; font-size:12px; color:var(--ink-3)}
.a-crumb a:hover{color:var(--deep)}
.a-kicker{display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-size:12px; font-weight:700; color:var(--deep);
  background:var(--tint); padding:3px 10px; border-radius:100px}
.a-kicker::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.a-title{margin-top:10px; max-width:24ch; font-family:var(--f); font-weight:600; font-size:clamp(28px,3.1vw,40px); line-height:1.08;
  letter-spacing:-.02em; color:var(--ink); text-wrap:balance}
.a-dek{margin-top:10px; max-width:68ch; font-size:16px; line-height:1.55; color:var(--ink-2)}
.a-meta{margin-top:14px; padding-top:12px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px}
.a-author{display:flex; align-items:center; gap:9px}
.a-avatar{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--deep); color:#fff;
  font-family:var(--f); font-weight:600; font-size:14px}
.a-author b{display:block; font-size:13px; font-weight:700; color:var(--ink); line-height:1.2}
.a-author span > span{font-size:11.5px; color:var(--ink-3)}
.a-stamps{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--ink-3)}
.a-stamps span{display:inline-flex; align-items:center; gap:5px}
.a-stamps span:nth-child(2){color:var(--ink-2); font-weight:600}
.a-stamps span:nth-child(2)::before{content:""; width:6px; height:6px; border-radius:50%; background:#1F9E74}
.a-actions{display:flex; gap:6px; margin-left:auto}
@media (max-width:640px){ .a-actions{margin-left:0} }
.a-btn{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:var(--r-s); font-size:12.5px; font-weight:650;
  color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .2s, color .2s, background .2s}
.a-btn:hover{box-shadow:inset 0 0 0 1px var(--ink-3); color:var(--ink)}
.a-btn svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linejoin:round}
.a-btn[aria-pressed="true"]{background:var(--tint); color:var(--deep); box-shadow:none}
.a-btn[aria-pressed="true"] svg{fill:currentColor}

.a-hero{margin:0 0 18px}
.a-hero img{width:100%; aspect-ratio:16/7; object-fit:cover; border-radius:var(--r); background:var(--sand-2)}
@media (max-width:700px){ .a-hero img{aspect-ratio:3/2} }
.a-hero figcaption{margin-top:6px; font-size:12px; color:var(--ink-3)}

/* ───────────────────────────────────────────────────────────── LAYOUT */
.a-layout{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap); margin-top:22px; align-items:start}
@media (min-width:1024px){ .a-layout{grid-template-columns:var(--a-toc-w) minmax(0,1fr)} }
@media (min-width:1280px){ .a-layout{grid-template-columns:var(--a-toc-w) minmax(0,1fr) 300px} }

/* ════════════════════════════════════════ THE FLOATING "JUMP TO SECTION" */
.a-toc{position:sticky; top:var(--a-top); z-index:30; align-self:start}
.a-toc-toggle{display:none}
.a-toc-panel{max-height:calc(100vh - var(--a-top) - 16px); overflow-y:auto; scrollbar-width:thin; padding-right:4px}
.a-toc-title{font-size:12px; font-weight:750; color:var(--ink); padding:0 0 8px 12px}
.a-toc ol{counter-reset:t}
.a-toc li{counter-increment:t}
.a-toc li a{position:relative; display:grid; grid-template-columns:20px minmax(0,1fr); gap:4px; align-items:baseline; padding:6px 8px 6px 12px;
  border-left:2px solid var(--line); font-size:13px; line-height:1.3; color:var(--ink-3); transition:color .2s, background .2s, border-color .2s}
.a-toc li a::before{content:counter(t, decimal-leading-zero); font-size:10.5px; font-weight:700; color:var(--line)}
.a-toc li a:hover{color:var(--ink); background:rgba(255,255,255,.6)}
.a-toc li.is-done a{color:var(--ink-2); border-left-color:color-mix(in srgb, var(--deep) 35%, var(--line))}
.a-toc li.is-done a::before{color:color-mix(in srgb, var(--deep) 55%, #fff)}
.a-toc li.is-active a{color:var(--deep); font-weight:650; background:var(--tint); border-left-color:var(--deep); border-radius:0 var(--r-s) var(--r-s) 0}
.a-toc li.is-active a::before{color:var(--deep)}
.a-toc-foot{margin:12px 0 0 12px}
.a-toc-bar{display:block; height:4px; border-radius:4px; background:var(--line)}
.a-toc-bar i{display:block; height:100%; width:0; border-radius:4px; background:var(--deep); transition:width .15s linear}
.a-toc-left{display:block; margin-top:6px; font-size:11.5px; color:var(--ink-3)}

@media (max-width:1023px){
  .a-toc{top:var(--head-h); margin-inline:calc(var(--gut) * -1); padding:6px var(--gut); background:rgba(245,241,234,.94);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
  .a-toc-toggle{display:flex; align-items:center; gap:10px; width:100%; height:44px; padding:0 12px; border-radius:var(--r); background:var(--surface);
    box-shadow:var(--sh); text-align:left}
  .a-toc-toggle > .a-ic:first-child{color:var(--deep)}
  .a-toc-now{flex:1; min-width:0; display:flex; align-items:baseline; gap:8px}
  .a-toc-now small{font-size:11.5px; color:var(--ink-3); white-space:nowrap}
  .a-toc-now b{font-size:13.5px; font-weight:700; color:var(--deep); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .a-toc-chev{transition:transform .25s var(--ease)}
  .a-toc.is-open .a-toc-chev{transform:rotate(180deg)}
  .a-toc-panel{position:absolute; left:var(--gut); right:var(--gut); top:calc(100% + 4px); max-height:min(66vh,480px); padding:12px 10px 14px 4px;
    background:var(--surface); border-radius:var(--r-l); box-shadow:var(--sh-2); opacity:0; visibility:hidden; transform:translateY(-4px);
    transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s}
  .a-toc.is-open .a-toc-panel{opacity:1; visibility:visible; transform:none; transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s}
}

/* ════════════════════════════════════════════════════════ RIGHT RAIL */
.a-rail{display:none}
@media (min-width:1280px){ .a-rail{display:grid; gap:var(--gap); align-self:start; position:sticky; top:var(--a-top)} }
.a-rail .panel{padding:12px 14px 14px}
.a-rail .week{grid-template-columns:minmax(0,1fr); gap:6px}
.a-rail .day{background:var(--sand); grid-template-columns:38px minmax(0,1fr); padding:6px 8px}
.a-rail .day .d small{color:var(--deep)} .a-rail .day .d b{color:var(--ink); font-size:20px}
.a-rail .day strong{color:var(--ink)} .a-rail .day span{color:var(--ink-3)}
.a-rail .day:hover{background:var(--tint)}
.a-rail .day.is-hot{background:var(--tint)}

/* ════════════════════════════════════════════════════════════════ BODY */
.a-body{font-size:16.5px; line-height:1.7; color:var(--ink-2); min-width:0}
.a-body > section{scroll-margin-top:calc(var(--a-top) + 6px)}
.a-body section + section,.a-body section + .a-recap{margin-top:36px; padding-top:28px; border-top:1px solid var(--line)}
.a-body h2{position:relative; font-family:var(--f); font-weight:600; font-size:clamp(22px,2vw,26px); line-height:1.15; letter-spacing:-.015em;
  color:var(--ink); margin:0 0 12px; text-wrap:balance}
.a-body h3{font-size:17px; font-weight:750; letter-spacing:-.015em; color:var(--ink); line-height:1.3; margin:26px 0 8px;
  scroll-margin-top:calc(var(--a-top) + 6px)}
.a-body p{margin:0 0 14px}
.a-body strong{color:var(--ink); font-weight:650}

.a-anchor{position:absolute; left:-32px; top:.1em; width:26px; height:26px; border-radius:var(--r-s); display:grid; place-items:center;
  color:var(--ink-3); opacity:0; transition:opacity .2s, background .2s}
.a-anchor svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.a-body h2:hover .a-anchor,.a-anchor:focus-visible{opacity:1}
.a-anchor:hover{background:var(--tint); color:var(--deep)}
@media (max-width:1023px){ .a-anchor{display:none} }

/* key facts */
.a-facts{background:var(--surface); border-radius:var(--r-l); box-shadow:var(--sh); padding:12px 14px 14px; margin-bottom:10px}
.a-facts-title{font-size:12.5px !important; font-weight:750; color:var(--ink); margin:0 0 10px !important}
.a-facts dl{margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px}
@media (max-width:600px){ .a-facts dl{grid-template-columns:repeat(2,minmax(0,1fr))} }
.a-facts dl > div{padding:8px 10px; border-radius:var(--r-s); background:var(--sand); min-width:0}
.a-facts dt{font-size:11px; color:var(--ink-3); line-height:1.3}
.a-facts dd{margin:2px 0 0; font-size:14.5px; font-weight:700; line-height:1.25; color:var(--ink)}
.a-facts dl > .is-key{background:var(--deep)}
.a-facts dl > .is-key dt{color:rgba(255,255,255,.7)}
.a-facts dl > .is-key dd{color:#fff}

.a-note{display:flex; gap:8px; align-items:flex-start; font-size:13px !important; line-height:1.5; color:var(--ink-3); margin-bottom:28px !important}
.a-note .a-ic{margin-top:2px; color:var(--deep)}

/* tables */
.a-tablewrap{margin:16px 0; border-radius:var(--r); background:var(--surface); box-shadow:var(--sh); overflow-x:auto; scrollbar-width:thin}
/* min-width was 620px and every cell was nowrap, which suited the short
   time-and-price tables the design was drawn around. Imported tables carry
   prose cells of 150 characters, so those two rules together forced a
   horizontal scrollbar on almost every table. Cells now wrap by default; the
   classes that genuinely must not break (.a-time, .a-good, .a-bad) declare
   their own nowrap. */
.a-tablewrap table{width:100%; border-collapse:collapse; font-size:13.5px; line-height:1.45; table-layout:auto}
.a-tablewrap thead th{font-size:11.5px; font-weight:700; text-align:left; color:var(--ink-3); padding:8px 12px; border-bottom:1px solid var(--line); white-space:normal; text-wrap:balance}
.a-tablewrap tbody th{font-weight:700; color:var(--ink); text-align:left; white-space:normal; text-wrap:pretty}
.a-tablewrap td,.a-tablewrap tbody th{padding:9px 12px; border-top:1px solid var(--line-2); vertical-align:top}
.a-tablewrap tbody tr:first-child > *{border-top:0}
.a-tablewrap td{white-space:normal; text-wrap:pretty}
.a-tablewrap td a{color:var(--deep); text-decoration:underline; text-underline-offset:2px}
@media (max-width:600px){ .a-tablewrap table{font-size:12.5px} .a-tablewrap td,.a-tablewrap th{padding:7px 9px} }
.a-tablewrap tbody tr:hover{background:color-mix(in srgb, var(--tint) 40%, #fff)}
.a-tablewrap tr.is-hl{background:var(--tint)}
.a-time{white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600}
.a-time em{font-style:normal; margin-left:5px; font-size:10.5px; font-weight:700; color:#1E6E4F; background:#DFF1E8; padding:1px 6px; border-radius:100px}
.a-good{color:#1E6E4F; font-weight:650; white-space:nowrap; font-variant-numeric:tabular-nums}
.a-bad{color:#B7401D; font-weight:650; white-space:nowrap; font-variant-numeric:tabular-nums}

/* callouts */
.a-callout{display:flex; gap:10px; align-items:flex-start; margin:16px 0; padding:11px 14px; border-radius:var(--r)}
.a-callout > .a-ic{width:18px; height:18px; margin-top:2px}
.a-callout p{font-size:14.5px; line-height:1.55; margin:0 !important}
.a-callout-title{font-weight:750; color:var(--ink); margin-bottom:2px !important}
.a-callout.is-warn{background:#FCEBD9} .a-callout.is-warn > .a-ic{color:#B7621D}
.a-callout.is-info{background:#E3EBF7} .a-callout.is-info > .a-ic{color:#27408C}
.a-callout.is-tip{background:var(--tint)} .a-callout.is-tip > .a-ic{color:var(--deep)}

/* the festival calendar strip */
.a-cal{margin:16px 0; padding:12px 14px; border-radius:var(--r-l); background:var(--surface); box-shadow:var(--sh)}
.a-cal-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-bottom:10px}
.a-cal-head b{font-size:13.5px; font-weight:750; color:var(--ink)}
.a-cal-head span{font-size:12px; color:var(--ink-3)}
.a-cal-days{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:4px}
@media (max-width:900px){ .a-cal-days{grid-template-columns:repeat(6,minmax(0,1fr))} }
@media (max-width:400px){ .a-cal-days{grid-template-columns:repeat(4,minmax(0,1fr))} }
.a-cal-days li{position:relative; display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 2px; border-radius:var(--r-s);
  background:var(--sand); text-align:center; min-height:66px; min-width:0}
.a-cal-days small{font-size:9.5px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em}
.a-cal-days b{font-family:var(--f); font-size:18px; font-weight:600; color:var(--ink-3); line-height:1.1}
.a-cal-days span{font-size:9.5px; line-height:1.15; color:var(--ink-2); font-weight:650}
.a-cal-days .is-vis{background:#FCEBD9} .a-cal-days .is-vis b{color:#B7621D}
.a-cal-days .is-start{background:var(--tint)} .a-cal-days .is-start b{color:var(--deep)}
.a-cal-days .is-main{background:var(--deep)}
.a-cal-days .is-main b{color:#fff} .a-cal-days .is-main span,.a-cal-days .is-main small{color:rgba(255,255,255,.8)}
.a-cal-days .is-wknd::after{content:""; position:absolute; left:30%; right:30%; bottom:3px; height:2px; border-radius:2px; background:#1F9E74}
.a-cal-key{display:flex; flex-wrap:wrap; gap:4px 14px; margin:10px 0 0 !important; font-size:11.5px !important; color:var(--ink-3); line-height:1.4 !important}
.a-cal-key span{display:inline-flex; align-items:center; gap:6px}
.a-cal-key span::before{content:""; width:10px; height:10px; border-radius:3px}
.k-vis::before{background:#FCEBD9} .k-main::before{background:var(--deep)}
.k-wknd::before{background:#1F9E74; height:3px !important} .k-none::before{background:var(--sand); box-shadow:inset 0 0 0 1px var(--line)}

/* related guides */
.a-guides{margin:22px 0 0; padding:12px 14px 14px; border-radius:var(--r-l); background:var(--surface); box-shadow:var(--sh)}
.a-guides-over{font-size:11.5px; font-weight:700; color:#B7621D}
.a-guides-title{font-family:var(--f); font-size:19px !important; font-weight:600; color:var(--ink); margin:2px 0 2px !important; line-height:1.2}
.a-guides-sub{font-size:13px !important; color:var(--ink-3); margin:0 0 10px !important}
.a-guides-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
@media (max-width:520px){ .a-guides-grid{grid-template-columns:minmax(0,1fr)} }
.a-guide{display:grid; grid-template-columns:76px minmax(0,1fr); grid-template-rows:auto auto auto 1fr; column-gap:10px; padding:6px;
  border-radius:var(--r); line-height:1.3; transition:background .2s}
.a-guide:hover{background:var(--sand)}
.a-guide-img{grid-row:1 / span 4; display:block; overflow:hidden; border-radius:var(--r-s); align-self:start}
.a-guide-img img{width:100%; aspect-ratio:1; object-fit:cover}
.a-guide-over{font-size:10.5px; font-weight:700; color:#B7621D}
.a-guide b{font-size:13.5px; font-weight:700; color:var(--ink)}
.a-guide-p{font-size:12px; color:var(--ink-3)}
.a-guide-go{display:none}
.a-guide.is-here{background:#FCEBD9}
.a-guides-foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; margin:10px 0 0 !important; font-size:12px !important; color:var(--ink-3)}
.a-guides-foot [lang]{font-weight:650; color:#B7621D}

/* the muhurat chart */
.a-chart{position:relative; margin:16px 0; padding:12px 14px 14px; border-radius:var(--r-l); background:var(--surface); box-shadow:var(--sh)}
.a-chart-head{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.a-chart-head b{font-size:13.5px; font-weight:750; color:var(--ink); line-height:1.3}
.a-chart-legend{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:11.5px; color:var(--ink-3)}
.a-chart-legend i{width:12px; height:8px; border-radius:2px; margin-left:6px}
.a-chart-legend i:first-child{margin-left:0}
.lg-good{background:#6DBF9B} .lg-rahu{background:var(--coral)}
.lg-none{background:repeating-linear-gradient(135deg, var(--line) 0 2px, var(--sand) 2px 5px)}
.a-chart-axis,.a-chart-row{display:grid; grid-template-columns:92px minmax(0,1fr); align-items:center; gap:8px}
@media (max-width:520px){ .a-chart-axis,.a-chart-row{grid-template-columns:64px minmax(0,1fr)} }
.a-chart-axis{margin-bottom:4px}
.a-chart-axis .a-chart-track{height:14px; background:none}
.a-chart-axis span:not(.a-chart-city){position:absolute; top:0; transform:translateX(-50%); font-size:10px; color:var(--ink-3); white-space:nowrap}
.a-chart-axis span:not(.a-chart-city):first-child{transform:none}
.a-chart-rows{display:grid; gap:4px}
.a-chart-city{font-size:12px; font-weight:650; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.a-chart-track{position:relative; height:24px; border-radius:6px; background:var(--sand)}
.a-band{position:absolute; top:2px; bottom:2px; border-radius:4px; display:grid; place-items:center; overflow:hidden; cursor:default; outline:none;
  transition:filter .2s}
.a-band em{font-style:normal; font-size:9.5px; font-weight:700; color:#fff; white-space:nowrap}
.a-band.is-good{background:#6DBF9B} .a-band.is-best{background:#1E7A55}
.a-band.is-rahu{background:var(--coral)}
.a-band.is-none{background:repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 5px)}
.a-band:hover,.a-band:focus-visible{filter:brightness(1.08); box-shadow:0 0 0 2px var(--ink); z-index:2}
@media (max-width:700px){ .a-band em{display:none} }
.a-sun{position:absolute; top:-2px; bottom:-2px; width:2px; margin-left:-1px; background:var(--deep); border-radius:2px}
.a-chart-foot{margin:10px 0 0 !important; font-size:11.5px !important; color:var(--ink-3); line-height:1.45 !important}
.a-tip{position:absolute; z-index:5; transform:translate(-50%, calc(-100% - 6px)); background:var(--teal); color:#fff; font-size:12px; font-weight:600;
  padding:5px 9px; border-radius:var(--r-s); white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .15s}
.a-tip.is-on{opacity:1}

/* places */
.a-places{display:grid; gap:10px; margin:16px 0}
.a-place{display:grid; border-radius:var(--r-l); overflow:hidden; background:var(--surface); box-shadow:var(--sh)}
@media (min-width:640px){ .a-place{grid-template-columns:200px minmax(0,1fr)} }
.a-place-img img{width:100%; height:100%; min-height:150px; max-height:260px; object-fit:cover}
.a-place-in{padding:12px 14px}
.a-place h3{margin:0 0 2px !important; font-family:var(--f); font-weight:600; font-size:19px !important}
.a-place-where{display:flex; align-items:center; gap:5px; font-size:12px !important; color:var(--deep); font-weight:650; margin:0 0 6px !important}
.a-place-in > p:not(.a-place-where){font-size:14px; line-height:1.55; margin-bottom:8px}
.a-place dl{margin:8px 0 0; display:grid}
.a-place dl > div{display:grid; grid-template-columns:96px minmax(0,1fr); gap:10px; padding:5px 0; border-top:1px solid var(--line-2); font-size:13px; line-height:1.4}
.a-place dt{color:var(--ink-3)} .a-place dd{margin:0; color:var(--ink)}

.a-quote{margin:14px 0; padding:4px 0 4px 16px; border-left:3px solid var(--deep)}
.a-quote p{font-family:var(--f); font-style:italic; font-weight:500; font-size:19px; line-height:1.35; color:var(--ink); margin:0 0 4px !important}
.a-quote cite{font-style:normal; font-size:12.5px; color:var(--ink-3)}

.a-options{display:grid; gap:6px; margin:14px 0; counter-reset:o}
.a-options li{counter-increment:o; position:relative; padding:9px 12px 9px 42px; border-radius:var(--r); background:var(--surface); box-shadow:var(--sh);
  font-size:14.5px; line-height:1.55}
.a-options li::before{content:counter(o); position:absolute; left:12px; top:10px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  font-size:11.5px; font-weight:700; color:#fff; background:var(--deep)}
.a-options b{color:var(--ink)}

/* the decision flow */
.a-flow{margin:16px 0; padding:12px 14px 14px; border-radius:var(--r-l); background:var(--surface); box-shadow:var(--sh); text-align:center}
.a-flow-title{font-size:13.5px; font-weight:750; color:var(--ink); margin-bottom:10px}
.a-flow-start{display:inline-block; font-size:12px; font-weight:700; color:#fff; background:var(--deep); padding:5px 12px; border-radius:100px}
.a-flow-q{position:relative; margin:18px auto 0; max-width:38ch; padding:8px 12px; border-radius:var(--r); background:var(--sand); font-size:13.5px;
  font-weight:700; line-height:1.35; color:var(--ink)}
.a-flow-q::before{content:""; position:absolute; left:50%; top:-18px; height:18px; border-left:1.5px solid var(--line)}
.a-flow-split{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; margin-top:22px}
.a-flow-split::before{content:""; position:absolute; top:-11px; left:25%; right:25%; border-top:1.5px solid var(--line)}
.a-flow-branch{position:relative; display:flex; flex-direction:column; align-items:center; min-width:0}
.a-flow-branch::before{content:""; position:absolute; top:-11px; left:50%; height:11px; border-left:1.5px solid var(--line)}
.a-flow-tag{font-size:10.5px; font-weight:750; padding:2px 9px; border-radius:100px}
.is-yes > .a-flow-tag{color:#1E6E4F; background:#DFF1E8}
.is-no > .a-flow-tag{color:#B7401D; background:var(--coral-soft)}
.a-flow-branch > .a-flow-q{margin-top:14px}
.a-flow-branch > .a-flow-q::before{top:-14px; height:14px}
.a-flow-end{margin-top:10px; width:100%; padding:9px 11px; border-radius:var(--r); text-align:left; font-size:13px; line-height:1.45}
.a-flow-end b{display:block; font-size:13.5px; color:var(--ink); margin-bottom:2px}
.a-flow-end p{margin:0 !important; font-size:12.5px; color:var(--ink-2)}
.a-flow-end.is-ok{background:#DFF1E8}
.a-flow-end.is-warn{background:#FCEBD9}
.a-flow-end.is-info{background:#E3EBF7}
.a-flow-cap{margin:12px 0 0 !important; font-size:12px !important; color:var(--ink-3)}
@media (max-width:600px){ .a-flow-split{grid-template-columns:minmax(0,1fr); gap:18px} .a-flow-split::before{display:none} }

/* steps */
.a-steps{margin:14px 0; counter-reset:s; position:relative}
.a-steps::before{content:""; position:absolute; left:13px; top:10px; bottom:10px; border-left:1.5px solid var(--line)}
.a-steps li{counter-increment:s; position:relative; padding:2px 0 12px 42px; font-size:15px; line-height:1.6}
.a-steps li::before{content:counter(s); position:absolute; left:0; top:0; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-size:12.5px; font-weight:750; color:#fff; background:var(--deep); box-shadow:0 0 0 4px var(--sand)}
.a-steps b{color:var(--ink); display:block}

/* compare */
.a-compare{margin:18px 0}
.a-compare-title{font-size:13.5px !important; font-weight:750; color:var(--ink); margin-bottom:8px !important}
.a-compare-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px}
@media (max-width:600px){ .a-compare-grid{grid-template-columns:minmax(0,1fr)} }
.a-compare-card{padding:12px 14px; border-radius:var(--r-l); background:var(--surface); box-shadow:var(--sh); line-height:1.5}
.a-compare-card b{display:block; margin:8px 0 3px; font-size:15px; color:var(--ink)}
.a-compare-card p{font-size:13.5px; margin:0 0 10px !important}
.a-compare-badge{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:2px 8px 2px 5px; border-radius:100px}
.is-ok .a-compare-badge{color:#1E6E4F; background:#DFF1E8}
.is-bad .a-compare-badge{color:#B7401D; background:var(--coral-soft)}
.a-compare-meter{display:block; height:5px; border-radius:5px; background:var(--sand); overflow:hidden}
.a-compare-meter i{display:block; height:100%}
.is-ok .a-compare-meter i{background:#1F9E74} .is-bad .a-compare-meter i{background:var(--coral)}
.a-compare-card small{display:block; margin-top:4px; font-size:11.5px; color:var(--ink-3)}

/* allowed / not allowed */
.a-dos{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; margin:16px 0}
@media (max-width:640px){ .a-dos{grid-template-columns:minmax(0,1fr)} }
.a-do{padding:12px 14px; border-radius:var(--r-l)}
.a-do.is-yes{background:#E8F4EE} .a-do.is-no{background:#FBEAE3}
.a-do-title{display:flex; align-items:center; gap:6px; font-weight:750; font-size:13.5px !important; margin:0 0 4px !important}
.is-yes .a-do-title{color:#1E6E4F} .is-no .a-do-title{color:#B7401D}
.a-do li{position:relative; padding:5px 0 5px 16px; font-size:13.5px; line-height:1.45; border-top:1px solid rgba(0,0,0,.05)}
.a-do li:first-child{border-top:0}
.a-do li::before{content:""; position:absolute; left:2px; top:12px; width:6px; height:6px; border-radius:50%}
.is-yes li::before{background:#1F9E74} .is-no li::before{background:var(--coral)}

/* faqs */
.a-faq-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.a-link-btn{font-size:12.5px; font-weight:650; color:var(--ink-2); padding:4px 10px; border-radius:var(--r-s); box-shadow:inset 0 0 0 1px var(--line); white-space:nowrap}
.a-link-btn:hover{color:var(--deep); box-shadow:inset 0 0 0 1px var(--deep)}
.a-faq{display:grid; gap:6px}
.a-faq details{border-radius:var(--r); background:var(--surface); box-shadow:var(--sh)}
.a-faq summary{list-style:none; cursor:pointer; position:relative; padding:10px 42px 10px 14px; font-size:14.5px; font-weight:650; line-height:1.4; color:var(--ink);
  transition:color .2s}
.a-faq summary:hover{color:var(--deep)}
.a-faq summary::-webkit-details-marker{display:none}
.a-faq summary::after{content:"+"; position:absolute; right:10px; top:50%; transform:translateY(-50%); width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; font-size:15px; color:var(--ink-2); background:var(--sand); transition:transform .25s var(--ease), background .2s}
.a-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg); background:var(--deep); color:#fff}
.a-faq details p{padding:0 14px 12px; margin:0 !important; font-size:14.5px; line-height:1.6}

/* recap, sources, end */
.a-recap{padding:14px 16px !important; border-radius:var(--r-l); background:var(--teal); color:rgba(245,241,234,.82); border-top:0 !important}
.a-recap-title{font-size:12.5px !important; font-weight:750; color:#FF9A7A; margin-bottom:6px !important}
.a-recap p{font-size:15px; line-height:1.6}
.a-recap-sign{font-family:var(--f); font-style:italic; font-size:17px !important; color:#fff; margin:0 !important}
.a-sources{margin-top:16px !important; font-size:12.5px !important; line-height:1.6 !important; color:var(--ink-3)}
.a-sources b{color:var(--ink-2)}
/* Links inside a sources block were rendering identically to the text around
   them — same colour, same weight, no underline — so a citation of the source
   was indistinguishable from a mention of it. That fails WCAG 1.4.1 (colour
   alone is not enough, and here there was not even colour) and it means the
   one link a sceptical reader wants to follow looks like prose. Underlined
   rather than recoloured: the block is deliberately quiet, and an underline
   marks the link without making the small print shout. */
.a-sources a{color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; text-decoration-color:var(--line)}
.a-sources a:hover{color:var(--deep); text-decoration-color:currentColor}
.a-end{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}
.a-tags{display:flex; flex-wrap:wrap; gap:6px}
.a-tags a{font-size:12px; font-weight:650; color:var(--ink-2); padding:3px 10px; border-radius:100px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line);
  transition:all .2s}
.a-tags a:hover{background:var(--tint); color:var(--deep); box-shadow:none}
.a-end .a-actions{margin-left:0}

.a-toast{position:fixed; left:50%; bottom:20px; z-index:140; transform:translate(-50%,14px); opacity:0; background:var(--teal); color:#F5F1EA; font-size:13px;
  font-weight:600; padding:10px 16px; border-radius:var(--r); box-shadow:var(--sh-2); pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease)}
.a-toast.is-on{opacity:1; transform:translate(-50%,0)}

/* after the article */
.more{margin-top:32px}
.more-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap)}
@media (max-width:1020px){ .more-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .more-grid{grid-template-columns:minmax(0,1fr)} }
.more-card{position:relative; min-width:0}
.more-card .pic{aspect-ratio:3/2}
.more-card .kick{margin-top:8px}
.more-card .hd{margin-top:3px}
.more-card .meta{margin-top:5px}

@media (prefers-reduced-motion:reduce){ .a-toc-bar i,.a-band,.a-faq summary::after{transition:none} }

/* ═══════════════════════════════════════════════════════════ FINAL V1
   One header for every story (from Modern): the title large across the top,
   the intro under it, and one ruled line of author, dates and actions. */
:root{ --a-top:calc(var(--head-h) + 18px); }
@media (max-width:1023px){ :root{ --a-top:calc(var(--head-h) + 66px); } }
.a{padding-top:20px}
.a-kicker{display:none}
.a-crumb{margin-bottom:4px; font-size:12.5px}
.a-crumb a{color:var(--deep); font-weight:500}
.a-title{margin-top:10px; max-width:none; font-size:clamp(32px,4.2vw,54px); line-height:1.04; letter-spacing:-.025em; text-wrap:wrap}
.a-dek{margin-top:14px; max-width:none; font-size:clamp(17px,1.45vw,19px); line-height:1.55; color:var(--ink-2); text-wrap:pretty}
.a-meta{margin-top:20px; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.a-avatar{width:34px; height:34px; background:var(--onyx-sheen); color:var(--coral-2); font-weight:500}
img.a-avatar{object-fit:cover; background:var(--sand-2)}
.a-author b{font-weight:600; font-size:13.5px}
.a-author span > span{font-size:12px}
.a-stamps span:nth-child(2){font-weight:500}
.a-btn{height:32px; padding:0 13px; border-radius:100px; font-weight:500; background:var(--surface)}
.a-btn[aria-pressed="true"]{background:var(--onyx-sheen); color:#fff}
.a-hero img{aspect-ratio:16/9; border-radius:var(--r-l)}
.a-hero figcaption{margin-top:7px}
.a-layout{margin-top:20px}

.a-toc-title{font-family:var(--f); font-size:17px; font-weight:600}
.a-toc li a{font-size:13.5px}
.a-toc li.is-active a{font-weight:500; background:var(--surface); box-shadow:var(--sh); border-left-color:var(--deep)}
.a-toc-bar i{background:linear-gradient(90deg, var(--deep), var(--coral))}
.a-toc .a-toc-dl{margin:16px 0 0 12px; padding-top:14px; border-top:1px solid var(--line); display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; align-items:center}
.a-toc-dl .book b{font-size:5px} .a-toc-dl .book i{display:none}
.a-toc-dl strong{display:block; font-size:12.5px; font-weight:600; line-height:1.25; color:var(--ink)}
.a-toc-dl a{display:inline-flex; align-items:center; gap:4px; margin-top:3px; font-size:12px; font-weight:500; color:var(--deep)}
.a-toc-dl svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:1023px){
  .a-toc{top:var(--head-h); background:rgba(250,249,246,.94)}
  .a-toc-toggle{border-radius:100px}
  .a-toc .a-toc-dl{display:none}
}

.a-rail .panel{padding:14px 16px 16px}
.a-rail .panel > .sh h2{font-size:19px}
.a-rail .feed li a{grid-template-columns:62px minmax(0,1fr)}

.a-body h3{font-weight:600}
.a-facts dd,.a-time,.a-good,.a-bad{font-weight:600}
.a-facts dl > .is-key{background:var(--onyx-sheen)}
.a-facts dl > .is-key dd{color:#fff}
.a-cal-days .is-main{background:var(--onyx-sheen)}
.a-recap{background:var(--onyx-sheen); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.a-recap-title{color:var(--coral-2)}
.a-options li::before,.a-steps li::before{background:var(--onyx-sheen)}
.a-band.is-rahu,.lg-rahu{background:#C9704C}
.a-faq details[open] summary::after{background:var(--onyx-sheen)}
.a-toast{background:var(--onyx-sheen); border-radius:100px}
.a-after{margin-top:clamp(32px,4vw,48px)}

/* the short version (news) */
.a-short{margin:0 0 20px; padding:14px 16px 16px; border-radius:var(--r-l); background:var(--surface); box-shadow:var(--sh)}
.a-short-title{font-family:var(--f); font-size:19px !important; font-weight:600; color:var(--ink); margin:0 0 8px !important}
.a-short ol{counter-reset:k; display:grid; gap:8px}
.a-short li{counter-increment:k; display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; font-size:15px; line-height:1.5; color:var(--ink)}
.a-short li::before{content:counter(k); width:22px; height:22px; margin-top:1px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:600;
  color:#fff; background:var(--onyx-sheen)}
.a-who{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-2); font-size:12.5px; color:var(--ink-3)}
.a-who span{font-weight:500; color:var(--deep); background:var(--tint); padding:3px 10px; border-radius:100px}

/* a figure in the text */
.a-fig{margin:18px 0}
.a-fig img{width:100%; border-radius:var(--r); object-fit:cover}
.a-fig figcaption{margin-top:6px; font-size:12.5px; color:var(--ink-3)}
.a-gallery{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:10px; margin:18px 0}
.a-gallery img{width:100%; height:clamp(200px,26vw,320px); border-radius:var(--r); object-fit:cover}
.a-gallery figcaption{grid-column:1 / -1; font-size:12.5px; color:var(--ink-3)}

/* pull quote */
.a-pull{margin:22px 0; padding:4px 0 4px 18px; border-left:3px solid var(--deep)}
.a-pull p{font-family:var(--f); font-weight:500; font-style:italic; font-size:clamp(21px,2vw,25px); line-height:1.3; color:var(--ink); margin:0 0 6px !important}
.a-pull cite{font-style:normal; font-size:13px; color:var(--ink-3)}

/* timeline */
.a-timeline{position:relative; margin:14px 0 18px; display:grid; gap:12px}
.a-timeline::before{content:""; position:absolute; left:81px; top:6px; bottom:6px; border-left:1.5px solid var(--line)}
.a-timeline li{position:relative; display:grid; grid-template-columns:70px minmax(0,1fr); gap:26px; font-size:15px; line-height:1.5}
.a-timeline li::before{content:""; position:absolute; left:77px; top:7px; width:10px; height:10px; border-radius:50%; background:var(--bg); box-shadow:inset 0 0 0 2px var(--deep)}
.a-timeline li.is-now::before{background:var(--deep)}
.a-timeline b{font-size:13px; font-weight:600; color:var(--deep); white-space:nowrap}
.a-timeline strong{display:block; font-weight:600}

/* at a glance (interview) */
.a-glance{display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; align-items:center; margin:0 0 20px; padding:12px; border-radius:var(--r-l); background:var(--surface); box-shadow:var(--sh)}
@media (max-width:480px){ .a-glance{grid-template-columns:minmax(0,1fr)} .a-glance img{max-width:140px} }
.a-glance img{width:100%; aspect-ratio:4/5; border-radius:var(--r); object-fit:cover}
.a-glance-title{font-family:var(--f); font-size:19px !important; font-weight:600; color:var(--ink); margin:0 0 6px !important}
.a-glance dl{margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px}
.a-glance dl div{padding:7px 10px; border-radius:var(--r-s); background:var(--sand)}
.a-glance dt{font-size:11px; color:var(--ink-3); line-height:1.3}
.a-glance dd{margin:1px 0 0; font-size:14px; font-weight:600; color:var(--ink); line-height:1.3}

/* questions and answers */
.a-body .a-q{position:relative; margin:26px 0 8px; padding-left:34px; font-family:var(--f); font-size:16.5px; font-weight:600; line-height:1.4; color:var(--ink)}
.a-q::before{content:"Q"; position:absolute; left:0; top:0; width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-size:12px; font-weight:600;
  color:var(--deep); background:var(--tint)}
.a-body .a-lede{font-size:18px; line-height:1.6; color:var(--ink)}

/* was this useful, byline, pitch */
.a-useful{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:22px; padding:12px 16px; border-radius:var(--r-l); background:var(--surface); box-shadow:var(--sh);
  font-size:14.5px; font-weight:500; color:var(--ink)}
.a-useful div{display:flex; gap:6px; margin-left:auto}
.a-useful button{height:32px; padding:0 14px; border-radius:100px; font-size:13px; font-weight:500; box-shadow:inset 0 0 0 1px var(--line)}
.a-useful button:hover{background:var(--onyx-sheen); color:#fff; box-shadow:none}
.a-body .a-useful-done{margin:0; font-size:14px}
.a-useful-done a{color:var(--deep); text-decoration:underline}
.a-byline{display:grid; grid-template-columns:56px minmax(0,1fr); gap:14px; align-items:center; margin-top:16px; padding:14px 16px; border-radius:var(--r-l); background:var(--sand)}
.a-byline img{width:56px; height:56px; border-radius:50%; object-fit:cover}
.a-byline b{display:block; font-size:15px; color:var(--ink)}
.a-body .a-byline p{margin:2px 0 0; font-size:13.5px; line-height:1.5}
.a-pitch{position:relative; overflow:hidden; isolation:isolate; border-radius:var(--r-l); background:var(--onyx-sheen); color:rgba(236,237,240,.75); padding:16px 18px}
.a-pitch::after{content:""; position:absolute; z-index:-1; width:260px; height:260px; right:-120px; top:-140px; border-radius:50%; background:radial-gradient(closest-side, rgba(240,178,161,.35), transparent)}
.a-pitch::before{content:""; position:absolute; z-index:-1; width:240px; height:240px; left:-120px; bottom:-150px; border-radius:50%; background:radial-gradient(closest-side, rgba(92,135,132,.4), transparent)}
.a-pitch h2{font-family:var(--f); font-weight:600; font-size:20px; line-height:1.15; color:#fff}
.a-pitch p{margin-top:6px; font-size:13.5px; line-height:1.5}
.a-pitch .btn{margin-top:12px}
.a-stamps span.plain{font-weight:400; color:var(--ink-3)}
.a-stamps span.plain::before{display:none}

/* type: Magazine V2's set. Fraunces for the title, section headings, key
   figures and the article's own headings; Geist for the text. */
.a-title,.a-body h2,.a-toc-title,.a-toc li a::before,.a-facts dd,.a-cal-head b,.a-cal-days b,.a-chart-head b,
.a-guides-title,.a-place h3,.a-flow-title,.a-compare-title,.a-short-title,.a-glance-title,.a-pitch h2,
.a-quote p,.a-pull p,.a-recap-sign{
  font-family:var(--f-h); font-optical-sizing:auto; font-weight:560; font-variation-settings:"SOFT" 50, "WONK" 0}
.a-title{letter-spacing:-.025em}
.a-body h2{font-size:clamp(23px,2.1vw,28px); letter-spacing:-.018em; line-height:1.12}
.a-toc-title{font-size:18px}
.a-short-title,.a-glance-title,.a-guides-title{font-size:20px !important}
.a-pitch h2{font-size:21px}
.a-facts dd{font-size:16px}
.a-quote p,.a-pull p,.a-recap-sign{font-style:italic; font-weight:450}
.a-pull p{font-size:clamp(22px,2.1vw,27px); line-height:1.28}

/* ═══════════════════════════════════════════ JUMP TO SECTION, IN THE ARTICLE
   No column of its own: a bar at the top of the reading column that stays in
   view as you scroll. It shows where you are, a progress line and minutes
   left, and opens the list of sections. Two columns remain: article, side. */
:root{ --a-top:calc(var(--head-h) + 16px); }
.a-layout{grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){
  .a-layout{grid-template-columns:minmax(0,1fr) 300px; gap:clamp(24px,2.6vw,36px)}
  .a-rail{display:grid; gap:var(--gap); align-self:start; position:sticky; top:var(--a-top)}
}
@media (min-width:1280px){ .a-layout{grid-template-columns:minmax(0,1fr) 300px} }
.a-body > section,.a-body h3{scroll-margin-top:calc(var(--head-h) + 78px)}

.a-toc{position:sticky; top:calc(var(--head-h) + 10px); z-index:30; margin:0 0 18px; padding:0; background:none; border:0;
  -webkit-backdrop-filter:none; backdrop-filter:none}
.a-toc-toggle{position:relative; overflow:hidden; display:flex; align-items:center; gap:12px; width:100%; height:50px; padding:0 18px; border-radius:100px; text-align:left;
  background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); box-shadow:0 0 0 1px var(--line), var(--sh)}
.a-toc-toggle:hover{box-shadow:0 0 0 1px var(--ink-3), var(--sh)}
.a-toc-toggle > .a-ic:first-child{width:17px; height:17px; color:var(--deep)}
.a-toc-now{flex:1; min-width:0; display:flex; align-items:baseline; gap:10px}
.a-toc-now small{font-size:12.5px; color:var(--ink-3); white-space:nowrap}
.a-toc-now b{font-size:14.5px; font-weight:600; color:var(--deep); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.a-toc-foot{display:flex; align-items:center; flex:none; margin:0}
.a-toc-bar{position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:0; background:transparent}
.a-toc-bar i{border-radius:0 3px 3px 0; background:linear-gradient(90deg, var(--deep), var(--coral))}
.a-toc-left{margin:0; font-size:12.5px; color:var(--ink-3); white-space:nowrap}
.a-toc-chev{width:16px; height:16px; color:var(--ink-2); transition:transform .25s var(--ease)}
.a-toc.is-open .a-toc-chev{transform:rotate(180deg)}

.a-toc-panel{position:absolute; left:0; right:0; top:calc(100% + 6px); max-height:min(70vh,520px); overflow-y:auto; padding:12px 12px 10px;
  background:var(--surface); border-radius:var(--r-l); box-shadow:0 0 0 1px var(--line), var(--sh-2);
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s}
.a-toc.is-open .a-toc-panel{opacity:1; visibility:visible; transform:none; transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s}
.a-toc-title{display:none}
.a-toc ol{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 14px}
.a-toc li a{border-left:0; border-radius:var(--r-s); padding:8px 10px; font-size:14px}
.a-toc li a:hover{background:var(--sand)}
.a-toc li.is-done a{border-left:0}
.a-toc li.is-active a{background:var(--tint); box-shadow:none; border-radius:var(--r-s)}
.a-toc .a-toc-dl{display:grid; margin:10px 0 0; padding:12px 10px 4px; border-top:1px solid var(--line-2)}
@media (max-width:640px){
  .a-toc ol{grid-template-columns:minmax(0,1fr)}
  .a-toc-now small,.a-toc-left{display:none}
  .a-toc-toggle{padding:0 14px}
}

/* ═══════════════════════════════════════════════════════════════ DARK */
:root[data-mode="dark"] .a-toc-toggle{background:rgba(23,24,27,.92); box-shadow:0 0 0 1px var(--line), var(--sh)}
:root[data-mode="dark"] .a-btn{background:var(--surface)}
:root[data-mode="dark"] .a-short,:root[data-mode="dark"] .a-glance,:root[data-mode="dark"] .a-useful,:root[data-mode="dark"] .a-facts,
:root[data-mode="dark"] .a-tablewrap,:root[data-mode="dark"] .a-cal,:root[data-mode="dark"] .a-chart,:root[data-mode="dark"] .a-flow,
:root[data-mode="dark"] .a-place,:root[data-mode="dark"] .a-faq details,:root[data-mode="dark"] .a-guides,:root[data-mode="dark"] .a-compare-card,
:root[data-mode="dark"] .a-options li{box-shadow:inset 0 0 0 1px var(--line-2), var(--sh)}
:root[data-mode="dark"] .a-tablewrap tbody tr:hover{background:var(--sand)}
:root[data-mode="dark"] .a-time em,:root[data-mode="dark"] .is-yes > .a-flow-tag,:root[data-mode="dark"] .is-ok .a-compare-badge{color:#7FD9B0; background:rgba(52,192,138,.14)}
:root[data-mode="dark"] .a-good{color:#7FD9B0}
:root[data-mode="dark"] .a-bad{color:#F09A7C}
:root[data-mode="dark"] .a-callout.is-warn,:root[data-mode="dark"] .a-flow-end.is-warn,:root[data-mode="dark"] .a-cal-days .is-vis,
:root[data-mode="dark"] .a-guide.is-here,:root[data-mode="dark"] .k-vis::before{background:#33261B}
:root[data-mode="dark"] .a-cal-days .is-vis b{color:#EDB07C}
:root[data-mode="dark"] .a-callout.is-info,:root[data-mode="dark"] .a-flow-end.is-info{background:#1C2436}
:root[data-mode="dark"] .a-callout.is-info > .a-ic{color:#A7BAF2}
:root[data-mode="dark"] .a-flow-end.is-ok,:root[data-mode="dark"] .a-do.is-yes{background:#16271F}
:root[data-mode="dark"] .a-do.is-no{background:#2E1D19}
:root[data-mode="dark"] .is-yes .a-do-title{color:#7FD9B0}
:root[data-mode="dark"] .is-no .a-do-title,:root[data-mode="dark"] .is-no > .a-flow-tag,:root[data-mode="dark"] .is-bad .a-compare-badge{color:#F09A7C}
:root[data-mode="dark"] .a-flow-start,:root[data-mode="dark"] .a-facts dl > .is-key dd{color:#fff}
:root[data-mode="dark"] .a-flow-start{background:var(--onyx-sheen); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
:root[data-mode="dark"] .a-toc li.is-done a::before{color:color-mix(in srgb, var(--deep) 60%, #000)}
:root[data-mode="dark"] .a-band.is-good{background:#3F8F6C}
:root[data-mode="dark"] .a-band.is-best{background:#2A9D6D}
:root[data-mode="dark"] .a-byline{background:var(--sand)}


/* ============================================================================
   EMBEDDED COMPONENTS

   Markup carried over from the old site: card grids, badge rows and
   comparison panels the posts built by hand with inline CSS. It keeps its own
   styling, so these rules only stop it escaping the reading column.
   ========================================================================== */
.a-embed{margin:18px 0; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
.a-embed *{max-width:100%; box-sizing:border-box}
.a-embed img{height:auto}
.a-embed table{width:100%}
/* The old palette is warmer than this one; soften anything that would shout. */
[data-mode="dark"] .a-embed{filter:saturate(.85)}
[data-mode="dark"] .a-embed [style*="background:#f"],
[data-mode="dark"] .a-embed [style*="background: #f"]{background:var(--sand)!important; color:var(--ink)!important}
[data-mode="dark"] .a-embed [style*="color:#0"],
[data-mode="dark"] .a-embed [style*="color: #0"]{color:var(--ink)!important}

/* The tag row at the end of an article. Its own rule rather than margin on
   .a-tags, because the same component is used in the rail where the spacing
   would be wrong. */
.a-tagrow{margin-top:28px; padding-top:18px; border-top:1px solid var(--line)}