*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
    :root{
      /* Brand fill. Never used as text on a light surface: #F7931A on white
         measures 2.30:1, which fails even the 3:1 bar for large text. */
      --orange:#F7931A;
      --orange-light:#FEF3E2;
      --orange-dim:#D47A0E;
      /* The brand's text voice. Measured against every light surface it lands
         on: 5.08:1 on white, 4.63:1 on --orange-light, 4.86:1 on --gray-50 —
         all clear of the 4.5:1 minimum, at any size. Orange stays orange for
         fills, borders, focus rings and icons on dark. */
      --orange-text:#A85A08;
      --gray-900:#111827;--gray-800:#1F2937;--gray-700:#374151;
      --gray-600:#4B5563;--gray-500:#6B7280;--gray-400:#9CA3AF;
      /* 400 and lighter are border/divider tones: --gray-400 as text is
         2.54:1 on white. Muted *text* starts at --gray-500 (4.83:1). */
      --gray-300:#D1D5DB;--gray-200:#E5E7EB;--gray-100:#F3F4F6;
      --gray-50:#F9FAFB;--white:#FFFFFF;
      /* Three voices, each with a job.

         --font-body (Inconsolata) is the interface voice: labels, counts,
         metadata, chips, buttons. The monospace character is deliberate and
         it stays exactly where it was.

         --font-text is for *reading*: hero paragraph, card summaries, section
         blurbs, author bios. A monospace face fits roughly 30% fewer
         characters on a line and flattens word shapes, which is a real cost
         once a sentence gets long. This is the system stack rather than a
         third webfont — on Apple platforms it resolves to SF, the face the
         HIG is written around, and it costs no download.

         --font-brand (TheBoldFont) stays the display voice. */
      /* Type scale. The page had 26 declared sizes across 93 declarations,
         including 9 different values between 10px and 15px — differences no
         reader can perceive but every future change has to guess at. Six
         steps, each with a job, absorb all of them:

           --t-label  10 / 10.5 / 11 / 11.5   uppercase labels, counts, badges
           --t-meta   12 / 12.5 / 13          metadata, chips, nav, buttons
           --t-body   13.5 / 14 / 14.5 / 15 / 15.5 / 16   summaries, blurbs
           --t-lead   17 / 18 / 19 / 20       card titles, lead paragraph, inputs
           --t-title  23 / 24 / 26            drawer name, the lead card
           --t-section 30 / 32                section headings

         Display headings (hero, blogs) ramp with clamp() instead of
         breakpoint overrides, so they stay on the scale at the ends and move
         smoothly between. Avatar initials keep raw px: those are sized to the
         circle they sit in, not to this scale. */
      --t-label:11px;
      --t-meta:13px;
      --t-body:14px;
      --t-lead:18px;
      --t-title:24px;
      --t-section:32px;

      /* Roles (--theme-bg, --theme-text-muted, --theme-accent-text …) live in
         discover_system.css, once for light and once for dark. This file
         keeps only the raw ramp above; rules below speak in roles. */
      --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
      --font-editorial:Georgia,'Times New Roman',serif;
      --font-text:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,
        'Helvetica Neue',Arial,sans-serif;
      --font-brand:'TheBoldFont',ui-sans-serif,system-ui,sans-serif;
      --shadow-sm:0 1px 2px rgba(0,0,0,.04),0 1px 1px rgba(0,0,0,.02);
      --shadow-md:0 8px 24px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.04);
      --shadow-lg:0 24px 48px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.05);
      /* Layers, on the same scale as the listener's Vue overlays (Tailwind
         z-40 and z-50). Page content stacks inside <main>; floating chrome
         sits at --layer-chrome; every drawer, sheet and dialog shares
         --layer-overlay, and the one opened last paints on top. */
      --layer-chrome:40;
      --layer-overlay:50;
    }
    /* Content layers (hero search, card links, rail arrows) stay below the
       chrome and every overlay, whatever their own z-index. */
    main{isolation:isolate}
    /* i18n toggle. default visible is set via <html class="lang-de">. */
    [data-en]{display:none}
    .lang-en [data-de]{display:none}
    .lang-en [data-en]{display:revert}
    .lang-en span[data-en],.lang-en a[data-en]{display:inline}
    .lang-en p[data-en],.lang-en div[data-en],.lang-en h1[data-en],
    .lang-en h2[data-en],.lang-en h3[data-en],.lang-en li[data-en],
    .lang-en section[data-en]{display:block}
    /* Smooth scrolling is motion, so it follows the system preference —
       the anchor jumps still work, they just stop animating. */
    body{font-family:var(--font-body);color:var(--theme-text-heading);background:var(--theme-bg);line-height:1.6;-webkit-font-smoothing:antialiased}
    /* Everything on this page that is a *sentence* rather than a label. Kept
       as one list so the boundary between the reading voice and the interface
       voice is visible in one place instead of scattered across components. */
    .hero-sub,
    .section-blurb,
    .rail-blurb,
    .card-desc,
    .pod-empty p,
    .footer-tag,
    .adrawer-bio{font-family:var(--font-text)}
    img{max-width:100%;height:auto;display:block}
    a{color:inherit;text-decoration:none}
    button{font:inherit}
    /* One focus ring, everywhere. Before this only .rail-arrow styled focus,
       so keyboard users got the browser default — 1px on links, 3px on
       buttons, nothing on the hero field. `:where()` keeps specificity at 0,
       so any component that needs its own treatment still wins without
       !important. --orange-text carries 5.08:1 against white, clear of the
       3:1 a UI component needs. */
    :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
      outline:2px solid var(--theme-accent-text);outline-offset:2px;border-radius:6px}
    .container{max-width:1328px;margin:0 auto;padding:0 40px}

    /* Skip link for keyboard users. */
    .skip{position:absolute;top:-100px;left:8px;background:var(--theme-invert-bg);color:var(--theme-invert-text);padding:8px 12px;border-radius:6px;font-size:var(--t-meta);z-index:200}
    .skip:focus{top:8px}

    /* ── Nav ── */
    .nav{position:relative;z-index:var(--layer-chrome);background:var(--theme-bg);border-bottom:1px solid var(--theme-border)}
    .nav.scrolled{box-shadow:0 1px 8px rgba(0,0,0,.06)}
    .nav-inner{display:flex;align-items:center;justify-content:space-between;min-height:82px;gap:24px}
    .nav-brand{display:flex;align-items:center}
    .nav-logo{height:28px}
    .nav-links{display:flex;gap:20px;align-items:center}
    .nav-links a{font-size:var(--t-meta);font-weight:500;color:var(--theme-text);transition:color .15s;letter-spacing:.02em}
    .nav-links a:hover{color:var(--theme-accent-text)}
    .nav-cta{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;background:var(--theme-invert-bg);color:var(--theme-invert-text)!important;border-radius:6px;font-size:var(--t-meta);font-weight:600;transition:background .15s}
    .nav-cta:hover{background:var(--theme-invert-bg-hover)}
    .unused-nav-dot{width:6px;height:6px;border-radius:50%;background:#22C55E;animation:pulse 2s infinite}
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
    .lang-toggle{display:inline-flex;border:1px solid var(--theme-border-strong);border-radius:4px;overflow:hidden}
    .lang-toggle button{padding:4px 10px;border:none;background:transparent;color:var(--theme-text-muted);cursor:pointer;font-size:var(--t-label);font-weight:700;font-family:var(--font-body);transition:all .15s}
    .lang-toggle button.active{background:var(--theme-invert-bg);color:var(--theme-invert-text)}
    .nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
    /* The burger's bars are a glyph drawn in the text tone, not a filled
       control, so they follow the text role rather than the invert one. */
    .nav-toggle span{display:block;width:20px;height:2px;background:var(--theme-text-strong);margin:4px 0;transition:all .2s}

    /* ── Hero search (the page's primary, Google-style entry point) ── */
    /* The page's primary, Google-style search: long pill, crisp thin border,
       a soft layered shadow that lifts on hover/focus, brand ring on focus. */
    .hero-search{position:relative;max-width:780px;margin:0 auto 26px}
    .hero-search-icon{position:absolute;left:24px;top:50%;transform:translateY(-50%);width:21px;height:21px;color:var(--theme-text-muted);pointer-events:none;transition:color .15s}
    .hero-search:focus-within .hero-search-icon{color:var(--theme-accent-text)}
    .hero-search-input{width:100%;height:54px;padding:0 58px;border:1px solid #93968c;border-radius:6px;background:var(--theme-bg-card);font:var(--t-body) var(--font-body);color:var(--theme-text-heading)}
    .hero-search-input:hover{border-color:var(--theme-text-heading)}
    /* Keeps its own soft glow for pointer focus, but no longer suppresses the
       outline: keyboard focus gets the shared ring on top. The border moves to
       --orange-text so the field's own boundary clears 3:1 as well. */
    .hero-search-input:focus{border-color:var(--theme-accent-text);outline:2px solid var(--theme-accent-text);outline-offset:2px}
    .hero-search-input:focus:not(:focus-visible){outline:none}
    .hero-search-input::placeholder{color:var(--theme-text-muted)}
    @media (max-width:768px){.hero-search{max-width:100%}.hero-search-input{height:56px;font-size:var(--t-body);padding:0 18px 0 50px}.hero-search-icon{left:20px}}

    .hero-pills{display:flex;flex-wrap:wrap;gap:8px}
    .hero-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--theme-border);background:var(--theme-bg-card);border-radius:100px;font-size:var(--t-meta);font-weight:600;color:var(--theme-text-strong)}
    .hero-pill svg{color:#22C55E}

    /* ── Topic chips (reused by the network section's filter) ── */
    .topic-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:var(--theme-bg-card);border:1px solid var(--theme-border);border-radius:100px;font-size:var(--t-meta);font-weight:600;color:var(--theme-text-strong);cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0;font-family:var(--font-body)}
    .topic-chip:hover{border-color:var(--theme-accent);color:var(--theme-accent-text)}
    .topic-chip.active{background:var(--theme-invert-bg);color:var(--theme-invert-text);border-color:var(--theme-invert-bg)}
    .topic-chip.active:hover{background:var(--theme-invert-bg-hover)}
    .topic-chip-count{font-size:var(--t-label);color:var(--theme-text-muted);font-weight:500}
    .topic-chip.active .topic-chip-count{color:rgba(255,255,255,.55)}

    /* ── Network section: per-section topic filter + load-more grid ── */
    .net-filter{display:flex;align-items:center;gap:14px;margin-bottom:24px;flex-wrap:wrap}
    .net-filter-label{font-size:var(--t-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--theme-text-muted);flex-shrink:0}
    .net-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;min-width:0;flex:1 1 300px}
    .net-chips::-webkit-scrollbar{display:none}
    .topic-chip[data-net-transient]{border-style:dashed}
    /* Topic typeahead — the scalable path to the long tail of hashtags. */
    .net-search-wrap{position:relative;flex:0 0 auto;display:flex;align-items:center}
    .net-search-icon{position:absolute;left:13px;width:15px;height:15px;color:var(--theme-text-muted);pointer-events:none}
    .net-search{width:188px;height:38px;padding:0 14px 0 36px;border:1px solid var(--theme-border);border-radius:100px;font-family:var(--font-body);font-size:var(--t-meta);color:var(--theme-text-heading);background:var(--theme-bg-card);transition:border-color .15s,width .2s,box-shadow .15s}
    .net-search:focus{outline:none;border-color:var(--theme-accent);width:232px;box-shadow:0 0 0 3px var(--theme-accent-soft)}
    .net-search::placeholder{color:var(--theme-text-muted)}
    .net-search-results{position:absolute;top:46px;right:0;width:288px;max-height:320px;overflow-y:auto;background:var(--theme-bg-card);border:1px solid var(--theme-border);border-radius:12px;box-shadow:var(--shadow-lg);z-index:60;padding:6px}
    .net-search-results[hidden]{display:none}
    .net-search-item{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:var(--t-meta);color:var(--theme-text-heading)}
    .net-search-item:hover,.net-search-item.active{background:var(--theme-bg-subtle)}
    .net-search-item .tag{font-weight:600}
    .net-search-item .cnt{font-size:var(--t-label);color:var(--theme-text-muted);font-weight:500}
    .net-search-empty{padding:14px;text-align:center;color:var(--theme-text-muted);font-size:var(--t-meta)}
    @media (max-width:900px){
    }
    @media (max-width:560px){.net-search,.net-search:focus{width:100%}.net-search-wrap{flex:1 1 100%}.net-search-results{width:100%}}
    .net-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:20px}
    .net-grid.is-filtering{opacity:.5;transition:opacity .15s}
    .net-empty{grid-column:1/-1;padding:48px 20px;text-align:center;color:var(--theme-text-muted);font-size:var(--t-body)}
    /* Editorial lead: the first card spans the row as a large horizontal feature. */
    .net-grid .article-card.is-featured{grid-column:1/-1;flex-direction:row;align-items:stretch}
    .article-card.is-featured .card-cover{flex:0 0 56%;aspect-ratio:auto;min-height:300px}
    .article-card.is-featured .card-cover img:not(.card-brand){width:100%;height:100%;object-fit:contain}
    .article-card.is-featured .card-brand{width:120px;max-width:28%}
    .article-card.is-featured .card-body{padding:30px 34px;justify-content:center;gap:12px}
    /* One step above the ordinary card title (--t-lead), one below the
       section heading: the lead card is louder than its siblings without
       competing with the heading that introduces the whole row. */
    .article-card.is-featured .card-title{font-size:var(--t-title);line-height:1.12;-webkit-line-clamp:3}
    .article-card.is-featured .card-desc{font-size:var(--t-body);line-height:1.55;-webkit-line-clamp:3}
    @media (max-width:720px){
      .net-grid .article-card.is-featured{flex-direction:column}
      .article-card.is-featured .card-cover{flex:none;aspect-ratio:1.91;min-height:0}
      .article-card.is-featured .card-body{padding:18px 20px 20px}
    }
    .net-more{display:flex;justify-content:center;margin-top:32px}
    .net-more-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 26px;background:var(--theme-bg-card);border:1px solid var(--theme-border-strong);border-radius:100px;font-size:var(--t-body);font-weight:600;color:var(--theme-text-strong);cursor:pointer;font-family:var(--font-body);transition:all .15s}
    .net-more-btn:hover{border-color:var(--theme-accent);color:var(--theme-accent-text)}
    .net-more-btn[hidden]{display:none}
    @media (max-width:560px){.net-filter{flex-wrap:wrap;gap:10px}.net-grid{grid-template-columns:1fr}}

    /* ── Section heads ── */
    .section{padding:72px 0;border-top:1px solid var(--theme-border-subtle)}
    .section:first-of-type{border-top:0}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px;flex-wrap:wrap}
    .section-head-text{min-width:0;flex:1}
    .section-eyebrow{font-size:var(--t-label);font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--theme-accent-text);margin-bottom:8px}
    .section-title{font-family:var(--font-brand);font-size:clamp(1.625rem,0.96rem + 1.39vw,2rem);line-height:1.15;color:var(--theme-text-heading)}
    .section-action{font-size:var(--t-meta);color:var(--theme-text-muted);transition:color .15s;white-space:nowrap}
    .section-action:hover{color:var(--theme-accent-text)}
    .section-blurb{font-size:var(--t-body);color:var(--theme-text-muted);line-height:1.55;max-width:580px;margin-top:-8px;margin-bottom:24px}

    /* ── Discover rail tabs ── */
    .rail-tabs{display:inline-flex;gap:0;background:var(--theme-fill);border-radius:100px;padding:3px;align-self:center}
    .rail-tab{appearance:none;border:0;background:transparent;color:var(--theme-text);padding:7px 16px;border-radius:100px;font-size:var(--t-meta);font-weight:600;cursor:pointer;transition:all .15s;font-family:var(--font-body)}
    .rail-tab:hover:not(.disabled){color:var(--theme-text-heading)}
    .rail-tab.active{background:var(--theme-bg-card);color:var(--theme-text-heading);box-shadow:var(--shadow-sm)}
    .rail-tab.disabled{opacity:.4;cursor:not-allowed}
    .rail-blurb{font-size:var(--t-meta);color:var(--theme-text-muted);margin-bottom:20px;line-height:1.5}
    .rail-panel{display:none}
    .rail-panel.active{display:block}

    /* ── Cards (shared) ── */
    .site-card,.article-card{display:flex;flex-direction:column;background:var(--theme-bg-card);border:1px solid var(--theme-border);border-radius:14px;overflow:hidden;transition:transform .15s,box-shadow .2s,border-color .15s}
    .site-card:hover,.article-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--theme-border-strong)}
    .card-cover{position:relative;overflow:hidden;background:var(--theme-fill);isolation:isolate}
    .card-cover img:not(.card-brand){width:100%;height:100%;object-fit:contain}
    /* Art that isn't the frame's shape is shown whole over a blurred wash of
       itself, rather than losing a third of itself to the crop. The class is
       set by the data-fig script once it can measure the real image. Mirrors
       .e21-fig on the published sites. */
    .card-cover.is-letterboxed img:not(.card-brand){object-fit:contain}
    .card-cover.is-letterboxed::before{content:"";position:absolute;inset:-8%;z-index:-1;
      background:var(--fig-bg) center/cover no-repeat;filter:blur(26px) saturate(1.25) brightness(.82)}
    /* A cover whose file never arrives keeps the frame and falls back to the
       brand panel, instead of showing a broken-image glyph. */
    .card-cover.is-failed img:not(.card-brand){display:none}
    /* No-image cover: one consistent, refined brand panel (deep charcoal + a
       soft warm glow) with the mark held small and centred. The descendant
       selector outranks ".card-cover img" so the logo is contained, never
       stretched/cropped to fill. */
    /* The tint comes from the card's seed (see _seed_tint); the defaults keep
       the original charcoal for anything that doesn't set one — the failed-image
       plate, and any older call site. */
    .card-cover-fallback,.card-cover.is-failed{display:flex;align-items:center;justify-content:center;
      background:
        radial-gradient(125% 135% at var(--fig-glow-x,80%) -20%,
          hsl(var(--fig-hue,28) 92% 52% / .30),transparent 58%),
        linear-gradient(150deg,hsl(var(--fig-hue,28) 22% 17%),#10151d)}
    .card-cover-fallback .card-brand{width:32%;max-width:78px;height:auto;object-fit:contain;opacity:.88;filter:drop-shadow(0 1px 6px rgba(0,0,0,.25))}
    .article-card.is-featured .card-cover-fallback .card-brand{max-width:104px}
    /* card-body grows to fill the (stretched) card height so the meta
       footer's margin-top:auto pins it to the true bottom of the card —
       footers stay aligned across a row no matter how tall the title or
       summary above them is. */
    .card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 auto}
    .card-site-chip{display:inline-flex;align-self:flex-start;padding:3px 10px;background:var(--theme-accent-soft);color:var(--theme-accent-text);border-radius:100px;font-size:var(--t-label);font-weight:600;letter-spacing:.02em;margin-bottom:4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .card-site-chip:hover{background:var(--theme-accent);color:var(--theme-text-heading)}
    .card-title{font-family:var(--font-text);font-size:var(--t-lead);line-height:1.25;color:var(--theme-text-heading);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
    .card-desc{font-size:var(--t-body);color:var(--theme-text);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
    .card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:8px;font-size:var(--t-meta);color:var(--theme-text-muted)}
    .card-author{font-weight:600;color:var(--theme-text-strong)}
    /* Decoration, not content: hidden from assistive tech in the markup,
       and toned up from --gray-300 (1.47:1) so it is visible at all. */
    .card-meta-dot{color:var(--theme-divider)}
    .card-avatar{width:18px;height:18px;border-radius:50%;object-fit:cover}
    .card-avatar-fallback{display:inline-flex;align-items:center;justify-content:center;background:var(--theme-fill-strong);color:var(--theme-text);font-size:9px;font-weight:700}
    .card-trending{color:var(--theme-accent-text);font-weight:600}

    /* ── Cinematic rail (movie-platform browse pattern) ──
       One horizontally-scrolling track reused by every curated row.
       Mobile/tablet: native swipe + scroll-snap, next card peeks.
       Desktop: hover-revealed prev/next arrows + edge fades. */
    .rail{position:relative}
    .rail-track{display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;
      scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
      scrollbar-width:none;scroll-padding-left:2px;
      /* Stop scroll-anchoring from nudging the rail off its start when
         late-swapped fonts/images reflow the cards on first paint. */
      overflow-anchor:none;
      /* vertical padding gives the cards' hover-lift + shadow room to
         breathe without being clipped by the scroll container. */
      padding:10px 2px 26px}
    .rail-track::-webkit-scrollbar{display:none}
    .rail-track>*{flex:0 0 330px;max-width:86vw;scroll-snap-align:start}
    .rail-sites .rail-track>*{flex-basis:340px}
    .rail-track>.empty{flex:1 1 100%;max-width:100%}
    /* Edge fades hint at off-screen cards; toggled by scroll position. */
    .rail::before,.rail::after{content:"";position:absolute;top:0;bottom:18px;
      width:56px;z-index:3;pointer-events:none;opacity:0;transition:opacity .2s}
    .rail::before{left:0;background:linear-gradient(90deg,var(--theme-bg),rgba(255,255,255,0))}
    .rail::after{right:0;background:linear-gradient(270deg,var(--theme-bg),rgba(255,255,255,0))}
    .rail.is-scrollable:not(.is-start)::before{opacity:1}
    .rail.is-scrollable:not(.is-end)::after{opacity:1}
    /* Arrow buttons: desktop affordance, hover-revealed, edge-aware. */
    .rail-arrow{position:absolute;top:46%;transform:translateY(-50%);z-index:4;
      display:flex;align-items:center;justify-content:center;width:44px;height:44px;
      border-radius:50%;border:1px solid var(--theme-border);background:rgba(255,255,255,.97);
      color:var(--theme-text-heading);box-shadow:var(--shadow-md);cursor:pointer;
      opacity:0;transition:opacity .18s,background .15s,color .15s,transform .15s}
    .rail-arrow svg{width:22px;height:22px}
    .rail-arrow-prev{left:-8px}
    .rail-arrow-next{right:-8px}
    .rail-arrow:hover{color:var(--theme-accent-text);transform:translateY(-50%) scale(1.07)}
    .rail.is-scrollable:hover .rail-arrow,.rail-arrow:focus-visible{opacity:1}
    .rail.is-start .rail-arrow-prev,.rail.is-end .rail-arrow-next{opacity:0;pointer-events:none}
    /* Touch devices: no hover, no arrows — the swipe is the affordance. */
    /* No hover, no arrows — but the edge fade is the only remaining hint
       that the row continues, so it stays. */
    @media (hover:none){.rail-arrow{display:none}}

    /* "Free to read" poster badge, overlaid on the cover. */
    .card-badge{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;
      align-items:center;gap:5px;padding:4px 10px;border-radius:100px;
      background:rgba(17,24,39,.55);-webkit-backdrop-filter:blur(8px);
      backdrop-filter:blur(8px);color:var(--theme-invert-text);font-size:var(--t-label);font-weight:600;
      letter-spacing:.02em;line-height:1}
    .card-badge svg{width:12px;height:12px}
    .card-badge.is-episode{left:auto;right:10px}
    .dsearch-kind-audio{color:var(--theme-accent-text);background:var(--theme-accent-soft)}
    .pod-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:44px 24px;text-align:center;background:var(--theme-bg-subtle);border:1px dashed var(--theme-border);border-radius:14px}
    .pod-empty svg{width:26px;height:26px;color:var(--theme-accent-text)}
    .pod-empty p{font-size:var(--t-body);color:var(--theme-text);max-width:52ch;line-height:1.55}
    .card-badge.is-episode svg{color:var(--theme-accent)}

    /* Read-only engagement row (❤ / 💬 / ⚡). Muted, zap-accented. */
    .card-stats{display:inline-flex;align-items:center;gap:12px;margin-left:auto;color:var(--theme-text-muted)}
    .card-stats .stat{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-meta);
      font-weight:600;font-variant-numeric:tabular-nums}
    .card-stats .stat svg{width:13px;height:13px}
    .card-stats .stat-like svg{color:#F43F5E}
    .card-stats .stat-comment svg{color:var(--theme-text-muted)}
    .card-stats .stat-zap{color:var(--theme-accent-text)}
    .card-stats .stat-zap svg{color:var(--theme-accent-text)}

    /* ── Article cards: byline + footer ── */
    .byline{display:flex;align-items:center;gap:10px;margin-bottom:10px;min-height:32px}
    .byline-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--theme-fill)}
    .byline-avatar-fallback{display:inline-flex;align-items:center;justify-content:center;background:var(--theme-fill-strong);color:var(--theme-text);font-size:var(--t-label);font-weight:700;font-family:var(--font-body)}
    .byline-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
    .byline-name{font-size:var(--t-meta);font-weight:700;color:var(--theme-text-heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    /* An unknown author: the key stands in for the name, in the interface
       voice and a step quieter, so it never reads as someone's chosen name. */
    .byline-avatar-anon{color:var(--theme-text-muted)}
    .byline-avatar-anon svg{width:17px;height:17px}
    .byline-anon .byline-name{font-weight:600;color:var(--theme-text)}
    .byline-nip05{font-size:var(--t-label);color:var(--theme-text-muted);font-family:var(--font-body)}
    .byline-site-row{display:flex;align-items:center;gap:6px;min-width:0}
    .byline-site{font-size:var(--t-label);color:var(--theme-accent-text);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .byline-more{flex:0 0 auto;font-size:var(--t-label);font-weight:600;line-height:1;color:var(--theme-text-muted);background:var(--theme-fill);padding:2px 6px;border-radius:100px;cursor:default}
    .card-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:12px;font-size:var(--t-meta);color:var(--theme-text-muted);border-top:1px solid var(--theme-border-subtle)}
    .card-foot-date,.card-foot-read{display:inline-flex;align-items:center;gap:4px}
    .card-foot-read svg{color:var(--theme-text-muted)}

    /* ── Voices: an endless dual-row marquee (rows scroll opposite ways) ──
       Each track holds its chips twice, so a translateX(-50%) loop is seamless.
       Hover does not pause. Reduced-motion degrades to static wrapped rows. */
    .voices-marquee{display:flex;flex-direction:column;gap:12px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
    .voices-row{overflow:hidden}
    .voices-track{display:flex;gap:10px;width:max-content;will-change:transform;animation:voices-scroll 60s linear infinite}
    .voices-row.reverse .voices-track{animation-direction:reverse;animation-duration:72s}
    @keyframes voices-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
    @media (prefers-reduced-motion:reduce){.voices-marquee{-webkit-mask-image:none;mask-image:none}.voices-track{animation:none;flex-wrap:wrap;width:auto}}
    .voice-chip{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;border:1px solid var(--theme-border);border-radius:100px;background:var(--theme-bg-card);cursor:pointer;transition:transform .15s,box-shadow .2s,border-color .15s;flex:0 0 auto}
    .voice-chip:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:var(--theme-accent)}
    .voice-chip-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--theme-fill)}
    .voice-chip-avatar.fb{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--theme-accent),var(--theme-accent-strong));color:var(--theme-invert-text);font-family:var(--font-brand);font-size:var(--t-meta)}
    .voice-chip-name{font-size:var(--t-body);font-weight:600;color:var(--theme-text-heading);white-space:nowrap}
    .voice-chip-count{font-size:var(--t-label);font-weight:600;color:var(--theme-text-muted);background:var(--theme-fill);border-radius:100px;padding:1px 8px;flex-shrink:0}

    /* ── Author drawer (slide-over) ──
       Opening a "voice" slides a dossier in from the right: a banner with a
       faint network grid, then identity rendered as terminal metadata
       (nip05 + npub), stats, and the author's writing — each row tagged with
       its curated-vs-network provenance. The page stays visible, dimmed. */
    .adrawer-scrim{position:fixed;inset:0;background:rgba(17,24,39,.42);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s;z-index:var(--layer-overlay)}
    .adrawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--theme-bg-card);box-shadow:-32px 0 64px rgba(17,24,39,.18);transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);z-index:var(--layer-overlay);display:flex;flex-direction:column}
    .adrawer:focus{outline:none}
    .adrawer-open .adrawer{transform:translateX(0)}
    .adrawer-open .adrawer-scrim{opacity:1;pointer-events:auto}
    .adrawer-scroll{overflow-y:auto;overscroll-behavior:contain;height:100%}
    @media (prefers-reduced-motion: reduce){.adrawer,.adrawer-scrim{transition:none}}

    .adrawer-banner{position:relative;height:120px;background:radial-gradient(140% 120% at 85% -20%,rgba(247,147,26,.5),transparent 55%),linear-gradient(135deg,var(--gray-800),var(--gray-900));overflow:hidden}
    .adrawer-banner img{width:100%;height:100%;object-fit:cover}
    .adrawer-banner::after{content:"";position:absolute;inset:0;opacity:.14;background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent);pointer-events:none}
    .adrawer-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;background:rgba(17,24,39,.55);color:var(--theme-invert-text);font-size:var(--t-body);line-height:1;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);z-index:1}
    .adrawer-close:hover{background:rgba(17,24,39,.78)}

    .adrawer-id{padding:0 22px 16px;margin-top:-30px;position:relative}
    .adrawer-avatar{width:72px;height:72px;border-radius:50%;border:3px solid var(--theme-bg-card);box-shadow:var(--shadow-lg);object-fit:cover;display:flex;align-items:center;justify-content:center;font-family:var(--font-brand);font-size:28px;color:var(--theme-invert-text);background:linear-gradient(135deg,var(--theme-accent),var(--theme-accent-strong))}
    .adrawer-name{font-family:var(--font-brand);font-size:var(--t-title);line-height:1.1;margin-top:12px;color:var(--theme-text-heading)}
    .adrawer-ident{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px}
    .adrawer-nip05{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-meta);font-weight:600;color:var(--theme-text-strong);min-width:0}
    .adrawer-nip05 svg{width:14px;height:14px;color:var(--theme-accent-text);flex-shrink:0}
    .adrawer-nip05 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .adrawer-npub{font-size:var(--t-label);color:var(--theme-text-muted);background:var(--theme-fill);border:1px solid var(--theme-border);border-radius:6px;padding:2px 7px;cursor:pointer;font-family:var(--font-body)}
    .adrawer-npub:hover{border-color:var(--theme-accent);color:var(--theme-accent-text)}
    .adrawer-npub.copied{border-color:#22C55E;color:#16A34A}
    .adrawer-bio{font-size:var(--t-body);color:var(--theme-text);line-height:1.55;margin-top:14px}
    .adrawer-links{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
    .adrawer-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--theme-border);border-radius:100px;font-size:var(--t-meta);font-weight:600;color:var(--theme-text-strong);background:var(--theme-bg-card);cursor:pointer;text-decoration:none}
    .adrawer-chip:hover{border-color:var(--theme-border-strong)}
    .adrawer-chip.is-tip{border-color:rgba(247,147,26,.4);color:var(--theme-accent-text);background:var(--theme-accent-soft)}
    .adrawer-chip.copied{border-color:#22C55E;color:#16A34A}
    .adrawer-chip svg{width:14px;height:14px}

    .adrawer-stats{display:flex;margin:16px 22px 0;border:1px solid var(--theme-border);border-radius:12px;overflow:hidden}
    .adrawer-stat{flex:1;padding:12px 10px;text-align:center}
    .adrawer-stat + .adrawer-stat{border-left:1px solid var(--theme-border)}
    .adrawer-stat .n{font-family:var(--font-text);font-size:var(--t-lead);color:var(--theme-text-heading)}
    .adrawer-stat .l{font-size:var(--t-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--theme-text-muted);margin-top:2px}

    .adrawer-actions{display:flex;gap:10px;padding:16px 22px 4px}
    .adrawer-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:42px;border-radius:9px;font-size:var(--t-meta);font-weight:600;cursor:pointer;font-family:var(--font-body);text-decoration:none}
    .adrawer-btn-primary{background:var(--theme-invert-bg);color:var(--theme-invert-text)!important;border:0}
    .adrawer-btn-primary:hover{background:var(--theme-invert-bg-hover)}
    .adrawer-btn svg{width:15px;height:15px}

    .adrawer-secthead{display:flex;align-items:center;gap:10px;padding:22px 22px 4px}
    .adrawer-secthead .e{font-size:var(--t-label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--theme-accent-text)}
    .adrawer-secthead .rule{flex:1;height:1px;background:var(--theme-fill-strong)}
    .adrawer-feed,.adrawer-blogs{padding:6px 12px 10px}
    .adrawer-blogs{padding-bottom:22px}
    .adrawer-item{display:flex;gap:13px;padding:11px 10px;border-radius:12px;cursor:pointer;transition:background .15s;text-decoration:none}
    .adrawer-item:hover{background:var(--theme-bg-subtle)}
    .adrawer-thumb{flex:0 0 56px;height:56px;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:var(--font-brand);font-size:17px;color:rgba(255,255,255,.95)}
    .adrawer-thumb img{width:100%;height:100%;object-fit:cover}
    .adrawer-itembody{min-width:0;flex:1}
    .adrawer-itemtitle{font-family:var(--font-text);font-size:var(--t-body);line-height:1.22;color:var(--theme-text-heading);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .adrawer-itemmeta{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:var(--t-label);color:var(--theme-text-muted)}
    .adrawer-itemmeta svg{width:12px;height:12px;vertical-align:-1px}
    .adrawer-itemmeta .zap{color:var(--theme-accent-text);font-weight:600;display:inline-flex;align-items:center;gap:3px}
    .adrawer-itemmeta .sep{color:var(--theme-divider)}
    .adrawer-prov{display:inline-flex;align-items:center;font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:5px;margin-top:7px}
    .adrawer-prov.site{background:var(--theme-accent-soft);color:var(--theme-accent-text)}
    .adrawer-prov.net{background:var(--theme-fill);color:var(--theme-text-muted);border:1px solid var(--theme-border)}
    .adrawer-loading,.adrawer-empty{padding:32px 22px;text-align:center;color:var(--theme-text-muted);font-size:var(--t-meta)}

    /* ── Nav search trigger ── */
    .nav-search{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 11px;background:var(--theme-bg-subtle);border:1px solid var(--theme-border);border-radius:8px;color:var(--theme-text-muted);cursor:pointer;font-family:var(--font-body);transition:all .15s}
    .nav-search:hover{border-color:var(--theme-border-strong);color:var(--theme-text-strong)}
    .nav-search svg{width:15px;height:15px}
    .nav-search-label{font-size:var(--t-meta);font-weight:500}
    .nav-search-kbd{font-size:var(--t-label);font-weight:600;color:var(--theme-text-muted);border:1px solid var(--theme-border-strong);border-radius:4px;padding:0 5px;line-height:16px;background:var(--theme-bg-card)}

    /* ── Search overlay (VitePress-style) ── */
    .dsearch{position:fixed;inset:0;z-index:var(--layer-overlay)}
    .dsearch[hidden]{display:none}
    .dsearch-scrim{position:absolute;inset:0;background:rgba(17,24,39,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
    .dsearch-panel{position:absolute;top:84px;left:50%;transform:translateX(-50%);width:min(640px,92vw);max-height:74vh;background:var(--theme-bg-card);border:1px solid var(--theme-border);border-radius:16px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;animation:dsearch-in .16s ease-out}
    @keyframes dsearch-in{from{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
    @media (prefers-reduced-motion: reduce){.dsearch-panel{animation:none}}
    .dsearch-bar{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--theme-border-subtle)}
    .dsearch-icon{width:20px;height:20px;color:var(--theme-text-muted);flex-shrink:0}
    .dsearch-input{flex:1;border:0;outline:none;font-family:var(--font-body);font-size:var(--t-lead);color:var(--theme-text-heading);background:transparent}
    .dsearch-input::placeholder{color:var(--theme-text-muted)}
    .dsearch-esc{flex-shrink:0;font-size:var(--t-label);font-weight:600;color:var(--theme-text-muted);border:1px solid var(--theme-border-strong);border-radius:6px;padding:3px 8px;background:var(--theme-bg-subtle);cursor:pointer;font-family:var(--font-body);text-transform:uppercase;letter-spacing:.04em}
    .dsearch-esc:hover{color:var(--theme-text-strong);border-color:var(--theme-divider)}
    .dsearch-results{overflow-y:auto;padding:8px}
    .dsearch-group-label{font-size:var(--t-label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--theme-text-muted);padding:14px 12px 6px}
    .dsearch-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;text-decoration:none}
    .dsearch-item:hover,.dsearch-item.active{background:var(--theme-accent-soft)}
    .dsearch-thumb{flex:0 0 38px;height:38px;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:var(--font-brand);font-size:14px;color:rgba(255,255,255,.95)}
    .dsearch-thumb.round{border-radius:50%}
    .dsearch-thumb img{width:100%;height:100%;object-fit:cover}
    .dsearch-item-body{min-width:0;flex:1}
    .dsearch-item-title{font-size:var(--t-body);font-weight:600;color:var(--theme-text-heading);overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:1.4}
    .dsearch-item-sub{font-size:var(--t-label);color:var(--theme-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
    .dsearch-kind{flex-shrink:0;font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--theme-text-muted);background:var(--theme-fill);border-radius:5px;padding:2px 7px}
    .dsearch-empty,.dsearch-hint{padding:40px 20px;text-align:center;color:var(--theme-text-muted);font-size:var(--t-body)}
    @media (max-width:560px){.dsearch-panel{top:0;left:0;transform:none;width:100vw;max-height:100vh;height:100%;border-radius:0}.nav-search-label,.nav-search-kbd{display:none}.nav-search{padding:0 9px}}


    .empty{padding:48px;text-align:center;background:var(--theme-bg-subtle);border:1px dashed var(--theme-border);border-radius:14px;color:var(--theme-text-muted);font-size:var(--t-body)}
    @keyframes spin{to{transform:rotate(360deg)}}

    /* ── Load-more button: spinner while a batch is in flight ── */
    .net-more-btn.is-loading{pointer-events:none;opacity:.6}


    /* ── Back to top ── */
    .to-top{position:fixed;bottom:24px;right:24px;width:46px;height:46px;border-radius:50%;border:1px solid var(--theme-border);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--shadow-md);color:var(--theme-text-strong);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s,border-color .15s,color .15s;z-index:var(--layer-chrome)}
    .to-top.show{opacity:1;transform:translateY(0)}
    .to-top:hover{border-color:var(--theme-accent);color:var(--theme-accent-text)}
    .to-top svg{width:18px;height:18px}
    @media (prefers-reduced-motion: reduce){.to-top{transition:opacity .2s}}

    /* ── Touch targets ──
       Apple's 44pt floor, keyed to the *pointer* rather than the viewport
       width: the rule is about fingers, and a narrow desktop window still has
       a mouse. Controls are listed by name rather than blanket-applied, so
       links inside prose keep their natural line height. Measured at 390px
       before this: 35 of 159 controls were under 44px. */
    @media (pointer:coarse){
      .skip,.nav-brand,.nav-toggle,.rail-tab,.topic-chip,
      .section-action,.footer-logo-link,.footer-col a,.net-search{min-height:44px}
      .skip,.nav-brand,.nav-toggle,.rail-tab,.topic-chip,
      .section-action,.footer-logo-link,.footer-col a{
        display:inline-flex;align-items:center}
      .nav-toggle{min-width:44px;justify-content:center}
      .footer-col a{padding-block:2px}
      /* Safari zooms the page when a focused input is under 16px, which
         leaves the reader zoomed in with no way back. */
      input,select,textarea{font-size:16px}
    }

    /* ── Footer ── */
    .footer{padding:64px 0 24px;border-top:1px solid var(--theme-border);background:var(--theme-bg-subtle);margin-top:80px}
    .footer-grid{display:grid;grid-template-columns:1.2fr 2fr;gap:48px;margin-bottom:40px}
    .footer-logo{height:24px;margin-bottom:14px}
    .footer-tag{font-size:var(--t-meta);color:var(--theme-text-muted);line-height:1.6;max-width:280px}
    .footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
    .footer-col h4{font-size:var(--t-label);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--theme-text-heading);margin-bottom:14px}
    .footer-col a{display:block;font-size:var(--t-meta);color:var(--theme-text-muted);padding:3px 0;transition:color .15s}
    .footer-col a:hover{color:var(--theme-accent-text)}
    /* Where the link goes, said quietly next to the name it belongs to. */
    .footer-col-note{color:var(--theme-divider);font-size:var(--t-label)}
    .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:24px;border-top:1px solid var(--theme-border);font-size:var(--t-meta);color:var(--theme-text-muted)}

    /* ── Responsive ── */
    @media (max-width:768px){
      .hero{padding:120px 0 56px}
      .section{padding:56px 0}
      .footer-grid{grid-template-columns:1fr;gap:32px}
      .footer-cols{grid-template-columns:repeat(3,1fr);gap:20px}
      .nav-links{display:none}
      .nav-links.open{display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:var(--theme-bg-card);padding:18px 24px;border-bottom:1px solid var(--theme-border);gap:14px;align-items:stretch;box-shadow:0 8px 24px rgba(0,0,0,.06)}
      .nav-links.open .lang-toggle{align-self:flex-start}
      .nav-toggle{display:block}
      .section-head{flex-direction:column;align-items:flex-start}
      .rail-tabs{align-self:flex-start}
    }
    @media (max-width:640px){
      /* On phones every rail shows one card with the next peeking in. */
      .rail-track>*,.rail-sites .rail-track>*{flex-basis:80vw;max-width:80vw}
    }
    @media (max-width:520px){
      .footer-cols{grid-template-columns:1fr;gap:24px}
      .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}
    }

    /* Honor reduced-motion preference. */
    @media (prefers-reduced-motion:reduce){
      *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    }

/* Persistent Discover navigation: the same destinations at both widths. */
:root{--discover-navigation-height:0px}
.listener-nav .nav-inner{gap:24px;min-height:76px}
.discover-wordmark{font:750 29px/1 var(--font-text);letter-spacing:-1px;white-space:nowrap}.discover-wordmark>span{color:var(--theme-accent)}
.listener-nav .nav-links{display:flex;flex:1;justify-content:center;gap:20px}
.listener-nav .nav-links>a{display:flex;align-items:center;min-height:44px;position:relative;white-space:nowrap}
.listener-nav .nav-links>a[aria-current]{color:var(--orange-text);font-weight:700}
.listener-nav .nav-links>a[aria-current]::after{content:'';height:3px;background:var(--orange);border-radius:2px;position:absolute;bottom:0;inset-inline:0}
.listener-nav .nav-search{min-height:44px;border-radius:24px;flex:0 1 260px}.listener-nav .nav-search kbd{margin-left:auto}
.nav-tools{display:flex;align-items:center;flex-wrap:wrap;gap:12px;min-width:0}.listener-nav .lang-toggle button{min-height:44px;min-width:36px}
.nav-account{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;color:var(--theme-text-heading)}.nav-account svg{width:22px;height:22px}
.discover-tabs{display:none}
@media(max-width:1000px) and (min-width:768px){.listener-nav .nav-inner{gap:12px}.listener-nav .nav-links{gap:12px}.listener-nav .nav-search-label,.listener-nav .nav-search kbd,.nav-account>span{display:none}.listener-nav .nav-search{flex:0 0 44px;justify-content:center}.listener-nav .nav-product{display:none}}
@media(max-width:767px){
:root{--discover-navigation-height:calc(64px + env(safe-area-inset-bottom));--standup-player-safe-area:0px}
body{padding-bottom:calc(var(--discover-navigation-height) + var(--standup-player-height,0px) + 12px)}
.listener-nav .nav-inner{gap:8px;min-height:64px}.listener-nav .nav-links,.listener-nav .nav-search{display:none}.listener-nav .nav-brand{gap:8px}.listener-nav .discover-wordmark{font-size:23px}.nav-tools{gap:4px}.listener-nav .lang-toggle{border:0}.listener-nav .lang-toggle button{min-width:32px;padding-inline:4px}.nav-account>span{display:none}
.discover-tabs{position:fixed;inset:auto 0 0;z-index:44;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:var(--discover-navigation-height);padding:4px 8px calc(4px + env(safe-area-inset-bottom));background:var(--theme-bg-card);border-top:1px solid var(--theme-border)}
.discover-tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;color:var(--theme-text-muted);font-size:12px;text-decoration:none}.discover-tabs svg{width:24px;height:24px}.discover-tabs a[aria-current]{color:var(--orange-text);font-weight:700}.discover-tabs a:focus-visible{outline:2px solid var(--orange-text);outline-offset:-2px;border-radius:8px}
}
@media(min-width:1001px){.listener-nav .nav-search-label{display:inline;white-space:nowrap}.listener-nav .nav-search{background:var(--theme-bg-subtle);border:1px solid var(--theme-border)}}
@media(max-width:767px){.listener-nav .nav-tools{gap:6px}.listener-nav .nav-inner{min-width:0}}

/* Discover composition. Opaque editorial surfaces; material only on chrome.
   Shared catalogue behavior remains in discover.css and listener components. */
:root{--discover-gutter:32px}
/* Public Tailwind also defines .container at each breakpoint. Keep the
   editorial measure consistent instead of shrinking tablet content twice. */
body .container{max-width:1280px;padding-inline:var(--discover-gutter)}
.section{padding-block:52px;border-top:0}
.section-head{align-items:flex-end;gap:12px 24px;margin-bottom:20px}
.section-head-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px 12px;align-self:flex-end;min-width:0;max-width:100%;min-height:44px}
.section-head-actions .section-action,.section-head-actions .finds-next{margin:0}
.section-eyebrow{margin-bottom:6px;font:650 11px/1.5 var(--font-text);letter-spacing:.1em}
.section-title{font:680 clamp(25px,2.3vw,30px)/1.18 var(--font-text);letter-spacing:-.8px;text-transform:none}
.section-title,.card-title{overflow-wrap:anywhere;text-wrap:pretty}
.section-blurb{margin:-8px 0 24px;max-width:65ch;color:var(--theme-text);font:15px/1.6 var(--font-text)}
.section-action{display:inline-flex;align-items:center;min-height:44px;font:550 14px/1.4 var(--font-text);color:var(--theme-accent-text)}
.section-action:hover{text-decoration:underline;text-underline-offset:4px}

/* Masthead has a consistent 72/64px baseline shared with the reader. */
.nav{position:sticky;top:0;width:100%;max-width:none;margin:0;border:0;border-bottom:1px solid #242a1f14;border-radius:0;background:rgba(255,255,255,.96);box-shadow:0 2px 12px #242a1f06}
@supports(backdrop-filter:blur(16px)){.nav{background:rgba(255,255,255,.9);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15)}}
.nav.scrolled{box-shadow:0 4px 20px #242a1f0f}
.nav .nav-inner{min-height:71px;padding-inline:var(--discover-gutter);gap:20px;flex-wrap:wrap}
.listener-nav .nav-links{gap:4px}.listener-nav .nav-links>a{justify-content:center;min-width:88px;padding:10px 16px;border-radius:999px;font-weight:600}
.listener-nav .nav-links>a[aria-current]{background:#e3ebe5;color:#183537}.listener-nav .nav-links>a[aria-current]::after{display:none}
.standup-wordmark{font:32px var(--font-brand);letter-spacing:-.5px;white-space:nowrap}
.standup-wordmark>span{color:var(--theme-accent)}
.nav-product{margin-left:12px;font:650 12px var(--font-text);color:var(--theme-accent-text)}
.nav-links{gap:4px}
.nav-links>a,.nav-search,.lang-toggle button{display:inline-flex;align-items:center;min-height:44px}
.nav-links>a{padding:10px 12px;border-radius:14px;letter-spacing:0}
.nav-links>a:hover,.nav-search:hover{background:#242a1f0b}
.nav-links>a[aria-current="location"]{color:var(--theme-accent-text);background:var(--theme-accent-soft)}
.nav-links .nav-cta{margin-left:8px;padding-inline:18px;background:var(--theme-invert-bg);color:var(--theme-invert-text)!important;border:0}
.nav-links .nav-cta:hover{background:var(--theme-invert-bg-hover)}
.nav-search{border:0;border-radius:14px;padding-inline:12px;background:transparent}
.nav-search svg{width:19px;height:19px}
.listener-nav [data-listener-account] .public-sign-in,.listener-nav .nav-account{min-height:44px;padding:8px 14px;border:1px solid var(--theme-border);border-radius:999px;background:transparent;color:var(--theme-text-heading)}
.listener-nav [data-listener-account] .public-sign-in:hover,.listener-nav .nav-account:hover{background:var(--theme-bg-subtle)}
.nav-search-kbd,.nav-search-label{display:none}
.lang-toggle{margin-left:6px;padding:3px;gap:2px;border:0;border-radius:14px;background:#242a1f09}
.lang-toggle button{min-height:44px;min-width:44px;border-radius:11px;padding-inline:9px}
.lang-toggle button.active{background:white;color:var(--theme-text-heading);box-shadow:0 1px 5px #0000000d}
.nav-toggle{min-width:44px;min-height:44px;border-radius:14px}
.nav.has-inline-search .nav-search{flex:0 0 44px;width:44px;min-width:44px;justify-content:center;padding:0;border:0;background:transparent;box-shadow:none}
.nav.has-inline-search .nav-search-label,.nav.has-inline-search .nav-search kbd{display:none}

/* A short welcome, visible topic destinations and a substantial search field. */
.discovery-opening{padding:28px 0 12px}
.discovery-opening>.container{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);align-items:start;gap:16px 40px}
.discovery-welcome{max-width:none;margin:0;text-align:left}
.discovery-welcome>*{min-width:0}
.discovery-welcome h1{margin:0 0 8px;font:700 clamp(28px,2.6vw,36px)/1.14 var(--font-text);letter-spacing:-1px}
.discovery-subtitle{max-width:49ch;font:14px/1.55 var(--font-text);color:var(--theme-text)}
.hero-search{position:relative;z-index:70;width:100%;max-width:none;margin:0}
.hero-search-field{position:relative}
.hero-search-input{height:48px;padding:0 52px 0 42px;border:1px solid var(--discover-control-border);border-radius:14px;background:var(--discover-surface);font:16px var(--font-text);box-shadow:none;transition:border-color .15s}
.hero-search-input:focus,.hero-search-input:focus:not(:focus-visible){outline:2px solid var(--theme-accent-text);outline-offset:3px;border-color:var(--theme-accent-text);box-shadow:var(--discover-shadow)}
.hero-search-icon{left:15px;width:18px;height:18px}
.hero-search-submit{position:absolute;right:2px;top:2px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:11px;background:transparent;color:var(--theme-text-strong);cursor:pointer}
.hero-search-submit:hover{background:var(--theme-bg-subtle);color:var(--theme-accent-text)}
.hero-search-submit svg{width:21px;height:21px}
.hero-search-results{position:absolute;inset-inline:0;top:calc(100% + 10px);max-height:min(480px,60vh);overflow-y:auto;overscroll-behavior:contain;padding:8px;border:var(--discover-edge);border-radius:20px;background:var(--discover-surface);box-shadow:var(--shadow-lg);text-align:left}
.hero-search-results[hidden]{display:none}
.discovery-interests{display:flex;align-items:center;flex-wrap:wrap;grid-column:1/-1;gap:8px;margin-top:2px}
.discovery-interests>a,.discovery-interests .topic-chip{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border:0;border-radius:999px;background:transparent;color:var(--theme-text-strong);font:550 14px/1.4 var(--font-text)}
.discovery-interests>a:hover{color:var(--theme-accent-text)}
.discovery-interests .topic-chip{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.interests-label{font:500 13px/1.4 var(--font-text);color:var(--theme-text)}
.interest-links{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.interest-all{display:inline-flex;align-items:center;min-height:44px;padding:9px 12px;border-radius:13px;color:var(--theme-accent-text);font:550 14px/1.4 var(--font-text)}
.interest-all:hover{text-decoration:underline;text-underline-offset:4px}

/* Stories without artwork rely on real typography, not invented photographs. */
.editorial-grid,#fresh>.container>.editorial-grid,.net-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.editorial-grid .article-card,.net-grid .article-card{display:flex;flex-direction:column;min-width:0;border:var(--discover-edge);border-radius:var(--discover-radius);background:var(--discover-surface);overflow:hidden;box-shadow:0 2px 5px #22271903;transform:none;transition:border-color .15s,box-shadow .15s}
.editorial-grid .article-card:hover,.net-grid .article-card:hover{transform:none;border-color:#242a1f26;box-shadow:var(--discover-shadow)}
.editorial-grid .card-body,.net-grid .article-card .card-body{display:flex;flex-direction:column;flex:1 1 auto;gap:10px;min-width:0;padding:22px 22px 14px}
.editorial-grid .card-title,.net-grid .article-card .card-title{display:block;overflow:visible;font:600 23px/1.25 var(--font-text);letter-spacing:-.55px}
.editorial-grid .card-desc,.net-grid .article-card .card-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0;font:15px/1.6 var(--font-text);color:var(--theme-text)}
.editorial-grid .card-cover,.net-grid .article-card .card-cover{width:100%;aspect-ratio:1.91!important;min-height:0;border-radius:0}
.editorial-grid .is-text-story .card-cover{display:none}
.editorial-grid .byline,.net-grid .byline{margin-bottom:0;gap:8px}
.byline-name{font:650 14px/1.3 var(--font-text);white-space:normal;overflow-wrap:anywhere}
.byline-nip05{min-width:0;max-width:100%;overflow-wrap:anywhere}
.byline-site{font:550 12px/1.4 var(--font-text);white-space:normal}
.byline-site-row{flex-wrap:wrap}
.byline-avatar{width:30px;height:30px}
.byline-text{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:2px 8px}
.editorial-grid .byline-nip05{display:none}
.card-foot{padding-top:4px;margin-top:auto;border:0;gap:8px;color:var(--theme-text-muted);font:13px/1.45 var(--font-text)}
.card-foot svg{width:14px;height:14px}
.article-card:hover .card-title,.site-card:hover .card-title{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
/* The whole discovery surface: an expressive invitation, then artwork-led
   subject shelves. Public stories and private continuation retain one owner. */
.discover-intro.container{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px;width:calc(100% - 64px);max-width:1216px;min-height:408px;margin:0 auto 40px;padding:44px 48px 52px;border-radius:28px;background:var(--discover-feature);color:var(--discover-feature-text)}
.discover-intro-copy{position:relative;z-index:1;min-width:0;max-width:570px}
.discover-intro:not(:has(.discover-deck)){grid-template-columns:minmax(0,1fr)}
.discover-intro h1{margin:0 0 22px;font:400 clamp(48px,5.3vw,76px)/1.02 var(--font-editorial);letter-spacing:-2.4px;overflow-wrap:anywhere;color:var(--discover-feature-text)}
.discover-intro-copy>p{max-width:42ch;margin:0 0 24px;color:#d4dfd8;font:400 17px/1.65 var(--font-text);text-wrap:pretty}
.discover-intro-action{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:48px;padding:12px 22px;border-radius:999px;background:#f4ca82;color:#172b2a;font:650 14px/1.5 var(--font-text);text-decoration:none}
.discover-intro-action:hover{background:#ffda9d}
.discover-intro-action:focus-visible,.discover-deck-card:focus-visible{outline:3px solid #ffe2ab;outline-offset:5px}
.discover-deck{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;min-width:0;height:288px;padding:24px 16px}
.discover-deck-card{--deck-paper:#d9e4d9;position:relative;display:flex;flex-direction:column;justify-content:flex-end;flex:0 0 44%;min-width:0;min-height:224px;margin-inline:-7%;padding:18px;border:1px solid #ffffff18;border-radius:16px;background:var(--deck-paper);box-shadow:0 14px 30px -14px #0009;color:#172b2a;text-decoration:none;transform-origin:50% 85%;overflow:hidden}
.discover-deck-card:nth-child(2){--deck-paper:#f4ca82;z-index:1;margin-top:-24px}
.discover-deck-card:nth-child(3){--deck-paper:#d8d3eb}
.discover-deck-card:only-child{flex-basis:60%;max-width:240px;margin:0;transform:none}
.deck-art{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;min-height:126px;margin:-18px -18px 16px;overflow:hidden}
.deck-art img{position:relative;z-index:1;width:100%;height:132px;object-fit:contain}
.deck-art.is-letterboxed::before{content:"";position:absolute;inset:-12%;background:var(--fig-bg) center/cover;filter:blur(20px) saturate(.8);opacity:.3}
.deck-art.is-failed img{visibility:hidden}
.deck-art.is-failed::before{content:"↗";position:absolute;inset:0;display:grid;place-items:center;background:none;filter:none;opacity:1;font:400 60px/1 var(--font-editorial);color:#172b2a80}
.deck-topic{position:relative;display:block;font:650 clamp(16px,1.6vw,22px)/1.2 var(--font-text);letter-spacing:-.4px;overflow-wrap:anywhere}
.discover-deck-card:not(:has(img)) .deck-art::before{content:'↗';font:400 60px/1 var(--font-editorial);color:#172b2a80}
@media(min-width:1100px){.discover-deck-card:last-child .deck-topic{text-align:right}.discover-deck-card:nth-child(2) .deck-topic{text-align:center}}
@media(min-width:1100px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .discover-deck-card{transition:transform 240ms cubic-bezier(.2,.8,.2,1),box-shadow 200ms ease}
 .discover-deck-card:first-child{transform:translateY(10px) rotate(-10deg)}
 .discover-deck-card:last-child{transform:translateY(10px) rotate(10deg)}
 .discover-deck-card:hover,.discover-deck-card:focus-visible{z-index:3;transform:translateY(-10px) rotate(0deg);box-shadow:0 22px 32px -16px #000a}
 .discover-deck-card:first-child:is(:hover,:focus-visible){transform:translate(-20px,-10px) rotate(0deg)}
 .discover-deck-card:last-child:is(:hover,:focus-visible){transform:translate(20px,-10px) rotate(0deg)}
 .discover-deck-card:focus-visible{z-index:4}
 .discover-deck-card:only-child:is(:hover,:focus-visible){transform:translateY(-6px)}
}
.discover-returning:empty{display:none}
.discover-returning:has(>.discover-continue){padding-block:0 12px}
.discover-composition{padding-top:24px}
.discover-lead{padding-block:0 36px}
.discover-edition-label{margin:0 0 18px;font:700 25px/1.3 var(--font-text);color:var(--theme-text-heading);letter-spacing:-.7px}
#fresh .article-card.is-lead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:32px;min-width:0;padding:0;border:0;border-radius:0;background:transparent;overflow:visible;box-shadow:none}
#fresh .article-card.is-lead>.card-body{display:flex;flex-direction:column;grid-column:2;grid-row:1;padding:12px 0 4px;justify-content:center;gap:14px;min-width:0}
#fresh .article-card.is-lead .card-title{display:block;overflow:visible;max-width:30ch;margin:0;font:650 clamp(25px,2.5vw,34px)/1.18 var(--font-text);letter-spacing:-.9px;text-wrap:pretty}
#fresh .article-card.is-lead .card-desc{max-width:58ch;margin:0;font:15px/1.6 var(--font-text);color:var(--theme-text)}
#fresh .article-card.is-lead>.card-cover{grid-column:1;grid-row:1/3;align-self:stretch;width:100%;height:100%;min-height:260px;max-height:350px;aspect-ratio:1.65!important;border-radius:18px}
#fresh .article-card.is-lead>.card-cover>img{position:absolute;inset:0;width:100%;height:100%}
#fresh .article-card.is-lead>.card-participation{grid-column:2;grid-row:2;margin:0}
#fresh .article-card.is-lead.is-text-story{grid-template-columns:minmax(0,1fr)}
#fresh .article-card.is-lead.is-text-story>.card-body{grid-column:1;max-width:900px}
#fresh .article-card.is-lead.is-text-story>.card-participation{grid-column:1}
/* Text-first stories have their own honest sleeve, derived from the source
   title. Only the full linked caption is exposed to assistive technology. */
.story-poster{--poster-bg:#d9e4d9;--poster-ink:#183537;display:flex;flex-direction:column;justify-content:space-between;gap:12px;padding:24px;background:var(--poster-bg);color:var(--poster-ink);isolation:isolate}
.story-poster.poster-tone-1{--poster-bg:#243f43;--poster-ink:#f0f1dc}
.story-poster.poster-tone-2{--poster-bg:#e4d8ce;--poster-ink:#4a2c32}
.story-poster-format{position:relative;font:650 10px/1.5 var(--font-text);letter-spacing:.12em;text-transform:uppercase}
.story-poster-title{position:relative;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;max-width:22ch;font:400 clamp(22px,2.2vw,30px)/1.1 var(--font-editorial);letter-spacing:-.5px}
.story-poster-rule{position:relative;display:block;width:32px;height:2px;background:currentColor;opacity:.65}
.card-utility-row{grid-column:1/-1;grid-row:3}
#fresh .article-card.is-lead.is-text-story>.card-body:not(:has(.card-desc)){grid-template-columns:minmax(0,1fr)}
.card-utility-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.card-utility-row .card-foot{margin:0;min-width:0}
.card-primary-action{position:relative;z-index:2;flex-shrink:0;max-width:100%}
.card-primary-action .audio-recording-play,.card-listen-fallback{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;border-radius:50%;background:var(--theme-invert-bg);color:var(--theme-invert-text)}
.card-listen-fallback{padding:8px 12px;border-radius:12px;font:550 13px/1.4 var(--font-text)}
.card-listen-fallback svg{width:17px;height:17px}

/* Subject shelves replace the old three vertical newspaper columns. The
   shared native rail owns arrows, reduced motion, scrolling and edge states. */
.discover-worlds{display:flex;flex-direction:column;gap:36px;padding-block:8px 36px}
.discover-world{min-width:0}
.world-front,.world-support{display:contents}
.discover-world-heading{min-height:44px;margin:0 112px 16px 0}
.discover-world-heading h2{margin:0;font:700 25px/1.3 var(--font-text);letter-spacing:-.7px;overflow-wrap:anywhere}
.discover-world-heading h2 a{display:inline-flex;align-items:center;gap:12px;min-height:44px;max-width:100%;color:var(--theme-text-heading)}
.world-topic-name{min-width:0;overflow-wrap:anywhere}
.world-topic-arrow{color:var(--theme-text);font:22px/1.4 var(--font-text)}
.rail-world-stories{overflow:visible}
.rail-world-stories .rail-viewport{overflow:visible}
.rail-world-stories .rail-viewport::before,.rail-world-stories .rail-viewport::after{display:none}
.rail-world-stories .rail-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:28px;padding:0 0 8px;overflow-x:auto;scroll-padding:2px}
.rail-world-stories .rail-arrow{display:none;top:-60px;bottom:auto;left:auto;right:0;width:44px;height:44px;min-width:44px;min-height:44px;border:1px solid var(--theme-border);border-radius:50%;background:var(--theme-bg-card);box-shadow:none;opacity:1;transform:none}
.rail-world-stories .rail-arrow-prev{right:52px}
.rail-world-stories.is-scrollable .rail-arrow{display:grid}
.rail-world-stories .rail-arrow:hover{transform:none}
.rail-world-stories .rail-arrow:disabled{opacity:.35;pointer-events:auto}
.discover-world .article-card,.discover-composition #network .article-card{display:flex;flex-direction:column;gap:0;min-width:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;transform:none}
.discover-world .article-card:hover,.discover-composition #network .article-card:hover{background:transparent;box-shadow:none;transform:none}
.discover-world .card-cover,.discover-composition #network .article-card .card-cover{display:flex;position:relative;width:100%;height:auto;min-height:0;margin:0 0 14px;aspect-ratio:1.55!important;border-radius:16px}
.discover-world .card-cover>img,.discover-composition #network .article-card .card-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.discover-world .card-body,.discover-composition #network .article-card .card-body{display:flex;flex-direction:column;gap:9px;min-width:0;padding:0}
.discover-world .card-title,.discover-composition #network .article-card .card-title{display:block;overflow:visible;max-width:none;margin:0;font:650 21px/1.3 var(--font-text);letter-spacing:-.45px;text-wrap:pretty}
.discover-world .byline{gap:8px;min-height:32px;margin:0}
.discover-world .byline-avatar{width:24px;height:24px}
.discover-world .byline-name{font-size:13px;font-weight:500}
.discover-world .byline-site{font-size:12px}
.discover-world .card-foot{margin:0;padding:0;font-size:12px}
.discover-world .card-participation,.discover-composition #network .card-participation{width:auto;margin:0;min-height:44px}
.discover-world .card-link:focus-visible::after{border-radius:16px;outline-offset:-3px}

/* An actual private Continue entry owns the returning reader's opening.
   Condense the invitation, not the public stories or their topic links. */
.discover-composition:has(.discover-returning>.discover-continue) .discover-intro{grid-template-columns:minmax(0,1fr);min-height:0;padding-block:20px 28px}
.discover-composition:has(.discover-returning>.discover-continue) .discover-intro h1{margin-bottom:12px;font-size:32px;line-height:1.15;letter-spacing:-.8px}
.discover-composition:has(.discover-returning>.discover-continue) .discover-intro-copy>p{max-width:60ch;margin-bottom:16px;font-size:16px;line-height:1.5}
.discover-composition:has(.discover-returning>.discover-continue) .discover-deck{display:none}

/* People and public collections are visual destinations in the same
   library of ideas, rather than another pair of dense utility lists. */
.discover-routes{display:block;padding-block:28px 40px}
.discover-routes h2{margin:0;font:700 25px/1.3 var(--font-text);letter-spacing:-.7px}
.discover-people{margin-bottom:36px}
.discover-people-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:20px}
.discover-people .voice-chip{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;min-width:0;min-height:120px;padding:12px;border:0;border-radius:16px;background:transparent;box-shadow:none;white-space:normal;text-align:center}
.discover-people .voice-chip:hover{background:#e5ebe4}
.discover-people .voice-chip-avatar{display:grid;place-items:center;width:72px;height:72px;flex:0 0 72px;border-radius:50%;object-fit:cover}
.discover-people .voice-chip-name{font:600 15px/1.4 var(--font-text);overflow-wrap:anywhere}
.discover-curations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 24px}
.discover-curations>header{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px}
.discover-curation-link{position:relative;display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0;min-height:124px;padding:24px 40px 24px 22px;border-radius:16px;background:#fff;color:var(--theme-text-heading)}
.discover-curation-link strong{font:650 20px/1.3 var(--font-text);letter-spacing:-.4px;overflow-wrap:anywhere}
.discover-curation-link>span:not(.curation-arrow){color:var(--theme-text);font:13px/1.5 var(--font-text)}
.curation-arrow{position:absolute;right:18px;top:20px;color:var(--theme-text);font:22px/1.3 var(--font-text)}
.discover-curation-link:hover strong{text-decoration:underline;text-underline-offset:4px}
.discover-composition #network{padding-block:28px 36px}
.discover-composition #network .section-head{margin-bottom:14px}
.discover-composition #network .article-card{padding-block:16px}
.discover-composition #network .card-body{gap:6px;padding-bottom:6px}
.discover-composition #network .card-title{font-size:21px}
.article-card.is-feed-story .card-attribution{display:flex;align-items:center;flex-wrap:wrap;gap:4px 16px;min-width:0}
.article-card.is-feed-story .card-attribution .byline{flex:1 1 160px;min-width:0}
.article-card.is-feed-story .card-attribution .card-foot{flex:0 1 auto;margin:0;padding:0;font-size:12px}
.discover-composition #network .net-more{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 20px}
.catalogue-refine{margin:12px 0 20px;min-width:0}
.catalogue-refine>summary{display:list-item;list-style-position:inside;width:fit-content;max-width:100%;min-height:44px;padding:10px 12px;border-radius:12px;background:var(--theme-bg-subtle);color:var(--theme-accent-text);font:550 14px/1.5 var(--font-text);overflow-wrap:anywhere;cursor:pointer}
.catalogue-refine-scope{display:block;margin-top:2px;color:var(--theme-text);font:400 13px/1.5 var(--font-text);overflow-wrap:anywhere}
.catalogue-refine>summary:focus-visible{outline:2px solid var(--theme-accent-text);outline-offset:3px}
.catalogue-refine>.net-filter{display:grid;grid-template-columns:minmax(220px,1.2fr) repeat(2,minmax(160px,1fr));grid-template-areas:"languages unknown time" "languagehint timing timing" ". apply clear";align-items:start;gap:12px 20px;margin:0;padding:18px 0;border:0;background:transparent}
.catalogue-refine>.net-filter>label{display:grid;gap:6px;min-width:0;margin:0;font:550 14px/1.5 var(--font-text);color:var(--theme-text-heading)}
.catalogue-language-field{grid-area:languages;min-width:0;margin:0;padding:0;border:0}
.catalogue-language-field legend{width:100%;margin:0 0 6px;padding:0;font:550 14px/1.5 var(--font-text);color:var(--theme-text-heading)}
.catalogue-language-choices{display:flex;flex-wrap:wrap;gap:4px 12px;min-width:0}
.catalogue-language-choice{display:flex;align-items:center;gap:8px;min-width:44px;min-height:44px;max-width:100%;margin:0;padding:8px 4px;font:400 14px/1.5 var(--font-text);color:var(--theme-text);cursor:pointer;overflow-wrap:anywhere}
.catalogue-language-choice input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--theme-accent-text)}
.catalogue-language-choice input:focus-visible{outline:2px solid var(--theme-accent-text);outline-offset:3px}
.catalogue-language-empty{margin:0;color:var(--theme-text);font:400 14px/1.5 var(--font-text)}
.catalogue-unknown-field{grid-area:unknown}
.catalogue-time-field{grid-area:time}
.catalogue-refine select{width:100%;max-width:100%;min-width:0;min-height:44px;height:44px;padding:8px 10px;border:1px solid var(--theme-border);border-radius:12px;background:var(--theme-bg-card);color:var(--theme-text-strong);font:400 14px/1.5 var(--font-text)}
.catalogue-refine option{padding:5px 6px}
.catalogue-refine select:focus-visible{outline:2px solid var(--theme-accent-text);outline-offset:2px}
.catalogue-refine .net-filter-status{margin:0;min-width:0;color:var(--theme-text);font:13px/1.6 var(--font-text);overflow-wrap:anywhere}
.catalogue-refine .net-filter-status:first-of-type{grid-area:languagehint}
.catalogue-refine .net-filter-status:nth-of-type(2){grid-area:timing}
.catalogue-refine .net-filter-reset{grid-area:apply;justify-self:start;min-width:44px;min-height:44px;padding:8px 16px;border:0;border-radius:12px;background:var(--theme-invert-bg);color:var(--theme-invert-text);font:550 14px/1.5 var(--font-text)}
.catalogue-refine .section-action{grid-area:clear;justify-self:start;min-height:44px;margin:0}
.catalogue-refine .net-filter-reset:focus-visible,.catalogue-refine .section-action:focus-visible{outline:2px solid var(--theme-accent-text);outline-offset:3px}
.discover-catalogue-heading{padding-block:8px 0}
.discover-catalogue-heading h1{margin:0;font:400 clamp(34px,4vw,48px)/1.12 var(--font-editorial);letter-spacing:-.8px}
.discover-composition :is(.discover-world-heading a,.discover-curation-link,.voice-chip):focus-visible{outline:2px solid var(--theme-accent-text);outline-offset:3px}
[data-listener-island="personal-discovery"]:empty{display:none}
.discover-personal{margin:4px 0 20px;padding:12px 0 16px;border-bottom:1px solid var(--theme-border)}
.discover-personal-heading{margin:0 0 8px;font:650 14px/1.5 var(--font-text);color:var(--theme-text-heading)}
.discover-personal-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px}
.discover-personal-entry{min-width:0}
.discover-personal-entry[hidden]{display:none}
.article-card.is-feed-story .card-title{display:block;overflow:visible;-webkit-line-clamp:unset}
.discover-personal-reason{margin:0;color:var(--theme-text);font:13px/1.5 var(--font-text);overflow-wrap:anywhere}
.discover-personal-reason a{display:inline-flex;align-items:center;min-height:44px;color:var(--theme-accent-text)}
.discover-personal-reason a:hover{text-decoration:underline;text-underline-offset:3px}
.discover-personal-reason a:focus-visible{outline:2px solid var(--theme-accent-text);outline-offset:3px}
.discover-personal-context{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-bottom:4px;min-width:0}
.discover-personal-context .discover-personal-reason{flex:1 1 150px;min-width:0}
.discover-personal-less,.discover-personal-dismissed button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;max-width:100%;padding:8px 4px;border:0;border-radius:8px;background:transparent;color:var(--theme-text);font:500 13px/1.5 var(--font-text);overflow-wrap:anywhere;cursor:pointer}
.discover-personal-less:hover,.discover-personal-dismissed button:hover{color:var(--theme-accent-text);text-decoration:underline;text-underline-offset:3px}
.discover-personal-less:focus-visible,.discover-personal-dismissed button:focus-visible{outline:2px solid var(--theme-accent-text);outline-offset:3px}
.discover-personal-dismissed{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;min-height:44px;padding:8px 0;color:var(--theme-text);font:13px/1.6 var(--font-text);overflow-wrap:anywhere}
.discover-personal-dismissed p{flex:1 1 160px;min-width:0;margin:0}
.discover-personal-dismissed button{color:var(--theme-accent-text)}
/* Reader continuation stays within the publication's quiet reading rhythm. */
.reader-discovery{margin-top:36px;color:var(--theme-text-strong)}
.reader-discovery :is(.reader-highlights,.reader-next){margin-top:28px;padding-top:24px;border-top:1px solid var(--theme-border)}
.reader-discovery h2{margin:0 0 12px;font:650 23px/1.3 var(--font-text);letter-spacing:-.45px}
.reader-highlight{padding:12px 0 20px;border-bottom:1px solid var(--theme-border);min-width:0}
.reader-highlight:last-child{border-bottom:0;padding-bottom:0}
.reader-highlight-person{display:flex;align-items:center;flex-wrap:wrap;gap:0 5px;margin:0;color:var(--theme-text);font:13px/1.5 var(--font-text)}
.reader-highlight-person a{display:inline-flex;align-items:center;min-height:44px;color:var(--theme-accent-text);overflow-wrap:anywhere}
.reader-highlight blockquote{margin:8px 0 12px;padding:0 0 0 16px;border-left:3px solid var(--theme-border-strong);font:400 18px/1.65 var(--font-editorial);color:var(--theme-text-heading);overflow-wrap:anywhere}
.reader-highlight-context,.reader-highlight-comment{margin:10px 0;color:var(--theme-text-strong);font:15px/1.65 var(--font-text);overflow-wrap:anywhere}
.reader-highlight-actions{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:8px}
.reader-highlight-actions :is(a,button),.reader-discovery-note button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:8px 12px;border:1px solid var(--theme-border);border-radius:12px;background:var(--theme-bg-card);color:var(--theme-accent-text);font:550 13px/1.5 var(--font-text)}
.reader-discovery-note{margin:6px 0 12px;color:var(--theme-text);font:13px/1.6 var(--font-text);overflow-wrap:anywhere}
.adrawer-highlights{margin-top:24px}
.adrawer-highlight-source{margin:0 0 8px;color:var(--theme-text-heading);font:600 14px/1.5 var(--font-text);overflow-wrap:anywhere}
.reader-discovery :is(a,button):focus-visible{outline:2px solid var(--theme-accent-text);outline-offset:3px}
.net-grid .article-card.is-featured{grid-column:auto;grid-row:auto}
.net-grid .article-card.is-featured .card-body{justify-content:flex-start}

/* Public activity stays in the reading rhythm. Native details owns action
   visibility; JS controls open state for pointer/focus, never CSS alone. */
.card-participation{container-type:inline-size;position:relative;z-index:2;display:block;width:auto;min-width:0;min-height:44px;margin:0 22px 14px;padding:0;border:0;border-radius:0;background:transparent;color:var(--theme-text-strong)}
.card-social{position:relative;min-width:0}
.card-social-summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0;list-style:none;border-radius:10px;cursor:pointer}
.card-social-summary::-webkit-details-marker{display:none}
.card-social-summary::marker{content:''}
.card-social-metrics{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-width:0;color:var(--theme-text-muted);font:400 13px/1.4 var(--font-text)}
.social-metric,.card-social-metrics .stat{display:inline-flex;align-items:center;gap:4px;min-width:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.social-metric svg,.card-social-metrics .stat svg{width:14px;height:14px;flex-shrink:0}
.card-social-metrics .stat-zap{color:var(--theme-accent-text)}
.social-metric.is-reacted{color:#be123c}
.social-metric.is-reposted{color:#15803d}
.social-metric.is-saved{color:#1d4ed8}
.social-metric.is-reacted svg,.social-metric.is-saved svg{fill:currentColor}
.card-social-trigger{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;min-height:44px;padding:4px 6px;border-radius:10px;color:var(--theme-text);font:550 12px/1.4 var(--font-text)}
.card-social-trigger svg{width:17px;height:17px;flex-shrink:0}
.card-social-summary:hover .card-social-trigger{color:var(--theme-accent-text);background:#242a1f05}
.card-social[open] .card-social-trigger{color:var(--theme-accent-text);background:var(--theme-accent-soft)}
.card-social-summary:focus-visible{outline:2px solid var(--theme-accent-text);outline-offset:2px}
.card-social>.engagement-actions{position:relative;z-index:4;display:grid;grid-template-columns:repeat(5,44px);gap:0;width:max-content;max-width:100%;min-width:0;margin:6px 0 0 auto;padding:4px;border:1px solid var(--theme-border);border-radius:12px;background:var(--theme-bg-card);box-shadow:none}
.card-social:not([open])>.engagement-actions{display:none}
.card-social>.engagement-actions>.article-engagement{grid-column:1/-1}
.card-participation .card-social .article-engagement.is-labelled{display:grid;grid-template-columns:repeat(5,44px);gap:0;width:100%}
.card-social[data-action-count="4"]>.engagement-actions,
.card-participation .card-social[data-action-count="4"] .article-engagement.is-labelled{grid-template-columns:repeat(4,44px)}
.card-participation .card-social .article-engagement.is-labelled>button,
.card-social>.engagement-actions>a{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border-radius:8px;font:500 14px/1.4 var(--font-text)}
.card-participation .card-social .article-engagement.is-labelled>button:last-child,
.card-social>.engagement-actions>a:last-child{grid-column:auto}
.card-participation .card-social .article-engagement.is-labelled>button .social-action-label,
.card-social>.engagement-actions>a .social-action-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Counts remain in the always-visible summary instead of being duplicated
   beside every command in its revealed panel. */
.card-social .article-engagement>button>.tabular-nums{display:none}
.card-social>.engagement-actions>a>svg,
.card-participation .card-social .article-engagement.is-labelled>button>svg{width:18px;height:18px;flex-shrink:0}
/* Small audio and saved-item footers wrap only when a complete44px row
   genuinely cannot fit. Wider phone/tablet footers stay a single quiet row. */
@container(max-width:229.98px){
 .card-social:not([data-action-count="4"])>.engagement-actions,
 .card-participation .card-social:not([data-action-count="4"]) .article-engagement.is-labelled{grid-template-columns:repeat(3,44px)}
}
@container(max-width:185.98px){
 .card-social[data-action-count="4"]>.engagement-actions,
 .card-participation .card-social[data-action-count="4"] .article-engagement.is-labelled{grid-template-columns:repeat(2,44px)}
}
@container(max-width:141.98px){
 .card-social:not([data-action-count="4"])>.engagement-actions,
 .card-participation .card-social:not([data-action-count="4"]) .article-engagement.is-labelled{grid-template-columns:repeat(2,44px)}
}
@container(max-width:97.98px){
 .card-social:not([data-action-count="4"])>.engagement-actions,
 .card-social[data-action-count="4"]>.engagement-actions,
 .card-participation .card-social:not([data-action-count="4"]) .article-engagement.is-labelled,
 .card-participation .card-social[data-action-count="4"] .article-engagement.is-labelled{grid-template-columns:44px}
}
.card-social>.engagement-actions>a:hover{background:var(--theme-bg-subtle);color:var(--theme-accent-text)}
.card-social>.engagement-actions>a:focus-visible,
.card-participation .card-social .article-engagement.is-labelled>button:focus-visible{outline:2px solid var(--theme-accent-text);outline-offset:-2px}
/* Desktop cards share one quiet action row and a stable ellipsis. Touch and
   genuinely narrow footers retain the explicit disclosure below its summary. */
@media(hover:hover) and (pointer:fine) and (not (any-pointer:coarse)){
 @container(min-width:320px){
  .card-social{--social-actions-width:220px;--social-summary-space:280px;--social-controls-top:0px}
  .card-social[data-action-count="4"]{--social-actions-width:176px;--social-summary-space:236px}
  .card-social .card-social-trigger{width:44px;min-width:44px;margin-left:auto;padding:0}
  .card-social .card-social-trigger>span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .card-social[open]>.card-social-summary{padding-right:var(--social-summary-space)}
  .card-social[open] .card-social-trigger{position:absolute;top:var(--social-controls-top);right:0}
  .card-social>.engagement-actions{position:absolute;inset:var(--social-controls-top) 52px auto auto;grid-template-columns:repeat(5,44px);gap:0;width:var(--social-actions-width);max-width:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
  .section-podcasts .card-participation .card-social>.engagement-actions{background:transparent}
 }
 @container(min-width:320px) and (max-width:479.98px){
  /* Reserve the same activity line before and after opening. Real counts
     cannot collide with five targets or move the next card during hover. */
  .card-social:has(.card-social-metrics .social-metric svg,.card-social-metrics .stat){--social-controls-top:24px;padding-top:24px}
  .card-social:has(.card-social-metrics .social-metric svg,.card-social-metrics .stat) .card-social-metrics{position:absolute;inset:0 0 auto;max-width:100%}
 }
}

.discovery-more{margin-top:20px}
.discovery-more>summary{cursor:pointer;width:fit-content;min-height:44px;padding:10px 14px;border-radius:12px;color:var(--theme-accent-text);font:550 14px/1.5 var(--font-text)}
.discovery-more[open]>summary{margin-bottom:16px}

/* Each chapter has its own cadence while remaining in one visual family. */
.section-voices{padding-block:36px}
.rail-voices .rail-track{gap:12px;padding:8px 2px 16px;scroll-snap-type:none;scroll-behavior:auto}
.rail-voices .voice-chip{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;flex:0 0 144px;min-width:0;gap:9px;padding:16px 10px;border:var(--discover-edge);border-radius:20px;background:#ffffffa6;box-shadow:none;white-space:normal}
.rail-voices .voice-chip:hover{background:white;transform:none}
.rail-voices .voice-chip-avatar{width:64px;height:64px;flex-basis:64px;border-radius:50%;object-fit:cover}
.voice-chip-name{white-space:normal;overflow-wrap:anywhere}
.rail-voices .voice-chip-name{max-width:100%;font:650 14px/1.4 var(--font-text);text-align:center}
.rail-voices .voice-chip-count{margin:0;padding:0;background:none;color:var(--theme-text-muted);font:400 12px/1.4 var(--font-text)}
.rail-voices .rail-arrow{top:80px}
.voices-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.voices-grid .voice-chip{min-width:0;border-radius:16px;justify-content:flex-start}
.voice-chip-count{margin-left:auto}
.section-finds{background:var(--discover-warm);border:0;margin-block:12px}
.section-finds .section-blurb{margin-bottom:24px}
.finds-next{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;max-width:100%;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--theme-accent-text);font:550 14px/1.4 var(--font-text);box-shadow:none;cursor:pointer;flex-shrink:0}
.finds-next:hover{background:#242a1f05;text-decoration:underline;text-underline-offset:4px}
.finds-next[hidden]{display:none}
.finds-next svg{width:18px;height:18px}
.section-podcasts{--theme-bg:#202a25;--theme-text-muted:#c5cfc7;padding-block:44px;margin-block:12px;background:#202a25;color:#faf9f6}
.section-podcasts .section-title,.section-podcasts .card-title,.section-podcasts .byline-name{color:#faf9f6}
.section-podcasts .section-eyebrow,.section-podcasts .section-action{color:#ffd09a}
.section-podcasts .section-blurb,.section-podcasts .card-foot,.section-podcasts .byline-site{color:#c5cfc7}
.section-podcasts .article-card{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;padding:18px;border:1px solid #ffffff12;border-radius:20px;background:#ffffff08;box-shadow:none;transform:none}
.section-podcasts .article-card:hover{background:#ffffff0c;transform:none;box-shadow:none;border-color:#ffffff25}
.section-podcasts .article-card.is-text-story{grid-template-columns:minmax(0,1fr)}
.section-podcasts .is-text-story .card-badge{position:static;align-self:flex-start;width:fit-content;background:#ffffff12;font-size:12px}
.section-podcasts .card-cover{width:76px;height:76px;aspect-ratio:1!important;border-radius:14px}
.section-podcasts .card-body{padding:0;gap:6px}
.section-podcasts .card-title{display:block;overflow:visible;font:650 16px/1.4 var(--font-text);letter-spacing:-.2px}
.section-podcasts .card-desc{display:none}
.section-podcasts .byline{margin-bottom:0;gap:5px}
.section-podcasts .byline-avatar{width:24px;height:24px}
.section-podcasts .byline-name{font-size:12px}
.section-podcasts .byline-site{font-size:11px}
.section-podcasts .card-foot{margin-top:4px;padding:0;border:0;font-size:12px}
.section-podcasts .card-badge{inset:auto 4px 4px;justify-content:center;padding:4px;border-radius:8px;background:#18201de6;color:#faf9f6;font-size:10px}
.section-podcasts .card-participation{grid-column:1/-1;margin:0;background:transparent;color:#d0d6cc}
.section-podcasts .card-social-metrics,.section-podcasts .card-social-trigger{color:#c5cfc7}
.section-podcasts .card-social-metrics .stat-zap{color:#ffd09a}
.section-podcasts .card-social-summary:hover .card-social-trigger,.section-podcasts .card-social[open] .card-social-trigger{color:#ffd09a;background:#ffffff0d}
.section-podcasts .card-social>.engagement-actions{background:#26332c;border-color:#516154}
.section-podcasts .card-social>.engagement-actions>a{color:#d0d6cc}
.section-podcasts .card-social>.engagement-actions>a:hover{color:#faf9f6;background:#ffffff12}
.section-podcasts .card-social-summary:focus-visible,.section-podcasts .card-social>.engagement-actions>a:focus-visible,.section-podcasts .card-participation .card-social .article-engagement.is-labelled>button:focus-visible{outline-color:#ffd09a}
.section-podcasts .social-metric.is-reacted{color:#ffadb5}
.section-podcasts .social-metric.is-reposted{color:#aae1bf}
.section-podcasts .social-metric.is-saved{color:#b8d4ff}
.section-podcasts .card-participation .article-engagement>button:not(.bg-red-50):not(.bg-green-50):not(.bg-blue-50):not(.bg-purple-50):not(.bg-orange-50){color:#d0d6cc}
.section-podcasts .card-participation .article-engagement>button:not(.bg-red-50):not(.bg-green-50):not(.bg-blue-50):not(.bg-purple-50):not(.bg-orange-50):hover{color:#faf9f6;background:#ffffff12}
.section-podcasts .net-more-btn{background:transparent;color:#ffd09a;border-color:transparent}
.section-podcasts .net-more-btn:hover{background:#ffffff0a;color:#ffe2bd}
.section-podcasts .discovery-more>summary{color:#ffd09a}

/* Inline local filters are a labelled opaque surface, never buried. */
.discovery-refine{margin:0 0 20px;padding:0 0 14px;border:0;border-bottom:1px solid var(--theme-border);border-radius:0;background:transparent}
.discovery-refine .net-filter{margin:0}
 .net-filter{display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px 16px}
.net-clear{min-height:44px;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--theme-accent-text);font:550 14px var(--font-text);cursor:pointer}
.net-clear:hover{text-decoration:underline;text-underline-offset:4px}
.net-clear[hidden]{display:none}
.net-chips{flex:1 1 400px;align-items:center;flex-wrap:wrap;overflow:visible;gap:2px 6px;padding:0}
.topic-chip{position:relative;isolation:isolate;min-width:44px;min-height:44px;max-width:100%;padding:8px 12px;border:0;border-radius:999px;font:550 14px/1.4 var(--font-text);background:transparent;white-space:normal;overflow-wrap:anywhere}
/* A 32px visual pill inside a 44px target; long labels may grow naturally. */
.topic-chip::before{content:'';position:absolute;z-index:-1;inset:6px 0;border:1px solid #242a1f0b;border-radius:inherit;background:#efeee8;pointer-events:none}
.topic-chip:hover::before{background:#e8e7df;border-color:#242a1f18}
.topic-chip.active{background:transparent;border:0;color:var(--theme-invert-text)}
.topic-chip.active:hover{background:transparent;color:var(--theme-invert-text)}
.topic-chip.active::before{background:var(--theme-invert-bg);border-color:var(--theme-invert-bg)}
.topic-chip.active:hover::before{background:var(--theme-invert-bg-hover)}
.topic-chip:active::before{filter:brightness(.93)}
.topic-chip-name{min-width:0;overflow-wrap:anywhere}
.topic-chip-count{flex-shrink:0;font:500 12px var(--font-text)}
.topic-chip.active .topic-chip-count{color:#ffffffd9}
.net-search-wrap{position:relative;min-width:180px;max-width:340px;flex:1 1 280px;gap:0}
.net-search-wrap .net-search{flex:1 1 auto;min-width:0;padding-right:46px}
.net-topic-submit{position:absolute;right:0;top:0;display:grid;place-items:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--theme-text-strong);cursor:pointer}
.net-topic-submit svg{width:18px;height:18px}
.net-topic-submit:hover{background:#242a1f06;color:var(--theme-accent-text)}
.net-search,.net-search:focus{width:100%;height:44px;border:1px solid var(--discover-control-border);border-radius:11px;background:transparent;font:14px var(--font-text)}
.net-search:focus{outline:2px solid var(--theme-accent-text);outline-offset:2px;border-color:var(--theme-accent-text);box-shadow:none}
.net-search-results{top:calc(100% + 8px);right:0;width:max(100%,260px);max-width:calc(100vw - 48px);border:var(--discover-edge);border-radius:16px}
.net-search-item{min-height:44px;align-items:center;border-radius:10px;font-size:14px}
.net-filter select,.net-sort,.net-topic-select{min-height:44px;max-width:100%;padding:10px 12px;border:1px solid var(--discover-control-border);border-radius:13px;background:white;color:var(--theme-text-strong);font:550 14px var(--font-text)}
.net-filter-reset,.net-reset{min-height:44px;padding:10px 12px;border:0;border-radius:12px;color:var(--theme-accent-text);background:var(--theme-accent-soft);font:600 14px var(--font-text);cursor:pointer}
.net-filter-status,.net-status{flex-basis:100%;min-width:0;max-width:100%;overflow-wrap:anywhere;font:14px/1.5 var(--font-text);color:var(--theme-text)}
.net-more{margin-top:24px}
.net-more-btn{min-height:44px;padding:8px 12px;border:0;border-radius:10px;background:transparent;color:var(--theme-accent-text);font:550 14px/1.4 var(--font-text);box-shadow:none}
.net-more-btn:hover{background:#242a1f05;text-decoration:underline;text-underline-offset:4px}
.hero-search-submit:active,.net-topic-submit:active,.finds-next:active,.net-more-btn:active,.net-clear:active{opacity:.7}
.finds-next:disabled,.net-more-btn:disabled,.net-topic-submit:disabled{opacity:.5;cursor:wait}
.net-empty{padding:28px 20px;border-radius:18px;background:#ffffffa6;font:15px/1.6 var(--font-text)}

/* The catalogue uses the same sleeve/caption anatomy as the subject shelves. */
.discover-composition #network .net-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
.discover-composition #network .article-card .card-cover{aspect-ratio:2.35!important}
.discover-composition #network .story-poster{padding:18px}
.discover-composition #network .story-poster-title{font-size:24px;-webkit-line-clamp:3}
.discover-composition #network .card-attribution{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.discover-composition #network .card-attribution .byline{flex:none;width:100%}
.discover-composition #network .card-attribution .card-foot{flex:none}
.discover-composition:has(.discover-catalogue-heading) #network .net-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Rails preserve visible tap and keyboard alternatives to swipe. */
.rail-track{gap:20px;padding:8px 2px 20px;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.rail-arrow{opacity:1;border:var(--discover-edge);box-shadow:var(--shadow-sm)}
.rail-arrow:hover{transform:translateY(-50%)}
.rail-arrow:disabled{opacity:.35;cursor:default}
.rail-podcasts .rail-track{gap:20px}
.rail-podcasts .rail-track>.article-card,.rail-podcasts .feed-skeleton{flex:0 0 calc((100% - 40px)/3);max-width:none}
.rail-podcasts .rail-arrow{top:66px}
.rail-collections .rail-track{gap:20px}
.rail-collections .rail-track>.collection-card,.rail-collections .rail-track>.collection-loading{flex:0 0 calc((100% - 60px)/4);max-width:none;scroll-margin-block:120px}
.rail-collections .rail-arrow{top:100px}
.rail-collections .net-empty{flex:1 1 100%}

/* Publications retain their identities; a compact monogram is honest fallback. */
.collection-card{display:flex;flex-direction:column;min-width:0;border:var(--discover-edge);border-radius:20px;background:var(--discover-surface);overflow:hidden;box-shadow:0 2px 5px #22271903;transition:box-shadow .15s,border-color .15s}
.collection-card:hover{transform:none;border-color:#242a1f26;box-shadow:var(--discover-shadow)}
.collection-card .collection-art{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1.91;border-radius:0;isolation:isolate;background:linear-gradient(135deg,hsl(calc(var(--fig-hue)*7) 21% 36%),hsl(calc(var(--fig-hue)*7) 27% 24%))}
.collection-card .collection-art.has-image:not(.is-failed){background:#efeee9}
.collection-card .collection-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.collection-card .collection-art.is-letterboxed img{object-fit:contain}
.collection-art.has-image:not(.is-failed) .collection-nameplate{display:none}
.collection-nameplate{display:grid;place-items:center;width:58%;height:65%;border:1px solid #ffffff40;border-radius:16px;background:#ffffff08;color:white;font:650 clamp(36px,3.5vw,52px)/1 var(--font-text);letter-spacing:-2px}
.collection-card .card-body{display:flex;flex-direction:column;flex:1;gap:0;padding:20px}
.collection-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
.collection-card .card-title{display:block;overflow:visible;font:650 20px/1.3 var(--font-text);letter-spacing:-.4px}
.collection-arrow{flex-shrink:0;color:var(--theme-text-muted);font:22px/1.3 var(--font-text)}
.collection-card:hover .collection-arrow{color:var(--theme-accent-text)}
.collection-card .card-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 16px;color:var(--theme-text);font:14px/1.55 var(--font-text)}
.collection-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-top:auto;padding-top:12px;color:var(--theme-text-muted);font:13px/1.4 var(--font-text)}
.collection-author{display:flex;align-items:center;gap:7px;min-width:0;color:var(--theme-text);font-weight:550}
.collection-author>span{overflow-wrap:anywhere}
.collection-avatar{width:24px;height:24px;flex-shrink:0;border-radius:50%;object-fit:cover}
.collection-sort{position:relative;isolation:isolate;display:inline-flex;align-items:center;flex:0 0 auto;max-width:100%;min-height:44px}
.collection-sort::before{content:'';position:absolute;z-index:-1;inset:6px 0;border-radius:9px;background:#efeee8;pointer-events:none}
.collection-sort:hover::before{background:#e8e7df}
.collection-sort select{min-height:44px;max-width:100%;padding:8px 12px;border:0;border-radius:9px;background:transparent;color:var(--theme-text-strong);font:550 14px/1.4 var(--font-text);cursor:pointer}
.collection-sort select:focus-visible{outline:2px solid var(--theme-accent-text);outline-offset:3px}
.collection-preview-label{position:absolute;left:12px;bottom:12px;padding:5px 9px;border-radius:8px;background:#171b18e6;color:white;font:500 11px/1.4 var(--font-text)}
.collection-art.is-failed .collection-preview-label{display:none}
.collection-loading{min-height:270px;border-radius:20px;background:var(--theme-fill)}
.discovery-rankings{margin:12px 0 24px;padding:24px;border:var(--discover-edge);border-radius:24px;background:#ffffff80}
.discovery-rankings .container{padding-inline:0}
.discovery-rankings .section{padding-block:20px}
.rankings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));align-items:stretch;gap:24px}
.ranking-group{display:flex;flex-direction:column;min-width:0}
.ranking-title{margin-bottom:8px;font:650 20px/1.3 var(--font-text);letter-spacing:-.4px}
.ranking-group .rail-blurb{font:14px/1.5 var(--font-text);color:var(--theme-text)}
.ranking-group .rail{padding-bottom:0}
.ranking-group .rail-track{display:flex;flex-direction:column;gap:8px;overflow:visible;padding:0;scroll-snap-type:none}
.ranking-group .rail-track>*{flex:none;max-width:none;width:100%}
.ranking-group .rail-arrow{display:none}
.ranking-group .rail::before,.ranking-group .rail::after{display:none}
.ranking-group .net-more{justify-content:flex-start;margin-top:auto;padding-top:12px}
.ranking-group .net-more-btn{width:auto;border:0;background:transparent;box-shadow:none}
.ranking-group .section-title{font-size:20px;letter-spacing:-.4px}
.ranking-group .site-card{flex-direction:row;align-items:center;gap:12px;padding:12px;border:0;border-radius:14px;background:transparent;box-shadow:none;transform:none}
.ranking-group .site-card:hover{background:var(--theme-bg-card)}
.ranking-group .card-cover{width:52px;height:52px;flex:0 0 52px;border-radius:12px}
.ranking-group .card-body{padding:0;gap:4px}
.ranking-group .card-title{display:block;font:650 15px/1.4 var(--font-text)}
.ranking-group .card-desc{display:block;font:13px/1.4 var(--font-text)}
.ranking-group .card-meta{font-size:12px;gap:4px;padding-top:0}

/* Search groups are real destinations; compact results protect all formats. */
.discover-search-groups{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 28px}
.discover-search-groups a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;border:var(--discover-edge);border-radius:14px;background:white;color:var(--theme-text-strong);font:550 14px/1.4 var(--font-text)}
.discover-search-groups a:hover{background:var(--theme-accent-soft);color:var(--theme-accent-text)}
.search-group-count{color:var(--theme-text);font-size:12px;font-variant-numeric:tabular-nums}
.dsearch-scope,.dsearch-result-summary{margin:10px 0 16px;color:var(--theme-text);font:400 13px/1.5 var(--font-text);overflow-wrap:anywhere}
.dsearch-result-summary:empty{display:none}
.dsearch-panel>.dsearch-scope{flex-shrink:0;margin:0;padding:10px 20px 6px}
.dsearch-panel>.dsearch-result-summary{flex-shrink:0;margin:0;padding:10px 20px;border-top:1px solid var(--theme-border)}
.dsearch-thumb.dsearch-topic{background:var(--theme-accent-soft);color:var(--theme-accent-text);font:650 22px/1 var(--font-text)}
.search-result-section :is(.discover-topic,.discover-person){display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-width:44px;min-height:60px;padding:12px 16px;border:var(--discover-edge);border-radius:14px;background:var(--theme-bg-card);color:var(--theme-text-heading);overflow-wrap:anywhere}
.search-result-section :is(.discover-topic,.discover-person) strong{font:600 16px/1.4 var(--font-text)}
.search-result-section :is(.discover-topic,.discover-person)>span{color:var(--theme-text);font:400 13px/1.5 var(--font-text)}
.search-result-section :is(.discover-topic,.discover-person):hover{background:var(--theme-accent-soft)}
.search-result-section{margin-block:32px}
.search-result-section>h2{margin-bottom:16px}
.search-result-section .dl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.search-result-section .dl-grid>li{min-width:0}
.search-result-section .dl-card{display:grid;grid-template-columns:76px minmax(0,1fr);align-content:start;gap:4px 16px;padding:16px;border:var(--discover-edge);border-radius:18px;background:var(--discover-surface)}
.search-result-section .dl-card .dl-art{grid-column:1;grid-row:1/5;width:76px;max-height:76px;border-radius:12px}
.search-result-section .dl-card h3,.search-result-section .dl-card p{grid-column:2;margin:0}
.search-result-section .dl-card h3{font:650 16px/1.4 var(--font-text)}
.search-result-section .dl-card p{font:14px/1.5 var(--font-text)}
.search-result-section .dl-card:hover{box-shadow:var(--discover-shadow)}

/* Existing search/dialog/profile DOM remains shared with public readers. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
article.article-card,article.collection-card{position:relative;isolation:isolate}
.card-link{color:inherit}
.card-link::after{content:'';position:absolute;inset:0;z-index:1}
.card-link:focus-visible{outline:none}
.card-link:focus-visible::after{outline:2px solid var(--theme-accent-text);outline-offset:-3px;border-radius:20px}
.profile-avatar-link{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:44px;min-height:44px;border-radius:50%}
.profile-name-link{position:relative;z-index:2;display:inline-flex;align-items:center;min-height:44px;max-width:100%}
.profile-avatar-link:hover{background:var(--theme-accent-soft)}
.collection-author .profile-avatar-link{margin:-10px -3px -10px -10px}
.avatar-fallback{display:inline-flex;align-items:center;justify-content:center;background:var(--theme-fill-strong);color:var(--theme-text);font:650 12px/1 var(--font-text)}
.rail-voices .avatar-fallback{font-size:22px}
.adrawer-host:not(.adrawer-open){display:none}
.adrawer{inset:12px 12px 12px auto;width:min(440px,calc(100vw - 24px));border:var(--discover-edge);border-radius:24px;overflow:hidden;box-shadow:0 12px 48px #17201929}
.adrawer-scroll{border-radius:inherit}
.adrawer-close{top:12px;right:12px;width:44px;height:44px}
.adrawer-name{font:700 26px/1.2 var(--font-text);letter-spacing:-.6px}
.adrawer-bio{font:15px/1.65 var(--font-text)}
.adrawer-chip{min-height:44px;border-radius:14px}
.adrawer-btn{min-height:44px;border-radius:14px}
.adrawer-loading{height:230px;margin:24px;padding:0;border-radius:16px;background:linear-gradient(var(--theme-fill),var(--theme-fill)) 0 0/100% 100px no-repeat,linear-gradient(var(--theme-fill),var(--theme-fill)) 0 130px/70% 20px no-repeat,linear-gradient(var(--theme-fill),var(--theme-fill)) 0 170px/90% 50px no-repeat}
.adrawer-loading>span{display:none}
dialog.dsearch,dialog.adrawer-host{padding:0;margin:0;border:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:transparent;color:var(--theme-text-heading)}
dialog.dsearch::backdrop,dialog.adrawer-host::backdrop{background:transparent}
dialog.adrawer-host:not([open]){display:none}
.dsearch-scrim{background:rgba(25,32,27,.28);backdrop-filter:none;-webkit-backdrop-filter:none}
.dsearch-panel{top:88px;left:50%;transform:translateX(-50%);width:min(720px,calc(100vw - 32px));height:auto;max-height:calc(100dvh - 112px);border:1px solid #242a1f1a;border-radius:24px;background:var(--theme-bg-card);box-shadow:0 8px 24px #17201914,0 24px 72px #17201924;animation:none}
.dsearch-bar{flex-shrink:0;gap:10px;padding:8px 12px 8px 18px;border-bottom:1px solid var(--theme-border)}
.dsearch-input{min-width:0;min-height:48px;padding:8px 0;font:400 18px/1.5 var(--font-text);color:var(--theme-text-heading)}
.dsearch-input:focus-visible{outline:2px solid var(--theme-accent-text);outline-offset:-2px;border-radius:6px}
.dsearch-icon{width:20px;height:20px}
.dsearch-esc{display:grid;place-items:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--theme-text);letter-spacing:0}
.dsearch-esc svg{width:22px;height:22px}
.dsearch-esc:hover{background:var(--theme-bg-subtle);color:var(--theme-text-heading)}
.dsearch-results{min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:8px;padding:8px}
.dsearch-group-label{padding:16px 12px 6px;color:var(--theme-text);font:650 12px/1.5 var(--font-text);letter-spacing:.02em;text-transform:none}
.dsearch-item{align-items:flex-start;min-height:66px;gap:12px;padding:12px;border-radius:14px}
.dsearch-thumb{flex:0 0 40px;width:40px;height:40px;border-radius:10px}
.dsearch-item-title{overflow:visible;white-space:normal;text-overflow:clip;font:600 16px/1.45 var(--font-text);letter-spacing:-.15px;overflow-wrap:anywhere}
.dsearch-item-sub{overflow:visible;white-space:normal;text-overflow:clip;margin-top:3px;color:var(--theme-text);font:400 13px/1.5 var(--font-text);overflow-wrap:anywhere}
.dsearch-kind{align-self:flex-start;max-width:90px;margin-top:3px;padding:3px 6px;border-radius:6px;color:var(--theme-text);font:550 11px/1.4 var(--font-text);letter-spacing:0;text-transform:none;overflow-wrap:anywhere}
.dsearch-empty,.dsearch-hint{padding:32px 24px;color:var(--theme-text);font:400 15px/1.65 var(--font-text)}
.dsearch :is(button,a):focus-visible{outline:2px solid var(--theme-accent-text);outline-offset:-2px}
@media(max-width:560px){
 .dsearch-panel{inset:8px 8px auto;transform:none;width:calc(100vw - 16px);height:auto;max-height:calc(100dvh - 16px);border-radius:20px}
 .dsearch-bar{gap:8px;padding:6px 8px 6px 14px}
 .dsearch-input{font-size:16px}
 .dsearch-results{padding:6px}
 .dsearch-item{gap:10px;padding:10px 8px;border-radius:12px}
 .dsearch-thumb{flex-basis:36px;width:36px;height:36px;border-radius:8px}
 .dsearch-kind{max-width:72px;font-size:11px;padding-inline:5px}
 .dsearch-empty,.dsearch-hint{padding:24px 18px}
}
.dsearch-item mark{color:inherit;background:var(--theme-accent-soft);text-decoration:underline;text-decoration-color:var(--theme-accent-text);text-underline-offset:3px}
.dsearch-empty p{margin:0}
.dsearch-empty p+p{margin-top:8px;line-height:1.6}
.dsearch-empty strong{color:var(--theme-text-heading)}
.dsearch-empty [data-search-retry]{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-top:16px;padding:8px 16px;border:1px solid var(--discover-control-border);border-radius:12px;background:var(--theme-bg-card);color:var(--theme-accent-text);font:600 14px/1.4 var(--font-text);cursor:pointer}
.dsearch-more{justify-content:center;min-height:44px;color:var(--theme-accent-text);font-weight:600}
.dsearch-more .search-skeleton{width:100%;height:24px;margin:0}
.search-skeleton{height:65px;margin:10px;border-radius:12px;background:var(--theme-fill)}
.adrawer-more{margin:12px 22px 24px}
.adrawer-more[hidden]{display:none}
.feed-skeleton{min-height:150px;border-radius:18px;background:var(--theme-fill-strong);animation:feed-pulse 1.4s ease-in-out infinite alternate}
.rail-voices .feed-skeleton{flex:0 0 144px}
.rail-sites .feed-skeleton{flex:0 0 280px}
@keyframes feed-pulse{to{opacity:.45}}

/* A quiet footer carries secondary destinations without promotional cards. */
.footer{margin-top:28px;padding-top:44px;background:#efeee8;border-top:0}
.footer-col{min-width:0;overflow-wrap:anywhere}
.footer-cols{min-width:0;grid-template-columns:repeat(3,minmax(0,1fr))}
.footer-tag{max-width:340px;font-size:14px;color:var(--theme-text)}
.footer-col a{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;min-height:44px;font-size:14px;color:var(--theme-text)}
.footer-col-note{color:var(--theme-text);font-size:12px}
.footer-bottom{font-family:var(--font-text);color:var(--theme-text)}

@media(max-width:1099px){
 .discover-intro.container{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;min-height:350px;padding:36px;width:calc(100% - 56px)}
 .discover-intro h1{font-size:54px}
 .discover-deck{height:250px;gap:10px;padding:0}
 .discover-deck-card,.discover-deck-card:nth-child(2){flex:1 1 0;min-height:190px;margin:0;padding:12px;box-shadow:none}
 .deck-art{min-height:110px;margin:-12px -12px 14px}.deck-art img{height:110px}
 .deck-topic{font-size:16px}
 .discover-worlds{gap:32px}.rail-world-stories .rail-track{gap:20px}
 .discover-world .card-title{font-size:20px}.story-poster{padding:20px}
 .discover-composition:has(.discover-catalogue-heading) #network .net-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:761px) and (max-width:999px){
 .discover-intro.container{grid-template-columns:minmax(0,1fr);gap:24px;padding:32px}
 .discover-intro-copy{max-width:660px}.discover-intro h1{font-size:58px}
 .discover-intro-copy>p{max-width:58ch}
 .discover-deck{justify-content:flex-start;height:auto;max-width:620px}
 .discover-deck-card,.discover-deck-card:nth-child(2){min-height:150px}
 .deck-art{min-height:90px}.deck-art img{height:90px}
 .rail-world-stories .rail-track{display:flex;gap:20px}
 .rail-world-stories .article-card{flex:0 0 calc((100% - 20px)/2.25)}
}
@media(max-width:760px){
 .discover-composition{padding-top:16px}
 .discover-intro.container{grid-template-columns:minmax(0,1fr);gap:24px;width:calc(100% - 32px);min-height:0;margin-bottom:28px;padding:28px 24px;border-radius:22px}
 .discover-intro h1{font-size:44px;letter-spacing:-1.4px;margin-bottom:16px}
 .discover-intro-copy>p{max-width:40ch;font-size:15px;line-height:1.6;margin-bottom:20px}
 .discover-intro-action{min-height:46px;padding:10px 18px;font-size:14px}
 .discover-deck{height:auto;justify-content:flex-start;gap:10px;padding:0 0 2px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:2px}
 .discover-deck-card,.discover-deck-card:nth-child(2){flex:0 0 max(96px,calc((100% - 20px)/3));min-height:116px;margin:0;padding:10px;border-radius:12px;box-shadow:none;scroll-snap-align:start}
 .deck-art{min-height:60px;margin:-10px -10px 10px}.deck-art img{height:60px}
 .deck-topic{font-size:14px}
 .discover-deck-card:not(:has(img)) .deck-art::before,.deck-art.is-failed::before{font-size:32px}
 .discover-lead{padding-block:0 28px}
 .discover-edition-label{margin-bottom:16px;font-size:23px}
 #fresh .article-card.is-lead{grid-template-columns:minmax(0,1fr);gap:0}
 #fresh .article-card.is-lead>.card-body{grid-column:1;grid-row:2;padding:16px 0 4px;gap:12px}
 #fresh .article-card.is-lead .card-title{font-size:25px;letter-spacing:-.6px}
 #fresh .article-card.is-lead>.card-cover{grid-column:1;grid-row:1;width:100%;height:auto;min-height:0;max-height:260px;margin:0;aspect-ratio:1.6!important;border-radius:16px}
 #fresh .article-card.is-lead>.card-participation{grid-column:1;grid-row:3;margin:0}
 #fresh .article-card.is-lead.is-text-story>.card-body{grid-row:1}
 #fresh .article-card.is-lead.is-text-story>.card-participation{grid-row:2}
 .discover-worlds{gap:28px;padding-block:0 28px}
 .discover-world-heading{margin-right:104px;margin-bottom:12px}
 .discover-world-heading h2{font-size:23px}
 .rail-world-stories .rail-track{display:flex;gap:16px;padding:0 2px 10px}
 .rail-world-stories .article-card{flex:0 0 84%;scroll-snap-align:start}
 .rail-world-stories .rail-arrow{top:-56px}
 .discover-world .card-cover{margin-bottom:12px;border-radius:14px}
 .discover-world .card-title{font-size:20px}
 .story-poster{padding:22px}.story-poster-title{font-size:27px}
 .discover-routes{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:20px 28px}
 .discover-routes h2{font-size:23px}
 .discover-people-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .discover-people .voice-chip{padding:12px 4px}
 .discover-people .voice-chip-avatar{width:64px;height:64px;flex-basis:64px}
 .discover-curations{grid-template-columns:minmax(0,1fr);gap:12px}
 .discover-curation-link{min-height:100px;padding-block:20px}
 .discover-composition #network{padding-block:20px 28px}
 .discover-composition #network .net-grid,.discover-composition:has(.discover-catalogue-heading) #network .net-grid{grid-template-columns:minmax(0,1fr);gap:24px}
 .discover-personal-items{grid-template-columns:minmax(0,1fr)}
 .catalogue-refine>.net-filter{grid-template-columns:minmax(0,1fr);grid-template-areas:"languages" "languagehint" "unknown" "time" "timing" "apply" "clear";gap:12px;padding-top:14px}
}
@media(max-width:360px){
 .discover-intro.container{padding:24px 20px}.discover-intro h1{font-size:38px}
 .discover-intro-copy>p{font-size:14px}
 .discover-deck-card,.discover-deck-card:nth-child(2){flex-basis:100px}
 .discover-world-heading h2{font-size:21px}
}
/* Regular width has its own two-column reading cadence. */
@media(max-width:1100px){
 :root{--discover-gutter:28px}
 .editorial-grid,#fresh>.container>.editorial-grid,.net-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
 #network .net-grid{grid-template-columns:minmax(0,1fr);gap:0}
 #network .article-card .card-cover{width:96px;height:96px}
 .nav-product{display:none}.nav-links>a{padding-inline:10px}
 .discovery-opening>.container{gap:16px 28px}
 .rail-collections .rail-track>.collection-card,.rail-collections .rail-track>.collection-loading{flex-basis:calc((100% - 40px)/3)}
 .rail-podcasts .rail-track>.article-card,.rail-podcasts .feed-skeleton{flex-basis:46%}
 .rankings-grid{gap:18px}
}
@media(max-width:900px){
 .nav .nav-inner{min-height:71px;padding-inline:var(--discover-gutter)}
 .nav-product{display:inline}.nav-toggle{display:block}.nav-links{display:none}
 .nav-links.open{display:flex;flex-direction:column;position:absolute;top:calc(100% + 8px);left:12px;right:12px;align-items:stretch;gap:4px;padding:14px;background:var(--discover-surface);border:var(--discover-edge);border-radius:20px;box-shadow:var(--shadow-lg);max-height:calc(100dvh - 110px);overflow-y:auto}
 .nav-links .nav-cta{justify-content:center;margin:4px 0 0}
 .nav-search-label{display:inline}.nav-search{justify-content:flex-start}
 .nav-links.open .lang-toggle{align-self:flex-start;margin:4px 0}
 .discovery-opening>.container{grid-template-columns:minmax(0,1fr);gap:14px}
 .discovery-welcome{min-width:0}
 .discovery-welcome h1{margin:0 0 6px}
 .voices-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .rankings-grid{grid-template-columns:1fr;gap:24px}
}
/* Functional phone chrome floats inside its existing reserved navigation area,
   so the shared mini-player retains exactly the same bottom clearance. */
@media(max-width:767px){
 .discover-tabs{inset:auto 8px 4px;height:calc(var(--discover-navigation-height) - 8px);padding:4px 5px calc(4px + env(safe-area-inset-bottom));border:1px solid #242a1f14;border-radius:22px;background:rgba(255,255,255,.96);box-shadow:0 2px 6px #242a1f05,0 8px 28px #242a1f0f}
 .discover-tabs a{min-height:44px;gap:2px;border-radius:16px;font:500 11px/1.25 var(--font-text)}
 .discover-tabs svg{width:22px;height:22px}
 .discover-tabs a[aria-current]{background:#e3ebe5;color:#183537}
 @supports(backdrop-filter:blur(16px)){.discover-tabs{background:rgba(255,255,255,.88);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15)}}
}
/* Reading quiets chrome without removing a destination or moving the player.
   Reserved page space stays constant, so this never changes story geometry. */
.to-top:not(.show){visibility:hidden;pointer-events:none}
@media(max-width:700px){
 .listener-nav{transition:transform 180ms cubic-bezier(.2,.7,.2,1)}
 .discover-tabs{left:50%;right:auto;width:calc(100% - 16px);transform:translateX(-50%);transition:width 180ms cubic-bezier(.2,.7,.2,1)}
 .to-top{bottom:calc(var(--discover-navigation-height) + var(--standup-player-height,0px) + 12px)}
 .discover-chrome-reading .listener-nav{transform:translateY(-105%);pointer-events:none}
 .discover-chrome-reading .listener-nav:focus-within{transform:none;pointer-events:auto}
 .discover-chrome-compact .discover-tabs{width:232px}
 .discover-chrome-compact .discover-tabs a>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
 .listener-nav,.discover-tabs{transition:none}
}
/* Compact width: content and context precede participation, never a sliver. */
@media(max-width:760px){
 :root{--discover-gutter:20px}
 .nav .nav-inner{min-height:63px;gap:8px}
 .listener-nav .lang-toggle button{min-width:44px}
 .listener-nav [data-listener-account] .public-sign-in{width:44px;padding:8px}
 .listener-nav [data-listener-account] .public-sign-in-icon{display:block}
 .listener-nav .public-sign-in-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
 .section{padding-block:36px}
 .section-head{flex-direction:row;align-items:flex-end;gap:10px;margin-bottom:18px;text-align:left}
 .section-head-text{flex-basis:100%;min-width:0}
 .section-eyebrow{margin-bottom:5px}
 .section-title{font-size:25px;line-height:1.22;letter-spacing:-.6px}
 .section-blurb{margin:-6px 0 20px;font-size:15px}
 .section-action{min-height:44px;font-size:14px}
 .discovery-opening{padding:20px 0 10px}
 .discovery-opening>.container{gap:12px}
 .discovery-welcome{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
 .discovery-welcome h1{width:100%;max-width:100%;margin:0;font-size:28px;line-height:1.15;letter-spacing:-.8px;overflow-wrap:anywhere}
 .discovery-subtitle{width:100%;max-width:100%;margin:0;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
 .hero-search-input{height:48px;padding-left:42px;padding-right:50px;border-radius:13px}
 .hero-search-icon{left:15px}
 .hero-search-submit{top:2px;right:2px;width:44px;height:44px;border-radius:10px}
 .discovery-interests{gap:4px 6px}
 .interest-links{display:contents}
 .interests-label{flex:0 1 auto;display:inline-flex;align-items:center;min-height:44px}
 .discovery-interests>a,.discovery-interests .topic-chip{font-size:13px;padding:8px 11px}
 .editorial-grid,#fresh>.container>.editorial-grid,.net-grid{grid-template-columns:minmax(0,1fr);gap:16px}
 .editorial-grid .card-body,.net-grid .article-card .card-body{gap:10px;padding:20px 20px 14px}
 .editorial-grid .card-title,.net-grid .article-card .card-title{font-size:22px;line-height:1.3;letter-spacing:-.45px}
 .editorial-grid .card-desc,.net-grid .article-card .card-desc{font-size:15px;line-height:1.6}
 .editorial-grid .card-cover,.net-grid .article-card .card-cover{aspect-ratio:1.91!important}
 .editorial-grid .card-cover.is-letterboxed img:not(.card-brand),.net-grid .article-card .card-cover.is-letterboxed img:not(.card-brand){object-fit:contain}
 .byline-name{font-size:14px}.card-foot{font-size:13px;padding-top:2px}
 .card-participation{margin:0 20px 14px;min-height:44px}
 .section-head-actions{flex-basis:100%;justify-content:flex-start;gap:4px 8px}
 .section-voices{padding-block:28px}
 .rail-voices .rail-track{gap:10px;padding-bottom:12px}
 .rail-voices .voice-chip{flex-basis:128px;gap:8px;padding:14px 8px;border-radius:18px}
 .rail-voices .voice-chip-avatar{width:56px;height:56px;flex-basis:56px}
 .rail-voices .voice-chip-name{font-size:13px}
 .section-finds{margin-block:8px}.finds-next{min-height:44px;font-size:14px}
 .section-podcasts{padding-block:36px;margin-block:8px}
 .section-podcasts .article-card{gap:12px;padding:16px;grid-template-columns:68px minmax(0,1fr)}
 .section-podcasts .card-cover{width:68px;height:68px}
 .section-podcasts .card-participation{margin:0}
 .rail-podcasts .rail-track>.article-card,.rail-podcasts .feed-skeleton{flex-basis:92%}
 .discovery-refine{padding:0 0 12px;margin-bottom:16px}
 .net-filter{gap:6px 10px}
 .net-chips{flex-basis:100%;flex-wrap:nowrap;gap:2px 6px;overflow-x:auto;scroll-padding-inline:4px}
 .net-chips>.topic-chip{flex-shrink:0;white-space:nowrap}
 .topic-chip{min-height:44px;padding:8px 11px;font-size:13px}
 .net-search-wrap{flex:1 1 200px;min-width:0;max-width:none}
 .net-search{font-size:16px}
 .net-search-results{width:100%;max-width:100%;left:0;right:auto}
 #network .article-card{padding-block:18px;column-gap:14px}
 #network .article-card .card-cover{width:72px;height:72px;border-radius:12px}
 #network .article-card .card-title{font-size:21px}
 .adrawer{inset:8px;width:calc(100vw - 16px);border-radius:22px}
 .collection-card .card-body{padding:18px}.collection-card .card-title{font-size:20px}
 .rail-collections .rail-track{gap:16px}
 .rail-collections .rail-track>.collection-card,.rail-collections .rail-track>.collection-loading{flex-basis:86%}
 .collection-sort select{font-size:14px}
 .discovery-rankings{margin-inline:0;padding:18px;border-radius:20px}
 .discovery-rankings .section{padding-block:16px}
 .search-result-section .dl-grid{grid-template-columns:minmax(0,1fr)}
 .search-result-section .dl-card{grid-template-columns:64px minmax(0,1fr);gap:4px 12px;padding:14px}
 .search-result-section .dl-card .dl-art{width:64px;max-height:64px}
 .footer{margin-top:20px;padding-top:32px}
 .footer-grid{gap:28px;margin-bottom:28px}
 .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
 .footer-col h4{margin-bottom:8px}.footer-col a{font-size:14px;min-height:44px}
 .footer-bottom{gap:12px;font-size:12px}
}
@media(max-width:360px){
 :root{--discover-gutter:16px}
 .nav-product{margin-left:8px;font-size:11px}.standup-wordmark{font-size:29px}
 .editorial-grid .card-body,.net-grid .article-card .card-body{padding-inline:18px}
 .card-participation{margin-inline:18px}
 .section-podcasts .article-card{padding:12px}
 .section-podcasts .card-participation{margin:0}
 .rail-podcasts .rail-track>.article-card{flex-basis:100%}
 .voices-grid{grid-template-columns:1fr}
}
/* Short phone windows need less introductory chrome, not less content.
   All interests remain visible; their label joins the same wrapping flow.
   Search and navigation controls retain at least 44px touch targets. */
@media(max-width:767px) and (max-height:720px){
 .discovery-opening{padding-block:10px 8px}
 .discovery-opening>.container{gap:10px}
 .discovery-welcome{gap:4px}
 .discovery-welcome h1{font-size:24px;line-height:1.12}
 .discovery-interests{gap:6px;align-items:center}
 .discovery-interests .interests-label{font-size:12px}
 .discovery-interests .topic-chip{min-height:44px;padding-inline:9px}
 .discovery-interests .interest-all{padding-inline:9px;font-size:13px}
}
@media(hover:none),(max-width:1100px){
 .rail-collections,.rail-podcasts{padding-bottom:44px}
 .rail-collections .rail-arrow,.rail-podcasts .rail-arrow{display:flex;top:auto;bottom:0;transform:none}
 .rail-collections .rail-arrow-prev,.rail-podcasts .rail-arrow-prev{left:0}
 .rail-collections .rail-arrow-next,.rail-podcasts .rail-arrow-next{right:0}
 .rail-collections:not(.is-scrollable),.rail-podcasts:not(.is-scrollable){padding-bottom:0}
}
@media(prefers-reduced-motion:reduce){.feed-skeleton,.collection-loading{animation:none}}
@media(prefers-reduced-transparency:reduce){.nav,.discover-tabs{background:var(--theme-bg);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-contrast:more){.nav,.discover-tabs{background:var(--theme-bg);backdrop-filter:none;-webkit-backdrop-filter:none}.editorial-grid .article-card,.net-grid .article-card,.collection-card,.discovery-refine{border-color:var(--theme-border-strong)}}
@media(forced-colors:active){.discover-tabs,.card-social>.engagement-actions{border-color:CanvasText;box-shadow:none}.discover-tabs a[aria-current]{outline:1px solid Highlight;outline-offset:-3px}}

/* Discover design system. One token layer for light and dark, then the shared
   shell. Loaded after discover.css and discover_editorial.css, so the roles
   defined here are the ones every older rule resolves to.

   Principles (see docs/audio-portal-beta-hig.md, "Discover surface"):
   - One warm neutral surface; artwork and photography carry the colour.
   - Ink is the primary action. Orange means value (zaps, sats, boosts) and
     the brand dot, nothing else.
   - Newsreader is the editorial voice (headlines, story faces, the reader);
     the system font is the interface voice, so phones feel native.
   - Material (blur) only on floating chrome; content stays opaque. */

/* The blogs' own Newsreader files (site_fonts.json), so the font has one home. */
@font-face{font-family:'Newsreader';src:url('/static/fonts/newsreader/newsreader-latin-opsz-normal.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('/static/fonts/newsreader/newsreader-latin-opsz-italic.woff2') format('woff2');font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:'TheBoldFont';src:url('/static/discover/TheBoldFont.woff') format('woff');font-display:swap}

:root{
  color-scheme:light;
  --font-display:'Newsreader','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --font-editorial:var(--font-display);

  --theme-bg:#F6F5F2;
  --theme-bg-card:#FFFFFF;
  --theme-bg-subtle:#EFEEEA;
  --theme-fill:#ECEBE6;
  --theme-fill-strong:#E1DFD9;
  --theme-text-heading:#0B0B0A;
  --theme-text-strong:#2B2A27;
  --theme-text:#4B4A46;
  /* Text roles clear 4.5:1 on every surface below, fill-strong included. */
  --theme-text-muted:#62615C;
  --theme-border:#E2E0DA;
  --theme-border-subtle:#ECEAE5;
  --theme-border-strong:#CDCBC4;
  --theme-divider:#B4B2AB;
  --theme-accent:var(--orange);
  --theme-accent-strong:var(--orange-dim);
  --theme-accent-soft:#FDF0DF;
  --theme-accent-text:#96500A;
  /* Links in a story are ink, told apart by their underline (article.css);
     text on an orange fill is ink too, never white (2.2:1). */
  --theme-link:var(--theme-text-heading);
  --theme-on-accent:#0B0B0A;
  /* The marker under marker links, tip boxes and recommendations: the sand a
     light blog page uses (theme.py MARK_AUTO; the soft mark is 30% of it in
     the page colour, text on it is on_fill). */
  --theme-mark:#f2c879;
  --theme-mark-soft:#f5e8cf;
  --theme-on-mark:#16130f;
  --theme-invert-bg:#0B0B0A;
  --theme-invert-bg-hover:#2B2A27;
  --theme-invert-text:#F6F5F2;
  /* The chosen segment of a segmented control: raised above its track. */
  --ds-control-on:#FFFFFF;

  /* The stage: the one dark, cinematic surface (hero, spotlights). It stays
     dark in both themes, so artwork reads the same everywhere. */
  --ds-stage:#121211;
  --ds-stage-raised:#1F1E1C;
  --ds-stage-text:#F6F5F2;
  --ds-stage-muted:#ADABA3;
  --ds-glass:rgb(250 249 246 / .78);
  --ds-glass-line:rgb(11 11 10 / .08);
  --ds-scrim:rgb(11 11 10 / .38);
  --ds-shadow-1:0 1px 2px rgb(11 11 10 / .05),0 6px 18px -10px rgb(11 11 10 / .22);
  --ds-shadow-2:0 2px 6px rgb(11 11 10 / .06),0 18px 40px -18px rgb(11 11 10 / .38);
  --ds-radius-xs:8px;
  --ds-radius-sm:12px;
  --ds-radius-md:16px;
  --ds-radius-lg:22px;
  --ds-radius-xl:28px;
  --ds-ease:cubic-bezier(.2,0,0,1);
  --ds-ease-out:cubic-bezier(.05,.7,.1,1);
  --ds-ease-in:cubic-bezier(.3,0,.8,.15);
  --ds-gutter:16px;
  --ds-measure:1320px;
  /* The sticky header's bar (its hairline adds 1px). Anchors land below it,
     plus whatever else a page keeps sticky (--ds-sticky-extra, the reader's
     action bar), plus one breathing gap: the single source for jump targets. */
  --ds-nav-height:68px;
  --ds-anchor-gap:16px;

  /* Older composition tokens resolve to the system. */
  --discover-surface:var(--theme-bg-card);
  --discover-warm:var(--theme-bg-subtle);
  --discover-feature:var(--ds-stage);
  --discover-feature-text:var(--ds-stage-text);
  --discover-radius:var(--ds-radius-md);
  --discover-radius-large:var(--ds-radius-lg);
  --discover-edge:1px solid var(--theme-border);
  --discover-shadow:var(--ds-shadow-1);
  --discover-control-border:var(--theme-border-strong);
}
@media (min-width:768px){:root{--ds-gutter:24px}}
@media (min-width:1001px){:root{--ds-gutter:32px}}

/* Dark: the same roles, darker values. Elevated surfaces get lighter, never
   darker, so depth still reads. */
:root[data-theme=dark]{
  color-scheme:dark;
  --theme-bg:#0E0E0D;
  --theme-bg-card:#191918;
  --theme-bg-subtle:#1E1E1C;
  --theme-fill:#252523;
  --theme-fill-strong:#302F2C;
  --theme-text-heading:#F3F2EE;
  --theme-text-strong:#DCDAD4;
  --theme-text:#BEBCB5;
  --theme-text-muted:#9C9A93;
  --theme-border:#2A2927;
  --theme-border-subtle:#21201E;
  --theme-border-strong:#3C3B37;
  --theme-divider:#5A5853;
  --theme-accent-soft:#2A1F12;
  --theme-accent-text:#F7A13A;
  --theme-link:var(--theme-text-heading);
  --theme-on-accent:#0B0B0A;
  /* The deep amber of a dark blog page (65% of it in the soft mark): light
     text on the light sand measured 3.7:1 under marker links, on this 10:1. */
  --theme-mark:#705410;
  --theme-mark-soft:#4b3a15;
  --theme-on-mark:#ffffff;
  --orange-text:#F7A13A;
  --ds-control-on:#3C3B37;
  --orange-light:#2A1F12;
  --theme-invert-bg:#F3F2EE;
  --theme-invert-bg-hover:#DCDAD4;
  --theme-invert-text:#0E0E0D;
  --gray-900:#F3F2EE;--gray-800:#E4E2DC;--gray-700:#CFCDC6;--gray-600:#BEBCB5;--gray-500:#9C9A93;
  --gray-400:#6E6C67;--gray-300:#3C3B37;--gray-200:#2A2927;--gray-100:#21201E;--gray-50:#1A1A18;--white:#191918;
  --ds-stage:#1A1918;
  --ds-stage-raised:#262523;
  --ds-glass:rgb(28 28 26 / .78);
  --ds-glass-line:rgb(255 255 255 / .09);
  --ds-scrim:rgb(0 0 0 / .58);
  --ds-shadow-1:0 1px 2px rgb(0 0 0 / .4),0 8px 22px -12px rgb(0 0 0 / .7);
  --ds-shadow-2:0 2px 8px rgb(0 0 0 / .45),0 22px 48px -18px rgb(0 0 0 / .8);
}

html{background:var(--theme-bg);scroll-padding-top:calc(var(--ds-nav-height) + 1px + var(--ds-sticky-extra,0px) + var(--ds-anchor-gap));scroll-padding-bottom:calc(var(--discover-navigation-height,0px) + var(--standup-player-height,0px) + 12px)}
body{background:var(--theme-bg);color:var(--theme-text-heading);font-family:var(--font-text)}
::selection{background:var(--theme-accent-soft);color:var(--theme-text-heading)}
:focus-visible{outline:2px solid var(--theme-text-heading);outline-offset:3px}
body .container{max-width:var(--ds-measure);padding-inline:var(--ds-gutter)}

/* ── Header ──────────────────────────────────────────────────────────── */
.nav.listener-nav{background:color-mix(in srgb,var(--theme-bg) 88%,transparent);border-bottom:1px solid transparent;box-shadow:none;transition:border-color .2s var(--ds-ease)}
@supports(backdrop-filter:blur(16px)){.nav.listener-nav{background:color-mix(in srgb,var(--theme-bg) 78%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}}
/* Safari before 16.2 has no color-mix(): a clear bar would let the page run under the links. */
@supports not (color:color-mix(in srgb,red,red)){.nav.listener-nav{background:var(--theme-bg)}}
.nav.listener-nav.scrolled{border-bottom-color:var(--theme-border);box-shadow:none}
.listener-nav .nav-inner{display:flex;align-items:center;gap:16px;min-height:var(--ds-nav-height);flex-wrap:nowrap;max-width:none;padding-inline:var(--ds-gutter)}
.discover-wordmark{font:760 27px/1 var(--font-text);letter-spacing:-.045em;color:var(--theme-text-heading)}
.discover-wordmark>span{color:var(--theme-accent)}
.listener-nav .nav-links{flex:0 0 auto;justify-content:flex-start;gap:4px}
/* Every header control is a 44px target. Pills keep their lighter look by
   drawing the plate inside a transparent 4px border (as the phone's
   language control does). */
/* The pill paints inside a 4px transparent border: 36px to the eye, 44px to
   the finger. The background shorthand would reset the clip, so colour only. */
.listener-nav .nav-links>a{min-width:0;min-height:44px;padding:0 12px;border:4px solid transparent;background-color:transparent;background-clip:padding-box;border-radius:999px;font:600 14px/1 var(--font-text);color:var(--theme-text-muted)}
.listener-nav .nav-links>a:hover{color:var(--theme-text-heading);background-color:var(--theme-bg-subtle)}
.listener-nav .nav-links>a[aria-current]{color:var(--theme-text-heading);font-weight:650;background-color:var(--ds-control-on);background-clip:padding-box;box-shadow:inset 0 0 0 1px var(--theme-border)}
.listener-nav .nav-links>a[aria-current]::after{display:none}
.listener-nav .nav-search{flex:1 1 auto;max-width:480px;min-height:44px;margin-inline:auto;padding:0 16px;gap:10px;border:0;border-radius:999px;background:var(--theme-bg-card);box-shadow:inset 0 0 0 1px var(--theme-border);color:var(--theme-text-muted);font:15px/1 var(--font-text)}
.listener-nav .nav-search:hover{box-shadow:inset 0 0 0 1px var(--theme-border-strong);background:var(--theme-bg-card)}
.listener-nav .nav-search svg{width:19px;height:19px;flex:none}
.listener-nav .nav-search kbd{margin-left:auto;font:600 11px/1 var(--font-text);padding:3px 6px;border:1px solid var(--theme-border-strong);border-radius:5px;color:var(--theme-text-muted);background:transparent}
.listener-nav .nav-tools{flex:0 0 auto;gap:6px;flex-wrap:nowrap}
.listener-nav .lang-toggle{gap:0;margin:0;padding:0;border-radius:999px;background:var(--theme-bg-subtle)}
.listener-nav .lang-toggle button{min-width:44px;min-height:44px;padding:0 8px;border:4px solid transparent;background-clip:padding-box;border-radius:999px;font:650 12px/1 var(--font-text);color:var(--theme-text-muted)}
.listener-nav .lang-toggle button.active{background-color:var(--ds-control-on);color:var(--theme-text-heading);box-shadow:none}
:root:not([data-theme=dark]) .listener-nav .lang-toggle button.active{box-shadow:inset 0 0 0 1px var(--theme-border)}
/* Chrome links are 44px targets with any pointer, not only on touch. */
.skip,.nav-brand,.footer-logo-link,.ds-rail-title{display:inline-flex;align-items:center;min-height:44px}
.skip{padding-block:0}
.ds-iconbtn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;color:var(--theme-text-muted);background:transparent;border:0;cursor:pointer}
.ds-iconbtn:hover{color:var(--theme-text-heading);background:var(--theme-bg-subtle)}
.ds-iconbtn svg{width:21px;height:21px}
.ds-theme-toggle>span{display:grid}
.ds-theme-toggle .ds-theme-dark{display:none}
:root[data-theme=dark] .ds-theme-toggle .ds-theme-dark{display:grid}
:root[data-theme=dark] .ds-theme-toggle .ds-theme-light{display:none}
.listener-nav .nav-account,.listener-nav [data-listener-account] .public-sign-in{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--theme-invert-bg);color:var(--theme-invert-text);font:650 14px/1 var(--font-text)}
.listener-nav .nav-account:hover,.listener-nav [data-listener-account] .public-sign-in:hover{background:var(--theme-invert-bg-hover)}
.listener-nav .nav-account svg{display:none}
@media (max-width:1000px) and (min-width:768px){
  .listener-nav .nav-search{flex:0 0 44px;width:44px;padding:0;justify-content:center;box-shadow:none;background:transparent;margin-inline:auto 0}
  .listener-nav .nav-search-label,.listener-nav .nav-search kbd{display:none}
  .listener-nav .nav-links{margin-inline:auto;padding:4px;border-radius:999px;background:var(--theme-bg-subtle)}
  .listener-nav .nav-links{padding:0}
  .listener-nav .nav-links>a[aria-current]{box-shadow:none}
}

/* ── Phone chrome: floating, stable tab bar ──────────────────────────── */
@media (max-width:767px){
  :root{--discover-navigation-height:calc(76px + env(safe-area-inset-bottom));--ds-nav-height:56px}
  .listener-nav .nav-inner{gap:8px}
  .listener-nav .discover-wordmark{font-size:23px}
  /* Phones follow the system appearance; language stays one tap away as a
     segmented control of two 44px targets with 36px plates. */
  .listener-nav .ds-theme-toggle{display:none}
  .listener-nav .nav-tools{margin-left:auto}
  .listener-nav .nav-account,.listener-nav [data-listener-account] .public-sign-in{width:44px;min-width:44px;min-height:44px;padding:0;justify-content:center;background:var(--theme-bg-subtle);color:var(--theme-text-heading)}
  .listener-nav .nav-account svg{display:block;width:21px;height:21px}
  .listener-nav .nav-account>span{display:none}
  .discover-tabs{inset:auto auto calc(10px + env(safe-area-inset-bottom)) 50%;width:calc(100% - 24px);transform:translateX(-50%);height:62px;padding:4px;gap:2px;border:0;border-radius:31px;background:var(--ds-glass);box-shadow:0 0 0 1px var(--ds-glass-line),0 14px 34px -14px rgb(0 0 0 / .45);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6)}
  .discover-tabs a{min-height:54px;gap:2px;border-radius:27px;color:var(--theme-text-muted);font:600 10.5px/1.1 var(--font-text)}
  .discover-tabs a svg{width:24px;height:24px}
  .discover-tabs a[aria-current]{color:var(--theme-text-heading);font-weight:700;background:color-mix(in srgb,var(--theme-text-heading) 8%,transparent)}
  .discover-tabs a:focus-visible{outline:2px solid var(--theme-text-heading);outline-offset:-3px;border-radius:27px}
}


/* ── Home stage: today's hand ────────────────────────────────────────── */
.discover-composition.is-home{padding-top:12px}
.discover-stage{--stage-move:280ms;--stage-fade:120ms;--stage-ease:cubic-bezier(.2,0,0,1);position:relative;isolation:isolate;overflow:hidden;max-width:var(--ds-measure);margin:0 auto;border-radius:var(--ds-radius-xl);color:var(--ds-stage-text);
  /* Never flat black: a low warm light from above and a cool depth below,
     so the stage keeps its atmosphere even when today's picture is dark. */
  background:radial-gradient(64% 84% at 14% -10%,rgb(206 140 84 / .3),transparent 70%),
    radial-gradient(58% 80% at 98% 110%,rgb(84 118 156 / .32),transparent 72%),
    radial-gradient(80% 60% at 50% 118%,rgb(246 245 242 / .07),transparent 70%),var(--ds-stage)}
/* Quiet arcs around the fan's own pivot: structure that echoes the hand, fading out before the headline. */
.discover-stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 132%,transparent 0 63px,rgb(246 245 242 / .07) 63.5px 64.5px,transparent 65px 72px);
  -webkit-mask:radial-gradient(75% 95% at 50% 112%,#000 28%,transparent 74%);mask:radial-gradient(75% 95% at 50% 112%,#000 28%,transparent 74%)}
/* Fine grain gives the surface material and keeps the soft light from
   banding. Plain blending: a blend mode would recomposite under every move. */
.discover-stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (min-width:1001px){.discover-stage{margin-inline:max(var(--ds-gutter),calc((100% - var(--ds-measure)) / 2 + var(--ds-gutter)));max-width:none}}
@media (max-width:1000px){.discover-stage{margin-inline:var(--ds-gutter)}}
/* Ambient light from today's covers: one small layer per card, blurred once
   and scaled up, cross-faded with opacity only. A live blur on a swapped
   image re-rendered every frame and dropped a third of them. */
.stage-glows{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.stage-glows::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(18 18 17 / .5) 20%,rgb(18 18 17 / .12) 55%,transparent 80%)}
.stage-glow{position:absolute;left:50%;top:50%;width:96px;height:54px;margin:-27px 0 0 -48px;background:center/cover no-repeat;filter:blur(6px) saturate(1.7) brightness(.95);transform:scale(18);opacity:0;transition:opacity 480ms var(--stage-ease)}
.stage-glow.is-on{opacity:.62}
.stage-inner{padding:32px var(--ds-gutter) 0;text-align:center}
.discover-stage:not(.has-hand) .stage-inner{padding-bottom:48px}
.stage-eyebrow{display:inline-flex;align-items:center;gap:8px;min-height:28px;margin:0;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .16);font:600 12.5px/1 var(--font-text);color:var(--ds-stage-muted)}
.stage-dot{width:6px;height:6px;border-radius:50%;background:var(--orange)}
.discover-stage h1{max-width:14ch;margin:14px auto 8px;font:450 clamp(38px,4.1vw,56px)/1.02 var(--font-display);letter-spacing:-.025em;font-optical-sizing:auto;text-wrap:balance;color:inherit}
.stage-sub{max-width:46ch;margin:0 auto;font:16px/1.5 var(--font-text);color:var(--ds-stage-muted)}
/* The fan rises from the stage's lower edge: resting cards show their top
   170px; the chosen one lifts clear of the edge (rise = the 134px it sits
   below the hand + an 18px margin), so its byline and length are never cut. */
.stage-hand{--step:134px;--spread-step:176px;--card-step:102px;--tilt:7deg;--curve:12px;--rise:152px;position:relative;height:340px;max-width:1100px;margin:22px auto 0;padding:0;list-style:none}
.stage-hand.is-spread{--step:var(--spread-step);--tilt:4deg;--curve:9px;--rise:152px}
.stage-slot{--d:0;--a:0;--aa:0;--lift:0;position:absolute;left:50%;bottom:-134px;width:198px;height:304px;margin-left:-99px;z-index:calc(20 - var(--aa));
  transform:translate(calc(var(--d) * var(--step)),calc(var(--d) * var(--d) * var(--curve) - var(--lift) * var(--rise))) rotate(calc(var(--d) * var(--tilt)));
  transform-origin:50% 120%;will-change:transform;
  /* The stacking order changes partway through the move, so a card never jumps in front of its neighbour. */
  transition:transform var(--stage-move) var(--stage-ease),z-index 0s calc(var(--stage-move) * .4)}
@media (min-width:768px){.stage-hand:not(.is-spread) .stage-slot{transition-duration:200ms,0s}}
/* Dims cards away from the active one, continuously while a finger drags (phones). */
.stage-slot::after{content:"";position:absolute;inset:0;border-radius:18px;background:#000;opacity:0;pointer-events:none;transition:opacity var(--stage-move) var(--stage-ease)}
.stage-hand.is-dragging .stage-slot,.stage-hand.is-dragging .stage-slot::after{transition:none}
.stage-slot[data-stage-active]{--lift:1}
.stage-card{position:relative;isolation:isolate;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:18px;background:var(--ds-stage-raised);color:var(--ds-stage-text);text-align:left;text-decoration:none;
  box-shadow:0 0 0 1px rgb(255 255 255 / .07),0 24px 60px -20px rgb(0 0 0 / .85)}
.stage-card.is-active{box-shadow:0 0 0 1px rgb(255 255 255 / .16),0 28px 64px -20px rgb(0 0 0 / .9)}
.stage-card:focus-visible{outline:2px solid #fff;outline-offset:4px}
.stage-card.has-art::before{content:"";position:absolute;inset:-48px;z-index:-2;background:var(--art) center/cover no-repeat;filter:blur(34px) saturate(1.35);opacity:.95}
.stage-card.has-art::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgb(18 18 17 / .18),rgb(18 18 17 / .55) 52%,rgb(18 18 17 / .9))}
/* The artwork yields height to a long headline; the image scales inside it, never cropped. */
.stage-art{position:relative;flex:0 1 170px;min-height:114px;display:flex;align-items:center;justify-content:center;padding:16px 16px 0}
.stage-art:is(.is-words,.is-title){flex-shrink:0}
html[data-discover-document] .discover-stage .stage-art[data-fig]>img{width:auto;height:auto;max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 14px 34px -10px rgb(0 0 0 / .7),0 0 0 1px rgb(255 255 255 / .06)}
html[data-discover-document] .discover-stage .stage-art[data-fig].is-letterboxed::before{display:none}
.stage-art.is-words{display:flex;align-items:flex-end;justify-content:flex-start;padding:18px;background:linear-gradient(160deg,#2E2D2A,#1D1C1A)}
.stage-art.is-words q,.stage-art.is-title>span{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;quotes:none;color:#ECEAE4;text-wrap:pretty}
.stage-art.is-words q{-webkit-line-clamp:5;font:italic 400 19px/1.25 var(--font-display)}
.stage-art.is-title>span{-webkit-line-clamp:4;font:500 23px/1.12 var(--font-display);letter-spacing:-.01em}
.stage-listen{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgb(18 18 17 / .55);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 0 1px rgb(255 255 255 / .12)}
.stage-listen svg{width:16px;height:16px}
.stage-body{display:flex;flex-direction:column;flex:1 0 auto;gap:8px;padding:14px 16px 18px;transition:opacity var(--stage-fade) var(--stage-ease) 60ms}
.stage-slot:not([data-stage-active]) .stage-body{opacity:0;transition-delay:0s}
.stage-hand.is-spread .stage-slot .stage-body{opacity:1;transition-delay:60ms}
.stage-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.stage-card .card-social-metrics{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--font-text);color:var(--ds-stage-text)}
.stage-card .stat{display:inline-flex;align-items:center;gap:4px}
.stage-card .stat svg{width:12px;height:12px;color:var(--ds-stage-muted)}
.stage-card .stat-zap svg{color:var(--orange)}
.stage-kind{font:700 11px/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:var(--ds-stage-muted)}
.stage-title{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font:500 17px/1.18 var(--font-display);text-wrap:pretty}
.stage-by{display:flex;align-items:center;gap:8px;min-width:0;margin-top:auto;font:12.5px/1.2 var(--font-text);color:var(--ds-stage-muted)}
.stage-by img{flex:none;width:20px;height:20px;border-radius:50%;object-fit:cover}
.stage-author{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.stage-meta{flex:none;margin-left:auto}
.stage-dots{display:none;justify-content:center;gap:6px;padding:12px 0 16px;position:relative;z-index:30}
.stage-dots i{width:6px;height:6px;border-radius:3px;background:rgb(255 255 255 / .3);transition:width var(--stage-move) var(--stage-ease),background-color var(--stage-fade)}
.stage-dots i.on{width:18px;background:#fff}
@media (max-width:767px){
  .discover-composition.is-home{padding-top:4px}
  .discover-stage{--stage-move:320ms;--stage-ease:cubic-bezier(.05,.7,.1,1);margin-inline:12px;border-radius:24px}
  .stage-inner{padding:18px 16px 0}
  .stage-eyebrow{min-height:26px;font-size:12px}
  .discover-stage h1{max-width:12ch;margin:10px auto 0;font-size:28px}
  .stage-sub{display:none}
  .stage-hand{height:288px;margin-top:16px;touch-action:pan-y}
  .stage-slot{width:180px;height:274px;margin-left:-90px;bottom:-14px;
    transform:translate(calc(var(--a) * var(--card-step)),calc(var(--aa) * 20px)) rotate(calc(var(--a) * 6deg))}
  .stage-art{flex-basis:140px;min-height:98px;padding:12px 12px 0}
  .stage-slot::after{opacity:calc(min(var(--aa), 1) * .3)}
  .stage-dots{display:flex}
}
@media (prefers-reduced-motion:reduce){.stage-slot,.stage-slot::after,.stage-body,.stage-glow,.stage-dots i{transition:none!important}}

/* ── Section rhythm ──────────────────────────────────────────────────── */
.ds-section-head,.discover-world-heading,.discover-people>h2,.discover-curations>header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 14px}
.ds-section-head h2,.discover-world-heading h2,.discover-people>h2,.discover-curations h2,.section-network .section-title{margin:0;font:650 22px/1.2 var(--font-text);letter-spacing:-.015em;color:var(--theme-text-heading);text-transform:none}
.discover-world-heading h2 a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:inherit;text-decoration:none}
.discover-world-heading h2 a:hover .world-topic-arrow{transform:translate(2px,-2px)}
.world-topic-name{text-transform:capitalize}
.world-topic-arrow{font-size:16px;color:var(--theme-text-muted);transition:transform .2s var(--ds-ease)}
.ds-section-link,.discover-curations .section-action{display:inline-flex;align-items:center;min-height:44px;font:600 14px/1 var(--font-text);color:var(--theme-text-muted);text-decoration:none}
.ds-section-link:hover,.discover-curations .section-action:hover{color:var(--theme-text-heading);text-decoration:none}
.discover-composition.is-home .discover-worlds,.home-listen,.discover-composition.is-home .discover-routes{padding-top:36px}
.discover-world+.discover-world{margin-top:36px}
.discover-composition #network.section-network{padding-block:44px 24px}
.section-network .section-eyebrow{display:none}
.section-network .section-head{margin-bottom:10px}
.net-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:767px){
  .ds-section-head h2,.discover-world-heading h2,.discover-people>h2,.discover-curations h2,.section-network .section-title{font-size:20px}
  .discover-composition.is-home .discover-worlds,.home-listen,.discover-composition.is-home .discover-routes{padding-top:28px}
}

/* ── Rails ───────────────────────────────────────────────────────────── */
.discover-composition .rail-world-stories .world-front,.discover-composition .rail-world-stories .world-support{display:contents}
.discover-composition .rail-world-stories .rail-track{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px) / 3);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 0 6px}
.discover-composition .rail-world-stories .rail-track::-webkit-scrollbar{display:none}
.discover-composition .rail-world-stories .rail-track>*{scroll-snap-align:start}
.discover-composition .rail-viewport{overflow:visible}
.discover-composition .rail::before,.discover-composition .rail::after{display:none}
.rail-arrow{width:40px;height:40px;border:0;border-radius:50%;background:var(--theme-bg-card);color:var(--theme-text-heading);box-shadow:var(--ds-shadow-2)}
@media (max-width:1000px){.discover-composition .rail-world-stories .rail-track{grid-auto-columns:minmax(260px,46%);gap:16px}}
@media (max-width:767px){
  .discover-composition .rail-world-stories .rail-track{grid-auto-columns:78%;gap:12px;margin-inline:calc(var(--ds-gutter) * -1);padding-inline:var(--ds-gutter);scroll-padding-inline:var(--ds-gutter)}
}

/* ── Story card ──────────────────────────────────────────────────────── */
.discover-composition .article-card{position:relative;display:flex;flex-direction:column;gap:0;min-width:0;height:auto;padding:0;border:0;border-radius:var(--ds-radius-md);background:transparent;box-shadow:none;transform:none}
.discover-composition .article-card:hover{box-shadow:none;transform:none}
.discover-composition .article-card .card-cover{position:relative;overflow:hidden;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--ds-radius-md);background:var(--theme-fill)}
.discover-composition .article-card .card-cover>img:not(.card-brand){width:100%;height:100%;transition:transform .5s var(--ds-ease)}
@media (hover:hover) and (pointer:fine){.discover-composition .article-card:hover .card-cover>img:not(.card-brand){transform:scale(1.03)}}
.discover-composition .article-card .card-body{display:flex;flex-direction:column;gap:6px;padding:12px 2px 0;background:transparent}
.discover-composition .article-card .card-title{margin:0;font:650 16.5px/1.3 var(--font-text);letter-spacing:-.006em;color:var(--theme-text-heading);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.discover-composition .article-card .card-link{color:inherit;text-decoration:none}
.discover-composition .article-card .card-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--ds-radius-md)}
.discover-composition .article-card .card-link:focus-visible{outline:none}
.discover-composition .article-card:has(.card-link:focus-visible){outline:2px solid var(--theme-text-heading);outline-offset:4px}
.discover-composition .article-card .card-desc{margin:0;font:14px/1.45 var(--font-text);color:var(--theme-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.discover-composition .article-card .byline{position:relative;z-index:2;display:flex;align-items:center;gap:8px;min-width:0;margin:0}
.discover-composition .article-card .byline-avatar{width:20px;height:20px;min-width:20px;border-radius:50%;font-size:9px}
.discover-composition .article-card .profile-avatar-link{min-width:0;min-height:0}
/* The 20 px picture and the one-line name keep their look but take a finger:
   each hit area grows to 44 px high. The name grows only vertically: a
   negative side margin made its intrinsic width 8px short of its text, so
   short names were cut with room to spare. */
.discover-composition .article-card .profile-avatar-link{padding:12px;margin:-12px}
/* A block (not the link's flex box) so a name that must give way ends in an ellipsis. */
.discover-composition .article-card .byline-name{display:block;min-height:0;padding:13.5px 0;margin:-13.5px 0}
.discover-composition .article-card .byline-text{display:flex;align-items:center;gap:6px;min-width:0}
.discover-composition .article-card .byline-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 13px/1.3 var(--font-text);color:var(--theme-text)}
.discover-composition .article-card .byline-nip05,.discover-composition .article-card .byline-site-row{display:none}
.discover-composition .article-card .card-foot{display:flex;align-items:center;gap:8px;margin:0;padding:0;border:0;font:13px/1.3 var(--font-text);color:var(--theme-text-muted)}
.discover-composition .article-card .card-foot svg{display:none}
.discover-composition .article-card .card-foot>span+span::before{content:"·";margin-right:8px;color:var(--theme-divider)}
.discover-composition .article-card .card-badge{top:10px;left:10px;right:auto;bottom:auto;height:26px;padding:0 10px;border:0;border-radius:999px;background:rgb(18 18 17 / .62);color:#fff;font:600 12px/26px var(--font-text);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* Text sleeves: the writer's own words, or the real headline laid over. */
.discover-composition .story-poster{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:18px 24px;color:var(--theme-text-heading)}
.discover-composition .story-poster.has-words::before{content:"\201C";display:block;height:.42em;font:400 54px/1 var(--font-display);color:var(--theme-divider)}
.discover-composition .story-poster.poster-tone-0{background:#ECEAE4}
.discover-composition .story-poster.poster-tone-1{background:#E7E9E6}
.discover-composition .story-poster.poster-tone-2{background:#EEE8DF}
:root[data-theme=dark] .discover-composition .story-poster.poster-tone-0{background:#22211F}
:root[data-theme=dark] .discover-composition .story-poster.poster-tone-1{background:#1F2120}
:root[data-theme=dark] .discover-composition .story-poster.poster-tone-2{background:#25221E}
.story-poster-words{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;quotes:none;font:italic 400 19px/1.3 var(--font-display);color:var(--theme-text-strong);text-wrap:pretty}
@media (max-width:1000px){.story-poster-words{-webkit-line-clamp:3;font-size:18px}}
/* Title face: a story without a picture wears its headline as the cover,
   set in the editorial face on a calm tone, like a magazine's cover line.
   The headline shares the sleeve's grid cell; as a grid item its z-index
   lifts it above the positioned sleeve without becoming the containing
   block of the card-wide link. */
.discover-composition .article-card.is-title-face{display:grid;grid-template-columns:minmax(0,1fr)}
.discover-composition .article-card.is-title-face>.card-cover{grid-area:1/1}
.discover-composition .article-card.is-title-face>.card-body{display:contents}
.discover-composition .article-card.is-title-face .card-title{z-index:1;grid-area:1/1;align-self:end;margin:0;padding:18px 20px;font:500 22px/1.16 var(--font-display);letter-spacing:-.012em;color:var(--theme-text-heading);-webkit-line-clamp:4;text-wrap:balance;pointer-events:none}
.discover-composition .article-card.is-title-face .card-link{pointer-events:auto}
/* A short rule opens the sleeve, so the empty space reads as a cover's
   margin rather than a picture that did not load. */
.discover-composition .story-poster.is-title-sleeve::before{content:"";position:absolute;top:20px;left:20px;width:28px;height:2px;border-radius:1px;background:var(--theme-text-heading);opacity:.32}

/* Shelf cards: one meta row (writer · time) shares its line with the
   activity summary, so a card is artwork, headline and a single quiet row. */
/* The writer's name and publication give way (ellipsis) before the fact
   beside them: the length or date is never cut mid-word. */
.discover-composition .discover-world .article-card{display:grid;grid-template-columns:minmax(0,max-content) auto minmax(0,1fr) auto;column-gap:8px;align-items:center}
.discover-composition .discover-world .article-card>.card-cover{grid-column:1/-1}
.discover-composition .discover-world .article-card>.card-body{display:contents}
.discover-composition .discover-world .article-card .card-title,.discover-composition .discover-world .article-card .card-desc{grid-column:1/-1;margin-top:12px}
.discover-composition .discover-world .article-card .card-desc{margin-top:4px}
.discover-composition .discover-world .article-card .byline{grid-column:1;margin-top:8px}
.discover-composition .discover-world .article-card .byline-text{min-width:0;max-width:100%}
.discover-composition .discover-world .article-card .byline-name{max-width:100%}
/* Shelf cards name the publication under the author, muted and on one line. */
.discover-composition .discover-world .article-card .byline-text{flex-direction:column;align-items:flex-start;gap:1px}
.discover-composition .discover-world .article-card .byline-site-row{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;min-width:0;max-width:100%}
.discover-composition .discover-world .article-card .byline-site{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 12px/1.25 var(--font-text);color:var(--theme-text-muted)}
.discover-composition .discover-world .article-card .byline-more{flex:none;font-size:11px}
.discover-composition .discover-world .article-card :is(.card-foot,.card-utility-row){grid-column:2;margin-top:8px;padding:0;white-space:nowrap}
.discover-composition .discover-world .article-card .card-foot::before{content:"·";margin-right:2px;color:var(--theme-divider)}
.discover-composition .discover-world .article-card .card-participation{grid-column:-2;justify-self:end;margin-top:8px}
.discover-composition .article-card .card-social-summary{width:max-content;margin-left:auto}
/* The sleeve's own bottom margin shares the row; the title sits on the sleeve, not below it. */
.discover-composition .discover-world .article-card.is-title-face .card-title{grid-area:1/1/2/-1;align-self:end;margin:0 0 14px}
/* Shelf cards are size containers so a title face scales with its card:
   every width fits the same five lines inside the 16:9 sleeve. */
.discover-composition .discover-world .article-card{container-type:inline-size}
.discover-composition .discover-world .article-card.is-title-face .card-title{padding:clamp(14px,6cqi,22px) clamp(16px,6.4cqi,24px);font-size:clamp(19px,7.6cqi,28px)}
.discover-composition .discover-world .story-poster.is-title-sleeve::before{top:clamp(16px,6.4cqi,24px);left:clamp(16px,6.4cqi,24px)}
/* The older activity-line reservation for mid-width containers would push
   the shelf row down; shelf cards keep one calm line instead. */
.discover-composition .discover-world .card-social:has(.card-social-metrics .social-metric svg,.card-social-metrics .stat){--social-controls-top:0px;padding-top:0}
.discover-composition .discover-world .card-social:has(.card-social-metrics .social-metric svg,.card-social-metrics .stat) .card-social-metrics{position:static;inset:auto}
.discover-composition .article-card .card-participation{position:relative;z-index:2;width:auto;min-height:0;margin:0;padding:0;border:0;container-type:normal}
.discover-composition .article-card:hover .card-title,.discover-composition .article-card .card-link:hover{text-decoration:none}
:is(.discover-composition,.discover-library) .card-social{position:static}
:is(.discover-composition,.discover-library) .card-social-summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;padding:0;border:0;background:transparent;list-style:none;cursor:pointer}
:is(.discover-composition,.discover-library) .card-social-summary::-webkit-details-marker{display:none}
:is(.discover-composition,.discover-library) .card-social-metrics{display:flex;align-items:center;gap:14px;min-height:24px;font:600 12.5px/1 var(--font-text);color:var(--theme-text-muted)}
:is(.discover-composition,.discover-library) .card-social-metrics :is(.stat,.social-metric){display:inline-flex;align-items:center;gap:5px}
:is(.discover-composition,.discover-library) .card-social-metrics svg{width:15px;height:15px}
:is(.discover-composition,.discover-library) .card-social-metrics :is(.stat-zap,.social-metric:has(.lucide-zap)) svg{color:var(--orange);fill:var(--orange);stroke:var(--orange)}
:is(.discover-composition,.discover-library) .card-social-metrics .is-reacted svg{color:#D4483B;fill:#D4483B}
/* A 44px target with a 36px plate that lines up with the card edge. */
:is(.discover-composition,.discover-library) .card-social-trigger{position:relative;z-index:2;display:inline-grid;place-items:center;width:44px;min-width:44px;height:44px;margin-right:-4px;border-radius:50%;color:var(--theme-text-muted)}
:is(.discover-composition,.discover-library) .card-social-trigger::before{content:"";position:absolute;inset:4px;z-index:-1;border-radius:50%;transition:background-color .15s var(--ds-ease)}
:is(.discover-composition,.discover-library) .card-social-trigger>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:is(.discover-composition,.discover-library) .card-social-trigger svg{width:20px;height:20px}
:is(.discover-composition,.discover-library) .card-social-summary:hover .card-social-trigger,:is(.discover-composition,.discover-library) .card-social[open] .card-social-trigger{color:var(--theme-text-heading)}
:is(.discover-composition,.discover-library) .card-social-summary:hover .card-social-trigger::before,:is(.discover-composition,.discover-library) .card-social[open] .card-social-trigger::before{background:var(--theme-bg-subtle)}
:is(.discover-composition,.discover-library) .card-social>.engagement-actions{position:absolute;inset:auto 0 calc(100% + 6px) auto;z-index:5;width:max-content;max-width:min(340px,calc(100vw - 32px));margin:0;border:0;padding:4px;border-radius:var(--ds-radius-sm);background:var(--theme-bg-card);box-shadow:0 0 0 1px var(--theme-border),var(--ds-shadow-2)}
:is(.discover-composition,.discover-library) .card-social-summary{position:relative;z-index:2}
/* The tray is always one row of 44px actions. Shelf cards are size
   containers, so these also outrank the older container rules that fold
   the inline tray into columns or move its trigger. */
:is(.discover-composition,.discover-library) .card-social:not([data-action-count="4"])>.engagement-actions,
:is(.discover-composition,.discover-library) .card-participation .card-social:not([data-action-count="4"]) .article-engagement.is-labelled{grid-template-columns:repeat(5,44px)}
:is(.discover-composition,.discover-library) .card-social[data-action-count="4"]>.engagement-actions,
:is(.discover-composition,.discover-library) .card-participation .card-social[data-action-count="4"] .article-engagement.is-labelled{grid-template-columns:repeat(4,44px)}
:is(.discover-composition,.discover-library) .card-social[open]>.card-social-summary{padding-right:0}
:is(.discover-composition,.discover-library) .card-social[open] .card-social-trigger{position:relative;inset:auto}

/* Glass quick actions over the artwork: save, like, zap. */
.card-quick{position:absolute;top:10px;right:10px;z-index:3;display:flex;gap:6px}
.card-quick button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgb(18 18 17 / .55);color:#fff;cursor:pointer;
  backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);transition:background-color .15s,transform .15s var(--ds-ease)}
.card-quick button:hover{background:rgb(18 18 17 / .72)}
.card-quick button:active{transform:scale(.92)}
.card-quick button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.card-quick button[aria-busy=true]{cursor:progress}
.card-quick svg{width:18px;height:18px}
.card-quick .is-on svg{fill:currentColor}
.card-quick .card-quick-like.is-on{color:#FF8A80}
.card-quick .card-quick-zap svg{color:var(--orange)}
.card-quick button::before{content:"";position:absolute;inset:-4px}
.card-quick button{position:relative}
@media (hover:hover) and (pointer:fine){
  .card-quick{opacity:0;transform:translateY(-4px);transition:opacity .2s var(--ds-ease),transform .25s var(--ds-ease)}
  :is(.article-card,.saved-item):is(:hover,:focus-within) .card-quick{opacity:1;transform:none}
}
@media (hover:none),(pointer:coarse){.card-quick .card-quick-like,.card-quick .card-quick-zap{display:none}}
@media (prefers-reduced-motion:reduce){.card-quick,.card-quick button{transition:none}}
/* Feed rows: the group sits inside the thumbnail at a smaller size. A row
   without a thumbnail keeps save, like and zap in its "…" menu. The card
   says so itself (is-text-story: a typographic sleeve or no cover at all),
   which every browser reads, unlike :has() before Safari 15.4. */
.discover-composition :is(#network .net-grid,.ds-rows) .article-card .card-quick{top:24px;right:6px;gap:4px}
.discover-composition :is(#network .net-grid,.ds-rows) .article-card .card-quick button{width:30px;height:30px}
.discover-composition :is(#network .net-grid,.ds-rows) .article-card .card-quick svg{width:15px;height:15px}
.discover-composition :is(#network .net-grid,.ds-rows) .article-card.is-text-story .card-quick{display:none}
/* Shelf cards have room for one fact beside the byline: the length when
   there is one, otherwise the date. Feed rows and the reader keep both. */
.discover-composition .discover-world .article-card .card-foot{flex-wrap:nowrap}
.discover-composition .discover-world .article-card .card-foot-date:not(:only-child){display:none}
.discover-composition .discover-world .article-card .card-foot-date+span::before{content:none}
/* A wide shelf card (tablet rails, wide catalogues) has room for both. */
@container (min-width:360px){
  .discover-composition .discover-world .article-card .card-foot-date:not(:only-child){display:inline}
  .discover-composition .discover-world .article-card .card-foot-date+span::before{content:"·"}
}
/* A title face wears its date as the sleeve's dateline, where the short
   rule stood, so a pictureless story shows both facts: the date on the
   cover, the length beside the byline. The fixed padding before the scaled
   one is for Safari 15, which has no cqi unit, so the date keeps off the edge. */
.discover-composition .discover-world .article-card.is-title-face:has(.card-foot-date) .story-poster.is-title-sleeve::before{display:none}
.discover-composition .discover-world .article-card.is-title-face .card-foot:has(.card-foot-date){display:contents}
.discover-composition .discover-world .article-card.is-title-face .card-foot:has(.card-foot-date)::before{content:none}
.discover-composition .discover-world .article-card.is-title-face .card-foot-date{display:block;z-index:1;grid-area:1/1/2/-1;align-self:start;justify-self:start;margin:0;padding:18px 20px 0;padding:clamp(14px,6cqi,22px) clamp(16px,6.4cqi,24px) 0;font:600 11px/1.3 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:var(--theme-text-muted);pointer-events:none}
.discover-composition .discover-world .article-card.is-title-face .card-foot:has(.card-foot-date) .card-foot-read{grid-column:2;margin-top:8px;white-space:nowrap}
.discover-composition .discover-world .article-card.is-title-face .card-foot:has(.card-foot-date) .card-foot-read::before{content:"·";margin-right:2px;color:var(--theme-divider)}
/* Feed rows: a long author name shortens; date and length stay on its line. */
.discover-composition :is(#network .net-grid,.ds-rows) .article-card .card-attribution{flex-wrap:nowrap;min-width:0}
.discover-composition :is(#network .net-grid,.ds-rows) .article-card .card-attribution .byline{flex:0 1 auto;min-width:0}
.discover-composition :is(#network .net-grid,.ds-rows) .article-card .byline-text{min-width:0;overflow:hidden}
.discover-composition :is(#network .net-grid,.ds-rows) .article-card .card-foot{flex:none}

/* ── Listening rail ──────────────────────────────────────────────────── */
.home-listen-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 5 * 20px) / 6);gap:20px;margin:0;padding:0 0 6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;list-style:none}
.home-listen-rail::-webkit-scrollbar{display:none}
.home-listen-rail>li{scroll-snap-align:start;min-width:0}
.listen-card{position:relative;display:flex;flex-direction:column;gap:4px;min-width:0}
.listen-card-art{display:block;margin-bottom:6px;border-radius:var(--ds-radius-md);overflow:hidden}
.listen-card-frame{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:var(--ds-radius-md);background:var(--theme-fill);box-shadow:inset 0 0 0 1px rgb(0 0 0 / .04)}
.listen-card-frame>img{position:absolute;inset:0;width:100%;height:100%;transition:transform .5s var(--ds-ease)}
.listen-card-initial{position:absolute;inset:0;display:grid;place-items:center;font:500 44px/1 var(--font-display)}
.listen-card-play{position:absolute;top:0;right:0;aspect-ratio:1;width:100%;pointer-events:none}
.listen-card-play>[data-listener-island]{position:absolute;right:10px;bottom:10px;pointer-events:auto}
.listen-card-play .audio-recording-play,.listen-card-play .card-listen-fallback{display:grid;place-items:center;width:44px;height:44px;min-width:44px;padding:0;border:0;border-radius:50%;background:#F6F5F2;color:#0B0B0A;box-shadow:0 6px 18px rgb(0 0 0 / .32);transition:transform .2s var(--ds-ease)}
.listen-card-play .card-listen-fallback>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.listen-card-play .audio-recording-play:hover{transform:scale(1.06)}
.listen-card-play .audio-recording-play svg{fill:currentColor;stroke:none;margin-left:2px}
.listen-card-play [role=status]{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--theme-bg-card);font-size:12px}
.listen-card-title{margin:0;font:600 14.5px/1.3 var(--font-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.listen-card-title a{color:var(--theme-text-heading);text-decoration:none}
.listen-card-title a::after{content:"";position:absolute;inset:0;border-radius:var(--ds-radius-md)}
/* Every audio tile reads the same: title, creator, then kind and length. */
.listen-card-by{margin:0;font:500 13px/1.3 var(--font-text);color:var(--theme-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.listen-card-meta{margin:0;font:13px/1.3 var(--font-text);color:var(--theme-text-muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media (hover:hover) and (pointer:fine){.listen-card:hover .listen-card-frame>img{transform:scale(1.03)}}
@media (max-width:1000px){.home-listen-rail{grid-auto-columns:minmax(150px,24%);gap:16px}}
@media (max-width:767px){.home-listen-rail{grid-auto-columns:42%;gap:12px;margin-inline:calc(var(--ds-gutter) * -1);padding-inline:var(--ds-gutter);scroll-padding-inline:var(--ds-gutter)}}

/* ── People and collections ──────────────────────────────────────────── */
.discover-composition .discover-routes{display:grid;grid-template-columns:minmax(0,1fr);gap:36px}
.discover-composition .discover-people{margin-bottom:0}
.discover-composition .discover-people{position:relative}
.discover-composition .discover-people>h2{margin-bottom:16px}
.discover-composition .rail-people .rail-viewport{overflow:visible}
.discover-composition .rail-people .rail-viewport::before,.discover-composition .rail-people .rail-viewport::after{display:none}
.discover-composition .rail-people .rail-track{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:124px;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 0 4px}
.discover-composition .rail-people .rail-track::-webkit-scrollbar{display:none}
.discover-composition .rail-people .rail-track>*{scroll-snap-align:start}
.discover-composition .rail-people .rail-arrow{display:none;top:-51px;bottom:auto;left:auto;right:0;width:44px;height:44px;min-width:44px;min-height:44px;border:1px solid var(--theme-border);border-radius:50%;background:var(--theme-bg-card);box-shadow:none;opacity:1;transform:none}
.discover-composition .rail-people .rail-arrow-prev{right:52px}
.discover-composition .rail-people.is-scrollable .rail-arrow{display:grid}
.discover-composition .rail-people .rail-arrow:hover{transform:none}
.discover-composition .rail-people .rail-arrow:disabled{opacity:.35;pointer-events:auto}
.discover-composition .voice-chip{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;padding:0;border:0;background:transparent;box-shadow:none;text-align:center;text-decoration:none;color:var(--theme-text-heading)}
.discover-composition .voice-chip-avatar{flex:none;width:96px;height:96px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--theme-border);transition:transform .25s var(--ds-ease)}
.discover-composition .voice-chip:hover .voice-chip-avatar{transform:scale(1.04)}
.discover-composition .voice-chip-name{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 14px/1.25 var(--font-text)}
.discover-composition .voice-chip-avatar.avatar-fallback{box-shadow:none;font:500 34px/1 var(--font-display)}
.discover-composition .voice-chip-role{margin-top:-6px;font:13px/1.3 var(--font-text);color:var(--theme-text-muted)}
/* The count is a quiet line under the name, centred like it (an older rule
   pushed a pill to the right edge). */
.discover-composition .voice-chip-count{margin:-6px 0 0;padding:0;border-radius:0;background:none;font:13px/1.3 var(--font-text);color:var(--theme-text-muted)}
/* Collections share the story card's anatomy: cover, title, curator, then size. */
.discover-composition .discover-curations{display:block}
.discover-composition .discover-curations>header{margin-bottom:14px}
.discover-composition .discover-curation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.discover-composition .collection-card{position:relative;min-width:0;border:0;border-radius:var(--ds-radius-md);background:transparent;box-shadow:none;overflow:visible}
.discover-composition .collection-card:hover{border-color:transparent;box-shadow:none}
.discover-composition .collection-card .collection-art{aspect-ratio:16/9;overflow:hidden;border-radius:var(--ds-radius-md)}
.discover-composition .collection-card .collection-art img{transition:transform .5s var(--ds-ease)}
@media (hover:hover) and (pointer:fine){.discover-composition .collection-card:hover .collection-art img{transform:scale(1.03)}}
/* Where the picture comes from is a footnote, not a headline: a small tag
   on roomy tiles only, so it never covers most of a phone tile. */
.discover-composition .collection-preview-label{top:auto;left:10px;bottom:10px;height:22px;padding:0 8px;border-radius:999px;background:rgb(18 18 17 / .62);font:600 11px/22px var(--font-text);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@container (max-width:299px){.discover-composition .collection-preview-label{display:none}}
.discover-composition .collection-card .card-body{gap:6px;padding:12px 2px 0}
.discover-composition .collection-title-row{margin:0}
.discover-composition .collection-arrow{display:none}
.discover-composition .collection-card .card-title{margin:0;font:650 16.5px/1.3 var(--font-text);letter-spacing:-.006em;color:var(--theme-text-heading);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.discover-composition .collection-card .card-link{text-decoration:none}
.discover-composition .collection-card .card-link::after{border-radius:var(--ds-radius-md)}
.discover-composition .collection-card .card-link:focus-visible::after{outline:none}
.discover-composition .collection-card:has(.card-link:focus-visible){outline:2px solid var(--theme-text-heading);outline-offset:4px}
.discover-composition .collection-card .card-desc{margin:0;font:14px/1.45 var(--font-text);color:var(--theme-text);-webkit-line-clamp:2}
.discover-composition .collection-meta{flex-wrap:nowrap;justify-content:flex-start;gap:8px;margin:0;padding:0;font:13px/1.3 var(--font-text)}
.discover-composition .collection-meta .collection-author{flex:0 1 auto}
.discover-composition .collection-author{gap:8px;min-width:0;min-height:0;margin:0;border-radius:0;font:500 13px/1.3 var(--font-text);color:var(--theme-text)}
.discover-composition .collection-author:hover{background:transparent;text-decoration:underline}
.discover-composition .collection-author>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;overflow-wrap:normal}
.discover-composition .collection-avatar{width:20px;height:20px}
.discover-composition .collection-meta .card-articles{flex:none;color:var(--theme-text-muted)}
.discover-composition .collection-author+.card-articles::before{content:"·";margin-right:8px;color:var(--theme-divider)}
.discover-composition a.collection-author{min-height:44px;margin-block:-13.5px}
/* A narrow tile gives the name its own line instead of cutting it short. */
.discover-composition .collection-card .card-body{container-type:inline-size}
@container (max-width:239px){
 .discover-composition .collection-meta{flex-direction:column;align-items:flex-start;gap:2px}
 .discover-composition .collection-meta .collection-author{max-width:100%}
 .discover-composition .collection-author+.card-articles::before{content:none}
}
@media (max-width:767px){
  .discover-composition .rail-people .rail-track{grid-auto-columns:100px;gap:14px;margin-inline:calc(var(--ds-gutter) * -1);padding-inline:var(--ds-gutter);scroll-padding-inline:var(--ds-gutter)}
  .discover-composition .voice-chip-avatar{width:84px;height:84px}
  .discover-composition .discover-curation-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--ds-gutter) * -1);padding-inline:var(--ds-gutter);scroll-padding-inline:var(--ds-gutter)}
  .discover-composition .discover-curation-grid::-webkit-scrollbar{display:none}
  .discover-composition .discover-curation-grid>*{scroll-snap-align:start}
}

/* ── Network: calm rows ──────────────────────────────────────────────── */
.discover-composition #network .net-filter{gap:10px;margin:0 0 8px;padding:0;border:0;background:transparent;box-shadow:none}
.discover-composition #network .topic-chip{min-height:44px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--theme-text-strong);font:600 13px/1 var(--font-text);box-shadow:none}
.discover-composition #network .topic-chip:hover{background:transparent}
.discover-composition #network .topic-chip.active,.discover-composition #network .topic-chip[aria-pressed=true]{background:transparent;color:var(--theme-invert-text)}
.discover-composition #network .topic-chip-count{display:none}
.discover-composition :is(#network .net-grid,.ds-rows){display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:8px}
@media (min-width:1001px){.discover-composition #network .net-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}}
/* Row anatomy: title and dek beside the thumbnail, byline and actions on
   one shared line beneath, whatever the actions' width. A thumbnail taller
   than title and dek grows the empty third row, so the dek stays under its
   title instead of drifting apart. */
.discover-composition :is(#network .net-grid,.ds-rows) .article-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"title cover" "desc cover" ". cover" "attr part";align-items:start;column-gap:16px;padding:18px 0 14px;border-top:1px solid var(--theme-border);border-radius:0}
.discover-composition :is(#network .net-grid,.ds-rows) .article-card>.card-body,.discover-composition :is(#network .net-grid,.ds-rows) .article-card.is-title-face>.card-body{display:contents}
.discover-composition :is(#network .net-grid,.ds-rows) .article-card .card-title{grid-area:title}
.discover-composition :is(#network .net-grid,.ds-rows) .article-card .card-desc{grid-area:desc}
.discover-composition :is(#network .net-grid,.ds-rows) .article-card>.card-cover{grid-area:cover;width:128px;height:72px;aspect-ratio:auto!important;margin:0;align-self:start;border-radius:var(--ds-radius-sm)}
.discover-composition :is(#network .net-grid,.ds-rows) .article-card>.card-cover.story-poster{display:none}
.discover-composition :is(#network .net-grid,.ds-rows) .article-card .card-attribution{flex-direction:row}
.discover-composition :is(#network .net-grid,.ds-rows) .article-card .card-attribution .byline{width:auto}
.discover-composition :is(#network .net-grid,.ds-rows) .article-card>.card-participation{grid-area:part;justify-self:end;align-self:center;margin-top:10px}
.discover-composition :is(#network .net-grid,.ds-rows) .article-card .card-attribution{grid-area:attr;align-self:center;margin-top:10px;padding-right:0}
.discover-composition :is(#network .net-grid,.ds-rows) .article-card.is-title-face{display:grid}
.discover-composition :is(#network .net-grid,.ds-rows) .article-card.is-title-face .card-title{padding:0;font:650 16.5px/1.3 var(--font-text);letter-spacing:-.006em;-webkit-line-clamp:2}
.discover-composition :is(#network .net-grid,.ds-rows) .article-card .card-link::after{border-radius:0}
/* The first row sits under the filter's own hairline; a second rule 20px
   lower read as a double line. */
.discover-composition :is(#network .net-grid,.ds-rows)>.article-card:first-child{border-top:0;padding-top:4px}
@media (min-width:1001px){.discover-composition #network .net-grid>.article-card:nth-child(2){border-top:0;padding-top:4px}}
/* The reader's "Weiter entdecken" reuses the landing rows in one column; a
   short line says why once for each run of suggestions with the same reason. */
.discover-composition.reader-next .reader-next-reason{margin:16px 0 0;color:var(--theme-text-muted);font:600 13px/1.4 var(--font-text)}
.discover-composition.reader-next .reader-next-group:first-of-type .reader-next-reason{margin-top:0}
.discover-composition :is(#network .net-grid,.ds-rows) .reader-next-item:first-child .article-card{border-top:0;padding-top:4px}
.discover-composition :is(#network .net-grid,.ds-rows) .article-card .card-attribution{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.discover-composition #network .net-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:20px}
/* One "Mehr laden" across Discover: the quiet pill of the landing feed. */
.discover-composition .net-more-btn{min-height:44px;padding:0 22px;border:0;border-radius:999px;background:var(--theme-bg-subtle);color:var(--theme-text-heading);font:600 14px/1 var(--font-text);box-shadow:none;text-decoration:none}
.discover-composition .net-more-btn:hover{border-color:transparent;background:var(--theme-fill);color:var(--theme-text-heading);text-decoration:none}
.discover-composition #network .net-more .section-action{color:var(--theme-text-muted)}
@media (max-width:767px){.discover-composition :is(#network .net-grid,.ds-rows) .article-card>.card-cover{width:88px;height:88px}}

/* Listener islands that still speak Tailwind: grey text resolves to the
   muted role in both appearances (Tailwind's gray-500 is 4.4:1 on the page). */
:is(#listener-root,[data-listener-island],.discover-library) :is(.text-gray-500,.text-gray-400){color:var(--theme-text-muted)}
/* ── Dark: listener islands that still speak Tailwind ────────────────── */
:root[data-theme=dark] :is(#listener-root,[data-listener-island],.discover-library) :is(.bg-white){background-color:var(--theme-bg-card)}
:root[data-theme=dark] :is(#listener-root,[data-listener-island],.discover-library) :is(.bg-gray-50,.bg-gray-100){background-color:var(--theme-bg-subtle)}
:root[data-theme=dark] :is(#listener-root,[data-listener-island],.discover-library) .bg-gray-200{background-color:var(--theme-fill-strong)}
:root[data-theme=dark] :is(#listener-root,[data-listener-island],.discover-library) :is(.text-gray-900,.text-gray-800){color:var(--theme-text-heading)}
:root[data-theme=dark] :is(#listener-root,[data-listener-island],.discover-library) :is(.text-gray-700,.text-gray-600){color:var(--theme-text)}
:root[data-theme=dark] :is(#listener-root,[data-listener-island],.discover-library) :is(.text-gray-500,.text-gray-400){color:var(--theme-text-muted)}
:root[data-theme=dark] :is(#listener-root,[data-listener-island],.discover-library) :is(.border-gray-100,.border-gray-200,.border-gray-300){border-color:var(--theme-border)}
:root[data-theme=dark] :is(#listener-root,[data-listener-island],.discover-library) :is(.divide-gray-100,.divide-gray-200)>*+*{border-color:var(--theme-border)}

/* ── Toasts: one calm place above the tab bar and player ─────────────── */
html[data-discover-document] .toast-region{top:auto!important;right:auto!important;left:50%;bottom:calc(var(--discover-navigation-height,0px) + var(--standup-player-height,0px) + 16px);transform:translateX(-50%);align-items:center;width:max-content;max-width:calc(100vw - 32px)}

/* ── Hören and Bibliothek speak the same system ──────────────────────── */
/* Both pages share one anatomy: the stage's editorial title, one promise
   line, then a bar with the page's places on the left (pills, ink when
   chosen) and its own tool on the right. Sections below use the home's
   section heads, cover tiles and rows. */
html[data-discover-document] .dl-page{max-width:var(--ds-measure);padding:8px var(--ds-gutter) 80px;color:var(--theme-text-heading)}
html[data-discover-document] .ds-page-head{max-width:840px;margin:0;padding:32px 0 28px}
html[data-discover-document] .ds-page-head h1{max-width:none;margin:0 0 14px;font:450 clamp(44px,4.6vw,64px)/1 var(--font-display);letter-spacing:-.025em;font-optical-sizing:auto;color:var(--theme-text-heading)}
html[data-discover-document] .ds-page-promise{max-width:56ch;margin:0;font:400 17px/1.55 var(--font-text);color:var(--theme-text-muted)}
html[data-discover-document] .ds-page-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 32px;margin:0 0 40px;padding:0 0 20px;border-bottom:1px solid var(--theme-border)}
html[data-discover-document] .ds-segments{display:flex;flex-wrap:nowrap;gap:6px;min-width:0;margin:0;padding:0;border:0;overflow-x:auto;scrollbar-width:none}
html[data-discover-document] .ds-segments::-webkit-scrollbar{display:none}
html[data-discover-document] .ds-segments>a{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:0;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--theme-bg-subtle);color:var(--theme-text-strong);font:600 15px/1 var(--font-text);white-space:nowrap;text-decoration:none;transition:background-color .15s var(--ds-ease)}
html[data-discover-document] .ds-segments>a:hover:not([aria-current]){background:var(--theme-fill);color:var(--theme-text-heading)}
html[data-discover-document] .ds-segments>a[aria-current]{background:var(--theme-invert-bg);color:var(--theme-invert-text)}
html[data-discover-document] .ds-segments>a>svg{display:none}

/* Search is one pill, like the header's: field, scope, arrow. */
html[data-discover-document] .listen-search{flex:0 1 460px;min-width:0;margin:0}
html[data-discover-document] .listen-search .audio-filters{display:flex;align-items:center;flex-wrap:nowrap;gap:0;margin:0;padding:0 0 0 16px;border-radius:999px;background:var(--theme-bg-card);box-shadow:inset 0 0 0 1px var(--theme-border)}
html[data-discover-document] .listen-search .audio-filters:focus-within{box-shadow:inset 0 0 0 1px var(--theme-text-heading)}
html[data-discover-document] .listen-search .audio-filters label{display:flex;flex-direction:row;align-items:center;gap:10px;min-width:0;margin:0;font:inherit;color:var(--theme-text-muted)}
html[data-discover-document] .listen-search .audio-query{flex:1 1 auto}
html[data-discover-document] .listen-search .audio-query>svg{flex:none;width:18px;height:18px}
html[data-discover-document] .listen-search .audio-filters input{flex:1 1 auto;width:auto;min-width:0;min-height:44px;height:44px;padding:0;border:0;border-radius:0;background:transparent;color:var(--theme-text-heading);font:16px/1.3 var(--font-text);outline:none}
html[data-discover-document] .listen-search .audio-filters input::placeholder{color:var(--theme-text-muted);opacity:1}
html[data-discover-document] .listen-search .audio-kind{position:relative;flex:none;padding-left:8px;border-left:1px solid var(--theme-border)}
html[data-discover-document] .listen-search .audio-filters select{width:auto;min-height:44px;height:44px;padding:0 26px 0 8px;border:0;border-radius:0;background:transparent;color:var(--theme-text-strong);font:600 14px/1 var(--font-text);-webkit-appearance:none;appearance:none;cursor:pointer}
/* Select chevrons are drawn in the text colour, so they follow the theme. */
html[data-discover-document] :is(.listen-search .audio-kind,.discover-library .library-sort)::after{content:"";position:absolute;top:50%;right:8px;width:14px;height:14px;margin-top:-7px;background:currentColor;-webkit-mask:var(--ds-chevron) center/14px no-repeat;mask:var(--ds-chevron) center/14px no-repeat;pointer-events:none}
html[data-discover-document]{--ds-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
html[data-discover-document] .listen-search .audio-filters button{display:grid;place-items:center;flex:none;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--theme-text-muted);cursor:pointer}
html[data-discover-document] .listen-search .audio-filters button:hover{color:var(--theme-text-heading)}
html[data-discover-document] .listen-search .audio-filters button svg{width:18px;height:18px}
html[data-discover-document] .listen-search .audio-filters :focus-visible{outline:2px solid var(--theme-text-heading);outline-offset:-2px}

/* Section heads are the home's. */
html[data-discover-document] .dl-shelf{margin:0 0 48px}
html[data-discover-document] .dl-shelf>.ds-section-head{align-items:center;margin:0 0 16px}
html[data-discover-document] .dl-shelf>.ds-section-head h2{font:650 22px/1.2 var(--font-text);letter-spacing:-.015em}
html[data-discover-document] .listen-more-heading{margin:8px 0 4px}
html[data-discover-document] .listen-more-heading h3{margin:0;font:650 17px/1.3 var(--font-text);color:var(--theme-text-heading)}

/* Cover tiles: one frame and one placeholder (the title's initial in the
   editorial face) for works and recordings, as on the home rail. */
html[data-discover-document] .dl-page .dl-art{border-radius:var(--ds-radius-md);background:var(--theme-fill);box-shadow:inset 0 0 0 1px rgb(0 0 0 / .04)}
html[data-discover-document] .dl-page .dl-art-fallback,html[data-discover-document] .listen-catalogue .dl-art-fallback{display:grid;place-items:center;width:100%;height:100%;background:transparent;color:var(--theme-text-muted);font:500 clamp(28px,4vw,44px)/1 var(--font-display)}
html[data-discover-document] .dl-page .dl-art.has-image .dl-art-fallback{position:absolute;inset:0}
html[data-discover-document] .dl-rail{grid-auto-columns:calc((100% - 5 * 20px) / 6);gap:20px;padding:0 0 6px;scrollbar-width:none}
html[data-discover-document] .dl-rail::-webkit-scrollbar{display:none}
html[data-discover-document] .dl-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:28px 20px}
html[data-discover-document] .dl-card{display:flex;flex-direction:column;gap:4px}
html[data-discover-document] .dl-card .dl-art{margin-bottom:6px}
html[data-discover-document] .dl-card h3{margin:0;font:600 14.5px/1.3 var(--font-text);color:var(--theme-text-heading);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html[data-discover-document] .dl-card p{margin:0;font:13px/1.35 var(--font-text);color:var(--theme-text-muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
html[data-discover-document] .dl-card h3+p{font-weight:500;color:var(--theme-text)}
html[data-discover-document] .dl-card:hover h3{text-decoration:none}
html[data-discover-document] .dl-card .dl-art{overflow:hidden}
html[data-discover-document] .dl-card .dl-art>img{transition:transform .5s var(--ds-ease)}
@media (hover:hover) and (pointer:fine){html[data-discover-document] .dl-card:hover .dl-art{filter:none}html[data-discover-document] .dl-card:hover .dl-art>img{transform:scale(1.03)}}

/* Recordings as covers: Play sits on the artwork, as on the home rail;
   queue and played live on the recording's page and in rows. */
html[data-discover-document] .listen-catalogue .listen-cover-inventory{grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 20px;margin:0 0 36px}
html[data-discover-document] .listen-catalogue .listen-cover-inventory .audio-recording-row{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;row-gap:4px;padding:0}
html[data-discover-document] .listen-catalogue .listen-cover-inventory .audio-recording-row:hover{background:transparent}
html[data-discover-document] .listen-catalogue .listen-cover-inventory .audio-recording-lead{grid-column:1;grid-row:1;margin:0 0 6px}
html[data-discover-document] .listen-catalogue .listen-cover-inventory .audio-recording-cover{border-radius:var(--ds-radius-md)}
html[data-discover-document] .listen-catalogue .listen-cover-inventory .audio-recording-copy{grid-column:1;grid-row:2;padding:0}
html[data-discover-document] .listen-catalogue .listen-cover-inventory .audio-recording-copy a{min-height:0}
html[data-discover-document] .listen-catalogue .listen-cover-inventory .audio-recording-copy a::after{content:"";position:absolute;inset:0;border-radius:var(--ds-radius-md)}
html[data-discover-document] .listen-catalogue .listen-cover-inventory .audio-recording-copy h2{font:600 14.5px/1.3 var(--font-text);color:var(--theme-text-heading);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html[data-discover-document] .listen-catalogue .listen-cover-inventory .audio-recording-copy p{margin:4px 0 0;font:500 13px/1.3 var(--font-text);color:var(--theme-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-discover-document] .listen-catalogue .listen-cover-inventory .audio-recording-time{grid-column:1;grid-row:3;justify-content:flex-start;min-height:0;margin:0;padding:0;font:13px/1.3 var(--font-text);color:var(--theme-text-muted)}
html[data-discover-document] .listen-catalogue .listen-cover-inventory .audio-recording-time:empty{display:none}
html[data-discover-document] .listen-catalogue .listen-cover-inventory .audio-recording-time::before{content:attr(data-kind) "\00a0\00b7"}
html[data-discover-document] .listen-catalogue .listen-cover-inventory .audio-row-play{position:relative;z-index:1;grid-column:1;grid-row:1;align-self:end;justify-self:end;margin:0 10px 16px 0}
html[data-discover-document] .listen-catalogue .listen-cover-inventory .audio-row-play :is(button,.audio-collection-play){display:grid;place-items:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:#F6F5F2;color:#0B0B0A;box-shadow:0 6px 18px rgb(0 0 0 / .3);transition:transform .2s var(--ds-ease)}
html[data-discover-document] .listen-catalogue .listen-cover-inventory .audio-row-play :is(button,.audio-collection-play):hover{transform:scale(1.06)}
/* The same solid triangle as the Home tiles. */
html[data-discover-document] .listen-catalogue .listen-cover-inventory .audio-row-play svg{fill:currentColor;stroke:none;margin-left:2px}
html[data-discover-document] .listen-catalogue .listen-cover-inventory .audio-row-play:has([role=status]){grid-row:auto;justify-self:start;margin:4px 0 0}
html[data-discover-document] .listen-catalogue .listen-cover-inventory :is(.audio-row-playlist,.audio-row-played){display:none}

/* Rows: thumbnail, title and creator, time and Play on one line. */
html[data-discover-document] :is(.listen-catalogue .listen-recordings,ol.dl-recordings){column-gap:48px}
html[data-discover-document] :is(.listen-catalogue .listen-recordings,ol.dl-recordings) .audio-recording-row{--lead:68px;--cover:56px;padding:12px 0;border-radius:0}
html[data-discover-document] :is(.listen-catalogue .listen-recordings,ol.dl-recordings) .audio-recording-row:hover{background:transparent}
/* The cover leaves the home's 16px to the title inside the lead column. */
html[data-discover-document] :is(.listen-catalogue .listen-recordings,ol.dl-recordings) .audio-recording-cover{width:var(--cover);border-radius:var(--ds-radius-sm)}
html[data-discover-document] :is(.listen-catalogue .listen-recordings,ol.dl-recordings) .audio-recording-row::after{left:72px;background:var(--theme-border)}
html[data-discover-document] :is(.listen-catalogue .listen-recordings,ol.dl-recordings) .audio-recording-copy h2{font:600 15px/1.35 var(--font-text);color:var(--theme-text-heading);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Episode rows on Listen and on a work's page: the whole row opens the
   recording, as the home's rows do; its controls sit above. */
html[data-discover-document] :is(.listen-catalogue .listen-recordings,ol.dl-recordings) .audio-recording-copy a{min-height:0}
html[data-discover-document] :is(.listen-catalogue .listen-recordings,ol.dl-recordings) .audio-recording-copy a::after{content:"";position:absolute;inset:0}
html[data-discover-document] :is(.listen-catalogue .listen-recordings,.listen-catalogue .listen-cover-inventory,ol.dl-recordings) :is(.audio-row-play,.audio-row-playlist,.audio-row-played){position:relative;z-index:1}
html[data-discover-document] :is(.listen-catalogue .listen-recordings,ol.dl-recordings) .audio-recording-copy p{margin-top:2px;font:13px/1.35 var(--font-text);color:var(--theme-text-muted)}

/* One quiet pill for "all", like "Mehr laden" on the home. */
html[data-discover-document] :is(.listen-all-recordings,.audio-result-state)>a.audio-reset{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border:0;border-radius:999px;background:var(--theme-bg-subtle);color:var(--theme-text-heading);font:600 14px/1 var(--font-text);text-decoration:none}
html[data-discover-document] :is(.listen-all-recordings,.audio-result-state)>a.audio-reset:hover{background:var(--theme-fill)}
html[data-discover-document] .listen-all-recordings{display:flex;justify-content:center;margin:8px 0 0}

/* The spotlight is a small stage: same surface, type and controls. */
html[data-discover-document] .dl-spotlight{margin:0 0 56px;padding:40px;border-radius:var(--ds-radius-xl);background:var(--ds-stage);color:var(--ds-stage-text);box-shadow:none}
html[data-discover-document] .dl-spotlight h2{font:450 clamp(30px,3.2vw,46px)/1.05 var(--font-display);letter-spacing:-.02em}
html[data-discover-document] .dl-spotlight .dl-eyebrow{color:var(--ds-stage-muted);letter-spacing:.08em}
html[data-discover-document] .dl-spotlight-creator{color:var(--ds-stage-muted)}
html[data-discover-document] .dl-spotlight .dl-description{color:var(--ds-stage-muted)}
html[data-discover-document] .dl-spotlight-art .dl-art{border-radius:var(--ds-radius-md);background:var(--ds-stage-raised);box-shadow:0 24px 48px -16px rgb(0 0 0 / .6)}
html[data-discover-document] .dl-spotlight-link{color:var(--ds-stage-text)}

/* "Add a podcast" is a form, not a second page: one hairline, one pill. */
html[data-discover-document] .listen-catalogue>[data-listener-island=external-podcast]{border-top:0;padding-top:0;margin-top:56px}
html[data-discover-document] .external-podcast .feed-add{margin:0;padding:28px 0 0;border-top:1px solid var(--theme-border)}
html[data-discover-document] .external-podcast :is(.feed-add,.feed-subscriptions,.feed-directory) h2{font:650 22px/1.2 var(--font-text);letter-spacing:-.015em;color:var(--theme-text-heading)}
html[data-discover-document] .external-podcast .feed-add form{align-items:center;max-width:720px}
html[data-discover-document] .external-podcast .feed-add label{position:relative;font-size:0}
html[data-discover-document] .external-podcast .feed-add input{min-height:44px;height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--theme-bg-card);box-shadow:inset 0 0 0 1px var(--theme-border);color:var(--theme-text-heading);font:16px/1.3 var(--font-text)}
html[data-discover-document] .external-podcast .feed-add input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--theme-text-heading)}
html[data-discover-document] .external-podcast :is(.feed-add form>button,.feed-import-tools>button,.feed-file-button){display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--theme-bg-subtle);color:var(--theme-text-heading);font:600 14px/1 var(--font-text);box-shadow:none}
html[data-discover-document] .external-podcast .feed-add form>button{background:var(--theme-invert-bg);color:var(--theme-invert-text)}
html[data-discover-document] .external-podcast :is(.feed-import-tools>button,.feed-file-button):hover{background:var(--theme-fill)}

/* The shared listener components resolve to the same roles, so they follow
   the theme. Their buttons and chips are the system's pills. */
html[data-discover-document]{--audio-ink:var(--theme-text-heading);--audio-muted:var(--theme-text-muted);--audio-line:var(--theme-border);--audio-surface:var(--theme-bg-subtle);--audio-accent:var(--theme-text-heading)}
html[data-discover-document] .audio-button{border-radius:999px;background:var(--theme-invert-bg);color:var(--theme-invert-text);font:600 14px/1 var(--font-text)}
html[data-discover-document] .audio-button-secondary{background:var(--theme-bg-subtle);color:var(--theme-text-heading)}
html[data-discover-document] .audio-button-secondary:hover{background:var(--theme-fill)}
html[data-discover-document] :is(.audio-chip[aria-pressed=true],.audio-chip[aria-current=page]){background:var(--theme-invert-bg);color:var(--theme-invert-text)}
html[data-discover-document] .audio-search{min-height:44px;border:0;border-radius:999px;background:var(--theme-bg-card);box-shadow:inset 0 0 0 1px var(--theme-border);padding:0 16px}
html[data-discover-document] .audio-search:focus-within{outline:none;box-shadow:inset 0 0 0 1px var(--theme-text-heading)}
html[data-discover-document] .audio-search input{min-height:44px;font-size:16px}
html[data-discover-document] .audio-empty{border-radius:var(--ds-radius-lg);background:var(--theme-bg-card);box-shadow:inset 0 0 0 1px var(--theme-border)}
html[data-discover-document] .audio-empty>svg{color:var(--theme-text-muted)}

/* A work's page: the editorial title, the creator as a plain link. */
html[data-discover-document] .dl-work h1{font:450 clamp(36px,4vw,56px)/1.04 var(--font-display);letter-spacing:-.02em;color:var(--theme-text-heading)}
html[data-discover-document] .dl-work .dl-creator{color:var(--theme-text-strong);font-weight:600;text-decoration:underline;text-decoration-color:var(--theme-border-strong);text-underline-offset:4px}
html[data-discover-document] .dl-work .dl-creator:hover{text-decoration-color:currentColor}
html[data-discover-document] .dl-work>.dl-art{border-radius:var(--ds-radius-md)}
html[data-discover-document] .dl-website{gap:4px;color:var(--theme-text-muted);font-size:14px;font-weight:600;text-decoration:none}
html[data-discover-document] .dl-website:hover{color:var(--theme-text-heading)}
html[data-discover-document] .audio-return{gap:6px;padding:0;border:0;background:none;color:var(--theme-text-muted);font:600 14px/1 var(--font-text)}
html[data-discover-document] .audio-return:hover{color:var(--theme-text-heading)}
html[data-discover-document] .dl-page>h2,html[data-discover-document] .dl-page>.dl-credits+h2{margin:40px 0 8px;font:650 22px/1.2 var(--font-text);letter-spacing:-.015em}

/* Play: the primary action is ink, as everywhere on Discover; a row's
   play is the quiet round button. */
html[data-discover-document] .audio-collection-play:not(.audio-recording-play){background:var(--theme-invert-bg);color:var(--theme-invert-text);box-shadow:none}
html[data-discover-document] .audio-collection-play:not(.audio-recording-play):hover{background:var(--theme-invert-bg-hover);box-shadow:none}
html[data-discover-document] .audio-recording-play{background:var(--theme-bg-subtle);color:var(--theme-text-heading)}
html[data-discover-document] .audio-recording-play:hover{background:var(--theme-fill);box-shadow:none}
html[data-discover-document] .audio-collection-play:focus-visible{outline:2px solid var(--theme-text-heading);outline-offset:3px}

/* "From your shows" with nothing to resume is one quiet line, not a box
   that repeats its own heading. */
html[data-discover-document] .discover-continue.is-context-only{padding:2px 16px}
html[data-discover-document] .discover-continue.is-context-only .discover-continue-header{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
html[data-discover-document] .discover-continue.is-context-only .discover-continue-contexts{margin:0}
html[data-discover-document] .discover-continue-context{font-size:14px;color:var(--theme-text-muted)}
html[data-discover-document] .discover-continue-context a{gap:10px;color:var(--theme-text-heading);font-weight:600;text-decoration:none}
html[data-discover-document] .discover-continue-context a:hover{text-decoration:underline;text-underline-offset:3px}
html[data-discover-document] .discover-continue.is-context-only .discover-continue-context a::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--theme-text-heading)}

/* Coverless art is one thing on Discover: the quiet fill and the title's
   initials in the editorial face, as the server tiles draw it. The app's
   tinted monogram stays in the creator workspace. */
html[data-discover-document] .audio-artwork{background:var(--theme-fill);color:var(--theme-text-muted)}
/* Coverless art, one language on every tile: a calm tint from the item's own
   identity (seedTint, mirrored in Python), its monogram in a deeper shade. */
html[data-discover-document] :is(.audio-artwork.is-generated,.dl-art.dl-art-placeholder,.dl-art.is-failed,.listen-card-initial,.voice-chip-avatar.avatar-fallback),
html[data-discover-document] .discover-composition .collection-card .collection-art:is(:not(.has-image),.is-failed){
  --tint:calc(var(--art-hue,var(--fig-hue,6)) * 7);background:hsl(var(--tint) 24% 89%);color:hsl(var(--tint) 26% 30%)}
:root[data-theme=dark] :is(.audio-artwork.is-generated,.dl-art.dl-art-placeholder,.dl-art.is-failed,.listen-card-initial,.voice-chip-avatar.avatar-fallback),
:root[data-theme=dark] .discover-composition .collection-card .collection-art:is(:not(.has-image),.is-failed){background:hsl(var(--tint) 14% 19%);color:hsl(var(--tint) 24% 74%)}
html[data-discover-document] :is(.dl-art.dl-art-placeholder,.dl-art.is-failed) .dl-art-fallback{color:inherit}
/* A coverless publication carries its name like a nameplate: the title in
   the display face between two short rules, sized to the tile. Safari 15 has
   no cqi unit: the fixed sizes before the scaled ones keep the nameplate and
   the monogram whole there (a cqi inside the font shorthand, with its var(),
   would have dropped the whole font). */
html[data-discover-document] .discover-composition .collection-card .collection-art{container-type:inline-size}
html[data-discover-document] .discover-composition .collection-nameplate{display:flex;flex-direction:column;align-items:center;gap:10px;gap:clamp(8px,4cqi,14px);width:auto;max-width:82%;height:auto;border:0;border-radius:0;background:none;color:inherit;text-align:center}
html[data-discover-document] .discover-composition .collection-nameplate::before,html[data-discover-document] .discover-composition .collection-nameplate::after{content:"";flex:none;width:22px;width:clamp(18px,8cqi,28px);height:1px;background:currentColor;opacity:.5}
html[data-discover-document] .discover-composition .collection-nameplate>span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font:500 20px/1.1 var(--font-display);font-size:clamp(17px,8.4cqi,30px);letter-spacing:-.01em;text-wrap:balance;overflow-wrap:anywhere}
html[data-discover-document] .audio-artwork-monogram>span{width:auto;aspect-ratio:auto;border:0;background:none;box-shadow:none;font:500 28px/1 var(--font-display);font-size:22cqi;letter-spacing:-.01em}
html[data-discover-document] .audio-artwork-monogram>span::before,html[data-discover-document] .audio-artwork-monogram>span::after,html[data-discover-document] .audio-artwork-mark{display:none}
html[data-discover-document] .audio-artwork-fallback::before{display:none}
@container (max-width:88px){html[data-discover-document] .audio-artwork-monogram>span{font-size:36cqi}}
:root[data-theme=dark] .audio-artwork img.audio-artwork-loaded{filter:brightness(.88)}

@media (max-width:1100px){html[data-discover-document] .listen-catalogue .listen-cover-inventory{grid-template-columns:repeat(3,minmax(0,1fr))}html[data-discover-document] .dl-rail{grid-auto-columns:calc((100% - 3 * 20px) / 4)}}
@media (max-width:767px){
  html[data-discover-document] .ds-page-head{padding:20px 0 20px}
  html[data-discover-document] .ds-page-head h1{font-size:44px;margin-bottom:10px}
  html[data-discover-document] .ds-page-promise{font-size:16px}
  html[data-discover-document] .ds-page-bar{gap:12px;margin-bottom:28px;padding-bottom:16px}
  html[data-discover-document] .ds-segments{flex:1 0 100%;margin-inline:calc(var(--ds-gutter) * -1);padding-inline:var(--ds-gutter);gap:6px}
  html[data-discover-document] .ds-segments>a{padding:0 16px}
  html[data-discover-document] .listen-search{flex:1 0 100%}
  html[data-discover-document] .dl-rail{grid-auto-columns:42%;gap:16px;margin-inline:calc(var(--ds-gutter) * -1);padding-inline:var(--ds-gutter);scroll-padding-inline:var(--ds-gutter)}
  html[data-discover-document] .dl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  html[data-discover-document] .listen-catalogue .listen-cover-inventory{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  html[data-discover-document] .dl-shelf{margin-bottom:40px}
  html[data-discover-document] .dl-shelf>.ds-section-head h2{font-size:20px}
  html[data-discover-document] .dl-spotlight{padding:20px;border-radius:var(--ds-radius-lg);margin-bottom:40px}
  html[data-discover-document] .dl-spotlight h2{font-size:26px}
  html[data-discover-document] :is(.listen-catalogue .listen-recordings,ol.dl-recordings) .audio-recording-row{--lead:60px;--cover:48px}
  html[data-discover-document] :is(.listen-catalogue .listen-recordings,ol.dl-recordings) .audio-recording-row::after{left:64px}
}
@media (max-width:480px){
  /* Compact spotlight: a 104px cover beside the title, at every phone width. */
  html[data-discover-document] .dl-spotlight-art{width:104px}
  html[data-discover-document] .dl-spotlight h2{font-size:24px;line-height:1.1;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
}
/* On phones the places become one segmented control that always fits. */
@media (max-width:480px){
  html[data-discover-document] .ds-segments{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;margin-inline:0;padding:0;border-radius:999px;background:var(--theme-bg-subtle);overflow:visible}
  html[data-discover-document] .ds-segments>a{min-width:0;padding:0 4px;background:transparent;font-size:clamp(13px,3.6vw,15px)}
  html[data-discover-document] .ds-segments>a:hover:not([aria-current]){background:transparent}
}
/* The reader's save is the bookmark alone, set apart at the end of the
   labelled actions and aligned with their icons. */
html[data-discover-document] [data-listener-island="engagement"] .article-engagement>.engagement-bookmark{order:9;margin-left:auto;align-self:flex-start}
/* The refine label reads as neutral text on the subtle plate (accent text drops below 4.5:1 there). */
html[data-discover-document] .catalogue-refine>summary{color:var(--theme-text-strong)}
/* Page links (audio and search) are the same 44px pills as the format choices. */
html[data-discover-document] .audio-pages{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}
html[data-discover-document] .audio-pages a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--theme-bg-subtle);color:var(--theme-text-strong);font:600 14px/1 var(--font-text);text-decoration:none}
html[data-discover-document] .audio-pages a:hover{background:var(--theme-fill)}
/* Reader actions keep each label on one line; the row shares the width. */
html[data-discover-document] [data-listener-island="engagement"] .article-engagement>button{white-space:nowrap}
/* Back is a quiet text link with its arrow, as on native detail pages. */
html[data-discover-document] .audio-return{gap:6px;min-height:44px;margin-left:-2px;padding:0 12px 0 2px;border:0;background:transparent;color:var(--theme-text-strong);font:600 15px/1 var(--font-text)}
html[data-discover-document] .audio-return:hover{color:var(--theme-text-heading);background:transparent;text-decoration:underline;text-underline-offset:3px}
html[data-discover-document] :is(.dl-formats,.dl-segments) a{min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--theme-bg-subtle);color:var(--theme-text-strong);font:600 14px/1 var(--font-text)}
html[data-discover-document] :is(.dl-formats,.dl-segments) a:not([aria-current]):hover{background:var(--theme-fill)}
html[data-discover-document] :is(.dl-formats,.dl-segments) [aria-current]{background:var(--theme-invert-bg);color:var(--theme-invert-text)}
/* The spotlight's primary action is light on its dark stage (base rules above). */
html[data-discover-document] .dl-spotlight .audio-collection-play{min-height:46px;padding:0 22px;border:0;border-radius:999px;background:#F6F5F2;color:#0B0B0A;font:650 15px/1 var(--font-text)}
html[data-discover-document] .dl-spotlight .audio-collection-play:hover{background:#FFFFFF}
html[data-discover-document] .dl-spotlight :focus-visible{outline-color:#fff}
/* Library: system tokens behind the library's own names. */
html[data-discover-document] .discover-library{--library-ink:var(--theme-text-heading);--library-muted:var(--theme-text-muted);--library-surface:var(--theme-bg-card);--library-warm:var(--theme-bg-subtle);--library-soft:var(--theme-accent-soft);--library-line:var(--theme-border);--library-control:var(--theme-border-strong);--library-accent:var(--theme-accent-text)}
html[data-discover-document] .discover-library .library-navigation a[aria-current]{background:var(--theme-invert-bg);color:var(--theme-invert-text)}
html[data-discover-document] .discover-library .library-empty-actions a:first-child{background:var(--theme-invert-bg);color:var(--theme-invert-text)}
html[data-discover-document] .discover-library .library-start{background:var(--theme-bg-card);box-shadow:0 0 0 1px var(--theme-border);border-radius:var(--ds-radius-lg)}
html[data-discover-document] .discover-library .library-start h2{font:500 clamp(26px,2.4vw,34px)/1.1 var(--font-display);letter-spacing:-.015em}

/* ── Footer: quiet, one line of destinations ─────────────────────────── */
html[data-discover-document] .footer{background:transparent;border-top:1px solid var(--theme-border);color:var(--theme-text-muted)}
html[data-discover-document] .footer :is(a,p){color:var(--theme-text-muted)}
html[data-discover-document] .footer a:hover{color:var(--theme-text-heading)}
html[data-discover-document] .footer{padding:40px 0 calc(32px + var(--discover-navigation-height,0px))}
html[data-discover-document] .footer-logo{height:20px;width:auto;opacity:.85}
:root[data-theme=dark] .footer-logo{filter:invert(1) hue-rotate(180deg)}
html[data-discover-document] .footer-col h3,html[data-discover-document] .footer-col h4{font:650 12px/1.4 var(--font-text);letter-spacing:.04em;text-transform:none;color:var(--theme-text-heading)}
html[data-discover-document] .footer-col a{font:14px/1.5 var(--font-text)}
html[data-discover-document] .audio-filters button{border:0;border-radius:999px;background:var(--theme-invert-bg);color:var(--theme-invert-text)}

/* ── Desktop library sidebar ─────────────────────────────────────────── */
.ds-library-aside{display:none}
@media (min-width:1200px){
  .discover-composition.has-library-rail{display:grid;grid-template-columns:280px minmax(0,1fr);align-items:start;padding-left:var(--ds-gutter)}
  .ds-main-column{min-width:0}
  .ds-side{position:sticky;top:84px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 100px);overflow:auto;scrollbar-width:none}
  .ds-side .discover-returning{width:auto;max-width:none;margin:0;padding:0}
  .ds-side .discover-continue{margin:0}
  .ds-library-aside{display:block}
  .has-library-rail .discover-stage{margin-inline:var(--ds-gutter)}
}
.ds-library-rail{display:flex;flex-direction:column;gap:18px;padding:18px 12px 14px;border-radius:var(--ds-radius-lg);background:var(--theme-bg-card);box-shadow:0 0 0 1px var(--theme-border)}
.ds-rail-head{padding:0 8px}
.ds-rail-title{font:650 17px/1.2 var(--font-text);letter-spacing:-.01em;color:var(--theme-text-heading);text-decoration:none}
.ds-rail-list{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.ds-rail-item{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 8px;border-radius:var(--ds-radius-sm);color:var(--theme-text-heading);text-decoration:none;transition:background-color .15s}
.ds-rail-item:hover{background:var(--theme-bg-subtle)}
.ds-rail-glyph{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--theme-bg-subtle);color:var(--theme-text-strong)}
.ds-rail-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ds-rail-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 14px/1.25 var(--font-text)}
.ds-rail-count{flex:none;font:600 12.5px/1 var(--font-text);color:var(--theme-text-muted)}
.ds-rail-empty{padding:4px 8px 6px}
.ds-rail-empty h2{margin:0 0 6px;font:500 19px/1.2 var(--font-display);color:var(--theme-text-heading)}
.ds-rail-empty p{margin:0 0 14px;font:13.5px/1.45 var(--font-text);color:var(--theme-text)}
.ds-rail-open{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;background:var(--theme-invert-bg);color:var(--theme-invert-text);font:600 13px/1 var(--font-text);text-decoration:none}

/* ── Continue strip: neutral, and only where no sidebar shows it ─────── */
html[data-discover-document] .discover-continue{--continue-ink:var(--theme-text-heading);--continue-muted:var(--theme-text-muted);--continue-line:var(--theme-border);background:var(--theme-bg-card);border-color:var(--theme-border);border-radius:var(--ds-radius-md)}
html[data-discover-document] .discover-continue-format,html[data-discover-document] .discover-continue-resume{background:var(--theme-bg-subtle);color:var(--theme-text-heading)}
html[data-discover-document] .discover-continue-progress{background:var(--theme-fill);accent-color:var(--theme-text-heading)}
html[data-discover-document] .discover-continue-progress::-webkit-progress-bar{background:var(--theme-fill)}
html[data-discover-document] .discover-continue-progress::-webkit-progress-value{background:var(--theme-text-heading)}
html[data-discover-document] .discover-continue-progress::-moz-progress-bar{background:var(--theme-text-heading)}

/* 16:9 covers: a 1.91:1 picture fills within the near-fit allowance and a
   16:9 one fills exactly, so the common Nostr shapes never show a wash. */
.discover-composition .discover-world .card-cover{aspect-ratio:16/9!important}
/* The shared chip keeps its 32px plate inside a 44px target; only its
   hard-coded light colours become theme tokens. The feed's chips draw their
   own fill. */
html[data-discover-document] .topic-chip:not(.active)::before{background:var(--theme-bg-subtle);border-color:var(--theme-border)}
html[data-discover-document] .topic-chip:not(.active):hover::before{background:var(--theme-fill)}
/* A 36px plate inside the 44px target, like the shared chip. */
.discover-composition #network .topic-chip::before{inset:4px 0;border:0}
.discover-composition #network .topic-chip:is(.active,[aria-pressed=true])::before{background:var(--theme-invert-bg)}
html[data-discover-document] .to-top{border:0;background:var(--ds-glass);color:var(--theme-text-heading);box-shadow:0 0 0 1px var(--theme-border),0 8px 24px -10px rgb(0 0 0 / .35);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
html[data-discover-document] .to-top:hover{color:var(--theme-text-heading)}

/* Dark appearance: content pictures are softened slightly so white artwork
   backgrounds do not glow against the dark page (HIG, Dark Mode). */
:root[data-theme=dark] :is(.card-cover,.listen-card-frame)>img:not(.card-brand){filter:brightness(.88)}

/* ── Author panel ─────────────────────────────────────────────────────
   A sheet over the page (HIG: Sheets): close at the top trailing corner,
   the person first, one prominent action, then what they wrote and a
   grouped Information list (HIG: Lists and tables). */
html[data-discover-document] .adrawer-scrim{background:rgb(18 18 17 / .32);backdrop-filter:none;-webkit-backdrop-filter:none;transition:opacity 280ms cubic-bezier(.2,0,0,1)}
html[data-discover-document] .adrawer{inset:12px 12px 12px auto;width:min(420px,calc(100vw - 24px));border:0;border-radius:var(--ds-radius-xl);background:var(--theme-bg-card);overflow:hidden;
  box-shadow:0 0 0 1px var(--theme-border),0 24px 64px -16px rgb(0 0 0 / .3);transform:none;opacity:1;transition:transform 280ms cubic-bezier(.2,0,0,1),opacity 200ms ease-out}
@starting-style{html[data-discover-document] .adrawer-open .adrawer{transform:translateX(24px);opacity:0}html[data-discover-document] .adrawer-open .adrawer-scrim{opacity:0}}
html[data-discover-document] .adrawer-scroll{padding-bottom:32px;scrollbar-width:thin}
html[data-discover-document] .adrawer-head{position:relative}
html[data-discover-document] .adrawer-cover{height:112px;background:linear-gradient(160deg,hsl(calc(var(--fig-hue,6) * 7) 30% 84%),hsl(calc(var(--fig-hue,6) * 7) 22% 93%))}
:root[data-theme=dark] html[data-discover-document] .adrawer-cover,:root[data-theme=dark] .adrawer-cover{background:linear-gradient(160deg,hsl(calc(var(--fig-hue,6) * 7) 20% 22%),hsl(calc(var(--fig-hue,6) * 7) 14% 14%))}
html[data-discover-document] .adrawer-cover.has-banner{position:relative;height:132px;background:var(--theme-fill)}
html[data-discover-document] .adrawer-cover>img{width:100%;height:100%;object-fit:cover}
html[data-discover-document] .adrawer-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;
  background:rgb(255 255 255 / .78);color:#1D1D1F;box-shadow:0 1px 2px rgb(0 0 0 / .12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);cursor:pointer}
html[data-discover-document] .adrawer-close::before{content:"";position:absolute;inset:-6px}
html[data-discover-document] .adrawer-close:hover{background:#fff}
:root[data-theme=dark] .adrawer-close{background:rgb(28 28 30 / .72)!important;color:#F5F5F7!important}
html[data-discover-document] .adrawer-close svg{width:15px;height:15px}
html[data-discover-document] .adrawer-close:focus-visible{outline:2px solid var(--theme-text-heading);outline-offset:2px}
html[data-discover-document] .adrawer-id{margin:-44px 0 0;padding:0 24px}
html[data-discover-document] .adrawer-avatar{position:relative;display:grid;place-items:center;width:88px;height:88px;border:4px solid var(--theme-bg-card);border-radius:50%;object-fit:cover;background:var(--theme-fill);box-shadow:0 1px 3px rgb(0 0 0 / .12)}
html[data-discover-document] .adrawer-avatar.is-fallback{background:hsl(calc(var(--fig-hue,6) * 7) 24% 89%);color:hsl(calc(var(--fig-hue,6) * 7) 26% 30%);font:500 32px/1 var(--font-display)}
:root[data-theme=dark] .adrawer-avatar.is-fallback{background:hsl(calc(var(--fig-hue,6) * 7) 14% 19%);color:hsl(calc(var(--fig-hue,6) * 7) 24% 74%)}
html[data-discover-document] .adrawer-name{margin:12px 0 0;font:500 30px/1.12 var(--font-display);letter-spacing:-.015em;color:var(--theme-text-heading);overflow-wrap:anywhere}
html[data-discover-document] .adrawer-ident{display:block;margin:4px 0 0;font:14px/1.4 var(--font-text);color:var(--theme-text-muted);overflow-wrap:anywhere}
html[data-discover-document] .adrawer-bio{margin:14px 0 0;font:15px/1.5 var(--font-text);color:var(--theme-text);white-space:pre-line;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
html[data-discover-document] .adrawer-bio.is-open{display:block}
html[data-discover-document] .adrawer-bio-more{min-height:32px;margin:2px 0 0;padding:0;border:0;background:none;font:600 14px/1 var(--font-text);color:var(--theme-text-heading);cursor:pointer}
html[data-discover-document] .adrawer-bio-more[hidden]{display:none}
/* One prominent action (Follow), a quieter Profile, and icon buttons. */
html[data-discover-document] .adrawer-actions{display:flex;align-items:center;gap:8px;margin:18px 0 0;padding:0}
html[data-discover-document] .adrawer-follow{flex:1 1 0;min-width:0}
html[data-discover-document] :is(.adrawer-btn,.adrawer .creator-follow-button){display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1 1 0;width:100%;min-width:0;height:44px;min-height:44px;padding:0 18px;border:0;border-radius:999px;
  background:var(--theme-fill);color:var(--theme-text-heading)!important;font:600 15px/1 var(--font-text);text-decoration:none;cursor:pointer;transition:background-color .15s}
html[data-discover-document] .adrawer-actions>.adrawer-btn{flex:1 1 0}
html[data-discover-document] :is(.adrawer-btn-primary,.adrawer .creator-follow-button){background:var(--theme-text-heading);color:var(--theme-bg-card)!important}
html[data-discover-document] .adrawer .creator-follow-button.is-following{background:var(--theme-fill);color:var(--theme-text-heading)!important}
html[data-discover-document] .adrawer .creator-follow-button svg{width:16px;height:16px}
html[data-discover-document] .adrawer .follow-notice{margin:6px 0 0;font-size:13px}
html[data-discover-document] .adrawer-btn:hover{background:var(--theme-fill-strong)}
html[data-discover-document] :is(.adrawer-btn-primary,.adrawer .creator-follow-button:not(.is-following)):hover{background:var(--theme-text-heading);opacity:.88}
html[data-discover-document] .adrawer-icon-btn{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--theme-fill);color:var(--theme-text-heading);cursor:pointer;text-decoration:none;transition:background-color .15s}
html[data-discover-document] .adrawer-icon-btn:hover{background:var(--theme-fill-strong)}
html[data-discover-document] .adrawer-icon-btn svg{width:18px;height:18px}
html[data-discover-document] .adrawer-icon-btn.is-zap svg{color:var(--orange)}
html[data-discover-document] :is(.adrawer-btn,.adrawer-icon-btn,.adrawer-copy,.adrawer-row,.adrawer-info a,.adrawer-bio-more):focus-visible{outline:2px solid var(--theme-text-heading);outline-offset:2px}
html[data-discover-document] :is(.adrawer-icon-btn,.adrawer-copy).copied{background:var(--theme-text-heading);color:var(--theme-bg-card)}
/* Summary strip: value over its label, divided by hairlines. */
html[data-discover-document] .adrawer-summary{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:24px 24px 0;padding:14px 0;border-block:1px solid var(--theme-border)}
html[data-discover-document] .adrawer-summary>div{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:0 8px;text-align:center}
html[data-discover-document] .adrawer-summary>div+div{border-left:1px solid var(--theme-border)}
html[data-discover-document] .adrawer-summary dd{margin:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:650 17px/1.2 var(--font-text);color:var(--theme-text-heading);font-variant-numeric:tabular-nums}
html[data-discover-document] .adrawer-summary dt{font:12px/1.2 var(--font-text);color:var(--theme-text-muted)}
/* Sections and rows. */
html[data-discover-document] .adrawer-section,html[data-discover-document] .adrawer-highlights{margin:28px 24px 0}
html[data-discover-document] .adrawer-secthead{display:block;margin:0 0 6px;padding:0}
html[data-discover-document] .adrawer-secthead .e{margin:0;font:650 20px/1.2 var(--font-text);letter-spacing:-.01em;text-transform:none;color:var(--theme-text-heading)}
html[data-discover-document] .adrawer-secthead .rule{display:none}
html[data-discover-document] :is(.adrawer-feed,.adrawer-blogs){padding:0}
html[data-discover-document] .adrawer-row{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:start;padding:12px 0;border-radius:0;color:inherit;text-decoration:none;background:none}
html[data-discover-document] .adrawer-row:hover{background:none}
html[data-discover-document] .adrawer-row+.adrawer-row::before{content:"";position:absolute;top:0;left:86px;right:0;height:1px;background:var(--theme-border)}
html[data-discover-document] .adrawer-thumb{position:relative;display:grid;place-items:center;width:72px;height:48px;flex:none;border-radius:8px;overflow:hidden;
  background:hsl(calc(var(--fig-hue,6) * 7) 24% 89%);color:hsl(calc(var(--fig-hue,6) * 7) 26% 30%);font:500 17px/1 var(--font-display)}
:root[data-theme=dark] .adrawer-thumb{background:hsl(calc(var(--fig-hue,6) * 7) 14% 19%);color:hsl(calc(var(--fig-hue,6) * 7) 24% 74%)}
html[data-discover-document] .adrawer-thumb.is-square{width:56px;height:56px}
html[data-discover-document] .adrawer-row.is-publication{grid-template-columns:56px minmax(0,1fr)}
html[data-discover-document] .adrawer-row.is-publication+.adrawer-row::before{left:70px}
html[data-discover-document] .adrawer-thumb img{object-fit:cover}
html[data-discover-document] .adrawer-row-body{display:flex;flex-direction:column;gap:4px;min-width:0}
html[data-discover-document] .adrawer-row-title{font:600 15px/1.35 var(--font-text);color:var(--theme-text-heading);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html[data-discover-document] .adrawer-row:hover .adrawer-row-title{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
html[data-discover-document] :is(.adrawer-row-meta,.adrawer-row-source){font:13px/1.35 var(--font-text);color:var(--theme-text-muted)}
html[data-discover-document] .adrawer-row-source{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
html[data-discover-document] .adrawer-zap{display:inline-flex;align-items:center;gap:2px;color:var(--theme-text)}
html[data-discover-document] .adrawer-zap svg{width:12px;height:12px;color:var(--orange)}
html[data-discover-document] .adrawer-more{display:flex;width:100%;margin:8px 0 0;height:44px;border-radius:999px;background:var(--theme-fill);font:600 14px/1 var(--font-text)}
html[data-discover-document] .adrawer-more[hidden]{display:none}
html[data-discover-document] .adrawer-empty{margin:0;padding:12px 0;text-align:left;font:15px/1.5 var(--font-text);color:var(--theme-text-muted)}
/* Information: an inset grouped list, label leading and value trailing. */
html[data-discover-document] .adrawer-info{margin:6px 0 0;padding:0 16px;border-radius:12px;background:var(--theme-bg-subtle)}
html[data-discover-document] .adrawer-info-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:8px 0}
html[data-discover-document] .adrawer-info-row+.adrawer-info-row::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--theme-border)}
html[data-discover-document] .adrawer-info dt{flex:none;font:15px/1.3 var(--font-text);color:var(--theme-text-heading)}
html[data-discover-document] .adrawer-info dd{display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:0;margin:0;font:15px/1.3 var(--font-text);color:var(--theme-text-muted)}
html[data-discover-document] .adrawer-info-value{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:right}
html[data-discover-document] .adrawer-info a.adrawer-info-value{color:var(--theme-text-heading);text-decoration:none}
html[data-discover-document] .adrawer-info a.adrawer-info-value:hover{text-decoration:underline;text-underline-offset:3px}
html[data-discover-document] .adrawer-copy{position:relative;display:grid;place-items:center;flex:none;width:28px;height:28px;margin-right:-4px;padding:0;border:0;border-radius:50%;background:none;color:var(--theme-text-muted);cursor:pointer}
html[data-discover-document] .adrawer-copy::before{content:"";position:absolute;inset:-8px}
html[data-discover-document] .adrawer-copy:hover{color:var(--theme-text-heading);background:var(--theme-fill)}
html[data-discover-document] .adrawer-copy svg{width:16px;height:16px}
/* Highlights keep their reader styling inside the panel's rhythm. */
html[data-discover-document] .adrawer-highlights .reader-highlight{margin:10px 0 0}
/* Loading: the panel's own outline, softly pulsing. */
html[data-discover-document] .adrawer-skeleton{display:flex;flex-direction:column;gap:12px;padding:0 0 24px}
html[data-discover-document] .adrawer-skeleton>span{display:block;border-radius:8px;background:var(--theme-fill);animation:adrawer-pulse 1.4s ease-in-out infinite}
html[data-discover-document] .adrawer-skeleton .sk-cover{height:112px;border-radius:0}
html[data-discover-document] .adrawer-skeleton .sk-avatar{width:88px;height:88px;margin:-56px 24px 0;border:4px solid var(--theme-bg-card);border-radius:50%}
html[data-discover-document] .adrawer-skeleton .sk-line{height:14px;width:40%;margin:0 24px}
html[data-discover-document] .adrawer-skeleton .sk-line.is-wide{height:26px;width:62%}
html[data-discover-document] .adrawer-skeleton .sk-strip{height:56px;margin:12px 24px}
html[data-discover-document] .adrawer-skeleton .sk-row{height:48px;margin:0 24px}
@keyframes adrawer-pulse{50%{opacity:.55}}
@media (max-width:767px){
  /* Phones: a sheet rising from the bottom edge. */
  html[data-discover-document] .adrawer{inset:auto 0 0 0;width:100%;height:calc(100dvh - 44px);border-radius:20px 20px 0 0}
  @starting-style{html[data-discover-document] .adrawer-open .adrawer{transform:translateY(32px);opacity:0}}
  html[data-discover-document] .adrawer-id,html[data-discover-document] .adrawer-section,html[data-discover-document] .adrawer-highlights{padding-inline:0;margin-inline:20px}
  html[data-discover-document] .adrawer-id{margin-inline:0;padding-inline:20px}
  html[data-discover-document] .adrawer-summary{margin-inline:20px}
}
@media (prefers-reduced-motion:reduce){html[data-discover-document] :is(.adrawer,.adrawer-scrim){transition:none}html[data-discover-document] .adrawer-skeleton>span{animation:none}}
/* Shared tokens for liked and money states inside listener components. */
html[data-discover-document]{--liked-text:#D70015;--value-text:#A65500}
html[data-discover-document][data-theme=dark]{--liked-text:#FF6961;--value-text:#F7931A}

/* ── Profile tabs on Discover ────────────────────────────────────────────
   The shared tab strip keeps its dashboard orange in STANDUP. On Discover a
   selected tab is shown by ink and weight with a neutral underline, so orange
   keeps meaning money (HIG Color: one colour, one meaning). */
html[data-discover-document] .creator-tabs{border-color:var(--theme-border)}
html[data-discover-document] .creator-tabs [role=tab]{color:var(--theme-text-muted);font-family:var(--font-text);border-bottom-color:transparent}
html[data-discover-document] .creator-tabs [role=tab]:hover{color:var(--theme-text-heading);border-bottom-color:var(--theme-border)}
html[data-discover-document] .creator-tabs [role=tab][aria-selected=true]{color:var(--theme-text-heading);font-weight:650;border-bottom-color:var(--theme-text-heading)}
html[data-discover-document] .creator-tabs [role=tab]:focus-visible{outline:2px solid var(--theme-text-heading);outline-offset:-2px;border-radius:8px}
html[data-discover-document] .creator-tabs [role=tab] span:last-child:not(:first-child){color:var(--theme-text-muted)}
/* The rest of the profile's dashboard orange: the picture fallback, the share
   button, the website link and link chips. The zap button keeps its orange. */
html[data-discover-document] .creator-listener .bg-orange-100.text-orange{background:var(--theme-fill);color:var(--theme-text-heading)}
html[data-discover-document] .creator-listener a.text-orange[href]{color:var(--theme-text-heading);text-decoration:underline;text-decoration-color:var(--theme-border-strong);text-underline-offset:3px}
html[data-discover-document] .creator-listener [title][class*="hover:text-orange"]:hover{color:var(--theme-text-heading);background:var(--theme-bg-subtle)}
html[data-discover-document] .creator-listener [class*="hover:border-orange-300"]:hover{border-color:var(--theme-border-strong);background:var(--theme-bg-subtle)}
html[data-discover-document] .creator-listener .group:hover [class*="group-hover:text-orange"]{color:var(--theme-text-heading)}


/* Discover's image policy. Published author layouts retain their own styling. */
html[data-discover-document] :is([data-fig],.discover-reader .e21-fig){position:relative;overflow:hidden;isolation:isolate}
html[data-discover-document] :is([data-fig],.discover-reader .e21-fig)>img:not(.card-brand){object-fit:contain;object-position:center;transform:none}
html[data-discover-document] :is([data-fig],.discover-reader .e21-fig).is-filled>img:not(.card-brand){object-fit:cover}
/* The wash is the same picture, enlarged and softened, so the frame reads as
   one full image rather than a picture on a grey card. */
html[data-discover-document] :is([data-fig],.discover-reader .e21-fig).is-letterboxed::before{
 content:"";position:absolute;inset:-32px;z-index:-1;pointer-events:none;
 background:var(--fig-bg) center/cover no-repeat;
 filter:blur(26px) saturate(1.15) brightness(.92);opacity:.86;
}
html[data-discover-document] :is([data-fig],.discover-reader .e21-fig).is-failed::before{display:none}
html[data-discover-document] :is([data-fig],.discover-reader .e21-fig).is-failed>img:not(.card-brand){display:none}
.dl-art[data-fig]>img{position:absolute;inset:0;display:block;width:100%;height:100%}
.dl-art-fallback{display:grid;place-items:center;position:absolute;inset:0;font-size:clamp(24px,4vw,48px);color:#754008;background:linear-gradient(135deg,#ffd293,#dd8d2c)}
.dl-art.has-image:not(.is-failed)>.dl-art-fallback{display:none}
:is(.dsearch-thumb,.adrawer-thumb).has-image:not(.is-failed)>:is(.dsearch-thumb-fallback,.adrawer-thumb-fallback){display:none}
.dsearch-thumb-fallback,.adrawer-thumb-fallback{position:relative;z-index:1}
:is(.dsearch-thumb,.adrawer-thumb)[data-fig].has-image:not(.is-failed){background:var(--theme-bg-subtle,#efeee9)!important}
:is(.dsearch-thumb,.adrawer-thumb)[data-fig]>img{position:absolute;inset:0;display:block;width:100%;height:100%}
.dsearch-thumb.round.is-failed>img{display:none}
/* Reuse the previous Discover brand plate for failed fixed cover slots. A
   publication keeps its title monogram, audio its generated art, and saved
   reading its informative article/post glyph instead of a repeated ad. */
html[data-discover-document] :is(.card-cover:not(.collection-art),.discover-reader .e21-fig,.preview-hero).is-failed::after{
 content:"";position:absolute;inset:0;margin:auto;width:54px;min-width:0;max-width:28%;aspect-ratio:1;transform:none;mask:none;-webkit-mask:none;pointer-events:none;
 background:url('/static/discover/einundzwanzig-square-inverted.svg') center/contain no-repeat;opacity:.8;
}
html[data-discover-document] :is(.discover-reader .e21-fig,.preview-hero).is-failed{
 background:radial-gradient(115% 125% at 70% 0%,#bd835b33,transparent 65%),#20251f;
}
/* A static ambient wash is decoration. The solid frame and original image
   remain sufficient when a browser exposes reduced-effects preferences. */
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more),(forced-colors:active){
 html[data-discover-document] :is([data-fig],.discover-reader .e21-fig).is-letterboxed::before{display:none}
}
@media(prefers-reduced-motion:reduce){
 html[data-discover-document] [data-fig]>img{transition:none}
}