*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

:root{
  --paper:#E9E6E7; --paper-2:#EFECEC; --surface:#F3F0EF; --band-alt:#E4DEDA;
  --ink:#22323B; --ink-2:#5E5653; --ink-3:#5A5F6B; --rule:#D3CDCB;
  --accent:#3F5878; --clay:#AB978C; --on-band:#E9E6E7; --on-band-2:#C9C4C3;
  --hatch:repeating-linear-gradient(135deg,rgba(171,151,140,.24) 0 1px,rgba(255,255,255,0) 1px 9px);
  --lift:0 1px 2px rgba(34,50,59,.08),0 18px 36px -20px rgba(34,50,59,.32);
  --lift-2:0 3px 4px rgba(34,50,59,.16),0 20px 40px -14px rgba(34,50,59,.5);
  --serif:Fraunces,Georgia,"Times New Roman",serif;
  --sans:"Libre Franklin",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}

body{margin:0;background:var(--paper);color:var(--ink-2);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;font-size:17px;line-height:1.6}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
img{max-width:100%;display:block}
[hidden]{display:none!important}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
@media (max-width:600px){.wrap{padding:0 20px}}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* type */
.d1{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0;font-weight:500;
  font-size:clamp(60px,9vw,124px);line-height:.92;letter-spacing:-.022em;color:var(--ink);
  margin:0;text-wrap:pretty}
.d2{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 0;font-weight:500;
  font-size:clamp(40px,5.2vw,72px);line-height:1;letter-spacing:-.02em;color:var(--ink);
  margin:0;text-wrap:pretty}
.d3{font-family:var(--serif);font-variation-settings:'opsz' 96,'SOFT' 0;font-weight:500;
  font-size:clamp(28px,3vw,38px);line-height:1.1;letter-spacing:-.012em;color:var(--ink);
  margin:0;text-wrap:pretty}
.d4{font-family:var(--serif);font-variation-settings:'opsz' 96,'SOFT' 0;font-weight:500;
  font-size:22px;line-height:1.18;letter-spacing:-.01em;color:var(--ink);margin:0;text-wrap:pretty}
.pull{font-family:var(--serif);font-variation-settings:'opsz' 96,'SOFT' 0;font-weight:400;
  font-size:clamp(32px,3.8vw,50px);line-height:1.06;letter-spacing:-.015em;color:var(--ink);
  margin:0;text-wrap:pretty}
.t1{font-size:20px;line-height:1.65;color:var(--ink-2);margin:0;max-width:68ch;text-wrap:pretty}
.t2{font-size:17px;line-height:1.65;color:var(--ink-2);margin:0;max-width:64ch;text-wrap:pretty}
.t3{font-size:14px;line-height:1.6;color:var(--ink-3);margin:0;text-wrap:pretty}
.m1{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-3);margin:0}
.m2{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin:0}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin:0}
.band .eyebrow{color:var(--clay)}
.stamp{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.hdr{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--rule)}
.hdr .wrap{height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap}
.mark{font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;font-weight:500}
.nav{display:flex;align-items:center;gap:32px}
.nav a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  color:var(--ink-3);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color 200ms,border-color 200ms}
.nav a:hover,.nav a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
@media (max-width:600px){.hdr .wrap{height:auto;padding-top:12px;padding-bottom:12px}
  .nav{gap:20px;width:100%}}

/* buttons */
.btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;
  padding:18px 32px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  border:0;cursor:pointer;font-family:var(--sans);box-shadow:0 2px 3px rgba(34,50,59,.12),
  0 12px 28px -12px rgba(34,50,59,.42);transition:background-color 200ms,box-shadow 200ms,transform 200ms}
.btn:hover{background:var(--accent);color:var(--paper);box-shadow:var(--lift-2);transform:translateY(-2px)}
.btn[disabled],.btn.is-off{background:transparent;color:var(--ink-3);border:1px solid var(--rule);
  box-shadow:none;cursor:not-allowed}
.btn[disabled]:hover,.btn.is-off:hover{transform:none;background:transparent;color:var(--ink-3)}
.btn-ghost{display:inline-block;padding:16px 28px;border:1px solid var(--ink);color:var(--ink);
  text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  transition:background-color 200ms,color 200ms}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}

/* sections */
.sec{padding:96px 0}
.sec-sm{padding:64px 0}
.sec-alt{background:var(--band-alt)}
.band{background:var(--ink);color:var(--on-band)}
.band .d2,.band .d3{color:var(--on-band)}
.band .m2{color:var(--clay)}
.band .t1,.band .t2{color:var(--on-band-2)}
@media (max-width:860px){.sec{padding:64px 0}}

/* index tabs — DESIGN_v4 §5.1 */
.tabs{display:flex;gap:4px;align-items:flex-end;border-bottom:1.5px solid var(--ink);
  padding-bottom:2px;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.tab{flex:0 0 auto;height:36px;padding:0 18px;border:1.5px solid var(--ink);border-bottom:0;
  border-radius:3px 3px 0 0;background:transparent;color:var(--ink-3);font-family:var(--mono);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;margin-bottom:-1.5px;
  transition:color 200ms,background-color 200ms}
.tab:hover{color:var(--ink)}
.tab .n{color:var(--accent)}
.tab[aria-selected="true"]{background:var(--surface);color:var(--ink);
  box-shadow:0 1.5px 0 0 var(--surface)}
.tab[aria-selected="true"] .n{color:var(--accent)}

/* card grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px;list-style:none;margin:0;
  padding:48px 0 0}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr);gap:36px 24px}}
@media (max-width:620px){.grid{grid-template-columns:1fr;gap:40px}}

.card{position:relative;display:flex;flex-direction:column;gap:16px}
.card__media{position:relative;z-index:2;background:var(--surface);box-shadow:var(--lift);
  transition:box-shadow 240ms,transform 240ms}
.media-link{position:absolute;inset:0;z-index:1;display:block}
.card:hover .card__media{box-shadow:var(--lift-2);transform:translateY(-2px)}
/* 1/1, not 4/5. The listing cards are square by design and the 4/5 box was drawn for
   grey placeholders. Cropping a square cover into 4/5 cuts the title off it. */
.frames{position:relative;aspect-ratio:1/1}
.frame{position:absolute;inset:0;opacity:0;transition:opacity 240ms;background:var(--hatch),var(--surface);
  display:flex;flex-direction:column;justify-content:flex-end;padding:16px}
.frame.has-img,.card__media[data-pager] .frame.has-img,.gal__main .frame.has-img{padding:0}
.frame.has-img img{width:100%;height:100%;object-fit:contain;background:var(--paper)}
/* the pager lives BELOW the artwork, in flow. It used to sit bottom:0 inside the square,
   directly over each card's own designed footer band. */
.card__media[data-pager] .pager{position:static;background:var(--surface);
  border-top:1px solid var(--rule)}
.frame[data-on]{opacity:1}
.frame span{font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.mark-status{position:absolute;top:0;left:0;z-index:3;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;background:var(--ink);
  color:var(--paper)}
.mark-status.is-verif{background:var(--clay);color:var(--ink)}
.pager{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;
  justify-content:space-between;gap:8px;padding:12px 12px}
.dots{display:flex;gap:6px}
.dot{width:8px;height:8px;padding:0;border:1px solid var(--ink);background:transparent;
  border-radius:50%;cursor:pointer;transition:background-color 160ms}
.dot[aria-current="true"]{background:var(--ink)}
.count{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3)}
.card__body{display:flex;flex-direction:column;gap:8px}
.card__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.card__title{font-family:var(--serif);font-variation-settings:'opsz' 96,'SOFT' 0;font-weight:500;
  font-size:21px;line-height:1.15;letter-spacing:-.01em;color:var(--ink);margin:0;text-wrap:pretty}
.card__title a{color:inherit;text-decoration:none}
.card__title a::after{content:"";position:absolute;inset:0;z-index:1}
.card:hover .card__title a{color:var(--accent)}
.price{font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--ink);white-space:nowrap}
.price.is-none{color:var(--ink-3)}

/* product page */
.prod{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding-top:56px}
.prod__gal{grid-column:1/7}
.prod__buy{grid-column:8/13}
@media (max-width:860px){.prod{grid-template-columns:1fr;padding-top:32px}
  .prod__gal,.prod__buy{grid-column:1/-1}}
.gal__main{position:relative;aspect-ratio:1/1;background:var(--surface);box-shadow:var(--lift)}
.gal__thumbs{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.thumb{width:60px;aspect-ratio:1/1;padding:0;border:1px solid var(--rule);cursor:pointer;
  overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb{
  background:var(--hatch),var(--surface);transition:border-color 160ms}
.thumb[aria-current="true"]{border-color:var(--ink);border-width:1.5px}
.spec{width:100%;border-collapse:collapse;margin:24px 0 0}
.spec th,.spec td{text-align:left;padding:12px 0;border-bottom:1px solid var(--rule);
  font-size:14px;vertical-align:top}
.spec th{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;width:40%}
.spec td{color:var(--ink)}
.blocks{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:88px 0 0}
.blocks>*{grid-column:1/7}
.blocks>*:nth-child(even){grid-column:7/13}
@media (max-width:860px){.blocks>*,.blocks>*:nth-child(even){grid-column:1/-1}}
.blocks ul{margin:16px 0 0;padding-left:1.1em}
.blocks li{margin:0 0 10px;max-width:52ch;line-height:1.6}

/* footer + the capture that now lives in it */
.ftr{border-top:1.5px solid var(--ink);margin-top:96px;padding:48px 0 56px}
/* the band already carries its own weight; no gap between it and the footer rule */
main:has(> .band:last-child) + .ftr{margin-top:0}
.ftr__row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.ftr__note{max-width:46ch}
.cap{max-width:44ch}
.cap__line{margin:12px 0 0;font-size:17px;line-height:1.5;color:var(--ink)}
.cap form{display:flex;gap:8px;margin:16px 0 10px;flex-wrap:wrap}
.cap input{flex:1 1 200px;min-width:0;padding:13px 12px;border:1px solid var(--rule);
  background:var(--surface);font-family:var(--sans);font-size:16px;color:var(--ink)}
.cap .btn{padding:13px 20px;box-shadow:none}
.cap .btn:hover{transform:none;box-shadow:none}
.ftr__base{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center;
  margin-top:48px;padding-top:20px;border-top:1px solid var(--rule)}
.ftr__links{display:flex;gap:24px;flex-wrap:wrap}
.ftr__links a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);text-decoration:none}
.ftr__links a:hover{color:var(--ink)}
@media (max-width:860px){.ftr__row{grid-template-columns:1fr;gap:40px}
  .ftr__base{justify-content:flex-start;gap:16px}}

/* demo banner */
.demo{background:var(--clay);color:var(--ink);border-bottom:1px solid var(--ink)}
.demo .wrap{padding-top:10px;padding-bottom:10px}
.demo p{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.04em;line-height:1.5}
.demo strong{text-transform:uppercase;letter-spacing:.08em}

/* reveal */
[data-reveal]{transition:opacity 600ms cubic-bezier(.22,.61,.36,1),
  transform 600ms cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important}}

.crumb{display:flex;gap:10px;align-items:center;padding-top:32px}
.crumb a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);text-decoration:none}
.crumb a:hover{color:var(--ink)}

@media (max-width:860px){
  .g12{grid-template-columns:1fr!important}
  .g12>*{grid-column:1/-1!important;justify-self:start!important;margin-top:0!important;
    padding-top:0!important}
  .g12>*+*{margin-top:40px!important}
  .claims{grid-template-columns:1fr!important;column-gap:0!important}
  .claims li{padding-top:48px!important}
}
@media print{.hdr,.demo,.pager,.btn{display:none}.card__media{box-shadow:none}}