:root{
  --ink:#0B0B0C;
  --ink-soft:#26262A;
  --plaster:#EDECE8;
  --plaster-deep:#E1DFD9;
  --white:#FFFFFF;
  --brass:#96763F;
  --brass-txt:#7E6233;
  --silver:#66686D;
  --silver-lt:#9B9DA2;
  --line:rgba(11,11,12,.13);
  --line-lt:rgba(237,236,232,.14);

  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --body:"Jost","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --gut:clamp(20px,5vw,72px);
  --bar:34px;
  --nav:86px;
  --logo:url(/logo.png);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--plaster);color:var(--ink);
  font-family:var(--body);font-weight:400;font-size:17px;line-height:1.65;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
::selection{background:var(--ink);color:var(--plaster)}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--silver)}
.serif{font-family:var(--display);font-weight:500}
em{font-style:italic}
.sec--ink .eyebrow,.phero .eyebrow,.hero .eyebrow{color:var(--silver-lt)}

/* logo as single embedded asset */
.logo{display:block;background:var(--logo) no-repeat center/contain;transition:height .45s ease,filter .45s ease}

/* ---------- top stack ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50}
.ann{
  height:var(--bar);background:var(--ink);color:#C9C7C1;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:clamp(9.5px,2.4vw,11px);letter-spacing:.12em;text-transform:uppercase;
  text-align:center;padding:0 16px;white-space:nowrap;overflow:hidden;
  transition:height .5s cubic-bezier(.7,0,.2,1),opacity .3s ease;
}
.ann__short{display:none}
.topbar.scrolled .ann{height:0;opacity:0}

.hdr{
  position:relative;height:var(--nav);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gut);
  transition:background .45s ease,box-shadow .45s ease,color .45s ease;
}
.navlinks{grid-column:1;grid-row:1}
.mark{grid-column:2;grid-row:1}
.tools{grid-column:3;grid-row:1}
.hdr.solid{background:rgba(237,236,232,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.hdr.over{color:#EDECE8}
.hdr.over .logo{filter:invert(1)}

.navlinks{display:flex;gap:28px;align-items:center}
.navlinks a{font-size:13px;letter-spacing:.11em;text-transform:uppercase;padding:6px 0;position:relative}
.navlinks a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:currentColor;transition:width .35s ease}
.navlinks a:hover::after,.navlinks a.on::after{width:100%}

.mark{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.mark .logo{height:40px;width:78px}
.wordmark{
  font-family:var(--display);font-weight:400;
  font-size:10.5px;letter-spacing:.40em;text-indent:.40em;
  text-transform:uppercase;white-space:nowrap;line-height:1;
  transition:font-size .45s ease,opacity .45s ease;
}
.hdr.solid .mark{gap:6px}
.hdr.solid .mark .logo{height:30px;width:58px}
.hdr.solid .wordmark{font-size:9px}

.tools{justify-self:end;display:flex;gap:20px;align-items:center}
.tools svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.3}
.menubtn{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.menubtn i{display:block;width:20px}
.menubtn i::before,.menubtn i::after{content:"";display:block;height:1px;background:currentColor}
.menubtn i::before{margin-bottom:5px}

/* ---------- full menu ---------- */
.menu{
  position:fixed;inset:0;z-index:80;background:var(--ink);color:var(--plaster);
  padding:calc(var(--nav) + 30px) var(--gut) 48px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s;
}
.menu.open{opacity:1;visibility:visible}
.menu__close{position:fixed;top:20px;right:var(--gut);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--plaster);z-index:2}
.menu__grid{display:grid;grid-template-columns:2fr 1fr;gap:clamp(30px,6vw,90px);max-width:1400px}
.menu__col h4{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#8A8C91;font-weight:400;margin-bottom:20px}
.menu__big a{
  display:block;font-family:var(--display);font-size:clamp(28px,4.6vw,52px);line-height:1.18;
  padding:5px 0;color:#A5A7AC;transition:color .3s ease,padding-left .4s cubic-bezier(.2,.8,.2,1);
}
.menu__big a:hover,.menu__big a.on{color:var(--plaster);padding-left:14px}
.menu__sm a{display:block;font-size:15px;padding:8px 0;color:#B4B2AC;transition:color .3s ease}
.menu__sm a:hover{color:var(--plaster)}
.menu__meta{margin-top:44px;padding-top:22px;border-top:1px solid var(--line-lt);font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#8A8C91;line-height:2.1}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 32px;border-radius:999px;
  border:1px solid rgba(237,236,232,.5);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.btn:hover{background:var(--plaster);color:var(--ink);border-color:var(--plaster)}
.btn--fill{background:var(--plaster);color:var(--ink);border-color:var(--plaster)}
.btn--fill:hover{background:transparent;color:var(--plaster);border-color:rgba(237,236,232,.5)}
.btn--ink{border-color:rgba(11,11,12,.34);color:var(--ink)}
.btn--ink:hover{background:var(--ink);color:var(--plaster);border-color:var(--ink)}
.btn--solid{background:var(--ink);color:var(--plaster);border-color:var(--ink)}
.btn--solid:hover{background:transparent;color:var(--ink);border-color:rgba(11,11,12,.34)}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ---------- home hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:calc(var(--bar) + var(--nav) + 40px) var(--gut) 90px;
  background:var(--ink);color:var(--plaster);overflow:hidden;
}

.hero__veil{position:absolute;inset:0;background:radial-gradient(115% 82% at 50% 44%,rgba(11,11,12,.05) 0%,rgba(11,11,12,.52) 58%,rgba(11,11,12,.88) 100%)}
.hero__in{position:relative;max-width:940px}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(46px,10.5vw,132px);line-height:.95;letter-spacing:-.01em;margin-top:26px}
.hero h1 em{display:block;color:#DCD8CE}
.hero__sub{margin:30px auto 0;max-width:520px;font-size:clamp(15px,1.6vw,17px);color:#C2C0BA;line-height:1.8}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:44px}
.scroller{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#94969B}

/* ---------- inner page hero ---------- */
.phero{
  position:relative;background:var(--ink);color:var(--plaster);overflow:hidden;
  padding:calc(var(--bar) + var(--nav) + clamp(60px,9vw,110px)) var(--gut) clamp(60px,9vw,110px);
}

.phero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.62),rgba(11,11,12,.93))}
.phero__in{position:relative;max-width:900px}
.phero h1{font-family:var(--display);font-weight:400;font-size:clamp(38px,6.6vw,86px);line-height:1.02;margin-top:18px}
.phero p{margin-top:22px;max-width:52ch;color:#C2C0BA;font-size:clamp(15px,1.6vw,18px);line-height:1.8}

/* ---------- section shell ---------- */
.sec{padding:clamp(66px,8.5vw,120px) var(--gut)}
.sec--white{background:var(--white)}
.sec--ink{background:var(--ink);color:var(--plaster)}
.sec--tight{padding-top:clamp(40px,5vw,64px)}
.sec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px}
.sec__title{font-family:var(--display);font-weight:500;font-size:clamp(30px,4.6vw,54px);line-height:1.06}
.viewall{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid currentColor;padding-bottom:3px}

/* ---------- promise strip ---------- */
.promise{border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);background:var(--plaster)}
.promise div{padding:26px 20px;text-align:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.promise div + div{border-left:1px solid var(--line)}

/* ---------- work cards ---------- */
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(258px,31%);gap:clamp(14px,2.2vw,30px);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:22px;
  margin:0 calc(var(--gut) * -1);padding-left:var(--gut);padding-right:var(--gut);scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.6vw,34px)}
.wgrid--2{grid-template-columns:repeat(2,1fr)}

.card{scroll-snap-align:start;display:block}
.card__frame{background:var(--plaster-deep);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.card__frame .art{width:88%;max-height:86%;object-fit:contain;box-shadow:0 16px 42px rgba(11,11,12,.28);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.card:hover .card__frame .art{transform:scale(1.04)}
.bgimg{width:100%;height:100%;object-fit:cover;display:block}
.hero__bg,.phero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card__tag{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;background:rgba(11,11,12,.82);color:var(--plaster);padding:5px 9px}
.card__body{padding-top:16px}
.card__name{font-family:var(--display);font-weight:500;font-size:21px;line-height:1.25}
.card__meta{display:flex;justify-content:space-between;gap:12px;margin-top:5px;font-size:14.5px;color:var(--ink-soft)}
.card__code{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--silver);margin-top:12px}

/* SIGNATURE: edition ledger */
.ledger{display:flex;align-items:center;gap:9px;margin-top:8px}
.ticks{display:flex;gap:2px;flex:1}
.ticks i{flex:1;height:9px;background:rgba(11,11,12,.14)}
.ticks i.sold{background:var(--ink)}
.ticks i.res{background:var(--brass)}
.ledger span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--silver);white-space:nowrap}
.sec--ink .ledger span{color:var(--silver-lt)}
.ticks--lg i{height:22px}
.sec--ink .ticks i{background:rgba(237,236,232,.18)}
.sec--ink .ticks i.sold{background:var(--plaster)}
.sec--ink .ticks i.res{background:var(--brass)}

/* ---------- filters ---------- */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:34px;align-items:center}
.chip{
  padding:9px 18px;border:1px solid var(--line);border-radius:999px;
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.chip:hover{border-color:rgba(11,11,12,.4)}
.chip.on{background:var(--ink);color:var(--plaster);border-color:var(--ink)}
.fcount{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--silver);margin-left:auto}

/* ---------- editorial ---------- */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,5vw,80px);align-items:center}
.split--rev .split__media{order:2}
.split__media{position:relative;aspect-ratio:4/5;background:var(--plaster-deep);overflow:hidden}
.split__media .bgimg{width:100%;height:100%}
.split__media--wide{aspect-ratio:5/4}
.prose{max-width:60ch}
.prose p{margin-top:20px;color:var(--ink-soft);line-height:1.8}
.prose p:first-child{margin-top:0}
.sec--ink .prose p{color:#B4B2AC}
.lead{font-family:var(--display);font-size:clamp(20px,2.4vw,27px);line-height:1.5;color:var(--ink)}
.sec--ink .lead{color:var(--plaster)}

.quote{
  font-family:var(--display);font-size:clamp(24px,3.6vw,44px);line-height:1.32;
  max-width:22ch;margin:0 auto;text-align:center;
}
.quote small{display:block;margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--silver)}

/* principles / definition list */
.dl{border-top:1px solid var(--line)}
.dl__row{display:grid;grid-template-columns:.42fr 1fr;gap:clamp(16px,4vw,56px);padding:clamp(24px,3.4vw,40px) 0;border-bottom:1px solid var(--line)}
.dl__row h3{font-family:var(--display);font-size:clamp(20px,2.3vw,29px);line-height:1.28;font-weight:500}
.dl__row p{color:var(--ink-soft);line-height:1.8;max-width:52ch}
.sec--ink .dl{border-color:var(--line-lt)}
.sec--ink .dl__n,.sec--ink .tl__yr{color:#C09A55}
.sec--ink .dl__row{border-color:var(--line-lt)}
.sec--ink .dl__row p{color:#B4B2AC}
.dl__n{font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:var(--brass-txt);display:block;margin-bottom:10px}

/* ---------- data table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{
  text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--silver);font-weight:400;padding:0 14px 14px 0;border-bottom:1px solid var(--line);
}
.tbl td{padding:18px 14px 18px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:hover td{background:rgba(11,11,12,.02)}
.tbl .num{font-family:var(--mono);font-size:13px;letter-spacing:.04em;white-space:nowrap}
.tbl .ttl{font-family:var(--display);font-weight:500;font-size:20px}
.tbl__wrap{overflow-x:auto;scrollbar-width:thin}
.tbl__wrap table{min-width:640px}

/* ---------- timeline ---------- */
.tl{border-top:1px solid var(--line)}
.tl__row{
  display:grid;grid-template-columns:.2fr 1fr .34fr;gap:clamp(14px,3vw,40px);align-items:baseline;
  padding:clamp(20px,2.8vw,32px) 0;border-bottom:1px solid var(--line);
}
.tl__yr{font-family:var(--mono);font-size:12px;letter-spacing:.11em;color:var(--brass-txt)}
.tl__t{font-family:var(--display);font-weight:500;font-size:clamp(19px,2.2vw,27px)}
.tl__t small{display:block;font-family:var(--body);font-weight:400;font-size:14.5px;color:var(--ink-soft);margin-top:6px;letter-spacing:0}
.tl__st{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--silver);text-align:right}

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--line)}
.acc__i{border-bottom:1px solid var(--line)}
.acc__q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 0;text-align:left;font-family:var(--display);font-weight:500;font-size:clamp(18px,2vw,23px);line-height:1.4;
}
.acc__q span{flex:none;font-family:var(--mono);font-size:19px;color:var(--brass-txt);transition:transform .4s ease}
.acc__i.open .acc__q span{transform:rotate(45deg)}
.acc__a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1)}
.acc__a p{padding-bottom:26px;color:var(--ink-soft);max-width:66ch;line-height:1.8}

/* ---------- forms ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .full{grid-column:1/-1}
.inp{
  width:100%;padding:15px 0 12px;background:transparent;border:none;border-bottom:1px solid var(--line);
  font-family:var(--body);font-size:16px;font-weight:400;color:var(--ink);border-radius:0;
}
.inp::placeholder{color:var(--silver)}
.inp:focus{outline:none;border-bottom-color:var(--ink)}
select.inp{-webkit-appearance:none;appearance:none;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238B8D92'/%3E%3C/svg%3E") no-repeat right center/10px}
textarea.inp{resize:vertical;min-height:96px}
.flabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--silver);display:block;margin-bottom:-4px}
.note{font-size:13.5px;color:var(--silver);line-height:1.75}

.field{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap;justify-content:center}
.field input{flex:1;min-width:220px;height:48px;padding:0 18px;background:transparent;border:1px solid rgba(11,11,12,.28);border-radius:999px;font-family:var(--body);font-size:14px;color:var(--ink)}
.field input::placeholder{color:var(--silver)}
.signup{text-align:center;max-width:560px;margin:0 auto}
.signup p{margin-top:16px;color:var(--ink-soft)}

/* ---------- authenticity plate ---------- */
.plate{background:#141416;border:1px solid var(--line-lt);padding:clamp(24px,3.5vw,42px)}
.plate__row{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid rgba(237,236,232,.1);font-size:14.5px;color:#C9C7C1}
.plate__row:last-of-type{border-bottom:none}
.plate__row b{font-weight:400;color:#8A8C91;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase}
.plate__row span{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--plaster);text-align:right}
.plate__qr{display:flex;align-items:center;gap:16px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line-lt)}
.plate__qr svg{width:64px;height:64px;flex:none}
.plate__qr p{font-size:12.5px;color:#95979C;line-height:1.6}
.verified{display:inline-flex;align-items:center;gap:7px;color:#C09A55;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.verified::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brass)}

/* ---------- journal ---------- */
.jcard__img{aspect-ratio:3/2;background:var(--plaster-deep);overflow:hidden}
.jcard__img .bgimg{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.jcard:hover .jcard__img .bgimg{transform:scale(1.05)}
.jcard h3{font-family:var(--display);font-weight:500;font-size:22px;line-height:1.32;margin-top:15px}
.jcard .eyebrow{margin-top:13px;display:block}

/* ---------- work detail ---------- */
.wd{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,72px);align-items:start}
.wd__stage{background:var(--plaster-deep);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;position:sticky;top:calc(var(--nav) + 20px)}
.wd__stage .art{width:90%;max-height:88%;object-fit:contain;box-shadow:0 26px 60px rgba(11,11,12,.3)}
.wd h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.4vw,50px);line-height:1.06;margin-top:14px}
.wd__price{font-family:var(--display);font-weight:500;font-size:28px;margin-top:22px}
.sizes{display:grid;gap:9px;margin-top:22px}
.size{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:15px 18px;border:1px solid var(--line);text-align:left;transition:border-color .3s ease,background .3s ease;
}
.size:hover{border-color:rgba(11,11,12,.4)}
.size.on{border-color:var(--ink);background:rgba(11,11,12,.03)}
.size b{font-weight:400;font-size:15.5px}
.size b em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--silver);margin-top:4px}
.size.on b em{color:var(--brass-txt)}
.size .num{font-family:var(--mono);font-size:13.5px}
.spec{margin-top:34px;border-top:1px solid var(--line)}
.spec div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.spec div span:last-child{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--ink-soft);text-align:right}

/* ---------- press / logos ---------- */
.press__row{display:grid;grid-template-columns:.24fr 1fr .28fr;gap:clamp(14px,3vw,40px);padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.press__row:first-child{border-top:1px solid var(--line)}
.dl__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dcard{border:1px solid var(--line);padding:26px;transition:background .35s ease}
.dcard:hover{background:var(--white)}
.dcard h4{font-family:var(--display);font-size:21px;font-weight:500}
.dcard p{font-size:14.5px;color:var(--ink-soft);margin-top:8px}
.dcard .eyebrow{display:block;margin-top:16px;color:var(--brass-txt)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#B4B2AC;padding:clamp(56px,7vw,92px) var(--gut) 34px}
.foot__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.foot__mark{display:inline-flex;flex-direction:column;align-items:flex-start;gap:10px}
.foot__mark .logo{height:42px;width:82px;filter:invert(1)}
.foot__mark .wordmark{font-size:11px;letter-spacing:.34em;text-indent:.34em;color:var(--plaster)}
.foot__grid>div>p{margin-top:18px;font-size:14.5px;max-width:30ch;line-height:1.75}
.foot h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8A8C91;font-weight:400;margin-bottom:16px}
.foot li{list-style:none;margin-bottom:11px;font-size:14.5px}
.foot li a:hover{color:var(--plaster)}
.foot__base{margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--line-lt);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8A8C91}

/* ---------- reveal + route transition ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
#view{animation:fadeIn .55s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .split,.wd,.auth{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .wd__stage{position:static}
  .wgrid{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr}
  .menu__grid{grid-template-columns:1fr}
  .dl__cards{grid-template-columns:1fr}
}
@media(max-width:760px){
  :root{--nav:74px}
  .navlinks{display:none}
  .tools{gap:16px}
  .tools .acct{display:none}
  .ann__long{display:none}
  .ann__short{display:inline}
  .mark{gap:6px}
  .mark .logo{height:30px;width:58px}
  .wordmark{font-size:8.5px;letter-spacing:.3em;text-indent:.3em}
  .hdr.solid .mark .logo{height:25px;width:48px}
  .hdr.solid .wordmark{font-size:8px}
  .menubtn span{display:none}
  .rail{grid-auto-columns:76%}
  .promise{grid-template-columns:1fr}
  .promise div + div{border-left:none;border-top:1px solid var(--line)}
  .wgrid,.wgrid--2{grid-template-columns:1fr}
  .sec__head{flex-direction:column;align-items:flex-start;gap:14px}
  .foot__grid{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .dl__row,.tl__row,.press__row{grid-template-columns:1fr;gap:8px}
  .tl__st,.press__row>*:last-child{text-align:left}
  .hero__sub{max-width:34ch}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* ---------- static-site additions ---------- */
.skip{position:absolute;left:-9999px;top:0;padding:12px 18px;background:var(--ink);color:var(--plaster);z-index:200}
.skip:focus{left:12px;top:12px}
img{background:var(--plaster-deep)}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--silver);margin-bottom:18px}
.crumb a{border-bottom:1px solid var(--line)}

/* ---------- keranjang ---------- */
.cartbadge{
  position:absolute;top:-6px;right:-8px;min-width:16px;height:16px;padding:0 4px;
  background:var(--brass);color:var(--ink);border-radius:999px;
  font-family:var(--mono);font-size:9.5px;font-weight:500;line-height:16px;text-align:center;
}
.carticon{position:relative}

.cartd{position:fixed;inset:0;z-index:90;visibility:hidden;opacity:0;transition:opacity .35s ease,visibility .35s}
.cartd.open{visibility:visible;opacity:1}
.cartd__veil{position:absolute;inset:0;background:rgba(11,11,12,.55);backdrop-filter:blur(2px)}
.cartd__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(430px,100%);
  background:var(--plaster);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .42s cubic-bezier(.2,.8,.2,1);
  box-shadow:-18px 0 50px rgba(11,11,12,.25);
}
.cartd.open .cartd__panel{transform:none}
.cartd__top{display:flex;justify-content:space-between;align-items:center;
  padding:22px 24px;border-bottom:1px solid var(--line)}
.cartd__x{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--silver)}
.cartd__list{flex:1;overflow-y:auto;padding:8px 24px}
.cartd__empty{padding:40px 0;text-align:center;color:var(--silver);font-size:14.5px}
.cartd__row{display:grid;grid-template-columns:64px 1fr auto;gap:14px;
  padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.cartd__row img{width:64px;height:80px;object-fit:cover;background:var(--plaster-deep)}
.cartd__name{font-family:var(--display);font-weight:500;font-size:17px;line-height:1.25}
.cartd__meta{font-family:var(--mono);font-size:11px;color:var(--silver);margin-top:5px}
.cartd__qty{display:flex;align-items:center;gap:10px;margin-top:12px}
.cartd__qty button{width:26px;height:26px;border:1px solid var(--line);font-size:15px;line-height:1}
.cartd__qty button:hover:not(:disabled){border-color:var(--ink)}
.cartd__qty button:disabled{opacity:.3;cursor:default}
.cartd__qty span{font-family:var(--mono);font-size:13px;min-width:14px;text-align:center}
.cartd__rm{margin-left:6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--silver);border-bottom:1px solid var(--line);width:auto!important;height:auto!important;border:none}
.cartd__rm:hover{color:var(--ink)}
.cartd__price{font-family:var(--mono);font-size:13.5px;white-space:nowrap}
.cartd__foot{padding:22px 24px;border-top:1px solid var(--line);background:var(--white)}
.cartd__sum{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.cartd__sum span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--silver)}
.cartd__sum b{font-family:var(--display);font-weight:500;font-size:24px}
.cartd__note{font-size:12.5px;color:var(--silver);margin-bottom:16px;line-height:1.6}

/* halaman /cart/ */
.cartpage{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,5vw,64px);align-items:start}
.cartline{display:grid;grid-template-columns:96px 1fr auto;gap:18px;
  padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.cartline img{width:96px;height:120px;object-fit:cover;background:var(--plaster-deep)}
.summary{background:var(--white);border:1px solid var(--line);padding:26px;position:sticky;top:calc(var(--nav) + 20px)}
.summary__row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;font-size:14.5px}
.summary__row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:16px;
  font-family:var(--display);font-size:22px;font-weight:500}
@media(max-width:900px){
  .cartpage{grid-template-columns:1fr}
  .summary{position:static}
  .cartline{grid-template-columns:72px 1fr;gap:14px}
  .cartline img{width:72px;height:90px}
  .cartline .cartd__price{grid-column:2}
}

/* ---------- pencarian ---------- */
.tools a.acct{display:flex;align-items:center}
.srch{position:fixed;inset:0;z-index:85;visibility:hidden;opacity:0;
  transition:opacity .3s ease,visibility .3s}
.srch.open{visibility:visible;opacity:1}
.srch__veil{position:absolute;inset:0;background:rgba(11,11,12,.5);backdrop-filter:blur(2px)}
.srch__panel{position:absolute;top:0;left:0;right:0;background:var(--plaster);
  max-height:82svh;display:flex;flex-direction:column;
  transform:translateY(-14px);transition:transform .35s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 20px 50px rgba(11,11,12,.22)}
.srch.open .srch__panel{transform:none}
.srch__bar{display:flex;align-items:center;gap:14px;padding:22px var(--gut);
  border-bottom:1px solid var(--line)}
.srch__bar svg{width:19px;height:19px;stroke:var(--silver);fill:none;stroke-width:1.4;flex:none}
.srch__bar input{flex:1;font-family:var(--display);font-size:clamp(20px,3vw,30px);
  font-weight:400;background:transparent;border:none;color:var(--ink);padding:4px 0}
.srch__bar input:focus{outline:none}
.srch__bar input::placeholder{color:var(--silver)}
.srch__bar input::-webkit-search-cancel-button{-webkit-appearance:none}
.srch__bar button{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--silver);flex:none}
.srch__bar button:hover{color:var(--ink)}
.srch__results{overflow-y:auto;padding:8px var(--gut) 26px}
.srch__hint{padding:30px 0;color:var(--silver);font-size:14.5px}
.srch__item{display:grid;grid-template-columns:52px 1fr auto;gap:16px;align-items:center;
  padding:15px 0;border-bottom:1px solid var(--line)}
.srch__item:hover{background:rgba(11,11,12,.02)}
.srch__item img{width:52px;height:44px;object-fit:cover;background:var(--plaster-deep)}
.srch__item .ph{width:52px;height:44px;background:var(--plaster-deep)}
.srch__t{font-family:var(--display);font-weight:500;font-size:18px;line-height:1.25}
.srch__s{font-family:var(--mono);font-size:11px;color:var(--silver);margin-top:4px}
.srch__p{font-family:var(--mono);font-size:12px;color:var(--ink-soft);white-space:nowrap}
.srch__item.on{background:rgba(11,11,12,.05)}
@media(max-width:760px){
  .srch__item{grid-template-columns:44px 1fr}
  .srch__item img,.srch__item .ph{width:44px;height:38px}
  .srch__p{display:none}
}

/* ============================================================
   LUKISAN TAMPIL UTUH
   Karya diperlakukan sebagai karya, bukan sebagai gambar latar.
   `cover` memotong sisi gambar — dan yang pertama hilang justru
   tanda tangan di pojok kanan bawah. `contain` menjaga seluruh
   bidang karya tetap terlihat.
   ============================================================ */
.card__frame{padding:clamp(14px,2.4vw,26px)}
.card__frame .art,
.card__frame .bgimg{
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  max-height:none;
}
.card__frame .bgimg{box-shadow:0 14px 34px rgba(11,11,12,.22)}
.wd__stage{padding:clamp(18px,3vw,40px)}
.wd__stage .art{width:100%;height:auto;max-height:76svh;object-fit:contain}
.split__media{padding:0}
.split__media .bgimg{object-fit:cover}
.jcard__img .bgimg{object-fit:cover}
.srch__item img{object-fit:contain;background:var(--plaster-deep);padding:3px}
.cartd__row img,.cartline img{object-fit:contain;padding:4px}

/* ============================================================
   GERAK — halus, tidak berisik
   ============================================================ */

/* Bilah kemajuan saat berpindah halaman */
.pbar{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--brass),#D8BE84);
  opacity:0;transition:width .25s ease,opacity .3s ease;
  pointer-events:none;
}
.pbar.on{opacity:1}

/* Halaman masuk dan keluar */
body{opacity:1;transition:opacity .26s ease}
body.leaving{opacity:0}
@keyframes pageIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
main{animation:pageIn .5s cubic-bezier(.2,.8,.2,1) both}

/* Hero: judul dan isinya muncul bertahap */
@keyframes riseIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero__in>*{animation:riseIn .85s cubic-bezier(.2,.8,.2,1) both}
.hero__in>*:nth-child(1){animation-delay:.05s}
.hero__in>*:nth-child(2){animation-delay:.16s}
.hero__in>*:nth-child(3){animation-delay:.27s}
.hero__in>*:nth-child(4){animation-delay:.38s}
.phero__in>*{animation:riseIn .75s cubic-bezier(.2,.8,.2,1) both}
.phero__in>*:nth-child(2){animation-delay:.09s}
.phero__in>*:nth-child(3){animation-delay:.18s}

/* Gambar besar mengembang perlahan — memberi kesan mendekat */
@keyframes slowZoom{from{transform:scale(1.06)}to{transform:scale(1)}}
.hero__bg,.phero__bg{animation:slowZoom 2.4s cubic-bezier(.2,.8,.2,1) both}

/* Petunjuk gulir berdenyut pelan */
@keyframes breathe{0%,100%{opacity:.45;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,4px)}}
.scroller{animation:breathe 2.6s ease-in-out infinite}

/* Kartu karya: bayangan dan gambar bergerak bersama */
.card__frame .art{transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s ease}
.card:hover .card__frame .art{transform:scale(1.035)}
.card__name{transition:opacity .3s ease}
.card:hover .card__name{opacity:.72}

/* Reveal: kartu dalam satu baris muncul berurutan */
.rv{transition-delay:var(--d,0ms)}

/* Tombol */
.btn{transition:background .3s ease,color .3s ease,border-color .3s ease,transform .18s ease}
.btn:active{transform:scale(.98)}
.size{transition:border-color .28s ease,background .28s ease,transform .18s ease}
.size:active{transform:scale(.995)}

/* Bayangan halus saat gambar selesai dimuat */
img{opacity:1;transition:opacity .5s ease}
img.loading{opacity:0}

@media(prefers-reduced-motion:reduce){
  .hero__in>*,.phero__in>*,main,.hero__bg,.phero__bg,.scroller{animation:none!important}
  body,.pbar{transition:none!important}
}

/* Bingkai mengikuti bentuk karya.
   Seluruh cuvée saat ini berformat mendatar 3:2. Bingkai 4:5 memaksa
   karya mengecil di tengah ruang kosong — jadi bingkainya yang
   menyesuaikan, bukan karyanya. */
.card__frame{aspect-ratio:3/2}
.wd__stage{aspect-ratio:auto;min-height:auto}
.wd__stage .art{max-height:70svh}
@media(max-width:760px){
  .card__frame{aspect-ratio:3/2;padding:12px}
}

/* ============================================================
   BINGKAI KARYA — setiap karya tampil UTUH, di mana pun

   Masalahnya: bingkai punya bentuknya sendiri, karya punya bentuknya
   sendiri. `cover` memaksa karya mengisi bingkai dengan cara memotong
   sisinya — dan yang pertama hilang selalu tanda tangan di pojok.

   Cara di sini: karya ditampilkan utuh (`contain`), lalu ruang sisa
   diisi versi buram dari karya yang sama. Bingkai tetap penuh, karya
   tetap lengkap, dan warnanya menyatu karena berasal dari karya itu.

   Berlaku otomatis untuk gambar berukuran apa pun — termasuk yang
   diunggah nanti. Tidak ada yang perlu disetel per gambar.
   ============================================================ */
.af{position:relative;overflow:hidden;isolation:isolate}
.af::before{
  content:"";position:absolute;inset:-8%;z-index:0;
  background:var(--af) center/cover no-repeat;
  filter:blur(34px) saturate(.75) brightness(.55);
  transform:scale(1.15);
}
.af>*{position:relative;z-index:1}

/* --- karya di dalam bingkai: selalu utuh --- */
.card__frame.af .art,
.card__frame.af .bgimg,
.split__media.af .bgimg,
.jcard__img.af .bgimg,
.wd__stage.af .art{
  width:100%;height:100%;
  object-fit:contain!important;object-position:center;
}

.split__media.af,.jcard__img.af{padding:clamp(10px,1.6vw,20px)}
.split__media.af .bgimg{box-shadow:0 16px 40px rgba(11,11,12,.3)}
.jcard__img.af .bgimg{box-shadow:0 10px 26px rgba(11,11,12,.26)}
.card__frame.af .art{box-shadow:0 14px 36px rgba(11,11,12,.34)}

/* --- hero: karya utuh di tengah, ruang sisa jadi kabut gelap --- */
.hero.af::before,.phero.af::before{
  filter:blur(46px) saturate(.7) brightness(.42);
}
.hero__bg,.phero__bg{
  object-fit:contain!important;object-position:center;
  width:100%;height:100%;
}
.hero__bg{opacity:.95}
.phero__bg{opacity:.8}
.hero__veil,.phero__veil{z-index:1}
.hero__in,.phero__in{z-index:2}
.scroller{z-index:2}

/* Di layar sempit, karya mendatar jadi terlalu kecil bila dipaksa utuh
   pada hero setinggi layar. Beri batas tinggi supaya tetap proporsional. */
@media(max-width:760px){
  .hero__bg{object-fit:cover!important;opacity:.6}
  .hero.af::before{filter:blur(30px) saturate(.7) brightness(.5)}
}

/* --- gambar kecil di daftar: tetap utuh --- */
.srch__item img,
.cartd__row img,
.cartline img,
.acc-row img,
.thumb,
.vthumb img{object-fit:contain!important;background:var(--plaster-deep)}
.acc-row img,.thumb{background:#1a1a1c}
.vthumb{padding:10px;background:#141416}
.vthumb img{width:100%;height:100%}

@media(prefers-reduced-motion:reduce){
  .af::before{filter:blur(30px) brightness(.5)}
}

/* ============================================================
   BINGKAI MENGIKUTI BENTUK KARYA — tanpa bilah di tepi

   Sebelumnya bingkai dipaksa 3:2 lalu diberi jarak dalam. Karena
   karyanya sendiri sudah 3:2, jarak itu tidak menampilkan apa pun
   selain bilah gelap di tepi — terlihat seperti pigura murahan.

   Sekarang bingkai berbentuk sama persis dengan karyanya (`--ar`
   dihitung saat build dari berkas gambarnya). Karya mengisi penuh
   dari tepi ke tepi, tetap utuh, tanpa satu pun bilah.
   ============================================================ */
.card__frame.af,
.jcard__img.af,
.split__media.af{
  aspect-ratio:var(--ar,1.5);
  padding:0;
  background:var(--plaster-deep);
}

/* Latar buram tidak lagi terlihat pada bingkai yang bentuknya sudah
   cocok. Dibiarkan ada sebagai jaring pengaman: bila suatu saat ada
   gambar yang bentuknya tidak biasa, ruang sisa terisi warna karya
   itu sendiri, bukan kotak kosong. */
.card__frame.af::before,
.jcard__img.af::before,
.split__media.af::before{filter:blur(26px) saturate(.8) brightness(.5)}

/* Bayangan dilepas: pada bingkai yang terisi penuh, bayangan hanya
   tampak sebagai garis gelap di tepi. */
.card__frame.af .art,
.jcard__img.af .bgimg,
.split__media.af .bgimg{box-shadow:none}

/* Halaman karya: kanvas mengikuti bentuk karya, tanpa jarak dalam. */
.wd__stage.af{aspect-ratio:var(--ar,1.5);padding:0;align-items:stretch}
.wd__stage.af .art{width:100%;height:100%;max-height:none;box-shadow:none}

/* Kartu koleksi memakai banner memanjang — biarkan mengikuti bentuknya. */
.wgrid--2 .card__frame.af{aspect-ratio:var(--ar,1.5)}

/* Thumbnail kecil: sedikit jarak supaya tidak menempel ke tepi kotak,
   tetapi tetap menampilkan seluruh karya. */
.srch__item img,.cartd__row img,.cartline img,.acc-row img,.thumb{padding:2px}

/* ============================================================
   HEADER DI ATAS BAGIAN GELAP — masalah keterbacaan saat digulir

   Selama berada di atas hero, header dibuat transparan agar karya
   terlihat penuh. Tetapi saat halaman digulir, judul besar hero
   lewat persis di bawahnya — putih di atas putih, dan keduanya
   jadi tidak terbaca.

   Jawabannya bukan mematikan transparansi (karya jadi terpotong
   bilah), melainkan menaruh gradasi tipis di belakang header.
   Apa pun yang lewat di bawahnya meredup lebih dulu.
   ============================================================ */
.hero h1,.phero h1{text-shadow:0 2px 26px rgba(11,11,12,.45)}

/* Halaman dalam: sisakan ruang lebih lega di atas judul supaya
   perjumpaan dengan header terjadi lebih jauh dari awal bacaan. */
.phero{padding-top:calc(var(--bar) + var(--nav) + clamp(76px,11vw,140px))}

@media(max-width:760px){
}


/* ============================================================
   HEADER SAAT DIGULIR — tiga keadaan, bukan dua

   Sebelumnya header hanya punya dua keadaan: tembus pandang di atas
   hero gelap, lalu padat terang setelah melewatinya. Masalahnya
   muncul di antara keduanya: begitu halaman digulir, judul besar
   naik dan lewat tepat di belakang header yang masih tembus pandang.
   Yang terlihat bukan "teks lewat di belakang bilah", melainkan dua
   tulisan bertabrakan.

   Sekarang ada keadaan ketiga: begitu gulir dimulai, header memakai
   bilah gelap tembus cahaya. Isi halaman jelas lewat DI BELAKANG
   sebuah permukaan — bukan menabraknya. Warna teks nav tetap terang,
   jadi tidak ada kedipan warna.
   ============================================================ */
.hdr{isolation:isolate}

.hdr.veiled{
  background:rgba(11,11,12,.72);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:0 1px 0 rgba(237,236,232,.10);
}
/* Logo dan teks tetap terang — sama seperti keadaan tembus pandang,
   sehingga peralihannya hanya berupa munculnya bilah, tanpa warna
   yang ikut berkedip. */
.hdr.veiled{color:#EDECE8}
.hdr.veiled .logo{filter:invert(1)}
.hdr.veiled .mark{gap:6px}
.hdr.veiled .mark .logo{height:30px;width:58px}
.hdr.veiled .wordmark{font-size:9px}

/* Bilah pengumuman ikut menyusut, jadi header perlu tetap rapat. */
.topbar{transition:box-shadow .4s ease}

/* Judul hero dijauhkan dari header. Sebelumnya jarak atas hanya
   memperhitungkan tinggi header dalam keadaan diam — padahal saat
   digulir, judulnya yang naik menghampiri. */
.phero{padding-top:calc(var(--bar) + var(--nav) + clamp(74px,10vw,132px))}
.hero h1,.phero h1{text-shadow:0 2px 30px rgba(11,11,12,.5)}

/* Loncatan ke jangkar tidak lagi tertutup header. */
html{scroll-padding-top:calc(var(--nav) + 20px)}

@media(max-width:760px){
  .hdr.veiled .mark .logo{height:25px;width:48px}
  .hdr.veiled .wordmark{font-size:8px}
  .phero{padding-top:calc(var(--bar) + var(--nav) + 56px)}
}
@media(prefers-reduced-motion:reduce){
  .hdr,.topbar{transition:none}
}
/* --- PERBAIKAN: lapisan hero tetap di belakang teks ---
   `.af>*{position:relative}` di atas ikut mengenai gambar latar,
   kabut, dan penanda "Scroll" pada hero. Akibatnya gambar ikut
   berbaris di samping judul (judul terdorong ke kanan & terpotong,
   paling parah di HP). Selektor ini lebih spesifik, jadi menang. */
.hero.af>.hero__bg,.phero.af>.phero__bg,
.hero.af>.hero__veil,.phero.af>.phero__veil{position:absolute;inset:0}
.hero.af>.scroller{position:absolute}
/* Placeholder abu-abu milik `img{}` jangan ikut tampil di sisa ruang
   gambar hero — di situ seharusnya kabut gelap dari ::before. */
.hero__bg,.phero__bg{background:transparent}