/* Fonts, self-hosted (Bas, 2026-10-16: speed). Variable woff2 files, latin and latin-ext only, from Google Fonts. */
  @font-face { font-family: "Inter"; font-style: normal; font-weight: 300 500; font-display: swap; src: url(fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family: "Inter"; font-style: normal; font-weight: 300 500; font-display: swap; src: url(fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 300 500; font-display: swap; src: url(fonts/inter-tight-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 300 500; font-display: swap; src: url(fonts/inter-tight-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/jetbrains-mono-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/jetbrains-mono-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

  /*
   * Theta Insights (Bas, 2026-10-12).
   * A product shell with an editorial inside. The shell is the BPM Supreme app: left sidebar that slides into an icon
   * rail, top bar, webinar carousel, and BPM Academy-style slider rows (16:9 cards, arrows, drag to scroll) for webinar
   * replays, thoughtpieces and the Start here collections. Bas needs the sidebar ("it has to feel like a product"); a
   * newspaper front without it was rejected (versions/v7-newspaper-rejected.html). The weekly newsletter
   * stay editorial and text-led, after the NYT intranet home by Area 17. Headlines in Inter Tight.
   *
   * No meta noise (Bas): no dates, reading times, issue numbers, bylines, labels or taglines. Only the webinar date
   * (needed to register), speaker names on webinars and the name on a quote remain.
   * Three divider weights: stronger 1px grey (--rule) above every section · thin 1px grey between items and as
   * column rules · none inside an item.
   * Brand from the Theta Blockchain Ventures deck: official Theta Capital SVG, navy #001627, light weight for big type,
   * Alegreya for quotes in olive on pale yellow. Letter spacing is always 0. Copy follows brand/tone-of-voice.md.
   * Images are Theta's own campaign art, placeholders; cards without an image are set in type (navy or warm).
   *
   * IMAGE SPEC (only two ratios on the whole page):
   *   16:9  card art: webinar replays, thoughtpieces. Deliver 1920 x 1080. Fills .card .art with object-fit: cover.
   *   1:1   carousel square: upcoming webinars and the featured replay. Deliver 1080 x 1080. The blurred slide
   *         background is made from the same file, so one square image per webinar is all that is needed.
   * Since the card title only appears on the art (the line under a card is the name), custom card images must carry
   * the title in the artwork itself, as BPM Academy does. Otherwise put the title back under the card.
   */
  :root {
    --page: #FFFFFF;   /* pure white (Bas: paper white #FBFAF8 was tried and rejected) */
    --warm: #F1EEEB;
    --warm-hover: #E8E4DE;   /* a warm card on hover */
    --soft: #F6F5F3;   /* warm off-white for hover and active (brand #F8F8F2 tried: too green next to the warm cards) */
    /* Line greys (cleanup, Bas 2026-10-16): two, warm. --rule frames the page (menu edge, top bar, phone menu, the divider under
       page titles, section dividers) and outlines controls; --hair separates items inside content (list rows, column lines). */
    --rule: #DCD9D4;    /* frame lines and section dividers (Bas: the black 2px was too intense) */
    --hair: #ECEAE6;
    --line: var(--rule);   /* outlines of fields, buttons and panels: the same grey as the frame */
    --ink: #0B1622;    /* navy-black: text belongs to the brand navy, never pure black */
    --sub: #474747;
    --label: #767676;
    --navy: #031726;   /* brand sheet */
    --yellow: #F9FDD0; /* brand sheet */
    --blue: #066A9C;   /* brand sheet: links inside running text */
    --olive: #998C00;
    /* Carousel slide colours (Bas: brand colours, think deep navy). Each slide picks one: style="--tint: var(--tint-…)".
       All deep enough for white text; shown as plain colour, deepened once more (Bas). */
    --tint-navy: #0A1A2C;   /* deep navy, the default */
    --tint-blue: #0D3047;   /* brand blue #066A9C, deepened and muted to petrol */
    --tint-ink: #151A2B;    /* navy with a touch of violet */
    --tint-slate: #17212A;  /* navy greyed down, for warm or busy art */
    --tint-aubergine: #2A1730;   /* deep aubergine: the third colour on the carousel (Bas, after olive and teal). Deliberate exception to "no purple": near-black plum only, never a bright or mid purple */
    --tint-teal: #0B2F2C;   /* deep teal (tried as third colour) */
    --tint-olive: #262612;  /* brand olive #998C00, deepened (tried as third colour, Bas preferred teal) */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --side: 248px;
    --rail: 60px;
    --gutter: 24px;
    --col: 8px;
    --measure: 620px;   /* the reading column: article text, and the search bar above it on every page */
    --r: 4px;           /* corner radius: minimal but there (Bas). Frames around a control (the topic switch) get 6px. */
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }
  body { background: var(--page); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; font-size: 13px; line-height: 1.5; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  img { display: block; }
  [hidden] { display: none !important; }
  :focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: var(--r); }
  ::selection { background: #DDE3EA; }
  .display { font-family: 'Inter Tight', system-ui, sans-serif; }
  .big-title { font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 500; line-height: 1.1; }   /* titles in medium (Bas); light stays for the date numerals and the article lede */
  .item-title { font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 500; font-size: 17px; line-height: 1.3; }
  .deck { font-size: 17px; line-height: 1.4; color: var(--ink); }
  .body { color: var(--sub); }
  .meta { font-size: 12px; color: var(--label); }
  .piece { display: block; }
  /* One hover rule for the whole page: whatever you can click underlines its own text on hover */
  /* The underline glides up and fades in (premium pass): it waits 6px low and invisible, and settles at 3px on hover */
  /* One hover language (Bas): text links underline (gliding in); cards never underline, their art reacts instead */
  a.piece .item-title, a.piece .big-title, .guide a, .issues a, a.see, .piece .see { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 6px; transition: text-decoration-color .25s var(--ease), text-underline-offset .25s var(--ease); }
  a.piece:hover .item-title, a.piece:hover .big-title, .guide a:hover, .issues a:hover, a.see:hover, .piece:hover .see { text-decoration-color: currentColor; text-underline-offset: 3px; }

  .btn { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--r); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s, border-color .15s, transform .12s var(--ease); }
  .btn:active, .quiz-tags button:active, .arrows button:active, .qz-chips button:active { transform: scale(.98); }   /* a small press (premium pass) */
  .btn-brand { background: var(--navy); color: #fff; }
  .btn-brand:hover { background: #0C2A40; }
  .btn-light { background: #fff; color: var(--ink); }
  .btn-light:hover { background: var(--soft); }   /* the warm hover grey (was a cold #F0F0F0) */
  /* Text link with the NYT arrow circle */
  .see { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; }
  .see i { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; transition: transform .3s var(--ease); flex: none; }
  .see i svg { width: 10px; height: 10px; stroke: #fff; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  /* Arrow links: one quiet signal on hover, the underline; the circle stays still (Bas: too much movement) */
  a.see, .piece .see { transition: none !important; }

  /* ---------- Shell: sidebar that slides into an icon rail (BPM) ---------- */
  /* Folding is instant (Bas, 2026-10-15): animating the column width re-wrapped every page on every frame, so content jumped,
     differently per section. Only the menu labels fade back in. */
  .shell { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; }
  .shell.collapsed { grid-template-columns: var(--rail) 1fr; }
  .sidebar { position: sticky; top: 0; z-index: 30; height: 100vh; border-right: 1px solid var(--rule); padding: 8px 12px; display: flex; flex-direction: column; overflow: hidden; }
  /* Sidebar top: logo with the handle that slides the menu in and out beside it (BPM). The row is 32px high, the same
     as the top bar's controls, so the logo and the search bar share a centre line. */
  .side-top { display: flex; align-items: center; justify-content: space-between; height: 32px; padding-left: 7px; margin-bottom: 25px; }   /* 7px: the Θ sits centred over the menu icons, open or folded, so it never moves */   /* first menu item lines up with the top of the content (16px under the top bar) */
  /* Logo: the official Theta Capital SVG (Marketing OneDrive, 2.0 Brand/Logo). In the rail the Θ mark (img/theta-mark.svg, the same artwork cropped) takes its place. */
  .brand { display: flex; align-items: center; }
  .brand .logo { height: 22px; width: auto; }
  .brand .mark { height: 22px; width: auto; display: none; }
  .collapsed .brand .logo { display: none; }
  .collapsed .brand .mark { display: block; }
  .toggle { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r); color: var(--label); flex: none; }
  .toggle:hover { background: var(--soft); color: var(--ink); }
  .toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  /* Folded: only the arrow turns to point right; the panel line stays on the left, where the menu is */
  .toggle .arr { transform-box: fill-box; transform-origin: center; }
  .collapsed .toggle .arr { transform: scaleX(-1); }
  .nav { display: flex; flex-direction: column; gap: 1px; }
  /* The menu is crisp (Bas, 2026-10-15): one hover for every item (the grey block, no underline), no fades, no transitions */
  .nav a { display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 10px; border-radius: var(--r); color: var(--sub); white-space: nowrap; }
  .nav a:hover { background: var(--soft); color: var(--ink); }
  .nav a.active { background: var(--soft); color: var(--ink); font-weight: 500; }
  .nav svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .collapsed .nav span { opacity: 0; pointer-events: none; }
  /* Investor materials: the one quiet bridge to fund documents, at the very bottom of the sidebar and the rail */
  .nav-bottom { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--rule); }

  /* Request investor materials (dialog) */
  .btn-line { border: 1px solid var(--line); color: var(--ink); background: transparent; }
  .btn-line:hover { border-color: var(--ink); }
  .req { margin: auto; border: 0; padding: 0; border-radius: 8px; width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; color: var(--ink); box-shadow: 0 24px 64px rgba(3,23,38,.18); }
  .req::backdrop { background: rgba(3,23,38,.32); }
  .req > div { padding: 24px; }
  .req-close { position: absolute; top: 8px; right: 8px; }
  .req-close button { width: 32px; height: 32px; font-size: 20px; line-height: 1; color: var(--label); border-radius: var(--r); }
  .req-close button:hover { background: var(--soft); color: var(--ink); }
  .req .big-title { font-size: 24px; }
  .req .body { margin-top: 8px; }
  #reqSend, #gateForm, #lwForm { display: grid; gap: 12px; margin-top: 24px; }
  
  #reqSend .want { display: grid; gap: 4px; font-size: 12px; color: var(--sub); }
  #reqSend .want .switch { justify-self: start; }
  #reqSend label, #gateForm label, #lwForm label { display: grid; gap: 4px; font-size: 12px; color: var(--sub); }
  #reqSend input[type=text], #reqSend input[type=email], #reqSend select, #gateForm input[type=email], #lwForm input[type=text], #lwForm input[type=email] { height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font: inherit; font-size: 13px; color: var(--ink); outline: 0; }
  #reqSend textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font: inherit; font-size: 13px; color: var(--ink); outline: 0; resize: vertical; }
  #reqSend textarea:focus { border-color: var(--ink); }
  #reqSend input:focus, #reqSend select:focus, #gateForm input:focus, #lwForm input:focus { border-color: var(--ink); }
  #reqSend .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  #reqSend .check, #gateForm .check, #lwForm .check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink); }
  #reqSend .check input, #gateForm .check input, #lwForm .check input { margin-top: 3px; accent-color: var(--navy); }
  #reqSend .btn, #gateForm .btn, #lwForm .btn { justify-self: start; margin-top: 4px; }
  /* Tracking consent (Bas, 2026-10-16): the same tick box on every email form, optional */
  .check.consent, #reqSend .check.consent, #gateForm .check.consent, #lwForm .check.consent { display: flex; align-items: flex-start; gap: 8px; font-size: 10px; line-height: 1.45; color: var(--label); }   /* small print on every form (Bas, 2026-10-23) */
  .check.consent input, #reqSend .check.consent input, #gateForm .check.consent input, #lwForm .check.consent input { margin-top: 2px; flex: none; accent-color: var(--navy); }
  .check.consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  .nl-signup .check.consent { margin-top: 12px; }
  /* "New" since the last visit (Bas, 2026-10-16) */
  .new-tag { display: inline-block; margin-left: 8px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400; font-size: 11px; line-height: 16px; color: var(--blue); vertical-align: middle; text-decoration: none; }
  .piece.lead .new-tag { display: block; margin: 0 0 8px; }
  .check.consent.bad input { outline: 2px solid var(--ink); outline-offset: 2px; }   /* sent without the tick */

  /* Phone-only pieces, hidden on larger screens */
  .m-logo { display: none; }
  .tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; grid-template-columns: repeat(6, 1fr); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-top: 1px solid var(--rule); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; font-size: 11px; color: var(--label); }
  .tabbar a.active { color: var(--ink); }
  .tabbar svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

  /* The content fills the whole width next to the menu on every screen, no cap (Bas, 2026-10-15): the top bar, the
     menu button and the right edge always sit the same gutter from the screen edges */
  main { min-width: 0; overflow-x: clip; width: 100%; container-type: inline-size; container-name: page; }
  /* Top bar in three columns: the menu handle left (always in the same spot), search in the middle, actions right */
  .topbar { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, var(--measure)) minmax(240px, 1fr); align-items: center; gap: 16px; padding: 8px var(--gutter); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
  .search { flex: 1; max-width: 400px; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r); transition: border-color .15s; }
  .search:focus-within { border-color: var(--ink); }
  .search svg { width: 14px; height: 14px; stroke: var(--label); fill: none; stroke-width: 2; flex: none; }
  .search input { border: 0; outline: 0; background: none; font: inherit; width: 100%; color: var(--ink); }
  .search input::placeholder { color: var(--label); }
  .search .clear { font-size: 12px; color: var(--label); }
  .search .clear:hover { color: var(--ink); }
  .search kbd { font: inherit; font-size: 12px; color: var(--label); border: 1px solid var(--hair); border-radius: var(--r); padding: 0 5px; line-height: 16px; }
  .top-left { display: flex; align-items: center; margin-left: -8px; }
  .topbar .search { max-width: none; width: 100%; }
  .top-actions { justify-self: end; }
  .switch { display: inline-flex; padding: 2px; border-radius: 6px; background: var(--soft); }
  .switch button { height: 28px; padding: 0 10px; border-radius: var(--r); font-size: 12px; font-weight: 500; color: var(--sub); transition: background .2s var(--ease), color .2s; }
  .switch button:hover { color: var(--ink); }
  .switch button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

  /* ---------- Hero: upcoming webinars and the featured replay ---------- */
  .hero { overflow: hidden; padding-top: 16px; }   /* the same breathing room under the top bar as elsewhere */
  .hero-track { display: flex; gap: 8px; padding-left: var(--gutter); padding-right: var(--gutter); transition: transform .7s var(--ease); }
  /* LOCKED (Bas, 2026-10-12): the carousel layout is approved. Change images and copy, not the layout.
     Width (Bas, later): a slide ends exactly where the newsletter's "Previous editions" column starts, so both use the
     same golden-ratio split (1.618 : 1) of the content width. Tablets and phones keep their own widths below. */
  /* BPM hero slide: a soft background made from the art itself, the art as a square on the right, text on the left.
     (A navy version with speaker portraits was tried and reverted, Bas 2026-10-12.) */
  .slide { position: relative; flex: none; width: calc((100cqw - 2 * var(--gutter)) * 1.618 / 2.618); height: 360px; border-radius: var(--r); overflow: hidden; cursor: pointer; color: #fff; display: grid; grid-template-columns: 1fr 312px; gap: 24px; padding: 24px; background: var(--tint, var(--navy));   /* plain colour (Bas): linear, lit and grained versions were tried */ transition: opacity .5s var(--ease); }
  /* Slides that are not in focus dim down instead of fading into the page (fading turned them pastel) */
  .slide { transition: opacity .5s var(--ease), filter .5s var(--ease); }
  .slide:not(.current) { filter: brightness(.55) saturate(.7); }
  .slide:not(.current):hover { filter: brightness(.75) saturate(.85); }
  .slide .s-foot .btn { transition: opacity .3s var(--ease); }
  .slide:not(.current) .s-foot .btn { opacity: 0; pointer-events: none; }   /* a dimmed button read as disabled; it only works on the slide in focus anyway */
  /* Colour per slide (Bas missed the colour): each slide has a deep tint taken from its own art (--tint on the slide),
     as a plain linear gradient from top (lighter) to bottom (deeper) (Bas). The blurred art is no longer shown. */
  .slide::after { content: none; }
  .slide .copy, .slide .sq { position: relative; z-index: 1; }
  .slide .copy { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
  /* Optical alignment: the cap height of the title lines up with the top of the square, the bottom row with its bottom */
  .slide h3 { font-size: 40px; max-width: 15ch; margin-top: -5px; }   /* keeps the cap height level with the top of the square on the 40px line */   /* 40 (Bas: a bit bigger); -8px keeps the cap height level with the top of the square */
  .slide p { margin-top: 8px; font-size: 13px; opacity: .88; }
  .slide .s-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
  .slide .when { display: flex; flex-direction: column; font-size: 12px; line-height: 1; opacity: .92; margin-bottom: -2px; }
  .slide .when b { font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 300; font-size: 32px; line-height: .8; margin-bottom: 8px; }
  .slide .sq { width: 312px; height: 312px; border-radius: var(--r); overflow: hidden; box-shadow: 0 12px 32px rgba(0,0,0,.25); }
  .slide .sq img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--ease); }
  .slide.current .sq img { transform: scale(1); }
  .hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--gutter) 0; }
  .bars { display: flex; gap: 4px; }
  .bars button { position: relative; width: 18px; height: 14px; transition: width .4s var(--ease), opacity .3s; }
  .bars button::before, .bars button span { content: ''; position: absolute; left: 0; top: 6px; height: 2px; }
  .bars button::before { right: 0; background: var(--line); }
  .bars button span { width: 0; background: var(--navy); }
  .bars button.on { width: 52px; }
  .bars button.on span { animation: fill 6s linear forwards; }
  .bars button.off { opacity: .25; }
  .hero.paused .bars button.on span { animation-play-state: paused; }
  @keyframes fill { to { width: 100%; } }

  /* ---------- Sections: heavy rule on top, title under it ---------- */
  .section { margin: 64px var(--gutter) 0; border-top: 1px solid var(--rule); }
  /* Every section header is the same: 12px from the line to the label, an 18px label line, 24px to the content. 64px between every section, no exceptions. Vertical space is generous, horizontal gaps are tight (Bas). Arrows and filters sit inside that line without stretching it. */
  .section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; height: 28px; padding-top: 12px; margin-bottom: 24px; box-sizing: border-box; }
  /* Section titles in JetBrains Mono, all caps (Bas): a label voice that sets the categories apart from the headlines. The one place caps are allowed. */
  .section-head h2 { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 400; color: var(--sub); letter-spacing: 0; text-transform: uppercase; }

  .cols { display: grid; }
  .cols > * { padding: 0 var(--col); border-left: 1px solid var(--hair); min-width: 0; }
  .cols > :first-child { padding-left: 0; border-left: 0; }
  .cols > :last-child { padding-right: 0; }

  /* Newsletter (editorial): the latest issue, then a column with the previous issues as titles only.
     The pull quote and the inline signup were removed (Bas); the signup lives in the Subscribe panel in the top bar. */
  /* The newsletter gets room to breathe (Bas): wide gutters either side of the column rule and roomier rows, but the
     same vertical rhythm as every other section (a special 64px gap broke the flow). The rest of the page stays tight, which makes this block read as the editorial centre. */
  /* This week (homepage): the edition is the editorial centre, so it gets the wide gutters; the rest stays tight.
     Two columns: the essay and In brief (hand-picked cards beside them were dropped, Bas: they repeated the rows). */
  .edition { grid-template-columns: 1.618fr 1fr; }   /* golden ratio (Bas) */
  .edition > * { padding-left: 24px; padding-right: 24px; }
  .edition > :first-child { padding-left: 0; }
  .edition > :last-child { padding-right: 0; }
  .edition .lead .big-title { font-size: 40px; }   /* one step up the 1.25 scale from 32 (Bas: a bit bigger) */
  .edition .lead .deck { margin-top: 16px; }
  .edition .lead .more { padding-top: 32px; }
  .edition .nl-side h5 { padding-bottom: 12px; }
  /* The two labels share the section line, each over its own column: same columns, same 24px inset + 1px rule */
  .edition-head { display: grid; grid-template-columns: 1.618fr 1fr; justify-content: initial; column-gap: 0; }
  .section-head.edition-head p { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; line-height: 16px; color: var(--sub); text-transform: uppercase; padding-left: 25px; }
  .edition .nl-side h5 { display: none; }
  .edition .issues a { padding: 12px 0; }
  .edition .nl-side > .see { padding-top: 32px; }
  .lead .big-title { font-size: 28px; max-width: 26ch; text-wrap: balance; }
  .lead .deck { margin-top: 12px; max-width: 46ch; }
  /* Both columns stretch to the same height and push their link to the bottom, so the two CTAs share a baseline */
  .lead, .nl-side { display: flex; flex-direction: column; align-items: flex-start; }
  .nl-side .issues { align-self: stretch; }
  .lead .more, .nl-side > .see { margin-top: auto; padding-top: 12px; }
  .nl-side h5 { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase; font-weight: 400; color: var(--sub); padding-bottom: 8px; }
  .issues { list-style: none; }
  .issues a { display: block; padding: 7px 0; border-top: 1px solid var(--hair); font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 500; font-size: 17px; line-height: 1.3; transition: color .15s; }
  /* Subscribe panel: opens under the top bar's Subscribe button, two steps (email, then an optional allocator type) */
  .top-actions { display: flex; align-items: center; gap: 8px; }
  .pop { position: absolute; right: 0; top: calc(100% + 8px); width: min(360px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 16px; box-shadow: 0 12px 32px rgba(3,23,38,.10); z-index: 30; }
  #signup .item-title { font-size: 15px; }
  #signup form { display: flex; gap: 8px; margin-top: 10px; }
  #signup input[type=email] { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font: inherit; color: var(--ink); outline: 0; }
  #signup input[type=email]:focus { border-color: var(--ink); }
  #signup input::placeholder { color: var(--label); }
  #signup .fine { margin-top: 8px; }

  /* ---------- Slider rows (BPM Academy): the row runs off the right edge, arrows by the title, drag to scroll ---------- */
  .row-section { margin: 64px 0 0 var(--gutter); display: flow-root; }   /* flow-root: the slider's lift room must not eat the 64px gap below */
  .row-section .section-head { margin-right: var(--gutter); border-top: 1px solid var(--rule); height: 29px; padding-top: 12px; }   /* the rule sits inside this header: 12px under it, the same as every section */
  /* Labels sit on one line 12px under the rule in every section; the arrows hang beside them without pushing them */
  .section-head h2 { line-height: 16px; }
  .section-head .arrows { margin-top: -3px; }
  .arrows { display: flex; gap: 2px; }
  .arrows button { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: background .15s, opacity .2s; }
  .arrows button:hover { background: var(--soft); }
  .arrows button:disabled { opacity: .25; cursor: default; background: none; }
  .arrows svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .slider { position: relative; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-right: var(--gutter); scrollbar-width: none; cursor: grab; }
  .slider::-webkit-scrollbar { display: none; }
  /* position: relative keeps the cards' hidden screen-reader titles inside the row; without it they escape and make the page scroll sideways */
  .slider.dragging { cursor: grabbing; scroll-snap-type: none; }
  .slider.dragging * { pointer-events: none; }
  .card { flex: none; width: clamp(240px, 24vw, 340px); scroll-snap-align: start; user-select: none; -webkit-user-drag: none; }
  .card img { -webkit-user-drag: none; }
  .card .art { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--warm); }
  .card .art > img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
  /* Hover preview: the clip sits over the still, under the play button, and fades in once it plays */
  .card .art > .clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s var(--ease); pointer-events: none; }
  .card.previewing .art > .clip { opacity: 1; }
  .card:hover .art > img { transform: scale(1.02); }
  .card .body { margin-top: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Cards also deepen a shade on hover, so the whole block reads as one target */
  .card .art { transition: background-color .2s var(--ease), filter .3s var(--ease); }
  @media (hover: hover) {
    a.card:hover .art.navy { filter: brightness(1.12); }
    a.card:hover .art.warm { background: var(--warm-hover); }
  }
  /* Image cards (the white L4L slides): a flat 5% black veil so they do not melt into the white page (Bas; a gradient
     was tried and rejected as ugly, a paper-white page was tried and rejected). Play and lock sit above it. */
  .card .art:has(> img)::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.035); pointer-events: none; }   /* 3.5% (Bas: a bit lighter than 5%) */
  /* Play mark on webinar cards, only on hover */
  .play { position: absolute; z-index: 1; left: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .play svg { width: 13px; height: 13px; margin-left: 2px; fill: var(--ink); }
  .card:hover .play { opacity: 1; transform: none; }
  /* Type art for cards without an image: navy, warm, or the yellow quote */
  /* Type cards: title top left, so the play mark (bottom left) never covers it */
  .art.type { display: flex; flex-direction: column; justify-content: flex-start; padding: 16px; }
  .art.type .big-title { font-size: 21px; max-width: 14ch; text-wrap: balance; }
  .art.navy { background: var(--tint-navy); color: #fff; }   /* plain, the same navy as the carousel (Bas) */
  .art.warm { background: var(--warm); }
  /* Guides (editorial, like the newsletter block): four text columns split by thin rules. Each has a title, its first three pieces as a numbered list, and a link pinned to the bottom so the four links share a line.
     (A book-cover version after PNL was tried and dropped, Bas 2026-10-12: keep the idea, not the style.) */
  .guides { grid-template-columns: repeat(4, 1fr); }
  .guides > * { padding-left: 24px; padding-right: 24px; }
  .guides > :first-child { padding-left: 0; }
  .guides > :last-child { padding-right: 0; }
  .guide { display: flex; flex-direction: column; align-items: flex-start; }
  .guide ol { list-style: none; counter-reset: g; margin-top: 24px; align-self: stretch; }
  .guide li { counter-increment: g; display: grid; grid-template-columns: 20px 1fr; padding: 12px 0; border-top: 1px solid var(--hair); }
  .guide li::before { content: counter(g); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--label); padding-top: 2px; }

  /* Filtering (topic switch and search): pieces that don't match fade back, empty sections fold away */
  .item { transition: opacity .4s var(--ease), filter .4s var(--ease); }
  .off { opacity: .12; filter: grayscale(1); pointer-events: none; }
  .empty { display: none; }

  /* Signup step two: an optional allocator type for Investor Relations */
  .step2 { margin-top: 12px; }
  .step2 .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
  .step2 .chips button { height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r); font-size: 12px; color: var(--sub); transition: all .15s; }
  .step2 .chips button:hover { border-color: var(--ink); color: var(--ink); }
  .step2 .chips button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
  .step2 .skip { font-size: 12px; color: var(--label); margin-left: 10px; }
  .done .item-title { margin-top: 8px; }

  /* ---------- Closing: one line to Investor Relations, the last thing on the page (no footer, Bas) ---------- */
  .closing { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0 64px; }
  .closing p { font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 500; font-size: 17px; line-height: 1.3; }
  .closing p span { font-family: 'Inter', system-ui, sans-serif; font-weight: 400; font-size: 13px; color: var(--sub); margin-left: 8px; }
  .closing-actions { display: flex; gap: 8px; flex: none; }

  /* ---------- Motion ---------- */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }

  /* ---------- Smaller screens ---------- */
  @media (max-width: 1100px) {
    /* Tablets: the slide takes more of the width so the text column next to the square keeps room */
    .slide { width: min(960px, calc(100cqw - 2 * var(--gutter))); }
    .guides { grid-template-columns: 1fr 1fr; row-gap: 24px; }
    .guides > :nth-child(3) { padding-left: 0; border-left: 0; }
    .guides > :nth-child(2) { padding-right: 0; }
    .edition, .edition-head { grid-template-columns: 1.4fr 1fr; }
  }
  @media (max-width: 760px) {
    /* Phones: the sidebar becomes a bottom tab bar, the logo moves into the top bar */
    html { scroll-padding-top: 112px; }
    .m-logo { display: flex; align-items: center; order: -1; height: 32px; }
    .m-logo img { height: 22px; width: auto; }
    .tabbar { display: grid; }
    body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
    .top-actions .btn { padding: 0 12px; }
    .btn-site { display: none; }
    .closing { flex-direction: column; align-items: flex-start; }
    .closing p span { display: block; margin: 4px 0 0; }
    :root { --gutter: 16px; }
    .shell, .shell.collapsed { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .topbar { display: flex; flex-wrap: wrap; }
    .top-left { display: none; }
    .top-actions { margin-left: auto; }
    .search { order: 3; flex-basis: 100%; max-width: none; }
    .search kbd { display: none; }
    .slide { width: calc(100cqw - 2 * var(--gutter) - 8px); height: auto; grid-template-columns: 1fr; padding: 18px; }
    .slide .sq { order: -1; width: 100%; height: auto; aspect-ratio: 1; }
    .slide .copy { gap: 18px; }
    .slide h3 { font-size: 28px; }
    .card { width: 78vw; }
    .arrows { display: none; }
    .cols { grid-template-columns: 1fr !important; }
    .cols > * { padding: 0 !important; border-left: 0 !important; }
    .cols > * + * { margin-top: 20px; padding-top: 20px !important; border-top: 1px solid var(--hair); }
    .lead .big-title { font-size: 26px; }
    .section-head { flex-wrap: wrap; height: auto; }
    .feed > .row { grid-template-columns: 1fr; gap: 6px; }
    .guides > * { padding-left: 0; padding-right: 0; }
    .edition > * { padding-left: 0; padding-right: 0; }
    .section-head.edition-head p { display: none; }
    .edition .lead .big-title { font-size: 28px; }
    .edition .nl-side h5 { display: block; }
    .closing .art { display: none; }
  }
  /* Rows and the carousel stop on the same right-hand line as the dividers and the top bar (Bas, 2026-10-15: no
     slides peeking in past the edge). Phones keep running on to the screen edge, so a swipe still reads as possible. */
  @media (min-width: 761px) {
    .hero { margin-right: var(--gutter); }
    .hero-track, .hero-foot { padding-right: 0; }
    .row-section { margin-right: var(--gutter); }
    .row-section .section-head { margin-right: 0; }
    .slider { padding-right: 0; }
  }

  /* ---------- Article page (article.html) ----------
     Same shell and type families as the homepage. Reading sizes go up for long text: 17px body, 680px column.
     The webinar that belongs to the piece sits beside the text, sticky on desktop and after the text on phones. */
  .topbar .progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left; }
  .article { padding: 24px var(--gutter) 0; }   /* the same top spacing as the overview pages */
  /* One measure for the whole piece: title, deck, image, caption and text all share the 640px column */
  /* Reading typography (Bas: "sizing and line height sub optimal"). The rules used:
     - measure 60 to 75 characters a line: 17px Inter in a 620px column is about 70
     - line height 1.6 for body, tighter as type gets bigger (1.3 subheads, 1.12 title)
     - paragraph space of one line, not more, so paragraphs read as one flow
     - subheads closer to the text they introduce than to the text above (40 above, 12 below)
     - near-black body text, not grey, for contrast on white
     Scale with clear steps (ratio 1.25, Bas: sizes were "all different but very close"):
       13 caption · 17 body · 21 subhead · 24 lede (Inter Tight light) · 44 title. Nothing in between. */
  .a-head { max-width: var(--measure); margin: 0 auto; }
  .a-head .big-title { font-size: 44px; line-height: 1.04; margin-top: 0; text-wrap: balance; }
  .a-deck { margin-top: 24px; font-size: 21px; line-height: 1.4; color: var(--sub); text-wrap: pretty; }
  .a-by { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-size: 13px; color: var(--sub); }
  .a-by img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
  .a-by b { display: block; font-weight: 500; color: var(--ink); }
  /* The image is as wide as the text column, so the text starts sooner and the rail sits beside it */
  .a-fig { margin: 0 0 40px; }
  .a-fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); }
  .a-fig figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--label); text-wrap: pretty; }
  /* Centred reading column (Bas): the piece sits in the middle, the webinar follows the text */
  .a-grid { display: grid; grid-template-columns: minmax(0, var(--measure)); justify-content: center; gap: 64px; margin-top: 40px; }   /* 40 on every detail page, the same as the issues (Bas, 2026-10-15: 64 was too much) */
  .a-body { font-size: 17px; line-height: 1.6; color: #16202B; font-weight: 300; }   /* Inter Light for reading text (brand sheet; Bas): titles and names in medium stand out more clearly */
  .a-body p { text-wrap: pretty; }
  .a-body p + p { margin-top: 1em; }
  .a-body .lede { font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 300; font-size: 24px; line-height: 1.4; color: var(--ink); margin-bottom: 8px; text-wrap: wrap; }
  .a-body h2 { font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 500; font-size: 21px; line-height: 1.3; color: var(--ink); margin: 40px 0 12px; }
  /* Webinar after the text: card left, speakers and button right, both exactly as tall as the card */
  /* In this piece: the section headings, the one you are reading highlighted */
  /* Pull quote: one real line from the piece, in the serif from the Theta deck */
  /* The ending: subscribe at the moment someone has read it all */
  .speakers { list-style: none; display: grid; gap: 6px; }
  .speakers li { display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1.3; color: var(--sub); }
  .speakers img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
  .speakers b { display: block; font-weight: 500; color: var(--ink); font-size: 13px; }   /* on the article axis */
  @media (max-width: 760px) {
    .article { padding-top: 24px; }
    .a-head .big-title { font-size: 34px; }
    .a-deck { font-size: 17px; }
    .a-grid { grid-template-columns: 1fr; gap: 40px; }
    .a-body { font-size: 17px; }
    .a-body .lede { font-size: 21px; }
  }

  /* ---------- Breadcrumb (top bar, left of the search) ----------
     Every level above this page as a link, each followed by a chevron; the current page is never listed (the title says
     it). When the trail does not fit, shell.js folds the middle levels into "…" (home, first level and parent stay).
     On phones it is replaced by a back arrow to the parent, in the logo's spot. The homepage has none. */
  .top-left { min-width: 0; gap: 8px; }
  .crumbs { min-width: 0; flex: 1; overflow: hidden; padding-right: 8px; }
  .crumbs ol { list-style: none; display: flex; align-items: center; min-width: 0; font-size: 13px; white-space: nowrap; }
  .crumbs li { display: flex; align-items: center; flex: none; color: var(--sub); }
  .crumbs li + li::before { content: '/'; margin: 0 6px; color: var(--line); }
  .crumbs a { color: var(--sub); transition: color .15s; }
  .crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .crumbs li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block; }
  .crumbs li:last-child::before { display: inline; }
  .crumbs li.fold { display: none; }
  /* "…" sits in a 24px box, the same as the other icon buttons */
  .crumbs .more button { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r); color: var(--sub); line-height: 1; padding-bottom: 4px; }
  .crumbs .more button:hover { background: var(--soft); color: var(--ink); }
  .m-back { display: none; }
  @media (max-width: 760px) {
    .crumbs { display: none; }
    body.has-crumbs .m-logo { display: none; }
    body.has-crumbs .m-back { display: flex; align-items: center; gap: 4px; order: -1; height: 32px; font-size: 13px; color: var(--sub); max-width: 45vw; }
    .m-back svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .m-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  }

  /* ---------- Quiet pro patterns ---------- */
  /* Page changes are instant: no crossfade (Bas, 2026-10-16, "i want it to be instant") */
  /* Top bar: no line at the top of the page, a hairline once content scrolls under it */
  .topbar { border-bottom: 1px solid transparent; transition: border-color .2s; }
  .topbar.scrolled { border-bottom-color: var(--rule); }
  /* Images fade in when loaded */
  img.fade { opacity: 0; transition: opacity .4s var(--ease); }
  img.fade.in { opacity: 1; }
  /* Email fields: say it while typing */
  input.bad { border-color: #B4543F !important; }
  .field-hint { font-size: 12px; color: #9A3F2E; margin-top: 6px; }
  /* Buttons while sending */
  .btn.busy { opacity: .7; cursor: progress; }
  /* Search: the matching part of a title */
  mark { background: var(--yellow); color: inherit; border-radius: 2px; padding: 0 1px; }
  .art.navy mark { background: rgba(250,253,204,.25); }

  /* ---------- Search results panel (folds out under the search bar) ---------- */
  .search { position: relative; }
  .search-pop { position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); max-height: min(480px, 70vh); overflow: auto; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 12px 32px rgba(3,23,38,.10); z-index: 35; }
  .sp-group + .sp-group { margin-top: 8px; }
  .sp-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase; color: var(--sub); padding: 6px 8px 4px; }
  .sp-row { display: block; padding: 7px 8px; border-radius: var(--r); font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sp-row:hover, .sp-row.on { background: var(--soft); }
  .sp-empty { padding: 10px 8px; font-size: 13px; color: var(--sub); }
  @media (max-width: 760px) { .search-pop { max-height: 60vh; } }

  /* ---------- "Where do you start?" quiz: a pop-up, opened from a small pill bottom right ---------- */
  .quiz-dialog .quiz { padding: 28px; }
  .qz-step { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase; color: var(--sub); }
  .quiz-dialog .big-title { font-size: 24px; margin-top: 10px; text-wrap: balance; }
  .qz-chips { display: grid; gap: 8px; margin-top: 20px; }
  .qz-chips button { height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font-size: 14px; color: var(--ink); text-align: left; transition: border-color .15s, background .15s; }
  .qz-chips button:hover { border-color: var(--ink); background: var(--soft); }
  .qz-actions { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
  .qz-reset { font-size: 13px; color: var(--label); }
  .qz-reset:hover { color: var(--ink); }
  /* The way in: topic tags under the featured webinars; each opens the guided pop-up */
  .quiz-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 24px var(--gutter) 0; }
  /* Soft chips (Bas): filled, no outline, the same 4px corners as every other control; "Not sure?" is a chip like the rest */
  /* The question as a small headline on its own line, the chips under it (Bas) */
  .qt-q { flex-basis: 100%; margin-bottom: 8px; font-family: 'Inter Tight', system-ui, sans-serif; font-size: 21px; line-height: 28px; font-weight: 500; color: var(--ink); }
  .quiz-tags button { height: 32px; padding: 0 12px; border: 0; border-radius: var(--r); background: var(--soft); font-size: 13px; color: var(--ink); transition: background .15s; }
  .quiz-tags button:hover { background: var(--hair); }
  /* "Not sure yet" is a chip like the topics (Bas: the text link looked odd) */
  .qz-skip { display: block; margin-top: 12px; font-size: 13px; color: var(--label); }
  .qz-skip:hover { color: var(--ink); }

  /* Links inside running text: brand blue, underlined (brand sheet: "web of intermediaries") */
  .a-body a, .a-deck a, .a-fig figcaption a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

  /* ---------- Accessibility basics ---------- */
  /* Hidden until focused with Tab: jumps past the menu straight to the content */
  .skip-link { position: fixed; left: 12px; top: -48px; z-index: 100; padding: 8px 14px; background: var(--navy); color: #fff; border-radius: var(--r); font-size: 13px; font-weight: 500; transition: top .15s; }
  .skip-link:focus { top: 12px; }
  main:focus { outline: none; }
  /* Visible only to screen readers */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  /* Carousel pause (moving content must be stoppable) */
  .hero-pause { font-size: 12px; color: var(--sub); padding: 4px 6px; border-radius: var(--r); }
  .hero-pause:hover { color: var(--ink); background: var(--soft); }

  /* ---------- Display and accessibility settings ---------- */
  .nav-btn { display: flex; align-items: center; gap: 12px; height: 32px; width: 100%; padding: 0 10px; border-radius: var(--r); color: var(--sub); white-space: nowrap; text-align: left; }
  .nav-btn:hover, .nav-btn[aria-expanded="true"] { background: var(--soft); color: var(--ink); }
  .nav-btn svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .collapsed .nav-btn span { opacity: 0; pointer-events: none; }
  .a11y-panel { position: fixed; z-index: 45; width: 280px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 12px 32px rgba(3,23,38,.12); }
  .a11y-title { font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 500; font-size: 15px; margin-bottom: 8px; }
  .a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; font-size: 13px; color: var(--ink); border-top: 1px solid var(--hair); cursor: pointer; }
  .a11y-row input { width: 32px; height: 18px; appearance: none; background: var(--line); border-radius: 999px; position: relative; cursor: pointer; transition: background .2s; flex: none; }
  .a11y-row input::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
  .a11y-row input:checked { background: var(--navy); }
  .a11y-row input:checked::after { transform: translateX(14px); }
  .a11y-statement { display: block; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 12px; color: var(--sub); text-decoration: underline; text-underline-offset: 2px; }
  .a11y-statement:hover { color: var(--ink); }
  /* The settings themselves */
  html.a11y-zoom body { zoom: var(--zoom); }
  html.a11y-contrast { --sub: #2E2E2E; --label: #4A4A4A; --hair: #B9B6B0; --rule: #8F8C86; }
  html.a11y-contrast .slide::after { background: rgba(3,23,38,.66); }
  html.a11y-calm *, html.a11y-calm *::before, html.a11y-calm *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  html.a11y-calm { scroll-behavior: auto; }
  html.a11y-links main a:not(.btn):not(.card):not(.piece), html.a11y-links .issues a, html.a11y-links .guide a, html.a11y-links .crumbs a { text-decoration: underline !important; text-underline-offset: 3px; }
  @media (max-width: 760px) { .a11y-panel { left: 16px !important; right: 16px; width: auto; } }
  .m-a11y { display: none; }
  @media (max-width: 760px) {
    .m-a11y { display: block; margin: 0 var(--gutter) 24px; font-size: 12px; color: var(--sub); text-decoration: underline; text-underline-offset: 2px; }
    .a11y-panel { left: 16px !important; }
  }

  /* Quiz pop-up as a split card: navy left (topic, progress, then the piece), the question or result on the right */
  .quiz-dialog { width: min(760px, calc(100vw - 32px)); }
  .quiz-dialog .quiz { display: grid; grid-template-columns: 280px 1fr; padding: 0; min-height: 380px; }
  .quiz-dialog .req-close { z-index: 2; }
  .qz-left { background: var(--navy); color: #fff; padding: 28px; display: flex; flex-direction: column; gap: 12px; border-radius: 8px 0 0 8px; }
  .qz-kicker { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase; color: rgba(255,255,255,.6); }
  .qz-topic { font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 500; font-size: 28px; line-height: 1.1; text-wrap: balance; }
  .qz-progress { margin-top: auto; height: 2px; background: rgba(255,255,255,.18); border-radius: 2px; overflow: hidden; }
  .qz-progress span { display: block; height: 100%; background: #fff; transition: width .4s var(--ease); }
  .qz-card { margin-top: auto; aspect-ratio: 16 / 10; display: flex; align-items: flex-end; padding: 16px; border-radius: var(--r); background: rgba(255,255,255,.08); font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 500; font-size: 20px; line-height: 1.15; color: #fff; text-wrap: balance; transition: background .2s; }
  .qz-card:hover { background: rgba(255,255,255,.14); }
  .qz-right { padding: 28px 28px 24px; display: flex; flex-direction: column; }
  .quiz-dialog .qz-chips button { border-radius: 999px; height: 40px; padding: 0 16px; }
  .qz-why { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--sub); }
  .qz-alt { margin-top: auto; padding-top: 20px; display: grid; gap: 4px; }
  .qz-alt .qz-step { margin-bottom: 4px; }
  .qz-alt a { font-size: 13px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
  .qz-alt a:hover { text-decoration-color: var(--ink); }
  .qz-skip { align-self: flex-end; margin-top: auto; padding-top: 16px; }
  @media (max-width: 760px) {
    .quiz-dialog .quiz { grid-template-columns: 1fr; min-height: 0; }
    .qz-left { border-radius: 8px 8px 0 0; gap: 8px; }
    .qz-topic { font-size: 22px; }
    .qz-progress { margin-top: 12px; }
    .qz-card { aspect-ratio: auto; min-height: 96px; }
  }

  /* ---------- Overview pages (newsletter.html, later webinars, thoughtpieces, guides) ---------- */
  .ov { padding: 24px var(--gutter) 64px; }   /* title sits higher (Bas) */
  .ov-head { max-width: var(--measure); padding-bottom: 0; }
  /* The first block follows the page title closer than sections follow each other: 32, the same as the tabs (Bas, 2026-10-15) */
  .ov-head + .section, .ov-head + .row-section { margin-top: 32px; }
  /* Page tabs (Legends4Legends years, Webinars types): the site's switch control, the chosen panel right under it */
  .page-tabs { margin-top: 32px; }
  .page-tabs button { min-width: 64px; }
  .page-tabs ~ .tab-panel, .tabs-row ~ .tab-panel { margin-top: 24px; padding-top: 0 !important; border-top: 0; }   /* 24px from tabs to content, no extra top padding */
  /* Tabs with actions on the same line (Legends4Legends: event site, apply) */
  .tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 32px; }
  .tabs-row .page-tabs { margin-top: 0; }
  .tabs-actions { display: flex; gap: 8px; }
  .btn .ext { width: 12px; height: 12px; margin-left: 6px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .ov-head .big-title { font-size: 36px; line-height: 1.04; }   /* 44 felt too big (Bas, 2026-10-15) */
  .ov-head .a-deck { margin-top: 12px; font-size: 17px; line-height: 24px; max-width: 56ch; }   /* smaller (Bas): page intros stay quiet */
  .ov-head .btn { margin-top: 20px; }
  .ov .section { margin-left: 0; margin-right: 0; }
  /* Card grid for Webinars and Thoughtpieces: the same cards as everywhere, four across */
  .ov-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 8px; }
  .ov-grid .card { width: auto; }
  .ov > .section:first-of-type:not(:has(.section-head)) { padding-top: 24px; }
  /* Quarterly updates: a small lock where replays show the play mark, always visible. Once access is requested,
     every lock says so at the same time (one request covers all of them). */
  /* Webinar gate: every card shows the play button; the investor check runs on click (no lock icons, Bas 2026-10-16) */
  .gate-dialog { width: min(400px, calc(100vw - 32px)); }
  .gate-dialog .check[hidden] { display: none; }
  .lock { position: absolute; z-index: 1; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; height: 28px; min-width: 28px; padding: 0 7px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font-size: 12px; }
  .lock svg { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .lock em { display: none; font-style: normal; }
  .art:has(> img) .lock { background: rgba(3,23,38,.86); }   /* on the white L4L slides the lock needs a dark ground */
  .requested .lock { padding-right: 10px; }
  .requested .lock em { display: inline; }
  @media (hover: hover) { a.card:hover .lock { background: rgba(255,255,255,.2); } }
  /* Video player pop-up: the talk at 16:9, as wide as the screen allows, on a dark backdrop */
  /* Upcoming webinars: the date as a numeral (as on the carousel), title and speakers, Register */
  /* Archive by year: date in mono on the left, title and one line on the right */
  .nl-rows { display: grid; }

  /* Issue pages: the news links, and previous / next issue */
  /* Issue pages: the briefing after the essay as real bulleted lists (Bas), no rules between items */
  .a-news { list-style: disc; display: grid; gap: 8px; padding-left: 20px; }
  .a-news li { padding-left: 4px; font-size: 17px; line-height: 28px; }
  .a-news li::marker { color: var(--label); }
  /* Hierarchy: the essay first, then the briefing, set apart by space (no lines, Bas): more room before the first
     list heading, the same 40/12 rhythm as article subheads between the others */
  .a-body > p + h2 { margin-top: 64px; }
  .a-news a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .a-news a:hover { text-decoration-color: currentColor; }
  .a-note { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--label); }   /* footnote under the financial updates (* = TBV portfolio position) */
  .a-pager { max-width: var(--measure); margin: 64px auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 16px; border-top: 1px solid var(--rule); }
  .a-pager a { display: grid; gap: 4px; font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 500; font-size: 15px; line-height: 1.3; color: var(--ink); }
  .a-pager a span { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400; font-size: 11px; text-transform: uppercase; color: var(--sub); }
  .a-pager a.next { text-align: right; }
  /* Share (Bas, 2026-10-16): the right-hand column of the pager, in the same type as Read next */
  .a-share { grid-column: 2; justify-self: end; display: grid; gap: 4px; padding: 0; border: 0; background: none; text-align: right; cursor: pointer; color: var(--ink); font: inherit; }
  .a-share span { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400; font-size: 11px; line-height: 16px; text-transform: uppercase; color: var(--sub); }
  .a-share b { font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 500; font-size: 15px; line-height: 20px; }
  .a-share:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

  /* ---------- Video pages (Bas, 2026-10-21): one page per talk and recording ----------
     The player lines up with the reading column (Bas), the play button always shows. Under it the next step and four more, two by two. */
  .v-player { max-width: var(--measure); margin: 40px auto 0; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; }
  .v-player iframe { display: block; width: 100%; height: 100%; border: 0; }
  .v-poster.card { display: block; width: 100%; height: 100%; }
  .v-poster .art { height: 100%; border-radius: 0; }
  .v-poster .play { left: 24px; bottom: 24px; width: 56px; height: 56px; opacity: 1; transform: none; }   /* bottom left like the cards, clear of the title in the image */
  .v-poster .play svg { width: 18px; height: 18px; margin-left: 3px; }
  .v-poster.card:hover .play { transform: scale(1.06); }
  .v-poster .art > img.art-bg { opacity: .35; }
  .v-more { max-width: var(--measure); margin: 0 auto 64px; }
  .v-more .ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-more .item-title { margin-bottom: 16px; }
  @media (max-width: 760px) { .v-player { margin-top: 24px; border-radius: 0; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
    .v-poster .play { left: 16px; bottom: 16px; width: 44px; height: 44px; }
    .video .a-pager { margin: 40px 0; } }
  .a-pager a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

  @media (max-width: 760px) {
    .ov { padding-top: 24px; }
    .ov-head .big-title { font-size: 30px; }
    .a-pager { grid-template-columns: 1fr; margin: 48px var(--gutter); }
    .a-pager a.next { text-align: left; }
    .a-share { grid-column: 1; justify-self: start; text-align: left; }
  }

  /* Webinars page: the library on the left, Upcoming in its own column on the right that stays in view (Bas, 2026-10-15).
     Smaller screens: Upcoming moves above the library. */
  .ov .wb-list { margin-top: 32px; }
  /* Conversation cards (Bas, 2026-10-15): the card is the image (plain navy until the artwork exists); who, then
     firm and date, sit under it */
  .wb-who { margin-top: 12px; font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 500; font-size: 15px; line-height: 20px; color: var(--ink); }
  /* Who, then the firm: two quiet lines, no date (Bas: firm and date side by side was noise). The date stays in
     search and the player caption (data-date, aria-label). */
  .wb-who + .body { margin-top: 2px; }
  /* Upcoming (Bas, 2026-10-22): the same cards with the time and a Register button; the Replays heading only shows beside them */
  .wb-when { color: var(--sub); }
  .wb-reg { margin-top: 12px; }
  .ov:not(:has(#upcoming:not([hidden]))) #conversations .section-head { display: none; }
  #upcoming:not([hidden]) + #conversations { margin-top: 48px; }

  /* Live webinar invitation page (Bas, 2026-10-23; api/live.js): the article column, speakers, the description, then Register */
  .a-date.lw-local { margin-top: 4px; }
  .lw-jump { margin-top: 32px; }
  .lw-speakers { max-width: var(--measure); margin: 48px auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
  .lw-speaker { display: flex; gap: 16px; align-items: flex-start; }
  .lw-speaker img { width: 64px; height: 64px; border-radius: var(--r); object-fit: cover; flex: none; background: var(--warm); }
  .lw-speaker .wb-who { margin-top: 0; }
  .lw-about { margin-top: 8px; color: var(--sub); }
  .lw-body { max-width: var(--measure); margin: 48px auto 0; }
  .lw-body ul { padding-left: 1.2em; }
  .lw-body li + li { margin-top: 8px; }
  .lw-register { max-width: var(--measure); margin: 64px auto 0; padding: 32px; background: var(--soft); border-radius: var(--r); scroll-margin-top: 96px; }
  .lw-register .big-title { font-size: 28px; line-height: 32px; margin: 0; }
  #lwForm select, #lwForm textarea { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font: inherit; font-size: 13px; color: var(--ink); outline: 0; }
  #lwForm select { height: 32px; }
  #lwForm select:focus, #lwForm textarea:focus { border-color: var(--ink); }
  #lwDone .body { margin-top: 12px; }
  #lwDone .btn { margin-top: 24px; }
  @media (max-width: 760px) { .lw-register { padding: 24px var(--gutter); margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-radius: 0; } }

  /* ---------- Overview pages on smaller screens ----------
     These sit at the end on purpose: the base rules for the card grid and the webinar rows come late in this file,
     so their smaller-screen versions have to come after them to win. */
  @media (max-width: 1100px) {
    .ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 760px) {
    .ov-grid { grid-template-columns: minmax(0, 1fr); }
    /* Webinars page on phones: each section swipes sideways like the homepage rows, so the page stays short.
       The row runs to the screen edge; cards snap into place. */
    .ov-grid.swipe { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; }
    .ov-grid.swipe::-webkit-scrollbar { display: none; }
    .ov-grid.swipe .card { flex: none; width: 78vw; scroll-snap-align: start; }
  }


  /* ---------- Thoughtpieces as a magazine block (after Colossus, Bas) ----------
     Left: the latest piece large, sticky while the right scrolls. Right: two columns of text-only pieces.
     Same golden split and column rule as the newsletter block, so both right columns share one vertical line. */
  .tp { display: grid; grid-template-columns: 1.618fr 1fr; align-items: start; }
  .tp-lead { position: sticky; top: 72px; padding-right: 24px; }
  .tp-lead .art { aspect-ratio: 16 / 9; }
  .tp-lead .art { border-radius: var(--r); overflow: hidden; }
  .tp-lead .art img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
  .tp-lead .big-title { margin-top: 16px; font-size: 32px; max-width: 22ch; text-wrap: balance; }
  .tp-lead .deck { margin-top: 16px; max-width: 46ch; }
  .tp-by { margin-top: 2px; font-size: 13px; color: var(--sub); }
  .tp-list { display: grid; grid-template-columns: 1fr; gap: 0; padding-left: 24px; border-left: 1px solid var(--hair); }   /* one column; column line back (Bas) */
  /* Hairlines between the items (Bas, trying): 24px either side, none above the first */
  .tp-item { padding: 12px 0; border-top: 1px solid var(--hair); }   /* tight, like the Previous editions list (Bas) */
  .tp-item:first-child { padding-top: 0; border-top: 0; }
  .tp-title { font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 500; font-size: 17px; text-wrap: balance; }
  .tp-item .body { margin-top: 8px; }
  /* Numbered like a "most read" list: the same small mono numerals as the Guides */
  .tp-list { counter-reset: tp 1; }   /* the featured piece is 1, the list runs 2 to 10 */
  .tp-lead .big-title::before { content: '1'; display: block; margin-bottom: 4px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400; font-size: 11px; line-height: 16px; color: var(--label); }
  /* The number hangs in a narrow left margin (like the Guides), so it costs no line of its own; text uses the full width */
  .tp-item { counter-increment: tp; display: grid; grid-template-columns: 32px 1fr; }
  .tp-item > * { grid-column: 2; }
  .tp-item::before { content: counter(tp); grid-column: 1; grid-row: 1; align-self: start; margin-top: 4px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; line-height: 16px; color: var(--label); }
  /* External must reads: a small arrow after the title says it leaves the site; the source replaces the author */
  .tp-title .ext, .tp-lead .big-title .ext { display: inline-block; width: 12px; height: 12px; margin-left: 4px; vertical-align: 1px; stroke: var(--label); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease), stroke .2s; }
  .tp-lead .big-title .ext { width: 20px; height: 20px; vertical-align: 3px; }
  a.tp-ext:hover .ext { stroke: var(--ink); transform: translate(2px, -2px); }
  a.piece .tp-title { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 6px; transition: text-decoration-color .25s var(--ease), text-underline-offset .25s var(--ease); }
  a.piece:hover .tp-title { text-decoration-color: currentColor; text-underline-offset: 3px; }
  @media (max-width: 1100px) {
    .tp { grid-template-columns: 1fr; row-gap: 48px; }
    .tp-lead { position: static; padding-right: 0; }
    .tp-list { padding-left: 0; border-left: 0; }
  }
  @media (max-width: 760px) {
    .tp-lead .big-title { font-size: 26px; }
  }

  /* ---------- Newsletter overview rows (styling push, Bas) ----------
     The date as the same light numeral as the carousel and the upcoming webinars (day over month), titles a size up,
     a quiet arrow that slides in on hover. One hairline between rows. */

  /* ---------- Issue page: essay first, briefing second (styling push, Bas) ----------
     Briefing headings in the site's label voice (mono caps), briefing text a step smaller than the essay,
     company names in medium weight, external links marked, event dates set quietly after the name. */
  .a-body h2.brief-h { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400; font-size: 11px; line-height: 16px; text-transform: uppercase; color: var(--sub); margin: 48px 0 16px; }
  .a-body > p + h2.brief-h { margin-top: 64px; }
  .a-body .a-news li { font-size: 17px; line-height: 28px; }   /* one reading size on the page (Bas): the labels and space separate the briefing, not a smaller size */
  .a-news { gap: 10px; }
  .a-news b { font-weight: 500; color: var(--ink); }
  .a-news .ext { display: inline-block; width: 11px; height: 11px; margin-left: 4px; vertical-align: 0; stroke: var(--label); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s, transform .2s var(--ease); }
  .a-news a:hover .ext { stroke: var(--ink); transform: translate(1px, -1px); }
  .ev-date { margin-left: 8px; color: var(--label); }
  .a-note { font-size: 12px; line-height: 16px; margin-top: 12px; }

  /* Placeholder cards (nothing behind them yet): not clickable, no hover */
  .card.is-soon { cursor: default; }
  .card.is-soon .art { filter: none !important; }

  /* ---------- 4px baseline (Bas): every line height is a multiple of 4 ----------
     Spacing already runs on 8 (with 4 and 12 for small steps); this block puts all type on the same 4px rhythm, so
     text in neighbouring columns lands on the same rows. One place for every line height:
       11–12px → 16 · 13–15px → 20 · 17px → 24 · 21px → 24 (cards) / 28 (reading) · 24px → 32 · 28px → 32 · 32–34px → 36 · 40px → 40 · 44px → 44
     Exception: the 32px date numerals keep their tuned line height (they line up with the bottom of the square). */
  body { line-height: 20px; }
  .meta, .see, .field-hint, .speakers li, .nl-side h5, .a-pager a span, .sp-label, .qz-step, .qz-kicker, .search .clear, .step2 .skip, .hero-pause { line-height: 16px; }
  .item-title, .deck, .issues a, .closing p, .a-news li { line-height: 24px; }
  .a-pager a, .a-fig figcaption, .qz-why, .a11y-title, #signup .item-title { line-height: 20px; }
  .art.type .big-title, .tp-title { line-height: 24px; }
  .tp-lead .big-title { line-height: 36px; }
  @media (max-width: 760px) { .tp-lead .big-title { line-height: 32px; } }
  .qz-card { line-height: 24px; }
  .a-deck, .a-body h2, .req .big-title, .quiz-dialog .big-title { line-height: 28px; }
  .a-body { line-height: 28px; }
  .a-body .lede, .qz-topic { line-height: 32px; }
  .slide h3, .edition .lead .big-title, .lead .big-title { line-height: 40px; }
  .a-head .big-title { line-height: 44px; }
  .ov-head .big-title { line-height: 40px; }
  @media (max-width: 760px) {
    .slide h3, .edition .lead .big-title, .lead .big-title { line-height: 32px; }
    .a-head .big-title { line-height: 36px; }
    .ov-head .big-title { line-height: 34px; }
    .a-deck { line-height: 24px; }
    .a-body .lede { line-height: 28px; }
    .qz-topic { line-height: 28px; }
  }

  /* ---------- Search focus mode (Bas): the page dims behind, the top bar and results stay bright ----------
     A quick fade only: no movement, no shadow animation (rejected before). */
  .search-scrim { position: fixed; inset: 0; z-index: 32; background: rgba(3, 23, 38, .5); opacity: 0; pointer-events: none; transition: opacity .15s linear; }
  body.searching .search-scrim { opacity: 1; pointer-events: auto; }
  body.searching .topbar { z-index: 33; border-bottom-color: transparent; }
  /* The top bar dims with the page; only the search box and its results stay bright (Bas: the white band looked odd) */
  body.searching .topbar::before { content: ''; position: absolute; inset: 0 0 -1px 0; z-index: 1; background: rgba(3, 23, 38, .5); pointer-events: none; }
  body.searching .topbar .search { z-index: 2; background: #fff; }
  .search-pop { padding: 8px 8px 0; max-height: min(560px, 72vh); }
  .sp-row { display: grid; gap: 2px; white-space: normal; padding: 8px; }
  .sp-t { font-size: 13px; line-height: 20px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sp-m { font-size: 12px; line-height: 16px; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sp-t .ext { display: inline-block; width: 10px; height: 10px; margin-left: 4px; stroke: var(--label); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .sp-empty { padding: 12px 8px; }
  /* The hint line at the bottom of the panel, stuck there while the results scroll */
  .sp-hint { position: sticky; bottom: 0; display: flex; gap: 16px; margin: 8px -8px 0; padding: 10px 16px; border-top: 1px solid var(--hair); background: #fff; font-size: 12px; line-height: 16px; color: var(--label); }
  .sp-hint kbd { font: inherit; font-size: 11px; border: 1px solid var(--hair); border-radius: var(--r); padding: 0 4px; margin-right: 2px; color: var(--sub); }
  @media (hover: none) { .sp-hint { display: none; } }

  /* ---------- Hover language, the rest of it ----------
     Cards: image art zooms 2%, type art (navy) brightens a little. The same speed everywhere. Placeholders do nothing. */
  .card .art > img, .tp-lead .art img { transition: transform .6s var(--ease); }
  @media (hover: hover) {
    a.card:hover .art > img { transform: scale(1.02); }
    a.card:hover .art.navy, .card[data-request]:hover .art.navy { filter: brightness(1.15); }
  }
  .card .art { transition: filter .3s var(--ease); }

  /* ---------- Video pop-up: title and speakers under the talk, previous and next of the same year ---------- */

  /* ---------- Keyboard focus: one ring for everything, clear of the shape it belongs to ---------- */
  :focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
  a.card:focus-visible, a.piece:focus-visible { outline-offset: 4px; border-radius: var(--r); }
  .switch button:focus-visible, .quiz-tags button:focus-visible { outline-offset: 1px; }
  .slide :focus-visible { outline-color: #fff; }

  /* Arrow links: the underline just appears, no glide */
  a.see, .piece .see, a.see:hover, .piece:hover .see { transition: none; }
  .see i { transition: none; }
  a.see, .piece .see { text-underline-offset: 3px; }

  /* Column lines (Bas): lines never touch each other. They start 12px under the section rule, level with the labels,
     the same gap as everywhere else. The header above the columns is 52px (12 + 16 + 24), so the line starts 40px up. */
  .edition > .nl-side, .tp-list, .guides > * + * { position: relative; border-left: 0 !important; }
  .edition > .nl-side::before, .tp-list::before, .guides > * + *::before { content: ''; position: absolute; left: 0; top: -40px; bottom: 0; width: 1px; background: var(--hair); }
  .section > .guides:first-child > * + *::before { top: 0; }   /* Guides page: no section head, so the column rules start on the top rule instead of poking above it */
  @media (max-width: 1100px) { .tp-list::before, .guides > :nth-child(3)::before { display: none; } }
  @media (max-width: 760px) { .edition > .nl-side::before, .guides > * + *::before { display: none; } }   /* keep a face in frame when a 16:9 crop is taken from a taller image */

  /* Speaker portraits in the carousel square (warm off-white studio background): no zoom-in, faces stay framed */
  .slide .sq.portrait img, .slide.current .sq.portrait img { transform: none; object-position: center top; }

  /* Partner logos on the carousel slides (Bas): white, under the speaker names. Heights are set per logo so they carry
     the same visual weight (a compact wordmark at 16px, a wide spaced one at 11px). */

  /* Speakers on the carousel (Bas): stacked, one per line, name then role, tight. The partner logo sits between the
     title and the people: firm first, then who is speaking. */
  .slide .s-who { list-style: none; margin-top: 12px; display: grid; gap: 0; }
  .slide .s-who li { font-size: 13px; line-height: 20px; color: rgba(255,255,255,.65); }
  .slide .s-who b { font-weight: 500; color: #fff; margin-right: 6px; }

  /* Carousel drag (Bas): grab cursor, no text selection or image ghosting while dragging; vertical swipes still scroll */
  .hero-track { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
  .hero-track img { -webkit-user-drag: none; pointer-events: none; }
  .hero.dragging .hero-track { cursor: grabbing; }
  .hero.dragging .slide { pointer-events: none; }

  /* ---------- Newsletter overview, simplified (Bas) ----------
     One quiet list: the title left, the date small on the right, a hairline between rows. No numerals, no arrows. */
  .nl-simple { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 12px 0; border-top: 1px solid var(--hair); }
  .nl-rows .nl-simple:first-child { border-top: 0; padding-top: 0; }
  .nl-simple .item-title { font-size: 17px; line-height: 24px; }
  .nl-d { flex: none; font-size: 13px; line-height: 20px; color: var(--label); }

  /* Must reads lead as a black type card (Bas): the letter's headline large on black; under the card, as before,
     the numeral, the title (with ↗) and the source */
  .art.black { background: #000; color: #fff; }
  .tp-lead .art.type { padding: 32px; justify-content: flex-end; }
  @media (hover: hover) { a.tp-lead:hover .art.black { background: #111; } }
  @media (max-width: 760px) { .tp-lead .art.type { padding: 20px; } }

  /* Source logo top left on the black card (Bas), white, the headline stays bottom left */
  .tp-lead .art.type .card-logo { position: absolute; left: 32px; top: 32px; height: 20px; width: auto; filter: brightness(0) invert(1); }
  @media (max-width: 760px) { .tp-lead .art.type .card-logo { left: 20px; top: 20px; height: 16px; } }

  /* Newsletter page: the list and the signup side by side (Bas). Signup stays in view while the list scrolls. */
  .nl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; margin-top: 24px; }
  .nl-layout .tab-panel { margin-top: 0 !important; padding-top: 0 !important; border-top: 0; }
  .nl-signup { position: sticky; top: 72px; padding: 24px; background: var(--soft); border-radius: var(--r); }
  .nl-signup .body { margin-top: 8px; }
  .nl-signup .signup-form { display: grid; gap: 8px; margin-top: 16px; }
  .nl-signup input[type=email] { height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font: inherit; font-size: 13px; color: var(--ink); outline: 0; }
  .nl-signup input[type=email]:focus { border-color: var(--ink); }
  .nl-signup .btn { height: 40px; justify-content: center; }
  .nl-signup .meta { margin-top: 12px; }
  .nl-signup .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .nl-signup .chips button { height: 32px; padding: 0 12px; border-radius: var(--r); background: #fff; font-size: 13px; color: var(--ink); transition: background .15s; }
  .nl-signup .chips button:hover { background: var(--hair); }
  .nl-signup .chips button.on { background: var(--navy); color: #fff; }
  .nl-signup .skip { margin-top: 12px; font-size: 13px; color: var(--sub); }
  .nl-signup .skip:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .nl-signup .signup-done .body { margin-top: 4px; }
  @media (max-width: 1100px) { .nl-layout { grid-template-columns: 1fr; gap: 48px; } .nl-signup { position: static; max-width: 480px; } }

  /* Hover consistency (Bas): issue rows behave like every other text link, the title's underline glides in */
  .nl-simple .item-title { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 6px; transition: text-decoration-color .25s var(--ease), text-underline-offset .25s var(--ease); }
  .nl-simple:hover .item-title, .nl-simple:focus-visible .item-title { text-decoration-color: currentColor; text-underline-offset: 3px; }
  .nl-simple:hover .nl-d { color: var(--sub); }
  /* After signing up, the panel shows only the thank-you */
  .nl-signup.is-done > h2, .nl-signup.is-done > .body { display: none; }
  .nl-signup .signup-step2 { margin-top: 16px; }

  /* Black card with a minimal black-and-white architecture photo at 10% over black (logo never scales on hover) (Bas: generic, very transparent; the Fink portrait could not be used); the logo on top, no text */
  .tp-lead .art.black { position: relative; }
  .tp-lead .art .card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: grayscale(1); opacity: .1; transition: transform .6s var(--ease); }
  .tp-lead .art.type .card-logo { z-index: 1; }
  /* The numeral above the lead title is not part of the link underline (inline-block stops the underline reaching it) */
  .tp-lead .big-title::before { display: inline-block; width: 100%; text-decoration: none; }

  /* ---------- Issue pages: more air (Bas) ----------
     No photo or author, only the date. More room under the top bar and between the blocks: title, deck, date, essay,
     and the briefing sections. All on the 4px grid. */
  .article.issue { padding-top: 128px; }
  .a-date { margin-top: 24px; font-size: 13px; line-height: 20px; color: var(--label); }
  .article.issue .a-body p + p { margin-top: 16px; }   /* 24 was too much (Bas) */
  .article.issue .a-body h2.brief-h { margin: 64px 0 20px; }
  .article.issue .a-body > p + h2.brief-h { margin-top: 80px; }
  .article.issue .a-pager { margin-top: 96px; }
  @media (max-width: 760px) { .article.issue { padding-top: 32px; } .a-grid { margin-top: 40px; } }

  /* Article and issue titles stay inside the text column (Bas); "pretty" fills lines instead of halving the title */
  .a-head .big-title { width: auto; max-width: none; text-wrap: pretty; }

  /* Links in reading text (Bas: the hover line was too strong). Always a 1px line; at rest a light grey line,
     on hover a mid grey one. Never thicker, never full black. */
  .a-body a, .a-deck a, .a-fig figcaption a, .a-news a { text-decoration-thickness: 1px; text-decoration-color: var(--line); transition: text-decoration-color .2s var(--ease); }
  .a-body a:hover, .a-deck a:hover, .a-news a:hover { text-decoration-thickness: 1px; text-decoration-color: var(--label); }

  /* Issue pages carry the same signup block as the newsletter overview (Bas). Wide screens: in the empty space right of
     the centred text column, sticky while reading. Narrower: after the issue, before previous / next. */
  .article.issue .a-grid { grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)) minmax(0, 1fr); justify-content: stretch; column-gap: 64px; align-items: start; }
  .article.issue .a-body { grid-column: 2; }
  .article.issue .nl-signup { grid-column: 3; grid-row: 1; width: 100%; max-width: 300px; }
  @media (max-width: 1359px) {
    .article.issue .a-grid { grid-template-columns: minmax(0, var(--measure)); justify-content: center; }
    .article.issue .a-body { grid-column: 1; }
    .article.issue .nl-signup { grid-column: 1; grid-row: auto; position: static; max-width: none; margin-top: 64px; }
  }

  /* ---------- Signup placement, one rule (Bas: it jumped around; detail pages stay centred) ----------
     The signup block is always 300px wide and pinned to the right content edge, on the Newsletter overview and on
     every issue. Issues keep the text column centred; the signup sits in the space to its right when there is room
     (wide screens), otherwise after the issue. */
  .nl-signup { width: 300px; max-width: 100%; }
  @media (min-width: 1100px) {
    .nl-layout { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 40px; }   /* the same as Webinars (Bas, 2026-10-16) */
  }
  .article.issue .a-grid { grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)) minmax(0, 1fr); column-gap: 48px; }
  .article.issue .a-body { grid-column: 2; }
  .article.issue .nl-signup { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }
  @media (max-width: 1429px) {
    .article.issue .a-grid { grid-template-columns: minmax(0, var(--measure)); justify-content: center; }
    .article.issue .a-body { grid-column: 1; }
    .article.issue .nl-signup { grid-column: 1; grid-row: auto; justify-self: start; position: static; width: 100%; margin-top: 64px; }
  }

  /* Detail pages share one top: the article starts as low as the issues (64px under the top bar) */
  .article { padding-top: 128px;   /* 64 and 96 were too high (Bas, 2026-10-15) */ }
  @media (max-width: 760px) { .article { padding-top: 32px; } }

  /* ---------- Mobile pass (Bas) ---------- */
  /* The signup block fills the width when it stacks */
  @media (max-width: 1099px) { .nl-layout > .nl-signup { width: 100%; max-width: 480px; } }
  @media (max-width: 760px) { .nl-signup, .nl-layout > .nl-signup, .article.issue .nl-signup { width: 100%; max-width: none; } }
  /* Tap targets at least 24x24 (WCAG 2.2): carousel progress bars, logo marks, guide links, the display link */
  .bars button { height: 24px; min-width: 24px; }
  .bars button::before, .bars button span { top: 11px; }
  .m-logo, .brand { min-width: 32px; min-height: 32px; justify-content: center; }
  .brand { justify-content: flex-start; }   /* the sidebar logo stays left-aligned, so the Θ is in the same spot open or folded */
  .guide li a { display: inline-block; padding: 2px 0; }
  .m-a11y { padding: 4px 0; }

  /* ---------- Satellite View: one cover per yearly edition (portrait, like a printed report) ---------- */
  .sv { border-top: 0; padding-top: 0; }
  .sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 280px)); gap: 24px; }
  .sv-cover { display: block; }
  .sv-art { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r); background: var(--tint-navy); color: #fff; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; transition: filter .3s var(--ease); }
  .sv-mark { position: absolute; top: 24px; left: 24px; height: 22px; width: auto; filter: brightness(0) invert(1); }
  .sv-name { font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 500; font-size: 26px; line-height: 32px; }
  .sv-year { font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 300; font-size: 40px; line-height: 40px; }
  .sv-note { margin-top: 12px; font-size: 13px; line-height: 20px; color: var(--sub); }
  .sv-note .ext { display: inline-block; width: 10px; height: 10px; margin-left: 4px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  a.sv-cover .sv-note { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 6px; transition: text-decoration-color .25s var(--ease), text-underline-offset .25s var(--ease); }
  @media (hover: hover) { a.sv-cover:hover .sv-art { filter: brightness(1.15); } a.sv-cover:hover .sv-note { text-decoration-color: currentColor; text-underline-offset: 3px; } }
  .sv-cover.is-soon .sv-art { background: var(--soft); color: var(--label); }
  .sv-cover.is-soon .sv-mark { filter: none; opacity: .35; }
  @media (max-width: 760px) { .sv-grid { grid-template-columns: 1fr 1fr; gap: 16px; } .sv-art { padding: 16px; } .sv-mark { top: 16px; left: 16px; height: 18px; } .sv-name { font-size: 17px; line-height: 24px; } .sv-year { font-size: 26px; line-height: 32px; } }

  /* Page tabs never wrap on small phones: the row scrolls sideways instead */
  .page-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .page-tabs::-webkit-scrollbar { display: none; }
  .page-tabs button { white-space: nowrap; flex: none; }

  /* Signup at the bottom right on desktop (Bas, 2026-10-15): it rests at the bottom of its column, held 24px above
     the bottom of the screen while reading. Phones and tablets keep it after the content. */
  @media (min-width: 1100px) { .nl-layout .nl-signup { align-self: end; top: auto; bottom: 24px; } }
  @media (min-width: 1360px) { .article.issue .nl-signup { position: sticky; align-self: end; top: auto; bottom: 24px; } }

  /* Breadcrumb (Bas, 2026-10-15): no home icon, no slashes. Each level is followed by a chevron, "Newsletter ›" */
  .crumbs li + li::before, .crumbs li:last-child::before { content: none; }
  .crumbs li::after { content: ''; display: inline-block; width: 12px; height: 12px; margin: 0 8px; vertical-align: -1px; background: var(--label);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }

  /* ---------- Thoughtpiece extras (Bas, 2026-10-16): a chart from the print PDF, pull quotes, the risk warning ---------- */
  .a-chart { margin: 32px 0; }
  .a-chart img { aspect-ratio: auto; object-fit: contain; background: #fff; border: 1px solid var(--hair); }
  .a-quote { margin: 32px 0; }
  .a-quote p { font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 300; font-size: 24px; line-height: 1.35; color: var(--navy); text-wrap: balance; }
  @media (max-width: 760px) { .a-quote p { font-size: 21px; } }


  /* ---------- Overview pages, one header (Bas, 2026-10-16) ----------
     Title, intro and a divider under it, in the same place on every overview page; the content starts 32px under the
     divider. No section labels (they added nothing). Page changes are instant (the fade was removed). */
  .ov-head { max-width: none; padding-bottom: 32px; border-bottom: 1px solid var(--rule); }   /* the divider runs the full width, the text keeps its own measure */
  .ov-head + * { margin-top: 32px !important; padding-top: 0 !important; border-top: 0 !important; }
  .ov-head + .wb-list, .ov-head + .section { margin-top: 32px !important; }
  /* The intro always takes the same room (2 lines, 3 on phones), so the divider sits at the same height on every page */
  .ov-head .a-deck { min-height: 24px; }   /* one line now the intros are short (Bas: 8 to 10 words) */
  @media (max-width: 760px) { .ov-head .a-deck { min-height: 48px; } }
  /* The title's letters start level with the Home icon in the menu, and so with the homepage featured block (Bas, 2026-10-16) */
  .ov { padding-top: 17px; }   /* +8 (Bas): level with the Home icon and text in the menu, not with its highlight box */
  @media (max-width: 760px) { .ov { padding-top: 10px; } }

  /* ---------- Webinar and podcast cards until there are real thumbnails (Bas, 2026-10-16) ----------
     Navy with an Unsplash photo at 10% (img/cards, credits in CREDITS.txt), the kind of content top left, the Theta mark top right. */
  /* Speaker portraits (Bas, 2026-10-16): black and white, a hard split with navy, no gradient */
  .card .art > img.art-bg { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: 50%; height: 100%; object-fit: cover; object-position: center top; opacity: .35; }   /* hard 50/50: navy left, the photo right at 35% (Bas: 50, then more transparent) */
  .card .art:has(> img.art-bg)::after { content: none; }
  .card:hover .art > img.art-bg { transform: none; }
  .art-label { position: absolute; z-index: 1; left: 16px; top: 14px; font-size: 13px; line-height: 20px; color: rgba(255,255,255,.8); }
  .art-mark { position: absolute; z-index: 1; right: 16px; top: 14px; display: block; height: 20px; }
  .art-mark img { height: 20px; width: auto; filter: brightness(0) invert(1); opacity: .85; }
  /* A stacked logo (Cambridge Associates) needs more height than a one-line wordmark to read the same size */
  .tp-lead .art.type .card-logo.card-logo-tall { height: 40px; filter: none; }   /* the logo in its own colours, on the light block */
  @media (max-width: 760px) { .tp-lead .art.type .card-logo.card-logo-tall { height: 30px; } }
  /* Must read number 1 on a light block (Bas, 2026-10-16): soft off-white, the source's photo at 10%, its logo in its own colours */
  .art.light { position: relative; background: var(--soft); }
  @media (hover: hover) { a.tp-lead:hover .art.light { background: var(--warm); } }

  /* ---------- Phones (Bas, 2026-10-16): no logo row, the search full width and scrolling away with the page,
     featured cards small enough that one and a half fit, so the next one invites a swipe ---------- */
  @media (max-width: 760px) {
    .m-logo { display: none !important; }
    .topbar { position: relative; top: auto; }
    .topbar .search { flex: 1 1 100%; order: 0; }
    .hero { padding-top: 8px; }
    /* iPhones zoom the whole page into any field with text under 16px; 16px stops that and pinch-zoom keeps working */
    input, select, textarea { font-size: 16px !important; }
    .slide { width: calc((100cqw - var(--gutter)) * .75); padding: 14px; }   /* 75% of the screen: the next card peeks in (Bas) */
    .slide .copy { gap: 12px; }
    .slide h3 { font-size: 21px; line-height: 26px; margin-top: 0; }
    .slide .s-who { margin-top: 8px; }
    .slide .s-who li { font-size: 12px; line-height: 16px; }
    .slide .s-who b { display: block; margin-right: 0; }
    .slide .s-foot { gap: 8px; }
    .slide .when { font-size: 11px; }
    .slide .when b { font-size: 22px; margin-bottom: 6px; }
    .slide .s-foot .btn { height: 28px; padding: 0 10px; font-size: 12px; }
  }
  /* Phones: the reading bar moves to the top edge of the screen (shell.js), since the top bar scrolls away there */
  .progress-top { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left; z-index: 40; pointer-events: none; }
  /* Phones: balanced line breaks left a third of every line empty on a narrow screen ("lines seem cut off", Bas 2026-10-16).
     Normal breaks there (pretty only avoids a single word on the last line), and no narrow max-widths. */
  @media (max-width: 760px) {
    .tp-title, .tp-lead .big-title, .lead .big-title, .a-head .big-title, .a-quote p, .art.type .big-title, .quiz-dialog .big-title { text-wrap: pretty; max-width: none; }
    .tp-lead .big-title { font-size: 26px; line-height: 30px; }
  }
  /* Phones (Bas, 2026-10-16): card titles use the card's full width (the desktop 15ch made words break early);
     detail pages (articles, issues) have no bottom menu and no search, the back arrow in the top bar leads out */
  @media (max-width: 760px) {
    .slide h3 { max-width: none; text-wrap: pretty; }
    body:has(.article) .tabbar { display: none; }
    body:has(.article) { padding-bottom: 0; }
    body:has(.article) .topbar .search { display: none; }
  }
  /* Phones (Bas, 2026-10-16): the page and its top bar are one solid white, so Safari's own bar matches too
     (the 94% white + blur read as grey); on article pages a fixed line under the back arrow instead of one that appears on scroll */
  html { background: var(--page); }
  @media (max-width: 760px) {
    .topbar, body.searching .topbar { background: var(--page); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
    body:has(.article) .topbar, body:has(.article) .topbar.scrolled { border-bottom: 1px solid var(--rule); }
  }
  /* Phone menu: the active item's icon is filled (Bas, 2026-10-16: outline only was unclear). The main shape fills
     with the text colour; details inside it (envelope flap, play triangles, pencil line) turn white */
  .tabbar a.active svg > :first-child { fill: currentColor; }
  .tabbar a.active[href="/newsletter"] svg > path { fill: none; stroke: var(--page); }
  .tabbar a.active[href="/legends4legends"] svg > path:last-child,
  .tabbar a.active[href="/webinars"] svg > path:first-of-type { fill: var(--page); stroke: var(--page); }
  .tabbar a.active[href="/thoughtpieces"] svg > path:last-child { stroke: var(--page); }
  .tabbar a.active { font-weight: 500; }
  /* The Theta mark sits on the navy half, in front of the label, on every card (on the right it sat on faces) */
  .card .art .art-mark { left: 16px; right: auto; }
  .card .art .art-label { left: 44px; }
  @media (max-width: 760px) { .card .art .art-label { left: 40px; } }
  /* The Theta mark on the cards a little smaller (Bas): 16px, centred on the label's line */
  .card .art .art-mark, .card .art .art-mark img { height: 16px; }
  .card .art .art-mark { top: 16px; }
  .card .art .art-label { left: 40px; }
  @media (max-width: 760px) { .card .art .art-label { left: 38px; } }
  /* Newsletter topic dropdown: right-aligned with the dates, so the row is as wide as the list (not over the signup box) */
  .tabs-row:has(.topic-select) { justify-content: space-between; }
  @media (min-width: 1100px) { .tabs-row:has(.topic-select) { margin-right: 340px; } }   /* the signup column (300) and its gap (40) */
  .topic-select select { appearance: none; -webkit-appearance: none; height: 32px; padding: 0 30px 0 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23031726' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; font: inherit; font-size: 12px; font-weight: 500; color: var(--ink); cursor: pointer; }
  .topic-select select:hover, .topic-select select:focus-visible { border-color: var(--ink); outline: 0; }
  .topic-select.on select { background-color: var(--soft); }
  .nl-simple[hidden] { display: none; }
  .nl-empty { padding: 14px 0; color: var(--label); }
  /* Homepage: the featured block starts level with the top of the highlighted Home item (Home is active there, Bas 2026-10-16);
     the other pages' titles line up with the Home icon instead */
  /* Article pages (Bas, 2026-10-16): the date above the title, and a divider between the intro and the text (frame grey) */
  .a-head .a-date { margin: 0 0 32px; }   /* room above the title (Bas: 12, 20, then a bit more) */
  .a-head { padding-bottom: 40px; border-bottom: 1px solid var(--rule); }
  @media (max-width: 760px) { .a-head { padding-bottom: 32px; } }

  /* ---------- Footer (Bas, 2026-10-16): light, on every page. Company details, sitemap, licence line. ---------- */
  .site-foot { margin: 64px var(--gutter) 0; border-top: 1px solid var(--rule); padding: 24px 0 32px; }
  .closing ~ .site-foot { margin-top: 0; }   /* the closing line already ends with 64px: keep the standard section gap */
  .foot-top { display: grid; grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(0, 1fr)); gap: 24px; }
  .foot-co { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  .foot-name { font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 500; font-size: 15px; color: var(--ink); }
  .foot-co address { font-style: normal; font-size: 13px; line-height: 20px; color: var(--sub); margin-top: -8px; }
  .foot-co address a:hover, .foot-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .foot-col { display: flex; flex-direction: column; gap: 8px; }
  .foot-col h2 { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 400; line-height: 16px; color: var(--sub); text-transform: uppercase; letter-spacing: 0; margin-bottom: 4px; }
  .foot-col a { font-size: 13px; line-height: 20px; color: var(--sub); align-self: flex-start; }
  .foot-legal { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--hair); }
  .foot-legal p { font-size: 12px; line-height: 18px; color: var(--label); max-width: 1120px; }
  .foot-legal .foot-copy { white-space: nowrap; }
  @media (max-width: 1100px) {
    .foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .foot-co { grid-column: 1 / -1; }
  }
  @media (max-width: 760px) {
    .foot-top { grid-template-columns: 1fr 1fr; row-gap: 32px; }
    .foot-legal { flex-direction: column; align-items: flex-start; }
  }