/* Atelier Anna — experimental. Grotesk + fashion serif, ink/ivory/stone/oxblood. */
@font-face { font-family: "Inter Tight"; src: url("/fonts/inter-tight-normal-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; src: url("/fonts/inter-tight-normal-cyrillic.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; src: url("/fonts/cormorant-garamond-italic-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; size-adjust: 112%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; src: url("/fonts/cormorant-garamond-italic-cyrillic.woff2") format("woff2"); font-weight: 300 700; font-display: swap; size-adjust: 112%; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; src: url("/fonts/cormorant-garamond-normal-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; size-adjust: 112%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; src: url("/fonts/cormorant-garamond-normal-cyrillic.woff2") format("woff2"); font-weight: 300 700; font-display: swap; size-adjust: 112%; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Pinyon"; src: url("/fonts/pinyon.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/fonts/cormorant.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --ink: #1c1917; --text: #3a332f; --mute: #574e48; --meta: var(--meta); --ivory: #F4F0E9; --stone: #B7AB9F; --ox: #6f6257; /* warm taupe accent (oxblood dropped) */ --ivory-2: #EAE4DA;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif; --serif: "Cormorant Garamond", Georgia, serif;
  --ease: cubic-bezier(.16,1,.3,1); --gut: clamp(18px, 3.4vw, 56px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; scroll-behavior: smooth; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ox); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--ivory); padding: 10px 16px; }
.skip:focus { top: 12px; }
h1, h2, h3, p { margin: 0; }
.kicker { font: 500 11px var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.serif-l { font: italic 400 clamp(24px, 2.4vw, 34px)/1.25 var(--serif); }
.btn { display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 28px; background: var(--ink); color: var(--ivory); text-decoration: none; font: 500 13px var(--sans); letter-spacing: .14em; text-transform: uppercase; transition: background .4s var(--ease), color .4s var(--ease); }
.btn svg { width: 17px; height: 17px; }
.btn:hover { background: var(--ox); }
.btn.light { background: var(--ivory); color: var(--ink); }
.btn.light:hover { background: #fff; }
.ul { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 8px 0; cursor: pointer; text-decoration: none; font: 500 14px var(--sans); letter-spacing: .02em; color: inherit; position: relative; }
.ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform-origin: right; transition: transform .5s var(--ease); }
.ul:hover::after { transform: scaleX(0); }
.ul svg { width: 16px; height: 16px; }
.ul small { opacity: .55; font-size: 12px; }
.ul.light { color: var(--ivory); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }

/* logo (brand mark: script A + spaced wordmark) */
.logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.logo .la { font: 40px/1 "Pinyon", cursive; margin-top: 6px; padding-right: 6px; }
.logo .ln { font: 600 12px/1 "Cormorant", serif; letter-spacing: .38em; text-transform: uppercase; }

/* navigation — blends over light and dark sections */
.nav { position: fixed; z-index: 60; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px var(--gut); color: var(--ivory); background: linear-gradient(rgba(28,25,23,.4), transparent); transition: background .3s, color .3s, box-shadow .3s; }
.nav.scrolled { color: var(--ink); background: var(--ivory); box-shadow: 0 1px 0 rgba(28,25,23,.09); }
.nav.scrolled .nav-book:hover { background: var(--ink); color: var(--ivory); }
.nav-links { display: flex; gap: 34px; font-size: 13px; letter-spacing: .04em; }
.nav-links a, .langs a { text-decoration: none; opacity: .72; transition: opacity .3s; }
.nav-links a:hover, .langs a:hover { opacity: 1; }
.nav-r { justify-self: end; display: flex; align-items: center; gap: 26px; }
.langs { display: inline-flex; gap: 12px; font: 500 11.5px var(--sans); letter-spacing: .14em; }
.langs [aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.nav-book { font: 500 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border: 1px solid currentColor; padding: 11px 18px; transition: background .3s, color .3s; }
.nav-book:hover { background: var(--ivory); color: var(--ink); }
.nav-menu { display: none; background: none; border: 0; font: 500 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 10px 0; cursor: pointer; }

/* full-screen mobile menu */
.menu { position: fixed; inset: 0; z-index: 90; background: var(--ink); color: var(--ivory); display: flex; flex-direction: column; padding: 18px var(--gut) 28px; }
.menu[hidden] { display: none; }
.menu-top { display: flex; justify-content: space-between; align-items: center; }
.menu-x { background: none; border: 0; font: 500 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 10px 0; cursor: pointer; }
.menu-list { list-style: none; margin: auto 0; padding: 0; }
.menu-list a { display: flex; align-items: baseline; gap: 16px; text-decoration: none; font: 500 clamp(40px, 11vw, 88px)/1.05 var(--sans); letter-spacing: -.04em; padding: 4px 0; }
.menu-list i { font: italic 500 15px var(--serif); color: var(--stone); letter-spacing: 0; }
.menu-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* HERO */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--ink); color: var(--ivory); }
.hero-media { position: absolute; inset: 0; will-change: clip-path, transform; }
.hero-media picture, .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,25,23,.55) 0%, rgba(28,25,23,0) 26%, rgba(28,25,23,0) 52%, rgba(28,25,23,.75) 100%); pointer-events: none; }
.hero { --hs: clamp(56px, min(15.5vw, 30vh), 290px); }
.hero-word { position: absolute; z-index: 2; font: 700 var(--hs)/.8 var(--sans); letter-spacing: -.06em; color: var(--ivory); white-space: nowrap; pointer-events: none; display: flex; }
.hero-word span { display: inline-block; will-change: transform; }
.hw1 { top: 10vh; left: calc(var(--gut) - .04em); }
.hero-word { text-shadow: 0 2px 40px rgba(0,0,0,.18); }
.hw2 { top: calc(10vh + var(--hs) * .78); right: var(--gut); }
.hero-copy { position: absolute; z-index: 3; left: var(--gut); bottom: 40px; max-width: min(560px, 42vw); }
.hero-sub { font: 500 11px var(--sans); letter-spacing: .24em; text-transform: uppercase; margin-bottom: 16px; opacity: .85; }
.hero h1 { font: italic 400 clamp(28px, 3.1vw, 46px)/1.12 var(--serif); }
.hero h1 > span { display: block; }
.hero h1 .h1b { font-style: normal; font-family: var(--sans); font-weight: 600; letter-spacing: -.03em; text-transform: uppercase; font-size: .82em; margin-top: 6px; }
.hero-cta { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }
.hero-scroll { position: absolute; z-index: 3; right: var(--gut); bottom: 40px; display: flex; align-items: center; gap: 12px; font: 500 11px var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.hero-scroll i { width: 60px; height: 1px; background: rgba(244,240,233,.35); position: relative; overflow: hidden; }
.hero-scroll i::after { content: ""; position: absolute; inset: 0; background: var(--ivory); animation: scan 2.4s var(--ease) infinite; }
@keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .16em 0 .06em; margin: -.16em 0 -.06em; } /* top room keeps Ё/Й/accents */
.w > span { display: inline-block; }

/* MANIFESTO */
.manifesto { background: var(--ivory); padding: clamp(80px, 10vw, 160px) var(--gut) clamp(80px, 10vw, 150px); }
.man-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; align-items: start; }
/* Line 1 left, line 2 (italic word + caps) right: one staggered block, no dead space. */
.man-type { grid-column: 1 / -1; font: 700 clamp(46px, 9.6vw, 176px)/.9 var(--sans); letter-spacing: -.06em; text-transform: uppercase; }
.man-type .w { padding-inline: .06em; margin-inline: -.06em; }
.man-type .ml { display: block; }
.man-type .mlb { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; column-gap: .22em; }
.man-type .ml1 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.16em; text-transform: none; letter-spacing: -.02em; color: var(--ink); }
.man-type .ml1 .w { padding: 0 .12em .14em; margin: 0 -.12em -.14em; }
.man-img { grid-column: 1 / span 5; margin: clamp(56px, 7vw, 120px) 0 0; position: relative; }
.man-img img { aspect-ratio: 4/5; object-fit: cover; object-position: 50% 30%; width: 100%; }
.man-text { grid-column: 7 / span 5; align-self: end; max-width: 560px; display: grid; gap: 18px; color: var(--text); font-size: 15.5px; line-height: 1.65; }
.man-text .serif-l { color: var(--ink); margin-bottom: 10px; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.2; }
.facts { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(28,25,23,.2); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.facts li { font-size: 12px; letter-spacing: .06em; color: var(--meta); }
.facts b { display: block; font: 600 30px/1 var(--sans); letter-spacing: -.04em; color: var(--ink); margin-bottom: 6px; }

/* THE THREAD */
.thread { background: var(--ink); color: var(--ivory); position: relative; }
.thread-stage { position: relative; height: 100svh; min-height: 640px; overflow: hidden; }
.thread-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.tp-base { fill: none; stroke: rgba(244,240,233,.12); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.tp { fill: none; stroke: var(--ivory); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.thread-head { position: absolute; z-index: 4; left: var(--gut); top: 112px; } /* clears the solid nav bar */
.thread-head .kicker { color: var(--stone); }
.thread-head h2 { font: italic 400 clamp(30px, 3.6vw, 54px)/1.05 var(--serif); margin-top: 10px; }
.tf { position: absolute; margin: 0; z-index: 2; }
.tf picture { overflow: hidden; }
.tf img { width: 100%; object-fit: cover; }
.tf figcaption { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin-top: 14px; max-width: 360px; }
.tn { font: 500 11px var(--sans); letter-spacing: .2em; color: var(--stone); padding-top: 6px; grid-row: span 2; }
.tt { font: 600 clamp(22px, 2vw, 30px)/1 var(--sans); letter-spacing: -.03em; text-transform: uppercase; }
.td { font-size: 14px; color: rgba(244,240,233,.7); }
.tf0 { left: 6vw; top: 30vh; width: min(19vw, 30vh); }
.tf0 img { aspect-ratio: 3/4; }
.tf1 { left: 31vw; top: 22vh; width: min(18vw, 34vh); }
.tf1 img { aspect-ratio: 4/5; }
.tf2 { left: 55vw; top: 38vh; width: min(17vw, 30vh); }
.tf2 img { aspect-ratio: 3/4; }
.tf3 { right: 5vw; top: 15vh; width: min(19vw, 32vh); }
.tf3 img { aspect-ratio: 3/4.4; }
.thread-end { position: absolute; z-index: 4; left: var(--gut); bottom: 46px; padding-top: .1em; font: italic 400 clamp(34px, 5vw, 80px)/1 var(--serif); }

/* COLLECTIONS */
.coll { background: var(--ivory); padding: clamp(90px, 12vw, 170px) var(--gut) 90px; }
.coll-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 70px; align-items: end; }
.coll-head .kicker { font: 700 clamp(48px, 9vw, 150px)/.85 var(--sans); letter-spacing: -.06em; text-transform: uppercase; }
.coll-head p { justify-self: end; max-width: 380px; color: var(--mute); }
.cl { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; margin-bottom: clamp(80px, 10vw, 150px); position: relative; }
.cl-img { padding: 0; border: 0; background: var(--ivory-2); cursor: zoom-in; overflow: hidden; display: block; width: 100%; }
.cl-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.cl-img:hover img { transform: scale(1.05); }
.cl0 .cl-img { grid-column: 1 / span 8; aspect-ratio: 16/11; }
.cl0 .cl-text { grid-column: 9 / span 4; }
.cl1 .cl-img { grid-column: 6 / span 5; grid-row: 1; aspect-ratio: 4/5; }
.cl1 .cl-text { grid-column: 1 / span 4; grid-row: 1; align-self: center; }
.cl-n { font: italic 500 19px var(--serif); color: var(--ox); }
.cl h3 { font: 700 clamp(40px, 5.6vw, 92px)/.88 var(--sans); letter-spacing: -.055em; text-transform: uppercase; margin: 10px 0 20px; }
.cl1 h3 { font-family: var(--serif); font-weight: 400; font-style: italic; text-transform: none; letter-spacing: -.02em; }
.cl p { color: var(--mute); max-width: 360px; }
.cl-actions { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 22px; }
.also { border-top: 1px solid var(--ink); padding-top: 16px; }
.also ul { list-style: none; margin: 26px 0 0; padding: 0; }
.also li { border-bottom: 1px solid rgba(28,25,23,.18); }
.also a { display: grid; grid-template-columns: 1.1fr 1.2fr 40px; gap: 24px; align-items: center; padding: 26px 0; text-decoration: none; }
.al-t { font: 600 clamp(26px, 3.4vw, 50px)/1 var(--sans); letter-spacing: -.045em; text-transform: uppercase; transition: transform .6s var(--ease), color .4s; }
.al-d { color: var(--mute); font-size: 15px; }
.al-a svg { width: 28px; transition: transform .5s var(--ease); }
.also a:hover .al-t { transform: translateX(14px); color: var(--ox); }
.also a:hover .al-a svg { transform: translateX(6px); }
.note { margin-top: 26px; font-size: 12px; color: var(--meta); }

/* FILM */
.film { background: var(--ink); color: var(--ivory); padding: 110px 0 120px; overflow: hidden; }
.film-t { font: 700 clamp(60px, 13vw, 230px)/.8 var(--sans); letter-spacing: -.065em; text-transform: uppercase; padding: 0 var(--gut); white-space: nowrap; }
.film-row { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 16px; padding: 0 var(--gut); margin-top: -1.2vw; position: relative; }
.fv { aspect-ratio: 9/16; overflow: hidden; background: var(--ink); }
.fv:nth-child(1) { margin-top: 18vw; } .fv:nth-child(3) { margin-top: 9vw; }
.fv video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* REVIEWS */
.rev { background: var(--ivory); display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding: clamp(90px, 12vw, 160px) var(--gut); }
.rev-l { border-top: 1px solid var(--ink); padding-top: 16px; align-self: start; position: sticky; top: 90px; }
.rev-score { font: 700 clamp(90px, 13vw, 210px)/.9 var(--sans); letter-spacing: -.07em; margin: 26px 0 22px; }
.rev-of { color: var(--mute); margin-bottom: 18px; }
.rq-stage { display: grid; border-top: 1px solid var(--ink); padding-top: 34px; }
.rq { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease), visibility .7s; }
.rq.on { opacity: 1; visibility: visible; transform: none; }
.rq blockquote { margin: 0; font: italic 400 clamp(28px, 3.5vw, 52px)/1.18 var(--serif); }
.rq figcaption { margin-top: 24px; font: 500 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ox); }
.rq-ctrl { display: flex; align-items: center; gap: 18px; margin-top: 30px; }
.rq-ctrl button { width: 48px; height: 48px; border: 1px solid var(--ink); background: none; cursor: pointer; font-size: 18px; transition: background .3s, color .3s; }
.rq-ctrl button:hover { background: var(--ink); color: var(--ivory); }
.rq-i { font: 500 12px var(--sans); letter-spacing: .16em; }
.rq-more { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 40px; }
.rq-more li { border-top: 1px solid rgba(28,25,23,.18); padding-top: 16px; }
.rq-more p { font: italic 500 19px/1.45 var(--serif); }
.rq-more span { display: block; margin-top: 10px; font: 500 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--meta); }
.rev-note { margin-top: 30px; font-size: 12px; color: var(--meta); }

/* VISIT */
.visit { background: var(--ink); color: var(--ivory); display: grid; grid-template-columns: 1fr 1fr; min-height: 90svh; }
.visit-img { margin: 0; overflow: hidden; }
.visit-img picture, .visit-img img { width: 100%; height: 100%; object-fit: cover; }
.visit-c { padding: clamp(60px, 8vw, 120px) var(--gut); display: flex; flex-direction: column; justify-content: center; gap: 30px; }
.visit .kicker { color: var(--stone); }
.addr { font: 700 clamp(44px, 5.6vw, 96px)/.9 var(--sans); letter-spacing: -.055em; text-transform: uppercase; }
.addr span { display: block; font: italic 400 .42em/1.4 var(--serif); letter-spacing: 0; text-transform: none; margin-top: 14px; color: var(--stone); }
.visit dl { margin: 0; display: grid; gap: 0; }
.visit dl div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(244,240,233,.25); }
.visit dt { font: 500 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--stone); padding-top: 3px; }
.visit dd { margin: 0; }

/* FAQ */
.faq { background: var(--ivory); display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding: clamp(90px, 12vw, 160px) var(--gut); }
.faq-t { font: 700 clamp(56px, 8vw, 130px)/.85 var(--sans); letter-spacing: -.06em; text-transform: uppercase; }
.faq-list { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid rgba(28,25,23,.2); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 46px 1fr 24px; align-items: baseline; gap: 12px; padding: 26px 0; }
.faq summary::-webkit-details-marker { display: none; }
.fq-n { font: italic 500 16px var(--serif); color: var(--ox); }
.fq-q { font: 500 clamp(19px, 1.8vw, 25px)/1.25 var(--sans); letter-spacing: -.02em; }
.fq-x { position: relative; width: 16px; height: 16px; align-self: center; }
.fq-x::before, .fq-x::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform .5s var(--ease); }
.fq-x::after { transform: rotate(90deg); }
details[open] .fq-x::after { transform: rotate(0); }
.fq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.fq-a > p { overflow: hidden; padding-left: 58px; color: var(--mute); max-width: 720px; }
details[open] .fq-a { grid-template-rows: 1fr; }
details[open] .fq-a > p { padding-bottom: 26px; }

/* FINAL CTA */
.final { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; color: var(--ivory); background: var(--ink); }
.final-bg { position: absolute; inset: 0; }
.final-bg picture, .final-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.final-c { position: relative; padding: 0 var(--gut) clamp(60px, 8vw, 110px); }
.final h2 { font: 700 clamp(56px, 11vw, 200px)/.84 var(--sans); letter-spacing: -.065em; text-transform: uppercase; }
.final .f1, .final .f2 { display: block; }
.final .f2 { font: italic 400 .62em/1 var(--serif); letter-spacing: -.02em; text-transform: none; color: var(--stone); margin-top: .12em; }
.final p { margin: 26px 0 30px; max-width: 420px; opacity: .85; }

/* FOOTER */
.foot { background: var(--ink); color: var(--ivory); padding: 40px var(--gut) 34px; overflow: hidden; }
.foot-word { font: 700 15.4vw/.78 var(--sans); letter-spacing: -.07em; white-space: nowrap; color: #262321; margin-left: -.03em; }
.foot-row { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 30px; font-size: 13px; color: rgba(244,240,233,.7); align-items: center; }
.foot-row a { text-decoration: none; padding: 6px 0; }
.foot-row a:hover { color: var(--ivory); }

/* floating booking on phones */
.float-book { display: none; }

/* LIGHTBOX */
.lb { position: fixed; inset: 0; z-index: 120; background: rgba(28,25,23,.97); display: grid; place-items: center; padding: 70px 90px; color: var(--ivory); }
.lb[hidden] { display: none; }
.lb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb button { position: absolute; background: none; border: 1px solid rgba(244,240,233,.3); color: var(--ivory); height: 48px; min-width: 48px; padding: 0 14px; cursor: pointer; font: 500 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.lb button:hover { background: rgba(244,240,233,.1); }
.lb-x { top: 16px; right: 16px; }
.lb-p { left: 18px; top: 50%; margin-top: -24px; font-size: 18px !important; }
.lb-n { right: 18px; top: 50%; margin-top: -24px; font-size: 18px !important; }
.lb-i { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font: 500 12px var(--sans); letter-spacing: .2em; }
.lb-on, .lb-on body { overflow: hidden; }

/* ---------- tablet / phone ---------- */
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav { grid-template-columns: 1fr auto; }
  .nav-menu { display: block; }
}
@media (max-width: 900px) {
  .nav { padding: 14px var(--gut); }
  .nav .langs, .nav-book { display: none; }
  .nav-menu { display: block; }
  .logo .la { font-size: 34px; } .logo .ln { font-size: 10.5px; letter-spacing: .3em; }
  .hero-word { font-size: 23vw; }
  .hw1 { top: 12vh; } .hw2 { top: auto; bottom: 37svh; }
  .hero-media img { object-position: 58% 22% !important; }
  .hero-copy { bottom: 30px; right: var(--gut); }
  .hero-scroll { display: none; }
  .hero-media img { object-position: 64% 35%; }
  .hero-shade { background: linear-gradient(180deg, rgba(28,25,23,.5) 0%, rgba(28,25,23,0) 30%, rgba(28,25,23,.2) 50%, rgba(28,25,23,.88) 100%); }
  .man-grid { grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .man-type { font-size: 13.4vw; }
  .man-img { grid-column: 1 / -1; margin-top: 40px; }
  .man-text { grid-column: 1 / -1; margin-top: 36px; max-width: none; }
  .thread-stage { height: auto; min-height: 0; padding: 100px var(--gut) 80px; display: grid; gap: 64px; }
  .thread-head { position: static; }
  .tf { position: relative; left: auto !important; right: auto !important; top: auto !important; width: 86% !important; }
  .tf:nth-of-type(even) { justify-self: end; }
  .thread-svg { display: none; }
  .thread-end { position: static; }
  .thread-stage::before { content: ""; position: absolute; left: calc(var(--gut) / 2); top: 200px; bottom: 140px; width: 1px; background: rgba(244,240,233,.25); }
  .coll-head { grid-template-columns: 1fr; }
  .coll-head p { justify-self: start; }
  .cl { grid-template-columns: 1fr; gap: 22px; }
  .cl0 .cl-img, .cl1 .cl-img, .cl0 .cl-text, .cl1 .cl-text { grid-column: 1; grid-row: auto; }
  .cl0 .cl-img { aspect-ratio: 4/5; }
  .cl1 .cl-img { width: 82%; justify-self: end; }
  .also a { grid-template-columns: 1fr 28px; gap: 8px 14px; }
  .al-d { grid-column: 1; grid-row: 2; }
  .al-a { grid-row: 1 / span 2; grid-column: 2; }
  .film-row { grid-template-columns: repeat(3, 72%); overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 30px; scrollbar-width: none; }
  .fv { scroll-snap-align: center; margin-top: 0 !important; }
  .rev, .faq { grid-template-columns: 1fr; }
  .rev-l { position: static; }
  .rq-more { grid-template-columns: 1fr; }
  .visit { grid-template-columns: 1fr; }
  .visit-img { aspect-ratio: 4/3.4; }
  .visit dl div { grid-template-columns: 1fr; gap: 2px; }
  .final-c .row .btn { width: 100%; justify-content: center; }
  .lb { padding: 70px 10px; }
  .lb-p, .lb-n { top: auto; bottom: 14px; margin: 0; }
  .lb-p { left: 14px; } .lb-n { right: 14px; }
  body { padding-bottom: 0; }
  .float-book { display: inline-flex; position: fixed; z-index: 55; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); align-items: center; gap: 10px; height: 50px; padding: 0 20px; background: var(--ivory); color: var(--ink); text-decoration: none; font: 600 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 10px 30px rgba(0,0,0,.25); transform: translateY(160%); transition: transform .6s var(--ease); }
  .float-book svg { width: 17px; height: 17px; }
  .float-book.show { transform: none; }
}
@media (max-width: 420px) {
  .man-type { font-size: 13vw; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
.lock, .lock body { overflow: hidden; }
html { background: var(--ink); }
.hero-media picture { transform-origin: 50% 45%; }
.cl-img picture { width: 100%; height: 100%; }
.tf picture, .man-img { overflow: hidden; }
.fq-a { display: block; overflow: hidden; transition: none; }
.fq-a > p { padding-bottom: 26px; }
.lb[aria-busy="true"] .lb-i { opacity: .5; }
.btn, .nav-book, .rq-ctrl button { transition: background .3s, color .3s, transform .35s var(--ease); }
.btn:active, .nav-book:active, .rq-ctrl button:active { transform: scale(.98); }
.hero-cta .btn { transition: background .3s, color .3s; }
.cl0 .cl-img img { object-position: 50% 25%; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .cl-img img { transition: transform .8s cubic-bezier(.22,1,.36,1); }
  .cl-img:hover img { transform: scale(1.035); }
}

/* Final responsive and interaction polish. */
.btn { min-height: 54px; height: auto; padding-top: 17px; padding-bottom: 17px; line-height: 1.4; text-align: center; }
.btn svg { flex-shrink: 0; }
.hero-call { display: inline-block; margin-top: 18px; font-size: 12px; text-underline-offset: 4px; opacity: .85; }
.nav-links a { padding: 12px 0; opacity: .88; }
.langs a, .langs [aria-current] { padding: 12px 2px; }
.nav-links a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }
.menu { overflow-y: auto; gap: 24px; }
.menu-list { flex-shrink: 0; }
.menu-foot { padding-bottom: env(safe-area-inset-bottom); }


.tf figcaption { max-width: 100%; }






.coll-head { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.coll-head .kicker { font-size: clamp(42px, 7.5vw, 120px); overflow-wrap: anywhere; }
.faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.faq-t { font-size: clamp(44px, 6vw, 100px); overflow-wrap: anywhere; }
.rq-more { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 42px; }
.visit-note { max-width: 440px; font-size: 14px; color: var(--stone); }




.fv video:focus-visible { outline-offset: -4px; }
.lb img { min-height: 0; max-height: calc(100svh - 140px); }
.lb-i { white-space: nowrap; }
.ul small { opacity: 1; color: var(--meta); }
.note, .rq-more span, .rev-note { color: var(--meta); }
.foot-word { color: #968b80; }
:focus-visible { outline-color: currentColor; }

@media (max-width: 1100px) {
  .nav-r { gap: 18px; }
}
@media (max-width: 900px) {
  html { scroll-padding-top: 82px; }
  .hero { min-height: 740px; }
  .hero-copy { max-width: none; bottom: 28px; }
  .hero-word { font-size: 22vw; }
  .hw1 { top: 100px; }
  .hw2 { top: 180px; bottom: auto; font-size: 18vw; }
  .hero h1 { font-size: clamp(29px, 5.4vw, 42px); max-width: 580px; }
  .hero-sub { max-width: 320px; font-size: 10px; line-height: 1.6; margin-bottom: 12px; }
  .hero-cta { margin-top: 20px; gap: 16px; }
  .hero-cta .btn { justify-content: center; }
  .hero-call { margin-top: 14px; }
  .hero-shade { background: linear-gradient(180deg, rgba(28,25,23,.4), transparent 35%, rgba(28,25,23,.33) 52%, rgba(28,25,23,.93) 100%); }








  .coll { padding-top: 80px; padding-bottom: 64px; }
  .coll-head, .faq { grid-template-columns: minmax(0, 1fr); }
  .coll-head { margin-bottom: 40px; }
  .coll-head .kicker { font-size: clamp(40px, 10vw, 80px); }
  .cl { margin-bottom: 64px; }
  .cl1 .cl-img { width: 90%; }


  .rq-more { grid-template-columns: 1fr; }
  .rev, .faq { padding-top: 72px; padding-bottom: 72px; }
  .visit-c { gap: 24px; }
  .final { min-height: 75svh; }
  .final-c { padding-top: 100px; }
  .float-book { font-size: 11px; height: 46px; padding: 0 16px; }
  .faq-t { font-size: clamp(44px, 11vw, 80px); }
}
@media (max-width: 480px) {
  .hero-cta { align-items: flex-start; flex-direction: column; gap: 10px; }
  .hero-cta .btn { width: 100%; }
  .hero h1 { font-size: 30px; }
  .hero h1 .h1b { font-size: .78em; }

  .facts { gap: 8px; }
  .facts li { font-size: 11px; letter-spacing: 0; }
  .addr { font-size: 11vw; }
  .cl h3 { font-size: clamp(34px, 10vw, 48px); }
  .menu-list a { font-size: 10vw; }
}

.fv video { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .fv video { pointer-events: auto; } }

@media (min-width: 901px) and (max-height: 720px) { .hero h1 { font-size: clamp(24px, 2.5vw, 36px); } .hero-sub { margin-bottom: 10px; } .hero-cta { margin-top: 16px; } .hero-copy { bottom: 28px; } }

/* Hero photo (concrete staircase): on landscape the frame is mirrored so the bride stands right of centre;
   both words stack on the open wall at left and never cross her face. Portrait keeps the tall frame. */
@media (min-aspect-ratio: 1/1) {
  .hero { --hs: clamp(56px, min(13.5vw, 27vh), 250px); }
  .hero-media img { object-position: 22% 16%; }
  .hw2 { left: calc(var(--gut) - .04em); right: auto; }
  .hero-shade { background: linear-gradient(90deg, rgba(28,25,23,.5) 0%, rgba(28,25,23,.18) 45%, rgba(28,25,23,0) 62%), linear-gradient(180deg, rgba(28,25,23,.35) 0%, rgba(28,25,23,0) 22%, rgba(28,25,23,0) 55%, rgba(28,25,23,.7) 100%); }
}
@media (max-aspect-ratio: 1/1) {
  .hero-media img { object-position: 46% 30% !important; }
}

/* Nav hides while scrolling down, returns on scroll up. */
.nav { transition: background .3s, color .3s, box-shadow .3s, transform .6s var(--ease); }
.nav.away { transform: translateY(-100%); }
/* Lenis smooth scroll (desktop pointers only) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Hero refinement (couture, not streetwear) ----------
   1) masthead ~25% smaller, slightly opened tracking; 2) one title + one message (both serif);
   3) no full-photo veil: light only where text sits; 4) copy lifted off the corner; 5) larger nav. */
.hero-word { font-weight: 600; letter-spacing: -.035em; text-shadow: none; }
.hero h1 { font: italic 500 clamp(30px, 2.9vw, 47px)/1.12 var(--serif); }
.hero h1 .h1b { font: inherit; font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 0; opacity: .82; }
.hero-sub { font-size: 11.5px; letter-spacing: .3em; margin-bottom: 20px; opacity: .9; }
.hero-cta { margin-top: 34px; gap: 18px 36px; }
.hero-call { margin-top: 22px; opacity: .75; }
/* hero grading is baked into the image files (no runtime filter) */
@media (min-aspect-ratio: 1/1) {
  .hero { --hs: clamp(48px, min(10.5vw, 21vh), 196px); }
  .hero-copy { bottom: clamp(48px, 11vh, 128px); max-width: min(600px, 44vw); }
  .hero-scroll { bottom: clamp(48px, 11vh, 128px); }
  .hero-shade { background:
    radial-gradient(ellipse 62% 60% at 0% 100%, rgba(28,25,23,.62) 0%, rgba(28,25,23,.3) 45%, rgba(28,25,23,0) 75%),
    linear-gradient(90deg, rgba(28,25,23,.38) 0%, rgba(28,25,23,.12) 34%, rgba(28,25,23,0) 50%),
    linear-gradient(180deg, rgba(28,25,23,.28) 0%, rgba(28,25,23,0) 16%); }
}
@media (min-aspect-ratio: 1/1) and (max-height: 720px) { .hero-copy { bottom: 36px; } .hero-cta { margin-top: 22px; } .hero-call { margin-top: 14px; } }
@media (max-width: 900px) {
  .hero-word { font-size: 19vw; }
  .hw2 { top: calc(100px + 19vw * .84); font-size: 16vw; }
}
.nav { background: linear-gradient(rgba(28,25,23,.22), transparent); }
.nav.scrolled { background: var(--ivory); }
.nav-links { gap: 40px; font-size: 14.5px; letter-spacing: .02em; }
.nav-links a { opacity: .92; }
.langs { gap: 14px; font-size: 12.5px; }
.logo .ln { font-size: 13px; }
.nav-book { font-size: 12.5px; padding: 12px 22px; }

@media (max-width: 900px) { .film-t { font-size: 10.6vw; white-space: normal; } }
.nav.away:focus-within { transform: none; }

/* Display type one notch lighter site-wide, matching the refined hero masthead. */
.man-type, .coll-head .kicker, .cl h3, .al-t, .film-t, .rev-score, .addr, .faq-t, .final h2, .foot-word { font-weight: 600; }
::selection { background: var(--ink); color: var(--ivory); }

/* =====================================================================
   SHOWPIECE LAYER — opening curtain, letter-by-letter headings, glowing
   manifesto copy, pinned horizontal lookbook, velocity marquee, film grain.
   Everything degrades to plain readable content without JS / with
   reduced motion.
   ===================================================================== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ch { display: inline-block; }

/* Opening curtain (only when <html class="pre"> was set by the head script) */
.loader { display: none; position: fixed; inset: 0; z-index: 210; background: var(--ink); color: var(--ivory); place-items: center; }
.pre .loader { display: grid; }
html.pre { overflow: hidden; }
.ld-a { font: 400 clamp(110px, 14vw, 190px)/1 "Pinyon", cursive; padding: 0 .1em; }
.ld-w { position: absolute; left: var(--gut); bottom: 34px; font: 600 12px/1 "Cormorant", serif; letter-spacing: .38em; text-transform: uppercase; opacity: .8; }
.ld-n { position: absolute; right: var(--gut); bottom: 24px; font: 500 clamp(44px, 6vw, 92px)/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ld-l { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(244,240,233,.12); }
.ld-l i { display: block; height: 100%; background: var(--ivory); transform: scaleX(0); transform-origin: left; }

/* Manifesto copy that lights up while reading (JS dims it first) */
.sw { transition: none; }

/* ---------- Lookbook ---------- */
.look { position: relative; background: var(--ivory-2); color: var(--ink); overflow: hidden; }
.look-pin { height: 100svh; min-height: 620px; display: flex; align-items: center; }
.look-track { display: flex; align-items: center; gap: clamp(28px, 3.6vw, 72px); padding: 0 var(--gut); height: 100%; will-change: transform; }
.look-head { flex: 0 0 auto; width: clamp(300px, 31vw, 560px); display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.look-head .kicker { color: var(--meta); }
.look-t { margin: 0; font: 600 clamp(72px, 10.5vw, 190px)/.84 var(--sans); letter-spacing: -.055em; text-transform: uppercase; }
.look-t .lt1, .look-t .lt2 { display: block; }
.look-t .lt2 { padding-left: .55em; font: italic 400 1.08em/.86 var(--serif); letter-spacing: -.02em; text-transform: none; }
.look-t .lt2 .w { padding: .14em .12em .16em; margin: -.14em -.12em -.16em; }
.look-c { position: absolute; right: var(--gut); bottom: 50px; margin: 0; font: 500 12px var(--sans); letter-spacing: .22em; color: var(--meta); font-variant-numeric: tabular-nums; }
.look-i { color: var(--ink); }
.lk { flex: 0 0 auto; margin: 0; position: relative; }
.lk-b { display: block; height: 62vh; padding: 0; border: 0; background: #d9d1c5; cursor: zoom-in; overflow: hidden; }
.lk picture { display: block; height: 100%; }
.lk img { display: block; height: 100%; width: auto; object-fit: cover; transform-origin: 50% 50%; }
.lk0 { align-self: center; } .lk0 .lk-b { height: 64vh; }
.lk1 { align-self: flex-start; margin-top: 13vh; } .lk1 .lk-b { height: 46vh; }
.lk2 { align-self: flex-end; margin-bottom: 9vh; } .lk2 .lk-b { height: 54vh; }
.lk3 { align-self: center; } .lk3 .lk-b { height: 72vh; }
.lk figcaption { position: absolute; left: 0; top: -30px; font: italic 500 16px var(--serif); color: var(--meta); }
.lk2 figcaption { top: auto; bottom: -30px; }
.lk-b:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.look-end { flex: 0 0 auto; width: clamp(300px, 30vw, 520px); padding-right: var(--gut); display: grid; gap: 28px; justify-items: start; }
.look-e { margin: 0; font: italic 400 clamp(38px, 4.4vw, 76px)/1.02 var(--serif); letter-spacing: -.01em; }
.look-bar { position: absolute; left: var(--gut); right: var(--gut); bottom: 34px; height: 1px; background: rgba(28,25,23,.14); }
.look-bar i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
@media (hover: hover) and (pointer: fine) {
  .lk-b img { transition: filter .6s var(--ease); }
  .look-track:hover .lk-b img { filter: saturate(.75) brightness(.96); }
  .look-track .lk-b:hover img { filter: none; }
}
@media (max-width: 900px) {
  .look-pin { height: auto; min-height: 0; padding: 84px 0 64px; display: block; }
  .look-track { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; align-items: flex-end; gap: 14px; }
  .look-track::-webkit-scrollbar { display: none; }
  .look-head { width: 78vw; align-self: stretch; scroll-snap-align: start; padding-right: 10px; }
  .look-t { font-size: 19vw; }
  .lk { scroll-snap-align: center; align-self: flex-end !important; margin: 0 !important; }
  .lk .lk-b, .lk0 .lk-b, .lk1 .lk-b, .lk2 .lk-b, .lk3 .lk-b { height: min(58svh, 470px); }
  .lk figcaption, .lk2 figcaption { top: -26px; bottom: auto; }
  .look-end { width: 78vw; scroll-snap-align: center; padding-right: var(--gut); }
  .look-bar { display: none; }
  .look-c { top: 40px; bottom: auto; }
}

/* ---------- Velocity marquee ---------- */
.marq { background: var(--ink); color: var(--ivory); overflow: hidden; padding: clamp(30px, 4.2vw, 64px) 0; border-bottom: 1px solid rgba(244,240,233,.08); }
.marq-in { display: flex; width: max-content; will-change: transform; }
.marq p { display: flex; align-items: center; margin: 0; flex-shrink: 0; }
.marq span { font: italic 400 clamp(42px, 6.4vw, 112px)/1.05 var(--serif); padding: 0 .38em; white-space: nowrap; }
.marq i { font: normal 400 clamp(34px, 4.6vw, 80px)/1 "Pinyon", cursive; color: var(--stone); padding-top: .1em; }

/* ---------- Film grain (very light, purely decorative) ---------- */
body::after { content: ""; position: fixed; inset: -60%; z-index: 150; pointer-events: none; opacity: .05;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.1s steps(5) infinite; }
@keyframes grain { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -4%); } 60% { transform: translate(-2%, -2%); } 80% { transform: translate(4%, 4%); } }
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }
@media print { body::after, .loader { display: none !important; } }

/* ---------- Final call: no muddy veil over the photo ----------
   Desktop: split — copy on ink at left, the couple photo uncovered at right (square photo, heads kept).
   Phone: full-bleed photo, darkened only towards the copy at the bottom. */
@media (min-width: 901px) {
  .final { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: stretch; min-height: min(100svh, 1000px); }
  .final-bg { position: relative; inset: auto; grid-column: 2; grid-row: 1; overflow: hidden; }
  .final-bg picture, .final-bg img { opacity: 1; object-position: 50% 24%; }
  .final-c { grid-column: 1; grid-row: 1; align-self: end; padding: clamp(110px, 10vw, 170px) var(--gut) clamp(60px, 8vw, 110px); }
  .final h2 { font-size: clamp(56px, 7.2vw, 148px); }
}
@media (max-width: 900px) {
  .final-bg picture, .final-bg img { opacity: 1; object-position: 50% 12%; }
  .final-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,25,23,.08) 0%, rgba(28,25,23,.3) 38%, rgba(28,25,23,.92) 80%); }
}