/* =========================================================
   SEEN BY NOMI / STUDIO BY NOMI — v10
   A calm white magazine with fixed accents.

   COLOUR — one job per colour
     white      base pages (Poosh page, pakketten, footer)
     wine       the immersive moments (loader, menu, transitions, shoots, Q&A)
     bubblegum  the active pink: logo, type on wine and on photos, cursor
     lilac      paper (over mij, the Q&A article), always with wine ink
     khaki      action: boeken, always with lavender text
     ink        text on white

   TYPE — one job per typeface
     Titling Gothic Skyline   the logo only, as SVG outlines (nav, hero, loader, footer)  .logo .lg
     Instrument Serif         every headline: caps + one italic word, same size .head
                              quotes and justified intro texts                   .serif
     Arial Bold caps          names: shoot types, packages, cover lines, menu    .name
     Arial caps 12px          labels and the folio "(0X) Section"                .label
     Instrument Sans          body

   The logo letters are vector outlines of Titling Gothic FB (Font Bureau); the font file itself is not shipped.
   Check the desktop licence allows logo artwork.
   ========================================================= */

:root {
  --white: #FFFFFF;
  --ink: #0E0E0E;
  --khaki: #897A21;
  --lavender: #DFBBFF;
  --wine: #5E0E2C;
  --bubble: #FF85D5;
  --lilac: #F3A6F5;

  --caps: Arial, Arimo, "Helvetica Neue", Helvetica, sans-serif;
  --sans: "Instrument Sans", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --tall: "Arial Narrow", Arial, sans-serif; /* only sets the word spaces inside the logo */

  --g: clamp(14px, 1.6vw, 26px);
  --top: calc(var(--g) + 70px);
  --head: min(6.4vw, 10.5svh);
  --cw: min(22vw, 26.4svh);
  --ch: calc(var(--cw) * 1.25);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --pad: max(17svh, calc(var(--g) + 136px)); /* section top: clear of the nav links */
  /* Instrument Serif is narrow: it needs about a third more size than the sans to read the same */
  --serif-s: clamp(20px, 1.55vw, 26px); /* small serif text: intros, statements */
  --serif-xs: 20px;                     /* serif italic words beside caps labels */
}

/* ---------- colour blocks ---------- */
.c-white { --bg: var(--white); --fg: var(--ink);    --hl: var(--ink);    --pop: var(--bubble); --pop-ink: var(--wine); }
.c-lilac { --bg: var(--lilac); --fg: var(--wine);   --hl: var(--wine);   --pop: var(--wine);   --pop-ink: var(--lilac); }
.c-wine  { --bg: var(--wine);  --fg: var(--bubble); --hl: var(--bubble); --pop: var(--bubble); --pop-ink: var(--wine); }
.c-khaki { --bg: var(--khaki); --fg: var(--lavender); --hl: var(--lavender); --pop: var(--lavender); --pop-ink: var(--khaki); }
.c-white, .c-lilac, .c-wine, .c-khaki { background: var(--bg); color: var(--fg); }
.c-photo { --bg: var(--wine); --fg: var(--bubble); --hl: var(--bubble); --pop: var(--bubble); --pop-ink: var(--wine); color: var(--fg); }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
figure, h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--bubble); color: var(--wine); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 600; background: var(--ink); color: var(--white); padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 12px; }
.page { overflow-x: clip; }

/* ---------- type ---------- */
.caps { font-family: var(--caps); text-transform: uppercase; font-weight: 400; letter-spacing: .01em; }
.serif { font-family: var(--serif); font-weight: 400; font-style: normal; letter-spacing: -.03em; }
.serif em, .serif-i { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; }
.logo { font-family: var(--tall); font-weight: 700; text-transform: uppercase; letter-spacing: 0; line-height: .8; }
.lg { display: inline-block; height: .82em; fill: currentColor; overflow: visible; vertical-align: -.011em; } /* viewBox = the real outer bounds of the letters (round tops included) */
.lg--seen { width: 1.607em; }
.lg--nomi { width: 1.779em; }
.lg--studio { width: 2.379em; }
.logo em { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.025em; font-size: .8em; padding: 0 .06em 0 .02em; }
.head { font-family: var(--serif); font-weight: 400; text-transform: uppercase; letter-spacing: -.03em; line-height: .88; color: var(--hl, currentColor); }
.head em { font-style: italic; text-transform: none; letter-spacing: -.02em; }
.name { font-family: var(--caps); font-weight: 700; text-transform: uppercase; letter-spacing: -.045em; line-height: .88; }
.label { font-family: var(--caps); text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }

/* running head: every section carries its number in the nav line, like a magazine folio */
.folio { position: absolute; z-index: 6; top: calc(var(--g) + 2px); left: 50%; translate: -50% 0; white-space: nowrap; color: var(--fg); }

/* rolling hover text (JS wraps link text in .roll) */
.roll { display: inline-block; overflow: hidden; vertical-align: top; height: 1.2em; line-height: 1.2; }
.roll > span { display: block; white-space: nowrap; transition: transform .5s var(--ease); }
.roll > span::after { content: attr(data-t); display: block; }
a:hover .roll > span, button:hover .roll > span { transform: translateY(-50%); }

/* underlined caps link */
.uline { display: inline-block; font-family: var(--caps); text-transform: uppercase; font-size: 12px; letter-spacing: .06em; text-decoration: none; padding-bottom: 4px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }

/* circle button — fills with the block's ink */
.circle { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; border: 1px solid currentColor; text-decoration: none; font-size: 21px; transition: background .35s, color .35s, transform .5s var(--ease); }
.circle:hover { background: var(--fg, var(--ink)); color: var(--bg, var(--white)); border-color: var(--fg, var(--ink)); transform: rotate(-10deg) scale(1.06); }

/* ---------- cursor label (takes the accent of the block under it) ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 500; pointer-events: none; --cur: var(--bubble); --cur-ink: var(--wine); }
.cursor::before { content: ""; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--cur); transition: transform .35s var(--ease), opacity .3s, background .3s; }
.cursor__label { position: absolute; left: 14px; top: 12px; padding: 7px 11px 6px; background: var(--cur); color: var(--cur-ink); font-size: 11px; letter-spacing: .06em; white-space: nowrap; opacity: 0; transform: scale(.6); transform-origin: 0 0; transition: transform .35s var(--ease), opacity .25s; }
.cursor.is-label::before { transform: scale(.4); }
.cursor.is-label .cursor__label { opacity: 1; transform: scale(1); }
.cursor.is-hidden { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* =========================================================
   PRELOADER · ARRIVAL · PAGE TRANSITION (wine)
   ========================================================= */
.loader { position: fixed; inset: 0; z-index: 300; display: none; background: var(--wine); color: var(--bubble); pointer-events: none; }
.is-loading .loader { display: block; animation: failhide 0s 8s forwards; }
@keyframes failhide { to { visibility: hidden; } }
.loader__card { position: absolute; left: 50%; top: 50%; width: var(--cw); height: var(--ch); translate: -50% -50%; overflow: hidden; background: #4A0A22; }
.loader__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.loader__card img.is-on { visibility: visible; }
.loader__l, .loader__r { position: absolute; top: 50%; translate: 0 -50%; font-size: 13px; }
.loader__l.logo { font-size: 30px; }
.loader__l { right: calc(50% + var(--cw) / 2 + 20px); }
.loader__r { left: calc(50% + var(--cw) / 2 + 20px); min-width: 4ch; font-variant-numeric: tabular-nums; }
.loader__b { position: absolute; left: 50%; bottom: 7vh; translate: -50% 0; font-size: clamp(22px, 2vw, 30px); white-space: nowrap; }

.is-loading .nav, .is-loading [data-hero-type], .is-loading [data-hero-sub], .is-loading .corners, .is-loading .hero__shade,
.is-arriving .nav, .is-arriving [data-hero-type], .is-arriving [data-hero-sub], .is-arriving .corners, .is-arriving .hero__shade { opacity: 0; }
.is-loading .poosh, .is-arriving .poosh { visibility: hidden; }
.is-loading [data-hero-stage], .is-arriving [data-hero-stage] { background: var(--wine); }

.pt { position: fixed; inset: 0; z-index: 400; background: var(--wine); color: var(--bubble); visibility: hidden; opacity: 0; }
.pt.is-on, .is-arriving .pt { visibility: visible; opacity: 1; }
.pt__card { position: absolute; left: 50%; top: 50%; width: var(--cw); height: var(--ch); translate: -50% -50%; overflow: hidden; background: #4A0A22; }
.pt__card img { width: 100%; height: 100%; object-fit: cover; }
.pt__row { position: absolute; left: var(--g); right: var(--g); bottom: var(--g); display: grid; grid-template-columns: 1fr 2fr 2fr 1fr; font-size: 12px; }
.pt__row .serif-i { font-size: var(--serif-xs); }
.pt__row span:last-child { text-align: right; }
.flip-img { position: fixed; z-index: 410; object-fit: cover; pointer-events: none; }

/* =========================================================
   COOKIE SCREEN (wine, like the menu) — two equal choices
   ========================================================= */
.cookie { position: fixed; z-index: 450; right: var(--g); bottom: var(--g); width: min(400px, calc(100vw - 2 * var(--g))); display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 20px; background: var(--wine); color: var(--bubble); clip-path: inset(100% 0% 0% 0%); }
.cookie[hidden] { display: none; }
.cookie__top { display: flex; justify-content: space-between; }
.cookie__t { font-size: 42px; }
.cookie__p { font-size: 15px; line-height: 1.4; }
.cookie__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.cookie__btn { padding: 14px 10px 13px; border: 1px solid currentColor; font-family: var(--caps); text-transform: uppercase; font-size: 12px; letter-spacing: .06em; transition: background .3s, color .3s; }
.cookie__btn:hover, .cookie__btn:focus-visible { background: var(--bubble); color: var(--wine); }
.cookie__more { align-self: flex-start; }

/* =========================================================
   NAV (Garonzi) — colour follows the block under it
   ========================================================= */
.nav { position: fixed; left: var(--g); right: var(--g); top: var(--g); z-index: 200; height: 0; color: var(--nav-fg, var(--ink)); }
.tone-ready .nav { transition: color .35s; } /* no colour fade on the very first paint */
.panel-open .nav { color: var(--bubble); }
.nav__logo { position: absolute; left: 0; top: -3px; font-family: var(--tall); font-weight: 700; text-transform: uppercase; font-size: 30px; line-height: .84; text-decoration: none; white-space: nowrap; }
.nav__logo em { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; font-size: .8em; padding: 0 .06em; }
.nav__links { position: absolute; left: 72%; top: 0; display: flex; flex-direction: column; font-size: 18px; line-height: 1.22; }
.nav__links a { width: fit-content; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
.nav__links a:hover, .nav__links a.is-current { background-size: 100% 1px; }
.nav__burger { position: absolute; right: 0; top: 2px; width: 104px; height: 18px; }
.nav__burger i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: top .45s var(--ease), opacity .3s; }
.nav__burger i:first-child { top: 3px; }
.nav__burger i:last-child { top: 12px; }
.panel-open .nav__burger i:first-child, .panel-open .nav__burger i:last-child { top: 8px; }

/* full-screen drop-down panel (wine) */
.panel {
  position: fixed; inset: 0; z-index: 190;
  display: grid; grid-template-columns: repeat(3, minmax(0, 15vw)) 1fr minmax(0, 30vw); grid-template-rows: auto 1fr auto; gap: 0 2.6vw;
  padding: calc(var(--g) + 92px) var(--g) var(--g);
  background: var(--wine); color: var(--bubble);
  visibility: hidden; clip-path: inset(0 0 100% 0);
}
.panel__cols { grid-column: 1 / span 3; grid-row: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6vw; padding-top: 5px; }
.panel__cols a, .panel__cols span { display: block; width: fit-content; font-size: 18px; line-height: 1.32; text-decoration: none; }
.panel__cols a:hover { color: var(--white); }
.panel__h { font-size: 11px; letter-spacing: .06em; margin-bottom: 26px; }
.panel__about { grid-column: 1 / span 3; grid-row: 3; align-self: end; max-width: 26em; font-size: 18px; line-height: 1.32; }
.panel__img { grid-column: 5; grid-row: 1 / span 3; align-self: end; height: min(66svh, 620px); overflow: hidden; }
.panel__img img { width: 100%; height: 100%; object-fit: cover; }
.panel__big { grid-column: 1 / span 4; grid-row: 2; align-self: center; display: flex; flex-direction: column; }
.panel__big a { display: flex; align-items: flex-start; gap: .25em; width: fit-content; font-family: var(--caps); font-weight: 700; text-transform: uppercase; font-size: clamp(44px, min(6.4vw, 11svh), 112px); line-height: .9; letter-spacing: -.045em; text-decoration: none; }
.panel__big a small { font-size: 12px; letter-spacing: .04em; font-weight: 400; padding-top: .6em; }
.panel__big a span { transition: color .25s; }
.panel__big a:hover span { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.03em; color: var(--white); }

/* fixed corners (Emmpo) */
.corners { position: fixed; left: var(--g); right: var(--g); bottom: var(--g); z-index: 150; display: flex; justify-content: space-between; pointer-events: none; color: var(--corner-fg, var(--ink)); transition: opacity .4s, color .35s; }
.corners a { pointer-events: auto; font-size: clamp(20px, 1.8vw, 28px); text-decoration: none; }
.corners.is-hidden, .panel-open .corners { opacity: 0; pointer-events: none; }
.corners.is-hidden a { pointer-events: none; }

/* =========================================================
   1. HERO — one full-screen photo with the logo → white Poosh page
   ========================================================= */
.hero { position: relative; }
.hero.is-poosh { --fg: var(--ink); --hl: var(--ink); --pop: var(--bubble); --pop-ink: var(--wine); }
.hero__stage { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--white); }
.hero__frame { position: absolute; inset: 0; z-index: 1; display: grid; }
.hero__p { position: relative; overflow: hidden; }
.hero__base { position: absolute; inset: 0; }
.hero__base img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: breathe 14s ease-in-out infinite alternate; }
@keyframes breathe { from { scale: 1; } to { scale: 1.07; } }
.hero__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(40, 0, 16, .42) 0%, rgba(40, 0, 16, 0) 46%, rgba(40, 0, 16, 0) 64%, rgba(40, 0, 16, .38) 100%); }
.hero__type { position: absolute; z-index: 3; left: var(--g); right: var(--g); top: calc(var(--g) + 150px); color: var(--bubble); will-change: transform; }
[data-fit] { width: max-content; }
.hero__mark { display: block; white-space: nowrap; font-size: 16vw; }
/* cover lines: left and right of the faces, like the lines on a magazine cover */
.hero__cover { position: absolute; z-index: 3; left: var(--g); right: var(--g); bottom: calc(var(--g) + 62px); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; color: var(--bubble); pointer-events: none; }
.hero__line { display: flex; flex-direction: column; gap: 16px; }
.hero__line--r { align-items: flex-end; text-align: right; }
.hero__line .name { font-size: clamp(26px, 3vw, 56px); }
.poosh { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: var(--ink); }
.poosh__t { position: absolute; left: var(--g); right: var(--g); top: calc(var(--g) + 92px); display: flex; flex-direction: column; align-items: center; text-align: center; font-size: min(6.4vw, 8.2svh); line-height: .86; }
.poosh__t span { display: block; white-space: nowrap; }
.poosh__s { position: absolute; left: 50%; bottom: calc(var(--g) + 46px); translate: -50% 0; width: min(46vw, 640px); text-align: justify; hyphens: auto; font-size: var(--serif-s); line-height: 1.16; letter-spacing: -.015em; }

/* =========================================================
   2. OVER MIJ (lilac paper, wine ink)
   ========================================================= */
.maison {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; column-gap: 4vw;
  padding: 16svh var(--g) 6svh;
}
.maison__left { grid-column: 1; grid-row: 1; align-self: start; margin-top: 6svh; max-width: 19em; display: flex; flex-direction: column; gap: 14px; font-size: 18px; }
.maison__lead { font-size: clamp(32px, 3vw, 50px); line-height: 1; }
.maison__left .uline { align-self: flex-start; margin-top: 10px; }
.maison__photo { grid-column: 2; grid-row: 1; width: min(24vw, 42svh); background: var(--white); padding: clamp(8px, .9vw, 14px); }
.maison__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.maison__right { grid-column: 3; grid-row: 1; align-self: start; justify-self: end; margin-top: 6svh; max-width: 19em; display: flex; flex-direction: column; align-items: flex-end; gap: 28px; font-size: 18px; }
.maison__right p { text-align: left; }
.maison__title { grid-column: 1 / -1; grid-row: 2; justify-self: center; position: relative; z-index: 2; margin-top: -6.5vw; white-space: nowrap; font-size: 15vw; line-height: .78; }

/* =========================================================
   3. SHOOTS (wine-tinted photos, bubblegum)
   ========================================================= */
.cycle { position: relative; }
.cycle__stage { position: relative; height: 100svh; overflow: hidden; }
.cycle__bg { position: absolute; inset: 0; }
.cycle__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.45) contrast(1.05); visibility: hidden; }
.cycle__bg img.is-on { visibility: visible; }
.cycle__t { position: absolute; left: 0; right: 0; top: calc(var(--g) + 116px); text-align: center; font-size: var(--head); }
.cycle__row { position: absolute; left: var(--g); right: var(--g); top: 58%; translate: 0 -50%; display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 2.4vw; }
.cycle__n { font-size: 12px; }
.cycle__w { font-size: clamp(36px, 6.2vw, 108px); line-height: .9; white-space: nowrap; }
.cycle__w--l { text-align: right; }
.cycle__w--r { color: var(--white); }
.cycle__frame { position: relative; width: min(16vw, 28svh); aspect-ratio: 4 / 5; border: 6px solid var(--fg); overflow: hidden; transition: transform .6s var(--ease); }
.cycle__frame:hover { transform: rotate(-3deg) scale(1.04); }
.cycle__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.cycle__frame img.is-on { visibility: visible; }
.cycle__cta { position: absolute; left: 50%; bottom: clamp(70px, 11vh, 110px); translate: -50% 0; font-size: 14px; }

/* =========================================================
   4. PAKKETTEN (white) — one editorial spread, hard cuts
   ========================================================= */
.pk { position: relative; padding: 16svh var(--g) 12svh; }
.pk__t { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: var(--head); }
.pk__t span { display: block; white-space: nowrap; }
.pk__intro { width: min(46vw, 640px); margin: 5svh auto 12svh; text-align: justify; hyphens: auto; font-size: var(--serif-s); line-height: 1.16; letter-spacing: -.015em; }
.pk__spread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.2vw; height: calc(100svh - 2 * var(--g)); min-height: 620px; max-height: 1000px; }
.pk__photo { position: relative; overflow: hidden; }
.pk__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.pk__photo img.is-on { visibility: visible; }
.pk__info { display: flex; flex-direction: column; min-height: 0; padding-top: calc(var(--g) + 104px); }
.pk__tabs { display: flex; flex-wrap: wrap; gap: 10px 2.4vw; padding-bottom: 4svh; }
.pk__tabs button { display: inline-flex; align-items: baseline; gap: .7em; padding-bottom: 4px; font-family: var(--caps); text-transform: uppercase; font-size: 13px; letter-spacing: .05em; opacity: .35; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: opacity .3s, background-size .45s var(--ease); }
.pk__tabs button span { font-size: 10px; }
.pk__tabs button:hover, .pk__tabs button.is-on { opacity: 1; }
.pk__tabs button.is-on { background-size: 100% 1px; }
.pk__item { display: none; flex: 1; flex-direction: column; min-height: 0; }
.pk__item.is-on { display: flex; }
.pk__meta { display: flex; justify-content: space-between; gap: 12px; }
.pk__fav { color: var(--wine); }
.pk__name { margin-top: auto; font-size: min(8.4vw, 15svh); line-height: .84; }
.pk__line { margin-top: .3em; font-size: clamp(26px, 2.6vw, 46px); line-height: 1; }
.pk__list { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 2vw; font-size: clamp(15px, 1.2vw, 19px); line-height: 1.25; }
.pk__list li::before { content: "+ "; font-family: var(--caps); }
.pk__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 2vw; }
.pk__price { font-size: min(7.4vw, 13svh); line-height: .8; }
.pk__price small { display: block; margin-bottom: 1.2em; font-weight: 400; letter-spacing: .06em; }
.pk__foot .circle { flex: none; width: 112px; height: 112px; font-size: 26px; }
.pk__duo { margin-top: 12svh; text-align: center; font-size: min(4.6vw, 7svh); line-height: 1; }
.pk__duo .uline { margin-left: .6em; vertical-align: middle; color: var(--wine); }
.pk__all { margin-top: 5svh; text-align: center; }

/* =========================================================
   5. VRAGEN (wine) — an interactive magazine cover
   ========================================================= */
.cover { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 3.4vw; min-height: 100svh; padding: calc(var(--top) + 40px) var(--g) calc(var(--g) + 30px); }
.cover__lines { display: flex; flex-direction: column; gap: 6svh; }
.cover__lines--l { align-items: flex-end; text-align: right; }
.cover__lines--r { align-items: flex-start; text-align: left; }
.line { display: flex; flex-direction: column; align-items: inherit; gap: 8px; text-align: inherit; transition: opacity .3s; }
.line__n { font-size: 18px; color: var(--white); }
.line__k { font-size: clamp(28px, 3.1vw, 56px); transition: color .2s; }
.line__q { max-width: 15em; font-size: clamp(20px, 1.5vw, 26px); line-height: 1.1; color: var(--white); }
.line:hover .line__k, .line.is-on .line__k { color: var(--white); }
.cover.is-reading .line:not(.is-on) { opacity: .38; }
.cover__more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px; font-size: clamp(22px, 1.8vw, 30px); }
.cover__more .serif-i { width: 100%; }
.cover__mag { position: relative; width: min(30vw, 56svh); aspect-ratio: 4 / 5; overflow: hidden; container-type: inline-size; background: #4A0A22; }
.cover__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.cover__photo img.is-on { visibility: visible; }
.cover__meta { position: absolute; z-index: 2; left: 5%; right: 5%; top: 4%; display: flex; justify-content: space-between; color: var(--white); font-size: max(9px, 2.6cqw); }
.cover__mast { position: absolute; z-index: 2; left: 0; right: 0; bottom: 3%; text-align: center; font-size: 46cqw; line-height: .8; color: var(--bubble); pointer-events: none; }
.cover__blurb { position: absolute; z-index: 2; left: 8%; right: 8%; top: 10%; text-align: center; font-family: var(--caps); font-weight: 700; text-transform: uppercase; font-size: max(10px, 3.2cqw); line-height: 1.12; color: var(--bubble); }
.cover__page { position: absolute; inset: 0; z-index: 4; padding: 7% 8% 7%; background: var(--lilac); color: var(--wine); clip-path: inset(100% 0% 0% 0%); }
.cover__art { display: flex; flex-direction: column; height: 100%; }
.cover__art[hidden] { display: none; }
.cover__art .label { display: flex; justify-content: space-between; }
.cover__art h3 { margin-top: 9%; font-size: 10.5cqw; line-height: .9; color: var(--wine); }
.cover__a { margin-top: 7%; font-family: var(--serif); font-size: max(17px, 5.6cqw); line-height: 1.12; letter-spacing: -.02em; color: var(--ink); text-align: justify; hyphens: auto; }
.cover__a::first-letter { float: left; padding: .05em .08em 0 0; font-size: 3.1em; line-height: .78; color: var(--wine); }
.cover__end { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; }

/* =========================================================
   6. BOEKEN (khaki + lavender) — Poosh statement + quiet form, circle to send
   ========================================================= */
.book { position: relative; padding: 16svh var(--g) 14svh; }
.book__t { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: var(--head); margin-bottom: 12svh; }
.book__t span { display: block; white-space: nowrap; }
.rsvp { position: relative; width: min(100%, 880px); margin: 0 auto; }
.rsvp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5svh 3.2vw; }
.f { display: flex; flex-direction: column; gap: 8px; }
.f input { width: 100%; padding: 4px 0 10px; font-family: var(--serif); font-size: clamp(24px, 2.1vw, 34px); letter-spacing: -.02em; color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid rgba(223, 187, 255, .55); border-radius: 0; transition: border-color .3s, box-shadow .3s; }
.f input:focus { outline: none; border-bottom-color: var(--lavender); box-shadow: 0 1px 0 var(--lavender); }
.f.is-error input { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.f.is-error .label { color: var(--ink); }
.f--wide { margin-top: 5svh; }
.pick { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15em .45em; margin: 7svh 0 0; padding: 0; border: 0; font-family: var(--serif); font-size: clamp(26px, 2.4vw, 40px); line-height: 1.2; letter-spacing: -.02em; }
.pick legend { float: left; width: 100%; margin-bottom: 14px; padding: 0; }
.pick label { position: relative; cursor: pointer; }
.pick label + label::before { content: "/"; margin-right: .45em; opacity: .45; }
.pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pick span { font-style: italic; opacity: .6; transition: opacity .3s; }
.pick label:hover span, .pick input:checked + span { opacity: 1; }
.pick input:checked + span { font-style: normal; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.pick input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 3px; }
.pick.is-error legend, .pick.is-error span { color: var(--ink); }
.rsvp__send { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 9svh; }
.circle--lg { width: 148px; height: 148px; font-size: 32px; }
.rsvp__note { max-width: 15em; font-size: 15px; line-height: 1.3; }
.form__msg { margin-top: 22px; text-align: center; }
.form__done { position: absolute; inset: -10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; background: var(--bg); visibility: hidden; }
.form__done.is-on { visibility: visible; }
.form__done .head { font-size: clamp(64px, 8vw, 130px); }
.form__done p:last-child { max-width: 26em; font-size: 18px; }

/* =========================================================
   7. STUDIO (next page) — full-bleed window, serif statement in the active pink
   ========================================================= */
.feat { position: relative; height: 100svh; min-height: 560px; clip-path: inset(0 0 0 0); background: var(--wine); color: var(--white); --fg: var(--bubble); --hl: var(--bubble); --pop: var(--bubble); --pop-ink: var(--wine); }
.feat__link { display: block; height: 100%; color: inherit; text-decoration: none; }
.feat__win { position: fixed; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(4px, .45vw, 8px); background: var(--wine); }
.feat__win::after { content: ""; position: absolute; inset: 0; background: rgba(40, 0, 16, .34); }
.feat__p { position: relative; overflow: hidden; }
.feat__p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.feat__link:hover .feat__p img { transform: scale(1.03); }
.feat__t { position: absolute; z-index: 2; left: var(--g); right: var(--g); top: 50%; translate: 0 -55%; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: min(8.4vw, 15svh); }
.feat__t span { display: block; white-space: nowrap; }
.feat__s { position: absolute; z-index: 2; left: 50%; bottom: calc(var(--g) + 64px); translate: -50% 0; width: min(36vw, 460px); text-align: justify; hyphens: auto; font-size: 15px; line-height: 1.3; }
.feat__row { position: absolute; z-index: 2; left: var(--g); right: var(--g); bottom: var(--g); display: grid; grid-template-columns: 1fr 2fr 2fr 1fr; align-items: baseline; }
.feat__row .serif-i { font-size: var(--serif-xs); }
.feat__row span:last-child { text-align: right; }

/* =========================================================
   8. FOOTER (white) — lookbook of three, logo, caps row
   ========================================================= */
.foot { position: relative; padding: 16svh var(--g) var(--g); }
.foot__say { text-align: center; font-size: var(--head); margin-bottom: 10svh; }
.foot__look { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.2vw; }
.foot__look a { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 12px 14px; text-decoration: none; }
.foot__look figure { grid-column: 1 / -1; overflow: hidden; aspect-ratio: 4 / 5; }
.foot__look img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.foot__look a:hover img { transform: scale(1.04); }
.foot__look .serif-i { font-size: clamp(20px, 1.6vw, 26px); }
.foot__look a:nth-child(2) { margin-top: 10svh; }
.foot__handle { margin-top: 8svh; text-align: center; }
.foot__word { margin-top: 12svh; color: var(--bubble); }
.foot__word > span { display: block; width: max-content; margin: 0 auto; white-space: nowrap; font-size: 16vw; }
.foot__links { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-top: 3svh; font-size: 12px; letter-spacing: .05em; }
.foot__links a { text-decoration: none; }
.foot__credit .serif-i { font-size: 1.7em; text-transform: none; letter-spacing: -.02em; }
.foot__links button { text-transform: inherit; letter-spacing: inherit; }
.foot__links button:hover { color: var(--wine); }
.foot__links a:hover { color: var(--wine); }

/* =========================================================
   PRIVACY PAGE — the white Poosh page as a reading page
   ========================================================= */
.legal { position: relative; padding: 22svh var(--g) 14svh; }
.legal__t { text-align: center; font-size: var(--head); }
.legal__intro { width: min(46vw, 640px); margin: 5svh auto 10svh; text-align: justify; hyphens: auto; font-size: var(--serif-s); line-height: 1.16; letter-spacing: -.015em; }
.legal__body { width: min(100%, 720px); margin: 0 auto; display: grid; gap: 6svh; }
.legal__body h2 { margin-bottom: 12px; color: var(--wine); }
.legal__body p, .legal__body li { font-size: 17px; line-height: 1.5; }
.legal__body ul { display: grid; gap: 4px; }
.legal__body li::before { content: "+ "; font-family: var(--caps); }
.legal__body a { color: var(--wine); }
.legal__back { margin-top: 10svh; text-align: center; }

/* =========================================================
   PAGE FLIP — the quick transition for nav and text links:
   a sheet in the next page's colour with its title, which lifts off the new page.
   (The photo transition stays for the photo links: "Volgende" blocks and the studio window.)
   ========================================================= */
.flip { position: fixed; inset: 0; z-index: 420; display: grid; place-items: center; visibility: hidden; clip-path: inset(100% 0% 0% 0%); pointer-events: none; }
.flip[data-c="wine"]   { background: var(--wine);   color: var(--bubble); }
.flip[data-c="lilac"]  { background: var(--lilac);  color: var(--wine); }
.flip[data-c="bubble"] { background: var(--bubble); color: var(--wine); }
.flip[data-c="khaki"]  { background: var(--khaki);  color: var(--lavender); }
.flip[data-c="white"]  { background: var(--white);  color: var(--ink); }
.flip__t { font-size: min(12vw, 22svh); color: inherit; white-space: nowrap; }
.flip__row { position: absolute; left: var(--g); right: var(--g); bottom: var(--g); display: flex; justify-content: space-between; }
.flip__row .serif-i { font-size: var(--serif-xs); }
.is-flipping .flip { visibility: visible; clip-path: inset(0% 0% 0% 0%); }
.js [data-intro] { opacity: 0; } /* JS brings the first lines in once the page is uncovered */

/* button row in caps with an underline for the active one (package tabs, lookbook filters) */
.tabset { display: flex; flex-wrap: wrap; gap: 10px 2.4vw; }
.tabset button { display: inline-flex; align-items: baseline; gap: .6em; padding-bottom: 4px; font-family: var(--caps); text-transform: uppercase; font-size: 13px; letter-spacing: .05em; opacity: .35; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: opacity .3s, background-size .45s var(--ease); }
.tabset button sup, .tabset button span { font-size: 10px; }
.tabset button:hover, .tabset button.is-on { opacity: 1; }
.tabset button.is-on { background-size: 100% 1px; }

/* a fixed row of four labels along the bottom of a full-screen block */
.row4 { position: absolute; z-index: 3; left: var(--g); right: var(--g); bottom: var(--g); display: grid; grid-template-columns: 1fr 2fr 2fr 1fr; align-items: baseline; }
.row4 .serif-i { font-size: var(--serif-xs); text-transform: none; letter-spacing: -.02em; }
.row4 > :last-child { text-align: right; }

/* the white Poosh page as a statement: serif lines, one photo, small justified text */
.say { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6svh; padding: 20svh var(--g) 16svh; text-align: center; }
.say__t { display: flex; flex-direction: column; align-items: center; font-size: min(6.4vw, 8.2svh); line-height: .86; }
.say__t span { display: block; white-space: nowrap; }
.say__img { width: min(22vw, 40svh); aspect-ratio: 4 / 5; overflow: hidden; }
.say__img img { width: 100%; height: 100%; object-fit: cover; }
.say__s { width: min(46vw, 640px); text-align: justify; hyphens: auto; font-size: var(--serif-s); line-height: 1.16; letter-spacing: -.015em; }

/* how it works: big serif numbers in the active pink */
.steps { position: relative; padding: var(--pad) var(--g) 14svh; }
.steps__t { text-align: center; font-size: var(--head); margin-bottom: 12svh; }
.steps__list { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 2.6vw; }
.steps__n { display: block; font-size: min(9vw, 16svh); line-height: .8; color: var(--pop); }
.steps__k { margin-top: 3svh; font-size: clamp(20px, 1.7vw, 30px); }
.steps__p { margin-top: 1.6svh; max-width: 22em; font-size: 17px; line-height: 1.4; }
.steps__more { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 14px 4vw; margin-top: 12svh; font-size: clamp(22px, 1.8vw, 30px); }

/* VOLGENDE — every page ends on the next one; this link uses the photo transition */
.next { position: relative; }
.next__link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4svh; min-height: 92svh; padding: calc(var(--top) + 20px) var(--g) calc(var(--g) + 60px); text-decoration: none; color: inherit; overflow: hidden; }
.next__t { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: min(11vw, 20svh); transition: letter-spacing .9s var(--ease); }
.next__t span { display: block; white-space: nowrap; }
.next__link:hover .next__t { letter-spacing: 0; }
.next__s { width: min(44vw, 600px); text-align: justify; hyphens: auto; font-size: var(--serif-s); line-height: 1.16; letter-spacing: -.015em; }

/* =========================================================
   LOOKBOOK — one horizontal walk: the cover card between the words, then every look with
   white space around it (different sizes, always centred). No footer: the corners carry the info.
   ========================================================= */
.lbx { position: relative; height: 100svh; overflow: hidden; }
.lbx__track { position: relative; display: flex; align-items: center; width: max-content; height: 100%; will-change: transform; }
.lbh { position: relative; flex: none; width: 100vw; height: 100%; overflow: hidden; --lbw: min(26vw, 46svh); }
.lbh__card { position: absolute; left: 50%; top: 50%; width: var(--lbw); aspect-ratio: 4 / 5; translate: -50% -50%; overflow: hidden; background: #EFE7E4; cursor: pointer; transition: opacity .6s var(--ease), filter .6s; }
.lbh__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.lbh__card img.is-on { visibility: visible; }
.lbh__w { position: absolute; top: 50%; translate: 0 -50%; font-size: min(12.5vw, 25svh); white-space: nowrap; }
.lbh__w--l { right: calc(50% + var(--lbw) / 2 + 2vw); }
.lbh__w--r { left: calc(50% + var(--lbw) / 2 + 2vw); }

.lbx-item { --h: calc(var(--s, 1) * min(76svh, 118vw)); flex: none; margin-left: var(--gap, 8vw); text-decoration: none; color: inherit; transition: opacity .6s var(--ease), filter .6s; }
.lbx-item__in { display: flex; flex-direction: column; gap: 12px; }
.lbx-item__img { display: block; height: calc(var(--h) * .9); aspect-ratio: 2 / 3; overflow: hidden; }
.lbx-item__img img { width: 100%; height: 100%; object-fit: cover; scale: 1.12; transition: scale 1.2s var(--ease); }
.lbx-item:hover .lbx-item__img img, .lbx-item:focus-visible .lbx-item__img img { scale: 1.17; }
.lbx-item__cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lbx-item__cap .serif-i { font-size: clamp(18px, calc(var(--h) * .042), 26px); transition: color .3s; }
.lbx-item:hover .lbx-item__cap .serif-i { color: var(--wine); }
.lbx-say { flex: none; margin-left: var(--gap, 8vw); display: flex; flex-direction: column; align-items: center; text-align: center; font-size: min(6.4vw, 11svh); transition: opacity .6s var(--ease); }
.lbx-say span { display: block; white-space: nowrap; }
.lbx.is-filtered .lbx-item:not(.is-match), .lbx.is-filtered .lbx-say, .lbx.is-filtered .lbh__card:not(.is-match) { opacity: .08; filter: grayscale(1); }

/* the corners: where you are, filters, the index, booking */
.lbx-ui { position: fixed; inset: 0; z-index: 150; pointer-events: none; color: var(--ink); transition: opacity .4s; }
.lbx-ui > * { position: absolute; pointer-events: auto; }
.lbx-ui.is-hidden, .panel-open .lbx-ui, .is-arriving .lbx-ui { opacity: 0; }
.lbx-ui.is-hidden > *, .panel-open .lbx-ui > * { pointer-events: none; }
.lbx-ui__folio { top: calc(var(--g) + 2px); left: 50%; translate: -50% 0; white-space: nowrap; }
.lbx-ui__count { left: var(--g); bottom: var(--g); }
.lbx-ui__count .serif-i { margin-left: .5em; font-size: var(--serif-xs); letter-spacing: -.02em; text-transform: none; }
.lbx-ui__filters { left: 50%; bottom: var(--g); translate: -50% 0; flex-wrap: nowrap; }
.lbx-ui__links { right: var(--g); bottom: var(--g); display: flex; gap: 2vw; }

/* the index (wine): every look at once */
.lbx-index { position: fixed; inset: 0; z-index: 425; overflow-y: auto; overscroll-behavior: contain; padding: var(--g) var(--g) 8svh; background: var(--wine); color: var(--bubble); visibility: hidden; }
.lbx-index.is-on { visibility: visible; }
.lbx-index__top { display: flex; justify-content: space-between; align-items: baseline; }
.lbx-index__t { margin: 9svh 0 5svh; text-align: center; font-size: var(--head); }
.lbx-index__filters { justify-content: center; margin-bottom: 7svh; }
.lbx-index__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4svh 1.4vw; }
.lbx-index__grid button { display: flex; flex-direction: column; gap: 10px; text-align: left; transition: opacity .4s; }
.lbx-index__grid button.is-dim { opacity: .2; }
.lbx-index__img { display: block; aspect-ratio: 2 / 3; overflow: hidden; }
.lbx-index__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.lbx-index__grid button:hover img { transform: scale(1.05); }
.lbx-index__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lbx-index__cap .serif-i { font-size: 19px; }

.viewer { position: fixed; inset: 0; z-index: 430; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 2svh; padding: var(--g); background: var(--wine); color: var(--bubble); visibility: hidden; }
.viewer.is-on { visibility: visible; }
.viewer__top, .viewer__bot { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 20px; }
.viewer__top > :last-child, .viewer__bot > :last-child { justify-self: end; }
.viewer__stage { position: relative; min-height: 0; }
.viewer__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.viewer__zone { position: absolute; z-index: 2; top: 0; bottom: 0; width: 50%; }
.viewer__zone--prev { left: 0; }
.viewer__zone--next { right: 0; }
.viewer__no { font-size: clamp(40px, 5vw, 90px); line-height: .8; }
.viewer__cat { font-size: clamp(26px, 2.6vw, 46px); }
.viewer__nav { display: flex; gap: 2vw; }

/* =========================================================
   PAKKETTEN PAGE — the contact layout in wine, the homepage package spread, duo (wine), how it works
   ========================================================= */
/* hero: the contact layout in wine — the photo follows the package you point at */
.pkh .ct__photo { background: #4A0A22; }
.pkh .ct__main { display: flex; flex-direction: column; min-height: calc(100svh - 2 * var(--g)); padding-bottom: 2svh; }
.pkh__list { margin-top: auto; padding-top: 6svh; display: flex; flex-direction: column; gap: 1.2svh; }
.pkh__list a { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto auto; align-items: baseline; gap: 1.6vw; text-decoration: none; }
.pkh__list .name { font-size: clamp(30px, 3.6vw, 64px); }
.pkh__list a:hover .name, .pkh__list a:focus-visible .name { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.03em; color: var(--white); }
.pkh__list .serif-i { font-size: clamp(20px, 1.5vw, 26px); }
.pkh__price { font-family: var(--caps); font-weight: 700; font-size: clamp(18px, 1.6vw, 28px); letter-spacing: -.03em; }

.ppd { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5vw; align-items: center; padding: 16svh var(--g); }
.ppd__photo { justify-self: end; width: min(100%, 34vw); aspect-ratio: 4 / 5; overflow: hidden; }
.ppd__photo img { width: 100%; height: 100%; object-fit: cover; }
.ppd__info { display: flex; flex-direction: column; align-items: flex-start; gap: 4svh; max-width: 40em; }
.ppd__t { font-size: var(--head); }
.ppd__s { max-width: 30em; text-align: justify; hyphens: auto; font-size: var(--serif-s); line-height: 1.16; letter-spacing: -.015em; }
.ppd__price { font-size: min(9vw, 16svh); line-height: .8; }
.ppd__price small { display: block; margin-bottom: 1.2em; font-weight: 400; letter-spacing: .06em; }

/* =========================================================
   STUDIO PAGE — the window from the homepage opens up: triptych hero (wine), statement (white),
   sets index (lilac), what's included + rates (white), the rental form (khaki)
   ========================================================= */
.hero__frame--tri { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(4px, .45vw, 8px); background: var(--wine); }
.sth__type { position: absolute; z-index: 3; left: var(--g); right: var(--g); top: 50%; translate: 0 -54%; color: var(--bubble); }
.sth__mark { display: block; white-space: nowrap; font-size: 16vw; }
.sth .row4 { color: var(--bubble); }

.sets { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4vw; padding: var(--pad) var(--g) 16svh; align-items: start; }
.sets__t { font-size: var(--head); margin-bottom: 8svh; }
.sets__list { display: flex; flex-direction: column; gap: 3svh; }
.sets__item { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); column-gap: 1.2vw; row-gap: 6px; align-items: baseline; text-align: left; }
.sets__item .label { padding-top: .3em; }
.sets__item .name { font-size: clamp(34px, 4.6vw, 84px); }
.sets__item .serif-i { grid-column: 2; font-size: clamp(20px, 1.5vw, 26px); }
.sets__item:hover .name, .sets__item:focus-visible .name, .sets__item.is-on .name { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.03em; }
.sets__m { display: none; }
.sets__photo { position: sticky; top: calc(var(--g) + 136px); justify-self: end; width: min(100%, calc((100svh - var(--g) * 2 - 136px) * .8)); aspect-ratio: 4 / 5; overflow: hidden; background: #E996EB; }
.sets__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.sets__photo img.is-on { visibility: visible; }
.sets__photo figcaption { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; display: flex; justify-content: space-between; color: var(--white); }

.incl { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5vw; align-items: center; padding: var(--pad) var(--g) 6svh; }
.incl__t { display: flex; flex-direction: column; font-size: var(--head); margin-bottom: 6svh; }
.incl__t span { display: block; white-space: nowrap; }
.incl__list li { font-family: var(--serif); font-size: clamp(28px, 2.8vw, 50px); line-height: 1.12; letter-spacing: -.02em; }
.incl__list li::before { content: "+ "; font-family: var(--caps); font-size: .55em; vertical-align: .3em; }
.incl__who { display: flex; flex-wrap: wrap; gap: 8px 2vw; margin-top: 6svh; }
.incl__photo { justify-self: end; width: min(100%, 32vw); aspect-ratio: 4 / 5; overflow: hidden; }
.incl__photo img { width: 100%; height: 100%; object-fit: cover; }

.rates { position: relative; padding: var(--pad) var(--g) 16svh; }
.rates__t { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: var(--head); }
.rates__t span { display: block; white-space: nowrap; }
.rates__intro { width: min(46vw, 640px); margin: 5svh auto 12svh; text-align: justify; hyphens: auto; font-size: var(--serif-s); line-height: 1.16; letter-spacing: -.015em; }
.rates__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6vw; }
.rate { display: flex; flex-direction: column; gap: 2.6svh; }
.rate__name { font-size: min(5.6vw, 10svh); line-height: .86; }
.rate__line { font-size: clamp(22px, 2vw, 34px); line-height: 1; }
.rate__list { display: grid; gap: 6px; font-size: clamp(15px, 1.2vw, 19px); }
.rate__list li::before { content: "+ "; font-family: var(--caps); }
.rate__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 2vw; margin-top: 2svh; }
.rate__price { font-size: clamp(26px, 2.6vw, 46px); line-height: .86; }
.rate__price small { display: block; margin-bottom: 1.2em; font-weight: 400; letter-spacing: .06em; }

.qa { position: relative; padding: var(--pad) var(--g) 16svh; }
.qa__t { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: var(--head); margin-bottom: 10svh; }
.qa__t span { display: block; white-space: nowrap; }
.qa__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6vw; }
.qa__q { margin-top: 16px; font-size: clamp(26px, 2.4vw, 42px); line-height: 1; }
.qa__a { margin-top: 2.4svh; max-width: 24em; font-size: 17px; line-height: 1.4; }
.qa__more { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 10px 24px; margin-top: 12svh; font-size: clamp(22px, 1.8vw, 30px); }

/* =========================================================
   CONTACT PAGE (khaki) — the photo follows the shoot you pick, the form beside it
   ========================================================= */
.ct { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4vw; padding: var(--g); }
.ct__photo { position: sticky; top: var(--g); height: calc(100svh - 2 * var(--g)); overflow: hidden; background: #6F6219; }
.ct__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.ct__photo img.is-on { visibility: visible; }
.ct__cap { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; display: flex; justify-content: space-between; align-items: baseline; color: var(--white); }
.ct__cap .serif-i { font-size: 22px; }
.ct__main { padding: calc(var(--top) + 50px) 0 12svh; min-width: 0; }
.ct__t { font-size: 12vw; }
.ct__intro { margin: 5svh 0 10svh; max-width: 32em; text-align: justify; hyphens: auto; font-size: var(--serif-s); line-height: 1.16; letter-spacing: -.015em; }
.ct .rsvp { width: 100%; }
.ct .pick { margin-top: 6svh; }
.ct .rsvp__send { justify-content: flex-start; }
.ct .pick + .rsvp__grid { margin-top: 7svh; }
.ct .pick:first-child { margin-top: 0; }

.direct { position: relative; padding: var(--pad) var(--g) 16svh; }
.direct__t { text-align: center; font-size: var(--head); margin-bottom: 10svh; }
.direct__list { display: flex; flex-direction: column; gap: 5svh; }
.direct__list > * { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); align-items: baseline; gap: 2vw; text-decoration: none; }
.direct__k { font-size: clamp(22px, 2vw, 34px); }
.direct__v { font-size: clamp(30px, 5.2vw, 100px); overflow-wrap: anywhere; }
.direct__list a:hover .direct__v, .direct__list a:focus-visible .direct__v { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.03em; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1000px) {
  .nav__links { left: 64%; }
  .poosh__t { top: calc(var(--g) + 132px); }
  .maison__right .circle { display: none; }
  .panel { grid-template-columns: 1fr 1fr; }
  .panel__cols { grid-column: 1 / -1; }
  .panel__big { grid-column: 1 / -1; }
  .panel__about { grid-column: 1 / -1; }
  .panel__img { display: none; }
  .pk__list { grid-template-columns: 1fr; }
  .line__k { font-size: 4.4vw; }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  .poosh__t { top: calc(var(--g) + 92px); }
  .hero__type { top: calc(var(--g) + 64px); }
  .pk__spread { grid-template-columns: 1fr; height: auto; min-height: 0; max-height: none; gap: 5svh; }
  .pk__photo { height: 72svh; }
  .pk__item { gap: 3svh; }
  .pk__info { padding-top: 0; }
  .feat__win { grid-template-columns: 1fr; gap: 0; }
  .feat__p--side { display: none; }
  .feat__s { width: min(70vw, 460px); }
  .cover { grid-template-columns: 1fr; gap: 6svh; align-items: start; }
  .cover__mag { order: -1; justify-self: center; width: min(86vw, 70svh); }
  .cover__lines, .cover__lines--l, .cover__lines--r { align-items: flex-start; text-align: left; gap: 4svh; }
  .line__k { font-size: 7.4vw; }
  .foot__look { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); gap: 14px; margin: 0 calc(-1 * var(--g)); padding: 0 var(--g); scrollbar-width: none; }
  .foot__look a { flex: 0 0 62vw; scroll-snap-align: start; }
  .foot__look a:nth-child(2) { margin-top: 0; }

  .lbx-index__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ppd, .sets, .incl { grid-template-columns: 1fr; gap: 7svh; }
  .ppd__photo, .incl__photo { justify-self: center; width: min(100%, 72vw); }
  .sets__photo { display: none; }
  .sets__m { display: block; grid-column: 2; width: min(100%, 62vw); aspect-ratio: 4 / 5; overflow: hidden; margin-top: 12px; }
  .sets__m img { width: 100%; height: 100%; object-fit: cover; }
  .rates__cols, .qa__cols { grid-template-columns: 1fr; gap: 9svh; }
  .steps__list { grid-template-columns: 1fr 1fr; row-gap: 8svh; }
  .ct { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .ct__photo { position: relative; top: 0; height: 78svh; }
  .ct__main { padding: 9svh var(--g) 10svh; }
  .ct__t { font-size: 20vw; }
  .pkh .ct__main { min-height: 0; padding-bottom: 8svh; }
  .hero__frame--tri { grid-template-columns: 1fr; }
  .hero__frame--tri [data-side] { display: none; }
}

@media (max-width: 680px) {
  :root { --cw: min(46vw, 30svh); --top: 72px; --head: 9.4vw; --serif-s: 18px; --serif-xs: 18px; }
  .nav__logo { font-size: 26px; }
  .nav__burger { width: 72px; }
  .panel { display: flex; flex-direction: column; justify-content: space-between; padding-top: 80px; }
  .panel__big { align-self: flex-start; }
  .panel__big a { font-size: 13vw; }
  .panel__cols > div:nth-child(2) { display: none; }
  .panel__cols { grid-template-columns: 1fr; gap: 26px; padding-top: 0; }
  .panel__h { margin-bottom: 10px; }
  .loader__l, .loader__r { font-size: 11px; }
  .loader__l.logo { font-size: 22px; }
  .loader__l { right: calc(50% + var(--cw) / 2 + 10px); }
  .loader__r { left: calc(50% + var(--cw) / 2 + 10px); }
  .pt__row { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .corners a { font-size: 17px; }
  .folio { top: 58px; left: var(--g); translate: none; }
  .past-hero .corners { opacity: 0; pointer-events: none; }
  .past-hero .corners a { pointer-events: none; }

  .hero__type { top: 76px; }
  .hero__cover { top: calc(86px + 17.4vw); bottom: auto; flex-direction: column; align-items: stretch; gap: 0; }
  .hero__line { gap: 0; }
  .hero__line--r { align-self: flex-end; }
  .hero__line .name { font-size: 6.4vw; white-space: nowrap; }
  .hero__line .name br, .hero__line .label { display: none; }
  .row4 { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .row4 .serif-i { display: none; }
  .pkh__list a { grid-template-columns: 2em minmax(0, 1fr) auto; gap: 10px; }
  .pkh__list .serif-i { display: none; }
  .pkh__list .name { font-size: 9.4vw; }
  .cookie { left: var(--g); width: auto; }
  .poosh__t { top: 74px; font-size: 9.4vw; }
  .poosh__s { width: calc(100vw - 2 * var(--g)); bottom: 58px; }

  .maison { grid-template-columns: 1fr; padding: 14svh var(--g) 8svh; }
  .maison__left, .maison__photo, .maison__right, .maison__title { grid-column: 1; grid-row: auto; }
  .maison__left { margin: 0 0 5svh; }
  .maison__photo { width: 66vw; justify-self: center; }
  .maison__title { margin-top: 7svh; font-size: 17vw; }
  .maison__right { margin: 6svh 0 0; justify-self: start; align-items: flex-start; }

  .cycle__row { grid-template-columns: 1fr; justify-items: center; gap: 2.4svh; top: 57%; }
  .cycle__n { display: none; }
  .cycle__w { font-size: 11vw; text-align: center !important; }
  .cycle__frame { width: 34vw; border-width: 4px; }
  .cycle__t { top: 84px; }

  .pk__intro { width: 100%; margin-bottom: 8svh; }
  .legal__intro { width: 100%; }
  .pk__photo { height: 62svh; }
  .pk__tabs { gap: 10px 18px; padding-bottom: 3svh; }
  .pk__tabs button { font-size: 12px; }
  .pk__name { font-size: 15vw; }
  .pk__line { font-size: 24px; }
  .pk__list { grid-template-columns: 1fr 1fr; font-size: 14px; gap: 4px 12px; }
  .pk__price { font-size: 14vw; }
  .pk__foot .circle { width: 92px; height: 92px; font-size: 22px; }
  .pk__duo { font-size: 8vw; }
  .pk__duo .uline { display: table; margin: 18px auto 0; }

  .cover__mag { width: 100%; }
  .line__k { font-size: 10vw; }

  .feat__t { font-size: 14vw; }
  .feat__s { display: none; }
  .feat__row { grid-template-columns: 1fr 1fr; row-gap: 6px; }

  .rsvp__grid { grid-template-columns: 1fr; gap: 3.2svh; }
  .f--wide { margin-top: 3.2svh; }
  .pick { margin-top: 4.5svh; }
  .book__t { margin-bottom: 7svh; }
  .pick { font-size: 26px; }
  .rsvp__send { flex-direction: column; text-align: center; }
  .circle--lg { width: 120px; height: 120px; font-size: 26px; }
  .foot__look a { flex-basis: 78vw; }
  .foot__links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .foot__credit { grid-column: 1 / -1; }
  .foot__links button { text-align: left; }

  :root { --pad: 13svh; }
  .flip__t { font-size: 15vw; }
  .say { padding: 14svh var(--g) 12svh; }
  .say__t { font-size: 9.4vw; }
  .say__img { width: 58vw; }
  .say__s { width: 100%; }
  .steps__list { grid-template-columns: 1fr; }
  .steps__n { font-size: 22vw; }
  .next__s { width: 100%; }
  .next__t span { white-space: normal; text-wrap: balance; }

  .lbh { --lbw: 60vw; }
  .lbh__w { font-size: 19vw; translate: none; }
  .lbh__w--l { right: auto; left: var(--g); top: auto; bottom: calc(50% + var(--lbw) * .625 + 14px); }
  .lbh__w--r { left: auto; right: var(--g); top: calc(50% + var(--lbw) * .625 + 10px); }
  .lbx-item, .lbx-say { margin-left: 14vw; }
  .lbx-say { font-size: 10vw; }
  .lbx-ui__filters { display: none; }
  .lbx-ui__folio { top: 58px; left: var(--g); translate: none; }
  .lbx-ui__links { gap: 16px; }
  .lbx-index__filters { justify-content: flex-start; flex-wrap: wrap; margin-bottom: 5svh; }
  .lbx-index__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3svh 10px; }
  .viewer__top, .viewer__bot { grid-template-columns: 1fr 1fr; }
  .viewer__top > :nth-child(2), .viewer__bot > :nth-child(2) { display: none; }

  .ppd__price { font-size: 16vw; }

  .sets__item .name { font-size: 10.4vw; }
  .incl__list li { font-size: 8vw; }
  .rates__intro { width: 100%; }
  .rate__name { font-size: 13vw; }

  .ct__photo { height: 70svh; }
  .direct__list > * { grid-template-columns: 1fr; gap: 4px; }
  .direct__v { font-size: 7.2vw; }
  .next__t { font-size: 11vw; }
}

@media (prefers-reduced-motion: reduce) {
  .roll > span { transition: none; }
  .hero__base img { animation: none; }
}