/* ═══════════════════════════════════════════════════════════════════════
   Fine Group — v8 design system
   An exhibition of wedding photographers first, a way to book them second.

   1. COLOUR. White paper and Regency-ink navy. One colour: Wedgwood blue (the English porcelain of
      the Regency era). It is used for the date card, "free" marks and the closing field, and
      nowhere else. Mist is a pale Wedgwood surface used to alternate bands. No beige, no black
      sections.
   2. TYPE. One family, the logo's own: Jost (Hebrew: Assistant, its closest Hebrew partner).
      Adi's call, and the right one: the whole site speaks in the voice of the FINE wordmark.
      Hierarchy comes from case, tracking and weight, never from a second family.
      · Brand / d1 / d2: Jost 300, CAPITALS, tracked 0.12–0.14em, as on the "MEET FINE" post.
        Hero line, page titles, artist names, section headings.
      · d3 / d4: Jost 300 / 400, sentence case, for quotes, one-liners, answers and card titles.
      · Label: Jost 400, capitals, tracked 0.28em, 12px, for the crew line, roles and column heads.
      · Text: Jost 300 (Hebrew: Assistant 300) for everything read or used.
      · Hanie (Fine's handwriting) appears only as a signature.
      Hebrew has no capitals, so Hebrew display text uses Assistant 300 with no tracking.
   3. SCALE. A perfect fourth (×1.333) on a 17px body. Each step is fluid between mobile and 1440px.
      Capitals are tracked wide, so the caps steps sit one step smaller than a serif would.
        --brand 32→88  hero line          --d1 40→96   page titles, artist names
        --d2 28→52     section headings   --d3 24→36   quotes, one-liners, answers
        --d4 20→24     card titles        --lead 18→21, --body 17 (he 18), --small 15, --label 12
   4. SPACE. An 8px rhythm. Sections breathe --sec (96→192). A 12-column grid with gutter --g
      and outer margin --m.
   5. MOTION. Only three things move: the hero's slow crossfade (with a pause button), the artist
      chapters stacking as you scroll (sticky, so the browser does the work), and soft image
      scaling on hover. Reduced motion turns them all off.
   6. ACCESSIBILITY (IS 5568 / WCAG AA). Ink on white 15:1, grey 5.4:1, deep Wedgwood 8:1, ink on
      Wedgwood 9:1. Focus is always visible. Targets are at least 44px. Films never autoplay.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fonts: Jost and Hanie come from fonts.css; Assistant (Hebrew, OFL) is added here ── */
@font-face { font-family: 'Assistant'; font-weight: 200 800; font-display: swap; src: url(../fonts/Assistant-hebrew.woff2) format('woff2-variations'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }

:root {
  --paper: #FFFFFF;
  --mist: #F2F5F9;
  --ink: #1B2233;
  --grey: #686C76;
  --line: #E1E5EB;
  --wedgwood: #AFC4DE;
  --wedgwood-deep: #2E4A78;
  --on-photo: #FFFFFF;

  --f-brand: "Jost", "Helvetica Neue", Arial, sans-serif;
  --f-display: "Jost", "Assistant", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Jost", "Assistant", "Helvetica Neue", Arial, sans-serif;
  --f-script: "Hanie", cursive;

  --brand: clamp(32px, 5.2vw, 88px);
  --d1: clamp(40px, 6vw, 96px);
  --d2: clamp(28px, 3.4vw, 52px);
  --d3: clamp(24px, 2.4vw, 36px);
  --d4: clamp(20px, 1.6vw, 24px);
  --lead: clamp(18px, 1.45vw, 21px);
  --body: 17px;
  --small: 15px;
  --label: 12px;

  --m: clamp(20px, 4vw, 64px);
  --g: clamp(16px, 2vw, 32px);
  --sec: clamp(96px, 12vw, 192px);
  --head-h: 76px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
html[lang="he"] { --f-text: "Assistant", "Jost", "Noto Sans Hebrew", Arial, sans-serif; --body: 18px; }

/* ── Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--head-h); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-text); font-weight: 300; font-size: var(--body); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
::selection { background: var(--wedgwood); color: var(--ink); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: var(--m); top: -100px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; }
.skip-link:focus { top: 12px; }
[lang="en"] { unicode-bidi: isolate; }
html[dir="rtl"] [lang="en"] { direction: ltr; }
html[dir="rtl"] :is(h1, h2, h3, p, span, a, blockquote)[lang="en"] { text-align: right; }

/* ── Type roles ────────────────────────────────────────────────────── */
.t-brand { font-family: var(--f-brand); font-weight: 300; font-size: var(--brand); line-height: 1.12; letter-spacing: 0.14em; text-transform: uppercase; }
.t-label { font-family: var(--f-brand); font-weight: 400; font-size: var(--label); line-height: 1.6; letter-spacing: 0.28em; text-transform: uppercase; }
.t-d1 { font-family: var(--f-display); font-weight: 300; font-size: var(--d1); line-height: 1.08; letter-spacing: 0.12em; text-transform: uppercase; margin-inline-end: -0.12em; }
.t-d2 { font-family: var(--f-display); font-weight: 300; font-size: var(--d2); line-height: 1.12; letter-spacing: 0.12em; text-transform: uppercase; }
.t-d3 { font-family: var(--f-display); font-weight: 300; font-size: var(--d3); line-height: 1.32; letter-spacing: 0.005em; }
.t-d4 { font-family: var(--f-display); font-weight: 400; font-size: var(--d4); line-height: 1.32; letter-spacing: 0.01em; }
html[lang="he"] :is(.t-d1, .t-d2, .t-d3, .t-d4):not([lang="en"]) { font-family: "Assistant", var(--f-display); letter-spacing: 0; text-transform: none; line-height: 1.35; }
html[lang="he"] .t-d4:not([lang="en"]) { font-weight: 500; }
.t-lead { font-size: var(--lead); line-height: 1.6; }
.t-small { font-size: var(--small); line-height: 1.55; }
.grey { color: var(--grey); }
.script { font-family: var(--f-script); font-weight: 400; line-height: 1; direction: ltr; letter-spacing: 0.02em; }

/* ── Layout ────────────────────────────────────────────────────────── */
.wrap { padding-inline: var(--m); }
.sec { padding-block: var(--sec); }
.sec + .sec { border-top: 1px solid var(--line); }
.mist { background: var(--mist); }
.sec.mist, .sec.mist + .sec, .chapters + .sec { border-top: 0; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 20px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.sec-head > h2 { grid-column: 1 / span 6; }
.sec-head > .side { grid-column: 8 / span 5; display: grid; gap: 16px; justify-items: start; }
.sec-head > .side p { max-width: 44ch; }

/* ── Controls ──────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border: 1px solid var(--ink); border-radius: 0; background: none; color: var(--ink); text-decoration: none; font-family: var(--f-text); font-weight: 400; font-size: var(--small); letter-spacing: 0.04em; transition: background 250ms, color 250ms, border-color 250ms; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.solid { background: var(--ink); color: var(--paper); }
.btn.solid:hover { background: var(--wedgwood); border-color: var(--wedgwood); color: var(--ink); }
.btn.light { border-color: var(--on-photo); color: var(--on-photo); }
.btn.light:hover { background: var(--on-photo); color: var(--ink); }
.link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 400; font-size: var(--small); letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; background: none; border: 0; padding: 0; color: inherit; }
.link:hover { text-decoration-thickness: 2px; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
html[lang="he"] :is(.btn, .link) { letter-spacing: 0; font-size: 16px; font-weight: 500; }
.draft { display: inline-block; padding: 4px 10px; border: 1px dashed var(--grey); color: var(--grey); font-size: 13px; line-height: 1.4; }

/* ── Header ────────────────────────────────────────────────────────── */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--head-h); display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); padding-inline: var(--m); color: var(--on-photo); transition: background 400ms, color 400ms, box-shadow 400ms; }
.bar.solid { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; direction: ltr; line-height: 1; text-decoration: none; font-family: var(--f-brand); flex: none; }
.wordmark .w1 { font-weight: 300; font-size: 24px; letter-spacing: 0.42em; margin-inline-end: -0.42em; }
.wordmark .rule { width: 1px; align-self: stretch; background: currentColor; opacity: 0.7; margin-inline-start: 6px; }
.wordmark .w2 { display: grid; gap: 5px; }
.wordmark .w2 b { font-weight: 400; font-size: 8px; letter-spacing: 0.5em; }
.wordmark .w2 i { font-style: normal; font-size: 6px; letter-spacing: 0.32em; opacity: 0.85; }
.bar nav { display: flex; gap: clamp(16px, 2vw, 30px); font-family: var(--f-brand); font-weight: 400; font-size: var(--small); letter-spacing: 0.03em; }
.bar nav a { text-decoration: none; padding-block: 12px; }
.bar nav a:hover, .bar nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.bar .end { margin-inline-start: auto; display: flex; align-items: center; gap: 20px; }
.bar .lang { font-family: var(--f-brand); font-size: var(--small); font-weight: 400; white-space: nowrap; }
.bar .lang a { text-decoration: none; opacity: 0.66; padding: 12px 2px; }   /* ≥ 4.5:1 on white (WCAG 1.4.3) */
.bar .lang a[aria-current="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.menu-btn { display: none; min-height: 44px; padding: 0 4px; border: 0; background: none; font-family: var(--f-brand); font-weight: 400; font-size: var(--small); letter-spacing: 0.04em; }

/* The date card: a calling card, not a booking widget */
.ticket { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 6px 0 16px; background: var(--wedgwood); color: var(--ink); text-decoration: none; white-space: nowrap; font-size: var(--small); font-weight: 400; }
html[dir="rtl"] .ticket { padding: 0 16px 0 6px; }
.ticket .n { padding-inline-start: 12px; border-inline-start: 1px solid rgba(27,34,51,0.3); }
.ticket button { width: 32px; height: 32px; border: 0; background: none; font-size: 18px; line-height: 1; opacity: 0.65; }
.ticket button:hover { opacity: 1; }
.ticket-cta { font-family: var(--f-brand); font-weight: 400; font-size: var(--small); letter-spacing: 0.03em; text-decoration: none; border: 1px solid currentColor; min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; white-space: nowrap; }
.ticket-cta:hover { background: var(--wedgwood); border-color: var(--wedgwood); color: var(--ink); }

.sheet { position: fixed; inset: 0; z-index: 60; background: var(--paper); color: var(--ink); padding: 14px var(--m) 32px; display: flex; flex-direction: column; overflow-y: auto; }
.sheet[hidden] { display: none; }
.sheet .top { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.sheet nav { display: grid; margin-top: 40px; border-top: 1px solid var(--line); }
.sheet nav a { font-family: var(--f-display); font-weight: 300; text-transform: uppercase; letter-spacing: 0.12em; font-size: 28px; line-height: 1.1; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.sheet .foot-acts { margin-top: auto; padding-top: 32px; display: grid; gap: 12px; }

.wa-float { position: fixed; inset-inline-end: var(--m); bottom: 24px; z-index: 35; display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 20px; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 400; font-size: var(--small); letter-spacing: 0.04em; box-shadow: 0 10px 30px rgba(12,15,24,0.18); transform: translateY(160%); transition: transform 500ms var(--ease); }
.wa-float.show { transform: none; }
.wa-float:hover { background: var(--wedgwood); color: var(--ink); }
.wa-float svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* ── Hero: the show opens. Only the brand line, the crew, and the work. ── */
.hero { position: relative; height: 100svh; min-height: 640px; color: var(--on-photo); overflow: hidden; background: #2b2e36; }
.hero .slides { position: absolute; inset: 0; }
.hero .slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 1800ms var(--ease), transform 8000ms linear; }
.hero .slides img.on { opacity: 1; transform: scale(1); }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(12,15,24,0.34), rgba(12,15,24,0.1) 70%), linear-gradient(to bottom, rgba(12,15,24,0.32), transparent 22%, transparent 70%, rgba(12,15,24,0.42)); }
.hero .center { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; text-align: center; gap: clamp(24px, 4vh, 44px); padding: var(--head-h) var(--m) 0; }
.hero h1 { margin-inline-end: -0.14em; text-align: center !important; }
.hero h1 .l { display: block; }
.hero h1 .s { display: block; text-transform: none; font-size: 0.4em; letter-spacing: 0.12em; margin-top: 0.7em; }
.hero .crew { display: flex; flex-wrap: wrap; justify-content: center; direction: ltr; }
.hero .crew a { text-decoration: none; padding: 10px 14px; }
.hero .crew a:hover { text-decoration: underline; text-underline-offset: 6px; }
.hero .low { position: absolute; z-index: 2; inset: auto 0 0 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; padding: 0 var(--m) clamp(20px, 3vw, 36px); }
.hero .credit { font-size: var(--small); font-weight: 400; }
.hero .credit a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.6); }
.hero .cue { justify-self: center; text-decoration: none; display: grid; justify-items: center; gap: 10px; padding: 8px; }
.hero .cue i { width: 1px; height: 44px; background: currentColor; opacity: 0.8; }
.hero .pp { justify-self: end; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255,255,255,0.6); background: none; color: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0.04em; }

/* ── Statement ─────────────────────────────────────────────────────── */
.statement { text-align: center; display: grid; justify-items: center; gap: 28px; }
.statement .t-d3 { max-width: 30ch; }
.statement .script { font-size: clamp(36px, 3.4vw, 52px); color: var(--grey); }

/* ── The artists: chapters that stack as you scroll ─────────────────── */
.chapters > .sec-head { padding: var(--sec) var(--m) 0; margin-bottom: clamp(40px, 5vw, 72px); }
.chapter { position: sticky; top: 0; min-height: 100svh; background: var(--paper); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: center; padding: calc(var(--head-h) + 24px) var(--m) 48px; border-top: 1px solid var(--line); }
.chapter.alt { background: var(--mist); }
.chapter .who { grid-column: 1 / span 5; display: grid; gap: 22px; align-content: center; justify-items: start; }
.chapter .who .idx { color: var(--grey); }
.chapter .who .sig { font-size: clamp(34px, 3.2vw, 50px); color: var(--grey); margin-top: -8px; }
.chapter .art { grid-column: 7 / span 6; display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: auto auto; gap: var(--g); align-items: end; }
.chapter .art a { display: block; overflow: hidden; background: var(--line); }
.chapter .art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease); }
.chapter .art a:hover img { transform: scale(1.03); }
.chapter .art .a1 { grid-row: 1 / span 2; aspect-ratio: 4 / 5; }
.chapter .art .a2 { aspect-ratio: 1; }
.chapter .art .a3 { aspect-ratio: 4 / 5; }

/* ── Availability: date + venue, then who is free ──────────────────── */
.date-q { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: end; gap: 16px 28px; max-width: 980px; }
.date-q label { display: grid; gap: 6px; font-weight: 400; font-size: var(--small); color: var(--grey); }
.date-q input { width: 100%; min-height: 56px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; font-family: var(--f-text); font-weight: 300; font-size: var(--lead); color: var(--ink); color-scheme: light; }
.date-q input::placeholder { color: var(--grey); opacity: 1; }
.date-q input:focus-visible { outline: none; border-bottom: 2px solid var(--wedgwood-deep); }
.date-q .hint { grid-column: 1 / -1; color: var(--grey); font-size: var(--small); }
.date-q .err { grid-column: 1 / -1; color: #9B2C2C; font-size: var(--small); font-weight: 400; }
.date-q .err:empty, .date-q .hint:empty { display: none; }
.date-a { margin-top: 48px; }
.date-a:empty { display: none; }
.date-a .sum { margin-bottom: 28px; max-width: 34ch; }
.who-list { border-top: 1px solid var(--ink); }
.who-list li { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.who-list .ph { width: 72px; height: 72px; overflow: hidden; background: var(--line); }
.who-list .ph img { width: 100%; height: 100%; object-fit: cover; }
.who-list .nm { text-decoration: none; }
.who-list .nm:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.who-list .st { display: block; font-weight: 400; font-size: var(--small); color: var(--grey); }
.who-list .free .st { color: var(--wedgwood-deep); }
.who-list .booked .ph img { filter: grayscale(1); opacity: 0.6; }
.date-note { margin-top: 20px; color: var(--grey); font-size: var(--small); }
.st-free { color: var(--wedgwood-deep); font-weight: 400; font-size: var(--small); }
.st-free::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--wedgwood-deep); margin-inline-end: 10px; vertical-align: 1px; }
.st-booked { color: var(--grey); font-weight: 400; font-size: var(--small); }

/* ── Films ─────────────────────────────────────────────────────────── */
.film-frame { overflow: hidden; background: #2b2e36; position: relative; }
.film-frame.wide { aspect-ratio: 16 / 9; }
.film-frame.tall { aspect-ratio: 4 / 5; }
.film-frame video, .film-frame.still img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film { position: absolute; inset: 0; display: block; padding: 0; border: 0; background: none; color: var(--on-photo); text-align: start; }
.film img { width: 100%; height: 100%; object-fit: cover; }
.film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,15,24,0.5), rgba(12,15,24,0) 50%); }
.film .play { position: absolute; z-index: 2; inset-inline-start: clamp(16px, 2.4vw, 36px); bottom: clamp(16px, 2.4vw, 32px); display: flex; align-items: center; gap: 16px; font-weight: 400; font-size: var(--small); letter-spacing: 0.03em; }
.film .play i { width: clamp(48px, 5vw, 76px); aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 14px; flex: none; transition: background 250ms, color 250ms; }
html[dir="rtl"] .film .play i { transform: scaleX(-1); }
button.film:hover .play i { background: var(--on-photo); color: var(--ink); }
.film[aria-disabled="true"] { cursor: default; }

/* ── Videographers: a rail you scroll sideways ─────────────────────── */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--g)) / 3); gap: var(--g); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; scrollbar-width: thin; }
.rail > li { scroll-snap-align: start; display: grid; gap: 12px; align-content: start; }
.rail .film-frame { margin-bottom: 8px; }
.rail .is-draft :is(h3, p) { color: var(--grey); }
.rail-ctrl { display: flex; gap: 12px; }
.rail-ctrl button { width: 50px; height: 50px; border: 1px solid var(--ink); background: none; font-size: 18px; }
.rail-ctrl button:hover { background: var(--ink); color: var(--paper); }
html[dir="rtl"] .rail-ctrl button { transform: scaleX(-1); }

/* ── After the day: albums and print, hung like a small exhibition ─── */
.goods { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: clamp(48px, 6vw, 96px); align-items: start; }
.goods li { display: grid; gap: 12px; }
.goods .img { overflow: hidden; background: var(--line); margin-bottom: 6px; }
.goods img { width: 100%; height: 100%; object-fit: cover; }
.goods .g1 { grid-column: 1 / span 7; } .goods .g1 .img { aspect-ratio: 4 / 3; }
.goods .g2 { grid-column: 9 / span 4; margin-top: clamp(80px, 12vw, 200px); } .goods .g2 .img { aspect-ratio: 4 / 5; }
.goods .g3 { grid-column: 2 / span 4; } .goods .g3 .img { aspect-ratio: 4 / 5; }
.goods .g4 { grid-column: 7 / span 6; margin-top: clamp(40px, 6vw, 100px); } .goods .g4 .img { aspect-ratio: 3 / 2; }
.goods p { max-width: 40ch; }

/* ── Kind words ────────────────────────────────────────────────────── */
.words { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.words > h2 { grid-column: 1 / span 4; }
.words figure { grid-column: 6 / span 7; display: grid; gap: 28px; }
.words blockquote { min-height: 6.2em; }
.words .ctrl { display: flex; align-items: center; gap: 28px; }
.words .count { font-family: var(--f-brand); font-size: var(--label); letter-spacing: 0.28em; color: var(--grey); direction: ltr; }

/* ── Cards (Journal, tips) ─────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) var(--g); }
.cards a { display: grid; gap: 12px; text-decoration: none; align-content: start; }
.cards .img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--line); margin-bottom: 4px; }
.cards img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease); }
.cards a:hover img { transform: scale(1.03); }
.cards a:hover h3 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.cards .by { color: var(--grey); font-size: var(--small); }
.cards .feature { grid-column: span 2; grid-row: span 2; }
.cards .feature .img { aspect-ratio: 4 / 3; }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1120px; margin-inline: auto; transition: opacity 450ms var(--ease); }
.cards.two.turning { opacity: 0; }
.cards .more { justify-self: start; font-size: var(--small); }
.pp-cards { display: block; margin: 20px auto 0; font-size: var(--small); color: var(--grey); }

/* ── Foot: the Wedgwood field ──────────────────────────────────────── */
.foot { background: var(--wedgwood); color: var(--ink); padding: var(--sec) var(--m) 28px; }
.foot .big a { text-decoration: none; }
.foot .big a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 14px; }
.foot .big + p { margin-top: 24px; max-width: 44ch; }
.foot .cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 40px; margin-top: clamp(64px, 8vw, 120px); }
.foot .cols > div { grid-column: span 3; display: grid; gap: 14px; align-content: start; }
.foot .cols ul { display: grid; gap: 4px; }
.foot .cols a { text-decoration: none; }
.foot .cols a:hover { text-decoration: underline; text-underline-offset: 5px; }
.foot .sig { font-size: clamp(40px, 3.4vw, 54px); }
.foot .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: clamp(56px, 6vw, 96px); padding-top: 20px; border-top: 1px solid rgba(27,34,51,0.25); font-size: 14px; font-weight: 400; }
.foot .legal nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* ── Inner pages ───────────────────────────────────────────────────── */
.page-top { padding: calc(var(--head-h) + clamp(64px, 9vw, 140px)) var(--m) clamp(48px, 6vw, 96px); display: grid; gap: 28px; justify-items: start; }
.page-top > p { max-width: 52ch; }
.toc { display: flex; flex-wrap: wrap; gap: 0 28px; }

/* Artist page: an exhibition of one */
.a-hero { position: relative; height: 92svh; min-height: 600px; color: var(--on-photo); overflow: hidden; background: #2b2e36; }
.a-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.a-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12,15,24,0.32), transparent 24%, transparent 48%, rgba(12,15,24,0.58)); pointer-events: none; }
.a-hero .name { position: absolute; z-index: 2; inset: auto 0 0 0; padding: 0 var(--m) clamp(32px, 5vw, 64px); display: grid; gap: 10px; justify-items: start; }
.a-hero h1 { margin-inline-end: -0.14em; }
.a-hero .sig { font-size: clamp(40px, 4vw, 64px); }
.a-tabs { position: sticky; top: var(--head-h); z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); display: flex; gap: 0 28px; padding-inline: var(--m); overflow-x: auto; }
.a-tabs a { font-family: var(--f-brand); font-weight: 400; font-size: var(--small); letter-spacing: 0.03em; text-decoration: none; padding: 16px 0 14px; white-space: nowrap; color: var(--grey); border-bottom: 1px solid transparent; }
.a-tabs a:hover, .a-tabs a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.a-intro .grid > .q { grid-column: 1 / span 7; }
.a-intro .grid > .side { grid-column: 9 / span 4; display: grid; gap: 22px; align-content: start; justify-items: start; }
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: clamp(24px, 4vw, 64px); align-items: start; }
.gallery button { padding: 0; border: 0; background: var(--line); overflow: hidden; cursor: zoom-in; display: block; width: 100%; }
.gallery img { width: 100%; height: auto; transition: transform 1400ms var(--ease); }
.gallery button:hover img { transform: scale(1.02); }
.gallery .x-full { grid-column: 1 / -1; }
.gallery .x-l { grid-column: 1 / span 7; }
.gallery .x-r { grid-column: 9 / span 4; align-self: end; }
.gallery .x-c { grid-column: 3 / span 8; }
.gallery .x-a { grid-column: 1 / span 4; }
.gallery .x-b { grid-column: 5 / span 4; margin-top: clamp(40px, 6vw, 120px); }
.gallery .x-d { grid-column: 9 / span 4; }
.a-bio .grid > .ph { grid-column: 1 / span 5; aspect-ratio: 4 / 5; overflow: hidden; background: var(--line); }
.a-bio .grid > .ph img { width: 100%; height: 100%; object-fit: cover; }
.a-bio .grid > .tx { grid-column: 7 / span 6; display: grid; gap: 20px; align-content: center; justify-items: start; }
.a-bio .tx p { max-width: 54ch; }
.a-bio .tx .sig { font-size: clamp(40px, 3.6vw, 56px); margin-top: 8px; }
.a-words { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 80px) var(--g); }
.a-words figure { display: grid; gap: 16px; border-top: 1px solid var(--ink); padding-top: 24px; align-content: start; }
.a-words details summary { cursor: pointer; list-style: none; font-weight: 400; font-size: var(--small); text-decoration: underline; text-underline-offset: 6px; min-height: 44px; display: inline-flex; align-items: center; }
.a-words details summary::-webkit-details-marker { display: none; }
.a-words details[open] summary { display: none; }
.a-words figure:has(details[open]) > blockquote { display: none; }
.next { position: relative; display: block; height: 72svh; min-height: 460px; overflow: hidden; color: var(--on-photo); text-decoration: none; background: #2b2e36; }
.next img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1600ms var(--ease); }
.next:hover img { transform: scale(1.03); }
.next::after { content: ""; position: absolute; inset: 0; background: rgba(12,15,24,0.38); }
.next .in { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 18px; padding: var(--m); }
.next .in .t-brand { margin-inline-end: -0.14em; }

.lightbox { border: 0; padding: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: var(--paper); color: var(--ink); }
.lightbox::backdrop { background: var(--paper); }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; }
.lightbox .lb-top, .lightbox .lb-bot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px var(--m); }
.lightbox .stage { display: grid; place-items: center; min-height: 0; padding: 0 var(--m); }
.lightbox .stage img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* About */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--g); counter-reset: s; }
.steps li { display: grid; gap: 12px; align-content: start; border-top: 1px solid var(--ink); padding-top: 20px; }
.steps li::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-family: var(--f-brand); font-size: var(--label); letter-spacing: 0.28em; color: var(--grey); }
.crew-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); }
.crew-grid a { display: grid; gap: 12px; text-decoration: none; }
.crew-grid .ph { aspect-ratio: 4 / 5; overflow: hidden; background: var(--line); margin-bottom: 4px; }
.crew-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease); }
.crew-grid a:hover img { transform: scale(1.03); }
.about-text { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.about-text > h2 { grid-column: 1 / span 5; }
.about-text > .tx { grid-column: 7 / span 6; display: grid; gap: 20px; justify-items: start; }
.about-text .tx p { max-width: 56ch; }

/* ── Small screens ─────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .bar nav { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
}
@media (max-width: 900px) {
  :root { --head-h: 64px; }
  .bar { gap: 12px; }
  .bar .wordmark .w2, .bar .wordmark .rule { display: none; }
  .bar .wordmark .w1 { font-size: 20px; }
  .bar .end { gap: 12px; }
  .bar .lang { display: none; }
  .ticket .n { display: none; }
  .sec-head > h2, .sec-head > .side { grid-column: 1 / -1; }
  .hero .low { grid-template-columns: 1fr auto; }
  .hero .cue { display: none; }
  .hero .crew a { padding: 8px 10px; }
  .chapter { position: relative; min-height: 0; padding-block: 72px; row-gap: 32px; }
  .chapter .who, .chapter .art { grid-column: 1 / -1; }
  .date-q { grid-template-columns: 1fr; }
  .rail { grid-auto-columns: 82%; }
  .goods > li { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .words > h2, .words figure { grid-column: 1 / -1; }
  .words > h2 { margin-bottom: 28px; }
  .cards, .cards.two, .a-words { grid-template-columns: 1fr; }
  .cards .feature { grid-column: auto; grid-row: auto; }
  .foot .cols > div { grid-column: span 6; }
  .a-intro .grid > *, .a-bio .grid > *, .about-text > * { grid-column: 1 / -1 !important; }
  .a-intro .grid, .a-bio .grid, .about-text { row-gap: 32px; }
  .gallery > * { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .steps { grid-template-columns: 1fr; }
  .crew-grid { grid-template-columns: 1fr 1fr; }
  .who-list li { grid-template-columns: 56px minmax(0, 1fr); }
  .who-list .ph { width: 56px; height: 56px; }
  .who-list li > :last-child { grid-column: 1 / -1; }
  .wa-float { inset-inline: var(--m); justify-content: center; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .slides img { transition: none; transform: none; }
  .chapter { position: relative; }
  .wa-float { transition: none; }
  :is(.chapter .art, .cards, .gallery, .crew-grid, .next) img { transition: none !important; transform: none !important; }
}
.gallery + .t-label { margin-top: 32px; }
.page-top + .sec { border-top: 1px solid var(--line); }
.crew-grid a > .t-d4 { margin-top: 2px; }

/* ── Audit fixes (pass 1) ──────────────────────────────────────────── */
.script.sig { font-size: clamp(36px, 3.2vw, 50px); }
.wordmark { padding-block: 10px; }
.words .count { font-weight: 400; }
.hero .pp, .foot .legal { font-size: var(--small); }

/* ── Visual review fixes (pass 1) ──────────────────────────────────── */
.btn { white-space: nowrap; }
.foot .sig { white-space: nowrap; }
.statement .script { color: var(--ink); }
.rail-ctrl[hidden] { display: none; }
/* Hebrew has no capitals, and wide tracking breaks its letterforms */
html[lang="he"] .t-label:not([lang="en"]) { letter-spacing: 0.02em; font-family: var(--f-text); font-weight: 500; font-size: 14px; }
@media (max-width: 900px) { .who-list .btn { width: 100%; } }
.foot .sig { font-size: clamp(32px, 2.5vw, 38px); }
@media (max-width: 900px) { .foot .cols > div:last-child { grid-column: 1 / -1; } }
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* ═══ v8.1 — review fixes ═══════════════════════════════════════════
   1. The artists get equal frames side by side instead of stacked full-screen chapters.
   2. Section headings and their explanation sit in one column, read in order
      (they were on opposite edges of the page, ~140px apart).
   3. Artist-page tabs follow the page direction (they sat on the left of a Hebrew page).
   4. A single gallery frame never exceeds the screen height (portraits ran 2+ screens).
   ════════════════════════════════════════════════════════════════════ */

/* 1. The house */
.house { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) var(--g); align-items: start; }
.house article { display: grid; gap: 12px; align-content: start; }
.house .pic { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--line); margin-bottom: 8px; }
.house .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 700ms var(--ease), transform 1400ms var(--ease); }
.house .pic img + img { opacity: 0; }
.house article:hover .pic img + img { opacity: 1; }
.house article:hover .pic img { transform: scale(1.02); }
.house .nm { font-family: var(--f-brand); font-weight: 300; font-size: var(--d4); line-height: 1.25; letter-spacing: 0.12em; text-transform: uppercase; }
.house .nm a { text-decoration: none; }
.house .nm a:hover { text-decoration: underline; text-underline-offset: 6px; }
.house .sig { font-size: clamp(26px, 2vw, 32px); color: var(--grey); margin-top: -10px; line-height: 1.1; }
.house .line { color: var(--grey); font-size: var(--small); line-height: 1.55; min-height: calc(3 * 1.55em); }
.house .acts { gap: 10px 22px; margin-top: 6px; }
.house .btn { min-height: 44px; padding: 0 18px; }
@media (max-width: 1100px) { .house { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .house { gap: 36px 14px; }
  .house .nm { font-size: 15px; letter-spacing: 0.08em; }
  .house .sig, .house .line { display: none; }
  .house .acts { display: grid; gap: 10px; }
  .house .btn { width: 100%; padding: 0 10px; font-size: 14px; }
}

/* 2. Heading, then its explanation, in reading order */
.sec-head { grid-template-columns: minmax(0, 1fr); row-gap: 18px; align-items: start; }
.sec-head > h2, .sec-head > .side { grid-column: 1 / -1; }
.sec-head > .side p { max-width: 56ch; }

/* 3. Tabs follow the page */
html[dir="rtl"] .a-tabs { direction: rtl; }

/* 4. No frame taller than the screen */
.gallery button { background: transparent; }
.gallery img { width: auto; max-width: 100%; max-height: 86vh; margin-inline: auto; }

/* ═══ v8.2 — centred composition, backstage film, calm galleries, page openers, privacy ═══ */

/* 1. Centred composition: headings, their lines, quotes, forms and actions sit on the axis.
      Running text (bios, stories) stays in a centred column, aligned to its own language. */
.sec-head { justify-items: center; text-align: center; }
.sec-head > .side { justify-items: center; }
.sec-head > .side p { margin-inline: auto; }
html[dir="rtl"] .sec-head :is(h2, p, a)[lang="en"] { text-align: center; }
.page-top { justify-items: center; text-align: center; }
.page-top > p { margin-inline: auto; }
html[dir="rtl"] .page-top :is(h1, p, span)[lang="en"] { text-align: center; }
.statement { text-align: center; }
.acts.center, .sec-head + .acts { justify-content: center; }
#check .date-q, #check .date-a { margin-inline: auto; }
#check .date-a { max-width: 980px; }
.words { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; row-gap: 40px; }
.words > h2, .words figure { grid-column: 1 / -1; }
.words figure { max-width: 860px; justify-items: center; }
.words .ctrl { justify-content: center; }
html[dir="rtl"] .words h2[lang="en"] { text-align: center; }
.foot .big, .foot .big + p { text-align: center; margin-inline: auto; }
html[dir="rtl"] .foot .big[lang="en"] { text-align: center; }

/* Artist page: name on the axis, intro stacked on the axis */
.a-hero .name { justify-items: center; text-align: center; }
html[dir="rtl"] .a-hero .name [lang="en"] { text-align: center; }
.a-intro .grid { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 28px; }
.a-intro .grid > * { grid-column: 1 / -1 !important; }
.a-intro .q { max-width: 30ch; }
.a-intro .grid > .side { justify-items: center; }
.a-intro .acts { justify-content: center; }
.a-tabs { justify-content: center; }

/* 2. Behind the camera: the backstage film, then the person */
.bts { display: grid; gap: clamp(48px, 6vw, 96px); }
.bts .film-frame { max-width: 1120px; width: 100%; margin-inline: auto; }
.bts .person { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 96px); align-items: center; max-width: 1120px; margin-inline: auto; }
.bts .person .ph { aspect-ratio: 4 / 5; overflow: hidden; background: var(--line); }
.bts .person .ph img { width: 100%; height: 100%; object-fit: cover; }
.bts .person .tx { display: grid; gap: 18px; }
.bts .person .sig { font-size: clamp(36px, 3vw, 50px); color: var(--grey); }
@media (max-width: 900px) { .bts .person { grid-template-columns: 1fr; } }

/* 3. Calm gallery: justified rows — every frame keeps its shape, every row is the same height */
.gallery.calm { display: flex; flex-wrap: wrap; gap: clamp(8px, 0.9vw, 14px); }
.gallery.calm::after { content: ""; flex-grow: 999; }
.gallery.calm button { flex-grow: var(--r, 1.5); flex-basis: calc(var(--r, 1.5) * clamp(170px, 20vw, 320px)); grid-column: auto !important; margin: 0 !important; background: var(--line); }
.gallery.calm img { width: 100%; max-height: none; aspect-ratio: var(--r, 1.5); object-fit: cover; opacity: 0; transition: opacity 900ms var(--ease), transform 1400ms var(--ease); }
.gallery.calm img.in { opacity: 1; }
.gallery.calm button:hover img { transform: scale(1.025); }
.gallery-meta { display: flex; justify-content: center; gap: 24px; margin-top: 28px; }
/* the viewer: soft crossfade, swipe, counter */
#lbImg { transition: opacity 260ms ease; }
#lbImg.fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .gallery.calm img { opacity: 1; transition: none; } #lbImg { transition: none; } }

/* 4. Videographers: your film, your choice */
.choose { text-align: center; display: grid; justify-items: center; gap: clamp(28px, 3vw, 44px); }
.choose .words3 { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2em 0.9em; }
.choose .words3 span { opacity: 0.52; transition: opacity 700ms var(--ease); }   /* 0.52 = the lowest that still reads at 3:1 on mist (WCAG 1.4.3, large text) */
.choose.is-in .words3 span { opacity: 1; }
.choose.is-in .words3 span:nth-child(2) { transition-delay: 350ms; }
.choose.is-in .words3 span:nth-child(3) { transition-delay: 700ms; }
.choose p { max-width: 58ch; }

/* 5. Page openers — one thing on each page that holds the eye in the first second */
/* Home: the crew line drives the hero — point at a name and the photograph becomes theirs */
.hero .crew a[aria-current="true"] { text-decoration: underline; text-underline-offset: 6px; }
/* Artist: the cover pulls into focus like a lens, then the signature writes itself */
.a-hero > img { animation: focus-pull 1600ms var(--ease) both; }
@keyframes focus-pull { from { filter: blur(14px); transform: scale(1.06); } to { filter: blur(0); transform: scale(1); } }
.a-hero .sig { clip-path: inset(0 100% 0 0); animation: write 2200ms cubic-bezier(0.65, 0, 0.35, 1) 900ms forwards; }
@keyframes write { to { clip-path: inset(0 0 0 0); } }
/* Tips: the Journal photograph with Fine's turning stamp on its edge (from the live Journal) */
.j-hero { position: relative; height: min(64vh, 620px); min-height: 380px; margin-top: var(--head-h); background: var(--line); }
.j-hero > img { width: 100%; height: 100%; object-fit: cover; }
.stamp { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); width: clamp(116px, 11vw, 156px); aspect-ratio: 1; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 10px var(--paper); display: grid; place-items: center; z-index: 2; }
.stamp svg { position: absolute; inset: 8%; width: 84%; height: 84%; animation: spin 30s linear infinite; }
.stamp text { font-family: var(--f-brand); font-size: 9px; letter-spacing: 0.2em; fill: var(--ink); text-transform: uppercase; }
.stamp b { font-family: var(--f-brand); font-weight: 300; font-size: 28px; }
@keyframes spin { to { transform: rotate(360deg); } }
.j-hero + .page-top { padding-top: clamp(96px, 9vw, 140px); }
/* About: the four portraits open one after another, like a shutter */
.shutters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); width: 100%; max-width: 1120px; margin-top: clamp(24px, 3vw, 40px); }
.shutters a { display: grid; gap: 10px; text-decoration: none; }
.shutters .ph { aspect-ratio: 3 / 4; overflow: hidden; background: var(--line); clip-path: inset(50% 0 50% 0); animation: shutter 900ms cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.shutters a:nth-child(2) .ph { animation-delay: 180ms; } .shutters a:nth-child(3) .ph { animation-delay: 360ms; } .shutters a:nth-child(4) .ph { animation-delay: 540ms; }
.shutters img { width: 100%; height: 100%; object-fit: cover; }
@keyframes shutter { to { clip-path: inset(0 0 0 0); } }
@media (max-width: 700px) { .shutters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .a-hero > img, .a-hero .sig, .shutters .ph, .stamp svg { animation: none !important; clip-path: none !important; filter: none !important; }
}

/* 6. Privacy notice (first visit) and "clear my data" */
.notice { position: fixed; z-index: 60; inset-inline: var(--m); bottom: 20px; margin-inline: auto; max-width: 760px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(12,15,24,0.14); padding: 20px 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; }
.notice p { font-size: var(--small); line-height: 1.6; }
.notice .acts { gap: 10px 18px; }
.notice .btn { min-height: 44px; }
body.notice-open .wa-float { transform: translateY(160%) !important; }
.foot .legal button { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
@media (max-width: 700px) { .notice { grid-template-columns: 1fr; bottom: 12px; } }

/* Legal documents: one readable column on the axis */
.doc { max-width: 78ch; margin-inline: auto; }
.doc h2 { font-family: "Assistant", var(--f-display); font-weight: 600; font-size: var(--d4); margin: 48px 0 14px; }
.doc p, .doc li { font-size: var(--small); line-height: 1.85; margin-bottom: 12px; }
.doc ul { list-style: disc; padding-inline-start: 22px; }
.doc a { text-underline-offset: 3px; }
.doc .updated { color: var(--grey); }
.doc .draft-banner { background: var(--mist); padding: 14px 18px; }
.doc .legal-en-note { border-inline-start: 2px solid var(--wedgwood-deep); padding: 8px 16px; font-size: var(--small); }
.table-wrap { overflow-x: auto; margin: 8px 0 16px; }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--small); }
.doc th, .doc td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { font-weight: 600; }
.stamp svg, .stamp text { direction: ltr; unicode-bidi: isolate; }
.st-office { color: var(--ink); font-weight: 400; font-size: var(--small); }
.st-office::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ink); margin-inline-end: 10px; vertical-align: 1px; }
.who-list li.office .st { color: var(--ink); }

/* ═══ v8.3 — Light pass (home), office check, personal pages ═══ */
/* Light pass: a dark studio, a warm band of light crossing right → left, scroll-driven */
.lp { position: relative; height: 320vh; background: #06070A; color: #F4F1EC; }
.lp-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; justify-items: center; align-content: center; gap: clamp(24px, 4vh, 48px); padding: calc(var(--head-h) + 12px) var(--m) clamp(24px, 4vh, 40px); }
.lp-line { text-align: center; display: grid; gap: 14px; justify-items: center; opacity: var(--end, 0); transform: translateY(calc((1 - var(--end, 0)) * 12px)); }
.lp-line h2 { margin-inline-end: -0.14em; text-align: center !important; }
.lp-line .t-label { color: rgba(244,241,236,0.7); }
.lp-cast { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 24px); width: min(100%, 1180px); align-self: start; }
.lp-cast li { --l: 0; }
.lp-cast a { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #000; text-decoration: none; color: inherit; }
.lp-cast img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-cast .dark { filter: brightness(0.05) contrast(1.3) grayscale(0.5); }
.lp-cast .lit { opacity: var(--l); filter: contrast(1.06) brightness(calc(0.75 + var(--l) * 0.3)); }
.lp-cast .nm { position: absolute; inset: auto 0 14px 0; text-align: center !important; color: #fff; opacity: clamp(0, calc(var(--l) * 2 - 0.9), 1); text-shadow: 0 1px 12px rgba(0,0,0,0.6); }
.lp-beam { position: absolute; z-index: 2; top: -10%; bottom: -10%; left: 0; width: clamp(180px, 30vw, 460px); transform: translateX(var(--bx, 120vw)) skewX(-8deg); pointer-events: none; mix-blend-mode: screen; filter: blur(10px);
  background: linear-gradient(90deg, transparent, rgba(255,236,210,0.07) 30%, rgba(255,244,228,0.22) 50%, rgba(255,236,210,0.07) 70%, transparent); }
.lp.is-static, .lp.is-film { height: auto; }
.lp.is-static .lp-stage, .lp.is-film .lp-stage { position: relative; height: auto; min-height: 0; padding-block: var(--sec); }
.lp.is-static .lp-cast li { --l: 1; }
.lp.is-static .lp-line { opacity: 1; transform: none; }
.lp.is-static .lp-beam { display: none; }
.lp.is-film .lp-stage { padding: 0; display: block; }
.lp.is-film video { width: 100%; height: auto; max-height: 100svh; object-fit: cover; display: block; }
.lp-pp { position: absolute; inset-inline-end: var(--m); bottom: 24px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255,255,255,0.6); background: none; color: #fff; font-size: var(--small); }
@media (max-width: 700px) {
  .lp { height: 280vh; }
  .lp-cast { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 440px); }
  .lp-stage { align-content: center; }
}
@media (prefers-reduced-motion: reduce) { .lp { height: auto; } .lp-stage { position: relative; height: auto; padding-block: var(--sec); } .lp-cast li { --l: 1; } .lp-line { opacity: 1; transform: none; } .lp-beam { display: none; } }

/* Behind the camera: the same light passes once over the portrait */
.beam-once { position: relative; }
.beam-once img { filter: brightness(0.12); transition: filter 1400ms var(--ease) 350ms; }
.beam-once::after { content: ""; position: absolute; inset: -10% 0; width: 60%; left: 0; pointer-events: none; mix-blend-mode: screen; filter: blur(8px);
  background: linear-gradient(90deg, transparent, rgba(255,244,228,0.45), transparent); transform: translateX(200%) skewX(-8deg); }
.beam-once.in img { filter: none; }
.beam-once.in::after { animation: sweep 1700ms cubic-bezier(0.65, 0, 0.35, 1) forwards; }
@keyframes sweep { from { transform: translateX(200%) skewX(-8deg); } to { transform: translateX(-120%) skewX(-8deg); } }
@media (prefers-reduced-motion: reduce) { .beam-once img { filter: none; } .beam-once::after { display: none; } }

/* ═══ v8.4 — artist page: moving cover, point of view, weddings (Pic-Time) ═══ */
/* Moving cover: their film, or their frames dissolving slowly with a gentle drift */
.a-cover { height: 100svh; }
.a-cover > img { display: none; }
.reel { position: absolute; inset: 0; }
.reel img, .reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel img { opacity: 0; transform: scale(1.08); transition: opacity 2200ms var(--ease), transform 9000ms linear; }
.reel img.on { opacity: 1; transform: scale(1); }
.reel.paused img { transition: opacity 2200ms var(--ease); }
.reel-pp { position: absolute; z-index: 3; inset-inline-end: var(--m); bottom: clamp(20px, 3vw, 36px); min-height: 44px; padding: 0 16px; border: 1px solid rgba(255,255,255,0.6); background: none; color: #fff; font-size: var(--small); }
@media (prefers-reduced-motion: reduce) { .reel img { transition: none; transform: none; } }

/* Point of view: their words on the axis, the signature beneath */
.pov { display: grid; justify-items: center; text-align: center; gap: 26px; }
.pov blockquote { max-width: 34ch; line-height: 1.5; }
.pov .sig { font-size: clamp(34px, 3vw, 48px); color: var(--grey); margin-top: -6px; }

/* Weddings: each a cover leading to the full gallery — one feature, then two across */
.weddings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 80px) var(--g); }
.weddings a { display: grid; gap: 18px; text-decoration: none; }
.weddings .w-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--line); }
.weddings img { width: 100%; height: 100%; object-fit: cover; transition: transform 1600ms var(--ease); }
.weddings a:hover img { transform: scale(1.03); }
.weddings .w-txt { display: grid; gap: 8px; justify-items: center; text-align: center; }
.weddings .w-couple { font-size: var(--d4); letter-spacing: 0.16em; text-align: center !important; }
.weddings .w-venue { color: var(--grey); font-size: var(--small); }
.weddings .w-feature { grid-column: 1 / -1; }
.w-all { text-align: center; margin-top: clamp(40px, 5vw, 72px); }
.weddings .w-feature .w-img { aspect-ratio: 21 / 9; }
.weddings .w-feature .w-couple { font-size: var(--d3); }
@media (max-width: 700px) {
  .weddings { grid-template-columns: 1fr; }
  .weddings .w-feature .w-img { aspect-ratio: 3 / 2; }
}

/* ═══ v8.5 — the quote (quote.html?a=…) ═══ */
.q-cover { position: relative; height: 92svh; min-height: 560px; overflow: hidden; color: #fff; background: #2b2e36; }
.q-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: focus-pull 1600ms var(--ease) both; }
.q-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12,15,24,0.3), transparent 30%, transparent 50%, rgba(12,15,24,0.6)); }
.q-cover .in { position: absolute; z-index: 2; inset: auto 0 0 0; padding: 0 var(--m) clamp(32px, 6vh, 72px); display: grid; justify-items: center; text-align: center; gap: 12px; }
.q-cover h1 { margin-inline-end: -0.14em; text-align: center !important; }
.q-cover .sub { font-size: var(--lead); }
.q-two { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 112px); align-items: center; max-width: 1180px; margin-inline: auto; }
.q-two.rev .ph { order: -1; }
.q-two .tx { display: grid; gap: 18px; align-content: center; }
.q-two .ph { aspect-ratio: 4 / 5; overflow: hidden; background: var(--line); }
.q-two .ph img { width: 100%; height: 100%; object-fit: cover; }
.q-two .sig { font-size: clamp(36px, 3vw, 50px); color: var(--grey); }
.q-two .sig-img { max-width: 220px; height: auto; opacity: 0.85; }
.q-art blockquote { line-height: 1.45; }
@media (max-width: 900px) { .q-two { grid-template-columns: 1fr; } .q-two.rev .ph { order: 0; } }

.q-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: clamp(28px, 3vw, 44px) var(--g); max-width: 1180px; margin-inline: auto; counter-reset: s; }
.q-steps li { border-top: 1px solid var(--ink); padding-top: 18px; display: grid; gap: 8px; align-content: start; text-align: center; justify-items: center; }
.q-steps .n { font-family: var(--f-brand); font-size: var(--label); letter-spacing: 0.28em; color: var(--grey); }
.q-vision { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); max-width: 1180px; margin-inline: auto; }
.q-vision span { aspect-ratio: 4 / 5; overflow: hidden; background: var(--line); }
.q-vision span:nth-child(1), .q-vision span:nth-child(6) { aspect-ratio: auto; grid-row: span 2; }
/* the mosaic: one 2×2 frame in one of four corners + five singles, packed densely — always three full rows */
.q-vision.mosaic { grid-auto-flow: dense; }
.q-vision.mosaic span:nth-child(n) { grid-row: auto; aspect-ratio: 4 / 5; }
.q-vision.mosaic span.big { aspect-ratio: auto; position: relative; }   /* its height comes from the two rows it spans, */
.q-vision.mosaic span.big img { position: absolute; inset: 0; }                       /* never from the photo inside */
.q-vision.mosaic span.big.at-11 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.q-vision.mosaic span.big.at-12 { grid-column: 2 / span 2; grid-row: 1 / span 2; }
.q-vision.mosaic span.big.at-21 { grid-column: 1 / span 2; grid-row: 2 / span 2; }
.q-vision.mosaic span.big.at-22 { grid-column: 2 / span 2; grid-row: 2 / span 2; }
.q-vision img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .q-vision { grid-template-columns: repeat(2, minmax(0, 1fr)); } .q-vision span:nth-child(n) { grid-row: auto; aspect-ratio: 4 / 5; } }
@media (max-width: 700px) {   /* phone: the large frame across the top, then four — the sixth would leave a hole */
  .q-vision.mosaic span.big[class] { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 5; }
  .q-vision.mosaic span:nth-child(6) { display: none; }
}

.q-build > * + * { margin-top: clamp(40px, 5vw, 72px); }
.q-how { max-width: 760px; margin-inline: auto; text-align: center; display: grid; gap: 12px; }
.q-card { max-width: 920px; margin-inline: auto; border: 1px solid var(--line); background: var(--paper); padding: clamp(24px, 3vw, 44px); display: grid; gap: 26px; }
.q-date .row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 16px 28px; }
.q-date label { display: grid; gap: 6px; font-size: var(--small); color: var(--grey); }
.q-date input { min-height: 52px; min-width: 240px; border: 0; border-bottom: 1px solid var(--ink); background: transparent; font: inherit; font-size: var(--lead); color: var(--ink); color-scheme: light; }
.q-date .wd { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; }
.q-date .wd[hidden] { display: none; }
.chip { min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); background: none; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.q-date .price { display: grid; justify-items: center; gap: 4px; text-align: center; }
.q-date .price strong { font-family: var(--f-brand); font-weight: 300; font-size: var(--d1); line-height: 1; letter-spacing: 0.02em; }
.q-date .inc { display: grid; justify-items: center; gap: 12px; text-align: center; }
.q-date .inc ul { display: grid; gap: 6px; }
.q-date .inc li::before { content: "— "; color: var(--grey); }

.q-block { max-width: 1180px; margin-inline: auto; }
.q-block .side p + p { margin-top: 10px; }
.q-attn { border-inline-start: 2px solid var(--wedgwood-deep); padding-inline-start: 12px; margin-top: 14px; text-align: start; }
.q-adds { max-width: 920px; margin-inline: auto; border-top: 1px solid var(--ink); }
.q-adds > li { border-bottom: 1px solid var(--line); padding-block: 6px; }
.add { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 16px; align-items: start; text-align: start; padding: 14px 0; border: 0; background: none; }
.add .box { width: 18px; height: 18px; border: 1px solid var(--ink); margin-top: 4px; }
.add[aria-pressed="true"] .box { background: var(--ink); box-shadow: inset 0 0 0 3px var(--paper); }
.add .tx { display: grid; gap: 4px; }
.add .t { font-weight: 500; }
.add .pr { font-family: var(--f-brand); white-space: nowrap; }
.add.sm { padding: 10px 0; font-size: var(--small); }
.q-adds details, .q-vids details { margin: 0 38px 10px 0; }
.q-adds summary, .q-vids summary { cursor: pointer; font-size: var(--small); text-decoration: underline; text-underline-offset: 4px; }
.rolls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 38px 12px 0; font-size: var(--small); }
.rolls button { width: 40px; height: 40px; border: 1px solid var(--ink); background: none; font-size: 18px; }
.q-notes { max-width: 920px; margin: 14px auto 0; }
.small { font-size: var(--small); }

.q-vids { display: grid; gap: clamp(24px, 3vw, 40px); }
.q-vids > li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 3vw, 48px); padding: clamp(18px, 2vw, 28px); border: 1px solid var(--line); }
.q-vids > li.sel { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.q-vids > li.busy { opacity: 0.6; }
.v-ph { aspect-ratio: 4 / 5; overflow: hidden; background: var(--mist); }
.v-ph img { width: 100%; height: 100%; object-fit: cover; }
.v-ph.logo img { object-fit: contain; padding: 18%; }
.v-tx { display: grid; gap: 10px; align-content: start; }
.v-badge { justify-self: start; background: var(--wedgwood); color: var(--ink); font-size: 13px; padding: 4px 10px; }
.v-price { font-family: var(--f-brand); color: var(--grey); }
.v-busy { color: #9B2C2C; font-size: var(--small); }
.v-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--small); }
.v-pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-top: 6px; }
.pkg { display: grid; gap: 6px; align-content: start; text-align: start; padding: 16px; border: 1px solid var(--line); background: var(--paper); }
.pkg:hover { border-color: var(--ink); }
.pkg.on { border-color: var(--ink); background: var(--mist); box-shadow: inset 0 0 0 1px var(--ink); }
.pkg .pl { font-weight: 500; }
.pkg .pp { font-family: var(--f-brand); }
.pkg .ph { font-size: 13px; }
.pkg ul { display: grid; gap: 4px; font-size: 14px; }
.pkg li::before { content: "· "; }
.v-extras { display: grid; border-top: 1px solid var(--line); margin-top: 6px; }
@media (max-width: 800px) { .q-vids > li { grid-template-columns: 1fr; } .v-ph { aspect-ratio: 3 / 2; } }

.q-sum h3 { text-align: center; }
.q-sum > .t-label { text-align: center; }
.q-sum dl { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.q-sum dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.q-sum dl > div.sub { padding-inline-start: 18px; font-size: var(--small); color: var(--grey); }
.q-sum dd { margin: 0; font-family: var(--f-brand); white-space: nowrap; }
.q-sum .tot { display: flex; justify-content: space-between; align-items: baseline; }
.q-sum .tot strong { font-family: var(--f-brand); font-weight: 300; font-size: var(--d2); }
.q-sum .small { text-align: center; }

.q-bar { position: fixed; z-index: 36; inset: auto 0 0 0; background: var(--paper); border-top: 1px solid var(--line); display: flex; justify-content: center; align-items: baseline; gap: 14px; padding: 12px var(--m); box-shadow: 0 -8px 24px rgba(12,15,24,0.06); }
.q-bar strong { font-family: var(--f-brand); font-weight: 400; font-size: 22px; }
.quote-page .wa-float { bottom: 76px; }
.quote-page main { padding-bottom: 64px; }

.q-ba { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); max-width: 1180px; margin-inline: auto; }
.ba { display: grid; gap: 10px; }
.ba-stage { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: var(--line); }
.ba-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-top { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x, 50%)); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 2px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,0.3); }
.ba input[type=range] { width: 100%; accent-color: var(--ink); direction: ltr; }
.ba figcaption { display: flex; justify-content: space-between; direction: ltr; }
@media (max-width: 800px) { .q-ba { grid-template-columns: 1fr; } }

.q-close { display: grid; justify-items: center; text-align: center; gap: 22px; }
.q-close blockquote { max-width: 26ch; }
.q-close p { max-width: 60ch; }
.q-close .sig { font-size: clamp(40px, 3.4vw, 56px); color: var(--grey); }
.q-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; }

@media print {
  .bar, .foot, .q-bar, .wa-float, .notice, .q-cover, .skip-link, #sendWa, #pdf, .q-vids > li:not(.sel), .q-adds > li:not(.on), details { display: none !important; }
  .sec { padding-block: 24px !important; }
  body { font-size: 12pt; }
  .q-card { border: 0; padding: 0; }
}
/* quote page: the summary and the total bar carry the action; no floating button, no date ticket */
.quote-page .wa-float, .quote-page #ticketSlot { display: none !important; }
html[dir="rtl"] .q-how [lang="en"], html[dir="rtl"] .q-sum [lang="en"] { text-align: center; }

/* ═══ v8.6 — quote at the live quote's scale (measured: text 13–15px, headings ~36px, price 48px) ═══ */
body.quote-page {
  --brand: clamp(30px, 4vw, 60px); --d1: clamp(30px, 3.2vw, 48px); --d2: clamp(24px, 2.4vw, 36px);
  --d3: clamp(19px, 1.6vw, 24px); --d4: 17px; --lead: 16px; --body: 15px; --small: 13px; --sec: clamp(56px, 6vw, 96px);
}
.quote-page .sec-head { margin-bottom: clamp(24px, 3vw, 40px); }
.quote-page .q-cover { height: 78svh; }
.quote-page .q-two { max-width: 1040px; gap: clamp(28px, 4vw, 72px); }
.quote-page .q-two .ph { max-width: 420px; justify-self: center; width: 100%; }
.quote-page .q-steps, .quote-page .q-vision, .quote-page .q-ba { max-width: 1040px; }
.quote-page .q-build > * + * { margin-top: clamp(32px, 4vw, 56px); }
.quote-page .q-card, .quote-page .q-adds, .quote-page .q-notes { max-width: 820px; }
.quote-page .q-card { padding: clamp(20px, 2.4vw, 32px); gap: 18px; }
.quote-page .q-date .price strong { font-size: 48px; }
.quote-page .q-date input { min-height: 44px; font-size: 16px; }
.quote-page .add { padding: 10px 0; gap: 12px; }
.quote-page .q-sum .tot strong { font-size: 36px; }
.quote-page .btn { min-height: 44px; padding: 0 20px; }
.btn.sm { min-height: 38px; padding: 0 14px; font-size: 13px; gap: 8px; }
.btn.sm svg { width: 15px; height: 15px; }

/* Videographers, as in the live quote: compact cards, two across */
.q-vids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 1040px; margin-inline: auto; }
.q-vids > li { display: grid; gap: 10px; align-content: start; padding: 18px; border: 1px solid var(--line); background: var(--paper); grid-template-columns: none; }
.q-vids > li.sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.q-vids > li.busy { opacity: 0.55; }
.v-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.av { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--mist); }
.av.logo { object-fit: contain; padding: 8px; border: 1px solid var(--line); }
.v-nm h4 { font-size: 16px; font-weight: 500; line-height: 1.3; }
.v-badge { display: inline-block; margin-top: 4px; background: var(--wedgwood); color: var(--ink); font-size: 11px; padding: 2px 8px; }
.v-price { font-family: var(--f-brand); font-size: 14px; color: var(--grey); white-space: nowrap; }
.v-style { font-size: 13px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.v-links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; }
.v-busy { color: #9B2C2C; font-size: 13px; }
.v-wa { justify-self: start; }
.v-pick { border: 0; border-top: 1px solid var(--line); background: none; padding: 12px 0 0; margin-top: 4px; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) { .q-vids { grid-template-columns: 1fr; } }
/* the package window */
.v-dlg { border: 0; padding: clamp(20px, 3vw, 32px); width: min(680px, calc(100vw - 32px)); max-height: 88vh; overflow: auto; background: var(--paper); color: var(--ink); }
.v-dlg::backdrop { background: rgba(27,34,51,0.45); }
.v-dlg[open] { display: grid; gap: 16px; }
.v-dlg .d-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.v-dlg .d-head h4 { font-size: 17px; font-weight: 500; }
.v-dlg p { font-size: 13px; line-height: 1.7; }
.d-pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.v-dlg .pkg { font-size: 13px; padding: 14px; }
.d-extras { display: grid; border-top: 1px solid var(--line); }
.d-acts { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }

/* ═══ v8.7 — videographers as film credits ═══ */
.q-vids { display: block; max-width: 1040px; margin-inline: auto; border-top: 1px solid var(--ink); counter-reset: none; }
.q-vids > li { display: grid; grid-template-columns: 36px 52px minmax(0, 1fr) auto 170px; gap: 18px; align-items: center; padding: 16px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; box-shadow: none; transition: background 250ms; }
.q-vids > li:hover { background: var(--mist); }
.q-vids > li.sel { background: var(--mist); box-shadow: inset 3px 0 0 var(--wedgwood-deep); }
html[dir="rtl"] .q-vids > li.sel { box-shadow: inset -3px 0 0 var(--wedgwood-deep); }
.q-vids > li.busy { opacity: 0.5; }
.c-n { font-family: var(--f-brand); font-size: 12px; letter-spacing: 0.2em; color: var(--grey); }
.q-vids .av { width: 52px; height: 52px; filter: grayscale(1); transition: filter 400ms; }
.q-vids li:hover .av, .q-vids li.sel .av { filter: none; }
.c-who { display: grid; gap: 3px; min-width: 0; }
.c-who h4 { font-family: var(--f-brand); font-weight: 400; font-size: 15px; letter-spacing: 0.06em; }
.c-who p { font-size: 13px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-who .v-badge { vertical-align: 2px; margin: 0 6px; }
.c-price { font-family: var(--f-brand); font-size: 14px; color: var(--ink); white-space: nowrap; }
.c-pick { justify-self: stretch; min-height: 40px; padding: 6px 12px; border: 1px solid var(--ink); background: none; font-size: 13px; display: grid; gap: 2px; text-align: center; line-height: 1.35; }
.c-pick:hover { background: var(--ink); color: var(--paper); }
.c-pick.on { background: var(--ink); color: var(--paper); }
.c-pick b { font-family: var(--f-brand); font-weight: 400; }
@media (max-width: 760px) {
  .q-vids > li { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "av who price" "pick pick pick"; gap: 10px 12px; padding: 14px 2px; }
  .q-vids .c-n { display: none; }
  .q-vids .av { grid-area: av; width: 44px; height: 44px; }
  .c-who { grid-area: who; } .c-price { grid-area: price; font-size: 13px; } .c-pick { grid-area: pick; }
  .c-who p { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
.q-more summary { cursor: pointer; font-size: var(--small); text-decoration: underline; text-underline-offset: 4px; margin-top: 6px; }
.q-more p { margin-top: 10px; }

/* ═══ v8.8 — the official quote sheet (A4 @ 96dpi = 794 × 1123), rendered off-screen, then to PDF ═══ */
.pdf-sheet { --k: 1; position: fixed; top: 0; left: -10000px; width: 794px; height: 1123px; overflow: hidden; background: #fff; color: #1B2233;
  padding: 56px 64px 40px; font-family: "Assistant", "Jost", Arial, sans-serif; font-weight: 400; font-size: calc(13px * var(--k)); line-height: 1.55;
  display: flex; flex-direction: column; gap: calc(18px * var(--k)); }
.pdf-sheet::before { content: ""; position: absolute; inset: 18px; border: 1px solid #E1E5EB; pointer-events: none; }
.pdf-sheet .d-top { display: flex; justify-content: center; }
.pdf-sheet .d-mark { display: inline-flex; align-items: center; gap: 10px; color: #1B2233; }
.pdf-sheet .d-mark .w1 { font-family: "Jost", Arial, sans-serif; font-weight: 300; font-size: 24px; letter-spacing: 0.42em; margin-right: -0.42em; }
.pdf-sheet .d-mark .rule { width: 1px; height: 30px; background: #1B2233; opacity: 0.7; margin-left: 6px; }
.pdf-sheet .d-mark .w2 { display: grid; gap: 5px; text-align: left; }
.pdf-sheet .d-mark .w2 b { font-family: "Jost", Arial, sans-serif; font-weight: 400; font-size: 8px; letter-spacing: 0.5em; }
.pdf-sheet .d-mark .w2 i { font-family: "Jost", Arial, sans-serif; font-style: normal; font-size: 6px; letter-spacing: 0.32em; }
.pdf-sheet .d-title { text-align: center; display: grid; gap: calc(4px * var(--k)); padding-bottom: calc(14px * var(--k)); border-bottom: 1px solid #1B2233; }
.pdf-sheet .d-eyebrow { font-family: "Jost", Arial, sans-serif; font-size: 9px; letter-spacing: 0.32em; color: #686C76; }
.pdf-sheet .d-title h1 { font-family: "Jost", Arial, sans-serif; font-weight: 300; font-size: calc(30px * var(--k)); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.15; margin: 0; }
.pdf-sheet .d-title p { color: #686C76; margin: 0; }
.pdf-sheet .d-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.pdf-sheet .d-meta div { background: #F2F5F9; padding: calc(10px * var(--k)) 14px; }
.pdf-sheet .d-meta dt { font-size: calc(10px * var(--k)); color: #686C76; }
.pdf-sheet .d-meta dd { margin: 2px 0 0; font-weight: 600; }
.pdf-sheet .d-sect { display: grid; gap: calc(6px * var(--k)); }
.pdf-sheet .d-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: calc(6px * var(--k)); border-bottom: 1px solid #E1E5EB; font-weight: 600; font-size: calc(14px * var(--k)); }
.pdf-sheet .d-head b, .pdf-sheet .d-row b, .pdf-sheet .d-total b { font-family: "Jost", Arial, sans-serif; font-weight: 400; white-space: nowrap; }
.pdf-sheet .d-inc { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; margin: 0; padding: 0; list-style: none; color: #3A4152; }
.pdf-sheet .d-inc li::before { content: "— "; color: #686C76; }
.pdf-sheet .d-row { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; }
.pdf-sheet .d-row > span { display: grid; gap: 1px; }
.pdf-sheet .d-row .nm { display: block; }
.pdf-sheet .d-row small { font-size: calc(10.5px * var(--k)); color: #686C76; line-height: 1.45; }
.pdf-sheet .d-empty { color: #686C76; margin: 0; }
.pdf-sheet .d-total { display: flex; justify-content: space-between; align-items: baseline; background: #1B2233; color: #fff; padding: calc(14px * var(--k)) 18px; margin-top: calc(6px * var(--k)); }
.pdf-sheet .d-total span { font-weight: 600; font-size: calc(15px * var(--k)); }
.pdf-sheet .d-total b { font-size: calc(28px * var(--k)); font-weight: 300; }
.pdf-sheet .d-valid { text-align: center; color: #3A4152; font-size: calc(11px * var(--k)); margin: 0; }
.pdf-sheet .d-notes p { font-size: calc(10px * var(--k)); color: #686C76; margin: 0; }
.pdf-sheet .d-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #E1E5EB; padding-top: calc(10px * var(--k)); font-size: calc(10.5px * var(--k)); color: #686C76; }
.pdf-sheet .d-sig { font-family: "Hanie", cursive; font-size: calc(26px * var(--k)); color: #1B2233; }
.pdf-sheet sup { font-size: 0.7em; }

/* ═══ v8.9 — videographers restored to the live quote's cards and content ═══ */
.q-vids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 1040px; margin-inline: auto; border-top: 0; }
.q-vids > li { position: relative; display: grid; gap: 10px; align-content: start; grid-template-columns: none; grid-template-areas: none; padding: 18px; border: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); box-shadow: none; }
.q-vids > li:hover { background: var(--paper); border-color: #C9D0DA; }
.q-vids > li.sel, html[dir="rtl"] .q-vids > li.sel { background: var(--paper); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.v-on { position: absolute; top: 12px; inset-inline-end: 12px; background: var(--ink); color: var(--paper); font-size: 11px; padding: 2px 10px; }
.q-vids .v-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.av-btn { padding: 0; border: 0; background: none; cursor: zoom-in; }
.q-vids .av { width: 56px; height: 56px; filter: none; }
.av-init { display: grid; place-items: center; font-size: 20px; background: var(--mist); }
.q-vids .v-nm { display: grid; gap: 4px; }
.q-vids .v-nm h4 { font-family: var(--f-text); font-size: 16px; font-weight: 500; letter-spacing: 0; display: flex; align-items: center; gap: 8px; }
.q-vids .v-badge { justify-self: start; display: inline-block; margin: 0; background: var(--wedgwood); color: var(--ink); font-size: 11px; padding: 2px 8px; }
.q-vids .v-badge i { font-style: normal; opacity: 0.6; }
.v-info { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--grey); background: none; font-size: 12px; line-height: 1; color: var(--grey); }
.q-vids .v-price { font-family: var(--f-brand); font-size: 14px; color: var(--grey); white-space: nowrap; padding-top: 2px; }
.q-vids .v-style { font-size: 13px; line-height: 1.65; color: var(--ink-soft, #3A4152); display: block; -webkit-line-clamp: unset; overflow: visible; }
.q-vids .v-links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; }
.v-vids { border: 0; background: none; padding: 0; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.v-wa { justify-self: start; }
.v-select { border: 1px solid var(--ink); background: none; min-height: 40px; font-size: 13px; }
.v-select:hover, .v-select.on { background: var(--ink); color: var(--paper); }
.v-opts { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.v-opts .t-label { margin-top: 4px; letter-spacing: 0.08em; text-transform: none; font-family: var(--f-text); }
.v-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; text-align: start; width: 100%; padding: 12px; border: 1px solid var(--line); background: none; font-size: 13px; }
.v-row.on { border-color: var(--ink); background: var(--mist); }
.v-l { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.v-m { display: grid; gap: 3px; }
.v-lab { font-weight: 500; }
.v-m ul { display: grid; gap: 2px; font-size: 12px; color: var(--grey); }
.v-m li::before { content: "· "; }
.v-p { font-family: var(--f-brand); white-space: nowrap; }
.radio, .check { flex: none; width: 15px; height: 15px; border: 1px solid var(--ink); margin-top: 2px; }
.radio { border-radius: 50%; }
.v-row.on .radio, .v-row.on .check { background: var(--ink); box-shadow: inset 0 0 0 3px var(--paper); }
.v-pph { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.v-pop { border: 0; padding: 28px; width: min(520px, calc(100vw - 32px)); background: var(--paper); color: var(--ink); }
.v-pop::backdrop { background: rgba(27,34,51,0.45); }
.v-pop[open] { display: grid; gap: 12px; }
.v-pop h4 { font-size: 18px; font-weight: 500; }
.v-pop p { font-size: 14px; line-height: 1.75; }
.v-pop-x { justify-self: end; }
.v-pop-img { width: 100%; height: auto; max-height: 60vh; object-fit: contain; }
.v-pop-list { display: grid; gap: 8px; }
@media (max-width: 760px) { .q-vids { grid-template-columns: 1fr; } }
/* schedule in two stages */
.q-stage { max-width: 1040px; margin-inline: auto; display: grid; gap: 14px; }
.q-stage + .q-stage { margin-top: clamp(32px, 4vw, 52px); }
.q-stage-t { font-family: var(--f-text); font-weight: 600; font-size: 15px; text-align: center; }
.q-stage-n { text-align: center; font-size: var(--small); margin-top: -6px; }
/* PDF lockup: one centred block, no negative tracking offsets (html2canvas renders them off-centre) */
.pdf-sheet .d-top { display: block; text-align: center; }
.pdf-sheet .d-mark { display: inline-grid; grid-template-columns: auto 1px auto; align-items: center; gap: 12px; }
.pdf-sheet .d-mark .w1 { margin: 0; letter-spacing: 0; word-spacing: 0; font-size: 26px; }
.pdf-sheet .d-mark .rule { margin: 0; height: 32px; width: 1px; }
.pdf-sheet .d-mark .w2 b { letter-spacing: 0; font-size: 9px; }
.pdf-sheet .d-mark .w2 i { letter-spacing: 0; font-size: 6.5px; }
.pdf-sheet .d-mark .sp { display: inline-flex; }
.pdf-sheet .d-mark .w1.sp { gap: 0.42em; }
.pdf-sheet .d-mark .w2 b.sp { gap: 0.45em; }
.pdf-sheet .d-mark .w2 i.sp { gap: 0.22em; }
.pdf-sheet .d-mark .w2 { justify-items: start; }
.pdf-sheet .d-mark .w1 { line-height: 1; }
.pdf-sheet .d-mark .w2 { line-height: 1.2; }
.q-stage .q-steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); max-width: calc(var(--n, 4) * 230px); margin-inline: auto; width: 100%; }
.q-steps.n5 { --n: 5; } .q-steps.n2 { --n: 2; } .q-steps.n3 { --n: 3; } .q-steps.n4 { --n: 4; }
@media (max-width: 760px) { .q-stage .q-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } }

/* ═══ v8.10 — personal lockup: FINE | NAME — PHOTOGRAPHY · ART · MOMENT · PEOPLE ═══ */
.wordmark .w2-name b { font-size: 10px; letter-spacing: 0.32em; }
.wordmark .w2-name i { letter-spacing: 0.24em; }
.pdf-sheet .d-top { display: flex; justify-content: center; padding-top: 6px; }
.pdf-sheet .d-mark { display: flex; align-items: stretch; gap: 16px; grid-template-columns: none; }
.pdf-sheet .d-mark .w1 { display: flex; align-items: center; gap: 0.36em; font-family: "Jost", Arial, sans-serif; font-weight: 300; font-size: 40px; line-height: 0.74; letter-spacing: 0; color: #1B2233; }
.pdf-sheet .d-mark .rule { width: 1px; height: auto; background: #1B2233; opacity: 0.75; }
.pdf-sheet .d-mark .w2 { display: flex; flex-direction: column; justify-content: center; gap: 7px; line-height: 1; }
.pdf-sheet .d-mark .w2 b { display: flex; gap: 0.34em; font-family: "Jost", Arial, sans-serif; font-weight: 400; font-size: 15px; letter-spacing: 0; color: #1B2233; }
.pdf-sheet .d-mark .w2 i { display: flex; gap: 0.2em; font-family: "Jost", Arial, sans-serif; font-style: normal; font-size: 7.5px; letter-spacing: 0; color: #686C76; }
.pdf-sheet .d-title { gap: 6px; padding-bottom: calc(12px * var(--k)); }
.pdf-sheet .d-eyebrow.sp { display: inline-flex; justify-content: center; gap: 0.32em; letter-spacing: 0; }
.pdf-sheet .d-title p { color: #3A4152; font-size: calc(13px * var(--k)); }
.pdf-sheet .d-mark { align-items: center; height: 46px; }
.pdf-sheet .d-mark .w1 { line-height: 1; height: 46px; position: relative; top: var(--fine-dy, 0px); }
.pdf-sheet .d-mark .rule { height: 46px; align-self: center; }
.pdf-sheet .d-mark { --fine-dy: -12px; }
.pdf-sheet .d-mark .rule { height: 30px; position: relative; top: 7px; }

/* ═══ v8.11 — the quote opens in steps ═══ */
.q-step { text-align: center; justify-items: center; }
.q-step-n { font-family: var(--f-brand); font-size: 11px; letter-spacing: 0.3em; color: var(--grey); }
.q-step .row { justify-content: center; }
.q-step .venue { display: grid; gap: 6px; font-size: var(--small); color: var(--grey); width: min(100%, 420px); text-align: start; }
.q-step .venue input { min-height: 44px; border: 0; border-bottom: 1px solid var(--ink); background: transparent; font: inherit; font-size: 16px; color: var(--ink); }
.q-step .venue input::placeholder { color: var(--grey); opacity: 1; }
.q-step .venue input:focus-visible, .q-step input[type=date]:focus-visible { outline: none; border-bottom-width: 2px; border-bottom-color: var(--wedgwood-deep); }
.q-err { color: #9B2C2C; font-size: var(--small); min-height: 0; }
.q-err:empty { display: none; }
#unlock { display: grid; gap: clamp(32px, 4vw, 56px); animation: unlock-in 700ms var(--ease) both; }
#unlock[hidden] { display: none; }
@keyframes unlock-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #unlock { animation: none; } }
.q-bar[hidden] { display: none; }
.pdf-sheet .d-meta { grid-template-columns: repeat(4, 1fr); }

/* ═══ v8.12 — artists alternate work ↔ portrait; After the day mockups ═══ */
.house .pic img.face { opacity: 0; transition: opacity 1100ms var(--ease); }
.house article.show-face .pic img.face, .house article:hover .pic img.face, .house article:focus-within .pic img.face { opacity: 1; }
.house .face-tag { position: absolute; z-index: 2; inset: auto 0 12px 0; text-align: center !important; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,0.5); opacity: 0; transition: opacity 900ms var(--ease); }
.house article.show-face .face-tag, .house article:hover .face-tag { opacity: 1; }
.house article:hover .pic img:first-child { transform: none; }
.house-acts { margin-top: 18px; }
.goods .img { background: #E9E4DC; }

/* ═══ v8.13 — home design pass: tighter rhythm, no clipped type ═══ */
body.home { --sec: clamp(72px, 8vw, 128px); }
body.home .sec-head { margin-bottom: clamp(28px, 3.4vw, 48px); }
body.home .statement { padding-block: clamp(64px, 7vw, 112px); }
.choose .words3 { font-size: clamp(30px, 4.6vw, 72px); max-width: 100%; flex-wrap: wrap; justify-content: center; }
.choose .words3 span { white-space: nowrap; }
.goods li > .link { justify-self: start; margin-top: 2px; }

/* ═══ v8.14 — performance + touch ═══ */
/* width/height attributes reserve space while loading; CSS sizing still wins (zero specificity) */
:where(img[width][height]) { height: auto; }
/* Touch: small text links get a 44px hit area without moving the layout (inline padding doesn't reflow lines) */
@media (pointer: coarse) {
  :is(.link, .v-links a, .foot a, .foot button, .hero .crew a, .q-links a, .lang a, .v-vids, .q-more summary, .testimonial summary, details summary) { padding-block: 12px; margin-block: -12px; }
  :is(.tabs a, .a-tabs a) { padding-block: 14px; }
}
/* films found on the live site */
.film-embed { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: #000; }
.ph video, .bts .person .ph video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
#studioFilm { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
#studioFilm .film-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#studioFilm .film-embed { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
#studioFilm .film-ctrl { position: absolute; z-index: 2; inset-inline-end: 16px; bottom: 16px; display: flex; gap: 10px; }

/* ═══ v8.15 — Journal story ═══ */
.s-cover { height: 72svh; min-height: 420px; overflow: hidden; background: var(--line); margin-top: var(--head-h); }
.s-cover img { width: 100%; height: 100%; object-fit: cover; animation: focus-pull 1600ms var(--ease) both; }
.s-article { max-width: 760px; margin-inline: auto; }
.s-head { display: grid; gap: 16px; justify-items: center; text-align: center; margin-bottom: clamp(36px, 4vw, 56px); }
.s-head h1 { line-height: 1.3; }
.s-head > a { text-decoration: none; }
.s-credit { font-size: var(--small); }
.s-credit a { text-underline-offset: 4px; }
.s-body { font-size: 18px; line-height: 1.9; }
.s-body h2 { font-family: "Assistant", var(--f-text); font-weight: 600; font-size: 22px; line-height: 1.4; margin: 44px 0 12px; }
.s-body h3 { font-weight: 600; font-size: 19px; margin: 30px 0 8px; }
.s-body p { margin: 0 0 18px; }
.s-body ul, .s-body ol { list-style: disc; padding-inline-start: 22px; margin: 0 0 18px; }
.s-body li { margin-bottom: 6px; }
.s-body a { text-underline-offset: 4px; }
.s-body blockquote { margin: 28px 0; padding-inline-start: 18px; border-inline-start: 2px solid var(--wedgwood-deep); font-size: 20px; }
.s-gallery { padding-bottom: var(--sec); }
/* preview index */
.preview main { max-width: 1040px; margin-inline: auto; padding: clamp(40px, 6vw, 80px) var(--m); display: grid; gap: 18px; }
.preview h1, .preview main > p { text-align: center; margin-inline: auto; }
.preview main > .t-label { text-align: center; }
.preview .pv { border: 1px solid var(--line); padding: 20px 24px; background: var(--paper); }
.preview .pv h2 { font-size: 13px; letter-spacing: 0.02em; text-transform: none; font-weight: 600; margin-bottom: 4px; }
.preview .pv ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 24px; margin-top: 10px; }
.preview .pv a { display: block; padding: 6px 0; font-size: 15px; text-decoration: none; border-bottom: 1px solid transparent; }
.preview .pv a:hover { border-bottom-color: var(--ink); }
@media (max-width: 600px) { .preview .pv ul { grid-template-columns: 1fr; } }

/* One step before WhatsApp: date (or not yet) + venue */
.wa-ask { border: 0; padding: clamp(28px, 4vw, 48px); width: min(520px, calc(100vw - 32px)); background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px rgba(27, 34, 51, 0.18); }
.wa-ask::backdrop { background: rgba(27, 34, 51, 0.45); }
.wa-ask form { display: grid; gap: 18px; }
.wa-ask h2 { margin: 0 0 6px; }
.wa-ask label { display: grid; gap: 6px; font-size: var(--small); color: var(--grey); }
.wa-ask label[hidden] { display: none; }
.wa-ask input[type=date], .wa-ask input[type=text] { font: inherit; font-size: 16px; color: var(--ink); padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; border-radius: 0; }
.wa-ask input:focus { outline: none; border-bottom-color: var(--ink); }
.wa-ask input:disabled { opacity: 0.35; }
.wa-ask .chk { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.wa-ask .err { color: #a33; min-height: 1em; margin: 0; font-size: var(--small); }
.wa-ask .acts { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.wa-ask .btn svg { width: 18px; height: 18px; fill: currentColor; margin-inline-end: 8px; }
.wa-ask .wa-x { position: absolute; top: 14px; inset-inline-end: 16px; font-size: 18px; text-decoration: none; }

/* ── The artists: the line-up ──────────────────────────────────────────────
   Every artist side by side, edge to edge across the page, in their own portrait. Hover or focus one: they
   widen and come forward in full colour, the others narrow and soften, and "Meet <name>" rises on the picture. */
.lineup { display: flex; gap: 3px; height: clamp(420px, 62vh, 700px); margin-top: clamp(28px, 3vw, 48px); }
.lu { flex: 1 1 0; min-width: 0; transition: flex-grow 900ms var(--ease), filter 900ms var(--ease); }
.lu-pic { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; overflow: hidden; background: var(--ink); cursor: pointer; }
.lu-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform 1400ms var(--ease); }
.lu-pic::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, rgba(27, 34, 51, 0.62), rgba(27, 34, 51, 0)); opacity: 0; transition: opacity 700ms var(--ease); }
.lu-name { position: absolute; z-index: 1; inset: auto 0 clamp(20px, 3vw, 40px) 0; display: grid; gap: 6px; justify-items: center; text-align: center !important; color: #fff; opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease), transform 900ms var(--ease); }
.lu-name .t-label { color: rgba(255, 255, 255, 0.82); }
.lu-name .nm { font-family: var(--f-brand); font-weight: 300; font-size: clamp(22px, 2.4vw, 40px); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.lineup:hover .lu, .lineup:focus-within .lu { filter: grayscale(0.55) brightness(0.92); }
.lineup .lu:hover, .lineup .lu:focus-within, .lineup .lu.on { flex-grow: 2.4; filter: none; }
.lu:hover .lu-pic img, .lu:focus-within .lu-pic img, .lu.on .lu-pic img { transform: scale(1.03); }
.lu:hover .lu-pic::after, .lu:focus-within .lu-pic::after, .lu.on .lu-pic::after,
.lu:hover .lu-name, .lu:focus-within .lu-name, .lu.on .lu-name { opacity: 1; transform: none; }
.lu-pic:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
@media (hover: none) {
  .lu-name { opacity: 1; transform: none; }
  .lu-pic::after { opacity: 1; }
  .lu:not(.on) .lu-name .nm { font-size: 13px; letter-spacing: 0.08em; white-space: normal; }
  .lu:not(.on) .lu-name .t-label { display: none; }
  .lu.on .lu-name .nm { font-size: clamp(17px, 5vw, 24px); white-space: normal; padding: 0 8px; }
}
@media (max-width: 700px) { .lineup { height: 64vh; gap: 2px; } }
@media (prefers-reduced-motion: reduce) { .lu, .lu-pic img, .lu-name, .lu-pic::after { transition: none; } }

/* ── The artists: the crew ────────────────────────────────────────────────
   Cut-out portraits standing together in front of a faint FINE, like a group photo. Hover one: they come
   forward and the rest step back; their name appears above the group. */
.crewup { position: relative; margin-top: clamp(20px, 3vw, 40px); padding-top: clamp(70px, 9vw, 130px); overflow: hidden; }
.crewup::before { content: "FINE"; position: absolute; inset: 0 0 auto 0; text-align: center !important; font-family: var(--f-display); font-weight: 300; font-size: clamp(120px, 26vw, 420px); line-height: 0.9; letter-spacing: 0.06em; color: transparent; -webkit-text-stroke: 1px var(--wedgwood); opacity: 0.28; pointer-events: none; direction: ltr; }
.crewup-meet { position: absolute; z-index: 3; inset: clamp(10px, 2vw, 28px) 0 auto 0; display: grid; gap: 4px; justify-items: center; text-align: center !important; opacity: 0; transition: opacity 400ms var(--ease); pointer-events: none; }
.crewup.naming .crewup-meet { opacity: 1; }
.crewup-meet .nm { font-family: var(--f-brand); font-weight: 300; font-size: clamp(22px, 3vw, 44px); letter-spacing: 0.14em; text-transform: uppercase; }
.crewup-row { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-start; height: calc(var(--s, 0.6) * 940px); max-height: 640px; direction: ltr; }
.cw { position: relative; margin-inline: calc(var(--s, 0.6) * -16px); transition: opacity 600ms var(--ease), filter 600ms var(--ease); }
.cw button { display: block; padding: 0; border: 0; background: none; cursor: pointer; }
.cw img { display: block; height: auto; transform-origin: 50% 20%; transition: transform 700ms var(--ease); }
.crewup-row:hover .cw, .crewup-row:focus-within .cw, .crewup-row:has(.on) .cw { opacity: 0.45; filter: blur(0.3px); }
.crewup-row .cw:hover, .crewup-row .cw:focus-within, .crewup-row .cw.on { opacity: 1; filter: none; z-index: 2; }
.cw:hover img, .cw:focus-within img, .cw.on img { transform: scale(1.06); }
.cw button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .cw, .cw img, .crewup-meet { transition: none; } }

/* The meet card: one person, light, nothing to wade through */
.meet { border: 0; padding: 0; width: min(1180px, 100vw - 32px); max-height: min(860px, 100vh - 32px); background: var(--paper); color: var(--ink); box-shadow: 0 40px 120px rgba(27, 34, 51, 0.28); }
.meet::backdrop { background: rgba(27, 34, 51, 0.55); }
.meet-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: min(760px, 100vh - 32px); }
.meet-face { background: var(--ink); }
.meet-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.meet-tx { position: relative; display: grid; align-content: center; gap: 14px; padding: clamp(32px, 5vw, 72px); overflow-y: auto; }
.meet-nm { font-family: var(--f-brand); font-weight: 300; font-size: clamp(34px, 4.4vw, 64px); line-height: 1.02; letter-spacing: 0.1em; text-transform: uppercase; }
.meet .sig { font-size: clamp(28px, 2.6vw, 40px); color: var(--grey); margin-top: -8px; line-height: 1.1; }
.meet-work { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0 6px; }
.meet-work a { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--line); }
.meet-work img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.meet-work a:hover img { transform: scale(1.04); }
.meet .acts { gap: 12px 24px; }
.meet-x { position: absolute; top: 16px; inset-inline-end: 20px; font-size: 20px; text-decoration: none; }
.meet-nav { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--small); }
@media (max-width: 760px) {
  .meet { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; }
  .meet-in { grid-template-columns: 1fr; grid-template-rows: 44vh auto; min-height: 100%; }
  .meet-tx { align-content: start; padding: 24px 16px 32px; }
  .meet-x { position: fixed; top: 12px; inset-inline-end: 12px; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
}

/* The artist page ends its frames with their Instagram, for everything else */
.ig-cta { margin-top: clamp(28px, 3vw, 44px); }
.ig-cta .btn { gap: 10px; }
.ig-cta .ig-at { color: var(--grey); font-size: var(--small); }

/* "New on Instagram": their latest posts, square, three across */
.ig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 1120px; margin-inline: auto; }
.ig-grid a { display: block; aspect-ratio: 1; overflow: hidden; background: var(--line); }
.ig-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.ig-grid a:hover img { transform: scale(1.04); }

/* The hero from Instagram: three upright posts across a wide screen (one band, nothing cropped), one on a phone */
.hero.ig { height: min(100svh, calc(100vw / 3 * 1.25)); min-height: 560px; }
.hero.ig .slides .tri { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; opacity: 0; transition: opacity 1800ms var(--ease); }
.hero.ig .slides .tri.on { opacity: 1; }
.hero.ig .slides .tri img { position: static; width: 100%; height: 100%; object-fit: cover; opacity: 1; transform: none; transition: none; }
@media (max-width: 700px) {
  .hero.ig { height: calc(100vw * 1.25); min-height: 0; }
  .hero.ig .slides .tri { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hero.ig .slides .tri { transition: none; } }

/* ── Phones: everything on the centre line (Adi, 2026-10-26 — most couples open the quote on a phone) ── */
@media (max-width: 760px) {
  /* the old compact-row layout's areas no longer apply to the cards: one column, full width */
  .q-vids > li > * { grid-area: auto; }
  .q-vids .v-head { grid-template-columns: 52px minmax(0, 1fr); }
  .q-vids .v-price { grid-column: 1 / -1; }
  /* the quote's own header: the lockup in the middle */
  /* headings, eyebrows, the welcome, the album and magazine texts, the signature: centred */
  .quote-page .q-two .tx { text-align: center; justify-items: center; }
  .quote-page .q-two .tx .t-label, .quote-page .q-two .tx h2, .quote-page .q-two .tx p { text-align: center !important; }
  .quote-page .q-two .tx .sig-img, .quote-page .q-two .tx .sig { margin-inline: auto; display: block; }
  .quote-page .sec-head, .quote-page .sec-head .side { text-align: center; justify-items: center; }
  /* the closing band at the bottom */
  .quote-page .foot, .quote-page .foot .cols > div { text-align: center; justify-items: center; }
  .quote-page .foot .legal, .quote-page .foot .legal > * { justify-content: center; text-align: center; }
  .quote-page .foot .legal nav { display: flex; flex-wrap: wrap; gap: 8px 18px; width: 100%; }
  .quote-page .foot .legal > span { width: 100%; }
}

/* ── Phones: the header with the wordmark in the middle — menu on one side, the availability button on the other ── */
@media (max-width: 900px) {
  .bar:not(.solo) { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; }
  .bar:not(.solo) .menu-btn { justify-self: start; }
  .bar:not(.solo) .wordmark { justify-self: center; grid-column: 2; }
  .bar:not(.solo) .end { justify-self: end; grid-column: 3; margin: 0; }
  .bar.solo { justify-content: center; }                                   /* quotes, personal pages, the forms */
  .bar.solo .end { position: absolute; inset-inline-end: var(--m); margin: 0; }
  #h-t { text-align: center; }                                             /* About: "The house" */
}
@media (max-width: 760px) {   /* the Instagram button may take two lines on a phone: the words, then the handle */
  .ig-cta .btn { white-space: normal; flex-wrap: wrap; justify-content: center; text-align: center; max-width: 100%; height: auto; padding-block: 10px; row-gap: 2px; }
  .ig-cta .ig-at { flex-basis: 100%; }
}
/* the footer's script line must not push past a 1024-px screen */
.foot .cols > div { min-width: 0; }
.foot .sig { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }