@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-italic.woff2) format('woff2');
  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;
  font-weight: 300 400;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-normal.woff2) format('woff2');
  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: 'Jost';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url(/fonts/jost-normal.woff2) format('woff2');
  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;
}

/* ZenArt26 — desert stone and warm off-white, light serif display over a light geometric sans.
   Built to the Avora measurements in research/avora/avora-cues.md: 105/60 band rhythm,
   24px heading-to-body, 48px body-to-next-block, 1080px container, 640px measure,
   square corners, hairlines instead of shadows, and a maximum font weight of 400.
   Inspiration only — none of Avora's copy, photography, logo or code is reused. */
:root {
  /* surfaces: Avora's value relationships, shifted warm for the high desert */
  --bg: #F2F0EC;            /* page */
  --bg-alt: #E9E6E0;        /* alternate band */
  --card: #F9F8F5;          /* cards, text on dark */
  --dark: #1C1917;          /* dark band, primary button */
  --dark-alt: #2C2A27;      /* second dark band, button hover */
  --ink: #221F1C;           /* body and headings on light */
  --muted: #5F5B55;         /* secondary text (darkened from Avora's failing grey) */
  --on-dark: #F4F2ED;
  --on-dark-muted: rgba(244, 242, 237, .74);
  --line: #C6C2BA;          /* every hairline and border */
  --line-dark: rgba(244, 242, 237, .28);
  --radius: 2px;            /* the only radius on the site */

  --display: 'Cormorant Garamond', Georgia, serif;
  --text: 'Jost', 'Segoe UI', system-ui, sans-serif;

  /* rhythm */
  --band-y: 60px;
  --band-y-md: 105px;
  --band-y-tight: 40px;
  --band-y-tight-md: 56px;
  --gap-head-body: 24px;
  --gap-body-next: 48px;
  --gap-rows: 48px;
  --gap-rows-md: 64px;
  --grid-gap: 20px;
  --grid-gap-md: 32px;
  --container: 1080px;
  --measure: 640px;
  --gutter: 24px;
  --nav-h: 80px;

  /* motion */
  --ease-ui: cubic-bezier(.4, 0, .2, 1);
  --ease-reveal: cubic-bezier(.25, .46, .45, .94);
  --t-hover: 300ms;
  --t-zoom: 700ms;
  --t-fade: 700ms;
  --t-reveal: 800ms;
}
@media (min-width: 768px) {
  :root {
    --band-y: var(--band-y-md);
    --band-y-tight: var(--band-y-tight-md);
    --grid-gap: var(--grid-gap-md);
    --gap-rows: var(--gap-rows-md);
    --gutter: 48px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 20px); scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 300 .95rem/1.75 var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 768px) { body { font-size: 1rem; } }
::selection { background: var(--dark); color: var(--card); }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 {
  font-family: var(--display); font-weight: 300; line-height: 1.15; letter-spacing: normal;
  margin: 0 0 .5em; color: var(--ink); text-wrap: balance; overflow-wrap: break-word;
}
h1 { font-size: 2.25rem; line-height: 1.25; }
h2 { font-size: 1.875rem; line-height: 1.2; }
h3 { font-size: 1.4rem; }
@media (min-width: 768px) {
  h1 { font-size: 3rem; line-height: 1.04; }
  h2 { font-size: 2.25rem; line-height: 1.11; }
  h3 { font-size: 1.75rem; line-height: 1.15; }
}
/* emphasis is a real italic, never a heavier weight: nothing here goes above 400 */
h1 em, h2 em, h3 em { font-style: italic; font-weight: inherit; }
strong, b { font-weight: 400; }
em { font-style: italic; }

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
/* the two gaps that do most of the work */
main h1 + p, main h2 + p, main h3 + p, main .band-head h2 + p { margin-top: var(--gap-head-body); }
main p + .band, main p + .actions, main p + .btn, main p + .gallery-grid, main .lede + * { margin-top: var(--gap-body-next); }
main p { max-width: var(--measure); }
.lede { font-size: 1rem; line-height: 1.75; color: var(--muted); max-width: 52ch; }
.section-note { font-size: .875rem; color: var(--muted); margin-bottom: var(--gap-head-body); }
/* one uppercase micro-label per band, at exactly 0.18em */
.label { font: 300 .875rem/1.43 var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.1rem; }
.hp { display: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--dark); color: var(--card); padding: 12px 20px; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }

/* buttons: square, sentence case, no shadow, one darkening hover */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  background: var(--dark); color: var(--card); border: 1px solid transparent; border-radius: var(--radius);
  min-height: 44px; padding: 12px 32px; font: 400 .875rem/1.43 var(--text); letter-spacing: .01em;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--t-hover) var(--ease-ui);
}
.btn:hover { background: var(--dark-alt); }
.btn-sm { padding: 12px 24px; }
.btn-light { background: var(--card); color: var(--dark); }
.btn-light:hover { background: #fff; }
.link {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  font-size: .875rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: opacity 150ms var(--ease-ui), border-color 150ms var(--ease-ui);
}
.link:hover { opacity: .7; border-bottom-color: currentColor; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 34px; }

/* ── header: full-bleed nav row, 80px, with the wordmark → header handoff on the home page ── */
.nav { position: absolute; inset: 0 0 auto; z-index: 50; height: var(--nav-h); }
.js body:not(.home) { padding-top: var(--nav-h); }
.js .nav { position: fixed; }
.nav-bg { position: absolute; inset: 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.nav-row {
  position: relative; z-index: 2; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 12px;
}
@media (min-width: 768px) { .nav-row { padding-inline: 16px; } }
.wordmark {
  font-family: var(--display); font-weight: 300; font-size: 1.25rem; line-height: 1;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center; min-height: 44px;
}
@media (min-width: 768px) { .wordmark { font-size: 1.5rem; } }
.wordmark em, .hero-wordmark em { font-style: normal; font-weight: inherit; }
.nav-row .wordmark { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.nav-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px;
  border: 0; background: none; color: var(--ink); cursor: pointer;
  font: 300 .875rem/1.43 var(--text); letter-spacing: .18em; text-transform: uppercase;
  transition: opacity 150ms var(--ease-ui);
}
.nav-toggle:hover { opacity: .7; }
.nav-toggle i { display: block; width: 20px; height: 1px; background: currentColor; }
.nav-toggle span { display: grid; gap: 6px; }
.nav-cta { flex: none; }

/* home: the header is absent until 80px of scroll, then three layers cross-fade in */
.js .home .nav-bg { transform: translateY(-100%); opacity: 0; }
.js .home .nav-row { opacity: 0; pointer-events: none; }
.js .home .nav.nav-ready .nav-bg { transition: transform 350ms var(--ease-ui), opacity 350ms var(--ease-ui); }
.js .home .nav.nav-ready .nav-row { transition: opacity 350ms var(--ease-ui); }
.js .home .nav.is-revealed .nav-bg { transform: none; opacity: 1; }
.js .home .nav.is-revealed .nav-row { opacity: 1; pointer-events: auto; }

/* drawer */
.drawer {
  position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(384px, 100%);
  background: var(--bg); border-right: 1px solid var(--line);
  padding: 32px var(--gutter) 40px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  transform: translateX(-100%); visibility: hidden;
  transition: transform 300ms var(--ease-ui), visibility 300ms;
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer-head { display: flex; justify-content: flex-end; min-height: 44px; margin-bottom: 16px; }
.drawer-close {
  border: 0; background: none; color: var(--ink); cursor: pointer; min-height: 44px; padding: 10px 12px;
  font: 300 .875rem/1.43 var(--text); letter-spacing: .18em; text-transform: uppercase;
}
.drawer-close:hover { opacity: .7; }
.drawer a[data-path] {
  display: block; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none;
  font-family: var(--display); font-weight: 300; font-size: 1.75rem; line-height: 1.15;
  transition: opacity 150ms var(--ease-ui);
}
.drawer a[data-path]:hover { opacity: .7; }
.drawer a[aria-current="page"] { font-style: italic; }
.drawer-foot { margin-top: auto; padding-top: 32px; display: grid; gap: 4px; font-size: .875rem; color: var(--muted); }
.drawer-foot a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.drawer-scrim {
  position: fixed; inset: 0; z-index: 55; background: rgba(28, 25, 23, .45);
  opacity: 0; visibility: hidden; transition: opacity 300ms var(--ease-ui), visibility 300ms;
}
.drawer-scrim.is-open { opacity: 1; visibility: visible; }
html:not(.js) .drawer { position: static; width: auto; transform: none; visibility: visible; border: 0; border-bottom: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 28px; padding-block: 12px; }
html:not(.js) .drawer a[data-path] { border: 0; font-size: 1.125rem; padding: 10px 0; }
html:not(.js) .drawer-head, html:not(.js) .drawer-foot, html:not(.js) .nav-toggle { display: none; }
html:not(.js) .nav { position: static; height: auto; }

/* ── home hero: full-bleed media, the wordmark, indicators and one scroll cue ── */
/* 100dvh, not svh or vh: svh is the SMALLEST viewport, so as soon as a phone's address bar
   collapses the visible area grows past the hero and the next band peeks in under it. dvh
   tracks the visible area, so the hero fills the screen exactly and nothing else shows. */
.hero-cinema { position: relative; height: 100vh; height: 100dvh; background: var(--dark); overflow: hidden; }
.hero-slides, .hero-slide, .hero-slide picture, .hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-slide { opacity: 0; z-index: 0; }
.hero-slide.is-prev { opacity: 1; }                       /* stays lit underneath until covered */
.hero-slide.is-active { opacity: 1; z-index: 1; transition: opacity var(--t-fade) var(--ease-ui); }
.hero-slide img { object-fit: cover; object-position: center 55%; }
/* A portrait phone crops these wide frames HORIZONTALLY (cover scales to fill the height, so
   the vertical component of object-position does nothing here). The opening frame's barrel
   sauna sits at the left edge, so pull the crop left to keep it in shot. */
@media (max-width: 767px) { .hero-slide:first-child img { object-position: 30% center; } }
.hero-cinema::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .26) 0%, rgba(0, 0, 0, .10) 38%, rgba(0, 0, 0, .42) 100%);
}
.hero-brand { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 40px var(--gutter); text-align: center; color: var(--card); }
.hero-wordmark {
  margin: 0; font-family: var(--display); font-weight: 300; font-size: clamp(2.25rem, 8.5vw, 4.5rem);
  line-height: 1.1; letter-spacing: .18em; text-transform: uppercase; text-indent: .18em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .22); transition: opacity 250ms var(--ease-ui);
}
.hero-cinema.is-passed .hero-brand { opacity: 0; }
/* on the home hero the indicators sit above the scroll cue, both centred */
.hero-home .hero-dots { bottom: 84px; transition: opacity 250ms var(--ease-ui); }
.hero-home.is-passed .hero-dots { opacity: 0; pointer-events: none; }
.hero-cue {
  position: absolute; z-index: 3; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 44px;
  color: rgba(249, 248, 245, .92); text-decoration: none;
  font: 300 .625rem/1.75 var(--text); letter-spacing: .3em; text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5); transition: opacity 250ms var(--ease-ui);
}
.hero-cue svg { stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.hero-cinema.is-passed .hero-cue { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .hero-cue svg { animation: cue 2.4s var(--ease-ui) infinite; } }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(4px); opacity: .55; } }

/* ── gallery hero: a manual, dot-driven media carousel with an off-white card ── */
/* the header is already opaque on inner pages, so the body offset supplies the top inset */
.hero-edition { height: auto; min-height: calc(100dvh - var(--nav-h)); }
.hero-edition .hero-cinema-inner { position: relative; z-index: 3; display: flex; align-items: flex-start; min-height: calc(100dvh - var(--nav-h)); padding: 72px var(--gutter) 64px; }
.hero-eyebrow {
  position: absolute; z-index: 3; top: 28px; left: 50%; transform: translateX(-50%);
  margin: 0; width: max-content; max-width: calc(100% - 2 * var(--gutter)); text-align: center;
  font: 400 1.25rem/1.4 var(--text); letter-spacing: .18em; text-transform: uppercase;
  color: var(--card); text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}
.hero-card { width: 100%; max-width: 512px; background: rgba(249, 248, 245, .92); backdrop-filter: blur(12px); padding: 32px; text-align: center; }
.hero-card h1 { font-size: 1.875rem; margin-bottom: 4px; }
.hero-card p { margin: 24px auto 16px; max-width: 52ch; font-size: .875rem; line-height: 1.625; color: var(--muted); }
.hero-card .btn { width: 100%; }
.hero-dots { position: absolute; z-index: 4; left: 0; right: 0; bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.hero-dot {
  position: relative; display: grid; place-content: center; width: 32px; height: 32px; padding: 0; border: 0;
  background: rgba(249, 248, 245, .5); border-radius: var(--radius); cursor: pointer;
  transition: background-color 150ms var(--ease-ui);
}
.hero-dot::after { content: ''; width: 8px; height: 8px; background: rgba(28, 25, 23, .5); border-radius: var(--radius); transition: all 150ms var(--ease-ui); }
.hero-dot[aria-selected="true"] { background: var(--card); }
.hero-dot[aria-selected="true"]::after { width: 16px; background: var(--dark-alt); }
.hero-dot::before { content: ''; position: absolute; inset: -6px; }   /* 44px hit area */
@media (max-width: 767px) {
  .hero-edition .hero-cinema-inner { align-items: flex-end; padding-bottom: 96px; }
  .hero-card { padding: 24px; }
  .hero-slide-3 { display: none; }                 /* 3 slides on desktop, 2 on phones */
}

/* ── bands ── */
.intro { padding-block: var(--band-y); text-align: center; }
.intro h1 { margin-bottom: 0; }
.intro h1 + .intro-lead { margin-top: var(--gap-head-body); }
.intro-lead { font-size: 1rem; color: var(--muted); max-width: 52ch; margin-inline: auto; text-wrap: balance; }
.intro-description { color: var(--muted); max-width: 62ch; margin-inline: auto; }
.intro .actions { justify-content: center; margin-top: var(--gap-body-next); }
.intro h1::after { content: ''; display: block; width: 96px; height: 1px; background: var(--line); margin: var(--gap-head-body) auto 0; }

/* full-bleed split row: 58/42, media to the viewport edge, alternated by one class */
.place, .row { display: grid; grid-template-columns: 58fr 42fr; align-items: stretch; }
.place { padding-bottom: var(--band-y); }
.place-media, .row-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.place-media img, .row-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-zoom) var(--ease-ui); }
.place:hover .place-media img, .row:hover .row-media img { transform: scale(1.05); }
/* text is centred on phones and left-aligned from 768, on identical markup */
.place-copy, .row-copy { display: flex; flex-direction: column; justify-content: center; padding: 40px var(--gutter); min-width: 0; text-align: center; }
@media (min-width: 768px) { .place-copy, .row-copy { padding-block: 0; text-align: left; } }
.place-copy > *, .row-copy > * { max-width: 46ch; margin-inline: auto; }
@media (min-width: 768px) { .place-copy > *, .row-copy > * { margin-inline: 0; } }
.place-copy p, .row-copy p { color: var(--muted); }
.row-copy p:last-child { margin-bottom: 0; }
.rows { display: grid; gap: var(--gap-rows); padding-bottom: var(--band-y); }
@media (min-width: 768px) { .row-reverse { direction: rtl; } .row-reverse > * { direction: ltr; } }
@media (max-width: 767px) {
  .place, .row { grid-template-columns: 1fr; }
  .place-media, .row-media { aspect-ratio: 4 / 3; }
}

/* what there is to do: three Kexsio components (bg-particles, ascent, roster) rebuilt
   for this site's own type and palette. The band keeps its dark ground; the starfield sits
   under it because the last of the four offerings is the sky itself. */
.doing { position: relative; background: var(--dark); color: var(--on-dark); padding-block: var(--band-y); overflow: hidden; }
.doing h2, .doing h3 { color: var(--on-dark); }
.doing :focus-visible { outline-color: var(--on-dark); }
.doing-inner { position: relative; z-index: 1; }
.doing-stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.doing-head h2 { margin: 0; max-width: 14ch; }
.doing-head > p { margin: var(--gap-head-body) 0 0; max-width: 52ch; color: var(--on-dark-muted); }

/* ascent — the heading arrives a character at a time */
.doing-head h2.is-split .ch { display: inline-block; opacity: 0; transform: translateY(.34em); }
.doing-head h2.is-lit .ch { opacity: 1; transform: none; transition: opacity 620ms var(--ease-reveal), transform 620ms var(--ease-reveal); }

/* roster — stacked lines that answer to the pointer */
.offers { list-style: none; margin: var(--gap-body-next) auto 0; padding-block: 0; }
/* every rule on the same two edges as the type above it */
.offer { border-bottom: 1px solid var(--line-dark); }
.offer:first-child { border-top: 1px solid var(--line-dark); }
.offer-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  width: 100%; padding: 22px 0; margin: 0; border: 0; background: none; cursor: pointer;
  text-align: left; color: inherit; font: inherit;
  transform: translateX(var(--lean, 0px));
  transition: transform 420ms var(--ease-reveal), opacity 320ms var(--ease-ui);
}
.offer-name {
  font-family: var(--display); font-weight: 300; line-height: 1.05;
  font-size: clamp(2rem, 6.4vw, 3.75rem); letter-spacing: -.01em;
}
.offer-mark { flex: 0 0 auto; width: 34px; height: 1px; background: var(--on-dark); opacity: .34; transition: width 420ms var(--ease-reveal), opacity 320ms var(--ease-ui); }
.offer.is-open .offer-mark { width: 72px; opacity: 1; }
.offers.is-engaged .offer.is-dim .offer-head { opacity: .38; }
.offer-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 480ms var(--ease-reveal); }
.offer-body > p { overflow: hidden; margin: 0; max-width: 56ch; color: var(--on-dark-muted); font-size: .9375rem; line-height: 1.7; }
.offer.is-open .offer-body { grid-template-rows: 1fr; }
.offer.is-open .offer-body > p { padding-bottom: 26px; }

.doing-plate { position: relative; z-index: 1; margin: var(--band-y) 0 0; }
.doing-plate img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.doing-plate figcaption { max-width: var(--container); margin: 14px auto 0; padding-inline: var(--gutter); font-size: .875rem; color: var(--on-dark-muted); }

/* no pointer, or not enough room: every offering reads open. The width test is not
   redundant - a narrow window on a laptop still reports a fine pointer. */
@media (hover: none), (pointer: coarse), (max-width: 899px) {
  .offer-body { grid-template-rows: 1fr; }
  .offer-body > p { padding-bottom: 26px; }
  .offer-head { pointer-events: none; }
  .offer-mark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .offer-head, .offer-mark, .offer-body { transition: none; }
  .doing-head h2.is-split .ch { opacity: 1; transform: none; }
}

/* founder, four-column band and photo strip share one alternate background */
.founder, .for, .strip { background: var(--bg-alt); }
.founder { display: grid; grid-template-columns: 5fr 7fr; gap: var(--grid-gap-md); align-items: center; padding-block: var(--band-y); }
.founder-archive { margin: 0; }
.founder-archive img { width: 100%; height: auto; filter: grayscale(1) contrast(1.02); }
.founder-copy h2 { max-width: 15ch; }
.founder-copy p { max-width: 46ch; color: var(--muted); }
@media (max-width: 899px) { .founder { grid-template-columns: 1fr; } }

.band-head { margin-bottom: var(--gap-body-next); }
.band-head h2 { margin: 0; max-width: 20ch; }
.band-head p { margin: var(--gap-head-body) 0 0; color: var(--muted); }
.band { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.band > li { border-top: 1px solid var(--line); padding-top: 20px; }
.band h3 { font-size: 1.25rem; line-height: 1.25; margin: 0 0 12px; }
.band p { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.625; }
.for { padding-block: var(--band-y); }
.doing + .founder { border-top: 0; }
@media (max-width: 999px) { .band { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 559px) { .band { grid-template-columns: 1fr; } }

.strip { padding-bottom: var(--band-y); }
.strip-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); padding-inline: var(--gutter); }
.strip-track img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.strip-foot { margin-top: var(--gap-body-next); text-align: center; }
.strip-foot .link { justify-content: center; }
@media (max-width: 899px) {
  .strip-track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: 16px; scroll-padding-inline: var(--gutter); }
  .strip-track picture { scroll-snap-align: start; }
}

/* closing band + footer */
.closing { background: var(--dark); color: var(--on-dark); }
.closing-inner { padding-block: var(--band-y-tight) var(--band-y); text-align: center; }
.closing h2 { max-width: 22ch; margin-inline: auto; color: var(--on-dark); }
.closing p { color: var(--on-dark-muted); max-width: 44ch; margin: var(--gap-head-body) auto var(--gap-body-next); }
.closing-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 18px; color: var(--on-dark-muted); font-size: .875rem; }
.footer { background: var(--dark-alt); color: var(--on-dark); padding-top: var(--band-y-tight); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: var(--grid-gap-md); padding-bottom: var(--band-y-tight); }
.wordmark-lg { font-size: 1.5rem; color: var(--on-dark); display: inline-flex; margin-bottom: 14px; }
.footer-line { color: var(--on-dark-muted); max-width: 34ch; }
.studio-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: .8125rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-muted); }
.footer nav, .footer address { display: flex; flex-direction: column; gap: 2px; font-style: normal; }
.footer nav a, .footer address a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; overflow-wrap: anywhere; font-size: .875rem; }
.footer a { text-decoration: none; color: var(--on-dark); }
.footer a:hover { opacity: .7; }
.footer-base { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; justify-content: space-between; padding-block: 22px 28px; border-top: 1px solid var(--line-dark); font-size: .75rem; color: var(--on-dark-muted); }
.footer-base a { color: var(--on-dark-muted); display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 759px) { .footer-grid { grid-template-columns: 1fr; } }

/* ── inner pages ── */
.page-head { padding-top: var(--band-y-tight); padding-bottom: var(--band-y-tight); text-align: center; }
.page-head h1 { max-width: 22ch; margin-inline: auto; }
.page-head h1::after { content: ''; display: block; width: 96px; height: 1px; background: var(--line); margin: var(--gap-head-body) auto 0; }
.page-head .lede { margin: var(--gap-head-body) auto 0; text-align: center; }

.about-split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--grid-gap-md); align-items: center; padding-bottom: var(--band-y); }
.about-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
.about-copy p { max-width: 48ch; color: var(--muted); }
.archive { margin: 0 auto var(--band-y); max-width: var(--container); }
.archive img { filter: grayscale(1); width: 100%; }
.archive figcaption { margin-top: 12px; font-size: .875rem; color: var(--muted); }
.about-turn { max-width: 820px; padding-bottom: var(--band-y); }
.about-turn p { max-width: 58ch; color: var(--muted); }
blockquote { margin: var(--gap-body-next) 0 0; }
blockquote p { font-family: var(--display); font-style: italic; font-weight: 300; font-size: 1.875rem; line-height: 1.3; max-width: 32ch; color: var(--ink); }
@media (min-width: 768px) { blockquote p { font-size: 2.25rem; } }
.about-now { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap-md); align-items: center; padding-bottom: var(--band-y); }
.about-now img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about-now p { max-width: 46ch; color: var(--muted); margin-bottom: var(--gap-body-next); }
@media (max-width: 899px) { .about-split, .about-now { grid-template-columns: 1fr; } }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap-md); padding-bottom: var(--band-y); }
.pair > div { border-top: 1px solid var(--line); padding-top: 28px; }
.pair h2 { font-size: 1.4rem; }
@media (min-width: 768px) { .pair h2 { font-size: 1.75rem; } }
.pair p { max-width: 42ch; margin: 0; color: var(--muted); }
@media (max-width: 899px) { .pair { grid-template-columns: 1fr; } }

.leave { padding-bottom: var(--band-y); }
.leave-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 48px; margin-top: var(--gap-body-next); }
.leave-foot .fine { flex: 1 1 360px; margin: 0; }
.fine { font-size: .75rem; line-height: 1.75; color: var(--muted); max-width: 62ch; }

.gallery-head { padding-block: var(--band-y-tight); }
.gallery-head h2 { margin: 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(200px, 22vw, 320px); grid-auto-flow: dense; gap: var(--grid-gap); padding-bottom: var(--band-y); }
.g-item { display: block; overflow: hidden; background: var(--bg-alt); }
.g-item picture, .g-item img { width: 100%; height: 100%; object-fit: cover; }
.g-item img { transition: transform var(--t-zoom) var(--ease-ui); }
.g-item:hover img { transform: scale(1.05); }
.g-wide { grid-column: span 2; }
.g-tall { grid-row: span 2; }
@media (max-width: 759px) { .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 44vw; } .g-wide, .gallery-grid .g-item:last-child { grid-column: span 2; } }
.rooms { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; padding-block: var(--band-y-tight) var(--band-y); border-top: 1px solid var(--line); }
.rooms h2 { margin-bottom: 0; }
.rooms p { max-width: 58ch; margin: var(--gap-head-body) 0 0; color: var(--muted); }

.contact-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--grid-gap-md); padding-bottom: var(--band-y); align-items: start; }
.form { display: grid; gap: 22px; max-width: var(--measure); }
.field { display: grid; gap: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field label { font-size: .875rem; letter-spacing: .04em; }
.opt { color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; font: 300 1rem/1.5 var(--text); color: var(--ink); background: var(--card);
  border: 1px solid var(--muted); border-radius: var(--radius); padding: 13px 14px; min-height: 48px;
}
.field textarea { resize: vertical; }
.field input::placeholder { color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--dark); outline-offset: 2px; border-color: var(--dark); }
.form-note { margin: 0; font-size: .875rem; color: var(--muted); }
.form-more { border-block: 1px solid var(--line); }
.form-more summary { min-height: 52px; padding: 14px 4px; cursor: pointer; font-size: .875rem; letter-spacing: .18em; text-transform: uppercase; }
.form-more summary:hover { opacity: .7; }
.form-more-fields { display: grid; gap: 22px; padding-block: 8px 24px; }
.form .btn { justify-self: start; margin-top: 6px; }
.contact-info { display: grid; gap: 30px; }
.contact-info h2 { font: 300 .875rem/1.43 var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.contact-info p { margin: 0 0 6px; }
.contact-info a:not(.link) { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; overflow-wrap: anywhere; max-width: 100%; border-bottom: 1px solid var(--line); }
.contact-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 899px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 479px) { .field-row { grid-template-columns: 1fr; } }

.message { min-height: 62vh; padding-block: var(--band-y); }
.message .lede { margin-bottom: 34px; }

.pswp__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 20px 22px; text-align: center; color: var(--on-dark); font: 300 .875rem/1.5 var(--text); background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }

/* ── reveals: opt-in per element, never in the hero ── */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transition: opacity var(--t-reveal) var(--ease-reveal) var(--reveal-delay, 0ms), transform var(--t-reveal) var(--ease-reveal) var(--reveal-delay, 0ms); }
  .js [data-reveal="title"] { transform: translateY(20px); }
  .js [data-reveal="card"] { transform: translateY(30px); }
  .js [data-reveal="media"] { transform: scale(1.02); transition-duration: var(--t-fade); }
  .js [data-reveal="text"] { transition: opacity var(--t-fade) ease-out var(--reveal-delay, 300ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .home .nav.nav-ready .nav-bg, .js .home .nav.nav-ready .nav-row, .drawer, .drawer-scrim,
  .btn, .g-item img, .place-media img, .row-media img, .hero-slide, [data-reveal] { transition: none; }
  .g-item:hover img, .place:hover .place-media img, .row:hover .row-media img { transform: none; }
}

/* ── logo (Arpine's artwork, 2026-10-01): replaces the typeset wordmark; sized up 2026-10-01 so the
   "Desert Wellness Retreat" line reads in the header ── */
:root { --nav-h: 84px; }
@media (min-width: 768px) { :root { --nav-h: 104px; } }
.wordmark.logo { letter-spacing: 0; text-transform: none; }
.wordmark.logo img { display: block; height: 62px; width: auto; }
@media (min-width: 768px) { .wordmark.logo img { height: 84px; } }
.wordmark-lg.logo img { height: 104px; }
.hero-logo { text-indent: 0; letter-spacing: 0; text-shadow: none; line-height: 0; position: relative; }
.hero-logo::before {
  content: ''; position: absolute; inset: -28% -18%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .42), rgba(0, 0, 0, .18) 60%, transparent);
}
.hero-logo img { display: block; width: clamp(300px, 72vw, 820px); height: auto; filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .45)); }