/* ═══════════════════════════════════════════════════════════
   HOUSE OF SERAPHIM - the whole site's design system
   Change a colour, font or spacing ONCE here and every page
   follows. Nothing below this block should hard-code a colour.
   ═══════════════════════════════════════════════════════════ */



:root {
  /* ── Colour ─────────────────────────────────────────────── */
  --warm-black:      #1a130f;   /* the ground everything sits on */
  --warm-black-soft: #221a15;   /* raised panels, cards */
  --warm-ivory:      #f2ecdd;   /* all primary text */
  --ivory-dim:       #c9bfa9;   /* secondary text */
  --ivory-faint:     #8d8373;   /* captions, meta */
  --gold:            #c89a5e;   /* the single accent */
  --gold-deep:       #825e2e;   /* the same accent, for light grounds */
  --gold-bright:     #ddb77e;   /* hover only */
  --burgundy:        #4e1620;   /* section break */
  --burgundy-deep:   #3a1018;   /* deepest section break */
  --hairline:        rgba(200, 154, 94, 0.24);
  --hairline-soft:   rgba(200, 154, 94, 0.12);

  /* ── Type ───────────────────────────────────────────────── */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --roman: 'Cinzel', 'Trajan Pro', 'Optima', 'Baskerville', Palatino, serif;  /* wordmark only */
  --sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Space ──────────────────────────────────────────────── */
  --section:    clamp(2.6rem, 4.6vw, 4.75rem);
  --section-sm: clamp(1.6rem, 2.8vw, 2.9rem);
  --gutter:     clamp(1.25rem, 4vw, 3.5rem);
  --wide:       1680px;
  --mid:        1240px;
  --narrow:     780px;
  --read:       66ch;      /* comfortable line length, independent of column width */

  /* ── Motion ─────────────────────────────────────────────── */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --nav-h: 76px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Base size for the whole site. Every rem below scales from here, so
   this one line moves all of it. Raised because the old setting was
   genuinely hard to read. */
html {
  font-size: clamp(17px, 0.42vw + 15.4px, 20px);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
/* the nav is fixed, so anchors must stop short of sliding under it */
[id] { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
body {
  background: var(--warm-black);
  color: var(--warm-ivory);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--warm-black); }

/* ── Layout helpers ─────────────────────────────────────────── */
.wrap        { max-width: var(--wide);   margin-inline: auto; padding-inline: var(--gutter); }
.wrap-mid    { max-width: var(--mid);    margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--narrow); margin-inline: auto; padding-inline: var(--gutter); }
.section     { padding-block: var(--section); }
.section-sm  { padding-block: var(--section-sm); }
.on-burgundy      { background: var(--burgundy); }
.on-burgundy-deep { background: var(--burgundy-deep); }
.on-raised        { background: var(--warm-black-soft); }

/* Paragraph rhythm. Stacked body copy anywhere on the site sits
   this far apart - close enough to read as one thought, far enough
   apart to see where one paragraph ends. */
.body + .body,
.lede + .body,
.body + .lede { margin-top: 0.7rem; }

/* ── Type scale ─────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}
.display { font-family: var(--serif); font-weight: 300; line-height: 0.98; letter-spacing: -0.015em;
           font-size: clamp(2.9rem, 8.5vw, 7.5rem); }
.h1      { font-family: var(--serif); font-weight: 300; line-height: 1.02; letter-spacing: -0.012em;
           font-size: clamp(2.4rem, 6vw, 4.75rem); }
.h2      { font-family: var(--serif); font-weight: 300; line-height: 1.08;
           font-size: clamp(1.9rem, 4vw, 3.25rem); }
.h3      { font-family: var(--serif); font-weight: 400; line-height: 1.2;
           font-size: clamp(1.15rem, 2vw, 1.5rem); }
.lede    { font-family: var(--serif); font-weight: 300; font-size: clamp(1.2rem, 2vw, 1.6rem);
           line-height: 1.38; color: var(--ivory-dim); }
.body    { font-family: var(--serif); font-size: 1.32rem; line-height: 1.55; color: var(--ivory-dim); }
.meta    { font-family: var(--sans); font-size: 0.86rem; letter-spacing: 0.16em;
           text-transform: uppercase; color: var(--ivory-faint); }
em { font-style: italic; }

/* ── Link with the house underline ──────────────────────────── */
.link {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--hairline);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.link:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 1.1rem 2.6rem;
  border: 1px solid var(--hairline);
  color: var(--warm-ivory);
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--warm-black); }
.btn.solid { background: var(--gold); border-color: var(--gold); color: var(--warm-black); }
.btn.solid:hover { background: var(--gold-bright); border-color: var(--gold-bright); }

.rule { height: 1px; background: var(--hairline-soft); border: 0; }

/* ═══ NAVIGATION ════════════════════════════════════════════ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  height: var(--nav-h);
  padding-inline: var(--gutter);
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled, .nav.solid {
  background: rgba(26, 19, 15, 0.92);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline-soft);
}
.nav-links {
  display: flex; gap: clamp(0.85rem, 1.45vw, 1.7rem); list-style: none;
  flex: 1 1 0;                 /* equal halves, so the wordmark stays centred */
  min-width: 0;
}
.nav-links:last-of-type { justify-content: flex-end; }
.nav-link {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--warm-ivory);
  white-space: nowrap;         /* one line each - never "THE / ANGELS" */
  opacity: 0.82; transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}
.nav-link:hover, .nav-link.current { opacity: 1; color: var(--gold); }
/* ── The Colonnade wordmark ─────────────────────────────────
   Per the Designer Brief: Roman serif, all caps, 0.32em tracking,
   gold interpuncts. Cinzel is the web stand-in for Trajan until
   the bespoke letterforms are drawn. Nothing else uses it. */
.colonnade {
  font-family: var(--roman);
  font-weight: 400;
  letter-spacing: 0.26em;
  padding-left: 0.32em;          /* balances the trailing tracking */
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.colonnade .dot {
  color: var(--gold);
  padding: 0 0.15em;
  font-size: 0.65em;
  vertical-align: 0.25em;
}
.nav-wordmark {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.76rem;
  flex: 0 0 auto;              /* never squeezed by the links either side */
}
/* The Cartouche S - 7:10, so height leads and width follows */
.nav-emblem { display: block; color: var(--gold); }
.nav-emblem svg { width: 15px; height: 21px; }
.nav-hamburger { display: none; width: 26px; height: 16px; position: relative; }
.nav-hamburger span {
  position: absolute; left: 0; width: 100%; height: 1px; background: var(--warm-ivory);
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.nav-hamburger span:nth-child(1) { top: 0; }
.nav-hamburger span:nth-child(2) { top: 7px; }
.nav-hamburger span:nth-child(3) { top: 14px; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Seven links either side of the wordmark need roughly 1300px of bar
   to sit beside it without touching. Below that the menu button takes
   over - the overlay carries every destination, so nothing is lost. */
@media (max-width: 1299px) {
  .nav-links     { display: none; }
  .nav-hamburger { display: block; }
}
/* Just above that breakpoint the bar is tight, so it keeps a narrower
   margin than the rest of the site until there is room to spare. */
@media (min-width: 1300px) and (max-width: 1480px) {
  .nav { padding-inline: 2rem; }
}

.nav-overlay {
  position: fixed; inset: 0; z-index: 99;
  background: var(--warm-black);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.6rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s var(--ease);
}
.nav-overlay.open { opacity: 1; pointer-events: auto; }
.nav-overlay a { font-family: var(--serif); font-size: 1.9rem; font-weight: 300; }
.nav-overlay a:hover { color: var(--gold); }

/* ═══ FOOTER ════════════════════════════════════════════════ */
.footer { border-top: 1px solid var(--hairline-soft); padding-block: 2.75rem 1.75rem; }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem;
}
.footer-word { font-size: 0.82rem; margin-bottom: 1.2rem; }
.footer h4 { font-family: var(--sans); font-size: 0.74rem; font-weight: 500;
             letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
             margin-bottom: 1.2rem; }
.footer ul { list-style: none; display: grid; gap: 0.75rem; }
.footer li a { font-size: 0.95rem; color: var(--ivory-dim); transition: color 0.3s var(--ease); }
.footer li a:hover { color: var(--warm-ivory); }
.footer-base {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline-soft);
  font-size: 0.82rem; color: var(--ivory-faint); flex-wrap: wrap;
}

/* ═══ HERO ══════════════════════════════════════════════════ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end;
        overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  /* Two layers. The first shades top and bottom so the nav and the
     join to the next section stay clean. The second shades the left,
     where every hero puts its words - without it, ivory type over a
     bright photograph (red silk, desert stone) is hard to read. */
  background:
    linear-gradient(100deg, rgba(26,19,15,0.55) 0%, rgba(26,19,15,0.3) 46%,
                rgba(26,19,15,0) 78%),
    linear-gradient(180deg, rgba(26,19,15,0.55) 0%, rgba(26,19,15,0.12) 35%,
                rgba(26,19,15,0.75) 78%, var(--warm-black) 100%);
}
.hero-body { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(4rem, 9vh, 8rem); }
/* A hero used as a band partway down a page - same treatment, less
   height, so it punctuates the page instead of taking it over. */
.hero.band { min-height: min(78svh, 40rem); }
.hero.band .hero-body { padding-block: clamp(2.5rem, 6vh, 4.5rem); }
.hero.band .display { font-size: clamp(2.4rem, 5.5vw, 4.75rem); }
.hero-title { margin: 1.4rem 0 1.6rem; }
.hero-sub { max-width: 46ch; margin-bottom: 2.6rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ═══ SECTION HEADING ═══════════════════════════════════════
   Heading on the left, the line that explains it on the right.
   Side by side rather than stacked - it uses the width of a big
   screen and saves a whole block of height. */
.section-head {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem); align-items: end;
  margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
}
.section-head .lede { max-width: 46ch; }
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; gap: 1rem; align-items: start; }
}

/* ═══ PRODUCT GRID ══════════════════════════════════════════ */
.filters { display: grid; gap: 1.6rem; padding-block: 2rem 3.25rem;
           border-bottom: 1px solid var(--hairline-soft); margin-bottom: 3.5rem; }
.filter-row { display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap; }
.filter-label { min-width: 88px; }
.chip {
  font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ivory-dim);
  padding-bottom: 0.35rem; border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.chip:hover { color: var(--warm-ivory); }
.chip.on { color: var(--gold); border-bottom-color: var(--gold); }
.filter-row.primary .chip { font-size: 0.92rem; letter-spacing: 0.1em; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3.5vw, 3.25rem); }
.grid.two { grid-template-columns: repeat(2, 1fr); }

.card { display: block; }
.card-media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--warm-black-soft); margin-bottom: 1.15rem;
}
.card-media img,
.card-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity 0.7s var(--ease), transform 1.1s var(--ease);
}
.card-media .alt { opacity: 0; }
.card:hover .card-media .alt { opacity: 1; }
.card:hover .card-media img,
.card:hover .card-media video { transform: scale(1.035); }
.card-meaning { font-family: var(--sans); font-size: 0.74rem; font-weight: 500;
                letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
                margin-bottom: 0.5rem; }
.card-name { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; line-height: 1.25; }
.card-price { font-family: var(--serif); font-style: italic; font-size: 1.14rem;
              color: var(--ivory-faint); margin-top: 0.3rem; }
.card-flag { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.18em;
             text-transform: uppercase; color: var(--gold); margin-top: 0.45rem; opacity: 0.8; }
.placeholder { display: grid; place-items: center; border: 1px solid var(--hairline-soft); }
.placeholder::after { content: ''; width: 46px; height: 46px; border: 1px solid var(--hairline);
                      border-radius: 50%; }

/* ═══ PRODUCT PAGE ══════════════════════════════════════════ */
.piece { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(2rem, 5vw, 5rem);
         align-items: start; padding-top: calc(var(--nav-h) + 3rem); }
.piece-media { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.piece-media img,
.piece-media video { width: 100%; background: var(--warm-black-soft); }
/* vertical 9:16 video - never stretched to landscape */
.piece-video { max-width: 440px; width: 100%; margin-inline: auto; background: #000; }
.piece-video video { width: 100%; aspect-ratio: 607 / 1080; object-fit: cover; }
.piece-group-label { margin: 1.5rem 0 -0.25rem; }
.piece-detail { position: sticky; top: calc(var(--nav-h) + 2.5rem); }
.piece-meaning { font-family: var(--sans); font-size: 0.66rem; font-weight: 500;
                 letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.piece-name { margin: 0.9rem 0 0.7rem; }
.piece-price { font-family: var(--serif); font-style: italic; font-size: 1.2rem;
               color: var(--ivory-dim); margin-bottom: 1.8rem; }
.piece-story { margin-bottom: 2.2rem; }
.specs { list-style: none; margin-bottom: 2.4rem; }
.specs li { display: flex; justify-content: space-between; gap: 1.5rem;
            padding: 1.05rem 0; border-bottom: 1px solid var(--hairline-soft); font-size: 1.04rem; }
.specs .k { color: var(--ivory-faint); letter-spacing: 0.1em; text-transform: uppercase;
            font-size: 0.8rem; }
.piece-aside { display: flex; gap: 1.5rem; margin-top: 1.4rem; flex-wrap: wrap; }
.piece-aside a { font-size: 0.72rem; color: var(--ivory-faint); letter-spacing: 0.1em; }
.piece-aside a:hover { color: var(--gold); }

/* ═══ WORN IN EGYPT - masonry ═══════════════════════════════ */
.masonry { columns: 4; column-gap: clamp(0.75rem, 1.6vw, 1.5rem); }
.masonry > * { break-inside: avoid; margin-bottom: clamp(0.75rem, 1.6vw, 1.5rem); position: relative; }
.masonry img, .masonry video { width: 100%; background: var(--warm-black-soft); }
.worn-tile { position: relative; display: block; overflow: hidden; }
.worn-tags {
  position: absolute; inset: auto 0 0 0; padding: 1.4rem 1.1rem 1.1rem;
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  background: linear-gradient(0deg, rgba(26,19,15,0.88), transparent);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.worn-tile:hover .worn-tags, .worn-tile:focus-within .worn-tags { opacity: 1; }
.worn-tag {
  font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--warm-black); background: var(--gold); padding: 0.35rem 0.7rem;
}
.worn-tag:hover { background: var(--gold-bright); }

/* ═══ HORIZONTAL SCROLLER (Worn in Egypt on the home page) ══
   Scrolls sideways if people want more, sits still if they don't.
   Edge-to-edge so the row visibly runs off the screen - that's the
   cue that there is more to see. */
.scroller {
  display: flex;
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding-bottom: 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--hairline-soft);
  /* starts level with the heading, runs off the right of the screen */
  margin-right: calc(50% - 50vw);
  padding-right: var(--gutter);
}
/* Worn row: full-bleed to both screen edges (padding is set by JS so the
   first photo lines up with the heading), soft fades, gold arrows. */
.scroller-shell { position: relative; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.scroller-shell .scroller { margin-right: 0; padding-left: var(--gutter); outline-offset: -2px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 clamp(18px, 4vw, 64px), #000 calc(100% - clamp(18px, 4vw, 64px)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 clamp(18px, 4vw, 64px), #000 calc(100% - clamp(18px, 4vw, 64px)), transparent 100%); }
.scroller-shell.at-start .scroller { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - clamp(18px, 4vw, 64px)), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - clamp(18px, 4vw, 64px)), transparent 100%); }
.scroller-shell.at-end .scroller { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 clamp(18px, 4vw, 64px)); mask-image: linear-gradient(90deg, transparent 0, #000 clamp(18px, 4vw, 64px)); }
.scroller-arrow { position: absolute; top: calc(50% - 0.625rem); transform: translateY(-50%); z-index: 2;
  width: clamp(40px, 3.4vw, 52px); height: clamp(40px, 3.4vw, 52px); border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; font-size: 1.05rem; line-height: 1;
  color: var(--gold-bright, #e3c27a); background: rgba(14, 11, 8, 0.62); border: 1px solid var(--gold, #c9a45c);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .25s, color .25s, opacity .25s; }
.scroller-arrow:hover, .scroller-arrow:focus-visible { background: var(--gold, #c9a45c); color: #120e0a; }
.scroller-arrow[hidden] { display: none; }
.scroller-arrow.prev { left: clamp(10px, 2vw, 32px); }
.scroller-arrow.next { right: clamp(10px, 2vw, 32px); }
.scroller-cue { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold, #c9a45c); white-space: nowrap; }
.scroller-cue span { display: inline-block; margin-left: .35em; animation: cueNudge 2.4s ease-in-out infinite; }
@keyframes cueNudge { 0%, 60%, 100% { transform: none } 30% { transform: translateX(5px) } }
@media (prefers-reduced-motion: reduce) { .scroller-cue span { animation: none } }
.scroller::-webkit-scrollbar { height: 2px; }
.scroller::-webkit-scrollbar-track { background: var(--hairline-soft); }
.scroller::-webkit-scrollbar-thumb { background: var(--gold); }
.scroller-item {
  flex: 0 0 clamp(260px, 24vw, 430px);
  scroll-snap-align: start;
}
.scroller-item img, .scroller-item video {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: var(--warm-black-soft);
}
.scroller-hint {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: 1rem;
}
.scroller-hint::after {
  content: ''; flex: 1; height: 1px; background: var(--hairline-soft);
}

/* ═══ VERTICAL VIDEO RAIL ═══════════════════════════════════ */
.rail { display: flex; gap: clamp(0.75rem, 1.6vw, 1.5rem); overflow-x: auto;
        scroll-snap-type: x mandatory; padding-bottom: 1rem;
        margin-right: calc(50% - 50vw); padding-right: var(--gutter); }
.rail::-webkit-scrollbar { height: 2px; }
.rail::-webkit-scrollbar-thumb { background: var(--hairline); }
.rail-item { flex: 0 0 clamp(240px, 21vw, 380px); scroll-snap-align: start; }
.rail-item video { width: 100%; aspect-ratio: 607 / 1080; object-fit: cover; background: #000; }
.rail-item .cap { margin-top: 0.8rem; }

/* ═══ SPLIT: vertical video + text ══════════════════════════ */
.split > * { min-width: 0; }
.split { display: grid; grid-template-columns: minmax(0, 0.85fr) 1fr;
         gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.split-video { max-width: 460px; width: 100%; background: #000; }
.split-video video { width: 100%; aspect-ratio: 607 / 1080; object-fit: cover; }

/* ═══ PANELS (energetics, inclusions, guides) ═══════════════ */
.panels { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.5vw, 2.5rem); }
.panels.three { grid-template-columns: repeat(3, 1fr); }
.panels.six   { grid-template-columns: repeat(3, 1fr); }
/* Ten intentions, five across, two rows - compact enough to take in
   at a glance instead of scrolling past. */
.panels.five  { grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 2vw, 2rem); }
.panels.five .panel   { padding-top: 1.1rem; }
.panels.five .n       { margin-bottom: 0.5rem; }
.panels.five h3       { margin-bottom: 0.3rem; font-size: clamp(1.15rem, 1.5vw, 1.45rem); }
.panels.five .panel p { font-size: 0.92rem; line-height: 1.4; }
.panel { border-top: 1px solid var(--hairline); padding-top: 1.6rem; }
.panel .n { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.22em; color: var(--gold);
            margin-bottom: 0.9rem; }
.panel h3 { margin-bottom: 0.8rem; }
.panel p { font-family: var(--serif); font-size: 1.16rem; line-height: 1.75; color: var(--ivory-dim); }
.guide-portrait { aspect-ratio: 3 / 4; object-fit: cover; width: 100%;
                  background: var(--warm-black-soft); margin-bottom: 1.1rem; }

/* ═══ TIMELINE ══════════════════════════════════════════════ */
.timeline { list-style: none; border-left: 1px solid var(--hairline); padding-left: 2.25rem; }
.timeline li { position: relative; padding-bottom: 2.5rem; }
.timeline li::before { content: ''; position: absolute; left: -2.56rem; top: 0.55rem;
                       width: 7px; height: 7px; background: var(--gold); border-radius: 50%; }
.timeline .day { margin-bottom: 0.5rem; }

/* ═══ FORMS ═════════════════════════════════════════════════ */
.form { display: grid; gap: 1.9rem; }
.field { display: grid; gap: 0.6rem; }
.field label { font-family: var(--sans); font-size: 0.74rem; font-weight: 500;
               letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0;        /* never push a grid wider than the screen */
  background: transparent; border: 0; border-bottom: 1px solid var(--hairline);
  padding: 0.8rem 0; font-family: var(--serif); font-size: 1.18rem; color: var(--warm-ivory);
  transition: border-color 0.35s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--gold);
}
.field select option { background: var(--warm-black); color: var(--warm-ivory); }
.field textarea { resize: vertical; min-height: 110px; }
.inline-form { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { flex: 1 1 240px; }
.hp { position: absolute; left: -9999px; }

/* ═══ REVEAL ON SCROLL ══════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(26px);
          transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}


/* ═══ THE ASCENT (the Angels page) ══════════════════════════
   The page climbs from near-black to gold as you scroll - matter
   to spirit, made literal. .on-gold is the only light-ground
   section on the whole site, so it lands hard. */
.on-gold {
  background: linear-gradient(170deg, #d9b47d 0%, var(--gold) 45%, #b4accb00 100%),
              var(--gold);
  color: var(--warm-black);
}
.on-gold .eyebrow,
.on-gold .meta        { color: rgba(26,19,15,0.62); }
.on-gold .lede,
.on-gold .body,
.on-gold .panel p     { color: rgba(26,19,15,0.78); }
.on-gold .btn         { border-color: rgba(26,19,15,0.35); color: var(--warm-black); }
.on-gold .btn:hover   { background: var(--warm-black); border-color: var(--warm-black);
                        color: var(--gold); }
.on-gold .btn.solid   { background: var(--warm-black); border-color: var(--warm-black);
                        color: var(--gold); }
.on-gold .panel       { border-top-color: rgba(26,19,15,0.25); }
.on-gold .link        { color: var(--warm-black); border-bottom-color: rgba(26,19,15,0.35); }

/* the ground warms a step at a time down the page */
.ascent-1 { background: var(--warm-black); }
.ascent-2 { background: var(--burgundy-deep); }
.ascent-3 { background: var(--burgundy); }

/* ── The six wings ─────────────────────────────────────────
   Three arcs either side of a still centre. Drawn as geometry,
   never as feathers - the Designer Brief keeps wings off the
   mark, and this is editorial, not identity. */
.wings { width: min(420px, 78vw); margin-inline: auto; color: var(--gold); }
.wings path, .wings line { stroke: currentColor; fill: none; }
.on-gold .wings { color: rgba(26,19,15,0.55); }

/* ── A line that stands on its own ─────────────────────────── */
.utterance {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 3.6vw, 2.9rem);
  line-height: 1.28;
  text-align: center;
  max-width: 22ch;
  margin-inline: auto;
}

/* ── The doorway rows - scannable, not a wall ─────────────── */
.doorway {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: start;
  padding: 2.4rem 0;
  border-top: 1px solid var(--hairline-soft);
}
.doorway:last-child { border-bottom: 1px solid var(--hairline-soft); }
.doorway-num {
  font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--gold);
}
.doorway-name { margin-bottom: 0.45rem; }
.doorway-ask  { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.22em;
                  text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }
@media (max-width: 760px) {
  .doorway { grid-template-columns: 48px 1fr; }
  .doorway > :last-child { grid-column: 2; }
}


/* ═══ THE ANGEL PROFILE CARD ════════════════════════════════
   Built to be screenshotted. Portrait-ish, self-contained, and
   it carries the wordmark so a shared screenshot still says
   whose House it came from. */
.angel-card {
  position: relative;
  max-width: 560px;
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 3.5rem);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(200,154,94,0.18), transparent 60%),
    linear-gradient(170deg, var(--burgundy) 0%, var(--burgundy-deep) 100%);
  border: 1px solid var(--hairline);
  text-align: center;
  overflow: hidden;
}
.angel-card::before {
  content: ''; position: absolute; inset: 10px;
  border: 1px solid var(--hairline-soft); pointer-events: none;
}
.angel-card-emblem { width: 26px; height: 37px; margin: 0 auto 1.5rem; color: var(--gold); }
.angel-card-no {
  font-family: var(--serif); font-size: clamp(3.2rem, 11vw, 5rem);
  line-height: 1; color: var(--gold); letter-spacing: 0.02em;
}
.angel-card-name {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0.5rem 0 1.5rem;
}
.angel-card-meaning {
  font-family: var(--serif); font-size: 1.24rem; line-height: 1.6;
  color: var(--ivory-dim); max-width: 34ch; margin: 0 auto 2rem;
}
.angel-card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; border-top: 1px solid var(--hairline-soft); padding-top: 1.6rem;
}
.angel-card-grid .k {
  font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 0.45rem;
}
.angel-card-grid .v { font-family: var(--serif); font-size: 1.1rem; }
.angel-card-foot {
  margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--hairline-soft);
  font-size: 0.56rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(242,236,221,0.45);
}

/* ── Stone of the day ──────────────────────────────────── */
.stone-today {
  display: grid; grid-template-columns: 86px 1fr; gap: 1.6rem; align-items: center;
  padding: 1.75rem; border: 1px solid var(--hairline);
  background: rgba(0,0,0,0.18);
}
.stone-gem {
  width: 86px; height: 86px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.55), transparent 42%),
    var(--gem, var(--gold));
  box-shadow: inset 0 -6px 14px rgba(0,0,0,0.4), 0 10px 26px -12px rgba(0,0,0,0.7);
}
@media (max-width: 560px) {
  .stone-today { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* ── The form that makes an Angel ──────────────────────── */
.name-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 680px) { .name-row { grid-template-columns: 1fr !important; } }


/* ═══ PAGE INTROS & SECTION JOINS ═══════════════════════════
   Two problems this solves:

   1. A page intro followed straight by content was leaving a
      hole - the intro's bottom padding and the next section's
      top padding stacked, up to ~350px of nothing on a laptop.
   2. Any two plain-ground sections in a row did the same.

   Tinted sections keep their full padding, because a change of
   colour genuinely needs the breathing room around it. */
.page-head {
  padding-block: calc(var(--nav-h) + clamp(3.5rem, 7vw, 5.5rem))
                 clamp(2rem, 4vw, 3.25rem);
}

/* collapse the join between two plain-ground sections */
section.section:not([class*="on-"]):not([class*="ascent"])
  + section.section:not([class*="on-"]):not([class*="ascent"]),
.page-head:not([class*="on-"])
  + section.section:not([class*="on-"]):not([class*="ascent"]) {
  padding-top: 0;
}


/* Where a plain section runs straight into a coloured band, the
   band's own padding already does the separating - so the section
   above it does not need its full skirt as well. */
section.section:not([class*="on-"]):not([class*="ascent"]):has(+ section[class*="on-"]),
section.section:not([class*="on-"]):not([class*="ascent"]):has(+ section[class*="ascent"]) {
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}


/* ═══ THE LISTENING ROOM ════════════════════════════════════
   Spotify's own player is bright green and loud, so it is kept
   folded away. The card is ours; the player only appears once
   someone asks for it, and only one plays at a time. */
.track-list { display: grid; gap: 1px; background: var(--hairline-soft);
              border-block: 1px solid var(--hairline-soft); }
.track {
  background: var(--warm-black);
  transition: background 0.4s var(--ease);
}
.track.open { background: var(--warm-black-soft); }
.track-head {
  width: 100%;
  display: grid; grid-template-columns: 72px 1fr auto;
  gap: clamp(1rem, 2.5vw, 2rem); align-items: center;
  padding: 1.5rem clamp(0.5rem, 2vw, 1.5rem);
  text-align: left; cursor: pointer;
}
.track-cover {
  width: 72px; height: 72px; object-fit: cover;
  background:
    radial-gradient(120% 120% at 25% 15%, rgba(200,154,94,0.3), transparent 60%),
    linear-gradient(150deg, var(--burgundy), var(--burgundy-deep));
  border: 1px solid var(--hairline-soft);
  display: grid; place-items: center;
}
.track-cover svg { width: 20px; height: 29px; color: var(--gold); opacity: 0.8; }
.track-title { font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.5rem);
               margin-bottom: 0.3rem; }
.track-line  { font-family: var(--serif); font-size: 1.14rem; color: var(--ivory-dim);
               max-width: 52ch; }
.track-play {
  font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold); white-space: nowrap;
  display: flex; align-items: center; gap: 0.6rem;
}
.track-play::after {
  content: ''; width: 9px; height: 9px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.35s var(--ease);
}
.track.open .track-play::after { transform: rotate(-135deg) translate(-3px, -3px); }
.track-player { padding: 0 clamp(0.5rem, 2vw, 1.5rem) 1.5rem; }
.track-player iframe { width: 100%; height: 152px; border: 0; border-radius: 0; }

@media (max-width: 680px) {
  .track-head { grid-template-columns: 56px 1fr; row-gap: 0.75rem; }
  .track-cover { width: 56px; height: 56px; }
  .track-play { grid-column: 2; }
}

/* Shown only while no playlist ids have been pasted in yet */
.listening-empty {
  border: 1px dashed var(--hairline); padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}


/* ═══ THE PERSISTENT PLAYER ═════════════════════════════════
   Sits outside the part of the page that gets swapped when you
   move around the site, so the music keeps playing. Collapses
   to a slim strip - the player is still mounted and still
   sounding, just tucked away. */
#seraphim-player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: rgba(26, 19, 15, 0.97);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--hairline);
  transform: translateY(100%);
  transition: transform 0.5s var(--ease);
}
#seraphim-player.up { transform: none; }
.player-bar {
  display: grid; grid-template-columns: 44px 1fr auto auto;
  gap: 1rem; align-items: center;
  padding: 0.7rem var(--gutter);
  max-width: var(--wide); margin-inline: auto;
}
.player-cover { width: 44px; height: 44px; object-fit: cover;
                border: 1px solid var(--hairline-soft); }
.player-title { font-family: var(--serif); font-size: 1rem; line-height: 1.2; }
.player-sub   { font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.22em;
                text-transform: uppercase; color: var(--gold); margin-top: 0.2rem; }
.player-btn {
  font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ivory-dim); padding: 0.5rem 0.75rem;
  border: 1px solid var(--hairline-soft); white-space: nowrap;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.player-btn:hover { color: var(--gold); border-color: var(--hairline); }
.player-frame {
  max-width: var(--wide); margin-inline: auto;
  padding: 0 var(--gutter) 0.8rem;
  overflow: hidden; height: 152px;
  transition: height 0.45s var(--ease), padding 0.45s var(--ease);
}
#seraphim-player.min .player-frame { height: 0; padding-bottom: 0; }
.player-frame iframe { width: 100%; height: 152px; border: 0; }
body.has-player { padding-bottom: 220px; }
body.has-player.player-min { padding-bottom: 76px; }
@media (max-width: 680px) {
  .player-bar { grid-template-columns: 38px 1fr auto; gap: 0.75rem; }
  .player-cover { width: 38px; height: 38px; }
  .player-bar .player-btn.hide-sm { display: none; }
}


/* ═══ EGYPT FILMS ═══════════════════════════════════════════
   Three clips, side by side. The footage is vertical 9:16, which
   is far too tall side by side, so each is cropped to 3:4 - the
   gentlest crop that still sits well in a row. */
.films { display: grid; grid-template-columns: repeat(3, 1fr);
         gap: clamp(0.75rem, 1.6vw, 1.5rem); }
.films video {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  background: var(--warm-black-soft);
}
@media (max-width: 760px) {
  .films { grid-template-columns: 1fr; }
  .films video { aspect-ratio: 4 / 5; }
}

/* A guide shown as a mark rather than a portrait - the lotus, held
   in the same frame a photograph would occupy so the row stays even. */
.guide-mark {
  display: grid; place-items: center;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--hairline-soft);
}
.guide-mark img { width: 42%; height: auto; opacity: 0.9; }


/* ═══ KEYBOARD FOCUS ════════════════════════════════
   Only ever shows for people moving by keyboard - a mouse click
   leaves no ring. Gold on dark, deep gold on the ivory sections. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-ivory :focus-visible { outline-color: var(--gold-deep); }


/* ── The House hero ────────────────────────────────────────
   Every clip in the library was filmed on a phone: 9:16, portrait.
   Stretched across a wide screen, a band that tall shows only about
   a quarter of the frame - a face, and nothing else. So the hero is
   split instead: the words hold the left of the page, the film runs
   full height down the right at close to its own shape. The dress,
   the necklace and the temple behind all stay in frame.
   On a phone the film goes first and fills the screen, which is the
   shape it was shot in. */
.house-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 90svh;
  align-items: center;
  background: var(--warm-black);
}
.house-hero-copy {
  padding-block: clamp(5rem, 14vh, 9rem) clamp(3rem, 8vh, 6rem);
  padding-right: clamp(1.5rem, 4vw, 4rem);
  /* line the text up with the .wrap gutter used by every section below */
  padding-left: max(var(--gutter), calc((100vw - var(--wide)) / 2 + var(--gutter)));
}
.house-hero-copy > * { max-width: 32rem; }
.house-hero-film {
  position: relative; align-self: stretch; overflow: hidden;
  min-height: min(90svh, 40rem);
  background: var(--warm-black-soft);
}
.house-hero-film video {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%;
}
/* a whisper of shade where the film meets the words, so the edge is soft */
.house-hero-film::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(26,19,15,0.55) 0%, rgba(26,19,15,0) 22%);
}

@media (max-width: 900px) {
  .house-hero { grid-template-columns: 1fr; min-height: 0; }
  .house-hero-film {
    order: -1;                       /* the film leads on a phone */
    aspect-ratio: 4 / 5; min-height: 0;
  }
  .house-hero-film video { object-position: 50% 28%; }
  .house-hero-film::before { background: none; }
  .house-hero-copy {
    padding: clamp(2.5rem, 7vw, 4rem) var(--gutter) clamp(3rem, 8vw, 4.5rem);
  }
  .house-hero-copy > * { max-width: none; }
}

/* ═══ THE HOUSE - EDITORIAL LAYOUTS ═════════════════════════
   This page alternates composition deliberately: wide, split,
   image-led, compact. Scoped to .page-house so product and
   retreat pages are untouched. */

/* A light ground, for relief between the darker sections. */
.on-ivory { background: var(--warm-ivory); color: var(--warm-black); }
.on-ivory .eyebrow      { color: var(--gold-deep); }
.on-ivory .body,
.on-ivory .lede         { color: rgba(26,19,15,0.82); }
.on-ivory .link         { color: var(--warm-black); border-bottom-color: rgba(26,19,15,0.3); }
.on-ivory .link:hover   { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }
.on-ivory .utterance    { color: var(--warm-black); }

/* On this page the running text is the sans - easier on the eye
   over long passages than the display serif. */
.page-house .body,
.page-house .lede { font-family: var(--sans); font-weight: 300; }
.page-house .body { font-size: 1.12rem; line-height: 1.52; }
.page-house .lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.4; }
.prose { max-width: var(--read); }
.prose p + p { margin-top: 0.7rem; }

/* heading in the left third, prose across the right */
.house-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: start;
}
/* A heading in a third of the page needs a smaller size than the same
   heading running the full width, or it breaks into stacked fragments. */
.house-split > :first-child .h1,
.house-aside .h1 { font-size: clamp(2rem, 3.4vw, 3.1rem); }
/* image one side, words the other */
.house-feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.5rem); align-items: center;
}
.house-feature.flip > figure { order: 2; }
.house-feature figure { margin: 0; }
.house-feature img,
.house-feature video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* three open columns, no boxes */
.house-trio {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
/* These three sit at the same size as the body text at the default
   .h3, so they stop reading as headings. A step up fixes it. */
.house-trio h3 { margin-bottom: 0.9rem; font-size: clamp(1.5rem, 2.4vw, 1.95rem); }
/* a quieter interlude */
.house-inset {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: start;
  max-width: 980px; margin-inline: auto;
  padding: clamp(2rem, 4vw, 3.25rem);
  border: 1px solid var(--hairline-soft);
}
/* main column with a smaller note beside it */
.house-aside {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.on-ivory .house-note {
  color: var(--gold-deep); border-top-color: rgba(26,19,15,0.2);
}
.house-note {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.35;
  color: var(--gold); border-top: 1px solid var(--hairline); padding-top: 1.5rem;
}
/* ── Feel · Embody · Become ─────────────────────────────────
   A picture holding one half of the page, the three steps stacked
   down the other, divided by hairlines rather than boxed into cards.
   Nothing is centred and nothing is framed - it just reads. */
.house-philosophy {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.house-philosophy > figure { margin: 0; position: relative; min-height: 26rem; }
.house-philosophy img,
.house-philosophy video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.house-philosophy > div {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 5vw, 5rem);
}
.house-step { padding-block: clamp(1.1rem, 2.2vw, 1.75rem); }
.house-step + .house-step { border-top: 1px solid var(--hairline-soft); }
.house-step h3 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem); color: var(--gold);
  margin-bottom: 0.45rem;
}
@media (max-width: 900px) {
  .house-philosophy { grid-template-columns: 1fr; }
  .house-philosophy > figure { min-height: 0; aspect-ratio: 4 / 5; }
}

/* the founder, given room */
.house-founder {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: start;
}
/* The story beside the portrait is long. Rather than leave the lower
   half of the column empty, the portrait travels down with the reader
   and stops level with the end of the text. */
.house-founder > figure {
  align-self: start;
  position: sticky; top: calc(var(--nav-h) + 2rem);
}
.house-founder img,
.house-founder video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 18%; }
@media (max-width: 900px) {
  .house-founder > figure { position: static; }
}
.house-close {
  display: grid; grid-template-columns: minmax(0, 1.4fr) auto;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}

@media (max-width: 900px) {
  .house-split, .house-feature, .house-trio,
  .house-inset, .house-aside, .house-founder, .house-close {
    grid-template-columns: 1fr;
  }
  .house-feature.flip > figure { order: 0; }   /* picture follows its heading */
  .house-close { justify-items: start; }
}

/* ═══ RESPONSIVE ════════════════════════════════════════════ */
/* The wall of worn shots runs four wide on a big screen, three on a
   laptop, and keeps stepping down below. */
@media (max-width: 1380px) {
  .masonry { columns: 3; }
}
@media (max-width: 1024px) {
  /* Several pages set a two-column split with an inline style, which would
     otherwise beat this rule and run off the side of a phone. */
  .split          { grid-template-columns: 1fr !important; }
  .grid           { grid-template-columns: repeat(2, 1fr); }
  .panels,
  .panels.six     { grid-template-columns: repeat(2, 1fr); }
  .panels.five    { grid-template-columns: repeat(3, 1fr); }
  .masonry        { columns: 2; }
  .piece          { grid-template-columns: 1fr; }
  .piece-detail   { position: static; }
  .split          { grid-template-columns: 1fr; }
  .split-video    { margin-inline: auto; }
  .footer-grid    { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

@media (max-width: 760px) {
  :root { --nav-h: 62px; }
  .nav-links      { display: none; }
  .nav-hamburger  { display: block; }
  .nav            { justify-content: space-between; }
  .nav-wordmark   { font-size: 0.78rem; letter-spacing: 0.22em; }
  .grid,
  .grid.two       { grid-template-columns: 1fr; gap: 2.5rem; }
  .panels,
  .panels.three,
  .panels.six     { grid-template-columns: 1fr; }
  .panels.five    { grid-template-columns: repeat(2, 1fr); }
  .masonry        { columns: 1; }
  .footer-grid    { grid-template-columns: 1fr; }
  .filter-label   { min-width: 100%; }
  .hero-actions .btn { width: 100%; text-align: center; }
  /* vertical video gets the whole screen on a phone - that's its native shape */
  .piece-video, .split-video { max-width: none; }
  .rail-item      { flex-basis: 74vw; }
  .scroller-item  { flex-basis: 68vw; }
}