:root{
  --ground:#0E0C0B; --slate:#1A1512; --slate-2:#241D18; --line:#3A3028;
  --bone:#EDE4D6; --bone-dim:#B9AB99; --muted:#8A7D70;
  --ember:#C8321E; --ember-hi:#E4472F; --gold:#C9A24A; --gold-dim:#8E7434;
  --display:"Bodoni Moda",Didot,"Times New Roman",serif; --body:"Karla","Helvetica Neue",Arial,sans-serif; --mono:"DM Mono","SFMono-Regular",Consolas,monospace;
  --measure:62ch; --radius:4px;
}
*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--bone);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;line-height:1.05}
p{margin:0}
.wrap{width:min(1240px,100% - 48px);margin-inline:auto}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
section{padding:88px 0}
.textlink{color:var(--gold);border-bottom:1px solid var(--gold-dim);padding-bottom:1px}
.textlink:hover{color:var(--bone);border-color:var(--bone)}

/* bead-string divider */
.beads{height:14px;position:relative;margin:0 auto;width:min(1240px,100% - 48px)}
.beads::before{content:"";position:absolute;inset:0;opacity:.9;
  background:radial-gradient(circle at 5px 7px,var(--ember) 0 3px,transparent 3.6px) 0 0/216px 14px repeat-x,radial-gradient(circle at 5px 7px,var(--gold-dim) 0 3px,transparent 3.6px) 12px 0/24px 14px repeat-x}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--ground) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px}
.brand{font-family:var(--display);font-size:22px;letter-spacing:.02em;display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand i{width:9px;height:9px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 2px var(--ground),0 0 0 3px var(--gold-dim)}
.links{display:flex;gap:28px;font-size:14px;letter-spacing:.04em;color:var(--bone-dim)}
.links a{padding:4px 0;border-bottom:1px solid transparent}
.links a:hover{color:var(--bone)}
.links a[aria-current="page"]{color:var(--bone);border-color:var(--gold)}
.navright{display:flex;align-items:center;gap:10px}
.cartbtn{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:8px 14px;border-radius:999px;font-size:14px;color:var(--bone);white-space:nowrap}
.cartbtn:hover{border-color:var(--gold-dim)}
.cartbtn .n{font-family:var(--mono);background:var(--ember);color:#fff;min-width:22px;height:22px;border-radius:999px;display:grid;place-items:center;font-size:12px}
.menubtn{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0}
.menubtn span{display:block;width:16px;height:1.5px;background:var(--bone);transition:transform .25s}
.menubtn.open span:first-child{transform:translateY(3.25px) rotate(45deg)}.menubtn.open span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.mobilemenu{display:none;border-top:1px solid var(--line);background:var(--slate)}
.mobilemenu a{display:block;padding:16px 24px;border-bottom:1px solid var(--line);font-family:var(--display);font-size:22px}
@media (max-width:860px){.links{display:none}.menubtn{display:flex}.mobilemenu.open{display:block}}

/* page header (inner pages) */
.pagehead{padding:72px 0 40px;border-bottom:1px solid var(--line)}
.pagehead .wrap{display:flex;align-items:end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.pagehead h1{font-size:clamp(42px,6vw,88px);letter-spacing:-.01em}
.pagehead h1 em{font-style:italic}
.pagehead p{max-width:var(--measure);color:var(--bone-dim);font-weight:300;font-size:18px}
.pagehead .stack{display:flex;flex-direction:column;gap:14px}
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px;margin-bottom:6px}
.crumbs a:hover{color:var(--bone)}

/* hero (home) */
.hero{position:relative;min-height:560px;max-height:84vh;height:72vw;overflow:hidden;background:#000}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,12,11,.88) 0%,rgba(14,12,11,.55) 42%,rgba(14,12,11,.08) 75%),linear-gradient(0deg,rgba(14,12,11,.85) 0%,transparent 40%)}
.hero .wrap{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:64px;gap:22px}
.hero h1{font-size:clamp(46px,7.2vw,112px);letter-spacing:-.01em;max-width:11ch}
.hero h1 em{font-style:italic}
.hero .lede{max-width:46ch;font-size:clamp(16px,1.4vw,20px);color:var(--bone-dim);font-weight:300}
.hero .lede b{color:var(--bone);font-weight:500}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;transition:transform .15s,background .15s,border-color .15s}
.btn:active{transform:translateY(1px)}
.btn-ember{background:var(--ember);color:#fff}.btn-ember:hover{background:var(--ember-hi)}
.btn-ember:disabled{opacity:.5;cursor:not-allowed}
.btn-ghost{border:1px solid var(--bone-dim);color:var(--bone)}.btn-ghost:hover{border-color:var(--gold)}
.btn svg{width:14px;height:14px}
.sound{position:absolute;right:24px;bottom:24px;z-index:3;border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-dim);background:rgba(14,12,11,.5)}
.sound:hover{color:var(--bone);border-color:var(--gold-dim)}
@media (max-width:700px){.hero{height:auto;min-height:640px;max-height:none}.hero::after{background:linear-gradient(0deg,rgba(14,12,11,.94) 0%,rgba(14,12,11,.55) 45%,rgba(14,12,11,.12) 75%,rgba(14,12,11,.05) 100%)}.hero .wrap{padding-top:300px;padding-bottom:72px}}
.hero h1 .w{display:inline-block;animation:rise .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
.hero .lede,.hero .cta-row,.hero .eyebrow{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero .eyebrow{animation-delay:.1s}.hero .lede{animation-delay:.55s}.hero .cta-row{animation-delay:.7s}
.pagehead h1 .w{display:inline-block;animation:rise .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* offer strip */
.offer{border-block:1px solid var(--line);background:var(--slate)}
.offer .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.offer div{padding:20px 22px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.offer div:first-child{border-left:0;padding-left:0}
.offer strong{font-family:var(--display);font-size:24px;font-weight:400;color:var(--bone)}
.offer strong.price{color:var(--ember-hi)}
.offer span{font-size:13px;color:var(--muted);letter-spacing:.02em}
@media (max-width:820px){.offer .wrap{grid-template-columns:1fr 1fr}.offer div{border-left:0;padding-left:0}}

/* doors (home: three ways in) */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.door{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);background:var(--slate)}
.door img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.door:hover img{transform:scale(1.04)}
.door figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px;background:linear-gradient(0deg,rgba(14,12,11,.9),rgba(14,12,11,.4) 60%,transparent);display:flex;flex-direction:column;gap:8px}
.door figcaption h3{font-size:clamp(28px,3vw,40px)}
.door figcaption p{color:var(--bone-dim);font-size:15px;font-weight:300;max-width:34ch}
.door figcaption .go{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:6px}
@media (max-width:820px){.doors{grid-template-columns:1fr}.door{aspect-ratio:16/10}}

/* section heads */
.head{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:40px;flex-wrap:wrap}
.head h2{font-size:clamp(34px,4.2vw,56px)}
.head p{max-width:var(--measure);color:var(--bone-dim);font-weight:300}
.head .stack{display:flex;flex-direction:column;gap:14px}

/* filters */
.filters{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);padding:8px 14px;border-radius:999px;font-size:13px;letter-spacing:.04em;color:var(--bone-dim)}
.chip[aria-pressed="true"]{border-color:var(--gold);color:var(--bone);background:var(--slate-2)}
.chip:hover{color:var(--bone)}

/* product cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px}
.grid.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.grid.four{grid-template-columns:repeat(3,1fr)}}
@media (max-width:980px){.grid,.grid.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid,.grid.four{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;gap:14px}
.card[hidden]{display:none}
.card .ph{position:relative;aspect-ratio:1;overflow:hidden;border-radius:var(--radius);background:var(--slate);display:block}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .ph img{transform:scale(1.04)}
.tag{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:3px;background:rgba(14,12,11,.72);color:var(--bone-dim);border:1px solid var(--line)}
.tag.set{color:var(--gold);border-color:var(--gold-dim)}
.card .meta{display:flex;justify-content:space-between;gap:16px;align-items:start}
.card h3{font-size:24px}
.card h3 a:hover{color:var(--gold)}
.card .stones{color:var(--muted);font-size:14px;margin-top:4px}
.price{font-family:var(--mono);font-size:15px;white-space:nowrap;text-align:right;line-height:1.35}
.price small{display:block;color:var(--ember-hi);font-size:12px}
.add{align-self:start;border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;transition:border-color .15s,background .15s;white-space:nowrap}
.add:hover{border-color:var(--gold)}
.add.done{background:var(--slate-2);border-color:var(--gold-dim);color:var(--gold)}
.add svg{width:12px;height:12px}

/* flat-lay banner */
.banner{margin:56px 0 0;position:relative;border-radius:var(--radius);overflow:hidden}
.banner img{width:100%;aspect-ratio:16/8;object-fit:cover}
.banner figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 28px;background:linear-gradient(0deg,rgba(14,12,11,.9),transparent);display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;color:var(--bone-dim);font-size:15px}

/* duo / pricing */
.duo{background:var(--slate);border-block:1px solid var(--line)}
.duo .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.duo img{border-radius:var(--radius);width:100%}
.duo h2{font-size:clamp(38px,4.6vw,64px);margin-bottom:22px}
.duo h2 em{font-style:italic}
.duo p{color:var(--bone-dim);max-width:var(--measure);font-weight:300;margin-bottom:22px}
.math{display:grid;grid-template-columns:auto 1fr auto;gap:10px 18px;align-items:center;font-family:var(--mono);font-size:14px;border-top:1px solid var(--line);padding-top:18px;max-width:420px}
.math .r{text-align:right}.math .k{color:var(--muted)}.math .tot{color:var(--ember-hi);font-size:18px}.math .line{grid-column:1/-1;height:1px;background:var(--line)}
@media (max-width:900px){.duo .wrap{grid-template-columns:1fr}}

/* films */
.films .pair{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.clip{position:relative;overflow:hidden;border-radius:var(--radius);background:#000;aspect-ratio:16/9}
.clip.tall{aspect-ratio:9/16}
.clip video{width:100%;height:100%;object-fit:cover}
.clip .cap{position:absolute;left:0;bottom:0;right:0;padding:22px 24px;background:linear-gradient(0deg,rgba(14,12,11,.85),transparent);display:flex;justify-content:space-between;align-items:end;gap:12px}
.clip .cap h3{font-size:clamp(24px,2.6vw,34px)}
.clip .cap span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.clip .play{position:absolute;top:16px;right:16px;border:1px solid rgba(237,228,214,.5);border-radius:999px;padding:8px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:rgba(14,12,11,.5);color:var(--bone)}
.clip .play:hover{border-color:var(--gold)}
@media (max-width:760px){.films .pair{grid-template-columns:1fr}}
.filmstrip{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:start}
.filmstrip .clip{grid-column:span 4}
.filmstrip .clip.tall{grid-column:span 3}
.filmstrip .clip .cap{flex-direction:column;align-items:flex-start;gap:4px}
.filmstrip .clip .cap h3{font-size:clamp(22px,2vw,28px)}
.filmnote{grid-column:span 6;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:32px;border:1px solid var(--line);border-radius:var(--radius);background:var(--slate)}
.filmnote h3{font-size:clamp(28px,3vw,40px)}
.filmnote p{color:var(--bone-dim);font-weight:300;max-width:40ch}
@media (max-width:900px){.filmstrip .clip{grid-column:span 12}.filmstrip .clip.tall{grid-column:span 6}.filmnote{grid-column:span 12}}

/* looks */
.lookgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.look{display:flex;flex-direction:column;gap:12px;margin:0}
.look[hidden]{display:none}
.look .ph{aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);position:relative;background:var(--slate)}
.look .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.look:hover .ph img{transform:scale(1.04)}
.look.wide{grid-column:span 2}.look.wide .ph{aspect-ratio:16/10}
.look .who{font-family:var(--display);font-size:22px}
.look .wear{color:var(--muted);font-size:14px}
.look .stackline{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:4px}
.look .worn{font-family:var(--mono);font-size:12px;color:var(--bone-dim);line-height:1.6}
.look .worn a{border-bottom:1px solid var(--line)}.look .worn a:hover{color:var(--gold);border-color:var(--gold)}
.look .worn span{color:var(--muted)}
.look .add{padding:8px 13px;font-size:12px}
@media (max-width:1100px){.lookgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.lookgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.lookgrid{grid-template-columns:1fr}.look.wide{grid-column:span 1}}

/* details mosaic (inspiration) */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mosaic figure{margin:0;position:relative;overflow:hidden;border-radius:var(--radius)}
.mosaic figure:nth-child(1),.mosaic figure:nth-child(5){grid-column:span 2}
.mosaic img{width:100%;height:100%;object-fit:cover;aspect-ratio:1}
.mosaic figure:nth-child(1) img,.mosaic figure:nth-child(5) img{aspect-ratio:2/1}
.mosaic figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--bone-dim);background:linear-gradient(0deg,rgba(14,12,11,.85),transparent)}
@media (max-width:760px){.mosaic{grid-template-columns:1fr 1fr}}

/* craft tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.tile img{aspect-ratio:1;object-fit:cover;width:100%;border-radius:var(--radius);margin-bottom:18px}
.tile h3{font-size:26px;margin-bottom:8px}
.tile p{color:var(--bone-dim);font-weight:300;font-size:16px}
@media (max-width:820px){.tiles{grid-template-columns:1fr}}

/* stone guide */
.stones-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;border-top:1px solid var(--line)}
.stones-list > div{display:grid;grid-template-columns:22px 1fr;gap:16px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line)}
.stones-list b{display:block;font-family:var(--display);font-size:22px;font-weight:400;margin-bottom:2px}
.stones-list span{color:var(--muted);font-size:14px}
.sw{width:22px;height:22px;border-radius:50%;margin-top:6px;box-shadow:inset -3px -4px 6px rgba(0,0,0,.6),inset 2px 3px 4px rgba(255,255,255,.12)}
@media (max-width:900px){.stones-list{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.stones-list{grid-template-columns:1fr}}

/* give banner */
.give{position:relative;padding:0;min-height:520px;display:flex;align-items:center;overflow:hidden;border-block:1px solid var(--line)}
.give img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.give::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,12,11,.85) 0%,rgba(14,12,11,.35) 60%,rgba(14,12,11,.1) 100%)}
.give .wrap{position:relative;z-index:2;display:flex;flex-direction:column;gap:18px;align-items:start;padding:72px 0}
.give h2{font-size:clamp(40px,5.4vw,76px)}.give h2 em{font-style:italic}

/* product page */
.pdp{padding:48px 0 88px}
.pdp .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.pdp-media{display:flex;flex-direction:column;gap:14px}
.pdp-main{position:relative;aspect-ratio:1;overflow:hidden;border-radius:var(--radius);background:var(--slate)}
.pdp-main img,.pdp-main video{width:100%;height:100%;object-fit:cover}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.thumbs button{aspect-ratio:1;overflow:hidden;border-radius:3px;border:1px solid var(--line);padding:0;background:var(--slate);position:relative}
.thumbs button img{width:100%;height:100%;object-fit:cover}
.thumbs button[aria-pressed="true"]{border-color:var(--gold)}
.thumbs button .f{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:22px;background:rgba(0,0,0,.35)}
.pdp-info{position:sticky;top:88px;display:flex;flex-direction:column;gap:20px}
.pdp-info h1{font-size:clamp(38px,4.4vw,64px)}
.pdp-info .stones{color:var(--muted);font-size:15px}
.pdp-info .desc{color:var(--bone-dim);font-weight:300;max-width:var(--measure)}
.pricebox{display:flex;align-items:baseline;gap:16px;font-family:var(--mono)}
.pricebox .big{font-size:28px}
.pricebox .pair{color:var(--ember-hi);font-size:14px}
.specs{border-top:1px solid var(--line);margin:0;padding:0}
.specs div{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.specs dt{color:var(--muted);margin:0}.specs dd{margin:0}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips a{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--bone-dim)}
.chips a:hover{border-color:var(--gold);color:var(--bone)}
.pdp .add.big{padding:14px 22px;font-size:14px;background:var(--ember);border-color:var(--ember);color:#fff}
.pdp .add.big.done{background:var(--slate-2);border-color:var(--gold-dim);color:var(--gold)}
@media (max-width:900px){.pdp .wrap{grid-template-columns:1fr}.pdp-info{position:static}}
.related{border-top:1px solid var(--line)}

/* custom builder */
.builder{padding:48px 0 88px}
.builder .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.preview{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px}
.stage{aspect-ratio:1;border-radius:var(--radius);background:radial-gradient(ellipse at 40% 30%,#2a231e 0%,var(--slate) 45%,#0a0908 100%);display:grid;place-items:center;overflow:hidden;position:relative;border:1px solid var(--line)}
.stage > div{width:100%;height:100%;display:grid;place-items:center}
.stage svg{width:86%;height:86%}
.stage .beadcount{position:absolute;left:16px;bottom:14px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.summary{font-family:var(--mono);font-size:13px;color:var(--bone-dim);line-height:1.7;border-top:1px solid var(--line);padding-top:14px}
.summary b{color:var(--bone);font-weight:500}
.opts{display:flex;flex-direction:column;gap:34px}
.opt h3{font-size:24px;margin-bottom:4px}
.opt .hint{color:var(--muted);font-size:14px;margin-bottom:14px}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.swatch{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;border:1px solid var(--line);border-radius:var(--radius);font-size:12px;color:var(--bone-dim);text-align:center;line-height:1.3}
.swatch .sw{width:34px;height:34px;margin:0}
.swatch[aria-pressed="true"]{border-color:var(--gold);color:var(--bone);background:var(--slate-2)}
.swatch:disabled{opacity:.35;cursor:not-allowed}
.segs{display:flex;gap:8px;flex-wrap:wrap}
.seg{border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-size:14px;color:var(--bone-dim);display:flex;flex-direction:column;align-items:start;gap:2px;text-align:left}
.seg small{font-family:var(--mono);font-size:11px;color:var(--muted)}
.seg[aria-pressed="true"]{border-color:var(--gold);color:var(--bone);background:var(--slate-2)}
.seg .plus{color:var(--gold)}
.buildprice{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:20px;flex-wrap:wrap}
.buildprice .big{font-family:var(--mono);font-size:28px}
.buildprice .pairnote{color:var(--ember-hi);font-family:var(--mono);font-size:13px}
.twin{display:flex;gap:12px;align-items:center;padding:14px 16px;border:1px dashed var(--gold-dim);border-radius:var(--radius);font-size:14px;color:var(--bone-dim)}
.twin input{accent-color:var(--ember);width:18px;height:18px}
.twin b{color:var(--bone);font-weight:500}
@media (max-width:900px){.builder .wrap{grid-template-columns:1fr}.preview{position:static}}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-family:var(--display);font-size:24px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--gold)}
.faq details[open] summary::after{content:"−"}
.faq p{color:var(--bone-dim);font-weight:300;margin-top:10px;max-width:var(--measure)}

/* footer */
footer{border-top:1px solid var(--line);padding:56px 0 40px;background:var(--slate)}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
footer .wrap > div{min-width:0}
footer h4{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 14px;font-weight:500}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;color:var(--bone-dim);font-size:14px}
footer ul a:hover{color:var(--bone)}
footer p{color:var(--bone-dim);font-size:15px;max-width:38ch;font-weight:300}
.news{display:flex;gap:8px;margin-top:16px;max-width:380px}
.news input{flex:1;min-width:0;background:var(--ground);border:1px solid var(--line);border-radius:999px;padding:12px 16px;color:var(--bone);font:inherit;font-size:14px}
.news button{border:1px solid var(--gold-dim);border-radius:999px;padding:0 18px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.fine{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:13px;flex-wrap:wrap}
@media (max-width:820px){footer .wrap{grid-template-columns:1fr 1fr}footer .wrap > div:first-child{grid-column:1/-1}}
@media (max-width:480px){footer .wrap{grid-template-columns:1fr}}

/* sticky stack bar */
.bar{position:fixed;left:50%;bottom:20px;transform:translate(-50%,120%);z-index:45;background:var(--slate-2);border:1px solid var(--gold-dim);border-radius:999px;padding:10px 12px 10px 20px;display:flex;gap:18px;align-items:center;box-shadow:0 20px 50px rgba(0,0,0,.6);transition:transform .35s cubic-bezier(.2,.7,.2,1);max-width:calc(100% - 32px)}
.bar.show{transform:translate(-50%,0)}
.bar .dots{display:flex;gap:6px}.bar .dots i{width:12px;height:12px;border-radius:50%;border:1px solid var(--gold-dim)}.bar .dots i.on{background:var(--ember);border-color:var(--ember)}
.bar .txt{font-size:14px;color:var(--bone-dim);white-space:nowrap}.bar .txt b{color:var(--bone);font-weight:500}
.bar button{background:var(--ember);color:#fff;border-radius:999px;padding:10px 16px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--slate);border-left:1px solid var(--line);z-index:51;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}
.drawer header h3{font-size:26px}
.drawer .x{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}
.items{flex:1;overflow:auto;padding:8px 24px}
.item{display:grid;grid-template-columns:72px 1fr auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.item img,.item .swatchpile{width:72px;height:72px;object-fit:cover;border-radius:3px;background:var(--ground);display:grid;place-items:center}
.item .swatchpile svg{width:64px;height:64px}
.item h5{margin:0;font-family:var(--display);font-size:19px;font-weight:400}
.item .s{color:var(--muted);font-size:13px}
.qty{display:flex;align-items:center;gap:8px;margin-top:8px}
.qty button{width:26px;height:26px;border:1px solid var(--line);border-radius:50%;font-family:var(--mono);line-height:1}
.qty span{font-family:var(--mono);font-size:14px;min-width:16px;text-align:center}
.item .p{font-family:var(--mono);font-size:14px;text-align:right}
.empty{padding:48px 0;text-align:center;color:var(--muted)}
.nudge{margin:16px 0 0;padding:12px 14px;border:1px dashed var(--gold-dim);border-radius:var(--radius);font-size:14px;color:var(--bone-dim)}
.nudge b{color:var(--gold);font-weight:500}
.sum{padding:20px 24px 24px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;font-family:var(--mono);font-size:14px}
.sum .row{display:flex;justify-content:space-between;color:var(--bone-dim)}
.sum .row.save{color:var(--ember-hi)}
.sum .row.tot{color:var(--bone);font-size:18px;padding-top:8px;border-top:1px solid var(--line);margin-top:4px}
.sum .btn{justify-content:center;margin-top:10px;width:100%}
.sum .note{font-family:var(--body);color:var(--muted);font-size:12px;text-align:center}

/* film modal */
.modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.92);display:none;place-items:center;padding:24px}
.modal.open{display:grid}
.modal video{width:min(1100px,100%);max-height:85vh;border-radius:6px;background:#000}
.modal .x{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--bone)}

.toast{position:fixed;left:50%;top:84px;transform:translate(-50%,-20px);opacity:0;background:var(--bone);color:var(--ground);padding:10px 16px;border-radius:999px;font-size:14px;z-index:70;transition:all .25s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv-words .w{display:inline-block;opacity:0;transform:translateY(.6em) rotate(1.5deg);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv-words.in .w{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.rv,.rv-words .w{opacity:1;transform:none}}