@charset "UTF-8";
/* ============================================================================
   LUMIÈRE STUDIO — Ảnh cưới & editorial
   ----------------------------------------------------------------------------
   CONCEPT
   A film-photography editorial: charcoal ground, bone paper, champagne accent.
   Enormous Cormorant display set very tight against 12px wide-tracked labels.
   The page is built as a magazine: a broken-grid cover, a film strip, a paper
   spread, a contact sheet of local photographs, then a booking slip.

   PALETTE (role — hex)
     --ink        #14110F  page ground, hero / album / process / footer
     --ink-2      #1B1714  raised dark surface (form hint, strip band)
     --ink-3      #241E19  photograph frame base
     --line       #352C25  hairlines on ink
     --bone       #EFE7DA  paper ground (statement, booking)
     --bone-2     #E4D9C7  paper hairlines / secondary surface
     --bone-dim   #C4B8A6  muted text on ink
     --graphite   #4A423A  muted text on paper
     --champagne  #D6B98C  accent, primary button fill, focus ring on ink
     --champ-deep #7A6134  accent text + focus ring on paper
     --rule-ui    #6E6357  control boundaries (3.21:1 on ink, 4.77:1 on bone)

   CONTRAST (computed from WCAG 2.2 relative luminance)
     bone       #EFE7DA on ink       #14110F → 15.32:1  (body, headings)
     bone-dim   #C4B8A6 on ink       #14110F →  9.63:1  (muted body)
     bone-dim   #C4B8A6 on ink-2     #1B1714 →  9.12:1  (process section body)
     champagne  #D6B98C on ink       #14110F → 10.01:1  (labels, meta, accents)
     ink        #14110F on champagne #D6B98C → 10.01:1  (primary button)
     ink        #14110F on bone      #EFE7DA → 15.32:1  (body on paper)
     graphite   #4A423A on bone      #EFE7DA →  8.03:1  (muted body on paper)
     champ-deep #7A6134 on bone      #EFE7DA →  4.77:1  (accent text on paper)
     graphite   #4A423A on form      #F5EFE4 →  8.61:1
     champ-deep #7A6134 on form      #F5EFE4 →  5.12:1  (form status)
     #6B6157    placeholder on form  #F5EFE4 →  5.28:1
     #8A2B1E    error text on form   #F5EFE4 →  7.51:1
     Focus rings: #D6B98C on ink 10.01:1 · #7A6134 on bone 4.77:1 (both ≥3:1)

   TYPE
     Display  Cormorant Garamond 300/400/500 + italic
     Text     Manrope 300/400/500/600
     display  clamp(3.4rem, 9vw, 8.5rem) / .86 / -.02em / 300
     h1       same as display
     h2       album clamp(3rem, 7.4vw, 6.4rem)/.88 · section clamp(2.4rem, 5.4vw, 4.4rem)/.95
     h2 minor process clamp(2rem, 4.4vw, 3.6rem)/.98
     h3       1.5rem / 1.15 / -.005em / 400
     body     1.0625rem (17px) / 1.68 / .002em / 300
     small    0.9375rem (15px) / 1.66 / 0 / 300–400
     meta     0.75rem (12px) / 1.4 / .22em / 500, uppercase  (floor is 12px)

   LAYOUT
     12-column asymmetric grid, 24px gutters, max 1360px. The hero photograph
     starts at column 7 and bleeds past the wrap's right edge, so the cover
     reads off-centre; the contact sheet below zigzags on positive row offsets
     only. Sections alternate ink → paper → ink → paper as magazine turns.

   SIGNATURE MOTION
     The masked line reveal on the H1: each line is an overflow-hidden box, the
     inner span translates from 130% to 0 on load (text stays painted; no
     opacity on the LCP node). 900ms, --ease-expo, 90ms stagger.
     Everything else stays quiet: the film strip is a static row (no drift),
     reveals are a single 20px rise per batch.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --ink: #14110F;
  --ink-2: #1B1714;
  --ink-3: #241E19;
  --line: #352C25;
  --bone: #EFE7DA;
  --bone-2: #E4D9C7;
  --bone-dim: #C4B8A6;
  --graphite: #4A423A;
  --champagne: #D6B98C;
  --champ-deep: #7A6134;
  /* Control boundaries: 3.21:1 against --ink, so WCAG 1.4.11 holds on hairlines */
  --rule-ui: #6E6357;

  --ease-enter: cubic-bezier(.16, 1, .3, 1);
  --ease-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-move: cubic-bezier(.65, 0, .35, 1);
  --dur-micro: 140ms;
  --dur-small: 220ms;
  --dur-med: 320ms;
  --dur-large: 480ms;
  --dur-reveal: 680ms;
  --dur-hero: 900ms;

  --wrap: 1360px;
  --gutter: clamp(20px, 5vw, 64px);
  --col-gap: 24px;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.68;
  letter-spacing: .002em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 2px;
  border-radius: 2px;
}

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

.skip-link {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--champagne);
  color: var(--ink);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-small) var(--ease-enter);
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline-color: var(--bone);
}

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

.label {
  font-family: "Manrope", sans-serif;
  font-size: .75rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--champagne);
}

/* 3. Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 48px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: "Manrope", sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  isolation: isolate;
  transition: transform var(--dur-micro) var(--ease-move),
              border-color var(--dur-small) var(--ease-move),
              color var(--dur-small) var(--ease-move);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--dur-small) var(--ease-move);
}
.btn--solid { background: var(--champagne); color: var(--ink); }
.btn--solid::after { background: var(--bone); }
.btn--solid:hover::after { opacity: 1; }

.btn--ghost {
  background: transparent;
  color: var(--bone);
  border-color: var(--rule-ui);
}
.btn--ghost::after { background: rgba(214, 185, 140, .12); }
.btn--ghost:hover { border-color: var(--champagne); color: var(--champagne); }
.btn--ghost:hover::after { opacity: 1; }

.btn:active { transform: translateY(1px) scale(.985); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(1px) scale(.985); }
}

/* 4. Header ---------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(20, 17, 15, .78);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  border-bottom: 1px solid rgba(239, 231, 218, .10);
}

/* Scroll-linked deepening of the header edge — opacity only (compositor-safe) */
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(20, 17, 15, .55), rgba(20, 17, 15, .92));
  opacity: 0;
  z-index: -1;
}
@supports (animation-timeline: scroll()) {
  .site-header::after {
    animation: header-deepen linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 220px;
  }
}
@keyframes header-deepen {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  padding-block: 14px;
}

.brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  text-decoration: none;
  color: var(--bone);
  flex-shrink: 0;
}
.brand__mark {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .16em;
  padding-left: .16em;
}
.brand__sub {
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  font-weight: 400;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 40px);
}
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 36px);
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 2px;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone-dim);
  transition: color var(--dur-small) var(--ease-move);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 1px;
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-expo);
}
.nav__link:hover { color: var(--bone); }
.nav__link:hover::after,
.nav__link[aria-current="true"]::after { transform: scaleX(1); }
.nav__link[aria-current="true"] { color: var(--bone); }

.nav__cta {
  padding: 12px 20px;
  min-height: 44px;
  font-size: .75rem;
}

.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule-ui);
  color: var(--bone);
  transition: transform var(--dur-micro) var(--ease-move),
              border-color var(--dur-small) var(--ease-move);
}
.nav-toggle:hover { border-color: var(--bone-dim); }
/* .nav__cta inherits .btn:active; the toggle needs the same press snap. */
.nav-toggle:active { transform: translateY(1px); }
.nav-toggle__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.nav-toggle__box span {
  display: block;
  width: 20px;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-small) var(--ease-move),
              opacity var(--dur-micro) var(--ease-move);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* 5. Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  padding-block: clamp(48px, 7vw, 96px) clamp(56px, 7vw, 104px);
  overflow: clip;
}
.hero::before {
  content: "";
  position: absolute;
  top: -18%; left: -10%;
  width: 58vw; height: 58vw;
  max-width: 760px; max-height: 760px;
  background: radial-gradient(circle, rgba(214, 185, 140, .10), rgba(214, 185, 140, 0) 66%);
  pointer-events: none;
}

.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
  position: relative;
}

.hero__text {
  grid-column: 1 / span 6;
  padding-top: clamp(8px, 3vw, 44px);
  position: relative;
  z-index: 2;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(24px, 3.4vw, 40px);
}
.hero__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--champagne);
  flex-shrink: 0;
}

.hero__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(3.4rem, 9vw, 8.5rem);
  line-height: .86;
  letter-spacing: -.02em;
  margin-left: -.03em;
  color: var(--bone);
}
/* The mask box is padded above and below so Vietnamese diacritics (Ả, ướ)
   are never clipped, then pulled back with negative margins so the optical
   leading stays at .86. The inner span travels 130% — more than the padded
   box height — so no glyph edge peeks during the reveal. */
.line {
  display: block;
  overflow: hidden;
  padding: .16em 0 .18em;
  margin: -.16em 0 -.18em;
}
.line__in { display: block; }
.line--em .line__in {
  font-style: italic;
  font-weight: 300;
  color: var(--champagne);
  padding-right: .06em;
}

html.js-motion .hero__title .line__in {
  animation: line-up var(--dur-hero) var(--ease-expo) both;
}
html.js-motion .hero__title .line:nth-child(1) .line__in { animation-delay: 60ms; }
html.js-motion .hero__title .line:nth-child(2) .line__in { animation-delay: 150ms; }
html.js-motion .hero__title .line:nth-child(3) .line__in { animation-delay: 240ms; }

@keyframes line-up {
  from { transform: translateY(130%); }
  to   { transform: translateY(0); }
}

.hero__lead {
  max-width: 34ch;
  margin-top: clamp(28px, 3.4vw, 40px);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--bone-dim);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 3.6vw, 44px);
}

.hero__media {
  grid-column: 7 / span 6;
  position: relative;
  margin-top: clamp(-8px, -1vw, 0px);
  margin-right: calc(var(--gutter) * -1);
  z-index: 1;
}
.hero__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.hero__index {
  position: absolute;
  right: 14px; bottom: 12px;
  padding: 4px 8px;
  background: rgba(14, 12, 10, .72);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.hero__cap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding-right: var(--gutter);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  font-weight: 400;
}
.hero__cap span:first-child { color: var(--bone); }

/* 6. Local photography ? real images, with editorial crops ---------------- */
.plate {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  background-color: var(--ink-3);
}
.hero__media .plate { height: 100%; }
.photo-note {
  margin-block: 12px 20px;
  color: var(--bone-dim);
  font-size: .75rem;
  line-height: 1.65;
  letter-spacing: .02em;
}
.hero__media .photo-note { padding-right: var(--gutter); }
.hero__cap { flex-wrap: wrap; }

/* 7. Film strip ------------------------------------------------------------ */
.strip-section {
  padding-block: clamp(20px, 3vw, 34px) clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}

.strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.strip-title { color: var(--bone-dim); letter-spacing: .2em; }
.strip-hint {
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  font-weight: 500;
}

/* The strip is a still contact strip: it scrolls, it does not drift. */
.strip-reel {
  background: #0E0C0A;
  padding-block: 22px;
  border-block: 1px solid var(--line);
}

.marquee {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  scroll-padding-inline: var(--gutter);
}
.marquee:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: -2px;
}
.marquee::-webkit-scrollbar { height: 6px; }
.marquee::-webkit-scrollbar-thumb { background: var(--line); }
.marquee__perf {
  height: 10px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(239, 231, 218, .20) 0 10px,
    transparent 10px 24px
  );
  margin-inline: 0;
}
.marquee__perf:first-child { margin-bottom: 18px; }
.marquee__perf:last-child { margin-top: 18px; }

.marquee__track {
  display: flex;
  width: max-content;
  gap: 0;
  padding-inline: var(--gutter);
}

.marquee__group {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.frame {
  position: relative;
  width: clamp(150px, 17vw, 232px);
  flex-shrink: 0;
}
.frame__plate {
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(239, 231, 218, .10);
}
.frame__no {
  display: block;
  margin-top: 8px;
  font-size: .75rem;
  letter-spacing: .2em;
  color: var(--bone-dim);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* 8. Statement (paper) ----------------------------------------------------- */
.statement {
  background: var(--bone);
  color: var(--ink);
  padding-block: clamp(64px, 8vw, 120px);
}
.statement :where(a, button):focus-visible { outline-color: var(--champ-deep); }

.statement__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 24px;
}
.statement__label {
  grid-column: 1 / span 3;
  color: var(--champ-deep);
  padding-top: .7em;
}
.statement__body { grid-column: 4 / span 9; }

.statement__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  line-height: .95;
  letter-spacing: -.015em;
  max-width: 16ch;
  margin-bottom: clamp(20px, 2.6vw, 32px);
}
.statement__lede {
  max-width: 54ch;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.66;
  color: var(--graphite);
}
.statement__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(36px, 5vw, 64px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--bone-2);
}
.note__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.005em;
  margin-bottom: 10px;
}
.note p {
  font-size: .9375rem;
  line-height: 1.66;
  color: var(--graphite);
  max-width: 38ch;
}

/* 9. Album ----------------------------------------------------------------- */
.album {
  padding-block: clamp(64px, 8vw, 120px);
  position: relative;
}
.album::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line) 22%, var(--line) 78%, transparent);
}

.album__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.album__headline { grid-column: 1 / span 7; }
.album__headline .label { margin-bottom: 14px; display: block; }
.album__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(3rem, 7.4vw, 6.4rem);
  line-height: .88;
  letter-spacing: -.02em;
  margin-left: -.025em;
}
.album__lead {
  grid-column: 8 / span 5;
  color: var(--bone-dim);
  font-size: .9375rem;
  line-height: 1.68;
  max-width: 40ch;
  padding-bottom: .5em;
}

/* Filter chips — single scrollable row on narrow screens.
   padding-block clears the 4px focus ring (2px outline + 2px offset) on both
   edges; the negative margin-block keeps the surrounding rhythm unchanged. */
.filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 6px 8px;
  margin-block: -6px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  scroll-padding-block: 6px;
}
.filters::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 11px 20px;
  background: transparent;
  border: 1px solid var(--rule-ui);
  color: var(--bone-dim);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur-small) var(--ease-move),
              border-color var(--dur-small) var(--ease-move),
              background-color var(--dur-small) var(--ease-move);
}
.chip:hover { color: var(--bone); border-color: var(--bone-dim); }
.chip[aria-pressed="true"] {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
}
.chip:active { transform: translateY(1px); }

.album__count {
  margin-top: 16px;
  margin-bottom: clamp(24px, 3vw, 36px);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.album__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: clamp(32px, 4.4vw, 56px);
  align-items: start;
}

.card {
  grid-column: span 4;
  min-width: 0;
}
/* Zigzag contact sheet — offsets are positive only, so rows never collide. */
.card:nth-child(1) { grid-column: 1 / span 5; }
.card:nth-child(2) { grid-column: 8 / span 5; margin-top: clamp(32px, 6vw, 84px); }
.card:nth-child(3) { grid-column: 2 / span 5; }
.card:nth-child(4) { grid-column: 8 / span 4; margin-top: clamp(20px, 3vw, 44px); }
.card:nth-child(5) { grid-column: 1 / span 4; }
.card:nth-child(6) { grid-column: 6 / span 7; margin-top: clamp(24px, 4vw, 60px); }
.card:nth-child(7) { grid-column: 2 / span 5; }
.card:nth-child(8) { grid-column: 9 / span 4; margin-top: clamp(16px, 2.4vw, 32px); }

/* The link is the frame: it clips the scaled print, so the focus ring drawn
   outside it stays visible instead of being covered by the overflowing plate. */
.card__link {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.card__plate {
  height: auto;
  aspect-ratio: 4 / 5;
  background-color: var(--ink-3);
  transition: scale var(--dur-large) var(--ease-expo);
}
.card:nth-child(2) .card__plate,
.card:nth-child(5) .card__plate,
.card:nth-child(8) .card__plate { aspect-ratio: 3 / 4; }
.card:nth-child(4) .card__plate { aspect-ratio: 5 / 6; }
.card:nth-child(6) .card__plate { aspect-ratio: 16 / 10; }

.card__cap {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 2px;
  margin-top: 14px;
  align-items: baseline;
}
.card__num {
  font-size: .75rem;
  letter-spacing: .18em;
  color: var(--champagne);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.card__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.005em;
}
.card__meta {
  grid-column: 2;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-dim);
  font-weight: 400;
}

/* Plate hover: the print scales inside the frame — transform/scale only.
   The zoom is attached to the link, which is the thing that actually opens. */
@media (hover: hover) and (pointer: fine) {
  .card__link:hover .card__plate { scale: 1.018; }
}
.card__link:focus-visible .card__plate { scale: 1.018; }

/* Filtering states */
.card[hidden] { display: none; }
.card.is-entering {
  animation: card-in var(--dur-med) var(--ease-enter) both;
}
@keyframes card-in {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}

.album__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 48px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--bone-dim);
}
.album__empty[hidden] { display: none; }

/* 10. Process -------------------------------------------------------------- */
.process {
  padding-block: clamp(56px, 7vw, 104px);
  background: var(--ink-2);
  border-top: 1px solid var(--line);
}
.process__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 16px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.process__head .label { grid-column: 1 / span 3; color: var(--champagne); padding-top: .8em; }
.process__title {
  grid-column: 4 / span 9;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: .98;
  letter-spacing: -.015em;
  max-width: 20ch;
}

.process__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--line);
  padding-top: clamp(24px, 3vw, 36px);
}
.step { position: relative; padding-top: 4px; }
.step__num {
  display: block;
  font-size: .75rem;
  letter-spacing: .2em;
  font-weight: 500;
  color: var(--champagne);
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.step__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.005em;
  margin-bottom: 10px;
}
.step__text {
  font-size: .9375rem;
  line-height: 1.66;
  color: var(--bone-dim);
  max-width: 30ch;
}

/* 11. Booking (paper) ------------------------------------------------------ */
.booking {
  background: var(--bone);
  color: var(--ink);
  padding-block: clamp(64px, 8vw, 120px);
  border-top: 1px solid var(--bone-2);
}
.booking :where(a, button, input, select, textarea):focus-visible {
  outline-color: var(--champ-deep);
}

.booking__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: clamp(36px, 5vw, 64px);
  align-items: start;
}
.booking__intro { grid-column: 1 / span 5; }
.booking__intro .label { color: var(--champ-deep); display: block; margin-bottom: 16px; }
.booking__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  line-height: .92;
  letter-spacing: -.02em;
  max-width: 12ch;
  margin-bottom: 22px;
}
.booking__lead {
  max-width: 38ch;
  color: var(--graphite);
  font-size: 1rem;
  line-height: 1.68;
}
.booking__notes {
  margin-top: 28px;
  display: grid;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--bone-2);
}
.booking__notes li {
  position: relative;
  padding-left: 20px;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--graphite);
}
.booking__notes li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: 8px; height: 1px;
  background: var(--champ-deep);
}

.form {
  grid-column: 7 / span 6;
  background: #F5EFE4;
  border: 1px solid var(--bone-2);
  padding: clamp(22px, 3.4vw, 40px);
  color-scheme: light;
}
.form__hint {
  font-size: .75rem;
  letter-spacing: .06em;
  line-height: 1.5;
  color: var(--graphite);
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--bone-2);
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field + .field,
.form__row + .field,
.field + .form__row { margin-top: 22px; }

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
}

.field__label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.field__opt {
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--graphite);
}

.field__input {
  width: 100%;
  min-height: 48px;
  padding: 12px 2px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #8C7C66;
  border-radius: 0;
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  transition: border-color var(--dur-small) var(--ease-move);
  -webkit-appearance: none;
  appearance: none;
}
.field__input::placeholder { color: #6B6157; opacity: 1; }
.field__input:hover { border-bottom-color: var(--graphite); }
.field__input:focus-visible {
  outline: 2px solid var(--champ-deep);
  outline-offset: 4px;
  border-bottom-color: var(--champ-deep);
}

.field__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234A423A' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 26px;
  cursor: pointer;
}
/* Keep the native control's own text when a placeholder option is shown. */
.field__select:invalid { color: #6B6157; }
.field__select option { color: var(--ink); background: #F5EFE4; }
.field__select option:disabled { color: #6B6157; }

.field__area {
  resize: vertical;
  min-height: 84px;
  line-height: 1.55;
  padding-top: 10px;
}

.field__hint {
  font-size: .75rem;
  line-height: 1.5;
  color: var(--graphite);
}

.field__error {
  font-size: .8125rem;
  line-height: 1.5;
  font-weight: 500;
  color: #8A2B1E;
}
.field__error[hidden] { display: none; }

.field__input[aria-invalid="true"] {
  border-bottom: 2px solid #8A2B1E;
  padding-bottom: 11px;
}

.form__submit { margin-top: 28px; width: 100%; }

.form__status {
  margin-top: 16px;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--champ-deep);
  min-height: 1.55em;
}
.form__status:empty { min-height: 0; margin-top: 0; }

/* 12. Footer --------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  border-top: 1px solid var(--line);
  padding-block: clamp(48px, 6vw, 80px) clamp(28px, 3vw, 40px);
}
.footer__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
}
.footer__brand {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: .14em;
  line-height: 1;
  color: var(--bone);
}
.footer__tag {
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding-block: clamp(24px, 3vw, 34px);
}
.footer__list { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-dim);
  text-decoration: none;
  transition: color var(--dur-small) var(--ease-move);
}
.footer__list a:hover { color: var(--champagne); }
.footer__note {
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--bone-dim);
  max-width: 46ch;
  justify-self: end;
  text-align: right;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.footer__bottom p { margin: 0; }
.footer__bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--champagne);
  text-decoration-color: rgba(214, 185, 140, .45);
  transition: text-decoration-color var(--dur-small) var(--ease-move);
}
.footer__bottom a:hover { text-decoration-color: var(--champagne); }

/* 13. Reveal system -------------------------------------------------------- */
html.js-motion [data-reveal] {
  opacity: 0;
  translate: 0 20px;
  transition:
    opacity var(--dur-reveal) var(--ease-enter),
    translate var(--dur-reveal) var(--ease-expo);
}
html.js-motion [data-reveal].is-revealed {
  opacity: 1;
  translate: 0 0;
}

/* 14. Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.js-motion [data-reveal] {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    transition: none !important;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  /* The strip is already a static, user-scrolled row; no drift to cancel. */
  .marquee__track {
    animation: none !important;
    transform: none !important;
  }
  .marquee { scroll-behavior: auto; }
  /* Keep the H1 mask readable but drop all travel. */
  html.js-motion .hero__title .line__in { animation: none !important; transform: none !important; }
  .card.is-entering { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* 15. Transparency / contrast fallbacks ------------------------------------ */
@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .site-header {
    background: var(--ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: var(--bone-dim);
  }
  .nav__link { color: var(--bone); }
  .hero__lead,
  .album__lead,
  .step__text,
  .card__meta,
  .footer__note,
  .footer__bottom { color: var(--bone); }
  .label { color: var(--champagne); }
  .chip { border-color: var(--bone-dim); color: var(--bone); }
  .statement__lede,
  .note p,
  .booking__lead,
  .booking__notes li { color: #2C2620; }
  .field__input { border-bottom-color: var(--ink); }
}

/* 16. Responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero__text { grid-column: 1 / span 7; }
  .hero__media { grid-column: 8 / span 5; }
  .statement__label { grid-column: 1 / span 12; padding-top: 0; }
  .statement__body { grid-column: 1 / span 12; }
  .process__head .label { grid-column: 1 / span 12; padding-top: 0; }
  .process__title { grid-column: 1 / span 12; }
  .album__headline { grid-column: 1 / span 12; }
  .album__lead { grid-column: 1 / span 12; padding-bottom: 0; max-width: 52ch; }
}

@media (max-width: 900px) {
  :root { --col-gap: 20px; }

  .nav-toggle { display: none; }
  html.js-motion .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  /* The nav is an always-visible row here, so its .nav__cta keeps .btn:active. */

  /* No JS: the nav stays in the flow as a plain list of anchors. */
  .site-header__inner { flex-wrap: wrap; }
  .nav {
    position: static;
    flex-basis: 100%;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .nav__list { flex-wrap: wrap; flex-direction: row; align-items: center; gap: 18px; }
  .nav__link {
    min-height: 44px;
    font-size: .75rem;
    border-bottom: 0;
  }
  .nav__link[aria-current="true"] { color: var(--bone); }
  .nav__cta { margin-top: 0; min-height: 44px; padding: 10px 14px; font-size: .75rem; }

  /* With JS, the panel becomes an overlay toggled by the button. */
  html.js-motion .nav {
    position: fixed;
    inset: 76px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 16px var(--gutter) 28px;
    background: var(--ink);
    border-bottom: 1px solid var(--line);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-small) var(--ease-move),
                transform var(--dur-small) var(--ease-move),
                visibility 0s linear var(--dur-small);
  }
  html.js-motion .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-med) var(--ease-enter),
                transform var(--dur-med) var(--ease-enter),
                visibility 0s;
  }
  html.js-motion .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  html.js-motion .nav__link {
    min-height: 52px;
    font-size: .875rem;
    border-bottom: 1px solid var(--line);
  }
  html.js-motion .nav__link::after { display: none; }
  html.js-motion .nav__link[aria-current="true"] { color: var(--champagne); }
  html.js-motion .nav__cta { margin-top: 16px; min-height: 52px; font-size: .75rem; padding: 14px 26px; }

  .hero__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 40px; }
  .hero__text { grid-column: 1 / span 6; padding-top: 0; }
  .hero__media {
    grid-column: 1 / span 6;
    margin-right: 0;
    margin-top: 0;
  }
  .hero__frame { aspect-ratio: 4 / 5; }
  .hero__cap { padding-right: 0; }

  .album__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .card,
  .card:nth-child(1),
  .card:nth-child(2),
  .card:nth-child(3),
  .card:nth-child(4),
  .card:nth-child(5),
  .card:nth-child(6),
  .card:nth-child(7),
  .card:nth-child(8) {
    grid-column: span 3;
    margin-top: 0;
  }
  .card:nth-child(2) .card__plate,
  .card:nth-child(4) .card__plate,
  .card:nth-child(5) .card__plate,
  .card:nth-child(6) .card__plate,
  .card:nth-child(8) .card__plate { aspect-ratio: 4 / 5; }
  .card:nth-child(n) .card__cap { margin-top: 12px; }
  .card__title { font-size: 1.25rem; }

  .process__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }

  .booking__intro { grid-column: 1 / span 12; }
  .form { grid-column: 1 / span 12; }

  .footer__note { justify-self: start; text-align: left; }
  .footer__cols { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .hero__title { font-size: clamp(3.2rem, 15.5vw, 4.2rem); }
  .statement__cols { grid-template-columns: 1fr; gap: 26px; }
  .album__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .card,
  .card:nth-child(n) { grid-column: span 1; }
  .process__list { grid-template-columns: 1fr; }
  .step { padding-bottom: 4px; }
  .form__row { grid-template-columns: 1fr; }
  .footer__top { flex-direction: column; align-items: flex-start; }
  .strip-reel { padding-block: 16px; }
  .frame { width: 148px; }
  .strip-head { flex-wrap: wrap; gap: 12px; }
  .card__meta { letter-spacing: .06em; }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__cap { flex-direction: column; gap: 4px; }
}

@media (max-width: 380px) {
  .brand__sub { display: none; }
  .hero__title { font-size: clamp(2.7rem, 14.4vw, 3.4rem); }
  .btn { padding-inline: 18px; letter-spacing: .1em; }
}

/* Print — a readable contact sheet */
@media print {
  .site-header, .nav-toggle, .marquee, .strip-reel, .form__submit, .strip-hint { display: none; }
  body { background: #fff; color: #000; }
}

.hero__cap .photo-note { flex-basis: 100%; margin: 0; text-transform: none; letter-spacing: .02em; }