/* ==========================================================================
   LIVYATT — "The House at Nightfall"  ·  v4.44
   Classical Roman capitals (as on the bottle) with a crisp modern
   grotesque (Geist) for text and labels; warm ivory by day,
   plum-black and violet light by night. Colours are sampled from the
   photography so the pages and the pictures belong to the same room.
   Effects are progressive: everything reads without JS, and motion is
   calmed for visitors who prefer reduced motion.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL OFL — see /assets/fonts) ---------- */
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-italic.woff2") format("woff2"); font-weight: 300 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* Night: warm plum-black, sampled from the After Dark photographs */
  --obsidian: #0e0b10;
  --ink-900: #120e14;
  --ink-800: #17121a;
  --ink-700: #201924;
  --ink-600: #2c2330;
  /* Moonlight (text on night) */
  --plat: #f2ede9;
  --plat-2: #c2b7c3;
  --plat-3: #8d828f;
  --line: rgba(242, 228, 236, .11);
  --line-2: rgba(242, 228, 236, .2);
  --line-3: rgba(242, 228, 236, .38);
  /* Violet: the label (#442370) and the bottle's own glow (#ae84f2) */
  --violet: #442370;
  --violet-2: #5b2e8f;
  --lumen: #ae84f2;
  --lumen-2: #d8caf5;
  --glow: rgba(174, 132, 242, .5);
  /* Daylight: warm ivory, marble and ink */
  --ivory: #f4efe7;
  --ivory-2: #ebe4d8;
  --ivory-3: #ddd3c4;
  --ivory-ink: #1d1720;
  --ivory-ink-2: #574d5b;
  --silver: #cfc9c6;

  --f-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --f-serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --f-sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22, .7, .12, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);

  --gutter: clamp(20px, 4.4vw, 76px);
  --maxw: 1400px;
  --hdr: 84px;
  --section: clamp(96px, 11vw, 190px);

  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--obsidian); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 12px); }
body {
  margin: 0; min-height: 100vh;
  background: var(--obsidian); color: var(--plat);
  font-family: var(--f-sans); font-weight: 400;
  font-size: clamp(1rem, .96rem + .1vw, 1.05rem); line-height: 1.72;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
[hidden] { display: none !important; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--lumen); color: var(--obsidian); }
:focus-visible { outline: 1px solid var(--lumen); outline-offset: 5px; }
html { scrollbar-color: var(--ink-600) var(--obsidian); scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--obsidian); }
::-webkit-scrollbar-thumb { background: var(--ink-600); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; z-index: 400; top: 12px; left: 12px; padding: 12px 16px; background: var(--plat); color: var(--obsidian); font: 500 11px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; transform: translateY(-200%); transition: transform .3s; }
.skip:focus { transform: none; }

/* Film grain over everything */
.grain {
  position: fixed; inset: -50%; z-index: 300; pointer-events: none; width: 200%; height: 200%; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); } 60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); } }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: calc(1000px + var(--gutter) * 2); }
.section { position: relative; padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .55); }
.center { text-align: center; }

/* ---------- Type ---------- */
/* Labels: small, tracked capitals in Geist, a crisp modern grotesque (the "engraved plate" of the system) */
.hud {
  display: inline-flex; align-items: center; gap: 14px;
  font: 500 11px/1.5 var(--f-sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--plat-2);
}
.hud--lumen { color: var(--lumen-2); }
.hud b { font-weight: 500; color: var(--plat); }
.hud .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lumen); box-shadow: 0 0 10px var(--lumen); animation: blink 2.4s var(--ease-io) infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.kicker { margin-bottom: 26px; }
.kicker::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55; }
.center .kicker::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55; }

/* Display: Cinzel — Roman inscriptional capitals, echoing LIVYATT on the bottle */
.d1, .d2, .d3 { font-family: var(--f-display); font-weight: 400; letter-spacing: .035em; color: var(--plat); }
.d1 { font-size: clamp(2.5rem, 1.3rem + 4.1vw, 5.3rem); line-height: 1.04; text-wrap: balance; }
.d2 { font-size: clamp(1.95rem, 1.2rem + 2.5vw, 3.75rem); line-height: 1.1; text-wrap: balance; }
.d3 { font-size: clamp(1.3rem, 1.12rem + .65vw, 1.8rem); line-height: 1.22; }
.d1 em, .d2 em, .d3 em, .lit em {
  font-family: var(--f-serif); font-style: italic; font-weight: 500; letter-spacing: 0; font-size: 1.12em;
  color: var(--lumen-2);
}
.lead { font: 500 clamp(1.3rem, 1.1rem + .7vw, 1.72rem)/1.45 var(--f-serif); color: var(--plat); }
.muted { color: var(--plat-2); }
.fine { font: 400 12.5px/1.75 var(--f-sans); letter-spacing: .01em; color: var(--plat-3); }
.fine a { color: var(--plat-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.fine a:hover { color: var(--plat); }
.serif-i { font-family: var(--f-serif); font-style: italic; }

.crest {
  display: inline-block; flex: none; width: var(--cw, 26px); aspect-ratio: 1023 / 1444; background: currentColor;
  -webkit-mask: url("../brand/crest.svg") center / contain no-repeat; mask: url("../brand/crest.svg") center / contain no-repeat;
}
.crest--glow { color: var(--lumen); filter: drop-shadow(0 0 12px var(--glow)); }

/* Ornamental rule: hairline · crest · hairline */
.orn { display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--plat-3); }
.orn::before, .orn::after { content: ""; flex: 0 1 120px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); opacity: .6; }
.orn::after { background: linear-gradient(90deg, currentColor, transparent); }
.orn .crest { --cw: 14px; color: var(--lumen); }

/* ---------- Buttons ---------- */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  min-height: 56px; padding: 0 30px;
  border: 1px solid var(--line-3); border-radius: 0;
  background: transparent; color: var(--plat);
  font: 500 11px/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; overflow: hidden;
  transition: border-color .5s var(--ease), color .5s var(--ease), background-color .5s var(--ease), box-shadow .6s var(--ease);
  will-change: transform;
}
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-20deg); transition: left 1.1s var(--ease); }
.btn:hover::after, .btn:focus-visible::after { left: 125%; }
.btn:hover, .btn:focus-visible { border-color: var(--lumen-2); box-shadow: 0 16px 50px -20px var(--glow); }
.btn--solid { background: var(--plat); color: var(--obsidian); border-color: var(--plat); }
.btn--solid:hover, .btn--solid:focus-visible { background: #fff; color: var(--obsidian); border-color: #fff; }
.btn--solid::after { background: linear-gradient(100deg, transparent, rgba(174, 132, 242, .35), transparent); }
.btn--ink { background: var(--ivory-ink); color: var(--ivory); border-color: var(--ivory-ink); }
.btn--ink:hover, .btn--ink:focus-visible { background: #000; color: var(--ivory); border-color: #000; }
.btn .arr { position: relative; width: 22px; height: 1px; background: currentColor; transition: width .45s var(--ease); }
.btn .arr::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.btn:hover .arr { width: 34px; }
.btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.center .btns { justify-content: center; }

.lnk { position: relative; display: inline-flex; align-items: center; gap: 12px; font: 500 11px/1.3 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--plat); padding-bottom: 7px; }
.lnk::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transform: scaleX(.3); opacity: .5; transition: transform .6s var(--ease), opacity .6s; }
.lnk:hover::after, a:hover .lnk::after { transform: scaleX(1); transform-origin: left; opacity: 1; }
.tlink { color: var(--lumen-2); text-decoration: underline; text-decoration-color: rgba(216, 202, 245, .35); text-underline-offset: 4px; transition: text-decoration-color .3s; }
.tlink:hover { text-decoration-color: currentColor; }

/* Fine corner marks on photographs (a gallery label, not a UI box) */
.frame-hud { position: relative; }
.frame-hud::before, .frame-hud::after { content: ""; position: absolute; z-index: 3; width: 20px; height: 20px; pointer-events: none; border: 1px solid rgba(255, 255, 255, .5); }
.frame-hud::before { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.frame-hud::after { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }
.media--arch.frame-hud::before { top: 24%; left: 16px; }

/* ---------- Header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 90; height: var(--hdr);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  padding-inline: var(--gutter); color: var(--plat);
  transition: color .6s var(--ease), background-color .6s var(--ease), border-color .6s;
  border-bottom: 1px solid transparent; view-transition-name: hdr;
}
.hdr.is-solid { background: rgba(14, 11, 16, .8); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border-bottom-color: var(--line); }
.hdr[data-tone="dark"] { color: var(--ivory-ink); }
.hdr[data-tone="dark"].is-solid { background: rgba(244, 239, 231, .78); border-bottom-color: rgba(29, 23, 32, .1); }
.hdr__side { display: flex; align-items: center; gap: 28px; }
.hdr__side--end { justify-content: flex-end; }
.hdr__menu { display: inline-flex; align-items: center; gap: 14px; padding: 8px 0; background: none; border: 0; cursor: pointer; color: inherit; font: 500 11px/1 var(--f-sans); letter-spacing: .22em; text-transform: uppercase; }
.hdr__menu i { position: relative; display: block; width: 28px; height: 9px; }
.hdr__menu i::before, .hdr__menu i::after { content: ""; position: absolute; left: 0; height: 1px; background: currentColor; transition: width .5s var(--ease); }
.hdr__menu i::before { top: 0; width: 28px; }
.hdr__menu i::after { bottom: 0; width: 16px; }
.hdr__menu:hover i::after { width: 28px; }
.hdr__meta { color: inherit; opacity: .7; letter-spacing: .2em; }
.mark-link { display: inline-flex; align-items: center; gap: 12px; color: inherit; }
.mark-link .crest { --cw: 17px; color: var(--lumen); }
.hdr[data-tone="dark"] .mark-link .crest { color: var(--violet-2); }
.mark-link span { font: 500 clamp(17px, 1rem + .35vw, 22px)/1 var(--f-display); letter-spacing: .34em; margin-right: -.34em; }
.pill { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 20px; white-space: nowrap; border: 1px solid currentColor; border-radius: 0; font: 500 10.5px/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; transition: background-color .4s, color .4s, border-color .4s; }
.pill:hover { background: var(--plat); color: var(--obsidian); border-color: var(--plat); }
.hdr[data-tone="dark"] .pill:hover { background: var(--ivory-ink); color: var(--ivory); border-color: var(--ivory-ink); }
@media (max-width: 1180px) { .hdr__meta { display: none; } }
@media (max-width: 640px) {
  :root { --hdr: 66px; }
  .hdr__menu span { display: none; }
  .mark-link .crest { display: none; }
  .pill { height: 36px; padding: 0 14px; }
}

/* Scroll progress (desktop) */
.progress { position: fixed; right: 18px; top: 50%; z-index: 80; width: 1px; height: 120px; transform: translateY(-50%); background: var(--line); }
.progress i { position: absolute; inset: 0 0 auto; height: 100%; background: var(--lumen); transform-origin: top; transform: scaleY(var(--p, 0)); box-shadow: 0 0 10px var(--lumen); }
@media (max-width: 900px) { .progress { display: none; } }

/* ---------- Custom cursor (fine pointers only) ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 350; pointer-events: none; display: none; }
.has-cursor .cursor { display: block; opacity: 0; transition: opacity .4s; }
.has-cursor.cursor-on .cursor { opacity: 1; }
.cursor__dot, .cursor__ring { position: fixed; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor__dot { width: 5px; height: 5px; background: var(--plat); mix-blend-mode: difference; transition: opacity .25s; }
.cursor__ring { width: 36px; height: 36px; border: 1px solid rgba(242, 237, 233, .45); display: grid; place-items: center; transition: width .45s var(--ease), height .45s var(--ease), background-color .45s, border-color .45s; }
.cursor__ring span { font: 500 9px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--obsidian); opacity: 0; transition: opacity .3s; }
.cursor.is-link .cursor__ring { width: 62px; height: 62px; border-color: var(--lumen-2); background: rgba(174, 132, 242, .12); }
.cursor.is-label .cursor__ring { width: 90px; height: 90px; background: var(--plat); border-color: var(--plat); }
.cursor.is-label .cursor__ring span { opacity: 1; }
.cursor.is-label .cursor__dot { opacity: 0; }
/* while the hour is being dragged, the cursor steps aside to a small ring so the clock stays in view */
html.is-scrubbing .cursor.is-label .cursor__ring { width: 18px; height: 18px; background: transparent; border-color: rgba(242, 237, 233, .7); }
html.is-scrubbing .cursor.is-label .cursor__ring span { opacity: 0; }
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }
.has-cursor input, .has-cursor textarea, .has-cursor select { cursor: auto; }

/* ---------- Menu ---------- */
.menu {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; color: var(--plat);
  background: radial-gradient(90% 70% at 80% 10%, rgba(68, 35, 112, .45), transparent 60%), var(--obsidian);
  overflow-y: auto; overscroll-behavior: contain;
}
.menu::backdrop { background: transparent; }
.menu[open] { animation: menuIn .9s var(--ease-io) both; }
.menu.is-closing { animation: menuOut .6s var(--ease-io) both; }
@keyframes menuIn { from { clip-path: circle(0% at var(--ox, 5%) var(--oy, 5%)); } to { clip-path: circle(150% at var(--ox, 5%) var(--oy, 5%)); } }
@keyframes menuOut { from { clip-path: circle(150% at var(--ox, 5%) var(--oy, 5%)); } to { clip-path: circle(0% at var(--ox, 5%) var(--oy, 5%)); } }
.menu__in { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: 0 var(--gutter) 28px; }
.menu__top { height: var(--hdr); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.menu__close { justify-self: start; display: inline-flex; align-items: center; gap: 14px; padding: 8px 0; background: none; border: 0; cursor: pointer; font: 500 11px/1 var(--f-sans); letter-spacing: .22em; text-transform: uppercase; }
.menu__close i { position: relative; width: 22px; height: 22px; }
.menu__close i::before, .menu__close i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transform: rotate(45deg); }
.menu__close i::after { transform: rotate(-45deg); }
.menu__body { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; max-width: var(--maxw); width: 100%; margin-inline: auto; padding-block: clamp(20px, 4vh, 60px); }   /* v4.43: words only, no photo beside the list */
.menu__list { display: grid; }
.menu__list a {
  position: relative; display: grid; grid-template-columns: 64px 1fr; align-items: baseline; padding: clamp(5px, .9vh, 12px) 0;
  font: 400 clamp(1.7rem, min(1rem + 2.5vw, 5.6vh), 3.4rem)/1.1 var(--f-display); letter-spacing: .04em; color: var(--plat);   /* v4.42: nine rooms, sized to fit the screen's height */
  transition: color .4s, transform .6s var(--ease);
}
.menu__list a small { font: italic 500 1.05rem/1 var(--f-serif); letter-spacing: .04em; color: var(--lumen-2); transform: translateY(-.35em); }
.menu__list:hover a { color: rgba(242, 237, 233, .26); }
.menu__list a:hover, .menu__list a[aria-current="page"] { color: var(--plat); transform: translateX(14px); }
.menu__list a[aria-current="page"]::after { content: ""; position: absolute; left: 38px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--lumen); box-shadow: 0 0 10px var(--lumen); transform: translateY(-50%); }
.menu[open] .menu__list li { animation: rise .9s var(--ease-out) both; animation-delay: calc(.25s + var(--i) * .045s); }
.menu__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.menu__foot a:hover { color: var(--plat); }
.menu__foot .hud { flex-wrap: wrap; row-gap: 6px; }   /* v4.43: on narrow phones the lines wrap instead of pushing the menu sideways */
.menu__foot i { font-style: normal; margin-inline: 5px; }
@media (max-width: 480px) { .menu__foot i { display: none; } .menu__foot .hud { column-gap: 22px; } }   /* no dot left hanging at a line's end */
@media (max-width: 860px) { .menu__list a { grid-template-columns: 46px 1fr; } }
@media (min-width: 861px) { .menu__list { width: fit-content; } }   /* v4.43: the list is only as wide as its longest name, so the empty right side is not a link */
@media (max-height: 780px) { .menu__list a { padding-block: clamp(3px, .6vh, 12px); } }   /* v4.42: nine rooms fit short screens too */
@media (max-width: 640px) { .menu__close span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .menu__top .mark-link .crest { display: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ---------- Media frames ---------- */
.media { position: relative; overflow: hidden; background: var(--ink-800); }
.media > picture, .media > img, .media > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.media img { object-fit: cover; object-position: var(--pos, 50% 50%); }
.media--arch { border-radius: 999px 999px 0 0; }
.media--arch::after { content: ""; position: absolute; inset: 12px 12px 0; z-index: 2; border-radius: 999px 999px 0 0; border: 1px solid rgba(255, 255, 255, .34); border-bottom: 0; pointer-events: none; }
.media--zoom img { transition: transform 1.6s var(--ease), opacity .9s var(--ease), filter .9s var(--ease); }
a:hover .media--zoom img, .media--zoom:hover img { transform: scale(1.05); }
.media .alt { opacity: 0; }
a:hover .media .alt, .media:hover .alt { opacity: 1; }
.cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; }

/* ---------- Age gate: "The Vault" ----------
   A round vault door. Three combination drums set the date of birth; the dial turns as they move.
   On entry the bolts retract, the door swings inward and light opens a way into the house. */
.gate { position: fixed; inset: 0; z-index: 250; display: none; place-items: center; overflow: hidden; --D: min(90vmin, 780px, 100svh - 112px); --k: 1; --hole: 0px; --spin: 0deg; --cy: 50%; }
.age-pending .gate, .gate.is-leaving { display: grid; }
.age-pending body { overflow: hidden; }
.gate__wall { position: absolute; inset: 0; background: radial-gradient(calc(var(--D) * .75) calc(var(--D) * .75) at 50% 50%, rgba(68, 35, 112, .5), transparent 72%), radial-gradient(120% 90% at 50% 120%, rgba(60, 30, 90, .45), transparent 60%), var(--obsidian); }
.gate.is-open .gate__wall { -webkit-mask-image: radial-gradient(circle at 50% var(--cy), transparent var(--hole), #000 calc(var(--hole) + 2px)); mask-image: radial-gradient(circle at 50% var(--cy), transparent var(--hole), #000 calc(var(--hole) + 2px)); }
.gate__wall canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.gate__axis { position: absolute; inset: 0; pointer-events: none; }
.gate__axis::before, .gate__axis::after { content: ""; position: absolute; background: linear-gradient(90deg, transparent, rgba(242, 228, 236, .2) 30%, rgba(242, 228, 236, .2) 70%, transparent); }
.gate__axis::before { left: 0; right: 0; top: 50%; height: 1px; }
.gate__axis::after { top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, rgba(242, 228, 236, .16) 30%, rgba(242, 228, 236, .16) 70%, transparent); }
.gate__void { position: absolute; left: 50%; top: var(--cy); width: var(--D); height: var(--D); margin: calc(var(--D) / -2) 0 0 calc(var(--D) / -2); border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(circle, rgba(252, 248, 255, .95) 0%, rgba(215, 196, 250, .75) 26%, rgba(150, 100, 230, .35) 55%, rgba(68, 35, 112, 0) 72%); mix-blend-mode: screen; }
.vault { position: absolute; z-index: 2; left: 50%; top: var(--cy); width: var(--D); height: var(--D); margin: calc(var(--D) / -2) 0 0 calc(var(--D) / -2); perspective: 2200px; animation: vaultIn 1.6s var(--ease-out) .2s both; }
@keyframes vaultIn { from { opacity: 0; transform: scale(.94); filter: blur(12px); } }
.vault__door { position: absolute; inset: 0; border-radius: 50%; transform-origin: 0% 50%; transform: rotateY(var(--swing, 0deg)); box-shadow: 0 0 0 1px rgba(242, 228, 236, .1), 0 50px 160px -30px #000, 0 0 120px -30px rgba(174, 132, 242, .45); }
.vault__dial { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vault__ticks { transform-origin: 500px 500px; transform: rotate(var(--spin)); transition: transform .9s var(--ease-out); stroke: rgba(242, 228, 236, .42); }
.vault__ticks .mj { stroke: var(--plat); }
.vault__nums text { font: 400 21px/1 var(--f-display); letter-spacing: .06em; fill: var(--plat-2); text-anchor: middle; }
.vault__script { transform-origin: 500px 500px; animation: spin 90s linear infinite; }
.vault__script text { font: 500 14.5px/1 var(--f-sans); letter-spacing: .22em; fill: rgba(194, 183, 195, .55); }
.vault__bolt { transform-box: fill-box; transition: transform .7s var(--ease-io); }
.vault__mark { fill: var(--lumen); filter: drop-shadow(0 0 6px var(--lumen)); }
.vault__core { position: absolute; left: 50%; top: 50%; width: min(420px, calc(100vw - 40px)); transform: translate(-50%, -50%) scale(var(--k)); text-align: center; transition: opacity .6s var(--ease), filter .6s var(--ease); }
.vault__crest { display: block; --cw: 24px; color: var(--lumen-2); margin: 0 auto 12px; filter: drop-shadow(0 0 10px var(--glow)); transition: filter .6s, transform .8s var(--ease-out); }
.vault__kicker { justify-content: center; }
.vault__title { margin: 12px 0 8px; font: 400 clamp(1.45rem, 1.2rem + .8vw, 1.9rem)/1.15 var(--f-display); letter-spacing: .04em; white-space: nowrap; }
.vault__title em { font-family: var(--f-serif); font-style: italic; font-weight: 500; letter-spacing: 0; font-size: 1.12em; color: var(--lumen-2); }
.vault__desc { margin: 0; color: var(--plat-2); font-size: .98rem; }
.combo { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 10px; width: min(100%, 318px); margin: 18px auto 0; }
.drum { display: grid; gap: 8px; min-width: 0; }
.drum__label { font: 500 10px/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--plat-3); }
.drum__frame { position: relative; border-radius: 4px; overflow: hidden; border: 1px solid var(--line-2); background: linear-gradient(180deg, #07060a, rgba(34, 25, 40, .92) 50%, #07060a); box-shadow: inset 0 10px 18px -8px #000, inset 0 -10px 18px -8px #000; transition: border-color .3s, box-shadow .3s; }
.drum__frame:focus-within { border-color: var(--lumen-2); box-shadow: inset 0 10px 18px -8px #000, inset 0 -10px 18px -8px #000, 0 0 0 4px rgba(174, 132, 242, .14), 0 0 34px -8px var(--glow); }
.drum__win { --ih: 40px; height: calc(var(--ih) * 3.6); overflow-y: scroll; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; cursor: ns-resize; touch-action: pan-y; outline: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%); }
.drum__win::-webkit-scrollbar { display: none; }
.drum__win.is-drag, .drum__win.is-glide { scroll-snap-type: none; }
.drum__win.is-drag { cursor: grabbing; }
.drum__list { padding: calc(var(--ih) * 1.3) 0; }
.drum__list li { height: var(--ih); display: grid; place-items: center; scroll-snap-align: center; font: 400 1.2rem/1 var(--f-display); letter-spacing: .06em; color: var(--plat-3); user-select: none; -webkit-user-select: none; backface-visibility: hidden; }
.drum__list li.on { color: var(--plat); text-shadow: 0 0 16px rgba(174, 132, 242, .7); }
.drum__list li.ph { font: 500 10.5px/1 var(--f-sans); letter-spacing: .22em; }
.drum__band { position: absolute; left: 5px; right: 5px; top: 50%; height: 40px; transform: translateY(-50%); border-radius: 2px; border-block: 1px solid rgba(216, 202, 245, .3); background: linear-gradient(90deg, transparent, rgba(174, 132, 242, .12), transparent); pointer-events: none; }
.vault__hint { margin: 12px 0 14px; font: 500 10px/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--plat-3); }
.vault__btn { width: min(100%, 318px); }
.gate.is-ready .vault__btn { box-shadow: 0 0 40px -6px var(--glow); }
.gate__err { min-height: 1.5em; margin: 12px 0 0; font: 400 12.5px/1.5 var(--f-sans); letter-spacing: .02em; color: #ff9fb0; }
.gate__note { position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(820px, calc(100% - 40px)); margin: 0; text-align: center; font-size: 12.5px; text-shadow: 0 1px 12px #000; }
.gate__hud { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); top: 26px; display: flex; justify-content: space-between; gap: 16px; }
.gate.is-shake .vault { animation: shake .5s var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.gate.is-denied .vault__ticks { stroke: rgba(255, 159, 176, .6); }
.gate.is-denied .vault__mark { fill: #ff9fb0; filter: drop-shadow(0 0 6px #ff6f8e); }
.gate.is-unlocking .vault__bolt { transform: translateY(26px); }
.gate.is-unlocking .vault__ticks { transition: transform 1.2s var(--ease-io); }
.gate.is-unlocking .vault__crest { filter: drop-shadow(0 0 22px var(--lumen)) brightness(1.4); transform: scale(1.15); }
.gate.is-unlocking .drum__band { border-color: var(--lumen-2); box-shadow: 0 0 22px -4px var(--glow); }
.gate.is-open .vault__core { opacity: 0; filter: blur(6px); }
.gate.is-leaving .gate__note, .gate.is-leaving .gate__hud { opacity: 0; transition: opacity .4s; }
@media (max-width: 600px) {
  .gate { --D: min(168vw, 700px, 100svh - 200px); --cy: calc(50% - 46px); }
  .gate__axis::before { top: calc(50% - 46px); }
  .gate__hud span:last-child { display: none; }
  .gate__hud { top: 18px; }
  .vault__core { width: min(340px, calc(100vw - 32px)); }
  .gate__note { font-size: 11.5px; bottom: 10px; }
}
@media (max-height: 700px) { .gate__hud { display: none; } .vault__hint { display: none; } .combo { margin-bottom: 14px; } .vault__crest { display: none; } }
@media (max-width: 600px) and (max-height: 760px) { .gate { --D: min(168vw, 700px, 100svh - 170px); --cy: calc(50% - 40px); } .vault__crest { display: none; } }

/* ---------- Home · Nightfall ----------
   The estate by afternoon light. The hour passes by itself, once, like a short film: golden hour,
   dusk, then darkness — and only then does the bottle wake, lighting the room from within. The
   clock runs from 16:40 to 23:50 and the scene rests there. The two photographs are never shown
   against each other, so nothing jumps. The first paint is the daylight frame. */
.seq { position: relative; background: var(--obsidian); --p: 0; }
.seq__stage { position: relative; height: 100svh; overflow: hidden; isolation: isolate; background: #050406; }
.seq__layer { position: absolute; inset: 0; }
.seq__layer picture, .seq__layer img { position: absolute; inset: 0; width: 100%; height: 100%; }
.seq__layer img { object-fit: cover; object-position: var(--pos, 66% 50%); }
.seq__day { opacity: var(--dayo, 1); }
.seq__night {
  -webkit-mask-image: radial-gradient(circle at var(--ix, 70%) var(--iy, 60%), #000 0, #000 var(--r0, 0px), transparent var(--r1, 0px));
  mask-image: radial-gradient(circle at var(--ix, 70%) var(--iy, 60%), #000 0, #000 var(--r0, 0px), transparent var(--r1, 0px));
}
.seq__warm { position: absolute; inset: 0; pointer-events: none; opacity: var(--warm, 0); mix-blend-mode: multiply; background: radial-gradient(120% 90% at 18% 20%, rgba(255, 220, 176, .7), rgba(238, 178, 130, .72) 55%, rgba(176, 114, 110, .78)); }
.seq__dusk { position: absolute; inset: 0; pointer-events: none; opacity: var(--dusk, 0); mix-blend-mode: multiply; background: radial-gradient(90% 90% at var(--ix, 70%) var(--iy, 60%), #3a2c52 0%, #1c1428 45%, #07050b 100%); }
.seq__bloom { position: absolute; left: var(--ix, 70%); top: var(--iy, 60%); width: 64vmax; height: 64vmax; transform: translate(-50%, -50%) scale(var(--bloom-s, .2)); pointer-events: none; mix-blend-mode: screen; opacity: var(--bloom, 0);
  background: radial-gradient(circle, rgba(196, 160, 255, .6) 0%, rgba(150, 90, 255, .2) 28%, transparent 62%); }
.seq__smoke { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--smoke, 0); mix-blend-mode: screen; pointer-events: none; }
.seq__veil-day { position: absolute; inset: 0; pointer-events: none; opacity: calc((1 - var(--night, 0)) * (1 - var(--warm, 0) * .6)); background: linear-gradient(90deg, rgba(244, 239, 231, .66) 0%, rgba(244, 239, 231, .36) 28%, rgba(244, 239, 231, 0) 50%), linear-gradient(0deg, rgba(244, 239, 231, .5), transparent 22%); }
.seq__veil-night { position: absolute; inset: 0; pointer-events: none; opacity: var(--night, 0); background: linear-gradient(90deg, rgba(14, 11, 16, .82) 0%, rgba(14, 11, 16, .42) 30%, rgba(14, 11, 16, 0) 56%), linear-gradient(0deg, rgba(14, 11, 16, .92), transparent 32%); }
.seq__copy { position: absolute; z-index: 5; left: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); top: 50%; transform: translateY(-46%); width: min(660px, 47vw); }
.seq__kicker { color: var(--ivory-ink); transition: color .5s; }
.seq__word { position: relative; margin: 20px 0 22px -.03em; font: 400 clamp(3.2rem, .9rem + 6.9vw, 8.4rem)/.95 var(--f-display); letter-spacing: .13em; white-space: nowrap; }
.seq__word .w-ink { color: var(--ivory-ink); opacity: calc(1 - var(--night, 0)); }
.seq__word .w-moon { position: absolute; inset: 0; color: #f4eef3; opacity: var(--night, 0); text-shadow: 0 0 34px rgba(174, 132, 242, .55), 0 0 2px rgba(255, 255, 255, .35); }
.seq__word .ch, .seq__word .cm { display: inline-block; }
/* the animated letters are drawn from data-ch, so the heading reads as one clean line of text */
.seq__word .ch::before, .seq__word .cm::before { content: attr(data-ch); }
.seq__word { font-kerning: none; }
.seq__tag { margin: 0 0 12px; font: 500 clamp(10.5px, .6rem + .28vw, 13px)/1.4 var(--f-sans); letter-spacing: .38em; text-transform: uppercase; color: var(--violet-2); transition: color .5s; }
.seq__lines { position: relative; height: 3.1em; font: italic 500 clamp(1.45rem, 1.1rem + 1.1vw, 2.25rem)/1.25 var(--f-serif); }
.seq__lines p { position: absolute; left: 0; top: 0; margin: 0; }
.seq__l1 { color: var(--ivory-ink-2); opacity: var(--l1, 1); transform: translateY(calc((1 - var(--l1, 1)) * -18px)); }
.seq__l2 { color: var(--lumen-2); opacity: var(--l2, 0); transform: translateY(calc((1 - var(--l2, 0)) * 18px)); text-shadow: 0 0 30px rgba(174, 132, 242, .5); }
.seq .btns { margin-top: 30px; }
.seq:not(.seq__night-on) .btn--solid { background: var(--ivory-ink); color: var(--ivory); border-color: var(--ivory-ink); }
.seq:not(.seq__night-on) .btn--solid:hover { background: #000; color: var(--ivory); }
/* v4.24 · "Enter the House": an engraved plate rather than a solid block — a fine double line over frosted
   glass, a violet diamond, and on hover the plate fills and the arrow draws out. It follows the film's light. */
.btn--house { min-height: 60px; padding: 0 30px 0 28px; gap: 18px; letter-spacing: .26em; color: var(--plat); border-color: rgba(242, 237, 233, .62); background: rgba(14, 11, 16, .28); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
.btn--house::before { content: ""; position: absolute; inset: 4px; border: 1px solid currentColor; opacity: .28; pointer-events: none; transition: inset .5s var(--ease), opacity .5s var(--ease); }
.btn--house .dia { flex: none; width: 6px; height: 6px; background: var(--lumen); transform: rotate(45deg); box-shadow: 0 0 10px var(--glow), 0 0 2px rgba(255, 255, 255, .6); transition: transform .6s var(--ease); }
.btn--house:hover, .btn--house:focus-visible { background: rgba(242, 237, 233, .94); color: var(--obsidian); border-color: rgba(242, 237, 233, .94); }
.btn--house:hover::before, .btn--house:focus-visible::before { inset: 5px; opacity: .45; }
.btn--house:hover .dia, .btn--house:focus-visible .dia { transform: rotate(225deg); }
.seq:not(.seq__night-on) .btn--house { color: var(--ivory-ink); border-color: rgba(29, 23, 32, .55); background: rgba(250, 247, 242, .34); }
.seq:not(.seq__night-on) .btn--house:hover, .seq:not(.seq__night-on) .btn--house:focus-visible { background: rgba(29, 23, 32, .92); color: var(--ivory); border-color: rgba(29, 23, 32, .92); }
.seq__night-on .seq__kicker { color: var(--plat-2); }
.seq__night-on .seq__tag { color: var(--lumen); }
.seq__hud { position: absolute; z-index: 6; left: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); right: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); bottom: 26px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 20px; color: var(--ivory-ink); transition: color .5s; }
.seq__night-on .seq__hud { color: var(--plat-2); }
.seq__hud .hud { color: inherit; }
.clock { display: grid; justify-items: center; gap: 9px; }
.clock__arc { width: 190px; height: 64px; overflow: visible; }
.clock__arc path { fill: none; stroke: currentColor; stroke-width: 1; opacity: .55; stroke-dasharray: 1 5; stroke-linecap: round; }
.clock__arc circle { fill: currentColor; }
.clock__time { font: 300 clamp(20px, 1.05rem + .45vw, 26px)/1 var(--f-sans); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.clock__phase { font: 500 9.5px/1 var(--f-sans); letter-spacing: .26em; text-transform: uppercase; opacity: .8; }
/* v4.28 · the clock is also a control: drag it from side to side (or use the arrow keys) to choose the hour */
.clock.is-control { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; padding: 4px 18px 2px; margin: -4px -18px -2px; }
.clock.is-dragging { cursor: grabbing; }
.clock__arc .clock__halo { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .4s; }
.clock.is-control:hover .clock__halo, .clock.is-control:focus-visible .clock__halo, .clock.is-dragging .clock__halo { opacity: .6; }
.clock.is-ready .clock__halo { animation: clockCall 1.7s var(--ease-out) .3s 2; }
@keyframes clockCall { 0% { opacity: .75; transform: scale(.55); } 100% { opacity: 0; transform: scale(2.1); } }
.clock__time { position: relative; }
.clock.is-control .clock__time::before, .clock.is-control .clock__time::after { position: absolute; top: 50%; font: 300 .78em/1 var(--f-sans); opacity: 0; transition: opacity .45s, transform .45s var(--ease); }
.clock.is-control .clock__time::before { content: "\2039"; right: calc(100% + 12px); transform: translate(5px, -55%); }
.clock.is-control .clock__time::after { content: "\203A"; left: calc(100% + 10px); transform: translate(-5px, -55%); }
.clock.is-control:hover .clock__time::before, .clock.is-control:hover .clock__time::after,
.clock.is-control:focus-visible .clock__time::before, .clock.is-control:focus-visible .clock__time::after,
.clock.is-dragging .clock__time::before, .clock.is-dragging .clock__time::after { opacity: .55; transform: translate(0, -55%); }
.clock.is-ready .clock__time::before, .clock.is-ready .clock__time::after { animation: clockHint 3.6s var(--ease) .3s backwards; }
@keyframes clockHint { 0%, 100% { opacity: 0; } 20%, 70% { opacity: .55; } }
.seq__hud .end { justify-self: end; }
.scroll-cue { display: inline-flex; align-items: center; gap: 12px; }
.scroll-cue i { position: relative; width: 1px; height: 36px; background: currentColor; opacity: .35; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: currentColor; animation: drip 2s var(--ease-io) infinite; }
@keyframes drip { to { top: 110%; } }
@media (prefers-reduced-motion: no-preference) {
  .seq__word .ch { animation: letter 1.5s var(--ease-out) both; animation-delay: calc(.3s + var(--i) * .08s); }
  .seq__kicker, .seq__tag, .seq__lines, .seq .btns, .seq__hud { animation: rise 1.4s var(--ease-out) both; }
  .seq__tag { animation-delay: .55s; } .seq__lines { animation-delay: .65s; } .seq .btns { animation-delay: .8s; } .seq__hud { animation-delay: .95s; }   /* v4.25: sooner, to keep pace with the faster sunset */
}
@keyframes letter { from { opacity: 0; transform: translateY(.25em); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@media (max-width: 1100px) { .seq__copy { width: min(560px, 60vw); } }
@media (max-width: 900px) {
  .seq__stage { background: var(--ivory); }
  .seq__layer { bottom: auto; height: 60%; }
  .seq__layer img { object-position: var(--pos-m, 34% 42%); }
  .seq__night-on .seq__stage { background: var(--obsidian); }
  .seq__stage::after { content: ""; position: absolute; inset: 60% 0 0; z-index: -1; background: var(--obsidian); opacity: var(--night, 0); }
  .seq__dusk, .seq__warm { bottom: auto; height: 60%; }
  .seq__veil-day { background: linear-gradient(180deg, rgba(244, 239, 231, .5) 0%, rgba(244, 239, 231, 0) 14%, rgba(244, 239, 231, 0) 44%, rgb(244, 239, 231) 60%, rgb(244, 239, 231) 100%); }
  .seq__veil-night { background: linear-gradient(180deg, rgba(14, 11, 16, .55) 0%, rgba(14, 11, 16, 0) 14%, rgba(14, 11, 16, 0) 42%, rgb(14, 11, 16) 60%, rgb(14, 11, 16) 100%); }
  .seq__copy { left: var(--gutter); right: var(--gutter); top: auto; bottom: 64px; transform: none; width: auto; text-align: center; }
  .seq__copy .kicker { margin-bottom: 10px; justify-content: center; }
  .seq__copy .kicker::before { display: none; }
  .seq__word { font-size: 13.6vw; letter-spacing: .12em; margin: 0 -.12em 12px 0; }
  .seq__lines { height: 2.7em; }
  .seq__lines p { left: 0; right: 0; }
  .seq .btns { justify-content: center; margin-top: 16px; }
  .seq__hud { grid-template-columns: 1fr auto; bottom: 18px; }
  .seq__hud .fig { display: none; }
  .clock { justify-items: start; }
  .clock__arc { display: none; }
  /* v4.28: on phones the time itself is the handle: swipe it sideways; the arrows say so */
  .clock.is-control { padding: 6px 22px 4px; margin: -6px -22px -4px; }
  .clock.is-control .clock__time::before, .clock.is-control .clock__time::after { opacity: .5; transform: translate(0, -55%); }
  .clock.is-control .clock__time::before { right: calc(100% + 5px); }
  .clock.is-control .clock__time::after { left: calc(100% + 6px); }
}
@media (max-width: 900px) and (max-height: 720px) {
  .seq__layer, .seq__dusk, .seq__warm { height: 52%; }
  .seq__stage::after { inset: 52% 0 0; }
  .seq__veil-day { background: linear-gradient(180deg, rgba(244, 239, 231, .5) 0%, rgba(244, 239, 231, 0) 14%, rgba(244, 239, 231, 0) 36%, rgb(244, 239, 231) 52%, rgb(244, 239, 231) 100%); }
  .seq__veil-night { background: linear-gradient(180deg, rgba(14, 11, 16, .55) 0%, rgba(14, 11, 16, 0) 14%, rgba(14, 11, 16, 0) 34%, rgb(14, 11, 16) 52%, rgb(14, 11, 16) 100%); }
  .seq__copy .kicker { display: none; }
  .seq__word { font-size: 12.4vw; margin-bottom: 8px; }
  .seq__copy { bottom: 58px; }
  .seq .btns { margin-top: 10px; }
}

/* ---------- Home · The Moment (v4.18; a film that plays by itself since v4.26) ----------
   site.js, initMoment: The Serve and The Terrace open full screen while the house's line appears; MOMENT rises
   out of the black with the salon glowing through its letters; then the camera dives through the O into midnight. Without motion — reduced-motion settings,
   search engines, no JavaScript — it is a still: the night scene, the whole line, the two photographs. */
.mom { position: relative; background: var(--obsidian); --gx: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); scroll-margin-top: calc(-1 * (var(--hdr) + 12px)); }   /* "Scroll to the House" lands on the first frame */
.mom__stage { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; isolation: isolate; }
.mom__night { position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 55% at 50% 46%, #7a4bb4, #3a1d5e 55%, #140d1a); }   /* violet light in the letters until the photograph arrives */
.mom__night img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 57% 56%; transform-origin: 57% 56%; }   /* the martini and the white glove stay in view on phones */
.mom__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(14, 11, 16, .9) 0%, rgba(14, 11, 16, .4) 30%, rgba(14, 11, 16, 0) 52%), linear-gradient(180deg, rgba(14, 11, 16, .55) 0%, rgba(14, 11, 16, 0) 32%), linear-gradient(90deg, rgba(14, 11, 16, .62), rgba(14, 11, 16, 0) 58%); }
.mom__veil { display: none; position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.mom__space { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.mom__f { position: absolute; margin: 0; }
.mom__img { position: relative; aspect-ratio: var(--ar); overflow: hidden; background: var(--ink-800); box-shadow: 0 0 0 1px rgba(216, 202, 245, .16), 0 40px 80px -30px rgba(0, 0, 0, .95); }
.mom__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mom__f figcaption { display: flex; margin-top: 12px; color: var(--plat-2); }
.mom__copy { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.mom__copy a { pointer-events: auto; }
.mom__kicker { position: absolute; top: calc(var(--hdr) + 30px); left: var(--gx); margin: 0; }
.mom__h { margin: 0; font: 500 clamp(2rem, .9rem + 2.7vw, 3.9rem)/1.14 var(--f-serif); letter-spacing: -.005em; color: var(--plat); }
.mom__post em { font-style: italic; color: var(--lumen-2); }
/* v4.31 · the house's words rest on the last photograph like a closing title card: the premise top left, the
   answer bottom left, joined by a violet rule in the margin with a diamond at its heart; MOMENT returns large in
   the film's Roman capitals. In the film they come into focus one after another; the still shows them at rest. */
.mom__fin { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.mom__rule { position: absolute; left: var(--gx); top: calc(var(--hdr) + 80px); bottom: 100px; width: 1px; background: linear-gradient(180deg, rgba(216, 202, 245, 0), rgba(216, 202, 245, .5) 14%, rgba(216, 202, 245, .5) 86%, rgba(216, 202, 245, 0)); transform-origin: top; }
.mom__rule b { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: var(--lumen); box-shadow: 0 0 14px var(--glow), 0 0 3px rgba(255, 255, 255, .6); transform: translate(-50%, -50%) rotate(45deg); }
.mom__fin-a, .mom__fin-b { position: absolute; left: calc(var(--gx) + clamp(24px, 2.4vw, 38px)); margin: 0; color: var(--plat); text-shadow: 0 2px 30px rgba(14, 11, 16, .7); }
.mom__fin-a { top: calc(var(--hdr) + 74px); }
.mom__fin-b { bottom: 96px; }
.mom__fin .ln { display: block; font: 400 clamp(1.45rem, .95rem + 1.2vw, 2.2rem)/1.22 var(--f-serif); letter-spacing: -.003em; }
.mom__fin-a .ln { color: rgba(242, 237, 233, .9); }
.mom__fin em { font-style: italic; color: var(--lumen-2); }
.mom__fin-w { display: block; margin: .14em 0 .12em -.05em; font: 400 clamp(2.7rem, 1.1rem + 4.6vw, 5.8rem)/1 var(--f-display); letter-spacing: .14em; white-space: nowrap; color: #f4eef3;
  text-shadow: 0 0 36px rgba(174, 132, 242, .6), 0 0 2px rgba(255, 255, 255, .35); }
.mom__fin-w i { display: inline-block; font-style: normal; }
/* in the film (site.js, on the film's own clock): each line comes into focus, the rule draws down, MOMENT
   arrives letter by letter. Until then they wait unseen. */
.mom.is-live .mom__fin .ln, .mom.is-live .mom__fin-w i { opacity: 0; }
.mom.is-live .mom__rule { transform: scaleY(0); }
.mom.is-live .mom__rule b { opacity: 0; }
.mom__hud { position: absolute; z-index: 5; left: var(--gx); right: var(--gx); bottom: 26px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 20px; pointer-events: none; }
.mom__clock { display: grid; justify-items: center; gap: 8px; color: var(--plat); }
.mom__clock b { font: 300 clamp(20px, 1.05rem + .45vw, 26px)/1 var(--f-sans); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.mom__clock span { font: 500 9.5px/1 var(--f-sans); letter-spacing: .26em; text-transform: uppercase; opacity: .8; }
.mom__bar { justify-self: end; position: relative; width: 120px; height: 1px; background: rgba(242, 237, 233, .2); margin-bottom: 6px; }
.mom__bar i { position: absolute; inset: 0; background: var(--lumen-2); transform-origin: left; transform: scaleX(var(--mp, 1)); }

/* The still (v4.30): the film's last frame — the salon at midnight with the house's words top left and bottom left */
.mom:not(.is-live) .mom__space { display: none; }
.mom:not(.is-live) .mom__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }   /* read by screen readers and search engines; the title card shows the words */
.mom:not(.is-live) .mom__f--a { right: calc(var(--gx) + 22vw); top: 19%; width: 19vw; }
.mom:not(.is-live) .mom__f--b { right: var(--gx); top: 37%; width: 20vw; }
@media (max-width: 900px) {
  .mom:not(.is-live) .mom__f--a { right: auto; left: var(--gx); top: 39%; width: 42vw; }
  .mom:not(.is-live) .mom__f--b { right: var(--gx); top: 47%; width: 44vw; }
  .mom:not(.is-live) .mom__f figcaption { display: none; }
}

/* The film (site.js adds .is-live): one screen; it plays by itself (v4.26) */
.mom.is-live .mom__veil { display: block; }
.mom.is-live:not(.is-drawn) .mom__night { visibility: hidden; }
.mom.is-live .mom__night img { will-change: transform, filter; }
.mom.is-live .mom__shade { opacity: 0; background: linear-gradient(90deg, rgba(14, 11, 16, .7) 0%, rgba(14, 11, 16, .38) 26%, rgba(14, 11, 16, 0) 50%), linear-gradient(180deg, rgba(14, 11, 16, .5) 0%, rgba(14, 11, 16, 0) 30%), linear-gradient(0deg, rgba(14, 11, 16, .8) 0%, rgba(14, 11, 16, .25) 24%, rgba(14, 11, 16, 0) 42%); }   /* the words and the clock stay legible at the end */
/* the two photographs open full screen: The Serve like a curtain lifting, The Terrace like doors parting */
.mom.is-live .mom__f { left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; clip-path: inset(50% 0 50% 0); will-change: clip-path; }
.mom.is-live .mom__f--b { clip-path: inset(0 50% 0 50%); }
.mom.is-live .mom__img { position: absolute; inset: 0; aspect-ratio: auto; box-shadow: none; }
.mom.is-live .mom__img img { will-change: transform; }
.mom.is-live .mom__img::after { content: ""; position: absolute; inset: 0; background: radial-gradient(78% 68% at 50% 50%, rgba(14, 11, 16, .62), rgba(14, 11, 16, .3) 72%, rgba(14, 11, 16, .5)); }   /* the line stays legible over them */
.mom.is-live .mom__f--b img { object-position: 45% 58%; }
.mom.is-live .mom__f figcaption { position: absolute; z-index: 1; left: var(--gx); bottom: 92px; margin: 0; opacity: 0; color: var(--plat-2); }
.mom.is-live .mom__l1 { text-shadow: 0 2px 28px rgba(14, 11, 16, .7); }
.mom.is-live .mom__h { position: absolute; inset: 0; }
.mom.is-live .mom__l1 { position: absolute; left: 50%; top: 50%; width: min(88vw, 15em); transform: translate(-50%, -50%); text-align: center; font-size: clamp(2.2rem, .9rem + 3.3vw, 4.7rem); line-height: 1.1; text-wrap: balance; }
.mom.is-live .mom__l1 .w { opacity: .1; }
.mom.is-live .mom__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.mom.is-live .mom__pre, .mom.is-live .mom__post { position: absolute; left: 50%; white-space: nowrap; font-size: clamp(1.3rem, .95rem + 1.1vw, 2.3rem); line-height: 1.1; opacity: 0; }
.mom.is-live .mom__pre { top: calc(50% - var(--wh, 160px) * .5 - 1.75em); transform: translateX(-50%); }
.mom.is-live .mom__post { top: calc(50% + var(--wh, 160px) * .5 + .7em); transform: translateX(-50%); }
.mom.is-live .mom__kicker { transition: opacity .6s; }
@media (max-width: 900px) {
  .mom.is-live .mom__f figcaption { bottom: 104px; }
  .mom.is-live .mom__l1 { width: min(90vw, 11em); }
  .mom__fin-b { bottom: 104px; }
  .mom__rule { bottom: 108px; }
  .mom.is-live .mom__shade, .mom__shade { background: linear-gradient(180deg, rgba(14, 11, 16, .72) 0%, rgba(14, 11, 16, .3) 30%, rgba(14, 11, 16, 0) 46%), linear-gradient(0deg, rgba(14, 11, 16, .86) 0%, rgba(14, 11, 16, .35) 30%, rgba(14, 11, 16, 0) 48%); }
  .mom__bar { width: 70px; }
  .mom__fig { display: none; }
  .mom__hud { grid-template-columns: 1fr auto 1fr; }
}

/* ---------- Scroll-lit statement ---------- */
.lit { font: 500 clamp(1.9rem, 1rem + 3.1vw, 4.1rem)/1.16 var(--f-serif); letter-spacing: -.005em; color: var(--plat); max-width: 22ch; text-wrap: balance; }
.lit .w { opacity: .16; transition: opacity .35s linear; }
.lit .w.on { opacity: 1; }
.manifesto__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: end; margin-top: 70px; max-width: 980px; }
.manifesto__foot p { color: var(--plat-2); max-width: 52ch; }
@media (max-width: 700px) { .manifesto__foot { grid-template-columns: 1fr; } }

/* ---------- The Mark: particle crest ---------- */
.markx { position: relative; height: 100svh; min-height: 680px; overflow: hidden; }
.markx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.markx__glow { position: absolute; left: 50%; top: 50%; width: 70vmin; height: 70vmin; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(68, 35, 112, .6), transparent 65%); filter: blur(10px); pointer-events: none; }
.markx__hud { position: absolute; inset: calc(var(--hdr) + 10px) var(--gutter) 34px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; pointer-events: none; }
.markx__hud > :nth-child(2) { justify-self: end; text-align: right; display: grid; gap: 8px; }
.markx__title { grid-column: 1 / -1; align-self: end; justify-self: center; text-align: center; }
.markx__title .d2 { max-width: 14ch; margin-inline: auto; }
.markx__hint { grid-column: 1 / -1; justify-self: center; margin-top: 22px; }
@media (max-width: 700px) { .markx { height: 90svh; min-height: 600px; } .markx__hud { grid-template-columns: 1fr; } .markx__hud > :nth-child(2) { display: none; } }
@media (hover: none) { .hint-hover { display: none !important; } }
.hint-touch { display: none; }
@media (hover: none) { .hint-touch { display: inline; } }

/* ---------- Spirit portal (the bottle in its ring) ---------- */
.portal { position: relative; aspect-ratio: 1; width: min(100%, 680px); justify-self: center; perspective: 1200px; }
.portal__ring { position: absolute; inset: 6%; border-radius: 50%; background: conic-gradient(from var(--a, 0deg), transparent 0deg, rgba(174, 132, 242, .9) 40deg, transparent 90deg, transparent 180deg, rgba(216, 202, 245, .6) 220deg, transparent 280deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px)); animation: spin 14s linear infinite; }
.portal__ring--2 { inset: 13%; animation-duration: 22s; animation-direction: reverse; opacity: .6; }
.portal__ticks { position: absolute; inset: 2%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(242, 228, 236, .35) 0 .4deg, transparent .4deg 6deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px)); mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px)); opacity: .5; }
@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spin { to { --a: 360deg; transform: rotate(360deg); } }
.portal__halo { position: absolute; left: 50%; top: 50%; width: 62%; height: 62%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(150, 90, 255, .42), transparent 70%); filter: blur(20px); }
.portal__bottle { position: absolute; left: 50%; top: 50%; height: 88%; aspect-ratio: var(--bar, .38); transform: translate(-50%, -50%) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transform-style: preserve-3d; transition: transform .8s var(--ease-out); }
.portal__bottle img { width: 100%; height: 100%; object-fit: contain; -webkit-mask-image: radial-gradient(ellipse 58% 52% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 58% 52% at 50% 50%, #000 62%, transparent 100%); }
.portal__float { animation: float 7s var(--ease-io) infinite; position: absolute; inset: 0; }
@keyframes float { 0%, 100% { transform: translateY(-1.2%); } 50% { transform: translateY(1.2%); } }
.spec { position: absolute; z-index: 3; display: grid; gap: 6px; }
.spec strong { font: 400 clamp(1.1rem, .95rem + .55vw, 1.55rem)/1.15 var(--f-display); letter-spacing: .05em; color: var(--plat); font-weight: 400; }
.spec--1 { left: 0; top: 16%; } .spec--2 { right: 0; top: 24%; text-align: right; }
.spec--3 { left: 2%; bottom: 20%; } .spec--4 { right: 2%; bottom: 13%; text-align: right; }
.spec::before { content: ""; position: absolute; top: 9px; width: clamp(40px, 7vw, 110px); height: 1px; background: linear-gradient(90deg, var(--line-3), transparent); }
.spec--1::before, .spec--3::before { left: calc(100% + 14px); }
.spec--2::before, .spec--4::before { right: calc(100% + 14px); transform: scaleX(-1); }
.spec .hud::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lumen); box-shadow: 0 0 10px var(--lumen); }
@media (max-width: 900px) { .portal { width: min(100%, 520px); } .spec::before { display: none; } .spec strong { font-size: 1.05rem; } }

/* ---------- v4.35: the Vodka page opens on the bottle in its ring ---------- */
.vhero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--hdr) + clamp(28px, 4vw, 56px)) 0 clamp(56px, 7vw, 100px); }
/* the words sit centred beside the ring: title above, then the description */
.vhero__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". portal" "head portal" "text portal" ". portal"; column-gap: clamp(30px, 6vw, 110px); }
.vhero__head { grid-area: head; }
.vhero__head .d2 { margin-bottom: 24px; }
.vhero__text { grid-area: text; }
.vhero__text .lead { margin-bottom: 18px; max-width: 30ch; }
.vhero__text p:not(.lead) { color: var(--plat-2); max-width: 46ch; }
.vhero .portal { grid-area: portal; align-self: center; }
/* the bottle's dark backdrop fades out before the sides of its picture, so no straight edges show beside it */
.vhero .portal__bottle img { -webkit-mask-image: radial-gradient(ellipse 58% 52% at 50% 50%, #000 62%, transparent 100%), linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 58% 52% at 50% 50%, #000 62%, transparent 100%), linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); mask-composite: intersect; }
.vhero .spec--1 { --i: 0; } .vhero .spec--2 { --i: 1; } .vhero .spec--3 { --i: 2; } .vhero .spec--4 { --i: 3; }
.vhero .spec--1::before, .vhero .spec--3::before { transform-origin: left center; }
.vhero .spec--2::before, .vhero .spec--4::before { background: linear-gradient(270deg, var(--line-3), transparent); transform: none; transform-origin: right center; }
@media (min-width: 901px) {
  /* the whole ring shows on the first screen, under the header */
  .vhero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-bottom: 40px; }
  .vhero .portal { width: min(100%, 680px, calc(100vh - var(--hdr) - 80px)); width: min(100%, 680px, calc(100svh - var(--hdr) - 80px)); }
}
@media (max-width: 900px) {
  /* phones: the title, then the bottle, then the words */
  .vhero__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "portal" "text"; }
  .vhero .portal { margin: 4px auto 34px; }
}
/* the entrance: the ring settles, the bottle lights up, then the four notes arrive one by one */
@media (prefers-reduced-motion: no-preference) {
  .js .vhero .portal__ticks { opacity: 0; transform: rotate(-10deg); transition: opacity 1.6s var(--ease-out), transform 2.4s var(--ease-out); }
  .js .vhero .portal__halo { opacity: 0; transition: opacity 1.8s var(--ease-out) .3s; }
  .js .vhero .portal__bottle img { filter: brightness(.55) saturate(.7); transition: filter 1.8s var(--ease-out) .25s; }
  .js .vhero .spec { opacity: 0; transform: translateY(10px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(.75s + var(--i) * .16s); }
  .js .vhero .spec::before { transition: transform 1.2s var(--ease-out); transition-delay: calc(1s + var(--i) * .16s); }
  .js .vhero .portal:not(.in) .spec::before { transform: scaleX(0); }
  .js .vhero .portal.in .portal__ticks { opacity: .5; transform: none; }
  .js .vhero .portal.in .portal__halo { opacity: 1; }
  .js .vhero .portal.in .portal__bottle img { filter: none; }
  .js .vhero .portal.in .spec { opacity: 1; transform: none; }
}

/* ---------- Founders ---------- */
.fdr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3.4vw, 60px); }
.fdr__card { position: relative; }
.fdr__card .media { aspect-ratio: 4 / 5; }
.fdr__card .media::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255, 255, 255, .22); pointer-events: none; }
.fdr__card .media img { filter: grayscale(.3) contrast(1.04); }
.fdr__card:hover .media img { filter: none; }
.fdr__name { position: relative; z-index: 2; margin: -.6em 0 0 .06em; font: 400 clamp(2.8rem, 1.8rem + 3.6vw, 6rem)/1 var(--f-display); letter-spacing: .06em; }
.fdr__role { margin: 16px 0 12px; }
.fdr__card p { color: var(--plat-2); max-width: 42ch; }
@media (max-width: 700px) { .fdr { grid-template-columns: 1fr; } }   /* v4.34: the two founders side by side at the same height */

/* ---------- Status board / fact sheet ---------- */
.board { position: relative; overflow: hidden; border: 1px solid var(--line-2); background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .008)), var(--ink-900); padding: clamp(28px, 4vw, 64px); }
.board::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--line); pointer-events: none; }
.board__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
.board__rows { position: relative; display: grid; border-top: 1px solid var(--line); }
.board__row { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: baseline; padding: 19px 0; border-bottom: 1px solid var(--line); }
.board__row dd { margin: 0; font: 500 clamp(1.2rem, 1rem + .55vw, 1.55rem)/1.3 var(--f-serif); }
.board__row dt { font: 500 10.5px/1.6 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--plat-3); }
@media (max-width: 860px) { .board__grid { grid-template-columns: 1fr; } .board__row { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- Invitation (guest list) ---------- */
.invite { position: relative; overflow: hidden; isolation: isolate; }
.invite__bg { position: absolute; inset: 0; z-index: -2; }
.invite__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--obsidian), rgba(14, 11, 16, 0) 20%, rgba(14, 11, 16, 0) 84%, var(--obsidian)), radial-gradient(60% 70% at 50% 50%, rgba(14, 11, 16, .5), rgba(14, 11, 16, .95)); }
.invite__card {
  position: relative; width: min(100%, 760px); margin-inline: auto;
  padding: clamp(40px, 6vw, 84px) clamp(24px, 6vw, 88px) clamp(56px, 7vw, 96px);
  color: var(--ivory-ink); text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .7), transparent 60%), linear-gradient(180deg, #f7f2ea, #ece4d7);
  box-shadow: 0 60px 140px -50px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .5) inset;
  transform: perspective(1400px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .9s var(--ease-out);
}
.invite__card::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(68, 35, 112, .38); pointer-events: none; }
.invite__card::after { content: ""; position: absolute; inset: 20px; border: 1px solid rgba(68, 35, 112, .14); pointer-events: none; }
.invite__card .crest { --cw: 32px; color: var(--violet); margin: 0 auto 18px; display: block; }
.invite__card .hud { color: var(--violet-2); }
.invite__card .d2 { color: var(--ivory-ink); margin: 16px 0 14px; }
.invite__card .d2 em { color: var(--violet-2); }
.invite__card .lead { color: var(--ivory-ink-2); max-width: 30ch; margin-inline: auto; }
.invite form { position: relative; z-index: 2; margin: 34px auto 0; max-width: 480px; }
.field-ul { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(29, 23, 32, .35); transition: border-color .3s; }
.field-ul:focus-within { border-color: var(--violet); }
.field-ul input { flex: 1; min-width: 0; height: 58px; border: 0; outline: 0; background: transparent; font: 400 16px/1 var(--f-sans); letter-spacing: .02em; color: var(--ivory-ink); text-align: left; }
.field-ul input::placeholder { color: rgba(29, 23, 32, .45); }
.invite .btn { margin-top: 26px; }
.invite .fine { color: #6a6070; margin-top: 22px; }
.invite .fine a { color: var(--ivory-ink-2); }
/* v4.16: a real wax seal (rendered for the site), pressed across the card's bottom edge. The wax spans 83% of
   the image and its centre sits at 48.2% / 47.7%, so the wax is centred on the card with its middle 6px above the edge. */
.seal { --s: 156px; position: absolute; left: 50%; bottom: calc(6px - var(--s) * .523); z-index: 3; width: var(--s); height: var(--s); max-width: none; transform: translateX(-48.2%); pointer-events: none; user-select: none; -webkit-user-drag: none; }
@media (max-width: 600px) { .seal { --s: 120px; } }
.form-status { min-height: 1.5em; margin: 14px 0 0; font: 400 12.5px/1.5 var(--f-sans); color: var(--ivory-ink-2); }
.form-status.is-error { color: #a1263b; }
.form-success { animation: rise .9s var(--ease-out) both; }
.form-success .d3 { color: var(--violet-2); margin-bottom: 8px; }
.form-honey { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading .arr { animation: load 1s var(--ease-io) infinite; }
@keyframes load { 0%, 100% { width: 10px; } 50% { width: 34px; } }

/* ---------- Page hero (inner pages) ---------- */
.phero { position: relative; overflow: hidden; padding: calc(var(--hdr) + clamp(40px, 6vw, 100px)) 0 clamp(70px, 8vw, 130px); isolation: isolate; }
.phero::before { content: ""; position: absolute; right: -10%; top: -20%; width: 70vw; height: 70vw; z-index: -1; background: radial-gradient(circle, rgba(68, 35, 112, .42), transparent 62%); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.phero__copy .d1 { margin-bottom: 34px; }
.phero__copy .lead { margin-bottom: 20px; }
.phero__copy p:not(.lead):not(.hud) { color: var(--plat-2); max-width: 56ch; }
.phero__media .media { aspect-ratio: 4 / 5; }
.phero__media .cap { justify-content: space-between; }
/* v4.34 · an arched artwork (Our Story): the picture is cut to the arch drawn in it, so it carries no second outline */
.phero__media .media--artwork { aspect-ratio: var(--ar); }
/* v4.34: on computers the arched artwork is sized to show whole on the first screen, under the header */
@media (min-width: 901px) {
  .phero__media--art { justify-self: center; width: min(100%, calc((100vh - var(--hdr) - clamp(40px, 6vw, 100px) - 64px) * var(--ar))); }
  .phero__media--art { width: min(100%, calc((100svh - var(--hdr) - clamp(40px, 6vw, 100px) - 64px) * var(--ar))); }
}
.media--artwork::after { display: none; }
/* v4.40: the arched artwork as a lit niche. A soft violet light spills from it into the page, its foot dissolves
   into the dark (no hard bottom edge), and a fine second arch frames it, fading towards the floor. */
.phero__media--art { position: relative; isolation: isolate; container-type: inline-size; }
.phero__media--art::before { content: ""; position: absolute; z-index: -1; left: -48%; right: -48%; top: -16%; height: 82%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(140, 92, 240, .3), rgba(104, 64, 196, .1) 58%, transparent); }
.phero__media--art::after { content: ""; position: absolute; z-index: 1; left: -13px; top: -13px; width: calc(100% + 26px); height: calc(100cqw / var(--ar) + 13px);
  border: 1px solid rgba(216, 202, 245, .26); border-bottom: 0; border-radius: 999px 999px 0 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 55%, transparent 92%); mask-image: linear-gradient(#000 55%, transparent 92%); }
.phero__media--art .media--artwork { background: transparent; }
.phero__media--art .media--artwork img { -webkit-mask-image: linear-gradient(#000 74%, transparent 99%); mask-image: linear-gradient(#000 74%, transparent 99%); }
.phero__media--art .cap { position: relative; z-index: 1; margin-top: 4px; }
.phero--center { text-align: center; }
.phero--center .d1 { margin-inline: auto; max-width: 16ch; }
.phero--center .lead { max-width: 44ch; margin-inline: auto; }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; font: 500 10.5px/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--plat-3); }
.crumbs a:hover { color: var(--plat); }
.crumbs li + li::before { content: "/"; margin-right: 10px; opacity: .5; }
.phero--center .crumbs { justify-content: center; }
@media (max-width: 900px) { .phero__grid { grid-template-columns: 1fr; } .phero__media { max-width: 560px; } }

/* ---------- Notes (numbered) ---------- */
.notes { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); border-top: 1px solid var(--line); }
.notes--2 { --cols: 2; }
.note { position: relative; padding: clamp(28px, 3vw, 48px) clamp(20px, 2.4vw, 40px) clamp(34px, 3.4vw, 54px) 0; border-bottom: 1px solid var(--line); }
.note + .note { padding-left: clamp(20px, 2.4vw, 40px); border-left: 1px solid var(--line); }
.notes--2 .note:nth-child(odd) { border-left: 0; padding-left: 0; }
.notes:not(.notes--2) .note:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
.note .hud { margin-bottom: 24px; color: var(--lumen-2); }
.note .d3 { margin-bottom: 14px; }
.note p { color: var(--plat-2); margin: 0; }
.note a { color: var(--lumen-2); }
.note::after { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: linear-gradient(90deg, var(--lumen), transparent); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); }
.note:hover::after { transform: scaleX(1); }
@media (max-width: 900px) { .notes { --cols: 2; } .notes:not(.notes--2) .note:nth-child(3n + 1) { border-left: 1px solid var(--line); padding-left: clamp(20px, 2.4vw, 40px); } .notes .note:nth-child(odd) { border-left: 0; padding-left: 0; } .notes .note:nth-child(even) { border-left: 1px solid var(--line); padding-left: 24px; } }
@media (max-width: 600px) { .notes, .notes--2 { --cols: 1; } .notes .note:nth-child(n) { border-left: 0; padding-left: 0; } }

/* ---------- Engraved panel (callouts) ---------- */
.glass { position: relative; border: 1px solid var(--line-2); background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01)), var(--ink-900); padding: clamp(30px, 4.5vw, 70px); }
.glass::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--line); pointer-events: none; }
.glass > * { position: relative; z-index: 1; }
.glass .crest { position: absolute; top: clamp(24px, 3vw, 44px); right: clamp(24px, 3vw, 44px); --cw: 26px; color: var(--lumen); opacity: .8; }
.glass .d2 { margin-bottom: 24px; max-width: 18ch; }
.glass p { color: var(--plat-2); max-width: 70ch; }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.split--rev > :first-child { order: 2; }
.split .media { aspect-ratio: 4 / 5; }
.split .media--wide { aspect-ratio: 5 / 4; }
.split__copy .d2 { margin-bottom: 26px; }
.split__copy .lead { margin-bottom: 18px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split--rev > :first-child { order: 0; } }

/* ---------- Compare slider (day / night) ---------- */
.compare { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-800); --c: 50%; touch-action: pan-y; user-select: none; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare__top { clip-path: inset(0 calc(100% - var(--c)) 0 0); }
.compare__line { position: absolute; top: 0; bottom: 0; left: var(--c); width: 1px; background: var(--plat); box-shadow: 0 0 20px var(--lumen); transform: translateX(-.5px); }
.compare__knob { position: absolute; top: 50%; left: var(--c); width: 56px; height: 56px; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid var(--plat); background: rgba(14, 11, 16, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: grid; place-items: center; font: 400 12px/1 var(--f-sans); color: var(--plat); }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.compare__tags { position: absolute; left: 18px; right: 18px; top: 16px; display: flex; justify-content: space-between; pointer-events: none; }
.compare__tags .hud { padding: 8px 12px; background: rgba(14, 11, 16, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--plat); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 30px 0; cursor: pointer; list-style: none; font: 500 clamp(1.35rem, 1.1rem + .8vw, 1.95rem)/1.25 var(--f-serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 16px; height: 16px; background: linear-gradient(var(--lumen-2), var(--lumen-2)) center / 100% 1px no-repeat, linear-gradient(var(--lumen-2), var(--lumen-2)) center / 1px 100% no-repeat; transition: transform .6s var(--ease); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq summary:hover { color: var(--lumen-2); }
.faq details p { color: var(--plat-2); padding-bottom: 32px; max-width: 70ch; margin: 0; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height .6s var(--ease), content-visibility .6s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

/* ---------- Forms (contact) ---------- */
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 22px; }
.fgrid .full { grid-column: 1 / -1; }
.flabel { display: block; margin-bottom: 10px; font: 500 10.5px/1.3 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--plat-3); }
.input { width: 100%; height: 56px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 0; background: rgba(14, 11, 16, .55); font: 400 16px/1.3 var(--f-sans); color: var(--plat); transition: border-color .3s, box-shadow .3s; -webkit-appearance: none; appearance: none; }
textarea.input { height: auto; min-height: 150px; padding: 16px 18px; resize: vertical; line-height: 1.6; }
select.input { background-image: linear-gradient(45deg, transparent 50%, var(--lumen-2) 50%), linear-gradient(135deg, var(--lumen-2) 50%, transparent 50%); background-position: calc(100% - 24px) 50%, calc(100% - 18px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 48px; cursor: pointer; }
select.input option { background: var(--ink-800); }
.input:focus { outline: 0; border-color: var(--lumen-2); box-shadow: 0 0 0 4px rgba(174, 132, 242, .14); }
.input::placeholder { color: rgba(194, 183, 195, .42); }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.check input { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--lumen); }
.glass .form-status { color: var(--plat-2); }
.glass .form-success .d3 { color: var(--lumen-2); }
@media (max-width: 640px) { .fgrid { grid-template-columns: 1fr; } }
.lines { border-top: 1px solid var(--line); margin-top: 36px; }
.line-row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.line-row > span:last-child { font: 500 1.25rem/1.3 var(--f-serif); text-align: right; overflow-wrap: anywhere; }
a.line-row:hover > span:last-child { color: var(--lumen-2); }
@media (max-width: 520px) { .line-row { flex-direction: column; gap: 6px; } .line-row > span:last-child { text-align: left; } }

/* ---------- Legal ---------- */
.legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.toc { position: sticky; top: calc(var(--hdr) + 30px); display: grid; gap: 2px; }
.toc a { display: flex; gap: 12px; padding: 9px 0 9px 16px; border-left: 1px solid var(--line); font: 400 13px/1.45 var(--f-sans); color: var(--plat-3); transition: color .3s, border-color .3s; }
.toc a span { color: var(--lumen-2); font-variant-numeric: tabular-nums; }
.toc a:hover, .toc a.is-active { color: var(--plat); border-left-color: var(--lumen); }
.lsec { padding-bottom: 46px; margin-bottom: 46px; border-bottom: 1px solid var(--line); }
.lsec:last-of-type { border-bottom: 0; }
.lsec .hud { display: block; margin-bottom: 16px; color: var(--lumen-2); }
.lsec .d3 { margin-bottom: 18px; }
.lsec p { color: var(--plat-2); max-width: 72ch; }
@media (max-width: 900px) { .legal { grid-template-columns: 1fr; } .toc { display: none; } }

/* ---------- Ticker ---------- */
.ticker { overflow: hidden; border-block: 1px solid var(--line); padding-block: 22px; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ticker__track { display: flex; width: max-content; animation: tick 60s linear infinite; }
.ticker__item { display: inline-flex; align-items: center; gap: 40px; padding-right: 40px; white-space: nowrap; font: 400 clamp(1.2rem, .95rem + 1.1vw, 2rem)/1 var(--f-display); letter-spacing: .08em; color: var(--plat-2); }
.ticker__item:nth-child(even) { font-family: var(--f-serif); font-style: italic; font-weight: 500; letter-spacing: 0; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.3rem); color: var(--lumen-2); }
.ticker__item .crest { --cw: 14px; color: var(--lumen); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- Footer · the colophon ----------
   Editorial rather than a list of links: a centred colophon with the house's words and where to follow
   it (v4.27; the index, the guest-list call and the photograph are gone), an engraved plate for the legal line, the visitor's local time named like the hours of the house,
   and a turning seal back to the top. Geist is kept only for the small print and labels. */
.foot {
  position: relative; overflow: hidden; border-top: 1px solid var(--line);
  background: radial-gradient(80% 60% at 50% 110%, rgba(68, 35, 112, .42), transparent 70%), radial-gradient(46% 36% at 10% 42%, rgba(68, 35, 112, .16), transparent 72%), var(--obsidian);
}
/* v4.27 · the colophon, centred like the close of a letter: the crest, the house's words, a hairline with a
   violet diamond, and where to follow the house, engraved as a line of names rather than buttons */
.foot__main { display: grid; justify-items: center; text-align: center; padding-block: clamp(84px, 9vw, 150px) clamp(72px, 7.5vw, 120px); }
.foot__seal { display: inline-flex; color: var(--lumen); transition: transform .8s var(--ease); }
.foot__seal .crest { --cw: 30px; filter: drop-shadow(0 0 16px var(--glow)); }
.foot__seal:hover { transform: translateY(-3px); }
.foot__epi { margin: clamp(26px, 3vw, 38px) auto 0; max-width: 31ch; font: 500 clamp(1.45rem, 1.05rem + 1.25vw, 2.35rem)/1.34 var(--f-serif); color: var(--plat-2); text-wrap: balance; }
.foot__epi em { font-style: italic; color: var(--lumen-2); }
.foot__epi .w { opacity: .18; transition: opacity .7s var(--ease); }
.foot__epi .w.on { opacity: 1; }
.foot__follow { display: grid; justify-items: center; gap: 16px; margin-top: clamp(40px, 4.4vw, 60px); }
.foot__rule { display: flex; align-items: center; gap: 16px; width: min(300px, 70vw); margin: 0 0 8px; }
.foot__rule::before, .foot__rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2)); }
.foot__rule::after { background: linear-gradient(90deg, var(--line-2), transparent); }
.foot__rule i { width: 5px; height: 5px; background: var(--lumen); transform: rotate(45deg); box-shadow: 0 0 8px var(--glow); }
.foot__follow .hud { margin: 0; color: var(--plat-3); }
.foot__handle { font: italic 500 clamp(1.45rem, 1.2rem + .7vw, 1.9rem)/1.1 var(--f-serif); color: var(--plat); transition: color .3s; }
.foot__handle:hover { color: var(--lumen-2); }
.foot__soc { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 0; margin: 2px 0 0; padding: 0; list-style: none; }
.foot__soc li { display: flex; align-items: center; }
.foot__soc li + li::before { content: ""; width: 4px; height: 4px; margin: 0 18px; background: var(--violet-2); transform: rotate(45deg); }
.foot__soc a { display: inline-flex; align-items: center; gap: 9px; padding: 7px 0; font: 500 10.5px/1 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--plat-2); transition: color .35s; }
.foot__soc svg { flex: none; width: 13px; height: 13px; fill: currentColor; transition: transform .45s var(--ease); }   /* v4.29: each name with its icon */
.foot__soc span { position: relative; }
.foot__soc span::after { content: ""; position: absolute; left: 0; right: .24em; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); }
.foot__soc a:hover, .foot__soc a:focus-visible { color: var(--lumen-2); }
.foot__soc a:hover svg, .foot__soc a:focus-visible svg { transform: translateY(-1px); }
.foot__soc a:hover span::after, .foot__soc a:focus-visible span::after { transform: scaleX(1); }
@media (max-width: 480px) {
  .foot__soc { gap: 12px 22px; max-width: 300px; }   /* breaks 3 + 2 */
  .foot__soc li + li::before { display: none; }
}

/* The legal line, set like an engraved plate */
.foot__legal { display: grid; justify-items: center; gap: 22px; padding: clamp(36px, 4vw, 56px) 0; border-top: 1px solid var(--line); text-align: center; }
.foot__plate { position: relative; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; margin: 0; padding: 15px 28px; border: 1px solid var(--line-2); font: 500 10.5px/1.5 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--lumen-2); }
.foot__plate::before { content: ""; position: absolute; inset: 4px; border: 1px solid var(--line); pointer-events: none; }
.foot__plate i { display: inline-block; width: 5px; height: 5px; font-size: 0; background: var(--lumen); transform: rotate(45deg); box-shadow: 0 0 8px var(--glow); }
.foot__law { margin: 0; max-width: 96ch; font: 400 12.5px/1.85 var(--f-sans); color: var(--plat-3); text-wrap: pretty; }

/* Bottom line: copyright, fine print, local time, and the seal */
.foot__bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 18px clamp(24px, 3vw, 48px); padding: 20px 0 24px; border-top: 1px solid var(--line); font: 400 12.5px/1.6 var(--f-sans); letter-spacing: .01em; color: var(--plat-3); }
.foot__copy { margin: 0; }
.foot__copy i { display: inline-block; width: 4px; height: 4px; margin: 0 12px 2px; background: var(--violet-2); transform: rotate(45deg); }
.foot__fine { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot__fine a { color: var(--plat-2); transition: color .3s; }
.foot__fine a:hover, .foot__fine a[aria-current="page"] { color: var(--plat); }
.foot__time { margin: 0; gap: 10px; color: var(--plat-3); white-space: nowrap; }
.foot__time b { font-weight: 500; color: var(--plat); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.foot__time em { font: italic 500 14px/1 var(--f-serif); letter-spacing: .02em; text-transform: none; color: var(--lumen-2); }
.ftop { display: block; flex: none; width: 92px; height: 92px; color: var(--plat-2); transition: color .4s; }
.ftop svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ftop text { font: 500 8.4px/1 var(--f-sans); letter-spacing: .3em; fill: currentColor; }
.ftop__ring { fill: none; stroke: var(--line-2); stroke-width: 1; transition: stroke .4s; }
.ftop__ring--in { stroke: var(--line); }
.ftop__rot { transform-box: view-box; transform-origin: 50% 50%; animation: ftopTurn 28s linear infinite; }
.ftop__arr { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--ease); }
.ftop:hover, .ftop:focus-visible { color: var(--lumen-2); }
.ftop:hover .ftop__ring, .ftop:focus-visible .ftop__ring { stroke: var(--lumen); }
.ftop:hover .ftop__arr, .ftop:focus-visible .ftop__arr { transform: translateY(-5px); }
@keyframes ftopTurn { to { transform: rotate(360deg); } }

.foot__giant {
  position: relative; user-select: none; pointer-events: none; margin: 0 calc(var(--gutter) * -1) -.12em; text-align: center; white-space: nowrap;
  font: 400 clamp(4rem, 17vw, 18rem)/1 var(--f-display); letter-spacing: .1em;
  background: radial-gradient(40% 120% at var(--gx, 50%) 30%, rgba(244, 238, 250, .95), rgba(174, 132, 242, .5) 30%, rgba(68, 35, 112, .2) 60%, rgba(68, 35, 112, .06));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
@media (max-width: 1080px) {
  .foot__bottom { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy seal" "fine seal" "time seal"; row-gap: 12px; }
  .foot__copy { grid-area: copy; } .foot__fine { grid-area: fine; } .foot__time { grid-area: time; } .ftop { grid-area: seal; }
}
@media (max-width: 640px) {
  .foot__plate i:nth-of-type(2) { flex-basis: 100%; height: 0; background: none; box-shadow: none; }
  .foot__legal { justify-items: start; text-align: left; }
  .foot__plate { justify-content: flex-start; gap: 6px 12px; padding: 14px 18px; letter-spacing: .2em; }
  .foot__copy i { display: block; width: 0; height: 6px; margin: 0; background: none; }
  .ftop { width: 80px; height: 80px; }
}

/* ---------- Solo pages (thank you / 404) ---------- */
.solo { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: calc(var(--hdr) + 40px) var(--gutter) 80px; overflow: hidden; isolation: isolate; }
.solo canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .42; }
.solo .d1 { margin: 18px auto 24px; max-width: 14ch; }
.solo .lead { max-width: 44ch; margin-inline: auto; text-shadow: 0 2px 20px rgba(14, 11, 16, .9); }
@media (max-width: 700px) { .solo canvas { opacity: .3; } }

/* ==========================================================================
   AFTER DARK (v4.37) · Livyatt Major
   One night sky over the open sea, drawn live on a canvas (initSky in site.js): the stars rise
   as the eyes adjust, AFTER DARK settles on the horizon with its reflection, and the crest is
   drawn in stars. Five of them are the night's five moments, named in the key.
   Without JavaScript: the same words over a still sky with the crest.
   ========================================================================== */
.sky { position: relative; isolation: isolate; background: #030205; --hz: 72%; }
.sky__stage { position: relative; height: 100vh; height: 100svh; min-height: 360px; overflow: hidden; }
.sky__cv { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; }
/* the still sky (no JavaScript, or no canvas) */
.sky__still { position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(90% 34% at 50% var(--hz), rgba(126, 84, 210, .3), transparent 70%),
              linear-gradient(#040308, #0a0812 52%, #1b1230 var(--hz), #0d0916 var(--hz), #030205); }
.sky__still img { position: absolute; left: 50%; top: calc(var(--hdr) + 28px); height: calc(var(--hz) - var(--hdr) - 150px); width: auto; transform: translateX(-50%);
  opacity: .5; filter: brightness(2.2) saturate(.6) drop-shadow(0 0 24px rgba(174, 132, 242, .5)); }
/* the words */
.sky__top { position: absolute; z-index: 2; left: var(--gutter); top: calc(var(--hdr) + clamp(26px, 5vh, 56px)); max-width: 24ch; }
.sky__kicker { margin-bottom: 14px; }
.sky__intro { margin: 0; font: italic 500 clamp(1.15rem, .95rem + .6vw, 1.6rem)/1.35 var(--f-serif); color: var(--plat-2); text-wrap: balance; }
.sky__intro em { color: var(--lumen-2); }
.sky__h1 { position: absolute; z-index: 2; left: 0; right: 0; top: var(--hz); margin: 0; transform: translateY(calc(-100% - .12em)); text-align: center;
  font: 400 min(clamp(2.3rem, .9rem + 5.4vw, 7.2rem), 12.5vh)/1 var(--f-display); letter-spacing: .34em; padding-left: .34em; text-transform: uppercase;
  color: #f1ebff; text-shadow: 0 0 34px rgba(174, 132, 242, .5); }
/* With the canvas (the page is marked .js before it paints), the title is drawn on the sky so the sea can reflect it;
   the heading stays for screen readers. The words and the key wait for the sky. If the script never runs, all of it
   simply appears after 3 seconds over the still sky. */
.js .sky:not(.no-canvas) .sky__still { opacity: 0; }
.sky.is-live .sky__still { display: none; }
.js .sky:not(.no-canvas) .sky__h1 { color: transparent; text-shadow: none; pointer-events: none; user-select: none; forced-color-adjust: none; }
.js .sky:not(.no-canvas) .sky__top { opacity: 0; transition: opacity 1.6s var(--ease-out) .3s; }
.js .sky.is-on:not(.no-canvas) .sky__top { opacity: 1; }
@keyframes skyShow { to { opacity: 1; transform: none; } }
@keyframes skyInk { to { color: #f1ebff; text-shadow: 0 0 34px rgba(174, 132, 242, .5); } }
.js .sky:not(.is-live):not(.no-canvas) .sky__still, .js .sky:not(.is-live):not(.no-canvas) .sky__top,
.js .sky:not(.is-live):not(.no-canvas) .sky__item { animation: skyShow .8s 3s forwards; }
.js .sky:not(.is-live):not(.no-canvas) .sky__h1 { animation: skyInk .8s 3s forwards; }
.js .sky.is-late:not(.no-canvas) .sky__top, .js .sky.is-late:not(.no-canvas) .sky__item { transition: none; }   /* the script came after the fallback: no second entrance */
/* the five stars' numerals and the constellation's name, placed by the script */
.sky__nums { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sky__n, .sky__major { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .9s var(--ease-out), color .3s; will-change: transform; white-space: nowrap; }
.sky__n { padding: 6px; margin: -6px; font: 400 12px/1 var(--f-display); letter-spacing: .1em; color: var(--lumen-2); text-shadow: 0 0 12px rgba(174, 132, 242, .9); pointer-events: auto; cursor: default; }
.sky__n.is-on { opacity: .85; }
.sky__n.is-hot { color: #fff; opacity: 1; }
.sky__major { font: 400 11px/1 var(--f-display); letter-spacing: .52em; color: var(--plat-2); }
.sky__major::before { content: ""; display: inline-block; vertical-align: middle; width: 26px; height: 1px; margin-right: 14px; background: var(--line-3); }
.sky__major.is-on { opacity: .8; transition-duration: 1.6s; }
/* the key: the five stars, each a door into the site */
.sky__legend { position: relative; z-index: 3; padding: 34px var(--gutter) clamp(64px, 9vw, 110px); }
.sky__lh { margin: 0 0 18px; color: var(--plat-2); }
.sky__lh span { color: var(--plat-3); }
.sky__key { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sky__item a { display: grid; grid-template-columns: 2.8em 4.6em minmax(0, 1fr) auto; grid-template-areas: "no at name go" "no at line go"; column-gap: 12px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--plat); }
.sky__no { grid-area: no; font: 400 13px/1 var(--f-display); letter-spacing: .08em; color: var(--lumen-2); }
.sky__at { grid-area: at; color: var(--plat-3); }
.sky__name { grid-area: name; font: 400 15px/1.3 var(--f-display); letter-spacing: .12em; text-transform: uppercase; transition: color .3s; }
.sky__line { grid-area: line; margin-top: 4px; font: italic 500 1.06rem/1.35 var(--f-serif); color: var(--plat-2); }
.sky__line em { color: var(--lumen-2); }
.sky__go { grid-area: go; align-self: center; color: var(--plat-3); transition: color .3s, transform .4s var(--ease-out); }
.sky__go::after { content: "→"; margin-left: 10px; letter-spacing: 0; }
.sky__item a:hover .sky__name, .sky__item a:focus-visible .sky__name, .sky__item.is-hot .sky__name { color: #fff; }
.sky__item a:hover .sky__go, .sky__item a:focus-visible .sky__go, .sky__item.is-hot .sky__go { color: var(--lumen-2); transform: translateX(4px); }
.js .sky:not(.no-canvas) .sky__item { opacity: 0; transform: translateY(10px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.js .sky:not(.no-canvas) .sky__item.is-on { opacity: 1; transform: none; }
/* computers: the key lies along the bottom of the sea, one column per star */
@media (min-width: 1024px) and (min-height: 620px) {
  .sky__legend { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--gutter) clamp(22px, 4.2vh, 44px); }
  .sky__lh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* the name sits beside the figure; the heading stays for screen readers */
  .sky__key { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 34px); border-top: 0; }
  .sky__item a { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "no at" "name name" "line line" "go go"; row-gap: 0; padding: 16px 0 0; border-bottom: 0; border-top: 1px solid var(--line-2); }
  .sky__no { margin-right: 12px; }
  .sky__name { margin-top: 12px; font-size: 14px; }
  .sky__line { font-size: 1rem; }
  .sky__go { margin-top: 10px; align-self: start; font-size: 10px; }
}
/* phones and tablets held upright: the words move under the horizon so the sky can hold the crest */
@media (max-width: 1023px) and (orientation: portrait) {
  .sky { --hz: 63%; }
  .sky__top { top: calc(var(--hz) + clamp(70px, 9vh, 96px)); left: 0; right: 0; max-width: none; padding: 0 var(--gutter); text-align: center; }
  .sky__kicker { justify-content: center; margin-bottom: 10px; }
  .sky__intro { font-size: clamp(1.12rem, 1rem + .6vw, 1.4rem); }
}
@media (max-width: 700px) {
  .sky__h1 { letter-spacing: .26em; padding-left: .26em; }
  .sky__item a { grid-template-columns: 2.4em minmax(0, 1fr) auto; grid-template-areas: "no name go" "no line go" "no at go"; }
  .sky__at { margin-top: 6px; }
  .sky__go { font-size: 0; }
  .sky__go::after { font-size: 15px; margin: 0; }
}

/* ---------- Reveal utilities ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js [data-split] .wi { display: inline-block; transform: translateY(105%); transition: transform 1.2s var(--ease-out); transition-delay: calc(var(--d, 0s) + var(--wi, 0) * .045s); }
.js [data-split] .wo { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.js [data-split].in .wi { transform: none; }
.js [data-clip] img { clip-path: inset(100% 0 0 0); transform: scale(1.18); transition: clip-path 1.6s var(--ease-io), transform 2.2s var(--ease-out), filter .9s var(--ease), opacity .9s; transition-delay: var(--d, 0s); }
.js [data-clip].in img { clip-path: inset(0 0 0 0); transform: none; }

/* ---------- Page transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .5s var(--ease-io) both; }
::view-transition-new(root) { animation: vtIn .7s var(--ease-out) both; }
@keyframes vtOut { to { opacity: 0; filter: blur(8px); } }
@keyframes vtIn { from { opacity: 0; filter: blur(10px); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .grain { animation: none; }
  .js [data-reveal], .js [data-split] .wi, .js [data-clip], .js [data-clip] img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .lit .w, .foot__epi .w { opacity: 1; }
}
/* ---------- Without JavaScript ---------- */
html:not(.js) .markx::after { content: ""; position: absolute; left: 50%; top: 44%; height: 56%; aspect-ratio: 1023 / 1444; transform: translate(-50%, -50%); background: var(--lumen); opacity: .5; -webkit-mask: url("../brand/crest.svg") center / contain no-repeat; mask: url("../brand/crest.svg") center / contain no-repeat; filter: drop-shadow(0 0 30px var(--glow)); }

/* Hold the hero entrance until the age gate opens */
.age-pending .seq__word .ch, .age-pending .seq__kicker, .age-pending .seq__tag, .age-pending .seq__lines,
.age-pending .seq .btns, .age-pending .seq__hud { animation-play-state: paused; }

@media print {
  .hdr, .gate, .menu, .grain, .cursor, .progress, canvas, .foot__giant { display: none !important; }
  body { background: #fff; color: #000; }
  .js [data-reveal], .js [data-split] .wi, .js [data-clip] { opacity: 1; transform: none; clip-path: none; }
}
.story-lines { display: grid; gap: 12px; margin: 0 0 26px; padding-left: clamp(18px, 1.8vw, 26px); border-left: 1px solid rgba(174, 132, 242, .42); }
.story-lines p { margin: 0; font: italic 500 clamp(1.25rem, .95rem + .85vw, 1.85rem)/1.3 var(--f-serif); color: var(--plat); text-wrap: balance; }
.story-lines p + p { color: var(--lumen-2); }
.story-lines span { display: block; }   /* v4.39: each sentence in two measured lines, like an epigraph */

/* ---------- Merch (v4.42): the House Collection ---------- */
/* Each photograph is one cell of a sprite: --n cells of 1122 px, each with a 16 px gutter of its own edge pixels
   either side (1154 px a cell); the box shows cell --c. 102.852% = 1154 / 1122, 1.426% = 16 / 1122. */
.mhero { padding: calc(var(--hdr) + clamp(22px, 3vw, 46px)) 0 clamp(18px, 2.2vw, 32px); }
.mhero::before { top: -30vw; right: -12vw; width: 64vw; height: 64vw; }   /* a shorter hero: the violet glow fades before its lower edge */
.mhero .d1 { max-width: none; margin-bottom: 22px; }
.mhero .lead { max-width: 50ch; margin-bottom: 28px; text-wrap: balance; }
.mhero__crest { position: absolute; z-index: -1; left: 50%; top: 54%; --cw: clamp(190px, 22vw, 360px); transform: translate(-50%, -50%); color: var(--lumen); opacity: .055; pointer-events: none; }
.mstatus { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin: 0; padding: 13px 22px; border: 1px solid var(--line-2); background: rgba(14, 11, 16, .4);
  font: 500 10.5px/1.5 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--plat-2); }
.mstatus__dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--lumen); box-shadow: 0 0 10px var(--glow); }
.mstatus i { width: 1px; height: 14px; background: var(--line-2); }
.mstatus a { color: var(--lumen-2); text-decoration: underline; text-decoration-color: rgba(216, 202, 245, .35); text-underline-offset: 4px; transition: color .3s, text-decoration-color .3s; }
.mstatus a:hover { color: var(--plat); text-decoration-color: currentColor; }
@media (max-width: 600px) {   /* phones: the status on one line or two, the link beneath it */
  .mstatus { display: grid; justify-items: center; gap: 10px; padding: 14px 18px; letter-spacing: .16em; }
  .mstatus__dot { display: none; }
  .mstatus i { width: 28px; height: 1px; }
}

.merch { isolation: isolate; }
.merch--wear { padding-top: clamp(20px, 2.2vw, 32px); padding-bottom: calc(var(--section) * .6); }
.merch--glass { padding-top: calc(var(--section) * .4); }
.merch::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.6s var(--ease);
  background: radial-gradient(70% 50% at 50% 55%, rgba(244, 239, 231, .075), transparent 72%); }
.merch[data-tone="day"]::before { opacity: 1; }   /* Daylight: the room brightens a little */
.merch__head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: clamp(30px, 3.4vw, 50px); }   /* v4.44: centred over its row */
.merch__head .kicker { margin-bottom: 20px; }
.merch__head .d2 { margin: 0; }
.merch__head .tone { margin-top: 26px; }
.merch__side { max-width: 44ch; margin: 16px 0 0; }

/* After Dark / Daylight: one switch for the whole wardrobe (a plate that slides, violet by night, ivory by day) */
.tone { position: relative; isolation: isolate; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border: 1px solid var(--line-2); }
.tone::before { content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: var(--violet); box-shadow: 0 12px 30px -14px var(--glow);
  transition: transform .7s var(--ease), background-color .7s var(--ease); }
.tone[data-tone="day"]::before { transform: translateX(100%); background: var(--ivory); box-shadow: 0 12px 30px -14px rgba(244, 239, 231, .5); }
.tone button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; height: 44px; padding: 0 22px; border: 0; background: none; cursor: pointer;
  font: 500 10.5px/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; color: var(--plat-3); transition: color .6s var(--ease); }
.tone button:hover { color: var(--plat); }
.tone button[aria-pressed="true"] { color: var(--plat); }
.tone[data-tone="day"] button[aria-pressed="true"] { color: var(--ivory-ink); }
.tone .sw { width: 9px; height: 9px; }
html:not(.js) .tone, html:not(.js) .mcard__sw { display: none; }

/* colour swatches: black and white discs; the chosen one wears a violet ring */
.sw { position: relative; display: inline-block; flex: none; width: 13px; height: 13px; border-radius: 50%; }
.sw--night, .sw[data-tone="night"]::before { background: #0c0a0d; box-shadow: inset 0 0 0 1px rgba(242, 237, 233, .45); }
.sw--day, .sw[data-tone="day"]::before { background: var(--ivory); }
button.sw { width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; }
button.sw::before { content: ""; position: absolute; left: 6px; top: 6px; width: 14px; height: 14px; border-radius: 50%; }
button.sw::after { content: ""; position: absolute; inset: 1px; border-radius: 50%; border: 1px solid var(--lumen-2); opacity: 0; transform: scale(.6); transition: opacity .4s var(--ease), transform .5s var(--ease); }
button.sw[aria-pressed="true"]::after { opacity: 1; transform: none; }
button.sw:hover::after { opacity: .5; transform: none; }
button.sw[aria-pressed="true"]:hover::after { opacity: 1; }

/* the grid: three across, two on tablets, one on phones; a short row is centred (v4.44: two pieces of wardrobe, three glasses) */
.mgrid { --cols: 1; --gap: clamp(18px, 2vw, 28px); display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(44px, 5vw, 64px) var(--gap); margin: 0; padding: 0; list-style: none; }
.mgrid > li { display: flex; flex-direction: column; min-width: 0; flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); }
@media (min-width: 560px) { .mgrid { --cols: 2; } }
@media (min-width: 900px) { .mgrid { --cols: 3; } }
@media (max-width: 559px) { .mgrid > li { max-width: 440px; } }
/* the photographs are 1122 px wide: on 3x and 3.5x phones a card stays within them, so nothing is enlarged (HD) */
@media (max-width: 559px) and (min-resolution: 2.9dppx) { .mgrid > li { max-width: 374px; } }
@media (max-width: 559px) and (min-resolution: 3.4dppx) { .mgrid > li { max-width: 320px; } }

.mcard__media { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 1122 / 1402; background: var(--ink-800); }
.mcard__media::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(242, 237, 233, .08); }
.spr { position: absolute; inset: 0; overflow: hidden; transition: opacity .9s var(--ease), transform 1.6s var(--ease-out); }
.spr img { position: absolute; top: 0; left: calc(var(--c) * -102.852% - 1.426%); width: calc(var(--n) * 102.852%); height: 100%; max-width: none; }
.spr--alt { opacity: 0; }
.mcard[data-tone="day"] .spr--alt { opacity: 1; }
.js .mcard[data-reveal]:not(.in) .spr { transform: scale(1.07); }
/* a soft light that follows the pointer across the photograph, as on glass */
.mcard__glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease);
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 25%), rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 32%, transparent 58%); }
@media (hover: hover) and (pointer: fine) {
  .mcard:hover .spr { transform: scale(1.035); }
  .mcard:hover .mcard__glare { opacity: 1; }
}
/* when a piece changes colour, a band of light passes over it */
.mcard__media::before { content: ""; position: absolute; z-index: 2; top: -10%; bottom: -10%; left: -60%; width: 42%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .2), transparent); transform: skewX(-14deg); }
.mcard.is-flip .mcard__media::before { animation: mflip 1.1s var(--ease) both; }
@keyframes mflip { 0% { left: -60%; opacity: 0; } 18% { opacity: 1; } 100% { left: 125%; opacity: 0; } }

.mcard__body { flex: 1; display: flex; flex-direction: column; padding-top: 18px; }
.mcard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; margin-bottom: 8px; }
.mcard__no { font: italic 500 1.1rem/1 var(--f-serif); letter-spacing: .04em; color: var(--lumen-2); }
.mcard__sw { display: inline-flex; align-items: center; margin-right: -6px; }
.mcard__col { order: -1; margin-right: 6px; font: 500 10px/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--plat-3); }
.mcard__name { margin: 0 0 6px; font: 400 clamp(1.06rem, .98rem + .3vw, 1.28rem)/1.3 var(--f-display); letter-spacing: .05em; color: var(--plat); }
.mcard__line { margin: 0 0 20px; font: italic 500 1.12rem/1.4 var(--f-serif); color: var(--plat-2); text-wrap: pretty; }
.mcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.mcard__oos { display: inline-flex; align-items: center; gap: 10px; font: 500 10px/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--plat-3); }
.mcard__oos::before { content: ""; width: 5px; height: 5px; border: 1px solid currentColor; transform: rotate(45deg); }
.mcard__ask { display: inline-flex; align-items: center; gap: 10px; padding: 10px 0; font: 500 10px/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--plat); white-space: nowrap; transition: color .4s; }
.mcard__ask .arr { position: relative; width: 16px; height: 1px; background: currentColor; transition: width .45s var(--ease); }
.mcard__ask .arr::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.mcard__ask:hover { color: var(--lumen-2); }
.mcard__ask:hover .arr { width: 26px; }
.invite__note { margin: 0 0 16px; font: italic 500 1.12rem/1.4 var(--f-serif); color: var(--violet-2); }