:root {
  --night: #120a06;
  --cream: #f3e9da;
  --brass: #c9a876;
  --muted: #b9a88f;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); }
body { margin: 0; background: var(--night); color: var(--cream); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }

.stage { --head: clamp(64px, 12svh, 118px); position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: grid; grid-template-rows: var(--head) minmax(min-content, 1fr) auto;
  background: radial-gradient(ellipse at 50% 40%, #2c180d 0%, var(--night) 66%); }

/* the range as a backdrop: the real cut-outs, screened into the dark so no edge reads as a pasted rectangle */
.backdrop { position: absolute; inset: 0; pointer-events: none; }
.bd { position: absolute; } /* keeps transform free: the tilt and the drift are their own properties */
.bd img { display: block; width: 100%; height: auto; opacity: var(--o, 1); mix-blend-mode: screen; filter: blur(1.4px) saturate(.9) brightness(1.04);
  -webkit-mask-image: radial-gradient(closest-side, #000 88%, transparent 100%); mask-image: radial-gradient(closest-side, #000 88%, transparent 100%); }

/* light running over the leather: the cut-out's own alpha is the mask, so it never squares off */
@property --s { syntax: "<number>"; inherits: true; initial-value: 0; }
.shine { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .34;
  -webkit-mask-image: var(--m); mask-image: var(--m); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 240, 215, .5) 49%, rgba(255, 255, 255, .8) 50%, rgba(255, 240, 215, .5) 51%, transparent 60%) calc(125% - var(--s) * 150%) 0 / 260% 100% no-repeat;
  animation: shine 17s cubic-bezier(.45, 0, .3, 1) infinite; animation-delay: var(--d, 0s); }
.shine svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.shine .lines { transform: translateX(calc(var(--s) * 170px - 70px)); }
@keyframes shine { 0% { --s: 0; } 45%, 100% { --s: 1; } }

.b-black { left: -20vmin; top: -11vmin; width: 58vmin; rotate: -9deg; animation: drift 60s ease-in-out infinite alternate; }
.b-snake { right: -10vmin; top: -13vmin; width: 52vmin; rotate: 9deg; animation: drift 58s ease-in-out infinite alternate-reverse; }
.b-leo { right: -6vmin; bottom: -12vmin; width: 50vmin; rotate: -7deg; animation: drift 52s ease-in-out infinite alternate; }
.b-blue { left: -8vmin; bottom: -10vmin; width: 46vmin; rotate: 8deg; animation: drift 64s ease-in-out infinite alternate-reverse; }
@keyframes drift { from { translate: 0 0; } to { translate: 2.5vmin -3.5vmin; } }

/* dark where the words go, open at the corners where the leather is */
.veil { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 66% 56% at 50% 46%, rgba(18, 10, 6, .92) 0%, rgba(18, 10, 6, .68) 54%, rgba(18, 10, 6, 0) 100%),
              linear-gradient(to top, rgba(18, 10, 6, .92) 0%, rgba(18, 10, 6, .3) 24%, rgba(18, 10, 6, 0) 52%); }

/* logo: centred first, then flown to the top by teaser.js */
.logo { position: absolute; left: 50%; top: 50%; width: min(88vw, 820px, calc(58svh * 1.316)); aspect-ratio: 1000 / 760; z-index: 3; pointer-events: none; }
.logo svg, .logo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* held back until teaser.js has set the mark's start state: the mark is unplaced and the words wait */
html.js .logo { visibility: hidden; }
html.js .copy > * { opacity: 0; }
html.js .backdrop img, html.js .backdrop .shine { opacity: 0; }
.glow { mix-blend-mode: screen; pointer-events: none; }
/* no GSAP: land the mark in the header with CSS alone, so the page still reads */
html.static .logo { left: 0; right: 0; margin-inline: auto; top: calc(var(--head) / 2); translate: 0 -50%; width: calc(var(--head) * 1.349); }

/* copy */
.copy { grid-row: 2; position: relative; z-index: 4; align-self: center; text-align: center; padding: 0 20px max(4svh, env(safe-area-inset-bottom)); }
.kicker { font: 500 .7rem/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--brass); margin: 0 0 .9rem; }
h1 { font: 500 clamp(2.8rem, min(12.5vw, 15svh), 8.5rem)/.95 var(--serif); letter-spacing: -.02em; margin: 0; }
.sub { max-width: 42ch; margin: 1.1rem auto 0; color: var(--muted); font-size: 1rem; }
.cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin: 2rem 0 0; }
.btn { display: inline-block; padding: 1rem 1.9rem; background: var(--brass); color: #2b1b10; text-decoration: none; font: 500 .76rem var(--sans); letter-spacing: .16em; text-transform: uppercase; border: 1px solid transparent; border-radius: 2px; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.975); }
.btn.ghost { background: none; border-color: rgba(201, 168, 118, .5); color: var(--cream); }
.btn.ghost:hover { background: rgba(201, 168, 118, .1); border-color: var(--brass); }

footer { grid-row: 3; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; padding: 1.1rem clamp(20px, 6vw, 96px) max(1.1rem, env(safe-area-inset-bottom)); color: #8f7f69; font-size: .8rem; letter-spacing: .06em; }
footer a { text-decoration: none; }
footer a:hover { color: var(--brass); }

@media (max-height: 620px) { .sub { display: none; } .cta { margin-top: 1.2rem; } }
@media (max-width: 600px) { .sub { font-size: .92rem; } .btn { padding: .9rem 1.4rem; } .backdrop img { filter: blur(2px) saturate(.7) brightness(.85); } }
@media (prefers-reduced-motion: reduce) { .bd, .shine { animation: none; } .btn { transition: none; } }