/* v0.6: shared reading rhythm and responsive navigation, without forced scrolling. */
:root { --site-header-height: 105px; }
html { scroll-padding-top: calc(var(--site-header-height) + 16px); }
body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
main > section[id], .topic[id], .blog-library .topic, .habi-game { scroll-margin-top: 0; }
main { min-width: 0; }
main > section { position: relative; }
.wrap { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.reading, .blog-library { padding-top: 0; }
.band h2 { max-width: 24ch; }
.door { padding-bottom: 12px; }
.door p:not(.eyebrow) { margin: 22px 0 28px; }
.editorial-grid > article { display: flex; flex-direction: column; align-items: flex-start; }
.editorial-grid > article > p { margin: 20px 0 24px; }
.article-head, .reading.prose { max-width: 1050px; }
.article-head h1 { max-width: 26ch; }
.article-head .lead { max-width: 56ch; }
.reading.prose > p { max-width: none; }
.article-head .article-image { margin: 32px 0 0; }
.reading h2 { line-height: 1.2; }
.related { margin-top: 48px; }
.breadcrumb {
  color: #6b736b;
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.6;
  text-transform: none;
  text-wrap: pretty;
}
.breadcrumb a {
  display: inline-block;
  color: inherit;
  text-decoration-color: #a6afa5;
  text-decoration-thickness: 1px;
}
.breadcrumb a:hover, .breadcrumb a:focus-visible {
  color: var(--ink);
  text-decoration-color: currentColor;
}
.text-link { line-height: 1.55; }
.button { text-align: center; line-height: 1.5; }
.vital-image img { object-position: center 30%; }
body > footer { margin-top: 0; }

@media (min-width: 951px) {
  .cover, .page-head.vital-hero, .page-head.pro-hero, .habi-hero, .podcast-hero {
    min-height: calc(100svh - var(--site-header-height));
  }
}

@media (max-width: 950px) {
  :root { --site-header-height: 142px; }
  .cover, .page-head.vital-hero, .page-head.pro-hero, .habi-hero, .podcast-hero { min-height: 0; }
  .cover { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .cover h1 { font-size: clamp(42px, 5.7vw, 58px); }
  .cover-image img { aspect-ratio: 4/5; }
}

@media (max-width: 850px) {
  .vital-image img { aspect-ratio: 1/1; max-height: 560px; }
  .editorial-grid { grid-template-columns: 1fr; gap: 44px; }
  .editorial-grid .editorial-image { aspect-ratio: 16/9; }
}

@media (max-width: 640px) {
  :root { --site-header-height: 162px; }
  body > header { padding-top: 8px; padding-bottom: 10px; gap: 2px; }
  body > header > nav {
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr);
    align-items: center;
    column-gap: 24px;
    row-gap: 0;
    font-size: 14px;
  }
  body > header > nav > a {
    justify-self: start;
    min-height: 38px;
    padding: 7px 0;
    white-space: nowrap;
  }
  .cover { padding-top: 32px; gap: 24px; }
  .cover h1 { font-size: clamp(38px, 10.1vw, 54px); }
  .cover-image { margin-top: 0; }
  .cover-image img { aspect-ratio: 3/2; }
  .cover .lead { margin: 24px 0; }
  .cover .eyebrow { margin-bottom: 22px; }
  .page-head { padding-bottom: 36px; }
  .vital-hero .lead { margin-bottom: 0; }
  .vital-hero .button { margin-top: 24px; }
  .vital-image img { border-radius: 38px 18px 18px 18px; }
  .doors .door + .door { margin-top: 32px; }
  .doors .door { padding-top: 28px; padding-bottom: 8px; }
  .door h2 { max-width: 24ch; }
  .door p:not(.eyebrow) { margin: 20px 0 24px; }
  .blog-library .doors .door { padding-top: 0; }
  .blog-library .doors .door + .door { margin-top: 38px; }
  .blog-library .topic { padding: 32px 0; }
  .blog-library .topic + .topic { margin-top: 24px; }
  .blog-library .topic > h2 { max-width: 25ch; }
  .article-head .article-image { margin-top: 26px; }
  .article-head h1 { max-width: 23ch; line-height: 1.19; }
  .reading.prose { line-height: 1.8; }
  .habi-game h2 { max-width: 20ch; }
  .habi-game-inner, .podcast-history-inner { padding-top: 48px; padding-bottom: 56px; }
  footer .footer-links { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; row-gap: 4px; align-items: start; }
  footer .footer-links a { width: 100%; min-height: 44px; display: flex; align-items: center; overflow-wrap: anywhere; }
  footer small { display: block; margin: 24px 0; line-height: 1.6; }
  footer { text-align: left; }
}

@media (max-width: 360px) {
  body > header > nav { column-gap: 18px; font-size: 13px; }
  .brand-lockup--intro .brand-lockup__label { font-size: 24px; }
  .podcast-hero .brand-lockup__mark { width: 46vw; }
  .podcast-hero .brand-lockup__label { font-size: 18px; }
  .button { padding: 16px 20px; gap: 14px; }
  .platform-link { gap: 10px; padding: 12px; }
}
.nav-toggle { display: none; }
footer .footer-social { margin: 12px 0 20px; }
footer .footer-social a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 5px; font-size: 16px; }
body > header nav a:focus-visible { outline-offset: -3px; }
@media print {
  body > header { position: static; }
  body > header .nav-toggle { display: none !important; }
  body > header.mobile-nav-ready > nav { display: flex !important; }
}
@media (max-width: 950px) {
  body > header.mobile-nav-ready {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 80px;
    gap: 0 12px;
    padding: 6px 6%;
  }
  .mobile-nav-ready .brand { width: 143px; height: 67px; }
  .mobile-nav-ready .brand img { width: 185px; top: -38px; left: -18px; }
  .mobile-nav-ready .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    min-width: 98px;
    padding: 8px 14px;
    border: 1px solid var(--ink);
    border-radius: 24px;
    color: var(--ink);
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    touch-action: manipulation;
  }
  body > header.mobile-nav-ready > nav { display: none; }
  body > header.mobile-nav-ready.nav-open > nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-basis: 100%;
    gap: 0;
    padding: 8px 0 14px;
    max-height: 65vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body > header.mobile-nav-ready > nav > a {
    display: block;
    min-height: 48px;
    padding: 10px 12px;
    font-size: 16px;
    white-space: normal;
  }
  body > header.mobile-nav-ready > nav > a[aria-current="page"] {
    font-weight: 700;
    border-color: var(--header-accent, var(--gold));
  }
}