:root{--gold:#c9a24b;--gold-dim:#8c7233;--bg:#0b0a08;--panel:#14120e;--ink:#efe6d2;--dim:#8c8470}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at top,#1a160d 0,var(--bg) 60%) fixed;color:var(--ink);font:17px/1.6 Georgia,"Times New Roman",serif}
main{width:min(46rem,100%);margin:0 auto;padding:2rem 1rem 4rem}
a{color:var(--gold)}
h1,h2,h3{font-weight:400;margin:0}
.brand{text-align:center;margin:1rem 0 2.5rem}
.brand img{display:block;width:min(34rem,100%);height:auto;margin:0 auto}
.brand .name{display:block;font-size:clamp(1.6rem,6vw,2.4rem);letter-spacing:.35em;text-transform:uppercase;color:var(--gold)}
.brand .tag{display:block;margin-top:.4rem;font-style:italic;color:var(--dim)}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);margin:1.2rem 0}
.step{margin:0 0 2.5rem}
.step h2{font-size:1.1rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.step h2 span{color:var(--dim);margin-right:.6rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem}
.card{position:relative}
.card .in{display:block;height:100%;padding:1rem;background:var(--panel);border:1px solid #2a2418;text-align:center;transition:border-color .2s,box-shadow .2s}
.card:hover .in,.card:focus-within .in{border-color:var(--gold);box-shadow:0 0 18px rgba(201,162,75,.2)}
.plus{position:absolute;top:.6rem;right:.6rem;width:2rem;height:2rem;line-height:1.8rem;text-align:center;border:1px solid var(--gold);border-radius:50%;color:var(--gold);background:var(--bg);font-size:1.3rem;text-decoration:none}
.plus:hover,.plus:focus-visible{background:var(--gold);color:var(--bg)}
.plus::after{content:attr(data-tip);position:absolute;top:2.4rem;right:0;padding:.3rem .6rem;white-space:nowrap;background:var(--gold);color:var(--bg);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.4;opacity:0;pointer-events:none;transition:opacity .15s;z-index:2}
.plus:hover::after,.plus:focus-visible::after{opacity:1}
@media (hover:none){.plus{width:auto;height:auto;padding:.25rem .8rem;border-radius:1rem;font-size:1rem;line-height:1.4}.plus::after{position:static;display:inline;opacity:1;background:none;color:inherit;padding:0 0 0 .4rem;font-size:.65rem}}
.gift-head{display:flex;gap:1rem;align-items:center;margin-bottom:2rem;padding:1rem;background:var(--panel);border:1px solid #2a2418}
.gift-head img{width:5rem;height:5rem}
.gift-head b{display:block;font-weight:400;font-size:1.2rem}
.gift-head i{color:var(--dim)}
.back{display:inline-block;margin-bottom:1rem;font-size:.9rem}
.card img{width:7rem;height:7rem}
.card b{display:block;font-weight:400;font-size:1.05rem;margin:.4rem 0 .2rem}
.card i{display:block;color:var(--dim);font-size:.9rem}
.card em{display:block;margin-top:.5rem;color:var(--gold);font-style:normal;font-size:.85rem;letter-spacing:.1em}
label.f{display:block;margin-bottom:1rem;color:var(--dim);font-size:.9rem;letter-spacing:.05em}
input[type=text],textarea{display:block;width:100%;margin-top:.3rem;padding:.6rem .7rem;background:var(--panel);color:var(--ink);border:1px solid #2a2418;font:inherit}
input[type=text]:focus,textarea:focus{outline:1px solid var(--gold);border-color:var(--gold)}
textarea{resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:30rem){.row{grid-template-columns:1fr}}
.count{float:right;font-size:.8rem}
button,.btn{display:inline-block;padding:.6rem 1.2rem;background:transparent;color:var(--gold);border:1px solid var(--gold);font:inherit;font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-decoration:none}
button:hover,.btn:hover{background:var(--gold);color:var(--bg)}
button.main,.btn.main{background:var(--gold);color:var(--bg)}
button.main:hover,.btn.main:hover{background:var(--ink);border-color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:.8rem 0 1.2rem}
.small{color:var(--dim);font-size:.85rem}
footer{margin:4rem auto 0;padding-top:1.4rem;max-width:18rem;border-top:1px solid var(--gold-dim);text-align:center;color:var(--dim);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase}
footer span{font-style:italic;text-transform:none;letter-spacing:.08em;font-size:.85rem}
footer a{display:inline-block;margin-top:.3rem;color:var(--gold);text-decoration:none;letter-spacing:.25em;font-size:.8rem}
footer a:hover{color:var(--ink)}
footer small{font-size:.7em;letter-spacing:.15em;opacity:.8}
[hidden]{display:none!important}

/* unboxing page */
.stage{text-align:center}
.stage h1{font-size:clamp(1.4rem,5vw,2rem);margin:1rem 0 .3rem}
.stage .from{color:var(--dim);font-style:italic;margin:0 0 1rem}
#box{width:min(18rem,80vw);height:auto;overflow:visible}
#box *{transform-box:fill-box;transform-origin:center}
#box #bx-lid,#box #bx-gift,#box #bx-glow,#box .ribbon,#box #bx-body{transition:transform 1.4s ease,opacity 1.2s ease}
#box #bx-glow{opacity:0}
#box #bx-gift{opacity:0}
#box.seal #bx-body{animation:pulse 1.6s ease-in-out 1}
#box.ribbon-off .ribbon{opacity:0;transform:scaleX(0)}
#box.lid-off #bx-lid{transform:translate(8px,-90px) rotate(-14deg);opacity:0}
#box.gift-up #bx-glow{opacity:1}
#box.gift-up #bx-gift{opacity:1;transform:translateY(-64px)}
@keyframes pulse{50%{filter:drop-shadow(0 0 8px var(--gold))}}
#caption{min-height:3.2em;font-style:italic;color:var(--ink);margin:.5rem 0 1rem}
.reveal{margin-top:1rem;animation:rise 1.2s ease both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.cert{margin:1.5rem auto;max-width:34rem;padding:1.6rem 1.4rem;border:1px solid var(--gold);outline:1px solid var(--gold-dim);outline-offset:6px;background:var(--panel)}
.cert img{width:6rem;height:6rem}
.cert h3{font-size:1.3rem;margin:.4rem 0}
.cert small{display:block;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);font-size:.75rem}
.cert p{margin:.6rem 0 0}
.note{margin:1.5rem auto;max-width:30rem;padding:1rem 1.2rem;background:#f0e6cc;color:#2a2418;font-style:italic;transform:rotate(-1deg);box-shadow:0 4px 18px rgba(0,0,0,.5)}
.note small{display:block;font-style:normal;letter-spacing:.15em;text-transform:uppercase;font-size:.7rem;color:#6d5a2c;margin-bottom:.3rem}
.note #note-from{display:block;margin-top:.5rem;font-style:normal;font-size:.9rem;color:#6d5a2c}
@media (prefers-reduced-motion:reduce){
  #box #bx-lid,#box #bx-gift,#box #bx-glow,#box .ribbon{transition:none}
  #box.seal #bx-body,.reveal{animation:none}
}

/* search, tags, options */
.search{display:block;width:100%;padding:.6rem .7rem;margin-bottom:.8rem;background:var(--panel);color:var(--ink);border:1px solid #2a2418;font:inherit}
.search:focus{outline:1px solid var(--gold);border-color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.6rem}
.chips button{padding:.2rem .7rem;font-size:.75rem;letter-spacing:.08em}
.chips button[aria-pressed=true]{background:var(--gold);color:var(--bg)}
select{display:block;width:100%;margin-top:.3rem;padding:.6rem .7rem;background:var(--panel);color:var(--ink);border:1px solid #2a2418;font:inherit}
select:focus{outline:1px solid var(--gold);border-color:var(--gold)}
.choice-note{display:block;margin-top:.2rem;font-style:italic;font-size:.85rem}
.spec{list-style:none;margin:1rem 0 0;padding:0;font-size:.9rem;color:var(--dim)}
.spec b{font-weight:400;color:var(--gold)}

/* premium silence: the page goes still */
.hushnum{font-size:3rem;margin:.5rem 0;color:var(--dim)}
body.hush .brand,body.hush #box,body.hush footer,body.hush #from,body.hush #title,body.hush #skip{opacity:.08}
body.hush #caption{color:var(--dim)}

.cert .seal{display:block;width:3.2rem;height:auto;margin:0 auto .8rem}

/* footer links, legal pages */
footer nav{display:flex;justify-content:center;gap:1.6rem;margin-bottom:.9rem}
footer nav a{color:var(--dim);text-decoration:none;font-size:.7rem;letter-spacing:.2em}
footer nav a:hover{color:var(--gold)}
.legal{font-size:.95rem}
.legal h1{font-size:1.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 .4rem}
.legal h2{font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:2rem 0 .6rem}
.legal p{margin:.5rem 0}
.legal b{font-weight:600;color:var(--ink)}
.policy{width:100%;border-collapse:collapse;margin:.6rem 0;font-size:.9rem}
.policy th,.policy td{padding:.45rem .6rem;border:1px solid #2a2418;text-align:left}
.policy th{color:var(--gold);font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:.75rem}

/* about page */
.about .lede{font-style:italic;font-size:1.15rem;color:var(--dim);margin:.4rem 0 1.5rem}
.about .statement{font-size:1.2rem;font-style:italic;color:var(--ink);border-left:2px solid var(--gold-dim);padding-left:1rem;margin:.8rem 0}
.timeline,.pillars{list-style:none;margin:.8rem 0;padding:0}
.timeline li{display:grid;grid-template-columns:4.5rem 1fr;gap:1rem;padding:.7rem 0;border-top:1px solid #2a2418}
.timeline li:first-child{border-top:0}
.timeline b{font-weight:400;font-size:1.3rem;color:var(--gold);letter-spacing:.05em}
.pillars li{padding:.5rem 0 .5rem 1rem;border-left:1px solid var(--gold-dim);margin:.6rem 0}
.pillars b{color:var(--gold);font-weight:400;letter-spacing:.08em}
@media (max-width:30rem){.timeline li{grid-template-columns:1fr;gap:.2rem}}