/* Light Table — studio-technical direction.
   Warm off-black ramp, one safelight-amber accent, Archivo (condensed for display) + IBM Plex Mono for plate notes. */

:root {
  /* Neutral ramp, tinted warm toward the amber */
  --ink-950: #0f0d0b;
  --ink-900: #161310;
  --ink-800: #1f1b17;
  --ink-700: #2c2621;
  --ink-600: #433a32;
  --ink-500: #6b6058;
  --ink-400: #a0958a;
  --ink-300: #c8bdb1;
  --ink-100: #efe8dd;

  /* The one accent: darkroom safelight. Crop marks, active states, focus, primary action. */
  --amber: #f08a3c;
  --amber-ink: #1a0f06;

  --bg: var(--ink-950);
  --surface: var(--ink-900);
  --rule: var(--ink-700);
  --text: var(--ink-100);
  --text-muted: var(--ink-400);

  /* 8px base spacing */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-6: 3rem;
  --s-8: 4rem;
  --s-12: 6rem;
  --s-16: 8rem;

  /* Type: Archivo width axis does the display work */
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  /* "IBM Plex Sans" is loaded as a digits-only subset, so numerals get a plain (undotted) zero
     and every other glyph falls through to Plex Mono. */
  --font-mono: "IBM Plex Sans", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(2rem, 4.2vw, 3.5rem);
  --fs-display: clamp(3.75rem, 10.5vw, 10rem);

  --gutter: clamp(1rem, 4vw, 3.5rem);
  --radius: 2px;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 200ms;
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--s-12); scrollbar-gutter: stable; }
/* Set while the lightbox is open: the page behind must not scroll. scrollbar-gutter above
   keeps the layout from jumping when the scrollbar disappears. */
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

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

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: var(--s-2); top: -100px; z-index: 100;
  background: var(--amber); color: var(--amber-ink);
  padding: var(--s-1) var(--s-2); text-decoration: none; font-weight: 600;
}
.skip:focus { top: var(--s-2); }

/* ---------- Display type ---------- */

.display {
  font-size: var(--fs-display);
  font-weight: 700;
  font-variation-settings: "wdth" 66;
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.display--md { font-size: clamp(2.75rem, 6.5vw, 6rem); line-height: 0.9; }

.section-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variation-settings: "wdth" 70;
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.muted { color: var(--ink-500); }

/* ---------- Header ---------- */

.site-head {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) var(--gutter);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  transition: transform 260ms var(--ease-out);
  will-change: transform;
}
/* main.js slides the header away while scrolling down and back on any scroll up */
.site-head.is-hidden { transform: translateY(-100%); }

/* Original Laya Gerlock wordmark, knocked out to transparent and tinted --ink-100 */
.wordmark { display: block; flex-shrink: 0; padding: var(--s-1) 0; }
.wordmark img { height: 34px; width: auto; }

.nav { display: flex; gap: var(--s-3); }
.nav a {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  padding: var(--s-1) 0;
  transition: color var(--dur) var(--ease-out);
}
.nav a:hover { color: var(--text); }
.nav a[aria-current] { color: var(--amber); }
/* Sections receive focus (tabindex=-1) after an in-page jump; no ring on the whole section */
section[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; }
.nav { align-items: center; }
.site-head nav { margin-left: auto; }
.head-social { display: flex; align-items: center; gap: var(--s-1); }
.head-social .social {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  margin: -8px -4px;           /* full tap target without pushing the header taller */
  color: var(--text-muted);
  transition: color var(--dur) var(--ease-out);
}
.head-social .social:hover { color: var(--amber); }
.social__icon { width: 18px; height: 18px; fill: currentColor; }

/* ---------- Buttons & links ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: 0 var(--s-4);
  background: var(--amber);
  color: var(--amber-ink);
  border: 0; border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.btn:hover { background: #ff9c52; }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: var(--ink-600); color: var(--ink-400); cursor: not-allowed; }

.textlink {
  text-decoration: underline;
  text-decoration-color: var(--ink-600);
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.textlink:hover { color: var(--amber); text-decoration-color: var(--amber); }

/* ---------- Plate captions (shared) ---------- */

.plate-cap {
  display: flex; flex-wrap: wrap; gap: 0 var(--s-2);
  color: var(--text-muted);
}
.plate-cap__no { color: var(--text); }

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-3);
  align-items: end;
  padding: var(--s-8) 0 var(--s-12) var(--gutter);
  min-height: calc(100svh - 64px);
}

.hero__copy {
  grid-column: 1 / span 5;
  padding-bottom: var(--s-2);
}
.eyebrow { color: var(--text-muted); margin-bottom: var(--s-4); }
.hero h1 { margin-bottom: var(--s-4); }
.lede {
  font-size: var(--fs-lg);
  line-height: 1.5;
  max-width: 34ch;
  color: var(--ink-300);
  margin-bottom: var(--s-6);
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.hero__actions .textlink {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* Plate bleeds off the right edge: grid broken on purpose */
.hero__plate { grid-column: 6 / -1; }
.crop {
  --mark: 22px;
  position: relative;
  padding: 18px 0 18px 18px;
  background:
    linear-gradient(var(--amber), var(--amber)) top left / var(--mark) 1px no-repeat,
    linear-gradient(var(--amber), var(--amber)) top left / 1px var(--mark) no-repeat,
    linear-gradient(var(--amber), var(--amber)) bottom left / var(--mark) 1px no-repeat,
    linear-gradient(var(--amber), var(--amber)) bottom left / 1px var(--mark) no-repeat;
}
.crop img { width: 100%; background: var(--surface); }
/* Hero plates: stacked in one grid cell and crossfaded by main.js. Under the frame, the
   active plate's caption sits left and the progress lines right (amber fills over the
   interval; a click jumps there and stops the rotation). */
.hero__slides { display: grid; }
.hero__slide { grid-area: 1 / 1; opacity: 0; transition: opacity 1100ms ease-in-out; }
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; background: var(--surface); }
.hero__meta {
  --hero-ms: 5500ms;   /* time each hero plate stays up (the progress line fills over this) */
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-2); padding: 0 var(--gutter) 0 18px;   /* plate bleeds right; controls keep the page margin */
}
.hero__meta .plate-cap[hidden] { display: none; }
.hero__dots { display: flex; gap: 6px; flex-shrink: 0; margin-top: -10px; }
.hero__dots[hidden] { display: none; }
.hero__dot {
  display: grid; align-items: center;
  width: 40px; height: 36px;
  padding: 0; border: 0; background: none;
  cursor: pointer;
}
.hero__dot span { position: relative; display: block; height: 2px; overflow: hidden; background: var(--ink-600); transition: background-color var(--dur) var(--ease-out); }
.hero__dot:hover span { background: var(--ink-500); }
.hero__dot span::after {
  content: ""; position: absolute; inset: 0;
  background: var(--amber);
  transform: scaleX(0); transform-origin: left center;
}
.hero__dot[aria-current="true"] span::after { transform: scaleX(1); }
.hero__plate.is-playing .hero__dot[aria-current="true"] span::after { animation: hero-progress var(--hero-ms) linear both; }
.hero__plate.is-paused .hero__dot span::after { animation-play-state: paused; }
@keyframes hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Clients ---------- */

.clients {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-4) 0 var(--s-4) var(--gutter);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.clients__head { display: grid; gap: var(--s-1); justify-items: start; }
.label { color: var(--text-muted); font-weight: 400; }
.rail-toggle {
  min-height: 32px;
  padding: 0 var(--s-1);
  margin-left: calc(var(--s-1) * -1);
  background: none; border: 0;
  color: var(--ink-500);
  cursor: pointer;
  transition: color var(--dur) var(--ease-out);
}
.rail-toggle:hover { color: var(--amber); }

/* Logo rail: continuous right-to-left loop. The track holds two identical lists and
   slides by exactly one of them (-50%), so the seam is invisible. A plain percentage
   transform with will-change stays on the compositor in Firefox and Chrome (smooth at
   slow speeds); the edge fade is drawn by overlays rather than mask-image, which can
   force Firefox to repaint the moving layer every frame. */
.clients__rail {
  --rail-gap: clamp(2.5rem, 5vw, 4.5rem);
  --rail-fade: clamp(2rem, 7%, 6rem);
  position: relative;
  overflow: hidden;
}
.clients__rail::before,
.clients__rail::after {
  content: "";
  position: absolute; top: 0; bottom: 0; z-index: 1;
  width: var(--rail-fade);
  pointer-events: none;
}
.clients__rail::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.clients__rail::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }

.clients__track {
  --rail-dur: 100s; /* ~22px/s: slow enough to read each logo */
  display: flex;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  animation: rail-loop var(--rail-dur) linear infinite;
}
.clients__list {
  display: flex;
  align-items: center;
  gap: var(--rail-gap);
  padding: var(--s-2) var(--rail-gap) var(--s-2) 0; /* trailing gap keeps both halves equal */
}
.clients__rail:hover .clients__track,
.clients.is-paused .clients__track { animation-play-state: paused; }

@keyframes rail-loop {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Logos are pre-tinted --ink-100 PNGs; per-logo --h equalises optical weight */
.clients__list img {
  height: var(--h, 2.5rem);
  width: auto;
  opacity: 0.72;
  transition: opacity var(--dur) var(--ease-out);
}
.clients__list li:hover img { opacity: 1; }

/* ---------- The plates ---------- */

.work { padding: var(--s-16) var(--gutter) var(--s-12); }

.work__head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: var(--s-3) var(--s-4);
  margin-bottom: var(--s-8);
}
.work__count { color: var(--text-muted); padding-bottom: 0.4em; }
.filters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-1); }

.filter {
  min-height: 40px;
  padding: 0 var(--s-2);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.filter:hover { color: var(--text); border-color: var(--ink-500); }
.filter[aria-pressed="true"] { color: var(--amber); border-color: var(--amber); }
.filter__n { color: var(--ink-500); margin-left: 0.35em; }
.filter[aria-pressed="true"] .filter__n { color: inherit; opacity: 0.7; }

/* Contact sheet as justified rows: every photo in a row shares one height and keeps its
   true aspect ratio (no crop, no letterbox). Each <li> carries --ar (width / height);
   growing and basing in proportion to --ar makes items in a row grow to equal heights.
   The ::after spacer soaks up the last row so it stays near --row instead of stretching. */
.sheet {
  --row: clamp(14rem, 26vw, 24rem);   /* large enough for a client to judge the work */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-4) var(--s-3);
}
.sheet::after { content: ""; flex: 999 1 0; }
.sheet li {
  flex: var(--ar) 1 calc(var(--ar) * var(--row));
  min-width: 0;
}
.sheet li[hidden] { display: none; }

.plate {
  display: block; width: 100%;
  padding: 0; border: 0; background: none;
  text-align: left;
  cursor: zoom-in;
}
/* The frame paints a ~200-byte blurred preview (--lqip, inlined by the build script)
   at the photo's exact ratio, so every slot shows its colours instantly; the real
   image fades in over it once decoded (.js / .is-loaded set by main.js). */
.plate__frame {
  display: block;
  aspect-ratio: var(--ar);
  overflow: hidden;
  background: var(--surface) var(--lqip, none) center / cover no-repeat;
}
.plate picture { display: block; height: 100%; }
.plate img { display: block; width: 100%; height: 100%; }
.js .plate img { opacity: 0; transition: opacity 320ms var(--ease-out); }
.js .plate img.is-loaded { opacity: 1; }
.plate:focus-visible { outline: none; }
.plate:focus-visible .plate__frame { outline: 2px solid var(--amber); outline-offset: 3px; }
.plate .plate-cap {
  flex-wrap: nowrap;
  margin-top: var(--s-1);
  overflow: hidden;
  white-space: nowrap;
}
.plate .plate-cap > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.plate .plate-cap__no { transition: color var(--dur) var(--ease-out); }
.plate:hover .plate-cap__no,
.plate:focus-visible .plate-cap__no { color: var(--amber); }

/* ---------- Feature (grid break) ---------- */

/* Portrait plate bleeds off the left edge; the copy panel overlaps its right edge */
.feature {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  padding: var(--s-8) var(--gutter) var(--s-16) 0;
}
.feature__img { grid-column: 1 / span 7; grid-row: 1; }
.feature__img img { width: 100%; max-height: 110vh; object-fit: cover; }
.feature__panel {
  grid-column: 7 / span 5;
  grid-row: 1;
  margin-bottom: var(--s-12);
  position: relative;
  background: var(--bg);
  padding: var(--s-6);
  border-top: 1px solid var(--amber);
}
.feature__panel .plate-cap { margin-bottom: var(--s-3); }
.feature__panel h2 { margin-bottom: var(--s-3); }
.feature__panel p:last-child { color: var(--ink-300); max-width: 46ch; }

/* ---------- Studio ---------- */

.studio {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-3);
  row-gap: var(--s-12);
  padding: var(--s-12) var(--gutter) var(--s-16);
  border-top: 1px solid var(--rule);
}
.studio__intro { grid-column: 1 / span 4; }
.studio__intro h2 { margin-bottom: var(--s-3); }
.studio__intro p { color: var(--ink-300); max-width: 32ch; }

/* The photographer, mounted like a plate on the light table */
.portrait { margin-top: var(--s-6); max-width: 22rem; }
.portrait .crop img { width: 100%; }
.portrait .plate-cap { margin-top: var(--s-2); padding-left: 18px; }

.studio__body { grid-column: 6 / -1; }
.process li {
  display: grid;
  grid-template-columns: 4rem 9rem 1fr;
  gap: var(--s-3);
  align-items: baseline;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule);
}
.process li:last-child { border-bottom: 1px solid var(--rule); }
.process__no { color: var(--text-muted); }
.process h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variation-settings: "wdth" 75;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.process p { color: var(--ink-300); max-width: 48ch; }

.facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}
.facts > div { border-top: 1px solid var(--rule); padding-top: var(--s-2); }
.facts dt { color: var(--text-muted); margin-bottom: var(--s-1); }
.facts dd {
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 700;
  font-variation-settings: "wdth" 62;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.facts dd.facts__text {
  font-size: var(--fs-xl);
  line-height: 1;
  text-transform: uppercase;
  max-width: 14ch;
}

.teaching {
  margin-top: var(--s-6);
  color: var(--ink-300);
  max-width: 52ch;
}

/* ---------- Contact ---------- */

.contact {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-3);
  row-gap: var(--s-8);
  padding: var(--s-12) var(--gutter) var(--s-16);
  background: var(--surface);
  border-top: 1px solid var(--rule);
}
.contact__intro { grid-column: 1 / span 6; }
.contact__intro h2 { margin-bottom: var(--s-4); }
.contact__intro p { color: var(--ink-300); max-width: 40ch; }
.direct {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--s-6);
  margin-top: var(--s-6);
}
.direct__lines { display: grid; gap: var(--s-3); }
.direct__lines dt { color: var(--text-muted); margin-bottom: 0.25rem; }
.direct__email { user-select: all; } /* plain text, one click selects the whole address to copy */
.direct__lines dd {
  font-size: var(--fs-lg);
  font-weight: 600;
  font-variation-settings: "wdth" 85;
}
/* QR stays dark-on-light: inverted codes fail on some phone scanners */
.direct__qr { width: min(18rem, 100%); } /* ~260px of code: easy to scan from a laptop screen */
.crop--qr { --mark: 18px; padding: 12px 0 12px 12px; }
.crop--qr img { background: #fff; padding: 8px; border-radius: var(--radius); }
.direct__qr figcaption { color: var(--text-muted); margin-top: var(--s-1); padding-left: 12px; }

.brief { grid-column: 8 / -1; display: grid; gap: var(--s-3); align-content: start; }
.field { display: grid; gap: var(--s-1); }
.field label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem var(--s-2);
  background: var(--bg);
  border: 1px solid var(--ink-600);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-out);
}
.field textarea { resize: vertical; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-500); }
.field :focus-visible { outline-offset: 0; border-color: var(--amber); }
.field [aria-invalid="true"] { border-color: #e5604a; }
.field__hint { font-size: var(--fs-sm); color: var(--text-muted); }
.req { color: var(--amber); margin-left: 0.15em; } /* required marker; inputs carry `required` for assistive tech */
.field__error { font-size: var(--fs-sm); color: #f2826f; }
.brief .btn { justify-self: start; }
.brief__status { min-height: 1.5em; color: var(--ink-300); text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); }

/* ---------- Footer ---------- */

.site-foot {
  display: flex; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-4) var(--gutter);
  border-top: 1px solid var(--rule);
  color: var(--text-muted);
}
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--amber); }

/* ---------- Lightbox ---------- */

.lightbox {
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  overscroll-behavior: contain;
  margin: 0; padding: 0; border: 0;
  background: var(--ink-950);
  color: var(--text);
}
.lightbox[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  animation: lb-in var(--dur) var(--ease-out);
}
.lightbox::backdrop { background: rgb(15 13 11 / 0.92); }
.lightbox__frame {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: grid; place-items: center;
  padding: var(--s-4) var(--gutter) var(--s-2);
  touch-action: none;            /* pinch and drag go to the zoom code, not the browser */
}
/* main.js sets the photo's fit size in px, then zooms/pans it with a transform about its
   centre. Steps (click, buttons, keys) ease; live gestures (drag, pinch, wheel) track 1:1. */
.lightbox__frame img {
  max-width: none; max-height: none;
  object-fit: contain;
  transform-origin: 50% 50%;
  transition: transform 240ms var(--ease-out);
  will-change: transform;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox.is-zoomed .lightbox__frame img { cursor: grab; }
.lightbox.is-panning .lightbox__frame img { cursor: grabbing; }
.lightbox.is-gesturing .lightbox__frame img { transition: none; }
.lightbox__bar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--gutter) var(--s-3);
  border-top: 1px solid var(--rule);
}
.lightbox__meta { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); color: var(--text-muted); }
.lightbox__meta .plate-cap__no { color: var(--amber); }
.lightbox__note { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); color: var(--ink-300); }
.lightbox__ctrl { display: flex; align-items: center; gap: var(--s-1); flex-shrink: 0; }
.lightbox__pos { color: var(--text-muted); margin: 0 var(--s-2); }
.lightbox__hint { color: var(--ink-500); margin-right: var(--s-2); }
.lightbox__hint--touch { display: none; }
@media (hover: none) {
  .lightbox__hint--mouse { display: none; }
  .lightbox__hint--touch { display: inline; }
}
.lightbox.is-zoomed .lightbox__hint { visibility: hidden; }
.lightbox__zoom { display: flex; align-items: center; gap: 2px; }
.lightbox__level { min-width: 4.5ch; text-align: center; color: var(--ink-300); }
.lb-close-x { display: none; font-size: 1.25rem; line-height: 1; }

.iconbtn {
  min-width: 44px; min-height: 44px;
  padding: 0 var(--s-2);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.iconbtn:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); }
.iconbtn:disabled { opacity: 0.35; cursor: default; }

@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .hero__copy { grid-column: 1 / span 6; }
  .hero__plate { grid-column: 7 / -1; }
  .feature__img { grid-column: 1 / span 8; }
  .feature__panel { grid-column: 6 / -1; }
  .studio__intro { grid-column: 1 / -1; }
  .studio__body { grid-column: 1 / -1; }
  .contact__intro, .brief { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  /* Phone/tablet: copy first, plate full-width below; ornament trimmed */
  .hero {
    display: flex; flex-direction: column; align-items: stretch;
    gap: var(--s-6);
    min-height: 0;
    padding: var(--s-6) var(--gutter) var(--s-8);
  }
  .crop { padding: 12px 0 12px 12px; --mark: 16px; }
  .hero__meta, .portrait .plate-cap { padding-left: 12px; }
  .hero__meta { padding-right: 0; }   /* hero already has side padding here */
  .portrait { max-width: min(20rem, 85%); }
  .clients { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); padding-left: 0; }
  .clients__head { grid-auto-flow: column; justify-content: space-between; align-items: center; padding: 0 var(--gutter); }
  .clients__list img { height: calc(var(--h, 2.5rem) * 0.78); }
  .clients__track { --rail-dur: 70s; } /* logos are smaller here; keeps the same gentle pace */
  .work { padding-top: var(--s-12); }
  .feature { padding: 0 0 var(--s-12); }
  .feature__img { grid-column: 1 / -1; }
  .feature__img img { max-height: 80vh; }
  .feature__panel {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: calc(var(--s-6) * -1) var(--gutter) 0;
    padding: var(--s-4) var(--s-3) 0;
  }
  .process li { grid-template-columns: 2.5rem 1fr; }
  .process li p { grid-column: 2; }
  .facts { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .sheet { --row: 13rem; gap: var(--s-4) var(--s-2); } /* landscapes full width, portraits in pairs */
  .wordmark img { height: 24px; }
  /* Phones: two compact rows, logo + social icons on top and every page link underneath.
     The header hides while scrolling down, so the extra row costs nothing while reading. */
  .site-head {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand social" "links links";
    gap: 0 var(--s-2);           /* no row gap: the desktop flex gap would otherwise stack here */
    padding: var(--s-1) var(--gutter) 0;
  }
  .wordmark { grid-area: brand; }
  .head-social { grid-area: social; }
  .site-head nav {
    grid-area: links;
    margin: var(--s-1) calc(var(--gutter) * -1) 0;
    padding: 0 var(--gutter);
    border-top: 1px solid var(--rule);
  }
  .nav { gap: var(--s-4); }
  .nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0; }
  /* Last row fills the width like the others; on a narrow screen a lone photo isn't a risk. */
  .sheet::after { display: none; }
  /* Phones: one compact bar so the photo gets the screen. Caption clamps to two lines,
     every control sits on one row, and Close becomes an x (its aria-label still says Close). */
  .lightbox__bar { flex-direction: column; align-items: stretch; gap: var(--s-1); padding: var(--s-1) var(--gutter) var(--s-2); }
  .lightbox__meta { font-size: 0.6875rem; }
  .lightbox__note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .lightbox__ctrl { justify-content: space-between; flex-wrap: nowrap; gap: 4px; }
  .lightbox__hint { display: none; }
  .lightbox__pos { margin: 0 auto; }
  .lightbox__level { min-width: 3.5ch; }
  .lightbox__frame { padding: var(--s-2) var(--s-1) var(--s-1); }
  .lb-close-text { display: none; }
  .lb-close-x { display: inline; }
  [data-lb-close] { min-width: 44px; padding: 0; }
  .site-foot { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  /* Deliberate override (client request): the logo rail keeps its slow drift even with
     reduced motion on. Restore the real duration, since the 0.01ms rule above would make
     the loop spin. The Pause button stays as the opt-out. */
  .clients__track { animation-duration: var(--rail-dur) !important; }
  /* The hero crossfade is an opacity change, not movement, so it keeps its gentle fade
     (and the progress line its timing) with reduced motion on. */
  .hero__slide { transition-duration: 1100ms !important; }
  .hero__plate.is-playing .hero__dot[aria-current="true"] span::after { animation-duration: var(--hero-ms) !important; }
}