/* ==========================================================================
   Sadem Benkacem — portfolio
   "Chalk and steel": an editorial training-log feel.
   Mobile-first. No framework, no build step.
   ========================================================================== */

/* ---------- 0. Fonts (self-hosted) --------------------------------------- */

/* Archivo variable, both axes: wdth 62–125 and wght 100–900. Files come from
   @fontsource-variable/archivo (SIL Open Font Licence 1.1 — see
   assets/fonts/OFL.txt). Nothing is fetched from Google Fonts. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(../assets/fonts/archivo-latin-normal.woff2) format("woff2");
  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";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(../assets/fonts/archivo-latin-italic.woff2) format("woff2");
  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";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(../assets/fonts/archivo-latin-ext-normal.woff2) format("woff2");
  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;
}
@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(../assets/fonts/archivo-latin-ext-italic.woff2) format("woff2");
  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;
}

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Palette */
  --chalk:        #F2EFE7;
  --ink:          #16150F;
  --muted:        #5E5B52;   /* 5.9:1 on chalk  — AA for body text        */
  --rule:         #CFCABC;
  --accent:       #D4411E;   /* 4.0:1 on chalk  — LARGE text / graphics   */
  --accent-text:  #B23315;   /* 5.4:1 on chalk  — small text              */
  --muted-dark:   #A8A399;   /* 7.3:1 on ink                              */
  --accent-dark:  #FF7A57;   /* 7.1:1 on ink                              */
  --on-accent:    #FFFFFF;   /* 4.6:1 on accent                           */

  /* Type */
  --font: "Archivo", "Helvetica Neue", "Segoe UI", Arial, system-ui, sans-serif;

  /* Rhythm */
  --shell:    75rem;               /* 1200px */
  --gutter:   clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4.5rem, 10vw, 9rem);
  --header-h: 4.5rem;              /* approximate; used for sticky offsets */

  /* Motion */
  --t: 160ms cubic-bezier(.2, .6, .3, 1);
}

/* ---------- 2. Reset ----------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.125rem);
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;           /* belt and braces against horizontal scroll */
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }

/* ---------- 3. Type scale ------------------------------------------------ */

/* Condensed display voice — Archivo's width axis at 62%. */
.hero__title,
.section-title {
  font-stretch: 62%;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* Sized so the longest line ("CONTROL.") fits the 6-column hero text block at
   every width from 900px up, which keeps the headline to exactly three lines. */
.hero__title  { font-size: clamp(3.25rem, 12vw, 8.25rem); }
.hero__line   { display: block; }
.section-title { font-size: clamp(2.25rem, 7vw, 4.25rem); margin-bottom: 1.5rem; }
.section-title--sm { font-size: clamp(1.75rem, 5vw, 2.75rem); }

/* Labels / eyebrows */
.eyebrow,
.section-label,
.factstrip__label,
.cred__year,
.contact__state,
.draft-banner,
.details dt,
.nav-toggle__label,
.site-footer__meta {
  font-stretch: 112%;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  line-height: 1.4;
}

.group-title {
  font-stretch: 105%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin: 3rem 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}

.lede {
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.45;
  max-width: 34ch;
  color: var(--ink);
}

p { max-width: 65ch; }
.note { color: var(--muted); font-size: 0.9375rem; }
.lede + .note { margin-top: 1rem; }

/* Years and figures line up. */
.factstrip__value, .cred__year, .steps__num { font-variant-numeric: tabular-nums; }

/* ---------- 4. Layout ---------------------------------------------------- */

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

.section {
  padding-block: var(--section-y);
  border-top: 1px solid var(--rule);
}
.section--tight { padding-block: clamp(3rem, 7vw, 6rem); }

/* min-width: 0 on the children stops a wide replaced element (a timeline photo
   sized by height, whose min-content width is its full intrinsic width) from
   forcing the track wider than the screen. */
.section__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.section__grid > * { min-width: 0; }

@media (min-width: 64em) {
  .section__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 2.5vw, 2.5rem);
  }
  .section__aside      { grid-column: 1 / 3; position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }
  .section__body       { grid-column: 3 / 9; }
  .section__body--wide { grid-column: 3 / 13; }
  .about__figure,
  .approach__figure    { grid-column: 9 / 13; }
}

.section-label { color: var(--muted); display: flex; gap: 0.6rem; align-items: baseline; }
.section-num { color: var(--accent-text); font-variant-numeric: tabular-nums; }
.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head .section-title { margin-top: 0.75rem; }
.section-cta { margin-top: 2.5rem; }

/* ---------- 5. Skip link, draft banner ----------------------------------- */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--ink);
  color: var(--chalk);
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* Draft banner. The markup was removed from index.html once the last
   placeholder was filled in; these rules are kept so that re-adding
   <body class="is-draft"> plus the banner div brings draft mode straight back.
   Slim, in normal flow — deliberately NOT fixed or sticky. */
.draft-banner { display: none; }
.is-draft .draft-banner {
  display: block;
  background: var(--ink);
  color: var(--chalk);
  padding: 0.6rem var(--gutter);
  text-align: center;
  font-size: 0.6875rem;
}
.draft-banner__tag {
  color: var(--ink);
  background: var(--accent-dark);
  padding: 0.15em 0.5em;
  margin-right: 0.6em;
  border-radius: 2px;
}

/* ---------- 6. Draft markers --------------------------------------------
   Visible in BOTH modes. Removing .is-draft hides the banner, never these:
   nobody should be able to ship a placeholder by accident.
   ------------------------------------------------------------------------ */

.todo {
  display: inline;
  font-stretch: 105%;
  font-weight: 600;
  font-size: 0.875em;
  line-height: 1.4;
  letter-spacing: 0.01em;
  padding: 0.15em 0.5em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-transform: none;
}
.todo[data-todo="placeholder"] { background: var(--accent); color: var(--on-accent); }
.todo[data-todo="confirm"]     { background: var(--ink);    color: var(--chalk); }

.section--dark .todo[data-todo="confirm"] { background: var(--chalk); color: var(--ink); }
.section--dark .todo[data-todo="placeholder"] { background: var(--accent-dark); color: var(--ink); }

.todo-block { margin-block: 1.25rem; max-width: 60ch; }

/* ---------- 7. Buttons and links ----------------------------------------- */

a { color: inherit; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.4rem;
  font-stretch: 110%;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color var(--t), color var(--t), border-color var(--t);
}
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--accent:hover { background: var(--ink); }
.btn--lg { min-height: 52px; padding: 0.9rem 1.9rem; font-size: 0.9375rem; }

.textlink {
  color: var(--accent-text);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid var(--rule);
  padding-block: 0.25rem;
  transition: border-color var(--t), color var(--t);
}
.textlink:hover { border-color: var(--accent); }

.section--dark .textlink,
.site-footer .textlink { color: var(--accent-dark); border-bottom-color: rgba(242, 239, 231, 0.3); }
.section--dark .textlink:hover,
.site-footer .textlink:hover { border-bottom-color: var(--accent-dark); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.section--dark :focus-visible,
.site-footer :focus-visible,
.draft-banner :focus-visible { outline-color: var(--accent-dark); }

/* ---------- 8. Header ---------------------------------------------------- */

/* Sticky, and it gains a hairline and loses a little height once the page has
   scrolled 40px. No hide-on-scroll-down trickery. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--chalk);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t);
}
.site-header.is-scrolled { border-bottom-color: var(--rule); }

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-block: 1rem;
  transition: padding-block var(--t);
}
.site-header.is-scrolled .site-header__inner { padding-block: 0.55rem; }

/* Anchor targets clear the sticky header. */
section[id] { scroll-margin-top: 5.5rem; }

.wordmark {
  font-stretch: 78%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  margin-right: auto;
}
.wordmark--footer { font-size: 1.25rem; margin: 0; }

.site-nav__list { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  border-bottom: 2px solid transparent;
  transition: border-color var(--t), color var(--t);
}
.site-nav a:hover { border-bottom-color: var(--accent); }

/* Scroll-spy: the section currently in view. */
.site-nav a[aria-current="true"] {
  color: var(--accent-text);
  border-bottom-color: var(--accent);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  background: none;
  border: 1px solid var(--rule);
  cursor: pointer;
}
.nav-toggle__bars {
  width: 18px; height: 2px; background: currentColor; position: relative;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.site-header__cta { order: 3; }

/* The "Enquire" button appears in ONE place at a time: the header bar from
   900px up, the mobile menu below it. */
.site-nav__cta-item { display: none; }

/* Below 900px the header bar is a single row — wordmark left, Menu right.
   Without JS the nav is simply a visible, wrapped list on its own row: no
   button, nothing hidden, and Enquire is still reachable inside that list. */
@media (max-width: 56.24em) {
  .site-header__cta { display: none; }
  .site-nav__cta-item { display: block; }
  .site-nav { flex-basis: 100%; }

  .js .nav-toggle { display: inline-flex; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .js .site-nav__list { flex-direction: column; gap: 0; padding-bottom: 0.5rem; }
  .js .site-nav__list li + li { border-top: 1px solid var(--rule); }
  .js .site-nav a { width: 100%; }

  .site-nav__cta-item { margin-top: 0.75rem; }
  .js .site-nav__list li.site-nav__cta-item { border-top: none; }
}

/* Very narrow phones: shrink the header furniture so the row never overflows. */
@media (max-width: 26em) {
  .site-header__inner { gap: 0.5rem 0.75rem; }
  .wordmark { font-size: 0.9375rem; }
  .site-header__cta { padding-inline: 1rem; }
  .nav-toggle { padding-inline: 0.7rem; }
  .nav-toggle__label { font-size: 0.6875rem; }
}

/* ---------- 9. Hero ------------------------------------------------------ */

.hero { padding-block: clamp(3rem, 8vw, 6rem) 0; }
.hero__grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }

/* 900px is this design's "desktop" line: the hero splits into two columns, the
   art-directed 4:5 hero crop takes over, and the full nav returns to the bar. */
@media (min-width: 56.25em) {
  .hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 2.5vw, 2.5rem);
    align-items: start;
  }
  .hero__text   { grid-column: 1 / 7; }
  /* Nudged down so the bar motif lines up with the top of the headline and the
     two read as a single block. Matches the eyebrow's height + margin. */
  .hero__figure { grid-column: 7 / 13; margin-top: 2.6rem; }
}

.eyebrow { color: var(--muted); margin-bottom: 1.5rem; }
.hero__title { margin-bottom: 1.75rem; }
.hero__title + .lede { margin-bottom: 2.25rem; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  max-width: none;
}

.hero__places {
  margin-top: 1.5rem;
  color: var(--muted);
  font-stretch: 112%;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
}

/* The bar motif: a thick ink rule with two short uprights — a nod to a
   pull-up bar. Used once, above the hero frame. */
.bar-rule {
  position: relative;
  height: 9px;
  background: var(--ink);
  margin-bottom: 1.5rem;
}
.bar-rule::before,
.bar-rule::after {
  content: "";
  position: absolute;
  top: -13px;
  width: 9px;
  height: 13px;
  background: var(--ink);
}
.bar-rule::before { left: 7%; }
.bar-rule::after  { right: 7%; }

.hero__figure img { width: 100%; }

/* ---------- 10. Fact strip ----------------------------------------------- */

.factstrip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(3rem, 8vw, 5.5rem);
  border-top: 2px solid var(--ink);
}
@media (min-width: 48em) {
  .factstrip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.factstrip__item {
  padding: 1.5rem 1.25rem 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 48em) {
  .factstrip__item { border-bottom: none; }
  .factstrip__item + .factstrip__item {
    border-left: 1px solid var(--rule);
    padding-left: 1.25rem;
  }
}

.factstrip__value {
  font-stretch: 62%;
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  line-height: 0.9;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.factstrip__label { color: var(--muted); margin: 0; }

/* ---------- 11. About ---------------------------------------------------- */

.about__body p + p { margin-top: 1.25rem; }

/* First-person statement in the About section. */
.pullquote {
  margin-top: 2.25rem;
  padding-left: clamp(1rem, 3vw, 1.5rem);
  border-left: 3px solid var(--accent);
}
.pullquote p {
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.375rem);
  line-height: 1.45;
  font-style: italic;
  max-width: 44ch;
}
.pullquote footer {
  margin-top: 0.9rem;
  color: var(--muted);
  font-stretch: 112%;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
}

.about__figure img { width: 100%; }

.caption {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
  font-stretch: 105%;
  letter-spacing: 0.04em;
}

/* ---------- 12. Credentials ---------------------------------------------- */

.cred { border-top: 1px solid var(--rule); }

.cred__row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.25rem 1rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 40em) {
  .cred__row { grid-template-columns: 6.5rem 1fr; gap: 1.5rem; }
}

.cred__year { color: var(--accent-text); padding-top: 0.35rem; }
.cred__main { display: block; }
.cred__title { display: block; font-weight: 700; line-height: 1.35; }
.cred__detail { display: block; color: var(--muted); font-size: 0.9375rem; margin-top: 0.25rem; }

/* ---------- 12b. Timeline ------------------------------------------------
   A vertical year rail. Desktop: the year numeral sticks in a left column
   while its entries scroll past on the right. Mobile: year as a heading,
   entries stacked beneath it.
   ------------------------------------------------------------------------ */

.tl { border-top: 1px solid var(--rule); margin-top: 1.5rem; }

.tl__year {
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 48em) {
  .tl__year {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  .tl__yearnum {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    align-self: start;
    margin-bottom: 0;
  }
}

.tl__yearnum {
  font-stretch: 62%;
  font-weight: 800;
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 1.25rem;
}

/* The rail itself, with a square marker per entry. */
.tl__entries {
  padding-left: 1.75rem;
  border-left: 1px solid var(--rule);
}
.tl__entry {
  position: relative;
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.tl__entry:last-child { padding-bottom: 0; }
.tl__entry::before {
  content: "";
  position: absolute;
  left: calc(-1.75rem - 4px);
  top: 0.4rem;
  width: 9px;
  height: 9px;
  background: var(--ink);
}
.tl__entry--milestone::before { background: var(--accent); }

.tl__date {
  color: var(--muted);
  font-stretch: 112%;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}
.tl__title {
  font-stretch: 85%;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  margin-top: 0.35rem;
  max-width: 44ch;
}
.tl__detail {
  color: var(--muted);
  font-size: 0.9375rem;
  margin-top: 0.25rem;
  max-width: 52ch;
}

/* Timeline photos: justified rows, NOT a fixed-ratio grid.
   Every tile is given the same height and takes whatever width its own
   proportions ask for, so nothing is cropped — no head, hand or foot is ever
   cut off a skill shot, and 9:16 reel covers simply come out narrow. The
   width is derived by the browser from each <img>'s width/height attributes,
   so adding a photo needs no new CSS. */
.tl__photos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 0.9rem;
  max-width: 48rem;
}
.tl__photos > li { max-width: 100%; min-width: 0; }
.tl__photos .tile { display: block; width: auto; max-width: 100%; background: var(--ink); }
.tl__photos .tile picture { display: block; width: auto; max-width: 100%; height: auto; }
.tl__photos .tile img {
  height: 12.5rem;              /* the shared row height */
  width: auto;
  max-width: 100%;
  object-fit: contain;          /* letterbox rather than crop, if ever clamped */
  object-position: center;      /* the op-NN focal points are moot now */
}
@media (min-width: 48em) {
  .tl__photos .tile img { height: 17.5rem; }
}

/* ---------- 13. Coaching ------------------------------------------------- */

.focus { display: grid; gap: 0; border-top: 1px solid var(--rule); }
@media (min-width: 48em) {
  .focus { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3rem); }
}

.focus__item { padding-block: 1.5rem; border-bottom: 1px solid var(--rule); }
.focus__title {
  font-stretch: 85%;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}
.focus__item p { color: var(--muted); font-size: 0.9375rem; }

.details { border-top: 1px solid var(--rule); }
.details__row {
  display: grid;
  gap: 0.35rem 1.5rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 40em) {
  .details__row { grid-template-columns: 9rem 1fr; align-items: baseline; }
}
.details dt { color: var(--muted); }
.details dd { margin: 0; }

/* ---------- 14. Gallery --------------------------------------------------
   Mobile: a scroll-snap carousel. Every slide is the same height and the
   photo is CONTAINED inside it on ink, so portrait and landscape shots both
   show whole — nothing is cropped.
   Desktop (>=64em): CSS multi-column masonry. Each tile keeps the photo's own
   proportions and the columns balance themselves.

   This replaced a 6-column grid of fixed 1:1 / 4:3 / 3:2 / 2:1 tiles on
   19 Sep 2026. That grid cropped heads, hands and feet off skill shots. The
   --wN / --rNN classes on the <li> are kept in the markup because they still
   describe the intended emphasis, but only --w6 (the full-width Instagram
   panel) still does anything.
   ------------------------------------------------------------------------ */

.gallery {
  display: flex;
  gap: clamp(0.75rem, 2.5vw, 1.25rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* bleed to the screen edges so the peek reads as a carousel */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-bottom: 0.5rem;
}
.gallery::-webkit-scrollbar { display: none; }

.gallery__item {
  flex: 0 0 82%;
  scroll-snap-align: center;
}

/* Carousel slides: one height for every slide, with the photo CONTAINED on
   ink rather than cropped to fill — portrait and landscape shots both show
   whole. The height tracks the slide's own width (each slide is 82% of the
   viewport), so a slide stays roughly square whatever the screen. */
.gallery__item .tile {
  height: clamp(18rem, 110vw, 26rem);
  background: var(--ink);
}
.gallery__item .tile img { object-fit: contain; object-position: center; }

@media (min-width: 64em) {
  .gallery {
    display: block;
    columns: 3;
    column-gap: clamp(0.75rem, 2.5vw, 1.25rem);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
  }
  .gallery__item {
    flex: none;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: clamp(0.75rem, 2.5vw, 1.25rem);
  }
  /* Natural proportions: no aspect-ratio, no fixed height, no cropping. */
  .gallery__item .tile {
    height: auto;
    background: var(--rule);
  }
  .gallery__item .tile picture { height: auto; }
  .gallery__item .tile img { height: auto; object-fit: fill; }

  /* The Instagram panel runs the full width, above the columns. */
  .gallery__item--w6 {
    column-span: all;
    margin-bottom: clamp(0.75rem, 2.5vw, 1.25rem);
  }
  .gallery__item--w6 .ig-tile { min-height: 9rem; }
}

/* --- Tile ---------------------------------------------------------------
   A real <a> pointing at the large JPEG, so it still works with JS off.
   JS upgrades it into a lightbox opener. */
.tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--rule);
  cursor: zoom-in;
}
/* <picture> must carry the tile's height, otherwise `height: 100%` on the img
   resolves against an auto-height parent, falls back to auto, and object-fit
   never gets a box to work in — the tile then crops from the top and
   object-position is ignored. */
.tile picture {
  display: block;
  width: 100%;
  height: 100%;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(.2, .6, .3, 1);
}

/* Per-image focal point, so faces are never cropped off. The number is how
   far down the source the interesting part sits. */
.op-25 { object-position: center 25%; }
.op-30 { object-position: center 30%; }
.op-35 { object-position: center 35%; }
.op-40 { object-position: center 40%; }
.op-50 { object-position: center 50%; }
.op-60 { object-position: center 60%; }
@media (prefers-reduced-motion: no-preference) {
  .tile:hover img,
  .tile:focus-visible img { transform: scale(1.04); }
}

.tile__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.7rem 0.9rem;
  background: rgba(22, 21, 15, 0.86);
  color: var(--chalk);
  font-size: 0.8125rem;
  line-height: 1.35;
  font-stretch: 105%;
  transform: translateY(100%);
  transition: transform 200ms cubic-bezier(.2, .6, .3, 1);
}
.tile:hover .tile__caption,
.tile:focus-visible .tile__caption { transform: none; }

/* On touch there is no hover, so the caption simply stays put. */
@media (hover: none) {
  .tile__caption { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tile__caption { transition: none; }
}

/* The About and Approach portraits reuse the tile behaviour without the
   fixed aspect ratio or the caption bar. */
.tile--bare { aspect-ratio: auto; background: none; }

/* --- Instagram panel ----------------------------------------------------- */
.ig-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  height: 100%;
  aspect-ratio: 4 / 3;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--ink);
  color: var(--chalk);
  text-decoration: none;
  transition: background-color var(--t);
}
@media (min-width: 64em) {
  .gallery__item--r11 .ig-tile { aspect-ratio: 1 / 1; }
  .gallery__item--r32 .ig-tile { aspect-ratio: 3 / 2; }
  /* Full-width closing band. */
  .gallery__item--r61 .ig-tile {
    aspect-ratio: auto;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    min-height: 8.5rem;
  }
  .gallery__item--r61 .ig-tile__text { max-width: none; margin-right: auto; }
}
.ig-tile:hover { background: #211f16; }
.ig-tile__glyph { color: var(--accent-dark); }
.ig-tile__text {
  font-stretch: 78%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  line-height: 1.05;
  max-width: 14ch;
}
.ig-tile__handle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent-dark);
  font-weight: 600;
  font-size: 0.9375rem;
}
.ig-tile__handle svg { transition: transform var(--t); }
.ig-tile:hover .ig-tile__handle svg { transform: translateX(3px); }
.ig-tile__ext { color: var(--muted-dark); font-size: 0.75rem; }

/* --- Carousel controls (small screens only) ------------------------------ */
.gallery__controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}
.gallery__controls[hidden] { display: none; }
@media (min-width: 64em) { .gallery__controls { display: none; } }

.gallery__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t);
}
.gallery__btn:hover { border-color: var(--ink); }
.gallery__btn[disabled] { opacity: 0.35; cursor: default; }
.gallery__counter {
  margin: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-stretch: 112%;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
}

/* ---------- 14b. Lightbox ------------------------------------------------ */

.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--chalk);
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(10, 10, 7, 0.94); }

.lightbox__stage {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  width: 100%;
  height: 100%;
  padding: clamp(3.5rem, 6vw, 4.5rem) clamp(0.5rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem);
}

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  min-width: 0;
  height: 100%;
}
.lightbox__img {
  max-width: 100%;
  max-height: calc(100dvh - 11rem);
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  text-align: center;
}
.lightbox__caption { font-size: 0.9375rem; color: var(--chalk); }
.lightbox__counter {
  color: var(--muted-dark);
  font-variant-numeric: tabular-nums;
  font-stretch: 112%;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
}

.lightbox__nav,
.lightbox__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(242, 239, 231, 0.1);
  color: var(--chalk);
  border: 1px solid rgba(242, 239, 231, 0.25);
  cursor: pointer;
  transition: background-color var(--t);
}
.lightbox__nav:hover,
.lightbox__close:hover { background: rgba(242, 239, 231, 0.22); }
.lightbox__close { position: absolute; top: 1rem; right: 1rem; }

.lightbox :focus-visible { outline-color: var(--accent-dark); }

/* ---------- 14c. Mobile action bar --------------------------------------- */

.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  transform: translateY(100%);
  transition: transform 200ms cubic-bezier(.2, .6, .3, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.actionbar[hidden] { display: none; }
.actionbar.is-visible { transform: none; }
@media (prefers-reduced-motion: reduce) { .actionbar { transition: none; } }
@media (min-width: 43.75em) { .actionbar { display: none; } }

.actionbar__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font-stretch: 110%;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.actionbar__btn--alt { background: var(--ink); color: var(--chalk); }

/* Body gets clearance only while the bar is actually on screen. */
body.has-actionbar { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 43.75em) { body.has-actionbar { padding-bottom: 0; } }

/* ---------- 15. Approach (dark) ------------------------------------------ */

.section--dark {
  background: var(--ink);
  color: var(--chalk);
  border-top-color: var(--ink);
}
.section--dark .section-label,
.section--dark .focus__item p,
.section--dark .note { color: var(--muted-dark); }
.section--dark .section-num { color: var(--accent-dark); }
.section--dark .group-title { color: var(--muted-dark); border-bottom-color: rgba(242, 239, 231, 0.22); }

/* Section motto — display type, no attribution. */
.motto {
  position: relative;
  margin-block: 1.75rem 2.5rem;
  padding-left: clamp(1rem, 3vw, 1.75rem);
  border-left: 4px solid var(--accent);
  font-stretch: 72%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 4.2vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  max-width: 20ch;
}

.principles { margin-top: 1rem; border-top: 1px solid rgba(242, 239, 231, 0.22); }
.principles__item { padding-block: 1.25rem; border-bottom: 1px solid rgba(242, 239, 231, 0.22); }
.principles__title {
  font-stretch: 72%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin-bottom: 0.4rem;
}
.principles__item p { color: var(--muted-dark); max-width: 52ch; }

.steps { display: grid; gap: 0.75rem; margin-top: 0.5rem; }
.steps__item { display: flex; gap: 1rem; align-items: baseline; }
.steps__num {
  flex: none;
  color: var(--accent-dark);
  font-stretch: 110%;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
}

.approach__figure img { width: 100%; }

/* Let the portrait ride down its column instead of leaving a long empty dark
   gap. Only on a desktop-width viewport that is also tall enough for it to be
   an improvement — never on mobile or a short window. */
@media (min-width: 64em) and (min-height: 45em) {
  .approach__figure { position: sticky; top: 6.5rem; }
}

/* ---------- 15b. FAQ ------------------------------------------------------
   Native <details>/<summary> — hairline rows in the same rhythm as the
   credentials and coaching lists. No JavaScript involved.
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--rule); max-width: 52rem; }
.faq > li { border-bottom: 1px solid var(--rule); }

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
  min-height: 2.75rem;          /* 44px tap target */
  cursor: pointer;
  list-style: none;             /* kill the default disclosure triangle */
  font-stretch: 85%;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
}
.faq__q::-webkit-details-marker { display: none; }

/* Vermilion +/– marker, drawn with two bars so it needs no icon font. */
.faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 0.3rem;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 14px 3px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 3px 14px no-repeat;
  transition: transform var(--t);
}
.faq__item[open] > .faq__q::after {
  /* Only the horizontal bar is left: a minus. */
  background: linear-gradient(var(--accent), var(--accent)) center / 14px 3px no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .faq__q::after { transition: none; }
}

.faq__q:hover { color: var(--accent-text); }
.faq__q:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.faq__a {
  padding-bottom: 1.2rem;
  padding-right: 2.5rem;
}
.faq__a p {
  color: var(--muted);
  font-size: 0.9375rem;
  max-width: 62ch;
}

/* ---------- 16. Contact -------------------------------------------------- */

.contact { margin-top: 2rem; border-top: 1px solid var(--rule); }
.contact + .note { margin-top: 1.5rem; }

.contact__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 76px;
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: background-color var(--t), padding-left var(--t);
}
a.contact__row:hover { background: rgba(212, 65, 30, 0.07); padding-left: 0.75rem; }
.contact__arrow svg { transition: transform var(--t); }
a.contact__row:hover .contact__arrow svg { transform: translateX(3px); }

/* Arrows nudge on hover wherever they appear. */
.btn svg { transition: transform var(--t); }
.btn:hover svg { transform: translateX(3px); }

.contact__row--primary { border-bottom-width: 2px; border-bottom-color: var(--ink); }
.contact__row--primary .contact__icon { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.contact__row--primary .contact__label { font-size: 1.25rem; }

.contact__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  border-radius: 50%;
}
.contact__text { flex: 1 1 auto; min-width: 0; }
.contact__label {
  display: block;
  font-stretch: 85%;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
}
.contact__value { display: block; color: var(--muted); font-size: 0.9375rem; }
.contact__ext { font-size: 0.8125rem; }
.contact__arrow { flex: none; color: var(--accent-text); }

.contact__row.is-disabled { opacity: 0.75; cursor: not-allowed; }
.contact__row.is-disabled .contact__icon { color: var(--muted); border-style: dashed; }
.contact__state {
  flex: none;
  color: var(--muted);
  border: 1px dashed var(--rule);
  padding: 0.3rem 0.6rem;
  border-radius: 2px;
}

/* ---------- 17. Footer --------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--chalk);
  padding-block: clamp(3rem, 7vw, 5rem);
}
.site-footer__inner { display: grid; gap: 2rem; }
@media (min-width: 48em) {
  .site-footer__inner { grid-template-columns: 1fr auto; align-items: start; }
  .site-footer__copy { grid-column: 1 / -1; }
}
.site-footer__meta { color: var(--muted-dark); margin-top: 0.6rem; max-width: none; }
.site-footer__links { display: grid; gap: 0.9rem; justify-items: start; }
.site-footer__copy {
  color: var(--muted-dark);
  font-size: 0.8125rem;
  padding-top: 2rem;
  max-width: none;               /* the rule above it should span the footer */
  border-top: 1px solid rgba(242, 239, 231, 0.22);
}

/* ---------- 18. 404 ------------------------------------------------------ */

.page-404 { padding-block: clamp(5rem, 14vw, 10rem); }
.page-404 .lede { margin-block: 1.5rem 2.5rem; }

/* ---------- 19. Scroll reveal -------------------------------------------- */
/* Applied only when JS is running AND the visitor has not asked for less
   motion. With JS off, or reduced motion on, nothing is ever hidden. */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 500ms ease, transform 500ms ease;
    transition-delay: var(--reveal-delay, 0ms);
  }
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}