/* Self-hosted webfonts — no third-party requests at runtime.
   Fraunces & Inter, SIL Open Font License 1.1 */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/fraunces-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/fraunces-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/fraunces-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');}

/* =====================================================================
   SANGATH SHILPO — design system
   ===================================================================== */

:root{
  --paper:#FAF8F4;
  --paper-2:#F3EFE7;
  --paper-3:#EAE4D8;
  --ink:#1A1815;
  --ink-2:#4A453D;
  --ink-3:#7C756A;
  --brass:#7A5C2E;
  --brass-lt:#A98B52;
  --line:#DDD6C8;
  --line-2:#C9C0AE;
  --sold:#8C2F22;
  --ok:#3E6B4F;

  --f-display:'Fraunces',Georgia,'Times New Roman',serif;
  --f-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --w:1280px;
  --pad:clamp(1.1rem,4vw,2.75rem);
  --r:2px;
  --t:.22s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-ui);font-size:16px;line-height:1.6;
  font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.14;margin:0;letter-spacing:-.01em}
p{margin:0 0 1em}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

.wrap{max-width:var(--w);margin:0 auto;padding-inline:var(--pad)}
.narrow{max-width:760px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-variant-numeric:tabular-nums}

/* ---------- demo banner ---------- */
.demobar{background:var(--ink);color:#F3EFE7;font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;padding:.5rem var(--pad);display:flex;gap:1rem;
  align-items:center;justify-content:center;text-align:center}
.demobar b{color:#D9BE84;font-weight:600}
.demobar button{background:none;border:0;color:#8F887C;cursor:pointer;font-size:1rem;line-height:1;padding:0 .2rem}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(250,248,244,.94);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
@media(max-width:1040px){
  /* No backdrop-filter here: it would trap the fixed-position menu inside the header. */
  .hdr{backdrop-filter:none;background:var(--paper)}
}
.hdr-in{max-width:var(--w);margin:0 auto;padding:.85rem var(--pad);
  display:flex;align-items:center;gap:1.5rem}
.brand{display:flex;flex-direction:column;line-height:1;margin-right:auto}
.brand b{font-family:var(--f-display);font-size:1.06rem;font-weight:600;letter-spacing:.13em;white-space:nowrap}
@media(max-width:560px){
  .brand b{font-size:.95rem;letter-spacing:.1em}
  .brand span{font-size:.55rem}
  .util a[title="Search"]{display:none}
  .hdr-in{gap:.8rem;padding-block:.7rem}
}
.brand span{font-size:.6rem;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3);margin-top:.32rem}
.nav{display:flex;gap:1.6rem;align-items:center}
/* mobile-menu-only furniture, hidden in the desktop bar */
.nav .close,.nav .navhead,.nav .navsub{display:none}
.nav a{font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);
  padding:.35rem 0;border-bottom:1px solid transparent;transition:var(--t);white-space:nowrap}
.nav a:hover,.nav a[aria-current]{color:var(--ink);border-bottom-color:var(--brass)}
.util{display:flex;gap:1.05rem;align-items:center;font-size:.8rem;letter-spacing:.05em}
.util a{color:var(--ink-2);transition:var(--t)}.util a:hover{color:var(--brass)}
.cartdot{background:var(--brass);color:#fff;border-radius:99px;padding:.05rem .42rem;
  font-size:.66rem;margin-left:.28rem;font-variant-numeric:tabular-nums}
.burger{display:none;background:none;border:1px solid var(--line-2);border-radius:var(--r);
  padding:.4rem .6rem;cursor:pointer;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}

@media(max-width:1040px){
  .nav{display:none}
  .nav.open{display:flex;position:fixed;inset:0;background:var(--paper);flex-direction:column;
    align-items:stretch;justify-content:flex-start;gap:0;z-index:200;padding:1.1rem var(--pad) 2rem;
    overflow-y:auto;-webkit-overflow-scrolling:touch;animation:navin .22s ease both}
  .nav.open .navhead{display:flex!important;align-items:center;justify-content:space-between;
    padding-bottom:1.1rem;border-bottom:1px solid var(--line);margin-bottom:.5rem}
  .nav.open .navhead b{font-family:var(--f-display);font-size:1rem;letter-spacing:.13em}
  .nav a{font-size:1.12rem;letter-spacing:.04em;text-transform:none;padding:.95rem 0;
    border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;min-height:52px}
  .nav a::after{content:'›';color:var(--line-2);font-size:1.3rem}
  .nav a[aria-current]{color:var(--brass);border-bottom-color:var(--line)}
  .nav.open .navsub{display:grid!important;margin-top:1.4rem;gap:.1rem}
  .nav.open .navsub-h{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.3rem}
  .nav.open .navsub a{font-size:.98rem;padding:.75rem 0;min-height:46px}
  .burger{display:block;order:3;min-height:40px}
  .nav.open .close{display:inline-flex!important;align-items:center;justify-content:center;width:40px;height:40px;
    font-size:1.5rem;border:1px solid var(--line-2);border-radius:var(--r);background:none;cursor:pointer;
    position:static;line-height:1}
}
@keyframes navin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
body.navopen{overflow:hidden}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.82rem 1.6rem;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;cursor:pointer;
  border-radius:var(--r);transition:var(--t);text-align:center}
.btn:hover{background:var(--brass);border-color:var(--brass)}
.btn.ghost{background:none;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.sm{padding:.55rem 1rem;font-size:.7rem}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.block{width:100%}
.lnk{border-bottom:1px solid var(--brass);color:var(--brass);transition:var(--t)}
.lnk:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- type helpers ---------- */
.eyebrow{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin:0 0 .9rem}
.dsp-xl{font-size:clamp(2.4rem,6.2vw,4.6rem)}
.dsp-l{font-size:clamp(1.9rem,4vw,3rem)}
.dsp-m{font-size:clamp(1.4rem,2.6vw,2rem)}
.dsp-s{font-size:clamp(1.1rem,1.8vw,1.35rem)}
.lead{font-size:1.09rem;color:var(--ink-2);max-width:62ch}
.muted{color:var(--ink-3)}
.small{font-size:.85rem}
.tiny{font-size:.74rem;letter-spacing:.04em}
.sec{padding-block:clamp(3rem,7vw,6rem)}
.sec-hd{display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;margin-bottom:2.2rem;border-bottom:1px solid var(--line);padding-bottom:1rem;flex-wrap:wrap}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;padding-block:clamp(2.5rem,6vw,5.5rem)}
.hero-img{position:relative;background:var(--paper-3)}
.hero-img img{width:100%;aspect-ratio:4/3.2;object-fit:cover}
.hero-cap{font-size:.76rem;color:var(--ink-3);margin-top:.7rem;letter-spacing:.03em}
@media(max-width:860px){.hero{grid-template-columns:1fr;gap:2rem}}

/* ---------- artwork grid ---------- */
.grid{display:grid;gap:clamp(1.4rem,3vw,2.6rem)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1040px){.g-4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.g-4,.g-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.g-4,.g-3,.g-2{grid-template-columns:1fr}}

.card{display:block;position:relative}
.card-fig{position:relative;background:var(--paper-3);overflow:hidden;
  display:flex;align-items:center;justify-content:center;aspect-ratio:1/1.06}
.card-fig img{width:100%;height:100%;object-fit:contain;transition:transform .5s cubic-bezier(.2,0,.2,1)}
.card:hover .card-fig img{transform:scale(1.035)}
.card-body{padding-top:.85rem}
.card-t{font-family:var(--f-display);font-size:1.03rem;font-weight:600;line-height:1.25}
.card-a{font-size:.83rem;color:var(--ink-2);margin-top:.15rem}
.card-m{font-size:.76rem;color:var(--ink-3);margin-top:.32rem}
.card-p{font-size:.87rem;margin-top:.5rem;font-variant-numeric:tabular-nums}
.flag{position:absolute;top:.7rem;left:.7rem;background:var(--sold);color:#fff;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;padding:.28rem .6rem;border-radius:var(--r)}
.flag.res{background:var(--brass)}
.flag.new{background:var(--ink)}

/* ---------- filters ---------- */
.layout{display:grid;grid-template-columns:238px 1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
@media(max-width:900px){.layout{grid-template-columns:1fr!important}}
.filters{position:sticky;top:88px}
@media(max-width:900px){.filters{position:static;border:1px solid var(--line);padding:1.1rem;background:var(--paper-2)}}
.fgroup{border-bottom:1px solid var(--line);padding:1rem 0}
.fgroup:first-child{padding-top:0}
.fgroup h4{font-family:var(--f-ui);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .7rem;font-weight:600}
.fopt{display:flex;align-items:center;gap:.55rem;font-size:.86rem;padding:.19rem 0;cursor:pointer;color:var(--ink-2)}
.fopt input{accent-color:var(--brass);margin:0;width:14px;height:14px}
.fopt:hover{color:var(--ink)}
.fopt .n{margin-left:auto;font-size:.72rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.swatches{display:flex;flex-wrap:wrap;gap:.42rem}
.sw{width:26px;height:26px;border-radius:99px;border:1px solid var(--line-2);cursor:pointer;transition:var(--t)}
.sw[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}
.toolbar{display:flex;align-items:center;gap:1rem;justify-content:space-between;
  border-bottom:1px solid var(--line);padding-bottom:.9rem;margin-bottom:1.8rem;flex-wrap:wrap}
select.sel{border:1px solid var(--line-2);background:var(--paper);padding:.45rem .7rem;
  border-radius:var(--r);font-size:.82rem}
.chips{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.2rem}
.chip{display:inline-flex;gap:.42rem;align-items:center;border:1px solid var(--line-2);
  background:var(--paper-2);font-size:.74rem;padding:.28rem .6rem;border-radius:99px;cursor:pointer}
.chip b{font-weight:500}
.chip:hover{border-color:var(--ink)}

/* ---------- artwork detail ---------- */
.aw{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,4.5vw,4rem);align-items:start;
  padding-top:clamp(1.5rem,3vw,2.5rem)}
@media(max-width:940px){.aw{grid-template-columns:1fr}}
.aw>div:first-child{position:sticky;top:88px;align-self:start}
@media(max-width:940px){.aw>div:first-child{position:static}}
.aw-stage{position:relative;background:var(--paper-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;padding:clamp(1rem,3vw,2.6rem);
  min-height:min(66vh,560px);overflow:hidden;cursor:zoom-in}
.aw-stage img{max-height:min(66vh,580px);width:auto;max-width:100%;object-fit:contain;
  box-shadow:0 24px 56px -28px rgba(26,24,21,.5);transition:transform .35s}
.aw-thumbs{display:flex;gap:.6rem;margin-top:.8rem;flex-wrap:wrap}
.aw-thumbs button{width:66px;height:66px;border:1px solid var(--line);background:var(--paper-2);
  padding:0;cursor:pointer;overflow:hidden}
.aw-thumbs button[aria-pressed="true"]{border-color:var(--ink)}
.aw-thumbs img{width:100%;height:100%;object-fit:cover}
.aw-side{position:static}
@media(max-width:940px){.aw-side{position:static}}
@media(max-width:600px){.aw-stage{min-height:auto;padding:1rem}.aw-stage img{max-height:56vh}}
.aw-title{font-size:clamp(1.7rem,3.2vw,2.35rem);margin-bottom:.35rem}
.aw-meta{font-size:.9rem;color:var(--ink-2);margin-bottom:1.4rem}
.aw-price{font-size:1.55rem;font-family:var(--f-display);font-variant-numeric:tabular-nums}
.aw-price small{font-size:.8rem;color:var(--ink-3);font-family:var(--f-ui);display:block;margin-top:.2rem}
.aw-actions{display:flex;flex-direction:column;gap:.6rem;margin:1.2rem 0 1.6rem}
.panel{border:1px solid var(--line);background:var(--paper-2);padding:1.05rem 1.15rem;margin-bottom:1rem}
.panel h4{font-family:var(--f-ui);font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--brass);margin:0 0 .6rem;font-weight:600}
.dl{display:grid;grid-template-columns:auto 1fr;gap:.42rem 1.1rem;font-size:.86rem;margin:0}
.dl dt{color:var(--ink-3)}.dl dd{margin:0}
.splitbar{display:flex;height:9px;border-radius:99px;overflow:hidden;margin:.55rem 0 .5rem;border:1px solid var(--line-2)}
.splitbar i{display:block;height:100%}
.splitkey{display:flex;gap:1rem;flex-wrap:wrap;font-size:.74rem;color:var(--ink-2)}
.splitkey span{display:flex;align-items:center;gap:.35rem}
.splitkey em{width:9px;height:9px;border-radius:99px;font-style:normal}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(20,18,15,.96);z-index:200;display:none;
  align-items:center;justify-content:center;padding:2rem}
.lb.on{display:flex}
.lb img{max-width:96vw;max-height:92vh;object-fit:contain;cursor:zoom-out}
.lb .x{position:absolute;top:1.2rem;right:1.6rem;color:#fff;background:none;border:0;font-size:1.7rem;cursor:pointer}
.lb .hint{position:absolute;bottom:1.2rem;left:0;right:0;text-align:center;color:#9d968a;font-size:.76rem}

/* ---------- notice / attribution ---------- */
.notice{border-left:3px solid var(--brass);background:var(--paper-2);padding:.85rem 1.05rem;
  font-size:.85rem;color:var(--ink-2);margin-bottom:1.2rem}
.notice b{color:var(--ink)}
.notice.warn{border-color:var(--sold)}
.notice.ok{border-color:var(--ok)}

/* ---------- tables ---------- */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:calc(var(--pad)*-1);
  padding-inline:var(--pad)}
@media(min-width:901px){.tblwrap{margin-inline:0;padding-inline:0}}
.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl.wide{min-width:560px}
@media(min-width:901px){.tbl.wide{min-width:0}}
@media(max-width:900px){.tbl th,.tbl td{padding:.6rem .6rem;font-size:.82rem}}
.tbl th{text-align:left;font-family:var(--f-ui);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper);background:var(--brass);padding:.7rem .85rem;font-weight:600}
.tbl td{padding:.75rem .85rem;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:nth-child(even) td{background:var(--paper-2)}

/* ---------- venue / artist / tier cards ---------- */
.vcard{border:1px solid var(--line);background:var(--paper-2);overflow:hidden;display:flex;flex-direction:column}
.vcard img{aspect-ratio:16/10;object-fit:cover;width:100%}
.vcard .in{padding:1.15rem}
.tier{display:inline-block;font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;
  border:1px solid var(--brass);color:var(--brass);padding:.2rem .55rem;border-radius:99px;margin-bottom:.6rem}
.acard{text-align:left}
.acard .av{width:100%;aspect-ratio:1;background:var(--paper-3);display:flex;align-items:center;
  justify-content:center;font-family:var(--f-display);font-size:2.2rem;color:var(--brass);overflow:hidden}
.acard .av img{width:100%;height:100%;object-fit:cover}

/* ---------- cart / checkout ---------- */
.crow{display:grid;grid-template-columns:110px 1fr auto;gap:1.2rem;padding:1.2rem 0;
  border-bottom:1px solid var(--line);align-items:start}
.crow img{width:110px;height:110px;object-fit:contain;background:var(--paper-2)}
@media(max-width:620px){.crow{grid-template-columns:80px 1fr}.crow img{width:80px;height:80px}
  .crow .cact{grid-column:2}}
.timer{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;color:var(--brass);
  border:1px solid var(--line-2);border-radius:99px;padding:.16rem .6rem;font-variant-numeric:tabular-nums}
.timer.low{color:var(--sold);border-color:var(--sold)}
.field{margin-bottom:.95rem}
.field label{display:block;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.32rem}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line-2);background:var(--paper);
  padding:.7rem .8rem;border-radius:var(--r);font-size:1rem}
@media(max-width:900px){
  input,select,textarea{font-size:16px!important}
  .sel{font-size:16px!important;padding:.55rem .7rem}
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--brass);outline-offset:-1px;border-color:var(--brass)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.sumline{display:flex;justify-content:space-between;padding:.42rem 0;font-size:.9rem}
.sumline.total{border-top:1px solid var(--line-2);margin-top:.6rem;padding-top:.8rem;
  font-size:1.12rem;font-family:var(--f-display)}
.paymethods{display:grid;gap:.55rem}
.paymethod{display:flex;gap:.7rem;align-items:center;border:1px solid var(--line-2);
  padding:.75rem .9rem;cursor:pointer;background:var(--paper);border-radius:var(--r)}
.paymethod[aria-pressed="true"]{border-color:var(--ink);background:var(--paper-2)}
.paymethod b{font-weight:500;font-size:.92rem}
.paymethod span{font-size:.76rem;color:var(--ink-3);margin-left:auto}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;gap:1.1rem}
.step{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--f-display);font-size:1.05rem;color:var(--brass);
  border:1px solid var(--line-2);border-radius:99px;width:2.3rem;height:2.3rem;
  display:flex;align-items:center;justify-content:center}
.step h4{font-family:var(--f-ui);font-size:.95rem;font-weight:600;margin:.35rem 0 .2rem}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#CFC8BC;margin-top:clamp(3rem,8vw,6rem);padding:clamp(2.5rem,6vw,4.5rem) 0 2rem}
.ftr a{color:#CFC8BC;transition:var(--t)}.ftr a:hover{color:#E6C88A}
.ftr h4{font-family:var(--f-ui);font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;
  color:#8F887C;margin:0 0 .9rem;font-weight:600}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr;gap:2.2rem}
@media(max-width:1000px){.ftr-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:820px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ftr-grid{grid-template-columns:1fr}}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;font-size:.86rem}
.ftr-btm{border-top:1px solid #34302A;margin-top:2.6rem;padding-top:1.4rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.76rem;color:#8F887C}

/* ---------- misc ---------- */
.qr-tag{border:1px solid var(--line-2);background:#fff;padding:1rem;width:230px;
  display:flex;flex-direction:column;gap:.5rem;page-break-inside:avoid}
.qr-tag .qt{font-family:var(--f-display);font-size:.95rem;line-height:1.2}
.qr-tag .qa{font-size:.75rem;color:var(--ink-2)}
.qr-tag .qm{font-size:.66rem;color:var(--ink-3)}
.qr-tag canvas,.qr-tag img{width:96px;height:96px;align-self:flex-start}
.qr-tag .qbrand{font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);border-top:1px solid var(--line);padding-top:.4rem}
@media print{.hdr,.ftr,.demobar,.noprint{display:none!important}body{background:#fff}}

.empty{border:1px dashed var(--line-2);padding:3rem 1.5rem;text-align:center;color:var(--ink-3)}
.fade{animation:fade .4s ease both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- About-cluster sub navigation ---------- */
.subnav{border-bottom:1px solid var(--line);background:var(--paper-2)}
.subnav .wrap{display:flex;gap:1.6rem;overflow-x:auto;padding-block:.75rem}
.subnav a{font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;padding-bottom:.2rem;border-bottom:1px solid transparent;transition:var(--t)}
.subnav a:hover{color:var(--ink)}
.subnav a[aria-current]{color:var(--brass);border-bottom-color:var(--brass)}

/* ---------- long-form article ---------- */
.article{max-width:70ch;margin:0 auto}
.article p{font-size:1.06rem;line-height:1.72;color:var(--ink-2);margin:0 0 1.15em}
.article h3{font-family:var(--f-display);font-size:1.35rem;margin:2.2rem 0 .8rem;color:var(--ink)}
.article blockquote{margin:2rem 0;padding:0 0 0 1.4rem;border-left:2px solid var(--brass);
  font-family:var(--f-display);font-size:1.4rem;line-height:1.45;color:var(--ink)}
.article .dek{font-size:1.2rem;color:var(--ink-2);line-height:1.6}
.byline{display:flex;gap:1rem;flex-wrap:wrap;font-size:.78rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);border-block:1px solid var(--line);padding:.8rem 0;margin:1.6rem 0 2.4rem}

/* ---------- tier badge ---------- */
.badge{display:inline-block;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  padding:.18rem .5rem;border-radius:99px;border:1px solid var(--line-2);color:var(--ink-3)}
.badge.collective{border-color:var(--brass);color:var(--brass)}
.badge.pipeline{border-color:var(--ok);color:var(--ok)}

/* ---------- numbered feature rows ---------- */
.rows{display:grid;gap:0;border-top:1px solid var(--line)}
.rowitem{display:grid;grid-template-columns:5rem 1fr 1.2fr;gap:1.5rem;padding:1.5rem 0;border-bottom:1px solid var(--line)}
.rowitem .n{font-family:var(--f-display);font-size:1.1rem;color:var(--brass)}
.rowitem h3{font-family:var(--f-ui);font-size:1rem;font-weight:600;margin:0}
.rowitem p{font-size:.9rem;color:var(--ink-3);margin:0}
@media(max-width:760px){.rowitem{grid-template-columns:2.6rem 1fr;gap:.8rem}.rowitem p{grid-column:2}}


/* ---------- mobile refinements ---------- */
@media(max-width:900px){
  .btn{min-height:48px;padding:.9rem 1.4rem}
  .btn.sm{min-height:40px}
  .chip{min-height:36px;padding:.4rem .7rem}
  .util a{min-height:40px;display:inline-flex;align-items:center}
  .sec-hd{align-items:flex-start;flex-direction:column;gap:.6rem}
  .toolbar{gap:.7rem}
  .filters{position:static!important}
  .aw-side{position:static!important}
  .demobar{font-size:.62rem;letter-spacing:.06em;line-height:1.45;padding:.45rem var(--pad);gap:.5rem}
  .dl{grid-template-columns:1fr;gap:.15rem .5rem}
  .dl dt{margin-top:.5rem;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
  .dl dd{margin-bottom:.35rem}
  .rowitem{gap:.6rem}
  .article p{font-size:1.02rem}
  .byline{gap:.4rem;flex-direction:column}
  .subnav .wrap{gap:1.1rem}
  .crow{gap:.9rem}
  .qr-tag{width:calc(50% - .5rem)}
}
@media(max-width:560px){
  .hero-img img{aspect-ratio:4/3.4}
  .aw-thumbs button{width:56px;height:56px}
  .qr-tag{width:100%}
  .paymethod{flex-wrap:wrap}
  .paymethod span{margin-left:0;width:100%}
  .sumline{gap:1rem}
}


/* ---------- collection filter drawer (mobile) ---------- */
.filterbtn{display:none}
.applybtn{display:none;margin-top:1rem}
@media(max-width:900px){
  .filterbtn{display:flex;justify-content:space-between;margin-bottom:1.2rem}
  .filterbtn .cnt{background:var(--brass);color:#fff;border-radius:99px;
    min-width:1.4rem;padding:.05rem .45rem;font-size:.7rem}
  .filterbox{display:none}
  .filterbox.open{display:block;border:1px solid var(--line);background:var(--paper-2);
    padding:1.1rem;margin-bottom:1.4rem}
  .filterbox.open .applybtn{display:flex}
  .filters{border:0!important;padding:0!important;background:none!important}
}

/* scroll hint on the About sub-navigation */
@media(max-width:900px){
  .subnav{position:relative}
  .subnav::after{content:'';position:absolute;inset:0 0 0 auto;width:2.5rem;pointer-events:none;
    background:linear-gradient(90deg,rgba(243,239,231,0),var(--paper-2))}
}

/* the demo banner should not eat three lines of a phone screen */
@media(max-width:620px){
  .demobar span{display:block}
  .demobar .long{display:none}
}

@media(max-width:900px){
  /* buyers should see what they are paying for before the form */
  .layout.ck > form{order:2}
  .layout.ck > div{order:1}
  /* on the submission page the form matters more than the guidance panels */
  .layout.ap > aside{order:2;margin-top:2rem}
  .layout.ap > form{order:1}
}

.ftr .build{opacity:.55}