:root{--paper:#F6F3EA;--card:#fff;--ink:#1B1B1B;--mute:#6C6760;--line:#DDD7C8;--bronze:#7A4623;--foil:#B88F3E;--sel:#F1E9D6;--font:'Hanken Grotesk',system-ui,sans-serif;--serif:'Cormorant Garamond',Georgia,serif;--gutter:clamp(16px,3.6vw,56px)}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{color-scheme:light}
body{background:var(--paper);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,select,input,textarea{font:inherit;color:inherit}button{cursor:pointer;background:none;border:0}
img{display:block;max-width:100%}
.top{display:flex;align-items:center;gap:28px;padding:14px var(--gutter);border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:20}
.logo img{height:40px;width:auto}.top nav{display:flex;gap:22px;margin-left:auto;font-size:12px;letter-spacing:.16em;text-transform:uppercase}.top nav a{color:var(--mute);text-decoration:none}.top nav a:hover{color:var(--ink)}
.tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--foil);color:var(--bronze);padding:5px 10px}
.pdp{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);padding:clamp(18px,3vw,40px) var(--gutter) 80px;max-width:1500px;margin-inline:auto;align-items:start}
.left{position:sticky;top:78px;min-width:0}.right{min-width:0}
.stagewrap{position:relative;background:#D9D3C4;border:1px solid var(--line);overflow:hidden;display:flex;justify-content:center}
#stage{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100svh - 190px);touch-action:none;cursor:crosshair}
.hint{position:absolute;left:14px;top:12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.cmpbtn{position:absolute;left:14px;bottom:14px;padding:9px 14px;background:rgba(27,27,27,.86);color:#F6F3EA;font-size:11px;letter-spacing:.14em;text-transform:uppercase;user-select:none;touch-action:none}
#detail{position:absolute;right:14px;bottom:14px;width:130px;height:130px;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.2);background:#d9d4c8}
.dlabel{position:absolute;right:16px;bottom:148px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.sws{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}.sws .sw{flex:none}
.sw{width:54px;aspect-ratio:3/4;border:1px solid var(--line);padding:3px;background:#fff;opacity:.7;transition:all .25s}
.sw img{width:100%;height:100%;object-fit:cover}.sw[aria-pressed=true]{opacity:1;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.4vw,64px);line-height:1;margin:8px 0 12px}
.lead{color:var(--mute);max-width:54ch;font-size:14px}
.step{background:var(--card);border:1px solid var(--line);padding:18px 20px;margin-top:14px}
.step h2{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:10px;margin-bottom:12px}
.step h2 b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#F6F3EA;font-size:11px;letter-spacing:0}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{padding:10px 14px;border:1px solid var(--line);background:#fff;font-size:13px;transition:all .2s;text-align:left;line-height:1.25}
.pill i{display:block;font-style:normal;font-size:10.5px;color:var(--mute);letter-spacing:.04em}
.pill:hover{border-color:var(--ink)}
.pill[aria-pressed=true]{border-color:var(--ink);background:var(--sel);box-shadow:inset 0 0 0 1px var(--ink)}
.sel{display:block;position:relative}.sel select{width:100%;appearance:none;border:1px solid var(--line);background:#fff;padding:12px 38px 12px 14px;border-radius:0}
.sel::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.sel.small{width:110px}.row{display:flex;gap:10px;margin-top:12px;align-items:flex-start;flex-wrap:wrap}
textarea{flex:1;min-width:160px;border:1px solid var(--line);padding:10px 12px;resize:none;background:#fff}
.up{flex-direction:column;gap:8px}.up small,.note{color:var(--mute);font-size:12px;margin-top:8px}.chk{font-size:13px;display:flex;gap:8px;align-items:center}
.sliders{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}.sliders label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:block}
input[type=range]{width:100%;accent-color:var(--ink);margin-top:6px}
.inks{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}.inks div{display:flex;gap:8px}
.ink{width:26px;height:26px;border-radius:50%;background:var(--c);border:1px solid var(--line)}.ink[aria-pressed=true]{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--ink)}
.cta{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.btn{padding:15px 26px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;transition:all .25s;border-radius:999px;flex:1;text-align:center}
.btn.primary{background:var(--ink);color:#F6F3EA;border:1px solid var(--ink)}.btn.primary:hover{background:var(--bronze);border-color:var(--bronze)}
.btn.ghost{border:1px solid var(--ink);background:#fff}.btn.ghost:hover{background:var(--sel)}
.link{margin-top:14px;font-size:13px;text-decoration:underline;text-underline-offset:4px;color:var(--bronze)}
.sticky{display:none}
.drawer{position:fixed;inset:0;z-index:60;pointer-events:none}
.drawer .scrim{position:absolute;inset:0;background:rgba(27,27,27,.42);opacity:0;transition:opacity .35s}
.drawer .panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,92vw);background:#fff;padding:32px 28px;overflow:auto;transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.7,.1,1);box-shadow:-8px 0 30px rgba(0,0,0,.12)}
.drawer.open{pointer-events:auto}.drawer.open .scrim{opacity:1}.drawer.open .panel{transform:none}
.drawer h3{font-family:var(--serif);font-weight:400;font-size:34px;margin-bottom:6px}.drawer h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin:22px 0 8px;color:var(--bronze)}
.drawer ul{list-style:none}.drawer li{padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}.drawer p{font-size:14px;color:#47423b;margin-top:6px}.mute{color:var(--mute)!important;font-size:12px!important}
.x{position:absolute;right:16px;top:10px;font-size:30px;line-height:1}
@media(max-width:980px){
  #detail{width:92px;height:92px}.dlabel{bottom:110px}
  .pdp{grid-template-columns:minmax(0,1fr)}.left{position:static}#stage{max-height:70svh}
  .top nav{display:none}.tag{margin-left:auto}
  .sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));align-items:center;justify-content:space-between;gap:12px;box-shadow:0 -2px 8px rgba(0,0,0,.09);font-size:13px}
  .sticky .btn{flex:none;padding:12px 20px}.cta .primary{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}