/* Possum Hour — site styles
   Colours derived from Jon's own assets. Accent #CBB497 sampled from
   Near Death/Logo/Near Death Logo Design/Elements/manila paper.png
   NO invented imagery anywhere in this file. */

:root{
  --bg:#0B0B0C;
  --surface:#141416;
  --surface-2:#1C1C20;
  --line:#2A2A30;
  --text:#ECECEE;
  --muted:#8C8C94;
  --manila:#CBB497;      /* sampled from manila paper.png */
  --manila-dim:#8E7C68;
  --max:1240px;
  --r-sm:8px;    /* buttons, inputs, badges */
  --r-md:12px;   /* cards, thumbnails, tiles */
  --r-lg:16px;   /* modal */
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- placeholder: the hard rule ----------
   Any asset Jon has not supplied renders as this. It is deliberately
   visible and ugly. It is never filled with drawn art, gradients,
   stock imagery or generated pictures. */
.ph{
  position:relative;background:var(--surface-2);
  border:1px dashed #3A3A42;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  color:#5E5E68;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;text-align:center;
  padding:12px;min-height:60px;
}
.ph--16x9{aspect-ratio:16/9}
.ph--hero{aspect-ratio:21/9;min-height:340px}
.ph--sq{aspect-ratio:1}

/* ---------- umbrella chrome ---------- */
.bar{
  position:sticky;top:0;z-index:50;
  background:rgba(11,11,12,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.bar__in{display:flex;align-items:center;gap:28px;height:60px}
.bar__logo{height:22px;width:auto;display:block;opacity:.92;transition:opacity .15s}
.bar__logo:hover{opacity:1}
.bar__logo-ph{height:24px;min-height:24px;width:150px;font-size:9px}
.bar__nav{margin-left:auto;display:flex;gap:24px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.bar__nav a{color:var(--muted);text-decoration:none;transition:color .15s}
.bar__nav a:hover,.bar__nav a[aria-current]{color:var(--text)}

/* ---------- hero ---------- */
.hero{position:relative;border-bottom:1px solid var(--line)}
.hero__media{position:relative}
.hero__media--logo{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(28px,5vw,64px) 24px;background:var(--bg);
}
.hero__img--contain{
  width:auto;height:auto;
  max-width:min(900px,100%);max-height:min(52vh,420px);
  object-fit:contain;display:block;
}
.hero__img{
  width:100%;height:clamp(360px,58vh,620px);
  object-fit:cover;object-position:center 30%;display:block;
}
/* The gradient blur and the darkening are baked into nd-hero.jpg with a real
   Gaussian. Nothing is composited here - CSS blur on a clipped element leaves
   a halo, which is what went wrong before. This scrim only blends the very
   bottom edge into the page background. */
.hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 70%,var(--bg) 100%);
}
.hero__body{position:relative;margin-top:-110px;padding-bottom:44px}
.hero__body--flat{margin-top:0;padding-top:26px;padding-bottom:48px}
/* Umbrella home only: the hero logo is centered, so its line centers under it. */
.hero__body--center{text-align:center}
.hero__body--center .hero__line{margin-left:auto;margin-right:auto;
  /* Hold the two written lines (the <br> split) on phones: the longer line
     measures ~22px of width per 1px of font-size, and the wrap padding is
     48px, so (100vw - 58px)/22 is the largest size that keeps it on one
     line with breathing room. Caps at the desktop 21px; floors at 12px. */
  font-size:clamp(12px,calc((100vw - 58px)/22),21px);
}
.hero__mark{width:min(620px,86%);height:auto;margin-bottom:18px;display:block}
.hero__mark-ph{width:min(620px,86%);aspect-ratio:6/1;min-height:0}
.status-chip{
  display:inline-block;margin-bottom:16px;padding:6px 13px;
  border:1px solid var(--manila-dim);border-radius:var(--r-sm);
  color:var(--manila);background:rgba(203,180,151,.07);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}
.hero__line{font-size:clamp(17px,2.2vw,21px);max-width:62ch;color:#D6D6DA;margin:0 0 24px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
/* Below the wrap point the buttons went 2 + 1, which reads as a mistake.
   Stack them full width instead. */
@media(max-width:560px){
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%;justify-content:center}
}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:var(--r-sm);text-decoration:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--text);background:var(--surface);
  transition:background .15s,border-color .15s,transform .15s;
}
.btn:hover{background:var(--surface-2);border-color:#41414A;transform:translateY(-1px)}
.btn--key{background:var(--manila);color:#17140F;border-color:var(--manila);font-weight:600}
.btn--key:hover{background:#DBC5A9;border-color:#DBC5A9}

/* ---------- sections ---------- */
.sec{padding:56px 0;border-bottom:1px solid var(--line)}
.sec__head{display:flex;align-items:baseline;gap:16px;margin-bottom:26px}
.sec__title{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--manila);margin:0;
}
.sec__note{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:auto}

/* ---------- episode grid (Hulu pattern, 16:9) ---------- */
.eps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 20px;align-items:start}
/* minmax(0,1fr): a bare 1fr refuses to shrink below its widest unbreakable
   content (ep 8's title), which squeezed the other column on mobile.
   align-items:start: the cards are <button>s, and browsers vertically centre
   button content when the row stretches them - shorter cards drifted down. */
@media(max-width:1024px){.eps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.eps{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}}

.ep{
  background:none;border:0;padding:0;margin:0;text-align:left;
  color:inherit;font:inherit;cursor:pointer;display:block;width:100%;
}
.ep__thumbwrap{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);background:var(--surface-2);
  transition:transform .18s ease,border-color .18s ease;
}
.ep:hover .ep__thumbwrap,.ep:focus-visible .ep__thumbwrap{
  transform:translateY(-3px);border-color:#4A4A54;
}
.ep:focus-visible{outline:none}
.ep:focus-visible .ep__thumbwrap{outline:2px solid var(--manila);outline-offset:2px}
.ep__thumb{aspect-ratio:16/9;width:100%;object-fit:cover}
.ep__thumbwrap .ph{border:0;border-radius:0}

/* hover scrim + play affordance — CSS, not baked into the JPG */
.ep__hover{
  position:absolute;inset:0;opacity:0;transition:opacity .18s ease;
  background:linear-gradient(180deg,rgba(11,11,12,0) 40%,rgba(11,11,12,.75) 100%);
  display:flex;align-items:center;justify-content:center;
}
.ep:hover .ep__hover,.ep:focus-visible .ep__hover{opacity:1}
.ep__play{
  width:46px;height:46px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;
  background:rgba(11,11,12,.5);
}
.ep__play::after{
  content:"";border-style:solid;border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent #fff;margin-left:3px;
}

.badge{
  position:absolute;left:8px;top:8px;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 8px;border-radius:var(--r-sm);background:rgba(11,11,12,.86);
  border:1px solid var(--line);color:#D6D6DA;
}
.badge--soon{background:rgba(11,11,12,.80);color:#F0E6D6;border-color:#6E6152}
.badge--new{background:var(--manila);color:#17140F;border-color:var(--manila);font-weight:700}

.ep--soon{cursor:default}
/* Unreleased episodes show the real still, blurred - reads as deliberate
   rather than broken. scale() hides the translucent edge blur() creates. */
.ep--soon .ep__thumb{filter:blur(2px);transform:scale(1.02)}
.ep--soon .ep__thumbwrap{opacity:.92}
.ep--soon:hover .ep__thumbwrap{transform:none;border-color:var(--line)}
.ep--soon .ep__hover{display:none}

.ep__meta{padding:11px 2px 0}
.ep__num{font-family:var(--mono);font-size:11px;letter-spacing:.09em;color:var(--muted)}
.ep__title{font-size:15px;font-weight:600;margin:3px 0 5px;line-height:1.3;overflow-wrap:break-word}
.ep:hover .ep__title{color:var(--manila)}
.ep--soon:hover .ep__title{color:var(--text)}
.ep__guest{font-size:13px;color:var(--muted);margin:0}

/* Mobile: "Ep 1" instead of "Episode 1", and the text stack pulls 2px closer
   to its thumbnail (top padding and title margins) so each meta block reads
   as belonging to the thumb ABOVE it, not the one below. The 22px row gap
   below the guest line is untouched on purpose - that contrast is the
   hierarchy. */
.ep__num--short{display:none}
@media(max-width:760px){
  .ep__num--long{display:none}
  .ep__num--short{display:inline}
  .ep__meta{padding-top:9px}
  .ep__title{margin:1px 0 3px}
}

.more{margin-top:28px;text-align:center}

/* ---------- platform chooser ---------- */
.modal[hidden]{display:none}
.modal{
  position:fixed;inset:0;z-index:100;display:flex;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(6,6,7,.82);backdrop-filter:blur(3px);
}
.modal__card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  width:min(400px,100%);padding:26px;
}
.modal__kicker{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--manila);margin:0 0 6px}
.modal__title{font-size:19px;font-weight:600;margin:0 0 20px;line-height:1.3}
.modal__links{display:flex;flex-direction:column;gap:9px}
.modal__links .btn{justify-content:center;width:100%}
.modal__close{
  margin-top:18px;width:100%;background:none;border:0;color:var(--muted);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;padding:8px;
}
.modal__close:hover{color:var(--text)}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center}
@media(max-width:820px){.about{grid-template-columns:1fr;gap:26px}}
.about__art{width:100%;height:auto;display:block}
.about p{font-size:16px;color:#CFCFD5;max-width:56ch}

/* ---------- email capture ---------- */
.capture{
  background:var(--surface);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:56px 0 60px;
}
.capture__in{max-width:620px;margin:0 auto;text-align:center;padding:0 24px}
.capture h2{font-size:clamp(21px,3vw,27px);margin:0 0 10px;line-height:1.25}
.capture p{color:var(--muted);margin:0 0 24px;font-size:15px}
.capture__form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.capture__embed{display:block;max-width:520px;margin:0 auto;min-height:56px}
.capture__embed iframe{display:block;width:100%!important}
.capture__form input{
  flex:1 1 280px;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--bg);border:1px solid var(--line);color:var(--text);
  font-family:var(--sans);font-size:15px;
}
.capture__form input:focus{outline:none;border-color:var(--manila)}
.capture__hint{
  margin-top:14px;font-family:var(--mono);font-size:10px;
  letter-spacing:.07em;color:#5E5E68;text-transform:uppercase;
}

/* ---------- show tiles (umbrella home) ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:860px){.tiles{grid-template-columns:1fr}}
.tile{
  display:block;text-decoration:none;border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;background:var(--surface);
  transition:transform .18s,border-color .18s;
}
.tile:hover{transform:translateY(-3px);border-color:#4A4A54}
.tile__art{
  position:relative;aspect-ratio:16/9;width:100%;
  background:var(--surface-2);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.tile__art img{width:100%;height:100%;object-fit:cover;display:block}
/* TLNS carries an inside stroke as part of its design: 17.2px on a 1920px
   master = 0.9% of width. At the card sizes this grid produces that lands
   at ~3px. Drawn in CSS so it scales with the card instead of being baked in. */
.tile__art--stroke::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:6px solid #ECF0F4;
  border-radius:var(--r-md) var(--r-md) 0 0;
}
.tile__ph{
  font-family:var(--mono);font-size:10px;letter-spacing:.07em;color:#5E5E68;
  text-transform:uppercase;text-align:center;padding:12px;
}
.tile__body{padding:16px 18px 20px}
.tile__name{font-size:17px;font-weight:600;margin:0 0 6px}
.tile__line{font-size:14px;color:var(--muted);margin:0}
.tile__status{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--manila);margin-bottom:7px;display:block;
}
.tile--empty .tile__status{color:var(--muted)}

/* ---------- footer ---------- */
.foot{padding:44px 0 60px;color:var(--muted);font-size:13px}
.foot__social{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:20px;
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase}
.foot__social a{text-decoration:none;color:var(--muted)}
.foot__social a:hover{color:var(--manila)}
.foot__contact{
  padding-bottom:18px;font-size:13px;color:var(--muted);
}
.foot__contact a{color:var(--manila);text-decoration:none}
.foot__contact a:hover{text-decoration:underline}
.foot__legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:20px;border-top:1px solid var(--line)}