/* Today's Product v2 — gallery-night. Cinematic scenes, quiet type, foil accents. */
:root{
  --night:#14110D; --night2:#1D1813; --chamois:#E8E4D9; --paper:#F0EDE4; --ink:#1B1B1B;
  --foil:#C9A45C; --bronze:#B07A45; --teal:#3FB2B8;
  --line:rgba(232,228,217,.16); --mute:rgba(232,228,217,.62);
  --gutter:clamp(18px,4.2vw,64px);
  --serif:'Cormorant Garamond','Iowan Old Style',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --deva:'Tiro Devanagari Sanskrit','Noto Serif Devanagari',serif;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;color-scheme:dark}
body{background:var(--night);color:var(--chamois);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--foil);color:var(--night)}
.label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.mute{color:var(--mute)}
.serif{font-family:var(--serif)}
.foil{background:linear-gradient(100deg,#9C7A32 0%,#E2C57F 38%,#B88F3E 62%,#E9D091 100%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:220% 100%;animation:sheen 9s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:0 0}50%{background-position:100% 0}}
.wrap{padding-inline:var(--gutter)}

/* grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* masthead */
.mast{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px var(--gutter);transition:background .5s var(--ease),padding .5s var(--ease)}
.mast.solid{background:rgba(20,17,13,.82);backdrop-filter:blur(14px);padding-block:12px;border-bottom:1px solid var(--line)}
.mast__logo img{height:38px;width:auto}
.mast nav{display:flex;gap:clamp(16px,2.6vw,40px)}
.mast nav a{opacity:.78;transition:opacity .3s}.mast nav a:hover{opacity:1;color:var(--foil)}
.btn{display:inline-flex;align-items:center;gap:12px;padding:14px 26px;border:1px solid var(--foil);color:var(--foil);transition:all .4s var(--ease)}
.btn:hover{background:var(--foil);color:var(--night)}
.btn--solid{background:var(--foil);color:var(--night)}.btn--solid:hover{background:var(--chamois);border-color:var(--chamois)}
.mast .btn{padding:10px 18px}
@media(max-width:860px){.mast nav{display:none}}

/* hero */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;display:flex;align-items:flex-end}
.hero__media{position:absolute;inset:-6% 0;will-change:transform}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,13,.55) 0%,rgba(20,17,13,.05) 36%,rgba(20,17,13,.35) 62%,var(--night) 100%)}
.hero__copy{position:relative;z-index:2;padding:0 var(--gutter) clamp(36px,7vh,84px);width:100%}
.hero__kick{display:flex;gap:18px;align-items:center;margin-bottom:18px;color:var(--foil)}
.hero__kick i{width:48px;height:1px;background:var(--foil)}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(52px,9.4vw,168px);line-height:.92;letter-spacing:-.02em}
.hero h1 em{font-style:italic}
.hero__row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:clamp(20px,3vh,36px);flex-wrap:wrap}
.hero__sans{font-family:var(--deva);font-size:clamp(13px,1.2vw,17px);color:var(--mute);max-width:46ch}
.cue{display:flex;align-items:center;gap:12px}.cue i{width:1px;height:46px;background:var(--foil);transform-origin:top;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* hero on landscape screens: the portrait film sits as a tall panel, the headline overlaps it */
@media(min-width:861px) and (min-aspect-ratio:1/1){
  .hero__media{inset:0 clamp(40px,9vw,170px) 0 auto;width:calc(100svh * .56);min-width:340px}
  .hero::after{background:linear-gradient(0deg,var(--night) 0%,rgba(20,17,13,0) 26%),linear-gradient(180deg,rgba(20,17,13,.5) 0%,rgba(20,17,13,0) 22%)}
  .hero h1{position:relative;z-index:3;text-shadow:0 2px 40px rgba(20,17,13,.55)}
  .hero{align-items:flex-end}
}
/* marquee */
.marq{overflow:hidden;border-block:1px solid var(--line);padding:18px 0;white-space:nowrap}
.marq__t{display:inline-flex;gap:46px;animation:marq 70s linear infinite;font-family:var(--serif);font-size:clamp(22px,2.6vw,38px);font-style:italic;color:var(--mute)}
.marq__t span{display:inline-flex;gap:46px;align-items:center}.marq__t span::after{content:"✦";color:var(--foil);font-style:normal;font-size:.5em}
@keyframes marq{to{transform:translateX(-50%)}}

/* manifesto */
.mani{padding:clamp(90px,16vh,200px) var(--gutter);max-width:1500px;margin-inline:auto}
.mani__p{font-family:var(--serif);font-size:clamp(30px,4.6vw,76px);line-height:1.12;letter-spacing:-.01em}
.mani__p .w{color:rgba(232,228,217,.2);transition:color .5s}.mani__p .w.lit{color:var(--chamois)}
.mani__sig{margin-top:44px;display:flex;gap:20px;align-items:center;color:var(--foil)}.mani__sig i{width:60px;height:1px;background:var(--foil)}

/* triptych (pinned horizontal) */
.tri{position:relative;height:340vh}
.tri__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.tri__track{display:flex;gap:clamp(18px,3vw,48px);padding-inline:var(--gutter);will-change:transform}
.tri__card{flex:none;position:relative;height:min(82svh,900px);aspect-ratio:9/13}
.tri__card img{width:100%;height:100%;object-fit:cover}
.tri__card--wide{aspect-ratio:16/11}
.tri__cap{position:absolute;left:0;bottom:0;right:0;padding:60px 22px 22px;background:linear-gradient(0deg,rgba(20,17,13,.82),transparent)}
.tri__cap h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,36px)}
.tri__intro{flex:none;width:min(34vw,460px);align-self:center;padding-right:2vw}
.tri__intro h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,84px);line-height:.98;margin-top:14px}
.tri__bar{position:absolute;left:var(--gutter);right:var(--gutter);bottom:30px;height:1px;background:var(--line)}
.tri__bar i{display:block;height:100%;background:var(--foil);transform-origin:left;transform:scaleX(0)}
@media(max-width:760px){.tri__card{height:68svh}.tri__intro{width:70vw}}

/* films */
.films{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px);padding:clamp(60px,10vh,140px) var(--gutter)}
.film{position:relative;aspect-ratio:3/4;overflow:hidden}
.film video,.film img{width:100%;height:100%;object-fit:cover}
.film__cap{position:absolute;left:22px;bottom:20px;right:22px;display:flex;justify-content:space-between;align-items:flex-end}
.film__cap h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,40px);line-height:1}
.film::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,17,13,.7),transparent 45%);pointer-events:none}
.film__cap{z-index:2}
.film:nth-child(2){margin-top:clamp(40px,10vw,160px)}
@media(max-width:760px){.films{grid-template-columns:1fr}.film:nth-child(2){margin-top:0}}

/* collection index */
.idx{padding:clamp(70px,12vh,150px) var(--gutter)}
.idx__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.idx__head h2{font-family:var(--serif);font-weight:400;font-size:clamp(44px,7vw,120px);line-height:.95}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:9px 16px;border:1px solid var(--line);font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:all .3s}
.chip:hover{border-color:var(--foil)}.chip[aria-pressed=true]{background:var(--chamois);color:var(--night);border-color:var(--chamois)}
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:70px 1.6fr 1.2fr 1fr 40px;gap:20px;align-items:center;padding:clamp(16px,2.2vw,28px) 0;border-bottom:1px solid var(--line);transition:padding .5s var(--ease),color .3s}
.row:hover{padding-left:22px;color:var(--foil)}
.row__n{font-size:12px;letter-spacing:.2em;color:var(--mute)}
.row__t{font-family:var(--serif);font-size:clamp(26px,3.4vw,56px);line-height:1.02}
.row__s,.row__d{font-size:13px;color:var(--mute)}
.row__a{text-align:right;transition:transform .4s var(--ease)}.row:hover .row__a{transform:translateX(6px)}
.row__th{display:none}
.peek{position:fixed;left:0;top:0;width:min(24vw,340px);aspect-ratio:9/13;pointer-events:none;z-index:40;opacity:0;transform:translate3d(0,0,0) scale(.92);transition:opacity .35s,scale .35s;overflow:hidden}
.peek.on{opacity:1}.peek img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){
  .row{grid-template-columns:64px 1fr 28px;grid-template-areas:"th t a" "th s a"}
  .row__n,.row__d{display:none}.row__th{display:block;grid-area:th;aspect-ratio:3/4;overflow:hidden}.row__th img{width:100%;height:100%;object-fit:cover}
  .row__t{grid-area:t;font-size:26px}.row__s{grid-area:s}.row__a{grid-area:a}.peek{display:none}
}
@media(hover:none){.peek{display:none}}

/* business */
.biz{background:var(--chamois);color:var(--ink);padding:clamp(80px,14vh,180px) var(--gutter)}
.biz__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,6vw,110px);max-width:1500px;margin-inline:auto}
.biz h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6vw,100px);line-height:.98}
.biz h2 em{color:#7A4623}
.biz p{max-width:52ch;margin-top:24px;color:#4a4339}
.biz .btn{border-color:var(--ink);color:var(--ink);margin-top:34px}.biz .btn:hover{background:var(--ink);color:var(--chamois)}
.steps{list-style:none;border-top:1px solid rgba(27,27,27,.2)}
.steps li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid rgba(27,27,27,.2)}
.steps b{font-family:var(--serif);font-weight:400;font-size:34px;color:#7A4623;line-height:1}
.steps h3{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.1}.steps span{color:#5b5347;font-size:14px}
@media(max-width:860px){.biz__grid{grid-template-columns:1fr}}

/* footer */
.foot{padding:clamp(60px,10vh,120px) var(--gutter) 34px}
.foot__big{font-family:var(--serif);font-size:clamp(44px,9vw,160px);line-height:.92;letter-spacing:-.02em}
.foot__cols{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-top:60px;padding-top:30px;border-top:1px solid var(--line)}
.foot img{height:46px;width:auto;margin-bottom:14px}.foot a:hover{color:var(--foil)}
.foot small{display:block;margin-top:40px;color:var(--mute);font-size:12px}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}.rv.in{opacity:1;transform:none}

/* ----- product page ----- */
.pp{padding:120px var(--gutter) 0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,90px);align-items:start;max-width:1640px;margin-inline:auto}
.gal{position:sticky;top:88px;display:grid;grid-template-columns:72px 1fr;gap:14px}
.gal__th{display:flex;flex-direction:column;gap:10px}
.gal__th button{aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line);opacity:.55;transition:all .3s;background:var(--night2)}
.gal__th button[aria-current=true]{opacity:1;border-color:var(--foil)}.gal__th img{width:100%;height:100%;object-fit:cover}
.gal__main{position:relative;aspect-ratio:9/13;overflow:hidden;background:var(--night2)}
.gal__main img,.gal__main video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.gal__main .on{opacity:1}
.gal__main .cutbg{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 30%,#2a231b,#14110D)}
.gal__main img.cut{object-fit:contain;padding:9%}
.gal__note{position:absolute;left:12px;bottom:12px;font-size:11px;color:var(--chamois);background:rgba(20,17,13,.62);backdrop-filter:blur(6px);padding:5px 10px;letter-spacing:.06em;z-index:2}
.info h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,84px);line-height:.98;margin:12px 0 18px}
.info .lead{color:var(--mute);max-width:52ch}
.blk{padding:26px 0;border-top:1px solid var(--line);margin-top:26px}
.blk h4{margin-bottom:14px;color:var(--foil)}
.sizes{display:flex;gap:8px;flex-wrap:wrap}
.sz{padding:12px 16px;border:1px solid var(--line);font-size:13px;transition:all .3s;text-align:left}
.sz small{display:block;color:var(--mute);font-size:11px}
.sz[aria-pressed=true]{border-color:var(--foil);background:rgba(201,164,92,.1)}
.sw{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.sw i{width:28px;height:28px;border-radius:50%;border:1px solid var(--line)}
.feat{list-style:none;columns:2;column-gap:28px}.feat li{padding:7px 0;border-bottom:1px solid var(--line);break-inside:avoid;font-size:14px}
.feat li::before{content:"—";color:var(--foil);margin-right:10px}
.badges{display:flex;gap:8px;flex-wrap:wrap}.badges span{padding:6px 12px;border:1px solid var(--line);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.decos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.deco{padding:14px;border:1px solid var(--line);font-size:13px}.deco b{display:block;font-family:var(--serif);font-size:20px;font-weight:500}
.deco.is-off{opacity:.45}
.deco em{font-style:normal;font-size:11px;color:var(--foil);letter-spacing:.12em;text-transform:uppercase}
.quote{background:var(--night2);padding:24px;border:1px solid var(--line)}
.quote .f{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.quote label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.quote input,.quote select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--chamois);padding:8px 0;font:inherit;border-radius:0}
.quote input:focus,.quote select:focus{outline:0;border-color:var(--foil)}
.quote select option{background:var(--night);color:var(--chamois)}
.quote .btn{width:100%;justify-content:center}
.quote small{display:block;margin-top:12px;color:var(--mute);font-size:12px}
.more{padding:clamp(70px,12vh,150px) 0 40px}
.more__h{padding:0 var(--gutter);display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px}
.more__h h2{font-family:var(--serif);font-weight:400;font-size:clamp(36px,5vw,80px);line-height:1}
.rail{display:flex;gap:18px;overflow-x:auto;padding:0 var(--gutter) 20px;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}
.card{flex:none;width:clamp(200px,22vw,320px)}
.card__i{aspect-ratio:9/13;overflow:hidden;background:var(--night2)}.card__i img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}.card:hover img{transform:scale(1.05)}
.card h3{font-family:var(--serif);font-weight:400;font-size:24px;margin-top:12px;line-height:1.05}
.band{margin-top:clamp(60px,10vh,120px);position:relative;height:min(90svh,820px);overflow:hidden}
.band video,.band img{width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,17,13,.6),transparent 60%)}
.band h2{position:absolute;z-index:2;left:var(--gutter);bottom:clamp(30px,8vh,90px);font-family:var(--serif);font-weight:400;font-size:clamp(36px,6vw,100px);line-height:.98;max-width:12ch}
@media(max-width:960px){.pp{grid-template-columns:1fr;padding-top:96px}.gal{position:static;grid-template-columns:1fr}.gal__th{flex-direction:row;order:2}.gal__th button{width:64px}.feat{columns:1}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* studio call-to-action */
.studio-cta{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(28px,6vw,110px);align-items:center;padding:clamp(70px,12vh,150px) var(--gutter);max-width:1500px;margin-inline:auto}
.studio-cta__img img{width:100%;height:auto}
.studio-cta h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.6vw,92px);line-height:.98;margin:14px 0 20px}
.studio-cta p{max-width:48ch;margin-bottom:30px}
@media(max-width:860px){.studio-cta{grid-template-columns:1fr}}

/* ----- Bespoke PDP Configurator, Pricing Engine & Drawers ----- */
.cfg-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:10px}
.cfg-tile{position:relative;padding:14px 16px;border:1px solid var(--line);background:rgba(29,24,19,.55);text-align:left;transition:all .25s var(--ease);display:flex;flex-direction:column;gap:4px}
.cfg-tile:hover{border-color:rgba(201,164,92,.55)}
.cfg-tile[aria-pressed=true]{border-color:var(--foil);background:rgba(201,164,92,.11);box-shadow:inset 0 0 0 1px var(--foil)}
.cfg-tile__top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cfg-tile__name{font-family:var(--serif);font-size:20px;font-weight:500;line-height:1.15;color:var(--chamois)}
.cfg-tile__delta{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--foil);white-space:nowrap}
.cfg-tile__sub{font-size:12.5px;color:var(--mute);line-height:1.4}
.cfg-tile__tag{display:inline-block;margin-top:4px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.cfg-tile.is-unwindable{opacity:.78;border-style:dashed}

.pin-row{display:flex;gap:10px;margin-top:12px;align-items:center;flex-wrap:wrap}
.pin-row input{background:var(--night2);border:1px solid var(--line);color:var(--chamois);padding:9px 12px;width:150px;font:inherit;font-size:13px}
.pin-row input:focus{outline:0;border-color:var(--foil)}
.pin-status{font-size:12.5px;color:var(--mute)}
.pin-status.ok{color:#7AD3A8}
.pin-status.warn{color:#E5B567}

/* Quantity Combobox + Live Price Summary */
.price-card{background:var(--night2);border:1px solid var(--line);padding:22px 24px;margin-top:26px}
.price-card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--line)}
.price-card__tot{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price-card__mrp{font-size:16px;color:var(--mute);text-decoration:line-through}
.price-card__sale{font-family:var(--serif);font-size:clamp(32px,3.4vw,46px);line-height:1;color:var(--chamois)}
.price-card__promo{padding:4px 9px;background:rgba(122,211,168,.14);border:1px solid rgba(122,211,168,.4);color:#7AD3A8;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.price-card__unit{font-size:13px;color:var(--mute);margin-top:4px}
.qty-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end;margin-top:18px}
.qty-tiers{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.qty-pill{padding:8px 12px;border:1px solid var(--line);font-size:12.5px;transition:all .2s;position:relative}
.qty-pill:hover{border-color:var(--foil)}
.qty-pill[aria-pressed=true]{border-color:var(--foil);background:rgba(201,164,92,.14);color:var(--foil)}
.qty-pill b{display:block;font-weight:500}
.qty-pill small{font-size:10.5px;color:var(--mute)}
.qty-pill .rec{position:absolute;top:-8px;right:-4px;background:var(--foil);color:var(--night);font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:1px 5px;font-weight:600}
.qty-custom{display:flex;flex-direction:column;gap:5px}
.qty-custom label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.qty-custom input{width:104px;background:var(--night);border:1px solid var(--line);color:var(--chamois);padding:9px 10px;font:inherit;text-align:center}
.qty-custom input:focus{outline:0;border-color:var(--foil)}
.qty-err{font-size:12px;color:#E59866;margin-top:8px}
.link-btn{display:inline-flex;align-items:center;gap:6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--foil);border-bottom:1px solid rgba(201,164,92,.45);padding-bottom:2px;margin-top:12px;transition:opacity .2s}
.link-btn:hover{opacity:.8}

/* Dual Next-Step CTAs (Siteflow pattern) */
.cta-stack{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.cta-stack .btn{justify-content:center;text-align:center;padding:15px 18px;flex-direction:column;gap:3px}
.cta-stack .btn small{font-size:10px;letter-spacing:.08em;text-transform:none;opacity:.82;font-weight:400}
@media(max-width:640px){.cta-stack{grid-template-columns:1fr}.qty-row{grid-template-columns:1fr}}

/* Slide-over Drawers (Pricing Guide, Specs & Templates, Browse Templates Gallery) */
.vp-drawer{position:fixed;inset:0;z-index:80;pointer-events:none}
.vp-drawer__scrim{position:absolute;inset:0;background:rgba(10,8,6,.72);backdrop-filter:blur(4px);opacity:0;transition:opacity .35s var(--ease)}
.vp-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(580px,94vw);background:var(--night2);border-left:1px solid var(--line);padding:32px 28px 44px;overflow-y:auto;transform:translateX(100%);transition:transform .45s var(--ease);box-shadow:-18px 0 50px rgba(0,0,0,.55)}
.vp-drawer__panel--wide{width:min(940px,96vw)}
.vp-drawer.open{pointer-events:auto}
.vp-drawer.open .vp-drawer__scrim{opacity:1}
.vp-drawer.open .vp-drawer__panel{transform:none}
.vp-drawer__x{position:absolute;right:20px;top:18px;width:36px;height:36px;border:1px solid var(--line);display:grid;place-items:center;font-size:22px;line-height:1;color:var(--chamois)}
.vp-drawer__x:hover{border-color:var(--foil);color:var(--foil)}
.vp-drawer h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.2vw,40px);line-height:1.05;margin-bottom:6px}

/* Pricing Guide Table */
.pg-table{width:100%;border-collapse:collapse;margin-top:20px;font-size:13.5px}
.pg-table th{text-align:left;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);padding:10px 8px;border-bottom:1px solid var(--line)}
.pg-table td{padding:13px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.pg-table tr{cursor:pointer;transition:background .2s}
.pg-table tbody tr:hover{background:rgba(201,164,92,.07)}
.pg-table tr.is-sel{background:rgba(201,164,92,.14)}
.pg-badge{display:inline-block;margin-left:8px;padding:2px 7px;background:var(--foil);color:var(--night);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.pg-save{color:#7AD3A8;font-size:12px}

/* Specs & Bleed Diagram */
.spec-diag{background:var(--night);border:1px solid var(--line);padding:20px;margin:18px 0;display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center}
.spec-legend{display:flex;flex-direction:column;gap:10px;font-size:13px}
.spec-legend div{display:flex;align-items:flex-start;gap:10px}
.spec-dot{width:14px;height:14px;flex:none;margin-top:3px}
.dl-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.dl-chip{padding:10px 14px;border:1px solid var(--line);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;transition:all .2s}
.dl-chip:hover{border-color:var(--foil);color:var(--foil)}
@media(max-width:600px){.spec-diag{grid-template-columns:1fr}}

/* Templates Gallery Drawer (Live Personalisation Widget + Cards) */
.tpl-bar{background:var(--night);border:1px solid var(--line);padding:16px;margin:16px 0;display:grid;grid-template-columns:1.2fr 1fr auto;gap:12px;align-items:end}
.tpl-bar label{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:5px}
.tpl-bar input[type=text]{width:100%;background:var(--night2);border:1px solid var(--line);color:var(--chamois);padding:9px 12px;font:inherit}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:16px}
.tpl-card{border:1px solid var(--line);background:var(--night);padding:14px;display:flex;flex-direction:column;gap:10px;transition:all .25s}
.tpl-card:hover{border-color:var(--foil)}
.tpl-card__stage{aspect-ratio:3/4;background:radial-gradient(90% 80% at 50% 30%,#2c241b,#15110d);border:1px solid var(--line);position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:18px;text-align:center;overflow:hidden}
.tpl-card__stage::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(201,164,92,.28);pointer-events:none}
.tpl-card__yr{position:absolute;top:16px;right:18px;font-family:var(--serif);font-size:13px;letter-spacing:.18em;color:var(--foil)}
.tpl-card__mark{font-family:var(--serif);color:var(--foil);line-height:1.15;word-break:break-word;max-width:90%}
.tpl-card__sub{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-top:6px}
.tpl-card__meta{display:flex;justify-content:space-between;align-items:center;font-size:12px}
@media(max-width:720px){.tpl-bar{grid-template-columns:1fr}}