:root { --ink:#ebe8e1; --muted:#adaab8; --violet:#bba6ff; --deep:#090b17; --panel:#121426; --line:rgba(235,232,225,.14); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--deep); color:var(--ink); font-family:"Segoe UI",Arial,sans-serif; }
.grain { position:fixed; inset:0; z-index:10; opacity:.055; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }
.header { height:88px; max-width:1240px; padding:0 36px; margin:auto; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-size:12px; font-weight:600; letter-spacing:.19em; text-decoration:none; }
.brand-mark { color:var(--violet); font-size:20px; line-height:1; }
.nav { display:flex; gap:30px; }
.nav a { color:var(--muted); text-decoration:none; font-size:12px; transition:color .2s; }
.nav a:hover { color:var(--ink); }
.hero { min-height:calc(100vh - 88px); max-width:1240px; margin:auto; padding:80px 36px 100px; position:relative; display:flex; align-items:center; overflow:hidden; }
.hero-copy { max-width:700px; position:relative; z-index:1; }
.eyebrow { margin:0 0 20px; color:var(--violet); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.19em; display:flex; align-items:center; gap:10px; }
.eyebrow span { height:1px; width:28px; background:currentColor; display:inline-block; }
h1,h2,h3,blockquote { font-family:Georgia,"Times New Roman",serif; font-weight:500; }
h1 { max-width:680px; margin:0; font-size:clamp(58px,7.1vw,98px); line-height:.91; letter-spacing:-.045em; }
.lead { max-width:520px; margin:31px 0; color:var(--muted); font-size:15px; line-height:1.85; }
.button { display:inline-flex; gap:18px; align-items:center; padding:16px 20px; border:1px solid rgba(187,166,255,.55); color:var(--ink); font-size:12px; text-decoration:none; transition:background .25s, transform .25s; }
.button:hover { background:rgba(187,166,255,.15); transform:translateY(-2px); }
.button span { color:var(--violet); font-size:17px; }
.hero-figure { position:absolute; right:7%; top:50%; width:430px; height:430px; transform:translateY(-52%); }
.moon { position:absolute; width:250px; height:250px; top:72px; right:56px; border-radius:50%; background:radial-gradient(circle at 42% 40%,#fffdf2 0,#e8e2db 24%,#bbb8d4 59%,#797594 100%); box-shadow:0 0 80px 25px rgba(194,184,255,.18), 0 0 170px 70px rgba(100,91,185,.08); }
.ghost { position:absolute; z-index:1; width:104px; height:150px; top:133px; left:153px; background:linear-gradient(100deg,rgba(249,249,255,.8),rgba(202,194,246,.23)); border-radius:58px 58px 17px 16px; opacity:.82; filter:blur(.2px); box-shadow:0 0 26px rgba(211,204,255,.42); animation:float 6s ease-in-out infinite; }
.ghost:after { content:""; position:absolute; height:27px; left:0; right:0; bottom:-12px; background:radial-gradient(ellipse at 12% 0,transparent 0 36%,rgba(201,194,245,.29) 38% 52%,transparent 55%) 0 0/34px 30px repeat-x; }
.ghost i { position:absolute; top:61px; width:7px; height:9px; border-radius:50%; background:#39394f; box-shadow:0 0 6px #1b1b32; }
.ghost i:first-child { left:33px; }.ghost i:nth-child(2) { right:33px; }
.halo { position:absolute; inset:0; border:1px solid rgba(187,166,255,.16); border-radius:50%; transform:rotate(-22deg) scale(.89,1.13); }
.mist { position:absolute; height:110px; width:70%; border-radius:50%; background:rgba(106,97,162,.12); filter:blur(42px); }
.mist-one { bottom:12%; left:-16%; transform:rotate(6deg); }.mist-two { right:-14%; top:10%; opacity:.55; }
.scroll-hint { position:absolute; left:36px; bottom:36px; color:#77768a; font-size:10px; letter-spacing:.08em; }.scroll-hint span { margin-left:9px; color:var(--violet); }
.stories { padding:120px 36px; max-width:1240px; margin:auto; }
.section-head { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-bottom:45px; }.section-head h2,.about h2 { margin:0; font-size:clamp(40px,5vw,60px); line-height:1; letter-spacing:-.035em; }.section-note { margin:0; max-width:310px; color:var(--muted); font-size:12px; line-height:1.75; }
.story-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:17px; }.story-card { border:1px solid var(--line); background:rgba(255,255,255,.015); transition:transform .3s,border-color .3s; }.story-card:hover { transform:translateY(-7px); border-color:rgba(187,166,255,.45); }.card-art { height:210px; position:relative; overflow:hidden; background:#161a2d; }.featured .card-art { height:260px; }
.room-art { background:linear-gradient(145deg,#1e1b36,#0d1425 66%); }.room-art:before { content:""; position:absolute; width:46%; height:73%; bottom:0; left:31%; background:#0c101b; box-shadow:0 0 40px rgba(159,145,240,.3); }.window { position:absolute; z-index:1; width:28%; height:45%; left:40%; top:18%; background:linear-gradient(120deg,#d6cfdf,#7b7da7); border:6px solid #403957; box-shadow:0 0 34px rgba(196,187,255,.48); }.window:before,.window:after { content:""; position:absolute; background:#403957; }.window:before { width:4px; top:0; bottom:0; left:50%; }.window:after { height:4px; left:0; right:0; top:50%; }.floor { position:absolute; height:43%; left:-10%; right:-10%; bottom:-24%; transform:perspective(150px) rotateX(54deg); background:repeating-linear-gradient(90deg,rgba(173,155,210,.17) 0 1px,transparent 1px 44px),#0a0e18; }
.forest-art { background:linear-gradient(#18233a,#101525 59%,#090e18); }.orb { position:absolute; z-index:1; width:43px; height:43px; top:55px; left:53%; border-radius:50%; background:#d5c8ff; box-shadow:0 0 25px 14px rgba(191,170,255,.37); }.trees,.trees:before,.trees:after { position:absolute; bottom:-5px; width:0; height:0; border-left:58px solid transparent; border-right:58px solid transparent; border-bottom:190px solid #080d17; }.trees { left:2%; }.trees:before { content:""; left:75px; bottom:-17px; border-left-width:46px; border-right-width:46px; border-bottom-width:158px; }.trees:after { content:""; left:176px; bottom:-8px; border-left-width:54px; border-right-width:54px; border-bottom-width:178px; }
.stairs-art { background:linear-gradient(130deg,#28253e,#121728); }.stairs-art:before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(165deg,transparent 0 22px,rgba(0,0,0,.48) 23px 25px); transform:skewY(-14deg) translateY(48px); }.rail { position:absolute; z-index:1; left:24%; top:12%; height:145%; width:3px; background:#b5a7d6; transform:rotate(-34deg); box-shadow:68px 43px 0 -1px rgba(181,167,214,.7); }.shadow { position:absolute; right:19%; bottom:21%; width:30px; height:91px; opacity:.6; background:linear-gradient(#3b3957,#141526); border-radius:50% 50% 10px 10px; filter:blur(4px); }
.card-content { padding:25px 25px 27px; }.meta { margin:0 0 12px; color:var(--violet); font-size:9px; text-transform:uppercase; letter-spacing:.15em; }.card-content h3 { margin:0 0 12px; font-size:31px; line-height:.97; letter-spacing:-.025em; }.card-content>p:not(.meta) { margin:0 0 22px; color:var(--muted); font-size:12px; line-height:1.75; }.text-link { color:var(--ink); font-size:11px; text-decoration:none; }.text-link span { color:var(--violet); margin-left:7px; transition:margin .2s; }.text-link:hover span { margin-left:11px; }
.quote-band { margin:60px 0 0; padding:100px 36px; text-align:center; background:linear-gradient(100deg,#121426,#211d3c 52%,#121426); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.quote-band blockquote { margin:0; font-size:clamp(34px,4.8vw,63px); line-height:1; letter-spacing:-.035em; }.quote-band p { color:var(--muted); font-size:10px; margin:24px 0 0; letter-spacing:.08em; }
.about { max-width:1000px; margin:auto; padding:135px 36px; display:grid; grid-template-columns:170px 1fr; gap:65px; }.about-symbol { width:138px; height:138px; display:grid; place-items:center; border:1px solid rgba(187,166,255,.43); border-radius:50%; color:var(--violet); font-family:Georgia,serif; font-size:86px; line-height:1; box-shadow:0 0 42px rgba(129,111,223,.12); }.about>div:last-child { max-width:620px; }.about h2 { margin-bottom:28px; }.about p:not(.eyebrow) { color:var(--muted); font-size:14px; line-height:1.9; }.about .quiet { color:var(--violet); font-size:12px; margin-top:24px; }
.footer { max-width:1240px; margin:auto; padding:35px 36px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; color:#747383; font-size:10px; }.footer p { margin:0; }
@keyframes float { 50% { transform:translateY(-12px) translateX(4px); } }
@media (max-width:800px) { .header,.hero,.stories,.about,.footer { padding-left:22px; padding-right:22px; }.nav { display:none; }.hero { min-height:650px; align-items:flex-start; padding-top:72px; }.hero-figure { transform:scale(.72); transform-origin:bottom right; right:-68px; top:auto; bottom:5px; }.scroll-hint { left:22px; bottom:21px; }.stories { padding-top:80px; padding-bottom:80px; }.section-head { align-items:start; flex-direction:column; }.story-grid { grid-template-columns:1fr; }.featured .card-art { height:210px; }.quote-band { padding:75px 22px; }.about { grid-template-columns:1fr; gap:30px; padding-top:90px; padding-bottom:90px; }.about-symbol { width:95px; height:95px; font-size:60px; }.footer { gap:18px; flex-wrap:wrap; }.footer p:nth-child(2) { display:none; } }