:root{
    --bg:#0a0a0c;
    --panel:#111217;
    --panel-2:#16171d;
    --card:#151620;
    --line:#26272e;
    --line-soft:rgba(212,167,44,0.16);
    --ink:#f5f2ea;
    --muted:#a6a39a;
    --muted-2:#8c92a8;
    --gold:#cda24d;
    --gold-bright:#efc978;
    --gold-dim:#4a3d20;
    --navy:#0c1430;
    --header-h:64px; /* no sticky header now; the anchor-jump script reads this */
  }

  *{ box-sizing:border-box; }
  html{
    scroll-behavior:smooth; overflow-x:hidden; width:100%; -webkit-tap-highlight-color:transparent;
    /* Keeps in-page #anchor jumps (nav links, hero buttons, etc.) from landing
       underneath anything at the top of the page. --header-h is 0 now
       that the top bar is gone; the anchor-jump script still reads it. */
    scroll-padding-top:10px;
  }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    width:100%;
  }
  h1,h2,h3{ font-family:'Fraunces', Georgia, serif; }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  button{ font-family:inherit; }

  .wrap{ max-width:1080px; margin:0 auto; padding:0 22px; }

  @media (max-width:780px){
    .wrap{ padding:0 28px; }
  }
  @media (max-width:480px){
    .wrap{ padding:0 22px; }
  }
  @media (max-width:780px){
    /* Keeps form fields at 16px so iOS Safari doesn't zoom in on focus */
    .input{ font-size:16px; }
    /* Touch targets under ~44px are hard to tap reliably on a phone */
    .reader-actions .r-close{ width:44px; height:44px; }
    .drawer-close button{ width:44px; height:44px; border-radius:22px; }
  }

  ::selection{ background:var(--gold-dim); color:var(--ink); }

  /* focus visibility */
  a:focus-visible, button:focus-visible, input:focus-visible{
    outline:2px solid var(--gold-bright); outline-offset:3px;
  }

  @media (prefers-reduced-motion: reduce){
    /* Ticker + hero video keep playing (each has a pause button); only decorative bits stop. */
    *{ transition-duration:0.001ms !important; scroll-behavior:auto !important; }
    .news-ticker .ticker-label .dot{ animation:none !important; }
  }



  .nav-cta{
    background:var(--gold);
    color:#14100a;
    font-weight:700;
    font-size:13px;
    padding:9px 16px;
    border-radius:999px;
    white-space:nowrap;
    box-shadow:0 0 0 3px rgba(212,167,44,0.14);
  }
  .nav-cta:hover{ background:var(--gold-bright); }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    isolation:isolate;
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  .hero-banner{
    display:block;
    width:100%;
    aspect-ratio: 16 / 9; /* matches the actual video's shape — no more guessing from viewport width */
    height:auto;
    max-height:80vh; /* soft ceiling only for unusually tall/narrow viewports */
    object-fit:cover;
    object-position:center top; /* if anything ever gets cropped, keep the top (title/plane/globe) visible */
    background:#0d0b08;
  }
  @media (prefers-reduced-motion: reduce){
    .hero h1, .hero p.lede, .hero-cue{ animation:none !important; }
  }
  .hero-copy{
    padding:34px 28px 40px;
  }
  .hero-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12.5px;
    font-weight:700;
    color:var(--gold-bright);
    margin:0 0 16px;
  }
  .hero-kicker::before{
    content:"";
    width:7px; height:7px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 0 4px var(--gold-dim);
  }
  .hero h1{
    font-family:'Bebas Neue', 'Oswald', 'Arial Narrow', Impact, sans-serif;
    font-weight:400;
    text-transform:uppercase;
    font-size:clamp(40px, 11vw, 58px);
    line-height:1;
    letter-spacing:0.02em;
    margin:0 0 16px;
    max-width:none;
    animation: heroFadeUp .8s ease-out .1s both;
  }
  .hero-gold{ color:var(--gold-bright); }
  .hero p.lede{
    font-size:16.5px;
    color:#cfccc2;
    max-width:56ch;
    margin:0 0 14px;
    animation: heroFadeUp .8s ease-out .28s both;
  }
  .hero-cue{
    margin:0;
    font-size:15px; font-weight:700; letter-spacing:0.01em;
    color:var(--gold-bright);
    animation: heroFadeUp .8s ease-out .4s both;
  }
  @keyframes heroFadeUp{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
  }
  @media (prefers-reduced-motion: reduce){
    .hero-banner, .hero h1, .hero p.lede, .hero-cue{ animation:none !important; }
  }
  .btn-primary{
    background:var(--gold);
    color:#14100a;
    font-weight:700;
    font-size:14px;
    padding:13px 22px;
    border-radius:999px;
    border:none;
    cursor:pointer;
  }
  .btn-primary:hover{ background:var(--gold-bright); }
  .btn-ghost{
    border:1px solid var(--line);
    color:var(--ink);
    font-weight:600;
    font-size:14px;
    padding:12px 21px;
    border-radius:999px;
  }
  .btn-ghost:hover{ border-color:var(--gold); color:var(--gold-bright); }

  @media (max-width:780px){
    .hero-banner{ max-height:40vh; }
    .hero-copy{ padding:22px 24px 26px; }
    .hero h1{ margin-bottom:12px; }
    .hero p.lede{ font-size:15.5px; line-height:1.5; }
  }

  /* ---------- Category strip ---------- */
  .topic-strip{
    border-bottom:1px solid var(--line);
    background:var(--panel);
  }
  .topic-strip .wrap{
    display:flex;
    gap:0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .topic-strip .wrap::-webkit-scrollbar{ display:none; }
  .topic-strip a{
    flex:0 0 auto;
    font-size:12.5px;
    font-weight:600;
    color:var(--muted);
    padding:14px 18px;
    border-bottom:2px solid transparent;
    white-space:nowrap;
  }
  .topic-strip a:hover{ color:var(--ink); border-bottom-color:var(--gold-dim); }

  /* ---------- Weekly Scoop teaser card (sits above World Clocks) ----------
     A photo-forward preview card built from the ACTUAL latest newsletter
     (its own banner image + subject line, pulled live from the worker).
     Clicking it opens the full issue in a popup — see .scoop-modal below —
     instead of jumping down the page. */
  .scoop-teaser{
    display:block;
    width:calc(100% - 32px);
    max-width:400px;
    margin:26px auto 0;
    padding:0;
    border:0;
    background:none;
    font:inherit;
    color:inherit;
    text-align:left;
    cursor:pointer;
    -webkit-appearance:none;
    appearance:none;
  }
  .scoop-teaser-window{
    display:block;
    border:1px solid var(--line-soft);
    border-radius:16px;
    overflow:hidden;
    background:var(--card);
    box-shadow:0 10px 30px rgba(0,0,0,0.28);
    transition:border-color .2s ease, transform .15s ease, box-shadow .2s ease;
  }
  .scoop-teaser:hover .scoop-teaser-window{
    border-color:var(--gold);
    transform:translateY(-2px);
    box-shadow:0 14px 36px rgba(0,0,0,0.34);
  }
  .scoop-teaser:active .scoop-teaser-window{ transform:scale(0.99); }
  .scoop-teaser:focus-visible .scoop-teaser-window{ border-color:var(--gold); }
  .scoop-teaser-thumb{
    display:block;
    position:relative;
    aspect-ratio:16/9;
    background:linear-gradient(160deg, rgba(205,162,77,0.16), rgba(205,162,77,0.04));
    overflow:hidden;
  }
  .scoop-teaser-img{ display:block; width:100%; height:100%; object-fit:cover; }
  .scoop-teaser-fallback{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:6px;
    color:var(--muted); font-size:12.5px; font-weight:600; text-align:center; padding:0 20px;
  }
  .scoop-teaser-fallback .emoji{ font-size:26px; }
  .scoop-teaser-body{ display:block; padding:14px 16px 4px; }
  .scoop-teaser-eyebrow{
    display:block;
    font-size:10.5px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--gold-bright); margin-bottom:4px;
  }
  .scoop-teaser-title{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    font-family:'Fraunces', serif; font-weight:500; font-size:15.5px; line-height:1.32;
    color:var(--ink);
    text-align:center;
    overflow-wrap:break-word;
  }
  .scoop-teaser-list-label{
    display:block;
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid var(--line);
    font-size:10px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--muted-2);
  }
  .scoop-teaser-list{
    display:block;
    margin-top:6px;
    padding-top:6px;
  }
  .scoop-teaser-list-item{
    display:flex; align-items:flex-start; gap:7px;
    font-size:12px; line-height:1.4; color:var(--muted);
    margin-bottom:6px;
    white-space:normal; overflow-wrap:break-word; word-break:break-word;
  }
  .scoop-teaser-list-item:last-child{ margin-bottom:0; }
  .scoop-teaser-list-item .dot{
    flex:none; width:5px; height:5px; border-radius:50%;
    background:var(--gold); margin-top:5px;
  }
  .scoop-teaser-cta{
    display:flex; align-items:center; gap:5px;
    padding:12px 16px 14px;
    font-size:12.5px; font-weight:700; color:var(--gold);
  }
  .scoop-teaser-cta .scoop-teaser-arrow{ transition:transform .2s ease; }
  .scoop-teaser:hover .scoop-teaser-cta .scoop-teaser-arrow{ transform:translateX(3px); }

  /* ---------- Weekly Scoop popup (opened by the card above) ---------- */
  .scoop-modal-scrim{
    position:fixed; inset:0;
    background:rgba(4,7,18,0.72);
    opacity:0; pointer-events:none;
    transition:opacity .2s ease;
    z-index:70;
  }
  .scoop-modal-scrim.open{ opacity:1; pointer-events:auto; }
  .scoop-modal{
    position:fixed;
    left:50%; top:50%;
    transform:translate(-50%, -50%) scale(0.97);
    width:min(680px, calc(100% - 32px));
    height:min(82vh, 900px);
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 30px 70px rgba(0,0,0,0.5);
    display:flex; flex-direction:column;
    opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    z-index:71;
  }
  .scoop-modal.open{ opacity:1; pointer-events:auto; transform:translate(-50%, -50%) scale(1); }
  .scoop-modal-chrome{
    flex:none;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 16px;
    background:var(--panel);
    border-bottom:1px solid var(--line);
  }
  .scoop-modal-title{
    font-size:13.5px; font-weight:700; color:var(--ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .scoop-modal-close{
    flex:none;
    width:32px; height:32px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--panel-2);
    color:var(--ink);
    font-size:14px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:background .15s ease, transform .15s ease;
  }
  .scoop-modal-close:hover{ background:rgba(212,167,44,0.22); transform:scale(1.06); }
  .scoop-modal-body{ flex:1; min-height:0; background:#fff; }
  .scoop-modal-frame{ display:block; width:100%; height:100%; border:0; }
  @media (max-width:640px){
    .scoop-modal{
      width:100%; height:100%;
      max-width:100%; max-height:100%;
      border-radius:0;
      top:0; left:0; transform:none;
    }
    .scoop-modal.open{ transform:none; }
  }


  /* ---------- World Clocks ---------- */
  .worldclock-section{ padding:36px 0 8px; border-bottom:1px solid var(--line); }
  .worldclock-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:14px; margin-bottom:16px; flex-wrap:wrap;
  }
  .worldclock-head h2{
    font-weight:500; font-size:clamp(20px, 3vw, 26px); margin:0;
    display:flex; align-items:center; gap:10px;
  }
  .worldclock-head h2 .sun{ font-size:0.8em; }
  .worldclock-note{ font-size:11.5px; color:var(--muted-2); white-space:nowrap; }
  .worldclock-note .dot2{
    display:inline-block; width:6px; height:6px; border-radius:50%;
    background:#5fd08a; margin-right:6px; box-shadow:0 0 0 3px rgba(95,208,138,0.18);
  }
  .worldclock-grid{
    display:grid; grid-template-columns:repeat(7, 1fr); gap:12px; margin:0 0 28px;
  }
  @media (max-width:1000px){ .worldclock-grid{ grid-template-columns:repeat(4, 1fr); } }
  @media (max-width:560px){ .worldclock-grid{ grid-template-columns:repeat(2, 1fr); } }
  .clock-card{
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:16px 10px; text-align:center;
  }
  .clock-card .clock-icon{ font-size:22px; margin-bottom:6px; }
  .clock-card .clock-region{
    font-size:10.5px; font-weight:800; color:var(--muted-2); text-transform:uppercase;
    letter-spacing:0.04em; margin-bottom:2px;
  }
  .clock-card .clock-city{ font-size:12.5px; font-weight:700; color:#fff; margin-bottom:8px; }
  .clock-card .clock-time{
    font-family:'Fraunces', Georgia, serif; font-size:clamp(17px, 2.2vw, 21px);
    font-weight:600; color:var(--gold-bright); line-height:1.1;
  }
  .clock-card .clock-daypart{ font-size:13px; margin-left:2px; }
  .clock-card .clock-date{ font-size:10.5px; color:var(--muted); margin-top:4px; }

  /* ---------- FX Strip / Currency Board ---------- */
  .fx-section{ padding:0 0 8px; }
  .fx-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:14px; margin-bottom:14px; flex-wrap:wrap;
  }
  .fx-head h3{
    font-weight:500; font-size:clamp(16px, 2.4vw, 19px); margin:0;
    display:flex; align-items:center; gap:8px; color:var(--ink);
  }
  .fx-note{ font-size:11px; color:var(--muted-2); white-space:nowrap; }
  .fx-explainer{ font-size:12.5px; color:var(--muted); margin:0 0 20px; max-width:52ch; }

  .fx-group{ margin:0 0 20px; }
  .fx-group-label{
    font-size:10.5px; font-weight:800; color:var(--gold); text-transform:uppercase;
    letter-spacing:0.07em; margin:0 0 10px;
  }

  /* The majors get more visual weight — real FX terminology (the four
     currencies most heavily traded against the dollar), not decoration. */
  .fx-grid-majors{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
  @media (max-width:700px){ .fx-grid-majors{ grid-template-columns:repeat(2, 1fr); } }

  /* auto-fill means this can never mismatch its item count again, however
     many currencies end up in the "rest" group. */
  .fx-grid-rest{ display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:10px; }

  .fx-card{
    position:relative; background:var(--card); border:1px solid var(--line); border-radius:12px;
    padding:14px 10px; text-align:center;
  }
  .fx-card .fx-pair{
    font-size:11px; font-weight:800; color:var(--muted-2); letter-spacing:0.03em;
    display:flex; align-items:center; justify-content:center; gap:5px;
  }
  .fx-card .fx-flag{ font-size:14px; }
  .fx-card .fx-rate{
    font-family:'Fraunces', Georgia, serif; font-weight:600;
    color:var(--gold-bright); margin-top:6px; font-size:16px;
  }
  .fx-grid-majors .fx-card{ padding:18px 12px; }
  .fx-grid-majors .fx-card .fx-rate{ font-size:25px; }
  .fx-grid-rest .fx-card{ padding:11px 8px; }
  .fx-grid-rest .fx-card .fx-rate{ font-size:16px; margin-top:4px; }
  .fx-card .fx-meta{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:7px; }
  .fx-card .fx-code{ font-size:9.5px; color:var(--muted-2); letter-spacing:0.04em; }
  .fx-card-empty{ grid-column:1/-1; color:var(--muted); font-size:12px; padding:14px; text-align:center; }

  .fx-delta{ font-size:10px; font-weight:700; padding:1.5px 7px; border-radius:999px; white-space:nowrap; }
  .fx-delta-up{ color:#5fd08a; background:rgba(95,208,138,0.14); }
  .fx-delta-down{ color:#e08a8a; background:rgba(200,70,70,0.14); }
  .fx-delta-flat{ color:var(--muted-2); background:rgba(255,255,255,0.05); }

  /* ---------- Tap-for-info icon on FX / rates / money-supply cards ----------
     The popup ("card-info-tip") is a sibling of the icon, positioned relative
     to the whole card (which has position:relative), so it always opens
     directly below whichever card was tapped — not the viewport bottom. */
  .card-info{
    all:unset; box-sizing:border-box; position:absolute; top:6px; right:6px;
    width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:800; font-family:inherit; line-height:1;
    color:var(--muted-2); background:rgba(255,255,255,0.07); border:1px solid var(--line);
    border-radius:50%; cursor:pointer;
  }
  /* Invisible padded hit area — the visible badge stays a tidy 16px circle,
     but the actual tappable region is ~40x40, since a real thumb can't
     reliably land on a 16px target in the corner of a card. */
  .card-info::before{
    content:''; position:absolute; top:-12px; right:-12px; bottom:-12px; left:-12px;
  }
  .card-info:hover{ color:var(--gold-bright); border-color:rgba(212,167,44,0.5); background:rgba(205,162,77,0.16); }
  .fx-card.tip-open .card-info, .rate-card.tip-open .card-info, .rates-spread-info.tip-open .card-info{
    color:var(--gold-bright); border-color:rgba(212,167,44,0.5); background:rgba(205,162,77,0.16);
  }
  .card-info-tip{
    position:absolute; top:calc(100% + 10px); left:50%;
    width:190px; max-width:calc(100vw - 32px);
    transform:translate(-50%, -6px);
    background:var(--panel); border:1px solid var(--line-soft); border-radius:10px;
    box-shadow:0 12px 28px rgba(0,0,0,0.4);
    padding:10px 12px; font-size:12px; line-height:1.55; font-weight:400;
    color:var(--ink); text-align:left;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    z-index:30;
  }
  .fx-card.tip-open .card-info-tip, .rate-card.tip-open .card-info-tip, .rates-spread-info.tip-open .card-info-tip{
    opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%, 0);
  }

  /* The 2s10s spread banner isn't a .fx-card/.rate-card (it's a wide flex
     row, not a small centered box), so the info icon there gets its own
     small inline wrapper instead of the absolute corner-badge placement —
     it sits right after the label text and its popup still opens directly
     below it, same as every other info icon on the page. */
  .rates-spread-info{ position:relative; display:inline-flex; vertical-align:middle; margin-left:6px; }
  .rates-spread-info .card-info{ position:relative; top:auto; right:auto; }

  /* ---------- Section-level hint that cards are tappable ---------- */
  .tap-hint{
    display:flex; align-items:center; gap:6px;
    font-size:11.5px; color:var(--muted-2); margin:0 0 14px;
  }
  .tap-hint-icon{
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:14px; height:14px; border-radius:50%; font-size:9px; font-weight:800;
    color:var(--muted-2); background:rgba(255,255,255,0.07); border:1px solid var(--line);
  }

  /* Quick-lesson guide — collapsed by default, one deliberate expand rather
     than anything hovering or auto-playing. */
  .fx-guide-toggle{
    width:100%; display:flex; align-items:center; gap:10px;
    background:var(--panel-2); border:1px solid var(--line-soft); border-radius:12px;
    padding:13px 16px; margin:6px 0 0; cursor:pointer; color:var(--ink);
    font-family:inherit; font-size:14px; font-weight:600; text-align:left;
    transition:background 0.15s ease, border-color 0.15s ease;
  }
  .fx-guide-toggle:hover{ background:rgba(205,162,77,0.08); border-color:rgba(212,167,44,0.32); }
  .fx-guide-toggle-icon{ font-size:16px; line-height:1; }
  .fx-guide-toggle-text{ flex:1; }
  .fx-guide-toggle-chevron{ font-size:17px; color:var(--gold-bright); font-weight:400; line-height:1; }
  .fx-guide{
    margin-top:10px; background:var(--panel); border:1px solid var(--line);
    border-radius:12px; padding:18px 20px;
  }
  .fx-guide[hidden]{ display:none; }
  .fx-guide-intro{ font-size:13.5px; color:var(--ink); line-height:1.6; margin:0 0 14px; }
  .fx-guide-intro strong{ color:var(--gold-bright); font-weight:700; }
  .fx-guide-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
  .fx-guide-list li{ font-size:13px; color:var(--muted); line-height:1.55; }
  .fx-guide-tag{
    display:inline-block; background:rgba(205,162,77,0.14); color:var(--gold-bright);
    font-size:10.5px; font-weight:800; letter-spacing:0.02em; padding:2px 7px;
    border-radius:6px; margin-right:8px; white-space:nowrap;
  }

  /* ---------- Rates & Yields board ---------- */
  .rates-grid-majors{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; }
  .rates-grid-rest{ display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:10px; margin-top:0; }
  .rate-card{
    position:relative; background:var(--card); border:1px solid var(--line); border-radius:12px;
    padding:14px 10px; text-align:center;
  }
  .rate-card .rate-label{ font-size:11px; font-weight:800; color:var(--muted-2); letter-spacing:0.03em; }
  .rate-card .rate-value{
    font-family:'Fraunces', Georgia, serif; font-weight:600; color:var(--gold-bright);
    margin-top:6px; font-size:16px;
  }
  .rates-grid-majors .rate-card{ padding:18px 12px; }
  .rates-grid-majors .rate-card .rate-value{ font-size:25px; }
  .rates-grid-rest .rate-card{ padding:11px 8px; }
  .rate-card .rate-asof{ font-size:9.5px; color:var(--muted-2); letter-spacing:0.03em; margin-top:6px; }

  .rates-spread-banner{
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
    padding:14px 18px; margin:6px 0 24px;
  }
  .rates-spread-banner[hidden]{ display:none; }
  .rates-spread-label{ font-size:12.5px; font-weight:700; color:var(--muted); }
  .rates-spread-value{ font-family:'Fraunces', Georgia, serif; font-size:19px; font-weight:600; color:var(--ink); }
  .rates-spread-status{ font-size:11px; font-weight:800; padding:3px 10px; border-radius:999px; margin-left:auto; }
  .rates-spread-normal{ color:#5fd08a; background:rgba(95,208,138,0.14); }
  .rates-spread-inverted{ color:#e08a8a; background:rgba(200,70,70,0.14); }

  /* ---------- This Day in Business History ---------- */
  .history-card{
    background:var(--panel-2); border:1px solid var(--line-soft); border-radius:14px;
    padding:16px 18px; margin:0 0 32px; display:flex; align-items:flex-start; gap:12px;
  }
  .history-card .hc-icon{ font-size:20px; line-height:1.4; }
  .history-card .hc-body{ flex:1; }
  .history-card .hc-label{
    font-size:10.5px; font-weight:800; color:var(--gold); text-transform:uppercase;
    letter-spacing:0.05em; margin-bottom:4px;
  }
  .history-card .hc-text{ font-size:14px; color:var(--ink); line-height:1.5; }
  .history-card .hc-year{ color:var(--gold-bright); font-weight:700; }

  /* ---------- Morning Brief ---------- */
  .morning-section{ padding:44px 0 8px; border-bottom:1px solid var(--line); }
  .morning-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:14px; margin-bottom:6px; flex-wrap:wrap;
  }
  .morning-head h2{
    font-weight:500; font-size:clamp(22px, 3.4vw, 30px); margin:0;
    display:flex; align-items:center; gap:10px;
  }
  .morning-head h2 .sun{ font-size:0.8em; }
  .morning-updated{ font-size:11.5px; color:var(--muted-2); white-space:nowrap; }
  .morning-updated .dot2{
    display:inline-block; width:6px; height:6px; border-radius:50%;
    background:#5fd08a; margin-right:6px; box-shadow:0 0 0 3px rgba(95,208,138,0.18);
  }
  .morning-sub{ font-size:14px; color:var(--muted); max-width:60ch; margin:2px 0 20px; }

  .morning-tabs{
    display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; padding-bottom:4px; margin:0 0 22px;
  }
  .morning-tabs::-webkit-scrollbar{ display:none; }
  .morning-tab{
    font-size:12.5px; font-weight:700; color:var(--muted);
    border:1px solid var(--line); background:var(--panel);
    padding:8px 14px; border-radius:999px; white-space:nowrap; cursor:pointer;
    transition:color .15s ease, border-color .15s ease, background .15s ease;
  }
  .morning-tab:hover{ color:var(--gold-bright); border-color:var(--line-soft); }
  .morning-tab.active{
    color:#14100a; background:var(--gold-bright); border-color:var(--gold-bright);
  }

  .morning-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
    gap:18px; margin-bottom:14px;
  }
  .morning-card{
    display:block; width:100%; margin:0; padding:0; text-align:left;
    font:inherit; color:inherit; cursor:pointer;
    background:var(--card); border:1px solid var(--line);
    border-radius:14px; overflow:hidden; transition:border-color .15s ease, transform .15s ease;
  }
  .morning-card:hover{ border-color:var(--gold-dim); transform:translateY(-2px); }
  .morning-card .m-thumb{
    aspect-ratio:16/10; overflow:hidden; background:var(--panel-2);
    position:relative;
  }
  .morning-card .m-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .morning-card .m-thumb .m-fallback{
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    font-size:30px; background:linear-gradient(160deg, rgba(205,162,77,0.14), rgba(205,162,77,0.03));
  }
  .morning-card .m-region{
    position:absolute; top:10px; left:10px;
    font-size:10.5px; font-weight:800; letter-spacing:0.03em; text-transform:uppercase;
    color:#14100a; background:var(--gold-bright); padding:4px 9px; border-radius:999px;
  }
  .morning-card .m-body{ padding:14px 16px 16px; }
  .morning-card h3{
    font-family:'Fraunces', serif; font-weight:500; font-size:15.5px; line-height:1.32;
    color:var(--ink); margin:0 0 8px;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .morning-card .m-excerpt{
    font-size:12.5px; color:var(--muted); line-height:1.5; margin:0 0 10px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .morning-card .m-meta{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    font-size:11px; color:var(--muted-2);
  }
  .morning-card .m-src{ font-weight:700; color:var(--gold-bright); }
  .morning-card .m-topic{
    font-size:10px; font-weight:700; letter-spacing:0.02em; text-transform:uppercase;
    color:var(--muted-2); background:var(--panel-2); border:1px solid var(--line);
    padding:3px 8px; border-radius:999px; white-space:nowrap;
  }

  .morning-skel{
    background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  }
  .morning-skel .m-thumb{ aspect-ratio:16/10; background:var(--panel-2); }
  .morning-skel .m-body{ padding:14px 16px 16px; }
  .morning-skel .sk-line{
    height:11px; border-radius:6px; margin-bottom:8px;
    background:linear-gradient(90deg, var(--line) 0%, var(--panel-2) 50%, var(--line) 100%);
    background-size:200% 100%; animation:skelShimmer 1.4s ease-in-out infinite;
  }
  @keyframes skelShimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

  .morning-empty{
    font-size:13px; color:var(--muted-2); padding:30px 0; text-align:center;
    border:1px dashed var(--line); border-radius:14px; grid-column:1/-1;
  }

  /* ---------- In-house article reader (opens instead of leaving the site) ---------- */
  .reader-scrim{
    position:fixed; inset:0; background:rgba(4,7,18,0.72);
    opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:60;
  }
  .reader-scrim.open{ opacity:1; pointer-events:auto; }
  .reader-modal{
    position:fixed; inset:3vh 3vw; z-index:61;
    background:var(--navy); border-radius:16px; overflow:hidden;
    display:flex; flex-direction:column;
    box-shadow:0 30px 80px rgba(0,0,0,0.55);
    opacity:0; transform:scale(0.97); pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .reader-modal.open{ opacity:1; transform:scale(1); pointer-events:auto; }
  @media (max-width:780px){ .reader-modal{ inset:0; border-radius:0; } }
  .reader-head{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:14px 16px; border-bottom:1px solid var(--line);
    background:var(--panel); flex:none;
  }
  .reader-head .r-title{
    font-family:'Fraunces', serif; font-weight:500; font-size:14.5px; color:var(--ink);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:52vw;
  }
  .reader-head .r-src{ font-size:11px; color:var(--gold-bright); font-weight:700; }
  .reader-actions{ display:flex; align-items:center; gap:8px; flex:none; }
  .reader-actions a, .reader-actions button{
    font-size:12px; font-weight:700; border-radius:999px; padding:8px 13px;
    border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer;
    display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  }
  .reader-actions a:hover, .reader-actions button:hover{ border-color:var(--gold-dim); color:var(--gold-bright); }
  .reader-actions .r-close{ width:34px; height:34px; padding:0; justify-content:center; font-size:16px; }
  .reader-body{ position:relative; flex:1; background:#0d0f14; }
  .reader-body iframe{ width:100%; height:100%; border:0; display:block; }
  .reader-fallback-hint{
    position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
    font-size:12px; color:var(--muted); background:rgba(17,18,23,0.92);
    border:1px solid var(--line); padding:9px 14px; border-radius:999px;
    display:flex; align-items:center; gap:8px; opacity:0; transition:opacity .3s ease;
    pointer-events:none;
  }
  .reader-fallback-hint.show{ opacity:1; pointer-events:auto; }
  .reader-fallback-hint a{ color:var(--gold-bright); font-weight:700; }

  /* ---------- Section heads ---------- */
  .section{ padding:56px 0; border-bottom:1px solid var(--line); content-visibility:auto; contain-intrinsic-size:auto 800px; }
  .section-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    margin:0 0 28px;
  }
  .section-head h2{
    font-weight:500;
    font-style:italic;
    font-size:26px;
    margin:0;
  }
  .section-head .see-all{ font-size:13px; color:var(--gold-bright); font-weight:600; white-space:nowrap; }

  /* ---------- Feature deep-dive (the flagship story) ---------- */
  .feature-story .feature-media{
    position:relative;
    border-radius:16px;
    overflow:hidden;
    aspect-ratio:16/9;
    margin-bottom:26px;
    border:1px solid var(--line-soft);
    box-shadow:0 20px 60px -20px rgba(205,162,77,0.35), 0 0 0 1px rgba(255,255,255,0.02) inset;
    background:
      radial-gradient(140% 140% at 15% 10%, rgba(205,162,77,0.16), transparent 55%),
      radial-gradient(120% 120% at 85% 90%, rgba(12,20,48,0.9), transparent 60%),
      var(--panel-2);
  }
  .feature-media img{ width:100%; height:100%; object-fit:contain; transition:transform .6s ease; }
  .feature-story .feature-media:hover img{ transform:scale(1.02); }
  .badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:11.5px;
    font-weight:700;
    color:#2a2308;
    background:var(--gold-bright);
    padding:5px 12px;
    border-radius:20px;
  }
  .feature-story .kicker-row{ margin-bottom:14px; }
  .feature-story h3.headline{
    font-weight:500;
    font-size:clamp(24px, 3.6vw, 34px);
    line-height:1.18;
    max-width:22ch;
    margin:0 0 12px;
  }
  .feature-story .dek{
    font-size:16px;
    color:var(--muted);
    max-width:62ch;
    margin:0 0 8px;
  }

  /* ---------- Deep-dive gateway: collapse the long read, offer a direct skip ---------- */
  .deepdive-gateway{
    display:flex; flex-wrap:wrap; align-items:center; gap:12px;
    margin:0 0 28px;
  }
  .deepdive-toggle{
    display:flex; align-items:center; gap:9px;
    background:var(--panel-2); border:1px solid var(--line-soft); border-radius:999px;
    padding:11px 18px; cursor:pointer; color:var(--ink);
    font-family:inherit; font-size:13.5px; font-weight:600;
    transition:background 0.15s ease, border-color 0.15s ease;
  }
  .deepdive-toggle:hover{ background:rgba(205,162,77,0.08); border-color:rgba(212,167,44,0.32); }
  .deepdive-toggle-icon{ font-size:14px; line-height:1; }
  .deepdive-toggle-chevron{ font-size:15px; color:var(--gold-bright); font-weight:400; line-height:1; }
  .deepdive-skip{ font-size:13.5px; padding:11px 18px; }

  /* ---------- Deep-dive fast-forward rail (desktop only — a phone has no
     side margin to put this without covering content) ---------- */
  .deepdive-rail{
    position:fixed; right:18px; top:50%;
    transform:translateY(-50%) translateX(6px);
    display:flex; flex-direction:column; gap:8px;
    opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    z-index:20;
  }
  .deepdive-rail.visible{ opacity:1; pointer-events:auto; transform:translateY(-50%) translateX(0); }
  .deepdive-rail a{
    display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%;
    background:var(--panel-2); border:1px solid var(--line);
    font-size:14px; text-decoration:none;
    transition:border-color .15s ease, transform .15s ease, background .15s ease;
  }
  .deepdive-rail a:hover{ border-color:var(--gold-bright); transform:scale(1.12); background:var(--panel); }
  .deepdive-rail-videos{ margin-top:6px; border-color:var(--line-soft) !important; }
  @media (max-width:1100px){ .deepdive-rail{ display:none; } }

  /* ---------- TL;DR callout ---------- */
  .tldr-box{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:14px;
    align-items:flex-start;
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:14px;
    padding:18px 20px;
    margin:20px 0 30px;
  }
  .tldr-box .tldr-icon{
    font-size:20px;
    line-height:1;
    padding-top:2px;
  }
  .tldr-box .tldr-label{
    font-size:11px;
    font-weight:800;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--gold-bright);
    margin-bottom:6px;
  }
  .tldr-box p{
    font-size:14.5px;
    color:#d6d3c9;
    margin:0;
    line-height:1.6;
  }

  /* ---------- Jargon tooltips ---------- */
  .jargon{
    border-bottom:1px dotted var(--gold-bright);
    cursor:help;
    position:relative;
    color:inherit;
    display:inline-block;
    padding:4px 6px;
    margin:-4px -6px;
    border-radius:5px;
    -webkit-tap-highlight-color:rgba(205,162,77,0.25);
  }
  .jargon .tip{
    position:absolute;
    left:50%;
    bottom:calc(100% + 9px);
    transform:translateX(-50%) translateY(4px);
    background:#1c1d24;
    border:1px solid var(--line-soft);
    color:#e9e6dd;
    font-family:'Inter', sans-serif;
    font-style:normal;
    font-weight:400;
    font-size:12.5px;
    line-height:1.5;
    padding:11px 13px;
    border-radius:10px;
    width:230px;
    box-shadow:0 16px 34px -12px rgba(0,0,0,0.65);
    opacity:0;
    visibility:hidden;
    transition:opacity .16s ease, transform .16s ease;
    z-index:25;
    text-align:left;
    pointer-events:none;
  }
  .jargon .tip::after{
    content:"";
    position:absolute; top:100%; left:50%; transform:translateX(-50%);
    border:6px solid transparent; border-top-color:#1c1d24;
  }
  .jargon:hover .tip, .jargon:focus-visible .tip, .jargon.show .tip{
    opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
  }
  @media (max-width:820px){
    /* Fixed to the viewport (not the trigger word) so it can never push the
       page wider than the screen — the bug that caused the mobile zoom/black-gap issue. */
    .jargon .tip{
      position:fixed;
      left:18px;
      right:18px;
      bottom:22px;
      top:auto;
      width:auto;
      max-width:none;
      transform:translateY(10px);
      margin:0;
    }
    .jargon .tip::after{ display:none; }
    .jargon:hover .tip, .jargon:focus-visible .tip, .jargon.show .tip{
      transform:translateY(0);
    }
  }

  /* ---------- Skip-ahead row (under TL;DR box) ---------- */
  .skip-row{
    display:flex;
    justify-content:flex-start;
    margin:-14px 0 30px;
  }
  .skip-hot-topics{
    font-size:12.5px;
    padding:9px 16px;
  }

  /* ---------- Mobile "tap to expand" hint ---------- */
  .mobile-hint{
    display:none;
    font-size:12.5px;
    color:var(--muted);
    margin:-20px 0 22px;
  }
  @media (max-width:820px){
    .mobile-hint{ display:block; }
  }

  /* ---------- Jump nav ---------- */
  .jump-nav{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 34px;
    padding-bottom:2px;
  }
  .jump-nav a{
    font-size:12px;
    font-weight:600;
    color:var(--muted);
    border:1px solid var(--line);
    background:var(--panel);
    padding:8px 13px;
    border-radius:999px;
    white-space:nowrap;
    transition:color .15s ease, border-color .15s ease, background .15s ease;
  }
  .jump-nav a:hover{
    color:var(--gold-bright);
    border-color:var(--line-soft);
    background:rgba(205,162,77,0.08);
  }

  .story-copy{ max-width:680px; }
  .story-copy p{
    font-size:16px;
    color:#d6d3c9;
    margin:0 0 20px;
  }
  .story-copy .lead-graf{
    font-size:18px;
    color:var(--ink);
  }

  .region-block{ margin:44px 0; }
  .region-block .region-media{
    border-radius:14px;
    overflow:hidden;
    margin-bottom:18px;
    border:1px solid var(--line-soft);
    box-shadow:0 16px 40px -18px rgba(205,162,77,0.3);
  }
  .region-block img{
    width:100%;
    display:block;
    margin-bottom:0;
    transition:transform .5s ease;
  }
  .region-block .region-media:hover img{ transform:scale(1.035); }
  .region-block h4{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:500;
    font-size:21px;
    color:var(--gold-bright);
    margin:0 0 12px;
  }

  /* ---------- Anchor topic stat strip ---------- */
  .stat-strip{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:14px;
    margin:0 0 34px;
  }
  @media (max-width:780px){ .stat-strip{ grid-template-columns:repeat(2, 1fr); } }
  .stat-strip .stat{
    background:linear-gradient(160deg, rgba(205,162,77,0.10), rgba(205,162,77,0.02));
    border:1px solid var(--line-soft);
    border-radius:14px;
    padding:16px 14px;
    text-align:center;
  }
  .stat-strip .stat .num{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:clamp(20px, 3vw, 28px);
    color:var(--gold-bright);
    line-height:1.1;
  }
  .stat-strip .stat .lbl{
    font-size:11px;
    color:var(--muted);
    margin-top:6px;
    letter-spacing:0.02em;
    text-transform:uppercase;
  }

  /* ---------- Region-race infographic ---------- */
  .race-chart{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:16px;
    padding:24px 22px 20px;
    margin:0 0 34px;
  }
  .race-head{
    font-size:12.5px; font-weight:700; color:var(--gold-bright);
    text-transform:uppercase; letter-spacing:0.04em; margin-bottom:18px;
  }
  .race-row{
    display:grid;
    grid-template-columns:96px 1fr 128px;
    align-items:center;
    gap:14px;
    margin-bottom:13px;
  }
  @media (max-width:600px){
    .race-row{ grid-template-columns:76px 1fr 96px; gap:8px; }
    .race-tag{ font-size:10.5px !important; }
  }
  .race-label{ font-size:13px; color:var(--ink); font-weight:600; }
  .race-track{
    height:9px; border-radius:6px;
    background:rgba(255,255,255,0.06);
    overflow:hidden;
  }
  .race-fill{
    height:100%; width:0%;
    border-radius:6px;
    background:linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
    transition:width 1.1s cubic-bezier(.2,.8,.25,1);
  }
  .race-tag{ font-size:11.5px; color:var(--muted); text-align:right; }

  .anchor-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:11.5px;
    font-weight:800;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:#14100a;
    background:linear-gradient(90deg, var(--gold-bright), var(--gold));
    padding:7px 14px;
    border-radius:20px;
  }

  /* ---------- Region cards (anchor topic) ---------- */
  .region-card{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    align-items:center;
    margin:56px 0;
  }
  .region-card.flip{ direction:rtl; }
  .region-card.flip > *{ direction:ltr; }
  @media (max-width:820px){
    .region-card, .region-card.flip{ grid-template-columns:1fr; direction:ltr; }
  }
  .region-card .region-media{
    margin-bottom:0;
    aspect-ratio:1/1;
  }
  .region-card .region-media img{ width:100%; height:100%; object-fit:cover; }
  .region-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .region-card h4{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:500;
    font-size:23px;
    color:var(--gold-bright);
    margin:0 0 10px;
  }
  .region-card p{ font-size:15px; color:#d6d3c9; margin:0 0 14px; }
  .chip-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .chip-row .chip{
    font-size:11.5px;
    font-weight:700;
    color:var(--gold-bright);
    border:1px solid var(--line-soft);
    background:rgba(205,162,77,0.08);
    padding:6px 12px;
    border-radius:999px;
    white-space:nowrap;
  }

  /* ---------- Region share button ---------- */
  .region-share{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:11.5px;
    font-weight:700;
    color:var(--muted);
    background:transparent;
    border:1px solid var(--line);
    padding:6px 12px;
    border-radius:999px;
    cursor:pointer;
    white-space:nowrap;
    margin-top:12px;
    transition:color .15s ease, border-color .15s ease;
  }
  .region-share:hover{ color:var(--gold-bright); border-color:var(--line-soft); }
  .region-share.copied{ color:var(--gold-bright); border-color:var(--gold); }

  /* ---------- Region chevron (mobile collapse toggle) ---------- */
  .region-chevron{
    display:none;
    flex:none;
    font-size:15px;
    color:var(--muted);
    transition:transform .3s ease;
    margin-top:-6px;
  }

  /* ---------- Mobile-only collapsible region cards ---------- */
  @media (max-width:820px){
    .region-card .region-head{ cursor:pointer; }
    .region-chevron{ display:inline-block; }
    .region-card.open .region-chevron{ transform:rotate(180deg); }
    .region-card .region-collapse{
      max-height:0;
      overflow:hidden;
      transition:max-height .38s ease;
    }
    .region-card.open .region-collapse{
      max-height:600px;
    }
    .region-card .region-collapse-inner{ padding-top:2px; }
  }

  /* ---------- At-a-glance comparison infographic ---------- */
  .glance-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:12px;
    margin:20px 0 44px;
  }
  @media (max-width:900px){ .glance-grid{ grid-template-columns:repeat(3, 1fr); } }
  @media (max-width:560px){ .glance-grid{ grid-template-columns:repeat(2, 1fr); } }
  .glance-grid .glance-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:16px 12px;
    text-align:center;
  }
  .glance-grid .glance-card .icon{ font-size:26px; margin-bottom:8px; }
  .glance-grid .glance-card .region-name{
    font-size:12.5px; font-weight:800; color:#fff; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.03em;
  }
  .glance-grid .glance-card .region-lead{
    font-size:11.5px; color:var(--gold-bright); font-weight:700;
  }
  .glance-grid .glance-card .region-sub{
    font-size:10.5px; color:var(--muted-2); margin-top:4px;
  }

  .pull-quote{
    border-left:3px solid var(--gold);
    padding:4px 0 4px 22px;
    margin:36px 0;
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:21px;
    line-height:1.4;
    color:var(--ink);
    max-width:56ch;
  }

  .divider-line{
    border:none;
    border-top:1px solid var(--line);
    margin:40px 0;
  }

  /* ---------- Archive grid ---------- */
  .story-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
  }
  @media (max-width:900px){ .story-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:560px){ .story-grid{ grid-template-columns:1fr; } }

  .story-card{
    text-align:left;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    cursor:pointer;
    padding:0;
    width:100%;
    color:inherit;
    display:flex;
    flex-direction:column;
    transition:border-color .15s ease, transform .15s ease;
  }
  .story-card:hover{ border-color:var(--gold-dim); transform:translateY(-2px); }
  .story-card .thumb-wrap{ aspect-ratio:16/10; overflow:hidden; }
  .story-card img{ width:100%; height:100%; object-fit:cover; }
  .story-card .card-body{ padding:16px 18px 20px; }
  .story-card .row-badge{
    font-size:11px; font-weight:700; color:var(--gold-bright); margin:0 0 8px;
  }
  .story-card h3{
    font-weight:500; font-size:16.5px; line-height:1.32; color:#fff; margin:0 0 8px;
  }
  .story-card .teaser{
    font-size:12.5px; line-height:18px; color:var(--muted);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    margin:0;
  }
  .story-card .meta{ font-size:11px; color:var(--muted-2); margin-top:10px; }

  /* ---------- Video collection ---------- */
  .video-grid{
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
    grid-template-rows:auto auto;
    gap:22px;
  }
  .video-card--feature{ grid-row:1 / span 2; display:flex; flex-direction:column; }
  .video-card--feature .video-body{ flex:1; padding:22px 26px 28px; }
  @media (max-width:900px){
    .video-grid{ grid-template-columns:1fr; grid-template-rows:none; }
    .video-card--feature{ grid-row:auto; }
  }
  .video-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .video-card:hover{
    border-color:var(--gold-dim);
    transform:translateY(-3px);
    box-shadow:0 16px 40px -20px rgba(205,162,77,0.4);
  }
  .video-card .video-embed{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    background:#000;
    cursor:pointer;
    overflow:hidden;
  }
  /* fallback for older mobile browsers/webviews without aspect-ratio support,
     so the box never collapses to 0 height */
  @supports not (aspect-ratio: 16 / 9){
    .video-card .video-embed{ height:0; padding-bottom:56.25%; }
  }
  .video-card .video-embed iframe,
  .video-card .video-embed .video-thumb{
    position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover;
  }
  /* soft dark gradient at the bottom of each thumbnail; sits under the iframe once a video loads */
  .video-card .video-embed::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(to top, rgba(10,10,12,0.55) 0%, rgba(10,10,12,0) 45%);
  }
  .video-card .video-embed iframe{ z-index:2; }
  .video-card .video-play{
    position:absolute; z-index:2;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:64px; height:64px;
    border-radius:50%;
    border:2px solid var(--gold-bright);
    background:rgba(205,162,77,0.28);
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    color:#fff;
    font-size:20px;
    display:flex; align-items:center; justify-content:center;
    padding-left:4px;
    cursor:pointer;
    box-shadow:0 0 0 6px rgba(205,162,77,0.14), 0 6px 24px rgba(0,0,0,0.5), 0 0 28px rgba(205,162,77,0.35);
    transition:background .15s ease, transform .15s ease, box-shadow .15s ease, color .15s ease;
  }
  .video-card--feature .video-play{ width:84px; height:84px; font-size:26px; padding-left:5px; }
  .video-card .video-embed:hover .video-play{
    background:var(--gold); color:#14100a; transform:translate(-50%,-50%) scale(1.08);
    box-shadow:0 0 0 8px rgba(205,162,77,0.2), 0 8px 28px rgba(0,0,0,0.55), 0 0 36px rgba(205,162,77,0.55);
  }
  .video-card .video-body{ padding:16px 18px 20px; }

  /* ===== Who's Carl ===== */
  .who-carl{
    position:relative;
    overflow:hidden;
    margin-top:34px;
    padding:40px 44px;
    border-radius:22px;
    display:flex;
    align-items:center;
    gap:30px;
    background:
      radial-gradient(circle at 12% 15%, rgba(212,167,44,0.16), transparent 55%),
      radial-gradient(circle at 90% 90%, rgba(212,167,44,0.10), transparent 60%),
      var(--card);
    border:1px solid var(--line-soft);
    box-shadow:0 20px 50px -24px rgba(212,167,44,0.35);
  }
  .who-carl-photo{
    flex:0 0 auto;
    width:84px; height:84px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid var(--gold);
    box-shadow:0 0 0 5px rgba(212,167,44,0.14);
  }
  .who-carl-copy{ position:relative; z-index:1; }
  .who-carl .eyebrow{
    font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--gold-bright); margin:0 0 10px;
  }
  .who-carl-text{
    font-size:15.5px; line-height:1.65; color:#d9d6cd; margin:0; max-width:58ch;
  }
  @media (max-width:720px){
    .who-carl{ flex-direction:column; text-align:center; padding:32px 26px; }
    .who-carl-text{ max-width:none; }
  }

  /* ===== Instagram follow CTA ===== */
  .insta-cta{
    position:relative;
    margin-top:34px;
    padding:46px 40px;
    border-radius:22px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    background:
      radial-gradient(circle at 15% 20%, rgba(247,119,55,0.35), transparent 55%),
      radial-gradient(circle at 85% 15%, rgba(220,39,119,0.35), transparent 55%),
      radial-gradient(circle at 50% 100%, rgba(131,58,180,0.4), transparent 60%),
      linear-gradient(135deg, #1a1420 0%, #241827 100%);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 20px 50px -20px rgba(220,39,119,0.35);
  }
  .insta-cta::before{
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(45deg, #feda75 0%, #fa7e1e 18%, #d62976 40%, #962fbf 62%, #4f5bd5 85%);
    opacity:.10;
    mix-blend-mode:screen;
    pointer-events:none;
  }
  .insta-cta-left{ position:relative; z-index:1; display:flex; align-items:center; gap:22px; }
  .insta-icon-badge{
    flex:0 0 auto;
    width:66px; height:66px;
    border-radius:20px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
    box-shadow:0 10px 26px -8px rgba(214,41,118,0.65);
  }
  .insta-icon-badge svg{ width:34px; height:34px; }
  .insta-cta-text .eyebrow{
    font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:#f9b6d0; margin-bottom:6px;
  }
  .insta-cta-text h3{
    font-family:'Fraunces', serif; font-weight:500; font-style:italic;
    font-size:26px; color:#fff; margin:0 0 8px; line-height:1.25;
  }
  .insta-cta-text p{ font-size:14.5px; color:#d9cfe0; max-width:440px; line-height:1.55; margin:0; }
  .insta-follow-btn{
    position:relative; z-index:1;
    flex:0 0 auto;
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 30px;
    border-radius:999px;
    background:linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
    color:#fff;
    font-weight:700;
    font-size:15px;
    text-decoration:none;
    box-shadow:0 12px 28px -8px rgba(214,41,118,0.55);
    transition:transform .18s ease, box-shadow .18s ease;
    white-space:nowrap;
  }
  .insta-follow-btn:hover{
    transform:translateY(-2px) scale(1.03);
    box-shadow:0 16px 34px -8px rgba(214,41,118,0.75);
  }
  .insta-follow-btn svg{ width:18px; height:18px; }
  @media (max-width:720px){
    .insta-cta{ flex-direction:column; text-align:center; padding:34px 26px; }
    .insta-cta-left{ flex-direction:column; }
    .insta-cta-text p{ max-width:none; }
  }
  .video-card .row-badge{
    font-size:11px; font-weight:700; color:var(--gold-bright); margin:0 0 8px;
  }
  .video-card h3{
    font-weight:500; font-size:16px; line-height:1.32; color:#fff; margin:0;
    font-family:'Fraunces', serif;
  }
  .video-card .video-desc{
    margin:8px 0 0; font-size:12.5px; line-height:1.5; color:var(--muted);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .video-card--feature h3{ font-size:24px; line-height:1.25; }
  .video-card--feature .row-badge{ font-size:12px; margin-bottom:10px; }
  .video-card--feature .video-desc{ font-size:15px; line-height:1.55; margin-top:12px; -webkit-line-clamp:unset; display:block; overflow:visible; }
  @media (max-width:900px){ .video-card--feature h3{ font-size:20px; } .video-card--feature .video-body{ padding:18px 18px 22px; } }

  /* ---------- Category filter tiles ---------- */
  .filter-row{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin:0 -22px 30px;
    padding:2px 22px 10px;
  }
  .filter-row::-webkit-scrollbar{ display:none; }
  .filter-chip{
    scroll-snap-align:start;
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    width:138px;
    padding:16px 15px 14px;
    border-radius:16px;
    border:1px solid var(--line);
    background:var(--panel-2);
    cursor:pointer;
    text-align:left;
    transition:transform .16s ease, border-color .16s ease, background .16s ease;
  }
  .filter-chip .tile-icon{ font-size:22px; line-height:1; }
  .filter-chip .tile-label{ font-size:13px; font-weight:700; color:var(--ink); line-height:1.28; }
  .filter-chip:active{ transform:scale(0.96); }
  .filter-chip.active{
    border-color:var(--tile-accent);
    background:linear-gradient(160deg, var(--tile-accent-soft), var(--panel-2) 70%);
    transform:translateY(-3px);
    box-shadow:0 14px 30px -18px var(--tile-accent);
  }
  @media (min-width:900px){
    .filter-row{ overflow-x:visible; flex-wrap:wrap; margin:0 0 30px; padding:2px 0 0; }
  }

  /* ---------- Weekly Scoop tabs (2 per row, never scrolls) ---------- */
  .scoop-tabs{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
    margin:0 0 16px;
  }
  .scoop-tab{
    padding:11px 8px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--panel-2);
    color:var(--muted);
    font-size:13px;
    font-weight:700;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease, color .15s ease;
  }
  .scoop-tab.active{
    border-color:var(--gold);
    background:linear-gradient(160deg, rgba(205,162,77,0.16), var(--panel-2) 70%);
    color:var(--ink);
  }

  /* ---------- Subscribe ---------- */
  .subscribe{ padding:0; border-bottom:none; }
  .subscribe .panel{
    background:linear-gradient(160deg, var(--panel-2), var(--panel));
    border:1px solid var(--line);
    border-radius:22px;
    padding:44px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
  }
  @media (max-width:780px){
    .subscribe .panel{ grid-template-columns:1fr; padding:30px 24px; border-radius:18px; }
  }
  .avatar-row{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
  .avatar-row img{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--gold-dim); }
  .avatar-row .name{ font-weight:700; font-size:14.5px; }
  .avatar-row .role{ font-size:12.5px; color:var(--muted); }
  .subscribe h2{
    font-weight:500; font-style:italic; font-size:28px; margin:0 0 12px;
  }
  .subscribe .panel-copy p{ font-size:14.5px; color:var(--muted); margin:0; max-width:40ch; }

  .form-row{ margin-bottom:14px; }
  .form-row label{ display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px; }
  .input{
    width:100%;
    background:var(--bg);
    border:1px solid var(--line);
    color:var(--ink);
    border-radius:10px;
    padding:13px 14px;
    font-size:14.5px;
  }
  .input:focus{ border-color:var(--gold); outline:none; }
  .input--hidden{ display:none; }
  #sib-form-panel button[type="submit"]{
    width:100%;
    background:var(--gold);
    color:#14100a;
    font-weight:700;
    font-size:14.5px;
    padding:14px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    margin-top:4px;
  }
  #sib-form-panel button[type="submit"]:hover{ background:var(--gold-bright); }
  .fine-print{ font-size:11.5px; color:var(--muted-2); margin:12px 0 0; }
  .sib-form-message-panel{ display:none; font-size:13px; padding:12px 14px; border-radius:10px; margin-bottom:14px; }
  .sib-form-message-panel.sib-form-message-panel--active{ display:block; }
  #error-message{ background:rgba(200,70,70,0.12); color:#e08a8a; }
  #success-message{ background:rgba(80,180,120,0.12); color:#8fd6ab; }

  /* ---------- Footer ---------- */
  footer{ padding:28px 0 90px; }
  footer .wrap{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
    font-size:13px; color:var(--muted);
  }
  footer a:hover{ color:var(--gold-bright); }

  /* ---------- Slide-in reader drawer ---------- */
  .scrim{
    position:fixed; inset:0;
    background:rgba(4,7,18,0.72);
    opacity:0; pointer-events:none;
    transition:opacity .3s ease;
    z-index:50;
  }
  .scrim.open{ opacity:1; pointer-events:auto; }

  .drawer{
    position:fixed; top:0; right:0; height:100%;
    width:min(640px, 100%);
    background:
      radial-gradient(120% 46% at 100% 0%, rgba(205,162,77,0.20), transparent 60%),
      radial-gradient(90% 50% at 0% 100%, rgba(12,20,48,0.95), transparent 65%),
      var(--bg);
    z-index:51;
    transform:translateX(100%);
    transition:transform .38s cubic-bezier(.2,.8,.25,1);
    overflow-y:auto;
    box-shadow:-20px 0 60px rgba(0,0,0,0.5);
  }
  .drawer::before{
    content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
    background:linear-gradient(90deg, transparent, var(--gold-bright), var(--gold), var(--gold-bright), transparent);
  }
  .drawer.open{ transform:translateX(0); }
  .drawer-close{
    position:sticky; top:0; z-index:5;
    display:flex; justify-content:flex-end;
    padding:16px 16px 0;
    background:linear-gradient(rgba(10,10,12,0.85) 55%, transparent);
    backdrop-filter:blur(6px);
  }
  .drawer-close button{
    width:38px; height:38px; border-radius:19px;
    border:1px solid var(--gold-dim);
    background:rgba(212,167,44,0.14);
    color:var(--gold-bright);
    font-size:18px; cursor:pointer;
    box-shadow:0 0 0 4px rgba(212,167,44,0.06);
    transition:background .15s ease, transform .15s ease;
  }
  .drawer-close button:hover{ background:rgba(212,167,44,0.26); transform:scale(1.05); }
  .drawer-hero-wrap{ position:relative; }
  .drawer-hero{ width:100%; aspect-ratio:16/9; height:auto; max-height:340px; object-fit:cover; display:block; margin-top:-4px; }
  .drawer-hero-scrim{
    position:absolute; left:0; right:0; bottom:0; height:65%; pointer-events:none;
    background:linear-gradient(to top, rgba(10,10,12,0.96), rgba(10,10,12,0.15) 70%, transparent);
  }
  .drawer-hero-badge{ position:absolute; left:22px; bottom:18px; box-shadow:0 8px 24px rgba(0,0,0,0.5); }
  .drawer-body{ padding:26px 32px 60px; position:relative; }
  .drawer-body h2{
    font-weight:500; font-style:italic; font-size:27px; line-height:1.26; color:#fff;
    margin:16px 0 6px; text-shadow:0 1px 20px rgba(205,162,77,0.12);
  }
  .drawer-meta{ font-size:12px; color:var(--muted-2); letter-spacing:0.02em; }
  .drawer-text p{ font-size:15.5px; line-height:1.75; color:#dbe0f0; margin:18px 0 0; }
  .drawer-text ul{ margin:18px 0 0; padding-left:20px; color:#dbe0f0; font-size:14.5px; line-height:1.7; }
  .drawer-text li{ margin-bottom:10px; }
  .drawer-quote{
    margin:26px 0; padding:18px 22px; border-radius:12px;
    background:linear-gradient(120deg, rgba(212,167,44,0.12), rgba(212,167,44,0.04));
    border:1px solid var(--gold-dim); border-left:3px solid var(--gold);
    box-shadow:0 12px 30px -14px rgba(205,162,77,0.35);
  }
  .drawer-quote .eyebrow{ font-size:11px; font-weight:700; color:var(--gold-bright); margin-bottom:6px; letter-spacing:0.03em; text-transform:uppercase; }
  .drawer-quote .quote{ font-family:'Fraunces', serif; font-style:italic; font-size:17px; color:#fff; }
  body.lock{ overflow:hidden; }

  /* ===== Live news ticker ===== */
  .news-ticker{
    background:#0d0b08;
    border-bottom:1px solid var(--gold-dim);
    overflow:hidden;
    position:relative;
    height:34px;
    display:flex;
    align-items:center;
  }
  .news-ticker .ticker-label{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:6px;
    background:var(--gold);
    color:#171208;
    font-weight:700;
    font-size:11px;
    letter-spacing:.04em;
    text-transform:uppercase;
    padding:0 14px;
    height:100%;
  }
  .news-ticker .ticker-label .dot{
    width:6px; height:6px; border-radius:50%;
    background:#c0392b;
    animation:pulse-dot 1.6s ease-in-out infinite;
  }
  @keyframes pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
  .news-ticker .ticker-track-wrap{
    flex:1 1 auto;
    overflow:hidden;
    height:100%;
    position:relative;
  }
  .news-ticker .ticker-track{
    display:flex;
    align-items:center;
    gap:44px;
    position:absolute;
    white-space:nowrap;
    will-change:transform;
    animation:ticker-scroll 40s linear infinite;
    padding-left:100%;
  }
  /* Pause-on-hover only for devices with a real mouse. On touchscreens,
     :hover gets "stuck" after a tap (there's no mouse-leave event), which
     freezes the ticker permanently — this scoping fixes that. */
  @media (hover:hover) and (pointer:fine){
    .news-ticker .ticker-track:hover{ animation-play-state:paused; }
  }
  @keyframes ticker-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-100%); }
  }
  .news-ticker a{
    color:var(--ink);
    font-size:13px;
    text-decoration:none;
    opacity:.9;
  }
  .news-ticker a:hover{ color:var(--gold-bright); opacity:1; text-decoration:underline; }
  .news-ticker .ticker-src{
    color:var(--gold);
    font-weight:700;
    font-size:10.5px;
    text-transform:uppercase;
    margin-right:7px;
  }
  @media (max-width:600px){
    .news-ticker .ticker-label span.label-text{ display:none; }
  }


/* ===== v2: motion controls + desktop layer ===== */
.ticker-toggle{ font:inherit; cursor:pointer; color:var(--ink); flex:0 0 auto; height:100%; padding:0 14px; background:#0d0b08; border:0; border-left:1px solid var(--gold-dim); font-size:12px; }
.ticker-toggle:hover{ color:var(--gold-bright); }
.news-ticker.paused .ticker-track{ animation-play-state:paused; }
.hero-media{ position:relative; }
#weekly-scoop{ content-visibility:visible; }
.scoop-layout{ display:block; }

@media (min-width:900px){
  .story-copy{ max-width:none; }
  .story-copy > p, .story-copy .pull-quote{ max-width:72ch; }
  .region-card{ grid-template-columns:5fr 6fr; gap:56px; }
  .region-block{ display:grid; grid-template-columns:5fr 6fr; grid-template-rows:1fr auto auto auto 1fr; gap:0 56px; }
  .region-block .region-media{ grid-column:1; grid-row:1 / span 5; margin-bottom:0; }
  .region-block > h4{ grid-column:2; grid-row:2; }
  .region-block > p{ grid-column:2; grid-row:3; }
  .region-block > .chip-row{ grid-column:2; grid-row:4; }
}
@media (min-width:1000px){
  .wrap{ max-width:1240px; padding:0 32px; }
  .news-ticker{ height:38px; }
  .news-ticker a{ font-size:14px; }
  .news-ticker .ticker-label{ padding:0 20px; }
  /* Desktop hero: the banner runs full-bleed, edge to edge across the top, then the welcome text sits
     on the left and the language card on the right. */
  .hero{ display:block; background:#0d0b08; }
  .hero-media{ display:block; }
  .hero-banner{
    width:100%;
    max-width:none; /* edge to edge — no black bars on the sides */
    max-height:none;
    object-fit:cover; /* box already matches the video's 16:9, so nothing is cropped */
  }
  .hero-copy{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    grid-template-rows:auto auto auto 1fr; /* spare height falls to the last row, not between the text lines */
    column-gap:56px; row-gap:0; align-items:start;
    max-width:1240px; margin:0 auto; padding:36px 32px 48px;
  }
  .hero-copy > h1{ grid-column:1; grid-row:1; font-size:clamp(42px,3.6vw,62px); max-width:none; }
  .hero-copy > .lede{ grid-column:1; grid-row:2; }
  .hero-copy > .hero-cue{ grid-column:1; grid-row:3; }
  .hero-copy > .hero-lang-quicklinks{ grid-column:2; grid-row:1 / span 4; margin-top:0; max-width:none; }
}
@media (min-width:1600px){ .wrap{ max-width:1400px; } }

@media (min-width:1000px){
  #weekly-scoop .section-head{ justify-content:center; text-align:center; }
  .scoop-layout{ max-width:800px; margin:0 auto; }
}

/* ---------- Language switcher (custom UI over Google's translate engine) ----------
   Google's real <select> is kept in the DOM and functional (it has to
   receive the "change" event — that's what triggers the translation)
   but pushed off-screen instead of shown. The only visible control is
   the language-chip panel in the hero, styled entirely as our own
   markup. We still suppress the extra chrome Google injects elsewhere
   in the page (a top "banner" iframe, tooltips, yellow highlight boxes
   on translated text). */
.goog-hidden{ position:absolute; top:-9999px; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Language panel under the hero buttons — each chip's own text is
   written in that language, not English, so it doubles as a preview
   of what the visitor is about to get. Styled as a standalone card so
   it reads as a feature, not an afterthought. */
.hero-lang-quicklinks{
  margin-top:26px;
  padding:20px 22px;
  background:linear-gradient(135deg, rgba(212,167,44,0.14), rgba(255,255,255,0.04));
  border:1px solid var(--line-soft);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
  backdrop-filter:blur(2px);
  max-width:640px;
}
.hero-lang-label{
  display:flex; align-items:center; gap:8px;
  font-family:'Bebas Neue', 'Oswald', 'Arial Narrow', Impact, sans-serif;
  font-size:22px; font-weight:400; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--gold-bright); margin-bottom:14px;
}
.hero-lang-icon{ font-size:19px; line-height:1; }
.hero-lang-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.lang-chip{
  font-family:inherit; font-size:13.5px; font-weight:600;
  color:var(--ink);
  background:rgba(255,255,255,0.08);
  border:1px solid var(--line-soft);
  border-radius:999px;
  padding:10px 18px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.lang-chip:hover{
  border-color:var(--gold);
  background:rgba(212,167,44,0.18);
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(212,167,44,0.2);
  color:var(--gold-bright);
}
.lang-chip:active{ transform:translateY(0); }
.lang-chip-en{
  background:rgba(212,167,44,0.22);
  border-color:var(--gold);
  font-weight:700;
}
.lang-chip-en:hover{ background:rgba(212,167,44,0.3); }

@media (max-width:600px){
  .hero-lang-quicklinks{ padding:16px 16px; max-width:none; }
  .lang-chip{ padding:9px 14px; font-size:13px; }
}

/* Suppress Google's own on-page chrome (banner bar, tooltips, translated-
   text highlight boxes) since we're providing the UI ourselves — nothing
   of Google's should ever be visible; the translation should just happen. */
body > .skiptranslate.goog-te-gadget{ display:none !important; }
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame{ display:none !important; visibility:hidden !important; height:0 !important; }
.goog-te-gadget-icon{ display:none !important; }
.goog-tooltip, .goog-tooltip:hover{ display:none !important; }
.goog-text-highlight{ background:none !important; box-shadow:none !important; }
#goog-gt-tt, .goog-te-balloon-frame{ display:none !important; }
.goog-te-spinner-pos{ display:none !important; }
body{ top:0 !important; position:static !important; }
html{ top:0 !important; }
.skiptranslate iframe{ visibility:hidden !important; height:0 !important; }

  /* ---------- Everyday Prices + Then vs. Now ---------- */
  .price-unit{ font-size:10.5px; color:var(--muted); margin-top:2px; }
  .price-chg{ font-size:11px; font-weight:700; margin-top:8px; }
  .price-chg.up{ color:#e58a7b; }
  .price-chg.down{ color:#7bc79a; }
  .price-chg.flat{ color:var(--muted-2); }
  .tvn-panel{
    display:flex; flex-wrap:wrap; gap:14px; margin:18px 0 0;
    background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px;
  }
  .tvn-field{ flex:1; min-width:140px; }
  .tvn-field label{ display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px; }
  .tvn-result{
    margin:16px 0 22px; padding:20px; text-align:center;
    background:var(--panel-2); border:1px solid var(--line); border-radius:14px; color:var(--muted);
  }
  .tvn-big{ font-family:'Fraunces', Georgia, serif; font-size:20px; line-height:1.35; color:var(--ink); }
  .tvn-big span{ color:var(--gold-bright); font-weight:600; font-size:26px; white-space:nowrap; }
  .tvn-sub{ font-size:12.5px; color:var(--muted); margin-top:8px; }
  .tvn-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
  .tvn-grid .rate-card{ padding:16px 10px; }
  .tvn-pair{ display:flex; align-items:baseline; justify-content:center; gap:7px; margin-top:8px; font-family:'Fraunces', Georgia, serif; }
  .tvn-pair span{ font-size:14px; color:var(--muted); }
  .tvn-pair em{ font-style:normal; font-size:12px; color:var(--muted-2); }
  .tvn-pair strong{ font-size:19px; font-weight:600; color:var(--gold-bright); }


/* ---------- Welcome menu: every section as a tappable card ---------- */
.menu-section{
  padding:28px 0 48px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(12,20,48,0.6), rgba(10,10,12,0) 75%);
}
.menu-head{ text-align:center; margin-bottom:8px; }
.menu-head h2{
  font-family:'Bebas Neue', 'Oswald', 'Arial Narrow', Impact, sans-serif;
  font-weight:400; font-size:clamp(34px, 6vw, 48px);
  text-transform:uppercase; letter-spacing:0.04em; margin:0 0 6px;
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.menu-head p{ margin:0; color:var(--muted); font-size:14.5px; }
.menu-group{ margin-top:18px; }
.menu-group-head{
  display:flex; align-items:baseline; flex-wrap:wrap;
  column-gap:12px; row-gap:2px; margin:0 0 12px;
}
.menu-group-title{
  font-family:'Bebas Neue', 'Oswald', 'Arial Narrow', Impact, sans-serif;
  font-size:25px; font-weight:400; margin:0;
  text-transform:uppercase; letter-spacing:0.05em;
  color:var(--gold-bright);
}
.menu-group-sub{ font-size:13px; color:var(--muted-2); }
.menu-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
/* Three cards per group: on phones the third spans the full row so
   there is never a lonely half-width card. */
.menu-item.is-full{ grid-column:1 / -1; }
.menu-card{
  position:relative;
  display:flex; flex-direction:column; gap:6px;
  min-height:128px;
  padding:16px 34px 14px 16px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.menu-card:hover{
  border-color:var(--gold);
  background:var(--panel-2);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,0.35), 0 0 0 1px var(--gold-dim);
}
.menu-card:active{ transform:translateY(0); }
.menu-card-icon{ font-size:26px; line-height:1; }
.menu-card-title{
  font-family:'Bebas Neue', 'Oswald', 'Arial Narrow', Impact, sans-serif;
  font-size:23px; font-weight:400; line-height:1.05; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink);
}
.menu-card-hook{ font-size:13px; line-height:1.42; color:var(--muted); }
.menu-card-go{
  position:absolute; top:14px; right:14px;
  font-size:15px; line-height:1; color:var(--gold);
  transition:transform .15s ease;
}
.menu-card:hover .menu-card-go{ transform:translateY(3px); color:var(--gold-bright); }
@media (min-width:700px){
  .menu-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
  .menu-item.is-full{ grid-column:auto; }
  .menu-card{ min-height:118px; padding:18px 38px 16px 18px; }
  .menu-section{ padding:52px 0 60px; }
  .menu-group{ margin-top:26px; }
}

/* Numbered step badges: the "conveyor belt" (1 pick a language, 2 pick a card) */
.step-badge{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  width:26px; height:26px; border-radius:50%;
  background:var(--gold); color:#14100a;
  font-family:'Inter', sans-serif; font-size:14px; font-weight:800; line-height:1;
  letter-spacing:0; text-transform:none;
}
.menu-head h2 .step-badge{ width:32px; height:32px; font-size:17px; }


/* ---------- Hero cue: point down on mobile, toward the language card on desktop ---------- */
.hero-cue .cue-right{ display:none; }
@media (min-width:1000px){
  .hero-cue .cue-down{ display:none; }
  .hero-cue .cue-right{ display:inline; }
}

/* ---------- Preview-first sections (Cost of Money, Then vs. Now, Money Supply) ---------- */
.is-preview .rate-card:nth-child(n+3){ display:none; }
#m2Grid.is-preview .rate-card:nth-child(n+2){ display:none; }

.more-body[hidden]{ display:none; }
.more-body .rates-spread-banner{ margin-top:12px; margin-bottom:12px; }
#then-vs-now .tvn-result{ margin-bottom:0; }

/* Big, obvious "tap to see more" buttons */
.more-toggle{
  margin-top:16px; min-height:58px; padding:16px 18px; gap:12px;
  font-size:16px; font-weight:800; color:var(--gold-bright);
  background:linear-gradient(180deg, rgba(212,167,44,0.20), rgba(212,167,44,0.09));
  border:1.5px solid rgba(212,167,44,0.65); border-radius:14px;
  box-shadow:0 2px 14px rgba(212,167,44,0.14);
  -webkit-tap-highlight-color:transparent;
}
.more-toggle:hover, .more-toggle:active{ background:linear-gradient(180deg, rgba(212,167,44,0.30), rgba(212,167,44,0.15)); border-color:var(--gold-bright); }
.more-toggle .fx-guide-toggle-icon{ font-size:22px; }
.more-toggle .fx-guide-toggle-text{ line-height:1.25; }
.more-toggle .fx-guide-toggle-chevron{
  flex:none; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--gold-bright); color:#14110a; font-size:19px; font-weight:800;
}
.more-toggle[aria-expanded="true"]{ background:var(--panel-2); border-color:rgba(212,167,44,0.4); box-shadow:none; color:var(--ink); font-weight:700; }

/* Open/closed label + arrow swap is pure CSS (translation-safe) */
.more-toggle .on-open{ display:none; }
.more-toggle[aria-expanded="true"] .on-open{ display:inline; }
.more-toggle[aria-expanded="true"] .on-closed{ display:none; }

/* ================= Economics sections: shared "econ" look =================
   Each section sets an accent color; everything else is shared. */
.econ{
  --accent:#efc978; --accent-rgb:239,201,120;
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 340px at 8% -10%, rgba(var(--accent-rgb),0.13), transparent 70%),
    linear-gradient(180deg, rgba(var(--accent-rgb),0.04), transparent 60%);
}
.econ-amber{ --accent:#f5b84b; --accent-rgb:245,184,75; }
.econ-teal{ --accent:#4fd1c5; --accent-rgb:79,209,197; }
.econ-blue{ --accent:#6aa9ff; --accent-rgb:106,169,255; }
.econ-green{ --accent:#5fd08a; --accent-rgb:95,208,138; }

.econ-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.econ-badge{
  width:56px; height:56px; flex:none; display:grid; place-items:center; font-size:28px;
  border-radius:16px; background:rgba(var(--accent-rgb),0.16);
  border:1.5px solid rgba(var(--accent-rgb),0.55); box-shadow:0 6px 24px rgba(var(--accent-rgb),0.18);
}
.econ-titles{ flex:1; min-width:180px; }
.econ-kicker{
  display:block; font-size:11px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent); margin-bottom:2px;
}
.econ-head h3{ margin:0; font-size:clamp(26px, 5.5vw, 36px); font-weight:700; line-height:1.1; color:var(--ink); letter-spacing:-0.01em; }
.econ-head .fx-note{ align-self:flex-start; }

.econ-hook{
  display:flex; flex-direction:column; gap:6px; margin:0 0 22px; padding:14px 18px;
  background:rgba(var(--accent-rgb),0.08); border:1px solid rgba(var(--accent-rgb),0.28);
  border-left:4px solid var(--accent); border-radius:12px;
}
.econ-hook-tag{ font-size:10.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.econ-hook p{ margin:0; font-size:16px; line-height:1.5; color:var(--ink); max-width:80ch; }
.econ-hook p strong{ color:var(--accent); font-weight:800; }

.econ-group-label{
  display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:12px; font-weight:800;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
}
.econ-group-label span{ font-size:16px; }

.econ-grid{ grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; }
.econ-card{
  text-align:left !important; padding:18px 18px 14px !important; overflow:hidden;
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.07), var(--card) 55%);
  border:1px solid rgba(var(--accent-rgb),0.22); border-top:3px solid var(--accent);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.econ-card:hover{ transform:translateY(-3px); border-color:rgba(var(--accent-rgb),0.6); box-shadow:0 10px 28px rgba(var(--accent-rgb),0.16); }
.econ-card .econ-icon{ position:absolute; top:12px; right:14px; font-size:30px; opacity:.95; }
.econ-card .rate-label{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.07em; padding-right:44px; }
.rates-grid-majors.econ-grid .econ-card .rate-value{ font-size:clamp(34px, 8vw, 42px); font-weight:700; color:var(--ink); line-height:1.05; margin-top:8px; }
.econ-card .price-unit{ font-size:12px; margin-top:4px; }

.econ-pill{
  display:inline-flex; align-items:baseline; gap:5px; margin-top:12px; padding:5px 11px; border-radius:999px;
  font-size:14px; font-weight:800; background:rgba(255,255,255,0.06); color:var(--muted-2);
}
.econ-pill span{ font-size:11px; font-weight:600; opacity:.85; }
.econ-pill.up{ color:#ff9b8a; background:rgba(229,100,80,0.16); }
.econ-pill.down{ color:#7be0a5; background:rgba(95,208,138,0.16); }

.econ-bars{ margin-top:14px; display:flex; flex-direction:column; gap:7px; }
.econ-bar-row{ display:grid; grid-template-columns:66px 1fr 52px; align-items:center; gap:8px; font-size:11px; color:var(--muted); }
.econ-bar-row em{ font-style:normal; }
.econ-bar-row b{ text-align:right; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.econ-bar{ height:8px; border-radius:99px; background:rgba(255,255,255,0.07); overflow:hidden; }
.econ-bar i{ display:block; height:100%; border-radius:99px; background:var(--muted-2); animation:econGrow .9s cubic-bezier(.2,.8,.2,1) both; transform-origin:left; }
.econ-bar i.up{ background:linear-gradient(90deg,#e58a7b,#ff9b8a); }
.econ-bar i.down{ background:linear-gradient(90deg,#4fbf86,#7be0a5); }
.econ-bar i.flat{ background:var(--accent); }
@keyframes econGrow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.econ-card .rate-asof{ margin-top:12px; }

@media (prefers-reduced-motion:reduce){ .econ-bar i{ animation:none; } .econ-card{ transition:none; } }
@media (max-width:480px){ .econ-grid{ grid-template-columns:1fr; } .econ-badge{ width:48px; height:48px; font-size:24px; } }
#pricesGridFuel.econ-grid{ grid-template-columns:minmax(0, 440px); }
@media (max-width:480px){ #pricesGridFuel.econ-grid{ grid-template-columns:1fr; } }

/* ===== econ: extra accents + header variants ===== */
.econ-violet{ --accent:#b79cff; --accent-rgb:183,156,255; }
.econ-sunset{ --accent:#ff8a70; --accent-rgb:255,138,112; }
.econ-head h2{ margin:0; font-size:clamp(24px, 5vw, 34px); font-weight:700; line-height:1.12; color:var(--ink); letter-spacing:-0.01em; }
.econ.fx-section{ padding:48px 0 32px; }
.econ.worldclock-section{ padding:48px 0 36px; }
.econ .worldclock-note{ align-self:flex-start; }

/* Then vs. Now */
#then-vs-now .tvn-result{
  background:rgba(var(--accent-rgb),0.07); border:1px solid rgba(var(--accent-rgb),0.28); text-align:left;
}
#then-vs-now .tvn-big span{ color:var(--accent); font-size:30px; }
.tvn-grid .econ-card .tvn-pair{ justify-content:flex-start; margin-top:10px; }
.tvn-grid .econ-card .tvn-pair span{ font-size:16px; text-decoration:line-through; text-decoration-color:rgba(255,255,255,0.25); }
.tvn-grid .econ-card .tvn-pair strong{ font-size:32px; color:var(--ink); font-weight:700; }
.tvn-grid .econ-card .tvn-pair em{ color:var(--accent); font-size:16px; }
#then-vs-now .tvn-panel, #cost-of-money .rates-spread-banner{ border-color:rgba(var(--accent-rgb),0.28); }
#cost-of-money .rates-spread-banner{ border-left:4px solid var(--accent); }

/* Currency cards */
.econ .fx-card{
  text-align:left; background:linear-gradient(180deg, rgba(var(--accent-rgb),0.07), var(--card) 55%);
  border:1px solid rgba(var(--accent-rgb),0.22); border-top:3px solid var(--accent);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.econ .fx-card:hover{ transform:translateY(-3px); border-color:rgba(var(--accent-rgb),0.6); box-shadow:0 10px 28px rgba(var(--accent-rgb),0.16); }
.econ .fx-card .fx-pair{ justify-content:flex-start; font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); padding-right:30px; }
.econ .fx-card .fx-flag{ font-size:22px; }
.econ .fx-card .fx-meta{ justify-content:flex-start; margin-top:10px; }
.econ .fx-card .fx-code{ font-size:11px; font-weight:700; }
.econ .fx-card .fx-delta{ font-size:12px; padding:3px 9px; }
.econ .fx-grid-majors .fx-card{ padding:18px 16px; }
.econ .fx-grid-majors .fx-card .fx-rate{ font-size:clamp(22px, 5.4vw, 30px); font-weight:700; color:var(--ink); line-height:1.1; margin-top:10px; }
.econ .fx-grid-rest .fx-card{ padding:12px 12px; }
.econ .fx-grid-rest .fx-card .fx-rate{ color:var(--ink); }

/* World clock cards */
.econ .clock-card{
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.08), var(--card) 60%);
  border:1px solid rgba(var(--accent-rgb),0.22); border-top:3px solid var(--accent); padding:16px 8px 14px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.econ .clock-card:hover{ transform:translateY(-3px); box-shadow:0 10px 28px rgba(var(--accent-rgb),0.16); }
.econ .clock-card .clock-icon{ font-size:28px; }
.econ .clock-card .clock-time{ color:var(--ink); font-weight:700; font-size:clamp(18px, 2.4vw, 23px); }
.econ .clock-card .clock-city{ margin-bottom:6px; }
.clock-status{ display:inline-block; margin-top:9px; padding:3px 9px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:0.02em; }
.clock-status.open{ color:#7be0a5; background:rgba(95,208,138,0.16); }
.clock-status.closed{ color:var(--muted-2); background:rgba(255,255,255,0.06); }
.econ .worldclock-grid{ margin-bottom:0; }
@media (prefers-reduced-motion:reduce){ .econ .fx-card, .econ .clock-card{ transition:none; } }

/* ===== polish ===== */
.econ .worldclock-grid{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:560px){ .econ .worldclock-grid{ grid-template-columns:repeat(2, 1fr); } }
.econ .fx-grid-rest{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.econ .fx-grid-rest .fx-card .fx-pair{ font-size:10.5px; letter-spacing:0.03em; padding-right:16px; align-items:flex-start; }
.econ .fx-grid-rest .fx-card .fx-flag{ font-size:20px; line-height:1; }
.econ .more-toggle{
  color:var(--accent); background:linear-gradient(180deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.07));
  border-color:rgba(var(--accent-rgb),0.6); box-shadow:0 2px 14px rgba(var(--accent-rgb),0.14);
}
.econ .more-toggle:hover, .econ .more-toggle:active{ background:linear-gradient(180deg, rgba(var(--accent-rgb),0.28), rgba(var(--accent-rgb),0.12)); border-color:var(--accent); }
.econ .more-toggle .fx-guide-toggle-chevron{ background:var(--accent); color:#10101a; }
.econ .more-toggle[aria-expanded="true"]{ background:var(--panel-2); border-color:rgba(var(--accent-rgb),0.4); box-shadow:none; color:var(--ink); }
.econ .fx-guide-tag{ background:rgba(var(--accent-rgb),0.16); color:var(--accent); }
.econ .fx-guide-toggle:not(.more-toggle):hover{ background:rgba(var(--accent-rgb),0.08); border-color:rgba(var(--accent-rgb),0.4); }
.econ .fx-guide-toggle-chevron{ color:var(--accent); }

/* ===== World clock: sunset (pink to orange) ===== */
.econ-sunset .econ-badge{ background:linear-gradient(135deg, rgba(255,126,182,0.28), rgba(255,154,92,0.28)); border-color:rgba(255,138,112,0.6); }
.econ-sunset .econ-kicker{ background:linear-gradient(90deg,#ff7eb6,#ff9a5c); -webkit-background-clip:text; background-clip:text; color:transparent; }
.econ-sunset .econ-hook{ border-left-color:transparent; border-image:linear-gradient(180deg,#ff7eb6,#ff9a5c) 1 / 0 0 0 4px; border-radius:0; }
.econ-sunset .econ-hook p strong{ color:#ffa27a; }
.econ-sunset .clock-card{ position:relative; overflow:hidden; border-top:1px solid rgba(var(--accent-rgb),0.22); padding-top:19px; }
.econ-sunset .clock-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#ff7eb6,#ff9a5c); }
.clock-status{ background:rgba(255,255,255,0.06); color:var(--muted); font-size:11px; padding:4px 10px; }
.clock-status.act-wake, .clock-status.act-breakfast{ color:#ffc27a; background:rgba(255,170,90,0.16); }
.clock-status.act-work, .clock-status.act-weekend{ color:#ff9db8; background:rgba(255,126,182,0.15); }
.clock-status.act-lunch, .clock-status.act-home, .clock-status.act-dinner{ color:#ff9a7a; background:rgba(255,138,112,0.16); }
.clock-status.act-wind{ color:#c3a8ff; background:rgba(150,120,255,0.14); }
.clock-status.act-sleep{ color:#9aa6d6; background:rgba(110,125,200,0.14); }

/* ===== Steady inputs: no layout jumps while typing/adjusting ===== */
.econ{ content-visibility:visible; contain-intrinsic-size:auto; overflow-anchor:none; }
.amount-input{ -moz-appearance:textfield; appearance:textfield; font-variant-numeric:tabular-nums; }
.amount-input::-webkit-outer-spin-button, .amount-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
#then-vs-now .tvn-result{ min-height:128px; display:flex; flex-direction:column; justify-content:center; }
#then-vs-now .tvn-big{ min-height:3.9em; display:flex; align-items:center; flex-wrap:wrap; gap:0 6px; }
#fxResult{ min-height:48px; display:flex; align-items:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.tvn-panel, .fx-converter{ overflow-anchor:none; }
@media (max-width:480px){ #then-vs-now .tvn-result{ min-height:150px; } }

/* Live answer right under the Then vs. Now inputs */
.tvn-live{
  margin-top:12px; padding:16px 18px; min-height:112px; border-radius:14px;
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.16), rgba(var(--accent-rgb),0.07));
  border:1.5px solid rgba(var(--accent-rgb),0.6); box-shadow:0 6px 24px rgba(var(--accent-rgb),0.14);
}
.tvn-live-label{ font-size:11px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); }
.tvn-live-row{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin-top:6px; font-family:'Fraunces', Georgia, serif; }
.tvn-live-from{ font-size:clamp(17px, 4.6vw, 22px); color:var(--muted); font-weight:500; word-break:break-word; }
.tvn-live-row em{ font-style:normal; color:var(--accent); font-size:22px; }
.tvn-live-row strong{ font-size:clamp(26px, 7.4vw, 38px); font-weight:700; color:var(--ink); line-height:1.1; word-break:break-word; }
.tvn-live-sub{ margin-top:6px; font-size:13px; color:var(--muted); }
@media (max-width:480px){ .tvn-live{ min-height:178px; } .tvn-live-from{ font-size:16px; } }

/* ===== World clock: "what the world is up to" box ===== */
.econ-sunset .econ-hook{ padding:16px 18px 18px; gap:12px; background:rgba(var(--accent-rgb),0.06); }
.clock-rows{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
@media (max-width:640px){ .clock-rows{ grid-template-columns:1fr; } }
.clock-row{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px; background:rgba(255,255,255,0.04); border:1px solid rgba(var(--accent-rgb),0.2); }
.clock-row-icon{ font-size:26px; line-height:1; flex:none; }
.clock-row-body{ min-width:0; }
.clock-row-label{ font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.25; }
.clock-row-cities{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.clock-row-cities span{ font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; color:#ffb394; background:rgba(255,138,112,0.16); }
.clock-row.act-sleep .clock-row-cities span, .clock-row.act-wind .clock-row-cities span{ color:#b5bff0; background:rgba(110,125,200,0.18); }
.clock-row.act-work .clock-row-cities span, .clock-row.act-weekend .clock-row-cities span{ color:#ffa6c4; background:rgba(255,126,182,0.16); }
.clock-ahead{ font-size:13.5px; color:var(--muted); }
.clock-ahead strong{ color:#ffa27a; }
.clock-ahead{ margin-top:6px; padding-top:12px; border-top:1px dashed rgba(var(--accent-rgb),0.25); }

/* ===== Desktop only: center the gas card ===== */
@media (min-width:700px){
  #pricesGridFuel.econ-grid{ justify-content:center; }
  .econ-center .econ-group-label{ justify-content:center; }
}

/* ===== Desktop only: Weekly Scoop teaser fills the width instead of a narrow card ===== */
@media (min-width:1000px){
  .scoop-teaser{ max-width:1120px; width:calc(100% - 64px); margin:40px auto 8px; }
  .scoop-teaser-window{
    display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); grid-template-rows:1fr auto;
    border-radius:20px; box-shadow:0 18px 50px rgba(0,0,0,0.4);
  }
  .scoop-teaser-thumb{ grid-column:1; grid-row:1 / span 2; aspect-ratio:auto; min-height:100%; }
  .scoop-teaser-img{ position:absolute; inset:0; }
  .scoop-teaser-body{ grid-column:2; grid-row:1; align-self:center; padding:34px 36px 8px; }
  .scoop-teaser-eyebrow{ font-size:12.5px; margin-bottom:8px; }
  .scoop-teaser-title{ font-size:clamp(24px, 2.2vw, 32px); line-height:1.2; font-weight:600; text-align:left; -webkit-line-clamp:3; }
  .scoop-teaser-list-label{ margin-top:18px; padding-top:16px; font-size:11.5px; }
  .scoop-teaser-list{ margin-top:10px; padding-top:0; }
  .scoop-teaser-list-item{ font-size:15px; line-height:1.45; margin-bottom:10px; gap:10px; color:#c9c6bd; }
  .scoop-teaser-list-item .dot{ width:7px; height:7px; margin-top:8px; }
  .scoop-teaser-cta{
    grid-column:2; grid-row:2; padding:6px 36px 30px; font-size:15px;
  }
  .scoop-teaser-cta > span:first-child{
    display:inline-block; padding:12px 20px; border-radius:999px; color:#14110a; font-weight:800;
    background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  }
  .scoop-teaser:hover .scoop-teaser-cta > span:first-child{ filter:brightness(1.08); }
  .scoop-teaser-cta .scoop-teaser-arrow{ font-size:20px; color:var(--gold-bright); }
}
@media (min-width:1000px){
  .scoop-teaser-window{ grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); }
  .scoop-teaser-thumb{ display:flex; align-items:center; background:#0d0e14; }
  .scoop-teaser-img{ position:static; inset:auto; width:100%; height:auto; max-height:100%; object-fit:contain; }
  .scoop-teaser-fallback{ position:absolute; }
  .scoop-teaser-body{ padding:30px 34px 6px; }
  .scoop-teaser-list-item{ font-size:14.5px; margin-bottom:9px; }
}

/* ===== Weekly Scoop popup: wide on desktop ===== */
@media (min-width:900px){
  .scoop-modal{ width:min(1040px, calc(100% - 48px)); height:min(92vh, 1100px); border-radius:20px; }
  .scoop-modal-chrome{ padding:14px 20px; }
  .scoop-modal-title{ font-size:15px; }
  .scoop-modal-close{ width:36px; height:36px; font-size:16px; }
}

/* ===== Weekly Scoop reader (scoop-reader.js) ===== */
.twc-reader{--bg:#0b0d14;--tx:#e8e5dc;--mu:#9aa4c4;--gd:#d4a72c;--pn:#121830;--ln:rgba(212,167,44,.28);--fs:18px;--bar-h:56px;
  position:fixed;inset:0;z-index:120;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:var(--bg);color:var(--tx);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s}
.twc-reader.open{opacity:1;visibility:visible}
.twc-reader.light{--bg:#f6f3ea;--tx:#1d2233;--mu:#5d6682;--gd:#a8780a;--pn:#fff;--ln:rgba(160,120,10,.35)}
.twc-reader *{box-sizing:border-box}
.twc-rd-bar{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:8px;padding:8px 12px;
  padding-top:calc(8px + env(safe-area-inset-top,0px));background:var(--bg);border-bottom:1px solid var(--ln)}
.twc-rd-prog{position:absolute;left:0;bottom:-1px;width:100%;height:3px;background:var(--gd);transform:scaleX(0);transform-origin:0 50%}
.twc-rd-title{flex:1;min-width:0;text-align:center;font:700 14px Inter,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.twc-rd-tools{display:flex;gap:6px}
.twc-rd-btn{min-width:40px;height:40px;padding:0 14px;border-radius:20px;border:1px solid var(--ln);background:var(--pn);color:var(--tx);
  font:600 14px Inter,system-ui,sans-serif;cursor:pointer}
.twc-rd-btn:hover{border-color:var(--gd)}
.twc-rd-wrap{max-width:1120px;margin:0 auto;padding:0 0 110px}
.twc-rd-main{padding:0 18px;min-width:0}
.twc-rd-num{flex:none;width:30px;height:30px;border-radius:50%;background:var(--gd);color:#0c1430;display:grid;place-items:center;
  font:700 12.5px Georgia,serif;letter-spacing:0}

/* header (centered) */
.twc-rd-head{padding:34px 0 6px;text-align:center}
.twc-rd-eyebrow{font:700 11.5px Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gd)}
.twc-rd-head h1{margin:10px 0 0;font:700 clamp(32px,8vw,50px)/1.08 'Fraunces',Georgia,serif;letter-spacing:-.01em}
.twc-rd-rule{width:56px;height:3px;border-radius:3px;margin:18px auto 16px;background:var(--gd)}
.twc-rd-head p{margin:0 auto;max-width:34ch;color:var(--mu);font:400 16px/1.5 Inter,system-ui,sans-serif}

/* "In this issue": premium two-per-row tiles */
.twc-rd-toc-h{font:700 11.5px Inter,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gd)}
.twc-rd-toc-hint{margin:7px 0 0;color:var(--mu);font:500 13.5px/1.4 Inter,system-ui,sans-serif}
.twc-rd-tl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.twc-rd-toc-a{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:18px;border:1px solid var(--ln);background:var(--bg);
  color:var(--tx);text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease}
.twc-reader.light .twc-rd-toc-a{box-shadow:0 8px 22px rgba(60,50,20,.14)}
.twc-rd-toc-a:last-child:nth-child(odd){grid-column:1/-1}
.twc-rd-toc-thumb{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,#1a2348,#0c1430)}
.twc-rd-toc-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.twc-rd-toc-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,12,28,.8),rgba(8,12,28,0) 62%)}
.twc-rd-toc-thumb .twc-rd-num{position:absolute;left:10px;bottom:10px;z-index:1;width:34px;height:34px;font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.twc-rd-toc-ic{position:absolute;right:10px;top:10px;z-index:1;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  background:rgba(8,12,28,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:16px}
.twc-rd-toc-x{display:flex;flex-direction:column;flex:1;padding:12px 12px 13px}
.twc-rd-toc-tag{display:block;margin-bottom:6px;font:700 10px Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--gd)}
.twc-rd-toc-t{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font:600 13.5px/1.4 Inter,system-ui,sans-serif}
.twc-rd-toc-go{margin-top:auto;padding-top:12px;font:700 10.5px Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--gd);transition:letter-spacing .3s ease}
.twc-rd-toc-a:hover{transform:translateY(-4px);border-color:var(--gd);box-shadow:0 18px 40px rgba(0,0,0,.42),0 0 0 1px rgba(212,167,44,.45)}
.twc-rd-toc-a:hover img{transform:scale(1.07)}
.twc-rd-toc-a:hover .twc-rd-toc-go{letter-spacing:.17em}
.twc-rd-toc-a:active{transform:scale(.98)}
.twc-rd-toc-a.on{border-color:var(--gd);box-shadow:0 0 0 1px var(--gd),0 14px 36px rgba(212,167,44,.24)}
.twc-rd-toc-a.on .twc-rd-num{box-shadow:0 0 0 4px rgba(212,167,44,.3),0 0 16px rgba(212,167,44,.7)}

.twc-rd-inline{margin:26px 0 6px;padding:24px 14px 16px;text-align:center;border:1px solid var(--ln);border-radius:26px;
  background:linear-gradient(165deg,rgba(212,167,44,.1),rgba(212,167,44,0) 45%),var(--pn)}
.twc-rd-inline .twc-rd-toc-a{text-align:left}
.twc-rd-fab{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:7;height:46px;padding:0 20px;border-radius:23px;
  border:1px solid var(--gd);background:var(--gd);color:#0c1430;font:700 14px Inter,system-ui,sans-serif;cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.45);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.twc-rd-fab.show{opacity:1;transform:none;pointer-events:auto}
.twc-rd-scrim{position:fixed;inset:0;z-index:8;background:rgba(0,0,0,.62);opacity:0;pointer-events:none;transition:opacity .25s ease}
.twc-rd-scrim.open{opacity:1;pointer-events:auto}
.twc-rd-sheet{position:fixed;left:0;right:0;bottom:0;z-index:9;max-height:84vh;overflow-y:auto;padding:18px 14px calc(24px + env(safe-area-inset-bottom,0px));
  background:var(--bg);border-top:1px solid var(--ln);border-radius:26px 26px 0 0;box-shadow:0 -20px 50px rgba(0,0,0,.5);
  transform:translateY(105%);transition:transform .3s ease}
.twc-rd-sheet.open{transform:none}
.twc-rd-sheet-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-left:4px}

/* stories */
.twc-rd-story{padding:38px 0 14px;border-bottom:1px solid var(--ln);scroll-margin-top:calc(var(--bar-h) + 16px)}
.twc-rd-kick{display:flex;align-items:center;gap:10px;font:700 11.5px Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--gd)}
.twc-rd-story h2{margin:14px 0 8px;font:700 clamp(25px,5.4vw,36px)/1.2 'Fraunces',Georgia,serif;letter-spacing:-.01em}
.twc-rd-meta{color:var(--mu);font:500 13px Inter,system-ui,sans-serif}
.twc-rd-fig{margin:22px 0}
.twc-rd-fig img{display:block;width:100%;height:auto;border-radius:14px;background:var(--pn)}
.twc-rd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:-10px 0 22px}
.twc-rd-grid .twc-rd-fig{margin:0}
.twc-rd-body p,.twc-rd-body li{font:400 var(--fs)/1.75 Georgia,'Times New Roman',serif}
.twc-rd-body p{margin:0 0 1.15em}
.twc-rd-body strong{font-weight:700}
.twc-rd-body h3{margin:1.7em 0 .9em;font:700 12px Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gd)}
.twc-rd-body ul{list-style:none;margin:0 0 1.2em;padding:0}
.twc-rd-body li{position:relative;padding-left:24px;margin-bottom:.85em}
.twc-rd-body li::before{content:"";position:absolute;left:3px;top:.72em;width:8px;height:8px;border-radius:50%;background:var(--gd)}
.twc-rd-call{margin:26px 0 18px;padding:18px 20px;border-left:4px solid var(--gd);border-radius:0 12px 12px 0;background:var(--pn)}
.twc-rd-call b{display:block;margin-bottom:8px;font:700 11px Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.twc-rd-call p{margin:0;font:italic 700 calc(var(--fs) - 1px)/1.55 Georgia,serif}
.twc-rd-div{margin:46px 0 0;text-align:center}
.twc-rd-div span{display:inline-block;padding:9px 20px;border-radius:22px;background:var(--gd);color:#0c1430;
  font:700 11.5px Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.twc-rd-quote{margin:46px 0;padding:34px 22px;text-align:center;border:1px solid var(--ln);border-radius:18px;background:var(--pn)}
.twc-rd-quote blockquote{margin:0}
.twc-rd-quote p{margin:0;font:italic 700 clamp(20px,4.4vw,27px)/1.4 Georgia,serif}
.twc-rd-quote cite{display:block;margin-top:14px;font:700 12px Inter,system-ui,sans-serif;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.twc-rd-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:22px}
.twc-rd-links a{padding:8px 16px;border-radius:20px;border:1px solid var(--ln);color:var(--tx);text-decoration:none;font:600 13px Inter,system-ui,sans-serif}
.twc-rd-extra{text-align:center;margin:10px 0 40px}
.twc-rd-extra h3{margin:26px 0 0;font:700 13px Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--gd)}
.twc-rd-extra .twc-rd-fig{max-width:420px;margin:14px auto 0}
.twc-rd-sign{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0 20px;text-align:center}
.twc-rd-sign img{width:68px;height:68px;border-radius:50%;border:3px solid var(--gd);object-fit:cover}
.twc-rd-sign span{color:var(--mu);font:italic 14px/1.5 Georgia,serif}
@media (max-width:520px){.twc-rd-btn{padding:0 11px;min-width:36px;height:36px}.twc-rd-tools{gap:4px}.twc-rd-tl{gap:10px}.twc-rd-toc-x{padding:11px 10px 12px}.twc-rd-toc-t{font-size:13px}}

/* desktop: one centered column, roomier tiles */
@media (min-width:1000px){
  .twc-rd-wrap{max-width:900px;padding:18px 24px 120px}
  .twc-rd-main{padding:0}
  .twc-rd-inline{padding:34px 30px 30px}
  .twc-rd-tl{gap:18px}
  .twc-rd-toc-thumb{aspect-ratio:16/10}
  .twc-rd-toc-x{padding:16px 18px 18px}
  .twc-rd-toc-tag{font-size:10.5px}
  .twc-rd-toc-t{font-size:17px;-webkit-line-clamp:3}
  .twc-rd-toc-go{font-size:11.5px}
  .twc-rd-bar{padding-left:24px;padding-right:24px}
  .twc-rd-fab{right:30px;bottom:30px}
  .twc-rd-sheet{left:50%;right:auto;top:50%;bottom:auto;width:min(800px,92vw);max-height:88vh;padding:26px 24px 26px;border:1px solid var(--ln);border-radius:28px;
    opacity:0;pointer-events:none;transform:translate(-50%,-46%);transition:transform .3s ease,opacity .25s ease}
  .twc-rd-sheet.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
  .twc-rd-sheet .twc-rd-toc-thumb{aspect-ratio:16/8}
}

/* ===== World clock: "Check the time anywhere" finder ===== */
.tz-finder{ position:relative; overflow:hidden; margin-top:26px; padding:26px 24px 24px; border-radius:18px;
  background:radial-gradient(700px 240px at 0% 0%, rgba(255,126,182,0.14), transparent 70%), radial-gradient(600px 240px at 100% 100%, rgba(255,154,92,0.12), transparent 70%), rgba(255,255,255,0.03);
  border:1px solid rgba(var(--accent-rgb),0.28); box-shadow:0 18px 50px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05); }
.tz-finder::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#ff7eb6,#ff9a5c); }
.tz-head{ margin-bottom:16px; }
.tz-kicker{ font-size:10.5px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; background:linear-gradient(90deg,#ff7eb6,#ff9a5c); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tz-title{ margin:6px 0 4px; font-size:clamp(22px, 4.4vw, 30px); font-weight:700; line-height:1.12; letter-spacing:-0.01em; color:var(--ink); }
.tz-sub{ margin:0; font-size:14px; color:var(--muted); }
.tz-field{ position:relative; }
.tz-icon{ position:absolute; left:18px; top:50%; transform:translateY(-50%); color:#ff9a7a; pointer-events:none; }
.tz-input{ width:100%; box-sizing:border-box; padding:17px 20px 17px 50px; font:inherit; font-size:17px; font-weight:600; color:var(--ink); -webkit-appearance:none; appearance:none;
  background:rgba(8,9,14,0.55); border:1px solid rgba(var(--accent-rgb),0.35); border-radius:14px; outline:none; transition:border-color .18s, box-shadow .18s, background .18s; }
.tz-input::placeholder{ color:var(--muted-2); font-weight:500; }
.tz-input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.tz-input:focus{ border-color:#ff9a5c; background:rgba(8,9,14,0.75); box-shadow:0 0 0 4px rgba(255,154,92,0.18), 0 8px 28px rgba(255,126,182,0.14); }
.tz-results{ margin-top:20px; }
.tz-results:empty{ display:none; }
.tz-results .clock-status{ display:block; border-radius:10px; line-height:1.35; }
.tz-empty{ grid-column:1 / -1; font-size:13.5px; color:var(--muted); }
@media (max-width:560px){ .tz-finder{ padding:22px 16px 18px; } .tz-input{ font-size:16px; } }
@media (prefers-reduced-motion:reduce){ .tz-input{ transition:none; } }

/* ===== Pinned cities ===== */
.clock-unpin{ position:absolute; top:8px; right:8px; z-index:2; width:22px; height:22px; border-radius:50%; border:1px solid rgba(255,255,255,0.14); background:rgba(8,9,14,0.55); color:var(--muted); font:inherit; font-size:15px; line-height:1; cursor:pointer; padding:0; opacity:.7; transition:opacity .15s, background .15s, color .15s; }
.clock-unpin:hover, .clock-unpin:focus-visible{ opacity:1; background:linear-gradient(90deg,#ff7eb6,#ff9a5c); color:#1a1015; }
/* Pin button: gradient-outlined pill, fills with the sunset gradient on hover, solid when pinned */
.tz-pin{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:8px; width:max-content; max-width:100%; margin:14px auto 0; padding:10px 20px 10px 16px;
  font:inherit; font-size:13px; font-weight:800; letter-spacing:0.03em; cursor:pointer; color:#ffe1d1; border:1.5px solid transparent; border-radius:999px; -webkit-appearance:none; appearance:none;
  background:linear-gradient(135deg, rgba(255,126,182,0.22), rgba(255,154,92,0.22)), linear-gradient(#17151e,#17151e);
  background-clip:padding-box, padding-box; background-origin:border-box;
  box-shadow:0 0 0 1.5px rgba(255,154,92,0.55), 0 6px 20px rgba(255,126,182,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
  transition:color .18s, transform .18s, box-shadow .18s, background .18s; }
.tz-pin svg{ flex:none; color:#ff9a7a; transition:transform .25s, color .18s; }
.tz-pin::after{ content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,0.35),transparent); transform:skewX(-20deg); transition:left .5s ease; pointer-events:none; }
.tz-pin.st-free:hover, .tz-pin.st-free:focus-visible{ color:#1a1015; background:linear-gradient(135deg,#ff7eb6,#ff9a5c); transform:translateY(-2px); box-shadow:0 10px 26px rgba(255,126,182,0.35); outline:none; }
.tz-pin.st-free:hover svg, .tz-pin.st-free:focus-visible svg{ color:#1a1015; transform:translateY(-1px) rotate(-12deg); }
.tz-pin.st-free:hover::after{ left:120%; }
.tz-pin.st-free:active{ transform:translateY(0); }
.tz-pin.st-pinned{ color:#1a1015; background:linear-gradient(135deg,#ff7eb6,#ff9a5c); box-shadow:0 6px 20px rgba(255,126,182,0.28); }
.tz-pin.st-pinned svg{ color:#1a1015; }
.tz-pin.st-base, .tz-pin.st-full{ color:var(--muted-2); background:rgba(255,255,255,0.05); box-shadow:0 0 0 1.5px rgba(255,255,255,0.12); cursor:default; }
.tz-pin.st-base svg{ color:#7be0a5; }

/* ===== Calendar reminder + install ===== */
.cal-strip{ width:calc(100% - 32px); max-width:400px; margin:14px auto 0; text-align:center; }
.install-btn{ margin-top:12px; font:inherit; font-size:13px; font-weight:700; color:var(--gold-bright); background:none; border:1px dashed var(--line-soft); border-radius:999px; padding:8px 16px; cursor:pointer; }
.install-btn:hover{ background:rgba(239,201,120,0.08); }
.install-btn[hidden], .install-hint[hidden]{ display:none; }
.install-hint{ margin:8px 0 0; font-size:12.5px; color:var(--muted); }

/* ===== Scroll polish: gentle rise-in as things enter the screen =====
   Pure CSS. Browsers without scroll-driven animations simply skip it, and
   motion is off for anyone who prefers reduced motion. Uses `translate`
   (not `transform`) so the existing hover lifts keep working. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference){
    @keyframes twc-rise{ from{ opacity:0; translate:0 26px; } to{ opacity:1; translate:0 0; } }
    .econ-head, .econ-hook, .clock-card, .fx-card, .menu-card, .tz-finder, .scoop-teaser{
      animation:twc-rise linear both; animation-timeline:view(); animation-range:entry 0% entry 55%;
    }
  }
}
@media (prefers-reduced-motion:no-preference){ ::view-transition-group(root){ animation-duration:.22s; } }
@media (prefers-reduced-motion:reduce){ .tz-pin, .tz-pin svg, .tz-pin::after, .clock-unpin{ transition:none; } }

/* Divider between the default clocks and the visitor's pinned cities */
.clock-divider{ grid-column:1 / -1; display:flex; align-items:center; gap:14px; margin:8px 0 2px; }
.clock-divider::before, .clock-divider::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(255,154,92,0.45)); }
.clock-divider::after{ background:linear-gradient(90deg, rgba(255,154,92,0.45), transparent); }
.clock-divider span{ font-size:11px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; white-space:nowrap; background:linear-gradient(90deg,#ff7eb6,#ff9a5c); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ===== Info popup: one shared layer above the whole page (never clipped or covered) ===== */
.card-info-tip{ display:none !important; }
.twc-tip{ position:fixed; z-index:2147483000; left:0; top:0; width:max-content; max-width:min(280px, calc(100vw - 24px)); padding:13px 15px; font-size:13px; line-height:1.55; font-weight:400; text-align:left; color:var(--ink);
  background:linear-gradient(180deg,#1c1d26,#13141a); border:1px solid rgba(239,201,120,0.38); border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.35);
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .16s ease, transform .16s ease, visibility .16s; }
.twc-tip.on{ opacity:1; visibility:visible; transform:none; }
.twc-tip::before{ content:''; position:absolute; top:-6px; left:var(--ax, 50%); width:10px; height:10px; margin-left:-5px; background:#1c1d26; border-left:1px solid rgba(239,201,120,0.38); border-top:1px solid rgba(239,201,120,0.38); transform:rotate(45deg); }
.twc-tip.up::before{ top:auto; bottom:-6px; background:#13141a; border:0; border-right:1px solid rgba(239,201,120,0.38); border-bottom:1px solid rgba(239,201,120,0.38); }

/* ===== This Day in Business History: editorial feature card ===== */
.history-card.hx{ position:relative; overflow:hidden; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:clamp(20px,4.5vw,40px);
  padding:clamp(22px,4vw,34px) clamp(20px,4vw,40px); margin:0 0 32px; border-radius:22px; border:1px solid rgba(239,201,120,0.28);
  background:radial-gradient(560px 240px at 0% 0%, rgba(239,201,120,0.16), transparent 70%), radial-gradient(460px 220px at 100% 100%, rgba(205,162,77,0.09), transparent 70%), linear-gradient(180deg,#181920,#101117);
  box-shadow:0 22px 60px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.05); }
.history-card.hx::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--gold-bright), transparent); opacity:0.75; }
.hx-year-col{ display:flex; flex-direction:column; align-items:center; gap:8px; padding-right:clamp(20px,4.5vw,40px); border-right:1px solid rgba(239,201,120,0.22); }
.hx-year{ font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:clamp(46px,9vw,80px); line-height:1; letter-spacing:-0.02em;
  background:linear-gradient(180deg,#fff2c9 0%, #efc978 45%, #b8892f 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hx-ago{ font-size:11px; font-weight:800; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted-2); }
.history-card.hx .hc-label{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:12px; font-size:11px; font-weight:800; letter-spacing:0.16em; color:var(--gold-bright); }
.hx-date{ padding:3px 11px; border-radius:999px; border:1px solid rgba(239,201,120,0.38); background:rgba(239,201,120,0.08); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:#f3d994; }
.history-card.hx .hc-text{ margin:0; font-family:'Fraunces', Georgia, serif; font-weight:400; font-size:clamp(18px,2.6vw,25px); line-height:1.4; color:var(--ink); }
@media (max-width:620px){
  .history-card.hx{ grid-template-columns:1fr; gap:16px; }
  .hx-year-col{ flex-direction:row; align-items:baseline; justify-content:flex-start; gap:14px; padding:0 0 16px; border-right:0; border-bottom:1px solid rgba(239,201,120,0.22); }
}

/* ===== Pick a card: calmer, premium menu =====
   Phones: one clean row per card (icon, title, one-line hook, quiet arrow).
   Desktop: three roomy cards per group. Each group gets its own accent colour. */
.menu-section{ background:radial-gradient(900px 300px at 50% -8%, rgba(239,201,120,0.09), transparent 70%), linear-gradient(180deg, rgba(12,20,48,0.55), rgba(10,10,12,0) 75%); }
.menu-head{ margin-bottom:4px; }
.menu-head p{ color:var(--muted-2); font-size:14px; }
.menu-group{ --g:239,201,120; margin-top:30px; }
.menu-section .wrap > .menu-group:nth-child(2){ --g:255,138,112; }
.menu-section .wrap > .menu-group:nth-child(3){ --g:245,184,75; }
.menu-section .wrap > .menu-group:nth-child(4){ --g:183,156,255; }
.menu-section .wrap > .menu-group:nth-child(5){ --g:239,201,120; }
.menu-group-head{ display:flex; align-items:center; flex-wrap:nowrap; gap:12px; margin:0 0 14px; }
.menu-group-title{ flex:none; display:flex; align-items:center; gap:9px; font-size:22px; letter-spacing:0.06em; color:rgb(var(--g)); }
.menu-group-sub{ flex:none; font-size:12.5px; color:var(--muted-2); }
.menu-group-head::after{ content:''; flex:1; min-width:24px; height:1px; background:linear-gradient(90deg, rgba(var(--g),0.45), transparent); }
@media (max-width:699px){ .menu-group-sub{ display:none; } }

.menu-grid{ grid-template-columns:1fr; gap:12px; }
.menu-item.is-full{ grid-column:auto; }
.menu-card{ display:grid; grid-template-columns:50px 1fr; grid-template-areas:"icon title" "icon hook"; column-gap:14px; row-gap:3px; align-items:center; min-height:0; padding:14px 14px 14px 14px; border-radius:18px;
  border:1px solid rgba(var(--g),0.2);
  background:radial-gradient(240px 110px at 0% 0%, rgba(var(--g),0.13), transparent 70%), linear-gradient(180deg,#181922,#111218);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.menu-card:hover{ border-color:rgba(var(--g),0.55); transform:translateY(-3px); background:radial-gradient(240px 110px at 0% 0%, rgba(var(--g),0.2), transparent 70%), linear-gradient(180deg,#1a1b25,#12131a);
  box-shadow:0 14px 34px rgba(0,0,0,0.42), 0 0 0 1px rgba(var(--g),0.16), 0 12px 40px rgba(var(--g),0.1); }
.menu-card-icon{ grid-area:icon; width:50px; height:50px; display:grid; place-items:center; font-size:24px; line-height:1; border-radius:15px;
  background:linear-gradient(135deg, rgba(var(--g),0.28), rgba(var(--g),0.07)); border:1px solid rgba(var(--g),0.38); box-shadow:0 6px 18px rgba(var(--g),0.12); }
.menu-card-title{ grid-area:title; align-self:end; font-size:22px; letter-spacing:0.05em; color:var(--ink); }
.menu-card-hook{ grid-area:hook; align-self:start; font-size:12.5px; line-height:1.4; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.menu-card-go{ grid-area:go; position:static; justify-self:end; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; font-size:13px; font-weight:700; color:rgb(var(--g));
  background:rgba(var(--g),0.08); border:1px solid rgba(var(--g),0.3); transition:background .18s, color .18s, transform .18s; }
.menu-card:hover .menu-card-go{ background:rgb(var(--g)); color:#14100a; transform:translateY(2px); }

@media (min-width:700px){
  .menu-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
  .menu-card{ grid-template-columns:1fr; grid-template-rows:auto auto 1fr; align-content:start; grid-template-areas:"icon" "title" "hook"; row-gap:0; align-items:start; min-height:176px; padding:20px 20px 18px; }
  .menu-card-icon{ width:54px; height:54px; font-size:26px; margin-bottom:16px; }
  .menu-card-go{ align-self:start; }
  .menu-card-title{ font-size:25px; margin-bottom:6px; }
  .menu-card-hook{ font-size:13px; -webkit-line-clamp:3; }
}

/* ===== Pick a card, phones only: two side by side + one full-width (layout B) =====
   Cards 1 and 2 sit as compact tiles (icon + arrow on top, title, short hook).
   Card 3 spans the full row and keeps the horizontal row layout. Desktop is unchanged. */
@media (max-width:699px){
  .menu-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .menu-item.is-full{ grid-column:1 / -1; }
  .is-half > .menu-card{ grid-template-columns:1fr; grid-template-rows:auto auto 1fr; align-content:start; grid-template-areas:"icon" "title" "hook"; row-gap:0; column-gap:8px; align-items:start; padding:14px 12px 14px 14px; }
  .is-half > .menu-card .menu-card-icon{ width:44px; height:44px; font-size:22px; border-radius:13px; margin-bottom:12px; }
  .is-half > .menu-card .menu-card-go{ align-self:start; }
  .is-half > .menu-card .menu-card-title{ align-self:start; font-size:18px; line-height:1.15; letter-spacing:0.03em; margin-bottom:5px; overflow-wrap:anywhere; }
  .is-half > .menu-card .menu-card-hook{ align-self:start; font-size:12px; line-height:1.4; -webkit-line-clamp:4; }
  .is-full > .menu-card .menu-card-title{ font-size:19px; letter-spacing:0.04em; }
  .is-full > .menu-card .menu-card-hook{ -webkit-line-clamp:3; }
  .menu-group-title{ flex:0 1 auto; min-width:0; font-size:19px; letter-spacing:0.04em; }
}