/* Shared responsive finish; page artwork and editorial rhythm stay intact. */
:root { --gutter: clamp(1.25rem, 4.8vw, 11.5rem); }
html { scroll-padding-top: calc(var(--header-h) + 1rem); }
.site-header { padding-right: var(--gutter); }
.header-actions, .brand { flex-shrink: 0; }
main { min-width: 0; }
.episode > *, .journey-intro > *, .recrafted-intro-layout > *,
.watch-category a > *, .short-feed-heading > *, .about-building-grid > * { min-width: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.journey-intro div > p, .episode-copy > p:not(.journey-kicker) {
  max-width: 60ch; font-size: clamp(1rem, .85vw, 1.4rem); line-height: 1.7;
}
.journey-kicker, .eyebrow { font-size: clamp(.75rem, .58vw, 1rem); }
.journey-link, .category-link { font-size: clamp(.875rem, .65vw, 1.15rem); }
.episode .episode-copy h2 { overflow-wrap: break-word; }
.playlist-episode .episode-copy h2 {
  max-width: 26ch; font-size: clamp(2.25rem, 3.4vw, 5rem); line-height: 1.08;
}
.journey-statement { overflow: hidden; }
.journey-statement blockquote { max-width: 24ch; margin-block: 2.5rem 3.5rem; }
.journey-statement .statement-credit { line-height: 1.6; }

/* Compact, numbered episode navigation works with long playlist titles. */
.episode-index, .recrafted-page .episode-index {
  display: block; padding-block: clamp(1.5rem, 2.5vw, 3rem); background: #161616;
}
.episode-index > .journey-kicker { display: block; width: auto; margin: 0 0 1.25rem; }
.episode-jump-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: clamp(.85rem, 1.25vw, 2rem);
}
.episode-index a.episode-jump, .recrafted-page .episode-index a.episode-jump {
  display: block; min-width: 0; padding: 0; border: 0; background: transparent;
}
.episode-jump img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.episode-index .episode-jump-copy { display: block; margin: .85rem 0 0; color: inherit; }
.episode-index .episode-jump-number {
  display: block; margin: 0 0 .3rem; color: #999;
  font-size: clamp(.7rem, .52vw, .95rem); letter-spacing: .12em; line-height: 1.5;
}
.episode-index .episode-jump-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; margin: 0; color: #eee; font-size: clamp(.95rem, .85vw, 1.4rem);
  line-height: 1.4; min-height: 2.8em; letter-spacing: -.015em;
}
.episode-jump:hover .episode-jump-title { color: #c45117; }
.episode-jump:focus-visible { outline: 2px solid #c45117; outline-offset: 5px; }
.episode-shortcut { display: flex; justify-content: flex-end; padding: 0 var(--gutter) clamp(1rem, 2vw, 2rem); }
.episode-select-wrap { position: relative; width: min(100%, 24rem); }
.episode-select-wrap::after {
  content: ''; position: absolute; right: 1rem; top: 50%; width: .45rem; height: .45rem;
  border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.episode-shortcut select {
  appearance: none; display: block; width: 100%; min-height: 44px; padding: .8rem 2.75rem .8rem 1rem;
  border: 1px solid #393939; border-radius: 0; background: #161616; color: #eee;
  font: inherit; font-size: clamp(.95rem, .7vw, 1.2rem); line-height: 1.4;
  text-overflow: ellipsis; cursor: pointer; color-scheme: dark;
}
.episode-shortcut select:focus-visible { outline: 2px solid #c45117; outline-offset: 4px; }

/* Match the type and navigation scale to the available screen width. */
.watch-category .category-copy h2.recrafted-title {
  white-space: normal; line-height: 1.15; font-size: clamp(1.35rem, 1.65vw, 3rem);
}
.category-copy > p:not(.eyebrow) { max-width: 38ch; font-size: clamp(1rem, .8vw, 1.3rem); }
.short-feed-heading { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.short-feed-heading p { max-width: 45ch; font-size: clamp(1rem, .85vw, 1.4rem); }
.short-stage { --short-width: min(17vw, 29svh, 38rem); }
.culture-story-copy p:not(.eyebrow) { max-width: 60ch; font-size: clamp(1rem, .85vw, 1.4rem); }
.about-hero-copy { width: min(60rem, 48%); }
.about-hero-copy h1 { font-size: clamp(3.5rem, 6.3vw, 12rem); }
.about-hero-copy > p { max-width: 60ch; font-size: clamp(1rem, .85vw, 1.4rem); }
.product-card h3 { font-size: clamp(.875rem, .7vw, 1.25rem); }
.retail-footer .footer-heading { font-size: clamp(.75rem, .55vw, 1rem); }
.retail-footer .footer-column a { font-size: clamp(.875rem, .68vw, 1.2rem); min-height: 2.75rem; display: inline-flex; align-items: center; }
.retail-footer .footer-column { gap: .35rem; }
.retail-footer .footer-newsletter h2 { font-size: clamp(1.25rem, 1.25vw, 2.5rem); }
.retail-footer .footer-newsletter > p:not(.footer-heading) { font-size: clamp(.95rem, .7vw, 1.25rem); max-width: 48ch; }
.retail-footer .footer-beehiiv { max-width: clamp(32rem, 22vw, 52rem); }
.footer-base { align-items: center; flex-wrap: wrap; }
.retail-footer .footer-brand { font-size: clamp(.875rem, .65vw, 1.25rem); }
.retail-footer .footer-about, .footer-base > p { font-size: clamp(.75rem, .55vw, 1rem); }
.video-dialog { width: min(65vw, 100rem); }
.video-dialog-portrait { width: min(32rem, calc(100vw - 2rem), calc((100dvh - 9rem) * .5625)); }
.video-toolbar h2 { min-width: 0; overflow-wrap: anywhere; }
.video-close { flex-shrink: 0; }

@media (min-width: 1800px) {
  .site-header { height: 6rem; }
  .site-header.is-scrolled { height: 5.5rem; }
  .brand { font-size: clamp(.95rem, .8vw, 1.5rem); }
  .brand img { width: clamp(2rem, 1.4vw, 3rem); height: auto; }
  .desktop-nav a { font-size: clamp(.95rem, .65vw, 1.25rem); }
  .series-carousel { --card-width: min(72vw, 112svh, 125rem); }
  .feature-meta h3 { font-size: clamp(3rem, 2vw, 4.5rem); }
  .feature-meta p, .series-cta { font-size: clamp(.95rem, .65vw, 1.25rem); }
  .culture-banner .culture-hero-copy { max-width: 40ch; font-size: clamp(1.25rem, .85vw, 1.65rem); }
  .about-building-heading h2 { font-size: clamp(3.5rem, 2.4vw, 5.5rem); }
  .about-building-grid h3 { font-size: clamp(2.5rem, 1.5vw, 3.5rem); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .journey-intro { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: 2rem; }
  .episode { gap: 2rem; }
  .episode .episode-copy h2, .episode.episode-video-layout .episode-copy h2 { font-size: clamp(2.5rem, 4.5vw, 4rem); }
  .about-hero { padding-top: 7rem; }
  .about-hero-copy { width: 50%; }
}
@media (min-width: 651px) and (max-width: 1100px) {
  .site-footer.retail-footer { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .footer-newsletter { grid-column: 1 / -1; }
  .retail-footer .footer-beehiiv { max-width: 36rem; }
  .footer-column:last-of-type { grid-column: auto; }
}
@media (max-width: 900px) {
  html.menu-open, body.menu-open { overflow: hidden; }
  .mobile-nav {
    z-index: 49; inset: 0; width: 100%; height: 100vh; height: 100dvh;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding-top: max(6rem, calc(env(safe-area-inset-top) + 5rem));
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }
  body.menu-open .site-header,
  body.menu-open .site-header:not(.is-scrolled) { background: #101010; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .short-feed-heading { grid-template-columns: 1fr; gap: 1rem; padding-block: 1.5rem; }
  .short-feed-heading h2 { max-width: none; font-size: clamp(2rem, 6vw, 4rem); }
  .short-feed-heading p { max-width: 55ch; }
  .video-dialog { width: min(1000px, calc(100vw - 2rem)); }
  .video-dialog-portrait { width: min(32rem, calc(100vw - 2rem), calc((100dvh - 9rem) * .5625)); }
}
@media (max-width: 760px) {
  .episode-shortcut { justify-content: flex-start; }
  .episode-select-wrap { width: min(100%, 24rem); }
  .episode-shortcut select { font-size: 1rem; }
  .episode-index, .recrafted-page .episode-index { padding-inline: 0; }
  .episode-index > .journey-kicker { padding-inline: var(--gutter); }
  .episode-jump-grid {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x proximity;
    padding: .25rem var(--gutter) .75rem; scrollbar-width: thin;
  }
  .episode-jump { flex: 0 0 min(68vw, 17rem); scroll-snap-align: start; }
  .episode-index .episode-jump-title { font-size: 1rem; }
  .episode .episode-copy h2, .episode.episode-video-layout .episode-copy h2 { font-size: clamp(2.5rem, 10vw, 4rem); }
  .about-hero-copy { width: 100%; }
  .about-hero-copy h1 { font-size: clamp(3rem, 15vw, 5rem); }
  .journey-intro, .episode { gap: 1.5rem; }
  .recrafted-pillars { scroll-snap-type: x proximity; }
}
@media (max-width: 650px) {
  .watch-category .category-copy h2.recrafted-title { font-size: clamp(1.15rem, 4.4vw, 1.65rem); letter-spacing: -.035em; }
  .category-copy > p:not(.eyebrow) { font-size: .95rem; }
  .short-feed-heading { padding: 0; gap: .65rem; }
  .short-feed-heading h2 { font-size: 1.6rem; }
  .short-feed-heading p { font-size: .95rem; }
  .short-stage { --short-width: min(58vw, max(28vw, calc((100svh - 24rem) * .5625))); }
  .feature-card img { aspect-ratio: 4 / 5; }
  .site-footer.retail-footer { row-gap: 2rem; }
  .retail-footer .footer-beehiiv { max-width: none; }
  .footer-base { display: block; }
  .journey-statement blockquote { font-size: clamp(2rem, 8.5vw, 3.5rem); }
}
@media (max-width: 380px) {
  .site-header { padding-inline: 1rem; }
  .brand { gap: .35rem; }
  .brand span { font-size: .67rem; }
  .site-header .icon-button { width: 2.5rem; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .brand-hero, .journey-hero { min-height: max(20rem, 100svh); }
  .video-dialog:not(.video-dialog-portrait) { width: min(800px, 75vw); }
}
@media (prefers-reduced-motion: reduce) {
  .feature-card, .short-card, [data-reveal] { transition-duration: 0s !important; }
}

/* Brand superscripts and deliberate newsletter line breaks. */
.brand-name-inline { white-space: nowrap; }
.copy-tm { font-size: .5em; line-height: 0; vertical-align: super; margin-left: .2em; }
.footer-inbox { display: block; margin-top: .25em; }

.journey-statement blockquote:last-child { margin-bottom: 0; }