/* THE ONLY — cinematic luxury layer. Loaded after styles.css: it re-themes (dark, gold, ivory) and adds motion.
   Content, structure and functionality are untouched. */
:root{
  --black:#0A0A0A; --gold:#D4AF37; --gold-2:#C9A961; --cream:#F5F1E8;
  --ivory:#0A0A0A; --ivory-2:#0E0E0D; --ink:#F5F1E8;
  --mute:rgba(245,241,232,.58); --line:rgba(201,169,97,.22);
  --ease:cubic-bezier(.87,0,.13,1);           /* expo in-out */
  --ease-out:cubic-bezier(.16,1,.3,1);        /* expo out */
}
html{scroll-behavior:auto;background:var(--black)}
body{background:var(--black);color:var(--cream);font-weight:300;overflow-x:hidden}
::selection{background:var(--gold);color:var(--black)}
:focus-visible{outline:1px solid var(--gold);outline-offset:5px}
.skip{background:var(--gold);color:var(--black)}

/* film grain + vignette: fixed, above the page, never interactive */
body::before{content:"";position:fixed;inset:0;z-index:44;pointer-events:none;
  background:radial-gradient(ellipse 120% 95% at 50% 46%,rgba(0,0,0,0) 52%,rgba(0,0,0,.55) 100%)}
body::after{content:"";position:fixed;inset:-50%;z-index:45;pointer-events:none;opacity:.075;
  background:url(/img/grain.png) repeat;background-size:220px 220px;animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}

/* header */
.site-header{background:linear-gradient(rgba(10,10,10,.9),rgba(10,10,10,0));z-index:60}
.wordmark{font-family:var(--serif);font-weight:500;font-size:.95rem;letter-spacing:.5em;color:var(--cream)}
.nav a,.lang-switch,.link{font-weight:400}
.nav a{color:var(--cream);opacity:.78;transition:opacity .5s var(--ease-out)}
.nav a:hover{opacity:1}
.nav a::after{background:var(--gold);transition:transform .9s var(--ease-out)}
.lang-switch{border-color:rgba(201,169,97,.55);color:var(--gold-2);transition:background .6s var(--ease-out),color .6s var(--ease-out),border-color .6s}
.lang-switch:hover,.lang-switch:focus-visible{background:var(--gold);color:var(--black);border-color:var(--gold)}
.nav-toggle span{background:var(--cream)}

/* labels: thin uppercase sans, wide tracking */
.eyebrow,.tagline,.record dt,.sig dt,.coin-hint,.coin-reset,.stamp,.site-footer,figcaption,.dialog label{font-weight:400}
.eyebrow{color:var(--gold-2);letter-spacing:.5em;font-size:.66rem}
.tagline{color:var(--gold-2);letter-spacing:.4em;font-size:.66rem}
.record dt,.sig dt{color:var(--gold-2);letter-spacing:.3em;font-size:.62rem}
figcaption{color:var(--mute);letter-spacing:.14em;font-size:.64rem}

/* type: high-contrast serif, calm and large */
.display,.hero h1,.kicker,.four,.prose p,.manifesto-body p,.lede,.pull,.final p,.receive li,.price,.support{font-weight:400;color:var(--cream)}
.hero h1{font-size:clamp(2.6rem,6vw,5.6rem);letter-spacing:.06em;line-height:1.02}
.display{letter-spacing:.05em;line-height:1.08;font-size:clamp(2.2rem,5.6vw,5rem)}
.kicker{letter-spacing:.06em}
.price,.big-price{color:var(--gold);letter-spacing:.06em;font-weight:400}
.price::after{content:"";display:block;width:3.2rem;height:1px;background:linear-gradient(90deg,var(--gold),transparent);margin-top:1.4rem}
.support,.small,.pay-note,.acquisition .small{color:var(--mute)}
.support{font-style:italic}
.lede{color:rgba(245,241,232,.86)}
.small a,.pay-note a,.doc a{text-decoration-color:rgba(201,169,97,.6)}

/* sections: no hard cuts, one continuous black with light bleeding between */
section{position:relative;background:transparent!important;color:var(--cream)}
section+section::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,169,97,.35),transparent)}
.question::after,.acquisition::after,.finality::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(212,175,55,.055),transparent 70%)}
.acquisition::after{background:radial-gradient(ellipse 55% 60% at 50% 40%,rgba(212,175,55,.09),transparent 70%)}
.manifesto,.acquisition{color:var(--cream)}
.manifesto-body p{color:rgba(245,241,232,.9)}
.manifesto-body .one{color:var(--gold);letter-spacing:.04em}
.four li{border-color:var(--line)}
.four li:last-child{border-color:var(--line)}
.receive li{border-color:var(--line)}
.record,.record div,.sig div{border-color:var(--line)}
.declaration{border:1px solid rgba(201,169,97,.42);background:linear-gradient(180deg,rgba(212,175,55,.04),rgba(212,175,55,0))}
.declaration p{color:rgba(245,241,232,.9)}
.stamp,.stamp-ok{background:transparent;color:var(--gold);border-color:rgba(212,175,55,.6);letter-spacing:.36em}
.signed{color:var(--gold)!important}
.hash,.sig dd a,.check a{color:var(--cream)!important}
.sig dd{color:var(--mute)}
.artwork-image img{background:transparent}
.site-footer{border-color:var(--line);color:var(--mute)}
.final .final-mark{color:var(--gold);letter-spacing:.7em}
.sold{color:var(--gold)}
code{background:rgba(201,169,97,.12);color:var(--cream)}

/* buttons: thin gold outline, gold fill sweeps in, slight magnetic pull (see luxe.js) */
.btn,.btn-light,.btn-ghost,dialog .btn{position:relative;isolation:isolate;overflow:hidden;background:transparent;color:var(--cream);
  border:1px solid rgba(212,175,55,.75);border-radius:0;padding:1.1rem 2.1rem;font:400 .68rem var(--sans);letter-spacing:.34em;
  transition:color .8s var(--ease-out),border-color .8s,transform .5s var(--ease-out);will-change:transform}
.btn::before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--gold);transform:scaleX(0);transform-origin:left center;transition:transform .9s var(--ease)}
.btn:hover,.btn-light:hover,.btn-ghost:hover,dialog .btn:hover{background:transparent;color:var(--black);border-color:var(--gold)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn:active{transform:scale(.985)}
.link{color:var(--gold-2);text-decoration-color:rgba(201,169,97,.5);transition:color .6s}
.link:hover{color:var(--gold)}
dialog .btn[disabled]{opacity:.45}

/* dialogs */
dialog{background:#0d0d0c;color:var(--cream);border:1px solid rgba(201,169,97,.4);box-shadow:0 40px 120px rgba(0,0,0,.8)}
dialog::backdrop{background:rgba(5,5,4,.82);backdrop-filter:blur(6px)}
dialog[open]{animation:dlg .9s var(--ease-out)}
@keyframes dlg{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
dialog h2{letter-spacing:.04em}
dialog label{color:var(--gold-2);font-weight:400}
dialog input{border-bottom-color:rgba(201,169,97,.5);color:var(--cream)}
dialog textarea{border-color:rgba(201,169,97,.3);color:var(--cream)}
dialog input:focus,dialog textarea:focus{border-color:var(--gold);box-shadow:0 1px 0 var(--gold)}
.check{color:var(--cream)!important}
.check input{accent-color:var(--gold)}
.err,.form-status.bad{color:#e58a78}
.setup{background:rgba(212,175,55,.1);border-color:rgba(212,175,55,.5);color:var(--cream)}
.close{color:var(--cream)}

/* legal pages */
.doc p,.doc li{color:rgba(245,241,232,.82)}
.doc h1,.doc h2,.doc h3{color:var(--cream)}
.doc address{background:rgba(201,169,97,.06);border-left-color:var(--gold)}
.doc .note{background:rgba(201,169,97,.06);border-left-color:var(--gold)}

/* the viewer: coin, black mirror and light share one dark stage */
.coin3d{aspect-ratio:1/1.1}
.coin3d-large{aspect-ratio:5/4}
.hero{max-width:1700px}
.hero-coin{margin-right:calc(var(--pad)*-.5)}
.coin3d canvas{mix-blend-mode:lighten;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 76%,transparent 100%),radial-gradient(ellipse 54% 54% at 50% 50%,#000 66%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 76%,transparent 100%),radial-gradient(ellipse 54% 54% at 50% 50%,#000 66%,transparent 100%)}
.coin3d.is-3d::after{display:none}
.coin-hint{color:var(--gold-2);bottom:3%;letter-spacing:.42em;transition:opacity 1.2s var(--ease-out)}
.coin-reset{color:var(--gold-2);border-bottom-color:rgba(201,169,97,.5);transition:color .6s}
.coin-reset:hover{color:var(--gold)}
.hero-coin figcaption{margin-top:.2rem}

/* intro: a thin gold line draws a circle that becomes the coin */
.coin-ring{position:absolute;left:50%;top:32%;width:58%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(-90deg);overflow:visible;pointer-events:none;z-index:3;
  transition:opacity 1.8s var(--ease),transform 2.2s var(--ease)}
.coin-ring circle{fill:none;stroke:var(--gold);stroke-width:.28;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 1.4px rgba(212,175,55,.9));
  animation:ring 1.6s var(--ease) .15s forwards}
.coin-ring.done{opacity:0;transform:translate(-50%,-50%) rotate(-90deg) scale(1.07)}
@keyframes ring{to{stroke-dashoffset:0}}
.coin3d.intro .coin-hint,.coin3d.intro .coin-reset{opacity:0}
.coin3d .coin-reset{transition:opacity 1.4s var(--ease-out) .4s,color .6s}

/* text: lines rise from behind a mask (built by luxe.js); everything else eases up */
.lx-l{display:block;overflow:hidden;padding:.08em 0 .14em;margin:-.08em 0 -.14em}
.lx-i{display:block;transform:translateY(112%);transition:transform 1.5s var(--ease) calc(var(--d,0) * 110ms + var(--base,0ms));will-change:transform}
.lx-in .lx-i{transform:none}
.lx-fade{opacity:0;transform:translateY(22px);transition:opacity 1.6s var(--ease-out) var(--base,0ms),transform 1.6s var(--ease-out) var(--base,0ms)}
.lx-fade.lx-in{opacity:1;transform:none}
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1.8s var(--ease-out),transform 1.8s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.js-off .lx-i,.js-off .lx-fade{transform:none;opacity:1}

@media (max-width:900px){
  .hero-coin{margin-right:0}
  .coin-ring{top:28%;width:74%}
}
@media (max-width:720px){
  .nav{background:rgba(10,10,10,.97)}
  .wordmark{letter-spacing:.38em}
  .btn,.btn-light,.btn-ghost,dialog .btn{padding:1rem 1.6rem;letter-spacing:.28em}
  body::after{opacity:.06}
}
@media (prefers-reduced-motion:reduce){
  body::after{animation:none}
  .lx-i,.lx-fade,.reveal{transform:none!important;opacity:1!important}
  .coin-ring{display:none}
  dialog[open]{animation:none}
}

/* narrow text blocks align with the headings instead of floating in the middle */
section>.lede,section>.small,section>.checksum-note,section>.pay-note,section>.receive,section>.notes{margin-left:max(0px,calc((100% - var(--max))/2))!important;margin-right:auto!important}
.finality .lede{margin-left:max(0px,calc((100% - var(--max))/2))!important}