/* The Bodyweight Gym. One stylesheet for the whole site.
   Design rules live in docs/DESIGN_BRIEF.md (section 4). In short: paper page, black
   photographic bands, Archivo + IBM Plex Mono, hairline rules instead of cards,
   one orange word per page, no shadows, no gradients, no rounded corners. */

/* ---------- Fonts (self-hosted, latin subset, OFL) ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-var-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-stretch: 62% 100%;
  font-style: normal;
  font-display: swap;
  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: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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;
}

/* Local fallbacks scaled to Archivo's widths (measured against Arial), so lines wrap the same
   before and after the web font arrives and nothing on the page moves when it swaps in.
   Glyph heights differ a little during the swap; line boxes do not (line-heights are unitless). */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica');
  font-weight: 400 500;
  size-adjust: 98.3%;
}
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Bold');
  font-weight: 600 900;
  size-adjust: 89.6%;            /* UI type: weight 600 at 90% width */
}
@font-face {
  font-family: 'Archivo Display Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Bold');
  font-weight: 600 900;
  size-adjust: 80.3%;            /* display type: weight 800 at 75% width */
}

/* ---------- Tokens ---------- */
:root {
  --paper: #F3F1EC;
  --ink: #141414;
  --ink-2: #4A4A48;                 /* 7.9:1 on paper */
  --rule: rgba(20, 20, 20, 0.16);
  --black: #121214;
  --on-black: #F3F1EC;
  --on-black-2: #A8A8A4;            /* 7.5:1 on black */
  --rule-dark: rgba(243, 241, 236, 0.18);
  --orange: #E87727;                /* accent on black, rules, hover fills (ink text on it) */
  --orange-ink: #A84D17;            /* orange as text on paper: 5.0:1 */
  --teal: #28AAA0;                  /* Book 2 only */
  --teal-ink: #1B766F;              /* teal as text on paper: 4.8:1 */

  /* semantic, swapped inside .band */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --line: var(--rule);
  --tint: rgba(20, 20, 20, 0.04);
  --focus: var(--ink);

  --sans: 'Archivo', 'Archivo Fallback', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Archivo', 'Archivo Display Fallback', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --margin: clamp(20px, 4vw, 48px);
  --gutter: 24px;
  --max: 1440px;
  --section: clamp(56px, 8vw, 120px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --nav: 64px;
}

.band {
  --bg: var(--black);
  --fg: var(--on-black);
  --fg-2: var(--on-black-2);
  --line: var(--rule-dark);
  --tint: rgba(243, 241, 236, 0.06);
  --focus: var(--orange);
  background: var(--bg);
  color: var(--fg);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (min-width: 1200px) { body { font-size: 18px; } }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--orange); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--margin); top: -100px; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 12px 16px; font: 600 14px/1 var(--sans); text-decoration: none;
}
.skip:focus { top: 8px; }

/* ---------- Type ---------- */
.display {
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.01em;
}
.t-hero { font-size: clamp(54px, 9.6vw, 150px); }
.t-h1 { font-size: clamp(52px, 9vw, 140px); }
.t-h2 { font-size: clamp(44px, 7vw, 104px); }
.t-h3 { font-size: clamp(26px, 3vw, 40px); line-height: 0.95; }
.statement {
  text-wrap: pretty;
  font-size: clamp(24px, 3vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  font-weight: 400;
}
.statement--s { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; }
.label {
  text-wrap: balance;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (min-width: 900px) { .label { font-size: 13px; } }
.muted { color: var(--fg-2); }
.hl { font-style: normal; color: var(--orange); }   /* used on black only */
.body-copy { max-width: 62ch; }
.body-copy p + p { margin-top: 1em; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--margin); }
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }
.ruled { border-top: 1px solid var(--line); padding-top: clamp(20px, 2.4vw, 32px); }
.stack > * + * { margin-top: var(--stack, 24px); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--gutter);
}
.split > :last-child { border-left: 1px solid var(--line); padding-left: clamp(24px, 3vw, 48px); }
.split--wide-left { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.split--wide-left > :first-child { padding-right: clamp(0px, 3vw, 48px); }
@media (max-width: 860px) {
  .split, .split--wide-left { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .split > :last-child { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 28px; }
  .split--wide-left > :first-child { padding-right: 0; }
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: var(--gutter);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.section-head .statement { padding-bottom: 0.2em; }
@media (max-width: 860px) {
  .section-head { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
}
.section-label { margin-bottom: clamp(20px, 2.4vw, 32px); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.nav__inner { height: var(--nav); display: flex; align-items: center; gap: 32px; }
.nav__logo { display: flex; align-items: center; min-height: 44px; flex: none; }
.nav__logo img { height: 34px; width: auto; }
.nav__links { display: flex; gap: 20px; margin-left: auto; }
.nav__links a,
.nav__menu {
  display: inline-flex; align-items: center;
  min-height: 44px; min-width: 44px; padding: 0 4px;
  font: 600 14px/1 var(--sans);
  font-stretch: 90%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  transition: text-decoration-color .18s;
}
.nav__links a:hover,
.nav__links a[aria-current="page"],
.nav__menu:hover { text-decoration-color: currentColor; }
.nav__menu {
  display: none;
  margin-left: auto;
  background: none; border: 0; cursor: pointer;
}
@media (max-width: 860px) {
  .nav .nav__links, .nav .nav__cta { display: none; }
  .nav__menu { display: inline-flex; align-items: center; }
}

.menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column;
  padding: 0 var(--margin) 32px;
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu__top { height: var(--nav); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rule); flex: none; }
.menu__links { list-style: none; margin-top: 8px; }
.menu__links a {
  display: block;
  font-size: 44px;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.menu__cta { margin-top: 32px; align-self: flex-start; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  background: var(--fg); color: var(--bg);
  font: 600 14px/1 var(--sans);
  font-stretch: 90%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0; border-radius: 0;
  cursor: pointer;
  transition: background-color .18s, color .18s;
}
.btn:hover { background: var(--orange); color: var(--ink); }

/* text link with a drawn arrow */
.arrow {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  font: 600 14px/1 var(--sans);
  font-stretch: 90%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: text-decoration-thickness .18s;
}
.arrow::after,
.row__arrow::after {
  content: '';
  width: 18px; height: 18px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h16M13 5.5 19.5 12 13 18.5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h16M13 5.5 19.5 12 13 18.5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .18s var(--ease);
}
.arrow:hover { text-decoration-thickness: 2px; }
.arrow:hover::after { transform: translateX(3px); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 32px; }

/* ---------- Rows (the list item for classes, posts, levels, videos) ---------- */
.rows { list-style: none; border-top: 1px solid var(--line); }
.row { border-bottom: 1px solid var(--line); }
.row__link {
  display: grid; align-items: center;
  color: inherit; text-decoration: none;
  padding-block: 16px;
  transition: background-color .18s;
}
.row__link:hover { background: var(--tint); }
.row__link img { transition: opacity .18s; }
.row__link:hover img { opacity: .92; }
.row__arrow { display: flex; justify-content: flex-end; padding-right: 4px; }
.row__arrow::after { width: 22px; height: 22px; }
.row__link:hover .row__arrow::after { transform: translateX(3px); }

/* class rows: [frame] [meta] [title] [arrow] */
.class-row .row__link {
  grid-template-columns: 240px minmax(0, 15em) minmax(0, 1fr) 40px;
  column-gap: var(--gutter);
}
.class-row__thumb { display: block; background: var(--black); }
.class-row__thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.class-row__meta { color: var(--fg-2); display: flex; flex-direction: column; gap: 2px; }
.class-row__title { font-size: clamp(24px, 2.6vw, 36px); line-height: .95; }
.class-row--saveable { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.save {
  min-height: 44px; min-width: 72px; padding: 0 0 0 16px;
  background: none; border: 0; cursor: pointer;
  color: var(--fg-2); text-align: right;
}
.save[aria-pressed="true"] { color: var(--fg); text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 760px) {
  .class-row .row__link { grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 6px; align-items: start; padding-block: 14px; }
  .class-row__thumb { grid-row: 1 / span 2; }
  .class-row__meta { grid-column: 2; grid-row: 1; }
  .class-row__title { grid-column: 2; grid-row: 2; font-size: 22px; }
  .class-row .row__arrow { display: none; }
  .save { min-width: 56px; }
}

/* post rows: [meta] [title + excerpt] [photo] [arrow] */
.post-row .row__link {
  grid-template-columns: minmax(0, 15em) minmax(0, 1fr) 160px 40px;
  column-gap: var(--gutter);
  align-items: start;
  padding-block: 22px;
}
.post-row .label { padding-top: .5em; color: var(--fg-2); }
.post-row__meta { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 760px) {
  .post-row__meta { flex-direction: row; flex-wrap: wrap; column-gap: .5em; }
  .post-row__meta > span + span::before { content: '· '; }
}
.post-row__title { font-size: clamp(26px, 3vw, 40px); line-height: .95; }
.post-row__excerpt { margin-top: 10px; color: var(--fg-2); max-width: 60ch; }
.post-row__photo img { width: 160px; aspect-ratio: 3 / 2; object-fit: cover; }
.post-row .row__arrow { padding-top: .4em; }
.post-row--compact .row__link { grid-template-columns: minmax(0, 15em) minmax(0, 1fr) 40px; }
@media (max-width: 760px) {
  .post-row .row__link,
  .post-row--compact .row__link { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .post-row .label { padding-top: 0; }
  .post-row__photo { display: none; }
  .post-row .row__arrow { display: none; }
}

/* numbered rows (book contents) */
.num-row {
  display: grid;
  grid-template-columns: 4em minmax(0, 1fr);
  column-gap: var(--gutter);
  align-items: baseline;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
}
.num-row .label { color: var(--fg-2); }
.num-row__text { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.05; }

/* ---------- Images and captions ---------- */
.photo { position: relative; background: var(--black); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.caption { margin-top: 12px; color: var(--fg-2); }
.photo__tag {
  position: absolute; left: 0; bottom: 0;
  background: var(--paper); color: var(--ink);
  padding: 8px 12px;
}

/* ---------- Hero and page heads (black bands with a photo) ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100svh - var(--nav));
  display: flex; align-items: flex-end;
}
.hero__photo {
  display: block;                   /* a picture is inline unless positioned; stacked on phones it is not */
  position: absolute; z-index: -1;
  top: 0; right: 0; bottom: 0;
  height: 100%; width: auto;
  aspect-ratio: 915 / 982;          /* the photo's own shape: feet to hands always in frame */
  max-width: 62%;
}
.hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%);
  mask-image: linear-gradient(to right, transparent 0%, #000 34%);
  transform-origin: 50% 100%;     /* parallax scales upward, the hands stay in frame */
  will-change: transform;
}
.hero__inner { width: 100%; padding-block: clamp(28px, 5vh, 88px); }
.hero__title { max-width: 6.3em; margin-top: 20px; font-size: clamp(54px, min(9.4vw, 13vh), 150px); }
.hero__lead { max-width: 26em; margin: 28px 0 32px; font-size: clamp(20px, min(2.1vw, 3.8vh), 28px); }
@media (max-width: 860px) {
  .hero { display: block; min-height: 0; }
  .hero__photo { position: relative; width: 100%; height: auto; max-width: none; max-height: 56svh; }
  .hero__photo img {
    object-position: 50% 100%;
    -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
  }
  .hero__inner { padding-block: 0 56px; margin-top: -8px; position: relative; }
  .hero__title { margin-top: 16px; }
}

.page-head { position: relative; isolation: isolate; overflow: hidden; }
.page-head__inner {
  min-height: clamp(360px, 58vh, 640px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(48px, 7vw, 96px);
}
.page-head__inner > * { max-width: 34rem; }
.page-head__inner .display { max-width: 7em; }
.page-head__photo { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: min(62%, 1120px); }
.page-head__photo img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%);
  mask-image: linear-gradient(to right, transparent 0%, #000 40%);
}
.page-head__photo .photo__tag { left: auto; right: 0; }
@media (max-width: 860px) {
  .page-head__photo { position: relative; width: 100%; aspect-ratio: 16 / 10; }
  .page-head__photo img {
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
  }
  .page-head__inner { min-height: 0; padding-top: 8px; }
}
.page-head--paper .page-head__inner { min-height: 0; padding-bottom: clamp(32px, 4vw, 56px); }

/* ---------- Home: the gym statement ---------- */
.press { max-width: 320px; }
.press img { width: 100%; }
@media (max-width: 860px) { .press { max-width: 240px; } }

/* ---------- Books ---------- */
.book--orange { --book: var(--orange); --book-ink: var(--orange-ink); }
.book--teal { --book: var(--teal); --book-ink: var(--teal-ink); }
.band .book--orange, .band.book--orange { --book-ink: var(--orange); }
.band .book--teal, .band.book--teal { --book-ink: var(--teal); }
.book-num {
  display: inline-block;
  color: var(--book-ink);
  border-top: 3px solid var(--book);
  padding-top: 10px;
}
.book-row { padding-block: clamp(32px, 4vw, 64px); border-top: 1px solid var(--line); }
.book-row:first-of-type { border-top: 0; padding-top: 0; }
.book-row__cover { display: block; max-width: 400px; }
.book-row__cover img { width: 100%; }
.book-row--flip .book-row__cover { margin-left: auto; }
@media (min-width: 861px) {
  .book-row--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .book-row--flip > :first-child { order: 2; }
  .book-row--flip > :last-child { order: 1; border-left: 0; padding-left: 0; border-right: 1px solid var(--line); padding-right: clamp(24px, 3vw, 48px); }
}
.book-row__title { margin-top: 20px; }
.price-line { margin-top: 28px; color: var(--fg-2); }
.price-line span { white-space: nowrap; }

.buy { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 32px; margin-top: 20px; }
.buy__soon {
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--fg-2);
  border-bottom: 1px dashed currentColor;
}

/* book page: cover beside the description */
.book-cover { max-width: 360px; }
.book-cover img { width: 100%; }

/* video facades (demonstrations and the class player) */
.facade {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0; border: 0; cursor: pointer;
  background: var(--black);
}
.facade img { width: 100%; height: 100%; object-fit: cover; }
.facade__play {
  position: absolute; left: 0; bottom: 0;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--paper); color: var(--ink);
  padding: 10px 14px 10px 12px;
}
.facade__play::before {
  content: ''; width: 0; height: 0;
  border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}
.facade:hover img { opacity: .92; }
.player-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }

.demo-row {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  column-gap: var(--gutter);
  align-items: center;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}
.demo-row__title { font-size: clamp(22px, 2.2vw, 30px); line-height: 1; margin-top: 6px; }
.demo-row.is-playing { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
@media (max-width: 760px) { .demo-row { grid-template-columns: 140px minmax(0, 1fr); column-gap: 16px; } }

/* sticky buy bar on book pages (phones) */
.buy-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: none; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--paper); color: var(--ink);
  border-top: 1px solid var(--rule);
  padding: 10px var(--margin) calc(10px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .25s var(--ease), visibility 0s .25s;
}
@media (max-width: 860px) {
  .buy-bar { display: flex; }
  .buy-bar.is-visible { transform: none; visibility: visible; transition: transform .25s var(--ease); }
}

/* ---------- Story ---------- */
.story__photo { aspect-ratio: 4 / 5; }
.story__quote { margin: 20px 0 32px; }
.story__aside { display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: 20px; align-items: end; margin-top: 40px; }
.story__aside img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* ---------- Classes page tools ---------- */
.tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  column-gap: 32px; row-gap: 16px;
  padding-bottom: 20px;
}
.filters { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.filter {
  min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0;
  font: 600 14px/1 var(--sans); font-stretch: 90%;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-2);
  cursor: pointer;
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 2px; text-underline-offset: 8px;
  transition: color .18s, text-decoration-color .18s;
}
.filter:hover { color: var(--fg); }
.filter[aria-pressed="true"] { color: var(--fg); text-decoration-color: currentColor; }
.field {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px;
  border-bottom: 1px solid var(--fg);
}
.field input,
.field select {
  font: 400 17px/1.3 var(--sans);
  color: var(--fg);
  background: transparent;
  border: 0; border-radius: 0;
  padding: 0;
  min-height: 44px;
  min-width: 0;
}
.field input { width: 14em; }
.field input::placeholder { color: var(--fg-2); opacity: 1; }
.field input:focus, .field select:focus { outline: none; }
.field:focus-within { outline: 2px solid var(--focus); outline-offset: 4px; }
.field select { -webkit-appearance: none; appearance: none; padding-right: 22px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23141414' stroke-width='1.8'/%3E%3C/svg%3E") right center / 16px no-repeat; }
.results { padding-block: 14px; color: var(--fg-2); }
@media (max-width: 900px) {
  .tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .filters { grid-column: 1 / -1; }
  .field input { width: 100%; }
}

/* ---------- Video page ---------- */
.video-page { padding-block: clamp(24px, 4vw, 56px) clamp(56px, 7vw, 96px); }
/* the class loads from videos.json after first paint: keep the footer below the fold until it has */
main.band > .video-page { min-height: calc(100svh - var(--nav)); }
.player { max-width: 1200px; }
.video-meta { max-width: 1200px; margin-top: 28px; }
.video-meta__title { margin-top: 14px; }
.video-meta__desc { margin-top: 16px; color: var(--fg-2); max-width: 68ch; }
.toggle {
  margin-top: 20px; min-height: 44px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--fg);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.toggle[aria-pressed="true"] { text-decoration-thickness: 2px; }
.notice { padding: 20px 0; color: var(--fg-2); }

/* ---------- Signup ---------- */
.signup-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px 20px; max-width: 560px; }
.signup-form .field { flex: 1 1 240px; }
.signup-form .field input { width: 100%; }

/* ---------- Footer ---------- */
.footer { padding-block: clamp(56px, 7vw, 104px) 28px; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__signup { padding-bottom: clamp(40px, 5vw, 64px); }
main.band + .footer { padding-top: 0; }
main.band + .footer .footer__signup { border-top: 1px solid var(--line); padding-top: clamp(40px, 5vw, 64px); }
.footer__signup .statement { margin-top: 14px; max-width: 18em; }
.footer__signup-action { align-self: end; }
.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.footer__cols > div { padding: 24px 24px 36px 0; }
.footer__cols > div + div { border-left: 1px solid var(--line); padding-left: 24px; }
.footer__cols ul { list-style: none; margin-top: 14px; }
.footer__cols li a { display: flex; align-items: center; min-height: 44px; }
.footer__cols p:not(.label) { margin-top: 14px; color: var(--fg-2); max-width: 22em; }
.footer__note { border-top: 1px solid var(--line); padding-top: 20px; color: var(--fg-2); }
.footer__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 28px; color: var(--fg-2);
}
.also-by { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
.also-by a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); }
.also-by img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .85; }
.also-by__mark { font: 800 22px/1 var(--sans); font-stretch: 75%; letter-spacing: -0.01em; }
.also-by__mark span { color: var(--orange); }
@media (max-width: 860px) {
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__cols > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .footer__cols > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- Blog post ---------- */
.post-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gutter); }
.post-head__title { font-size: clamp(34px, 4vw, 52px); line-height: 1.08; letter-spacing: -0.015em; font-weight: 400; }
.post-head__meta { margin-top: 24px; color: var(--fg-2); }
.post-head__photo { border-left: 1px solid var(--line); padding-left: clamp(24px, 3vw, 48px); }
.post-head__photo img { width: 100%; max-width: 440px; aspect-ratio: 3 / 2; object-fit: cover; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; color: var(--fg-2); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
@media (max-width: 860px) {
  .post-head { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .post-head__photo { border-left: 0; padding-left: 0; }
}
.prose { max-width: 680px; font-size: 18px; line-height: 1.65; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  font-family: var(--display);
  margin-top: 2.2em;
  font-size: 32px; line-height: .95;
  font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em;
}
.prose h3 { margin-top: 1.8em; font-size: 22px; line-height: 1.2; font-weight: 700; }
.prose h4 { margin-top: 1.5em; font-size: 18px; font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose strong { font-weight: 700; }
.prose blockquote { border-left: 3px solid var(--orange); padding-left: 20px; font-size: 22px; line-height: 1.35; }
.prose img { width: 100%; background: rgba(20, 20, 20, .06); }
.prose figure figcaption { margin-top: 10px; color: var(--fg-2); }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.prose pre { overflow-x: auto; padding: 16px; background: rgba(20, 20, 20, .05); font-size: 15px; }
.prose code { font-family: var(--mono); font-size: .9em; }
.post-foot { margin-top: clamp(48px, 6vw, 80px); }
/* the article arrives after first paint: hold the space so the footer does not jump */
.prose[aria-busy="true"] { min-height: 100svh; }

/* ---------- 404 ---------- */
.lost { min-height: calc(100svh - var(--nav)); display: flex; align-items: center; }
.lost > .wrap { width: 100%; }
.lost__split { align-items: center; }
.lost__title { margin-top: 16px; }
.lost__text .statement { margin-top: 24px; max-width: 20em; }
.lost__links { margin-top: 28px; flex-direction: column; align-items: flex-start; gap: 0; }
.lost__photo { aspect-ratio: 1; max-width: 560px; }

/* ---------- Page heads: spacing ---------- */
.page-head__inner .display { margin-top: 16px; }
.page-head__lead { margin-top: 24px; }
.section--flush { padding-top: 0; }

/* ---------- Book page hero: the cover photograph, right, at its own shape ---------- */
.book-hero__photo {
  display: block;
  position: absolute; z-index: -1;
  top: 0; right: 0; bottom: 0;
  height: 100%; width: auto;
  aspect-ratio: var(--photo-ratio, 1);
  max-width: var(--photo-max, 62%);
}
.book-hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--photo-pos, 50% 50%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 var(--photo-fade, 34%));
  mask-image: linear-gradient(to right, transparent 0%, #000 var(--photo-fade, 34%));
  transform-origin: 50% 100%;
  will-change: transform;
}
.book-hero--handstand { --photo-ratio: 1600 / 1500; --photo-max: 64%; --photo-pos: 50% 100%; }
.book-hero--rings { --photo-ratio: 1080 / 721; --photo-max: 86%; --photo-pos: 70% 50%; --photo-fade: 46%; }
.book-hero__title { max-width: 5.6em; }
.book-hero__lead { margin-bottom: 0; }
.book-hero__prices { margin-top: 24px; max-width: 34em; }
@media (max-width: 860px) {
  .book-hero__photo { position: relative; width: 100%; height: auto; max-width: none; max-height: 56svh; }
  .book-hero__photo img {
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  }
}

/* ---------- Book page: inside, drills, the other book ---------- */
.num-rows { list-style: none; margin-top: 36px; border-top: 1px solid var(--line); }
.inside__time { margin-top: 36px; max-width: 26em; }
.demo-rows { list-style: none; border-top: 1px solid var(--line); }
.demo-row .facade { max-width: 320px; }
.demo-row.is-playing .player-frame { max-width: 1200px; }
.demo-row__text .label { margin-bottom: 4px; }
@media (max-width: 760px) { .demo-row__title { font-size: 22px; } }

.other-book .row__link {
  grid-template-columns: 64px minmax(0, 10em) minmax(0, 1fr) 40px;
  column-gap: var(--gutter);
}
.other-book__cover img { width: 64px; }
.other-book .book-num { justify-self: start; }
.other-book__title { display: block; font-size: clamp(26px, 3vw, 40px); line-height: .95; }
.other-book__line { display: block; margin-top: 8px; color: var(--fg-2); }
@media (max-width: 760px) {
  .other-book .row__link { grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; row-gap: 10px; align-items: start; }
  .other-book__cover { grid-row: 1 / span 2; }
  .other-book .book-num, .other-book__text { grid-column: 2; }
  .other-book .row__arrow { display: none; }
}

/* books index: how each book works */
.how__photo { max-width: 520px; }

.buy-bar__text { margin: 0; color: var(--fg-2); }
.buy-bar__text strong { display: block; color: var(--ink); font-weight: 500; }

/* ---------- Classes page: library ---------- */
.row[hidden] { display: none; }
.js .library:not(.is-ready) > li:nth-child(n+13) { display: none; }
html:not(.js) .tools, html:not(.js) #show-all { display: none; }
.empty { padding-block: 28px; color: var(--fg-2); border-bottom: 1px solid var(--line); }

/* ---------- Video page ---------- */
.player .facade { width: 100%; }
.facade--empty { display: flex; align-items: center; justify-content: center; cursor: default; }
.facade__note { color: var(--on-black-2); padding: 0 20px; text-align: center; }
.video-meta { padding-top: 24px; }
.video-meta__desc a { text-underline-offset: 4px; }
.video-more { margin-top: clamp(56px, 7vw, 96px); max-width: 1200px; }
.video-book {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 48px); align-items: center;
  max-width: 1200px; margin-top: clamp(56px, 7vw, 96px);
}
.video-book__covers { display: flex; gap: 12px; }
.video-book__covers img { width: 120px; }
.video-book__title { margin-top: 14px; }
.video-book__line { margin: 12px 0 8px; max-width: 24em; }
@media (max-width: 600px) {
  .video-book { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .video-book__covers img { width: 96px; }
}

/* ---------- Blog post: spacing ---------- */
.post { padding-top: clamp(28px, 4vw, 56px); }
.post-head { margin-top: 20px; padding-top: 28px; margin-bottom: clamp(40px, 5vw, 64px); }
.post-books { margin-top: clamp(64px, 8vw, 112px); }
.post-next { margin-top: clamp(40px, 5vw, 64px); }

/* ---------- Motion ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}
@media print {
  .nav, .menu, .footer, .buy-bar, .skip { display: none !important; }
  .band { background: none; color: var(--ink); }
}

/* ---------- Small spacing helpers used by the pages ---------- */
.after-list { margin-top: 28px; }
.after-buy { margin-top: 8px; }
.book-row__lead { margin-top: 18px; max-width: 22em; }
.book-row__copy { margin-top: 22px; color: var(--fg-2); }
.save { display: none; }
.js .save { display: inline-flex; align-items: center; justify-content: flex-end; }
@media (max-width: 760px) {
  /* phones: Save sits under the title, so the meta line gets the full text column */
  .class-row--saveable { grid-template-columns: minmax(0, 1fr); }
  .class-row--saveable .row__link { padding-bottom: 2px; }
  .js .class-row--saveable .save { justify-self: start; justify-content: flex-start; margin-left: calc(120px + 16px); padding-left: 0; }
}