/* Oxford Talks — site-wide stylesheet, v24 (16 Sep 2026): v18 + the Podium AI stage (transparent bar, no footer,
   the light band around the mark that disperses on the first keystroke), the feed a moment opens into, and
   the phone pass for both, the small lockup on a sister-show card, and About in the phone sheet. Source: webflow/build/ot-site-24.css, generated by scripts/pod/build-podium.py. */
/* Oxford Talks — site-wide stylesheet, v18 (16 Sep 2026): v17 + the About drop-down in the nav (Podcast · Studio), the phone-menu sub-items, the About page doors, and the Podcast hub + show pages (film hero, guests rail, covers, black ground). Source: webflow/build/ot-site-18.css. */
/* Oxford Talks — site-wide stylesheet (was ot-phone), 12 Sep 2026: phone pass + events tabs + stacked event cards on phones + newsletter row; 15 Sep: careers accordion; 15 Sep (later): podcast episode film hero + tier labels. Loaded site-wide from Site settings → Custom code → Head,
   so it applies to every page without touching the page embeds. Every selector is prefixed with
   `html` so it outranks the same rule in ot-7.css, which each page loads later in the body.
   Mirrors prototype/v135.html. */
:root{--gx:0px}
@media(max-width:1384px){:root{--gx:var(--gut)}}
/* margins: the section rules in ot-7 zero the side padding; give it back below 1,384px */
html section.wrap{padding-left:var(--gx);padding-right:var(--gx)}
html #home .rooms,html #home .proof,html #home .partners,html #home .latest-sec{padding-left:var(--gx);padding-right:var(--gx)}
/* menu sheet scrolls on short phones */
html .sheet{overflow-y:auto;overscroll-behavior:contain}
/* home map: page scrolls over it at 1:1, the map takes the touch once zoomed */
html .wmap{touch-action:pan-y}
html .map-wrap.zoomed .wmap{touch-action:none}
@media(max-width:600px){
  html .hero:not(.cine){min-height:0!important;align-items:start;padding-top:40px;padding-bottom:64px}
  html .hero:not(.cine) .top{padding-top:0}
  html .hero:not(.cine) .top:not(.lockup){flex-wrap:wrap;gap:20px 24px}
  html .hero:not(.cine) .hero-mark{width:96px;height:96px}
  html .hero .top.lockup,html .lockup{gap:8px}
  html .lk-big{font-size:36px}
  html .hero:not(.cine) .h1{margin-top:28px;font-size:44px}
  html .hero .lead{margin-top:16px;font-size:18px}
  html .hero .cta{margin-top:28px;gap:10px}
  html .hero .cta .btn{padding:13px 20px}
  html .hero.cine{min-height:100svh;padding-bottom:30svh}
  html .hero.cine .h1{margin-top:0}
  html .hero.cine .cta{margin-top:24px}
  html .arc-bar-wrap{padding-top:0}
  html .map-zoom{display:none}
}

  /* events rail: Upcoming / Past tabs (Luma-fed) */
  .ev-tabs{display:flex;gap:22px}
  .ev-tab{font-size:var(--s11);letter-spacing:.22em;text-transform:uppercase;font-weight:400;color:var(--fg-60);padding:0 0 6px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
  .ev-tab:hover{color:var(--fg)}
  .ev-tab.on{color:var(--fg);border-bottom-color:var(--fg)}
  .lu-empty{font-size:15px;color:var(--fg-60);padding:8px 4px;list-style:none}

/* events rail on phones: the card stacks — cover on top, full-width text — instead of squeezing the words beside a 112px cover */
@media(max-width:600px){
  html .lu{flex:0 0 min(340px,84vw)}
  html .lu-card{grid-template-columns:1fr;gap:16px;padding:16px}
  html .lu-cover{order:-1;aspect-ratio:16/10}
  html .lu-meta{flex-wrap:wrap;gap:8px 10px}
  html .lu-flag{white-space:nowrap}
  html .lu-title{font-size:21px}
  /* the rail is swiped on touch: no arrows, and the link keeps to one line */
  html .ev-arrow{display:none}
  html .ev-nav .cap{white-space:nowrap;margin-left:0!important}
}

/* newsletter row above the footer's Next row, injected by ot-news.js from the site footer code */
html .fnw{display:grid;grid-template-columns:1fr minmax(320px,440px);gap:40px;align-items:center;border-top:1px solid var(--line);padding:44px 0 40px}
html .fnw-line{font-family:var(--sans);font-weight:200;font-size:clamp(26px,3vw,40px);line-height:1.08;letter-spacing:-.02em;margin-top:14px;max-width:16ch}
html .fnw .cap{margin-top:14px}
html .fnw-form{display:flex;align-items:center;gap:8px;border:1px solid var(--fg-30);border-radius:999px;padding:6px 6px 6px 22px;transition:border-color .2s}
html .fnw-form:focus-within{border-color:var(--fg)}
html .fnw-form input{flex:1;min-width:0;background:none;border:0;font:inherit;font-size:16px;color:var(--fg);outline:none;margin:0}
html .fnw-form input::placeholder{color:var(--fg-60)}
html .fnw-form .btn{padding:12px 20px;white-space:nowrap}
@media(max-width:860px){html .fnw{grid-template-columns:1fr;gap:24px}}
@media(max-width:600px){html .fnw{padding:36px 0 32px}html .fnw-form{padding:5px 5px 5px 18px}html .fnw-form .btn{padding:11px 16px}}

/* consent bar, minimal (12 Sep evening): one pill on desktop, two lines on phones; overrides the styles ot-consent.js injects (html prefix outranks them). Yes keeps white-on-black in every state: the hover rule in ot-consent turned it black-on-black on iPhone. */
html .otck{left:16px;right:auto;bottom:16px;max-width:calc(100vw - 32px);padding:8px 8px 8px 18px;border-radius:999px;display:flex;align-items:center;gap:16px;box-shadow:0 20px 40px -24px rgba(0,0,0,.4)}
html .otck-q{font-size:14px;line-height:1.35;max-width:none;white-space:nowrap}
html .otck-row{margin-top:0;gap:6px;flex-wrap:nowrap}
html .otck .btn{padding:8px 14px;font-size:13px}
html .otck .btn.fill,html .otck .btn.fill:hover,html .otck .btn.fill:active,html .otck .btn.fill span,html .otck .btn.fill:hover span{background:#000;border-color:#000;color:#F8F6F4;transform:none}
html .otck .btn.fill::before{display:none}
html .otck-link{margin-left:6px;margin-right:6px;font-size:12px;white-space:nowrap;border-bottom:1px solid rgba(0,0,0,.2)}
@media(max-width:640px){
  html .otck{left:10px;right:10px;bottom:10px;max-width:none;display:block;padding:12px 14px 12px;border-radius:20px}
  html .otck-q{white-space:normal;font-size:14px}
  html .otck-row{margin-top:10px;flex-wrap:nowrap;align-items:center}
  html .otck-link{margin-left:auto;margin-right:2px;width:auto;margin-top:0}
}

/* About team: four cards since Matt left (12 Sep 2026), so the grid is four across, two on tablets */
html .team{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){html .team{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){html .team{grid-template-columns:repeat(2,1fr)}html .tc.many{grid-column:span 1;aspect-ratio:3/4}}

/* team cards (Waleed, 12 Sep): no tilt, no lift, no moving highlight; corners 14px like the other tiles. The click-to-flip stays. */
html .tc{transform:rotateY(var(--flip,0deg))}
html .tc.live{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
html .tc .front::before{display:none}
html .tc .face,html .tc.many .sh{border-radius:14px}
html .tc.flip .front,html .tc:not(.flip) .back{pointer-events:none}

/* latest talk without a scrub strip (the daily job could not fetch the video): no frame swap, no scrub line */
html .talk.nosprite .talk-frame,html .talk.nosprite .talk-scrub{display:none}

/* more talks under the latest talk (12 Sep): the clips row's slot in the grid, filled from OT_LATEST.more */
html .latest{grid-template-areas:"talk card" "more card"}
@media(max-width:860px){html .latest{grid-template-areas:"talk" "card" "more"}}
/* more talks under the latest talk */
html .latest .more{grid-area:more;min-width:0}
html .more-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0}html .more-head .meta{margin:0}
html .more-head a{color:var(--fg-60);text-decoration:none;transition:color .2s}.more-head a:hover{color:var(--tangerine)}
html .more-list{list-style:none;margin:0;padding:0}
html .more-list li{border-top:1px solid var(--line)}
html .more-list a{display:grid;grid-template-columns:136px 1fr;gap:16px;align-items:center;padding:14px 0;color:inherit;text-decoration:none}
html .more-list img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block;filter:saturate(.9);background:#0E0D0B}
html .more-t{display:block;font-size:var(--s16);font-weight:400;line-height:1.3;letter-spacing:-.005em;transition:color .2s}
html .more-list a:hover .more-t{color:var(--tangerine)}
html .more-list .cap{display:block;margin-top:4px}
@media(max-width:600px){html .more-list a{grid-template-columns:112px 1fr;gap:12px}}
html .latest{align-items:stretch}
html .latest .orator-card{height:auto}
html .latest .oc-chapters-wrap{flex:1 1 auto;max-height:none;min-height:160px}
@media(max-width:860px){html .latest .oc-chapters-wrap{max-height:260px;flex:0 0 auto}}

/* curators (14 Sep): the four-column vendor table cannot get narrower than 373px, so on phones it pushed the page 18px wider; the table scrolls inside its own box instead */
@media(max-width:600px){html .lg-rail,html .lg-body{min-width:0}html .cu-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* careers (15 Sep 2026): the six roles as a <details> accordion, mirrors the prototype's .jobs block */
html .jobs{border-top:1px solid var(--line)}
html .job{border-bottom:1px solid var(--line)}
html .job summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;padding:22px 0;transition:padding-left .3s cubic-bezier(.2,.7,.2,1)}
html .job summary::-webkit-details-marker{display:none}
html .job summary:hover{padding-left:10px}
html .job summary .t{font-size:var(--s24);font-weight:300;letter-spacing:-.01em}
html .job summary .jw{white-space:nowrap}
html .job summary .jw::after{content:"+";display:inline-block;margin-left:22px;font-size:22px;font-weight:300;line-height:0;vertical-align:-3px;transition:transform .2s}
html .job[open] summary .jw::after{transform:rotate(45deg)}
html .jb{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:4px 0 34px}
html .jb>div:nth-child(3){grid-column:1/-1;margin-top:8px}
html .jb>div:nth-child(3) .cap{max-width:60ch}
html .jb .meta{display:block;margin-bottom:12px}
html .jb .cap{font-size:var(--s15,15px);line-height:1.55;max-width:44ch}
html .jb ul{list-style:none;padding:0;margin:0}
html .jb li{padding:6px 0;border-top:1px solid var(--line)}
html .jb li:first-child{border-top:0;padding-top:0}
html .jb .btn{margin-top:22px}
html .jb>div{opacity:0;transform:translateY(-6px);transition:opacity .35s,transform .35s}
html .job[open] .jb>div{opacity:1;transform:none}
@media(max-width:900px){
html .job summary{display:block;position:relative;padding-right:40px}
html .job summary .t{display:block;font-size:26px;line-height:1.15}
html .job summary .jw{display:block;margin-top:10px;white-space:normal}
html .job summary .jw::after{position:absolute;right:6px;top:calc(22px + 1.6em);margin:0}
html .jb{grid-template-columns:1fr;gap:22px}
html .jb>div:nth-child(3){grid-column:1;margin-top:0}
}

/* podcast episode pages (15 Sep 2026): the orator page's film hero on episodes that have a loop, the tier label row, and room in the word mask for round capitals (G, O, C) */
html #guest{--sph-h:100svh}
@media(max-width:760px){html #guest{--sph-h:82svh}}
html .sph-w{padding:.06em .22em .14em .08em;margin:0 0 -.14em -.08em}
html .gp-tier{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
html .gp-tier .btn{font-size:12px;padding:10px 18px;letter-spacing:.06em;text-decoration:none;border-color:var(--paper);color:var(--paper)}
html .gp-tier .btn:hover{background:var(--tangerine);border-color:var(--tangerine);color:var(--paper)}
html .gp-sph .gp-meta{margin-top:14px;opacity:0;transition:opacity .9s ease .7s}
html .sph.in .gp-meta{opacity:.62}
html .gp-sph .gp-tier{opacity:0;transform:translateY(12px);transition:opacity .9s ease .85s,transform .9s cubic-bezier(.2,.7,.2,1) .85s}
html .sph.in .gp-tier{opacity:1;transform:none}
html .gp-sph .sph-sub{margin-top:18px}
html .st-hours{margin-top:18px;font-size:13px;color:var(--fg-60)}
html .st-hours a{color:inherit;text-decoration:none;border-bottom:1px solid var(--fg-30);transition:color .2s,border-color .2s}
html .st-hours a:hover{color:var(--tangerine);border-color:var(--tangerine)}
html .sph.gp-sph{background:var(--bg)}
html .gp-sph .sph-media{background:#0d0c0b}
html .pb.gp-pb{display:grid;grid-template-columns:max-content auto;column-gap:14px;row-gap:18px;justify-items:start;align-items:center}
html .gp-pb .pb-lead{grid-column:1/-1}
html .gp-pb .pb-row{display:contents}
html .gp-pb .gp-soc>*{margin-top:10px}


/* ===== v18: nav drop-down, About doors, Podcast pages ===== */
  html .nav-grp{position:relative;display:flex;align-items:center;height:72px}
  html .nav-sub{position:absolute;top:calc(100% - 10px);left:50%;transform:translate(-50%,-6px) scale(.96);transform-origin:50% 0;display:flex;flex-direction:column;min-width:168px;padding:10px 8px;border-radius:18px;overflow:hidden;isolation:isolate;
    background:linear-gradient(180deg,color-mix(in srgb,var(--fg) 9%,transparent),color-mix(in srgb,var(--fg) 3%,transparent)),color-mix(in srgb,var(--bg) 62%,transparent);
    -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
    border:1px solid color-mix(in srgb,var(--fg) 14%,transparent);
    box-shadow:0 30px 70px -30px rgba(0,0,0,.45),0 2px 6px -2px rgba(0,0,0,.12),inset 0 1px 0 color-mix(in srgb,var(--fg) 22%,transparent);
    opacity:0;filter:blur(6px);pointer-events:none;transition:opacity .38s cubic-bezier(.2,.7,.2,1),transform .48s cubic-bezier(.2,.7,.2,1),filter .38s cubic-bezier(.2,.7,.2,1)}
  html .nav-sub::before{content:"";position:absolute;left:-24px;right:-24px;top:-22px;height:22px}
  html .nav-sub::after{content:"";position:absolute;inset:-40% -60%;z-index:-1;pointer-events:none;background:linear-gradient(115deg,transparent 38%,color-mix(in srgb,var(--fg) 16%,transparent) 50%,transparent 62%);transform:translateX(-70%);opacity:0}
  html .nav-grp:hover .nav-sub,html .nav-grp:focus-within .nav-sub{opacity:1;filter:blur(0);pointer-events:auto;transform:translate(-50%,6px) scale(1)}
  html .nav-grp:hover .nav-sub::after,html .nav-grp:focus-within .nav-sub::after{animation:navSheen 1.1s cubic-bezier(.3,.6,.2,1) .12s forwards}
  @keyframes navSheen{0%{transform:translateX(-70%);opacity:0}25%{opacity:1}100%{transform:translateX(70%);opacity:0}}
  html .nav-sub a:not(.btn){display:flex;align-items:center;justify-content:space-between;gap:22px;padding:11px 16px;border-radius:11px;font-size:14px;letter-spacing:.04em;opacity:0;transform:translateY(8px);transition:opacity .34s cubic-bezier(.2,.7,.2,1),transform .44s cubic-bezier(.2,.7,.2,1),background .25s,color .25s}
  html .nav-sub a:not(.btn)::before{display:none}
  html .nav-sub a:not(.btn) .arr{font-size:13px;opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .3s cubic-bezier(.2,.7,.2,1)}
  html .nav-sub a:not(.btn):hover{opacity:1;color:var(--tangerine);background:color-mix(in srgb,var(--fg) 6%,transparent)}
  html .nav-sub a:not(.btn):hover .arr{opacity:1;transform:none}
  html .nav-grp:hover .nav-sub a:not(.btn),html .nav-grp:focus-within .nav-sub a:not(.btn){opacity:.8;transform:none}
  html .nav-grp:hover .nav-sub a:not(.btn):hover{opacity:1}
  html .nav-grp:hover .nav-sub a:nth-child(1){transition-delay:.08s}.nav-grp:hover .nav-sub a:nth-child(2){transition-delay:.15s}
  html[data-page="circle"] .nav-sub a:not(.btn):hover{color:var(--paper)}
  html .sheet a.sub{font-size:22px;font-weight:200;padding:8px 0 8px 24px;opacity:.75}
  html .ab-how.two{grid-template-columns:repeat(2,1fr)}
  html .ab-door{display:block;color:inherit;text-decoration:none}
  html .ab-door .ab-verb{transition:color .3s}
  html .ab-door:hover .ab-verb{color:var(--accent)}
  html .ab-go{display:inline-block;margin-top:14px;font-size:var(--s13,13px);letter-spacing:.02em;color:var(--fg-60);transition:color .3s}
  html .ab-door:hover .ab-go{color:var(--accent)}
  html .ab-go .arr{display:inline-block;transition:transform .3s}
  html .ab-door:hover .ab-go .arr{transform:translateX(4px)}
@media(max-width:860px){
  html .ab-how.two{grid-template-columns:1fr}
}
  html[data-page="podcast"]{--bg:#000;--fg:#F2EDE9;--fg-60:var(--paper-70);--fg-30:var(--paper-30);--line:var(--paper-12);--accent:var(--tangerine)}
  html[data-page="podcast"] .cursor{mix-blend-mode:normal}
  html[data-page="podcast"] .btn.fill:hover{color:var(--paper)}
  html[data-page="podcast"] nav{background:rgba(0,0,0,.45);border-bottom-color:rgba(255,255,255,.08)}
  html[data-page="podcast"] nav.tight{background:rgba(0,0,0,.6)}
/* --- podcast page: film hero, guest rail, black ground --- */
  html[data-page="podcast"] .pod{background:#000;margin-top:0;padding-top:clamp(40px,5vw,72px)}
  html .pd-hero{position:relative;min-height:calc(100svh - 72px);display:flex;align-items:flex-end;overflow:hidden;background:#000;color:#F2EDE9}
  html .pd-film{position:absolute;inset:0;overflow:hidden}
  html .pd-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease;filter:saturate(.85) contrast(1.04);animation:sphKen 26s ease-in-out infinite alternate}
  html .pd-v.on{opacity:1}
  html .pd-film .sph-grade{background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.55) 34%,rgba(0,0,0,.18) 62%,rgba(0,0,0,.5) 100%),radial-gradient(120% 80% at 50% 60%,transparent 30%,rgba(0,0,0,.65) 100%)}
  html .pd-copy{position:relative;z-index:3;padding:clamp(120px,18vh,220px) var(--gx,var(--gut)) clamp(56px,8vh,104px);width:100%}
  html .pd-copy .h1{margin-top:16px}
  html .pd-copy .lead{max-width:44ch}
  html .pd-copy #podHeroPlats .pb{margin-top:26px}
  html .pd-now{position:absolute;right:var(--gut);bottom:clamp(56px,8vh,104px);z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right;color:#F2EDE9;text-decoration:none;max-width:34ch}
  html .pd-now-k{font:500 10px/1 "Eloquia Display",sans-serif;letter-spacing:.24em;text-transform:uppercase;opacity:.5;display:flex;align-items:center;gap:10px}
  html .pd-now-k::before{content:"";width:6px;height:6px;border-radius:50%;background:#EC652B;box-shadow:0 0 0 0 rgba(236,101,43,.6);animation:pdPulse 2.2s ease-out infinite}
@keyframes pdPulse{0%{box-shadow:0 0 0 0 rgba(236,101,43,.55)}100%{box-shadow:0 0 0 12px rgba(236,101,43,0)}}
  html .pd-now-t{font-size:15px;font-weight:300;line-height:1.3;transition:color .3s}
  html .pd-now-g{font-size:12px;opacity:.6;letter-spacing:.02em}
  html .pd-now:hover .pd-now-t{color:#EC652B}
  html .pd-faces{background:#000;color:#F2EDE9;padding:clamp(40px,5vw,72px) 0 0}
  html .pd-fam+.pod{padding-top:clamp(56px,7vw,100px)}
  html .pd-faces-hd{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:clamp(20px,3vw,32px);padding:0 var(--gx,var(--gut))}
  html .pd-faces-cap{opacity:.55;font-size:13px}
  html .pd-rail{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);cursor:grab;touch-action:pan-y}
  html .pd-track{display:flex;gap:14px;width:max-content;will-change:transform}
  html .pd-face{position:relative;flex:0 0 auto;width:clamp(120px,11vw,164px);aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#141310;text-decoration:none;color:#F2EDE9;transform:translateY(0);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  html .pd-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:grayscale(1) contrast(1.05) brightness(.82);transition:filter .6s ease,transform .8s cubic-bezier(.2,.7,.2,1);transform:scale(1.02)}
  html .pd-face::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent 55%);opacity:0;transition:opacity .4s}
  html .pd-face span{position:absolute;left:12px;right:12px;bottom:10px;font-size:12px;line-height:1.3;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
  html .pd-face b{display:block;font-weight:400}
  html .pd-face i{display:block;font-style:normal;opacity:.6;font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-top:3px}
  html .pd-face:hover{transform:translateY(-6px)}
  html .pd-face:hover img{filter:none;transform:scale(1.08)}
  html .pd-face:hover::after,html .pd-face:hover span{opacity:1;transform:none}
  html .pd-face.ph{display:grid;place-items:center;font:200 40px/1 "Eloquia Display",sans-serif;color:rgba(242,237,233,.35)}
@media(max-width:860px){
  html .pd-now{position:static;align-items:flex-start;text-align:left;margin:0 var(--gx,var(--gut)) 40px}
  html .pd-hero{flex-direction:column;justify-content:flex-end;align-items:stretch}
  html .pd-copy{padding-bottom:28px}
  html .pd-faces-hd{flex-direction:column;gap:6px}
}


  /* --- podcast family: four covers that play on hover --- */
  html .pd-fam{background:#000;color:#F2EDE9;padding:clamp(56px,7vw,100px) 0 clamp(16px,2vw,32px)}
  html .fam-a{margin-top:clamp(24px,3vw,40px)}
  html .nomark{display:grid;place-items:center;background:#0d0c0b}
  html .nomark .mark{width:34%;height:34%;color:rgba(242,237,233,.55)}
  html .cvs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  html .cv{display:flex;flex-direction:column;gap:12px;color:inherit;text-decoration:none}
  html .cv-im{display:block;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:#0d0c0b;position:relative}
  html .cv-im img,html .cv-im .nomark,html .cv-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
  html .cv-im img{filter:grayscale(1) contrast(1.04) brightness(.9);transform:scale(1.02);transition:filter .7s ease,transform 1s cubic-bezier(.2,.7,.2,1),opacity .6s ease}
  html .cv-v{opacity:0;transition:opacity .7s ease;filter:saturate(.9) contrast(1.03)}
  html .cv.playing .cv-v{opacity:1}
  html .cv:hover .cv-im img{filter:none;transform:scale(1.05)}
  html .cv-nm{font-size:15px;margin-top:4px;transition:color .3s}
  html .cv:hover .cv-nm{color:#EC652B}
  html .cv-ln{font-size:13px;opacity:.5;line-height:1.45}
@media(max-width:900px){
  html .cvs{grid-template-columns:1fr 1fr}
}
  html .sh-plats .pb{margin-top:22px}
  html .sh-ep{display:grid;grid-template-columns:148px 1fr auto;gap:22px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
  html .sh-ep:first-child{border-top:1px solid var(--line)}
  html .sh-ep .th{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#141310;position:relative}
  html .sh-ep .th img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
  html .sh-ep:hover .th img{transform:scale(1.05)}
  html .sh-ep .th.ph{display:grid;place-items:center;font:500 10px/1 "Eloquia Display",sans-serif;letter-spacing:.2em;text-transform:uppercase;opacity:.45}
  html .sh-ep .k,html .sh-ep .t,html .sh-ep .g{display:block}
  html .sh-ep .k{font:500 10px/1 "Eloquia Display",sans-serif;letter-spacing:.2em;text-transform:uppercase;opacity:.5;margin-bottom:8px}
  html .sh-ep .t{font:200 clamp(18px,1.5vw,22px)/1.3 "Eloquia Display",sans-serif;letter-spacing:-.005em;transition:color .3s}
  html .sh-ep:hover .t{color:#EC652B}
  html .sh-ep .g{font-size:13px;opacity:.6;margin-top:6px}
  html .sh-ep .m{font-size:12px;opacity:.55;text-align:right;white-space:nowrap}
  html .sh-ep .m .arr{display:block;margin-top:8px;font-size:14px;opacity:.7;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  html .sh-ep:hover .m .arr{transform:translateX(4px)}
@media(max-width:700px){
  html .sh-ep{grid-template-columns:96px 1fr}
  html .sh-ep .m{display:none}
}
  html .sh-kins{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
  html .sh-kin{display:flex;flex-direction:column;gap:12px;padding:22px;border:1px solid var(--line);border-radius:18px;color:inherit;text-decoration:none;transition:border-color .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
  html .sh-kin:hover{border-color:var(--fg);transform:translateY(-4px)}
  html .sh-kin .cap{opacity:.65;font-size:14px}
  /* the small lockup on a sister-show card. It had no rule at all, so the mark drew itself at the
     SVG's own size and swallowed the card. The mark's diameter is the em, so §4's ratios hold: the
     word is .39 d and the gap .071 d. */
  html .fam-lock{display:inline-flex;align-items:center;gap:.071em;color:inherit}
  html .fam-lock .mark{flex:0 0 auto;width:1em;height:1em}
  html .fam-lock>span{font:200 .39em/1 "Eloquia Display",sans-serif;letter-spacing:-.01em}
  html .fam-lock.sm{font-size:40px}
  html .sh-kin:hover .fam-lock>span{color:#EC652B}
@media(max-width:700px){
  html .fam-lock.sm{font-size:34px}
}
  html[data-page^="podcast-"]{--bg:#000;--fg:#F2EDE9;--fg-60:var(--paper-70);--fg-30:var(--paper-30);--line:var(--paper-12);--accent:var(--tangerine)}
  html[data-page^="podcast-"] .cursor{mix-blend-mode:normal}
  html[data-page^="podcast-"] .btn.fill:hover{color:var(--paper)}
  html[data-page^="podcast-"] .hero-mark{stroke-width:3.4}
  html[data-page^="podcast-"] nav{background:rgba(0,0,0,.45);border-bottom-color:rgba(255,255,255,.08)}
@media(max-width:1000px){
  html .fam-main{grid-template-columns:1fr;gap:16px}
  html .fam-lines{display:none}
  html .fam-row,html .sh-kins{grid-template-columns:1fr;margin-top:16px}
}
  html .nav-lbl{font:inherit;color:inherit;background:transparent;border:0;padding:0;cursor:default;font-size:inherit;letter-spacing:inherit}
  html .nav-grp:hover .nav-lbl,html .nav-grp:focus-within .nav-lbl{color:var(--accent)}
  /* About in the phone sheet: the toggle is one of the sheet's own lines, so it takes the sheet's
     type exactly (40/300), and its four pages are a list under it, not a run of inline links. */
  html .sh-tog{display:flex;align-items:center;justify-content:space-between;width:100%;font:inherit;font-size:40px;font-weight:300;letter-spacing:-.02em;color:inherit;background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;cursor:pointer;text-align:left}
  html .sh-chev{font-style:normal;font-size:28px;line-height:1;opacity:.45;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  html .sh-tog[aria-expanded="true"] .sh-chev{transform:rotate(90deg)}
  html .sh-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
  html .sh-sub>*{overflow:hidden}
  html .sh-tog[aria-expanded="true"]+.sh-sub{grid-template-rows:1fr}
  html .sheet a.sub{font-size:22px;font-weight:200;padding:8px 0 8px 24px;opacity:.75}
  html .sheet .sh-sub a.sub{display:block;border-bottom:0}
  html .sheet .sh-sub a.sub:last-child{margin-bottom:10px}



/* ===== v24: Podium AI ===== */
  /* ===== Podium AI: one stage, light instead of layout (16 Sep 2026, Waleed: "I want people to be transported") ===== */
  html[data-page="podium-ai"] nav,html[data-page="podium-ai"] nav.tight{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0;box-shadow:none}
  html[data-page="podium-ai"] nav .links,html[data-page="podium-ai"] .burger{display:none}
  html[data-page="podium-ai"] nav .brand span{opacity:.92;font-weight:400;letter-spacing:.01em}
  html[data-page="podium-ai"] nav .brand .mark{opacity:.95}
  html[data-page="podium-ai"] footer{display:none}

  html .pai{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;background:#000;color:#F2EDE9;overflow:hidden;padding:clamp(88px,11vh,150px) 0 0;margin-top:0}
  html .pai .pod-wave{opacity:.22}
  /* at rest: one band of light behind the mark. On the first keystroke it disperses into the drift. */
  html .pai-halo{position:absolute;left:50%;top:clamp(20px,4vh,54px);width:min(1240px,96vw);height:clamp(300px,40vh,460px);transform:translate(-50%,-50%) scale(1);z-index:-1;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(236,101,43,.10) 14%,rgba(236,101,43,.44) 38%,rgba(255,168,120,.50) 50%,rgba(0,86,95,.40) 66%,rgba(0,56,62,.14) 86%,transparent),
               radial-gradient(ellipse 38% 70% at 50% 50%,rgba(255,190,150,.38),transparent 72%);
    -webkit-mask:linear-gradient(to bottom,transparent,#000 26%,#000 62%,transparent);mask:linear-gradient(to bottom,transparent,#000 26%,#000 62%,transparent);
    filter:blur(58px);mix-blend-mode:screen;opacity:0;
    animation:paiHaloIn 1.8s cubic-bezier(.2,.7,.2,1) .1s forwards,paiHue 48s linear infinite;
    transition:opacity 1.2s cubic-bezier(.2,.7,.2,1),transform 1.5s cubic-bezier(.2,.7,.2,1),filter 1.2s}
  @keyframes paiHaloIn{from{opacity:0;transform:translate(-50%,-50%) scale(.72)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
  html .pai.asking .pai-halo{animation:paiHue 48s linear infinite;opacity:0;transform:translate(-50%,-62%) scale(1.7);filter:blur(90px)}
  /* the halo is anchored to the mark, not the stage's middle */
  html .pai-stage{isolation:isolate}
  html .pai-mark{position:relative;z-index:1}
  html .pai-aura{position:absolute;inset:-20% -10%;pointer-events:none;z-index:0;filter:blur(34px);mix-blend-mode:screen;opacity:.18;transition:opacity 1.3s cubic-bezier(.2,.7,.2,1);animation:paiHue 48s linear infinite}
  html .pai.asking .pai-aura{opacity:1}
  @keyframes paiHue{0%{filter:blur(34px) hue-rotate(0deg)}25%{filter:blur(34px) hue-rotate(-26deg)}50%{filter:blur(34px) hue-rotate(150deg)}75%{filter:blur(34px) hue-rotate(255deg)}100%{filter:blur(34px) hue-rotate(360deg)}}
  html .pai-aura i{position:absolute;display:block;border-radius:50%;opacity:0;animation:paiBloom 1600ms cubic-bezier(.2,.7,.2,1) forwards}
  html .pai-aura .a1{width:52vw;height:52vw;left:18%;top:-2%;background:radial-gradient(circle,rgba(236,101,43,.30),transparent 66%);animation:paiBloom 1.6s cubic-bezier(.2,.7,.2,1) .15s forwards,paiDrift1 26s ease-in-out 1.8s infinite alternate}
  html .pai-aura .a2{width:38vw;height:38vw;right:8%;top:24%;background:radial-gradient(circle,rgba(0,56,62,.55),transparent 68%);animation:paiBloom 1.6s cubic-bezier(.2,.7,.2,1) .35s forwards,paiDrift2 34s ease-in-out 2s infinite alternate}
  html .pai-aura .a3{width:60vw;height:60vw;left:6%;bottom:-24%;background:radial-gradient(circle,rgba(242,237,233,.07),transparent 66%);animation:paiBloom 1.6s cubic-bezier(.2,.7,.2,1) .5s forwards,paiDrift1 44s ease-in-out 2.2s infinite alternate-reverse}
  @keyframes paiBloom{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
  @keyframes paiDrift1{to{transform:translate3d(6vw,-4vh,0) scale(1.1)}}
  @keyframes paiDrift2{to{transform:translate3d(-7vw,5vh,0) scale(1.14)}}
  html .pai-grain{position:absolute;inset:-50%;opacity:.07;pointer-events:none;z-index:1;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.5'/></svg>")}

  html .pai-stage{position:relative;z-index:3;width:min(760px,calc(100% - 2*var(--gut)));margin:0 auto;text-align:center;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
  html .pai.asking .pai-stage{transform:translateY(-5vh)}
  html .pai-mark{width:clamp(54px,5.5vw,72px);height:clamp(54px,5.5vw,72px);stroke-width:3.2;opacity:0;animation:paiIn .9s cubic-bezier(.2,.7,.2,1) .2s forwards}
  html .pai-h{font:200 clamp(30px,4.2vw,52px)/1.05 "Eloquia Display",sans-serif;letter-spacing:-.02em;margin-top:20px;opacity:0;animation:paiIn .9s cubic-bezier(.2,.7,.2,1) .35s forwards}
  html .pai-sub{font-size:clamp(14px,1.5vw,17px);color:var(--paper-70);margin-top:12px;opacity:0;animation:paiIn .9s cubic-bezier(.2,.7,.2,1) .5s forwards}
  @keyframes paiIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes paiInHalf{from{opacity:0;transform:translateY(14px)}to{opacity:.72;transform:none}}

  html .pai-field{position:relative;display:flex;align-items:center;gap:14px;margin-top:clamp(26px,3.2vw,40px);padding:6px 22px;border:1px solid rgba(242,237,233,.22);border-radius:999px;background:rgba(242,237,233,.03);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:border-color .45s,box-shadow .45s,background .45s;animation:paiIn .9s cubic-bezier(.2,.7,.2,1) .65s forwards}
  html .pai-field:focus-within{border-color:rgba(236,101,43,.5);background:rgba(242,237,233,.05);box-shadow:0 0 0 1px rgba(236,101,43,.12),0 18px 60px -20px rgba(236,101,43,.35)}
  html .pai-mag{font-size:19px;opacity:.4;transition:opacity .3s,color .3s}
  html .pai-field:focus-within .pai-mag{opacity:1;color:var(--tangerine)}
  html .pai .pod-search{flex:1;background:transparent;border:0;color:inherit;font-family:"Eloquia Display",sans-serif;font-weight:200;font-size:clamp(19px,2.3vw,27px);letter-spacing:-.01em;padding:10px 0;text-align:left}
  html .pai .pod-search::placeholder{color:rgba(242,237,233,.42)}
  html .pai .pod-search:focus{outline:none}
  html .pai .pod-search::-webkit-search-cancel-button{-webkit-appearance:none}
  html .pai .pod-count{font:500 10px/1 "Eloquia Display",sans-serif;letter-spacing:.2em;text-transform:uppercase;opacity:0;transition:opacity .35s;white-space:nowrap;color:var(--tangerine)}
  html .pai .pod-count.on{opacity:.85}
  html .pai-rule{position:absolute;left:14%;right:14%;bottom:-1px;height:1px;overflow:hidden;pointer-events:none}
  html .pai-rule i{position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--tangerine),transparent);transform:translateX(-101%);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  html .pai-field:focus-within .pai-rule i{transform:translateX(0)}

  html .pai-asks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px;opacity:0;transition:opacity .45s,height .45s,margin .45s;animation:paiIn .9s cubic-bezier(.2,.7,.2,1) .8s forwards}
  html .pai-ask{min-width:108px;text-align:center;font-size:13px;font-weight:200;font-family:"Eloquia Display",sans-serif;color:rgba(242,237,233,.78);border:1px solid rgba(242,237,233,.22);border-radius:999px;padding:9px 16px;background:transparent;cursor:pointer;transition:border-color .3s,color .3s,transform .3s}
  html .pai-ask:hover{color:#F2EDE9;border-color:rgba(236,101,43,.55);transform:translateY(-1px)}
  html .pai.asking .pai-asks{opacity:0;pointer-events:none;height:0;margin-top:0;overflow:hidden}

  html .pai-chips{justify-content:center;margin-top:16px;gap:6px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1),margin .5s}
  html .pai.live .pai-chips{opacity:1;transform:none;pointer-events:auto}
  html .pai:not(.live) .pai-chips{margin-top:0;height:0;overflow:hidden}
  html .pai-chips .pod-chip{font-size:11.5px;padding:6px 12px;opacity:.75;border-color:rgba(242,237,233,.14)}
  html .pai-chips .pod-chip:hover,html .pai-chips .pod-chip.on{opacity:1}
  html .pai-results{position:relative;z-index:3;width:min(820px,calc(100% - 2*var(--gut)));margin:clamp(26px,3.5vw,42px) auto 0;max-height:44svh;overflow-y:auto;text-align:left}
  html .pai-stream{position:relative;z-index:2;margin-top:auto;padding:clamp(26px,4vw,46px) 0 clamp(18px,3vw,32px);opacity:.5;transition:opacity .6s}
  html .pai.asking .pai-stream{opacity:0;pointer-events:none}


  /* ===== the feed: click a moment and stay (16 Sep 2026, Waleed: "We want people to stay on the website") ===== */
  html .pf{position:fixed;inset:0;z-index:120;background:#000;opacity:0;visibility:hidden;transition:opacity .5s cubic-bezier(.2,.7,.2,1),visibility .5s}
  html .pf.on{opacity:1;visibility:visible}
  html .pf-rail{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  html .pf-rail::-webkit-scrollbar{display:none}
  html .pf-card{height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:grid;place-items:center;position:relative;padding:clamp(56px,8vh,96px) var(--gut) clamp(150px,20vh,210px)}
  html .pf-stage{position:relative;width:min(100%,calc((100svh - 330px)*1.7778));aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#0b0a09;box-shadow:0 40px 120px -40px rgba(0,0,0,.9)}
  html .pf-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  html .pf-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
  html .pf-play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.25);cursor:pointer;border:0}
  html .pf-play span{width:66px;height:66px;border-radius:50%;border:1px solid rgba(242,237,233,.55);display:grid;place-items:center;color:#F2EDE9;font-size:19px;padding-left:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(242,237,233,.06);transition:transform .35s,border-color .35s}
  html .pf-play:hover span{transform:scale(1.06);border-color:var(--tangerine)}
  html .pf-meta{position:absolute;left:0;right:0;bottom:clamp(26px,5vh,54px);width:min(820px,calc(100% - 2*var(--gut)));margin:0 auto;color:#F2EDE9;text-align:left}
  html .pf-t{font:500 10px/1 "Eloquia Display",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--tangerine)}
  html .pf-x{font:200 clamp(20px,2.6vw,30px)/1.25 "Eloquia Display",sans-serif;letter-spacing:-.01em;margin-top:12px;max-width:26ch}
  html .pf-w{font-size:13px;color:var(--paper-70);margin-top:10px}
  html .pf-acts{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
  html .pf-act{font:200 13px/1 "Eloquia Display",sans-serif;color:rgba(242,237,233,.8);border:1px solid rgba(242,237,233,.22);border-radius:999px;padding:9px 16px;background:transparent;cursor:pointer;text-decoration:none;transition:border-color .3s,color .3s}
  html .pf-act:hover{border-color:rgba(236,101,43,.6);color:#F2EDE9}
  html .pf-close{position:fixed;top:clamp(18px,3vh,30px);right:clamp(18px,3vw,34px);z-index:3;font:500 11.5px/1 "Eloquia Display",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#F2EDE9;opacity:.8;background:transparent;border:0;cursor:pointer}
  html .pf-close:hover{opacity:1;color:var(--tangerine)}
  html .pf-pos{position:fixed;top:clamp(18px,3vh,30px);left:clamp(18px,3vw,34px);z-index:3;font:500 11.5px/1 "Eloquia Display",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-30)}
  html .pf-hint{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:3;font:500 10px/1 "Eloquia Display",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-30);opacity:.7;transition:opacity .4s}
  html .pf.scrolled .pf-hint{opacity:0}
  @media(max-width:860px){
  html .pf-stage{width:100%;border-radius:14px}
  }
  /* --- the phone. The stage is a column, a result is a row you can read, and the feed is the
         whole screen: the film edge to edge, the words under it, nothing overlapping. --- */
  @media(max-width:700px){
    /* on a phone the light reads as a band that bleeds past both edges, not a cloud over the black */
  html .pai-halo{width:128vw;height:clamp(190px,24vh,280px);filter:blur(44px)}
  html .pai-aura{opacity:.12}
  html .pai-field{gap:10px;padding:4px 16px}
  html .pai .pod-search{min-width:0;font-size:18px}
  html .pai .pod-count{font-size:9px;letter-spacing:.14em}
  html .pai-ask{min-width:0;padding:8px 15px;font-size:12.5px}
  html .pai-asks{gap:8px}
    /* the filters read as one quiet line you push along, not a wall of pills with numbers on it */
  html .pai .pai-chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;width:100vw;max-width:none;margin-left:calc(-1*var(--gut));margin-right:calc(-1*var(--gut));padding:2px var(--gut)}
  html .pai .pai-chips::-webkit-scrollbar{display:none}
  html .pai-chips .pod-chip{flex:0 0 auto;padding:7px 14px;letter-spacing:.02em}
  html .pai-chips .pod-chip i{display:none}
  html .pai-chips .pod-chip.on{background:transparent;border-color:rgba(236,101,43,.55);color:var(--tangerine);opacity:1}
  html .pai-results{max-height:40svh}
  html .pai-results .pod-hit{grid-template-columns:1fr;gap:5px;padding:14px 2px}
  html .pai-results .pod-hit:hover{padding-left:2px}
  html .pai-results .pod-hit .hx{font-size:15px;line-height:1.45}
  html .pai-results .pod-hit .hm{text-align:left;font-size:11.5px;opacity:.4}
  html .pf-card{display:flex;flex-direction:column;justify-content:center;gap:20px;padding:58px 0 84px}
  html .pf-stage{width:100%;border-radius:0;box-shadow:none;flex:0 0 auto}
  html .pf-meta{position:static;width:calc(100% - 2*var(--gut));margin:0 auto;bottom:auto}
  html .pf-x{font-size:20px;line-height:1.3;margin-top:10px;max-width:none}
  html .pf-acts{gap:8px;margin-top:16px}
  html .pf-act{font-size:12.5px;padding:9px 14px}
  html .pf-close,html .pf-pos{top:16px}
  html .pf-hint{white-space:nowrap;font-size:9px;letter-spacing:.16em;bottom:calc(14px + env(safe-area-inset-bottom))}
  }

  html[data-page="podium-ai"]{--bg:#000;--fg:#F2EDE9;--fg-60:var(--paper-70);--fg-30:var(--paper-30);--line:var(--paper-12);--accent:var(--tangerine)}
  html[data-page="podium-ai"] body{background:#000;color:#F2EDE9}
  html[data-page="podium-ai"] .cursor{mix-blend-mode:normal}