/* LaVue price page prototype. Colours: the official LaVue palette (brand/Color.pdf) plus one deep mocha for the cover,
   the signature card and the footer. Only transform-type properties, opacity and masks move. */
:root {
  --cream: #faf8f2; --rose: #cb998d; --mocha: #b18978; --blush: #efc2b2;
  --ink: #2a2320; --ink-soft: #75665f; --deep: #1c1714; --deep-card: #2a201c;
  --charcoal: #1a1817;          /* LaVue's soft charcoal (the portal's dark mode), the opening's background */
  --line: rgb(203 153 141 / 0.35);
  --font: "Alexandria", system-ui, sans-serif;     /* Arabic and English text: thin and simple (owner, option A) */
  --font-serif: "Cormorant Garamond", serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --soft: cubic-bezier(0.45, 0, 0.55, 1);
  --gutter: 1.25rem;
  --logo-top: 33svh;            /* where the logo sits: the same spot in the opening and on the cover */
  --logo-w: min(44vw, 11.5rem);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font); font-weight: 300; line-height: 1.7; overflow-x: hidden; }
img { display: block; max-width: 100%; }

/* ---------- The opening ---------- */
.intro { position: fixed; inset: 0; z-index: 50; overflow: hidden; background: var(--charcoal); cursor: pointer; transition: opacity 1.3s var(--soft), visibility 1.3s; }
.intro.out { opacity: 0; visibility: hidden; }
/* Like the Symphony of Vines opening: the logo starts a little small, invisible and blurred, and comes into focus over 2 s. */
.intro-logo {
  position: absolute; top: var(--logo-top); left: 50%; width: var(--logo-w); translate: -50% -50%;
  opacity: 0; scale: 0.8; filter: blur(20px); animation: logo-focus 2s var(--ease) 0.3s forwards;
}
.intro-logo img { width: 100%; }
@keyframes logo-focus { to { opacity: 1; scale: 1; filter: blur(0); } }

/* ---------- Fixed bits: language switch, small logo, top fade ---------- */
.lang {
  position: fixed; z-index: 40; top: max(0.9rem, env(safe-area-inset-top)); inset-inline-end: var(--gutter);
  display: flex; padding: 3px; border-radius: 999px; border: 1px solid rgb(203 153 141 / 0.3);
  background: rgb(250 248 242 / 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lang button {
  font: 400 0.72rem/1 var(--font); letter-spacing: 0.12em; color: var(--ink-soft);
  background: none; border: 0; border-radius: 999px; padding: 0 0.95rem; min-height: 2.5rem; cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--deep-card); color: var(--cream); }
.lang button:focus-visible, .jump a:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.mini-logo {
  position: fixed; z-index: 40; top: calc(max(0.9rem, env(safe-area-inset-top)) + 0.7rem); left: 50%;
  width: 5.25rem; opacity: 0; translate: -50% -0.5rem; pointer-events: none; transition: opacity 0.6s, translate 0.6s var(--ease);
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: calc(max(0.9rem, env(safe-area-inset-top)) + 6rem); z-index: 35; pointer-events: none; opacity: 0; transition: opacity 0.6s;
  background: linear-gradient(var(--cream) 55%, rgb(250 248 242 / 0));
}
.past-cover .mini-logo, .page-open .mini-logo { opacity: 1; translate: -50% 0; }
.past-cover::before, .page-open::before { opacity: 1; }
html.locked { overflow: hidden; }

/* The menu button: two thin lines in a round cream button, like the language switch, at the right (left in English). */
.menu-btn {
  position: fixed; z-index: 40; top: max(0.9rem, env(safe-area-inset-top)); inset-inline-start: var(--gutter);
  display: grid; place-content: center; gap: 6px; width: 2.9rem; height: 2.9rem; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgb(203 153 141 / 0.3); background: rgb(250 248 242 / 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.menu-btn span { display: block; width: 1.15rem; height: 1px; background: var(--ink); }
.menu-btn span + span { width: 0.75rem; justify-self: end; }
.menu-btn:focus-visible, .menu a:focus-visible, .menu-close:focus-visible, .page-back:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

/* The side menu: LaVue charcoal, slides in from the right (left in English); the items rise in one after another. */
.menu-scrim {
  position: fixed; inset: 0; z-index: 55; background: rgb(20 16 14 / 0.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.5s var(--soft);
}
.menu {
  position: fixed; z-index: 60; inset-block: 0; inset-inline-start: 0; width: min(64vw, 16rem);   /* owner, 2026-11-04: smaller */
  display: flex; flex-direction: column; padding: max(0.9rem, env(safe-area-inset-top)) 1.25rem max(1.5rem, env(safe-area-inset-bottom));
  background: var(--charcoal); color: var(--cream); translate: 100% 0; transition: translate 0.55s var(--ease); overflow-y: auto;
}
:root:lang(en) .menu { translate: -100% 0; }
.menu[hidden] { display: none; }
.menu-open .menu-scrim { opacity: 1; }
.menu-open .menu { translate: 0 0; }
.menu-close { position: relative; align-self: flex-start; width: 2.6rem; height: 2.6rem; margin-inline-start: -0.6rem; border: 0; background: none; cursor: pointer; }
.menu-close span { position: absolute; top: 50%; left: 25%; width: 50%; height: 1px; background: var(--cream); rotate: 45deg; }
.menu-close span + span { rotate: -45deg; }
.menu-list { margin: 2rem 0 0; padding: 0; list-style: none; }
.menu-list li { border-bottom: 1px solid rgb(250 248 242 / 0.1); opacity: 0; translate: 0 0.8rem; transition: opacity 0.5s, translate 0.6s var(--ease); }
.menu-open .menu-list li { opacity: 1; translate: 0 0; }
.menu-list li:nth-child(1) { transition-delay: 0.12s; }
.menu-list li:nth-child(2) { transition-delay: 0.18s; }
.menu-list li:nth-child(3) { transition-delay: 0.24s; }
.menu-list li:nth-child(4) { transition-delay: 0.3s; }
.menu-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.8rem 0; color: var(--cream); font-size: 1.15rem; font-weight: 200; text-decoration: none; }
:root:lang(en) .menu-list a { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 400; }
.menu-list a[aria-disabled] { color: rgb(250 248 242 / 0.35); cursor: default; }
.menu-list small { font-family: var(--font); font-size: 0.62rem; font-weight: 300; letter-spacing: 0.1em; color: var(--blush); opacity: 0.7; }
.menu-foot { margin-top: auto; padding-top: 2.5rem; }
.menu-foot img { width: 5rem; }
.menu-foot .slogan { margin: 0.3rem 0 0; font-size: 0.8rem; }

/* The Portfolio and Albums pages: over the main page, each with its own scrolling; they fade in. */
.page {
  position: fixed; inset: 0; z-index: 30; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: var(--cream);
  padding: calc(max(0.9rem, env(safe-area-inset-top)) + 4.25rem) 0 max(2.5rem, env(safe-area-inset-bottom));
  opacity: 0; translate: 0 1.25rem; transition: opacity 0.5s var(--soft), translate 0.6s var(--ease);
}
.page.shown { opacity: 1; translate: 0 0; }
.page-back {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; margin: 0 0 0.5rem; margin-inline-start: 0.6rem; padding: 0 0.6rem;
  border: 0; background: none; color: var(--ink-soft); font: 300 0.85rem var(--font); cursor: pointer;
}
:root:lang(en) .page-back span:first-child { display: inline-block; rotate: 180deg; }
.page-works-foot { margin: 0; text-align: center; }
/* The Albums page: a slow lookbook on a faint linen weave; photos of different widths, unveiled from the bottom. */
.page-albums {
  background-color: #f6f2eb;
  background-image: repeating-linear-gradient(0deg, rgb(120 98 80 / 0.035) 0 1px, transparent 1px 3px),
                    repeating-linear-gradient(90deg, rgb(120 98 80 / 0.03) 0 1px, transparent 1px 3px);
}
.alb-flow { display: grid; gap: 2.75rem; padding-bottom: 2rem; }
.alb { margin: 0; }
.alb-start { width: 78%; justify-self: start; margin-inline-start: var(--gutter); }
.alb-end { width: 74%; justify-self: end; margin-inline-end: var(--gutter); }
.alb-wide { width: 86%; }
.alb-pair { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 0.6rem; padding: 0 var(--gutter); }
.alb-pair .alb + .alb { margin-top: 3.5rem; }
.alb-m { overflow: hidden; -webkit-clip-path: inset(100% 0 0 0); clip-path: inset(100% 0 0 0); transition: clip-path 1.6s var(--ease), -webkit-clip-path 1.6s var(--ease); }
/* How each photo appears (owner, 2026-11-04: "add movement for the pictures to appear"): it rises and fades in, the
   ones set to one side slide in from that side, the frame opens from the bottom like a curtain, and the photo inside
   settles from a closer zoom. The second photo of a pair follows a moment later. While the page scrolls, each photo
   drifts a little inside its frame (parallax), so the page keeps a slow movement. */
.alb { --dir: 1; opacity: 0; translate: 0 3rem; transition: opacity 1.2s var(--soft), translate 1.6s var(--ease); }
:root[dir="ltr"] .alb { --dir: -1; }
.alb-start { translate: calc(var(--dir) * 3rem) 2rem; }
.alb-end { translate: calc(var(--dir) * -3rem) 2rem; }
.alb.in { opacity: 1; translate: 0 0; }
.alb-pair .alb + .alb, .alb-pair .alb + .alb .alb-m, .alb-pair .alb + .alb .alb-m > * { transition-delay: 0.18s; }
.alb-m > * { display: block; width: 100%; height: auto; scale: 1.3; translate: 0 var(--py, 0px); transition: scale 2.6s var(--ease); }
.alb-full .alb-m > video { aspect-ratio: 9 / 16; object-fit: cover; }
/* One shared fine grain over every photo and clip, so photos shot on film and clean digital ones feel alike (the colours
   were matched in the files themselves with tools/grade.swift). */
.alb-m { position: relative; }
.alb-m::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35; mix-blend-mode: soft-light;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px;
}
.alb.in .alb-m { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
.alb.in .alb-m > * { scale: 1.08; }
.alb figcaption { margin: 0.6rem 0 0; padding-inline: 0.1rem; color: var(--ink-soft); font-size: 0.72rem; letter-spacing: 0.06em; opacity: 0; transition: opacity 1s 0.6s; }
.alb-full figcaption { padding-inline: var(--gutter); }
.alb figcaption::before { content: ""; display: inline-block; width: 0.35rem; height: 0.35rem; margin-inline-end: 0.45rem; border-radius: 50%; background: var(--rose); vertical-align: 0.1em; }
.alb.in figcaption { opacity: 1; }
@media (min-width: 48rem) { .alb-flow { max-width: 40rem; margin: 0 auto; } }

/* The Contact page: LaVue's Instagram "contact us" story as a page: two short lines, each with its button, then the
   framed photo with the flower on the frame's corner, on the same faint linen weave as the Albums page. */
.page-contact { background-color: #f6f2eb; background-image: repeating-linear-gradient(0deg, rgb(120 98 80 / 0.035) 0 1px, transparent 1px 3px),
                                  repeating-linear-gradient(90deg, rgb(120 98 80 / 0.03) 0 1px, transparent 1px 3px); }
.ct { display: flex; flex-direction: column; align-items: center; max-width: 26rem; margin: 0 auto; padding: 2rem var(--gutter) 1rem; text-align: center; }
.ct-line { max-width: 19rem; margin: 0 0 1.1rem; font-size: 1.15rem; font-weight: 200; line-height: 1.8; color: var(--ink); }
.ct-or { margin: 2rem 0 1.6rem; color: var(--mocha); font-size: 0.95rem; }
.ct-btn {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.9rem; padding: 0 1.5rem; border-radius: 999px;
  border: 1px solid var(--rose); color: var(--mocha); font-size: 0.9rem; text-decoration: none; background: rgb(255 255 255 / 0.35);
}
.ct-btn svg { width: 1.15rem; height: 1.15rem; }
.ct-btn[hidden] { display: none; }
.ct-btn-main { background: var(--deep-card); border-color: var(--deep-card); color: var(--cream); }
.ct-btn:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.ct-rule { width: 3.5rem; height: 1px; margin: 2.4rem 0 2rem; background: rgb(203 153 141 / 0.6); }
.ct-line-sm { margin-bottom: 0.6rem; font-size: 0.95rem; color: var(--ink-soft); }
.ct-mail { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; color: var(--mocha); font-size: 0.95rem; letter-spacing: 0.02em; text-decoration: none; border-bottom: 1px solid rgb(203 153 141 / 0.45); }
.ct-mail svg { width: 1.1rem; height: 1.1rem; }
.ct-mail:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.ct-art { position: relative; width: min(80vw, 20rem); aspect-ratio: 1 / 1.08; margin: 3.25rem 0 0; }
.ct-frame {
  position: absolute; top: 0; right: 4%; width: 72%; height: 66%; border: 1px solid rgb(203 153 141 / 0.75);
  -webkit-mask-image: radial-gradient(circle at 100% 0, transparent 2.3rem, #000 2.35rem); mask-image: radial-gradient(circle at 100% 0, transparent 2.3rem, #000 2.35rem);
}
.ct-flower { position: absolute; top: -1.45rem; right: calc(4% - 1.45rem); width: 2.9rem; }
.ct-photo { position: absolute; left: 0; bottom: 0; width: 68%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 18px 40px -24px rgb(42 35 32 / 0.45); }
.ct-logo { width: 7rem; margin: 2.75rem 0 0.5rem; }
/* Everything rises in one after another as the page opens. */
.ct > * { opacity: 0; translate: 0 1.1rem; transition: opacity 0.9s var(--soft), translate 1.1s var(--ease); }
.page-contact.shown .ct > * { opacity: 1; translate: 0 0; }
.ct > :nth-child(2) { transition-delay: 0.08s; } .ct > :nth-child(3) { transition-delay: 0.16s; } .ct > :nth-child(4) { transition-delay: 0.24s; }
.ct > :nth-child(5) { transition-delay: 0.32s; } .ct > :nth-child(6) { transition-delay: 0.4s; } .ct > :nth-child(7) { transition-delay: 0.48s; }
.ct > :nth-child(8) { transition-delay: 0.56s; } .ct > :nth-child(9) { transition-delay: 0.66s; } .ct > :nth-child(10) { transition-delay: 0.76s; }
.ct-flower { rotate: -40deg; scale: 0.6; opacity: 0; transition: rotate 1.6s var(--ease) 1.1s, scale 1.6s var(--ease) 1.1s, opacity 0.8s 1.1s; }
.page-contact.shown .ct-flower { rotate: 0deg; scale: 1; opacity: 1; }

/* Two columns of photos that fill the screen, the second half a photo lower (like vivmgmt.com). */
.wgrid {
  --tile-w: calc((min(100vw, 46rem) - 24px) / 2);
  display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 8px;
  max-width: 46rem; margin: 0 auto; padding: 0 8px 1rem; overflow: hidden;
}
.wg-col { display: grid; gap: 8px; }
.wg-col:nth-child(2) { margin-top: calc(var(--tile-w) * 4 / 3 * 0.55); }
.wg-tile { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--blush); }
.wg-media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- The cover ---------- */
.cover { position: relative; height: 100svh; min-height: 32rem; overflow: hidden; background: var(--deep); isolation: isolate; }
.cover-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
  translate: 0 calc(var(--cover-p, 0) * 22%); scale: 1.18; opacity: 0; transition: opacity 1s var(--soft);
}
.cover-img.loaded { opacity: 1; }
/* The video version: the clips sit on top of each other and cross-fade. Black and white like the photo, unless ?color=1. */
.cover-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s var(--soft); filter: grayscale(1) contrast(1.08); }
.cover-video video.on { opacity: 1; }
.cover-color .cover-video video { filter: none; }
/* It settles in 6 s, then keeps floating: a slow zoom with a small drift, and a soft light that wanders across. */
.settled .cover-img { animation: settle 6s var(--ease) forwards, float 16s ease-in-out 6s infinite; }
@keyframes settle { from { scale: 1.18; } to { scale: 1.06; } }
@keyframes float { 0%, 100% { scale: 1.06; transform: translate(0, 0); } 50% { scale: 1.13; transform: translate(-2.5%, -1.5%); } }
/* Light leaks, like warm light on film: two soft glows breathing at the edges and a streak that sweeps across now and then. */
.leaks { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; mix-blend-mode: screen; opacity: 0;
  /* fades out before the bottom, where the cover melts into the cream: a glow reaching the edge left a faint line there */
  -webkit-mask-image: linear-gradient(#000 50%, transparent 88%); mask-image: linear-gradient(#000 50%, transparent 88%); }
.settled .leaks { opacity: 1; transition: opacity 2.5s var(--soft) 0.8s; }
.leaks span { position: absolute; inset: -25%; }
.leaks span:nth-child(1) {
  background: radial-gradient(50% 38% at 6% 22%, rgb(255 160 105 / 0.8), rgb(239 130 95 / 0.3) 45%, transparent 72%);
  animation: leak-a 11s ease-in-out infinite alternate;
}
.leaks span:nth-child(2) {
  background: radial-gradient(45% 55% at 97% 66%, rgb(239 175 155 / 0.72), rgb(203 153 141 / 0.25) 50%, transparent 72%);
  animation: leak-b 15s ease-in-out infinite alternate;
}
.leaks span:nth-child(3) {
  background: linear-gradient(115deg, transparent 38%, rgb(255 200 150 / 0.3) 46%, rgb(255 228 200 / 0.5) 50%, rgb(255 200 150 / 0.3) 54%, transparent 62%);
  opacity: 0; animation: leak-sweep 12s var(--soft) 3s infinite;
}
@keyframes leak-a { from { opacity: 0.5; transform: translate(-8%, -4%) scale(1); } to { opacity: 0.95; transform: translate(7%, 6%) scale(1.15); } }
@keyframes leak-b { from { opacity: 0.9; transform: translate(6%, 6%); } to { opacity: 0.4; transform: translate(-7%, -8%); } }
@keyframes leak-sweep { 0% { opacity: 0; transform: translateX(-55%); } 12% { opacity: 1; } 40% { opacity: 0; transform: translateX(55%); } 100% { opacity: 0; transform: translateX(55%); } }
.cover::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(65% 26% at 50% 34%, rgb(0 0 0 / 0.4), transparent 75%),
              linear-gradient(rgb(0 0 0 / 0.35), transparent 22%);
}
/* The bottom of the cover melts into the cream of the page (owner, 2026-11-04: no hard line between the two). */
.cover::before {
  content: ""; position: absolute; inset: auto 0 0; height: 40%; z-index: 3; pointer-events: none;
  background: linear-gradient(rgb(250 248 242 / 0), rgb(250 248 242 / 0.06) 18%, rgb(250 248 242 / 0.2) 36%, rgb(250 248 242 / 0.42) 54%,
              rgb(250 248 242 / 0.68) 72%, rgb(250 248 242 / 0.9) 88%, var(--cream));
}
/* Screens wider than tall show the horizontal photo (app.js): framed lower so the couple stands clear of the fade, which is
   shorter here, only over the candle tables in front. */
@media (min-aspect-ratio: 1/1) {
  :root { --logo-top: 27svh; }   /* on the wall, clear of the couple's raised hands */
  .cover-img { object-position: 50% 85%; }
  .cover::before { height: 22%; }
}
.cover-brand {
  position: absolute; z-index: 3; top: var(--logo-top); left: 50%; width: var(--logo-w); translate: -50% -50%;
  opacity: calc(1 - var(--cover-p, 0) * 1.8);
}
.cover-logo { width: 100%; filter: drop-shadow(0 2px 14px rgb(0 0 0 / 0.35)); }
.slogan { font-family: var(--font-serif); font-style: italic; font-size: 1rem; letter-spacing: 0.02em; color: var(--blush); }
.cover-brand .slogan { position: absolute; top: 100%; left: 50%; margin: 0.9rem 0 0; white-space: nowrap; translate: -50% 0; opacity: 0; }
.settled .cover-brand .slogan { animation: rise 1.4s var(--ease) 0.9s forwards; }
@keyframes rise { from { opacity: 0; translate: -50% 0.6rem; } to { opacity: 1; translate: -50% 0; } }
.scroll-hint {
  position: absolute; z-index: 3; left: 50%; bottom: max(1.75rem, env(safe-area-inset-bottom)); width: 1px; height: 3rem;
  translate: -50% 0; overflow: hidden; background: rgb(42 35 32 / 0.15); opacity: 0;
}
.scroll-hint::after { content: ""; position: absolute; inset: 0; background: var(--mocha); translate: 0 -100%; animation: hint 2.4s var(--soft) infinite; }
.settled .scroll-hint { opacity: 1; transition: opacity 1s 1.8s; }
@keyframes hint { 0% { translate: 0 -100%; } 60%, 100% { translate: 0 100%; } }

/* ---------- Text that rises into place ---------- */
[data-reveal] { opacity: 0; translate: 0 1.75rem; transition: opacity 1s var(--soft), translate 1.2s var(--ease); }
[data-reveal].in { opacity: 1; translate: 0 0; }
.words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.15em; margin-block: -0.15em; }
.words .w > span { display: inline-block; translate: 0 115%; transition: translate 1.1s var(--ease); transition-delay: calc(var(--i) * 90ms); }
.words.in .w > span { translate: 0 0; }

/* A thin cream strip over the join between the cover and the page: the cover's glows (screen-blended) leave a one-pixel
   seam along its bottom edge in Chrome, which the in-cover fade can't reach. */
main { position: relative; }
main::before { content: ""; position: absolute; inset: -2px 0 auto; height: 3px; z-index: 5; background: var(--cream); pointer-events: none; }

/* ---------- Portfolio: a line of photos and clips that keeps drifting sideways (like onseis.com) ---------- */
.works { padding: 3.5rem 0 1rem; text-align: center; overflow: hidden; }   /* no heading: the owner took the word off (2026-11-04) */
.reel { overflow: hidden; }
.reel-track { display: flex; align-items: center; width: max-content; animation: reel linear infinite; }
:root:lang(en) .reel-track { animation-name: reel-en; }
.reel.held .reel-track { animation-play-state: paused; }
@media (hover: hover) { .reel:hover .reel-track { animation-play-state: paused; } }
@keyframes reel { to { transform: translateX(var(--run)); } }
@keyframes reel-en { to { transform: translateX(calc(-1 * var(--run))); } }
.work { flex: none; margin: 0; margin-inline-end: 1.25rem; text-align: start; }
.work img, .work video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--blush); }
.work-tall { width: min(52vw, 15rem); }
.work-small { width: min(38vw, 11rem); }
.work-wide { width: min(70vw, 20rem); }
.work-tall img, .work-tall video, .work-small img, .work-small video { aspect-ratio: 2 / 3; }
.work-wide img, .work-wide video { aspect-ratio: 3 / 2; }
.work figcaption { margin-top: 0.5rem; color: var(--ink-soft); font-size: 0.72rem; letter-spacing: 0.06em; }
.work figcaption::before { content: ""; display: inline-block; width: 0.35rem; height: 0.35rem; margin-inline-end: 0.45rem; border-radius: 50%; background: var(--rose); vertical-align: 0.1em; }
.insta {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; margin-top: 2rem; padding: 0 1.4rem;
  border: 1px solid var(--rose); border-radius: 999px; color: var(--mocha); font-size: 0.85rem; text-decoration: none;
}
.insta svg { width: 1.05rem; height: 1.05rem; }
.insta:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

/* ---------- Welcome ---------- */
.welcome { max-width: 40rem; margin: 0 auto; padding: 4.5rem var(--gutter) 1.5rem; text-align: center; }
.overline { margin: 0 0 0.4rem; color: var(--mocha); font-size: 0.9rem; }
:lang(en) .overline { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; }
h1 { margin: 0 0 0.75rem; font-weight: 200; font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1.3; }
:lang(en) h1, :lang(en) h2 { font-family: var(--font-serif); font-weight: 500; }
:lang(en) h1 { font-size: clamp(2.4rem, 11vw, 3.25rem); }
.vat { max-width: 22rem; margin: 0 auto 2rem; color: var(--ink-soft); font-size: 0.85rem; }
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.jump a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); background: rgb(255 255 255 / 0.55); font-size: 0.85rem; text-decoration: none;
}

/* ---------- Packages: one line pinned over the still background while its cards slide sideways; a title panel opens each group ---------- */
.packs { position: relative; }
.packs-bg-wrap { position: absolute; inset: 0; z-index: 0; }
.packs-bg {
  position: sticky; top: 0; height: 100svh; opacity: 0.13; background: var(--backdrop, none) 50% 45% / cover no-repeat; filter: grayscale(1);
  -webkit-mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent);
}
.packs-rows { position: relative; z-index: 1; }
.row-pin {
  position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; gap: 1.25rem;
  height: 100svh; padding: 4.75rem 0 3.5rem; overflow: hidden;
}
/* Each card is as tall as its own contents. */
.row-track { flex: none; align-self: flex-start; display: flex; align-items: center; gap: 1rem; padding-inline: var(--gutter); will-change: transform; }
.row-track .card { flex: none; width: min(82vw, 21rem); margin: 0; }
.panel-title { flex: none; display: flex; justify-content: center; width: min(52vw, 14rem); }
.group { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; margin: 0; text-align: center;
  color: var(--mocha); font-weight: 200; font-size: 2.25rem; line-height: 1.3; }
:lang(en) .group { font-size: 2.5rem; }
.group::before, .group::after { content: ""; width: 1px; height: 2.5rem; background: var(--rose); opacity: 0.5; }
.row-progress {
  position: absolute; left: 50%; bottom: max(1.5rem, env(safe-area-inset-bottom)); width: 6rem; height: 2px;
  translate: -50% 0; overflow: hidden; border-radius: 2px; background: var(--line);
}
.row-progress span { position: absolute; inset: 0; background: var(--mocha); transform: scaleX(0); transform-origin: right; }
:root:lang(en) .row-progress span { transform-origin: left; }
/* Shorter screens (including the Claude app, which takes some height): tighter cards, so the line can still slide. */
@media (max-height: 780px) {
  .row-pin { padding: 3.75rem 0 2.5rem; }
  .row-track .card { padding: 1.2rem 1.15rem 1rem; }
  .row-track .card-name { font-size: 1.5rem; }
  .row-track .card-meta { margin-bottom: 0.7rem; font-size: 0.82rem; }
  .row-track .card-items { gap: 0.3rem; padding-top: 0.75rem; }
  .row-track .card-items li { font-size: 0.86rem; line-height: 1.45; }
  .row-track .card-price { margin-top: 0.9rem; padding-top: 0.7rem; }
  .row-track .amount { font-size: 1.7rem; }
}
@media (max-height: 660px) {
  .row-pin { padding: 3.25rem 0 2rem; }
  .row-track .card { padding: 1rem 1rem 0.85rem; }
  .row-track .card-name { font-size: 1.35rem; }
  .row-track .card-items { gap: 0.2rem; }
  .row-track .card-items li { font-size: 0.8rem; line-height: 1.4; }
  .row-track .amount { font-size: 1.5rem; }
}
/* A phone too short even for that: the cards stack as a plain list (app.js decides). */
.packs.stacked .row { height: auto !important; }
.packs.stacked .row-pin { position: relative; display: block; height: auto; padding: 2.5rem 0 0; overflow: visible; }
.packs.stacked .row-track { flex-direction: column; align-items: stretch; max-width: 34rem; margin: 1rem auto 0; padding: 0 var(--gutter) 2rem; transform: none !important; }
.packs.stacked .row-track .card { width: auto; }
.packs.stacked .panel-title { width: auto; margin: 1.5rem 0 0.5rem; }
.packs.stacked .group { flex-direction: row; font-size: 1.75rem; }
.packs.stacked .group::before, .packs.stacked .group::after { flex: 1; width: auto; max-width: 4rem; height: 1px; }
.packs.stacked .row-progress { display: none; }


.card {
  position: relative; margin-bottom: 1rem; padding: 1.75rem 1.5rem 1.5rem; border: 1px solid var(--line); border-radius: 1.5rem;
  background: rgb(255 255 255 / 0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgb(42 35 32 / 0.04), 0 14px 34px -14px rgb(42 35 32 / 0.14);
}
.card[data-reveal] { translate: 0 3rem; scale: 0.97; transition: opacity 1s var(--soft), translate 1.2s var(--ease), scale 1.2s var(--ease); }
.card.in { translate: 0 0; scale: 1; }
.card-group { margin: 0; color: var(--rose); font-size: 0.78rem; }
:lang(en) .card-group { font-size: 0.65rem; letter-spacing: 0.24em; text-transform: uppercase; }
.card-name { margin: 0.2rem 0 0.35rem; font-size: 1.85rem; font-weight: 300; line-height: 1.35; }
:lang(en) .card-name { font-family: var(--font-serif); font-size: 2rem; font-weight: 500; line-height: 1.15; }
.card-meta { margin: 0 0 1.1rem; color: var(--ink-soft); font-size: 0.9rem; }
.card-meta .dot { margin: 0 0.4rem; color: var(--rose); }
.card-items { display: grid; gap: 0.55rem; margin: 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line); list-style: none; }
.card-items li { position: relative; padding-inline-start: 1.15rem; font-size: 0.95rem; line-height: 1.6; }
.card-items li::before { content: ""; position: absolute; inset-inline-start: 0.1rem; top: 0.68em; width: 0.38rem; height: 0.38rem; rotate: 45deg; background: var(--rose); }
.card-price { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.4rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.amount { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ink); font: 500 2rem/1.1 var(--font-serif); font-feature-settings: "lnum"; }
.sar { display: inline-block; width: 0.72em; height: 0.8em; background: currentColor;
  -webkit-mask: url(img/riyal.svg) center / contain no-repeat; mask: url(img/riyal.svg) center / contain no-repeat; }
.vat-note { color: var(--ink-soft); font-size: 0.8rem; }

/* The signature package: the one deep card on the page. */
.card-signature { background: var(--deep-card); color: var(--cream); border-color: rgb(239 194 178 / 0.25); }
.card-signature .card-group, .card-signature .amount { color: var(--blush); }
.card-signature .card-meta, .card-signature .vat-note { color: rgb(250 248 242 / 0.65); }
.card-signature .card-items, .card-signature .card-price { border-color: rgb(239 194 178 / 0.2); }
.card-signature .card-items li::before { background: var(--blush); }

/* ---------- Extras ---------- */
.extras { max-width: 34rem; margin: 0 auto; padding: 2rem var(--gutter) 3.5rem; }
.extras h2 { margin: 0 0 1.5rem; text-align: center; color: var(--mocha); font-weight: 200; font-size: 1.75rem; }
:lang(en) .extras h2 { font-size: 2rem; }
.extras-list { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.extras-list li { display: grid; gap: 0.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.x-name { font-weight: 400; }
.x-opts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; color: var(--ink-soft); font-size: 0.9rem; }
.x-opt { display: inline-flex; align-items: baseline; gap: 0.5rem; }
.x-opt .amount { color: var(--ink); font-size: 1.25rem; }

/* ---------- Footer ---------- */
.foot { padding: 3.5rem var(--gutter) max(3rem, env(safe-area-inset-bottom)); text-align: center; background: var(--deep); }
.foot > img { width: 8rem; margin: 0 auto 0.6rem; }
.foot .slogan { margin: 0; }
/* The footer lines, the same as on the bride's page: small and quiet, under the main page and at the end of each page from
   the menu. On the dark main-page footer the official logos sit on small white tiles so they stay readable. */
.legal { display: grid; justify-items: center; gap: 0.35rem; margin-top: 2.5rem; padding: 0 var(--gutter); color: var(--ink-soft); font-size: 0.72rem; line-height: 1.8; text-align: center; }
.legal p { margin: 0; }
.legal-ids, .legal-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.3rem 1.25rem; }
.legal-ids > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legal-ids img { width: auto; height: 1.5em; }
.legal-links a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.4rem; color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.legal-links a[aria-current] { font-weight: 400; text-decoration: none; }
.legal-mail a { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; color: inherit; font-size: 0.85rem; text-decoration: none; }
.legal-mail svg { width: 1rem; height: 1rem; }
.foot .legal { margin-top: 2.25rem; padding: 0; color: rgb(250 248 242 / 0.6); }
.foot .legal-ids img { box-sizing: content-box; padding: 0.15rem; border-radius: 0.3rem; background: #fff; }

/* Motion off on phones set to "reduce motion": everything shows in place at once. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro { display: none; }
  .cover-img, .settled .cover-img { animation: none; scale: 1.06; translate: none; }
  .leaks span, .settled .leaks { animation: none; transition: none; }
  .leaks span:nth-child(3) { display: none; }
  .cover-brand .slogan, .settled .cover-brand .slogan { animation: none; opacity: 1; }
  .scroll-hint::after { animation: none; translate: 0 0; }
  .reel { overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); }
  .reel-track { animation: none; }
  .work { scroll-snap-align: center; }
  .menu, .menu-scrim, .menu-list li, .page, .ct > *, .ct-flower { transition: none; }
  .alb, .alb .alb-m, .alb .alb-m > *, .alb figcaption { -webkit-clip-path: none; clip-path: none; scale: none; translate: none; opacity: 1; transition: none; }
  [data-reveal], .card[data-reveal], .words .w > span { opacity: 1; translate: none; scale: none; transition: none; }
}