/* =========================================================
   BRICKWORKS · gym showcase
   One family (Archivo), its width axis does the work:
   condensed 62% for display, normal width for reading.
   Shape rule: everything is square (radius 0). No exceptions.
   ========================================================= */

:root {
  --bg: oklch(0.965 0.003 40);
  --surface: oklch(0.92 0.006 40);
  --line: oklch(0.82 0.008 40);
  --ink: oklch(0.17 0.012 35);
  --muted: oklch(0.42 0.015 35);
  --brick: oklch(0.52 0.16 33);          /* the one accent, used as a drench */
  --on-brick: oklch(0.98 0.01 60);
  --brick-deep: oklch(0.38 0.12 33);

  --font: "Archivo", system-ui, sans-serif;
  --pad: clamp(20px, 5vw, 72px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --z-header: 20;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--font); font-stretch: 100%; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
section[id] { scroll-margin-top: calc(72px + env(safe-area-inset-top, 0px)); }
:focus-visible { outline: 3px solid var(--brick); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; text-decoration: none; }
.skip:focus { top: 12px; }

/* Display type: condensed, heavy, upper case for short lines only */
.display, h1, h2, .wordmark, .footer-mark, .amt, .marquee span {
  font-stretch: 62%; font-weight: 850; text-transform: uppercase; letter-spacing: -0.01em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px; border: 2px solid transparent;
  font: 700 1rem/1 var(--font); font-stretch: 100%; text-transform: uppercase; letter-spacing: 0.04em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-ink:hover { background: oklch(0.3 0.02 35); }
.btn-line { border-color: currentColor; }
.btn-line:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-light { background: var(--on-brick); color: var(--brick-deep); }
.btn-light:hover { background: white; }
.btn-small { min-height: 44px; padding: 0 18px; font-size: 0.875rem; }

/* ---------- Header ---------- */
/* Safe area: the page is drawn edge to edge (viewport-fit=cover), so the header pads itself below
   the status bar and paints a solid strip behind it (and above it, for browsers that draw page
   content behind their own bars). Brick over the hero, the page colour once the header is solid. */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: var(--z-header);
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color 250ms var(--ease-out);
}
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - env(safe-area-inset-top, 0px));
  height: calc(120px + env(safe-area-inset-top, 0px)); background: var(--brick); pointer-events: none;
  transition: background-color 250ms var(--ease-out);
}
.site-header.is-solid { background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.site-header.is-solid::before { background: var(--bg); }
.nav { display: flex; align-items: center; gap: 32px; height: 68px; padding: 0 var(--pad); }
.wordmark { margin-right: auto; padding: 8px 0; text-decoration: none; font-size: 1.75rem; line-height: 1; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { text-decoration: none; font-weight: 600; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.04em; }
.nav-links a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.site-header:not(.is-solid) { color: var(--on-brick); }
.site-header:not(.is-solid) .nav-links { text-shadow: 0 1px 12px oklch(0 0 0 / 0.45); }
.site-header:not(.is-solid) .btn-ink { background: var(--on-brick); color: var(--ink); }
@media (max-width: 760px) { .nav-links { display: none; } }

/* ---------- Hero: brick drench + photo ---------- */
.hero {
  display: grid; grid-template-columns: 1.1fr 0.9fr; min-height: 100vh; min-height: 100svh;
  background: var(--brick); color: var(--on-brick); overflow: clip;
}
.hero-copy { display: flex; flex-direction: column; justify-content: end; padding: calc(120px + env(safe-area-inset-top, 0px)) var(--pad) clamp(48px, 8vh, 88px); }
/* Stacked on purpose: a poster headline that fills the brick panel */
.hero h1 { font-size: clamp(3.4rem, 8.4vw, 8.6rem); line-height: 0.88; max-width: 9ch; }
.hero-sub { margin-top: 28px; max-width: 40ch; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: oklch(0.95 0.02 50); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero .btn-ink { background: var(--ink); color: var(--on-brick); }
.hero .btn-line:hover { background: var(--on-brick); color: var(--brick-deep); border-color: var(--on-brick); }
/* The photo slides down as you scroll away. main.js sets the transform from the native scroll
   position every frame (transform only), so it follows a finger at full frame rate. */
.hero-media { margin: 0; position: relative; overflow: hidden; will-change: transform; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

@keyframes wipe-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.hero-media img { animation: wipe-up 1000ms var(--ease-out) both; }
.hero-copy > * { animation: rise 800ms var(--ease-out) both; }
.hero-copy > :nth-child(2) { animation-delay: 100ms; }
.hero-copy > :nth-child(3) { animation-delay: 180ms; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { padding-top: calc(112px + env(safe-area-inset-top, 0px)); }
  .hero-media { order: 2; aspect-ratio: 4 / 3.4; }
}
/* Phones: a taller frame so the lift reads at a glance, cropped from the top where the lifter is */
@media (max-width: 600px) {
  .hero-copy { padding-bottom: 40px; }
  .hero-media { aspect-ratio: 10 / 11; }
  .hero-media img { object-position: 50% 22%; }
}

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; background: var(--ink); color: var(--bg); padding: 18px 0; }
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee span { font-size: clamp(1.75rem, 3.4vw, 3rem); line-height: 1; padding: 0 28px; display: inline-flex; align-items: center; gap: 56px; }
.marquee span::after { content: ""; width: 12px; height: 12px; background: var(--brick); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- January ---------- */
.january { padding: clamp(96px, 14vw, 200px) var(--pad); }
.ink-reveal { font-size: clamp(1.75rem, 3.6vw, 3.4rem); line-height: 1.15; font-weight: 600; font-stretch: 85%; letter-spacing: -0.015em; max-width: 26ch; }
.start { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: clamp(64px, 8vw, 112px); counter-reset: s; border-top: 2px solid var(--ink); }
.start li { counter-increment: s; padding: 28px 28px 0 0; display: grid; gap: 10px; align-content: start; }
.start li + li { padding-left: 28px; border-left: 2px solid var(--ink); }
.start li::before { content: counter(s); font-stretch: 62%; font-weight: 850; font-size: 3.5rem; line-height: 1; color: var(--brick); }
.start strong { font-size: 1.25rem; font-weight: 700; }
.start span { color: var(--muted); }
@media (max-width: 760px) {
  .start { grid-template-columns: 1fr; }
  .start li, .start li + li { padding: 24px 0; border-left: 0; }
  .start li + li { border-top: 2px solid var(--ink); }
}

/* ---------- Timetable ---------- */
.timetable { padding: clamp(80px, 10vw, 140px) var(--pad); background: var(--ink); color: var(--bg); }
.tt-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 28px; }
.timetable h2, .membership h2, .space h2, .join h2, .coaches h2, .faq h2 { font-size: clamp(3rem, 7vw, 6.4rem); line-height: 0.9; }
.days { display: flex; flex-wrap: wrap; gap: 4px; }
.days button {
  appearance: none; cursor: pointer; min-width: 56px; min-height: 48px; padding: 0 14px;
  background: transparent; color: oklch(0.8 0.01 40); border: 2px solid oklch(0.38 0.01 40);
  font: 700 0.9375rem/1 var(--font); text-transform: uppercase; letter-spacing: 0.04em;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms;
}
.days button:hover { color: var(--bg); border-color: var(--bg); }
.days button[aria-selected="true"] { background: var(--brick); border-color: var(--brick); color: var(--on-brick); }
.tt-panel { margin-top: 40px; }
.sessions { display: grid; }
.session {
  display: grid; grid-template-columns: 110px 1.4fr 1fr 90px auto; align-items: center; gap: 24px;
  padding: 18px 0; border-top: 1px solid oklch(0.32 0.01 40);
  animation: rise 420ms var(--ease-out) both; animation-delay: calc(var(--i) * 45ms);
}
.session time { font-stretch: 62%; font-weight: 850; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.s-class { font-weight: 700; font-size: 1.125rem; }
.s-coach, .s-len { color: oklch(0.78 0.01 40); }
.s-space { justify-self: end; }
.s-space a { position: relative; text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: 0.875rem; letter-spacing: 0.04em; border-bottom: 2px solid var(--brick); padding-bottom: 2px; }
/* A bigger invisible hit area round the small Book link (44px and up) */
.s-space a::after { content: ""; position: absolute; inset: -14px -12px; }
.s-space .full { color: oklch(0.65 0.01 40); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em; }
.tt-note { margin-top: 32px; color: oklch(0.78 0.01 40); }
@media (max-width: 760px) {
  .session { grid-template-columns: 76px 1fr auto; grid-template-areas: "time class space" "time meta space"; gap: 2px 16px; }
  .session time { grid-area: time; font-size: 1.6rem; }
  .s-class { grid-area: class; }
  .s-coach { grid-area: meta; font-size: 0.9375rem; }
  .s-len { display: none; }
  .s-space { grid-area: space; }
}

/* ---------- Membership ---------- */
.membership { padding: clamp(96px, 12vw, 160px) var(--pad); }
.mem-sub { margin-top: 20px; color: var(--muted); max-width: 48ch; }
.plans { display: grid; grid-template-columns: 1fr 1.15fr 1fr; margin-top: 56px; align-items: stretch; border: 2px solid var(--ink); }
.plan { display: flex; flex-direction: column; gap: 20px; padding: clamp(28px, 3vw, 44px); }
.plan + .plan { border-left: 2px solid var(--ink); }
.plan h3 { font-size: 1.375rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.price { display: flex; align-items: baseline; gap: 10px; }
.amt { font-size: clamp(3.6rem, 6vw, 5.4rem); line-height: 0.9; }
.per { color: var(--muted); font-weight: 600; }
.plan ul { display: grid; gap: 10px; flex: 1; align-content: start; }
.plan li { padding-left: 22px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 10px; height: 10px; background: var(--brick); }
.plan-feature { background: var(--brick); color: var(--on-brick); margin: -2px 0; }
.plan-feature .per { color: oklch(0.92 0.03 50); }
.plan-feature li::before { background: var(--on-brick); }
.tag { align-self: start; background: var(--ink); color: var(--on-brick); padding: 6px 10px; font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; }
@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; }
  .plan + .plan { border-left: 0; border-top: 2px solid var(--ink); }
  .plan-feature { margin: 0 -2px; }
}

/* ---------- The gym: five images, five cells ---------- */
.space { padding: 0 var(--pad) clamp(96px, 12vw, 160px); }
.bento {
  display: grid; gap: 8px; margin-top: 48px;
  grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, clamp(220px, 24vw, 360px));
  grid-template-areas: "b1 b1 b2 b5" "b3 b4 b2 b5";
}
.bento figure { margin: 0; position: relative; overflow: hidden; }
.bento .b1 { grid-area: b1; } .bento .b2 { grid-area: b2; } .bento .b3 { grid-area: b3; } .bento .b4 { grid-area: b4; } .bento .b5 { grid-area: b5; }
.bento img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.bento figure:hover img { transform: scale(1.04); }
.bento figcaption { position: absolute; left: 0; bottom: 0; padding: 10px 14px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 0.875rem; }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 220px; grid-template-areas: "b1 b1" "b2 b5" "b3 b4"; }
}

/* ---------- Join ---------- */
.join { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: clamp(40px, 7vw, 112px); align-items: end; padding: clamp(80px, 10vw, 140px) var(--pad); background: var(--brick); color: var(--on-brick); }
.join-copy p { margin-top: 20px; max-width: 36ch; color: oklch(0.94 0.02 50); }
.join-form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 700; text-transform: uppercase; font-size: 0.875rem; letter-spacing: 0.05em; }
.field input, .field select { min-height: 52px; padding: 0 14px; border: 2px solid var(--on-brick); border-radius: 0; background: var(--on-brick); color: var(--ink); font: 500 1rem var(--font); }
.field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.field input[aria-invalid="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.err { font-weight: 700; color: var(--on-brick); background: var(--ink); padding: 6px 10px; justify-self: start; font-size: 0.875rem; }
.join .btn-ink { background: var(--ink); color: var(--on-brick); }
.form-status { min-height: 1.6em; font-weight: 600; }
@media (max-width: 900px) { .join { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { padding: 56px var(--pad) 48px; background: var(--ink); color: var(--bg); }
.footer-mark { font-size: clamp(4rem, 15vw, 14rem); line-height: 0.82; color: var(--brick); }
.footer-cols { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 24px; margin-top: 40px; color: oklch(0.8 0.01 40); }
.footer-cols ul { display: grid; gap: 0; }
.footer-cols a { display: inline-block; padding: 10px 0; text-decoration: none; } /* 44px tap height */
.footer-cols a:hover { color: var(--bg); }
.footer-small { margin-top: 40px; font-size: 0.8125rem; color: oklch(0.65 0.01 40); }
@media (max-width: 760px) { .footer-cols { grid-template-columns: 1fr; } }

/* ---------- Reveals: one shot, set off by IntersectionObserver in main.js ----------
   Nothing is hidden unless the script has added .js-reveal to <html>, and it skips that under
   reduced motion, so with no JS everything simply shows. Opacity and transform only, never
   tied to the scroll position, so there is nothing to stutter on a phone. */
.js-reveal [data-reveal] { transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); }
.js-reveal [data-reveal="up"]:not(.is-shown) { opacity: 0; transform: translateY(14px); }
/* The January paragraph lights up word by word, once, as it comes into view */
.js-reveal [data-reveal="words"] .w { transition: opacity 520ms var(--ease-out); transition-delay: calc(var(--i) * 26ms); }
.js-reveal [data-reveal="words"]:not(.is-shown) .w { opacity: 0.22; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  html { scroll-behavior: auto; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 760px) {
  .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; width: 100%; }
  .days button { min-width: 0; padding: 0; font-size: 0.8125rem; }
}

/* ---------- January countdown ---------- */
.jan-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: end; }
.countdown { display: grid; line-height: 0.8; }
.count { font-stretch: 62%; font-weight: 850; font-size: clamp(9rem, 22vw, 20rem); color: var(--brick); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.count-label { margin-top: 14px; font-stretch: 62%; font-weight: 850; font-size: clamp(1.75rem, 3.6vw, 3.4rem); text-transform: uppercase; line-height: 0.95; }
.jan-head .ink-reveal { padding-bottom: 8px; }
@media (max-width: 860px) { .jan-head { grid-template-columns: 1fr; } }

/* ---------- Coaches ---------- */
.coaches { padding: 0 var(--pad) clamp(96px, 12vw, 160px); }
.coach-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.coach { display: grid; gap: 10px; }
.coach img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 500ms var(--ease-out); }
.coach:hover img { filter: none; }
.coach h3 { margin-top: 8px; font-stretch: 62%; font-weight: 850; font-size: 2.4rem; line-height: 1; text-transform: uppercase; }
.coach p { color: var(--muted); max-width: 32ch; }
@media (max-width: 860px) {
  .coach-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(var(--pad) * -1); padding-right: var(--pad); scrollbar-width: none; }
  .coach { scroll-snap-align: start; }
}

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); padding: 0 var(--pad) clamp(96px, 12vw, 160px); align-items: start; }
.faq-list { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 2px solid var(--ink); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; font-weight: 700; font-size: 1.1875rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--brick), var(--brick)) center / 100% 3px no-repeat, linear-gradient(var(--brick), var(--brick)) center / 3px 100% no-repeat; transition: transform 300ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; color: var(--muted); max-width: 56ch; }
.faq details[open] p { animation: rise 400ms var(--ease-out) both; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }
.faq h2 { position: sticky; top: 100px; }
@media (max-width: 860px) { .faq h2 { position: static; } }