/* Alex de Bokx — concept v3. One stylesheet, no framework. */
@font-face { font-family: "Libre Caslon Display"; src: url("assets/libre-caslon-display.woff2") format("woff2"), url("assets/libre-caslon-display.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("assets/dm-sans-400.woff2") format("woff2"), url("assets/dm-sans-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("assets/dm-sans-500.woff2") format("woff2"), url("assets/dm-sans-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  --paper: #F3F0EA;
  --paper-2: #EAE5DC;
  --mist: #E3EBEA;
  --clay: #EDE3D4;
  --dusk: #1F2628;
  --dusk-2: #2A3336;
  --ink: #1E2324;
  --ink-soft: #545D5F;
  --rule: rgba(30, 35, 36, .16);
  --accent: #A44422;
  --accent-soft: #E39A78;
  --serif: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --maxw: 92rem;
  --section: clamp(4.5rem, 9vw, 9rem);
  --t-xs: clamp(.75rem, .72rem + .12vw, .82rem);
  --t-sm: clamp(.9rem, .86rem + .15vw, 1rem);
  --t-base: clamp(1.02rem, .96rem + .25vw, 1.18rem);
  --t-lg: clamp(1.2rem, 1.05rem + .55vw, 1.6rem);
  --t-xl: clamp(1.7rem, 1.3rem + 1.5vw, 2.6rem);
  --t-2xl: clamp(2.4rem, 1.6rem + 3.2vw, 4.6rem);
  --t-3xl: clamp(3rem, 1.6rem + 5vw, 6rem);
  --t-hero: clamp(3.4rem, 1.2rem + 8.4vw, 10.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--t-base); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -.012em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: .75rem; z-index: 100; background: var(--ink); color: var(--paper); padding: .6rem 1rem; }
.skip:focus { left: .75rem; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.eyebrow { font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--ink-soft); }
.eyebrow--accent { color: var(--accent); }
.lede { font-size: var(--t-lg); line-height: 1.5; }
.soft { color: var(--ink-soft); }
.link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .24em; font-weight: 500; }
.link:hover { text-decoration-thickness: 2px; }
.arrow::after { content: " →"; }
.btn { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.5rem; border: 1px solid currentColor; text-decoration: none; font-weight: 500; font-size: var(--t-sm); letter-spacing: .02em; transition: background .2s, color .2s, border-color .2s; }
.btn--solid { background: var(--accent); border-color: var(--accent); color: #FBF8F2; }
.btn--solid:hover { background: #8C391C; border-color: #8C391C; }
.btn--ghost:hover { background: rgba(255,255,255,.12); }
figure { margin: 0; }
figcaption { margin-top: .7rem; font-size: var(--t-xs); color: var(--ink-soft); }
.frame { overflow: hidden; background: var(--paper-2); }
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- header ---------- */
.site-head { position: absolute; inset: 0 0 auto 0; z-index: 30; color: #FBF8F2; }
.site-head--solid { position: relative; color: var(--ink); border-bottom: 1px solid var(--rule); background: var(--paper); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: clamp(1.1rem, 2.4vw, 1.9rem); }
.brand { font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.6rem); text-decoration: none; letter-spacing: .01em; }
.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.4rem); font-size: var(--t-sm); }
.nav a { text-decoration: none; opacity: .9; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
.lang { display: flex; gap: .7rem; font-size: var(--t-xs); letter-spacing: .08em; padding-left: clamp(.8rem, 1.6vw, 1.6rem); border-left: 1px solid currentColor; border-color: color-mix(in oklab, currentColor 35%, transparent); }
.lang [aria-current] { font-weight: 500; text-decoration: underline; text-underline-offset: .35em; }
.menu { display: none; }
@media (max-width: 920px) {
  .nav { display: none; }
  .menu { display: block; position: relative; }
  .menu summary { list-style: none; cursor: pointer; font-size: var(--t-sm); padding: .4rem 0; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu[open] .menu__panel { display: grid; }
  .menu__panel { display: none; position: absolute; right: 0; top: calc(100% + .6rem); min-width: 13rem; background: var(--paper); color: var(--ink); padding: 1rem 1.25rem; gap: .65rem; box-shadow: 0 18px 40px -18px rgba(0,0,0,.35); }
  .menu__panel a { text-decoration: none; }
}

/* ---------- hero (full-bleed portrait) ---------- */
.hero { position: relative; min-height: clamp(36rem, 100svh, 62rem); display: grid; align-items: end; color: #FBF8F2; background: #8E9293; overflow: hidden; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 28%; }
.hero::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(22,26,27,.62) 0%, rgba(22,26,27,.34) 34%, rgba(22,26,27,0) 62%),
  linear-gradient(0deg, rgba(22,26,27,.55) 0%, rgba(22,26,27,0) 46%),
  linear-gradient(180deg, rgba(22,26,27,.35) 0%, rgba(22,26,27,0) 18%); }
.hero__body { position: relative; z-index: 1; padding-block: clamp(3rem, 9vh, 7rem); display: grid; gap: clamp(1.1rem, 2vw, 1.75rem); max-width: 46rem; }
.hero .eyebrow { color: rgba(251,248,242,.86); }
.hero h1 { font-size: var(--t-hero); line-height: .9; letter-spacing: -.025em; }
.hero .lede { max-width: 32ch; color: rgba(251,248,242,.94); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .8rem 1rem; margin-top: .5rem; }
.hero__place { position: absolute; z-index: 1; right: var(--gutter); bottom: clamp(1.4rem, 3vh, 2.2rem); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: rgba(251,248,242,.8); }
@media (max-width: 720px) {
  .hero { min-height: 92svh; }
  .hero__img { object-position: 80% 22%; }
  .hero::after { background: linear-gradient(0deg, rgba(22,26,27,.82) 0%, rgba(22,26,27,.5) 42%, rgba(22,26,27,0) 70%), linear-gradient(180deg, rgba(22,26,27,.4) 0%, rgba(22,26,27,0) 20%); }
  .hero__place { display: none; }
}

/* ---------- intro statement ---------- */
.intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 8rem); align-items: start; }
.intro h2 { font-size: var(--t-2xl); }
.intro h2 em { font-style: normal; color: var(--accent); }
.intro__copy { display: grid; gap: 1.2rem; padding-top: .6rem; }
.roles { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-bottom: 1.5rem; }
.roles span { font-family: var(--serif); font-size: var(--t-lg); }
.roles span + span::before { content: "·"; margin-right: 1.4rem; color: var(--accent); }

/* ---------- pillars ---------- */
.pillars__head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.pillars__head h2 { font-size: var(--t-xl); max-width: 18ch; }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.pillar { position: relative; display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: inherit; }
.pillar .frame { aspect-ratio: 4 / 5; }
.pillar .frame img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.pillar:hover .frame img { transform: scale(1.035); }
.pillar__body { padding-top: 1.3rem; display: grid; gap: .55rem; align-content: start; }
.pillar__num { font-family: var(--serif); color: var(--accent); font-size: var(--t-lg); line-height: 1; }
.pillar h3 { font-size: var(--t-xl); }
.pillar p { color: var(--ink-soft); max-width: 34ch; }
.pillar .link { margin-top: .4rem; justify-self: start; }

/* ---------- Waking Up feature (dusk) ---------- */
.dusk { background: var(--dusk); color: #ECE8E0; --ink-soft: #B4B9B5; --rule: rgba(236,232,224,.16); --accent: var(--accent-soft); }
.dusk .eyebrow { color: #B4B9B5; }
.dusk .eyebrow--accent { color: var(--accent-soft); }
.wu-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.wu-feature .frame { aspect-ratio: 4 / 5; max-height: 86svh; }
.wu-feature__copy { display: grid; gap: 1.4rem; }
.wu-feature h2 { font-size: var(--t-3xl); line-height: .95; }
.wu-feature .lede { color: #DCD8CF; max-width: 38ch; }
.not-holiday { font-family: var(--serif); font-size: var(--t-lg); line-height: 1.35; padding-left: 1.2rem; border-left: 2px solid var(--accent-soft); max-width: 30ch; }
.formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); margin-top: clamp(3.5rem, 7vw, 6rem); }
.format { padding: clamp(1.4rem, 2.6vw, 2.4rem) clamp(1rem, 2.4vw, 2.4rem) 0 0; display: grid; gap: .6rem; align-content: start; }
.format + .format { border-left: 1px solid var(--rule); padding-left: clamp(1rem, 2.4vw, 2.4rem); }
.format__days { font-family: var(--serif); font-size: var(--t-2xl); line-height: 1; }
.format__days small { font-family: var(--sans); font-size: var(--t-sm); letter-spacing: .14em; text-transform: uppercase; margin-left: .45rem; color: var(--ink-soft); }
.format h3 { font-size: var(--t-lg); }
.format p { color: var(--ink-soft); max-width: 32ch; }
.wu-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ---------- story bands ---------- */
.band--mist { background: var(--mist); }
.band--clay { background: var(--clay); }
.story { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.story--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.story--flip .story__media { order: 2; }
.story__copy { display: grid; gap: 1.2rem; max-width: 36rem; }
.story__copy h2 { font-size: var(--t-2xl); }
.story__copy .coda { font-family: var(--serif); font-size: var(--t-lg); }
.duo { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(.8rem, 1.6vw, 1.4rem); align-items: end; }
.duo .tall .frame { aspect-ratio: 3 / 4; }
.duo .short .frame { aspect-ratio: 4 / 5; }
.duo .short { margin-bottom: 14%; }
.trio { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: clamp(.6rem, 1.2vw, 1rem); aspect-ratio: 5 / 4.4; }
.trio > * { min-width: 0; min-height: 0; }
.trio > :first-child { grid-row: 1 / 3; }

/* ---------- film ---------- */
.film { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.film__copy { display: grid; gap: 1.1rem; }
.film__copy h2 { font-size: var(--t-2xl); }
.film__player { position: relative; aspect-ratio: 16 / 9; background: var(--dusk); overflow: hidden; color: #ECE8E0; }
.film__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film__start { position: absolute; inset: 0; width: 100%; border: 0; padding: clamp(1.4rem, 3vw, 2.6rem); cursor: pointer; color: inherit; text-align: left; display: grid; align-content: space-between; font: inherit;
  background: radial-gradient(120% 90% at 85% 15%, #39464A 0%, var(--dusk) 60%); }
.film__start .num { font-family: var(--serif); font-size: clamp(4rem, 2rem + 8vw, 10rem); line-height: .8; color: rgba(236,232,224,.12); }
.film__start .title { font-family: var(--serif); font-size: var(--t-xl); line-height: 1.1; display: block; }
.film__start .meta { font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: #B4B9B5; display: block; margin-top: .6rem; }
.film__start .play { position: absolute; right: clamp(1.4rem, 3vw, 2.6rem); bottom: clamp(1.4rem, 3vw, 2.6rem); width: clamp(64px, 6vw, 92px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(236,232,224,.55); display: grid; place-items: center; transition: background .25s, border-color .25s; }
.film__start .play::after { content: ""; margin-left: 12%; border-left: 18px solid #ECE8E0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.film__start:hover .play { background: var(--accent); border-color: var(--accent); }

/* ---------- contact ---------- */
.contact h2 { font-size: var(--t-3xl); line-height: .95; max-width: 12ch; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.contact__lines { display: grid; gap: 1rem; }
.contact__big { font-family: var(--serif); font-size: var(--t-xl); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: .4rem; justify-self: start; }
.contact__big:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--rule); padding-block: 2.2rem 2.6rem; font-size: var(--t-xs); color: var(--ink-soft); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: .8rem 2.4rem; justify-content: space-between; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.note { flex-basis: 100%; }

/* ---------- Waking Up page ---------- */
.wu-hero { position: relative; min-height: clamp(34rem, 88svh, 56rem); display: grid; align-items: end; color: #FBF8F2; overflow: hidden; background: #7F8A8E; }
.wu-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.wu-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,25,27,.7) 0%, rgba(20,25,27,.2) 45%, rgba(20,25,27,0) 70%), linear-gradient(180deg, rgba(20,25,27,.55), rgba(20,25,27,0) 26%); }
.wu-hero__body { position: relative; z-index: 1; padding-block: clamp(3rem, 9vh, 6rem); display: grid; gap: 1.2rem; }
.wu-hero h1 { font-size: var(--t-3xl); line-height: .92; max-width: 12ch; }
.wu-hero .eyebrow { color: rgba(251,248,242,.85); }
.wu-hero .lede { color: rgba(251,248,242,.94); max-width: 30ch; font-family: var(--serif); font-size: var(--t-xl); }
.opening { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 7vw, 8rem); align-items: start; }
.opening .big { font-family: var(--serif); font-size: var(--t-xl); line-height: 1.25; }
.opening__copy { display: grid; gap: 1.3rem; }
.moments__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 7vw, 8rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.moments__head h2 { font-size: var(--t-2xl); }
.moments { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); counter-reset: m; }
.moments li { counter-increment: m; display: grid; grid-template-columns: 2.6rem 1fr; gap: .4rem; padding: 1.1rem 0; border-top: 1px solid var(--rule); font-family: var(--serif); font-size: var(--t-lg); line-height: 1.25; }
.moments li::before { content: counter(m, decimal-leading-zero); font-family: var(--sans); font-size: var(--t-xs); letter-spacing: .1em; color: var(--accent); padding-top: .35em; }
.moments-note { margin-top: clamp(2rem, 4vw, 3rem); font-family: var(--serif); font-size: var(--t-lg); }
.questions { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(2.5rem, 7vw, 8rem); align-items: center; }
.questions .frame { aspect-ratio: 3 / 4; max-height: 84svh; }
.q-list { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .3rem; }
.q-list li { font-family: var(--serif); font-size: var(--t-xl); line-height: 1.2; }
.q-final { margin-top: 2rem; display: grid; gap: .5rem; }
.q-final .q { font-family: var(--serif); font-size: var(--t-2xl); line-height: 1.05; color: var(--accent); }
.adulthood { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1.4rem, 2.6vw, 2.2rem); background: var(--paper-2); display: grid; gap: .6rem; }
.dusk .adulthood { background: var(--dusk-2); }
.adulthood strong { font-family: var(--serif); font-weight: 400; font-size: var(--t-lg); }
.invite { text-align: left; max-width: 60rem; }
.invite h2 { font-size: var(--t-2xl); margin-bottom: 1.6rem; }
.perhaps { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .5rem; }
.perhaps li { font-family: var(--serif); font-size: var(--t-xl); line-height: 1.25; color: var(--ink-soft); }
.closing { font-family: var(--serif); font-size: var(--t-3xl); line-height: .98; margin: clamp(2.5rem, 5vw, 4rem) 0 1.2rem; max-width: 16ch; }
.welcome { font-family: var(--serif); font-size: var(--t-lg); color: var(--accent); }

/* ---------- reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .intro, .wu-feature, .story, .story--flip, .film, .contact__grid, .opening, .moments__head, .questions { grid-template-columns: 1fr; }
  .story--flip .story__media { order: 0; }
  .pillars { grid-template-columns: 1fr; gap: 2.5rem; }
  .pillar { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); grid-template-rows: none; gap: 1.2rem; align-items: center; }
  .pillar .frame { aspect-ratio: 4 / 5; }
  .pillar__body { padding-top: 0; }
  .moments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wu-feature .frame, .questions .frame { aspect-ratio: 4 / 3; max-height: 60svh; }
}
@media (max-width: 640px) {
  .formats { grid-template-columns: 1fr; }
  .format + .format { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  .format { padding-bottom: 1.4rem; }
  .moments { grid-template-columns: 1fr; }
  .pillar { grid-template-columns: 1fr; }
  .pillar .frame { aspect-ratio: 16 / 11; }
  .pillars__head { display: block; }
  .pillars__head .eyebrow { margin-top: .8rem; }
  .trio { aspect-ratio: auto; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .trio > :first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .trio > :not(:first-child) { aspect-ratio: 1; }
  .roles span + span::before { display: none; }
  .roles { gap: .2rem 1rem; }
  .duo .short { margin-bottom: 0; }
}

/* ---------- one photo per project ---------- */
.pillars--text .pillar { border-top: 1px solid var(--rule); padding-top: 1.4rem; grid-template-rows: none; }
.pillars--text .pillar__body { padding-top: 0; }
.pillars--text .pillar__num { font-size: var(--t-2xl); }
.pillars--text .pillar:hover h3 { color: var(--accent); }
.story__single .frame { aspect-ratio: 4 / 3; }
.story__single--tall .frame { aspect-ratio: 4 / 5; max-height: 80svh; }
@media (max-width: 960px) { .pillars--text .pillar { grid-template-columns: 1fr; } }

/* ---------- taste-floor pass (2026-10-16) ---------- */
/* projects as an index, not three equal cards */
.pillars--index { grid-template-columns: 1fr; gap: 0; border-bottom: 1px solid var(--rule); }
.pillars--index .pillar { border-top: 1px solid var(--rule); padding: clamp(1.2rem, 2.4vw, 2rem) 0; }
.pillars--index .pillar__body { display: grid; grid-template-columns: 5rem minmax(0, 1.1fr) minmax(0, 1.4fr) 9rem; align-items: baseline; gap: 1rem clamp(1rem, 3vw, 3rem); padding: 0; }
.pillars--index .pillar__num { font-size: var(--t-lg); }
.pillars--index .pillar h3 { font-size: var(--t-xl); }
.pillars--index .pillar p { max-width: 46ch; }
.pillars--index .pillar .link { margin: 0; justify-self: end; white-space: nowrap; }
@media (max-width: 760px) { .pillars--index .pillar__body { grid-template-columns: 2.6rem 1fr; } .pillars--index .pillar p, .pillars--index .pillar .link { grid-column: 2; justify-self: start; } }
/* headings: label sits tight to its heading; the heading opens more room below than the label above */
.eyebrow + h1, .eyebrow + h2 { margin-top: -.5rem; }
.story__copy .coda { margin-top: -.3rem; }
/* tracking tightens with size */
.closing, .q-final .q, .format__days, .film__start .num, .wu-hero .lede { letter-spacing: -.018em; }
/* text over media: density where the copy sits, measured to >=4.5:1 small / >=3:1 large */
.hero::after { background:
  linear-gradient(90deg, rgba(20,24,25,.8) 0%, rgba(20,24,25,.62) 30%, rgba(20,24,25,.25) 50%, rgba(20,24,25,0) 64%),
  linear-gradient(0deg, rgba(20,24,25,.55) 0%, rgba(20,24,25,0) 45%),
  linear-gradient(180deg, rgba(20,24,25,.5) 0%, rgba(20,24,25,0) 16%); }
@media (max-width: 720px) { .hero::after { background: linear-gradient(0deg, rgba(20,24,25,.88) 0%, rgba(20,24,25,.66) 45%, rgba(20,24,25,0) 72%), linear-gradient(180deg, rgba(20,24,25,.5) 0%, rgba(20,24,25,0) 18%); } }
.wu-hero::after { background:
  linear-gradient(0deg, rgba(18,23,25,.86) 0%, rgba(18,23,25,.58) 40%, rgba(18,23,25,0) 68%),
  linear-gradient(180deg, rgba(18,23,25,.8) 0%, rgba(18,23,25,.46) 13%, rgba(18,23,25,0) 26%); }
.hero__place { display: none; }
/* light-on-dark compensation and grain on the flat dusk ground */
.dusk { position: relative; isolation: isolate; }
.dusk .soft, .dusk .format p { line-height: 1.7; letter-spacing: .005em; }
.dusk::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
/* accent button on dusk: dark ink on the light accent */
.dusk .btn--solid { color: #1F2628; }
.dusk .btn--solid:hover { background: #F0B497; border-color: #F0B497; }

/* ---------- content round 2 (Alex's feedback, Oct 2026) ---------- */
.format__price { margin-top: .4rem; padding-top: .9rem; border-top: 1px solid var(--rule); font-family: var(--serif); font-size: var(--t-lg); color: var(--ink); }
.dusk .format__price { color: #ECE8E0; }

.role { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 8rem); align-items: start; }
.role h2 { font-size: var(--t-2xl); max-width: 16ch; }
.role__list { margin-bottom: 1.6rem; }
.role__list li:first-child { color: var(--ink); }

.book { padding-top: .6rem; border-top: 1px solid var(--rule); }
.book cite { font-style: italic; color: var(--ink); }

.followups { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.followup { display: grid; grid-template-columns: 3.4rem minmax(0, 1.5fr) minmax(0, 1fr) 7rem; gap: clamp(1rem, 3vw, 3rem); align-items: start; padding: clamp(1.6rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--rule); }
.followup__num { font-family: var(--serif); font-size: var(--t-2xl); line-height: 1; color: var(--accent); }
.followup__body { display: grid; gap: .7rem; }
.followup__body h3 { font-size: var(--t-xl); max-width: 22ch; }
.followup__incl { font-size: var(--t-sm); color: var(--ink-soft); display: grid; gap: .35rem; padding-top: .45rem; }
.followup__incl span { font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.followup__price { font-family: var(--serif); font-size: var(--t-xl); line-height: 1.1; text-align: right; padding-top: .2rem; }

.voices { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.voice { margin: 0; display: grid; gap: .9rem; }
.voice p { font-family: var(--serif); font-size: var(--t-lg); line-height: 1.35; }
.voice footer { font-size: var(--t-sm); letter-spacing: .06em; color: var(--ink-soft); }
.voice footer::before { content: "— "; }
.voice--lead { gap: 1.4rem; margin-top: 1.6rem; }
.voice--lead > p:first-child { font-size: var(--t-xl); line-height: 1.25; }
.voice__more.soft { font-family: var(--sans); font-size: var(--t-base); line-height: 1.6; color: var(--ink-soft); }
.voices__list { display: grid; }
.voices__list .voice { padding: 1.6rem 0; border-top: 1px solid var(--rule); }
.voices__list .voice:first-child { padding-top: 0; border-top: 0; }
.voices__note { font-size: var(--t-xs); color: var(--ink-soft); padding-top: 1rem; border-top: 1px solid var(--rule); }

/* India & Nepal */
.trip-hero { padding-block: clamp(8rem, 18vh, 12rem) var(--section); }
.trip-hero h1 { font-size: var(--t-3xl); line-height: .95; max-width: 14ch; margin-top: 1.2rem; }
.trip-hero .lede { margin-top: 1.6rem; max-width: 40ch; color: #DCD8CF; }
.trip-facts { display: flex; flex-wrap: wrap; gap: .6rem 2.4rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.4rem; border-top: 1px solid var(--rule); font-size: var(--t-sm); }
.trip-facts dt { font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: #B4B9B5; }
.trip-facts dd { margin: .2rem 0 0; font-family: var(--serif); font-size: var(--t-lg); }
.route { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); }
.route h3 { font-size: var(--t-xl); margin-bottom: 1rem; }
.route__list { list-style: none; margin: 0; padding: 0; }
.route__list li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--rule); }
.route__list strong { font-family: var(--serif); font-weight: 400; font-size: var(--t-lg); line-height: 1.2; }
.route__list span { color: var(--ink-soft); }
.route__list .f2g a { color: var(--accent); }
.versions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--rule); margin-top: clamp(2.5rem, 5vw, 4rem); }
.version { padding: clamp(1.4rem, 2.6vw, 2.4rem) clamp(1rem, 2.4vw, 2.4rem) 0 0; display: grid; gap: .6rem; align-content: start; }
.version + .version { border-left: 1px solid var(--rule); padding-left: clamp(1rem, 2.4vw, 2.4rem); }
.version h3 { font-size: var(--t-xl); }
.version p { color: var(--ink-soft); max-width: 40ch; }
.stages { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0; }
.stages li { padding: 1rem 0; border-top: 1px solid var(--rule); display: grid; gap: .3rem; }
.stages strong { font-family: var(--serif); font-weight: 400; font-size: var(--t-lg); }
.stages span { color: var(--ink-soft); }
.care-note { font-size: var(--t-sm); color: var(--ink-soft); margin-top: 1.4rem; max-width: 52ch; }

@media (max-width: 960px) {
  .role, .voices, .route { grid-template-columns: 1fr; }
  .followup { grid-template-columns: 2.6rem minmax(0, 1fr) auto; }
  .followup__incl { grid-column: 2 / 3; }
  .followup__price { grid-column: 3; grid-row: 1; }
}
@media (max-width: 640px) {
  .versions { grid-template-columns: 1fr; }
  .version + .version { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); margin-top: 1.4rem; }
  .route__list li { grid-template-columns: 1fr; gap: .2rem; }
  .followup { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .followup__price { grid-column: 2; grid-row: auto; text-align: left; }
}
h2.eyebrow { font-family: var(--sans); font-weight: 500; line-height: 1.4; letter-spacing: .16em; }

/* photos round (Alex's own images) */
.trip-hero--img h1 { max-width: 14ch; }
.trip-hero--img .lede { font-family: var(--sans); font-size: var(--t-lg); max-width: 40ch; margin-top: 1.2rem; }
.trip-hero--img .trip-facts { border-top-color: rgba(251,248,242,.3); color: #FBF8F2; }
.trip-hero--img .trip-facts dt { color: rgba(251,248,242,.8); }
.trip-gallery { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr) minmax(0, .8fr); grid-template-rows: auto auto; gap: clamp(.8rem, 1.6vw, 1.4rem); }
.trip-gallery figure { margin: 0; display: grid; gap: .5rem; }
.trip-gallery figcaption { font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.tg-tall { grid-column: 1; grid-row: 1 / span 2; }
.tg-wide { grid-column: 2; }
.tg-tall.tg-right { grid-column: 3; }
.tg-tall .frame { aspect-ratio: 9 / 16; height: 100%; }
.tg-wide .frame { aspect-ratio: 16 / 9; }
.role__fig { margin: 0; }
.role__fig .frame { aspect-ratio: 4 / 5; max-height: 80svh; }
.role h2 { margin-bottom: 1.8rem; }
.book { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.1rem; align-items: start; padding-top: .9rem; border-top: 1px solid var(--rule); }
.book img { width: 100%; height: auto; box-shadow: 0 10px 24px -14px rgba(0,0,0,.45); }
@media (max-width: 760px) {
  .trip-gallery { grid-template-columns: 1fr 1fr; }
  .tg-tall, .tg-tall.tg-right { grid-column: auto; grid-row: auto; }
  .tg-wide { grid-column: 1 / -1; }
}
/* fixes after review: hero legibility, gallery sizing */
.trip-hero--img { min-height: clamp(36rem, 92svh, 58rem); }
.trip-hero--img .wu-hero__body { padding-top: clamp(7rem, 16vh, 10rem); }
.trip-hero--img::after { background: linear-gradient(90deg, rgba(20,25,27,.78) 0%, rgba(20,25,27,.55) 38%, rgba(20,25,27,.12) 70%), linear-gradient(0deg, rgba(20,25,27,.7) 0%, rgba(20,25,27,0) 50%), linear-gradient(180deg, rgba(20,25,27,.6) 0%, rgba(20,25,27,0) 30%); }
.tg-tall { grid-template-rows: minmax(0, 1fr) auto; }
.tg-tall .frame { aspect-ratio: auto; height: 100%; min-height: 0; }
@media (max-width: 760px) {
  .tg-tall .frame { aspect-ratio: 9 / 14; height: auto; }
  .tg-wide { order: 2; }
  .trip-hero--img::after { background: linear-gradient(0deg, rgba(20,25,27,.88) 0%, rgba(20,25,27,.6) 55%, rgba(20,25,27,.35) 100%); }
}

/* ---------- films (self-hosted, click to play) ---------- */
.film__player video { position: absolute; inset: 0; width: 100%; height: 100%; background: #111; object-fit: contain; }
.film-card { position: relative; max-width: 30rem; }
.film-card > button { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; width: 100%; padding: .7rem 1rem .7rem .7rem; border: 1px solid var(--rule); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .25s, background .25s; }
.film-card > button:hover { border-color: var(--accent); }
.film-card img { width: 5.5rem; aspect-ratio: 1; object-fit: cover; }
.film-card .fc-title { display: block; font-family: var(--serif); font-size: var(--t-lg); line-height: 1.15; }
.film-card .fc-meta { display: block; margin-top: .3rem; font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.film-card .fc-play { width: 2.8rem; aspect-ratio: 1; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; opacity: .8; }
.film-card .fc-play::after { content: ""; margin-left: 12%; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.film-card.is-playing video { display: block; width: 100%; max-height: 80svh; background: #111; }
.film-block { margin-top: clamp(2.5rem, 5vw, 4rem); }
.film-block .film-card { max-width: 34rem; }
.dusk .film-card > button { border-color: rgba(236,232,224,.25); }
.opening__copy .film-card, .story__copy .film-card { margin-top: .4rem; }
.gift { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 8rem); align-items: start; }
.gift h2 { font-size: var(--t-2xl); max-width: 14ch; }
.gift__copy { display: grid; gap: 1rem; }
@media (max-width: 960px) { .gift { grid-template-columns: 1fr; } }

/* mobile menu: language switch */
.menu__lang { display: flex; gap: 1rem; margin-top: .4rem; padding-top: .7rem; border-top: 1px solid var(--rule); font-size: var(--t-xs); letter-spacing: .08em; }
.menu__lang [aria-current] { font-weight: 500; text-decoration: underline; text-underline-offset: .35em; }
/* simple text pages (privacy, 404) */
.page-text { padding-block: clamp(3rem, 8vh, 6rem) var(--section); }
.page-text .wrap > * { max-width: 46rem; }
.page-text h1 { font-size: var(--t-2xl); margin-bottom: 1.6rem; }
.page-text h2 { font-size: var(--t-lg); font-family: var(--serif); margin: 2.2rem 0 .6rem; }
.page-text p, .page-text li { color: var(--ink-soft); }
.page-text p + p { margin-top: .8rem; }
.page-text ul { padding-left: 1.2rem; margin: .6rem 0 0; display: grid; gap: .35rem; }
.page-text .meta { font-size: var(--t-sm); margin-top: 2.4rem; }

/* ---------- reviews (homepage) ---------- */
.reviews__head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.reviews__head h2 { font-size: var(--t-2xl); }
.reviews__head .soft { margin-top: .8rem; max-width: 46ch; }
.reviews__nav { display: flex; gap: .6rem; flex: none; }
.rv-btn { width: 3rem; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--rule); background: transparent; color: var(--ink); font: inherit; font-size: 1.1rem; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.rv-btn:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
.rv-btn:disabled { opacity: .35; cursor: default; background: transparent; color: var(--ink); border-color: var(--rule); }
.reviews__track { list-style: none; margin: 0; padding: 0 0 1rem; display: grid; grid-auto-flow: column; grid-auto-columns: min(26rem, 84%); gap: clamp(1rem, 2vw, 1.6rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: thin; }
.reviews__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.review { scroll-snap-align: start; }
.review figure { margin: 0; height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 1.4rem; padding: clamp(1.4rem, 2.6vw, 2rem); background: var(--paper-2); border: 1px solid transparent; position: relative; }
.review blockquote { margin: 0; grid-row: 2; }
.review blockquote p { font-family: var(--serif); font-size: var(--t-lg); line-height: 1.35; }
.review figcaption { grid-row: 3; display: flex; align-items: center; gap: .9rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.review figcaption strong { display: block; font-weight: 500; }
.review__ctx { display: block; font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-top: .15rem; }
.avatar { flex: none; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 1.05rem; letter-spacing: .02em; color: #FBF8F2; }
.avatar--0 { background: #A44422; } .avatar--1 { background: #2A3336; } .avatar--2 { background: #5B6E5D; } .avatar--3 { background: #7A5A3C; }
.avatar--ph { background: transparent; color: var(--ink-soft); border: 1px dashed var(--ink-soft); }
.review--placeholder figure { background: transparent; border: 1px dashed var(--rule); }
.review--placeholder blockquote p { color: var(--ink-soft); font-size: var(--t-base); font-family: var(--sans); }
.review__badge { grid-row: 1; justify-self: start; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; padding: .25rem .6rem; border: 1px dashed var(--accent); color: var(--accent); }
.review blockquote p { quotes: none; }
.reviews__note { font-size: var(--t-xs); color: var(--ink-soft); margin-top: .6rem; }
@media (max-width: 640px) { .reviews__head { align-items: start; flex-direction: column; } }

/* ---------- enquiry form ---------- */
.enquiry { display: grid; gap: 1.1rem; margin-top: .6rem; }
.enquiry__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--t-sm); font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: var(--t-base); color: var(--ink); background: #FBF9F5; border: 1px solid rgba(30,35,36,.28); border-radius: 2px; padding: .75rem .85rem; transition: border-color .2s, box-shadow .2s; }
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(164,68,34,.18); }
.field [aria-invalid="true"] { border-color: #B3261E; }
.field__error { font-size: var(--t-sm); color: #B3261E; }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: .7rem; }
.field--check input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--accent); padding: 0; }
.field--check label { font-weight: 400; color: var(--ink-soft); }
.field--check .field__error { grid-column: 2; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquiry__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: .3rem; }
.enquiry__actions .btn[disabled] { opacity: .6; cursor: progress; }
.enquiry__status { font-size: var(--t-sm); }
.enquiry__status.is-ok { color: #2E6B3F; } .enquiry__status.is-error { color: #B3261E; }
.enquiry.is-sent .field, .enquiry.is-sent .enquiry__row, .enquiry.is-sent .enquiry__actions .btn { display: none; }
.enquiry.is-sent .enquiry__status { font-family: var(--serif); font-size: var(--t-lg); color: var(--ink); }
.enquiry__alt { font-size: var(--t-sm); }
@media (max-width: 640px) { .enquiry__row { grid-template-columns: 1fr; } }
.contact__grid:has(form) { align-items: start; }
.field input, .field select { height: 3.1rem; padding-block: 0; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231E2324' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.4rem; }
.field--check input { height: 1.15rem; }

/* India & Nepal prices */
.version .format__price small { font-family: var(--sans); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-left: .3rem; }
.incl { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: var(--t-sm); color: var(--ink-soft); }
.incl li { padding-left: 1.1rem; position: relative; }
.incl li::before { content: ""; position: absolute; left: 0; top: .62em; width: .45rem; height: 1px; background: var(--accent); }
.incl li.excl { opacity: .85; font-style: italic; }
.price-note { margin-top: clamp(1.8rem, 3vw, 2.4rem); font-size: var(--t-sm); color: var(--ink-soft); max-width: 70ch; }
/* book block */
.book > div { display: grid; gap: .6rem; }
.book__title { font-family: var(--serif); font-size: var(--t-lg); color: var(--ink); }

/* ---------- Inspiration page ---------- */
.insp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3rem); }
.insp-head h2 { font-size: var(--t-2xl); }
.insp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.2rem) clamp(1.2rem, 2.4vw, 2rem); }
.insp-item { display: grid; gap: .6rem; align-content: start; }
.insp-item:first-child { grid-column: span 2; }
.insp-item:first-child h3 { font-size: var(--t-2xl); }
.insp-media { position: relative; aspect-ratio: 1; background: var(--dusk); overflow: hidden; }
.insp-item:first-child .insp-media { aspect-ratio: 16 / 10; }
.insp-media > button { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.insp-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.insp-media > button:hover img { transform: scale(1.03); }
.insp-play { position: absolute; left: 1rem; bottom: 1rem; width: 3.4rem; aspect-ratio: 1; border-radius: 50%; background: rgba(31,38,40,.72); border: 1px solid rgba(251,248,242,.6); display: grid; place-items: center; transition: background .25s; }
.insp-play::after { content: ""; margin-left: 12%; border-left: 13px solid #FBF8F2; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.insp-media > button:hover .insp-play { background: var(--accent); border-color: var(--accent); }
.insp-media.is-playing video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #111; }
.insp-meta { display: flex; gap: 1rem; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-top: .4rem; }
.insp-meta span:first-child { color: var(--accent); }
.insp-item h3 { font-size: var(--t-xl); }
.insp-item .soft { max-width: 52ch; }
@media (max-width: 960px) { .insp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .insp-grid { grid-template-columns: 1fr; } .insp-item:first-child { grid-column: auto; } .insp-item:first-child h3 { font-size: var(--t-xl); } }