/* Lore Party Media: site styles.
   One stylesheet for every page. Colors and type live in the variables below;
   change them here and every page follows. */

:root {
  --paper: #F1F1EF;      /* page ground */
  --ink: #141414;        /* headings, rules, primary text */
  --body: #3A3A3A;       /* paragraph text */
  --muted: #6A6A6A;      /* dates, labels, captions */
  --rule: #DADADA;       /* light dividers */
  --accent: #8A2A1E;     /* oxblood: list numbers, status, hover */
  --night: #16171A;      /* Stellar band */
  --night-ink: #EDEDED;
  --night-body: #CFCFCF;
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --wrap: 1280px;
  --gutter: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.serif { font-family: var(--serif); }
.muted { color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 10; }

/* ---------- Masthead ---------- */
.masthead { padding-top: 28px; }
.masthead-row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 16px 40px; padding-bottom: 22px; border-bottom: 1px solid var(--ink);
}
.wordmark { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; }
.nav { display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 15px; font-weight: 500; }
.nav a[aria-current="page"] { border-bottom: 1px solid var(--ink); }

/* ---------- Buttons and text links ---------- */
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px;
  background: var(--ink); color: #fff; font-size: 15px; font-weight: 600;
}
.btn:hover { background: var(--accent); color: #fff; }
.btn-ghost-light { background: transparent; border: 1px solid var(--night-ink); color: var(--night-ink); }
.btn-ghost-light:hover { background: var(--night-ink); color: var(--night); }
.textlink { font-size: 15px; font-weight: 500; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }

/* ---------- Section headers ---------- */
.section { padding-bottom: 120px; }
.section-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--ink);
}
.section-title { font-family: var(--serif); font-size: clamp(40px, 4.4vw, 60px); letter-spacing: -0.02em; line-height: 1.05; }

/* ---------- Home: hero ---------- */
/* Two columns (text, reel) that both shrink together; they only stack below 900px. */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
  gap: 48px clamp(40px, 6vw, 96px); align-items: center;
  padding-top: 64px; padding-bottom: 112px;
}
.hero-text { min-width: 0; }
.hero h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(46px, 6.3vw, 86px); line-height: 0.98; letter-spacing: -0.025em; text-wrap: pretty; }
.hero-lede { margin-top: 36px; max-width: 520px; font-family: var(--serif); font-size: 22px; line-height: 1.45; color: var(--body); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; margin-top: 40px; }

/* Cover reel: two columns drifting in opposite directions on a 60s loop.
   Each column holds its covers twice, so moving it by exactly half its
   height lands on an identical frame and the loop is seamless. The mask
   fades the top and bottom edges. Hover pauses it; reduced-motion stops it. */
.reel {
  width: 100%; min-width: 0; height: 600px; overflow: hidden;
  display: flex; gap: 16px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.reel-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; }
.reel-col img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.reel-up { animation: reel-up 60s linear infinite; }
.reel-down { animation: reel-down 60s linear infinite; }
.reel:hover .reel-col { animation-play-state: paused; }
@keyframes reel-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes reel-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .reel-col { animation: none; } }

/* ---------- Home: shows list ---------- */
.show {
  display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-start;
  padding: 36px 0; border-bottom: 1px solid var(--rule);
}
.show-cover { flex: none; width: 168px; height: 168px; object-fit: cover; }
.show-body { flex: 1 1 380px; min-width: 0; }
.show-title { font-family: var(--serif); font-size: 40px; line-height: 1.05; letter-spacing: -0.015em; }
.show-meta { margin: 8px 0 14px; font-size: 14.5px; color: var(--muted); }
.show-status { color: var(--accent); font-weight: 500; }
.show-desc { max-width: 560px; font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--body); }
.show-links { flex: 0 0 160px; display: flex; flex-direction: column; gap: 8px; padding-top: 10px; font-size: 14.5px; font-weight: 500; }

/* ---------- Home: Stellar band ---------- */
.stellar { background: var(--night); color: var(--night-ink); }
.stellar a { color: var(--night-ink); }
.stellar-inner { display: flex; flex-wrap: wrap; gap: 64px 96px; align-items: center; padding-top: 120px; padding-bottom: 120px; }
.stellar-covers { flex: 1 1 480px; min-width: 0; display: flex; justify-content: center; align-items: flex-end; }
.stellar-covers img { object-fit: cover; }
.stellar-covers .c1 { width: 42%; aspect-ratio: 691 / 900; transform: rotate(-3deg) translateX(8%); box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.stellar-covers .c2 { width: 46%; aspect-ratio: 695 / 900; position: relative; z-index: 1; transform: rotate(2deg) translateX(-8%); box-shadow: 0 24px 48px rgba(0,0,0,.55); }
.stellar-text { flex: 1 1 420px; min-width: 0; }
.stellar-text h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(64px, 8vw, 112px); line-height: 0.9; letter-spacing: -0.03em; margin-bottom: 24px; }
.stellar-text p { max-width: 460px; font-family: var(--serif); font-size: 21px; line-height: 1.5; color: var(--night-body); }
.stellar-text .btn { margin-top: 36px; }

/* ---------- Home: hosts and guests ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 48px; }
.person { display: flex; gap: 20px; padding: 32px 0; border-bottom: 1px solid var(--rule); align-items: flex-start; }
.person img { flex: none; width: 96px; height: 96px; object-fit: cover; }
.person-name { font-family: var(--serif); font-size: 26px; line-height: 1.15; margin-bottom: 8px; }
.person-meta { font-size: 14px; color: var(--muted); margin: 4px 0 10px; }
.person-bio { font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--body); }
.person-link { display: inline-block; margin-top: 10px; font-size: 14.5px; font-weight: 500; }
.hosts-section { padding-top: 112px; }

/* ---------- News lists ---------- */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 48px; }
.news-card { display: block; padding: 32px 0; border-bottom: 1px solid var(--rule); }
.news-card-title { font-family: var(--serif); font-size: 28px; line-height: 1.18; letter-spacing: -0.01em; }
.news-card-meta { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* ---------- Page title block (newsroom, work with us) ---------- */
.page-head { display: flex; flex-wrap: wrap; gap: 48px 96px; align-items: flex-end; padding-top: 80px; padding-bottom: 56px; }
.page-head-main { flex: 1 1 560px; min-width: 0; }
.page-title { font-family: var(--serif); font-weight: 300; font-size: clamp(56px, 9vw, 128px); line-height: 0.9; letter-spacing: -0.035em; }
.page-title.smaller { font-size: clamp(48px, 7vw, 96px); line-height: 0.98; letter-spacing: -0.025em; }
.page-lede { margin-top: 28px; max-width: 560px; font-family: var(--serif); font-size: 22px; line-height: 1.45; color: var(--body); }
.aside-box { flex: 0 1 360px; min-width: 0; border-top: 1px solid var(--ink); padding-top: 16px; }
.aside-box h2 { font-family: var(--serif); font-size: 22px; font-weight: 500; }
.aside-box p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--body); }
.aside-box a { border-bottom: 1px solid var(--ink); }

/* ---------- Newsroom index ---------- */
.lead-item { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: center; padding: 56px 0; border-top: 1px solid var(--ink); }
.lead-item img { flex: 0 1 440px; width: 440px; max-width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.lead-item-body { flex: 1 1 440px; min-width: 0; }
.lead-item h2 { font-family: var(--serif); font-size: clamp(34px, 4vw, 54px); line-height: 1.04; letter-spacing: -0.02em; margin-bottom: 20px; }
.lead-item p { max-width: 560px; font-family: var(--serif); font-size: 20px; line-height: 1.5; color: var(--body); }
.year { font-family: var(--serif); font-size: 28px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); margin-top: 24px; }
.news-row { display: flex; flex-wrap: wrap; gap: 8px 40px; padding: 28px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.news-row-date { flex: 0 0 140px; font-size: 14.5px; color: var(--muted); }
.news-row-title { flex: 1 1 520px; min-width: 0; font-family: var(--serif); font-size: 28px; line-height: 1.2; letter-spacing: -0.01em; }
.news-row-meta { flex: 0 0 220px; font-size: 14px; color: var(--muted); }

/* ---------- Post page ---------- */
.post-head { max-width: 920px; margin: 0 auto; padding: 64px var(--gutter) 56px; text-align: center; }
.post-back { font-size: 14px; font-weight: 500; color: var(--muted); }
.post-head h1 { margin: 40px 0 26px; font-family: var(--serif); font-size: clamp(36px, 5.2vw, 68px); line-height: 1.04; letter-spacing: -0.025em; }
.post-dek { margin: 0 auto; max-width: 640px; font-family: var(--serif); font-size: 22px; line-height: 1.45; color: var(--body); }
.post-meta { margin-top: 32px; font-size: 14px; color: var(--muted); }
.post-figure { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.post-figure img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: center top; }
.post-figure figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }
.post-grid { max-width: 1120px; margin: 0 auto; padding: 64px var(--gutter) 120px; display: flex; flex-wrap: wrap; gap: 56px 80px; align-items: flex-start; }
.post-body { flex: 1 1 560px; min-width: 0; max-width: 680px; font-family: var(--serif); font-size: 20px; line-height: 1.65; }
.post-body p { margin: 0 0 26px; }
.post-body strong { font-weight: 600; }
.post-body a { border-bottom: 1px solid var(--ink); }
.boilerplate { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--ink); }
.boilerplate h2 { font-family: var(--sans); font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.boilerplate p { font-size: 17px; line-height: 1.6; color: var(--body); margin: 0; }
.post-aside { flex: 0 1 280px; min-width: 0; font-size: 14.5px; line-height: 1.55; }
.post-aside section { border-top: 1px solid var(--rule); padding: 14px 0 22px; }
.post-aside section:first-child { border-top-color: var(--ink); }
.post-aside h2 { font-size: 14.5px; font-weight: 600; margin-bottom: 6px; }
.post-aside ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

/* ---------- Work with us ---------- */
.work-hero { padding-top: 80px; padding-bottom: 104px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 72px; border-top: 1px solid var(--ink); }
.stat { padding: 24px 24px 24px 0; }
.stat-num { font-family: var(--serif); font-size: clamp(48px, 5.4vw, 72px); line-height: 1; letter-spacing: -0.02em; }
.stat-label { margin-top: 10px; font-size: 14.5px; color: var(--muted); }
.partners-line { padding-top: 20px; border-top: 1px solid var(--rule); font-size: 15px; color: var(--body); }
.partners-line .muted { margin-right: 16px; }
.subhead { font-family: var(--serif); font-size: 28px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.ways-list { list-style: none; margin: 0; padding: 0; }
.way-row { display: flex; flex-wrap: wrap; gap: 8px 48px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.way-row h3 { flex: 0 0 340px; font-family: var(--serif); font-size: 26px; line-height: 1.2; }
.way-row p { flex: 1 1 380px; max-width: 620px; font-size: 16px; line-height: 1.6; color: var(--body); }
.contact-inner { padding-top: 104px; padding-bottom: 104px; }
.contact-title { font-family: var(--serif); font-weight: 300; font-size: clamp(48px, 6vw, 80px); line-height: 1; letter-spacing: -0.025em; margin-bottom: 48px; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px 64px; }
.contact-item { border-top: 1px solid #3A3B3F; padding-top: 18px; }
.contact-item h3 { font-size: 14.5px; font-weight: 500; color: var(--night-body); }
.contact-email { display: inline-block; margin-top: 8px; font-family: var(--serif); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; border-bottom: 1px solid transparent; }
.stellar a.contact-email:hover { color: var(--night-ink); border-bottom-color: var(--night-ink); }
.contact-item p { margin-top: 8px; font-size: 15px; color: var(--night-body); }
.inbox-intro { margin: 72px 0 12px; font-size: 15px; color: var(--night-body); }
.inbox-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 32px; }
.inbox-list li { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid #3A3B3F; font-size: 15px; }
.inbox-list a { overflow-wrap: anywhere; }
.inbox-list span { color: var(--night-body); }
.stellar .inbox-list a:hover { color: #fff; text-decoration: underline; }
.stellar + .footer { border-top: none; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--ink); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px 40px; padding-top: 56px; padding-bottom: 56px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 24px 64px; font-size: 14.5px; line-height: 2; }
.footer-links div { display: flex; flex-direction: column; }
.footer-legal { font-size: 13px; color: var(--muted); }

/* ---------- Tablet widths: stack the hero ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .reel { max-width: 520px; height: 440px; }
}

/* ---------- Phone widths ---------- */
@media (max-width: 720px) {
  :root { --gutter: 20px; }
  .masthead-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .nav { gap: 6px 20px; }
  .hero { padding-top: 40px; padding-bottom: 72px; gap: 40px; }
  .reel { height: 380px; }
  .section { padding-bottom: 80px; }
  /* Phone: cover on the left with title and genre beside it;
     description and links run full width underneath. */
  .show {
    display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 18px;
    grid-template-areas: "cover title" "cover meta" "desc desc" "links links";
    grid-template-rows: auto 1fr auto auto; /* spare cover height goes under the genre line */
    align-items: start; padding: 28px 0;
  }
  .show-body { display: contents; }
  .show-cover { grid-area: cover; width: 96px; height: 96px; }
  .show-title { grid-area: title; font-size: 28px; line-height: 1.1; }
  .show-meta { grid-area: meta; margin: 6px 0 0; font-size: 14px; }
  .show-desc { grid-area: desc; margin-top: 18px; font-size: 18px; }
  .show-links { grid-area: links; flex-direction: row; flex-wrap: wrap; gap: 8px 24px; padding-top: 14px; }
  .stellar-inner { padding-top: 72px; padding-bottom: 72px; }
  .people { grid-template-columns: 1fr; }
  .hosts-section { padding-top: 72px; }
  .page-head { padding-top: 48px; }
  .news-row-date, .news-row-meta { flex-basis: 100%; }
  .way-row h3 { flex-basis: 100%; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-hero { padding-top: 48px; padding-bottom: 72px; }
  .contact-inner { padding-top: 72px; padding-bottom: 72px; }
  .post-grid { padding-top: 40px; }
  .footer-row { flex-direction: column-reverse; align-items: flex-start; }
}