@font-face{font-family:'Instrument Serif';src:url(/assets/fonts/instrument-regular.5159ab6125.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(/assets/fonts/instrument-italic.6faf5e06dd.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(/assets/fonts/grotesk-400.cd9fb8b7ca.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(/assets/fonts/grotesk-500.d73efe5b6a.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(/assets/fonts/grotesk-700.7b5ff583d9.woff2) format('woff2');font-weight:700;font-display:swap}
:root{--tint:#c5e4d0;--ink:#1d2a22;--ink2:#46564b;--cream:#fbf7ef;--berry:#d6336c;--serif:'Instrument Serif',Georgia,serif;--sans:'Space Grotesk',system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font:400 17px/1.5 var(--sans);color:var(--ink);background:var(--tint);transition:background-color .7s ease;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{width:min(1320px,100% - 48px);margin-inline:auto}

/* top bar */
.bar{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.logo{font:400 34px/1 var(--serif);letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;gap:10px}
.logo i{width:14px;height:14px;border-radius:50%;background:var(--ink);display:inline-block}
.bar nav{display:flex;gap:30px;font-size:15px}
.bar nav a{text-decoration:none;opacity:.78}.bar nav a:hover{opacity:1}
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:99px;padding:12px 22px;background:var(--ink);color:#fff;text-decoration:none;font-weight:500;font-size:15px;border:0;transition:transform .25s}
.pill:hover{transform:translateY(-2px)}
.pill.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}

/* hero */
.hero{padding:clamp(8px,2vw,24px) 0 0;text-align:center;position:relative}
.kicker{font:500 13px var(--sans);letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.hero h1{font:400 clamp(50px,7.8vw,122px)/.88 var(--serif);letter-spacing:-.05em;margin:18px 0 0;position:relative;z-index:0}
.hero h1 em{font-style:italic;letter-spacing:-.04em}
.hero .lede{max-width:520px;margin:20px auto 0;color:var(--ink2);font-size:18px}

/* gallery */
.gal{position:relative;margin-top:1vw;padding-bottom:10px}
.stage{position:relative;height:clamp(380px,39vw,560px);perspective:1500px;perspective-origin:50% 38%;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.stage.drag{cursor:grabbing}
.stage.is-grid{perspective:none;overflow:visible;height:auto;min-height:0;cursor:default}
.stage .world{position:absolute;inset:0;transform-style:preserve-3d}
.card{--w:clamp(190px,24vw,330px);position:absolute;left:50%;top:50%;width:var(--w);height:var(--w);margin:calc(var(--w)/-2) 0 0 calc(var(--w)/-2);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -28px #1d2a2260,0 6px 14px -8px #1d2a2240;will-change:transform,opacity;backface-visibility:visible;border:0;padding:0;transform-origin:50% 60%}
.card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.card:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.card .price{position:absolute;left:12px;bottom:12px;background:#ffffffd9;backdrop-filter:blur(6px);border-radius:99px;padding:5px 12px;font-size:13px;font-weight:500;opacity:0;transition:opacity .35s}
.card.on .price{opacity:1}
.stage.is-grid .world{position:relative;inset:auto;display:grid;grid-template-columns:repeat(6,1fr);gap:14px;transform:none;padding:6px 0}
.stage.is-grid .card{--w:100%;position:relative;left:auto;top:auto;margin:0;width:100%;height:auto;aspect-ratio:1;transform:none!important;opacity:1!important}
.stage.is-grid .card.on{box-shadow:0 0 0 3px var(--ink),0 24px 40px -22px #1d2a2270}

/* controls */
.ctrl{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.modes{display:flex;gap:4px;padding:5px;border-radius:99px;background:#ffffff8c;backdrop-filter:blur(8px);box-shadow:0 0 0 1px #1d2a2214}
.modes button{border:0;background:none;padding:9px 18px;border-radius:99px;font-size:14.5px;font-weight:500;position:relative;transition:color .3s}
.modes button[aria-pressed=true]{color:#fff;background:var(--ink)}
.arrow{width:48px;height:48px;border-radius:50%;border:0;background:#ffffff8c;display:grid;place-items:center;box-shadow:0 0 0 1px #1d2a2214;font-size:20px;transition:transform .2s,background .2s}
.arrow:hover{background:#fff;transform:scale(1.07)}
.info{display:grid;grid-template-columns:1fr auto;gap:8px 40px;max-width:760px;margin:26px auto 0;align-items:end;text-align:left;min-height:116px}
.info h2{font:400 clamp(38px,5vw,64px)/.95 var(--serif);letter-spacing:-.03em}
.info h2 em{font-style:italic}
.info p{grid-column:1;color:var(--ink2);max-width:46ch}
.info .buy{grid-column:2;grid-row:1/span 2;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.info .buy b{font:400 44px/1 var(--serif)}
.info [data-swap]{transition:opacity .22s,transform .22s}
.info.swap [data-swap]{opacity:0;transform:translateY(8px)}
.hint{display:block;text-align:center;font-size:13px;opacity:.55;margin-top:18px;letter-spacing:.04em}

/* ticker */
.ticker{margin:56px 0 0;border-block:1.5px solid var(--ink);overflow:hidden;white-space:nowrap;padding:14px 0;font:400 34px/1 var(--serif)}
.ticker div{display:inline-block;animation:tk 38s linear infinite}
.ticker span{padding:0 22px}.ticker em{padding:0 4px}
@keyframes tk{to{transform:translateX(-50%)}}

/* sections */
section{padding:clamp(64px,9vw,130px) 0}
.s-title{font:400 clamp(48px,8vw,118px)/.9 var(--serif);letter-spacing:-.045em;margin-bottom:clamp(30px,5vw,60px)}
.s-title em{font-style:italic}
.cream{background:var(--cream)}
.menu{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,6vw,100px)}
.menu li{list-style:none;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;padding:18px 0;border-bottom:1px solid #1d2a2222}
.menu li b{font:400 30px/1 var(--serif);letter-spacing:-.02em}
.menu li small{display:block;font-size:14px;color:var(--ink2);margin-top:4px}
.menu li i{border-bottom:1.5px dotted #1d2a2255;transform:translateY(-6px)}
.menu li span.pr{font-weight:500}
.menu li .dot{width:44px;height:44px;border-radius:12px;overflow:hidden;align-self:center}
.menu li .dot img{width:100%;height:100%;object-fit:cover}
.menu li{grid-template-columns:44px 1fr auto;gap:16px}
.menu li div{min-width:0}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,60px)}
.facts div{border-top:1.5px solid var(--ink);padding-top:20px}
.facts b{display:block;font:400 clamp(60px,9vw,130px)/.9 var(--serif);letter-spacing:-.05em}
.facts p{max-width:28ch;color:var(--ink2);margin-top:10px}
.visit{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,100px);align-items:end}
.visit h3{font:400 28px/1.1 var(--serif);margin:0 0 6px}
.visit dl{display:grid;grid-template-columns:auto 1fr;gap:10px 30px;margin:24px 0 34px}
.visit dt{opacity:.6}.visit dd{margin:0;font-weight:500}
.visit .big{font:400 clamp(30px,4.4vw,58px)/1 var(--serif);letter-spacing:-.03em}
footer{padding:34px 0 50px;font-size:14px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid #1d2a2222}
footer a{opacity:.7}

@media(max-width:900px){
  .bar nav{display:none}
  .menu{grid-template-columns:1fr}
  .visit{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .stage.is-grid .world{grid-template-columns:repeat(3,1fr);gap:10px}
  .info{grid-template-columns:1fr}
  .info .buy{grid-column:1;grid-row:auto;align-items:flex-start;text-align:left;flex-direction:row;align-items:center;justify-content:space-between}
  .card{--w:clamp(150px,50vw,260px);border-radius:18px}
  .stage{height:clamp(360px,100vw,480px)}
  .ticker{font-size:26px}
  .modes button{padding:8px 13px;font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){.ticker div{animation:none}body{transition:none}}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:99px;font-size:14px;opacity:0;pointer-events:none;transition:.35s;z-index:20}
.toast.show{opacity:1;transform:translate(-50%,0)}
.byline{position:fixed;left:16px;bottom:16px;z-index:15;background:#fffffff0;color:#111;border-radius:99px;padding:9px 16px;font-size:12.5px;text-decoration:none;box-shadow:0 8px 24px -10px #0006}
.byline b{font-weight:500}
.hero .kicker,.hero .lede{position:relative;z-index:2}
@media(max-width:900px){.ctrl{gap:10px 12px}.modes{order:3;width:100%;max-width:420px;justify-content:space-between;overflow-x:auto}.arrow{order:1}.modes+.arrow{order:2}.stage{margin-bottom:0}}
