:root{--ink:#1d1a16;--muted:#6b6358;--paper:#faf7f1;--line:#e6dfd2;--accent:#8a3b12;--deep:#24321f}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 Georgia,'Times New Roman',serif}
a{color:var(--accent)}a:hover{text-decoration:none}
.top{display:flex;align-items:center;gap:22px;max-width:1080px;margin:0 auto;padding:18px 22px}
.top .brand{font:700 22px/1 Georgia,serif;letter-spacing:.02em;color:var(--ink);text-decoration:none}.top .brand span{color:var(--accent)}
.top nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap;font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.top nav a{color:var(--ink);text-decoration:none}.top nav a:hover{color:var(--accent)}
.hero{max-width:1080px;margin:0 auto;padding:56px 22px 40px}
.kicker{font:600 13px/1.4 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
h1{font-weight:400;font-size:clamp(34px,5.4vw,60px);line-height:1.08;margin:0 0 22px;max-width:16ch}
h2{font-weight:400;font-size:clamp(26px,3.4vw,36px);line-height:1.15;margin:0 0 16px}
h3{font-size:20px;margin:0 0 6px}
.lede{font-size:clamp(19px,2.2vw,23px);max-width:42ch;color:#3b352d}
.sec{max-width:1080px;margin:0 auto;padding:44px 22px;border-top:1px solid var(--line)}
.prose{max-width:68ch}.prose p{margin:0 0 1em}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}.card p{margin:0;color:#3b352d;font-size:16px}
.num{font:700 13px/1 system-ui,sans-serif;color:var(--accent);letter-spacing:.1em}
.note{background:#fff;border-left:4px solid var(--accent);padding:16px 20px;border-radius:0 12px 12px 0;max-width:72ch}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;font-family:system-ui,sans-serif}
.btn{display:inline-block;padding:12px 20px;border-radius:999px;border:1px solid var(--ink);color:var(--ink);text-decoration:none;font-size:15px}
.btn.solid{background:var(--ink);color:#fff}.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.trio{font:700 clamp(22px,3vw,30px)/1.3 Georgia,serif;letter-spacing:.18em;color:var(--deep);margin:10px 0 0}
footer{max-width:1080px;margin:0 auto;padding:36px 22px 60px;border-top:1px solid var(--line);color:var(--muted);font:14px/1.6 system-ui,sans-serif}
@media(max-width:600px){.top{flex-wrap:wrap}.top nav{margin-left:0;gap:14px}.hero{padding-top:28px}}

/* ---------------- motion: the artsy layer ---------------- */
body{overflow-x:hidden}
.blobs{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.blobs i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.33;animation:drift 26s ease-in-out infinite alternate}
.blobs i:nth-child(1){width:46vw;height:46vw;left:-12vw;top:8vh;background:#e2a24b}
.blobs i:nth-child(2){width:38vw;height:38vw;right:-10vw;top:40vh;background:#8a3b12;animation-duration:32s;animation-delay:-8s}
.blobs i:nth-child(3){width:30vw;height:30vw;left:30vw;bottom:-14vw;background:#2f6b5a;animation-duration:38s;animation-delay:-15s}
.blobs i:nth-child(4){width:18vw;height:18vw;left:62vw;top:-6vw;background:#c9533a;animation-duration:22s}
@keyframes drift{0%{transform:translate(0,0) scale(1) rotate(0)}50%{transform:translate(6vw,-5vh) scale(1.15) rotate(40deg)}100%{transform:translate(-4vw,6vh) scale(.92) rotate(-25deg)}}

.stage{position:relative;height:min(92vh,860px);min-height:560px;background:#0d0b09;color:#f6f0e4;overflow:hidden;isolation:isolate}
.stage .wall{position:absolute;inset:-25% -10%;display:flex;gap:28px;justify-content:center;transform:perspective(1400px) rotateX(18deg) rotateZ(-14deg) translateZ(0);transform-style:preserve-3d;transition:transform .6s ease-out}
.stage .col{display:flex;flex-direction:column;gap:28px;width:clamp(120px,15vw,210px);animation:rise 48s linear infinite}
.stage .col:nth-child(even){animation-name:fall;animation-duration:58s}
.stage .col:nth-child(3n){animation-duration:66s}
.stage .col:nth-child(4n+1){margin-top:-120px}
.stage .wall:hover .col{animation-play-state:paused}
@keyframes rise{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes fall{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.stage .tile{display:block;border-radius:22px;overflow:hidden;aspect-ratio:3/4;background:#2a2420;box-shadow:0 30px 60px rgba(0,0,0,.55);transform:translateZ(0);transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s;filter:saturate(1.05)}
.stage .tile:nth-child(3n){aspect-ratio:1/1}.stage .tile:nth-child(4n+2){aspect-ratio:4/5}
.stage .tile img{width:100%;height:100%;object-fit:cover;display:block}
.stage .tile:hover{transform:translateZ(60px) scale(1.08) rotate(2deg);filter:saturate(1.25) contrast(1.05)}
.stage .tile.shape{background:var(--g)}
.stage .col:nth-child(5n+2) .tile{filter:blur(1.2px) brightness(.8)}
.stage .col:nth-child(5n+2) .tile:hover{filter:none}
.stage .veil{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 55%,rgba(13,11,9,.92) 0,rgba(13,11,9,.75) 32%,rgba(13,11,9,.15) 70%,rgba(13,11,9,.05) 100%);pointer-events:none}
.stage .copy{position:absolute;left:0;right:0;bottom:0;top:0;max-width:1080px;margin:0 auto;padding:0 22px;display:flex;flex-direction:column;justify-content:center;pointer-events:none}
.stage .copy>*{pointer-events:auto}
.stage h1{color:#fff;max-width:13ch;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.stage h1 em{font-style:italic;color:#f0b25a}
.stage .lede{color:#e8dfcf;max-width:36ch;text-shadow:0 1px 18px rgba(0,0,0,.7)}
.stage .kicker{color:#f0b25a}
.stage .btn{border-color:#f6f0e4;color:#f6f0e4;backdrop-filter:blur(6px);background:rgba(255,255,255,.06)}
.stage .btn.solid{background:#f0b25a;border-color:#f0b25a;color:#1d1a16}
.stage .scrollhint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font:12px system-ui,sans-serif;letter-spacing:.2em;color:#cbbfa9;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
.top.dark{position:absolute;left:0;right:0;z-index:5}.top.dark .brand,.top.dark nav a{color:#f6f0e4}.top.dark .brand span{color:#f0b25a}

.ticker{overflow:hidden;white-space:nowrap;border-block:1px solid var(--line);background:#fff;padding:14px 0;font:italic 22px/1 Georgia,serif}
.ticker div{display:inline-block;padding-left:100%;animation:tick 70s linear infinite}
.ticker span{margin:0 28px}.ticker span::after{content:"✦";margin-left:56px;color:var(--accent);font-style:normal}
@keyframes tick{to{transform:translateX(-100%)}}

.card{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:auto -30% -60% auto;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(240,178,90,.35),transparent 70%);transition:transform .6s}
.card:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 18px 40px rgba(60,40,20,.14)}
.card:hover::before{transform:translate(-40px,-60px) scale(1.4)}
.cols .card:nth-child(2n):hover{transform:translateY(-6px) rotate(.6deg)}
h1,h2{background:linear-gradient(90deg,var(--ink),#7a3a14 55%,var(--ink));-webkit-background-clip:text;background-clip:text}
.stage h1{background:none;-webkit-text-fill-color:currentColor}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.squiggle{display:block;width:120px;height:14px;margin:6px 0 18px;background:linear-gradient(90deg,var(--accent),#f0b25a);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M2 7c10-8 20 8 30 0s20-8 30 0 20 8 30 0 18-6 26 0' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M2 7c10-8 20 8 30 0s20-8 30 0 20 8 30 0 18-6 26 0' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;animation:wig 3s ease-in-out infinite}
@keyframes wig{50%{transform:translateX(8px)}}
.oxiart-lib .art-card{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.oxiart-lib .art-card:hover{transform:translateY(-8px) rotate(-1deg)}
.oxiart-lib .art-card:nth-child(even):hover{transform:translateY(-8px) rotate(1deg)}
.oxiart-lib .art-card img{transition:transform .6s}.oxiart-lib .art-card:hover img{transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
@media(max-width:700px){.stage .wall{inset:-20% -60%;gap:16px}.stage .col{gap:16px;width:120px}.stage .veil{background:linear-gradient(180deg,rgba(13,11,9,.55),rgba(13,11,9,.9) 60%)}}

/* ---------------- bold type and icons ---------------- */
@font-face{font-family:Syne;font-weight:700;font-display:swap;src:url(/assets/fonts/syne-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Syne;font-weight:800;font-display:swap;src:url(/assets/fonts/syne-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:Fraunces;font-weight:900;font-display:swap;src:url(/assets/fonts/fraunces-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:Fraunces;font-weight:700;font-style:italic;font-display:swap;src:url(/assets/fonts/fraunces-latin-700-italic.woff2) format('woff2')}
h1,h2,h3,.top .brand,.trio,.kicker,.btn,.num{font-family:Syne,system-ui,sans-serif}
h1{font-weight:800;font-size:clamp(44px,8vw,104px);line-height:.92;letter-spacing:-.035em;text-transform:uppercase}
h1 em,h2 em{font-family:Fraunces,Georgia,serif;font-weight:700;font-style:italic;text-transform:none;letter-spacing:-.01em}
h2{font-weight:800;font-size:clamp(32px,5vw,62px);line-height:.98;letter-spacing:-.03em}
h3{font-weight:800;font-size:22px;letter-spacing:-.01em}
.top .brand{font-weight:800;font-size:26px;letter-spacing:-.02em}
.kicker{font-weight:800;font-size:14px;letter-spacing:.22em}
.btn{font-weight:700;font-size:16px;padding:14px 24px;border-width:2px}
.trio{font-weight:800;font-size:clamp(30px,6vw,72px);letter-spacing:.06em;background:linear-gradient(90deg,#c9533a,#f0b25a,#2f6b5a,#c9533a);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 8s linear infinite}
@keyframes shine{to{background-position:300% 0}}
.ico{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;margin-bottom:14px;transform:rotate(-6deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ico svg{width:36px;height:36px}
.card:hover .ico{transform:rotate(8deg) scale(1.12)}
.ico.c1{background:#f0b25a}.ico.c2{background:#c9533a;color:#fff}.ico.c3{background:#2f6b5a;color:#fff}.ico.c4{background:#1d1a16;color:#f0b25a}.ico.c5{background:#8a3b12;color:#fff}
.num{font-size:44px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:2px var(--accent);display:block;margin-bottom:8px}
.ticker{font:800 clamp(22px,3vw,34px)/1 Syne,system-ui,sans-serif;text-transform:uppercase;letter-spacing:-.01em;background:#1d1a16;color:#f6f0e4;border:0}
.ticker span::after{color:#f0b25a}
.note{border-left-width:8px;font-size:19px}.note b{font-family:Syne,sans-serif;font-weight:800}
.stamp{position:absolute;right:6vw;top:22vh;width:150px;height:150px;animation:spin 18s linear infinite;z-index:3;pointer-events:none}
.stamp text{font:800 13px Syne,sans-serif;letter-spacing:4px;fill:#f0b25a}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:700px){.stamp{width:96px;height:96px;right:12px;top:auto;bottom:70px}}
.hero h1.long{font-size:clamp(34px,5.6vw,72px);max-width:20ch}.oxiart-lib h1{text-transform:none;font-size:clamp(34px,5vw,64px)}
@media(max-width:700px){.stage .copy{padding-top:120px;justify-content:flex-start}.top.dark nav{font-size:13px;gap:10px}.stage h1{font-size:clamp(38px,11vw,60px)}}