/* The design's own CSS, verbatim except url()s, written by import_assets.py.
   Do not edit: a new export re-runs the import. Port rules go in port.css. */

/* ==== css/styles.css ==== */
/* ==========================================================================
   The Play Method — shared stylesheet
   Built from Figma "The Play Method V1" / page V2 (1440 frames).
   Desktop values match the frames; tablet and mobile are new.
   ========================================================================== */

:root {
  --cream: #f3e8e3;
  --cream-deep: #ede0da;
  --ink: #0c0a09;
  --char: #161311;
  --wine: #8c1d3f;
  --butter: #f1edb6;
  --gray: #98999b;

  --ink-14: rgba(12, 10, 9, 0.14);
  --rule: rgba(12, 10, 9, 0.12);

  --sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --mono: Menlo, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --max: 1240px;
  --gutter: 100px;
  --inset: 56px; /* bands and hero sit 56px inside the 1240 column */
}

@media (max-width: 1200px) { :root { --gutter: 64px; --inset: 40px; } }
@media (max-width: 900px)  { :root { --gutter: 40px; --inset: 0px; } }
@media (max-width: 640px)  { :root { --gutter: 20px; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
p, blockquote, h1, h2, h3 { text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Type primitives ---------- */
.caps { text-transform: uppercase; }
.eyebrow {
  font-weight: 300;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}
.eyebrow--wine { color: var(--wine); }
.eyebrow--butter { color: var(--butter); }
.mono { font-family: var(--mono); font-weight: 400; }

.display {
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.h2 {
  font-weight: 200;
  font-size: 50px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  line-height: 15px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--solid-cream { background: var(--cream); color: var(--ink); padding: 17px 30px; }
.btn--solid-cream:hover { background: var(--butter); }
.btn--ghost-cream { border: 1px solid rgba(243, 232, 227, 0.45); color: var(--cream); padding: 16px 31px; }
.btn--ghost-cream:hover { border-color: var(--cream); background: rgba(243, 232, 227, 0.08); }
.btn--band { background: var(--cream); color: var(--wine); padding: 17px 34px; }
.btn--band:hover { background: var(--butter); }
.btn--outline {
  border: 1px solid rgba(12, 10, 9, 0.35);
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.24em;
  padding: 11px 19px;
}
.btn--outline:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 56px 17px;
  background: rgba(243, 232, 227, 0.94);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-bottom: 1px solid rgba(12, 10, 9, 0.1);
}
.brand img { width: 85px; height: auto; }

.nav { display: flex; align-items: center; gap: 32px; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a,
.nav-cta {
  font-size: 10.5px;
  line-height: 15px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-links a { transition: color .2s ease, opacity .2s ease; }
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--wine); }
.nav-cta {
  background: var(--ink);
  color: var(--cream);
  padding: 11px 20px;
  transition: background-color .2s ease;
}
.nav-cta:hover { background: var(--wine); }
.nav-toggle {
  display: none;
  font-size: 10.5px;
  line-height: 15px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 11px 0 11px 4px;
}

/* Home: transparent header over the hero */
.site-header--overlay {
  position: absolute;
  left: 0; right: 0;
  padding: 22px 56px 23px;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
  color: var(--cream);
}
.site-header--overlay .nav-links a:hover { color: var(--cream); opacity: .7; }
.site-header--overlay .nav-cta {
  background: transparent;
  border: 1px solid var(--cream);
  padding: 11px 20px;
  color: var(--cream);
}
.site-header--overlay .nav-cta:hover { background: var(--cream); color: var(--ink); }

@media (max-width: 720px) {
  .site-header, .site-header--overlay { padding-inline: var(--gutter); }
  .nav { gap: 18px; }
  .nav-toggle { display: inline-block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 28px var(--gutter) 32px;
    background: var(--cream);
    border-bottom: 1px solid rgba(12, 10, 9, 0.1);
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { font-size: 12px; }
  .site-header--overlay .nav-links { background: var(--ink); border-color: rgba(243, 232, 227, 0.14); }
}

/* ==========================================================================
   Shared sections
   ========================================================================== */

/* Page intro (Book, About, Journal) */
.page-head { padding: 96px 0 53px; border-bottom: 1px solid var(--rule); }
.page-head--flush { border-bottom: 0; padding-bottom: 0; }
.page-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 48px;
}
.page-head__title {
  margin-top: 23px;
  font-weight: 200;
  font-size: 72px;
  line-height: 0.98;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.page-head__lede {
  max-width: 342px;
  font-size: 17.5px;
  line-height: 1.7;
  color: rgba(12, 10, 9, 0.72);
}

/* Section header row: big caps title + small aside */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 32px;
}
.section-head__aside {
  font-size: 10.5px;
  line-height: 15px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--wine);
}
a.section-head__aside { border-bottom: 1px solid transparent; transition: border-color .2s ease; }
a.section-head__aside:hover { border-bottom-color: currentColor; }

/* Wine CTA band */
.band { background: var(--wine); color: var(--cream); }
.band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 40px;
  padding: 58px var(--inset);
}
.band__eyebrow { font-size: 10px; line-height: 14px; letter-spacing: 0.38em; text-transform: uppercase; color: var(--butter); }
.band__title {
  margin-top: 12px;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 300;
}

/* Email capture (Home CTA, Journal newsletter) */
.capture { display: flex; gap: 12px; width: 100%; margin-inline: auto; }
.capture input {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  padding: 0 19px;
  background: transparent;
  border: 1px solid rgba(243, 232, 227, 0.45);
  border-radius: 0;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--cream);
  transition: border-color .2s ease;
}
.capture input::placeholder { color: rgba(243, 232, 227, 0.6); }
.capture input:focus { outline: none; border-color: var(--cream); }
.capture button {
  flex: 0 0 auto;
  height: 54px;
  padding: 0 30px;
  background: var(--cream);
  color: var(--ink);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  transition: background-color .2s ease;
}
.capture button:hover { background: var(--butter); }
.capture__note { margin-top: 16px; font-size: 13.5px; color: var(--butter); }
.capture__note:empty { display: none; }

/* Footer */
.site-footer { background: var(--ink); color: var(--gray); padding: 80px 0; }
.site-footer--ruled { border-top: 1px solid rgba(243, 232, 227, 0.14); }
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px; }
.footer-brand img { width: 210px; height: auto; }
.footer-tagline { margin-top: 18px; font-size: 9.5px; line-height: 14px; letter-spacing: 0.34em; text-transform: uppercase; }
.footer-col h2 { font-size: 10px; line-height: 19px; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 300; color: var(--butter); }
.footer-col ul { margin-top: 12px; }
.footer-col li { font-size: 13.5px; line-height: 25.65px; }
.footer-col a { color: var(--cream); transition: color .2s ease; }
.footer-col a:hover { color: var(--butter); }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .page-head { padding: 64px 0 40px; }
  .page-head--flush { padding-bottom: 0; }
  .page-head__title { font-size: 46px; }
  .page-head__lede { font-size: 16.5px; }
  .h2 { font-size: 34px; }
  .band__inner { padding-block: 48px; }
  .band__title { font-size: 24px; }
  .capture { flex-direction: column; }
  .capture button { width: 100%; }
  .site-footer { padding: 64px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .footer-brand img { width: 168px; }
}

/* ==========================================================================
   Home
   ========================================================================== */

/* Hero */
.hero {
  position: relative;
  min-height: 900px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
}
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__stripes {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(243, 232, 227, 0.05) 0 1px, transparent 1px 13px);
}
.hero__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 10, 9, 0.62) 0%, rgba(12, 10, 9, 0.28) 38%, rgba(12, 10, 9, 0.82) 100%);
}
.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 0 var(--inset) 64px;
}
.hero__eyebrow { font-size: 10.5px; line-height: 15px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(243, 232, 227, 0.72); }
.hero__logo { width: 620px; max-width: 100%; height: auto; }
.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 40px;
  padding-top: 37px;
  border-top: 1px solid rgba(243, 232, 227, 0.22);
}
.hero__lede { max-width: 449px; font-size: 18px; line-height: 26px; color: rgba(243, 232, 227, 0.9); }
.hero__lede strong { font-weight: 500; }
.hero__lede + .hero__lede { margin-top: 26px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Statement */
.statement { padding: 120px 0 121px; border-bottom: 1px solid var(--rule); }
.statement__inner { max-width: 1000px; margin-inline: auto; }
.statement__quote { font-family: var(--serif); font-weight: 300; font-size: 44px; line-height: 1.28; }
.statement__caption { margin-top: 40px; font-size: 10.5px; line-height: 15px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--wine); }

/* Five elements */
.elements { padding: 120px 0 140px; }
.elements .h2 { line-height: 72px; }
.elements__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  padding-block: 1px;
  background: var(--ink-14);
  border-block: 1px solid var(--ink-14);
}
.element {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-height: 284px;
  padding: 32px 24px 38px;
  background: var(--cream);
}
.element__num { font-size: 10.5px; line-height: 14px; color: rgba(12, 10, 9, 0.55); }
.element__icon { width: 44px; height: 44px; }
.element__title { font-size: 20px; line-height: 29px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 300; }
.element__text { margin-top: 9px; font-size: 13.5px; line-height: 21.87px; color: rgba(12, 10, 9, 0.72); }

/* They Box, You Flow */
.split-dark { background: var(--ink); color: var(--cream); padding: 120px 0; }
.split-dark__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: center; }
.split-dark__media { aspect-ratio: 1 / 1; background: var(--char); overflow: hidden; }
.split-dark__media img { width: 100%; height: 100%; object-fit: cover; }
.split-dark__body { display: flex; flex-direction: column; gap: 22px; }
.split-dark__eyebrow { font-size: 10.5px; line-height: 15px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--butter); }
.split-dark__title { font-weight: 200; font-size: 62px; line-height: 1.02; letter-spacing: 0.04em; text-transform: uppercase; }
.split-dark__text { max-width: 414px; padding-top: 5px; font-size: 17.5px; line-height: 1.7; color: rgba(243, 232, 227, 0.84); }
.facts {
  max-width: 520px;
  margin-top: 4px;
  display: grid;
  gap: 1px;
  padding-top: 1px;
  background: rgba(243, 232, 227, 0.18);
}
.facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 2px;
  background: var(--ink);
  font-size: 12.5px;
  line-height: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.facts dt { color: rgba(243, 232, 227, 0.6); }

/* This week */
.week { padding: 120px 0; }
.week__table { margin-top: 48px; display: grid; gap: 1px; background: var(--ink-14); }
.week__row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) 93px;
  align-items: center;
  column-gap: 28px;
  min-height: 91px;
  padding: 26px 2px;
  background: var(--cream);
}
.week__day { font-size: 12px; letter-spacing: 0.1em; color: rgba(12, 10, 9, 0.62); }
.week__name { font-size: 21px; line-height: 30px; letter-spacing: 0.1em; text-transform: uppercase; }
.week__level { font-size: 13.5px; color: rgba(12, 10, 9, 0.7); }
.week__venue a {
  font-size: 13.5px;
  text-decoration: underline;
  text-decoration-color: rgba(12, 10, 9, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s ease;
}
.week__venue a:hover { text-decoration-color: var(--ink); }
.week__time { font-size: 13.5px; letter-spacing: 0.1em; }
.week__row .btn--outline { justify-self: start; }

/* Founder */
.founder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--ink); color: var(--cream); }
.founder__copy { padding: 120px 84px 80px; }
.founder__eyebrow { font-size: 10px; line-height: 14px; letter-spacing: 0.38em; text-transform: uppercase; color: rgba(243, 232, 227, 0.6); }
.founder__quote { margin-top: 34px; max-width: 540px; font-family: var(--serif); font-weight: 300; font-size: 48px; line-height: 1.16; }
.founder__rule { width: 64px; height: 1px; margin: 38px 0; background: rgba(243, 232, 227, 0.5); border: 0; }
.founder__name { font-size: 11px; line-height: 16px; letter-spacing: 0.3em; text-transform: uppercase; }
.founder__media { position: relative; min-height: 560px; background: var(--char); overflow: hidden; }
.founder__media > img, .founder__media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.founder__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12, 10, 9, 0.9) 0%, rgba(12, 10, 9, 0) 46%);
  pointer-events: none;
}
.founder__play {
  position: absolute;
  right: 41px; bottom: 38px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.founder__play img { width: 46px; height: 46px; transition: transform .3s ease; }
.founder__play:hover img { transform: scale(1.06); }

/* Play Collective */
.collective { padding: 120px 0; }
.collective__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.collective__head .h2 { line-height: 1; }
.collective__lede { max-width: 383px; font-size: 16.5px; line-height: 1.65; color: rgba(12, 10, 9, 0.78); }
.collective__grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 212px));
  justify-content: space-between;
  gap: 40px 24px;
}
.person__photo { aspect-ratio: 212 / 265; background: var(--char); overflow: hidden; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__name { margin-top: 14px; font-size: 15px; line-height: 22px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 300; }
.person__role { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.person__teaches { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 16px; line-height: 16px; color: var(--wine); }
.person__discipline { font-size: 10.5px; line-height: 15px; letter-spacing: 0.2em; text-transform: uppercase; }

/* Come play */
.cta { background: var(--wine); color: var(--cream); padding: 132px 0; text-align: center; }
.cta__inner { max-width: 900px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cta__kicker { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 38px; line-height: 46px; color: var(--butter); }
.cta__title { font-weight: 200; font-size: 76px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; }
.cta__text { max-width: 432px; padding-top: 23px; font-size: 18px; line-height: 1.7; color: rgba(243, 232, 227, 0.9); }
.cta .capture { max-width: 560px; padding-top: 18px; }

/* Home — responsive */
@media (max-width: 1100px) {
  .elements__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elements__grid .element:last-child { grid-column: 1 / -1; }
  .element { min-height: 0; }
  .collective__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .week__row { grid-template-columns: 56px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; column-gap: 20px; }
  .founder__copy { padding: 96px 56px 72px; }
  .founder__quote { font-size: 40px; }
}
@media (max-width: 900px) {
  .hero { min-height: 760px; }
  .statement { padding: 96px 0; }
  .statement__quote { font-size: 34px; }
  .elements { padding: 96px 0; }
  .split-dark { padding: 96px 0; }
  .split-dark__grid { grid-template-columns: 1fr; gap: 48px; }
  .split-dark__title { font-size: 48px; }
  .week { padding: 96px 0; }
  .week__row {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas:
      "day  name  reserve"
      "time level reserve"
      ".    venue reserve";
    row-gap: 4px;
    padding: 22px 2px;
  }
  .week__day { grid-area: day; }
  .week__time { grid-area: time; font-size: 12px; }
  .week__name { grid-area: name; font-size: 18px; line-height: 26px; }
  .week__level { grid-area: level; }
  .week__venue { grid-area: venue; }
  .week__row .btn--outline { grid-area: reserve; align-self: center; }
  .founder { grid-template-columns: 1fr; }
  .founder__copy { padding: 88px var(--gutter) 64px; }
  .founder__media { min-height: 0; aspect-ratio: 720 / 560; }
  .collective { padding: 96px 0; }
  .cta { padding: 104px 0; }
  .cta__title { font-size: 60px; }
}
@media (max-width: 640px) {
  .hero { min-height: 680px; }
  .hero__content { padding-bottom: 40px; gap: 24px; }
  .hero__lede { font-size: 16.5px; line-height: 25px; }
  .hero__actions, .hero__actions .btn { width: 100%; }
  .hero__actions .btn { flex: 1 1 auto; }
  .statement { padding: 72px 0; }
  .statement__quote { font-size: 27px; }
  .elements { padding: 72px 0; }
  .elements__grid { margin-top: 40px; grid-template-columns: 1fr; }
  .split-dark { padding: 72px 0; }
  .split-dark__title { font-size: 40px; }
  .split-dark__text { font-size: 16.5px; }
  .week { padding: 72px 0; }
  .week__table { margin-top: 32px; }
  .week__row { grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 14px; }
  .founder__copy { padding: 72px var(--gutter) 56px; }
  .founder__quote { font-size: 32px; }
  .founder__play { right: 20px; bottom: 20px; }
  .collective { padding: 72px 0; }
  .collective__grid { margin-top: 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .person__name { font-size: 13px; letter-spacing: 0.12em; }
  .cta { padding: 80px 0; }
  .cta__kicker { font-size: 30px; line-height: 36px; }
  .cta__title { font-size: 44px; }
  .cta__text { font-size: 16.5px; }
}

/* ==========================================================================
   Book a class
   ========================================================================== */
.schedule { padding: 56px 0 120px; }
.schedule__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; align-items: start; }

.tabs {
  grid-column: 1 / -1;
  display: flex;
  gap: 1px;
  padding: 1px;
  background: var(--ink-14);
  border: 1px solid var(--ink-14);
}
.tab {
  flex: 1 1 0;
  padding: 16px 12px;
  background: var(--cream);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.tab:hover { background: var(--cream-deep); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--cream); }

.day__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.day__title { font-size: 22px; line-height: 32px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 300; }
.day__count { font-size: 10.5px; letter-spacing: 0.1em; color: rgba(12, 10, 9, 0.55); }
.day__list {
  margin-top: 26px;
  display: grid;
  gap: 1px;
  padding-block: 1px;
  background: var(--ink-14);
  border-block: 1px solid var(--ink-14);
}
.slot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 147px)) auto;
  align-items: center;
  gap: 22px;
  padding: 26px 2px;
  background: var(--cream);
}
.slot__time { font-size: 13px; letter-spacing: 0.08em; }
.slot__name { font-size: 20px; line-height: 1.45; letter-spacing: 0.1em; text-transform: uppercase; }
.slot__level { margin-top: 5px; font-size: 13px; color: rgba(12, 10, 9, 0.62); }
.slot__teacher { font-size: 13.5px; color: rgba(12, 10, 9, 0.72); }
.slot__mats { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(12, 10, 9, 0.6); }
.slot__mats.is-low { color: var(--wine); }
.slot .btn--outline { padding: 11px 20px; }
.slot .btn--outline[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.pricing {
  position: sticky;
  top: 102px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 1px;
  background: var(--ink-14);
  border: 1px solid var(--ink-14);
}
.pricing__offer { display: flex; flex-direction: column; gap: 11px; padding: 32px; background: var(--butter); }
.pricing__offer .eyebrow { letter-spacing: 0.34em; }
.pricing__offer h2 { font-size: 24px; line-height: 28.8px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 300; }
.pricing__text, .tier p { font-size: 13.5px; line-height: 21.6px; color: rgba(12, 10, 9, 0.72); }
.tier { display: flex; flex-direction: column; gap: 10px; padding: 30px; background: var(--cream); }
.tier__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.tier__name { font-size: 13px; line-height: 19px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 300; }
.tier__price { font-size: 15px; }
.tier p { color: rgba(12, 10, 9, 0.68); }
.pricing__studio { display: flex; flex-direction: column; gap: 9px; padding: 30px; background: var(--ink); color: var(--cream); }
.pricing__studio .eyebrow { letter-spacing: 0.34em; }
.pricing__studio address { font-style: normal; font-size: 13.5px; line-height: 24.3px; }

@media (max-width: 1000px) {
  .schedule__grid { grid-template-columns: 1fr; gap: 56px; }
  .pricing { position: static; }
}
@media (max-width: 760px) {
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; min-width: 104px; }
  .slot {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
      "time class  btn"
      ".    meta   btn";
    gap: 8px 14px;
    padding: 22px 2px;
  }
  .slot__time { grid-area: time; align-self: start; padding-top: 4px; }
  .slot__class { grid-area: class; }
  .slot__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
  .slot .btn--outline { grid-area: btn; }
  .slot__name { font-size: 17px; }
}
@media (min-width: 761px) {
  .slot__meta { display: contents; }
}

/* ==========================================================================
   About
   ========================================================================== */
.about-head { padding-bottom: 73px; }
.about-head__title { font-size: 78px; line-height: 0.96; }
.about-head__cols {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: end;
}
.about-head__quote { font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: 1.28; }
.about-head__body { display: flex; flex-direction: column; gap: 17px; }
.about-head__body p { font-size: 16.5px; line-height: 1.75; color: rgba(12, 10, 9, 0.74); }

.studio { padding: 72px 0 74px; }
.studio .h2 { font-size: 42px; }
.studio .section-head__aside { font-size: 10px; }
.mosaic { margin-top: 38px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mosaic__col { display: grid; gap: 16px; }
.tile { position: relative; background: var(--char); overflow: hidden; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile--ph { display: grid; place-items: center; }
.tile--ph img { width: 38%; height: auto; object-fit: contain; opacity: 0.16; }
.tile--300 { aspect-ratio: 402.66 / 300; }
.tile--520 { aspect-ratio: 402.66 / 520; }
.tile--460 { aspect-ratio: 402.66 / 460; }
.tile--360 { aspect-ratio: 402.66 / 360; }
.tile--400 { aspect-ratio: 402.66 / 400; }
.tile--420 { aspect-ratio: 402.66 / 420; }

.values { background: var(--ink); color: var(--cream); padding: 104px 0; }
.values__grid { margin-top: 50px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 52px; }
.value { padding-top: 21px; border-top: 1px solid rgba(243, 232, 227, 0.3); }
.value__num { font-size: 10.5px; line-height: 14px; color: rgba(243, 232, 227, 0.5); }
.value__title { margin-top: 14px; font-size: 22px; line-height: 32px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 300; }
.value__text { margin-top: 11px; font-size: 14px; line-height: 1.68; color: rgba(243, 232, 227, 0.74); }

@media (max-width: 900px) {
  .about-head__title { font-size: 60px; }
  .about-head__cols { grid-template-columns: 1fr; gap: 32px; }
  .mosaic { display: block; columns: 2; column-gap: 16px; }
  .mosaic__col { display: contents; }
  .tile { break-inside: avoid; margin-bottom: 16px; }
  .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .about-head { padding-bottom: 56px; }
  .about-head__title { font-size: 44px; }
  .about-head__quote { font-size: 27px; }
  .studio { padding: 56px 0; }
  .studio .h2 { font-size: 30px; }
  .mosaic { columns: 1; }
  .values { padding: 72px 0; }
  .values__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   Journal
   ========================================================================== */
.journal-head .page-head__lede { max-width: 324px; }
.filters {
  margin-top: 49px;
  display: flex;
  gap: 1px;
  padding: 1px;
  background: var(--ink-14);
  border: 1px solid var(--ink-14);
}
.filter {
  flex: 1 1 0;
  padding: 15px 12px;
  background: var(--cream);
  font-size: 10.5px;
  line-height: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.filter:hover { background: var(--cream-deep); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--cream); }

.lead-story {
  margin-top: 64px;
  padding-top: 41px;
  border-top: 1px solid rgba(12, 10, 9, 0.25);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: center;
}
.lead-story__media { aspect-ratio: 592 / 444; background: var(--char); overflow: hidden; }
.lead-story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.lead-story:hover .lead-story__media img { transform: scale(1.02); }
.story-meta { display: flex; gap: 16px; font-size: 10px; line-height: 14px; letter-spacing: 0.28em; text-transform: uppercase; }
.story-meta__tag { color: var(--wine); }
.story-meta__time { color: rgba(12, 10, 9, 0.5); }
.lead-story__title { margin-top: 22px; font-family: var(--serif); font-weight: 300; font-size: 44px; line-height: 1.14; }
.lead-story__dek { margin-top: 20px; max-width: 432px; font-size: 16.5px; line-height: 28px; color: rgba(12, 10, 9, 0.72); }
.read-more { margin-top: 28px; display: flex; align-items: center; gap: 14px; font-size: 10.5px; line-height: 15px; letter-spacing: 0.26em; text-transform: uppercase; }
.read-more::after { content: ""; width: 42px; height: 1px; background: var(--ink); transition: width .3s ease; }
.lead-story:hover .read-more::after { width: 64px; }

.posts-clip { margin-top: 88px; overflow: hidden; }
.posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-right: -1px; /* hides the last column's divider so there's no outer side rule */
  border-top: 1px solid var(--ink-14);
}
.post {
  display: flex;
  flex-direction: column;
  gap: 21px;
  min-height: 280px;
  padding: 36px 28px;
  box-shadow: inset -1px 0 0 var(--ink-14), inset 0 -1px 0 var(--ink-14);
  transition: background-color .2s ease;
}
.post:hover { background: var(--cream-deep); }
.post[hidden] { display: none; }
.post .story-meta { justify-content: space-between; font-size: 9.5px; letter-spacing: 0.26em; }
.post__title { font-size: 23px; line-height: 28.75px; letter-spacing: 0.02em; font-weight: 300; }
.post__dek { font-size: 13.5px; line-height: 22.28px; color: rgba(12, 10, 9, 0.7); }
.post__date { margin-top: auto; padding-top: 15px; font-size: 10.5px; letter-spacing: 0.1em; color: rgba(12, 10, 9, 0.5); }
.posts__empty { padding: 48px 0; font-size: 15px; color: rgba(12, 10, 9, 0.6); }

.newsletter { margin-top: 120px; background: var(--ink); color: var(--cream); padding: 104px 0; text-align: center; }
.newsletter__inner { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 11px; }
.newsletter__kicker { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 34px; line-height: 41px; color: var(--butter); }
.newsletter__title { font-weight: 200; font-size: 54px; line-height: 55px; letter-spacing: 0.04em; text-transform: uppercase; }
.newsletter .capture { max-width: 520px; padding-top: 23px; }

@media (max-width: 900px) {
  .lead-story { grid-template-columns: 1fr; gap: 32px; }
  .lead-story__title { font-size: 36px; }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posts-clip { margin-top: 64px; }
}
@media (max-width: 760px) {
  .filters { overflow-x: auto; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: 0 0 auto; min-width: 96px; }
}
@media (max-width: 640px) {
  .filters { margin-top: 36px; }
  .lead-story { margin-top: 40px; padding-top: 32px; }
  .lead-story__title { font-size: 30px; }
  .posts { grid-template-columns: 1fr; }
  .post { min-height: 0; padding: 28px 2px; }
  .newsletter { margin-top: 80px; padding: 80px 0; }
  .newsletter__kicker { font-size: 28px; line-height: 34px; }
  .newsletter__title { font-size: 38px; line-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Fidelity tweaks to match Figma section rhythm */
.week .h2, .collective .h2 { line-height: 72px; }
.collective .h2 { line-height: 50px; }
.cta .capture { padding-top: 32px; }
.studio .h2 { line-height: 61px; }
.mosaic { padding-bottom: 16px; }
@media (max-width: 640px) {
  .week .h2, .studio .h2 { line-height: 1.2; }
  .cta .capture { padding-top: 20px; }
}
@media (max-width: 640px) {
  .element {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas: "num text" "icon text";
    align-content: start;
    column-gap: 24px;
    row-gap: 10px;
    padding: 28px 2px 30px;
  }
  .element__num { grid-area: num; }
  .element__icon { grid-area: icon; }
  .element > div { grid-area: text; }
}
/* Founder video is portrait; keep the face in frame inside the landscape slot */
.founder__media > video { object-position: center 22%; }