/* The welcome page: the newest paper on the desk, the prologue's first exchange laid over it, then how an episode runs. */
.welcome { overflow-x:clip; }
.welcome h2 { font-weight:800; font-size:clamp(1.6rem, 3vw, 2.2rem); line-height:1.1; letter-spacing:-.025em; margin:0; text-wrap:balance; }
.welcome h3 { font-weight:700; font-size:1.1rem; line-height:1.3; letter-spacing:-.01em; margin:0; }
.welcome .actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0; }
.welcome .actions a.listen, .welcome .actions a.primary { padding:11px 22px; font-size:1rem; }
.welcome .actions a.secondary { padding:9px 18px; font-size:.95rem; }
.welcome .len { font:500 .82rem/1 var(--mono); opacity:.75; }

.hello { display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); gap:64px; align-items:center; padding:44px 0 84px; }
.hello .pitch { text-align:center; }
.hello .pitch .actions { justify-content:center; }
.hello .eyebrow { margin-bottom:20px; }
.hello h1 { font-weight:800; font-size:clamp(2.5rem, 5.4vw, 4.4rem); line-height:1.01; letter-spacing:-.04em; margin:0 0 24px; text-wrap:balance; }
.hello h1 .q { display:inline-block; margin-left:.04em; font:400 1.45em/0 var(--hand); color:var(--accent); transform:rotate(8deg) translateY(.04em); }
.hello .lede { font-size:1.18rem; line-height:1.55; margin:0 auto 30px; max-width:33em; }
.hello .free { margin:16px 0 0; color:var(--muted); font-size:.92rem; }

/* The desk: the paper as printed, its jargon highlighted, and a strip of the episode's transcript laid over it. */
.desk { position:relative; }
.desk .paper { position:relative; background:var(--card); box-shadow:var(--lift); border-radius:2px; padding:24px 28px 120px; transform:rotate(-1.6deg); font-family:var(--journal); }
.paper-meta { font-size:12px; color:var(--muted); }
.paper-meta .tier { font-family:var(--mono); margin-left:6px; }
.paper-title { font:600 1.25rem/1.25 var(--journal); margin:12px 0 6px; text-align:center; text-wrap:balance; }
.paper-authors { font-style:italic; font-size:.88rem; text-align:center; color:var(--muted); margin:0 0 16px; }
.paper-abstract { font-size:.88rem; line-height:1.5; text-align:justify; hyphens:auto; margin:0; max-height:16.5em; overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 70%, transparent); mask-image:linear-gradient(#000 70%, transparent); }
.paper-abstract mark { color:inherit; padding:0 .08em; background:linear-gradient(var(--mark), var(--mark)) no-repeat 0 70% / 0% 72%;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; animation:highlight .5s cubic-bezier(.5, 0, .3, 1) calc(.5s + var(--i, 0) * .3s) forwards; }
@keyframes highlight { to { background-size:100% 72%; } }

.slip { position:relative; z-index:1; margin:-104px -12px 0 13%; padding:14px 18px 16px; background:var(--card); border-radius:8px; box-shadow:var(--lift);
  transform:rotate(1deg); animation:slip-in .7s cubic-bezier(.2, .8, .2, 1) 1.5s both; }
@keyframes slip-in { from { opacity:0; transform:translateY(32px) rotate(3deg); } }
.slip figcaption { display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; padding-bottom:10px; border-bottom:1px solid var(--line); }
.slip .hear { display:inline-flex; align-items:center; gap:10px; padding:0; border:0; font-weight:700; font-size:.95rem; }
.slip .hear svg { width:34px; height:34px; padding:9px; border-radius:50%; background:var(--fg); fill:var(--card); flex:none; }
.slip .hear svg + svg, .slip.playing .hear svg:first-child { display:none; }
.slip.playing .hear svg + svg { display:block; }
.slip .len { color:var(--muted); }
.slip figcaption > .label { font:500 .8rem/1.6 var(--mono); color:var(--muted); }
.slip .opening { margin:12px 0 0; font-size:1rem; line-height:1.55; animation:line-in .4s ease-out 2.1s both; }
.desk .paper:last-child { padding-bottom:28px; }
.slip .lines { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:2px; }
.slip .lines li { display:grid; grid-template-columns:3.6em minmax(0, 1fr); gap:10px; padding:6px 8px; margin:0 -8px; border-radius:6px; font-size:.93rem; line-height:1.45;
  border-left:3px solid transparent; animation:line-in .4s ease-out calc(2.1s + var(--i, 0) * .45s) both; }
@keyframes line-in { from { opacity:0; transform:translateY(5px); } }
.slip .lines b { color:var(--sp, var(--fg)); font-weight:700; }
.slip .lines li.on { background:color-mix(in srgb, var(--sp, var(--accent)) 13%, var(--card)); border-left-color:var(--sp, var(--accent)); }
.slip .progress { position:absolute; left:18px; right:18px; bottom:8px; height:2px; border-radius:1px; background:var(--accent); transform-origin:left; transform:scaleX(var(--progress, 0)); }

.welcome .band { padding:64px 0; border-top:1px solid var(--line); }
.band-head { margin-bottom:30px; }
.band-head p { color:var(--muted); margin:10px 0 0; max-width:42em; }
.band-head p a { color:var(--fg); }
.welcome .band > .actions { margin-top:24px; }


.hosts { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.hosts > li { background:var(--card); border-radius:10px; padding:18px 20px 20px; box-shadow:var(--shadow); border-top:4px solid var(--sp, var(--line)); }
.hosts b { display:block; font-weight:800; font-size:1.6rem; letter-spacing:-.03em; line-height:1.1; }
.hosts ul { list-style:none; margin:14px 0 0; padding:0; font-size:.93rem; line-height:1.35; }
/* One field at a time, turning over; without the script, the first one stays. */
.hosts .roles { min-height:2.7em; }
.hosts .roles li:not(:first-child) { display:none; }
.hosts .roles.cycling li { display:none; }
.hosts .roles.cycling li.on { display:block; animation:role-in .5s ease-out; }
@keyframes role-in { from { opacity:0; transform:translateY(4px); } }

.deeper { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:56px; }
.deeper p { color:var(--muted); margin:12px 0 22px; max-width:34em; }
.deeper h3 { font-weight:800; font-size:clamp(1.3rem, 2.2vw, 1.6rem); letter-spacing:-.02em; }
.deeper .words { list-style:none; margin:-8px 0 24px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.deeper .words a { display:inline-block; padding:3px 10px; border-radius:3px; background:var(--mark); color:var(--fg); font:400 1rem/1.4 var(--journal); text-decoration:none; }
.deeper .words a:hover { text-decoration:underline; }

.teaser { margin:8px 0 0; padding:16px 20px; border:1.5px dashed var(--line); border-radius:10px; color:var(--muted); text-align:center; }
.teaser a { font-weight:700; margin-left:4px; }

.closing { padding:88px 0 8px; text-align:center; }
.closing .tag { font-weight:800; font-size:clamp(1.8rem, 4.2vw, 3rem); line-height:1.08; letter-spacing:-.035em; margin:0 auto; max-width:16em; text-wrap:balance; }
.closing .name { font:500 .85rem/1.4 var(--mono); color:var(--muted); margin:16px 0 28px; }
.closing .actions { justify-content:center; }

@media (max-width:900px) {
  .hello { grid-template-columns:1fr; gap:48px; padding-top:24px; }
  .desk { max-width:560px; margin-right:20px; }
  .hosts { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .deeper { grid-template-columns:1fr; gap:40px; }
}
@media (max-width:600px) {
  .hello { padding:16px 0 56px; }
  .hello .lede { font-size:1.08rem; }
  .desk { margin-right:8px; }
  .desk .paper { padding:18px 18px 96px; transform:rotate(-1.2deg); }
  .paper-abstract { max-height:12em; }
  .slip { margin:-84px -4px 0 6%; padding:12px 14px 14px; transform:rotate(.6deg); }
  @keyframes slip-in { from { opacity:0; transform:translateY(32px) rotate(2deg); } }
  .slip .lines li { grid-template-columns:1fr; gap:0; }
  .welcome .band { padding:48px 0; }
  .hosts { gap:10px; }
  .hosts > li { padding:14px 14px 16px; }
  .hosts b { font-size:1.35rem; }
  .hosts ul { font-size:.88rem; }
  .closing { padding-top:64px; }
}
@media (prefers-reduced-motion: reduce) {
  .paper-abstract mark { animation:none; background-size:100% 72%; }
  .slip, .slip .lines li, .slip .opening { animation:none; }
}