@media screen {
  body {
    --reader-gutter: 24px;
  }
  .wrap, .ls-directory-body .ls-directory-shell {
    width: min(1288px, 100%);
    max-width: none;
    margin-inline: auto;
    padding-inline: var(--reader-gutter);
  }
}
@media screen and (max-width: 760px) {
  body { --reader-gutter: 20px; }
}
@media screen and (max-width: 520px) {
  body { --reader-gutter: 18px; }
}
.reader-navigation {
  display: flex;
  align-items: center;
  gap: .55rem 1rem;
  min-width: 0;
}
.reader-navigation .main-nav {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  padding: 0 0 8px;
  flex: 1 1 auto;
  min-width: 0;
  margin-inline-start: -12px;
  margin-inline-end: 0;
}
.reader-directory {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  flex: none;
  min-height: 44px;
  max-width: 55%;
  margin-inline-start: auto;
  color: var(--green);
  overflow-wrap: anywhere;
}
.reader-directory:hover { color: var(--ink); }
.reader-directory[aria-current="page"] { color: var(--ink); }
.reader-menu { display: none; }
.reader-navigation a, .reader-footer a { text-decoration: none; }
.reader-navigation :is(a, button):focus-visible, .reader-footer a:focus-visible,
header .header-tools :is(input, button, select):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
header .mini-search :is(input, button):focus-visible { outline-offset: -2px; }
.footer {
  font-size: .9375rem;
  padding-block: 14px;
}
.reader-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reader-footer > li {
  max-width: 100%;
  padding-inline: .45rem;
  border-inline-start: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.reader-footer > li:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}
.footer .reader-footer a { margin: 0; }
.reader-footer address { font-style: normal; }
.reader-navigation [hidden], .filters > [hidden], .pose-card [hidden] { display: none; }
.yoga-start > .wrap > .yoga-chooser { padding-block: 0; }
.yoga-chooser .series-card h2 { font-size: 21px; font-weight: 500; }
.yoga-start + .hero h2 { font-size: var(--reader-landing-section); font-weight: 450; }
@media screen and (max-width: 700px) {
  .reader-navigation { position: relative; }
  .reader-navigation[data-ready] > .main-nav:not([data-open]) { display: none; }
  .reader-navigation[data-ready] > .main-nav[data-open] {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    z-index: 25;
    inset-block-start: 100%;
    inset-inline-start: 0;
    inline-size: min(22rem, 88vw);
    max-block-size: 60vh;
    overflow: auto;
    padding: .65rem;
    margin: 0;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 6px 18px #173c2920;
  }
  .reader-navigation[data-ready] .reader-menu {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding-inline: .45rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    overflow-wrap: anywhere;
  }
}

@media screen {
  body {
    --reader-page-title: clamp(32px, 3.4vw, 48px);
    --reader-section-title: clamp(24px, 2.2vw, 30px);
    --reader-editorial-subheading: 22px;
    --reader-landing-section: 28px;
    --reader-action-size: 16px;
    font-family: 'Source Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 17px;
  }
  body.ls-directory-body { font-family: 'Source Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }
  main h1, main :is(.page-intro, .pose-summary) h1 {
    font-size: var(--reader-page-title);
    font-weight: 450;
    line-height: 1.16;
  }
  main h2, main :is(.reader, .safety, .aside, .practice-dialog, .practice-membership-grid) h2 {
    font-size: var(--reader-section-title);
    font-weight: 500;
    line-height: 1.25;
  }
  main h3, main :is(.reader, .reading, .aside) h3 {
    font-size: var(--reader-editorial-subheading);
    font-weight: 500;
    line-height: 1.3;
  }
  main :is(.series-card, .pose-card, .practice-plan, .practice-saved-card) h3 {
    font-size: 21px;
    font-weight: 500;
  }
  main .lead, main .page-intro .lead {
    font-size: clamp(18px, 1.45vw, 20px);
    font-weight: 400;
  }
  main :is(.reader, .safety) :is(p, li) { font-size: 17px; }
  main .button {
    font-size: var(--reader-action-size);
    font-weight: 500;
  }
  main button.button { font-size: 17px; }
  main .account-panel button.button[name="action"][value="verify"],
  main .checkout-panel > a.button[href$="/account/"] {
    font-size: 17px;
    font-weight: 400;
  }
  .reader-navigation .reader-directory { font-size: 16px; font-weight: 500; }
  .reader-navigation[data-ready] .reader-menu { font-size: 15px; font-weight: 500; }
  .footer .reader-footer a { font-size: inherit; font-weight: 400; }

  main .hero h1, .ls-directory-body .ls-directory-shell h1 {
    font-size: clamp(32px, 3.6vw, 48px);
    font-weight: 450;
  }
  main:has(> .hero) h2, .ls-directory-shell .ls-directory-group h2 {
    font-size: var(--reader-landing-section);
    font-weight: 450;
  }
  main .hero .lead, .ls-directory-shell .ls-directory-intro { font-size: 19px; }
  .ls-directory-shell .ls-directory-card h3 { font-size: 21px; font-weight: 500; }
}

@media screen and (max-width: 760px) {
  body { --reader-landing-section: 26px; }
  main .hero h1 { font-size: 36px; }
  main .hero .lead { font-size: 18px; }
  main:has(> .hero) .series-card h3 { font-size: 19px; }
  .reader-navigation .reader-directory { font-size: 15px; }
}

@media screen and (max-width: 620px) {
  body {
    --reader-page-title: clamp(30px, 7.6vw, 36px);
    --reader-editorial-subheading: 20px;
  }
}

@media screen and (max-width: 450px) {
  body { --reader-action-size: 15px; }
  main:has(> .hero) .series-card h3 { font-size: 17px; }
}