/* The Money Letter Club — royal black + gold.
   Performance rules: animate only transform and opacity; textures are static;
   every looping animation lives in a section that pauseOffscreen() watches (.offscreen pauses it). */
@font-face { font-family: 'Bodoni'; src: url(/fonts/bodoni.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Bodoni'; src: url(/fonts/bodoni-i.woff2) format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url(/fonts/cinzel.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url(/fonts/manrope.woff2) format('woff2'); font-weight: 300 800; font-display: swap; }
:root {
  --bg: #060504; --bg2: #0d0b08; --card: #100d09; --line: rgba(226, 191, 114, .16); --line2: rgba(226, 191, 114, .34);
  --text: #f4ecdb; --mute: #a99d87; --accent: #e2bf72; --gold-hi: #fff0c4; --gold-lo: #8f6a2c; --accent-ink: #160f03;
  --ok: #9fd8a3; --warn: #f0b36a; --ruby: #9b1b2a;
  --foil: linear-gradient(180deg, #fff3cf 0%, #f0d391 30%, #c99a48 52%, #8f6a2c 62%, #e8c77f 82%, #fff0c4 100%);
  --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); --slow: cubic-bezier(.16, 1, .3, 1);
  --f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --f-display: 'Bodoni', 'Didot', 'Bodoni 72', Georgia, serif;
  --f-cap: 'Cinzel', 'Trajan Pro', Georgia, serif; --f-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--f-body); overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--accent); color: var(--accent-ink); }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.mono { font-family: var(--f-mono); }
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url(/media/damask.webp) center/900px auto repeat, var(--bg); opacity: .2; }

.foil { background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cap { font-family: var(--f-cap); letter-spacing: .22em; text-transform: uppercase; }
.orn { display: flex; align-items: center; gap: 14px; color: var(--accent); }
.orn::before, .orn::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--line2), transparent); }
.diamond { display: inline-block; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); flex: none; }

/* nav */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(6, 5, 4, .86); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 70px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand img { width: 42px; height: 42px; border-radius: 50%; flex: none; }
.brand b { font: 600 14px/1.1 var(--f-cap); letter-spacing: .22em; color: var(--gold-hi); white-space: nowrap; }
.brand b small { display: block; margin-top: 4px; font-size: 9.5px; letter-spacing: .34em; color: var(--accent); font-weight: 500; }
@media (max-width: 420px) { .brand b { font-size: 12px; letter-spacing: .14em; } .brand b small { letter-spacing: .24em; } }
.nav-links { display: flex; gap: 26px; font: 500 12px/1 var(--f-cap); letter-spacing: .2em; text-transform: uppercase; }
.nav-links a { text-decoration: none; color: var(--mute); transition: color .2s; }
.nav-links a:hover { color: var(--gold-hi); }
@media (max-width: 960px) { .nav-links { display: none; } }
.nav-r { display: flex; align-items: center; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 99px; font: 600 12px/1 var(--f-body); color: var(--mute); white-space: nowrap; }
.chip b { color: var(--gold-hi); }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--line2); border-radius: 50%; text-decoration: none; font-weight: 700; color: var(--gold-hi); }

/* buttons: gold foil with a moving sheen */
.btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 26px; border: 0; border-radius: 2px; cursor: pointer;
  background: linear-gradient(180deg, #f7dd9c, #d7aa55 55%, #b9883a); color: var(--accent-ink); font: 700 13px/1 var(--f-cap); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 30px -12px rgba(226, 191, 114, .55); transition: transform .25s var(--ease), opacity .2s; }
.btn::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent); transform: translateX(-160%) skewX(-18deg); animation: sheen 3.8s 1.4s ease-in-out infinite; }
@keyframes sheen { 0%, 64% { transform: translateX(-160%) skewX(-18deg); } 100% { transform: translateX(380%) skewX(-18deg); } }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn.wait { opacity: .6; pointer-events: none; }
.btn.ghost { background: transparent; color: var(--gold-hi); border: 1px solid var(--line2); box-shadow: none; }
.btn.ghost::after { display: none; }
.btn.small { padding: 11px 16px; font-size: 11px; }
.btn.big { width: 100%; padding: 20px 22px; font-size: 14px; }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.offscreen, .offscreen * { animation-play-state: paused !important; }

/* reveal on scroll */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--slow), transform .9s var(--slow); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .1s; } .rv.d2 { transition-delay: .2s; } .rv.d3 { transition-delay: .3s; } .rv.d4 { transition-delay: .4s; }

.foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 44px 0 64px; border-top: 1px solid var(--line); color: var(--mute); font-size: 13px; }
.foot .brand b { font-size: 12px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .rv { opacity: 1; transform: none; } }