/* ══════════════════════════════════════════════════════════════════
   podcasts.css — the Podcasts world (Figma frame 2:4193).

   A broadcast-desk world: navy ground, panels stepping darker as they go
   deeper (#2f4560 featured → #1b2432 cards), Archivo Black shouting the
   wordmark while Young Serif handles episode titles. Orange is the signal
   colour — it means "audio" everywhere on this page.

   Scoped to `.pc`.
   ══════════════════════════════════════════════════════════════════ */

.pc{
  --pc-ease:cubic-bezier(.25,.1,.25,1);
  --pc-gutter:clamp(20px,5.5vw,96px);
  --pc-card:#1b2432;
  --pc-quote:#1c2633;

  background:#242e3d;
  color:var(--paper-100);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

.pc main{display:flex;flex-direction:column;gap:clamp(56px,7vw,88px);}
.pc-masthead, .pc-hero-wrap, .pc-rail-wrap, .pc-quote-wrap{
  padding-inline:var(--pc-gutter);
  max-width:1640px;margin-inline:auto;width:100%;
}

/* ── reveal ── */
[data-pc]{opacity:0;transform:translateY(36px);
  transition:opacity .8s var(--pc-ease), transform .8s var(--pc-ease);}
[data-pc].is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  [data-pc]{opacity:1;transform:none;transition:none;}
}

/* ── nav ── */
.pc-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(20px,2.4vw,32px) var(--pc-gutter);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.pc-code{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
  color:var(--paper-100);margin:0;}
.pc-code-accent{color:var(--accent);}
.pc-back{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--accent);}
.pc-back:hover{color:#fff;}

/* ── masthead ── */
.pc-masthead{
  padding-top:clamp(40px,6vw,72px);
  display:flex;flex-direction:column;gap:12px;
}
.pc-title{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(56px,13vw,190px);line-height:.84;letter-spacing:-.02em;
  text-transform:uppercase;margin:0;color:var(--paper-000);
}

/* ══════════════ HERO ══════════════
   The Apple-TV band: one trailer full-bleed behind its own title. Rounded and
   fully bordered from md up; on a phone it is an edge-to-edge band with
   hairlines top and bottom, which is what stops a 20px radius from looking
   like a stamp on a 390px screen. */
.pc-hero-wrap{padding-inline:0;}
.pc-hero{
  position:relative;
  width:100%;max-width:1500px;margin-inline:auto;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#000;
  border-block:1px solid rgba(255,255,255,.1);
}
@media (min-width:768px){
  .pc-hero{
    height:80vh;max-height:820px;aspect-ratio:auto;
    border:1px solid rgba(255,255,255,.1);
    border-radius:32px;
  }
}
.pc-hero-frame{position:absolute;inset:0;}
.pc-hero-frame video,
.pc-hero-frame img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  /* a hair of overscan hides the seam object-fit can leave on fractional DPRs */
  transform:scale(1.01);
}
@media (min-width:768px){
  .pc-hero-frame video,
  .pc-hero-frame img{object-fit:cover;}
}
.pc-hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.2) 45%, transparent);
}
.pc-hero-overlay{
  position:absolute;inset:auto 0 0 0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(16px,3vw,64px);
  pointer-events:none;                 /* the frame stays reachable */
}
.pc-hero-copy{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(8px,1.2vw,16px);
  width:100%;text-align:left;
  pointer-events:auto;                 /* …the controls take it back */
}
.pc-pill{
  display:inline-block;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  padding:4px 12px;
  font-family:var(--font-body);font-weight:600;
  font-size:clamp(9px,1vw,12px);letter-spacing:.14em;text-transform:uppercase;
  color:#fff;
}
@media (min-width:768px){ .pc-pill{padding:6px 16px;} }
.pc-hero-t{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(30px,5vw,68px);line-height:1;letter-spacing:-.01em;
  text-transform:uppercase;margin:0;color:var(--paper-000);
}
.pc-hero-s{
  font-family:var(--font-mono);font-size:clamp(10px,1.1vw,13px);
  letter-spacing:.1em;color:var(--accent);margin:0;
}
.pc-hero-btns{
  display:flex;flex-direction:row;gap:12px;
  margin-top:clamp(8px,1.6vw,24px);
  width:100%;
}
@media (min-width:640px){ .pc-hero-btns{width:auto;gap:16px;} }
.pc-btn{
  flex:1 1 0;                          /* split the row on a phone… */
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;
  padding:10px 20px;
  font-family:var(--font-body);font-weight:600;
  font-size:clamp(10px,1.1vw,14px);
  text-decoration:none;cursor:pointer;
  transition:transform .3s var(--pc-ease), background-color .3s var(--pc-ease),
             color .3s var(--pc-ease), border-color .3s var(--pc-ease);
}
@media (min-width:640px){ .pc-btn{flex:0 0 auto;padding:14px 32px;} }
.pc-btn-primary{
  background:#fff;color:#000;border:1px solid #fff;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.pc-btn-primary:hover{transform:scale(1.05);}
.pc-btn-ghost{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.pc-btn-ghost:hover{background:#fff;color:#000;border-color:#fff;}

@media (prefers-reduced-motion: reduce){
  .pc-btn{transition:none;}
  .pc-btn-primary:hover{transform:none;}
}

/* ══════════════ RAIL ══════════════
   Snap-scrolling row of every trailer. Full-bleed like the hero, so the last
   card runs off the right edge and reads as "there is more". */
.pc-rail-wrap{padding-inline:0;}
.pc-rail{
  display:flex;
  gap:16px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-inline:clamp(20px,5.5vw,48px);
  scroll-padding-inline:clamp(20px,5.5vw,48px);
  padding-bottom:8px;
  max-width:1600px;margin-inline:auto;
  scrollbar-width:none;
}
.pc-rail::-webkit-scrollbar{display:none;}
/* breathing room past the last card so it can snap clear of the edge */
.pc-rail-end{flex:0 0 8px;}
@media (min-width:768px){ .pc-rail-end{flex-basis:24px;} }

.pc-card{
  position:relative;
  flex:0 0 75vw;
  aspect-ratio:16/9;
  scroll-snap-align:center;
  border-radius:20px;
  overflow:hidden;
  cursor:pointer;
  background:var(--ink-800);
  border:0;padding:0;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  will-change:transform;
  transition:transform .3s var(--pc-ease), box-shadow .3s var(--pc-ease);
}
@media (min-width:640px){ .pc-card{flex-basis:50vw;scroll-snap-align:start;} }
@media (min-width:768px){ .pc-card{flex-basis:400px;} }
@media (min-width:1024px){ .pc-card{flex-basis:480px;} }

.pc-card img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
/* the dim lifts on hover and clears entirely on the one that is playing above */
.pc-card-tint{
  position:absolute;inset:0;
  background:rgba(0,0,0,.4);
  transition:background-color .5s var(--pc-ease);
}
.pc-card:hover .pc-card-tint{background:rgba(0,0,0,.2);}
.pc-card.is-active .pc-card-tint{background:transparent;}

.pc-card:hover{transform:scale(1.02);}
.pc-card.is-active{
  transform:scale(1.02);
  outline:2px solid #fff;
  outline-offset:2px;
}
.pc-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* play affordance — the active card is already running in the hero, so it
   would only be noise there */
.pc-card-play{
  position:absolute;inset:0;margin:auto;
  width:48px;height:48px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  opacity:0;
  transition:opacity .3s var(--pc-ease);
  pointer-events:none;
}
.pc-card:hover .pc-card-play{opacity:.9;}
.pc-card.is-active .pc-card-play{display:none;}
.pc-card-play svg{width:20px;height:20px;margin-left:2px;}

.pc-card-badge{
  position:absolute;top:12px;right:12px;
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:4px;
  padding:4px 8px;
  font-family:var(--font-mono);font-weight:700;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;
}
.pc-card-foot{
  position:absolute;inset:auto 0 0 0;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:12px 16px;
  background:linear-gradient(to top, rgba(0,0,0,.75), transparent);
  text-align:left;
}
.pc-card-t{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(15px,1.7vw,20px);line-height:1.05;
  text-transform:uppercase;margin:0;color:#fff;
  min-width:0;
}
.pc-card-d{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  color:rgba(229,229,229,.75);margin:0;white-space:nowrap;
}

@media (prefers-reduced-motion: reduce){
  .pc-card,.pc-card-tint,.pc-card-play{transition:none;}
  .pc-card:hover{transform:none;}
}

/* ── pull quote ── */
.pc-quote-box{
  background:var(--pc-quote);border-radius:24px;
  padding:clamp(28px,4vw,64px);
  display:flex;align-items:center;gap:clamp(28px,5vw,80px);
}
.pc-quote-text{
  flex:1;font-family:var(--font-display);font-weight:900;
  font-size:clamp(24px,3.4vw,44px);line-height:1.2;color:#fff;
}
.pc-quote-text p{margin:0;}
.pc-accent{color:var(--accent);}

/* A lens, not a record. The rings that used to be vinyl grooves are now the
   barrel, and the accent shape at the centre is the iris — same silhouette,
   and it no longer says "audio" beside a line about watching. */
.pc-lens{
  position:relative;flex:0 0 auto;
  width:clamp(120px,17vw,240px);aspect-ratio:1;border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.07) 0 1px, transparent 1px 12px),
    radial-gradient(circle at 42% 38%, #26313f 0%, #141b26 62%);
  display:grid;place-items:center;
}
.pc-lens::after{
  /* the glass catch-light, off-centre so it reads as a curved surface */
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.16), transparent 46%);
}
.pc-lens-iris{
  position:relative;
  width:34%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--accent) 0 42%, rgba(255,145,36,.25) 43%, transparent 70%);
  box-shadow:0 0 0 1px rgba(255,145,36,.35);
}

/* ── footer ── */
.pc-foot{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(40px,5vw,72px) var(--pc-gutter);
  margin-top:clamp(64px,8vw,112px);
  border-top:1px solid rgba(255,255,255,.1);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
}
.pc-foot-link{color:var(--accent);}
.pc-foot-link:hover{color:#fff;}
.pc-foot-mark{color:rgba(229,229,229,.5);margin:0;}

/* ── narrow ── */
@media (max-width: 860px){
  .pc-quote-box{flex-direction:column;align-items:flex-start;}
}
@media (max-width: 560px){
  .pc-foot{flex-direction:column;align-items:flex-start;gap:12px;}
}