@charset "utf-8";

/* ══════════════════════════════════════════════════════════════════════════
   Sam Powell-Pepper — Pep Talk

   The one idea: the brand name is already inside his surname. Powell-PEPper.
   Orange reveals it, and everywhere else it earns its place the same way: the
   payoff phrase inside a display heading (.mark), the P.O.W.E.R initials and the
   acronym in the framework's marker (letters doing double duty, same logic), and
   the CTA — enquiry heading, buttons and dock, the page's one job said three
   times. Still no orange rules, borders, hovers, bullets or icons — not in the
   rail, not in the lightbox. Structure is carried by hairlines and scale.

   Motion lives at the bottom of this file, all of it inside a reduced-motion
   guard. Reveals are animated from JS, never hidden here, so the page survives
   without scripting.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Fonts ─────────────────────────────────────────────────────────────── */

/* Archivo — display. Heavy and *extended*, not condensed: every athlete and
   combat-sport page reaches for condensed, so wide reads closer to a record
   sleeve than a gym poster. Variable wdth axis is the whole point here. */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Instrument Sans — body. Warmer skeleton than Inter, high x-height, and it
   doesn't twin with Archivo. Labels are this face in caps, not a third family. */
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/instrument-sans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/instrument-sans-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─── Tokens ────────────────────────────────────────────────────────────── */

:root {
  /* colour */
  --ink: #0B0B0C;        /* not pure black, so photo blacks read as depth */
  --ink-raise: #141416;
  --rule: #26262A;
  --rule-soft: #1C1C20;
  --bone: #F4F1EC;       /* warm off-white; pure white on black glares */
  --bone-dim: #9A9691;
  --pep: #FA4522;        /* cooled vermilion — blue lifted off the sports-orange default */
  --pep-deep: #C93315;

  /* type */
  --f-display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --f-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-label: 0.6875rem;
  --fs-body: clamp(1rem, 0.94rem + 0.26vw, 1.1875rem);
  --fs-lead: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  --fs-h3: clamp(1.2rem, 1rem + 0.7vw, 1.6rem);
  --fs-h2: clamp(2.1rem, 1rem + 4.4vw, 5rem);
  --fs-quote: clamp(1.7rem, 0.9rem + 3.4vw, 3.6rem);
  --fs-letter: clamp(3.4rem, 7.6vw, 7.5rem);
  /* height is in the equation too: on a short laptop viewport a width-only
     clamp pushes the hero CTA below the fold, and the CTA is the page's job */
  --fs-mast: clamp(3rem, min(12.9vw, 20vh), 12rem);

  /* space */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 1560px;
  --section-y: clamp(5rem, 11vh, 10rem);
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
picture { display: block; }

/* the UA sheet's [hidden] loses to any display declaration, and this page sets
   display on the elements it hides (.form__grid, .form__foot, .dock) */
[hidden] { display: none !important; }

::selection { background: var(--pep); color: var(--ink); }

/* Focus stays in palette: bone ring, ink offset. Reads on ink, on bone and on
   the orange button, so there is exactly one focus style on the page. */
:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--bone);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  font: 600 var(--fs-label)/1 var(--f-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ─── Shell & sections ──────────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
  overflow-x: clip;          /* lets type and images run off-edge without a scrollbar */
}

/* ─── Shared type ───────────────────────────────────────────────────────── */

.eyebrow {
  margin: 0 0 clamp(1.5rem, 4vw, 2.75rem);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-dim);
  display: flex;
  align-items: center;
  gap: 0.75em;
}
.eyebrow__num { color: var(--bone); }
.eyebrow__num::after {
  content: '';
  display: inline-block;
  width: 2.5rem;
  height: 1px;
  background: var(--rule);
  vertical-align: 0.25em;
  margin-left: 0.75em;
}

.h2 {
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  font-stretch: 108%;
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-wrap: balance;
}
.h2--tight { max-width: 20ch; }

/* ─── Emphasis ──────────────────────────────────────────────────────────────
   Orange on the payoff words in the display type — the turn in each big
   statement, where the eye is already going. Weight is inherited, never set:
   <strong>'s 700 would render *lighter* than the 800 a heading is already set
   in. Rationed to one phrase per section so it keeps meaning something. */
.mark {
  color: var(--pep);
  font-weight: inherit;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--bone);
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.br-lg { display: none; }
@media (min-width: 60rem) { .br-lg { display: inline; } }

/* ─── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05em 2.4em;
  border: 0;
  cursor: pointer;
}

/* The one exception to the orange rule, and it is deliberate: submitting this
   form is the only job the page has. */
.btn--primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--pep);
  color: var(--ink);
}
/* bone sweeps up over the orange instead of swapping to it */
.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bone);
  transform: scaleY(0);
  transform-origin: bottom;
}
.btn--primary:hover::before { transform: scaleY(1); }
.btn--primary:active { background: var(--pep-deep); color: var(--bone); }
.btn--primary:active::before { transform: scaleY(0); }
.btn--primary[disabled] { background: var(--rule); color: var(--bone-dim); cursor: default; }
.btn--primary[disabled]::before { display: none; }

.btn--submit { font-size: 1rem; padding: 1.15em 3em; }

/* ─── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  padding-block: clamp(1.5rem, 4vh, 3rem) clamp(2rem, 6vh, 4rem);
  overflow-x: clip;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.5rem, 3.5vh, 4rem);
}

/* Bleeds off the right and bottom edges. No gradient overlay — the type keeps
   its own ground instead (see .masthead__line--slab). */
.hero__photo {
  position: absolute;
  inset: 0 -4vw 0 auto;
  width: 52vw;
  z-index: 1;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  filter: saturate(0.82) contrast(1.06);
}

.eyebrow--hero { margin-bottom: 0; }

.masthead {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-mast);
  font-weight: 800;
  font-stretch: 122%;              /* the extended cut, pushed near the top of the axis */
  line-height: 0.8;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--bone);
}
.masthead__line {
  display: block;
  margin-left: -0.045em;           /* optical: pull the stem flush to the gutter */
  width: fit-content;
}

/* The lower lines cross onto the photo, so every line carries a hard-edged ink
   slab. A slab, not a fade: the type stays legible, the crop stays a graphic
   decision, and the three ragged right edges become part of the composition.
   On the short lines the slab is ink on ink and simply never shows. */
.masthead__line {
  background: var(--ink);
  /* horizontal only: vertical padding here is multiplied by three lines and
     pushed the hero CTA below the fold on a short laptop viewport. At
     line-height 0.8 the box already hugs the caps. */
  padding-right: 0.14em;
  box-decoration-break: clone;
}

.pep { color: var(--bone); }
.pep-lit .pep { color: var(--pep); }
@media (prefers-reduced-motion: no-preference) {
  .pep { transition: color 240ms linear; }
}

.hero__foot {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 34rem;
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.25rem, 3vw, 2rem);
}
.hero__lead {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-lead);
  font-weight: 700;
  font-stretch: 100%;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.hero__sub { margin: 0; color: var(--bone-dim); max-width: 42ch; }
.hero__foot .btn { justify-self: start; margin-top: 0.5rem; }

@media (max-width: 55rem) {
  .hero { min-height: 0; flex-direction: column; padding-bottom: 0; }
  .hero__inner { gap: clamp(2rem, 6vh, 3rem); }
  /* Extended at small sizes overflows and stops reading as a masthead, so the
     width axis comes back toward normal as the viewport narrows. */
  .masthead { font-stretch: 100%; font-size: clamp(3rem, 16.5vw, 7rem); }
  .masthead__line--slab { background: none; padding-inline: 0; }
  /* the photo stops being a right-hand bleed and becomes a full-width band */
  .hero__inner { order: 1; }
  .hero__photo {
    order: 2;
    position: static;
    width: auto;
    margin-top: clamp(2.5rem, 8vw, 4rem);
  }
  /* the crop lives on the img, not the wrapper: height:100% against an
     indefinite parent height falls back to the file's own ratio and stretches it */
  .hero__photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-position: 50% 12%;
  }
}

/* ─── Story ─────────────────────────────────────────────────────────────── */

.story__h { max-width: 26ch; }
@media (min-width: 60rem) {
  .story__h {
    font-size: clamp(2rem, 4.15vw, 4.1rem);
    max-width: none;
    margin-left: -0.02em;
  }
}

.story__body {
  max-width: 60ch;
  color: var(--bone-dim);
}
.story__body .lead { color: var(--bone); }

@media (min-width: 60rem) {
  .story__body { margin-left: 33%; }        /* text column starts off-centre, never centred */
  .story__body--second { margin-left: 41%; }
}

/* Pull quote hangs left, out of the text column it interrupts. No orange. */
.pullquote {
  margin: clamp(3rem, 8vw, 6rem) 0;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--rule);
}
.pullquote blockquote { margin: 0; }
.pullquote p {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-quote);
  font-weight: 700;
  font-stretch: 96%;
  line-height: 1.0;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-indent: -0.44em;     /* hangs the opening quote; see below */
  max-width: 16em;          /* em, so the measure tracks the quote's own size */
  text-wrap: balance;
}
/* Curly, never straight, and the opening mark hangs into the margin so the first
   letter still lines up with the rule above it. -0.44em is the “ advance at this
   weight and stretch; it replaces the -0.06em stem correction the bare I needed. */
.pullquote p::before { content: '\201C'; }
.pullquote p::after  { content: '\201D'; }
.pullquote figcaption {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
@media (min-width: 60rem) {
  .pullquote { margin-left: 8%; }
}

/* ─── The Man Behind The Talk ───────────────────────────────────────────── */

.man { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }

.man__text { color: var(--bone-dim); max-width: 58ch; }
.man__text .h2 { color: var(--bone); }

@media (min-width: 60rem) {
  .man {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(3rem, 7vw, 6rem);
  }
  /* portrait runs off the left edge of the page */
  .man__figure { margin-left: calc(var(--gutter) * -1 - 4vw); }
  .man__text { padding-top: clamp(2rem, 6vw, 5rem); }
}

/* ─── Gallery ───────────────────────────────────────────────────────────── */

.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}
.gallery__item { margin: 0; grid-column: 1 / -1; }
/* A light, uniform pull on saturation so seven photographs from four different
   shoots read as one set — and so the teal and blue in the club imagery stops
   competing with the page's single accent. Uniform, not a gradient. */
.gallery__item img,
.man__figure img { filter: saturate(0.88) contrast(1.03); }

@media (min-width: 48rem) {
  .g1 { grid-column: 1 / 8;  grid-row: 1; }
  .g2 { grid-column: 9 / 13; grid-row: 1 / 3; margin-top: 12%; }
  .g3 { grid-column: 2 / 6;  grid-row: 2; margin-top: -8%; }
  /* square drops into the gap between the two tall crops and hangs off the
     same baseline as g3, so the block interlocks instead of floating */
  .g5 { grid-column: 6 / 9;  grid-row: 2; align-self: end; }
  /* one image deliberately runs past the right edge of the page */
  .g4 {
    grid-column: 5 / 13; grid-row: 3;
    width: calc(100% + var(--gutter) + 6vw);
    margin-top: clamp(1rem, 2vw, 2rem);
  }
}

/* ─── P.O.W.E.R ─────────────────────────────────────────────────────────── */

.power { margin: clamp(1rem, 4vw, 2.5rem) 0 0; }

/* Hairlines are full-bleed; the content inside them is not. Drawn with
   pseudo-elements rather than a wrapper, so the markup stays dl > div > dt/dd. */
.power__row {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(1.25rem, 4vw, 3.5rem);
  align-items: baseline;
  padding-block: clamp(1.25rem, 3vw, 2.25rem);
}
.power__row::before,
.power__row:last-child::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  height: 1px;
  background: var(--rule);
}
.power__row::before { top: 0; }
.power__row:last-child::after { bottom: 0; }

/* Second orange moment. Same logic as PEP: the letter is doing double duty —
   it is both a word and a member of the acronym. No numbers, no ordering. */
.power__letter {
  grid-row: 1 / 3;
  font-family: var(--f-display);
  font-size: var(--fs-letter);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 0.74;
  letter-spacing: -0.04em;
  color: var(--pep);
  width: 1.15em;
}
.power__word {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--bone);
}
.power__def {
  margin: 0.6em 0 0;
  color: var(--bone-dim);
  max-width: 46ch;
}

/* the framework is the one section a reader studies, so the rows answer back */
.power__row:hover { background: var(--ink-raise); }
.power__row:hover .power__letter { transform: translateY(-0.03em) scale(1.06); }
.power__row:hover .power__word { color: var(--bone); }
.power__row:hover .power__def { color: var(--bone); }
.power__letter { transform-origin: left bottom; }

@media (min-width: 60rem) {
  .power__row { grid-template-columns: auto minmax(0, 20ch) minmax(0, 1fr); }
  .power__word { padding-top: 0.15em; }
  .power__def { grid-row: 1; grid-column: 3; margin-top: 0.25em; }
}

/* ─── Pep Talk ──────────────────────────────────────────────────────────────
   The offering, named. Set between the masthead and the section headings in
   scale, so it reads as the second-largest thing on the page and never competes
   with his name. PEP is orange here for exactly the reason it is orange in the
   masthead — same three letters, same double duty. */

.wordmark {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--f-display);
  font-size: clamp(3.2rem, 9.4vw, 8.5rem);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 0.84;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin-left: -0.04em;      /* optical: pull the stem to the gutter */
}

/* The framework sits under the brand, but it is a beat in the page rather than a
   footnote to one, so its marker is set at --fs-h2 — the same tier as every other
   section heading — and loses the section number, not the scale. The line beneath
   it keeps the step down, so the two still resolve as marker → sub:
   8.5rem wordmark → 5rem marker → 3.1rem sub → the rows. */
.power-block { margin-top: clamp(4rem, 10vw, 8rem); }
/* marker and sub-line are one cluster, closer than .h2's trailing margin sets them */
.h2--marker { margin-bottom: clamp(1rem, 2.2vw, 1.6rem); }
.h2--sub { font-size: clamp(1.6rem, 1rem + 2.6vw, 3.1rem); }

/* ─── Audiences ─────────────────────────────────────────────────────────── */

.auds {
  display: grid;
  gap: clamp(3rem, 7vw, 4.5rem);
}
@media (min-width: 56rem) {
  .auds { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  /* staggered starts so three equal columns don't read as a pricing table */
  .aud:nth-child(2) { margin-top: clamp(2rem, 7vw, 5.5rem); }
  .aud:nth-child(3) { margin-top: clamp(4rem, 14vw, 11rem); }
}

.aud__h {
  margin: 0 0 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--bone);
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  font-stretch: 110%;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.aud__p { color: var(--bone-dim); }

.aud__list {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  font-size: 0.9375rem;
}
.aud__list li {
  padding: 0.7em 0;
  border-top: 1px solid var(--rule-soft);
  line-height: 1.35;
}
.aud__list li:last-child { border-bottom: 1px solid var(--rule-soft); }

/* ─── Testimonial slot (markup currently commented out in index.html) ────── */

.quotes { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 56rem) { .quotes { grid-template-columns: repeat(2, 1fr); } }
.quotes__item { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.quotes__item blockquote { margin: 0; font-size: var(--fs-lead); line-height: 1.3; letter-spacing: -0.01em; }
.quotes__item blockquote p { text-indent: -0.38em; }   /* hangs the “, as the pull quote does */
.quotes__item blockquote p::before { content: '\201C'; }
.quotes__item blockquote p::after  { content: '\201D'; }
.quotes__item figcaption {
  margin-top: 1.25rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.quotes__item figcaption span { display: block; color: var(--bone-dim); margin-top: 0.4em; }

/* ─── Booking ───────────────────────────────────────────────────────────── */

.section--book { padding-bottom: clamp(4rem, 9vh, 7rem); }

.book { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.book__head .book__p { color: var(--bone-dim); max-width: 52ch; }
.book.is-sent .book__p { display: none; }

@media (min-width: 64rem) {
  .book { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 5rem); }
  .book__head { position: sticky; top: clamp(2rem, 8vh, 5rem); }
}

.form__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem);
}
@media (min-width: 34rem) { .form__grid { grid-template-columns: 1fr 1fr; } }
.field--wide { grid-column: 1 / -1; }

.field label {
  display: block;
  margin-bottom: 0.6rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.req { color: var(--bone); }
.opt { letter-spacing: 0.14em; opacity: 0.65; }

.field input,
.field textarea,
.field select {
  width: 100%;
  background: var(--ink-raise);
  color: var(--bone);
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.85em 0.9em;
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.4;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 8.5rem; }
.field ::placeholder { color: #8A857F; }   /* 5.03:1 on --ink-raise */

.field input:hover,
.field textarea:hover,
.field select:hover { border-bottom-color: var(--bone-dim); }
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible { outline-offset: 2px; border-bottom-color: var(--bone); }

/* a bone rule drawn across the bottom edge on focus — a solid line rendered as
   a background image so it can animate its width without extra markup */
.field input,
.field textarea,
.field select {
  background-image: linear-gradient(var(--bone), var(--bone));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 2px;
}
.field input:focus,
.field textarea:focus,
.field select:focus { background-size: 100% 2px; }

.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'],
.field select[aria-invalid='true'] { border-bottom-color: var(--pep); }

/* dates render their own indicator; keep it visible on a dark ground */
.field input[type='date'] { color-scheme: dark; }

.select { position: relative; }
.select__arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.35rem;
  border-right: 1.5px solid var(--bone-dim);
  border-bottom: 1.5px solid var(--bone-dim);
  transform: rotate(45deg);
  pointer-events: none;
}
.field select option { background: var(--ink-raise); color: var(--bone); }

.field__err {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--pep);
  min-height: 0;
}
.field__err:empty { display: none; }

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

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rule);
}
.form__note {
  margin: 0;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.form__status { margin: 1.5rem 0 0; }
.form__status:empty { display: none; }
.form__status[data-state='error'] { color: var(--pep); }
.form__status[data-state='sent'] {
  font-family: var(--f-display);
  font-size: var(--fs-lead);
  font-weight: 700;
  font-stretch: 106%;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--bone);
  max-width: 34ch;
}

/* ─── Footer ────────────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  overflow-x: clip;
}
.footer__inner { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); }

/* the only repeat of the signature device, at a whisper of its hero size */
.footer__mark {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.footer__nav { display: flex; flex-wrap: wrap; gap: 0.85rem 2rem; }
.footer__nav a {
  color: var(--bone-dim);
  text-decoration: none;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.footer__nav a:hover { color: var(--bone); }

.footer__meta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--bone-dim);
}
.footer__meta--credit {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--rule-soft);
}
.footer__meta--credit a { color: var(--bone-dim); text-decoration: none; }
.footer__meta--credit a:hover { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 56rem) {
  .footer__inner { grid-template-columns: 1fr auto; align-items: end; }
  .footer__nav { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .footer__meta { grid-column: 1 / -1; }
}

/* ─── Docked CTA ────────────────────────────────────────────────────────── */

/* Navigation, not decoration: the page is long and it has exactly one job — so
   the dock wears the same fill as the buttons it stands in for, and a reader who
   has scrolled past both of them is never left guessing which thing to press. */
.dock {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 20;
  background: var(--pep);
  border: 1px solid var(--pep);
  color: var(--ink);
  text-decoration: none;
  padding: 0.9em 1.6em;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dock[hidden] { display: none; }
.dock:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }

@media (prefers-reduced-motion: no-preference) {
  .dock { transition: opacity 180ms linear, transform 180ms ease-out; }
  .dock[data-enter] { opacity: 0; transform: translateY(0.5rem); }
}

/* ─── The rail ──────────────────────────────────────────────────────────────
   The full archive, held horizontally. A band costs the page a few hundred
   pixels instead of the several thousand a vertical grid of 26 photographs
   would put between the reader and the enquiry form. */

.rail { margin-top: clamp(3rem, 8vw, 6rem); }

.rail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
}
.rail__label {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.rail__nav { display: flex; align-items: center; gap: 0.75rem; }
.rail__count {
  margin: 0;
  min-width: 5.5ch;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--bone-dim);
  font-variant-numeric: tabular-nums;
}
.rail__count:empty { display: none; }
.rail__arrow {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--rule);
  color: var(--bone);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.rail__arrow:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.rail__arrow[disabled] { color: var(--rule); cursor: default; }
.rail__arrow[disabled]:hover { background: none; border-color: var(--rule); color: var(--rule); }

/* full-bleed out of .shell, and the track's own padding keeps the first frame
   aligned to the page gutter */
.rail__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  /* without this, snapping to the first frame's start edge scrolls straight
     past the track's gutter padding and the rail loads 56px off-alignment */
  scroll-padding-inline: var(--gutter);
  cursor: grab;
}
.rail__viewport::-webkit-scrollbar { display: none; }
.rail__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail__viewport:focus-visible { outline: 2px solid var(--bone); outline-offset: -2px; }

.rail__track {
  display: flex;
  gap: clamp(0.5rem, 1.1vw, 1.125rem);
  list-style: none;
  margin: 0;
  padding: 0 var(--gutter);
  width: max-content;
}
.rail__item { scroll-snap-align: start; }

.rail__btn {
  display: block;
  height: clamp(13rem, 32vh, 24rem);
  padding: 0;
  border: 0;
  background: var(--ink-raise);
  overflow: clip;              /* so the hover scale crops instead of spilling */
  cursor: zoom-in;
}
/* the <picture> needs a definite height of its own, or `height: 100%` on the
   img resolves against an auto-height parent and both collapse to zero */
.rail__btn picture { height: 100%; }
.rail__btn img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.03);
}
.rail__btn:hover img { filter: saturate(1) contrast(1.03); }
.rail__btn:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }

/* ─── Lightbox ──────────────────────────────────────────────────────────────
   Native <dialog>: Esc, the focus trap and inertness of the page behind it are
   the platform's job, not ours. */

.lb {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--ink) 96%, transparent);
  color: var(--bone);
}
.lb::backdrop { background: rgba(6, 6, 7, 0.92); }

.lb__inner {
  height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lb__figure { margin: 0; display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); justify-items: center; }
.lb__img {
  max-width: min(94vw, 1600px);
  max-height: 76dvh;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-drag: none;
}
.lb.is-grabbing .lb__img { cursor: grabbing; transition: opacity 200ms ease; }
.lb__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
  max-width: 60ch;
  text-align: left;
}
.lb__count {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--bone);
  white-space: nowrap;
}

.lb__controls {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  display: flex;
  gap: 0.5rem;
}
.lb__btn {
  min-width: 2.75rem;
  height: 2.75rem;
  padding-inline: 0.75rem;
  background: var(--ink-raise);
  border: 1px solid var(--rule);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.lb__btn:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.lb__btn--close { padding-inline: 1.25rem; }

/* ─── Motion ────────────────────────────────────────────────────────────────
   Reveals are run from JS with the Web Animations API rather than by hiding
   things in CSS, so with JS off or blocked the page is simply all visible.
   Everything here is inside a reduced-motion guard. */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .rail__btn img { transition: transform 620ms cubic-bezier(0.16, 0.84, 0.44, 1), filter 400ms linear; }
  .rail__btn:hover img { transform: scale(1.04); }

  /* Gallery and bio images are driven by the in-frame parallax in main.js, so
     they get no hover transform of their own — two things writing `transform`
     on one element is how a page starts fighting itself. */
  .gallery__item img,
  .man__figure img { transition: filter 400ms linear; }

  .btn, .rail__arrow, .lb__btn, .dock, .footer__nav a, .footer__meta--credit a {
    transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
  }
  .btn--primary::before { transition: transform 420ms cubic-bezier(0.16, 0.84, 0.44, 1); }

  .power__row { transition: background-color 320ms ease; }
  .power__letter { transition: transform 420ms cubic-bezier(0.16, 0.84, 0.44, 1); }
  .power__word, .power__def { transition: color 320ms ease; }

  .field input, .field textarea, .field select {
    transition: border-bottom-color 220ms ease, background-size 320ms cubic-bezier(0.16, 0.84, 0.44, 1);
  }

  .lb__img { transition: opacity 200ms ease, transform 260ms cubic-bezier(0.16, 0.84, 0.44, 1); }
  .lb.is-swapping .lb__img { opacity: 0.35; }

  .lb {
    opacity: 0;
    transform: scale(0.985);
    transition: opacity 240ms ease, transform 320ms cubic-bezier(0.16, 0.84, 0.44, 1);
  }
  .lb.is-open { opacity: 1; transform: none; }
  .lb::backdrop { transition: opacity 240ms ease; }

  .hero__photo { will-change: transform; }
}

/* The hover scale needs a frame to crop against even without transitions */
.gallery__item picture,
.man__figure picture { overflow: clip; }

@media print {
  .dock, .skip, .rail, .lb { display: none; }
  body { background: #fff; color: #000; }
}