:root{--char:#1c1d21;--char2:#26282d;--char3:#34363c;--pearl:#ecebe8;--cream:#f5eddd;--gold:#d4af6a;--gold2:#f3dca0;--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;--sans:ui-sans-serif,-apple-system,"SF Pro Display","Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html{background:var(--char);color-scheme:dark;scroll-behavior:smooth}
body{margin:0;background:var(--char);color:var(--cream);font:400 18px/1.65 var(--sans);overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold2);outline-offset:3px;border-radius:14px}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}@media(max-width:700px){.wrap{padding:0 20px}}
.serif{font-family:var(--serif)}
.gold{background:linear-gradient(120deg,var(--gold2),var(--gold) 55%,#a97f3a);-webkit-background-clip:text;background-clip:text;color:transparent}
.spot{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(520px circle at var(--mx,70%) var(--my,20%),rgba(212,175,106,.12),transparent 60%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:60;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
main,header,footer{position:relative;z-index:1}
.nav{position:sticky;top:14px;z-index:50;display:flex;justify-content:center;padding:0 12px}
.pillnav{display:flex;align-items:center;gap:6px;padding:8px 8px 8px 20px;border-radius:999px;background:rgba(28,29,33,.72);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 50px -20px #000}
.logo{display:flex;align-items:center;gap:10px;font:400 20px var(--serif);margin-right:10px}
.logo svg{width:34px;height:30px}
.pillnav a.l{padding:8px 14px;border-radius:999px;font-size:14px;color:#cfc8b8}.pillnav a.l:hover{color:var(--cream);background:rgba(255,255,255,.06)}
@media(max-width:700px){.pillnav a.l{display:none}}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;font-weight:600;background:linear-gradient(120deg,var(--gold2),var(--gold) 60%,#b88b45);color:#24200f;box-shadow:0 12px 30px -12px rgba(212,175,106,.6);transition:transform .4s var(--ease),box-shadow .4s}
.btn:hover{transform:translateY(-3px) scale(1.02)}.btn.dark{background:var(--char2);color:var(--cream);border:1px solid rgba(255,255,255,.14);box-shadow:none}
.chip{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;padding:90px 0 80px}
@media(max-width:960px){.hero{grid-template-columns:1fr;padding:50px 0}}
h1{font:400 clamp(52px,8vw,118px)/.98 var(--serif);letter-spacing:-.025em;margin:26px 0}
h1 em{font-style:italic}
.ln{display:block;overflow:hidden;padding-bottom:.08em}.ln>span{display:block;transform:translateY(110%);animation:up 1.1s var(--ease) forwards}
.ln:nth-child(2)>span{animation-delay:.14s}.ln:nth-child(3)>span{animation-delay:.28s}
@keyframes up{to{transform:none}}
.lede{color:#cfc8b8;max-width:46ch;font-size:20px;opacity:0;animation:fade 1s .6s forwards}
@keyframes fade{to{opacity:1}}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px;opacity:0;animation:fade 1s .8s forwards}
.frame{position:relative;border-radius:48px;overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:0 50px 90px -40px #000;transform:perspective(1200px) rotateY(var(--ry,-6deg)) rotateX(var(--rx,0deg)) rotate(2deg);transition:transform .25s ease-out;aspect-ratio:4/5;background:var(--char2)}
.frame img{width:100%;height:112%;object-fit:cover;display:block;transform:translateY(var(--py,0px))}
.tag{position:absolute;left:-18px;top:46px;z-index:2;display:flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;background:var(--pearl);color:var(--char);font-weight:600;font-size:14px;box-shadow:0 20px 40px -20px #000}
.tag svg{width:30px;height:26px}
.crown-draw path{stroke-dasharray:1;stroke-dashoffset:1;animation:trace 2.4s .3s var(--ease) forwards}
.crown-draw path:nth-child(2){animation-delay:.9s}.crown-draw path:nth-child(3){animation-delay:1.3s}
@keyframes trace{to{stroke-dashoffset:0}}
.marq{border-block:1px solid rgba(255,255,255,.12);overflow:hidden;padding:22px 0;white-space:nowrap}
.marq div{display:inline-block;animation:slide 38s linear infinite;font:italic 400 clamp(34px,5vw,64px)/1 var(--serif);color:var(--gold)}
.marq span{margin:0 28px;color:#fff3}
@keyframes slide{to{transform:translateX(-50%)}}
section{padding:110px 0}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold2)}
h2{font:400 clamp(36px,5.2vw,72px)/1.04 var(--serif);letter-spacing:-.02em;margin:14px 0 26px}
.cream{background:var(--cream);color:var(--char);border-radius:56px;margin:0 12px}
.cream .eyebrow{color:#8a6a2c}.cream p{color:#3b3a36}
.why{display:grid;grid-template-columns:1fr 1fr;gap:56px}@media(max-width:860px){.why{grid-template-columns:1fr}}
.ideas{display:grid;gap:18px}
.idea{display:grid;grid-template-columns:90px 1fr auto;gap:24px;align-items:center;padding:30px 34px;border-radius:36px;background:var(--char2);border:1px solid rgba(255,255,255,.1);position:sticky;top:90px;transition:border-color .4s}
.idea:nth-child(2){top:110px}.idea:nth-child(3){top:130px}.idea:nth-child(4){top:150px}
.idea:hover{border-color:var(--gold)}
.idea b{font:italic 400 56px var(--serif);color:var(--gold)}
.idea h3{font:400 clamp(26px,3vw,38px)/1.1 var(--serif);margin:0 0 6px}.idea p{margin:0;color:#cfc8b8}
@media(max-width:700px){.idea{position:static;grid-template-columns:1fr;padding:24px}.idea b{font-size:40px}}
.full{position:relative;margin:0 12px;border-radius:56px;overflow:hidden;min-height:70vh;display:flex;align-items:flex-end}
.full img{position:absolute;inset:-8% 0 0;width:100%;height:116%;object-fit:cover;transform:translateY(var(--py,0))}
.full::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(28,29,33,.9))}
.full div{position:relative;z-index:2;padding:48px;max-width:760px}
.full h2{margin:0}
.series{border:1px dashed rgba(255,255,255,.22);border-radius:36px;padding:44px}
.list{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
@media(max-width:700px){.list{grid-template-columns:1fr}}
input{font:inherit;padding:14px 22px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:var(--char2);color:var(--cream);min-width:260px}
footer{padding:50px 0;color:#9f9888;font-size:14px;border-top:1px solid rgba(255,255,255,.1);margin-top:80px}
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s,transform 1s var(--ease)}.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.ln>span{transform:none}.lede,.cta{opacity:1}.rv{opacity:1;transform:none}.crown-draw path{stroke-dashoffset:0}.frame{transform:rotate(2deg)}.spot{display:none}}
h1{font-size:clamp(46px,6.6vw,104px)}
.btn{white-space:nowrap}.pillnav .btn{padding:12px 20px}
@media(max-width:700px){.logo{font-size:17px;margin-right:4px;white-space:nowrap}.logo svg{width:28px;height:24px}.pillnav{padding-left:14px}.tag{left:8px}}
.menu{display:none;position:relative}.menu summary{list-style:none;cursor:pointer;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;font-size:18px}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;right:0;top:52px;min-width:200px;background:var(--char2);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:10px;display:grid}
.menu nav a{padding:12px 16px;border-radius:14px}.menu nav a:hover{background:rgba(255,255,255,.06)}
@media(max-width:700px){.menu{display:block}}
html{scroll-padding-top:96px}
@media(max-width:700px){.pillnav{width:100%;max-width:100%;justify-content:space-between;box-sizing:border-box}.pillnav>.btn{display:none}.menu nav{max-width:calc(100vw - 40px)}}