/* Daylight: a bright gallery wall. One light look on every device (no dark theme).
   Photos hang whole, in even rows that line up with the text edges and always fit
   the screen; nothing is pushed to one side. Type is light and set small. */
:root {
  color-scheme: light;
  --paper: #fcfbf8;     /* page, near white */
  --panel: #f4f1ec;     /* pale stone band */
  --ink: #2b2927;       /* text */
  --ink-2: #736c64;     /* quiet text: 5.0 : 1 on the page, 4.55 : 1 on the beige panels (WCAG AA), was #7b746c (Nov 10 2026) */
  --line: #e6e0d7;      /* hairlines */
  --accent: #9a8874;    /* small marks, hover */

  --serif: "Cormorant", "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --sans: "Mulish", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --t-hero: clamp(44px, 5.6vw, 88px);
  --t-1: clamp(38px, 4.2vw, 64px);
  --t-2: clamp(30px, 2.8vw, 42px);
  --t-3: clamp(22px, 1.8vw, 27px);
  --t-body: 16px;
  --t-small: 14px;
  --t-label: 10.5px;

  --margin: clamp(16px, 4vw, 64px);
  --max: 100%;            /* sections run as wide as the header, edge to edge inside the page margins */
  --gap: clamp(8px, 1vw, 14px);
  --section: clamp(96px, 11vw, 168px);
  --head-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-variant-numeric: lining-nums; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 24px); background: var(--paper); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--t-body)/1.75 var(--sans);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 60; background: var(--paper);
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
::selection { background: var(--panel); }

/* page gutter, and a centered measure everything aligns to */
.wrap {
  padding-left: max(var(--margin), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margin), env(safe-area-inset-right, 0px));
}
.measure { max-width: var(--max); margin-inline: auto; }

/* ---------- type ---------- */
h1, h2, h3 {
  margin: 0; font-family: var(--serif); font-weight: 300;
  line-height: 1.06; letter-spacing: -0.005em; text-wrap: balance;
}
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-1); }
h3 { font-size: var(--t-3); line-height: 1.2; font-weight: 400; }
h1 em, h2 em, h3 em { font-style: italic; }
p { margin: 0; max-width: 60ch; }
.lede { font-size: clamp(16.5px, 1.2vw, 18px); color: var(--ink); }
.quiet { color: var(--ink-2); }
.eyebrow {
  font: 600 var(--t-label)/1.6 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--ink-2);
  max-width: none;
}
.names { font: italic 400 var(--t-2)/1.1 var(--serif); }
.place { font: 600 var(--t-label)/1.6 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2); }
.num { font-variant-numeric: lining-nums tabular-nums; }

/* text link: small caps with a thin rule that draws in */
.link {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink);
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
  transition: border-color .4s ease, color .4s ease;
}
.link::after { content: ""; width: 18px; height: 1px; background: currentColor; transition: width .45s cubic-bezier(.2,.7,.2,1); }
.link:hover { border-color: var(--ink); }
.link:hover::after { width: 30px; }

/* the one button: a thin rectangle */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 17px 38px; border: 1px solid var(--ink);
  font: 600 11px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink); background: transparent;
  transition: background-color .35s ease, color .35s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.solid { background: var(--ink); color: var(--paper); }
.btn.solid:hover { background: transparent; color: var(--ink); }

/* ---------- photographs: always whole, never taller than the screen ---------- */
.ph { margin: 0; overflow: hidden; background: var(--panel); }
.ph img { width: 100%; height: auto; aspect-ratio: var(--r, 2 / 3); object-fit: cover; }
.r-23 { --r: 2 / 3; } .r-34 { --r: 3 / 4; } .r-45 { --r: 4 / 5; }
.zoom img, a .ph img, button .ph img { transition: opacity .5s ease; }
a:hover .ph img, button:hover .ph img { opacity: .9; }

/* even rows: 3 across or 2 across, equal sizes, edges line up with the text */
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.row4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
/* widths that keep a row's photos inside one screen height */
.fit-3 { max-width: min(var(--max), 178vh); margin-inline: auto; }   /* 3 across at 2:3: as wide as the header on screens up to 16:9, never taller than the screen */
.fit-2 { max-width: min(var(--max), 104vh); margin-inline: auto; }   /* 2 across at 2:3 */
.fit-2w { max-width: min(var(--max), 124vh); margin-inline: auto; }  /* 2 across at 4:5 */

/* ---------- header ---------- */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--paper);
  transition: box-shadow .35s ease;
}
.top.lined { box-shadow: 0 1px 0 var(--line); }
.top-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--head-h); }
.nav { display: flex; gap: clamp(20px, 2.6vw, 44px); align-items: center; }
.nav.right { justify-content: flex-end; }
.nav a, .menu-btn {
  font: 600 var(--t-label)/1 var(--sans); letter-spacing: .26em; text-transform: uppercase;
  padding-block: 8px; border-bottom: 1px solid transparent; transition: border-color .3s ease;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--ink); }
.nav a.btn { padding: 13px 22px; border: 1px solid var(--ink); }
.nav a.btn:hover { border-color: var(--ink); }
.mark { display: block; justify-self: center; }
.mark img { height: 30px; width: auto; }
.menu-btn { display: none; justify-self: end; }
.sheet .menu-btn { display: block; }

.sheet {
  position: fixed; inset: 0; z-index: 80; background: var(--paper); color: var(--ink);
  display: grid; grid-template-rows: auto 1fr auto;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
}
.sheet-head { display: flex; justify-content: space-between; align-items: center; height: 68px; }
.sheet-head .mark { justify-self: start; }
.sheet-head .mark img { height: 22px; }
.sheet nav { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; text-align: center; }
.sheet nav a { font: 300 44px/1.25 var(--serif); }
.sheet nav .subs { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 18px; margin: 0 0 14px; }
.sheet nav .subs a { font: italic 400 21px/1.5 var(--serif); color: var(--ink-2); }
.sheet-foot { display: flex; justify-content: center; }

/* ---------- home ---------- */
.tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tri .ph img { aspect-ratio: 3 / 4; max-height: calc(100svh - var(--head-h) - 24px); }
.intro { padding-block: clamp(80px, 9vw, 140px) var(--section); text-align: center; display: grid; justify-items: center; gap: 28px; }
.intro h1 { max-width: 15em; }
.intro p { max-width: 50ch; }

.sec-head { text-align: center; display: grid; justify-items: center; gap: 16px; padding-bottom: clamp(48px, 5vw, 80px); }
.sec-head p:not(.eyebrow) { color: var(--ink-2); }

.weddings { display: grid; gap: clamp(110px, 12vw, 180px); padding-bottom: var(--section); }
.wedding-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line);
}
.wedding-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px 40px; flex-wrap: wrap; margin-top: 26px; }
.wedding-foot p { color: var(--ink-2); max-width: 52ch; }

.band { background: var(--panel); }
.quote { padding-block: var(--section); text-align: center; display: grid; justify-items: center; gap: 26px; }
.quote blockquote { margin: 0; }
.quote blockquote p { font: italic 300 clamp(30px, 3.2vw, 48px)/1.25 var(--serif); max-width: 24ch; text-wrap: balance; }

.sessions-strip { padding-block: var(--section); }
.s-card { display: grid; gap: 14px; align-content: start; }
.s-card .ph img { aspect-ratio: 4 / 5; }
.s-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.s-card h3 { font-size: clamp(24px, 2vw, 30px); font-weight: 300; }
.s-card .place { white-space: nowrap; }
.s-card p { color: var(--ink-2); font-size: var(--t-small); max-width: 32ch; }

.call { padding-block: var(--section); text-align: center; display: grid; justify-items: center; gap: 26px; }
.call p:not(.eyebrow) { color: var(--ink-2); max-width: 46ch; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding-block: 72px 32px; text-align: center; }
.foot .mark { display: inline-block; }
.foot .mark img { height: 40px; }
.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; margin: 34px 0 22px; }
.foot-nav a { font: 600 var(--t-label)/1.6 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.foot-nav a:hover { color: var(--accent); }
.foot-contact { color: var(--ink-2); font-size: var(--t-small); margin-inline: auto; max-width: none; }
.fine { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2); max-width: none; }

/* ---------- inner page heads ---------- */
.page-head { padding-block: clamp(64px, 8vw, 128px) clamp(56px, 6vw, 96px); text-align: center; display: grid; justify-items: center; gap: 24px; }
.page-head p:not(.eyebrow) { max-width: 54ch; }
.page-head .facts-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; }
.tabs a { font: italic 400 22px/1.4 var(--serif); color: var(--ink-2); border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.tabs a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- weddings page ---------- */
.gallery { display: grid; gap: var(--gap); padding-bottom: var(--section); max-width: min(var(--max), 190vh); margin-inline: auto; }
.jrow { display: flex; gap: var(--gap); }
.jrow > .ph { flex-grow: calc(var(--r)); flex-shrink: 1; flex-basis: 0; min-width: 0; }
.jrow > .ph img { aspect-ratio: var(--r); }

.stories { padding-bottom: var(--section); }
.story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(56px, 6vw, 96px) var(--gap); }
.story { display: grid; gap: 14px; align-content: start; justify-items: start; }
.story > button { width: 100%; }
.story .ph img { aspect-ratio: 4 / 5; }
.story-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; width: 100%; padding-top: 6px; }
.story p { color: var(--ink-2); }

.included { padding-block: var(--section); }
.inc-list { max-width: 980px; margin-inline: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); }
.inc-list > div { padding: 22px 0 24px; border-top: 1px solid var(--line); }
.inc-list dt { font: italic 400 var(--t-3)/1.25 var(--serif); margin-bottom: 6px; }
.inc-list dd { margin: 0; color: var(--ink-2); font-size: 15px; }
.price { text-align: center; display: grid; justify-items: center; gap: 14px; margin-top: clamp(56px, 6vw, 96px); }
.price .amount { font: 300 clamp(60px, 6vw, 92px)/1 var(--serif); font-variant-numeric: lining-nums; }

/* ---------- sessions page ---------- */
.session { padding-bottom: var(--section); }
.session .wedding-head h2 { font-size: var(--t-1); }
.session-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 96px); margin-top: 34px; align-items: start; }
.session-body .copy { display: grid; gap: 22px; justify-items: start; }
.facts { margin: 0; display: grid; }
.facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0 14px; border-top: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 1px solid var(--line); }
.facts dt { font: 600 var(--t-label)/2 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2); }
.facts dd { margin: 0; text-align: right; font-size: 15px; }
.credit { text-align: center; font-size: 12.5px; color: var(--ink-2); max-width: none; padding-bottom: 56px; }

/* ---------- about page ---------- */
.about { padding-block: clamp(28px, 3.5vw, 48px) var(--section); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 112px); align-items: center; }
.about .ph img { max-height: calc(100svh - var(--head-h) - 2 * clamp(28px, 3.5vw, 48px)); width: auto; max-width: 100%; margin-inline: auto; }
.about .ph { background: none; }
.about-text { display: grid; gap: 22px; justify-items: start; }
.about-text p:not(.eyebrow):not(.lede) { color: var(--ink-2); }
.approach { padding-block: var(--section); }
.approach .row3 { gap: clamp(32px, 4vw, 72px); }
.approach h3 { font-size: var(--t-2); font-weight: 300; margin-bottom: 14px; }
.approach .row3 p { color: var(--ink-2); }
.about-pair { padding-block: var(--section); }

/* ---------- inquire page ---------- */
.inq { padding-bottom: var(--section); }
.mail { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 16px; }
.mail code { font: italic 400 24px/1.3 var(--serif); user-select: all; }
.mail button { font: 600 var(--t-label)/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2); padding: 6px 0; border-bottom: 1px solid var(--line); }
.mail button:hover { color: var(--ink); border-color: var(--ink); }
.form, .thanks { max-width: 760px; margin-inline: auto; }
.form { display: grid; gap: 38px; }
.field { display: grid; gap: 6px; }
.field label, .field legend { font: 600 var(--t-label)/1.6 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); padding: 0; }
.field input[type="text"], .field input[type="email"], .field input[type="date"], .field textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent;
  color: var(--ink); padding: 8px 0 12px; font: 400 23px/1.35 var(--serif); transition: border-color .3s ease;
}
.field input::placeholder, .field textarea::placeholder { color: #a8a199; font-style: italic; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.field textarea { resize: vertical; min-height: 130px; }
.field input[type="date"] { min-height: 52px; }
.pairf { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.datef { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: end; }
.check { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-small); color: var(--ink-2); padding-bottom: 14px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--ink); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.chips label { position: relative; cursor: pointer; text-transform: none; letter-spacing: 0; }
.chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chips span { display: inline-block; padding: 10px 20px; border: 1px solid var(--line); font: 400 19px/1 var(--serif); color: var(--ink); transition: background-color .2s, color .2s, border-color .2s; }
.chips input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chips input:focus-visible + span { outline: 1px solid var(--ink); outline-offset: 3px; }
.chips label:hover span { border-color: var(--ink); }
.err { color: #9a4a32; font-size: 13px; }
.err:empty { display: none; }
.form-foot { display: grid; justify-items: center; gap: 16px; text-align: center; padding-top: 8px; }
.form-foot p { font-size: 12.5px; color: var(--ink-2); }
.thanks { display: grid; justify-items: center; gap: 22px; text-align: center; padding-block: 24px 40px; }

/* ---------- photo viewer, light ---------- */
.viewer {
  position: fixed; inset: 0; z-index: 100; background: rgba(252, 251, 248, .985); color: var(--ink);
  display: grid; grid-template-rows: auto 1fr auto;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(var(--margin), env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(var(--margin), env(safe-area-inset-left, 0px));
}
.viewer-top, .viewer-bot { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; }
.viewer-top p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; max-width: none; }
.viewer-top em { font: italic 400 24px/1.2 var(--serif); }
.viewer button { font: 600 var(--t-label)/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; padding: 14px 0; }
.viewer button:hover { color: var(--accent); }
.viewer-stage { position: relative; min-height: 0; }
.viewer-stage img {
  position: absolute; inset: 8px 0; margin: auto;
  max-width: 100%; max-height: calc(100% - 16px); width: auto; height: auto;
  opacity: 0; transition: opacity .4s ease;
}
.viewer-stage img.on { opacity: 1; }
.viewer-stage .hit { position: absolute; top: 0; bottom: 0; width: 38%; }
.viewer-stage .hit.prev { left: 0; cursor: w-resize; }
.viewer-stage .hit.next { right: 0; cursor: e-resize; }
.count { font: 400 13px/1 var(--sans); letter-spacing: .16em; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.viewer-bot .arrows { display: flex; gap: 30px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .row4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
}
@media (max-width: 860px) {
  :root { --head-h: 64px; }
  .top-in { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .mark { justify-self: start; }
  .mark img { height: 22px; }
  .menu-btn { display: block; }

  .tri { grid-template-columns: 1fr; }
  .tri .ph:not(.lead) { display: none; }
  .tri .ph img { aspect-ratio: 4 / 5; max-height: 78svh; }

  /* three across becomes one large, then two beside each other */
  .row3.photos { grid-template-columns: 1fr 1fr; }
  .row3.photos > :first-child { grid-column: 1 / -1; }
  .approach .row3 { grid-template-columns: 1fr; gap: 40px; }

  .wedding-foot { flex-direction: column; align-items: flex-start; }

  .gallery { display: block; columns: 2; column-gap: 8px; }
  .gallery .jrow { display: contents; }
  .gallery .ph { break-inside: avoid; margin-bottom: 8px; display: block; }

  .story-grid { grid-template-columns: 1fr; }
  .inc-list { grid-template-columns: 1fr; }
  .session-body { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
  .about .ph img { max-height: 72svh; }
}
@media (max-width: 560px) {
  .row4 { gap: 36px 10px; }
  .s-card-head { flex-direction: column; gap: 4px; }
  .pairf, .datef { grid-template-columns: 1fr; }
  .datef .check { padding-bottom: 0; }
  .fine { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Sections from wedding.lenaplotnikova.com, set in the Daylight style
   ===================================================================== */
.btn .arw { width: 22px; height: 10px; margin-left: 12px; fill: none; stroke: currentColor; }
.sec { padding-block: var(--section); }
.sec.panel { background: var(--panel); }
.price-line { text-align: center; margin-top: 40px; display: grid; justify-items: center; gap: 18px; }

/* ---------- Meet Lena ---------- */
.meet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 112px); align-items: center; }
.meet .ph { background: none; }
.meet .ph img { max-height: calc(100svh - var(--head-h) - 64px); width: auto; max-width: 100%; margin-inline: auto; }
.meet-text { display: grid; gap: 22px; justify-items: start; }
.meet-text h2 { font-size: var(--t-1); max-width: 11em; }
.meet-text .lede { font: italic 400 clamp(22px, 1.9vw, 28px)/1.3 var(--serif); }
.meet-text .body { color: var(--ink-2); }
.facts3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 620px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts3 li { display: grid; gap: 8px; padding: 20px 0 20px 20px; border-left: 1px solid var(--line); list-style: none; }
.facts3 li:first-child { padding-left: 0; border-left: 0; }
.facts3 b { font: 300 clamp(40px, 3.8vw, 56px)/1 var(--serif); font-variant-numeric: lining-nums; }
.facts3 span { font: 600 var(--t-label)/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
ul.facts3 { margin: 0; padding: 0; }

/* ---------- Real weddings: tiles with names ---------- */
.tiles { display: grid; gap: clamp(36px, 4vw, 56px) var(--gap); }
.tile { margin: 0; display: grid; gap: 12px; color: inherit; }
.tile .ph img { aspect-ratio: 3 / 4; }
.tile .tile-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.tile .tile-cap em { font: italic 400 21px/1.2 var(--serif); }
.tile:hover img { opacity: .9; }

/* ---------- In print ---------- */
.print-fig { margin: 0 auto; max-width: min(1240px, 118vh); }
.print-fig img { width: 100%; height: auto; }
.print-fig figcaption { margin-top: -6%; position: relative; text-align: center; }
.press { margin-top: clamp(64px, 7vw, 104px); }
.press-label { display: flex; align-items: center; justify-content: center; gap: 22px; }
.press-label::before, .press-label::after { content: ""; width: min(120px, 14vw); height: 1px; background: var(--line); }
.press ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 36px 60px; max-width: 1180px; margin: 40px auto 0; padding: 0; list-style: none; }
.press img { width: var(--w); height: auto; max-width: none; opacity: .78; }

/* ---------- Pricing ---------- */
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: miter; }
.pc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 14px 0 0; margin: 0; list-style: none; }
.pc-card { position: relative; display: flex; flex-direction: column; padding: 34px clamp(22px, 2.2vw, 32px) clamp(22px, 2.2vw, 32px); border: 1px solid var(--line); background: var(--paper); }
.pc-card.is-top { background: var(--panel); border-color: var(--panel); }
.pc-flag { position: absolute; top: 0; left: clamp(22px, 2.2vw, 32px); translate: 0 -50%; padding: 8px 12px; background: var(--ink); color: var(--paper); font: 600 var(--t-label)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.pc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pc-name { font: 400 clamp(26px, 2.2vw, 32px)/1.1 var(--serif); }
.pc-hours { margin-top: 10px; }
.pc-price { display: grid; justify-items: end; gap: 8px; }
.pc-num { font: 300 clamp(36px, 3.2vw, 50px)/.9 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.pc-tax { font: 600 var(--t-label)/1 var(--sans); letter-spacing: .14em; color: var(--ink-2); }
.pc-pts { display: grid; gap: 11px; margin: 28px 0 32px; padding: 24px 0 0; border-top: 1px solid var(--line); list-style: none; }
.pc-pts li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.35; }
.pc-pts .ico { color: var(--accent); }
.is-top .pc-pts .ico { color: var(--ink); }
.pc-card .btn { margin-top: auto; width: 100%; }
.custom { display: grid; grid-template-columns: minmax(220px, auto) minmax(0, 1fr) auto; align-items: center; gap: 16px clamp(24px, 3vw, 56px); margin-top: 14px; padding: 24px clamp(22px, 2.2vw, 32px); background: var(--panel); }
.custom h3 { font: 400 clamp(24px, 2vw, 30px)/1.1 var(--serif); display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.custom h3 em { color: var(--ink-2); }
.custom ul { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 0; padding: 0; list-style: none; }
.custom li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; line-height: 1.35; }
.custom .ico { color: var(--accent); }

.inc { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(32px, 5vw, 96px); margin-top: 14px; padding: clamp(32px, 4vw, 64px) clamp(22px, 3.2vw, 56px); background: var(--panel); }
.inc-bg { position: absolute; left: 0; bottom: 0; width: 48%; height: 100%; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 110% at 0% 100%, #000 0%, rgba(0,0,0,.85) 25%, transparent 64%);
          mask-image: radial-gradient(120% 110% at 0% 100%, #000 0%, rgba(0,0,0,.85) 25%, transparent 64%); }
.inc-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 100%; }
.inc-head, .inc-list2 { position: relative; }
.inc-head { display: grid; gap: 14px; align-content: start; }
.inc-head h3 { font: 400 var(--t-2)/1.1 var(--serif); max-width: 9em; }
.inc-head p { color: var(--ink-2); font-size: 15px; max-width: 30ch; }
.inc-list2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.inc-list2 li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; padding-block: 16px; border-top: 1px solid var(--line); }
.inc-list2 li:nth-child(-n + 2) { border-top-color: var(--ink); }
.inc-list2 .ico { width: 28px; height: 28px; padding: 5px; background: var(--ink); color: var(--paper); stroke-width: 1.8; }
.inc-list2 b { display: block; font: 400 20px/1.25 var(--serif); }
.inc-list2 span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }

.book { margin-top: clamp(80px, 8vw, 128px); }
.book-head { display: grid; justify-items: center; gap: 12px; text-align: center; margin-bottom: clamp(36px, 4vw, 56px); }
.book-head p:not(.eyebrow) { font: italic 400 clamp(26px, 2.4vw, 38px)/1.15 var(--serif); }
.tl { --node: 40px; --when: 28px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.tl li { position: relative; display: grid; justify-items: center; align-content: start; text-align: center; padding-inline: clamp(8px, 1.2vw, 16px); }
.tl li:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--when) + var(--node) / 2); left: 50%; width: 100%; height: 1px; background: var(--line); }
.tl-when { height: var(--when); font: 600 var(--t-label)/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.tl-node { position: relative; z-index: 1; display: grid; place-items: center; width: var(--node); height: var(--node); border: 1px solid var(--ink); background: var(--paper); font: 400 15px/1 var(--serif); font-variant-numeric: lining-nums; }
.tl-t { margin: 18px 0 6px; font: 400 22px/1.2 var(--serif); }
.tl-d { max-width: 17em; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.book-cta { display: flex; justify-content: center; margin-top: clamp(40px, 4vw, 56px); }

/* ---------- Feel everything. Miss nothing. ---------- */
.feel { position: relative; overflow: hidden; height: min(88svh, 960px); min-height: 480px; background: #2b2927; }
.feel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.feel p { position: absolute; inset: 0 50% 0 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: var(--margin); text-align: center; max-width: none;
  font: 300 clamp(40px, 4.8vw, 78px)/1.05 var(--serif); color: #fff; text-wrap: balance; }
.feel p em { color: #cfc6bb; }

/* ---------- Good to know ---------- */
.faq-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); max-width: 1180px; margin-inline: auto; }
.faq-col { border-top: 1px solid var(--line); }
.faq-cols + .faq-cols { margin-top: 0; }
.faq-cols + .faq-cols .faq-col { border-top: 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; cursor: pointer; list-style: none; font: 400 21px/1.3 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 13px; height: 13px; background:
  linear-gradient(var(--ink), var(--ink)) center / 13px 1px no-repeat,
  linear-gradient(var(--ink), var(--ink)) center / 1px 13px no-repeat; transition: transform .3s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--ink-2); max-width: 58ch; }
.faq-more { display: flex; justify-content: center; margin-top: 40px; }

/* ---------- the date check ---------- */
.ct { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 7vw, 120px); align-items: start; }
.ct-side { display: grid; gap: 22px; justify-items: start; }
.ct-side h2 { font-size: var(--t-1); }
.ct-lena { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; }
.ct-lena img { width: 56px; height: 56px; object-fit: cover; object-position: 50% 14%; border-radius: 50%; }
.ct-lena p { display: grid; gap: 2px; }
.ct-lena b { font: 400 20px/1.2 var(--serif); }

.qf { border: 1px solid var(--line); background: var(--paper); padding: clamp(24px, 3vw, 44px); display: grid; gap: 22px; }
.qf-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.qf-bar { height: 1px; background: var(--line); position: relative; margin-top: -10px; }
.qf-bar span { position: absolute; inset: 0 auto 0 0; width: 14%; background: var(--ink); transition: width .4s ease; }
.qf-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 16px; }
.qf-step:focus { outline: none; }
.qf-q { font: 300 clamp(30px, 2.8vw, 42px)/1.12 var(--serif); padding: 0; margin-bottom: 4px; }
.qf-q em { font-style: italic; }
.qf-sub { color: var(--ink-2); font-size: 15px; }
.qf-hint, .qf-why { color: var(--ink-2); font-size: 13px; }
.cards { display: grid; gap: 8px; }
.card { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.card:hover { border-color: var(--ink); }
.card input { position: absolute; opacity: 0; pointer-events: none; }
.card:has(input:checked) { border-color: var(--ink); background: var(--panel); }
.card:has(input:focus-visible) { outline: 1px solid var(--ink); outline-offset: 3px; }
.card-txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.card-txt b { font: 400 21px/1.2 var(--serif); }
.card-txt b small { margin-left: 10px; font: 600 var(--t-label)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.card-txt span { font-size: 13.5px; color: var(--ink-2); }
.card-price { font: 300 24px/1 var(--serif); font-variant-numeric: lining-nums; white-space: nowrap; }
.card-price small { font: 600 9.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-right: 6px; }
.card-go { width: 18px; height: 18px; fill: none; stroke: var(--ink-2); stroke-width: 1.4; }
.qf .field input[type="text"], .qf .field input[type="email"], .qf .field input[type="tel"], .qf .field input[type="date"] {
  width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink);
  padding: 8px 0 12px; font: 400 23px/1.35 var(--serif); }
.qf .field input:focus { outline: none; border-bottom-color: var(--ink); }
.qf .field input:disabled { opacity: .4; }
.opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-2); margin-left: 6px; }
.chip { display: inline-flex; position: relative; cursor: pointer; width: fit-content; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 9px 16px; border: 1px solid var(--line); font-size: 13.5px; transition: background-color .2s, color .2s, border-color .2s; }
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 1px solid var(--ink); outline-offset: 3px; }
.qf .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.qf-day { font-size: 13.5px; color: var(--ink-2); min-height: 1.2em; }
.qf-recap { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 12px 14px; background: var(--panel); font-size: 14px; }
.qf-recap button { font: 600 var(--t-label)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.qf-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); }
.qf-consent input { margin-top: 3px; accent-color: var(--ink); }
.qf-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 6px; }
.qf-back { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.qf-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.qf-nav .btn { margin-left: auto; }
.qf-assure { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 16px; }
.qf-err { color: #9a4a32; font-size: 13px; }
.qf-err[hidden] { display: none; }
.qf.is-steps .qf-step[hidden] { display: none !important; }
.qf-done { display: grid; gap: 18px; justify-items: start; }
.qf-done h3 { font: 300 var(--t-2)/1.15 var(--serif); }

@media (max-width: 1080px) {
  .tl { grid-template-columns: 1fr; }
  .tl li { grid-template-columns: var(--node) 1fr; column-gap: 16px; justify-items: start; text-align: left; padding: 0 0 18px; }
  .tl-node { grid-column: 1; grid-row: 1 / span 3; }
  .tl-when, .tl-t, .tl-d { grid-column: 2; }
  .tl-when { height: auto; }
  .tl-t { margin: 2px 0 4px; }
  .tl-d { max-width: none; }
  .tl li:not(:last-child)::after { top: var(--node); left: calc(var(--node) / 2); width: 1px; height: calc(100% - var(--node)); }
  .custom { grid-template-columns: minmax(0, 1fr) auto; }
  .custom ul { grid-column: 1 / -1; grid-row: 2; }
  .pc-head { flex-direction: column; gap: 14px; }
  .pc-price { justify-items: start; }
}
@media (max-width: 860px) {
  .meet, .ct { grid-template-columns: 1fr; }
  .meet .ph img { max-height: 70svh; }
  .tiles.row3 { grid-template-columns: 1fr 1fr; }
  .tiles.row3 > :first-child { grid-column: auto; }
  .tile .tile-cap em { font-size: 18px; }
  .pc { grid-template-columns: 1fr; gap: 26px; }
  .custom { grid-template-columns: 1fr; }
  .custom ul { grid-row: auto; flex-direction: column; }
  .custom h3 { white-space: normal; flex-wrap: wrap; }
  .inc { grid-template-columns: 1fr; padding: 32px 18px 170px; }
  .inc-bg { width: 100%; height: 300px; }
  .inc-list2 { grid-template-columns: 1fr; }
  .inc-list2 li:nth-child(2) { border-top-color: var(--line); }
  .feel { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .feel img { object-position: 62% 50%; }
  .feel::after { content: ""; position: absolute; inset: 35% 0 0 0; background: linear-gradient(rgba(20,17,15,0), rgba(20,17,15,.78) 75%); }
  .feel p { inset: auto 0 0 0; justify-content: flex-start; text-align: left; padding: 0 16px 40px; font-size: 42px; }
  .faq-cols { grid-template-columns: 1fr; }
  .faq-cols .faq-col + .faq-col { border-top: 0; }
  .press ul { gap: 26px 36px; }
  .press img { width: calc(var(--w) * .78); }
  .print-fig { margin-inline: calc(-1 * var(--margin)); max-width: none; }
}
@media (max-width: 560px) {
  .facts3 li { padding: 14px 6px 14px 12px; }
  .facts3 b { font-size: 34px; }
  .facts3 span { font-size: 9.5px; letter-spacing: .14em; }
  .qf { padding: 22px 16px; }
}
.qf-steps { display: grid; gap: 22px; }
.qf .qf-consent { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12.5px; color: var(--ink-2); }
.qf .field > label:not(.qf-consent) { font: 600 var(--t-label)/1.6 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); }
.about .meet-text h1 { font-size: var(--t-1); max-width: 11em; }
.intro .eyebrow, .sec-head .eyebrow { max-width: none; }

/* ---------- Weddings main screen: one widescreen photo, the words under it ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

/* the date check: heading and other ways on the left, the form on the right */
.ct { grid-template-areas: "head form" "more form"; grid-template-rows: auto 1fr; row-gap: 26px; }
.ct-head { grid-area: head; display: grid; gap: 18px; justify-items: start; }
.ct-head h1, .ct-head h2 { font-size: var(--t-1); }
.ct-more { grid-area: more; display: grid; gap: 22px; justify-items: start; align-content: start; }
.ct .qf { grid-area: form; }

.tiles-more { display: none; }

/* ---------- phones: compact and clean ---------- */
@media (max-width: 860px) {
  :root { --section: 64px; --t-hero: 38px; --t-1: 31px; --t-2: 26px; --t-3: 20px; --head-h: 60px; }
  body { font-size: 15px; line-height: 1.65; }
  .hide-sm { display: none; }
  .mark img, .sheet-head .mark img { height: 20px; }
  .eyebrow { letter-spacing: .22em; }
  .sec-head { gap: 10px; padding-bottom: 28px; }
  .sec-head p:not(.eyebrow) { font-size: 14px; }
  .lede { font-size: 15.5px; }

  /* home */
  .tri { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
  .tri .ph:not(.lead) { display: block; }
  .tri .ph img { aspect-ratio: 3 / 4; max-height: none; }
  .intro { padding-block: 40px 56px; gap: 16px; }
  .weddings { gap: 56px; padding-bottom: 64px; }
  .row3.photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .row3.photos > :first-child { grid-column: auto; }
  .wedding-head { padding-bottom: 10px; margin-bottom: 12px; gap: 4px 14px; }
  .names { font-size: 23px; }
  .wedding-foot { margin-top: 14px; gap: 10px; }
  .wedding-foot p { font-size: 14px; }
  .quote { padding-block: 56px; gap: 14px; }
  .quote blockquote p { font-size: 25px; }
  .sessions-strip { padding-block: 56px; }
  .row4 { gap: 28px 10px; }
  .s-card { gap: 10px; }
  .s-card p { display: none; }
  .s-card h3 { font-size: 22px; }
  .call { padding-block: 56px; gap: 14px; }
  .call p:not(.eyebrow) { font-size: 14px; }
  .foot { padding-block: 44px 24px; }
  .foot .mark img { height: 26px; }
  .foot-nav { gap: 4px 18px; margin: 22px 0 14px; }
  .fine { margin-top: 28px; font-size: 11.5px; }

  .actions { gap: 12px 22px; }
  .actions .btn, .meet-text .btn { padding: 15px 22px; }

  /* Meet Lena: a wider crop first, then the words */
  .meet { gap: 22px; }
  .meet .ph img { aspect-ratio: 4 / 3; width: 100%; max-height: none; object-fit: cover; object-position: 50% 26%; }
  .meet-text { gap: 12px; }
  .meet-text .lede { font-size: 20px; }
  .meet-text .body { font-size: 14.5px; }
  .facts3 b { font-size: 32px; }
  .about { padding-block: 0 64px; }
  .about .meet-text h1 { font-size: 31px; }

  /* real weddings: six on the first screen, the rest behind a button */
  .tiles { gap: 22px 8px; }
  .tile { gap: 8px; }
  .tile .tile-cap { display: grid; gap: 2px; }
  .tile .tile-cap em { font-size: 17px; }
  .tile .place { font-size: 9px; letter-spacing: .16em; }
  .tiles:not(.all) .tile.later { display: none; }
  .tiles-more { display: flex; justify-content: center; margin-top: 28px; }
  .tiles-more[hidden] { display: none; }
  .price-line { margin-top: 28px; gap: 12px; }

  /* in print */
  .press { margin-top: 36px; }
  .press ul { gap: 18px 28px; margin-top: 22px; }
  .press img { width: calc(var(--w) * .66); }

  /* pricing */
  .pc { gap: 24px; }
  .pc-card { padding: 26px 18px 18px; }
  .pc-head { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .pc-price { justify-items: end; }
  .pc-pts { gap: 8px; margin: 18px 0 20px; padding-top: 16px; }
  .pc-pts li { font-size: 14px; }
  .custom { padding: 20px 18px; gap: 12px; }
  .custom li { font-size: 13.5px; }
  .inc { padding: 24px 18px 140px; gap: 14px; margin-top: 24px; }
  .inc-list2 li { padding-block: 12px; }
  .inc-list2 b { font-size: 18px; }
  .inc-list2 span { font-size: 13.5px; }
  .book { margin-top: 56px; }
  .book-head { margin-bottom: 22px; }
  .book-head p:not(.eyebrow) { font-size: 24px; }
  .tl li { padding-bottom: 12px; }
  .tl-t { font-size: 19px; }
  .tl-d { font-size: 13.5px; }
  .book-cta { margin-top: 28px; }

  /* feel everything */
  .feel { aspect-ratio: 4 / 3; }
  .feel p { font-size: 32px; padding: 0 16px 22px; }

  /* good to know */
  .faq summary { font-size: 18px; padding: 14px 0; gap: 14px; }
  .faq details p { font-size: 14.5px; padding-bottom: 16px; }
  .faq-more { margin-top: 24px; }

  /* the date check: heading, the form, then the other ways */
  .ct { grid-template-areas: "head" "form" "more"; grid-template-rows: none; row-gap: 22px; }
  .ct-head { gap: 12px; }
  .qf { padding: 20px 16px; gap: 16px; }
  .qf-steps { gap: 16px; }
  .qf-q { font-size: 27px; }
  .cards { gap: 6px; }
  .card { padding: 12px 14px; gap: 12px; }
  .card-txt b { font-size: 18px; }
  .card-txt span { font-size: 12.5px; }
  .card-price { font-size: 20px; }
  .qf .field input[type="text"], .qf .field input[type="email"], .qf .field input[type="tel"], .qf .field input[type="date"] { font-size: 20px; }

  /* sessions and about */
  .page-head { padding-block: 40px; gap: 14px; }
  .page-head .lede { font-size: 15px; }
  .tabs { gap: 4px 20px; }
  .tabs a { font-size: 19px; }
  .session { padding-bottom: 56px; }
  .session .wedding-head h2 { font-size: 30px; }
  .session-body { margin-top: 18px; gap: 16px; }
  .session-body .copy p { font-size: 14.5px; }
  .facts > div { padding: 10px 0 11px; }
  .facts dd { font-size: 14px; }
  .approach { padding-block: 56px; }
  .approach .row3 { gap: 26px; }
  .approach h3 { font-size: 24px; margin-bottom: 8px; }
  .approach .row3 p { font-size: 14.5px; }
  .about-pair { padding-block: 56px; }
}
@media (max-width: 560px) {
  .facts > div { display: grid; gap: 2px; padding: 10px 0 11px; }
  .facts dd { text-align: left; }
}

/* ---------- What I photograph: weddings big, the four sessions equal beside it ---------- */
.offer { padding-block: var(--section); }
.offer-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px var(--gap);
  /* the whole block fits one screen: two rows of 4:5 photos plus their names */
  max-width: min(var(--max), calc((100svh - var(--head-h) - 150px) * 1.6)); margin-inline: auto;
}
.offer-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.offer-card .ph img { aspect-ratio: 4 / 5; }
.offer-card.big { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.offer-card.big .ph { position: relative; flex: 1; min-height: 0; }
.offer-card.big .ph img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-position: 50% 60%; }
.offer-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.offer-card h3 { font: 300 clamp(22px, 1.9vw, 28px)/1.1 var(--serif); }
.offer-card.big h3 { font-size: clamp(32px, 3vw, 46px); }
.offer-card.big p { color: var(--ink-2); font-size: 15px; max-width: 52ch; }
.offer-card.big .link { align-self: flex-start; }
.offer-card:hover .ph img { opacity: .9; }

@media (max-width: 860px) {
  .offer { padding-block: 56px; }
  .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 10px; max-width: none; }
  .offer-card { gap: 8px; }
  .offer-card.big { grid-column: 1 / -1; grid-row: auto; gap: 10px; margin-bottom: 8px; }
  .offer-card.big .ph { position: static; flex: none; }
  .offer-card.big .ph img { position: static; height: auto; aspect-ratio: 4 / 5; max-height: 68svh; }
  .offer-card.big h3 { font-size: 30px; }
  .offer-card.big p { font-size: 14px; }
  .offer-head { display: grid; gap: 3px; padding-bottom: 8px; }
  .offer-card h3 { font-size: 20px; }
  .offer-card .place { font-size: 9.5px; letter-spacing: .18em; }
  .offer-card.big .offer-head { display: flex; }
  .offer-card.big .place { font-size: var(--t-label); }
}

/* ---------- home: the words under the opening photos, and straight into the work ---------- */
:root { --offer-w: min(var(--max), calc((100svh - var(--head-h) - 150px) * 1.6)); }
.offer-grid, .offer-top, .lead-in-grid { max-width: var(--offer-w); margin-inline: auto; }
.lead-in { padding-block: clamp(48px, 5vw, 80px); }
.lead-in-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 88px); align-items: end; }
.lead-in h2 { font-size: clamp(40px, 3.9vw, 60px); line-height: 1.05; margin-top: 14px; max-width: 12em; }
.lead-in-side { display: grid; gap: 14px; justify-items: start; padding-bottom: 6px; }
.lead-in-side .lede { color: var(--ink-2); font-size: 16px; }
.offer { padding-block: 0 var(--section); }
.offer-top { display: grid; gap: 10px; padding-top: clamp(40px, 4vw, 64px); margin-bottom: clamp(28px, 3vw, 44px); border-top: 1px solid var(--line); }
.offer-top h2 { font-size: var(--t-2); }

@media (max-width: 860px) {
  .lead-in { padding-block: 32px 40px; }
  .lead-in-grid { grid-template-columns: 1fr; gap: 16px; }
  .lead-in h2 { font-size: 32px; margin-top: 10px; }
  .lead-in-side { gap: 12px; padding-bottom: 0; }
  .lead-in-side .lede { font-size: 15px; }
  .offer { padding-block: 0 56px; }
  .offer-top { padding-top: 32px; margin-bottom: 22px; gap: 8px; }
  .offer-top h2 { font-size: 26px; }
}

/* ---------- footer: one slim row (the sticky header already carries the logo) ---------- */
.foot { padding-block: 36px 24px; text-align: left; }
.foot-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px 40px; flex-wrap: wrap; }
.foot-nav { justify-content: flex-start; gap: 8px 28px; margin: 0; }
.foot-contact { margin: 0; max-width: none; }
.foot-contact a:hover { color: var(--ink); }
.fine { margin-top: 24px; padding-top: 18px; }

@media (max-width: 860px) {
  .foot { padding-block: 32px 20px; }
  .foot-row { flex-direction: column; gap: 14px; }
  .foot-nav { gap: 6px 18px; }
  .foot-contact { font-size: 13px; }
  .fine { margin-top: 20px; justify-content: flex-start; text-align: left; }
}

/* phones: the logo centered in the header and in the open menu */
@media (max-width: 860px) {
  .top-in { grid-template-columns: 1fr auto 1fr; }
  .top-in .mark { grid-column: 2; justify-self: center; }
  .top-in .menu-btn { grid-column: 3; justify-self: end; }
  .sheet-head { display: grid; grid-template-columns: 1fr auto 1fr; }
  .sheet-head .mark { grid-column: 2; justify-self: center; }
  .sheet-head .menu-btn { grid-column: 3; justify-self: end; }
}

/* home blocks share the width of Real weddings on the Weddings page (.fit-3) */
:root { --offer-w: min(var(--max), 178vh); }   /* as wide as the header on screens up to 16:9; capped only on wider ones, so photos stay shorter than the screen */

.offer { padding-bottom: clamp(72px, 7vw, 112px); }
/* the two brides: keep faces and raised bouquets in the frame */
.offer-card.big .ph img { object-position: 50% 30%; }

/* Weddings page, Meet Lena: photo on the left edge like every other section, text fills the rest, less air */
#lena { padding-block: clamp(48px, 5vw, 80px); }
#lena .meet { grid-template-columns: auto minmax(0, 1fr); gap: clamp(40px, 5vw, 88px); align-items: center; }
#lena .meet .ph img { height: min(640px, calc(100svh - var(--head-h) - 96px)); width: auto; max-width: none; max-height: none; margin-inline: 0; }
#lena .meet-text { max-width: 640px; }

@media (max-width: 860px) {
  #lena { padding-block: 32px 48px; }
  #lena .meet { grid-template-columns: 1fr; gap: 20px; }
  #lena .meet .ph img { height: auto; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; object-position: 50% 26%; }
}

/* home: the three opening photos share the width and gaps of the sections below */
.tri-wrap { padding-top: clamp(12px, 1.6vw, 24px); }
.tri-wrap .tri { max-width: var(--offer-w); margin-inline: auto; gap: var(--gap); }
.tri-wrap .tri .ph img { max-height: calc(100svh - var(--head-h) - 48px); }
@media (max-width: 860px) {
  .tri-wrap { padding-top: 8px; }
  .tri-wrap .tri { gap: 4px; }
}
/* the opening photos sit right under the header */
.tri-wrap { padding-top: 0; }
.tri-wrap .tri .ph img { max-height: calc(100svh - var(--head-h) - 24px); }
@media (max-width: 860px) { .tri-wrap { padding-top: 0; } }

/* footer: contact on the left, social icons on the right */
.foot-row { align-items: center; }
.foot-contact a { color: inherit; }
.social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); transition: border-color .25s ease, background-color .25s ease; }
.social a:hover { border-color: var(--ink); background: var(--panel); }
.social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.social .dot { fill: currentColor; stroke: none; }
@media (max-width: 860px) {
  .foot-row { flex-direction: row; justify-content: space-between; align-items: center; }
  .social { gap: 8px; }
  .social a { width: 38px; height: 38px; }
}
@media (max-width: 520px) {
  .foot-row { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* Meet Lena: she steps out of the frame (cutout over a panel; head above it, cameras past its sides) */
.pop { position: relative; margin: 0; width: fit-content; justify-self: center; }
.pop::before { content: ""; position: absolute; inset: 27% 10% 0; background: linear-gradient(160deg, #e4dacd, #d2c4b2); }
.pop img { position: relative; display: block; height: min(640px, calc(100svh - var(--head-h) - 96px)); width: auto; max-width: none; filter: drop-shadow(0 14px 22px rgba(43, 41, 39, .16)); }
#lena .meet .pop, .about .meet .pop { justify-self: start; }
@media (max-width: 860px) {
  .pop, #lena .meet .pop, .about .meet .pop { justify-self: center; }
  .pop img { height: auto; width: min(82vw, 340px); }
}

/* phones: photos run edge to edge, words keep the side margin */
@media (max-width: 860px) {
  :root { --bleed: calc(-1 * max(var(--margin), env(safe-area-inset-left, 0px))); --cap-in: max(var(--margin), env(safe-area-inset-left, 0px)); }
  .tri-wrap .tri, .offer-grid, .tiles, .sess-photos, .about-pair .row2 { margin-inline: var(--bleed); max-width: none; }
  .tri-wrap .tri, .sess-photos, .sess-photos > *, .about-pair .row2 { gap: 3px !important; }
  .offer-grid { column-gap: 3px; }
  .tiles { column-gap: 3px; }
  .offer-card .offer-head, .offer-card > p, .offer-card > .link, .tile .tile-cap { margin-inline: var(--cap-in); }
  .pop { margin-inline: var(--bleed); justify-self: stretch !important; width: auto; display: grid; justify-items: center; }
  .pop img { width: min(100vw, 480px); }
  .pop::before { inset: 27% max(10%, calc(50% - 192px)) 0; }
}

/* Weddings main screen: the photo right under the header, then the words (headline left; line and buttons right) */
/* the text link beside a button: same middle line as the button's words */
.actions .link { padding-top: 9px; }

/* Meet Lena: two facts now, so two columns */
.facts3 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; }

/* Weddings, Meet Lena: the section ends where she ends (the frame sits on the section's bottom edge)
   and her head rises above the section's top edge, into the white above */
#lena { --pop-h: min(740px, calc(100svh - var(--head-h) - 8px)); padding-block: 0; overflow: visible; }
#lena .meet { align-items: center; }
#lena .meet-text { gap: 16px; padding-block: clamp(20px, 2vw, 32px); }
#lena .meet .pop { align-self: end; margin-top: calc(var(--pop-h) * -.13); }
#lena .pop img { height: var(--pop-h); clip-path: inset(-20% -20% 0 -20%); }
@media (max-width: 860px) {
  #lena { padding-block: 0 48px; }
  #lena .meet .pop { margin-top: -36px; }
  #lena .pop img { height: auto; }
  #lena .meet-text { padding-block: 0; }
  /* phones: cut her just below the hands so the photo stays short */
  .pop { height: calc(min(100vw, 480px) * 1334 / 992 * .64); overflow: hidden; align-content: start; }
  .pop img { align-self: start; }
}

/* Meet Lena, smaller: she is at most 600 px tall on computers (88% of the phone width on phones);
   the text gets a wider column and a smaller heading so her head still rises above the panel */
#lena { --pop-h: min(600px, calc(100svh - var(--head-h) - 110px)); }
#lena .meet-text { max-width: 720px; gap: 14px; padding-block: clamp(16px, 1.6vw, 24px); }
#lena .meet-text h2 { font-size: clamp(34px, 3.3vw, 50px); }
@media (max-width: 860px) {
  .pop { --pop-w: min(88vw, 400px); height: calc(var(--pop-w) * 1334 / 992 * .64); }
  .pop img { width: var(--pop-w); }
  .pop::before { inset: 27% calc(50% - var(--pop-w) * .4) 0; }
  #lena .meet-text h2 { font-size: var(--t-1); }
}

/* Meet Lena: more air above and below the words; she grows a little (620 px) and the facts get compact,
   so her head still rises above the panel */
#lena { --pop-h: min(620px, calc(100svh - var(--head-h) - 60px)); }
#lena .meet-text { padding-block: clamp(32px, 3.5vw, 56px); }
#lena .facts3 li { padding-block: 14px; }
#lena .facts3 b { font-size: clamp(34px, 3vw, 44px); }
@media (max-width: 860px) {
  #lena .meet-text { padding-block: 8px 0; }
}

/* Meet Lena, smaller again: 540 px on computers, 76% of the width on phones.
   The text column widens, the heading fits on one line and there is no button, so the text stays shorter than Lena
   and her head still rises above the panel */
#lena { --pop-h: min(540px, calc(100svh - var(--head-h) - 60px)); }
#lena .meet-text { max-width: 800px; }
#lena .meet-text h2 { max-width: none; }
@media (max-width: 860px) {
  .pop { --pop-w: min(76vw, 340px); }
  #lena .meet-text h2 { max-width: 11em; }
}

/* ---------- shop: one card with one photo per product; every product has its own page ---------- */
.shop { padding-bottom: var(--section); }
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--gap); max-width: var(--offer-w); margin-inline: auto; }
.shop-card p { color: var(--ink-2); font-size: 15px; }
/* the card link sits at the foot of every card, so the links in a row line up, and never wraps */
.shop-card .link { align-self: flex-start; margin-top: auto; white-space: nowrap; }

/* product page: the photo on the page's left edge, the words beside it */
.prod { padding-block: var(--step) var(--section); }
.prod-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(40px, 5vw, 88px); align-items: center; }
.prod-ph img { height: min(680px, calc(100svh - var(--head-h) - 2 * var(--step))); width: auto; max-width: none; aspect-ratio: 2 / 3; object-fit: cover; }
.prod-text { display: grid; gap: 18px; justify-items: start; max-width: 620px; }
.prod-text h1 { font-size: var(--t-1); }
.prod-price { font: 300 var(--t-3)/1.2 var(--serif); }
.prod-text .lede { color: var(--ink-2); }
.prod-text .facts { width: 100%; }
.back { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 4px; font: 600 var(--t-label)/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2); transition: color .3s; }
.back:hover { color: var(--ink); }
.back .back-arw { width: 18px; height: 10px; margin: 0; fill: none; stroke: currentColor; }
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 6px; }
.buy-note { font-size: 13px; color: var(--ink-2); margin-top: -8px; }

/* product page blocks: what you get, how it runs, bonuses, Lena's words */
.parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px clamp(24px, 3vw, 48px); margin: 0 auto; padding: 0; list-style: none; }
.parts li { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1px solid var(--line); }
.parts .num { font: 600 var(--t-label)/1 var(--sans); letter-spacing: .2em; color: var(--ink-2); }
.parts h3 { font-size: var(--t-3); }
.parts p { color: var(--ink-2); font-size: 15px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; counter-reset: st; }
.steps li { counter-increment: st; display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1px solid var(--ink); }
.steps li::before { content: counter(st); font: 300 clamp(40px, 3.8vw, 56px)/1 var(--serif); }
.steps h3 { font-size: var(--t-3); }
.steps p { color: var(--ink-2); font-size: 15px; }
.bonuses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin: var(--step) 0 0; padding: 0; list-style: none; }
.bonuses li { display: grid; gap: 8px; padding: 22px 24px; background: var(--panel); }
.bonuses p { font: italic 300 var(--t-3)/1.3 var(--serif); }
.prod-quote { margin: var(--section) auto 0; max-width: 32em; display: grid; gap: 16px; justify-items: center; text-align: center; }
.prod-quote p { font: italic 300 var(--t-2)/1.3 var(--serif); }

@media (max-width: 860px) {
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 3px; margin-inline: var(--bleed); max-width: none; }
  .shop-grid > :first-child { grid-column: 1 / -1; }
  .shop-grid > :first-child .ph img { max-height: 68svh; }
  .shop-card p { font-size: 14px; }
  /* phones: the photo opens the page, right under the header */
  .prod { padding-top: 0; }
  .prod-grid { grid-template-columns: 1fr; gap: 24px; }
  .prod-ph { margin-inline: var(--bleed); }
  .prod-ph img { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 70svh; }
  .prod-text { gap: 14px; }
  .buy .btn { padding: 15px 22px; }
  .parts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .parts p, .steps p { font-size: 14px; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .bonuses { grid-template-columns: 1fr; }
}

/* ---------- spacing system (review, Oct 30 2026) ----------
   Two steps, nothing else:
   --section  between sections on the same background, and inside every stone panel
              (140 px on a 1280 screen, 64 on phones)
   --step     half a section: inside one opening (photo, its words, the cards under them),
              from the header to a page's first words, and from a heading to what it introduces
              (70 / 32)
   A photo that opens a page sits right under the header. Meet Lena is the one exception:
   her head rises above her panel, so the section before it leaves room for that. */
:root { --step: calc(var(--section) / 2); }

/* openings */
.lead-in { padding-block: var(--step); }
.page-head { padding-block: var(--step); }
.about { padding-top: var(--step); }

/* between sections, and inside panels */
.offer { padding-bottom: var(--section); }
.session { padding-bottom: var(--section); }
.approach, .about-pair { padding-block: var(--section); }

/* a heading and what it introduces */
.sec-head { padding-bottom: var(--step); }

/* About: Lena starts on the page's left edge, like every other section */
.about > .pop { justify-self: start; }

@media (max-width: 860px) {
  .about { padding-block: var(--step) var(--section); }
  .about > .pop { justify-self: stretch; }
  #lena { padding-bottom: var(--section); }
}

/* the date form: one compact row at the bottom (the promise on the left, Back and Next on the right), no rule above it */
.qf-nav { flex-wrap: wrap; gap: 10px 20px; padding-top: 0; margin-top: -6px; }
.qf-nav .qf-assure { flex: 1 1 200px; border-top: 0; padding-top: 0; gap: 2px; font-size: 12.5px; }
.qf-nav .btn { margin-left: 0; }
@media (max-width: 860px) {
  .qf-nav { margin-top: -4px; }
  .qf-nav .qf-assure { order: 3; flex-basis: 100%; }
  .qf-nav .qf-back { margin-right: auto; }
  .qf-nav .btn { margin-left: auto; }
}

/* ---------- compact page heads (Sessions, Shop): eyebrow and headline left, the line right ---------- */
.page-head { display: block; justify-items: stretch; text-align: left; padding-block: var(--step); }   /* stretch: the heading spans the section, not a centered narrower block */
.page-head-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px clamp(32px, 5vw, 96px); align-items: end; }
.page-head h1 { font-size: clamp(40px, 3.9vw, 60px); line-height: 1.05; margin-top: 12px; }
.page-head .lede { color: var(--ink-2); font-size: 16px; max-width: 46ch; }

/* ---------- sessions: four cards, then one portfolio page per kind of session ---------- */
.shop-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sess-page { padding-top: var(--step); }
.sess-page .back { margin-bottom: 20px; }
.sess-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 96px); align-items: start; }
.sess-top h1 { font-size: clamp(44px, 4.6vw, 72px); line-height: 1.02; margin: 12px 0 10px; }
.sess-info { display: grid; gap: 18px; justify-items: start; }
.sess-info .lede { color: var(--ink-2); }
.sess-info .facts { width: 100%; }
.folio-sec { padding-block: var(--step) var(--section); }
.folio-line { color: var(--ink-2); font-size: 14px; margin-bottom: 14px; }
.folio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }

@media (max-width: 860px) {
  .page-head-in { grid-template-columns: 1fr; gap: 12px; }
  .page-head h1 { font-size: 38px; margin-top: 8px; }
  .page-head .lede { font-size: 15px; }
  .shop-grid.four > :first-child { grid-column: auto; }
  .shop-grid.four > :first-child .ph img { max-height: none; }
  .sess-page .back { margin-bottom: 14px; }
  .sess-top { grid-template-columns: 1fr; gap: 16px; }
  .sess-top h1 { font-size: 38px; margin: 8px 0 6px; }
  .sess-info { gap: 14px; }
  .folio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; margin-inline: var(--bleed); }
  .folio-line { font-size: 13px; }
}
@media (max-width: 860px) {
  .shop-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the details on session and product pages stay one line each: label left, value right */
  .sess-info .facts > div, .prod-text .facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0 11px; }
  .sess-info .facts dd, .prod-text .facts dd { text-align: right; font-size: 14px; }
}

/* the date form: the question is a <legend>, which a fieldset's grid gap skips, so it gets its own space */
.qf-step > .qf-q { margin-bottom: 18px; }
.qf-step > .qf-q + .qf-sub { margin-top: -10px; }
@media (max-width: 860px) {
  .qf-step > .qf-q { margin-bottom: 14px; }
  .qf-step > .qf-q + .qf-sub { margin-top: -8px; }
}
/* Back always sits on the left of the bottom row, Next on the right */
.qf-nav .qf-back { order: -1; }

/* ---------- mentorship page (Oct 30 2026): who it's for, clients and sales, shooting, the meetings ---------- */
.prod-stats { margin-top: -6px; }
.sec-head p:not(.eyebrow) { max-width: 52ch; }
.parts.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.outcomes { margin-top: var(--step); display: grid; gap: 14px; justify-items: center; text-align: center; }
.outcomes ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.outcomes li { padding: 10px 18px; border: 1px solid var(--line); background: var(--paper); font-size: 14px; }
.steps-total { margin-top: 28px; color: var(--ink-2); font-size: 15px; }
@media (max-width: 860px) {
  .parts.cols-3 { grid-template-columns: 1fr; gap: 24px; }
  .outcomes li { padding: 8px 12px; font-size: 13px; }
  .steps-total { margin-top: 20px; font-size: 14px; }
}

/* shop: Lena stepping out of a frame on the Mentorship card and page (like the brochure's cover) */
.shop-card .ph.cut { position: relative; background: transparent; overflow: visible; }
.shop-card .ph.cut::before { content: ""; position: absolute; inset: 28% 0 0; background: linear-gradient(160deg, #e4dacd, #d2c4b2); }
.shop-card .ph.cut img { position: relative; aspect-ratio: 4 / 5; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(43, 41, 39, .14)); clip-path: inset(-20% -20% 0 -20%); }
.prod-pop { justify-self: start; }
.prod-pop img { height: min(620px, calc(100svh - var(--head-h) - 2 * var(--step))); }
@media (max-width: 860px) {
  .prod-pop { justify-self: stretch; }
  .prod-pop img { height: auto; }
}

/* cards: the heading never changes on hover; the photo fades a little and the card's link line darkens and grows */
.offer-card:hover .link, .s-card:hover .link { border-color: var(--ink); }
.offer-card:hover .link::after, .s-card:hover .link::after { width: 30px; }


/* ---------- home: the opening photos are a slideshow, three at a time (two on phones) ---------- */
.slides { --per: 3; --g: var(--gap); position: relative; overflow: hidden; max-width: var(--offer-w); margin-inline: auto; touch-action: pan-y; }
.slides-track { display: flex; gap: var(--g); transition: transform 1s cubic-bezier(.45, 0, .15, 1); }
.slides-track.no-anim { transition: none; }
.slides-track > .ph { flex: 0 0 calc((100% - (var(--per) - 1) * var(--g)) / var(--per)); }
.slides-track > .ph img { aspect-ratio: 3 / 4; max-height: calc(100svh - var(--head-h) - 24px); user-select: none; -webkit-user-drag: none; }
.slides-btn { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); background: rgba(252, 251, 248, .88); opacity: 0; transition: opacity .3s ease, border-color .3s ease; }
.slides-btn.prev { left: 14px; }
.slides-btn.next { right: 14px; }
.slides-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.4; }
.slides:hover .slides-btn, .slides-btn:focus-visible { opacity: 1; }
.slides-btn:hover { border-color: var(--ink); }
@media (hover: none) { .slides-btn { display: none; } }
@media (prefers-reduced-motion: reduce) { .slides-track { transition: none; } }
@media (max-width: 860px) {
  .slides { --per: 2; --g: 3px; max-width: none; margin-inline: var(--bleed); }
  .slides-track > .ph img { max-height: 62svh; }
}

/* ---------- phone menu: two lines that turn into a cross; the menu opens under the header, so the header never moves ---------- */
.menu-btn { position: relative; width: 44px; height: 44px; margin-right: -11px; padding: 0; border: 0; }
.menu-btn span { position: absolute; left: 11px; right: 11px; height: 1.4px; background: var(--ink); transition: top .3s ease, transform .3s ease; }
.menu-btn span:nth-child(1) { top: 18px; }
.menu-btn span:nth-child(2) { top: 25px; }
.menu-btn[aria-expanded="true"] span { top: 21.5px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }
.sheet { top: calc(var(--head-h) + env(safe-area-inset-top, 0px)); grid-template-rows: 1fr auto; padding-top: 0; }
.top.is-open { box-shadow: 0 1px 0 var(--line); }
@media (prefers-reduced-motion: reduce) { .menu-btn span { transition: none; } }

/* slideshow controls: the whole left photo goes back, the whole right photo goes on;
   a plain arrow (no box) at the outer edge shows it */
.slides-btn { top: 0; bottom: 0; translate: none; width: calc((100% - (var(--per) - 1) * var(--g)) / var(--per)); height: auto; display: flex; align-items: center; border: 0; background: transparent; opacity: 1; cursor: pointer; }
.slides-btn.prev { left: 0; justify-content: flex-start; padding-left: clamp(12px, 1.6vw, 22px); }
.slides-btn.next { right: 0; justify-content: flex-end; padding-right: clamp(12px, 1.6vw, 22px); }
.slides-btn svg { width: 30px; height: 30px; stroke: #fff; stroke-width: 1.6; opacity: 0; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .35)) drop-shadow(0 0 6px rgba(0, 0, 0, .3)); transition: opacity .3s ease; }
.slides:hover .slides-btn svg, .slides-btn:focus-visible svg { opacity: .95; }
.slides-btn:hover { border-color: transparent; }
.slides-btn:focus-visible { outline: 1px solid #fff; outline-offset: -6px; }
@media (hover: none) {
  .slides-btn { display: flex; }
  .slides-btn svg { opacity: .9; width: 24px; height: 24px; }
}

/* Good to know on phones: the first 6 questions, then "Show more" opens the rest */
@media (max-width: 860px) {
  #faq:not(.all) .faq-cols:not(#fq-more) .faq-col:nth-child(2) { display: none; }
}

/* ---------- home: Favorites, a masonry wall of whole photos ----------
   site.js places each photo under the shortest column (in page order, so nothing moves when
   "Show more" adds the next ones) and fades it in once loaded. Columns and how many show at
   first come from here; without the script the photos fall into plain CSS columns. */
.fav { padding-bottom: var(--section); }
.mason { --cols: 4; --batch: 12; position: relative; max-width: var(--offer-w); margin-inline: auto; columns: var(--cols); column-gap: var(--gap); }
.mason > .ph { break-inside: avoid; margin: 0 0 var(--gap); }
.mason .ph img { aspect-ratio: var(--r); }
.mason.is-laid { columns: auto; }
.mason.is-laid > .ph { position: absolute; top: 0; left: 0; margin: 0; }
.mason.is-laid img { opacity: 0; transition: opacity .6s ease; }
.mason.is-laid img.is-in { opacity: 1; }
.mason.is-laid .ph:hover img.is-in { opacity: .9; }
.mason-more { display: flex; justify-content: center; margin-top: clamp(28px, 3vw, 44px); }
@media (max-width: 1100px) { .mason { --cols: 3; --batch: 9; } }
@media (max-width: 860px) {
  .mason { --cols: 2; --batch: 8; column-gap: 3px; margin-inline: var(--bleed); max-width: none; }
  .mason > .ph { margin-bottom: 3px; }
}
@media (prefers-reduced-motion: reduce) { .mason.is-laid img { transition: none; } }

/* ---------- closing block: a whole photograph on the left; the heading, one line, and "Check my date" with two
   reassurances under it on the right. A wide photo takes the larger share of the row;
   a tall one (session pages, Shop) keeps a set height. On phones a wide photo runs edge to edge on top. ---------- */
.close { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ph main"; align-items: center; gap: 32px clamp(40px, 5.5vw, 96px); max-width: var(--offer-w); margin-inline: auto; padding-block: clamp(64px, 7vw, 112px); }
.close.wide { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.close-ph { grid-area: ph; margin: 0; }
.close-ph img { height: min(500px, calc(100svh - var(--head-h) - 140px)); width: auto; max-width: none; }
.close.wide .close-ph img { width: 100%; height: auto; max-width: 100%; }
.close-ph figcaption { margin-top: 12px; font: 600 var(--t-label)/1.6 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2); }
.close-main { grid-area: main; display: grid; gap: 14px; justify-items: start; }
.close h2 { font-size: var(--t-2); line-height: 1.12; }
.close-line { color: var(--ink-2); max-width: 40ch; font-size: clamp(15.5px, 1.1vw, 17px); text-wrap: balance; }
.close-go { display: grid; justify-items: start; gap: 16px; margin-top: 12px; }
.close-assure { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); }
.close-assure li { display: flex; align-items: center; gap: 8px; }
.tick { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.5; }
/* Shop: no photo, one compact row; the question and its line on the left, the ways to message Lena on the right */
.close.compact { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main act"; padding-block: clamp(56px, 6vw, 88px); }
.close-act { grid-area: act; }
.close.compact .ways { justify-content: flex-end; }
.close.compact .close-line { max-width: 58ch; }
@media (max-width: 860px) {
  .close, .close.wide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; gap: 24px; padding-block: 56px; }
  .close.wide { grid-template-areas: "ph" "main"; padding-top: 0; }
  .close.compact { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "act"; gap: 20px; padding-block: 48px; }
  .close:not(.wide) .close-ph { display: none; }
  .close.wide .close-ph { margin-inline: var(--bleed); }
  .close-ph figcaption { padding-inline: var(--cap-in); }
  .close h2 { font-size: 30px; }
  .close-line { font-size: 15px; }
  .close-go { width: 100%; margin-top: 8px; gap: 14px; }
  .close-go .btn { width: 100%; }
  .close-assure { display: grid; gap: 6px; }
}

/* .ways is the one row of ways to message Lena (Shop's closing row, the date popup, the Inquire page):
   icon and word, a thin line under the word that darkens on hover; on phones one equal column per way
   (Nov 10 2026: a fixed four-column grid left from the Text link pushed the three ways to the left). */
.ways { display: flex; flex-wrap: wrap; gap: 4px 32px; margin: 0; padding: 0; list-style: none; }
.ways a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 600 13px/1 var(--sans); color: var(--ink); }
.ways a span { padding-block: 5px; border-bottom: 1px solid var(--line); transition: border-color .25s ease; }
.ways a:hover span { border-color: var(--ink); }
.ways svg { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.4; }
@media (max-width: 860px) {
  .ways { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; width: 100%; }
  .ways a { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 66px; font-size: 12px; }
  .ways a span { padding-block: 0; border-bottom: 0; }
}

/* the back link (All sessions, All products): its own line just under the header, a full tap target, clear of the title below */
.back { min-height: 44px; }
.sess-page { padding-top: clamp(16px, 1.8vw, 28px); }
.sess-page .back { margin-bottom: clamp(20px, 2.4vw, 36px); }
.prod-text .back { margin-block: -16px 6px; }
@media (max-width: 860px) {
  .sess-page { padding-top: 8px; }
  .sess-page .back { margin-bottom: 14px; }
}

/* beside the date form (Weddings, Inquire): Lena, then the same row of ways to message her */
.ct-ways { display: grid; gap: 8px; width: 100%; }
.ct-ways p { font-size: 13px; color: var(--ink-2); }
@media (min-width: 861px) { .ct-ways .ways { gap: 4px 26px; } }
@media (max-width: 860px) { .ct-ways { gap: 4px; padding-top: 18px; border-top: 1px solid var(--line); } .ct-ways p { text-align: center; } }

/* ---------- the date popup: every "Check my date" opens the form full screen over the page,
   a cross to close it, and under the form Lena with the ways to message her.
   Its bar is a copy of the header (same grid, height and logo), so the logo never moves; the cross is
   the phone menu's cross in the menu button's place. The bar stays still and only the part under it scrolls. ---------- */
html { scrollbar-gutter: stable; }   /* hiding the page's scrollbar while the popup is open never shifts the page sideways */
html.dpop-open { overflow: hidden; }
.dpop { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: var(--panel); opacity: 0; transition: opacity .3s ease; }
.dpop.is-in { opacity: 1; }
.dpop-bar { flex: none; padding-top: env(safe-area-inset-top, 0px); background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.dpop-bar .mark { grid-column: 2; }
.dpop-x { grid-column: 3; justify-self: end; position: relative; width: 44px; height: 44px; margin-right: -11px; padding: 0; border: 0; background: none; cursor: pointer; }
.dpop-x span { position: absolute; left: 11px; right: 11px; top: 21.5px; height: 1.4px; background: var(--ink); transition: background-color .25s ease; }
.dpop-x span:nth-child(1) { transform: rotate(45deg); }
.dpop-x span:nth-child(2) { transform: rotate(-45deg); }
.dpop-x:hover span { background: var(--ink-2); }
.dpop-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.dpop-body { display: grid; align-content: center; gap: 16px; width: min(100% - 2 * var(--margin), 620px); min-height: 100%; margin-inline: auto; padding-block: 16px 20px; transform: translateY(14px); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.dpop.is-in .dpop-body { transform: none; }
.dpop .qf { padding: clamp(24px, 2.6vw, 34px); }
/* Lena and the ways to message her: one compact row on computers */
.dpop-lena { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 28px; }
.dpop-hi { display: flex; align-items: center; gap: 12px; }
.dpop-face { width: 44px; height: 44px; border-radius: 50%; }
.dpop-hi p { font-size: 13px; color: var(--ink-2); }
.dpop .ways { justify-content: center; }
@media (max-width: 860px) {
  .dpop-body { width: 100%; min-height: 0; align-content: start; gap: 22px; padding: 16px 16px max(32px, env(safe-area-inset-bottom, 0px)); }
  .dpop-lena { flex-direction: column; gap: 8px; }
  .dpop .ways { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .dpop, .dpop-body { transition: none; } }


/* ---------- a wedding's own page (wedding-<couple>.html), to send as a link: the names, the place and
   Share, then the wedding as a masonry wall of whole photos in the day's order, then the next wedding ---------- */
.wed-page { padding-top: clamp(16px, 1.8vw, 28px); }
.wed-page .back { margin-bottom: clamp(20px, 2.4vw, 36px); }
.wed-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 32px; padding-bottom: clamp(28px, 3vw, 44px); }
.wed-head > div { display: grid; gap: 10px; }
.wed-head h1 { font-size: clamp(44px, 4.6vw, 72px); line-height: 1.02; }
.wed-share { white-space: nowrap; }
.wall { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); align-items: start; gap: var(--gap); max-width: var(--offer-w); margin-inline: auto; }
.wall.is-laid { display: flex; }
.wcol { flex: 1; min-width: 0; display: grid; gap: var(--gap); }
.wph { margin: 0; background: var(--panel); }
.wph img { display: block; width: 100%; height: auto; transition: opacity .25s ease; }
.wph:hover img { opacity: .9; }
.wph:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.wed-next { display: flex; justify-content: space-between; gap: 24px; max-width: var(--offer-w); margin: clamp(36px, 4vw, 60px) auto var(--section); padding-top: 24px; border-top: 1px solid var(--line); }
.wed-next a { display: grid; gap: 6px; color: inherit; }
.wed-next a:last-child { justify-items: end; text-align: right; }
.wed-next em { font: italic 400 clamp(22px, 2vw, 28px)/1.2 var(--serif); }
.wed-next a:hover em { color: var(--ink-2); }
@media (max-width: 860px) {
  .wed-page { padding-top: 8px; }
  .wed-page .back { margin-bottom: 14px; }
  .wed-head { padding-bottom: 22px; }
  .wed-head h1 { font-size: 40px; }
  .wall { --cols: 2; gap: 3px; margin-inline: var(--bleed); max-width: none; }
  .wcol { gap: 3px; }
  .wed-next { margin-block: 32px var(--section); }
  .wed-next em { font-size: 20px; }
}

/* a kind of session's page: every session of that kind as a tile, the first 6 and then "Show all" */
.tiles.cases:not(.all) .tile.more { display: none; }
.cases-more { display: flex; justify-content: center; margin-top: clamp(28px, 3vw, 44px); }

/* What I photograph, as wide as the header: the four session cards keep their whole 4:5 shape
   (owner, Nov 4: no longer capped at half the screen, which cut them into short strips on laptops) */

/* ======================================================================
   Nov 3 2026: the home's first screen, from the cinematic mockup. One photograph
   full screen under the header (which is clear, with white words, until the photo
   has passed under it), a slow push-in, the headline rising line by line, the photo
   drifting slower than the page. The slideshow follows. Reduced motion keeps it still.
   ====================================================================== */
:root { --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace; --ease: cubic-bezier(.16, 1, .3, 1); }

.top.over { transition: background-color .5s ease, color .5s ease, box-shadow .35s ease; }
.top.over .mark img { transition: filter .5s ease; }
.top.over:not(.lined):not(.is-open) { background: transparent; color: #fff; }
.top.over:not(.lined):not(.is-open) .mark img { filter: invert(1); }
.top.over:not(.lined):not(.is-open) .nav a:hover,
.top.over:not(.lined):not(.is-open) .nav a[aria-current="page"] { border-bottom-color: #fff; }
.top.over:not(.lined):not(.is-open) .nav a.btn { border-color: rgba(255, 255, 255, .8); color: #fff; }
.top.over:not(.lined):not(.is-open) .nav a.btn:hover { background: #fff; color: var(--ink); }
.top.over:not(.lined):not(.is-open) .menu-btn span { background: #fff; }

.hero { position: relative; height: 100svh; min-height: 560px; margin-top: calc(-1 * var(--head-h)); overflow: hidden; background: #1c1a18; color: #fff; }
.hero-ph { position: absolute; inset: 0; will-change: transform; }
.hero-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; animation: push 3.2s var(--ease) both; }
@keyframes push { from { transform: scale(1.14); filter: brightness(.4); } }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(22, 20, 18, .42) 0, rgba(22, 20, 18, 0) 20%),
    linear-gradient(90deg, rgba(22, 20, 18, .66) 0%, rgba(22, 20, 18, .28) 42%, rgba(22, 20, 18, 0) 70%),
    linear-gradient(0deg, rgba(22, 20, 18, .5), rgba(22, 20, 18, 0) 30%);
}
.hero .mono { font: 400 11px/1.9 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .88); max-width: none; }
.hero-txt { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(104px, 17vh, 190px); display: grid; gap: 24px; justify-items: start; will-change: opacity, transform; }
.hero h1 { font-size: clamp(44px, 5.2vw, 84px); line-height: 1.06; letter-spacing: -.02em; color: #fff; }
.ln { display: block; overflow: hidden; padding: 0 .08em .12em; margin: 0 -.08em -.12em; }
.ln > span { display: block; animation: rise 1.4s var(--ease) .2s both; }
.ln:nth-child(2) > span { animation-delay: .34s; }
.ln:nth-child(3) > span { animation-delay: .48s; }
@keyframes rise { from { transform: translateY(105%); } }
.fade-in { animation: fade 1.6s ease 1s both; }
@keyframes fade { from { opacity: 0; } }
.hero-foot { position: absolute; z-index: 2; left: 0; right: 0; bottom: 30px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.scroll { display: flex; align-items: center; gap: 16px; color: #fff; }
.ring { position: relative; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .85); border-radius: 50%; }
.ring::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 24px; background: #fff; transform-origin: top; animation: drip 2.4s var(--ease) infinite; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }


/* the slideshow sits right under the first screen, one thin gap between them (the gap between its
   photos). On phones both run edge to edge; on computers both keep the page margins like every
   other section (owner, Nov 4), and the photo runs up under the clear header, whose links then sit
   inside the photo, lined up with the headline; once the photo has passed, the header is the
   light one again with its links back at the page margins. */
.hero + .tri-wrap { padding-top: var(--gap); }
@media (min-width: 861px) {
  /* one width for the whole site on computers (owner, Nov 5 2026): every section, the first photo, the
     colored bands, the footer and the header's links share the same two edges, --edge: the page margin,
     or on screens wider than 16:9 a centered 178vh column, so a row of photos is never taller than the
     screen. % means the width of whatever uses it (the page for a section, the header for its padding),
     so everything matches even with a scrollbar. Phones keep their own layout. */
  :root {
    --edge: max(var(--margin), env(safe-area-inset-left, 0px), (100% - 178vh) / 2);
    --hero-w: calc(100% - 2 * var(--edge));
  }
  .wrap { padding-left: var(--edge); padding-right: var(--edge); }
  .hero { width: var(--hero-w); height: calc(100svh - var(--gap)); min-height: calc(380px + var(--head-h)); margin: calc(-1 * var(--head-h)) auto 0; }
  /* colored bands and the dark photo band sit inside the same edges instead of running to the screen's
     sides; what is inside them keeps the page margin as its own padding */
  .sec.panel, .band, .feel { margin-inline: var(--edge); }
  .faq-cols { max-width: none; }
  /* the header's bottom line, once it shows, spans the section width like the footer's */
  .top.lined:not(.is-open) { box-shadow: none; }
  .top::after { content: ""; position: absolute; left: var(--edge); right: var(--edge); bottom: 0; height: 1px; background: var(--line); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
  .top.lined:not(.is-open)::after { opacity: 1; }
  /* the footer's top line spans the section width too, not the screen */
  .foot { position: relative; border-top: 0; }
  .foot::before { content: ""; position: absolute; top: 0; left: var(--edge); right: var(--edge); height: 1px; background: var(--line); }
  /* the header: over the first photo its links sit inside the photo, lined up with the headline; once
     the photo has passed (and on every other page) they slide out to the section edges */
  .top .top-in { transition: padding .5s ease; }
  .top.over:not(.lined):not(.is-open) .top-in { padding-left: calc(var(--edge) + var(--margin)); padding-right: calc(var(--edge) + var(--margin)); }
}

@media (max-width: 860px) {
  .hero + .tri-wrap { padding-top: 3px; }
  .hero-txt { bottom: 96px; gap: 16px; }
  .hero h1 { font-size: clamp(36px, 9.6vw, 44px); }
  .hero::after { background: linear-gradient(180deg, rgba(22, 20, 18, .4) 0, rgba(22, 20, 18, 0) 16%), linear-gradient(0deg, rgba(22, 20, 18, .9) 0%, rgba(22, 20, 18, .62) 36%, rgba(22, 20, 18, 0) 62%); }
  .hero .mono { font-size: 10px; letter-spacing: .12em; }   /* the name line fits one row on a phone */
  .hero-foot { bottom: 26px; }
  .hero-foot > p { display: none; }
}

/* more air between the lines of the serif headings (owner, Nov 3), on every screen */
h1, h2 { line-height: 1.16; }
.lead-in h2, .page-head h1, .sess-top h1, .wed-head h1 { line-height: 1.12; }
.close h2, .qf-q { line-height: 1.22; }
.names, .offer-card h3, .pc-name, .custom h3, .inc-head h3 { line-height: 1.22; }
.book-head p:not(.eyebrow) { line-height: 1.28; }
.feel p { line-height: 1.14; }

@media (prefers-reduced-motion: reduce) {
  .hero-ph img, .ln > span, .fade-in, .ring::after { animation: none; }
}

/* a lower header (owner, Nov 4 2026): 70 px on computers (was 84), 54 on phones (was 60);
   the logo and the Check my date button shrink a little with it */
:root { --head-h: 70px; }
.mark img { height: 28px; }
.nav a.btn { padding: 11px 20px; }
@media (max-width: 860px) {
  :root { --head-h: 54px; }
  .mark img { height: 20px; }
}



/* Weddings: Meet Lena sits after Pricing, right before How booking works (owner, Nov 4 2026),
   which has its own section. On computers she is shown as on phones (owner's pick over three
   compact versions): her photo cut just below her hands, the frame behind her, her head rising
   above the panel and the frame ending on its bottom edge; the words beside her are set tighter
   (smaller heading, wider paragraph, the two facts on one line) so the panel stays short. */
#steps .book { margin-top: 0; }
@media (min-width: 861px) {
  #lena { --pop-w: clamp(340px, 30vw, 440px); }
  #lena .meet { grid-template-columns: auto minmax(0, 1fr); gap: clamp(40px, 5vw, 88px); align-items: center; }
  /* at least cut below the hands; where the words beside her run taller (laptops), the photo runs
     down with them, so her head still rises above the panel and the frame still ends on its edge */
  #lena .meet .pop { width: var(--pop-w); height: auto; min-height: calc(var(--pop-w) * 1334 / 992 * .64); align-self: stretch; overflow: hidden; margin-top: calc(var(--pop-w) * -.2); }
  #lena .pop img { position: absolute; top: 0; left: 0; width: var(--pop-w); height: auto; clip-path: none; }
  #lena .pop::before { inset: calc(var(--pop-w) * .2325) calc(50% - var(--pop-w) * .4) 0; }
  #lena .meet-text { gap: 12px; max-width: 780px; padding-block: 20px; }
  #lena .meet-text h2 { font-size: clamp(30px, 2.6vw, 40px); max-width: none; }
  #lena .meet-text .body { font-size: 15px; max-width: 72ch; }
  #lena .facts3 { display: flex; flex-wrap: wrap; gap: 6px 32px; width: auto; max-width: none; border: 0; }
  #lena .facts3 li { display: flex; align-items: baseline; gap: 10px; padding: 0; border: 0; }
  #lena .facts3 b { font-size: 30px; }
}

/* Weddings, Real weddings as a masonry (owner, Nov 4 2026): 4 columns on computers, 3 on tablets,
   2 on phones; each photo whole in its own shape with the names under it; site.js puts each tile in
   the shortest column, in order, and shows 12 first, then the rest with "Show more" */
.tiles-m { --cols: 4; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); align-items: start; max-width: var(--offer-w); margin-inline: auto; }
.tiles-m.is-laid { display: flex; }
.tiles-m .tcol { flex: 1; min-width: 0; display: grid; gap: clamp(16px, 1.6vw, 26px); align-content: start; }
.tiles-m .tile { gap: 10px; }
.tiles-m .tile .ph img { aspect-ratio: auto; }
.tmason-more { display: flex; justify-content: center; margin-top: clamp(32px, 3.5vw, 52px); }
.tmason-more[hidden] { display: none; }
@media (max-width: 1100px) { .tiles-m { --cols: 3; } }
@media (max-width: 860px) {
  .tiles-m { --cols: 2; }
  .tiles-m .tile .tile-cap em { font-size: 17px; }
}

/* home intro: her three words set in the italic serif, with fine dots between them (owner, Nov 4 2026,
   "make Storytelling · Timeless · Editorial more appealing"); the "See the weddings" link is gone */
.lead-style { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; font: italic 400 clamp(21px, 1.7vw, 26px)/1.3 var(--serif); color: var(--ink); max-width: none; }
.lead-style em + em::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 16px; border-radius: 50%; background: var(--accent); vertical-align: middle; }

/* What I photograph, card titles (owner's pick of three, Nov 4 2026, without numbers and without the long
   line): the name in spaced capitals and a short line on the right that grows on hover */
.offer .offer-head { justify-content: flex-start; align-items: center; gap: 14px; flex-wrap: nowrap; padding: 4px 0 0; border: 0; }
.offer .offer-head::after { content: ""; margin-left: auto; width: 22px; height: 1px; background: var(--ink); transition: width .4s ease; }
.offer .offer-card:hover .offer-head::after { width: 40px; }
.offer .offer-card h3, .offer .offer-card.big h3 { font: 600 11.5px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
@media (max-width: 860px) {
  .offer .offer-head { display: flex; flex-direction: row; align-items: center; gap: 8px; }
  .offer .offer-card h3, .offer .offer-card.big h3 { font-size: 10.5px; letter-spacing: .2em; }
  .offer .offer-head::after { width: 14px; }
}

/* "See all N photos" under a wedding's or session's 18 (Nov 4 2026) */
.all-more { display: flex; justify-content: center; margin-top: clamp(32px, 3.5vw, 52px); }
.all-more[hidden], .wall[hidden] { display: none; }

/* home intro: the name line moved up to the first screen (Nov 4 2026), so the heading starts the intro */
.lead-in h2 { margin-top: 0; }
@media (max-width: 379px) { .hero .mono { letter-spacing: .05em; } }

/* Closing section with a photo ("Can you picture your day like this?" on the home, "Is the date still
   open?" on Weddings), on computers a magazine spread (owner's pick of three, Nov 4 2026): the photo fills
   the left part to the screen's edge and the band's full height, its caption on it over a soft shade; the
   words beside it after a short rule, with a larger heading. Phones keep the stacked layout. */
@media (min-width: 861px) {
  .close.wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; gap: 0; padding-block: 0; max-width: none; margin-inline: calc(-1 * max(var(--margin), env(safe-area-inset-left, 0px))) 0; }
  .close.wide .close-ph { position: relative; min-height: min(84svh, 780px); }
  .close.wide .close-ph img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 45% 55%; }
  .close.wide .close-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(22, 20, 18, .45), rgba(22, 20, 18, 0) 28%); pointer-events: none; }
  .close.wide .close-ph figcaption { position: absolute; z-index: 1; left: 0; bottom: 0; margin: 0; padding: 0 28px 22px max(var(--margin), 28px); color: rgba(255, 255, 255, .9); }
  .close.wide .close-main { align-content: center; gap: 18px; padding: clamp(48px, 6vw, 112px); }
  .close.wide .close-main::before { content: ""; width: 48px; height: 1px; background: var(--ink); margin-bottom: 8px; }
  .close.wide h2 { font-size: var(--t-1); max-width: 11em; }
}

/* Weddings page: one heading block (owner picked option A of three, Nov 10 2026). The page title, its
   line and the buttons sit under the top photo; the second heading ("Real stories, start to finish")
   and its text are gone, and the wall opens under a thin "Real weddings" rule as wide as the section. */
.wall-rule { display: flex; align-items: center; gap: 28px; margin: 0 0 clamp(28px, 3vw, 44px); font: 600 var(--t-label)/1.5 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); }
.wall-rule::before, .wall-rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }
@media (max-width: 860px) {
  .wall-rule { gap: 16px; margin-bottom: 20px; letter-spacing: .22em; }
}


/* Weddings first screen = the home's (owner picked B, Nov 10 2026): the photo fills the screen under
   the clear header, the label, the rising headline and the two buttons sit on it in white, the photo
   pushes in and drifts like home ([data-hero] in site.js). Its own words, not the home's. On phones a
   narrower copy of the photo (weddings-hero-sm) keeps both faces in frame. */
.w-cover .hero-ph img { object-position: 50% 30%; }
.w-cover .actions { display: flex; align-items: center; gap: 28px; margin-top: 6px; }
.w-cover .btn.solid { background: #fff; color: var(--ink); border-color: #fff; }
.w-cover .btn.solid:hover { background: transparent; color: #fff; }
.w-cover .link { color: #fff; border-color: rgba(255, 255, 255, .6); }
.w-cover + #weddings { padding-top: clamp(56px, 5.5vw, 88px); }
@media (max-width: 860px) {
  .w-cover .hero-ph img { object-position: 50% 40%; }
  .w-cover .actions { flex-wrap: nowrap; gap: 18px; }
  .w-cover .btn.solid { padding: 15px 16px; white-space: nowrap; }
  .w-cover .link { white-space: nowrap; }
  .w-cover + #weddings { padding-top: 40px; }
}

/* ---------- going live (Nov 10 2026) ---------- */
/* the date form's spam trap: a field people never see; bots fill it in */
.qf-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.qf-send-err { margin: 14px 0 0; }
.qf-send-err a { text-decoration: underline; text-underline-offset: 3px; }
.qf-send-err[hidden] { display: none; }
.fine a { color: inherit; }
.fine a:hover { color: var(--ink); }

/* thank-you page: where things stand on the left, what they sent on the right */
.ty { padding-block: var(--step) var(--section); }
.ty-head { display: grid; gap: 18px; justify-items: start; max-width: 40em; }
.ty-head h1 { font-size: var(--t-1); }
.ty-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 112px); margin-top: clamp(36px, 4vw, 56px); align-items: start; }
.ty-steps { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.ty-steps li { display: grid; gap: 6px; padding: 18px 0 18px 30px; border-bottom: 1px solid var(--line); position: relative; color: var(--ink-2); font-size: 15px; }
.ty-steps li::before { content: ""; position: absolute; left: 0; top: 24px; width: 11px; height: 11px; border: 1px solid var(--ink-2); border-radius: 50%; }
.ty-steps li.is-done::before { background: var(--ink); border-color: var(--ink); }
.ty-steps li.is-now::before { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 6px var(--ink); }
.ty-t { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; color: var(--ink); max-width: none; }
.ty-t b { font: 400 20px/1.25 var(--serif); }
.ty-sent { display: grid; gap: 18px; padding: clamp(22px, 2.6vw, 36px); background: var(--panel); }
.ty-sent > div { display: grid; gap: 14px; }
.ty-sent .facts { margin: 0; }
.ty-sent .facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0 11px; border-bottom: 1px solid var(--line); }
.ty-sent dt { font: 600 var(--t-label)/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.ty-sent dd { margin: 0; text-align: right; font-size: 15px; overflow-wrap: anywhere; }
.ty-fix { color: var(--ink-2); font-size: 14px; }
.ty-wait { padding-top: 0; }
@media (max-width: 860px) {
  .ty-grid { grid-template-columns: 1fr; }
  .ty-sent { margin-inline: var(--bleed); }
}

/* privacy page: one reading column */
.prose { padding-bottom: var(--section); }
.prose-in { max-width: 68ch; }
.prose h2 { font: 400 var(--t-3)/1.25 var(--serif); margin: 40px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); line-height: 1.7; max-width: none; }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 12px; }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.prose b { color: var(--ink); font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* page not found */
.nf { padding-bottom: var(--section); }
.nf .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }