/* Single committed visual world: a gallery wall. Every color is painted explicitly
   so the page holds on either host ground. No accent token &mdash; the artwork is the accent. */
:root{
  --paper:#F5F5F2;
  --paper-2:#E9E9E4;
  --tile:#FFFFFF;           /* the square every piece hangs on */
  --ink:#16161A;
  --ink-dim:#5F5F59;
  --line:rgba(22,22,26,.15);
  --line-strong:rgba(22,22,26,.34);
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(1.25rem,5vw,4.5rem);
  --rule:clamp(4.5rem,9vw,8rem);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Salt grain over the whole page &mdash; the one material gesture. */
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;
  opacity:.13;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:inherit}
html{scroll-behavior:smooth}
/* Anchor jumps must clear the sticky masthead. */
.series,.statement,.cv,.inquire,.shop,.intent,.work{scroll-margin-top:11rem}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

/* ── Loading screen (luma-spin, ported to plain CSS) ────── */
#loader{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  background:var(--paper);
  transition:opacity .55s ease;
}
#loader.is-done{opacity:0;pointer-events:none}
.luma-spin{position:relative;width:65px;aspect-ratio:1}
.luma-spin span{
  position:absolute;border-radius:50px;
  box-shadow:inset 0 0 0 3px var(--ink);
  animation:loaderAnim 2.5s infinite;
}
.luma-spin span:nth-child(2){animation-delay:-1.25s}
@keyframes loaderAnim{
  0%{inset:0 35px 35px 0}
  12.5%{inset:0 35px 0 0}
  25%{inset:35px 35px 0 0}
  37.5%{inset:35px 0 0 0}
  50%{inset:35px 0 0 35px}
  62.5%{inset:0 0 0 35px}
  75%{inset:0 0 35px 35px}
  87.5%{inset:0 0 35px 0}
  100%{inset:0 35px 35px 0}
}
/* Hold the entrance sequence until the loader clears, so it isn't spent behind it. */
body:not(.ready) .masthead>*,
body:not(.ready) .hero-slider,
body:not(.ready) .hero-label{animation-play-state:paused}


/* ── Header ─────────────────────────────────────────────── */
.masthead{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding:clamp(1.4rem,3vw,2.2rem) var(--gut) clamp(.85rem,1.8vw,1.15rem);
  display:flex;flex-direction:column;align-items:center;gap:clamp(.9rem,2vw,1.4rem);
  text-align:center;
}
.wordmark{
  font-family:var(--display);
  font-variation-settings:"opsz" 60,"SOFT" 20,"WONK" 1;
  font-weight:400;
  font-size:clamp(1rem,2.1vw,1.45rem);
  letter-spacing:.42em;
  text-indent:.42em;
  margin:0;
  text-transform:uppercase;
  white-space:nowrap;
}
.series-nav{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(.9rem,2.4vw,2.1rem);
  font-family:var(--mono);
  font-size:.66rem;font-weight:300;
  letter-spacing:.17em;text-transform:uppercase;
}
.series-nav a{
  color:var(--ink-dim);text-decoration:none;
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color .35s ease,border-color .35s ease;
}
.series-nav a:hover{color:var(--ink);border-bottom-color:var(--line-strong)}

/* ── Hero ───────────────────────────────────────────────── */
.hero{padding:0 var(--gut);margin-top:clamp(1.5rem,4vw,3rem)}
.hero-label{margin-top:clamp(.9rem,1.8vw,1.35rem);max-width:34rem}

/* ── Hero slider ────────────────────────────────────────────
   Same white tile as everywhere else; the slider only changes which
   painting is hanging on it. */
.hero-slider{position:relative}
.slides{display:grid}
.slide{
  grid-area:1/1;margin:0;
  display:flex;flex-direction:column;align-items:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .7s ease,visibility 0s linear .7s;
}
.slide.is-on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .7s ease}
.slide-nav{
  position:absolute;top:calc(50% - 2.6rem);transform:translateY(-50%);z-index:5;
  appearance:none;background:none;border:0;cursor:pointer;
  font-family:var(--display);font-size:2.4rem;line-height:1;
  color:var(--paper);padding:.1rem .6rem .3rem;
  background:color-mix(in srgb,var(--ink) 42%,transparent);
  backdrop-filter:blur(6px);
  transition:background .3s ease;
}
.slide-nav:hover{background:color-mix(in srgb,var(--ink) 72%,transparent)}
.slide-nav.prev{left:clamp(.2rem,1.5vw,1.1rem)}
.slide-nav.next{right:clamp(.2rem,1.5vw,1.1rem)}
.dots{display:flex;justify-content:center;gap:.55rem;margin-top:clamp(1rem,2vw,1.5rem)}
.dot{
  appearance:none;border:1px solid var(--line-strong);background:none;
  width:7px;height:7px;border-radius:50%;padding:0;cursor:pointer;
  transition:background .3s ease;
}
.dot[aria-selected="true"]{background:var(--ink);border-color:var(--ink)}
@media (max-width:640px){.slide-nav{font-size:1.8rem;padding:.2rem .35rem}}

/* ── Rooms ──────────────────────────────────────────────────*/
.rooms{padding:var(--rule) var(--gut) 0;margin-top:var(--rule);border-top:1px solid var(--line)}
figure.room{margin:0}
figure.room img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--paper-2)}
.rooms-note{
  margin:clamp(1.1rem,2vw,1.6rem) 0 0;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-dim);
}

/* ── Shared frame + tombstone label ─────────────────────── */
.frame{
  position:relative;width:100%;aspect-ratio:1;overflow:hidden;
  background:var(--paper-2);display:block;
}
.frame svg{width:100%;height:100%;display:block}
/* Cutouts are already the shape of the artwork, so the frame is just wall:
   no ground, no crop &mdash; the piece hangs at its own proportion. */
/* Every piece gets an identical white square and is centred inside it. The
   paintings are all different shapes; the tile is what makes the wall even. */
.frame.photo{background:var(--tile);aspect-ratio:1;padding:7%}
.frame.photo img{width:100%;height:100%;object-fit:contain;display:block}
.scene{display:block;width:100%;height:min(74vh,720px);background:var(--paper)}
.scene img{width:100%;height:100%;object-fit:contain;display:block}
.hero-label{margin-top:clamp(.9rem,1.8vw,1.35rem)}
.hero-note{
  margin:clamp(.9rem,1.8vw,1.3rem) 0 0;text-align:center;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-dim);
}
.hero-label{margin-left:auto;margin-right:auto;text-align:center}

.label{display:flex;flex-direction:column;gap:.3rem}
.label .t{
  font-family:var(--display);font-style:italic;
  font-variation-settings:"opsz" 20,"SOFT" 40,"WONK" 1;
  font-weight:400;font-size:1.02rem;line-height:1.25;
}
.label .m{
  font-family:var(--mono);font-size:.66rem;font-weight:300;
  letter-spacing:.05em;color:var(--ink-dim);line-height:1.65;
}
.label .s{
  font-family:var(--mono);font-size:.6rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;margin-top:.15rem;
}
.s[data-status="available"]{color:var(--ink)}
.pr{font-variant-numeric:tabular-nums;letter-spacing:.1em}
.s[data-status="held"]{color:var(--ink-dim)}

/* ── Series sections ────────────────────────────────────── */
.series{padding:var(--rule) var(--gut) 0}
.series-head{
  display:grid;grid-template-columns:1fr;gap:.9rem;
  padding-bottom:clamp(1.8rem,4vw,3rem);
  border-top:1px solid var(--line);padding-top:1.1rem;
}
.series-head h2{
  font-family:var(--display);
  font-variation-settings:"opsz" 120,"SOFT" 30,"WONK" 1;
  font-weight:400;
  font-size:clamp(2.4rem,7.5vw,5.2rem);
  line-height:.94;letter-spacing:-.02em;margin:0;
  text-wrap:balance;
}
.series-meta{
  font-family:var(--mono);font-size:.66rem;font-weight:300;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-dim);
}
.series-note{max-width:46ch;color:var(--ink-dim);font-size:.94rem}

.grid{display:grid;gap:clamp(1.5rem,3.5vw,3rem)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.four{grid-template-columns:repeat(4,1fr)}

figure.work{margin:0;display:flex;flex-direction:column;gap:.85rem}
figure.work .frame{
  transform:scale(1.045);
  transition:opacity .5s ease,
             transform 1.4s cubic-bezier(.2,.7,.3,1) calc(var(--d,0ms) + 120ms);
}
figure.work.in .frame{transform:none}
figure.work:hover .frame{opacity:.88}

/* ── Shop ───────────────────────────────────────────────────
   Same wall, different object: merch is photographed product, so these
   frames keep a ground and crop to a common rectangle, where the artwork
   frames above stay transparent and uncropped. */
.shop-filters{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:.4rem}
.filter{
  appearance:none;background:none;border:0;padding:0 0 3px;cursor:pointer;
  font-family:var(--mono);font-size:.66rem;font-weight:300;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink-dim);
  border-bottom:1px solid transparent;
  transition:color .35s ease,border-color .35s ease;
}
.filter:hover{color:var(--ink)}
.filter.is-on{color:var(--ink);border-bottom-color:var(--line-strong)}
.filter .n{font-variant-numeric:tabular-nums;opacity:.55;margin-left:.35em}

figure.item{
  margin:0;display:flex;flex-direction:column;gap:.8rem;
  content-visibility:auto;                 /* skip layout+paint for off-screen cards */
  contain-intrinsic-block-size:auto 420px; /* reserve height only — never width */
}
figure.item[hidden]{display:none}
.frame.shot{aspect-ratio:1;background:var(--tile)}
.frame.shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .5s ease}
figure.item:hover .frame.shot img{opacity:.88}
.label .row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:.2rem}
.price{font-family:var(--mono);font-size:.72rem;font-variant-numeric:tabular-nums}
.add{
  appearance:none;background:none;border:0;padding:0 0 2px;cursor:pointer;
  font-family:var(--mono);font-size:.6rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--line-strong);
  transition:border-color .35s ease,opacity .35s ease;
}
.add:hover{border-bottom-color:var(--ink)}
.add.added{opacity:.5;border-bottom-color:transparent}

/* Cart bar — only present once something is in it. */
.cart{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  transform:translateY(101%);transition:transform .45s cubic-bezier(.2,.7,.3,1);
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  backdrop-filter:blur(14px);border-top:1px solid var(--line);
  padding:1rem var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
}
.cart.is-up{transform:none}
.cart-sum{color:var(--ink-dim);font-variant-numeric:tabular-nums}
.cart-actions{display:flex;align-items:center;gap:1.4rem}
.cart-clear{appearance:none;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:var(--ink-dim);text-transform:uppercase}
.cart-clear:hover{color:var(--ink)}
.checkout{
  appearance:none;cursor:pointer;font:inherit;letter-spacing:.16em;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  padding:.7rem 1.5rem;transition:opacity .35s ease;
}
.checkout:hover{opacity:.84}
@media (max-width:520px){
  .cart{padding:.85rem var(--gut)}
  .cart-actions{width:100%;justify-content:space-between}
}

/* ── Intent band ────────────────────────────────────────────
   The device borrowed from the reference: a short trio of claims, one
   statement, one way in. Wording is drawn from her own statement below,
   not from the reference site. */
.intent{
  padding:var(--rule) var(--gut) 0;margin-top:var(--rule);
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(1.6rem,3.5vw,2.6rem);
}
.intent-trio{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.7rem clamp(1.4rem,4vw,3.4rem);
  font-family:var(--mono);font-size:.66rem;font-weight:300;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink-dim);
}
.intent-trio span:first-child{color:var(--ink)}
.intent h2{
  font-family:var(--display);
  font-variation-settings:"opsz" 120,"SOFT" 30,"WONK" 1;
  font-weight:400;font-size:clamp(2rem,6vw,4rem);line-height:1;
  margin:0;letter-spacing:-.02em;text-wrap:balance;
}
.intent p{max-width:52ch;margin:0;color:var(--ink-dim);font-size:clamp(1rem,1.4vw,1.15rem)}
.cta{
  display:inline-block;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.17em;text-transform:uppercase;text-decoration:none;
  background:var(--ink);color:var(--paper);
  padding:1rem 2.2rem;border:1px solid var(--ink);
  transition:opacity .35s ease;
}
.cta:hover{opacity:.84}

/* ── Originals ──────────────────────────────────────────────
   A band of cropped detail, then the promise. The detail strip is the
   reference site's device; the claim is plain fact about originals. */
.originals{
  padding:var(--rule) 0 0;margin-top:var(--rule);
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:clamp(2rem,4vw,3.2rem);
}
.originals-strip{
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:100%;
  gap:2px;width:100%;
  height:clamp(90px,14vw,170px);background:var(--line);overflow:hidden;
}
.originals-strip img{width:100%;height:100%;min-height:0;object-fit:cover;display:block;background:var(--tile)}
.originals-body{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(1.1rem,2.4vw,1.7rem);padding:0 var(--gut);
}
.originals h2{
  font-family:var(--display);
  font-variation-settings:"opsz" 120,"SOFT" 30,"WONK" 1;
  font-weight:400;font-size:clamp(1.8rem,5vw,3.4rem);line-height:1.02;
  margin:0;letter-spacing:-.02em;text-wrap:balance;max-width:18ch;
}
.originals p{max-width:54ch;margin:0;color:var(--ink-dim);font-size:clamp(1rem,1.4vw,1.15rem)}

/* ── Statement ──────────────────────────────────────────── */
.statement{
  padding:var(--rule) var(--gut) 0;
  display:grid;grid-template-columns:minmax(0,12rem) minmax(0,62ch);
  gap:clamp(1.5rem,4vw,4rem);
  border-top:1px solid var(--line);margin-top:var(--rule);
}
.eyebrow{
  font-family:var(--mono);font-size:.66rem;font-weight:300;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink-dim);
  padding-top:.5rem;
}
.statement p{
  font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.72;
  margin:0 0 1.35rem;font-weight:400;
}
.statement p:first-of-type{
  font-family:var(--display);
  font-variation-settings:"opsz" 40,"SOFT" 30,"WONK" 0;
  font-size:clamp(1.3rem,2.3vw,1.75rem);line-height:1.5;font-weight:400;
}

/* ── Exhibitions ────────────────────────────────────────── */
.cv{
  padding:var(--rule) var(--gut) 0;margin-top:var(--rule);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);
}
.cv-list{display:flex;flex-direction:column;max-width:52rem}
.cv-row{
  display:grid;grid-template-columns:5.5rem 1fr auto;
  gap:1rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--line);
  font-size:.95rem;
}
.cv-row .yr{font-family:var(--mono);font-size:.72rem;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.cv-row .ven em{
  font-family:var(--display);font-style:italic;
  font-variation-settings:"opsz" 20,"SOFT" 40,"WONK" 1;
}
.cv-empty{margin:0;color:var(--ink-dim);font-size:.95rem}
.cv-row .kind{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);
}

/* ── Inquire ────────────────────────────────────────────── */
.inquire{
  padding:var(--rule) var(--gut);margin-top:var(--rule);
  border-top:1px solid var(--line);
}
.inquire h2{
  font-family:var(--display);
  font-variation-settings:"opsz" 120,"SOFT" 30,"WONK" 1;
  font-weight:400;font-size:clamp(2rem,6vw,4rem);line-height:1;
  margin:0 0 1.5rem;letter-spacing:-.02em;
}
.inquire p{max-width:44ch;color:var(--ink-dim);margin:0 0 2rem}
.mail{
  display:inline-block;font-family:var(--display);
  font-variation-settings:"opsz" 60,"SOFT" 20,"WONK" 0;
  font-size:clamp(1.1rem,2.6vw,1.7rem);
  text-decoration:none;border-bottom:1px solid var(--line-strong);
  padding-bottom:.25rem;transition:border-color .35s ease;
}
.mail:hover{border-bottom-color:var(--ink)}

footer{
  padding:2.5rem var(--gut) 3.5rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-dim);
}

/* ── Motion: one orchestrated load, then quiet scroll reveals ── */
.rise{
  opacity:0;transform:translateY(26px);
  transition:opacity 1.05s cubic-bezier(.2,.7,.3,1) var(--d,0ms),
             transform 1.05s cubic-bezier(.2,.7,.3,1) var(--d,0ms);
}
.rise.in{opacity:1;transform:none}
@keyframes settle{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes bloom{from{opacity:0;transform:scale(1.045)}to{opacity:1;transform:none}}
.masthead>*{animation:settle .9s cubic-bezier(.2,.7,.3,1) both}
.masthead .series-nav{animation-delay:.18s}
.hero-slider{animation:bloom 1.6s cubic-bezier(.2,.7,.3,1) .1s both}
.hero-label{animation:settle 1s cubic-bezier(.2,.7,.3,1) .9s both}

@media (max-width:860px){
  .grid.three,.grid.four{grid-template-columns:repeat(2,1fr)}
  .statement,.cv{grid-template-columns:1fr}
  .cv-row{grid-template-columns:4rem 1fr;row-gap:.2rem}
  .cv-empty{margin:0;color:var(--ink-dim);font-size:.95rem}
.cv-row .kind{grid-column:2}
}
@media (max-width:520px){
  .grid.two,.grid.three,.grid.four{grid-template-columns:1fr}
  .wordmark{font-size:.82rem;letter-spacing:.3em;text-indent:.3em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #loader{display:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
  figure.work .frame{transform:none!important}
  .slide{transition:none!important}
  .rise{opacity:1;transform:none}
}

/* ── Checkout ───────────────────────────────────────────────*/
.checkout-page{padding:var(--rule) var(--gut) 0;min-height:52vh}
.co-empty{padding:2rem 0 4rem;color:var(--ink-dim)}
.co-links{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}
.cta.ghost{background:none;color:var(--ink);border:1px solid var(--line-strong)}
.cta.ghost:hover{border-color:var(--ink);opacity:1}
.co-table{width:100%;border-collapse:collapse;margin-top:1rem}
.co-table th,.co-table td{
  text-align:left;padding:1rem 0;border-bottom:1px solid var(--line);
  font-size:.95rem;font-weight:400;vertical-align:middle;
}
.co-table thead th{
  font-family:var(--mono);font-size:.6rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);
  padding-bottom:.6rem;
}
.co-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.co-name{font-family:var(--display);font-style:italic;font-size:1.02rem}
.co-kind{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-dim)}
.co-table tfoot th{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);text-align:right;padding-right:1rem}
.co-table tfoot td{font-variant-numeric:tabular-nums}
.qty{
  appearance:none;background:none;border:1px solid var(--line-strong);
  width:1.7rem;height:1.7rem;line-height:1;cursor:pointer;color:var(--ink);
  font-family:var(--mono);font-size:.8rem;transition:border-color .3s ease;
}
.qty:hover{border-color:var(--ink)}
.qty-n{display:inline-block;min-width:2ch;text-align:center;
  font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:.8rem}
.co-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;margin-top:2.5rem}
.co-note{margin:1rem 0 0;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-dim)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wordmark a{text-decoration:none;color:inherit}
details.more{margin-top:1.5rem}
details.more summary{
  cursor:pointer;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink-dim);
}
details.more summary:hover{color:var(--ink)}
details.more[open] summary{margin-bottom:1.35rem}
@media (max-width:640px){
  .co-table .co-kind{display:none}
  .co-table thead th:nth-child(2){display:none}
}

/* ── Print Shop ─────────────────────────────────────────────
   Same white tile as the gallery, but each card is a link (not a buy
   button) into the per-print detail page — mirrors the reference site's
   grid-then-product-page structure in this site's own visual language. */
.print-card{
  display:flex;flex-direction:column;gap:.85rem;text-decoration:none;color:inherit;
}
.print-card-label{display:flex;flex-direction:column;gap:.3rem}
.print-card-label .t{
  font-family:var(--display);font-style:italic;
  font-variation-settings:"opsz" 20,"SOFT" 40,"WONK" 1;
  font-weight:400;font-size:1.02rem;line-height:1.25;
}
.print-card-label .m{
  font-family:var(--mono);font-size:.66rem;font-weight:300;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);
}
.print-card .frame{transition:opacity .35s ease}
.print-card:hover .frame{opacity:.88}
.print-card[hidden]{display:none}

/* ── Print detail ───────────────────────────────────────────*/
.back-link{
  display:inline-block;margin-bottom:clamp(1.5rem,3vw,2.5rem);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-dim);text-decoration:none;
}
.back-link:hover{color:var(--ink)}
.print-detail-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.print-detail .frame{max-width:32rem}
.pd-info{display:flex;flex-direction:column;gap:.9rem;padding-top:.4rem}
.pd-price{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-dim);
}
.pd-title{
  font-family:var(--display);
  font-variation-settings:"opsz" 60,"SOFT" 30,"WONK" 1;
  font-weight:400;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.05;
  margin:0;letter-spacing:-.01em;
}
.pd-medium{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-dim);margin-bottom:.6rem;
}
.pd-field{display:flex;flex-direction:column;gap:.4rem;max-width:22rem}
.pd-field span{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);
}
.pd-field select, .pd-field input{
  font:inherit;font-family:var(--body);font-size:.95rem;
  padding:.65rem .8rem;border:1px solid var(--line-strong);
  background:var(--paper);color:var(--ink);border-radius:0;
  appearance:none;
}
.pd-qty input{width:6rem}
.pd-purchase{margin-top:.6rem;border:1px solid var(--ink);cursor:pointer}
.pd-purchase:disabled{
  background:none;color:var(--ink-dim);border-color:var(--line-strong);
  cursor:default;opacity:1;
}
.pd-note{max-width:34ch;color:var(--ink-dim);font-size:.88rem;margin:.4rem 0 0}
.pd-inquire{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line-strong);
  text-decoration:none;align-self:flex-start;padding-bottom:2px;
}
.pd-inquire:hover{border-bottom-color:var(--ink)}
@media (max-width:760px){
  .print-detail-grid{grid-template-columns:1fr}
}

.label .feat{
  font-family:var(--mono);font-size:.56rem;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);
}
