/* read.xyz: Frutiger Aero. Bright sky scene, light glossy glass, airy humanist type, living bubbles. */
:root{
  --text:#16384f;          /* deep slate blue body text */
  --head:#0b4f86;          /* teal-blue headings */
  --muted:#4d7088;
  --link:#0870c4;
  --aqua:#27b4e6;
  --glass-top:rgba(255,255,255,.93);
  --glass-mid:rgba(240,250,255,.80);
  --glass-low:rgba(222,244,255,.72);
  --glass-bot:rgba(244,253,255,.84);
  --rim:rgba(255,255,255,.96);
  --outline:rgba(110,195,238,.55);
  --shadow:0 12px 34px rgba(20,100,170,.16),0 2px 6px rgba(20,100,170,.10);
  --font:"Frutiger","Frutiger LT Std","Segoe UI","Avenir Next","Myriad Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--text);font:400 16.5px/1.62 var(--font);letter-spacing:.005em;
  min-height:100vh;display:flex;flex-direction:column;background:#bfeaff}
/* Frutiger Aero scenery (generated locally): fixed layer that also works on iOS */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:url(/bg-aero.jpg) center bottom/cover no-repeat}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 45% at 50% 0%,rgba(255,255,255,.5),transparent 70%)}
@media (max-width:700px){body::before{background-image:url(/bg-aero-small.jpg);background-position:30% bottom}}
@media (prefers-color-scheme:dark){body::after{background:linear-gradient(180deg,rgba(0,40,90,.18),rgba(0,0,0,0) 65%)}}
a{color:var(--link);text-decoration:none;transition:color .15s,text-shadow .15s}
a:hover{color:#0a8fe0;text-shadow:0 0 8px rgba(80,190,255,.55)}
main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:40px 16px 28px;position:relative;z-index:1}

/* ---------- Aero glass panels ---------- */
.glass{position:relative;border-radius:18px;
  background:linear-gradient(180deg,var(--glass-top) 0%,var(--glass-mid) 46%,var(--glass-low) 50%,var(--glass-bot) 100%);
  border:1px solid var(--outline);
  box-shadow:var(--shadow),inset 0 1px 0 var(--rim),inset 0 0 0 1px rgba(255,255,255,.55),inset 0 -14px 24px rgba(170,225,255,.18);
  backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6)}
.glass::before{content:"";position:absolute;left:10px;right:10px;top:3px;height:42%;border-radius:14px 14px 50% 50%/14px 14px 18px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));pointer-events:none}
.glass>*{position:relative}

/* ---------- header ---------- */
.brand{text-align:center;margin:0 auto 20px;max-width:600px}
.logo{display:inline-block;line-height:0}
.logo img{width:340px;max-width:100%;height:auto;filter:drop-shadow(0 8px 14px rgba(0,70,140,.22))}
.logo:hover{text-decoration:none;text-shadow:none}
.tagline{color:var(--muted);max-width:520px;margin:6px auto 0;padding:14px 30px;border-radius:24px;font-size:15.5px}

/* ---------- hero (cover + audio) ---------- */
.hero{display:grid;grid-template-columns:196px 1fr;gap:20px;align-items:center;padding:16px;margin-bottom:18px}
.cover{width:100%;height:auto;aspect-ratio:1;border-radius:14px;display:block;
  box-shadow:0 6px 16px rgba(20,100,170,.25),0 0 0 1px rgba(255,255,255,.9),0 0 0 2px rgba(110,195,238,.35)}
.hero-text{min-width:0}
.date{margin:0;font-size:23px;font-weight:600;color:var(--head);letter-spacing:-.2px}
.kicker{margin:2px 0 12px;color:var(--muted);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.listen{margin:6px 0 0;color:var(--muted);font-size:13px}

/* ---------- stories ---------- */
.stories{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.stories li{padding:18px 20px 14px 68px}
/* story number orb: a button (jumps the audio to that story) when the briefing has chapters */
.stories .num{position:absolute;left:16px;top:18px;width:36px;height:36px;border-radius:50%;border:0;padding:0;
  display:grid;place-items:center;font:700 15px var(--font);color:#fff;text-shadow:0 1px 2px rgba(0,40,90,.8);
  background:linear-gradient(180deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,.15) 46%,rgba(255,255,255,0) 50%),
             radial-gradient(circle at 50% 78%,#00d5f7 0%,#0679fd 48%,#0153eb 74%,#003db4 100%);   /* sampled from the logo */
  box-shadow:inset 0 -3px 5px rgba(0,40,140,.35),inset 0 1px 1px rgba(255,255,255,.9),0 0 0 1px rgba(1,83,235,.55),0 3px 8px rgba(1,83,235,.3)}
button.num{cursor:pointer;transition:transform .15s,filter .15s}
button.num:hover{transform:scale(1.08);filter:brightness(1.08)}
button.num:focus-visible{outline:2px solid #0679fd;outline-offset:2px}
.stories h2 a{color:inherit}
.story-img{float:right;width:116px;height:116px;margin:0 0 10px 16px;border-radius:14px;object-fit:cover;
  box-shadow:0 6px 16px rgba(20,100,170,.25),0 0 0 1px rgba(255,255,255,.9),0 0 0 2px rgba(110,195,238,.35)}
.stories li::after{content:"";display:block;clear:both}
/* now playing: the story being read glows */
.stories li{transition:box-shadow .4s}
.stories li.now{box-shadow:0 0 0 2px rgba(0,213,247,.75),0 0 26px rgba(0,180,247,.45),0 8px 24px rgba(20,100,170,.18)}
.stories li.now .num{animation:num-pulse 1.6s ease-in-out infinite}
@keyframes num-pulse{0%,100%{box-shadow:inset 0 -3px 5px rgba(0,40,140,.35),inset 0 1px 1px rgba(255,255,255,.9),0 0 0 1px rgba(1,83,235,.55),0 0 0 0 rgba(0,213,247,.6)}
  50%{box-shadow:inset 0 -3px 5px rgba(0,40,140,.35),inset 0 1px 1px rgba(255,255,255,.9),0 0 0 1px rgba(1,83,235,.55),0 0 0 8px rgba(0,213,247,0)}}
.share{display:inline-flex;align-items:center;gap:6px;margin-top:2px;padding:5px 12px;border:0;border-radius:999px;cursor:pointer;
  font:600 12.5px var(--font);color:#0153eb;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(225,243,255,.75));
  box-shadow:inset 0 1px 1px #fff,0 0 0 1px rgba(110,195,238,.6),0 2px 6px rgba(20,100,170,.14);transition:transform .15s}
.share svg{width:14px;height:14px}
.share:hover{transform:translateY(-1px)}
.share:focus-visible{outline:2px solid #0679fd;outline-offset:2px}
.stories h2{font-size:19.5px;line-height:1.34;margin:0 0 6px;color:var(--head);font-weight:600;letter-spacing:-.15px}
.stories p{margin:0 0 8px}
.why strong{color:var(--head);font-weight:600}
.src{font-size:13px;color:var(--muted)}
.note{color:var(--muted);font-size:13px;text-align:center;margin:20px auto 0;max-width:560px;padding:8px 16px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(232,248,255,.72));border:1px solid var(--outline);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* ---------- inner pages ---------- */
.page{padding:24px 28px}
.page h1{font-size:28px;margin:0 0 14px;color:var(--head);font-weight:600}
.page h2{font-size:20px;margin:24px 0 8px;color:var(--head);font-weight:600}
.archive-page{display:grid;gap:14px}
.archive-head{padding:20px 26px}
.archive-head h1{font-size:28px;margin:0 0 4px;color:var(--head);font-weight:600}
.archive-head p{margin:0;color:var(--muted);font-size:14.5px}
.archive{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.archive .month{justify-self:start;margin:8px 0 -2px 6px;padding:4px 14px;border-radius:999px;font-size:12.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:#0b4f86;background:rgba(255,255,255,.62);
  box-shadow:inset 0 1px 1px #fff,0 0 0 1px rgba(110,195,238,.45),0 2px 6px rgba(20,100,170,.12)}
/* card: cover left (same rounded image + shadow as the briefing cover), meta + player right */
.card{display:grid;grid-template-columns:150px 1fr;grid-template-areas:"cover meta" "cover actions";
  column-gap:20px;row-gap:12px;align-items:center;padding:16px}
.card-cover{grid-area:cover;align-self:start;line-height:0}
.card .thumb{width:150px;height:150px;border-radius:14px;display:block;object-fit:cover;
  box-shadow:0 6px 16px rgba(20,100,170,.25),0 0 0 1px rgba(255,255,255,.9),0 0 0 2px rgba(110,195,238,.35);transition:transform .2s}
.card-cover:hover .thumb{transform:translateY(-2px)}
.card-meta{grid-area:meta;min-width:0;align-self:end}
.card-day{margin:0 0 4px;color:var(--muted);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.card h2{margin:0;font-size:19px;line-height:1.32;font-weight:600;letter-spacing:-.15px}
.card h2 a{color:var(--head)}
.card-more{margin:4px 0 0;color:var(--muted);font-size:13.5px}
.card-actions{grid-area:actions;display:flex;align-items:center;gap:12px;min-width:0;align-self:start}
.card-actions .aplayer{flex:1}
.card-actions .btn{margin:0;flex:none}
/* Frutiger Aero glossy pill (logo blues) */
.btn{display:inline-block;margin-top:10px;white-space:nowrap;padding:7px 20px;border-radius:999px;font-weight:600;font-size:14px;color:#fff;
  text-shadow:0 1px 1px rgba(0,40,120,.6);border:1px solid rgba(1,61,180,.55);
  background:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.18) 48%,rgba(255,255,255,0) 52%),
             linear-gradient(180deg,#00d5f7 0%,#0679fd 55%,#0153eb 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -2px 4px rgba(0,40,140,.3),0 3px 8px rgba(1,83,235,.3);
  transition:filter .15s,transform .15s}
.btn:hover{text-decoration:none;filter:brightness(1.08) saturate(1.1);transform:translateY(-1px)}
.btn:active{transform:translateY(0);filter:brightness(.95)}

footer{position:relative;z-index:1;text-align:center;margin:8px auto 22px;padding:9px 22px;font-size:14px;width:fit-content;max-width:calc(100% - 32px);
  border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(228,246,255,.75));border:1px solid var(--outline);
  box-shadow:0 6px 18px rgba(20,100,170,.16),inset 0 1px 0 #fff;backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4)}
footer a{color:#0b5f9f;margin:0 5px;font-weight:500}

/* ---------- living bubbles: rise, sway, squash & stretch, iridescent film ---------- */
.sky{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sky i{--s:60px;position:absolute;bottom:-160px;width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 54%,rgba(255,255,255,.18) 63%,rgba(200,240,255,.45) 69%,rgba(255,255,255,.75) 71.5%,rgba(255,255,255,0) 72%);
  box-shadow:inset -4px -6px 14px rgba(120,210,255,.25),inset 6px 8px 14px rgba(255,255,255,.35);
  animation:rise var(--d,24s) linear infinite,sway var(--w,5s) ease-in-out infinite alternate,wobble var(--b,2.8s) ease-in-out infinite;
  animation-delay:var(--dl,0s),0s,0s}
.sky i::before{content:"";position:absolute;left:20%;top:14%;width:30%;height:20%;border-radius:50%;transform:rotate(-30deg);
  background:radial-gradient(ellipse at center,rgba(255,255,255,.95),rgba(255,255,255,0) 70%)}
.sky i::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,120,210,.45),rgba(255,235,120,.4),rgba(120,255,200,.45),rgba(110,180,255,.5),rgba(200,130,255,.45),rgba(255,120,210,.45));
  -webkit-mask:radial-gradient(circle,transparent 60%,#000 66%,#000 71%,transparent 72%);mask:radial-gradient(circle,transparent 60%,#000 66%,#000 71%,transparent 72%);
  animation:film 7s linear infinite;mix-blend-mode:screen;opacity:.85}
.sky i:nth-child(1){left:6%;--s:72px;--d:27s;--w:5.2s;--b:2.6s;--dl:-4s}
.sky i:nth-child(2){left:20%;--s:36px;--d:19s;--w:3.6s;--b:2.1s;--dl:-11s}
.sky i:nth-child(3){left:38%;--s:96px;--d:33s;--w:6.4s;--b:3.4s;--dl:-17s}
.sky i:nth-child(4){left:61%;--s:50px;--d:23s;--w:4.4s;--b:2.4s;--dl:-2s}
.sky i:nth-child(5){left:78%;--s:118px;--d:38s;--w:7s;--b:3.8s;--dl:-24s}
.sky i:nth-child(6){left:90%;--s:30px;--d:17s;--w:3.2s;--b:1.9s;--dl:-8s}
.sky i:nth-child(7){left:51%;--s:24px;--d:15s;--w:2.8s;--b:1.7s;--dl:-13s}
@keyframes rise{from{bottom:-160px}to{bottom:calc(100% + 160px)}}
@keyframes sway{from{translate:-22px 0}to{translate:22px 0}}
@keyframes wobble{0%,100%{scale:1 1}25%{scale:1.07 .94}50%{scale:.95 1.06}75%{scale:1.04 .97}}
@keyframes film{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){.sky{display:none}}

@media (max-width:600px){
  .logo img{width:260px}main{padding-top:28px}
  .tagline{font-size:13.5px;line-height:1.45;max-width:300px;padding:10px 18px;border-radius:18px}
  /* compact cover row: thumbnail left, date + player right */
  .hero{grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:12px;text-align:left}
  .hero .cover{border-radius:12px}
  .date{font-size:17px;line-height:1.25}
  .kicker{font-size:10.5px;letter-spacing:.1em;margin:3px 0 9px}
  .listen{display:none}
  .hero .aplayer{gap:8px;padding:4px 10px 4px 4px}
  .hero .orb{width:40px;height:40px}.hero .orb svg{width:18px;height:18px}
  .hero .ap-time{font-size:11px;min-width:0}
  .stories li{padding-left:62px}.sky i:nth-child(n+5){display:none}
  .card{grid-template-columns:92px 1fr;grid-template-areas:"cover meta" "actions actions";column-gap:14px;padding:14px}
  .card .thumb{width:92px;height:92px;border-radius:12px}
  .card h2{font-size:16.5px}.card-meta{align-self:center}
  .card-day{font-size:11px;letter-spacing:.07em}
  .archive-head{padding:16px 20px}.archive-head h1{font-size:24px}
}
@media (max-width:420px){.card-actions{flex-wrap:wrap}.card-actions .btn{width:100%;text-align:center}}

/* ---------- Aero audio player (player.js): glossy orb + scrubber, shared by the inline players and the mini bar ---------- */
.aplayer{display:flex;align-items:center;gap:12px;min-width:0;padding:6px 16px 6px 6px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(232,246,255,.72));
  box-shadow:inset 0 1px 1px #fff,0 0 0 1px rgba(110,195,238,.55),0 3px 10px rgba(20,120,200,.16)}
html:not(.js) .aplayer{display:block;padding:0;background:none;box-shadow:none}
html:not(.js) .aplayer>:not(audio){display:none}
html:not(.js) .aplayer audio{width:100%}
.js .aplayer audio{display:none}
.ap-time{flex:none;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:78px;text-align:right}
.seek-wrap{position:relative;flex:1;min-width:0;display:flex;align-items:center}
.tick{position:absolute;top:50%;width:2px;height:10px;margin:-5px 0 0 -1px;border-radius:1px;pointer-events:none;
  background:rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(1,83,235,.45)}
.seek{--p:0%;flex:1;width:100%;min-width:0;height:20px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.seek::-webkit-slider-runnable-track{height:6px;border-radius:99px;box-shadow:inset 0 1px 2px rgba(0,50,110,.25);
  background:linear-gradient(90deg,#00d5f7,#0679fd var(--p),rgba(255,255,255,.8) var(--p))}
.seek::-moz-range-track{height:6px;border-radius:99px;background:rgba(255,255,255,.8);box-shadow:inset 0 1px 2px rgba(0,50,110,.25)}
.seek::-moz-range-progress{height:6px;border-radius:99px;background:linear-gradient(90deg,#00d5f7,#0679fd)}
.seek::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;margin-top:-4.5px;border-radius:50%;border:1px solid rgba(1,61,180,.55);
  background:radial-gradient(circle at 50% 30%,#fff 0%,#dff4ff 45%,#8fd2ff 100%);box-shadow:0 1px 3px rgba(0,60,140,.35);transition:transform .15s}
.seek::-moz-range-thumb{width:15px;height:15px;border-radius:50%;border:1px solid rgba(1,61,180,.55);
  background:radial-gradient(circle at 50% 30%,#fff 0%,#dff4ff 45%,#8fd2ff 100%);box-shadow:0 1px 3px rgba(0,60,140,.35)}
.seek:hover::-webkit-slider-thumb,.seek:active::-webkit-slider-thumb{transform:scale(1.15)}
.seek:disabled{opacity:.4;cursor:default}
.orb{flex:none;display:grid;place-items:center;width:46px;height:46px;border:0;padding:0;border-radius:50%;cursor:pointer;color:#fff;font:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.16) 48%,rgba(255,255,255,0) 52%),
             radial-gradient(circle at 50% 78%,#00d5f7 0%,#0679fd 48%,#0153eb 74%,#003db4 100%);
  box-shadow:inset 0 -3px 5px rgba(0,40,140,.35),inset 0 1px 1px rgba(255,255,255,.9),0 0 0 1px rgba(1,83,235,.55),0 3px 8px rgba(1,83,235,.3);
  transition:filter .15s,transform .15s}
.orb svg{width:20px;height:20px;display:block;fill:#fff;filter:drop-shadow(0 1px 1px rgba(0,40,120,.6))}
.orb:hover{filter:brightness(1.08) saturate(1.1);transform:scale(1.04)}
.orb:active{transform:scale(.97)}
.orb.playing{box-shadow:inset 0 -3px 5px rgba(0,40,140,.35),inset 0 1px 1px rgba(255,255,255,.9),0 0 0 1px rgba(1,83,235,.55),0 0 14px rgba(0,213,247,.55)}
.orb:disabled{opacity:.45;cursor:default;transform:none}
.orb:focus-visible,.seek:focus-visible,.mini-nav:focus-visible{outline:2px solid #0679fd;outline-offset:2px}
.hero .aplayer{margin-top:2px}
.hero .orb{width:52px;height:52px}.hero .orb svg{width:22px;height:22px}

/* sticky mini bar */
.mini{position:fixed;z-index:60;top:10px;left:50%;width:min(740px,calc(100% - 24px));
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:22px;
  transform:translate(-50%,calc(-100% - 24px));opacity:0;pointer-events:none;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s}
.mini.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.mini.loading{cursor:progress}
.mini.loading .mini-thumb{opacity:.6}
.mini-thumb-link{flex:none;line-height:0}
.mini-thumb{width:48px;height:48px;border-radius:12px;object-fit:cover;display:block;
  box-shadow:0 3px 8px rgba(20,100,170,.25),0 0 0 1px rgba(255,255,255,.9),0 0 0 2px rgba(110,195,238,.35);transition:opacity .2s}
.mini-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mini-title{font-weight:600;font-size:14.5px;color:var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-line{display:flex;align-items:center;gap:10px}
.mini .ap-time{font-size:12px;min-width:74px}
.mini .orb{width:44px;height:44px}
.mini-nav{flex:none;display:grid;place-items:center;width:34px;height:34px;border:0;padding:0;border-radius:50%;cursor:pointer;color:#0153eb;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(225,243,255,.75));
  box-shadow:inset 0 1px 1px #fff,0 0 0 1px rgba(110,195,238,.6),0 2px 6px rgba(20,100,170,.18);transition:transform .15s,opacity .15s}
.mini-nav svg{width:20px;height:20px;display:block}
.mini-nav:hover:not(:disabled){transform:scale(1.07)}
.mini-nav:disabled{opacity:.32;cursor:default}
@media (max-width:560px){
  .mini{top:8px;width:calc(100% - 16px);gap:7px;padding:7px 8px;border-radius:18px}
  .mini-thumb{width:40px;height:40px;border-radius:10px}
  .mini .orb{width:40px;height:40px}.mini-nav{width:30px;height:30px}.mini svg{width:18px;height:18px}
  .mini .ap-time{min-width:0;font-size:11px}.mini-title{font-size:13.5px}
  .aplayer{gap:9px;padding-right:12px}.ap-time{min-width:0;font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){.mini{transition:opacity .2s}}

/* ---------- mobile first screen (briefing pages): sky + logo + tagline, then scroll ---------- */
.scroll-cue{display:none}
@media (max-width:600px){
  body:has(section.today) main{padding-top:0}
  body:has(section.today) .brand{min-height:calc(100svh - 24px);margin:0 auto;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:14px;padding:0 0 64px;position:relative}
  body:has(section.today) .logo img{width:min(300px,82vw)}
  body:has(section.today) .scroll-cue{display:grid;place-items:center;position:absolute;bottom:22px;left:50%;
    width:44px;height:44px;margin-left:-22px;border-radius:50%;color:#0153eb;
    background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.95) 0 18%,rgba(255,255,255,.35) 40%,rgba(160,220,255,.22) 70%,rgba(0,150,255,.18) 100%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),inset 0 -6px 12px rgba(0,120,220,.18),0 6px 16px rgba(0,90,170,.22);
    animation:cue-bob 2.6s ease-in-out infinite}
  body:has(section.today) .scroll-cue svg{width:22px;height:22px;margin-top:3px}
  section.today{scroll-margin-top:16px}
}
@keyframes cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.scroll-cue{animation:none}}
@media (max-width:380px){.hero{grid-template-columns:82px 1fr;gap:12px}.hero .orb{width:38px;height:38px}.hero .aplayer{gap:7px}}

/* ---------- newsletter signup ---------- */
.subscribe{margin:22px 0 6px;padding:22px 26px;text-align:center}
.subscribe h2{margin:0 0 4px;font-size:21px;color:var(--head);font-weight:600}
.sub-lead{margin:0 auto 14px;color:var(--muted);font-size:14.5px;max-width:440px}
.sub-form{display:flex;gap:10px;max-width:460px;margin:0 auto}
.sub-form input[type=email]{flex:1;min-width:0;height:42px;padding:0 18px;border-radius:999px;border:0;font:inherit;font-size:15px;color:#16384f;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(236,248,255,.85));
  box-shadow:inset 0 2px 4px rgba(0,60,120,.12),0 0 0 1px rgba(110,195,238,.6)}
.sub-form input[type=email]:focus{outline:none;box-shadow:inset 0 2px 4px rgba(0,60,120,.12),0 0 0 2px #0679fd,0 0 12px rgba(0,213,247,.4)}
.sub-form .btn{margin:0;height:42px;padding:0 22px}
.sub-form .btn:disabled{opacity:.6;cursor:progress}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;opacity:0}
.sub-msg{min-height:1.2em;margin:10px 0 0;font-size:14px;font-weight:600}
.sub-msg.ok{color:#14803c}.sub-msg.err{color:#b4232f}
.sub-fine{margin:6px 0 0;color:var(--muted);font-size:12px}
footer .rss{display:inline-flex;align-items:center;gap:5px}
footer .rss svg{width:13px;height:13px;fill:#f28a1a;color:#f28a1a}
@media (max-width:480px){.subscribe{padding:18px 16px}.sub-form{flex-direction:column}.sub-form input[type=email]{flex:none;width:100%}.sub-form .btn{width:100%}}

/* playback speed pill */
.speed{flex:none;min-width:42px;height:26px;padding:0 8px;border:0;border-radius:999px;cursor:pointer;font:700 12.5px var(--font);color:#0153eb;
  font-variant-numeric:tabular-nums;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(225,243,255,.75));
  box-shadow:inset 0 1px 1px #fff,0 0 0 1px rgba(110,195,238,.6)}
.speed:focus-visible{outline:2px solid #0679fd;outline-offset:2px}
/* a story's own page */
.story-page{display:grid;gap:14px}
.story-page .crumb{justify-self:start;margin:0;padding:7px 16px;border-radius:999px;font-size:13.5px;color:var(--muted)}
.story-page .crumb a{font-weight:600}
.story-page .story-img{width:160px;height:160px}
.story-actions{text-align:center;margin:2px 0}
.story-actions .btn{margin:0}
.story-nav{justify-self:center;padding:8px 18px;border-radius:999px;font-size:14px}
@media (max-width:600px){
  .story-img{width:78px;height:78px;border-radius:12px;margin:0 0 6px 12px}
  .story-page .story-img{width:110px;height:110px}
  .hero .speed{min-width:36px;height:24px;font-size:11.5px;padding:0 6px}
}
@media (prefers-reduced-motion:reduce){.stories li.now .num{animation:none}}

/* ---------- countdown to the next briefing ---------- */
.next-brief{display:inline-flex;align-items:center;gap:6px;margin:8px 0 0;padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:600;
  color:#0b4f86;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(225,243,255,.7));box-shadow:inset 0 1px 1px #fff,0 0 0 1px rgba(110,195,238,.55)}
.next-brief::before{content:"";width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d6fbc8,#3dbd52 70%);
  box-shadow:0 0 6px rgba(61,189,82,.7)}
.next-brief[hidden]{display:none}

/* ---------- topic bubbles (signup) ---------- */
.sub-form{flex-wrap:wrap}
.topics{flex-basis:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:12px 0 0;padding:0;border:0;min-width:0}
.topics legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;padding:7px 16px;border-radius:999px;font-size:13.5px;font-weight:600;color:#0b4f86;user-select:none;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.95) 0 14%,rgba(255,255,255,.55) 38%,rgba(190,232,255,.35) 70%,rgba(140,210,255,.3) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),inset 0 -4px 8px rgba(0,130,220,.14),0 0 0 1px rgba(110,195,238,.55),0 3px 8px rgba(20,100,170,.12);
  transition:transform .15s,background .2s,color .2s}
.chip:hover span{transform:translateY(-1px)}
.chip input:checked + span{color:#fff;text-shadow:0 1px 1px rgba(0,40,120,.55);
  background:linear-gradient(180deg,rgba(255,255,255,.65) 0%,rgba(255,255,255,.14) 48%,rgba(255,255,255,0) 52%),
             radial-gradient(circle at 50% 80%,#00d5f7 0%,#0679fd 55%,#0153eb 85%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -3px 5px rgba(0,40,140,.3),0 0 0 1px rgba(1,83,235,.55),0 3px 8px rgba(1,83,235,.28)}
.chip input:focus-visible + span{outline:2px solid #0679fd;outline-offset:2px}
@media (max-width:480px){.topics{gap:6px}.chip span{padding:6px 13px;font-size:13px}}

/* ---------- editions ---------- */
.ed-chip{display:inline-block;margin-right:6px;padding:2px 9px;border-radius:999px;font-size:10.5px;letter-spacing:.08em;vertical-align:1px;color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.25);box-shadow:inset 0 1px 1px rgba(255,255,255,.75),0 1px 3px rgba(0,0,0,.12)}
.ed-chip.morning{background:linear-gradient(180deg,#ffd979 0%,#ffb238 55%,#f59b1a 100%)}
.ed-chip.evening{background:linear-gradient(180deg,#a99cff 0%,#6c5ce7 55%,#3d2f9e 100%)}
section.today.evening .hero{background:linear-gradient(180deg,rgba(236,232,255,.82),rgba(214,226,255,.7))}

/* ---------- poppable sky bubbles ---------- */
.sky i{pointer-events:auto;cursor:pointer;transition:opacity .15s}
.sky i.popped{opacity:0;pointer-events:none;transition:opacity .05s}
.burst{position:fixed;z-index:0;width:0;height:0;pointer-events:none}
.burst::before{content:"";position:absolute;left:calc(var(--size) / -2);top:calc(var(--size) / -2);width:var(--size);height:var(--size);border-radius:50%;
  border:2px solid rgba(255,255,255,.95);box-shadow:0 0 12px rgba(160,225,255,.8),inset 0 0 10px rgba(255,255,255,.6);animation:burst-ring .2s ease-out forwards}
.burst i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,rgba(170,225,255,.9) 60%,rgba(120,200,255,.4));
  transform:rotate(var(--a)) translateX(0);animation:burst-drop .3s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes burst-ring{from{transform:scale(1);opacity:1}to{transform:scale(1.45);opacity:0}}
@keyframes burst-drop{from{transform:rotate(var(--a)) translateX(calc(var(--size) / 2));opacity:1}
  to{transform:rotate(var(--a)) translateX(calc(var(--size) / 2 + 34px)) scale(.4);opacity:0}}

/* ---------- desktop mode (click the background) ---------- */
#desktop{display:none}
html.desk-anim main > :not(.brand),html.desk-anim footer,html.desk-anim .tagline,html.desk-anim .scroll-cue{
  transition:transform .38s cubic-bezier(.4,0,.2,1),opacity .3s ease}
html.desk-anim main > :not(.brand):nth-child(2){transition-delay:.04s}
html.desk-anim main > :not(.brand):nth-child(3){transition-delay:.08s}
html.desk-anim footer{transition-delay:.1s}
html.desk-out main > :not(.brand),html.desk-out footer,html.desk-out .tagline,html.desk-out .scroll-cue{transform:translateY(48px) scale(.97);opacity:0;pointer-events:none}
html.desk main > :not(.brand),html.desk footer,html.desk .tagline,html.desk .scroll-cue{display:none!important}
/* the logo stays, smaller, like a wallpaper badge */
html.desk body:has(main) .brand{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;min-height:0!important;padding:0!important;z-index:1;animation:desk-logo .45s ease-out}
html.desk body:has(main) .logo img{width:220px}
@keyframes desk-logo{from{opacity:0;transform:translate(-50%,-50%) scale(1.2)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
/* XP-style icon column */
html.desk #desktop{display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;gap:18px 10px;position:fixed;z-index:3;
  top:92px;left:14px;bottom:14px;width:auto;animation:desk-icons .4s ease-out}
@keyframes desk-icons{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.dicon{display:flex;flex-direction:column;align-items:center;gap:5px;width:84px;padding:6px 4px;border:0;border-radius:6px;background:none;
  cursor:pointer;font:inherit;color:#fff;text-decoration:none;-webkit-tap-highlight-color:transparent}
.dicon:hover{text-decoration:none;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.dicon-img{width:52px;height:52px;display:block;filter:drop-shadow(0 4px 6px rgba(0,40,90,.35));transition:transform .15s}
.dicon-img svg{width:100%;height:100%;display:block}
.dicon:hover .dicon-img{transform:translateY(-2px) scale(1.04)}
.dicon:active .dicon-img{transform:scale(.96)}
.dicon-label{font-size:12.5px;line-height:1.25;text-align:center;font-weight:600;padding:1px 4px;border-radius:3px;
  text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 6px rgba(0,30,70,.55)}
.dicon.sel .dicon-label{background:#0a5fd0;text-shadow:none;box-shadow:0 0 0 1px rgba(255,255,255,.5)}   /* XP selection */
.dicon:focus-visible{outline:1px dotted #fff;outline-offset:1px}
/* "Email" opens just the signup panel, like a window on the desktop */
html.desk.desk-email #subscribe{display:block!important;position:fixed;z-index:4;left:50%;top:50%;width:min(560px,calc(100% - 32px));
  margin:0;transform:translate(-50%,-50%);animation:desk-window .25s ease-out}
html.desk.desk-email .brand{opacity:.35}
@keyframes desk-window{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (max-width:600px){
  html.desk body:has(main) .logo img{width:170px}
  html.desk #desktop{top:84px;left:8px;gap:12px 4px}
  .dicon{width:76px}.dicon-img{width:46px;height:46px}.dicon-label{font-size:12px}
}
@media (prefers-reduced-motion:reduce){html.desk-anim *{transition:none!important;animation:none!important}}
html.desk.desk-email main{z-index:5}   /* the signup "window" lives inside main; lift main's layer above the desktop icons */

/* desktop mode: hidden layers must not catch taps meant for the bubbles behind them */
html.desk main,html.desk .brand{pointer-events:none}
html.desk .logo{pointer-events:none;cursor:default}   /* just a wallpaper badge in desktop mode */
html.desk.desk-email #subscribe{pointer-events:auto}

/* minimize button on the intro subtitle (same as clicking the background) */
.tagline{position:relative}
.minimize{position:absolute;top:8px;right:8px;width:26px;height:22px;padding:0;border:0;border-radius:6px;cursor:pointer;display:grid;place-items:center;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.12) 50%,rgba(255,255,255,0) 52%),linear-gradient(180deg,#5fc8ff 0%,#0679fd 60%,#0153eb 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85),0 0 0 1px rgba(1,61,180,.55),0 2px 5px rgba(1,83,235,.3);transition:filter .15s,transform .15s}
.minimize svg{width:14px;height:14px;fill:#fff;filter:drop-shadow(0 1px 1px rgba(0,40,120,.6))}
.minimize:hover{filter:brightness(1.1)}
.minimize:active{transform:translateY(1px)}
.minimize:focus-visible{outline:2px solid #0679fd;outline-offset:2px}
html:not(.js) .minimize{display:none}
.tagline{padding-left:46px!important;padding-right:46px!important}   /* symmetric, so the text stays centred */
@media (max-width:600px){.minimize{top:6px;right:6px}.tagline{padding-left:36px!important;padding-right:36px!important}}

/* desktop icons that are links (Past briefings, Telegram) look exactly like the button ones */
a.dicon,a.dicon:link,a.dicon:visited,a.dicon:hover,a.dicon:focus,a.dicon:active{color:#fff;text-decoration:none;text-shadow:none}
a.dicon:hover .dicon-label{text-decoration:none}

/* ---------- desktop gadget: bubbles popped (Vista sidebar style) ---------- */
.gadget{display:none}
html.desk .gadget.has-pops{position:fixed;z-index:3;top:92px;right:16px;padding:6px 12px 6px 7px;border-radius:14px;
  display:flex;flex-direction:row;align-items:center;gap:7px;color:#0b4f86;
  background:linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.42) 48%,rgba(210,238,255,.38) 52%,rgba(230,246,255,.62) 100%);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
  box-shadow:inset 0 1px 1px #fff,inset 0 0 0 1px rgba(255,255,255,.55),0 0 0 1px rgba(90,170,230,.45),0 6px 16px rgba(0,60,130,.22);
  animation:desk-gadget .45s ease-out}
.gadget-bubble{flex:none;width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#fff 0 12%,rgba(255,255,255,.5) 26%,rgba(170,225,255,.25) 60%,rgba(120,200,255,.35) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),inset -3px -4px 8px rgba(160,120,255,.25),inset 3px 4px 8px rgba(0,213,247,.25),0 2px 5px rgba(0,80,160,.2)}
.gadget-num{font-size:20px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:#0153eb;
  text-shadow:0 1px 0 #fff,0 0 8px rgba(0,213,247,.35)}
.gadget.bump .gadget-num{animation:gadget-bump .3s ease-out}
.gadget.bump .gadget-bubble{animation:gadget-wobble .3s ease-out}
@keyframes gadget-bump{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes gadget-wobble{0%{transform:scale(1)}40%{transform:scale(1.18,.86)}70%{transform:scale(.94,1.06)}100%{transform:scale(1)}}
@media (max-width:600px){html.desk .gadget.has-pops{top:84px;right:8px;padding:5px 10px 5px 6px}.gadget-num{font-size:18px}}
@media (prefers-reduced-motion:reduce){.gadget.bump .gadget-num,.gadget.bump .gadget-bubble{animation:none}}
.mini .speed{min-width:40px;height:26px;font-size:12px}
@media (max-width:560px){.mini .speed{min-width:34px;height:24px;font-size:11px;padding:0 5px}.mini .ap-time{display:none}}

/* ---------- previous / next briefing (end of a briefing) ---------- */
.edition-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:16px 0 4px}
.edition-nav .prev{justify-self:start;grid-column:1}
.edition-nav .all{justify-self:center;grid-column:2}
.edition-nav .next{justify-self:end;grid-column:3}
.btn-glass{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;font-weight:600;font-size:12.5px;color:#0b4f86;white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(225,243,255,.72));
  box-shadow:inset 0 1px 1px #fff,0 0 0 1px rgba(110,195,238,.6),0 3px 10px rgba(20,100,170,.15);transition:transform .15s,box-shadow .15s}
.btn-glass:hover{text-decoration:none;color:#0153eb;text-shadow:none;transform:translateY(-1px);box-shadow:inset 0 1px 1px #fff,0 0 0 1px rgba(1,83,235,.5),0 5px 14px rgba(20,100,170,.2)}
.btn-glass[hidden]{display:none}
@media (max-width:600px){.edition-nav{grid-template-columns:1fr 1fr;gap:8px}.edition-nav .prev{grid-column:1;grid-row:1}.edition-nav .next{grid-column:2;grid-row:1}.edition-nav .all{grid-column:1 / -1;grid-row:2}.btn-glass{font-size:12px;padding:6px 11px}}

/* ---------- phones: inline player on two rows (scrubber gets the full width), cover 20% smaller ---------- */
@media (max-width:600px){
  .hero{grid-template-columns:77px 1fr}
  .hero .aplayer{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"orb seek seek" "orb time speed";
    column-gap:10px;row-gap:1px;align-items:center;padding:6px 12px 5px 6px;border-radius:22px}
  .hero .aplayer .orb{grid-area:orb}
  .hero .aplayer .seek-wrap{grid-area:seek;min-width:0}
  .hero .aplayer .seek{height:24px}
  .hero .aplayer .ap-time{grid-area:time;justify-self:start;text-align:left;font-size:11px}
  .hero .aplayer .speed{grid-area:speed;justify-self:end;min-width:34px;height:20px;font-size:10.5px;padding:0 6px}
}
@media (max-width:380px){.hero{grid-template-columns:66px 1fr}}

/* ---------- Telegram Mini App: keep clear of Telegram's header / notch (vars set by Telegram's SDK) ---------- */
html.tg{--tg-top:calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px))}
html.tg body{padding-top:var(--tg-top)}
html.tg .mini{top:calc(10px + var(--tg-top))}
html.tg.desk #desktop{top:calc(92px + var(--tg-top))}
html.tg.desk .gadget.has-pops{top:calc(92px + var(--tg-top))}
html.tg body:has(section.today) .brand{min-height:calc(100svh - 24px - var(--tg-top))}