:root{ --ink:#f5efe2; --soft:rgba(245,239,226,.72); --accent:#f0a558; }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{
  font-family:'Inter',system-ui,sans-serif; background:#0d0d12; color:var(--ink);
  overflow-x:hidden;
}
#world{position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0}
#scrim{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(rgba(8,8,14,.18), rgba(8,8,14,.06) 30%, rgba(8,8,14,.08) 62%, rgba(8,8,14,.32)),
             radial-gradient(120% 90% at 50% 45%, rgba(8,8,14,0) 55%, rgba(8,8,14,.28));}
#fallback{
  position:fixed; inset:0; z-index:0; display:none;
  background:url(world/dawn.webp) center/cover no-repeat;
}
.nav{
  position:fixed; top:0; left:0; right:0; z-index:5;
  display:flex; justify-content:space-between; align-items:baseline;
  padding:22px 28px; mix-blend-mode:normal;
}
.wordmark{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:20px; letter-spacing:.42em}
.nav-note{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--soft)}
main{position:relative; z-index:2}
.panel{
  min-height:100vh; display:flex; align-items:center; padding:0 7vw;
  opacity:0; transition:opacity .5s linear;
}
.panel.on{opacity:1}
.panel.center{justify-content:center; text-align:center}
.panel.left{justify-content:flex-start}
.panel.right{justify-content:flex-end; text-align:right}
.inner{max-width:560px}
.kicker{
  font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--accent);
  margin-bottom:18px; text-shadow:0 1px 4px rgba(0,0,0,.65), 0 1px 22px rgba(0,0,0,.8);
}
h1{
  font-family:'Cormorant Garamond',serif; font-weight:600;
  font-size:clamp(56px,11vw,120px); letter-spacing:.18em; line-height:1;
  text-shadow:0 2px 30px rgba(0,0,0,.55); margin-bottom:22px;
}
h2{
  font-family:'Cormorant Garamond',serif; font-weight:600;
  font-size:clamp(38px,6.5vw,64px); line-height:1.05;
  text-shadow:0 2px 26px rgba(0,0,0,.6); margin-bottom:18px;
}
.lede{
  font-size:clamp(15px,1.6vw,18px); line-height:1.65; color:var(--ink);
  text-shadow:0 1px 14px rgba(0,0,0,.75);
}
.lede.small{font-size:14px; color:var(--soft); margin-top:26px}
.lede a{color:var(--accent); text-decoration:none}
.lede a:hover{text-decoration:underline}
.hint{
  text-shadow:0 1px 10px rgba(0,0,0,.9);
  margin-top:54px; font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:var(--soft);
  animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(8px);opacity:1}}
.product{
  margin:26px auto 0; max-width:420px; background:rgba(10,10,16,.82);
  border:1px solid rgba(240,165,88,.35); border-radius:18px; padding:24px 26px;
  backdrop-filter:none; text-align:left;
}
.notes{font-size:14.5px; padding:7px 0; color:var(--ink); border-bottom:1px dashed rgba(245,239,226,.14)}
.notes span{
  display:inline-block; width:52px; font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--accent); margin-right:8px;
}
.price{margin-top:14px; font-size:15px; font-weight:500}
.price em{display:block; font-style:normal; font-size:11.5px; color:var(--soft); margin-top:4px}
.end{min-height:110vh; align-items:flex-end; padding-bottom:14vh}
.endline{font-size:clamp(30px,5vw,52px)}
@media (max-width:720px){
  .nav{padding:16px 18px}
  .panel{padding:0 8vw}
  .panel.right{text-align:left; justify-content:flex-start}
}