/* Anuvind Productions — shared styles.
   Direction: photographs hung like prints on a gallery wall. Square corners, flat colour fields,
   no shadows, gradients, glass or hairlines. One serif (Cormorant Garamond) and one sans (Manrope). */
:root {
  --cream: #faf6f1;      /* page ground */
  --paper: #f1e9df;      /* one tone step for panels */
  --blush: #efdcd6;      /* pastel field */
  --sage: #d6dccd;       /* pastel field */
  --lilac: #e4dde8;
  --sand: #ecdfcc;
  --rose: #c8968c;
  --rose-deep: #8a564d;  /* accent: links on hover, the active state */
  --ink: #33292a;
  --muted: #6b5e59;      /* secondary text, still 5:1 on the ground */
  --night: #2b2324;      /* the footer field */
  --serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --fs-small: .9375rem;                         /* 15 */
  --fs-body: 1.0625rem;                         /* 17 */
  --fs-lead: 1.375rem;                          /* 22 */
  --fs-h3: clamp(1.75rem, 2.6vw, 2.25rem);      /* 28-36 */
  --fs-h2: clamp(2.5rem, 5.2vw, 4.5rem);        /* 40-72 */
  --fs-display: clamp(3rem, 8vw, 7rem);         /* 48-112 */
  --r: 0px;              /* prints have square corners */
  --gap: clamp(12px, 1.4vw, 20px);
  --ease: cubic-bezier(.2,.7,.1,1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 3px; }
.wrap { max-width: 1360px; margin: 0 auto; padding-inline: 20px; }
@media (min-width: 760px) { .wrap { padding-inline: clamp(32px, 5vw, 72px); } }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.015em; text-wrap: balance; }
h2 { font-size: var(--fs-h2); line-height: 1; }
h2 em, h1 em { font-style: inherit; color: inherit; }
.center { text-align: center; }
.section { padding-block: clamp(96px, 12vw, 200px); }
.lead { color: var(--ink); font-size: var(--fs-body); line-height: 1.7; max-width: 36rem; }

/* entrances: parts of a section rise in turn */
.rv { opacity: .3; transform: translateY(28px); transition: opacity 1s ease, transform 1.1s var(--ease); }   /* starts softly visible, never blank */
.rv.in { opacity: 1; transform: none; }
.svc-list .rv:nth-child(2), .story-grid .rv:nth-child(2) { transition-delay: .08s; }
.svc-list .rv:nth-child(3), .story-grid .rv:nth-child(3) { transition-delay: .16s; }
.svc-list .rv:nth-child(4) { transition-delay: .24s; }

/* ===== Nav: a plain bar ===== */
.nav { position: fixed; inset: 0 0 auto; z-index: 40; transition: background .4s; }
.nav.solid { background: var(--cream); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 76px; }
.brand { display: flex; flex-direction: column; line-height: 1; gap: 5px; }
.brand b { font-family: var(--serif); font-weight: 500; font-size: var(--fs-lead); letter-spacing: .14em; }
.brand small { font-size: var(--fs-small); letter-spacing: .5em; color: var(--rose-deep); font-weight: 500; } /* taste-skill-ignore: part of the wordmark */
.links { display: flex; gap: clamp(18px, 2.2vw, 32px); font-size: var(--fs-small); }
.links a { color: var(--ink); padding-block: 6px; box-shadow: inset 0 -2px 0 transparent; transition: box-shadow .3s, color .3s; } /* taste-skill-ignore: 2px underline, not a shadow */
.links a:hover, .links a[aria-current] { box-shadow: inset 0 -2px 0 var(--rose-deep); } /* taste-skill-ignore: 2px underline */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; font-size: var(--fs-small); font-weight: 500; letter-spacing: .01em; transition: background .3s, color .3s, transform .2s; }
.pill:active { transform: translateY(1px); }
.pill.dark { background: var(--ink); color: var(--cream); }
.pill.dark:hover { background: var(--rose-deep); }
.pill.ghost { background: var(--paper); color: var(--ink); }
.pill.ghost:hover { background: var(--blush); }
.burger { display: none; width: 48px; height: 48px; background: var(--paper); place-items: center; }
.burger i, .burger i::before { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
.burger i::before { content: ""; position: absolute; top: 6px; }
.burger i { top: -3px; }
@media (max-width: 900px) {
  .links { position: fixed; inset: 76px 0 auto; flex-direction: column; align-items: flex-start; gap: 0; padding: 12px 20px 28px; background: var(--cream); transform: translateY(-130%); transition: transform .45s ease; z-index: -1; }
  .links.open { transform: none; }
  .links a { padding: 12px 0; font-size: var(--fs-lead); font-family: var(--serif); }
  .burger { display: grid; }
  .nav .pill.dark { display: none; }
}

/* ===== Hero: the original site's opening screen ===== */
.hero { position: relative; }
.hero-stage { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #2b2622; isolation: isolate; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; animation: heroZoom 2.4s cubic-bezier(.16,1,.3,1) both; }
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(43,38,34,.7), rgba(43,38,34,.15), rgba(43,38,34,.4)); } /* taste-skill-ignore: neutral scrim under text on a photo */
.hero-copy { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-inline: 24px; color: #faf7f2; }
.hero-sub { margin: 22px 0 0; max-width: 34ch; font-size: 1.125rem; line-height: 1.5; color: rgba(250,247,242,.92); animation-delay: .95s; }
.hero h1 { font-family: var(--serif); font-style: italic; font-weight: 400; color: #faf7f2; font-size: 13vw; line-height: 1.05; max-width: 64rem; letter-spacing: 0; }
@media (min-width: 640px) { .hero h1 { font-size: 3.75rem; } }
@media (min-width: 768px) { .hero h1 { font-size: 4.5rem; } }
@media (min-width: 1024px) { .hero h1 { font-size: 6rem; } }
.hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
.sq { display: inline-flex; align-items: center; min-height: 48px; font-size: var(--fs-small); letter-spacing: .02em; padding: 0 32px; transition: background .3s, color .3s, transform .2s; font-weight: 500; }
.sq:active { transform: translateY(1px); }
.sq.light { background: #faf7f2; color: #2b2622; }
.sq.light:hover { background: var(--blush); }
.sq.line { background: rgba(250,247,242,.14); color: #faf7f2; box-shadow: inset 0 0 0 1.5px rgba(250,247,242,.75); } /* taste-skill-ignore: the original's bordered button */
.sq.line:hover { background: rgba(250,247,242,.26); }
.a1 { animation: heroUp .9s .5s ease both; --y: 10px; }
.a2 { animation: heroUpBlur 1.1s .7s cubic-bezier(.16,1,.3,1) both; }
.a3 { animation: heroUp .9s 1.15s ease both; --y: 14px; }
@keyframes heroUp { from { opacity: 0; transform: translateY(var(--y)); } }
@keyframes heroUpBlur { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } }
.scroll-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: var(--fs-small); letter-spacing: .04em; color: rgba(250,247,242,.85); animation: heroFade 1s 1.6s both; }
.scroll-cue::after { content: ""; width: 2px; height: 40px; background: rgba(250,247,242,.5); }
@keyframes heroFade { from { opacity: 0; } }
@media (max-width: 760px) { .hero-photo { object-position: 30% center; } }
.hero-page .nav:not(.solid) .brand b, .hero-page .nav:not(.solid) .links a { color: #faf7f2; }
.hero-page .nav:not(.solid) .brand small { color: #f0d5ce; }
.hero-page .nav:not(.solid) .pill.dark { background: #faf7f2; color: var(--ink); }
.hero-page .nav:not(.solid) .burger { background: rgba(250,247,242,.9); }
@media (max-width: 900px) { .hero-page .nav:not(.solid) .links a { color: var(--ink); } }

/* ===== About: one print that changes, a field of sage behind it ===== */
.about { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.about h2 { font-size: var(--fs-h2); }
.about-visual { position: relative; width: 100%; max-width: 560px; padding: 0 0 64px 40px; cursor: pointer; --drift: 0px; }
.av-outline { position: absolute; left: 0; top: 48px; right: 56px; bottom: 120px; background: var(--sage); opacity: 0; transform: translateY(var(--drift)); transition: opacity 1.4s .4s ease; }
.about-visual.in .av-outline { opacity: 1; }
.av-main { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--paper); clip-path: inset(100% 0 0 0); transition: clip-path 1.6s cubic-bezier(.7,0,.2,1); }
.about-visual.in .av-main { clip-path: inset(0 0 0 0); }
.av-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity 1.8s ease, transform 7s linear; }
.av-slide.on { opacity: 1; transform: scale(1.02); }
.av-cap { position: absolute; left: 0; bottom: 0; display: grid; gap: 2px; min-width: 240px; padding: 18px 22px 16px; background: var(--cream); opacity: 0; transform: translateY(16px); transition: opacity 1s 1.2s ease, transform 1s 1.2s ease; }
.about-visual.in .av-cap { opacity: 1; transform: none; }
.av-names { font-family: var(--serif); font-style: italic; font-size: var(--fs-lead); line-height: 1.15; }
.av-place { font-size: var(--fs-small); color: var(--muted); }
.av-place.swap { animation: capIn .8s ease; }
@keyframes capIn { from { opacity: 0; transform: translateY(6px); } }
.av-bar { display: block; height: 3px; margin-top: 10px; background: var(--paper); overflow: hidden; }
.av-bar i { display: block; height: 100%; width: 100%; background: var(--rose-deep); transform-origin: left; animation: avBar 5.2s linear infinite; }
@keyframes avBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .av-main { clip-path: none; } .av-bar { display: none; } }
.about .lead { margin-top: 24px; }
.stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 18px 44px; margin: 40px 0 0; }
.stats dt { font-size: var(--fs-small); color: var(--muted); }
.stats dd { margin: 4px 0 0; font-family: var(--serif); font-size: var(--fs-lead); line-height: 1.15; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } .about-visual { margin-inline: auto; padding-left: 28px; } .stats { grid-template-columns: 1fr 1fr; } }

/* ===== Films: a full-width field of paper, three prints ===== */
.films { background: var(--paper); }
.films .wrap.center { text-align: left; }
.films h2 { font-size: var(--fs-display); font-weight: 300; }
.toggle { display: inline-flex; gap: 0; margin: 28px 0 0; background: var(--paper); }
.toggle button { min-height: 46px; padding: 0 22px; font-size: var(--fs-small); color: var(--ink); transition: background .3s; }
.toggle button:hover { background: var(--blush); }
.toggle button[aria-selected="true"] { background: var(--ink); color: var(--cream); }
.reel-list { display: grid; gap: var(--gap); margin-top: clamp(40px, 5vw, 72px); }
.reel-list[hidden] { display: none; }
.reel-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--gap); align-items: start; }
.reel-row .card:last-child { margin-top: clamp(40px, 7vw, 120px); }
@media (max-width: 760px) { .reel-row { grid-template-columns: 1fr; } .reel-row .card:last-child { width: 78%; margin: 0 0 0 auto; } }
.card { position: relative; display: block; width: 100%; overflow: hidden; aspect-ratio: 16/9; background: var(--sand); text-align: left; isolation: isolate; }
.card.big { aspect-ratio: 21/9; }
@media (max-width: 760px) { .card.big { aspect-ratio: 4/3; } }
.card img, .card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.card video { opacity: 0; transition: opacity .6s; }
.card:hover video.ready { opacity: 1; }
.card:hover img { transform: scale(1.04); }
.card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(40,28,25,.6), transparent 55%); z-index: 1; } /* taste-skill-ignore: neutral scrim under the title */
.card .meta { position: absolute; left: clamp(18px, 3vw, 34px); right: 96px; bottom: clamp(16px, 2.6vw, 30px); z-index: 2; color: #fff; }
.card .meta h3 { font-size: var(--fs-h3); font-weight: 400; line-height: 1.05; }
.card .meta p { margin: 6px 0 0; font-size: var(--fs-small); opacity: .9; }
.card .play { position: absolute; z-index: 2; right: clamp(18px, 3vw, 34px); bottom: clamp(16px, 2.6vw, 30px); width: 64px; height: 64px; display: grid; place-items: center; background: var(--cream); color: var(--ink); transition: transform .4s, background .4s; }
.card:hover .play { transform: scale(1.08); background: var(--blush); }
.card .badge { position: absolute; z-index: 2; top: 0; left: 0; padding: 10px 16px; background: var(--cream); color: var(--ink); font-size: var(--fs-small); }

/* ===== A few of our couples: a list that opens each story ===== */
.wl-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; margin-top: clamp(36px, 5vw, 64px); }
.wl-preview { position: sticky; top: 110px; margin: 0; aspect-ratio: 4/5; overflow: hidden; background: var(--paper); }
.wl-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .7s ease, transform 1.4s var(--ease); }
.wl-preview img.on { opacity: 1; transform: scale(1); }
.wl-preview figcaption { position: absolute; left: 0; bottom: 0; padding: 12px 18px; background: var(--cream); font-family: var(--serif); font-style: italic; font-size: var(--fs-lead); }
@media (max-width: 700px) { .wl-wrap { grid-template-columns: 1fr; } .wl-preview { display: none; } }
.wl { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wl-t { display: grid; gap: 6px; }
.wl a { position: relative; display: grid; grid-template-columns: 1fr 40px; align-items: center; gap: 20px; padding: 24px 20px; background: var(--paper); transition: background .4s, padding .4s; }
.wl li:nth-child(even) a { background: transparent; }
.wl a:hover { background: var(--blush); padding-inline: 32px; }
.wl .go { font-size: var(--fs-lead); color: var(--rose-deep); transform: translateX(-8px); transition: transform .4s; justify-self: end; }
.wl a:hover .go { transform: none; }
.wl .th { position: absolute; right: 120px; top: 50%; width: 130px; aspect-ratio: 4/5; object-fit: cover; opacity: 0; transform: translateY(-50%) rotate(-3deg) scale(.85); transition: opacity .4s, transform .5s var(--ease); pointer-events: none; z-index: 2; }
.wl a:hover .th { opacity: 1; transform: translateY(-50%) rotate(-3deg) scale(1); }
@media (hover: none), (max-width: 760px) { .wl .th { display: none; } }
.wl .n { display: none; }
.wl h3 { font-size: var(--fs-h3); font-weight: 400; }
.wl .pl { font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 560px) { .wl a { padding: 20px 16px; } .wl .go { transform: none; } }

/* ===== Story cards: prints at uneven heights ===== */
.story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(28px, 3vw, 44px) var(--gap); margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.story-grid .story-card:nth-child(3n+2) { margin-top: clamp(0px, 6vw, 96px); }
.story-grid .story-card:nth-child(3n+3) { margin-top: clamp(0px, 3vw, 48px); }
@media (max-width: 760px) { .story-grid .story-card:nth-child(n) { margin-top: 0; } }
.story-card { display: grid; gap: 16px; text-align: left; }
.story-card .ph { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--paper); }
.story-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.story-card:hover .ph img { transform: scale(1.05); }
.story-card h3 { font-size: var(--fs-h3); line-height: 1; }
.story-card p { margin: 6px 0 0; font-size: var(--fs-body); color: var(--muted); }
.story-card .open { font-size: var(--fs-small); font-weight: 500; color: var(--ink); justify-self: start; box-shadow: inset 0 -2px 0 var(--rose); padding-bottom: 2px; transition: box-shadow .3s; } /* taste-skill-ignore: 2px underline */
.story-card:hover .open { box-shadow: inset 0 -2px 0 var(--rose-deep); } /* taste-skill-ignore: 2px underline */

/* ===== Wedding page (story.html) ===== */
.page-top { padding-top: 76px; }
.story-hero { position: relative; height: min(92vh, 940px); overflow: hidden; background: var(--paper); }
.story-hero img { width: 100%; height: 100%; object-fit: cover; animation: heroIn 2.4s var(--ease) both; }
@keyframes heroIn { from { transform: scale(1.08); filter: blur(8px); } }
.story-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(40,28,25,.62), transparent 55%); } /* taste-skill-ignore: neutral scrim under the names */
.story-hero div { position: absolute; z-index: 1; left: 0; right: 0; bottom: clamp(28px, 6vw, 70px); text-align: center; color: #fff; padding-inline: 16px; }
.story-hero h1 { font-size: var(--fs-display); font-weight: 300; font-style: italic; line-height: .95; }
.story-hero p { margin: 18px 0 0; font-size: 1.125rem; letter-spacing: .02em; }
.story-text { max-width: 40rem; margin: clamp(64px, 9vw, 130px) auto; padding-inline: 20px; display: grid; gap: 22px; text-align: center; }
.story-text p { margin: 0; font-family: var(--serif); font-size: var(--fs-lead); line-height: 1.5; font-weight: 400; }
.chapter { max-width: 1240px; margin: 0 auto clamp(72px, 9vw, 140px); padding-inline: 20px; }
.chapter-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: clamp(24px, 3vw, 40px); }
.chapter-head h2 { font-size: var(--fs-h2); font-style: italic; font-weight: 300; }
.story-film video { width: 100%; background: #000; aspect-ratio: 16/9; }
.story-photos { display: grid; gap: var(--gap); }
.srow { display: grid; gap: var(--gap); align-items: start; }
.srow.n1 { max-width: 640px; width: 100%; }
.srow.n1:nth-of-type(4n+1) { margin-left: 8%; }
.srow.n1:nth-of-type(4n+3) { margin-left: auto; margin-right: 6%; }
.srow.n1.wide { max-width: none; margin: 0; }
.srow.n2 { grid-template-columns: 1.25fr 1fr; }
.srow.n2 button:last-child { margin-top: clamp(32px, 6vw, 96px); }
.srow.n3 { grid-template-columns: 1fr 1.2fr 1fr; }
.srow.n3 button:nth-child(2) { margin-top: clamp(24px, 4vw, 64px); }
.srow button { display: block; overflow: hidden; background: var(--paper); }
.srow img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.6s var(--ease); }
.srow.in img { transform: scale(1); }
.srow.n2 img, .srow.n3 img { aspect-ratio: 2/3; }
.srow button:hover img { transform: scale(1.03); }
@media (max-width: 640px) {
  .srow.n1:nth-of-type(n) { margin: 0; }
  .srow.n2 { grid-template-columns: 1fr 1fr; }
  .srow.n3 { grid-template-columns: 1fr 1fr; } .srow.n3 button:first-child { grid-column: 1 / -1; width: 78%; } .srow.n3 button:first-child img { aspect-ratio: 4/5; }
  .srow.n3 button:nth-child(2) { margin-top: 0; }
}
.cta-band { text-align: center; display: grid; justify-items: center; gap: 22px; }

/* ===== Weddings page (weddings.html) ===== */
.page-head { padding-block: clamp(140px, 16vw, 210px) clamp(40px, 5vw, 64px); text-align: center; display: grid; justify-items: center; gap: 18px; }
.page-head h1 { font-size: var(--fs-display); font-weight: 300; line-height: .98; }
.filters { margin-top: 18px; }
.story-card .line { margin: 10px 0 0; font-size: var(--fs-small); color: var(--ink); line-height: 1.6; max-width: 30rem; }
.story-card .meta-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.story-card .yr { font-family: var(--serif); font-size: var(--fs-lead); color: var(--rose-deep); }
.empty { text-align: center; color: var(--muted); padding: 60px 16px; grid-column: 1 / -1; }

/* ===== Services: statement, list pushed right, one photograph ===== */
.svc-head { font-size: var(--fs-h2); max-width: 14ch; padding-left: 3vw; }
.svc-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 1fr) minmax(0, 7fr); margin-top: clamp(48px, 7vw, 96px); align-items: end; }
.svc-photo { grid-column: 1; margin: 0; }
.svc-photo img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.svc-photo figcaption, .svc-group { font-size: var(--fs-small); color: var(--muted); margin: 12px 0 0; }
.svc-list { grid-column: 3; display: grid; }
.svc-group { margin: 0 0 8px; font-family: var(--serif); font-style: italic; font-size: var(--fs-lead); color: var(--rose-deep); }
.svc-group:not(:first-child) { margin-top: 44px; }
.svc-row { display: grid; grid-template-columns: minmax(0, 9rem) 1fr 28px; gap: 20px; align-items: baseline; padding: 18px 0; transition: padding .35s, background .35s; }
.svc-row span:first-child { font-family: var(--serif); font-size: var(--fs-lead); line-height: 1.1; }
.svc-row span:nth-child(2) { font-size: var(--fs-small); }
.svc-row i { font-style: normal; color: var(--rose-deep); justify-self: end; transition: transform .35s; }
.svc-row:hover { background: var(--paper); padding-inline: 16px; }
.svc-row:hover i { transform: translateX(4px); }
@media (max-width: 860px) {
  .svc-head { padding-left: 0; }
  .svc-body { grid-template-columns: 1fr; }
  .svc-list { grid-column: 1; grid-row: 1; }
  .svc-photo { width: 62%; margin: 48px 0 0 auto; grid-row: 2; }
  .svc-row { grid-template-columns: 1fr 24px; gap: 4px 12px; }
  .svc-row span:nth-child(2) { grid-column: 1; }
  .svc-row i { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
}

/* ===== Words: portrait and offset quotation ===== */
.words-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr); align-items: start; }
.words-photo { grid-column: 1; position: relative; aspect-ratio: 3/4; max-height: 74svh; overflow: hidden; background: var(--paper); }
.wq-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.6s ease, transform 8s linear; }
.wq-img.on { opacity: 1; transform: scale(1); }
.words-text { grid-column: 3; padding-top: clamp(40px, 9vw, 140px); display: grid; }
.words-text h2 { font-size: var(--fs-h2); }
.wq { grid-row: 2; grid-column: 1; margin: 32px 0 0; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .9s ease, transform .9s var(--ease), visibility 0s .9s; }
.wq.on { opacity: 1; visibility: visible; transform: none; transition: opacity .9s ease, transform .9s var(--ease), visibility 0s; }
.wq blockquote { margin: 0; font-family: var(--serif); font-size: var(--fs-lead); line-height: 1.4; max-width: 38ch; }
.wq figcaption { margin-top: 24px; font-size: var(--fs-small); }
.wq figcaption a { box-shadow: inset 0 -2px 0 var(--rose); } /* taste-skill-ignore: 2px underline */
.wq-nav { grid-row: 3; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 40px; }
.wq-nav button { min-height: 44px; padding: 0 16px; background: var(--paper); font-size: var(--fs-small); transition: background .3s; }
.wq-nav button:hover { background: var(--blush); }
.wq-nav button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
@media (max-width: 860px) {
  .words-grid { grid-template-columns: 1fr; }
  .words-photo { width: 72%; max-height: none; }
  .words-text { grid-column: 1; padding-top: 36px; }
}

/* ===== Contact: a flat field of blush ===== */
.contact { background: var(--blush); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact h2 { font-size: var(--fs-h2); font-weight: 300; }
.reach { display: grid; gap: 4px; margin-top: 36px; }
.reach a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 20px; background: rgba(250,246,241,.6); font-weight: 500; font-size: var(--fs-small); transition: background .3s, padding .3s; }
.reach a:hover { background: var(--cream); padding-left: 26px; }
.reach small { display: block; font-size: var(--fs-small); color: var(--muted); font-weight: 400; }
form { background: var(--cream); padding: clamp(24px, 3.5vw, 48px); display: grid; gap: 18px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 520px) { .row2 { grid-template-columns: 1fr; } }
label { display: grid; gap: 6px; font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
input, select, textarea { font: inherit; font-size: var(--fs-small); color: var(--ink); background: var(--paper); border: 0; padding: 12px 14px; border-radius: 0; width: 100%; transition: background .3s; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--rose-deep); outline-offset: 0; background: #fff; }
textarea { resize: vertical; min-height: 110px; }
form .pill { margin-top: 8px; }

/* ===== Footer: the name first, then the ways in ===== */
.site-foot { background: var(--night); color: #f3ebe4; padding-block: clamp(72px, 9vw, 130px) 36px; overflow: hidden; }
.foot-name { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 9.4vw, 9.6rem); line-height: .9; letter-spacing: -.03em; white-space: nowrap; }
.foot-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; margin-top: clamp(48px, 6vw, 80px); }
.foot-places { display: grid; gap: 6px; align-content: start; }
.foot-places a { font-family: var(--serif); font-size: var(--fs-h3); color: #f0d5ce; justify-self: start; transition: color .3s, transform .3s; }
.foot-places a:hover { color: #fff; transform: translateX(6px); }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.foot-cols p { margin: 0 0 10px; font-size: var(--fs-small); color: #b8aaa3; }
.foot-cols a { display: block; padding: 4px 0; font-size: var(--fs-small); transition: color .3s; }
.foot-cols a:hover { color: #f0d5ce; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: clamp(64px, 8vw, 110px); font-size: var(--fs-small); color: #b8aaa3; }
.foot-legal a:hover { color: #fff; }
@media (max-width: 760px) { .foot-row { grid-template-columns: 1fr; } .foot-cols { grid-template-columns: 1fr 1fr; } .foot-name { font-size: 11.2vw; } }

/* ===== Lightbox ===== */
.lb { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; background: rgba(28,22,22,.94); padding: 16px; }
.lb.open { display: grid; animation: fade .4s ease; }
@keyframes fade { from { opacity: 0; } }
.lb-stage { max-width: min(1400px, 100%); max-height: 88vh; width: 100%; display: grid; place-items: center; }
.lb-stage video, .lb-stage img { max-height: 88vh; max-width: 100%; }
.lb-stage video { width: 100%; background: #000; }
.lb-x, .lb-nav { position: absolute; width: 52px; height: 52px; background: var(--cream); color: var(--ink); display: grid; place-items: center; font-size: var(--fs-lead); transition: background .3s; }
.lb-x:hover, .lb-nav:hover { background: var(--blush); }
.lb-x { top: 16px; right: 16px; }
.lb-nav { top: 50%; margin-top: -26px; }
.lb-nav.prev { left: 16px; } .lb-nav.next { right: 16px; }
.lb:not(.photos) .lb-nav { display: none; }
.lb-yt { width: min(1200px, 100%); aspect-ratio: 16/9; }
.lb-yt iframe { width: 100%; height: 100%; border: 0; background: #000; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .rv { opacity: 1; transform: none; } html { scroll-behavior: auto; } }

/* ===== Films on a couple's page (YouTube loads only on click) ===== */
.story-film.yt, .story-film.yt-on { position: relative; display: block; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #000; }
.story-film.yt img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.story-film.yt::after { content: ""; position: absolute; inset: 0; background: rgba(40,28,25,.22); transition: background .4s; }
.story-film.yt:hover img { transform: scale(1.03); }
.story-film.yt:hover::after { background: rgba(40,28,25,.36); }
.story-film.yt .play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; display: grid; place-items: center; background: var(--cream); color: var(--ink); transition: transform .4s, background .4s; }
.story-film.yt:hover .play { transform: scale(1.08); background: var(--blush); }
.story-film.yt-on iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* the link between a couple's wedding and pre-wedding pages */
.see-also { max-width: 1200px; margin: 0 auto clamp(72px, 9vw, 140px); padding: 16px; display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: 28px; background: var(--paper); width: calc(100% - 40px); transition: background .4s; }
.see-also:hover { background: var(--blush); }
.see-also img { width: 140px; aspect-ratio: 1; object-fit: cover; }
.see-also small { display: block; font-size: var(--fs-small); color: var(--muted); }
.see-also b { display: block; font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); margin-top: 2px; line-height: 1.05; }
.see-also em { display: block; margin-top: 4px; font-style: normal; font-size: var(--fs-body); color: var(--rose-deep); }
.see-also i { font-style: normal; font-size: var(--fs-lead); padding-right: 12px; transition: transform .3s; }
.see-also:hover i { transform: translateX(6px); }
@media (max-width: 520px) { .see-also { grid-template-columns: 88px 1fr; gap: 18px; } .see-also img { width: 88px; } .see-also i { display: none; } }

/* ===== Commercial page: brand work hung in groups ===== */
.brands-reels { display: grid; gap: var(--gap); }
.brow { display: grid; gap: var(--gap); align-items: end; }
.brow.wides { grid-template-columns: repeat(6, 1fr); }
.brow.wides .bcard { grid-column: span 2; }
.brow.wides .bcard:nth-child(n+4) { grid-column: span 3; }
.brow.talls { grid-template-columns: 1fr 1fr 1fr 1.185fr 1.333fr; }
.brow.music { grid-template-columns: repeat(3, 1fr); }
.brow-label { margin: 56px 0 8px; font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.05; }
.brow-label:first-child { margin-top: 0; }
.bcard { position: relative; display: block; width: 100%; overflow: hidden; background: #1b1513; }
.bcard.wide { aspect-ratio: 16/9; }
.bcard.tall { aspect-ratio: 9/16; }
.bcard.photo { aspect-ratio: 2/3; }
.bcard.shoot { aspect-ratio: 3/4; }
.bcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s, transform 1.2s var(--ease); }
.bcard video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s, transform 1.2s var(--ease); }
.bcard.live video { opacity: 1; }
.bcard:hover img, .bcard:hover video { transform: scale(1.04); }
.bcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,14,12,.66), transparent 50%); pointer-events: none; } /* taste-skill-ignore: neutral scrim under the caption */
.bmeta { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; color: #fbf6f0; font-size: var(--fs-small); text-align: left; line-height: 1.4; }
.bmeta b { display: block; font-family: var(--serif); font-size: var(--fs-lead); font-weight: 400; }
.bcard.tall .bmeta b, .bcard.photo .bmeta b, .bcard.shoot .bmeta b { font-size: var(--fs-lead); }
.bcount { position: absolute; z-index: 1; top: 0; right: 0; padding: 8px 12px; background: var(--cream); color: var(--ink); font-size: var(--fs-small); }
.ytplay { position: absolute; z-index: 1; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; display: grid; place-items: center; background: var(--cream); color: var(--ink); transition: transform .4s, background .4s; }
.bcard.ytc:hover .ytplay { transform: scale(1.1); background: var(--blush); }
@media (max-width: 900px) {
  .brands-reels, .brow { gap: 12px; }
  .brow.wides, .brow.music { grid-template-columns: 1fr; }
  .brow.wides .bcard, .brow.wides .bcard:nth-child(n+4) { grid-column: auto; }
  .brow.talls { grid-template-columns: 1fr 1fr; align-items: start; }
  .brow.talls .bcard:nth-child(even) { margin-top: 36px; }
  .brow-label { margin-top: 40px; }
}

/* ===== Home: one "Commercial" section that opens commercial.html ===== */
.commercial-entry { padding-block: 0 clamp(96px, 12vw, 200px); }
.com-link { position: relative; display: grid; place-items: center; height: clamp(300px, 38vw, 520px); overflow: hidden; background: #1b1513; isolation: isolate; text-align: center; }
.com-link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.85); transition: transform 1.6s var(--ease), filter .8s; }
.com-link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(28,20,18,.55); transition: background .6s; }
.com-link:hover img { transform: scale(1.05); filter: saturate(1); }
.com-link:hover::before { background: rgba(28,20,18,.42); }
.com-copy { display: grid; gap: 16px; color: #fbf6f0; padding: 0 16px; }
.com-copy small { font-size: var(--fs-small); color: #f0d5ce; }
.com-copy b { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: var(--fs-display); line-height: 1; letter-spacing: -.01em; }
.com-copy em { font-style: normal; font-size: var(--fs-small); font-weight: 500; justify-self: center; min-height: 48px; display: inline-flex; align-items: center; padding: 0 26px; background: #fbf6f0; color: var(--ink); transition: background .3s; }
.com-link:hover .com-copy em { background: var(--blush); }

/* ===== 3D 1: the wedding album (index.html) ===== */
.album-sec { position: relative; height: 340vh; background: var(--paper); padding-top: clamp(96px, 12vw, 180px); }
.album-pin { position: sticky; top: 0; height: 100svh; display: grid; padding-top: 76px; overflow: hidden; }
.album-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 60px; align-items: end; }
.album-head .lead { margin: 0; }
.album-stage { display: grid; place-items: center; perspective: 2400px; padding: 24px 20px 48px; }
.album { --shift: -25%; position: relative; width: min(1120px, 94vw, 270svh); aspect-ratio: 3 / 1; transform-style: preserve-3d; transform: translateX(var(--shift)) rotateX(14deg); transition: transform .1s linear; }
.pg-base, .leaf { position: absolute; top: 0; width: 50%; height: 100%; }
.pg-base.left { left: 0; background: var(--cream); }
.pg-base.right { left: 50%; background: var(--night); overflow: hidden; }
.pg-base.right img { width: 100%; height: 100%; object-fit: contain; }
.pg-end { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); white-space: nowrap; max-width: 92%; min-height: 48px; display: inline-flex; align-items: center; padding: 0 22px; background: var(--cream); color: var(--ink); font-size: var(--fs-small); font-weight: 500; }
.pg-base.right:hover .pg-end { background: var(--blush); }
.leaf { left: 50%; transform-origin: left center; transform-style: preserve-3d; will-change: transform; }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: var(--cream); }
.face img { width: 100%; height: 100%; object-fit: cover; }
.face.back { transform: rotateY(180deg); }
.pg { width: 100%; height: 100%; display: grid; place-content: center; text-align: center; gap: 10px; padding: 8%; }
.pg.cover { background: var(--ink); color: #f3e3dc; }
.pg.cover b { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.6rem, 4vw, 3.6rem); line-height: 1; color: #f6e7df; }
.pg.cover span { font-size: var(--fs-small); color: #d9c3ba; }
.pg.inside { background: var(--blush); }
.pg.inside p { margin: 0; font-family: var(--serif); font-style: italic; font-size: var(--fs-lead); line-height: 1.3; max-width: 18ch; }
.spine { position: absolute; left: calc(50% - 1px); top: 0; width: 2px; height: 100%; background: rgba(51,41,42,.18); transform: translateZ(1px); pointer-events: none; }
@media (max-width: 760px) {
  .album-sec { height: 300vh; }
  .album-head { grid-template-columns: 1fr; }
  .album { width: 96vw; transform: translateX(var(--shift)) rotateX(8deg); }
  .pg.cover b { font-size: 1.35rem; }
  .pg.inside p { font-size: 1rem; }
  .pg-end { font-size: .85rem; min-height: 40px; padding: 0 12px; }
}

/* ===== 3D 2: fly-through of couples' photographs (weddings.html) ===== */
.fly { position: relative; height: 520vh; background: var(--night); }
.fly-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; perspective: 900px; perspective-origin: 50% 50%; display: grid; place-items: center; }
.fly-world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.fly-item { position: absolute; left: 0; top: 0; width: clamp(180px, 22vw, 340px); transform: translate(-50%, -50%) translate3d(var(--x), var(--y), var(--z)); display: block; }
.fly-item img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.fly-item span { display: block; margin-top: 10px; color: #f3e3dc; font-family: var(--serif); font-style: italic; font-size: var(--fs-lead); }
.fly-line { position: absolute; left: 0; top: 0; width: 90vw; transform: translate(-50%, -50%) translate3d(0, 0, var(--z)); margin: 0; color: #f6e7df; font-family: var(--serif); font-style: italic; font-size: var(--fs-h2); line-height: 1; text-align: center; padding: 0 20px; pointer-events: none; }
@media (max-width: 760px) { .fly { height: 440vh; } .fly-item { width: 46vw; } .fly-item span { font-size: 1rem; } }

/* ===== 3D 3: the ring of couples (index.html) ===== */
.ring-stage { --cw: clamp(170px, 19vw, 260px); position: relative; height: calc(var(--cw) * 1.25 + 120px); margin-top: clamp(36px, 5vw, 64px); perspective: 1800px; display: grid; place-items: center; cursor: grab; touch-action: pan-y; user-select: none; }
.ring-stage:active { cursor: grabbing; }
.ring { --r: 600px; position: relative; width: var(--cw); aspect-ratio: 4/5; transform-style: preserve-3d; pointer-events: none; }
.ring-card { position: absolute; inset: 0; pointer-events: auto; transform: rotateY(var(--a)) translateZ(var(--r)); backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--paper); }
.ring-card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ring-card span { position: absolute; left: 0; right: 0; top: 100%; padding-top: 10px; font-size: var(--fs-small); color: var(--muted); }
.ring-card b { display: block; font-family: var(--serif); font-weight: 400; font-size: var(--fs-lead); color: var(--ink); line-height: 1.1; }
.ring-card:focus-visible { outline-offset: 6px; }
.ring-hint { margin: 64px 0 0; text-align: center; font-size: var(--fs-small); color: var(--muted); }

/* ===== 3D 4: prints that tilt towards the pointer ===== */
.tilting { transition: transform .12s ease-out !important; z-index: 3; }
.card, .bcard, .story-card .ph, .srow button, .wl-preview, .com-link, .story-film.yt { transition: transform .6s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .album-sec, .fly { height: auto; }
  .album-pin, .fly-pin { position: relative; height: auto; }
  .album { --shift: 0%; transform: none; }
  .fly-pin { display: none; }
}

/* ===== Richer ground: album-paper grain over the whole site, and a colour field per section ===== */
body::before { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .16  0 0 0 0 .15  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Films: a cinema-dark field */
.films { background: var(--night); color: #f3e9e2; }
.films h2 { color: #f6e7df; }
/* Real couples (the ring): a blush field */
#stories { background: var(--blush); }
#stories .lead { color: var(--ink); }
#stories .pill.ghost { background: var(--cream); }
#stories .pill.ghost:hover { background: #fff; }
.ring-card { background: var(--cream); }
/* What we make: a sage field */
.svc-sec { background: var(--sage); }
.svc-sec .svc-row:hover { background: rgba(250,246,241,.55); }
.svc-sec .svc-photo figcaption, .svc-sec .svc-group { color: #3f4a37; }
/* the couples list rows sit on cream, alternating with a paper tone */
@media (prefers-reduced-motion: reduce) { body::before { display: none; } }

/* ===== 3D polish ===== */
/* album: light on the turning page, and page-block edges whose thickness follows the pages on each side */
.leaf .face::after { content: ""; position: absolute; inset: 0; background: #1d1516; opacity: var(--shade, 0); pointer-events: none; }
.album { --left-pages: 0; --right-pages: 4; }
.edge { position: absolute; top: 2px; bottom: 2px; background: repeating-linear-gradient(90deg, #efe6dc 0 2px, #d9cdbf 2px 3px); pointer-events: none; } /* taste-skill-ignore: drawn page edges of the album, not a decorative gradient */
.edge.l { right: 100%; width: calc(var(--left-pages) * 3px); }
.edge.r { left: 100%; width: calc(var(--right-pages) * 3px); }
/* ring: the couple in front comes forward, arrows for turning */
.ring-card { transition: opacity .3s, filter .3s; }
.ring-card.front span b { color: var(--rose-deep); }
.ring-arrow { position: absolute; top: 40%; width: 52px; height: 52px; display: grid; place-items: center; background: var(--cream); color: var(--ink); font-size: 1.2rem; z-index: 5; transition: background .3s, transform .2s; }
.ring-arrow:hover { background: #fff; }
.ring-arrow:active { transform: scale(.94); }
.ring-arrow.prev { left: 0; } .ring-arrow.next { right: 0; }
/* fly-through: a soft dark edge so the photos emerge from the night */
.fly-pin::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 220px 60px var(--night); } /* taste-skill-ignore: vignette inside the dark stage */

/* ===== Contact: inquiries go straight to WhatsApp ===== */
.contact-grid { align-items: center; }
.contact-copy .lead { margin: 22px 0 0; }
.wa-big { display: inline-flex; align-items: center; gap: 18px; margin-top: 36px; min-height: 76px; padding: 14px 30px 14px 22px; background: var(--ink); color: var(--cream); transition: background .3s, transform .2s; }
.wa-big:hover { background: #1f6f4a; }
.wa-big:active { transform: translateY(1px); }
.wa-big span { display: grid; gap: 2px; font-size: var(--fs-small); color: #e8ddd6; }
.wa-big b { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1; color: #fff; }
.contact-alt { margin: 22px 0 0; font-size: var(--fs-body); }
.contact-alt a { box-shadow: inset 0 -2px 0 var(--rose-deep); } /* taste-skill-ignore: 2px underline */
.contact-photo { margin: 0; justify-self: end; width: min(100%, 460px); }
.contact-photo img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
@media (max-width: 860px) { .contact-photo { width: 72%; justify-self: end; } }

/* ===== Album v2: rounded pages, resting shadow, whole photographs mounted on paper ===== */
.album { --ar: clamp(6px, 1vw, 14px); }
.pg-base.left { border-radius: var(--ar) 0 0 var(--ar); overflow: hidden; box-shadow: 0 40px 70px -34px rgba(51,41,42,.5); } /* taste-skill-ignore: the album rests above the table */
.pg-base.right { border-radius: 0 var(--ar) var(--ar) 0; overflow: hidden; background: var(--cream); box-shadow: 0 40px 70px -34px rgba(51,41,42,.5); } /* taste-skill-ignore: the album rests above the table */
.face { border-radius: 0 var(--ar) var(--ar) 0; }
.edge.l { border-radius: var(--ar) 0 0 var(--ar); }
.edge.r { border-radius: 0 var(--ar) var(--ar) 0; }
.pg.paper { position: relative; display: block; padding: 0; background: #fbf7f1; }
.pg-pair, .pg-one, .pg-wide { position: absolute; inset: 7% 7% 15%; }
.pg-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4%; }
.pg-pair img, .pg-wide img, .pg-one img { width: 100%; height: 100%; object-fit: contain; }
.pg-one { display: grid; grid-template-columns: 1fr 1fr; gap: 6%; align-items: center; }
.pg-one div { display: grid; gap: 8px; text-align: left; }
.pg-one b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1rem, 2.2vw, 2rem); color: var(--ink); }
.pg-one span { font-size: clamp(.7rem, 1vw, .95rem); color: var(--muted); line-height: 1.4; }
.pg-cap { position: absolute; left: 0; right: 0; bottom: 4%; margin: 0; text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(.8rem, 1.4vw, 1.25rem); color: var(--muted); }
.pg-base.right .pg-wide { inset: 7% 7% 7%; }
.pg-base.right .pg-end { bottom: 5%; }
.pg-base.right .pg-wide img { opacity: 1; }
@media (max-width: 760px) { .pg-one span { display: none; } .pg-pair, .pg-one, .pg-wide { inset: 6% 6% 16%; } }
.pg-pair, .pg-one { grid-template-rows: minmax(0, 1fr); }
.pg-pair img, .pg-one img, .pg-wide img { min-height: 0; max-height: 100%; }

/* ===== Home colour rhythm: dark, cream, paper, dark, lilac, blush, wine, sage, sand, blush, dark ===== */
#weddings { background: var(--lilac); }
#weddings .wl a { background: rgba(250,246,241,.55); }
#weddings .wl li:nth-child(even) a { background: transparent; }
#weddings .wl a:hover { background: var(--cream); }
.commercial-entry { background: #4a2f33; padding-block: clamp(80px, 10vw, 160px); }
.words { background: var(--sand); }
.words .wq-nav button { background: rgba(250,246,241,.6); }
.words .wq-nav button:hover { background: var(--cream); }
.words .wq-nav button[aria-pressed="true"] { background: var(--ink); }