@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Montserrat:wght@300;400;500;600&display=swap');


:root { --ink:#080708; --paper:#e7ded2; --wine:#651d2d; --gold:#b49868; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; background:var(--ink); color:var(--paper); font-family:"Montserrat",sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }

.site-header { position:fixed; z-index:20; inset:0 0 auto; height:92px; display:flex; align-items:center; justify-content:space-between; padding:0 5.5vw; border-bottom:1px solid rgba(255,255,255,.11); transition:.4s ease; }
.site-header.is-scrolled { height:72px; background:rgba(8,7,8,.9); backdrop-filter:blur(16px); }
.wordmark { font:500 27px/1 "Cormorant Garamond",serif; letter-spacing:.04em; text-transform:uppercase; }
.wordmark span { font-style:italic; text-transform:none; }
nav { display:flex; gap:38px; }
nav a,.header-cta { font-size:10px; letter-spacing:.24em; text-transform:uppercase; }
nav a { color:#c9c0b6; transition:.2s; }
nav a:hover { color:#fff; }
.header-cta { border:1px solid rgba(180,152,104,.5); padding:22px 42px; color:#d5c5aa; }

.hero { min-height:100svh; position:relative; display:grid; place-items:center; overflow:hidden; isolation:isolate; }
.hero-image {
    position: absolute;
    z-index: -3;
    inset: 0;

    background:
        linear-gradient(
            rgba(8,7,8,.5),
            rgba(8,7,8,.22)
        ),
        url("hero-facebook-cover.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    transform: scale(1.02);

    animation: awaken 18s ease-out forwards;
}
.veil { position:absolute; z-index:-2; inset:0; background:linear-gradient(90deg,rgba(5,4,5,.82),rgba(5,4,5,.22) 37%,rgba(5,4,5,.2) 63%,rgba(5,4,5,.78)),linear-gradient(0deg,#080708 0%,transparent 24%,rgba(0,0,0,.34) 100%); }
.hero-copy { text-align:center; width:min(820px,88vw); padding-top:68px; text-shadow:0 3px 22px #000; }
.eyebrow,.section-kicker { font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:#c6ac80; }
.eyebrow { display:flex; align-items:center; justify-content:center; gap:16px; }
.eyebrow span { width:42px; height:1px; background:#967b50; }
h1,h2,h3,blockquote { font-family:"Cormorant Garamond",serif; font-weight:400; }
h1 { margin:24px 0 18px; font-size:clamp(62px,8.3vw,124px); line-height:.77; letter-spacing:-.045em; text-shadow:0 0 25px rgba(0,0,0,.55), 0 8px 30px rgba(0,0,0,.45); }
h1 em { color:#bca485; font-weight:400; }
.hero-deck { width:min(600px,90%); margin:30px auto; color:#d5cec6; font:400 17px/1.8 "Cormorant Garamond",serif; letter-spacing:.04em; }
.enter-button { cursor:pointer; color:#eee7de; background:rgba(10,8,9,.55); border:1px solid #a58c68; min-width:210px; padding:15px 18px 15px 25px; text-transform:uppercase; letter-spacing:.22em; font-size:10px; transition:.3s; }
.enter-button span { margin-right:24px; }
.enter-button b { color:#b99a69; }
.enter-button:hover { background:#8c2c3d; border-color:#c9a878; transform:translateY(-10px); }
.scroll-mark { position:absolute; bottom:25px; display:flex; flex-direction:column; align-items:center; gap:12px; font-size:8px; letter-spacing:.28em; text-transform:uppercase; color:#aaa09a; }
.scroll-mark i { width:1px; height:28px; background:linear-gradient(#b79a6c,transparent); }
@keyframes awaken { from { transform:scale(1.08); filter:brightness(.5); } to { transform:scale(1.015); filter:brightness(1); } }

.intro { text-align:center; padding:140px 24px 100px; background:radial-gradient(circle at 50% 35%,#1c1316 0,transparent 45%); }
.intro h2,.about h2 { margin:20px 0 26px; font-size:clamp(44px,5.3vw,74px); line-height:1; }
.intro-copy { max-width:670px; margin:auto; color:#aca39e; font:18px/1.9 "Cormorant Garamond",serif; }
.ornament { margin:52px auto 0; display:flex; align-items:center; gap:15px; justify-content:center; color:#8e734e; font-size:8px; }
.ornament:before,.ornament:after { content:""; width:75px; height:1px; background:linear-gradient(90deg,transparent,#65523a); }
.ornament:after { transform:rotate(180deg); }

.world-grid { display:grid; grid-template-columns:repeat(3,1fr); min-height:590px; }
.world-card { position:relative; overflow:hidden; min-height:590px; border:1px solid #211c1c; display:flex; align-items:flex-end; padding:52px; isolation:isolate; }
.world-card:after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(0deg,#090809 6%,transparent 72%),repeating-linear-gradient(125deg,transparent 0 28px,rgba(255,255,255,.018) 29px 30px); }
.world-card.wine { background:radial-gradient(circle at 50% 38%,#5d1c2c 0,#130b0e 52%,#080708 78%); }
.world-card.moon { background:radial-gradient(circle at 50% 33%,#75808a 0,#22272c 12%,#0b0c0e 48%,#080708 75%); }
.world-card.forest { background:radial-gradient(circle at 50% 45%,#35463e 0,#101713 40%,#080a09 72%); }
.card-number { position:absolute; top:35px; right:38px; font:italic 14px "Cormorant Garamond"; color:#8b7b70; }
.card-glow { position:absolute; z-index:-1; width:110px; height:190px; top:135px; left:50%; transform:translateX(-50%); border:1px solid rgba(210,183,142,.3); border-radius:54px 54px 3px 3px; box-shadow:inset 0 0 48px rgba(222,165,99,.08),0 0 80px rgba(178,132,75,.08); }
.card-content p:first-child { font-size:9px; color:#b39a78; text-transform:uppercase; letter-spacing:.28em; }
.card-content h3 { font-size:45px; margin:10px 0 12px; }
.fine-rule { display:block; width:45px; height:1px; background:#a08258; margin-bottom:19px; }
.card-copy { max-width:310px; color:#aaa19d; font:16px/1.55 "Cormorant Garamond"; }

.manifesto { padding:130px 7vw; background:#0d0a0b; text-align:center; }
.manifesto-frame { border:1px solid #3e3130; padding:90px 30px; background:radial-gradient(circle,#1e1316,transparent 60%); }
blockquote { margin:27px auto; font-size:clamp(40px,5vw,68px); line-height:1.12; font-style:italic; color:#dfd3c4; }
.manifesto-frame>p:not(.section-kicker) { max-width:620px; margin:0 auto 36px; color:#9d9490; font:16px/1.8 "Cormorant Garamond"; }
.manifesto a { font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#c5aa7c; border-bottom:1px solid #6b5536; padding-bottom:7px; }
.manifesto a span { margin-left:10px; }

.about { padding:130px 9vw; display:grid; grid-template-columns:1.2fr .8fr; gap:10vw; align-items:center; }
.about-copy { border-left:1px solid #443735; padding-left:50px; color:#aaa19d; font:17px/1.85 "Cormorant Garamond"; }
.about-copy p+p { margin-top:24px; }
footer { border-top:1px solid #241e1d; text-align:center; padding:85px 20px 35px; background:#060506; }
.footer-mark { width:68px;height:68px;display:grid;place-items:center;margin:0 auto 25px;border:1px solid #745e42;border-radius:50%;font:italic 24px "Cormorant Garamond";color:#c4a97e; }
.footer-line { color:#887e79; font:italic 16px "Cormorant Garamond"; }
.socials { margin:38px 0 60px; display:flex; justify-content:center; flex-wrap:wrap; gap:18px; color:#a99b91; font-size:9px; letter-spacing:.2em; text-transform:uppercase; }
.socials i { color:#58483a; }
.copyright { color:#514b48; font-size:8px; letter-spacing:.13em; text-transform:uppercase; }

@media (max-width:800px) {
  .site-header { height:70px; padding:0 20px; }
  nav,.header-cta { display:none; }
  .wordmark { font-size:23px; }
  .hero-copy { padding-top:45px; }
  .eyebrow { font-size:8px; letter-spacing:.2em; }
  .hero-deck { font-size:16px; }
  .world-grid { grid-template-columns:1fr; }
  .world-card { min-height:470px; }
  .about { grid-template-columns:1fr; gap:20px; padding:95px 28px; }
  .about-copy { padding:25px 0 0; border-left:0; border-top:1px solid #443735; }
  .manifesto { padding:80px 18px; }
  .manifesto-frame { padding:65px 15px; }
}

@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }