/* ============================================================================
   DUBAI FAST LIVING — Final V1

   What comes from where
   · Magazine V2  the warm bone-white page, image-led cards
   · Magazine V3  a colour band on every section, clear segments
   · Magazine V5  onyx, platinum and copper; the nine section colours; Dubai now;
                  the People panel; how guides are laid out; the article
   · Modern       the menu (a quiet capsule, nothing else in the header), the
                  Be featured block, the download block, the article header
   · Modern V2    panels in a main column beside a sticky side column; one
                  article layout shared by every kind of story

   New: the sunset glaze. Any cover photo is turned to greyscale and re-coloured
   with the rose-to-teal sky of the Downtown-at-dusk photo, so the front page
   looks the same whichever story leads.

   Type: Magazine V2's set: Fraunces for headings and titles, Geist for text.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
/* height:auto is load-bearing. Every <img> now carries width and height
   attributes so the browser can reserve its box before the bytes arrive, but
   those attributes are presentational hints that set a definite height — and
   a box with a definite width AND height ignores aspect-ratio. That silently
   broke .a-hero, .a-glance and .a-guide-img, which size themselves with
   aspect-ratio alone. height:auto drops the hint while keeping the ratio the
   attributes imply, and any class rule below (.pic img{height:100%} and the
   fixed-height thumbnails) still wins on specificity. */
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{list-style:none; padding:0}
button,input,select,textarea{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer; padding:0}

:root{
  --bg:#FAF9F6;
  --sand:#F3F1EC;
  --sand-2:#EAE6DE;
  --surface:#FFFFFF;
  --ink:#0D0E10;
  --ink-2:#3D4047;
  --ink-3:#6B6F78;
  --line:#E7E3DB;
  --line-2:#F0EDE7;

  --teal:#101114;            /* onyx; the article stylesheet knows it by this name */
  --teal-2:#1D1E23;
  --coral:#B26E4C;           /* copper */
  --coral-2:#D9A07F;
  --coral-soft:#F2E6DE;
  --plat:#CDD0D6;
  --onyx-sheen:radial-gradient(120% 140% at 0% 0%, #2B2C32 0%, #16171B 42%, #0D0E11 100%);
  --plat-ring:conic-gradient(from 210deg, #F4F5F7, #A9AEB7, #F4F5F7, #8E939C, #F4F5F7);

  /* the sunset glaze, sampled from the Downtown-at-dusk cover */
  --g-rose:#EC8E78;
  --g-peach:#F7DCD1;
  --g-mist:#C9BDBA;
  --g-teal:#377F7B;
  --g-amber:#BE6A2E;
  --g-ember:#3A2419;

  --tint:#ECE8E1;
  --deep:#101114;

  --f-h:"Fraunces", "Iowan Old Style", Georgia, serif;
  --f:"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-a:"IBM Plex Sans Arabic", var(--f);

  --r-s:10px; --r:14px; --r-l:20px;
  --sh:0 1px 2px rgba(13,14,16,.04), 0 6px 18px -8px rgba(13,14,16,.12);
  --sh-2:0 2px 6px rgba(13,14,16,.05), 0 22px 44px -18px rgba(13,14,16,.28);
  --ease:cubic-bezier(.2,.7,.1,1);
  --shell:1280px;
  --gut:clamp(18px,4.2vw,64px);
  --gap:clamp(14px,1.5vw,20px);
  --head-h:64px;
}

/* the nine sections — a pastel for bands, a deep for words */
.c-move{--tint:#DCEBEE; --deep:#0E5260}
.c-business{--tint:#E1E6F5; --deep:#27408C}
.c-property{--tint:#F3E2D2; --deep:#8A4219}
.c-life{--tint:#E0EBDA; --deep:#33612C}
.c-culture{--tint:#F0DEE8; --deep:#7A2A5B}
.c-whatson{--tint:#FBE1D5; --deep:#A63A16}
.c-explore{--tint:#D8EDE8; --deep:#0D6658}
.c-people{--tint:#EFE6D2; --deep:#6E5510}
.c-communities{--tint:#E6E0F3; --deep:#523D95}

body{background:var(--bg); color:var(--ink-2); font-family:var(--f); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
.shell{max-width:var(--shell); margin:0 auto; padding-inline:var(--gut)}
.ar{font-family:var(--f-a); font-weight:400; letter-spacing:0}
:focus-visible{outline:2px solid var(--coral); outline-offset:2px; border-radius:6px}
.stretch::after{content:""; position:absolute; inset:0; z-index:1}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ic-s{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* ═══════════════════════════════════════════════════════════════ HEADER
   Modern's menu: the brand, one quiet capsule of sections, search and
   Subscribe. Nothing else lives up here. */
.head{position:sticky; top:0; z-index:80; background:rgba(250,249,246,.8); backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6); border-bottom:1px solid transparent; transition:border-color .3s, background .3s, box-shadow .3s}
.head.settled{background:rgba(255,255,255,.84); border-bottom-color:var(--line); box-shadow:0 10px 30px -24px rgba(13,14,16,.4)}
.head-in{max-width:var(--shell); margin:0 auto; padding-inline:var(--gut); height:var(--head-h); display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:16px}
.brand{display:flex; align-items:center; gap:10px; justify-self:start; min-width:0}
.mark{position:relative; width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex:none; background:var(--onyx-sheen);
  color:#E9EBEF; font-family:var(--f); font-weight:700; font-size:11px; letter-spacing:.06em; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 14px -8px rgba(0,0,0,.6)}
.mark::after{content:""; position:absolute; right:6px; bottom:6px; width:4px; height:4px; border-radius:50%; background:var(--coral-2)}
.word{font-weight:600; font-size:15.5px; letter-spacing:-.02em; color:var(--ink); white-space:nowrap}
.word em{font-family:var(--f-h); font-style:italic; font-weight:500; font-size:1.12em; letter-spacing:-.01em}
@media (max-width:380px){ .word{display:none} }

.nav{justify-self:center; display:flex; align-items:center; gap:2px; padding:4px; border-radius:100px; background:rgba(13,14,16,.045);
  box-shadow:inset 0 0 0 1px rgba(13,14,16,.05)}
.nav a{display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 13px; border-radius:100px; font-size:13.5px; font-weight:500;
  color:var(--ink-2); white-space:nowrap; transition:background .2s, color .2s, box-shadow .2s}
.nav a:hover{color:var(--ink); background:rgba(255,255,255,.7)}
.nav a[aria-current]{background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(13,14,16,.08), 0 6px 14px -8px rgba(13,14,16,.25)}
.nav a[aria-current]::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--deep)}
@media (max-width:1320px){ .nav a{padding:0 10px; font-size:13px} }
@media (max-width:1180px){ .nav{display:none} .head-in{grid-template-columns:minmax(0,1fr) auto} }

.tools{justify-self:end; display:flex; align-items:center; gap:6px}
.icon-btn{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:var(--ink); transition:background .2s}
.icon-btn:hover{background:rgba(13,14,16,.06)}
.icon-btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.menu-btn{display:none}
@media (max-width:1180px){ .menu-btn{display:grid} }

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 18px; border-radius:100px; background:var(--onyx-sheen);
  color:#F1F2F4; font-size:13.5px; font-weight:500; white-space:nowrap; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 18px -10px rgba(0,0,0,.55);
  transition:transform .25s var(--ease), box-shadow .25s, background .2s}
.btn:hover{transform:translateY(-1px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 12px 24px -12px rgba(0,0,0,.6)}
.btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.btn .cu{color:var(--coral-2)}
.btn.lg{height:46px; padding:0 22px; font-size:14.5px}
.btn.sm{height:32px; padding:0 13px; font-size:12.5px}
.btn.ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--ink-3)}
.btn.light{background:#fff; color:var(--ink); box-shadow:0 8px 18px -10px rgba(0,0,0,.5)}
.btn.frost{background:rgba(255,255,255,.1); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.btn.frost:hover{background:rgba(255,255,255,.16)}
.btn.is-got{background:var(--sand); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line)}
@media (max-width:520px){ .tools .btn{display:none} }

/* drawer (phones and tablets) */
.drawer{position:fixed; inset:0; z-index:120; background:rgba(13,14,16,.4); opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility 0s .3s}
.drawer[data-open]{opacity:1; visibility:visible; transition:opacity .3s var(--ease), visibility 0s}
.drawer-panel{position:absolute; top:10px; right:10px; bottom:10px; width:min(380px, calc(100% - 20px)); overflow-y:auto; background:var(--surface);
  border-radius:var(--r-l); padding:14px 16px 20px; transform:translateX(20px); transition:transform .35s var(--ease); box-shadow:var(--sh-2)}
.drawer[data-open] .drawer-panel{transform:none}
.drawer-top{display:flex; align-items:center; justify-content:space-between; padding-bottom:10px; margin-bottom:8px; border-bottom:1px solid var(--line)}
.drawer .dk{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--r-s); font-weight:500; font-size:16px; color:var(--ink)}
.drawer .dk::before{content:""; width:10px; height:10px; border-radius:3px; background:var(--deep); box-shadow:0 0 0 3px var(--tint)}
.drawer .dk .ar{margin-left:auto; font-size:13px; color:var(--ink-3)}
.drawer .dk:hover,.drawer .dk[aria-current]{background:var(--tint); color:var(--deep)}
.drawer .btn{width:100%; margin-top:14px}

/* ═══════════════════════════════════════════════════════════════ ATOMS */
.hd{font-family:var(--f); font-weight:600; color:var(--ink); letter-spacing:-.012em; text-wrap:pretty; transition:color .2s; font-optical-sizing:auto}
.hd-xl{font-size:clamp(28px,2.8vw,40px); line-height:1.08; letter-spacing:-.02em}
.hd-l{font-size:clamp(20px,1.6vw,23px); line-height:1.18}
.hd-m{font-size:17.5px; line-height:1.24}
.hd-s{font-size:15.5px; line-height:1.28}
a:hover .hd,.hd a:hover,article:hover > .hd a,article:hover .hd a{color:var(--deep)}
.dek{font-size:15px; line-height:1.5; color:var(--ink-2)}
.meta{display:flex; flex-wrap:wrap; align-items:center; gap:4px 9px; font-size:12.5px; color:var(--ink-3)}
.meta b{font-weight:500; color:var(--ink-2)}
.meta .face{width:24px; height:24px; border-radius:50%; object-fit:cover}
.meta .dot{width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.5}
.meta .sec{display:inline-flex; align-items:center; gap:6px; color:var(--deep); font-weight:500}
.meta .sec::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.pic{display:block; overflow:hidden; border-radius:var(--r); background:var(--sand-2)}
.pic img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
article:hover .pic img,a:hover > .pic img{transform:scale(1.035)}
.link{display:inline-flex; align-items:center; gap:5px; font-size:13.5px; font-weight:500; color:var(--ink-2); white-space:nowrap}
.link:hover{color:var(--ink)}
.link svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s var(--ease)}
.link:hover svg{transform:translateX(3px)}
.save{position:relative; z-index:2; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:none; color:var(--ink-3); transition:background .2s, color .2s}
.save:hover{background:var(--sand); color:var(--ink)}
.save svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round}
.save[aria-pressed="true"]{color:var(--coral)}
.save[aria-pressed="true"] svg{fill:currentColor}
.save.pop{animation:pop .35s var(--ease)}
@keyframes pop{40%{transform:scale(1.2)}}
.pulse{position:relative; width:7px; height:7px; border-radius:50%; background:#34C08A; flex:none}
.pulse::after{content:""; position:absolute; inset:-3px; border-radius:50%; border:1.5px solid #34C08A; opacity:0; animation:ping 2.2s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.5); opacity:.8}100%{transform:scale(1.7); opacity:0}}
.live-tag{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:#1E8E63; background:#E1F4EB; padding:3px 9px; border-radius:100px}

.sh{display:flex; align-items:baseline; gap:12px; margin-bottom:14px}
.sh h2{font-family:var(--f); font-weight:600; font-size:clamp(22px,1.9vw,26px); line-height:1.1; letter-spacing:-.015em; color:var(--ink)}
.sh .link{margin-left:auto}
.panel{background:var(--surface); border-radius:var(--r-l); box-shadow:var(--sh); padding:16px 18px 18px; min-width:0}
.panel > .sh{margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--line-2)}
.panel > .sh h2{font-size:21px}
.band{margin-top:clamp(28px,3vw,40px)}

.g2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap)}
.g3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.g4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
@media (max-width:1000px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .g3{grid-template-columns:repeat(2,minmax(0,1fr))} .g2{grid-template-columns:minmax(0,1fr)} }
@media (max-width:480px){ .g3,.g4{grid-template-columns:minmax(0,1fr)} }

/* ═══════════════════════════════════════════════════════════════ HERO */
.hero{display:grid; gap:var(--gap); grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr); padding-top:clamp(14px,1.6vw,22px); align-items:stretch}
@media (max-width:980px){ .hero{grid-template-columns:minmax(0,1fr)} }

.cover{position:relative; min-height:clamp(420px,40vw,540px); border-radius:var(--r-l); overflow:hidden; isolation:isolate; background:#2A1D18; color:#fff}
.cover > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-4; transition:transform 1.6s var(--ease), opacity .5s var(--ease);
  filter:grayscale(1) contrast(1.06) brightness(1.04)}
.cover:hover > img{transform:scale(1.03)}
/* 1 · the colour: the sky's rose-to-teal across the top, amber into ember below, laid on with the "color" blend so the photo keeps its light */
.glaze{position:absolute; inset:0; z-index:-3; pointer-events:none; mix-blend-mode:color;
  background:
    linear-gradient(180deg, rgba(178,109,60,0) 34%, var(--g-amber) 58%, var(--g-ember) 86%),
    linear-gradient(90deg, var(--g-rose) 0%, #E9A393 30%, var(--g-mist) 56%, #6FA19C 80%, var(--g-teal) 100%)}
/* 2 · the haze: a peach mist over the upper sky, so dark or busy photos still read as dusk */
.cover::before{content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(90deg, rgba(236,150,128,.34) 0%, rgba(246,208,194,.26) 40%, rgba(140,180,175,.30) 75%, rgba(80,140,135,.34) 100%);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.75) 22%, transparent 52%); mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.75) 22%, transparent 52%)}
/* 3 · the scrim for the headline */
.cover::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(14,12,12,0) 36%, rgba(14,12,12,.45) 60%, rgba(12,12,13,.93) 100%)}
.cover-in{position:absolute; left:0; right:0; bottom:0; padding:clamp(20px,2.6vw,34px)}
.cover .hd{color:#fff; max-width:20ch}
.cover:hover .hd a{color:#fff}
.cover .dek{margin-top:10px; max-width:56ch; color:rgba(255,255,255,.84)}
.cover .meta{margin-top:14px; color:rgba(255,255,255,.72)}
.cover .meta b{color:#fff}
.cover .meta .face{box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.cover .meta .sec{color:#fff}
.cover .meta .sec::before{background:var(--g-rose)}

.hero-side{display:grid; gap:var(--gap); grid-template-rows:minmax(0,1fr) auto; min-width:0}
@media (max-width:980px) and (min-width:641px){ .hero-side{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); grid-template-rows:auto} }

.feed{overflow:hidden}
/* One column, not two. The date moved below the title — see cards.js. */
.feed li a{display:block; padding:9px 0; border-top:1px solid var(--line-2)}
.feed li:first-child a{border-top:0; padding-top:2px}
/* Title first, then one quiet line carrying the section and the date. The
   section used to own a line above the title, so every item cost three lines
   to say two things. */
.feed .h{display:block; font-size:14px; font-weight:500; line-height:1.35; color:var(--ink); transition:color .2s}
.feed .k{display:flex; align-items:center; gap:7px; margin-top:4px; font-size:11.5px; font-weight:500; color:var(--deep)}
.feed .k::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.feed .k .dot{width:3px; height:3px; border-radius:50%; background:var(--ink-3); opacity:.55; flex:none}
.feed time{font-size:11.5px; font-weight:400; color:var(--ink-3); white-space:nowrap}
.feed a:hover .h{color:var(--deep)}
.panel.feed > .sh{margin-bottom:8px}

.today{position:relative; overflow:hidden; border-radius:var(--r-l); background:var(--onyx-sheen); color:rgba(236,237,240,.7); padding:16px 18px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.today::before{content:""; position:absolute; width:260px; height:260px; left:-120px; bottom:-170px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(92,135,132,.4), transparent)}
.today::after{content:""; position:absolute; width:240px; height:240px; right:-110px; top:-130px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(240,178,161,.38), transparent)}
.today > *{position:relative; z-index:1}
.today .row{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.today .l{font-size:12.5px}
.today .clock{font-family:var(--f); font-weight:500; font-size:36px; line-height:1; color:#fff; letter-spacing:-.02em}
.today .clock small{font-family:var(--f); font-size:11px; font-weight:600; color:var(--coral-2); margin-left:5px}
.today dl{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:12px}
.today dl div{padding:8px 9px; border-radius:var(--r-s); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); min-width:0}
.today dt{font-size:11px; color:rgba(236,237,240,.5)}
.today dd{font-size:13.5px; font-weight:500; color:#fff; white-space:nowrap}

/* Today's gold and petrol, under the weather. These sat in their own column on
   the front page until the editor's pick took that slot back; they belong here
   anyway — a card headed "Dubai now" is exactly where a number that changed
   this morning should live. */
/* One cell per living page, however many there are. This was a hard
   repeat(2): with two rates it was a tidy row and with three it became two
   plus an orphan. auto-fit lets the row take what it is given.

   The label sits above the figure rather than beside it — side by side, a
   120px cell had to choose between showing "AED→INR" and showing the number,
   and truncated both. */
.today-rates{display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:6px; margin-top:6px}
.today-rates a{display:block; padding:8px 9px; border-radius:var(--r-s); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); text-decoration:none; transition:background .15s}
.today-rates a:hover{background:rgba(255,255,255,.1)}
.today-rates span{display:block; font-size:10.5px; letter-spacing:.02em; color:rgba(236,237,240,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.today-rates b{display:block; margin-top:3px; font-family:var(--f); font-size:15px; font-weight:600; color:#fff; line-height:1.1}

/* prototype only: try the glaze on other photos */
.proto-switch{position:fixed; left:16px; bottom:16px; z-index:95; display:flex; align-items:center; gap:4px; padding:5px 6px 5px 12px; border-radius:100px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 0 0 1px var(--line), var(--sh-2); font-size:12px; color:var(--ink-3)}
.proto-switch span{margin-right:4px}
.proto-switch button{width:30px; height:30px; border-radius:50%; overflow:hidden; box-shadow:0 0 0 2px transparent; transition:box-shadow .2s}
.proto-switch button img{width:100%; height:100%; object-fit:cover}
.proto-switch button[aria-pressed="true"]{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--ink)}
.proto-switch label{display:flex; align-items:center; gap:5px; margin:0 6px 0 8px; cursor:pointer; white-space:nowrap}
@media (max-width:640px){ .proto-switch span,.proto-switch label{display:none} }

/* ═══════════════════════════════════════════════════════════════ CARDS */
.grid4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap)}
@media (max-width:1060px){ .grid4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .grid4{grid-template-columns:minmax(0,1fr)} }
.card{position:relative; display:flex; flex-direction:column; padding:10px 10px 14px; background:var(--surface); border-radius:var(--r-l); box-shadow:var(--sh);
  min-width:0; transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.card:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.card .pic{aspect-ratio:16/10.5}
.card .hd{margin:12px 6px 0}
.card .foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:auto 2px 0 6px; padding-top:10px}
.card .meta{min-width:0}

/* ═══════════════════════════════════════════════════════════════ TOOLS */
/* Was a hard repeat(4), from a design that had four tools. Two were retired
   and the row kept a dead fourth slot, so the three left sat squashed against
   the left edge with a column of nothing beside them. auto-fit lets the row
   take whatever it is given: three tools now share the full width. */
.toolrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--gap)}
@media (max-width:1060px){ .toolrow{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .toolrow{grid-template-columns:minmax(0,1fr)} }
.tool{position:relative; display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:12px; align-items:center; padding:13px 14px; background:var(--surface);
  border-radius:var(--r-l); box-shadow:var(--sh); transition:transform .3s var(--ease), box-shadow .3s}
.tool:hover{transform:translateY(-2px); box-shadow:var(--sh-2)}
.ic{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none; background:var(--onyx-sheen); color:var(--plat);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.ic svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.tool b{display:block; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.25}
.tool small{display:block; font-size:12.5px; color:var(--ink-3); line-height:1.35}
.tool .go{color:var(--ink-3); transition:transform .25s var(--ease), color .2s}
.tool:hover .go{transform:translateX(3px); color:var(--coral)}

/* ═══════════════════════════════════════════════════════════ SECTIONS
   V3/V5's colour band on top; V2's pictures inside. */
.desks{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap)}
@media (max-width:1100px){ .desks{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){ .desks{grid-template-columns:minmax(0,1fr)} }
.desk{display:flex; flex-direction:column; background:var(--surface); border-radius:var(--r-l); box-shadow:var(--sh); overflow:hidden; min-width:0;
  transition:box-shadow .35s var(--ease)}
.desk:hover{box-shadow:var(--sh-2)}
.desk-h{display:flex; align-items:center; gap:10px; padding:11px 16px; background:var(--tint)}
.desk-h h2{display:flex; align-items:center; gap:9px; font-family:var(--f); font-weight:600; font-size:19px; color:var(--deep); letter-spacing:-.01em}
.desk-h h2::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--deep)}
.desk-h .ar{font-size:12.5px; color:var(--deep); opacity:.6}
.desk-h .link{margin-left:auto; color:var(--deep)}
.desk-b{padding:12px 12px 4px; display:flex; flex-direction:column; flex:1}
.desk-lead{position:relative}
.desk-lead .pic{aspect-ratio:16/9}
.desk-lead .hd{margin:11px 4px 0}
.desk-lead .meta{margin:6px 4px 0}
.desk-rows{margin-top:12px; border-top:1px solid var(--line-2)}
.desk-rows article{position:relative; display:grid; grid-template-columns:58px minmax(0,1fr); gap:12px; align-items:center; padding:9px 4px; border-bottom:1px solid var(--line-2)}
.desk-rows .pic{aspect-ratio:1; border-radius:var(--r-s)}
.desk-rows h3{font-size:14px; font-weight:500; line-height:1.35; color:var(--ink); transition:color .2s}
.desk-rows article:hover h3{color:var(--deep)}
.desk-rows time{display:block; margin-top:2px; font-size:12px; color:var(--ink-3)}
.desk-extra{margin-top:auto; padding:10px 4px 12px; display:flex; flex-wrap:wrap; gap:6px}
.desk-extra a{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:var(--deep); background:var(--tint); padding:4px 11px;
  border-radius:100px; transition:background .2s, color .2s}
.desk-extra a::before{content:""; width:12px; height:12px; background:currentColor; opacity:.8;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='3'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='3'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E") center/contain no-repeat}
.desk-extra a.dlx::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m0 0-4.5-4.5M12 15l4.5-4.5M5 19.5h14'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m0 0-4.5-4.5M12 15l4.5-4.5M5 19.5h14'/%3E%3C/svg%3E")}
.desk-extra a:hover{background:var(--deep); color:#fff}

/* ═══════════════════════════════════════════════════════════════ PEOPLE */
.people{position:relative; overflow:hidden; border-radius:var(--r-l); background:var(--onyx-sheen); color:rgba(236,237,240,.72); padding:clamp(20px,2.6vw,32px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.people::after{content:""; position:absolute; width:520px; height:520px; right:-200px; top:-280px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(217,160,127,.22), transparent)}
.people > *{position:relative; z-index:1}
.people .sh h2{color:#fff}
.people .link{color:rgba(236,237,240,.75)} .people .link:hover{color:#fff}
.people-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(20px,2.6vw,36px); align-items:start}
@media (max-width:980px){ .people-grid{grid-template-columns:minmax(0,1fr)} }
.profile{position:relative; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:16px; align-items:center}
@media (max-width:480px){ .profile{grid-template-columns:minmax(0,1fr)} }
.profile .pic{aspect-ratio:4/5; border-radius:var(--r)}
.profile .hd{color:#fff; font-size:clamp(19px,1.6vw,22px); line-height:1.22}
.profile:hover .hd a{color:var(--coral-2)}
.profile p{margin-top:8px; font-size:14px; line-height:1.5}
.profile .meta{margin-top:12px; color:rgba(236,237,240,.55)}
.pl-h{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:14px}
.pl-h h3{font-family:var(--f); font-size:19px; font-weight:600; color:#fff}
.faces{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
@media (max-width:560px){ .faces{grid-template-columns:repeat(2,minmax(0,1fr))} }
.face{position:relative; display:block; text-align:center; min-width:0}
.ring{position:relative; display:block; width:min(108px,100%); aspect-ratio:1; margin:0 auto; border-radius:50%; padding:3px; background:var(--plat-ring)}
.ring img{width:100%; height:100%; border-radius:50%; object-fit:cover; border:3px solid #141519; transition:transform .5s var(--ease)}
.face:hover .ring img{transform:scale(1.04)}
.rank{position:absolute; right:2px; bottom:2px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--coral);
  color:#fff; font-size:12px; font-weight:600; box-shadow:0 0 0 3px #141519}
.face b{display:block; margin-top:10px; font-size:14px; font-weight:500; color:#fff}
.face span{display:block; font-size:12.5px; color:rgba(236,237,240,.55)}
.interviews{margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 20px}
@media (max-width:560px){ .interviews{grid-template-columns:minmax(0,1fr)} }
.interviews a{display:grid; grid-template-columns:48px minmax(0,1fr); gap:12px; align-items:center; font-size:14px; color:#fff; line-height:1.35}
.interviews img{width:48px; height:48px; border-radius:12px; object-fit:cover}
.interviews a:hover{color:var(--coral-2)}
.interviews time{display:block; margin-top:2px; font-size:12px; color:rgba(236,237,240,.45)}

/* ═══════════════════════════════════════════════ MOST READ · PICK · DATES */
.tri{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:var(--gap); align-items:stretch}
@media (max-width:1060px){ .tri{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .tri > .pick{grid-column:span 2; min-height:320px} }
@media (max-width:640px){ .tri{grid-template-columns:minmax(0,1fr)} .tri > .pick{grid-column:span 1} }
.ranked{counter-reset:r}
.ranked li{counter-increment:r}
.ranked li a{display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px 0; border-top:1px solid var(--line-2)}
.ranked li:first-child a{border-top:0; padding-top:0}
.ranked li a::before{content:counter(r); font-family:var(--f); font-weight:600; font-size:22px; line-height:1; color:var(--coral)}
.ranked .h{font-size:14px; font-weight:500; line-height:1.35; color:var(--ink)}
.ranked .h small{display:block; margin-top:2px; font-size:12px; font-weight:400; color:var(--ink-3)}
.ranked a:hover .h{color:var(--coral)}
.ranked .s{font-size:12px; color:var(--ink-3); white-space:nowrap}
.ranked img{width:50px; height:50px; border-radius:10px; object-fit:cover}
.pick{position:relative; overflow:hidden; border-radius:var(--r-l); background:var(--teal); color:#fff; min-height:100%; isolation:isolate}
.pick > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.4s var(--ease)}
.pick:hover > img{transform:scale(1.04)}
.pick::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,11,13,.1), rgba(10,11,13,.85))}
.pick .badge{position:absolute; left:16px; top:16px; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:#fff;
  padding:5px 11px; border-radius:100px; background:rgba(255,255,255,.14); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.pick .badge::before{content:"✦"; color:var(--coral-2)}
.pick-in{position:absolute; left:0; right:0; bottom:0; padding:18px}
.pick .hd{color:#fff; font-size:clamp(21px,1.8vw,25px); line-height:1.15}
.pick:hover .hd a{color:#fff}
.pick .meta{margin-top:8px; color:rgba(255,255,255,.7)}
.dates li a{display:grid; grid-template-columns:46px minmax(0,1fr); gap:12px; align-items:center; padding:8px 0; border-top:1px solid var(--line-2)}
.dates li:first-child a{border-top:0; padding-top:0}
.dates .d{text-align:center; line-height:1; padding:6px 0; border-radius:var(--r-s); background:var(--tint)}
.dates .d small{display:block; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--deep)}
.dates .d b{display:block; font-family:var(--f); font-weight:600; font-size:20px; color:var(--deep); margin-top:2px}
.dates strong{display:block; font-size:14px; font-weight:500; color:var(--ink); line-height:1.3}
.dates span{display:block; font-size:12.5px; color:var(--ink-3)}
.dates a:hover strong{color:var(--deep)}

/* A row with no article behind it — a public holiday needs no post to be worth
   listing. Same grid as the anchor, without the affordance of a link. */
.dates li > .norow{display:grid; grid-template-columns:46px minmax(0,1fr); gap:12px; align-items:center; padding:8px 0; border-top:1px solid var(--line-2)}
.dates li:first-child > .norow{border-top:0; padding-top:0}
.dates .may{font-style:normal; color:var(--deep); font-weight:500}
.dates .note{grid-column:2; margin-top:3px; font-size:12px; color:var(--ink-3); line-height:1.45}
.dates li a .note{display:block}

/* /calendar/ — one block per month. */
.cal-m{margin:0 0 30px}
.cal-m h2{font-family:var(--f); font-size:19px; font-weight:600; margin:0 0 10px; padding-bottom:7px; border-bottom:1px solid var(--line)}
.cal-m h2 span{color:var(--ink-3); font-weight:400}
.cal-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--gap) 40px; align-items:start}

/* Most read beside Coming up. The design ran these as three columns with an
   editor's pick between them (.tri); there is no pick mechanism yet, so two
   panels share the row and each keeps a single readable column.

   When only one of the two has anything to show, the band drops the `duo`
   class and the dates go back to two columns of three rather than leaving two
   thirds of the row empty. */
.band.duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gap); align-items:start}
@media (max-width:860px){ .band.duo{grid-template-columns:minmax(0,1fr)} }

#dates:not(.duo):not(.trio) .dates{display:grid; grid-auto-flow:column; grid-template-rows:repeat(3,auto); column-gap:48px}
#dates:not(.duo):not(.trio) .dates li:nth-child(4) a{border-top:0; padding-top:0}
@media (max-width:760px){
  #dates:not(.duo):not(.trio) .dates{grid-auto-flow:row; grid-template-rows:none}
  #dates:not(.duo):not(.trio) .dates li:nth-child(4) a{border-top:1px solid var(--line-2); padding-top:8px}
}

/* The panel headings inside the band carry a right-hand note ("Last 28 days")
   the same way the section headings carry a "See all" link. */
.band.duo .sh{display:flex; align-items:baseline; justify-content:space-between; gap:12px}

/* The living-pages column. Two or three rows, each a number a reader came for
   with the direction it moved. Deliberately unlike the lists either side of
   it: the figure is the content, so it is set at display size and the label
   above it is small. */
.living li{border-top:1px solid var(--line-2)}
.living li:first-child{border-top:0}
.living li a{display:block; padding:12px 0; text-decoration:none}
.living li:first-child a{padding-top:2px}
.living .lv-k{display:block; font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--deep)}
.living .lv-v{display:block; margin-top:3px; font-family:var(--f); font-size:30px; font-weight:600; line-height:1.05; color:var(--ink)}
.living .lv-v small{margin-left:6px; font-family:var(--s); font-size:12.5px; font-weight:400; color:var(--ink-3)}
.living .lv-m{display:block; margin-top:5px; font-size:12px; color:var(--ink-3)}
/* Fixed colours, not var(--deep). The section class on each row redefines
   --deep, so a falling gold price rendered in Business blue while a falling
   fuel price would have rendered in Life green — the same meaning in two
   colours. For a price the direction is the meaning, so it owns the colour. */
.living .lv-m .t-up{color:#8A4F2E; font-weight:600}
.living .lv-m .t-down{color:#33612C; font-weight:600}
.living .lv-m .t-flat{color:var(--ink-3); font-weight:500}
.living .lv-o{display:block; margin-top:6px; font-size:12px; color:var(--ink-3)}
.living a:hover .lv-v{color:var(--deep)}

/* Three panels across, as the design had it. The design's middle column was a
   photograph (.pick) that spanned two columns on tablet; three equal panels
   need no such special case. */
.band.trio{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); align-items:start}
@media (max-width:1060px){ .band.trio{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .band.trio{grid-template-columns:minmax(0,1fr)} }
.band.trio .sh{display:flex; align-items:baseline; justify-content:space-between; gap:12px}

/* ═══════════════════════════════════════════════════════ FREE GUIDES */
.book{position:relative; display:block; aspect-ratio:3/4; border-radius:4px 9px 9px 4px; overflow:hidden; color:#fff;
  background:linear-gradient(150deg, color-mix(in srgb, var(--deep) 78%, #fff) 0%, var(--deep) 55%, color-mix(in srgb, var(--deep) 70%, #000) 100%);
  box-shadow:inset 4px 0 0 rgba(255,255,255,.12), inset 9px 0 0 rgba(0,0,0,.18), 0 16px 30px -14px rgba(0,0,0,.55)}
.book.onyx{background:var(--onyx-sheen)}
.book::before{content:""; position:absolute; left:16%; right:12%; top:10%; height:3px; border-radius:2px; background:var(--tint); opacity:.9}
.book::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg, rgba(255,255,255,.2), transparent 40%)}
.book b{position:absolute; left:16%; right:10%; top:20%; font-family:var(--f); font-weight:600; font-size:12px; line-height:1.1}
.book i{position:absolute; left:16%; bottom:9%; font-style:normal; font-size:8px; font-weight:600; letter-spacing:.1em; color:rgba(255,255,255,.75)}
.book.lg b{font-size:clamp(17px,1.7vw,22px)}
.book.lg i{font-size:10.5px}

.guides4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap)}
@media (max-width:1060px){ .guides4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .guides4{grid-template-columns:minmax(0,1fr)} }
.gcard{position:relative; display:grid; grid-template-columns:84px minmax(0,1fr); gap:16px; align-items:center; padding:16px; border-radius:var(--r-l);
  background:var(--surface); box-shadow:var(--sh); overflow:hidden; isolation:isolate; min-width:0}
.gcard::before{content:""; position:absolute; z-index:-1; width:200px; height:200px; left:-90px; top:-80px; border-radius:50%;
  background:radial-gradient(closest-side, var(--tint), transparent)}
.gcard .book{transform:rotate(-4deg); transition:transform .5s var(--ease)}
.gcard:hover .book{transform:rotate(0) translateY(-2px)}
.gcard h3{font-family:var(--f); font-weight:600; font-size:17px; line-height:1.2; color:var(--ink)}
.gcard p{margin-top:3px; font-size:12.5px; color:var(--ink-3)}
.gcard .btn{margin-top:10px}

/* ═══════════════════════════════════════════════════════ BE FEATURED */
.feat{position:relative; overflow:hidden; isolation:isolate; border-radius:var(--r-l); background:var(--onyx-sheen); color:rgba(236,237,240,.72);
  padding:clamp(22px,3vw,40px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.feat::before{content:""; position:absolute; z-index:-1; width:640px; height:640px; left:-260px; bottom:-380px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(240,178,161,.26), transparent)}
.feat::after{content:""; position:absolute; z-index:-1; width:620px; height:620px; right:-240px; top:-340px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(92,135,132,.34), transparent)}
.feat-h{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:18px 40px; align-items:end}
@media (max-width:900px){ .feat-h{grid-template-columns:minmax(0,1fr)} }
.feat h2{font-family:var(--f); font-weight:600; font-size:clamp(30px,3.4vw,46px); line-height:1.04; letter-spacing:-.02em; color:#fff}
.feat h2 span{display:block; background:linear-gradient(90deg, var(--g-rose), var(--g-peach) 45%, #9CC3BE); -webkit-background-clip:text; background-clip:text; color:transparent}
.feat-h p{font-size:15px; line-height:1.55; color:rgba(236,237,240,.78)}
.feat-cta{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.feat-proof{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:20px; font-size:13.5px}
.feat-proof b{color:#fff; font-weight:500}
.feat-proof .avs img{box-shadow:0 0 0 2px #17181C}
/* A format card with no photograph — the pic normally sets the top spacing. */
.fmt-flat{padding-top:20px}
.fmt-flat h3{margin-top:0}
.fmts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:22px}
@media (max-width:1060px){ .fmts{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .fmts{grid-template-columns:minmax(0,1fr)} }
.fmt{position:relative; display:flex; flex-direction:column; padding:8px 8px 14px; border-radius:var(--r-l); background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); transition:background .3s, transform .35s var(--ease)}
.fmt:hover{background:rgba(255,255,255,.08); transform:translateY(-3px)}
.fmt .pic{aspect-ratio:16/10; background:#222}
.fmt h3{margin:12px 6px 0; font-family:var(--f); font-weight:600; font-size:18px; color:#fff}
.fmt p{margin:4px 6px 0; font-size:13px; line-height:1.45}
.fmt ul{margin:10px 6px 0; display:grid; gap:4px}
.fmt li{display:flex; gap:8px; font-size:12.5px; color:rgba(236,237,240,.85)}
.fmt li::before{content:""; flex:none; width:14px; height:14px; margin-top:2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CC3BE' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.fmt .go{margin:12px 6px 0; margin-top:auto; padding-top:12px; font-size:13px; font-weight:500; color:var(--g-peach)}
.feat-reach{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px}
@media (max-width:640px){ .feat-reach{grid-template-columns:minmax(0,1fr)} }
.feat-reach div{display:flex; align-items:baseline; gap:10px; padding:12px 16px; border-radius:var(--r); background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.feat-reach b{font-family:var(--f); font-weight:600; font-size:28px; line-height:1; color:#fff}
.feat-reach small{font-size:13px}

/* ═══════════════════════════════════════════════════════ NEWSLETTER */
.letter{display:flex; flex-direction:column; justify-content:center; gap:10px; padding:20px 22px; border-radius:var(--r-l); background:var(--surface); box-shadow:var(--sh); min-width:0}
.letter h2{font-family:var(--f); font-weight:600; font-size:clamp(22px,2vw,27px); line-height:1.1; color:var(--ink)}
.letter p{font-size:14px; color:var(--ink-3)}
.letter-strip{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:14px 40px; align-items:center; padding:24px 28px}
@media (max-width:860px){ .letter-strip{grid-template-columns:minmax(0,1fr); padding:20px} }
.letter-strip .right{display:grid; gap:10px}
.join{display:flex; gap:6px; padding:5px; border-radius:100px; background:var(--sand); box-shadow:inset 0 0 0 1px var(--line)}
.join input{flex:1; min-width:0; border:0; background:transparent; padding:0 14px; font-size:14.5px; outline:none}
.join button{height:38px; padding:0 18px; border-radius:100px; background:var(--onyx-sheen); color:#F1F2F4; font-size:13.5px; font-weight:500; white-space:nowrap}
.picks{display:flex; flex-wrap:wrap; gap:6px}
.picks label{position:relative; display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:100px; cursor:pointer; font-size:12.5px; font-weight:500;
  color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line); transition:all .2s}
.picks input{position:absolute; opacity:0; pointer-events:none}
.picks label::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--deep); opacity:.35}
.picks label:has(input:checked){background:var(--tint); color:var(--deep); box-shadow:none}
.picks label:has(input:checked)::before{opacity:1}
.picks label:has(input:focus-visible){outline:2px solid var(--coral); outline-offset:2px}
.stack{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-3)}
.stack b{color:var(--ink); font-weight:500}
.avs{display:flex}
.avs img{width:26px; height:26px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px #fff}
.avs img + img{margin-left:-8px}

/* ═══════════════════════════════════════════════════════════════ FOOTER */
.site-foot{margin-top:clamp(36px,4vw,56px); background:var(--teal); color:rgba(236,237,240,.58); padding-top:34px; font-size:13.5px}
.foot-grid{display:grid; gap:24px; grid-template-columns:repeat(2,minmax(0,1fr))}
.foot-grid > :first-child{grid-column:1 / -1}
@media (min-width:800px){ .foot-grid{grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr))} .foot-grid > :first-child{grid-column:auto} }
.site-foot h4{font-size:12.5px; font-weight:600; color:#fff; margin-bottom:10px}
.site-foot li{margin-bottom:6px}
.site-foot a:hover{color:#fff}
.site-foot .about{max-width:34ch; margin-top:12px; line-height:1.55}
.site-foot .word{color:#fff}
.colo{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 20px; margin-top:28px; padding:16px 0 20px; border-top:1px solid rgba(255,255,255,.08); font-size:12.5px}

/* ═════════════════════════════════════════════════════════════ OVERLAYS */
.toast{position:fixed; left:50%; bottom:22px; z-index:160; transform:translate(-50%,16px); opacity:0; pointer-events:none; background:var(--onyx-sheen);
  color:#F1F2F4; font-size:13.5px; padding:11px 18px; border-radius:100px; box-shadow:var(--sh-2); transition:opacity .3s var(--ease), transform .3s var(--ease)}
.toast.show{opacity:1; transform:translate(-50%,0)}
.modal{position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:20px; background:rgba(13,14,16,.45); opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility 0s .3s}
.modal[data-open]{opacity:1; visibility:visible; transition:opacity .3s var(--ease), visibility 0s}
.modal-card{position:relative; width:min(460px,100%); max-height:calc(100vh - 40px); overflow:auto; background:var(--surface); border-radius:var(--r-l); padding:28px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.5); transform:translateY(12px) scale(.98); transition:transform .4s var(--ease); text-align:center}
.modal[data-open] .modal-card{transform:none}
.modal-card.wide{width:min(820px,100%)}
.modal .x{position:absolute; top:10px; right:10px}
.modal h2{font-family:var(--f); font-weight:600; font-size:25px; line-height:1.15; color:var(--ink)}
.modal p{margin-top:6px; font-size:14.5px; color:var(--ink-2)}
.modal .join{margin-top:14px}
.tick{width:50px; height:50px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center; background:var(--onyx-sheen); color:var(--coral-2)}
.tick svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.skip{margin-top:12px; font-size:13px; color:var(--ink-3)}
.skip:hover{color:var(--ink)}
.proto{margin-top:14px !important; font-size:12px !important; color:var(--ink-3) !important}
.pages{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:18px 0}
@media (max-width:600px){ .pages{grid-template-columns:minmax(0,1fr)} }
.page{aspect-ratio:1/1.3; background:#fff; border-radius:6px; box-shadow:0 0 0 1px var(--line), 0 12px 24px -16px rgba(0,0,0,.3); padding:16px 14px; text-align:left;
  font-size:10px; line-height:1.45; color:var(--ink-2); overflow:hidden}
.page h4{font-family:var(--f); font-weight:600; font-size:14px; color:var(--deep); margin-bottom:8px}
.page li{display:flex; gap:6px; padding:4px 0; border-bottom:1px solid var(--line-2)}
.page li::before{content:""; flex:none; width:8px; height:8px; margin-top:2px; border:1px solid var(--deep); border-radius:2px}
.page .pbar{height:6px; border-radius:3px; background:var(--sand); margin:6px 0}

.nudge{position:fixed; left:50%; bottom:16px; z-index:90; width:min(540px, calc(100% - 24px)); display:grid; grid-template-columns:38px minmax(0,1fr) auto auto; gap:12px;
  align-items:center; padding:9px 9px 9px 12px; border-radius:18px; background:rgba(255,255,255,.95); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 0 0 1px var(--line), var(--sh-2); transform:translate(-50%,150%); transition:transform .5s var(--ease)}
.nudge.show{transform:translate(-50%,0)}
.nudge .book{width:38px}
.nudge .book b{font-size:5px} .nudge .book i{display:none}
.nudge p{font-size:13.5px; font-weight:500; line-height:1.3; color:var(--ink)}
.nudge p span{display:block; font-size:12px; font-weight:400; color:var(--ink-3)}
@media (max-width:460px){ .nudge{grid-template-columns:34px minmax(0,1fr) auto} .nudge .x{display:none} .nudge p span{display:none} }

/* ═════════════════════════════════════════════════════════ SECTION PAGE
   V5's colour band and tabs, then Modern V2's arrangement: a column of
   panels beside a side column that stays in view. */
.deskhead{background:var(--tint)}
.deskhead-in{max-width:var(--shell); margin:0 auto; padding:18px var(--gut) 22px}
.crumb{font-size:12.5px; color:var(--ink-3)}
.crumb a:hover{color:var(--deep)}
.deskhead .row{display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 26px; margin-top:6px}
.deskhead h1{display:flex; align-items:baseline; gap:12px; font-family:var(--f); font-weight:600; font-size:clamp(32px,3.4vw,44px); line-height:1;
  letter-spacing:-.02em; color:var(--deep)}
.deskhead h1 .ar{font-size:15px; font-weight:400; opacity:.65}
.deskhead .dek{max-width:60ch; padding-bottom:3px}
.deskhead .stats{margin-left:auto; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:var(--ink-2); padding-bottom:4px}
.deskhead .stats b{color:var(--deep); font-weight:600}
.topics{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.topics a{font-size:13px; font-weight:500; color:var(--ink); background:rgba(255,255,255,.72); padding:5px 12px; border-radius:100px; transition:background .2s, color .2s}
.topics a:hover{background:var(--deep); color:#fff}
.tabbar{position:sticky; top:var(--head-h); z-index:70; background:var(--tint); box-shadow:0 1px 0 color-mix(in srgb, var(--deep) 14%, transparent)}
.tabs{max-width:var(--shell); margin:0 auto; padding-inline:calc(var(--gut) - 12px); display:flex; gap:2px; overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{position:relative; padding:10px 12px 12px; font-size:14px; font-weight:500; color:var(--ink-2); white-space:nowrap; transition:color .2s}
.tabs a::after{content:""; position:absolute; left:12px; right:12px; bottom:0; height:2.5px; border-radius:3px 3px 0 0; background:var(--deep);
  transform:scaleX(0); transition:transform .25s var(--ease)}
.tabs a:hover,.tabs a.is-on{color:var(--deep)}
.tabs a.is-on::after{transform:none}

.layout{display:grid; gap:var(--gap); grid-template-columns:minmax(0,1fr); margin-top:var(--gap); align-items:start}
@media (min-width:1101px){ .layout{grid-template-columns:minmax(0,1fr) 310px} }
.main{display:grid; gap:var(--gap); min-width:0}
.rail{display:grid; gap:var(--gap); align-content:start; min-width:0}
@media (min-width:1101px){ .rail{position:sticky; top:calc(var(--head-h) + 18px)} }
@media (max-width:1100px) and (min-width:701px){ .rail{grid-template-columns:repeat(2,minmax(0,1fr))} }
.part{scroll-margin-top:calc(var(--head-h) + 16px)}

/* latest */
.latest{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--gap)}
@media (max-width:760px){ .latest{grid-template-columns:minmax(0,1fr)} }
.lead-card{position:relative}
.lead-card .pic{aspect-ratio:16/10}
.lead-card .hd{margin-top:12px}
.lead-card .dek{margin-top:6px}
.lead-card .meta{margin-top:10px}
.rows li{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 76px; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--line-2)}
.rows li:first-child{border-top:0; padding-top:0}
.rows .pic{aspect-ratio:1; border-radius:var(--r-s)}
.rows .meta{margin-top:5px}
.rows li:hover .hd a{color:var(--deep)}

/* tools beside a calculator */
.toolbox{display:grid; grid-template-columns:250px minmax(0,1fr); gap:16px; align-items:start}
@media (max-width:860px){ .toolbox{grid-template-columns:minmax(0,1fr)} }
.tlist{display:grid; gap:6px}
.tlist a,.tlist button{position:relative; display:grid; grid-template-columns:36px minmax(0,1fr); gap:10px; align-items:center; padding:8px 10px; border-radius:var(--r);
  text-align:left; box-shadow:inset 0 0 0 1px var(--line-2); transition:background .2s, box-shadow .2s}
.tlist .ic{width:36px; height:36px; border-radius:10px}
.tlist .ic svg{width:17px; height:17px}
.tlist b{display:block; font-size:14px; font-weight:600; color:var(--ink); line-height:1.25}
.tlist small{display:block; font-size:12px; color:var(--ink-3); line-height:1.35}
.tlist a:hover,.tlist button:hover{background:var(--sand)}
.tlist [aria-pressed="true"]{background:var(--tint); box-shadow:none}
@media (max-width:860px){ .tlist{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .tlist{grid-template-columns:minmax(0,1fr)} }
.k-calc h3{font-family:var(--f); font-weight:600; font-size:19px; color:var(--ink); margin-bottom:10px}
.k-wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:14px; align-items:stretch}
@media (max-width:640px){ .k-wrap{grid-template-columns:minmax(0,1fr)} }
.k-fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-content:start}
.k-fields label,.calc label{display:grid; gap:5px; font-size:12.5px; font-weight:500; color:var(--ink-3); min-width:0}
.k-fields select,.calc select{appearance:none; -webkit-appearance:none; width:100%; height:42px; padding:0 32px 0 12px; border-radius:var(--r-s); border:1px solid var(--line);
  background:var(--sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%233D4047' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-size:14.5px; font-weight:500; color:var(--ink); cursor:pointer}
.k-fields select:focus,.calc select:focus{border-color:var(--deep); outline:none; background-color:#fff}
.k-out{position:relative; overflow:hidden; padding:14px 16px; border-radius:var(--r); background:var(--onyx-sheen); color:rgba(236,237,240,.7)}
.k-out small{font-size:12.5px}
.k-out > b{display:block; margin-top:2px; font-family:var(--f); font-weight:600; font-size:34px; line-height:1.05; color:#fff; font-variant-numeric:tabular-nums}
.k-out dl{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:12px}
.k-out dl div{padding:7px 9px; border-radius:var(--r-s); background:rgba(255,255,255,.06); min-width:0}
.k-out dt{font-size:11px; color:rgba(236,237,240,.55)}
.k-out dd{font-size:13.5px; font-weight:500; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.k-note{margin-top:10px; font-size:12.5px; color:var(--ink-3)}

/* the free guide — Modern's download block, in this palette */
.dlg{position:relative; overflow:hidden; isolation:isolate; display:grid; grid-template-columns:230px minmax(0,1fr); gap:clamp(18px,3vw,36px); align-items:center;
  padding:clamp(18px,2.4vw,28px); border-radius:var(--r-l); background:var(--surface); box-shadow:var(--sh)}
.dlg::before{content:""; position:absolute; z-index:-1; width:520px; height:520px; left:-200px; top:-190px; border-radius:50%;
  background:radial-gradient(closest-side, var(--tint), rgba(255,255,255,0))}
.dlg::after{content:""; position:absolute; z-index:-1; width:360px; height:360px; left:40px; bottom:-260px; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--tint) 70%, #fff), rgba(255,255,255,0))}
@media (max-width:640px){ .dlg{grid-template-columns:minmax(0,1fr)} }
.dlg-art{display:grid; place-items:center; padding:8px 0; perspective:900px}
.dlg-art .book{width:min(170px,100%); transform:rotateY(-14deg) rotateX(3deg); transition:transform .7s var(--ease)}
.dlg:hover .dlg-art .book{transform:none}
@media (max-width:640px){ .dlg-art .book{width:130px} }
.dlg h2{font-family:var(--f); font-weight:600; font-size:clamp(23px,2.1vw,29px); line-height:1.12; color:var(--ink)}
.dlg .dek{margin-top:6px; max-width:60ch}
.dlg-inc{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 18px; margin-top:14px}
@media (max-width:520px){ .dlg-inc{grid-template-columns:minmax(0,1fr)} }
.dlg-inc li{display:flex; gap:9px; font-size:14px; line-height:1.4; color:var(--ink)}
.dlg-inc li::before{content:""; flex:none; width:18px; height:18px; margin-top:1px; border-radius:50%; background:var(--tint)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' fill='none' stroke='%233D4047' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4l2.6 2.6L9 1.2'/%3E%3C/svg%3E") no-repeat center}
.dlg-btns{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-top:18px}
.dlg-meta{font-size:12.5px; color:var(--ink-3)}
.dlg-meta b{color:var(--ink-2); font-weight:500}
.dlg-mail{display:none; margin-top:12px; max-width:440px}
.dlg-mail.is-open{display:block}
.dlg-mail p{font-size:13px; color:var(--ink-3); margin-bottom:6px}
.more-dl{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line-2)}
@media (max-width:760px){ .more-dl{grid-template-columns:minmax(0,1fr)} }
.mdl{display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:center; padding:8px; border-radius:var(--r); text-align:left; transition:background .2s}
.mdl:hover{background:var(--sand)}
.mdl .book b{font-size:5px} .mdl .book i{display:none}
.mdl > span:last-child{display:block; min-width:0}
.mdl strong{display:block; font-size:14px; font-weight:500; color:var(--ink); line-height:1.25}
.mdl > span > span{display:flex; align-items:center; gap:5px; margin-top:2px; font-size:12px; color:var(--ink-3)}
.mdl svg{width:13px; height:13px; fill:none; stroke:var(--deep); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.mdl.is-got > span > span{color:var(--deep)}

/* new launches */
.launch{position:relative; display:flex; flex-direction:column; border-radius:var(--r); overflow:hidden; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2);
  transition:box-shadow .3s, transform .35s var(--ease)}
.launch:hover{box-shadow:var(--sh-2); transform:translateY(-2px)}
.launch .pic{position:relative; aspect-ratio:16/10; border-radius:0}
.launch .price{position:absolute; left:10px; bottom:10px; z-index:1; font-size:12px; font-weight:600; color:var(--ink); background:rgba(255,255,255,.92); padding:4px 10px; border-radius:100px}
.launch .in{padding:10px 12px 12px; display:flex; flex-direction:column; flex:1}
.launch .who{display:flex; align-items:center; gap:7px; margin-top:3px; font-size:12.5px; color:var(--ink-3)}
.launch .who img{width:18px; height:18px; object-fit:contain}
.launch .row{display:flex; justify-content:space-between; gap:8px; margin-top:auto; padding-top:10px; font-size:12.5px; color:var(--ink-3)}
.launch .row b{color:var(--ink); font-weight:600}
.launch .row em{font-style:normal; color:var(--deep); font-weight:500}

.chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.chips button{height:30px; padding:0 12px; border-radius:100px; font-size:13px; font-weight:500; color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line); transition:all .2s}
.chips button small{margin-left:5px; font-size:11.5px; color:var(--ink-3)}
.chips button:hover{box-shadow:inset 0 0 0 1px var(--ink-3)}
.chips button[aria-pressed="true"]{background:var(--onyx-sheen); color:#fff; box-shadow:none}
.chips button[aria-pressed="true"] small{color:rgba(255,255,255,.6)}

/* month by month */
.month{padding:12px 14px; border-radius:var(--r); background:var(--sand); min-width:0}
.month .top{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.month h3{font-family:var(--f); font-weight:600; font-size:17px; color:var(--ink)}
.month .n{font-size:11.5px; font-weight:600; color:var(--deep); background:var(--tint); padding:2px 8px; border-radius:100px; white-space:nowrap}
.month .from{display:block; font-size:12.5px; color:var(--ink-3)}
.month ul{margin-top:6px}
.month li a{display:flex; justify-content:space-between; padding:5px 0; border-top:1px solid var(--line); font-size:13.5px; color:var(--ink)}
.month li a::after{content:"→"; color:var(--ink-3)}
.month li a:hover{color:var(--deep)}
.month .all{display:inline-block; margin-top:6px; font-size:12.5px; font-weight:600; color:var(--ink)}

/* ranked lists (best of 2026) */
.rank-card{position:relative; display:grid; grid-template-columns:84px minmax(0,1fr); gap:12px; align-items:center; padding:8px; border-radius:var(--r);
  box-shadow:inset 0 0 0 1px var(--line-2); transition:background .2s}
.rank-card:hover{background:var(--sand)}
.rank-card .pic{position:relative; aspect-ratio:1; border-radius:var(--r-s)}
.rank-card .num{position:absolute; left:6px; top:6px; min-width:24px; height:24px; padding:0 6px; border-radius:100px; display:grid; place-items:center;
  font-size:12px; font-weight:600; color:#fff; background:var(--onyx-sheen)}
.rank-card h3{font-family:var(--f); font-weight:600; font-size:16px; line-height:1.22; color:var(--ink)}
.rank-card .meta{margin-top:4px}

/* the market */
.market{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px}
@media (max-width:760px){ .market{grid-template-columns:minmax(0,1fr)} }
.stats4{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.stat{display:block; padding:12px 14px; border-radius:var(--r); background:var(--sand); transition:background .2s}
.stat:hover{background:var(--tint)}
.stat b{display:block; font-family:var(--f); font-weight:600; font-size:26px; line-height:1.05; color:var(--ink); white-space:nowrap}
.stat span{display:block; margin-top:3px; font-size:12.5px; color:var(--ink-2)}
.stat small{display:block; margin-top:2px; font-size:12px; font-weight:500; color:var(--deep)}
.report{position:relative; display:block; min-height:220px; border-radius:var(--r); overflow:hidden; isolation:isolate; color:#fff}
.report img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.2s var(--ease)}
.report:hover img{transform:scale(1.04)}
.report::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,11,13,.05), rgba(10,11,13,.85))}
.report span{position:absolute; left:0; right:0; bottom:0; padding:16px}
.report small{display:block; font-size:12px; color:rgba(255,255,255,.75)}
.report b{display:block; margin-top:4px; font-family:var(--f); font-weight:600; font-size:21px; line-height:1.15}

/* developers */
.logos{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px}
@media (max-width:900px){ .logos{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:480px){ .logos{grid-template-columns:repeat(3,minmax(0,1fr))} }
.logo{display:flex; flex-direction:column; align-items:center; gap:3px; padding:12px 6px 10px; border-radius:var(--r); box-shadow:inset 0 0 0 1px var(--line-2); text-align:center; transition:background .2s}
.logo:hover{background:var(--sand)}
.logo img{width:40px; height:40px; object-fit:contain}
.logo b{margin-top:4px; font-size:13px; font-weight:500; color:var(--ink); line-height:1.2}
.logo small{font-size:11.5px; color:var(--ink-3)}

/* get listed / be featured on a section page */
.listme{position:relative; overflow:hidden; border-radius:var(--r-l); background:var(--tint); padding:clamp(18px,2.4vw,26px)}
.listme .top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:10px 30px; align-items:end}
@media (max-width:760px){ .listme .top{grid-template-columns:minmax(0,1fr)} }
.listme h2{font-family:var(--f); font-weight:600; font-size:clamp(23px,2.2vw,30px); line-height:1.1; color:var(--deep)}
.listme p{font-size:14.5px; color:var(--ink-2)}
.listme .acts{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.listme .proof{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:14px; font-size:13px; color:var(--ink-2)}
.listme .avs img{box-shadow:0 0 0 2px var(--tint)}
.opts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px}
@media (max-width:760px){ .opts{grid-template-columns:minmax(0,1fr)} }
.opt{display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:var(--r); background:#fff; box-shadow:var(--sh); transition:transform .3s var(--ease)}
.opt:hover{transform:translateY(-2px)}
.opt b{font-size:14.5px; font-weight:600; color:var(--ink)}
.opt span{font-size:13px; color:var(--ink-2); line-height:1.45}
.opt em{margin-top:auto; padding-top:6px; font-style:normal; font-size:13px; font-weight:500; color:var(--deep)}

/* a feature and its list (guides, V5) */
.feature{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:18px}
@media (max-width:760px){ .feature{grid-template-columns:minmax(0,1fr)} }
.feature .lead-card .pic{aspect-ratio:16/10}
.flist li{position:relative; display:grid; grid-template-columns:60px minmax(0,1fr); gap:12px; align-items:center; padding:9px 0; border-top:1px solid var(--line-2)}
.flist li:first-child{border-top:0; padding-top:0}
.flist .pic{aspect-ratio:1; border-radius:var(--r-s)}
.flist h3{font-family:var(--f); font-weight:600; font-size:16px; line-height:1.24; color:var(--ink); transition:color .2s}
.flist li:hover h3{color:var(--deep)}
.flist .meta{margin-top:3px}

/* plain cards in a grid */
.scard{position:relative; min-width:0}
.scard .pic{aspect-ratio:3/2}
.scard h3{margin-top:9px}
.scard .meta{margin-top:5px}

/* area tiles */
.tile{position:relative; display:block; aspect-ratio:4/4.6; border-radius:var(--r); overflow:hidden; isolation:isolate; color:#fff}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.2s var(--ease)}
.tile:hover img{transform:scale(1.05)}
.tile::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,11,13,0) 45%, rgba(10,11,13,.8))}
.tile span{position:absolute; left:12px; right:12px; bottom:10px}
.tile b{display:block; font-family:var(--f); font-weight:600; font-size:17px; line-height:1.15}
.tile small{display:block; font-size:12px; color:rgba(255,255,255,.78)}

/* videos */
.vcard{position:relative; display:block; min-width:0}
.vcard .pic{position:relative; aspect-ratio:16/9}
.vcard .pic::after{content:""; position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%;
  background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='%230D0E10'/%3E%3C/svg%3E") center/22px no-repeat;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.5); transition:transform .3s var(--ease)}
.vcard:hover .pic::after{transform:scale(1.08)}
.vcard .dur{position:absolute; right:8px; bottom:8px; z-index:1; font-size:11.5px; font-weight:600; color:#fff; background:rgba(0,0,0,.65); padding:2px 7px; border-radius:6px}
.vcard b{display:block; margin-top:8px; font-size:14px; font-weight:500; line-height:1.35; color:var(--ink)}
.vcard:hover b{color:var(--deep)}

/* guides: three pictures, then groups of links (V5) */
.gpic{position:relative; display:flex; flex-direction:column; border-radius:var(--r); overflow:hidden; box-shadow:inset 0 0 0 1px var(--line-2); min-width:0}
.gpic .pic{aspect-ratio:16/9; border-radius:0}
.gpic .in{padding:10px 12px 12px}
.gpic h3{font-family:var(--f); font-weight:600; font-size:17px; line-height:1.22; color:var(--ink); margin-top:2px}
.gpic .go{margin-top:8px; font-size:13px; font-weight:500; color:var(--deep)}
.gpic:hover h3{color:var(--deep)}
.piles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:16px}
@media (max-width:1000px){ .piles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .piles{grid-template-columns:minmax(0,1fr)} }
.pile{min-width:0}
.pile h3{font-size:13.5px; font-weight:600; color:var(--deep); margin-bottom:2px}
.pile li a{display:flex; justify-content:space-between; gap:8px; padding:7px 0; border-top:1px solid var(--line-2); font-size:13.5px; color:var(--ink); line-height:1.35}
.pile li a small{color:var(--ink-3)}
.pile li a:hover{color:var(--deep)}

/* questions */
.faq{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; align-items:start}
@media (max-width:760px){ .faq{grid-template-columns:minmax(0,1fr)} }
.faq details{border-radius:var(--r); background:var(--sand)}
.faq summary{list-style:none; cursor:pointer; position:relative; padding:11px 44px 11px 14px; font-size:14.5px; font-weight:500; line-height:1.4; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:10px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:16px; color:var(--ink-2); background:#fff; transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg); background:var(--onyx-sheen); color:#fff}
.faq details p{padding:0 14px 12px; font-size:14px; line-height:1.6}

/* Life: everything in the section */
.niche{padding:12px 14px; border-radius:var(--r); box-shadow:inset 0 0 0 1px var(--line-2); min-width:0; transition:background .2s}
.niche:hover{background:var(--sand)}
.niche .top{display:flex; align-items:center; gap:10px}
.niche .nic{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; background:var(--tint); color:var(--deep)}
.niche .nic svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.niche h3{font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.2}
.niche h3 a:hover{color:var(--deep)}
.niche small{display:block; font-size:12px; color:var(--ink-3)}
.niche ul{margin-top:8px}
.niche li a{display:block; padding:4px 0; font-size:13px; color:var(--ink-2)}
.niche li a:hover{color:var(--deep)}

/* dates with pictures */
.datecard{position:relative; min-width:0}
.datecard .pic{position:relative; aspect-ratio:4/3}
.datecard .badge{position:absolute; left:8px; top:8px; z-index:1; width:44px; padding:5px 0 4px; border-radius:10px; background:#fff; text-align:center; line-height:1;
  box-shadow:0 6px 14px -8px rgba(0,0,0,.4)}
.datecard .badge b{display:block; font-family:var(--f); font-weight:600; font-size:19px; color:var(--ink)}
.datecard .badge small{display:block; margin-top:1px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--deep)}
.datecard h3{margin-top:9px}
.datecard .meta{margin-top:3px}

/* Move */
.visa-links{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:24px}
@media (max-width:760px){ .visa-links{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:460px){ .visa-links{grid-template-columns:minmax(0,1fr)} }
.visa-links a{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid var(--line-2)}
.visa-links b{font-family:var(--f); font-weight:600; font-size:16.5px; color:var(--ink); transition:color .2s}
.visa-links span{font-size:12.5px; color:var(--ink-3); white-space:nowrap}
.visa-links a:hover b{color:var(--deep)}
.calc{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:18px; align-items:stretch}
@media (max-width:760px){ .calc{grid-template-columns:minmax(0,1fr)} }
.calc .fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.calc .note{margin-top:10px; font-size:12.5px; color:var(--ink-3)}
.result{position:relative; overflow:hidden; padding:16px 18px; border-radius:var(--r); background:var(--onyx-sheen); color:rgba(236,237,240,.7)}
.result .l{font-size:12.5px}
.result .total{margin-top:2px; font-family:var(--f); font-weight:600; font-size:38px; line-height:1; color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap}
.result .total small{font-family:var(--f); font-size:12px; font-weight:600; color:var(--coral-2); margin-right:6px; vertical-align:.8em}
.result .per{margin-top:4px; font-size:13px}
.bars{margin-top:12px; display:grid; gap:7px}
.bars div{display:grid; grid-template-columns:78px minmax(0,1fr) 72px; gap:8px; align-items:center; font-size:12.5px}
.bars i{display:block; height:6px; border-radius:6px; background:rgba(255,255,255,.1); overflow:hidden}
.bars i b{display:block; height:100%; width:0; border-radius:6px; background:var(--plat); transition:width .6s var(--ease)}
.bars div:nth-child(2) i b{background:var(--coral-2)} .bars div:nth-child(3) i b{background:#9FD9C9} .bars div:nth-child(4) i b{background:#C9B8F0}
.bars em{font-style:normal; font-weight:500; color:#fff; text-align:right; font-variant-numeric:tabular-nums}
.countries{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
@media (max-width:700px){ .countries{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:460px){ .countries{grid-template-columns:repeat(2,minmax(0,1fr))} }
.country{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:100px; box-shadow:inset 0 0 0 1px var(--line-2); font-size:13.5px; font-weight:500;
  color:var(--ink); min-width:0; transition:background .2s, box-shadow .2s}
.country:hover{background:var(--tint); box-shadow:none; color:var(--deep)}
.country img{width:22px; height:22px; border-radius:50%; object-fit:cover; flex:none}
.country span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
@media (max-width:900px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .steps{grid-template-columns:minmax(0,1fr)} }
.step{padding:12px 14px; border-radius:var(--r); background:var(--sand); min-width:0}
.step .when{display:inline-block; font-size:12px; font-weight:500; color:#fff; background:var(--deep); padding:2px 9px; border-radius:100px}
.step h3{margin-top:6px; font-family:var(--f); font-weight:600; font-size:17px; color:var(--ink)}
.step li{position:relative; padding:4px 0 4px 16px; font-size:13px; line-height:1.35}
.step li::before{content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:2px; box-shadow:inset 0 0 0 1.5px var(--deep)}

/* side column cards */
.side-guide{position:relative; overflow:hidden; isolation:isolate; display:grid; grid-template-columns:72px minmax(0,1fr); gap:14px; align-items:center}
.side-guide::before{content:""; position:absolute; z-index:-1; width:220px; height:220px; left:-110px; top:-100px; border-radius:50%; background:radial-gradient(closest-side, var(--tint), transparent)}
.side-guide .over{font-size:12px; font-weight:500; color:var(--deep)}
.side-guide h3{font-family:var(--f); font-weight:600; font-size:17px; line-height:1.2; color:var(--ink)}
.side-guide p{margin-top:2px; font-size:12px; color:var(--ink-3)}
.side-guide .btn{margin-top:8px}
.rail .letter{padding:16px 18px}
.rail .letter h2{font-size:21px}

/* ═══════════════════════════════════════════════════════════════ ARRIVALS */
html.js .reveal{opacity:0; transform:translateY(12px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
html.js .reveal.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation:none !important}
  html.js .reveal{opacity:1; transform:none}
}

/* prototype: compare the cover with and without the glaze */
.cover.no-glaze > img{filter:none}
.cover.no-glaze .glaze,.cover.no-glaze::before{display:none}

/* ═══════════════════════════════════════════════════════════════ TYPE
   Magazine V2's font set, mapped the way V2 uses it.
   · Fraunces, soft (SOFT 50, WONK 0, weight 560): the wordmark, section and
     panel headings, the cover and editor's pick, page and article titles,
     card titles on section pages, calculator headings and results, big
     numbers, book covers and downloads.
   · Geist: front-page card and list headlines (600, tight), feeds, lists,
     labels, buttons and body text.
   · IBM Plex Sans Arabic for the Arabic section names. */
.fr,
.word,
.sh h2,.desk-h h2,.pl-h h3,
.cover .hd,.pick .hd,.profile .hd,
.deskhead h1,
.feat h2,.fmt h3,.feat-reach b,
.gcard h3,.book b,
.letter h2,.modal h2,.page h4,
.today .clock,.dates .d b,.ranked li a::before,
.main .hd,
.k-calc h3,.k-out > b,.result .total,
.dlg h2,.listme h2,.month h3,.rank-card h3,.stat b,.report b,.flist h3,.tile b,.gpic h3,
.datecard .badge b,.visa-links b,.step h3,.side-guide h3{
  font-family:var(--f-h); font-optical-sizing:auto; font-weight:560; font-variation-settings:"SOFT" 50, "WONK" 0}

.word{font-size:18px; font-weight:600; letter-spacing:-.02em}
.word em{font-family:var(--f-h); font-style:italic; font-weight:450; font-size:1em; color:var(--ink-3)}
.site-foot .word em{color:rgba(255,255,255,.5)}

/* Geist headlines, as V2's .hd */
.hd{letter-spacing:-.022em; font-weight:600; line-height:1.24}
.hd-l{font-size:clamp(18px,1.55vw,21px); line-height:1.2}
.hd-m{font-size:16.5px}
.hd-s{font-size:15px; line-height:1.3}

/* Fraunces sizes */
.sh h2{font-weight:600; font-size:clamp(24px,2.2vw,30px); letter-spacing:-.022em}
.panel > .sh h2{font-size:22px}
.desk-h h2{font-size:20px; font-weight:600; letter-spacing:-.015em}
.cover .hd,.pick .hd,.deskhead h1,.feat h2{letter-spacing:-.022em}
.main .hd{letter-spacing:-.01em; line-height:1.18}
.main .hd-l{font-size:clamp(20px,1.7vw,23px); line-height:1.14}
.main .hd-m{font-size:17.5px}
.main .hd-s{font-size:16.5px; line-height:1.22}
.ranked li a::before{font-size:22px}
.today .clock{font-weight:500}

/* ═══════════════════════════════════════════════════════════ LIGHT / DARK
   The page follows the device until the reader picks Light or Dark in the
   menu; the choice is remembered. A script in each page's head sets
   data-mode="light" or "dark" on <html> before anything draws. */
:root{color-scheme:light}
.theme{display:flex; align-items:center; gap:2px; padding:3px; border-radius:100px; background:rgba(13,14,16,.05); box-shadow:inset 0 0 0 1px rgba(13,14,16,.05)}
.theme button{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--ink-3); transition:background .2s, color .2s, box-shadow .2s}
.theme button:hover{color:var(--ink)}
.theme button svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.theme button[aria-pressed="true"]{background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(13,14,16,.1), 0 4px 10px -6px rgba(13,14,16,.3)}
.drawer .theme{margin:14px 0 0; width:max-content}
.theme-btn .to-light{display:none}
:root[data-mode="dark"] .theme-btn .to-light{display:block}
:root[data-mode="dark"] .theme-btn .to-dark{display:none}
@media (max-width:1480px){ .nav a{padding:0 10px; font-size:13px} .head-in{gap:12px} }
@media (max-width:1340px){ .nav a{padding:0 8px} .tools{gap:2px} }

:root[data-mode="dark"]{
  color-scheme:dark;
  --bg:#0F1012;
  --sand:#1C1D21;
  --sand-2:#26282D;
  --surface:#17181B;
  --ink:#F2F0EB;
  --ink-2:#C5C7CD;
  --ink-3:#8F929A;
  --line:#2B2D32;
  --line-2:#222428;
  --teal:#0A0B0C;
  --coral:#D38D69;
  --coral-2:#E6B394;
  --coral-soft:#3A2A22;
  --onyx-sheen:radial-gradient(120% 140% at 0% 0%, #34363D 0%, #232429 45%, #1B1C20 100%);
  --sh:0 1px 2px rgba(0,0,0,.35), 0 8px 22px -12px rgba(0,0,0,.7);
  --sh-2:0 2px 6px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.8);
  --tint:#23252A;
  --deep:#F2F0EB;
}
:root[data-mode="dark"] .c-move{--tint:#152A2E; --deep:#86CAD5}
:root[data-mode="dark"] .c-business{--tint:#1A2136; --deep:#A7BAF2}
:root[data-mode="dark"] .c-property{--tint:#2F2119; --deep:#EBAE86}
:root[data-mode="dark"] .c-life{--tint:#1B2A1A; --deep:#A6D29A}
:root[data-mode="dark"] .c-culture{--tint:#2E1C28; --deep:#E7A6CC}
:root[data-mode="dark"] .c-whatson{--tint:#341F17; --deep:#F4AB8E}
:root[data-mode="dark"] .c-explore{--tint:#142B2A; --deep:#86D8C8}
:root[data-mode="dark"] .c-people{--tint:#2B2516; --deep:#E2C67E}
:root[data-mode="dark"] .c-communities{--tint:#231E36; --deep:#C0AEF2}

:root[data-mode="dark"] .head{background:rgba(15,16,18,.78)}
:root[data-mode="dark"] .head.settled{background:rgba(23,24,27,.88); box-shadow:0 10px 30px -20px rgba(0,0,0,.9)}
:root[data-mode="dark"] .nav{background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
:root[data-mode="dark"] .nav a:hover{background:rgba(255,255,255,.07)}
:root[data-mode="dark"] .nav a[aria-current]{background:#2C2E34; box-shadow:0 1px 2px rgba(0,0,0,.4)}
:root[data-mode="dark"] .icon-btn:hover{background:rgba(255,255,255,.08)}
:root[data-mode="dark"] .theme{background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
:root[data-mode="dark"] .theme button[aria-pressed="true"]{background:#2C2E34; box-shadow:0 1px 2px rgba(0,0,0,.4)}
:root[data-mode="dark"] .mark,:root[data-mode="dark"] .btn,:root[data-mode="dark"] .join button{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
:root[data-mode="dark"] .btn.light{background:#F2F0EB; color:#0F1012}
:root[data-mode="dark"] .live-tag{color:#63D6A8; background:rgba(52,192,138,.14)}
:root[data-mode="dark"] .panel,:root[data-mode="dark"] .card,:root[data-mode="dark"] .tool,:root[data-mode="dark"] .desk,:root[data-mode="dark"] .letter,
:root[data-mode="dark"] .gcard,:root[data-mode="dark"] .dlg{box-shadow:inset 0 0 0 1px var(--line-2), var(--sh)}
:root[data-mode="dark"] .people,:root[data-mode="dark"] .feat,:root[data-mode="dark"] .today,:root[data-mode="dark"] .k-out,:root[data-mode="dark"] .result{box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
:root[data-mode="dark"] .ic{color:#E1E3E8; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
:root[data-mode="dark"] .desk-extra a:hover,:root[data-mode="dark"] .step .when{color:var(--bg)}
:root[data-mode="dark"] .book{background:linear-gradient(150deg, color-mix(in srgb, var(--deep) 42%, #1a1a1a) 0%, color-mix(in srgb, var(--deep) 26%, #0d0d0d) 100%)}
:root[data-mode="dark"] .book::before{background:var(--deep)}
:root[data-mode="dark"] .dlg::before{background:radial-gradient(closest-side, var(--tint), rgba(0,0,0,0))}
:root[data-mode="dark"] .dlg::after{background:radial-gradient(closest-side, color-mix(in srgb, var(--tint) 60%, transparent), rgba(0,0,0,0))}
:root[data-mode="dark"] .page,:root[data-mode="dark"] .opt,:root[data-mode="dark"] .datecard .badge{background:var(--surface)}
:root[data-mode="dark"] .launch .price{background:rgba(23,24,27,.9); color:var(--ink)}
:root[data-mode="dark"] .faq summary::after{background:var(--sand-2)}
:root[data-mode="dark"] .avs img{box-shadow:0 0 0 2px var(--surface)}
:root[data-mode="dark"] .listme .avs img{box-shadow:0 0 0 2px var(--tint)}
:root[data-mode="dark"] .logo img,:root[data-mode="dark"] .launch .who img{background:#F2F0EB; border-radius:8px; padding:4px}
:root[data-mode="dark"] .launch .who img{padding:2px; border-radius:5px}
:root[data-mode="dark"] .proto-switch,:root[data-mode="dark"] .nudge{background:rgba(23,24,27,.94)}
:root[data-mode="dark"] .proto-switch button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--ink)}
:root[data-mode="dark"] .pic,:root[data-mode="dark"] .fmt .pic{background:#222428}
:root[data-mode="dark"] ::selection{background:rgba(211,141,105,.35)}