/* =========================================================================
   photo.teamdct.ca — portrait studio, Brampton
   Built on the Team DCT public-site design system (team-dct/src/styles/tokens.css).

   THE THESIS
   The gallery shell holds no colour of its own, so the only colour in the room
   arrives inside the photographs. That is already the house rule: mono chrome,
   colour entering only inside a scoped container. On a photographer's site the
   scoped container is the frame, which makes this the one product where the
   system's own discipline IS the art direction.

   THE STRUCTURAL BET: the contact sheet.
   What is sold is a narrowing. Twenty to thirty frames go in, three or five
   edited photographs come out. So each session states itself as a real proof
   sheet, and the keeper is not marked with an accent colour: it is the frame
   that still HAS its colour while the rest of the sheet sits in grey. The mark
   and the mono rule turn out to be the same decision.

   ANTI-THESIS (what this must never become)
   A moody dark photographer template with a red accent, a full-bleed stock
   hero, and type floating on a mid-luminance photograph.
   ========================================================================= */

/* ------------------------------------------------------------------ fonts */
/* Metrics read from the actual files: ascent 100.5%, descent 29.5%, gap 0,
   average lowercase advance 0.5338em against Arial's 0.5561em, hence
   size-adjust 96%. The fallback is metrically identical, so the swap costs
   zero layout shift. */
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 96%; ascent-override: 100.5%; descent-override: 29.5%; line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Mono Fallback";
  src: local("Consolas"), local("Courier New"), local("Liberation Mono");
  size-adjust: 100%; ascent-override: 100.5%; descent-override: 29.5%; line-gap-override: 0%;
}

/* ---------------------------------------------------------- house tokens */
/* Values taken verbatim from team-dct/src/styles/tokens.css. Light and dark
   are both authored; dark is not an inversion of light. */
:root,
:root[data-resolved-theme="light"] {
  --surface: #fafaf6;
  --surface-2: #f4f3ee;
  --surface-3: #efece4;
  --surface-inverse: #0a0907;

  --ink-strong: #0a0907;
  --ink: #1a1815;
  --ink-2: #5d5a52;
  --ink-3: #8b857a;
  --ink-4: #c0bcb3;
  --ink-inverse: #fafaf6;

  --border-hairline: #e8e4dc;
  --border-strong: #4a4742;
  --focus-ring: #0a0907;

  /* The hero treatment. In light mode the veil IS the cream surface, so the
     photographs frost rather than dim and the hero still reads as a light
     room. Same gradient, opposite behaviour, one token. */
  --veil: 250 250 246;
  --veil-1: 0.16; --veil-2: 0.42; --veil-3: 0.92; --veil-4: 0.985;
  --sheet-rest: 0.42;
  --wall-brightness: 1.10;
  --wall-saturate: 0.88;

  /* Borders recede as translucent ink, darker than the surface. */
  --line: color-mix(in srgb, var(--ink-strong) 9%, transparent);
  --line-2: color-mix(in srgb, var(--ink-strong) 16%, transparent);

  /* Borders before shadows; shadow only where a surface genuinely floats. */
  --lift-1:
    0 1px 1px color-mix(in srgb, var(--ink-strong) 5%, transparent),
    0 2px 6px color-mix(in srgb, var(--ink-strong) 5%, transparent),
    0 10px 28px color-mix(in srgb, var(--ink-strong) 5%, transparent);
  --lift-2:
    0 1px 2px color-mix(in srgb, var(--ink-strong) 7%, transparent),
    0 8px 20px color-mix(in srgb, var(--ink-strong) 7%, transparent),
    0 26px 64px color-mix(in srgb, var(--ink-strong) 8%, transparent);
}

:root[data-resolved-theme="dark"] {
  --surface: #0a0907;
  --surface-2: #131210;
  --surface-3: #1a1816;
  --surface-inverse: #fafaf6;

  --ink-strong: #fafaf6;
  --ink: #e8e4dc;
  --ink-2: #b6b0a4;
  --ink-3: #7a756c;
  --ink-4: #4a4742;
  --ink-inverse: #0a0907;

  --border-hairline: #1f1d1a;
  --border-strong: #5a5750;
  --focus-ring: #fafaf6;

  --veil: 10 9 7;
  --veil-1: 0.10; --veil-2: 0.30; --veil-3: 0.86; --veil-4: 0.97;
  --sheet-rest: 0.5;
  --wall-brightness: 0.98;
  --wall-saturate: 1;

  --line: color-mix(in srgb, var(--ink-strong) 10%, transparent);
  --line-2: color-mix(in srgb, var(--ink-strong) 18%, transparent);

  --lift-1:
    0 1px 1px rgb(0 0 0 / 0.34),
    0 2px 6px rgb(0 0 0 / 0.26),
    0 10px 28px rgb(0 0 0 / 0.20);
  --lift-2:
    0 1px 2px rgb(0 0 0 / 0.40),
    0 8px 20px rgb(0 0 0 / 0.32),
    0 26px 64px rgb(0 0 0 / 0.26);
}

/* ----------------------------------------------------- rhythm and motion */
:root {
  --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, monospace;

  --type-display-size: clamp(2.75rem, 8vw, 5.5rem);
  --type-display-line: 1.05;
  --type-display-track: -0.035em;

  --type-h2-size: clamp(2rem, 4vw, 3.25rem);
  --type-h2-line: 1.1;
  --type-h2-track: -0.025em;

  --type-h3-size: 1.5rem;
  --type-h3-line: 1.2;
  --type-h3-track: -0.015em;

  --type-body-l: 1.125rem;
  --type-body: 1rem;
  --type-caption: 0.75rem;
  --type-caption-track: 0.18em;
  --type-ordinal: 0.875rem;
  --type-ordinal-track: 0.04em;

  --space-section: clamp(96px, 12vw, 192px);
  --space-h2-to-body: clamp(24px, 3vw, 48px);
  --space-eyebrow-to-h2: 12px;
  --space-body-to-cta: clamp(32px, 4vw, 64px);
  --space-card-gap: clamp(20px, 2.5vw, 32px);
  --space-gutter: clamp(20px, 4vw, 48px);

  --container-wide: 1280px;
  --container-content: 1040px;
  --container-reading: 720px;

  --duration-snap: 120ms;
  --duration-base: 240ms;
  --duration-lift: 400ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-reveal: 760ms;
  --reveal-stagger: 72ms;
  --reveal-shift: 18px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
  scrollbar-gutter: stable;
  overscroll-behavior-y: none;
  color-scheme: light;
}
:root[data-resolved-theme="dark"] { color-scheme: dark; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  position: relative;               /* atmosphere anchors here, never fixed */
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.55;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: none; }

::selection { background: var(--ink-strong); color: var(--ink-inverse); }
:root { accent-color: var(--ink-strong); caret-color: var(--ink-strong); }
* { -webkit-tap-highlight-color: transparent; }
a, button { touch-action: manipulation; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 99px; border: 3px solid var(--surface-2); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }
[id] { scroll-margin-top: 5.5rem; }

/* ------------------------------------------------------------ typography */
h1, h2, h3 { margin: 0; text-wrap: balance; text-box: trim-both cap alphabetic; overflow-wrap: anywhere; }
p { margin: 0; text-wrap: pretty; }

.display {
  font-size: var(--type-display-size);
  line-height: var(--type-display-line);
  letter-spacing: var(--type-display-track);
  font-weight: 700;
  color: var(--ink-strong);
}
.h2 {
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  letter-spacing: var(--type-h2-track);
  font-weight: 600;
  color: var(--ink-strong);
}
.h3 {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  letter-spacing: var(--type-h3-track);
  font-weight: 600;
  color: var(--ink-strong);
}
.lede { font-size: var(--type-body-l); line-height: 1.6; color: var(--ink-2); max-width: 36ch; }
@media (min-width: 48rem) { .lede { max-width: 52ch; } }
.body { color: var(--ink-2); max-width: 64ch; }

.caption {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--type-caption-track);
  line-height: 1.35;
  color: var(--ink-2);
  font-weight: 500;
}
.ordinal {
  font-family: var(--font-mono);
  font-size: var(--type-ordinal);
  letter-spacing: var(--type-ordinal-track);
  font-weight: 500;
  color: var(--ink-2);
}
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

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

/* ------------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
/* The name is "Photography". Team DCT sits under it as the maker, so the two
   never read as one run-on phrase. */
.wordmark {
  display: inline-flex; align-items: center; gap: 0.65rem; min-height: 2.75rem;
  color: var(--ink-strong); text-decoration: none;
}
.wordmark .mk { display: block; width: 1.6rem; height: 1.6rem; flex: none; }
.wm-text { display: flex; flex-direction: column; line-height: 1; }
.wm-main {
  font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.022em; color: var(--ink-strong);
}
.wm-sub {
  margin-top: 3px;
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.17em; color: var(--ink-2);
}
.nav-right { display: flex; align-items: center; gap: 0.5rem; }
.nav-links { margin-right: 0; }
.nav-links { display: none; gap: 1.5rem; margin-right: 0.5rem; }
@media (min-width: 60rem) { .nav-links { display: flex; } }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--ink-2); text-decoration: none; font-size: 0.9375rem;
  transition: color var(--duration-snap) var(--ease-out);
}
.nav-links a:hover { color: var(--ink-strong); transition-duration: var(--duration-base); }

/* Theme control: system / light / dark, the same three-state choice the
   public site offers. Never a single toggle, because "follow the system" is a
   real preference and dropping it is a regression. */
.theme {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2);
}
.theme button {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px;
  color: var(--ink-2); cursor: pointer;
  transition: background-color var(--duration-snap) var(--ease-out), color var(--duration-snap) var(--ease-out);
}
.theme button:hover { color: var(--ink-strong); transition-duration: var(--duration-base); }
.theme button[aria-pressed="true"] { background: var(--surface); color: var(--ink-strong); box-shadow: var(--lift-1); }
.theme svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------- buttons */
/* Five states on every control: rest, hover, focus-visible, active, disabled.
   Nothing moves on hover; feedback is fill, border and shadow. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0 1.5rem; border-radius: 999px; border: 1px solid transparent;
  font-size: 0.9375rem; font-weight: 550; letter-spacing: -0.004em; text-decoration: none; cursor: pointer;
  transition: background-color var(--duration-snap) var(--ease-out),
              border-color var(--duration-snap) var(--ease-out),
              color var(--duration-snap) var(--ease-out),
              box-shadow var(--duration-snap) var(--ease-out);
}
.btn:hover { transition-duration: var(--duration-base); }    /* in fast, out slow */
.btn-primary { background: var(--ink-strong); color: var(--ink-inverse); box-shadow: var(--lift-1); }
.btn-primary:hover { background: var(--ink); box-shadow: var(--lift-2); }
.btn-primary.is-press { background: var(--ink-2); box-shadow: var(--lift-1); }
.btn-ghost { border-color: var(--line-2); color: var(--ink-strong); }
.btn-ghost:hover { background: color-mix(in srgb, var(--ink-strong) 5%, transparent); border-color: var(--border-strong); }
.btn-ghost.is-press { background: color-mix(in srgb, var(--ink-strong) 9%, transparent); }
.btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn .arw { transition: transform var(--duration-base) var(--ease-out); }
.btn:hover .arw { transform: translateX(3px); }

/* ------------------------------------------------------------------ hero */
/* THE COMPOSITION. One centred axis at every width.
   The wall is a BAND of a stated height that sits entirely above the type,
   which is the whole fix: when the wall covered the full hero, the veil that
   made the type legible also swallowed everything below the first row, so
   eleven of twelve photographs were paid for and never seen. Now the band is
   sized so every frame in it is visible, and the type sits below it on the
   page's own surface, where legibility is structural rather than rescued.
   The band's edges dissolve: the sides fall away so the grid vignettes into
   the page instead of being sliced by the viewport, and the base melts into
   the surface so there is no cut line. Because --veil carries the surface
   colour, the identical treatment darkens in dark mode and frosts in light. */
.hero {
  position: relative; isolation: isolate;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  overflow: clip;
  --band: clamp(290px, 42vh, 400px);
}
@media (min-width: 48rem) { .hero { --band: clamp(340px, 46vh, 470px); } }
@media (min-width: 62rem) { .hero { --band: clamp(380px, 52vh, 560px); } }

.hero-band { position: absolute; inset: 0 0 auto 0; height: var(--band); z-index: 0; }
.hero-wall {
  position: absolute; inset: 0;
  display: grid; gap: 2px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
@media (min-width: 48rem) { .hero-wall { grid-template-columns: repeat(6, 1fr); } }
.hero-wall .t { overflow: hidden; background: var(--surface-2); }
.hero-wall img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(var(--wall-saturate)) brightness(var(--wall-brightness));
}
/* Beyond twelve on a wide screen, eight on a phone: the rest would only be
   downloaded to sit behind the fade. */
@media (max-width: 47.99rem) { .hero-wall .t:nth-child(n + 9) { display: none; } }

.hero-veil { position: absolute; inset: 0; }
/* The base melts into the page. */
.hero-veil::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgb(var(--veil) / 0) 0%,
    rgb(var(--veil) / 0) 66%,
    rgb(var(--veil) / 0.28) 80%,
    rgb(var(--veil) / 0.78) 92%,
    rgb(var(--veil) / 1) 100%
  );
}
/* The sides fall away. */
.hero-veil::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(
    to right,
    rgb(var(--veil) / 0.95) 0%,
    rgb(var(--veil) / 0.30) 13%,
    rgb(var(--veil) / 0) 30%,
    rgb(var(--veil) / 0) 70%,
    rgb(var(--veil) / 0.30) 87%,
    rgb(var(--veil) / 0.95) 100%
  );
}

.hero-in {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-top: calc(var(--band) + clamp(1.75rem, 5vw, 3.5rem));
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
.hero-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: var(--space-eyebrow-to-h2); }
.hero-eyebrow .rule { display: block; width: 20px; height: 1px; background: var(--ink-3); }
.hero h1 { max-width: 17ch; margin-bottom: var(--space-h2-to-body); }
.hero .lede { margin-bottom: var(--space-body-to-cta); max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.hero-cta .btn { flex: 1 1 auto; min-width: min(14rem, 100%); }
@media (min-width: 30rem) { .hero-cta .btn { flex: 0 0 auto; } }

.hero-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0; padding-top: 1.75rem;
  border-top: 1px solid var(--line); width: 100%; max-width: var(--container-content);
}
@media (min-width: 52rem) { .hero-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hero-facts div { text-align: center; }
.hero-facts dt { margin-bottom: 0.45rem; }
.hero-facts dd { margin: 0; font-size: 1.0625rem; font-weight: 550; color: var(--ink-strong); }

/* --------------------------------------------------------------- section */
.section { padding-block: var(--space-section); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: var(--container-reading); }
.section-head .caption { display: block; margin-bottom: var(--space-eyebrow-to-h2); }
.section-head h2 { margin-bottom: var(--space-h2-to-body); }
.section-centered { margin-inline: auto; text-align: center; }
.section-centered .body { margin-inline: auto; }

/* ---------------------------------------------------------- the sessions */
.paths { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-card-gap); }
.package-scope { max-width: var(--container-reading); margin: 1.75rem auto 0; text-align: center; }
@media (min-width: 56rem) { .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.path {
  display: flex; flex-direction: column; padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--line); border-radius: 20px; background: var(--surface-2); text-align: center;
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out);
}
.path:hover { border-color: var(--line-2); box-shadow: var(--lift-1); background: var(--surface-3); }
.path-top { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.path-top > div { text-align: center; }
.path h3 { margin-bottom: 0.4rem; }
.path .amount { font-size: clamp(2.25rem, 4vw, 2.75rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--ink-strong); }
.path .per { display: block; margin-bottom: 0.4rem; }
.path .body { margin-bottom: 1.75rem; }

/* The contact sheet. The keeper is the frame that KEEPS its colour; the rest
   of the sheet sits in grey. No accent hue is needed, because the photograph
   is the accent. Concentric radii: inner = outer − padding. */
.sheet { margin-bottom: 1.75rem; }
.sheet-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px;
  padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-3);
}
.sheet-strip .cell { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--surface-3); }
.sheet-strip .cell img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) opacity(var(--sheet-rest));
  transition: filter var(--duration-base) var(--ease-out);
}
.sheet-strip .cell.keep img { filter: none; }
.sheet-strip .cell.keep::after { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--ink-strong); border-radius: 2px; }
.sheet-note { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; }
.sheet-note .kept { color: var(--ink-strong); }

.path ul { list-style: none; margin: 0 auto 2rem; padding: 0; display: grid; gap: 0.7rem; text-align: left; max-width: 23rem; }
.path li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.7rem; align-items: start; color: var(--ink-2); }
.path li svg { margin-top: 0.36rem; color: var(--ink-strong); }
.path .btn { margin-top: auto; width: 100%; }

/* -------------------------------------------------------------- the work */
.work-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.chip {
  min-height: 2.75rem; padding: 0 1.15rem; border-radius: 999px; border: 1px solid var(--line);
  color: var(--ink-2); font-size: 0.9375rem; cursor: pointer;
  transition: background-color var(--duration-snap) var(--ease-out),
              color var(--duration-snap) var(--ease-out),
              border-color var(--duration-snap) var(--ease-out);
}
.chip:hover { color: var(--ink-strong); border-color: var(--border-strong); transition-duration: var(--duration-base); }
.chip[aria-pressed="true"] { background: var(--ink-strong); color: var(--ink-inverse); border-color: var(--ink-strong); }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 40rem) { .grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (min-width: 64rem) { .grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
.frame {
  position: relative; overflow: hidden; border-radius: 12px; margin: 0;
  background: var(--surface-2); border: 1px solid var(--line); aspect-ratio: 4 / 5;
}
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-lift) var(--ease-out-strong); }
.frame:hover img { transform: scale(1.03); }
.frame figcaption {
  position: absolute; inset-inline: 0; bottom: 0; padding: 2.5rem 0.85rem 0.7rem;
  background: linear-gradient(to top, rgb(10 9 7 / 0.88), transparent);
  color: #fafaf6;                      /* always light: it sits on a photograph */
  opacity: 1;
}
.frame.is-hidden { display: none; }

/* ------------------------------------------------------------------ steps */
.steps { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-card-gap); } }
.step { padding-top: 1.25rem; border-top: 1px solid var(--border-strong); }
.step .ordinal { display: block; margin-bottom: 0.85rem; }
.step h3 { margin-bottom: 0.55rem; }
.steps { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 55rem; margin-inline: auto; }
.step { display: grid; grid-template-columns: 4rem minmax(12rem, 0.72fr) 1fr; align-items: start; gap: 1.25rem; padding-block: 1.7rem; }
.step .ordinal { margin: 0; }
.step h3 { margin: 0; }
@media (max-width: 52rem) {
  .step { grid-template-columns: 2.25rem 1fr; gap: 0.4rem 0.8rem; }
  .step .ordinal { grid-row: 1 / 3; }
  .step p { grid-column: 2; }
}

/* ------------------------------------------------------------------- book */
.book {
  border: 1px solid var(--line); border-radius: 24px; background: var(--surface-2);
  padding: clamp(2rem, 5vw, 3.5rem); text-align: center;
}
.book .lede { margin-inline: auto; }
.session-request { max-width: 46rem; margin: clamp(2rem, 4vw, 3rem) auto 0; text-align: left; }
.request-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.request-fields label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; font-size: 0.875rem; font-weight: 550; color: var(--ink-strong); }
.request-fields :is(input, select, textarea) { min-width: 0; }
.request-fields .request-wide { grid-column: 1 / -1; }
.request-fields .optional { font-size: 0.75rem; font-weight: 400; color: var(--ink-2); }
.request-fields input, .request-fields select, .request-fields textarea {
  width: 100%; min-height: 3.25rem; border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--surface); color: var(--ink-strong); padding: 0.8rem 0.95rem;
  font-family: var(--font-sans); font-size: 1rem; line-height: 1.4;
}
.request-fields textarea { resize: vertical; }
.request-fields :is(input, select, textarea):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.session-request > .btn { width: 100%; margin-top: 1.5rem; }
.request-note { color: var(--ink-2); font-size: 0.8125rem; line-height: 1.5; margin-top: 0.85rem; text-align: center; }
.book-alternatives { margin: 1.75rem auto 2rem; }
.book-alternatives .btn { min-height: 2.75rem; }
@media (max-width: 38rem) { .request-fields { grid-template-columns: minmax(0, 1fr); } .request-fields .request-wide { grid-column: auto; } }
.book-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: var(--space-body-to-cta) 0 2rem; }
.book-cta .btn { flex: 1 1 auto; min-width: min(13rem, 100%); }
@media (min-width: 34rem) { .book-cta .btn { flex: 0 0 auto; } }
.terms { display: grid; gap: 0.6rem; padding-top: 1.75rem; border-top: 1px solid var(--line); max-width: var(--container-reading); margin-inline: auto; }
.terms p { font-size: 0.9375rem; color: var(--ink-2); }

/* -------------------------------------------- PHOTO-SITE-018 additions */
/* Error ink is a state, never decoration: it appears only on a field that
   needs attention. Values match the event page. */
:root, :root[data-resolved-theme="light"] { --error: #a32720; }
:root[data-resolved-theme="dark"] { --error: #ffaaa0; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip-link:focus { left: 1rem; top: 1rem; }

/* Where the sessions happen, said plainly beside the prices. */
.studio-note {
  display: grid; gap: 0.5rem; max-width: var(--container-reading); margin: var(--space-card-gap) auto 0;
  padding: 1.15rem 1.35rem; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface);
  text-align: center;
}
.studio-note p { color: var(--ink); }
.book-where {
  display: inline-block; margin-top: 1.1rem; padding: 0.45rem 0.95rem; border: 1px solid var(--line-2); border-radius: 999px;
  font-size: 0.875rem; color: var(--ink);
}

/* Every photograph is a link to its large image; the viewer opens it in place. */
.frame-open { display: block; width: 100%; height: 100%; cursor: zoom-in; color: inherit; }
.frame-open picture { display: block; height: 100%; }
.frame figcaption { pointer-events: none; }
.frame:has(.frame-open:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.frame-open:focus-visible { outline: none; }
.sheet-strip a.cell { display: block; cursor: zoom-in; }
.sheet-strip a.cell:hover img, .sheet-strip a.cell:focus-visible img { filter: none; }
.sheet-strip a.cell:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* The request: a few fields, the message it makes, one way to send it. */
.request-fields .field-error { font-size: 0.8125rem; font-weight: 450; color: var(--error); }
.request-fields .field-error:empty { display: none; }
.request-fields .field-hint { font-size: 0.8125rem; font-weight: 400; color: var(--ink-2); }
.request-fields label[hidden] { display: none; }
.request-fields [aria-invalid="true"] { border-color: var(--error); }
.request-more { margin-top: 1.1rem; border-top: 1px solid var(--line); }
.request-more summary {
  display: block; padding-block: 0.85rem; cursor: pointer; list-style: none;
  font-size: 0.9375rem; font-weight: 550; line-height: 1.35; color: var(--ink-strong);
}
.request-more summary::-webkit-details-marker { display: none; }
.request-more summary::before {
  content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin: 0 0.7rem 0.12rem 0.15rem; vertical-align: middle;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg);
  transition: transform var(--duration-base) var(--ease-out);
}
.request-more[open] summary::before { transform: rotate(45deg); }
.request-more summary .optional { font-size: 0.75rem; font-weight: 400; color: var(--ink-2); }
.request-more .request-fields { padding-bottom: 0.5rem; }
.request-preview { margin-top: 1.5rem; }
.request-preview .caption { display: block; margin-bottom: 0.6rem; }
.request-bubble {
  padding: 1rem 1.1rem; border: 1px solid var(--line-2); border-radius: 16px 16px 16px 4px; background: var(--surface);
  color: var(--ink-strong); font-size: 0.9375rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
}
.session-request > .request-send { width: 100%; margin-top: 1.25rem; height: auto; min-height: 3.25rem; padding-block: 0.8rem; line-height: 1.3; text-align: center; }
.request-fallback { margin-top: 0.6rem; text-align: center; font-size: 0.875rem; color: var(--ink-2); }
.request-fallback a, .link-button {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; cursor: pointer;
  color: var(--ink-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-size: inherit;
}
.request-status { min-height: 1.25rem; margin-top: 0.25rem; text-align: center; font-size: 0.875rem; color: var(--ink-strong); }
@media (prefers-reduced-motion: reduce) { .request-more summary::before { transition: none; } }

/* ----------------------------------------------------------------- footer */
.footer { border-top: 1px solid var(--line); padding-block: 2.5rem 3rem; }
.footer-in {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2rem;
  justify-content: space-between; align-items: center;
}
.footer-brand { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-brand .caption { padding-left: 2.25rem; }
@media (max-width: 40rem) { .footer-brand .caption { padding-left: 0; } }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.footer-links a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--ink-2); text-decoration: none; font-size: 0.9375rem;
  transition: color var(--duration-snap) var(--ease-out);
}
.footer-links a:hover { color: var(--ink-strong); transition-duration: var(--duration-base); }

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .frame:hover img, .btn:hover .arw { transform: none; }
}

/* --------------------------------------------------------- forced colors */
@media (forced-colors: active) {
  .hero-veil::before, .hero-veil::after { display: none; }
  .btn, .chip, .frame, .path, .book, .theme { border: 1px solid CanvasText; }
}