/* The Ludorum Club · public site
   Palette is sampled from the club itself: sage wall, printed rates card,
   cognac bench leather, bottle green, parquet. */

:root {
  --paper: #f2ede1;
  --paper-deep: #e8e1d0;
  --ink: #17211b;
  --ink-soft: #4a544d;
  --sage: #879883;
  --sage-deep: #6f826c;
  --bottle: #21382c;
  --cognac: #b4632f;
  --parquet: #d9a566;
  --rule: rgba(23, 33, 27, 0.18);
  --rule-light: rgba(242, 237, 225, 0.28);

  --serif: "EB Garamond", "Garamond", "Times New Roman", serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --varsity: "Graduate", "Rockwell", serif;

  --gutter: clamp(20px, 4vw, 64px);
  --col-gap: clamp(16px, 2vw, 32px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.125rem, 0.4vw + 1.05rem, 1.3125rem);
  line-height: 1.55;
  font-feature-settings: "liga", "onum";
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-weight: 400; margin: 0; }

::selection { background: var(--bottle); color: var(--paper); }

:focus-visible { outline: 2px solid var(--cognac); outline-offset: 3px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper);
  font: 500 0.875rem var(--sans); padding: 10px 14px;
}
.skip:focus { top: 12px; }

/* ---------- Type ---------- */

.display {
  font-size: clamp(2.75rem, 6.4vw, 6.25rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
}
.title {
  font-size: clamp(2.1rem, 4vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
}
.lede {
  font-size: clamp(1.5rem, 2.3vw, 2.25rem);
  line-height: 1.24;
  letter-spacing: -0.01em;
}
.note {
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.varsity {
  font-family: var(--varsity);
  font-feature-settings: normal;
  letter-spacing: 0.02em;
}

.link {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.5s var(--ease-out), color 0.2s;
}
.link:hover { background-size: 0 1px; background-position: 100% 100%; color: var(--cognac); }

.btn {
  display: inline-block;
  font: 500 0.9375rem/1 var(--sans);
  text-decoration: none;
  padding: 18px 26px 17px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, transform 0.2s var(--ease-out);
}
.btn:hover { background: var(--cognac); border-color: var(--cognac); }
.btn:active { transform: scale(0.98); }
.btn--line { background: transparent; color: inherit; border-color: currentColor; }
.btn--line:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--paper:hover { background: var(--cognac); color: var(--paper); border-color: var(--cognac); }

/* ---------- Layout ---------- */

.wrap { padding-inline: var(--gutter); }
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.band { padding-block: clamp(80px, 11vw, 176px); }
.band--tight { padding-block: clamp(56px, 7vw, 104px); }
.band--sage { background: var(--sage); color: var(--ink); }
.band--bottle { background: var(--bottle); color: var(--paper); }
.band--bottle .note { color: rgba(242, 237, 225, 0.66); }
.band--deep { background: var(--paper-deep); }

/* ---------- Header ---------- */

.mast {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter);
  font: 500 0.875rem/1 var(--sans);
  color: var(--ink);
  transition: background-color 0.35s, color 0.35s, padding 0.35s var(--ease-out);
}
.mast.is-solid { background: var(--paper); padding-block: 14px; box-shadow: 0 1px 0 var(--rule); }
.mast--over:not(.is-solid) { color: var(--paper); }

.mast__mark {
  display: block; width: 132px; aspect-ratio: 2500 / 750;
  background: currentColor;
  -webkit-mask: url(/assets/img/logo-wordmark.png) center / contain no-repeat;
  mask: url(/assets/img/logo-wordmark.png) center / contain no-repeat;
  transition: opacity 0.35s;
}
.mast--over:not(.is-solid) .mast__mark { opacity: 0; pointer-events: none; }
.mast__place { position: absolute; left: var(--gutter); transition: opacity 0.35s; opacity: 0; pointer-events: none; }
.mast--over:not(.is-solid) .mast__place { opacity: 1; }

.mast__nav { display: flex; gap: clamp(18px, 2.2vw, 36px); align-items: center; }
.mast__nav a { text-decoration: none; position: relative; padding-block: 6px; }
.mast__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
.mast__nav a:hover::after, .mast__nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.mast__toggle {
  display: none; background: none; border: 0; color: inherit; cursor: pointer;
  font: 500 0.875rem/1 var(--sans); padding: 8px 0;
}

.sheet {
  position: fixed; inset: 0; z-index: 49; background: var(--bottle); color: var(--paper);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 96px var(--gutter) 40px;
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 0.6s var(--ease-out), visibility 0s 0.6s;
}
.sheet.is-open { clip-path: inset(0); visibility: visible; transition: clip-path 0.6s var(--ease-out); }
.sheet a { display: block; text-decoration: none; font-size: clamp(2rem, 9vw, 3rem); line-height: 1.25; letter-spacing: -0.015em; }
.sheet .note { color: rgba(242, 237, 225, 0.66); margin-top: 32px; }
body.sheet-open { overflow: hidden; }
body.sheet-open .mast { color: var(--paper); background: transparent; box-shadow: none; }
body.sheet-open .mast__mark { opacity: 1 !important; }
body.sheet-open .mast__place { opacity: 0 !important; }

@media (max-width: 860px) {
  .mast__nav { display: none; }
  .mast__toggle { display: block; }
}

/* ---------- Home: entry scene ---------- */

.entry { position: relative; isolation: isolate; height: 230vh; background: var(--ink); }
/* Three pinned layers on the same spot: the wall, its copy, then the gym panel wiped in over both */
.entry__stage, .entry__veil, .entry__next { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.entry__veil, .entry__next { margin-top: -100vh; margin-top: -100svh; }
.entry__stage { z-index: 0; }
.entry__veil { z-index: 1; pointer-events: none; }
.entry__veil .entry__copy { pointer-events: auto; }
.entry__next { z-index: 2; }
.entry__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.entry__img--a { object-position: 50% 58%; transform: scale(calc(1 + var(--p, 0) * 0.06)); }
.entry__img--b { object-position: 30% 60%; }
.entry__img--b, .entry__next::before, .entry__next::after {
  clip-path: inset(0 0 0 calc((1 - var(--p, 0)) * 100%));
}
.entry__stage::after, .entry__next::after {
  content: ""; position: absolute; inset: 45% 0 0 0; pointer-events: none;
  background: linear-gradient(to top, rgba(14, 20, 16, 0.78), rgba(14, 20, 16, 0));
}
.entry__stage::before, .entry__next::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 160px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(14, 20, 16, 0.55), rgba(14, 20, 16, 0));
}
.entry__copy {
  position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: clamp(28px, 5vh, 56px);
  color: var(--paper);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.entry__copy h1, .entry__copy .display { max-width: 11ch; margin: 0; }
.entry__side { max-width: 30ch; font: 400 0.9375rem/1.5 var(--sans); }
.entry__side .btn { margin-top: 18px; }
.entry__copy--a { opacity: calc(1 - var(--p, 0) * 3.2); }
.entry__copy--b { opacity: calc((var(--p, 0) - 0.72) * 5); pointer-events: none; }
.entry__copy--b.is-live { pointer-events: auto; }
.entry__copy--b .display { max-width: 14ch; }

@media (prefers-reduced-motion: reduce) {
  .entry { height: 100vh; height: 100svh; }
  .entry__next { display: none; }
  .entry__img--a { transform: none; }
}

/* ---------- Statement ---------- */

.statement .lede { grid-column: 1 / span 7; }
.statement__facts { grid-column: 9 / span 4; align-self: end; }
.facts { list-style: none; margin: 0; padding: 0; font: 400 0.9375rem/1.45 var(--sans); }
.facts li { display: flex; justify-content: space-between; gap: 24px; padding: 13px 0; border-top: 1px solid var(--rule); }
.facts li:last-child { border-bottom: 1px solid var(--rule); }
.facts span:first-child { color: var(--ink-soft); }
.facts span:last-child { text-align: right; }

.statement__img { grid-column: 3 / span 6; margin-top: clamp(56px, 8vw, 128px); }
.statement__aside { grid-column: 10 / span 3; margin-top: clamp(56px, 8vw, 128px); align-self: end; }

@media (max-width: 860px) {
  .statement .lede, .statement__facts, .statement__img, .statement__aside { grid-column: 1 / -1; }
  .statement__facts { margin-top: 40px; }
  .statement__aside { margin-top: 20px; }
}

/* ---------- Figures ---------- */

.fig { margin: 0; }
.fig figcaption { font: 400 0.8125rem/1.5 var(--sans); color: var(--ink-soft); margin-top: 12px; display: flex; gap: 14px; align-items: baseline; text-wrap: pretty; }
.fig figcaption b { font: 400 0.8125rem var(--varsity); color: var(--ink); letter-spacing: 0.04em; white-space: nowrap; }
.band--bottle .fig figcaption { color: rgba(242, 237, 225, 0.66); }
.band--bottle .fig figcaption b { color: var(--paper); }

.frame { overflow: hidden; background: var(--paper-deep); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--32 { aspect-ratio: 3 / 2; }
.frame--45 { aspect-ratio: 4 / 5; }
.frame--11 { aspect-ratio: 1 / 1; }
.frame--219 { aspect-ratio: 21 / 9; }

/* Image uncover. Applied to a handful of frames only, never to text. */
.uncover { clip-path: inset(0 0 100% 0); }
.uncover img { transform: scale(1.12); }
.uncover.is-in { clip-path: inset(0); transition: clip-path 1.1s var(--ease-out); }
.uncover.is-in img { transform: none; transition: transform 1.6s var(--ease-out); }
.uncover--side { clip-path: inset(0 100% 0 0); }
@media (prefers-reduced-motion: reduce) {
  .uncover, .uncover--side { clip-path: none; }
  .uncover img { transform: none; }
}

/* ---------- Film ---------- */

/* Jake's film. The controls are set as text in the site's own type, never icons:
   under the film they read like a line of print, in full screen they sit over it in ink. */
.film__fig { grid-column: 1 / -1; }
.film__player {
  position: relative;
  --film-ink: var(--ink); --film-soft: var(--ink-soft); --film-rule: var(--rule); --film-faint: rgba(23, 33, 27, 0.34);
}
/* On the bottle green band, and in full screen, the rail is set in paper */
.band--bottle .film__player, .film__player.is-fs {
  --film-ink: var(--paper); --film-soft: rgba(242, 237, 225, 0.7); --film-rule: var(--rule-light); --film-faint: rgba(242, 237, 225, 0.42);
}
.film__frame { position: relative; aspect-ratio: 2560 / 1002; overflow: hidden; background: var(--ink); }
.film__frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--ink); }
/* The poster is a picture over the film (AVIF, four sizes), gone once it plays */
.film__poster { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.5s; }
.film__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.film__player.is-live .film__poster { opacity: 0; }
.film__play {
  position: absolute; inset: 0; margin: 0; padding: clamp(14px, 2vw, 28px);
  display: flex; align-items: flex-end;
  background: none; border: 0; color: var(--ink); font: inherit; cursor: pointer;
}
.film__play[hidden] { display: none; }
.film__label {
  display: inline-flex; align-items: baseline; gap: 14px;
  font: 500 0.9375rem/1 var(--sans);
  padding: 18px 26px 17px; background: var(--paper); color: var(--ink);
  transition: background-color 0.25s, color 0.25s, transform 0.2s var(--ease-out);
}
.film__label .varsity { font-size: 0.875rem; }
.film__play:hover .film__label { background: var(--cognac); color: var(--paper); }
.film__play:active .film__label { transform: scale(0.98); }
.film__play:focus-visible { outline: none; }
.film__play:focus-visible .film__label { outline: 2px solid var(--cognac); outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .film__frame:has(.film__play:not([hidden]):hover) .film__poster img { transform: scale(1.02); }
}

/* Captions, drawn by the page so they match it */
.film__cc {
  position: absolute; left: 50%; bottom: clamp(10px, 5%, 44px); z-index: 1; margin: 0;
  transform: translateX(-50%); width: max-content; max-width: 92%;
  padding: 0.3em 0.7em 0.35em; background: rgba(14, 20, 16, 0.82); color: var(--paper);
  font: 500 clamp(0.8125rem, 1.2vw, 1.25rem)/1.4 var(--sans); text-align: center; white-space: pre-line;
  pointer-events: none;
}
.film__cc[hidden] { display: none; }

/* The rail */
.film__rail {
  display: flex; align-items: center; gap: clamp(16px, 2vw, 32px);
  padding-top: 6px; border-bottom: 1px solid var(--film-rule);
  font: 500 0.8125rem/1 var(--sans); color: var(--film-ink);
  animation: film-rail 0.7s var(--ease-out) both;
}
.film__rail[hidden] { display: none; }
@keyframes film-rail { from { opacity: 0; transform: translateY(-6px); } }
.film__fig .film__player + figcaption { margin-top: 14px; }

.film__btn {
  position: relative; display: inline-grid; flex: none;
  margin: 0; padding: 14px 0; background: none; border: 0;
  color: inherit; font: inherit; white-space: nowrap; cursor: pointer;
  transition: transform 0.2s var(--ease-out);
}
.film__btn[hidden] { display: none; }
.film__btn > span { grid-area: 1 / 1; justify-self: start; position: relative; }
.film__btn > span + span, .film__btn.is-alt > span:first-child { visibility: hidden; }
.film__btn.is-alt > span + span { visibility: visible; }
/* "Exit full screen" only ever shows in full screen, so it reserves no room under the film */
.film__btn[data-film-fs] > span + span, .film__btn[data-film-fs].is-alt > span:first-child { display: none; }
.film__btn[data-film-fs].is-alt > span + span { display: block; }
.film__btn > span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
.film__btn:hover > span::after, .film__btn[aria-pressed="true"] > span::after { transform: scaleX(1); transform-origin: left; }
.film__btn:active { transform: translateY(1px); }

.film__time {
  flex: none; min-width: 7.4em;
  font: 400 0.8125rem/1 var(--varsity); letter-spacing: 0.04em; color: var(--film-soft); white-space: nowrap;
}

.film__seek { position: relative; flex: 1; min-width: 80px; height: 40px; }
.film__line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--film-rule); pointer-events: none; }
.film__buffered, .film__played { position: absolute; left: 0; top: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: left; }
.film__buffered { background: var(--film-faint); }
.film__played { top: -1px; height: 3px; background: var(--film-ink); }
.film__seek input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.film__seek input:focus { outline: none; }
.film__seek input:focus-visible { outline: 2px solid var(--cognac); outline-offset: 2px; }
.film__seek input::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
.film__seek input::-moz-range-track { height: 100%; background: transparent; border: 0; }
.film__seek input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 3px; height: 15px; margin-top: 12.5px;
  background: var(--film-ink); border: 0; border-radius: 0; transition: transform 0.25s var(--ease-out);
}
.film__seek input::-moz-range-thumb { width: 3px; height: 15px; background: var(--film-ink); border: 0; border-radius: 0; transition: transform 0.25s var(--ease-out); }
.film__seek input:hover::-webkit-slider-thumb, .film__seek input:active::-webkit-slider-thumb { transform: scaleY(1.45); }
.film__seek input:hover::-moz-range-thumb, .film__seek input:active::-moz-range-thumb { transform: scaleY(1.45); }

/* Full screen: the film fills the screen and the rail floats over it in ink, out of the way while it plays */
.film__player.is-fs { display: flex; align-items: center; background: #0e1410; }
.film__player.is-fs .film__frame { width: 100%; height: 100%; aspect-ratio: auto; background: #0e1410; }
.film__player.is-fs video { object-fit: contain; background: #0e1410; }
.film__player.is-fs .film__rail {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 4px var(--gutter) 10px; border: 0; background: rgba(14, 20, 16, 0.86);
  transition: opacity 0.4s, transform 0.5s var(--ease-out);
}
.film__player.is-fs .film__cc { bottom: 104px; font-size: clamp(1rem, 1.8vw, 2rem); }
.film__player.is-fs.is-idle { cursor: none; }
.film__player.is-fs.is-idle .film__rail { opacity: 0; transform: translateY(100%); pointer-events: none; }
.film__player.is-fs.is-idle .film__cc { bottom: 6%; }

@media (prefers-reduced-motion: reduce) {
  .film__rail { animation: none; }
  .film__btn > span::after { transition: none; }
}

@media (max-width: 700px) {
  .film__fig { margin-inline: calc(var(--gutter) * -1); }
  .film__fig figcaption { padding-inline: var(--gutter); flex-direction: column; gap: 4px; }
  .film__play { padding: 12px; }
  .film__label { padding: 13px 16px 12px; font-size: 0.875rem; }
  /* Phone: the timeline and clock share the top row, the buttons the one below */
  .film__rail { flex-wrap: wrap; column-gap: 18px; padding-inline: var(--gutter); padding-top: 0; }
  .film__seek { order: -2; flex: 1 1 calc(100% - 7.4em - 18px); height: 36px; }
  .film__seek input::-webkit-slider-thumb { margin-top: 10.5px; }
  .film__time { order: -1; min-width: 0; }
  .film__rail [data-film-mute] { margin-left: auto; }
  .film__btn { padding-block: 10px 14px; }
  .film__cc { bottom: 0; width: 100%; max-width: 100%; padding: 4px 10px 5px; font-size: 0.75rem; line-height: 1.35; white-space: normal; }
}

/* ---------- Rooms ---------- */

.rooms__head { grid-column: 1 / span 5; text-wrap: balance; }
.rooms__intro { grid-column: 8 / span 5; align-self: end; }
.rooms__a { grid-column: 1 / span 8; margin-top: clamp(48px, 6vw, 96px); }
.rooms__b { grid-column: 10 / span 3; margin-top: clamp(120px, 16vw, 260px); margin-bottom: calc(clamp(20px, 3vw, 40px) + 24px); }
.rooms__b figcaption { flex-direction: column; gap: 4px; }
.rooms__c { grid-column: 2 / span 4; margin-top: clamp(40px, 6vw, 96px); }
.rooms__d { grid-column: 7 / span 6; margin-top: clamp(-40px, -3vw, -20px); }
@media (max-width: 860px) {
  .rooms__head, .rooms__intro, .rooms__a, .rooms__d { grid-column: 1 / -1; }
  .rooms__intro { margin-top: 20px; }
  .rooms__b { grid-column: 1 / span 7; margin-top: 40px; margin-bottom: 0; }
  .rooms__c { grid-column: 5 / -1; margin-top: 40px; }
  .rooms__d { margin-top: 40px; }
}

/* ---------- Method list with image swap ---------- */

.method__head { grid-column: 1 / span 6; }
.method__list { grid-column: 1 / span 7; margin-top: clamp(40px, 5vw, 80px); list-style: none; padding: 0; }
.method__view { grid-column: 9 / span 4; margin-top: clamp(40px, 5vw, 80px); position: relative; }
.method__sticky { position: sticky; top: 110px; }
.method__sticky .frame { position: relative; aspect-ratio: 4 / 5; background: var(--sage-deep); }
.method__sticky img { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s, transform 1.2s var(--ease-out); transform: scale(1.05); }
.method__sticky img.is-on { opacity: 1; transform: none; }

.pillar { border-top: 1px solid var(--rule); padding: clamp(24px, 3vw, 44px) 0; display: grid; grid-template-columns: 5fr 7fr; gap: var(--col-gap); cursor: default; }
.pillar:last-child { border-bottom: 1px solid var(--rule); }
.pillar h3 { font-size: clamp(1.75rem, 3vw, 2.75rem); letter-spacing: -0.015em; line-height: 1.05; transition: transform 0.5s var(--ease-out); }
.pillar.is-on h3 { transform: translateX(14px); }
.pillar p { margin: 0; max-width: 38ch; text-wrap: pretty; }
.pillar .frame { display: none; }
@media (max-width: 860px) {
  .method__head, .method__list { grid-column: 1 / -1; }
  .method__view { display: none; }
  .pillar { grid-template-columns: 1fr; gap: 12px; }
  .pillar .frame { display: block; aspect-ratio: 3 / 2; margin-top: 12px; }
  .pillar.is-on h3 { transform: none; }
}

/* ---------- Full-bleed plate ---------- */

.plate { position: relative; margin: 0; }
.plate img { width: 100%; height: clamp(360px, 78vh, 900px); object-fit: cover; }

/* ---------- Founder ---------- */

.founder__head { grid-column: 1 / span 5; }
.founder__text { grid-column: 8 / span 5; align-self: end; }
.founder__text p:last-child { margin-bottom: 0; }
.founder__role { font: 400 0.9375rem var(--sans); margin: 14px 0 0; opacity: 0.75; }
/* Train With Us keeps the earlier arrangement, photo beside the text; the home band now carries the film instead */
.founder__img { grid-column: 1 / span 7; }
.founder__img + .founder__text { grid-column: 9 / span 4; align-self: center; }
.founder__text .founder__role { margin-bottom: 28px; }
.founder__film { margin-top: clamp(48px, 6vw, 96px); }
@media (max-width: 860px) {
  .founder__head, .founder__img, .founder__text { grid-column: 1 / -1; }
  .founder__text { margin-top: 20px; }
  .founder__img + .founder__text { grid-column: 1 / -1; margin-top: 32px; }
}

/* ---------- Rates card ---------- */

.rates__photo { grid-column: 1 / span 5; align-self: start; }
.rates__card { grid-column: 7 / span 6; }
.card {
  background: #faf7ef; color: var(--ink);
  padding: clamp(28px, 4vw, 64px);
  box-shadow: 0 1px 0 rgba(23,33,27,0.08), 0 30px 60px -30px rgba(23, 33, 27, 0.35);
}
.card__mark { width: min(260px, 60%); aspect-ratio: 2500 / 750; margin: 0 auto 18px; background: #1b2a44;
  -webkit-mask: url(/assets/img/logo-wordmark.png) center / contain no-repeat; mask: url(/assets/img/logo-wordmark.png) center / contain no-repeat; }
.card__title { text-align: center; font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 28px; }
.card table { width: 100%; border-collapse: collapse; font-size: 1.125rem; }
.card th, .card td { padding: 14px 0; border-top: 1px solid var(--rule); text-align: left; font-weight: 400; vertical-align: baseline; }
.card td:last-child { text-align: right; }
.card td .varsity { font-size: 1.25rem; }
.card tfoot td { font: 400 0.8125rem/1.5 var(--sans); color: var(--ink-soft); padding-top: 18px; text-align: left; }
@media (max-width: 860px) {
  .rates__photo, .rates__card { grid-column: 1 / -1; }
  .rates__card { margin-top: 32px; }
}

/* ---------- Doorway close ---------- */

.close { position: relative; color: var(--paper); min-height: min(92vh, 900px); display: flex; align-items: flex-end; }
.close > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.close::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,20,16,0.72), rgba(14,20,16,0.05) 60%); }
.close__copy { position: relative; z-index: 1; padding: clamp(40px, 6vw, 88px) var(--gutter); display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; width: 100%; }
.close__copy .title { max-width: 14ch; }

/* ---------- Page heads (inner pages) ---------- */

.head { padding-top: clamp(140px, 17vw, 240px); }
.head__title { grid-column: 1 / span 8; }
.head__lede { grid-column: 7 / span 6; margin-top: clamp(28px, 4vw, 64px); }
.head__img { grid-column: 1 / -1; margin-top: clamp(48px, 6vw, 96px); }
@media (max-width: 860px) { .head__title, .head__lede { grid-column: 1 / -1; } }

/* Spreads: unequal image and text pairs */
.spread { align-items: center; row-gap: 32px; }
.spread + .spread { margin-top: clamp(72px, 10vw, 160px); }
.spread__img { grid-column: 1 / span 7; }
.spread__text { grid-column: 9 / span 4; }
.spread--flip .spread__img { grid-column: 6 / span 7; order: 2; }
.spread--flip .spread__text { grid-column: 1 / span 4; order: 1; }
.spread--narrow .spread__img { grid-column: 2 / span 4; }
.spread--narrow .spread__text { grid-column: 7 / span 5; }
.spread__text h2 { margin-bottom: 0.5em; }
/* Optional extras on the Method page: a quiet ruled list, label over the line */
.extras { list-style: none; margin: 28px 0 0; padding: 0; }
.extras li { padding: 16px 0; border-top: 1px solid var(--rule); }
.extras li:last-child { border-bottom: 1px solid var(--rule); }
.extras b { display: block; font: 500 0.875rem var(--sans); margin-bottom: 4px; }
@media (max-width: 860px) {
  .spread__img, .spread__text, .spread--flip .spread__img, .spread--flip .spread__text,
  .spread--narrow .spread__img, .spread--narrow .spread__text { grid-column: 1 / -1; order: 0; }
}

/* Sequence (first weeks) set like a fixture list */
.fixture { list-style: none; margin: 0; padding: 0; counter-reset: fx; }
.fixture li {
  counter-increment: fx;
  display: grid; grid-template-columns: 90px 4fr 7fr; gap: var(--col-gap);
  padding: clamp(22px, 2.6vw, 38px) 0; border-top: 1px solid var(--rule-light);
}
.fixture li:last-child { border-bottom: 1px solid var(--rule-light); }
.fixture li::before { content: counter(fx, decimal-leading-zero); font: 400 1.125rem var(--varsity); opacity: 0.7; padding-top: 0.35em; }
.fixture h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1; letter-spacing: -0.012em; }
.fixture p { margin: 0; max-width: 52ch; }
.fixture .opt { font: 400 0.75rem var(--sans); border: 1px solid currentColor; padding: 2px 7px; margin-left: 10px; vertical-align: middle; opacity: 0.75; white-space: nowrap; }
@media (max-width: 860px) { .fixture li { grid-template-columns: 44px 1fr; } .fixture p { grid-column: 2; } }
.band--deep .fixture li { border-color: var(--rule); }

/* ---------- Forms ---------- */

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--col-gap); }
.form [hidden] { display: none; } /* fields and footer use display:flex, which would otherwise beat the hidden attribute */
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font: 500 0.8125rem var(--sans); }
.field label i { font-style: normal; color: var(--ink-soft); font-weight: 400; }
.field input, .field select, .field textarea {
  font: 400 1.1875rem var(--serif); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink);
  padding: 8px 0 10px; border-radius: 0; width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--cognac); box-shadow: 0 1px 0 var(--cognac); }
.field .err { font: 400 0.8125rem var(--sans); color: #9a2b16; min-height: 1.2em; }
.field.is-bad input, .field.is-bad textarea, .field.is-bad select { border-bottom-color: #9a2b16; }
.form__foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__fail { grid-column: 1 / -1; margin: 0; font: 400 0.875rem/1.5 var(--sans); color: #9a2b16; }
.form__done { grid-column: 1 / -1; align-self: start; border: 1px solid var(--ink); padding: 28px; }
.form__done h3 { font-size: 1.75rem; margin-bottom: 8px; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }

/* ---------- Legal pages ---------- */

.legal__sec { align-items: start; row-gap: 12px; padding-block: clamp(28px, 3.5vw, 48px); border-top: 1px solid var(--rule); }
.legal__sec:last-child { border-bottom: 1px solid var(--rule); }
.legal__sec h2 { grid-column: 1 / span 4; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; letter-spacing: -0.012em; }
.legal__sec > div { grid-column: 6 / span 7; max-width: 62ch; text-wrap: pretty; }
.legal__sec p:last-child { margin-bottom: 0; }
.legal__sec b { font-weight: 500; }
@media (max-width: 860px) { .legal__sec h2, .legal__sec > div { grid-column: 1 / -1; } }

/* ---------- Footer ---------- */

.foot { background: var(--ink); color: var(--paper); padding: clamp(56px, 7vw, 104px) var(--gutter) 28px; }
.foot__mark { width: min(520px, 80%); aspect-ratio: 2500 / 750; background: var(--sage);
  -webkit-mask: url(/assets/img/logo-wordmark.png) left center / contain no-repeat; mask: url(/assets/img/logo-wordmark.png) left center / contain no-repeat; }
.foot__cols { margin-top: clamp(40px, 5vw, 72px); font: 400 0.9375rem/1.7 var(--sans); row-gap: 32px; }
.foot__cols > div:nth-child(1) { grid-column: 1 / span 4; }
.foot__cols > div:nth-child(2) { grid-column: 6 / span 3; }
.foot__cols > div:nth-child(3) { grid-column: 10 / span 3; }
.foot__cols h2 { font: 500 0.8125rem var(--sans); opacity: 0.6; margin-bottom: 10px; }
.foot__cols a { text-decoration: none; }
.foot__cols a:hover { color: var(--parquet); }
.foot__cols ul { list-style: none; margin: 0; padding: 0; }
.foot__base { margin-top: clamp(48px, 6vw, 88px); padding-top: 18px; border-top: 1px solid var(--rule-light); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 400 0.8125rem var(--sans); opacity: 0.7; }
.foot__base a { text-decoration: none; }
.foot__base a:hover { text-decoration: underline; }
.foot__legal { margin-right: auto; margin-left: clamp(0px, 2vw, 24px); display: flex; gap: 16px; }
@media (max-width: 860px) { .foot__legal { margin-left: 0; } }
.foot__company { margin: 14px 0 0; font: 400 0.75rem/1.5 var(--sans); opacity: 0.5; max-width: 72ch; }
.form__foot .note a { white-space: nowrap; }
@media (max-width: 860px) { .foot__cols > div:nth-child(n) { grid-column: 1 / -1; } }

/* Inline column placements collapse to full width on small screens */
@media (max-width: 860px) {
  .grid > [style*="grid-column"] { grid-column: 1 / -1 !important; margin-top: 28px !important; }
  .head__lede { margin-top: 24px; }
}

/* Phone: the painted wall keeps the top of the screen to itself, copy sits below it.
   The photo box is capped by width as well as height, so a tall screen never zooms in far enough to crop the wordmark. */
@media (max-width: 700px) and (orientation: portrait) {
  .entry { --img-h: min(58vh, 118vw); }
  @supports (height: 100svh) { .entry { --img-h: min(58svh, 118vw); } }
  .entry__stage { background: var(--bottle); }
  .entry__img { height: var(--img-h); }
  .entry__img--a { object-position: 50% 50%; }
  /* The veil carries the header shade and the fade into green, over whichever photo is showing */
  .entry__stage::before, .entry__stage::after, .entry__next::before, .entry__next::after { content: none; }
  .entry__veil::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 160px; z-index: 1;
    background: linear-gradient(to bottom, rgba(14, 20, 16, 0.55), rgba(14, 20, 16, 0));
  }
  .entry__veil::after {
    content: ""; position: absolute; inset: calc(var(--img-h) * 0.53) 0 0 0;
    background: linear-gradient(to bottom, rgba(33, 56, 44, 0), var(--bottle) calc(var(--img-h) * 0.46));
  }
  .entry__copy { bottom: 28px; gap: 14px; }
  .entry__side .btn { margin-top: 10px; }
}
/* Phone: the green ground and the wall stay put. The gym panel is ordinary page flow that starts at the
   foot of the photo, so the browser itself slides the gym photo up under the green and over the wall, and
   brings its copy up from below, in step with the thumb. site.js only lifts and fades the first copy. */
@media (max-width: 700px) and (orientation: portrait) and (prefers-reduced-motion: no-preference) {
  .entry { height: auto; }
  .entry__stage { z-index: 1; }
  .entry__veil { z-index: 3; }
  .entry__next { position: relative; z-index: auto; margin-top: calc(var(--img-h) - 100vh); margin-top: calc(var(--img-h) - 100svh); }
  .entry__img--a { transform: none; }
  .entry__img--b { z-index: 2; clip-path: none; }
  .entry__copy--a, .entry__copy--b { opacity: 1; }
  .entry__copy--b { z-index: 4; }
}
/* Very tall screens (and tall previews): the copy sits in the space under the photo, not at the very bottom */
@media (max-width: 700px) and (max-aspect-ratio: 10/21) {
  .entry__copy { top: var(--img-h); bottom: 0; align-content: center; }
}

@media (min-width: 861px) {
  .method__head { grid-row: 1; }
  .method__list { grid-row: 2; }
  .method__view { grid-row: 1 / span 2; margin-top: 0; }
}

/* ---------- Club News ---------- */

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The list of issues, each one set like the printed rates card on the consultation desk */
.issues { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.issue__card {
  display: flex; flex-direction: column; align-items: center; height: 100%;
  background: #faf7ef; color: var(--ink); text-decoration: none; text-align: center;
  padding: clamp(30px, 3.4vw, 52px) clamp(22px, 2.6vw, 40px) clamp(26px, 2.8vw, 42px);
  box-shadow: 0 1px 0 rgba(23, 33, 27, 0.08), 0 30px 60px -30px rgba(23, 33, 27, 0.35);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.issue__mark { display: block; width: min(210px, 72%); aspect-ratio: 2500 / 750; background: #1b2a44;
  -webkit-mask: url(/assets/img/logo-wordmark.png) center / contain no-repeat; mask: url(/assets/img/logo-wordmark.png) center / contain no-repeat; }
.issue__name { margin-top: 16px; font-size: 0.9375rem; letter-spacing: 0.14em; text-transform: uppercase; }
.issue__no { margin: clamp(18px, 2vw, 28px) 0 clamp(12px, 1.4vw, 18px); font: 400 clamp(4.5rem, 7.4vw, 7.5rem)/0.9 var(--varsity); color: var(--bottle); transition: color 0.3s; }
.issue__when { font: 400 0.875rem/1.5 var(--sans); color: var(--ink-soft); }
.issue__contents { display: block; width: 100%; margin: clamp(22px, 2.4vw, 32px) 0 auto; text-align: left; font-size: 1.0625rem; line-height: 1.3; }
.issue__contents span { display: block; padding: 11px 0 12px; border-top: 1px solid var(--rule); text-wrap: pretty; }
.issue__contents span:last-child { border-bottom: 1px solid var(--rule); }
.issue__go {
  margin-top: clamp(24px, 2.6vw, 34px); padding: 16px 22px 15px;
  font: 500 0.9375rem/1 var(--sans); background: var(--ink); color: var(--paper);
  transition: background-color 0.25s;
}
.issue__card:hover .issue__go { background: var(--cognac); }
.issue__card:hover .issue__no { color: var(--cognac); }
.issue__card:active { transform: translateY(-2px) scale(0.995); }
.issue__card:focus-visible { outline: 2px solid var(--cognac); outline-offset: 5px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .issue__card:hover { transform: translateY(-8px); box-shadow: 0 1px 0 rgba(23, 33, 27, 0.08), 0 44px 70px -34px rgba(23, 33, 27, 0.42); }
  /* Fills the strip the lift leaves behind, so a pointer near the bottom edge stays on the card
     instead of dropping off it, and the hover flickering on and off */
  .issue__card { position: relative; }
  .issue__card:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
}
@media (max-width: 1100px) { .issues { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .issues { grid-template-columns: 1fr; } }

/* An issue: title and number, then the contents, then each column with its title held beside it */
.post__title { grid-column: 1 / span 9; grid-row: 1; }
.post__no { grid-column: 11 / span 2; grid-row: 1; justify-self: end; margin: 0.08em 0 0; font: 400 clamp(4rem, 9vw, 9.5rem)/0.8 var(--varsity); color: var(--sage-deep); }
.post__date { grid-column: 1 / span 5; grid-row: 2; align-self: start; margin: clamp(28px, 4vw, 64px) 0 0; }
.post__lede { grid-row: 2; }
.post__label { font: 500 0.8125rem var(--sans); margin-bottom: 12px; }
.post__toc { list-style: none; margin: 0; padding: 0; font-size: 1.125rem; line-height: 1.3; }
.post__toc a { display: flex; gap: 18px; align-items: baseline; padding: 12px 0 13px; border-top: 1px solid var(--rule); text-decoration: none; transition: color 0.2s; }
.post__toc li:last-child a { border-bottom: 1px solid var(--rule); }
.post__toc .varsity { flex: none; min-width: 2.1em; font-size: 0.8125rem; color: var(--ink-soft); transition: color 0.2s; }
.post__toc a span + span { transition: transform 0.45s var(--ease-out); }
.post__toc a:hover, .post__toc a:hover .varsity { color: var(--cognac); }
.post__toc a:hover span + span { transform: translateX(6px); }
.post__toc a:active span + span { transform: translateX(3px); }

.post__sec { align-items: start; padding-block: clamp(56px, 7vw, 112px); border-top: 1px solid var(--rule); scroll-margin-top: 40px; }
.post__sec:first-child { border-top: 0; }
.post__side { grid-column: 1 / span 4; position: sticky; top: 104px; }
.post__n { display: block; margin-bottom: 14px; font: 400 1.125rem var(--varsity); color: var(--ink-soft); }
.post__h { font-size: clamp(1.75rem, 2.8vw, 2.6rem); line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
.post__body { grid-column: 6 / span 7; max-width: 64ch; text-wrap: pretty; }
.post__body > :last-child { margin-bottom: 0; }
.post__body strong { font-weight: 500; }
.post__body h3 { margin: 1.7em 0 0.55em; font-size: clamp(1.4rem, 1.9vw, 1.75rem); line-height: 1.15; letter-spacing: -0.01em; }
.post__body > h3:first-child { margin-top: 0; }
.post__body ul { list-style: none; margin: 0 0 1.2em; padding: 0; }
.post__body li { position: relative; padding: 0.55em 0 0.6em 1.5em; border-top: 1px solid var(--rule); }
.post__body li:last-child { border-bottom: 1px solid var(--rule); }
.post__body li::before { content: ""; position: absolute; left: 0.1em; top: 1.15em; width: 6px; height: 6px; background: var(--cognac); }
.post__fig { margin: clamp(32px, 4vw, 56px) 0; }
.post__fig img { width: 100%; background: var(--paper-deep); }
.post__fig--tall { max-width: min(100%, 440px); }
.post__pull { margin: 1.15em 0; font-size: clamp(1.5rem, 2.3vw, 2.25rem); line-height: 1.24; letter-spacing: -0.01em; font-style: italic; text-wrap: balance; }
.post__sign { margin-top: 1.8em; font-style: italic; }
.post__sign small { display: block; margin-top: 4px; font: 400 0.8125rem/1.5 var(--sans); color: var(--ink-soft); }
.post__small { font: 400 0.875rem/1.65 var(--sans); color: var(--ink-soft); }
.post__small a { color: var(--ink); }
/* The founder's letter opens every issue */
.post__sec:first-child .post__body > p:first-child::first-letter { float: left; margin: 0.06em 0.1em 0 0; font-size: 4.2em; line-height: 0.8; color: var(--bottle); }

.issue-nav .grid { align-items: center; row-gap: 28px; }
.issue-nav__link { grid-row: 1; grid-column: 1 / span 5; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-decoration: none; }
.issue-nav__link--later { grid-column: 8 / span 5; align-items: flex-end; text-align: right; }
.issue-nav__t { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1; letter-spacing: -0.012em; transition: color 0.2s, transform 0.45s var(--ease-out); }
.issue-nav__link:hover .issue-nav__t { color: var(--cognac); }
.issue-nav__link--earlier:hover .issue-nav__t { transform: translateX(-6px); }
.issue-nav__link--later:hover .issue-nav__t { transform: translateX(6px); }
.issue-nav__all { grid-row: 1; grid-column: 6 / span 2; justify-self: center; font: 500 0.9375rem var(--sans); }

@media (max-width: 860px) {
  .post__title { grid-row: 2; }
  .post__no { grid-column: 1 / -1; grid-row: 1; justify-self: start; margin: 0 0 18px; font-size: 3.5rem; }
  .post__date { grid-column: 1 / -1; grid-row: 3; margin-top: 20px; }
  .post__lede { grid-row: 4; }
  .post__side { position: static; grid-column: 1 / -1; margin-bottom: 24px; }
  .post__body { grid-column: 1 / -1; }
  .issue-nav__link, .issue-nav__link--later, .issue-nav__all { grid-row: auto; grid-column: 1 / -1; align-items: flex-start; text-align: left; justify-self: start; }
}