/* That's My Show consumer surface — near-black, electric blue, white.
   The same tokens the back office uses, so the two never drift apart. */
:root{
  --ground:#05070D; --raised:#0B111C; --line:rgba(226,238,255,.09);
  --ink:#F4F8FF; --ink-mid:#AFBDD4; --ink-dim:#8593A9; --ink-faint:#616E82;
  --gold:#0A84FF; --gold-bright:#4FA8FF; --ember:#E0426B;
  --font:'Avenir Next',Avenir,Optima,'Trebuchet MS',system-ui,sans-serif;
}
*{box-sizing:border-box}
/* `clip` rather than `hidden`, and on BOTH elements: hidden on html alone makes
   body the scroll container instead of clamping, so the decorative bloom still
   widened the page. Neither element ever scrolls sideways now. */
html,body{overflow-x:clip}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.03em}
/* One gutter for the whole site. The home page used to set its own (1680/24)
   while everything else used 1400/52, so the shared header could not line up
   with both. */
.wrap{max-width:1680px;margin:0 auto;padding:0 32px}
@media(max-width:720px){.wrap{padding:0 16px}}

/* preview banner — this is not the public site */
.pv{background:rgba(10,132,255,.10);border-bottom:1px solid rgba(10,132,255,.28);
  padding:9px 0;font-size:12.5px;color:#8FC2FF}
.pv .wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pv b{color:var(--gold);letter-spacing:.1em;font-size:11px}
.pv a{color:var(--gold);text-decoration:underline}
.pv .sp{flex-grow:1}

/* ------------------------------------------------------------------ header
   ONE header for the whole public site.

   There were two: this one, and a second the home page drew for itself while
   hiding this one. They disagreed about everything — the look, the links, and
   whether a signed-in person could get out of the site at all. The home page's
   treatment won on looks, so that is the one that lives here now, and the home
   page renders <x-site-header> like every other page. */
.top{position:relative;z-index:30;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;
  height:90px;border-bottom:1px solid rgba(0,125,255,.55);box-shadow:0 8px 26px rgba(0,65,160,.1)}
.top .brand{display:block;flex-shrink:0}
.top .brandlogo,.top .brand img{height:54px;width:auto;display:block}
.top .brand .wordmark:not(img){font-size:21px}

.top .nav{display:flex;gap:30px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.top .nav::-webkit-scrollbar{display:none}
.top .nav a{position:relative;padding:34px 0 27px;color:#d9e0e8;font-size:14px;font-weight:750;
  letter-spacing:.02em;text-transform:uppercase}
.top .nav a:hover,.top .nav a.active{color:#fff}
.top .nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--gold),#02c8ff);box-shadow:0 0 14px rgba(0,149,255,.8)}

.top .tools{display:flex;align-items:center;gap:14px}
.top .tool{width:38px;height:38px;display:grid;place-items:center;color:#e6edf5;background:none;border:0;
  border-radius:10px}
.top .tool:hover{background:rgba(0,126,255,.16)}
.top .tool svg{width:21px;height:21px}
.top .signin{padding:9px 18px;border-radius:999px;border:1px solid rgba(0,126,255,.55);color:#fff;
  font-size:13px;font-weight:800;text-transform:uppercase;white-space:nowrap}
.top .signin:hover{background:rgba(0,126,255,.16)}
.top .av{width:38px;height:38px;border-radius:999px;background:linear-gradient(135deg,#0569d9,#198fff);
  color:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* account menu — a <details>, so signing out never depends on JS loading */
.acct{position:relative;flex-shrink:0}
.acct>summary{list-style:none;cursor:pointer;display:block}
.acct>summary::-webkit-details-marker{display:none}
.acct .menu{position:absolute;right:0;top:calc(100% + 10px);z-index:40;min-width:220px;
  background:var(--raised);border:1px solid rgba(0,126,255,.35);border-radius:14px;padding:6px;
  box-shadow:0 18px 40px rgba(0,0,0,.6)}
.acct .menu .who{padding:9px 12px 11px;border-bottom:1px solid var(--line);margin-bottom:6px;
  font-size:13.5px;line-height:1.35;overflow-wrap:anywhere}
.acct .menu .who small{display:block;color:var(--ink-faint);font-size:12px;margin-top:2px}
.acct .menu a,
.acct .menu button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:9px;
  font:inherit;font-size:13.5px;color:var(--ink);background:none;border:0;cursor:pointer;text-transform:none;
  letter-spacing:0}
.acct .menu a:hover,
.acct .menu button:hover{background:rgba(226,238,255,.08)}

/* a message the site owes the visitor after they did something */
.flash{margin:18px 0 0;padding:12px 16px;border-radius:12px;font-size:14px;
  background:rgba(10,132,255,.12);border:1px solid rgba(10,132,255,.32);color:#BFDCFF}

.bloom{position:absolute;left:42%;top:-280px;width:1140px;height:800px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(10,132,255,.20),rgba(0,74,178,.09) 42%,rgba(14,12,11,0) 70%)}

/* hero */
.hero{position:relative;border-radius:22px;overflow:hidden;min-height:420px;display:flex;align-items:flex-end;margin-top:6px}
.hero .art{position:absolute;inset:0}
.hero .glow{position:absolute;inset:0}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(94deg,rgba(14,12,11,.95) 8%,rgba(14,12,11,.62) 46%,rgba(14,12,11,.08) 80%)}
.hero .inner{position:relative;z-index:2;padding:56px;max-width:620px;display:flex;flex-direction:column;gap:16px}
.eyebrow{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--gold)}
.eyebrow .rule{width:16px;height:1px;background:var(--gold)}
.eyebrow.live{color:var(--ember)}
.eyebrow.live i{width:7px;height:7px;border-radius:999px;background:var(--ember);font-style:normal}
.hero h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.0;text-wrap:balance}
.meta{display:flex;align-items:center;gap:11px;font-size:13px;color:var(--ink-mid);flex-wrap:wrap}
.badge{border:1px solid #243247;border-radius:4px;padding:2px 6px;font-size:11px;color:#AEBBCE}
.dot{color:#3A4759}
.lede{font-size:15px;line-height:1.6;color:var(--ink-mid);max-width:440px;text-wrap:pretty}
.actions{display:flex;align-items:center;gap:11px;margin-top:6px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 26px;
  border-radius:999px;font-size:14px;font-weight:600;border:0;cursor:pointer;font-family:inherit}
.btn.play{background:#F4F8FF;color:var(--ground)}
.btn.ghost{background:rgba(226,238,255,.11);color:var(--ink)}
.btn.ghost:hover{background:rgba(226,238,255,.17)}
.btn.icon{width:48px;padding:0}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* rows */
.rows{display:flex;flex-direction:column;gap:26px;padding:34px 0 60px}
.row h2{font-size:17px;display:flex;align-items:center;gap:9px}
.row .chev{color:var(--ink-faint)}
.row .strip{display:flex;gap:16px;overflow-x:auto;padding:14px 2px 4px;scrollbar-width:thin}
.row .strip::-webkit-scrollbar{height:6px}
.row .strip::-webkit-scrollbar-thumb{background:rgba(226,238,255,.14);border-radius:999px}
.card{flex:0 0 auto;width:158px;display:block}
.card .poster{aspect-ratio:2/3;border-radius:13px;display:flex;align-items:flex-end;padding:14px;position:relative;overflow:hidden}
.card .poster .t{font-size:15px;font-weight:600;line-height:1.15;letter-spacing:-.01em;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.card.wide{width:232px}
.card.wide .poster{height:131px}
.card .cap{font-size:13.5px;color:#CBD6E8;margin-top:10px}
.card .sub{font-size:12px;color:var(--ink-faint);margin-top:3px}
.card:hover .poster{transform:translateY(-4px)}
.card .poster{transition:transform .15s ease}
/* how far into it somebody is — Continue Watching only */
.card .poster .bar{position:absolute;left:10px;right:10px;bottom:9px;height:3px;border-radius:999px;
  background:rgba(255,255,255,.28);overflow:hidden}
.card .poster .bar>span{display:block;height:100%;background:var(--gold);border-radius:999px}

/* detail */
.backdrop{position:relative;height:380px;margin:0 -52px;overflow:hidden}
@media(max-width:720px){.backdrop{margin:0 -20px;height:300px}}
.backdrop .art,.backdrop .glow{position:absolute;inset:0}
.backdrop .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,12,11,.5),rgba(14,12,11,.25) 40%,var(--ground))}
.detail{position:relative;z-index:3;margin-top:-190px;display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap}
.detail .poster{width:214px;height:321px;border-radius:16px;flex-shrink:0;box-shadow:0 18px 50px rgba(0,0,0,.6)}
.detail .info{flex:1 1 340px;display:flex;flex-direction:column;gap:18px;min-width:0}
.detail h1{font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.02}
.facts{display:flex;gap:44px;font-size:13px;line-height:1.7;flex-wrap:wrap}
.facts .k{color:var(--ink-faint);display:block}
.facts .v{color:#AEBBCE}
.seasons{display:flex;gap:6px;flex-wrap:wrap;margin:34px 0 0}
.seasons a{padding:6px 14px;border-radius:999px;font-size:13px;color:var(--ink-mid)}
.seasons a.on{background:rgba(226,238,255,.09);color:var(--ink)}
.eps{display:flex;flex-direction:column;margin-top:14px}
.ep{display:flex;gap:18px;align-items:center;padding:14px 12px;border-top:1px solid rgba(226,238,255,.07)}
.ep:hover{background:rgba(226,238,255,.04);border-radius:10px}
.ep .n{font-size:15px;color:var(--ink-faint);width:22px;flex-shrink:0}
.ep .still{width:152px;height:86px;border-radius:10px;flex-shrink:0}
.ep .body{flex-grow:1;min-width:0}
.ep .body .t{font-size:15px;font-weight:600}
.ep .body .s{font-size:13px;color:var(--ink-dim);line-height:1.5;margin-top:4px;text-wrap:pretty}
.ep .rt{font-size:12px;color:var(--ink-faint);margin-left:10px}
/* an episode you can actually press */
.ep.on{cursor:pointer;border-radius:12px;transition:background .15s ease}
.ep.on:hover{background:rgba(226,238,255,.05)}
.ep .still{position:relative}
.ep .still .go{position:absolute;inset:0;margin:auto;width:30px;height:30px;border-radius:999px;
  background:rgba(244,248,255,.92);display:flex;align-items:center;justify-content:center;opacity:0;
  transition:opacity .15s ease}
.ep.on:hover .still .go{opacity:1}
.soon{background:rgba(78,130,204,.12);color:#A8BBD4;border-radius:999px;padding:3px 10px;font-size:11px;white-space:nowrap}
.section-h{font-size:17px;margin:44px 0 0}
footer.site{border-top:1px solid var(--line);margin-top:60px;padding:34px 0 52px;font-size:13px;color:var(--ink-faint)}
footer.site .cols{display:flex;gap:56px;flex-wrap:wrap;align-items:flex-start;margin-bottom:26px}
footer.site .mark img{height:40px;width:auto;display:block;opacity:.85}
footer.site nav{display:flex;flex-direction:column;gap:9px}
footer.site nav a{color:var(--ink-dim)}
footer.site nav a:hover{color:var(--ink)}
footer.site .fine{font-size:12.5px}


/* ---------------------------------------------------------------- phones
   The consumer screens were laid out at desktop width. On a phone the header
   wants two rows rather than one squeezed one, the hero's scrim has to darken
   from the BOTTOM (there is no empty left third to put copy in), and the
   decorative bloom has to be reined in — at 1140px wide it was dragging the
   whole page sideways. */
@media(max-width:720px){
  .bloom{left:0;width:100%;height:460px;top:-170px}

  .top{height:auto;padding:12px 0 10px;grid-template-columns:1fr auto;gap:10px}
  .top .brandlogo,.top .brand img{height:34px}
  .top .brand .wordmark:not(img){font-size:16px}
  .top .nav{grid-column:1/-1;order:3;gap:22px}
  .top .nav a{padding:10px 0 9px;font-size:12px}
  .top .tools{grid-column:2;gap:6px}
  .top .tool{width:32px;height:32px}
  .acct .menu{top:calc(100% + 8px)}
  footer.site .cols{gap:28px;flex-direction:column}

  .pv{font-size:12px}

  .hero{min-height:400px;border-radius:16px}
  .hero .inner{padding:22px;gap:12px;max-width:none}
  .hero .scrim{background:linear-gradient(0deg,rgba(14,12,11,.97) 16%,rgba(14,12,11,.60) 58%,rgba(14,12,11,.12))}
  .hero h1{font-size:clamp(1.9rem,9vw,2.6rem)}
  .lede{max-width:none;font-size:14.5px}
  .actions .btn{flex:1 1 auto}
  .actions .btn.icon{flex:0 0 auto}

  .rows{gap:20px;padding:24px 0 44px}
  .card{width:138px}
  .card.wide{width:200px}

  /* The poster overlaps the backdrop by less, or it collides with the title. */
  .detail{margin-top:-110px;gap:18px}
  .detail .poster{width:132px;height:198px;border-radius:12px}
  .facts{gap:18px 26px}
  .section-h{margin:32px 0 0}
  .seasons{margin:26px 0 0}
  .ep{gap:12px;padding:12px 2px;align-items:flex-start}
  .ep .still{width:110px;height:62px}
  .ep .rt{display:none}  /* runtime is already in the facts above */

  footer.site{margin-top:40px;padding:22px 0 40px}
}

/* cast, and the reason behind a certificate */
.advisories{font-size:13px;color:var(--ink-dim);max-width:620px}
.advisories .k{color:var(--ink-mid)}
.people{display:flex;gap:20px;flex-wrap:wrap;margin:4px 0 2px}
.person{display:flex;align-items:center;gap:10px}
.person .face{width:46px;height:46px;border-radius:999px;flex-shrink:0;background:center/cover no-repeat rgba(226,238,255,.07);
  display:flex;align-items:center;justify-content:center;color:var(--ink-dim);font-size:14px}
.person .who{display:flex;flex-direction:column;line-height:1.3}
.person .nm{font-size:13.5px}
.person .ch{font-size:12px;color:var(--ink-faint)}
@media(max-width:720px){.people{gap:14px}.person .face{width:40px;height:40px}}

/* browse: grids, categories and search */
.browse{padding:26px 0 70px}
.browse-head{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.browse-head h1{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.browse-head .count{margin:0;font-size:13px;color:var(--ink-faint)}
.searchbar{display:flex;gap:10px;max-width:620px;margin-top:4px}
.searchbar input{flex:1;min-height:48px;padding:0 18px;border-radius:999px;background:var(--raised);
  border:1px solid var(--line-strong,rgba(226,238,255,.16));color:var(--ink);font:inherit;font-size:15px}
.searchbar input:focus{outline:none;border-color:var(--gold)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:22px 16px}
.grid .card{width:100%}
.nothing{padding:70px 0;text-align:center;color:var(--ink-dim)}
.nothing h2{font-size:19px;margin-bottom:8px;color:var(--ink)}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.cat{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px;border-radius:14px;
  background:var(--raised);border:1px solid var(--line);transition:.15s}
.cat:hover{border-color:var(--gold);transform:translateY(-2px)}
.cat .nm{font-size:15.5px}
.cat .ct{font-size:12.5px;color:var(--ink-faint)}
@media(max-width:720px){
  .browse{padding:18px 0 50px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:18px 12px}
  .cats{grid-template-columns:1fr 1fr;gap:10px}
  .cat{padding:16px}
  .searchbar input{min-height:44px}
}

/* the player */
.player-page{padding:18px 0 60px}
.player{position:relative;background:#000;border-radius:16px;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--line)}
.player video{width:100%;height:100%;display:block;background:#000}
.player-waiting{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:30px}
.player-waiting h2{font-size:20px}
.player-waiting p{margin:0;max-width:420px;color:var(--ink-dim);font-size:14px}
.player-meta{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-top:20px}
.player-meta h1{font-size:clamp(1.4rem,2.6vw,2rem)}
.player-meta .mut{margin:6px 0 0;color:var(--ink-dim);font-size:13.5px}
.player-meta .mut a{color:var(--gold)}
.player-meta .btn{margin-left:auto}
@media(max-width:720px){.player{border-radius:12px;margin:0 -20px;border-left:0;border-right:0}.player-meta .btn{margin-left:0;width:100%}}
.player iframe{width:100%;height:100%;border:0;display:block;background:#000}

/* ================================================================ the viewer's
   own screens: who's watching, my list, account, the written pages and the
   error pages. All on the consumer surface, so they use its tokens rather than
   the back office's stylesheet. */

/* --- who's watching --- */
.pick{padding:60px 0 90px;display:flex;flex-direction:column;align-items:center;gap:46px;text-align:center}
.pick-head h1{font-size:clamp(2rem,4.4vw,2.9rem)}
.pick-head p{margin:12px 0 0;color:var(--ink-dim);font-size:15px}
.pick .tiles{display:flex;gap:34px;flex-wrap:wrap;justify-content:center;align-items:flex-start}
.pick .pf{display:flex;flex-direction:column;align-items:center;gap:14px;width:168px}
.pick .tile{width:168px;height:168px;border-radius:22px;display:flex;align-items:center;justify-content:center;
  position:relative;border:0;padding:0;cursor:pointer;color:rgba(5,7,13,.82);overflow:hidden}
.pick .tile .ini{font-size:56px;font-weight:600;letter-spacing:-.03em;line-height:1}
.pick .tile .lock{position:absolute;right:12px;top:12px;width:28px;height:28px;border-radius:999px;
  background:rgba(5,7,13,.62);display:flex;align-items:center;justify-content:center}
.pick .tile .edit{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(5,7,13,.55);color:#F4F8FF;font-size:14px;font-weight:600;opacity:0;transition:opacity .15s ease}
.pick .tile:hover .edit{opacity:1}
.pick .tile.ghost{background:none;border:2px dashed rgba(226,238,255,.16)}
.pick .tile.ghost:hover{border-color:rgba(226,238,255,.34)}
.pick .pf:hover .tile{outline:2px solid var(--ink);outline-offset:4px}
.pick .nm{font-size:17px;color:var(--ink-mid)}
.pick .nm.on{color:var(--ink)}
.pick .nm.mut{color:var(--ink-faint)}
.pick .badge{font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--gold-bright);
  border:1px solid rgba(10,132,255,.35);border-radius:999px;padding:3px 10px}
.pick details.pin>summary{list-style:none;cursor:pointer}
.pick details.pin>summary::-webkit-details-marker{display:none}
.pick .pinbox{display:flex;gap:8px;margin-top:12px}
.pick .pinbox input{width:96px;text-align:center;letter-spacing:.4em}
.pick .pinbox button{padding:0 14px;border-radius:10px;border:1px solid rgba(226,238,255,.18);
  background:none;color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.pick-foot{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* --- panels: profile form, account --- */
.panel{max-width:640px;margin:34px auto 0;background:var(--raised);border:1px solid var(--line);
  border-radius:18px;padding:26px 28px}
.account{padding:26px 0 80px}
.account>h1{font-size:clamp(1.8rem,3.4vw,2.4rem);max-width:640px;margin:0 auto}
.panel h1{font-size:24px;margin-bottom:20px}
.panel h2{font-size:17px;margin-bottom:16px}
.panel form{display:flex;flex-direction:column;gap:16px}
.panel form.inline{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13px;color:var(--ink-mid)}
.field input,.field select{width:100%;padding:11px 13px;border-radius:11px;background:rgba(5,7,13,.6);
  border:1px solid var(--line);color:var(--ink);font:inherit;font-size:14.5px}
.field input:focus,.field select:focus{outline:none;border-color:rgba(10,132,255,.55)}
.field small{font-size:12.5px;line-height:1.5}
.err{color:#FF8FA8;font-size:12.5px}
.check{display:flex;gap:11px;align-items:flex-start;cursor:pointer}
.check input{width:auto;margin:3px 0 0}
.check span{display:flex;flex-direction:column;gap:3px;font-size:14px}
.check small{color:var(--ink-dim);font-size:12.5px;line-height:1.5}
.panel p.mut a{color:var(--gold-bright)}
.panel p.mut a:hover{text-decoration:underline}
.panel .acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px}
.panel .danger{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);
  flex-direction:row;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.panel .danger small{display:block;color:var(--ink-dim);font-size:12.5px;margin-top:3px}
.btn.bad{border-color:rgba(224,66,107,.4);color:#FF8FA8}
.btn.bad:hover{background:rgba(224,66,107,.12)}
.btn.sm{padding:7px 14px;font-size:12.5px;min-height:0}
.flash.bad{background:rgba(224,66,107,.12);border-color:rgba(224,66,107,.32);color:#FF8FA8}
.mini{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.mini .chip{display:flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--line);font-size:13.5px}
.mini .chip:hover{background:rgba(226,238,255,.06)}
.mini .chip .dot{width:16px;height:16px;border-radius:6px}
.mini .chip em{font-style:normal;font-size:10px;letter-spacing:.12em;color:var(--ink-faint)}
.sessions{margin-bottom:4px}
.sessions .rowline{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid rgba(226,238,255,.06)}
.sessions .rowline:last-child{border-bottom:0}
.sessions .rowline small{display:block;color:var(--ink-faint);font-size:12.5px;margin-top:2px}
.sessions .here{margin-left:8px;font-size:11px;letter-spacing:.1em;color:var(--gold-bright)}

/* --- the written pages --- */
.prose{max-width:720px;margin:0 auto;padding:34px 0 90px}
.prose h1{font-size:clamp(2rem,4vw,2.6rem);margin-bottom:16px}
.prose h2{font-size:19px;margin:34px 0 10px}
.prose p,.prose li{color:var(--ink-mid);font-size:15px;line-height:1.75}
.prose p{margin:0 0 12px}
.prose ul{padding-left:20px;margin:0 0 12px}
.prose li{margin-bottom:8px}
.prose a{color:var(--gold-bright);text-decoration:underline}
.prose .lede{font-size:17px;color:var(--ink);max-width:none}  /* the site-wide .lede is narrower */
.prose .mut{font-size:13px;color:var(--ink-faint)}

/* --- error pages --- */
.oops{padding:90px 0 120px;text-align:center;max-width:560px;margin:0 auto}
.oops .code{font-size:13px;font-weight:700;letter-spacing:.22em;color:var(--gold)}
.oops h1{margin:14px 0 12px;font-size:clamp(1.7rem,3.4vw,2.3rem)}
.oops p{color:var(--ink-dim);font-size:15px;line-height:1.7}
.oops .acts{display:flex;gap:10px;justify-content:center;margin-top:26px;flex-wrap:wrap}

@media(max-width:720px){
  .pick{padding:34px 0 60px;gap:32px}
  .pick .tiles{gap:20px}
  .pick .pf,.pick .tile{width:132px}
  .pick .tile{height:132px;border-radius:18px}
  .pick .tile .ini{font-size:44px}
  .panel{padding:20px 18px;border-radius:16px}
  .sessions .rowline{flex-direction:column;align-items:flex-start;gap:10px}
}