:root{
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Hoefler Text",Georgia,ui-serif,serif;
    --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","Helvetica Neue",Arial,sans-serif;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

    --ground:#F3F5F2;
    --surface:#FFFFFF;
    --surface-2:#FBFCFB;
    --panel:#F0F3EF;
    --ink:#181C19;
    --muted:#697169;
    --line:#E4E8E3;
    --accent:#1E5C48;
    --accent-2:#2C7A5E;
    --accent-ink:#FFFFFF;
    --accent-soft:#E7F0EB;
    --shadow:0 1px 2px rgba(20,30,24,.05),0 10px 34px rgba(20,30,24,.07);
    --shadow-player:0 -1px 0 var(--line),0 -12px 34px rgba(20,30,24,.06);

    /* тизер спецпроекта — дефолтная (зимняя) палитра градиентной обложки */
    --special-c1:#1B2237;--special-c2:#46597E;
    --special-ink:#F5F7FC;--special-muted:#B9C2D9;
    --special-chip-bg:rgba(255,255,255,.13);--special-chip-ink:#EDF1FF;
    --special-accent:#8FD9C4;
    --special-border:rgba(255,255,255,.10);
    --special-shadow:0 14px 34px rgba(12,16,28,.28);
  }
  @media (prefers-color-scheme:dark){
    :root{
      --ground:#0F1311;--surface:#161B18;--surface-2:#1B211D;--panel:#1A211D;
      --ink:#E9EEEA;--muted:#8E978F;--line:#262D28;
      --accent:#57C39B;--accent-2:#6FD3AE;--accent-ink:#0B120E;--accent-soft:#17251F;
      --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 34px rgba(0,0,0,.38);
      --shadow-player:0 -1px 0 var(--line),0 -12px 34px rgba(0,0,0,.4);

      --special-c1:#212A42;--special-c2:#4F6690;
      --special-border:rgba(255,255,255,.16);
      --special-shadow:0 16px 38px rgba(0,0,0,.5);
    }
  }
  :root[data-theme="light"]{
    --ground:#F3F5F2;--surface:#FFFFFF;--surface-2:#FBFCFB;--panel:#F0F3EF;
    --ink:#181C19;--muted:#697169;--line:#E4E8E3;
    --accent:#1E5C48;--accent-2:#2C7A5E;--accent-ink:#FFFFFF;--accent-soft:#E7F0EB;
    --shadow:0 1px 2px rgba(20,30,24,.05),0 10px 34px rgba(20,30,24,.07);
    --shadow-player:0 -1px 0 var(--line),0 -12px 34px rgba(20,30,24,.06);

    --special-c1:#1B2237;--special-c2:#46597E;
    --special-border:rgba(255,255,255,.10);
    --special-shadow:0 14px 34px rgba(12,16,28,.28);
  }
  :root[data-theme="dark"]{
    --ground:#0F1311;--surface:#161B18;--surface-2:#1B211D;--panel:#1A211D;
    --ink:#E9EEEA;--muted:#8E978F;--line:#262D28;
    --accent:#57C39B;--accent-2:#6FD3AE;--accent-ink:#0B120E;--accent-soft:#17251F;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 34px rgba(0,0,0,.38);
    --shadow-player:0 -1px 0 var(--line),0 -12px 34px rgba(0,0,0,.4);

    --special-c1:#212A42;--special-c2:#4F6690;
    --special-border:rgba(255,255,255,.16);
    --special-shadow:0 16px 38px rgba(0,0,0,.5);
  }

  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    background:var(--ground);color:var(--ink);
    font-family:var(--sans);font-size:16px;line-height:1.5;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  }
  .wrap{max-width:720px;margin:0 auto;padding:0 22px}

  /* ---------- top bar ---------- */
  .topbar{
    position:sticky;top:0;z-index:20;
    background:color-mix(in srgb,var(--ground) 86%,transparent);
    backdrop-filter:saturate(1.1) blur(10px);
    border-bottom:1px solid var(--line);
  }
  .topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
  .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;cursor:pointer}
  .brand .dot{
    width:12px;height:12px;border-radius:50%;
    background:radial-gradient(circle at 30% 30%,var(--accent-2),var(--accent));
    box-shadow:0 0 0 4px var(--accent-soft);
  }
  .brand .name{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:.2px}
  .brand .name em{font-style:italic;color:var(--muted);font-weight:500}
  .top-right{display:flex;align-items:center;gap:16px}
  .tagline{font-size:13px;color:var(--muted)}
  .icon-btn{
    display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
    background:transparent;color:var(--ink);border:1px solid var(--line);cursor:pointer;
    transition:background .15s ease;
  }
  .icon-btn:hover{background:var(--surface-2)}
  .icon-btn svg{width:18px;height:18px}

  /* ---------- share popover (своё меню, когда нет navigator.share) ---------- */
  .share-menu{
    position:absolute;z-index:25;min-width:180px;
    background:var(--surface);border:1px solid var(--line);border-radius:12px;
    box-shadow:var(--shadow);padding:6px;
    opacity:0;transform:translateY(-4px) scale(.98);
    transition:opacity .14s ease,transform .14s ease;
    pointer-events:none;
  }
  .share-menu.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
  .share-menu[hidden]{display:none}
  .share-menu a,.share-menu button{
    display:block;width:100%;padding:9px 12px;border-radius:8px;
    background:transparent;border:none;text-align:left;
    font-family:var(--sans);font-size:14px;color:var(--ink);
    text-decoration:none;cursor:pointer;
  }
  .share-menu a:hover,.share-menu button:hover{background:var(--surface-2)}

  /* ---------- intro ---------- */
  .intro{padding:40px 0 8px}
  .intro h1{
    font-family:var(--serif);font-weight:600;font-size:33px;line-height:1.12;
    margin:0 0 10px;text-wrap:balance;letter-spacing:.2px;
  }
  .intro p{margin:0;color:var(--muted);max-width:54ch}

  /* ---------- feed / episode ---------- */
  .feed{padding-bottom:40px}
  .episode{padding:30px 18px;margin:0 -18px;border-radius:16px;
    transition:background-color .6s ease,box-shadow .6s ease;scroll-margin-top:84px}
  .episode.flash{
    background:var(--accent-soft);
    box-shadow:0 0 0 1.5px color-mix(in srgb,var(--accent) 42%,transparent);
  }

  .ep-head{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;
  }
  .ep-num{
    font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
    font-variant-numeric:tabular-nums;
  }
  .ep-date{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}

  /* правая группа шапки карточки: дата + кнопка «Поделиться».
     .ep-head выровнен по baseline — здесь переопределяем на center,
     чтобы круглая кнопка и текст даты стояли ровно друг с другом. */
  .ep-meta{display:flex;align-items:center;gap:10px;align-self:center}
  .share{width:32px;height:32px}
  .share svg{width:17px;height:17px}

  /* audio material panel */
  .audio{
    position:relative;overflow:hidden;
    background:var(--panel);border:1px solid var(--line);border-radius:14px;
    padding:16px 18px;margin-bottom:18px;
  }
  .a-head{display:flex;gap:14px;align-items:flex-start}
  .a-meta{min-width:0;flex:1}
  .a-title{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.2;margin:0}
  .a-chap{font-size:14px;color:var(--ink);margin-top:3px}
  .a-people{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.45}
  .a-people .tr{white-space:nowrap}
  .a-people .reader{white-space:nowrap}

  .play{
    flex:none;width:46px;height:46px;border-radius:50%;
    display:grid;place-items:center;cursor:pointer;
    background:var(--accent);color:var(--accent-ink);border:none;
    transition:background .16s ease,transform .12s ease;
  }
  .play:hover{background:var(--accent-2)}
  .play:active{transform:scale(.94)}
  .play svg{width:20px;height:20px;display:block}
  .a-dur{flex:none;margin-top:4px;font-family:var(--mono);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}

  .a-line{position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}
  .a-line span{display:block;height:100%;width:0;background:var(--accent);transition:width .2s linear}

  /* ---------- special-project teaser (карточка в общей ленте) ----------
     Градиентная обложка: вся карточка — на зимнем градиенте (--sp-c1 → --sp-c2,
     дефолты --special-c1/--special-c2, обе темы см. выше), поверх — лунный
     блик в углу и редкие снежинки. Основной цвет сборника задаётся одним
     --c (см. special-teaser.njk и .special-teaser--tinted ниже) — оба конца
     градиента выводятся из него. */
  .special-teaser{
    /* внутренние переменные с дефолтами темы — переопределяются в --tinted */
    --sp-c1:var(--special-c1);
    --sp-c2:var(--special-c2);
    /* у тизера, в отличие от прозрачных карточек, виден край фона —
       без внешнего отступа он прижимается к соседям по ленте */
    margin-bottom:9px;
    position:relative;overflow:hidden;isolation:isolate;
    background:linear-gradient(155deg,
      var(--sp-c1) 0%,
      color-mix(in srgb,var(--sp-c1) 50%,var(--sp-c2)) 58%,
      var(--sp-c2) 100%);
    box-shadow:var(--special-shadow),inset 0 0 0 1px var(--special-border);
    transition:transform .22s ease,box-shadow .22s ease;
  }
  .special-teaser--tinted{
    /* один основной цвет сборника (--c) — оба конца градиента из него:
       светлый конец — сам цвет, тёмный — тот же цвет, затемнённый к почти-чёрному */
    --sp-c2:var(--c);
    --sp-c1:color-mix(in srgb,var(--c) 42%,#06070e);
  }
  .special-teaser::before{
    /* лунный блик в углу */
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(circle at 88% 6%,rgba(255,255,255,.20),transparent 45%);
  }
  .special-teaser::after{
    /* редкие снежинки */
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:
      radial-gradient(1.6px 1.6px at 18% 28%,rgba(255,255,255,.6) 50%,transparent 51%),
      radial-gradient(1.2px 1.2px at 68% 62%,rgba(255,255,255,.45) 50%,transparent 51%),
      radial-gradient(1.6px 1.6px at 42% 82%,rgba(255,255,255,.4) 50%,transparent 51%),
      radial-gradient(1.2px 1.2px at 84% 38%,rgba(255,255,255,.5) 50%,transparent 51%),
      radial-gradient(1.6px 1.6px at 8% 72%,rgba(255,255,255,.35) 50%,transparent 51%),
      radial-gradient(1.2px 1.2px at 55% 12%,rgba(255,255,255,.4) 50%,transparent 51%);
  }
  .special-teaser:hover{
    transform:translateY(-3px);
    box-shadow:0 22px 46px rgba(8,10,20,.4),inset 0 0 0 1px var(--special-border);
  }
  .special-teaser-link{position:relative;z-index:1;display:block;color:inherit;text-decoration:none;border-radius:16px}
  .special-teaser-share{
    position:absolute;top:16px;right:16px;z-index:3;
    color:var(--special-ink);
    border-color:var(--special-border);
    background:rgba(255,255,255,.06);
  }
  .special-teaser-share:hover{background:rgba(255,255,255,.16)}
  /* чтобы дата в шапке тизера не заезжала под кнопку в углу */
  .special-teaser .ep-head{padding-right:40px}
  .special-teaser .ep-head{margin-bottom:18px}
  .special-teaser .ep-num{
    display:inline-flex;padding:4px 11px;border-radius:999px;
    background:var(--special-chip-bg);color:var(--special-chip-ink);
    font-size:11px;letter-spacing:.12em;
  }
  .special-teaser .ep-date{color:var(--special-muted)}
  .special-title{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.25;margin:0 0 8px;color:var(--special-ink)}
  .special-desc{margin:0 0 14px;color:var(--special-muted);font-size:14.5px;line-height:1.55;max-width:56ch}
  .special-meta{font-size:13px;color:var(--special-muted);font-variant-numeric:tabular-nums}
  .special-go{
    margin-top:12px;display:inline-flex;align-items:center;gap:6px;
    color:var(--special-accent);font-size:14px;font-weight:600;
  }
  .special-go span{transition:transform .15s ease}
  .special-teaser-link:hover .special-go span{transform:translateX(3px)}

  /* тизер сборника 2024 (theme: "snowglobe") — та же воздушно-бело-голубая
     палитра, что и на странице спецпроекта (body.special-page--snowglobe
     выше), только применённая внутри карточки в общей ленте. Правила ниже
     размещены в конце секции тизера, чтобы переопределять ::after/:hover/
     -share с той же специфичностью по порядку каскада. Тизер 2023 года
     (без theme) этот блок не задевает. */
  .special-teaser--snowglobe{
    --sp-c1:#FFFFFF;
    --sp-c2:#DCEBF6;
    --special-ink:#1C2B3A;
    --special-muted:#5C7085;
    --special-chip-bg:rgba(62,119,168,.12);
    --special-chip-ink:#2C5F86;
    --special-border:rgba(28,43,58,.14);
    --special-accent:#3E77A8;
  }
  .special-teaser--snowglobe::after{
    /* те же редкие «снежинки», но пудрово-голубым тоном — на светлом фоне
       белые точки были бы не видны */
    background-image:
      radial-gradient(1.6px 1.6px at 18% 28%,rgba(62,119,168,.35) 50%,transparent 51%),
      radial-gradient(1.2px 1.2px at 68% 62%,rgba(62,119,168,.25) 50%,transparent 51%),
      radial-gradient(1.6px 1.6px at 42% 82%,rgba(62,119,168,.22) 50%,transparent 51%),
      radial-gradient(1.2px 1.2px at 84% 38%,rgba(62,119,168,.28) 50%,transparent 51%),
      radial-gradient(1.6px 1.6px at 8% 72%,rgba(62,119,168,.2) 50%,transparent 51%),
      radial-gradient(1.2px 1.2px at 55% 12%,rgba(62,119,168,.22) 50%,transparent 51%);
  }
  .special-teaser--snowglobe .special-teaser-share{
    background:rgba(62,119,168,.08);
  }
  .special-teaser--snowglobe .special-teaser-share:hover{background:rgba(62,119,168,.16)}
  .special-teaser--snowglobe:hover{
    box-shadow:0 18px 40px rgba(28,43,58,.16),inset 0 0 0 1px var(--special-border);
  }

  /* ---------- special-project page: заметка над лентой ---------- */
  .special-content{padding-top:46px}
  .special-note{max-width:62ch;color:var(--ink);line-height:1.62;font-size:15.5px}
  .special-note p{margin:0 0 12px}

  /* ---------- special page: ночной hero ----------
     Полноэкранная тёмная шапка страницы спецпроекта (body.special-page,
     см. special.njk). Топбар на этой странице — не sticky, а fixed и
     прозрачный (лежит поверх hero), пока не проехали почти весь hero —
     тогда JS в special.njk добавляет .on-light и возвращает обычный вид. */
  body.special-page .topbar{
    position:fixed;top:0;left:0;right:0;
    background:transparent;backdrop-filter:none;border-bottom-color:transparent;
    transition:background-color .35s ease,border-color .35s ease,backdrop-filter .35s ease;
  }
  body.special-page .topbar .brand{color:var(--special-ink)}
  body.special-page .topbar .name em{color:var(--special-muted)}
  body.special-page .topbar .tagline{color:var(--special-muted)}
  body.special-page .topbar .icon-btn{color:var(--special-ink);border-color:var(--special-border)}
  body.special-page .topbar.on-light{
    background:color-mix(in srgb,var(--ground) 86%,transparent);
    backdrop-filter:saturate(1.1) blur(10px);
    border-bottom-color:var(--line);
  }
  body.special-page .topbar.on-light .brand{color:var(--ink)}
  body.special-page .topbar.on-light .name em{color:var(--muted)}
  body.special-page .topbar.on-light .tagline{color:var(--muted)}
  body.special-page .topbar.on-light .icon-btn{color:var(--ink);border-color:var(--line)}

  /* сам hero: градиент из --special-c1/--special-c2 (дефолт — зимняя
     палитра), либо тонировка от --c одного сборника, той же формулой,
     что .special-teaser--tinted (см. выше) */
  .hero{
    --sp-c1:var(--special-c1);
    --sp-c2:var(--special-c2);
    position:relative;overflow:hidden;isolation:isolate;
    background:linear-gradient(165deg,
      var(--sp-c1) 0%,
      color-mix(in srgb,var(--sp-c1) 50%,var(--sp-c2)) 55%,
      var(--sp-c2) 100%);
    color:var(--special-ink);
  }
  .hero--tinted{
    --sp-c2:var(--c);
    --sp-c1:color-mix(in srgb,var(--c) 42%,#06070e);
  }
  .hero :focus-visible{outline-color:var(--special-accent)}

  .hero-inner{
    position:relative;z-index:4;
    max-width:720px;margin:0 auto;padding:104px 22px 52px;
    min-height:100vh;
    display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  }
  @supports (min-height:100dvh){ .hero-inner{min-height:100dvh} }

  .hero-top{max-width:100%}
  .back-link{
    display:inline-block;margin-bottom:28px;
    color:var(--special-muted);font-size:13.5px;text-decoration:none;
    transition:color .2s ease;
  }
  .back-link:hover{color:var(--special-ink)}

  /* строка бейджа: слева «Спецпроект», справа дата + кнопка «Поделиться»
     (используем общие .ep-meta/.ep-date — переопределяем только цвет даты) */
  .hero-badge-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
  .badge{
    display:inline-flex;padding:5px 13px;border-radius:999px;
    background:var(--special-chip-bg);color:var(--special-chip-ink);
    font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  }
  .hero .ep-date{color:var(--special-muted)}
  .hero-share{
    color:var(--special-ink);border-color:var(--special-border);
    background:rgba(255,255,255,.06);
  }
  .hero-share:hover{background:rgba(255,255,255,.16)}

  .hero h1{
    font-family:var(--serif);font-weight:600;margin:0 0 18px;
    font-size:clamp(34px,7vw,60px);line-height:1.08;letter-spacing:.1px;
    text-wrap:balance;
  }
  .hero-desc{margin:0 0 22px;color:var(--special-muted);font-size:16.5px;line-height:1.6;max-width:46ch}
  .hero-meta{
    font-size:13.5px;color:var(--special-muted);font-variant-numeric:tabular-nums;
    padding-top:14px;border-top:1px solid rgba(255,255,255,.14);max-width:46ch;
  }

  .scroll-hint{
    align-self:center;display:flex;flex-direction:column;align-items:center;gap:6px;
    color:var(--special-muted);
  }
  .scroll-hint span{font-size:11px;letter-spacing:.1em;text-transform:uppercase}
  .scroll-hint svg{width:16px;height:16px;animation:hint-bob 2.4s ease-in-out infinite}
  @keyframes hint-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

  /* декоративные слои: звёзды, луна, три слоя снега */
  .hero-sky{position:absolute;inset:0;z-index:0;pointer-events:none}
  .moon{
    position:absolute;top:9%;right:11%;width:112px;height:112px;border-radius:50%;
    background:
      radial-gradient(circle at 32% 24%,rgba(70,80,60,.16),transparent 42%),
      radial-gradient(circle at 62% 68%,rgba(70,80,60,.12),transparent 38%),
      radial-gradient(circle at 34% 30%,#ffffff 0%,#eef3ff 34%,#c9d5ee 62%,transparent 76%);
    box-shadow:0 0 60px 16px rgba(238,243,255,.22),0 0 150px 60px rgba(160,185,255,.10);
  }
  .stars{
    position:absolute;inset:0;opacity:.8;
    background-image:
      radial-gradient(1.3px 1.3px at 12% 18%,rgba(255,255,255,.85),transparent 60%),
      radial-gradient(1px 1px at 24% 42%,rgba(255,255,255,.6),transparent 60%),
      radial-gradient(1.4px 1.4px at 38% 12%,rgba(255,255,255,.7),transparent 60%),
      radial-gradient(1px 1px at 48% 30%,rgba(255,255,255,.5),transparent 60%),
      radial-gradient(1.2px 1.2px at 8% 55%,rgba(255,255,255,.6),transparent 60%),
      radial-gradient(1px 1px at 65% 20%,rgba(255,255,255,.55),transparent 60%),
      radial-gradient(1.3px 1.3px at 82% 40%,rgba(255,255,255,.65),transparent 60%),
      radial-gradient(1px 1px at 92% 15%,rgba(255,255,255,.5),transparent 60%),
      radial-gradient(1.2px 1.2px at 18% 72%,rgba(255,255,255,.55),transparent 60%),
      radial-gradient(1px 1px at 32% 85%,rgba(255,255,255,.4),transparent 60%),
      radial-gradient(1.3px 1.3px at 55% 60%,rgba(255,255,255,.5),transparent 60%),
      radial-gradient(1px 1px at 71% 78%,rgba(255,255,255,.45),transparent 60%);
    background-size:100% 60%;
    background-repeat:no-repeat;
  }

  .snow{position:absolute;inset:-8% -4% -8% -4%;z-index:2;animation:snow-drift 9s ease-in-out infinite alternate}
  .snow-layer{position:absolute;inset:0;background-repeat:repeat}
  .snow-layer.far{
    opacity:.45;background-size:260px 260px;animation:snow-fall-far 30s linear infinite;
    background-image:
      radial-gradient(1.4px 1.4px at 10% 20%,rgba(255,255,255,.6),transparent 60%),
      radial-gradient(1.4px 1.4px at 30% 70%,rgba(255,255,255,.5),transparent 60%),
      radial-gradient(1.4px 1.4px at 55% 15%,rgba(255,255,255,.55),transparent 60%),
      radial-gradient(1.4px 1.4px at 75% 55%,rgba(255,255,255,.45),transparent 60%),
      radial-gradient(1.4px 1.4px at 90% 85%,rgba(255,255,255,.5),transparent 60%),
      radial-gradient(1.4px 1.4px at 20% 95%,rgba(255,255,255,.4),transparent 60%);
  }
  .snow-layer.mid{
    opacity:.65;background-size:210px 210px;animation:snow-fall-mid 19s linear infinite;
    background-image:
      radial-gradient(2px 2px at 15% 30%,rgba(255,255,255,.7),transparent 60%),
      radial-gradient(2px 2px at 45% 10%,rgba(255,255,255,.55),transparent 60%),
      radial-gradient(2px 2px at 65% 60%,rgba(255,255,255,.6),transparent 60%),
      radial-gradient(2px 2px at 82% 25%,rgba(255,255,255,.5),transparent 60%),
      radial-gradient(2px 2px at 30% 80%,rgba(255,255,255,.55),transparent 60%),
      radial-gradient(2px 2px at 95% 70%,rgba(255,255,255,.45),transparent 60%);
  }
  .snow-layer.near{
    opacity:.85;background-size:170px 170px;animation:snow-fall-near 12s linear infinite;
    background-image:
      radial-gradient(2.6px 2.6px at 20% 25%,rgba(255,255,255,.85),transparent 60%),
      radial-gradient(2.2px 2.2px at 60% 55%,rgba(255,255,255,.7),transparent 60%),
      radial-gradient(2.6px 2.6px at 40% 80%,rgba(255,255,255,.75),transparent 60%),
      radial-gradient(2.2px 2.2px at 85% 15%,rgba(255,255,255,.6),transparent 60%),
      radial-gradient(2.6px 2.6px at 5% 65%,rgba(255,255,255,.65),transparent 60%);
  }
  @keyframes snow-fall-far{from{background-position:0 0}to{background-position:0 260px}}
  @keyframes snow-fall-mid{from{background-position:0 0}to{background-position:0 210px}}
  @keyframes snow-fall-near{from{background-position:0 0}to{background-position:0 170px}}
  @keyframes snow-drift{from{transform:translateX(-8px)}to{transform:translateX(8px)}}

  .hero-fade{
    position:absolute;left:0;right:0;bottom:0;height:130px;z-index:3;pointer-events:none;
    background:linear-gradient(to bottom,transparent,var(--ground));
  }

  @media (prefers-reduced-motion:reduce){
    .snow{animation:none}
    .snow-layer{animation:none}
    .scroll-hint svg{animation:none}
  }

  /* луна позиционируется от края окна (right:11%), а колонка hero —
     фиксированные 720px по центру: уже ~1134px луна въезжает в колонку
     и перекрывает дату — на таких ширинах прячем её совсем */
  @media (max-width:1133px){
    .moon{display:none}
  }
  @media (max-width:640px){
    .hero-inner{padding:92px 18px 40px}
    .hero-desc{font-size:15.5px}
  }
  @media (max-width:360px){
    .hero-inner{padding:84px 16px 34px}
    .hero h1{font-size:clamp(30px,10vw,44px)}
    .hero-badge-row{flex-wrap:wrap;row-gap:10px}
  }

  /* thoughts */
  .thoughts{max-width:62ch}
  .th-label{
    font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
    margin-bottom:10px;
  }
  .th-body{display:flex;flex-direction:column;gap:12px}
  .th-body p{margin:0;line-height:1.62;font-size:15.5px}
  .th-body.collapsed p:nth-of-type(n+3){display:none}
  .th-toggle{
    margin-top:14px;display:inline-flex;align-items:center;gap:6px;
    background:transparent;border:none;cursor:pointer;padding:0;
    color:var(--accent);font-family:var(--sans);font-size:14px;font-weight:600;
  }
  .th-toggle svg{width:15px;height:15px;transition:transform .2s ease}
  .th-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

  /* ---------- player ---------- */
  .player{
    position:fixed;left:0;right:0;bottom:0;z-index:30;
    background:color-mix(in srgb,var(--surface) 92%,transparent);
    backdrop-filter:saturate(1.1) blur(14px);box-shadow:var(--shadow-player);
    transform:translateY(110%);transition:transform .32s cubic-bezier(.22,.8,.24,1);
  }
  .player.show{transform:translateY(0)}
  .player-inner{
    max-width:960px;margin:0 auto;padding:12px 22px;
    /* np — по содержимому (auto), но не бесконечно: если места не хватает,
       трек сжимается вплоть до min-content, а строки .np-* переносятся
       (см. overflow-wrap выше) вместо обрезки многоточием. Центральная
       колонка (контролы + перемотка) — гибкая, забирает весь остаток. */
    display:grid;grid-template-columns:auto minmax(300px,1fr);align-items:center;gap:18px;
  }
  .np{display:flex;align-items:flex-start;gap:12px;min-width:0}
  .np-text{min-width:0}
  .np-title{font-family:var(--serif);font-weight:600;font-size:15px;overflow-wrap:break-word}
  .np-context{font-size:12.5px;color:var(--muted);overflow-wrap:break-word}
  .np-author{font-size:12.5px;color:var(--muted);overflow-wrap:break-word}
  .np-reader{font-size:11px;color:var(--muted);opacity:.8;overflow-wrap:break-word}
  .np-context[hidden],.np-reader[hidden]{display:none}

  .center{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:300px}
  .ctrls{display:flex;align-items:center;gap:8px}
  .ctrl{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:transparent;border:none;color:var(--ink);cursor:pointer;transition:background .15s ease}
  .ctrl:hover{background:var(--surface-2)}
  .ctrl svg{width:20px;height:20px}
  .pp{width:44px;height:44px;background:var(--accent);color:var(--accent-ink)}
  .pp:hover{background:var(--accent-2)}

  .seek{display:flex;align-items:center;gap:10px;width:100%}
  .t{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:44px}
  .t.cur{text-align:right}
  .t.tot{text-align:left}

  input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;height:20px}
  input[type=range].scrub{flex:1}
  input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(to right,var(--accent) var(--fill,0%),var(--line) var(--fill,0%))}
  input[type=range]::-moz-range-track{height:4px;border-radius:999px;background:var(--line)}
  input[type=range]::-moz-range-progress{height:4px;border-radius:999px;background:var(--accent)}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);margin-top:-4.5px;border:2px solid var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.2)}
  input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--accent);border:2px solid var(--surface)}

  :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

  @media (max-width:720px){
    .tagline{display:none}
    .intro h1{font-size:27px}
    .player-inner{grid-template-columns:1fr;gap:10px;padding:10px 16px 12px}
    .np{order:1}.center{order:2;min-width:0;width:100%}
  }
  @media (prefers-reduced-motion:reduce){
    .player{transition:none}
    .th-toggle svg{transition:none}
    .special-teaser{transition:none}
    .share-menu{transition:none}
  }

  /* ==================================================================
     special page: тема «снежный шар» (только сборник 2024,
     см. theme: "snowglobe" во frontmatter src/specials/rozhdestvo-2024/index.md
     и bodyClass в src/specials/specials.11tydata.js).
     Всё ниже строго внутри скоупа body.special-page--snowglobe — тема
     2023 года (без theme, дефолт) этот блок не задевает. ================== */

  /* светлая палитра поверх hero: текст тёмный, чипы/границы под светлый фон */
  body.special-page--snowglobe{
    --special-ink:#1C2B3A;
    --special-muted:#5C7085;
    --special-chip-bg:rgba(62,119,168,.12);
    --special-chip-ink:#2C5F86;
    --special-border:rgba(28,43,58,.14);

    /* пудрово-голубой акцент — красит кнопки Play, ползунок плеера,
       номера частей (.ep-num) и toggle «Читать дальше» по всей странице */
    --accent:#3E77A8;
    --accent-2:#356a94;
    --accent-ink:#fff;
  }

  /* топбар (.brand/.tagline/.icon-btn) уже красится переменными
     --special-ink/--special-muted/--special-border выше — здесь только то,
     что в базовых правилах захардкожено поверх переменных */
  body.special-page--snowglobe .hero-meta{border-top-color:var(--special-border)}
  body.special-page--snowglobe .hero-share{background:rgba(62,119,168,.08)}
  body.special-page--snowglobe .hero-share:hover{background:rgba(62,119,168,.16)}

  /* сам hero — вид изнутри снежного шара: светлый радиальный купол вместо
     тёмного ночного неба (переопределяем background, не --special-c1/c2,
     т.к. форма градиента другая — радиальная, а не диагональная) */
  body.special-page--snowglobe .hero{
    background:
      radial-gradient(120% 85% at 50% 8%,#FFFFFF 0%,#EEF6FC 38%,#DCEBF6 68%,var(--ground) 100%);
  }

  /* декор купола: стеклянный блик + мягкие искры (замена .hero-sky/.stars/.moon) */
  body.special-page--snowglobe .sg-dome{position:absolute;inset:0;z-index:0;pointer-events:none}
  body.special-page--snowglobe .sg-shine{
    position:absolute;inset:-10% -20% auto -20%;height:70%;
    background:linear-gradient(115deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 32%);
    transform:rotate(-6deg);
  }
  body.special-page--snowglobe .sg-glint{
    position:absolute;left:64%;top:10%;width:180px;height:180px;
    background:radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 70%);
    filter:blur(2px);
    animation:sg-glint-breathe 6s ease-in-out infinite;
  }
  @keyframes sg-glint-breathe{
    0%,100%{opacity:.65;transform:scale(1)}
    50%{opacity:1;transform:scale(1.06)}
  }
  body.special-page--snowglobe .sg-sparkle{position:absolute;inset:0;opacity:.9}
  body.special-page--snowglobe .sg-sparkle span{
    position:absolute;border-radius:50%;
    background:radial-gradient(circle,rgba(62,119,168,.55),rgba(62,119,168,0) 70%);
  }

  /* падающий снег внутри купола (замена .snow/.snow-layer) */
  body.special-page--snowglobe .sg-snow{
    position:absolute;inset:-8% -4% -8% -4%;z-index:2;
    animation:sg-snow-drift 9s ease-in-out infinite alternate;
  }
  body.special-page--snowglobe .sg-snow-layer{position:absolute;inset:0;background-repeat:repeat}
  body.special-page--snowglobe .sg-snow-layer.far{
    opacity:.55;background-size:240px 240px;animation:sg-snow-fall-far 26s linear infinite;
    background-image:
      radial-gradient(1.6px 1.6px at 12% 20%,rgba(62,119,168,.45),transparent 60%),
      radial-gradient(1.6px 1.6px at 34% 66%,rgba(62,119,168,.4),transparent 60%),
      radial-gradient(1.6px 1.6px at 58% 14%,rgba(62,119,168,.4),transparent 60%),
      radial-gradient(1.6px 1.6px at 78% 52%,rgba(62,119,168,.35),transparent 60%),
      radial-gradient(1.6px 1.6px at 92% 82%,rgba(62,119,168,.4),transparent 60%),
      radial-gradient(1.6px 1.6px at 22% 90%,rgba(62,119,168,.3),transparent 60%);
  }
  body.special-page--snowglobe .sg-snow-layer.mid{
    opacity:.75;background-size:190px 190px;animation:sg-snow-fall-mid 17s linear infinite;
    background-image:
      radial-gradient(2.4px 2.4px at 16% 28%,rgba(255,255,255,.95),transparent 60%),
      radial-gradient(2.4px 2.4px at 46% 8%,rgba(255,255,255,.9),transparent 60%),
      radial-gradient(2.4px 2.4px at 66% 58%,rgba(255,255,255,.9),transparent 60%),
      radial-gradient(2.4px 2.4px at 84% 22%,rgba(255,255,255,.85),transparent 60%),
      radial-gradient(2.4px 2.4px at 30% 78%,rgba(255,255,255,.85),transparent 60%),
      radial-gradient(2.4px 2.4px at 96% 68%,rgba(255,255,255,.8),transparent 60%);
    filter:drop-shadow(0 1px 1px rgba(62,119,168,.18));
  }
  body.special-page--snowglobe .sg-snow-layer.near{
    opacity:.9;background-size:150px 150px;animation:sg-snow-fall-near 11s linear infinite;
    background-image:
      radial-gradient(3.2px 3.2px at 20% 22%,#FFFFFF,transparent 60%),
      radial-gradient(2.8px 2.8px at 60% 52%,#FFFFFF,transparent 60%),
      radial-gradient(3.2px 3.2px at 40% 82%,#FFFFFF,transparent 60%),
      radial-gradient(2.8px 2.8px at 86% 16%,#FFFFFF,transparent 60%),
      radial-gradient(3.2px 3.2px at 6% 64%,#FFFFFF,transparent 60%);
    filter:drop-shadow(0 1px 2px rgba(62,119,168,.28));
  }
  @keyframes sg-snow-fall-far{from{background-position:0 0}to{background-position:0 240px}}
  @keyframes sg-snow-fall-mid{from{background-position:0 0}to{background-position:0 190px}}
  @keyframes sg-snow-fall-near{from{background-position:0 0}to{background-position:0 150px}}
  @keyframes sg-snow-drift{from{transform:translateX(-6px)}to{transform:translateX(6px)}}

  /* летящие снежинки-глифы (❄ ❅ ❆) поверх «точечного» sg-snow — тот же слой,
     под .hero-fade (z-index:3) и контентом (z-index:4) */
  body.special-page--snowglobe .sg-flakes{
    position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
  }
  body.special-page--snowglobe .sg-flakes span{
    position:absolute;top:-8%;
    color:#FFFFFF;
    text-shadow:0 1px 2px rgba(62,119,168,.35);
    line-height:1;
    animation-name:sg-flake-fall;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    will-change:transform;
  }
  /* нечётные и чётные снежинки сносит в разные стороны и на разный угол,
     чтобы траектории не выглядели одинаковыми под копирку */
  body.special-page--snowglobe .sg-flakes span:nth-child(odd){
    animation-name:sg-flake-fall-left;
  }
  @keyframes sg-flake-fall{
    0%{transform:translateY(-10vh) translateX(0) rotate(0deg);opacity:0}
    8%{opacity:.9}
    92%{opacity:.5}
    100%{transform:translateY(110vh) translateX(24px) rotate(240deg);opacity:0}
  }
  @keyframes sg-flake-fall-left{
    0%{transform:translateY(-10vh) translateX(0) rotate(0deg);opacity:0}
    8%{opacity:.9}
    92%{opacity:.5}
    100%{transform:translateY(110vh) translateX(-20px) rotate(-240deg);opacity:0}
  }

  @media (prefers-reduced-motion:reduce){
    body.special-page--snowglobe .sg-glint{animation:none}
    body.special-page--snowglobe .sg-snow{animation:none}
    body.special-page--snowglobe .sg-snow-layer{animation:none}
    body.special-page--snowglobe .sg-flakes{display:none}
  }

  @media (max-width:640px){
    body.special-page--snowglobe .sg-glint{width:130px;height:130px;left:58%}
  }