@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/EBGaramond-400i-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:700;font-display:swap;src:url(../fonts/EBGaramond-700i-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/EBGaramond-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/EBGaramond-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/PlayfairDisplay-600i-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/PlayfairDisplay-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/PlayfairDisplay-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* ==========================================================================
   unpopularpeople.com — site stylesheet
   Fonts: Playfair Display (headings, stands in for Adobe "Ivy Mode")
          EB Garamond (body, stands in for Adobe "Athelas")
   ========================================================================== */
:root {
  --bg: #000;
  --fg: #fff;
  --navy: #253551;
  --light: #dcdcd6;
  --font-head: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-body: 'EB Garamond', Garamond, 'Times New Roman', Georgia, serif;
  --header-h: 128px;
  --gutter: clamp(16px, 4vw, 48px);
  --w-wide: 1240px;
  --w-medium: 960px;
  --w-narrow: 760px;
}
@media (max-width: 767px) { :root { --header-h: 88px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
hr { border: 0; border-top: 1px solid currentColor; opacity: .4; margin: 2.5rem auto; max-width: 320px; }

.skip-link { position: absolute; left: -9999px; top: 0; background: #fff; color: #000; padding: .5rem 1rem; z-index: 100; }
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- typography ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 .6em;
  letter-spacing: -.005em;
}
h1 { font-size: clamp(2.5rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 2.8rem); }
h3 { font-size: clamp(1.6rem, 3vw, 2rem); }
h4 { font-size: 1.4rem; }
p { margin: 0 0 1.1em; }
.rte > :last-child { margin-bottom: 0; }
.rte h1, .rte h2, .rte h3, .rte h4 { margin-top: 1.4em; }
.rte > h1:first-child, .rte > h2:first-child, .rte > h3:first-child, .rte > h4:first-child { margin-top: 0; }
.rte a { text-decoration: underline; text-underline-offset: .15em; }
.rte a:hover { opacity: .75; }
.rte ul, .rte ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.ta-center { text-align: center; }
.ta-right { text-align: right; }
.ta-left { text-align: left; }
.ta-center .rte, .ta-center .card__body { margin-left: auto; margin-right: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  background: #fff;
  color: #000;
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.2;
  padding: 1.2em 2em;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: opacity .2s;
}
.btn:hover { opacity: .85; }
.btn--sm { font-size: .91rem; padding: 1.2em 2em; }
.btn-wrap { margin: 1.8rem 0 0; }
.btn-wrap + .btn-wrap { margin-top: 1rem; }

/* ---------- header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  color: #fff;
  transition: background-color .3s;
}
.site-header.is-scrolled, .site-header.is-open { background: rgba(0, 0, 0, .94); }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 24px var(--gutter);
  min-height: var(--header-h);
}
.site-header__logo img { width: 80px; height: 80px; }
.site-nav { display: flex; gap: .9rem; flex-wrap: wrap; }
.site-nav a, .mobile-menu__nav a {
  font-weight: 700;
  font-size: 1.6rem;
  text-decoration: none;
  line-height: 1.6;
}
.site-nav a.is-active, .mobile-menu__nav a.is-active { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.site-nav a:hover { opacity: .75; }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }

.social { list-style: none; margin: 0; padding: 0; display: flex; gap: .9rem; justify-content: center; }
.social a { display: block; padding: .2rem; line-height: 0; }
.social svg { width: 20px; height: 20px; fill: currentColor; }
.social a:hover { opacity: .7; }
.social--header { gap: .35rem; }
.social--header svg { width: 16px; height: 16px; }
.social--lg svg { width: 26px; height: 26px; }
.social--inline { margin-top: 1.5rem; }

.burger {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  background: none; border: 0; padding: 8px; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 6px;
}
.burger span { display: block; height: 2px; background: #fff; transition: transform .25s, opacity .25s; }
.site-header.is-open .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.site-header.is-open .burger span:nth-child(2) { opacity: 0; }
.site-header.is-open .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed; inset: var(--header-h) 0 0 0;
  background: #000;
  padding: 2rem var(--gutter);
  overflow-y: auto;
  text-align: center;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__nav { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 2rem; }
.mobile-menu__nav a { font-size: 2rem; }

@media (max-width: 991px) {
  .site-nav, .site-header__actions { display: none; }
  .burger { display: flex; }
  .site-header__inner { padding: 16px var(--gutter); }
  .site-header__logo img { width: 56px; height: 56px; }
  .mobile-menu:not([hidden]) { display: block; }
}

/* ---------- sections ---------- */
main { padding-top: var(--header-h); }
body.has-hero main { padding-top: 0; }
.section {
  position: relative;
  padding: clamp(3rem, 6vw, 5.5rem) var(--gutter);
  background: var(--bg);
  color: var(--fg);
}
.section--small { padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.section--large { min-height: 70vh; display: flex; align-items: center; }
.section--medium { min-height: 40vh; display: flex; align-items: center; }
body.has-hero .section--large.has-bg:first-child { min-height: 100vh; padding-top: calc(var(--header-h) + 2rem); }
.section.has-bg { background: #222; }
.section__bg { position: absolute; inset: 0; overflow: hidden; }
.section__bg img { width: 100%; height: 100%; object-fit: cover; }
.section__bg::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .15); }
.container { position: relative; width: 100%; margin: 0 auto; }
.container--wide { max-width: var(--w-wide); }
.container--medium { max-width: var(--w-medium); }
.container--narrow { max-width: var(--w-narrow); }
.section .rte + .rte { margin-top: 2.5rem; }
.section > .container > * + * { margin-top: 2.5rem; }
.section > .container > .rte + .btn-wrap { margin-top: 1.8rem; }

/* section colour themes (names follow the original Squarespace section styles) */
.theme-bright-inverse, .theme-white-bold { background: #fff; color: #000; }
.theme-bright-inverse .btn, .theme-white-bold .btn { background: var(--navy); color: #fff; }
.theme-white-bold h1, .theme-white-bold h2, .theme-white-bold h3, .theme-white-bold h4 { color: var(--navy); }
.theme-light { background: var(--light); color: #000; }
.theme-light .btn { background: var(--navy); color: #fff; }
.theme-light .section__bg::after { background: rgba(0, 0, 0, .05); }

/* ---------- image cards (image + text side by side) ---------- */
.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  text-align: left;
}
.card--img-right .card__media { order: 2; }
.card__media img { width: 100%; }
.card__body h3 { margin-bottom: .5em; }
.card__body h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.card__body .btn-wrap { margin-top: 1.4rem; }
figure.image { margin: 0 auto; max-width: 520px; }
figure.image img { margin: 0 auto; }
@media (max-width: 767px) {
  .card { grid-template-columns: 1fr; }
  .card--img-right .card__media { order: 0; }
}

/* ---------- embeds (Podbean / Buzzsprout players) ---------- */
.embed { max-width: 100%; }
.embed iframe { width: 100%; max-width: 100%; display: block; }
.embed > div { max-width: 100%; }

/* ---------- latest episodes carousel (home) ---------- */
.carousel { position: relative; text-align: left; }
.carousel__nav { display: flex; justify-content: flex-end; gap: .25rem; margin-bottom: 1rem; }
.carousel__btn {
  background: none; border: 0; color: #fff; cursor: pointer;
  font-size: 2rem; line-height: 1; width: 36px; height: 36px; padding: 0;
  font-family: var(--font-body);
}
.carousel__btn:hover { opacity: .7; }
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 1.25rem) / 4);
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: .5rem;
}
.carousel__track::-webkit-scrollbar { display: none; }
.ep-card { scroll-snap-align: start; }
.ep-card__img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.ep-card__title { font-family: var(--font-body); font-weight: 400; font-size: 1.25rem; margin: 1rem 0 .5rem; }
.ep-card__title a { text-decoration: none; }
.ep-card__title a:hover { text-decoration: underline; }
.ep-card__excerpt { font-size: .95rem; line-height: 1.4; }
.ep-card__more { display: inline-block; margin-top: .6rem; font-size: .95rem; text-decoration: none; }
.ep-card__more:hover { text-decoration: underline; }
.ep-card__date { display: block; margin-top: .6rem; font-size: .85rem; opacity: .8; }
@media (max-width: 991px) { .carousel__track { grid-auto-columns: calc((100% - 1.25rem) / 2); } }
@media (max-width: 599px) { .carousel__track { grid-auto-columns: 80%; } }

/* ---------- podcast list (all episodes) ---------- */
.ep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
}
.ep-item__img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.ep-item__title { font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 1.2rem 0 .6rem; }
.ep-item__title a { text-decoration: none; }
.ep-item__title a:hover { text-decoration: underline; }
.ep-item__more { display: inline-block; margin-top: .8rem; text-decoration: underline; text-underline-offset: .15em; }
@media (max-width: 599px) { .ep-grid { grid-template-columns: 1fr; } }

/* ---------- episode page ---------- */
.episode__header { margin-bottom: 2.5rem; }
.episode__header h1 { margin-bottom: .3em; }
.episode__date { font-size: .95rem; opacity: .75; }
.episode__body > * + * { margin-top: 2.5rem; }
.episode__body .rte { max-width: var(--w-medium); }
.pager {
  display: flex; justify-content: space-between; gap: 2rem;
  margin-top: 4rem; padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.pager__link { text-decoration: none; display: flex; flex-direction: column; max-width: 45%; }
.pager__link:hover .pager__title { text-decoration: underline; }
.pager__link--next { text-align: right; margin-left: auto; }
.pager__label { font-size: .85rem; opacity: .7; }
.pager__title { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; }
.pager__link--prev .pager__title::before { content: '‹  '; }
.pager__link--next .pager__title::after { content: '  ›'; }

/* ---------- language tag + back link ---------- */
.lang-tag { display: inline-block; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.5); padding: .15em .6em; margin-top: .4rem; vertical-align: middle; }
.ep-item__title + .lang-tag { margin-top: 0; margin-bottom: .6rem; }
.back-link { margin: 0 0 1.5rem; }
.back-link a { text-decoration: none; opacity: .8; }
.back-link a:hover { text-decoration: underline; opacity: 1; }
.pager + .back-link { margin-top: 2rem; }

/* ---------- forms ---------- */
.form { max-width: 640px; margin: 0 auto; text-align: left; }
.form__field { display: block; margin-bottom: 1.4rem; }
.form__field > span { display: block; margin-bottom: .4rem; font-weight: 700; }
.form__field > span em { font-style: normal; font-weight: 400; opacity: .7; font-size: .9em; }
.form__row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form input[type=text], .form input[type=email], .form textarea {
  width: 100%;
  font: inherit;
  color: #000;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 0;
  padding: .7em .9em;
}
.form textarea { resize: vertical; }
.form__hp { position: absolute; left: -9999px; opacity: 0; }
.form__status { margin-top: 1.2rem; text-align: center; }
.form__status:empty { display: none; }
.form.is-sent .form__field, .form.is-sent .btn-wrap { display: none; }
@media (max-width: 479px) { .form__row--2 { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer { padding: 3rem var(--gutter) 3.5rem; background: var(--bg); color: var(--fg); }
.site-footer__links { margin: 0 0 1.5rem; }
.site-footer__links a { text-decoration: underline; text-underline-offset: .15em; margin: 0 .5rem; }
.site-footer__links a:hover { opacity: .75; }

@media print { .site-header, .site-footer, .carousel__nav, .burger { display: none; } main { padding-top: 0; } }