/* ==========================================================================
   Type system (2026-10-25). Loaded last, so it wins.
   One scale, read in order: display > section title > subsection > card title > intro > body > small > label.
   Nothing on screen under 12px; secondary text always passes WCAG AA (4.5:1).
   ========================================================================== */
:root {
  /* Tesla-calm scale (user, 2026-10-25): restrained headings, light intros, 15px body */
  --t-display: clamp(2rem, 3.4vw, 3rem);         /* page hero h1          48 > 32  */
  --t-title:   clamp(1.625rem, 2.3vw, 2.125rem);  /* section h2            34 > 26  */
  --t-sub:     clamp(1.25rem, 1.6vw, 1.5rem);     /* subsection            24 > 20  */
  --t-card:    1.0625rem;                         /* card and row titles   17       */
  --t-lede:    clamp(1rem, 1.05vw, 1.0625rem);    /* intro paragraph       17 > 16, light */
  --t-body:    .9375rem;                          /* body copy             15       */
  --t-small:   .875rem;                           /* card copy, captions   14       */
  --t-meta:    .8125rem;                          /* dates, read times     13       */
  --t-label:   .75rem;                            /* uppercase labels      12       */
}
@media (max-width: 640px) {
  :root { --t-card: 1rem; --t-body: .9375rem; }
}

/* headings */
.h-xl { font-size: var(--t-display); line-height: 1.04; }
.h-l { font-size: var(--t-title); line-height: 1.1; }
.h-m { font-size: var(--t-sub); line-height: 1.18; }
@media (max-width: 640px) {
  .h-xl, .p-hero .rrs-t { font-size: var(--t-display); }
  .h-l { font-size: var(--t-title); }
  .h-m { font-size: var(--t-sub); }   /* was 25.6px, the same as h-l: no hierarchy */
}

/* card and row titles: one size everywhere */
.view h4, .ftr h4 { font-size: var(--t-card); line-height: 1.3; }

/* intro paragraph sits clearly above body copy */
.lede, .hero-c .lede { font-size: var(--t-lede); line-height: 1.55; }

/* small copy: card descriptions, captions, list rows */
.story-row p, .card p, .art p, .pillars p, .pub-i p, .adv p, .ev-row p, .tr p, .svc p, .hub p, .muted { font-size: max(var(--t-small), .875rem); line-height: 1.55; }
.meta, .ev-row small, .sum small, .disclaim, .fine, .ftr-b { font-size: var(--t-meta); }

/* labels: uppercase, tracked, never under 12px */
.eyebrow, .tag, .sum-d, .hero-tiers span, .net-figs > div > span, .tr-facts small { font-size: var(--t-label); }
@media (max-width: 640px) {
  .eyebrow, .tag, .sum-d, .net-figs > div > span, .qz-top .eyebrow { font-size: var(--t-label); letter-spacing: .14em; }
}

/* contrast fixes found in the audit */
.tr-facts small { color: var(--muted); }         /* was --faint, 2.7:1 on white */
.tr-facts span { font-size: var(--t-small); }

/* remaining small text from the mobile audit */
.ev-w { font-size: var(--t-meta); }                          /* event row place and topic, was 12.2px */
.cd span { font-size: var(--t-label); color: rgba(255, 255, 255, .72); }   /* countdown units, were 8.8px on mobile */
.hero-foot span { font-size: var(--t-meta); color: rgba(255, 255, 255, .72); }
@media (max-width: 640px) {
  .cd span { font-size: .6875rem; letter-spacing: .12em; }   /* 11px: four units must fit the countdown boxes */
  .nl b { font-size: .8125rem; }                              /* map city labels */
  .nl.pt b { font-size: .75rem; }
}
/* calendar tiles and countdowns in event rows */
.cal i { font-size: .6875rem; }
.cal span { font-size: .75rem; }
.ev-c { font-size: var(--t-meta); }
@media (max-width: 640px) {
  .cal i { font-size: .6875rem; letter-spacing: .14em; }   /* month, was 9.3px */
  .cal span { font-size: .6875rem; }                       /* weekday, was 9.6px */
  .ev-c { font-size: .8125rem; }
  .nl b { font-size: .75rem; }                             /* every map label, gateways included, at least 12px */
}
@media (max-width: 640px) { .split .h-m { font-size: var(--t-sub); } }   /* About split headings followed the old 1.6rem */

/* footer: four groups now that Follow is gone (user, 2026-10-25) */
.ftr-top { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .ftr-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .ftr-top > div:first-child { grid-column: 1 / -1; } }

/* book covers: no globe pattern (user, 2026-10-25) */
.cv .cv-globe { display: none; }

/* photographs inside articles */
.rd-fig { margin: clamp(28px, 4vw, 44px) 0; }
.rd-fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--mist, #f3f4f6); }
.rd-fig figcaption { display: flex; justify-content: space-between; gap: 16px; padding-top: 10px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.rd-fig figcaption span { font-size: var(--t-small); color: var(--ink-2); }
.rd-fig figcaption small { font-size: var(--t-meta); color: var(--muted); text-align: right; flex: 0 1 42%; }
@media (max-width: 640px) { .rd-fig figcaption { flex-direction: column; gap: 4px; } .rd-fig figcaption small { text-align: left; } }
/* book covers: every cover shares one grid, so kicker, title, subtitle and footer sit at the same height on all four */
.cv .cv-t { min-height: 2.04em; display: flex; align-items: flex-end; }
.cv .cv-s { min-height: 2.7em; }
.cv .cv-rrs { position: absolute; left: 9%; top: 22%; margin: 0; width: 20%; }
.cv .cv-rrs + .cv-k { margin-top: auto; }
.cv .cv-y { white-space: nowrap; overflow: hidden; gap: 8px; }
.cv .cv-y span:first-child { overflow: hidden; text-overflow: ellipsis; }

/* Explore topics: photo tiles with a low-opacity frosted-glass label and a line icon (user, 2026-10-25) */
.tcats { gap: 10px; padding: 18px 0; scroll-snap-type: x mandatory; }
.tcats .tcat { position: relative; flex: 0 0 auto; height: 76px; min-width: 168px; padding: 0; border: 0; overflow: hidden; align-items: flex-end; scroll-snap-align: start; background: #0b0c12; color: #fff; isolation: isolate; }
.tcat .tcat-bg { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; transform: scale(1.02); transition: transform .6s var(--ease), filter .4s; filter: saturate(.85) brightness(.82); z-index: -1; }
.tcat .tcat-l { display: flex; align-items: center; gap: 8px; width: 100%; margin: 8px; padding: 8px 11px; font-size: .82rem; font-weight: 500; letter-spacing: .005em; color: #fff;
  background: rgba(255, 255, 255, .14); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .22); transition: background .3s, border-color .3s, color .3s; white-space: nowrap; }
.tcat .tcat-l .i { width: 16px; height: 16px; flex: none; }
.tcats .tcat:hover .tcat-bg { transform: scale(1.09); filter: saturate(1) brightness(.9); }
.tcats .tcat:hover { border-color: transparent; }
.tcats .tcat.on { background: #0b0c12; outline: 2px solid var(--ink); outline-offset: 2px; }
.tcats .tcat.on .tcat-l { background: rgba(255, 255, 255, .92); color: var(--ink); border-color: #fff; }
.tcats .tcat:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 640px) { .tcats .tcat { height: 68px; min-width: 150px; } .tcat .tcat-l { font-size: .8rem; } }

/* Market trends: every country shaded by real GDP growth (user, 2026-10-25) */
.tr-map { --h0: #e39a7e; --h1: #e9e6f2; --h2: #c9d3ee; --h3: #9fb2e3; --h4: #6f88d1; --h5: #4258b4; --h6: #2b2f86; }
:root[data-theme="dark"] .tr-map { --h0: #8a4430; --h1: #2a2f45; --h2: #2f3c6b; --h3: #3a4f93; --h4: #4c66b8; --h5: #6a86d8; --h6: #9db3f2; }
.tr-map path.hv { fill: var(--hf); cursor: pointer; }
.tr-map path.hv:hover { filter: brightness(1.12) saturate(1.1); stroke: var(--ink); stroke-width: .6; }
.tr-map path.sel { stroke: var(--ink); stroke-width: 1.2; filter: none; }
.tr-map path.has.sel, .tr-map path.has:hover { fill: var(--hf, var(--navy)); }
.tr-heat-leg { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; }
.tr-heat-leg b { font: 500 .75rem/1 var(--f-text); color: var(--ink); }
.hl-bar { display: flex; gap: 0; }
.hl-bar span { display: flex; flex-direction: column; gap: 4px; font-size: .6875rem; color: var(--ink-2); min-width: 40px; }
.hl-bar span i { width: 100%; height: 8px; margin: 0; }
.tr-heat-leg small { font-size: .6875rem; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.hl-pin { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); margin-left: 4px; }
.tr-heat { padding: 6px 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.tr-heat b { display: block; font: 300 2.4rem/1.1 var(--f-display); margin: 6px 0 4px; }
.tr-heat small { font-size: var(--t-meta); color: var(--muted); }
@media (max-width: 640px) { .tr-legend.tr-heat-leg { display: flex; position: static; background: none; padding: 12px 0 0; } .hl-bar span { min-width: 0; flex: 1; } .hl-bar { width: 100%; } }

/* intro text: light and quieter (user, 2026-10-25) */
.lede, .hero-c .lede, .band .lede, .p-hero .lede, .xg-hero .lede, .net-head .lede { font-weight: 300; letter-spacing: .003em; }
@media (max-width: 640px) { .lede, .hero-c .lede { font-size: var(--t-lede); line-height: 1.55; } }
.prose p, .split .prose > p:first-child { font-size: var(--t-body); }
.split .prose > p:first-child { font-size: var(--t-lede); font-weight: 300; color: var(--ink); line-height: 1.55; }
.rd-body p { font-size: 1.0625rem; line-height: 1.7; }

/* ---------- About: four distinct compositions (2026-10-25) ---------- */
.ab-who .ab-state { font: 300 clamp(1.6rem, 3vw, 2.6rem)/1.25 var(--f-display); letter-spacing: -.012em; color: var(--ink); max-width: 30ch; margin: 22px 0 clamp(36px, 5vw, 64px); text-wrap: balance; }
.ab-state .w { opacity: .14; transition: opacity .2s; }
html:not(.gs) .ab-state .w { opacity: 1; }
.ab-caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.ab-cap { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 22px 18px 22px 0; border-bottom: 1px solid var(--line); color: var(--ink); overflow: hidden; }
.ab-cap + .ab-cap { padding-left: 18px; border-left: 1px solid var(--line); }
.ab-cap .n { font: 500 var(--t-label)/1 var(--f-display); letter-spacing: .14em; color: var(--muted); }
.ab-cap b { font: 300 clamp(1.15rem, 1.6vw, 1.45rem)/1.1 var(--f-display); flex: 1; }
.ab-cap .i { width: 18px; height: 18px; opacity: 0; transform: translateX(-10px); transition: opacity .3s, transform .35s var(--ease); }
.ab-cap::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.ab-cap:hover::after, .ab-cap:focus-visible::after { transform: scaleX(1); }
.ab-cap:hover .i, .ab-cap:focus-visible .i { opacity: 1; transform: none; }
.ab-cap:hover b { color: var(--navy); }
.ab-note { max-width: 62ch; margin-top: 28px; color: var(--ink-2); font-size: var(--t-body); }
.ab-str-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.ab-str-g > div { border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 22px; overflow: hidden; }
.ab-big { display: block; font: 200 clamp(3.5rem, 7vw, 6rem)/1 var(--f-display); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .55); margin-bottom: 18px; }
.ab-str h4 { color: #fff; margin: 0 0 8px; }
.ab-str p { color: rgba(255, 255, 255, .72); font-size: var(--t-small); max-width: 34ch; margin: 0; }
.ab-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.ab-frame { position: relative; padding: 26px 24px; background: var(--paper);
  background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat; background-size: 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%; transition: transform .4s var(--ease), box-shadow .4s; }
.ab-frame:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(11, 12, 18, .35); }
.ab-frame h4 { margin: 0 0 6px; } .ab-frame small { color: var(--muted); font-size: var(--t-meta); }
@media (max-width: 900px) {
  .ab-caps { grid-template-columns: 1fr 1fr; } .ab-cap:nth-child(3) { padding-left: 0; border-left: 0; }
  .ab-str-g, .ab-frames { grid-template-columns: 1fr; }
}

/* Explore topic tiles, v2 (user, 2026-10-25: "a lot nicer") — label on the photo, frosted icon disc, calm selected state */
.tcats { gap: 12px; padding: 20px 0 22px; }
.tcats .tcat { height: 112px; min-width: 184px; flex: 0 0 184px; background: #0b0c12; outline: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transition: transform .45s var(--ease), box-shadow .35s; }
.tcats .tcat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 9, 14, 0) 30%, rgba(8, 9, 14, .78) 100%); z-index: -1; pointer-events: none; }
.tcat .tcat-bg { filter: saturate(.7) brightness(.78); transform: scale(1.04); transition: transform .9s var(--ease), filter .5s; }
.tcat .tcat-l { position: absolute; left: 14px; right: 14px; bottom: 13px; width: auto; margin: 0; padding: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; white-space: normal; }
.tcat .tcat-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4); transition: background .3s, color .3s, border-color .3s; }
.tcat .tcat-ic .i { width: 15px; height: 15px; stroke-width: 1.6; }
.tcat .tcat-n { font: 500 .84rem/1.2 var(--f-text); letter-spacing: .005em; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); text-align: left; }
.tcat .tcat-ck { position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s var(--ease); box-shadow: 0 0 0 4px rgba(255, 255, 255, .18); }
.tcats .tcat:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 16px 32px -18px rgba(11, 12, 18, .55); }
.tcats .tcat:hover .tcat-bg { transform: scale(1.12); filter: saturate(.95) brightness(.86); }
.tcats .tcat:hover .tcat-ic { background: rgba(255, 255, 255, .26); }
.tcats .tcat.on { outline: none; box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--ink), 0 18px 36px -20px rgba(11, 12, 18, .6); }
.tcats .tcat.on .tcat-bg { filter: saturate(1.05) brightness(.9); }
.tcats .tcat.on .tcat-ic { background: #fff; color: var(--ink); border-color: #fff; }
.tcats .tcat.on .tcat-ck { opacity: 1; transform: none; }
.tcats .tcat:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.tcats:has(.tcat.on[data-cat]:not([data-cat=""])) .tcat:not(.on) .tcat-bg { filter: saturate(.45) brightness(.62); }
@media (max-width: 640px) { .tcats .tcat { height: 96px; min-width: 152px; flex-basis: 152px; } .tcat .tcat-n { font-size: .8rem; } .tcat .tcat-ic { width: 26px; height: 26px; } }

/* Explore topic tiles, v3 (user, 2026-10-25): frosted glass over the whole photo, label centred */
.tcats .tcat::after { display: none; }
.tcat .tcat-bg { filter: saturate(.9) brightness(.85); transform: scale(1.06); }
.tcat .tcat-l, .tcats .tcat.on .tcat-l { position: absolute; inset: 0; margin: 0; padding: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; color: #fff;
  background: rgba(14, 16, 24, .26); backdrop-filter: blur(9px) saturate(1.3); -webkit-backdrop-filter: blur(9px) saturate(1.3); border: 1px solid rgba(255, 255, 255, .16);
  transition: background .45s var(--ease), backdrop-filter .45s var(--ease), -webkit-backdrop-filter .45s var(--ease), border-color .35s; }
.tcat .tcat-n { text-align: center; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); max-width: 16ch; }
.tcats .tcat:hover .tcat-l { background: rgba(14, 16, 24, .14); backdrop-filter: blur(4px) saturate(1.3); -webkit-backdrop-filter: blur(4px) saturate(1.3); border-color: rgba(255, 255, 255, .3); }
.tcats .tcat.on .tcat-l { background: rgba(255, 255, 255, .16); backdrop-filter: blur(3px) saturate(1.4); -webkit-backdrop-filter: blur(3px) saturate(1.4); border-color: rgba(255, 255, 255, .7); color: #fff; }
.tcats .tcat.on .tcat-n { color: #fff; }
.tcats .tcat.on { box-shadow: 0 0 0 2px var(--ink), 0 18px 36px -20px rgba(11, 12, 18, .6); }
.tcats .tcat.on .tcat-l { background: rgba(14, 16, 24, .3); backdrop-filter: blur(2px) saturate(1.4); -webkit-backdrop-filter: blur(2px) saturate(1.4); }
/* topic tiles back to the earlier, smaller size (user, 2026-10-25) */
.tcats { gap: 10px; padding: 18px 0; }
.tcats .tcat { height: 64px; min-width: 0; flex: 0 0 auto; }
.tcat .tcat-l, .tcats .tcat.on .tcat-l { flex-direction: row; gap: 8px; padding: 0 18px; position: relative; inset: auto; height: 100%; }
.tcat .tcat-ic { width: 24px; height: 24px; }
.tcat .tcat-ic .i { width: 13px; height: 13px; }
.tcat .tcat-n { font-size: .82rem; max-width: none; white-space: nowrap; }
.tcat .tcat-ck { top: 8px; right: 8px; width: 6px; height: 6px; }
@media (max-width: 640px) { .tcats .tcat { height: 56px; min-width: 0; flex-basis: auto; } .tcat .tcat-l { padding: 0 14px; } }

/* video thumbnails: crop hqdefault's letterbox bars */
.s-card .ph img.vthumb { object-fit: cover; transform: scale(1.34); }
/* GEH player shell */
.gp { position: relative; background: #000; overflow: hidden; }
.gp .gp-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.34); filter: brightness(.7); transition: opacity .5s; }
.gp .gp-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .35s var(--ease), background .3s; z-index: 2; }
.gp .gp-play:hover { transform: scale(1.06); background: rgba(255, 255, 255, .26); }
.gp .gp-play .i { width: 28px; height: 28px; margin-left: 3px; }
.gp .gp-top { position: absolute; left: 18px; top: 16px; z-index: 2; }
.gp iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.gp.on .gp-poster, .gp.on .gp-play, .gp.on .gp-top { opacity: 0; pointer-events: none; }
.th-src { color: rgba(255, 255, 255, .55); font-size: var(--t-meta); }
.tcats .tcat, .tcats .tcat:hover, .tcats .tcat.on { box-shadow: none; }
.tcats .tcat.on { outline: 2px solid var(--ink); outline-offset: 2px; }
.tcats .tcat:hover { transform: none; }