/* ============================================================
   URN ATELIER — Collections & series pages
   Extends assets/css/site.css (same tokens, same type, same paper)
   ============================================================ */

/* ---------- Interior page head ---------- */
.page-head{
  padding-top:clamp(112px,13vw,178px);
  padding-bottom:clamp(40px,5vw,68px);
  background:linear-gradient(180deg, var(--paper-hi) 0%, var(--paper) 100%);
}
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:0 0 clamp(24px,3vw,38px);
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint);
}
.crumbs a{ color:var(--ink-mid); border-bottom:1px solid transparent; transition:color .3s var(--ease), border-color .3s var(--ease); }
.crumbs a:hover{ color:var(--gold-deep); border-color:var(--gold-line); }
.crumbs .sep{ opacity:.5; }
.crumbs [aria-current]{ color:var(--gold-deep); }

.page-title{
  margin:0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(40px,7vw,88px);
  line-height:1.02; letter-spacing:-.014em;
}
.page-title em{ font-style:italic; font-weight:300; color:var(--gold-deep); }
.page-title .zh{
  display:block;
  margin-top:.34em;
  font-family:var(--serif-alt); font-size:clamp(17px,2.1vw,25px); font-weight:400;
  letter-spacing:.36em; text-indent:.36em; color:var(--ink-faint);
}
.page-lede{
  margin:clamp(26px,3.2vw,40px) 0 0;
  max-width:66ch;
  font-size:18px; line-height:1.82; color:var(--ink-mid);
}
.page-facts{
  display:flex; flex-wrap:wrap; gap:clamp(22px,4vw,56px);
  margin:clamp(32px,4vw,52px) 0 0;
  padding-top:clamp(22px,2.6vw,32px);
  border-top:1px solid var(--paper-edge);
}
.page-facts div{ display:flex; flex-direction:column; gap:6px; }
.page-facts dt{
  font-family:var(--sans); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-deep);
}
.page-facts dd{ margin:0; font-family:var(--serif-alt); font-size:17px; color:var(--ink-soft); }

/* ---------- Series editorial row (overview page) ---------- */
.series-stack{ display:grid; gap:clamp(64px,8vw,120px); }

.series-row{
  display:grid;
  gap:clamp(32px,4.6vw,72px);
  grid-template-columns:1fr;
  align-items:center;
}
.series-row + .series-row{ padding-top:clamp(56px,7vw,104px); border-top:1px solid var(--paper-edge); }

.series-plate{ margin:0; }
.series-plate .frame{
  position:relative; overflow:hidden;
  background:var(--lacquer);
  aspect-ratio:4/3;
  box-shadow:0 40px 80px -50px rgba(60,45,24,.5);
}
.series-plate img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.series-plate:hover img{ transform:scale(1.03); }
.series-plate figcaption{
  margin-top:16px;
  font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
}

.series-copy{ max-width:60ch; }
.series-index{
  margin:0 0 14px;
  font-family:var(--serif); font-size:30px; font-weight:300; line-height:1;
  letter-spacing:.1em; color:var(--gold);
}
.series-name{
  margin:0 0 6px;
  font-family:var(--serif); font-size:clamp(30px,3.6vw,46px); font-weight:400;
  line-height:1.1; letter-spacing:-.005em;
}
.series-zh{
  margin:0 0 22px;
  font-family:var(--serif-alt); font-size:16px; letter-spacing:.34em; text-indent:.34em;
  color:var(--ink-faint);
}
.series-blurb{ margin:0 0 18px; font-size:17.5px; line-height:1.8; color:var(--ink-mid); }
.series-note{
  margin:0 0 26px; padding-left:18px;
  border-left:2px solid var(--gold-pale);
  font-family:var(--serif-alt); font-size:16.5px; font-style:italic; line-height:1.78; color:var(--ink-mid);
}
.series-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(16px,2.4vw,30px);
}
.series-count{
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep);
}
.series-pending{
  font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* ---------- Works gallery (series page + overview index) ---------- */
.works-section{ background:var(--paper-lo); }

.works-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:clamp(34px,4.4vw,60px);
}
.works-head .sec-title{ font-size:clamp(28px,3.6vw,46px); }

.works-grid{
  display:grid; gap:clamp(20px,2.6vw,40px) clamp(18px,2.2vw,32px);
  grid-template-columns:1fr;
  list-style:none; margin:0; padding:0;
}

.work{ display:flex; flex-direction:column; }

.work-plate{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:4/3;
  background:var(--lacquer);
  border:1px solid rgba(35,33,31,.10);
  transition:box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.work-plate img{ width:100%; height:100%; object-fit:cover; transition:transform 1.05s var(--ease); }
.work:hover .work-plate{ box-shadow:0 30px 60px -38px rgba(60,45,24,.55); border-color:var(--gold-pale); }
.work:hover .work-plate img{ transform:scale(1.04); }

.work-caption{ padding-top:15px; display:flex; flex-direction:column; gap:5px; }
.work-code{
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep);
}
.work-name{
  font-family:var(--serif); font-size:clamp(19px,1.5vw,23px); font-weight:400; line-height:1.22;
  color:var(--ink);
}
.work-zh{
  font-family:var(--serif-alt); font-size:14.5px; letter-spacing:.16em; color:var(--ink-faint);
}

/* A catalogue record still awaiting photography — stated plainly, never faked */
.work--awaiting .work-plate{
  background:var(--paper-hi);
  border:1px dashed var(--paper-edge);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
}
.work--awaiting .work-plate img{ width:40px; height:44px; object-fit:contain; opacity:.5; }
.work--awaiting .wp-note{
  font-family:var(--sans); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint); text-align:center; padding-inline:18px; line-height:1.7;
}

/* ---------- Series pagination ---------- */
.series-nav{
  display:grid; gap:clamp(18px,2.4vw,34px);
  grid-template-columns:1fr;
  padding-block:clamp(52px,6.6vw,92px);
}
.series-nav a,
.series-nav .sn-pending{
  display:flex; flex-direction:column; gap:8px;
  padding:clamp(24px,3vw,36px);
  border:1px solid var(--paper-edge);
  background:var(--paper-hi);
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.series-nav a:hover{ border-color:var(--gold-pale); transform:translateY(-3px); }
.series-nav .sn-pending{ border-style:dashed; background:transparent; }
.series-nav .sn-dir{
  font-family:var(--sans); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-deep);
}
.series-nav .sn-name{
  font-family:var(--serif); font-size:clamp(22px,2.6vw,32px); font-weight:400;
}
.series-nav .sn-note{
  font-family:var(--sans); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint);
}
.series-nav .sn-next{ text-align:right; }
.series-nav .sn-pending .sn-name{ color:var(--ink-mid); }

/* Index groups on the collections overview */
.works-group + .works-group{ margin-top:clamp(64px,8vw,116px); padding-top:clamp(56px,7vw,104px); border-top:1px solid var(--paper-edge); }
.works-group .works-head{ margin-bottom:clamp(28px,3.6vw,48px); }
.works-group .works-head .series-count{ margin:0; }

/* Every plate is a route into the work's own page */
.work-link{
  display:flex; flex-direction:column; flex:1;
  color:inherit;
}
.work-link:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; }
.work:focus-within .work-plate{ border-color:var(--gold-pale); }

.head-link{ color:var(--gold-deep); border-bottom:1px solid transparent; transition:border-color .3s var(--ease); }
.head-link:hover{ border-color:var(--gold-line); }

.series-plate figcaption a{ border-bottom:1px solid transparent; transition:color .3s var(--ease), border-color .3s var(--ease); }
.series-plate figcaption a:hover{ color:var(--gold-deep); border-color:var(--gold-line); }

/* ============================================================
   WORK DETAIL PAGE  —  the plate hung beside its catalogue record
   ============================================================ */
.prod-section{ padding-block:clamp(46px,6vw,84px) clamp(64px,8vw,120px); }
.prod-grid{
  display:grid; gap:clamp(34px,4.6vw,72px);
  grid-template-columns:1fr;
  align-items:start;
}

.prod-plate{ margin:0; }
.prod-plate .work-plate{
  box-shadow:0 44px 88px -52px rgba(60,45,24,.55);
}
.prod-plate--awaiting .work-plate{
  background:var(--paper-hi);
  border:1px dashed var(--paper-edge);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
.prod-plate--awaiting .work-plate img{ width:44px; height:48px; object-fit:contain; opacity:.5; }
.prod-plate--awaiting .wp-note{
  font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint); text-align:center; line-height:1.7;
}
.prod-plate figcaption{
  margin-top:18px;
  font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
}

.prod-h{
  margin:0 0 clamp(20px,2.4vw,30px);
  font-family:var(--serif); font-size:clamp(24px,2.6vw,34px); font-weight:400; line-height:1.14;
}
.prod-h em{ font-style:italic; font-weight:300; color:var(--gold-deep); }

.prod-facts{ margin:0; display:grid; gap:0; }
.prod-facts > div{
  display:grid; gap:6px;
  padding-block:clamp(14px,1.6vw,19px);
  border-top:1px solid var(--paper-edge);
}
.prod-facts > div:last-child{ border-bottom:1px solid var(--paper-edge); }
.prod-facts dt{
  font-family:var(--sans); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-deep);
}
.prod-facts dd{ margin:0; font-size:16.5px; line-height:1.7; color:var(--ink-soft); }

.prod-cta{
  display:flex; flex-wrap:wrap; gap:12px;
  margin:clamp(28px,3.4vw,40px) 0 0;
}
.prod-cta .btn{ flex:1 1 210px; }

.prod-note{
  margin:20px 0 0;
  font-family:var(--serif-alt); font-size:14.5px; line-height:1.75; color:var(--ink-mid);
}
.prod-note strong{ color:var(--ink); font-weight:500; letter-spacing:.04em; }
.prod-note .pn-alt{ display:block; margin-top:7px; font-style:italic; color:var(--ink-faint); }

/* ---------- Responsive ---------- */
@media (min-width:640px){
  .works-grid{ grid-template-columns:repeat(2,1fr); }
  .series-nav{ grid-template-columns:1fr 1fr; }
}

@media (min-width:1000px){
  .series-row{ grid-template-columns:1.06fr .94fr; }
  .series-row:nth-child(even) .series-plate{ order:2; }
  .series-row:nth-child(even) .series-copy{ order:1; }
  .works-grid{ grid-template-columns:repeat(3,1fr); }
  .page-facts{ gap:clamp(30px,4vw,68px); }
  .prod-grid{ grid-template-columns:1.1fr .9fr; gap:clamp(48px,5.5vw,90px); }
  .prod-record{ padding-top:6px; }
}

@media (min-width:1400px){
  .works-grid{ grid-template-columns:repeat(4,1fr); }
}

@media (max-width:520px){
  .page-lede{ font-size:16.5px; }
  .series-blurb{ font-size:16.5px; }
}


/* ============================================================
   FOOTER — legal row
   The previous WordPress site linked its five legal pages from the
   footer. They are legally required to stay reachable, so the same
   entry points are carried over. Typography matches .footer-base
   exactly; no other part of the footer changes.
   ============================================================ */
.ft-legal{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:6px 20px; margin:0;
}
.ft-legal a{
  font-family:var(--sans); font-size:11px; letter-spacing:.1em;
  color:#7E766A; transition:color .3s var(--ease);
}
.ft-legal a:hover{ color:var(--gold-line); }
.ft-legal span{ color:#4E463C; font-size:11px; }

@media (max-width:640px){
  .footer-base{ flex-direction:column; align-items:flex-start; }
}


/* ============================================================
   LEGAL PAGES (/legal/*)
   Carried over verbatim from the previous site. Only the typography
   is expressed in this site's tokens — the wording is untouched.
   ============================================================ */
.legal-body{
  max-width:74ch; margin:0 auto;
  padding-bottom:clamp(64px,8vw,110px);
}
.legal-body h2{
  margin:clamp(38px,4vw,54px) 0 16px;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(24px,2.5vw,31px); line-height:1.24;
  letter-spacing:.005em; color:var(--ink);
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body h3{
  margin:30px 0 12px;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(19px,1.9vw,23px); line-height:1.3; color:var(--ink-soft);
}
.legal-body p{
  margin:0 0 17px;
  font-family:var(--serif-alt); font-size:17px; line-height:1.82;
  color:var(--ink-mid);
}
.legal-body ul,
.legal-body ol{
  margin:0 0 20px; padding-left:1.35em;
  display:grid; gap:9px;
}
.legal-body li{
  font-family:var(--serif-alt); font-size:17px; line-height:1.78;
  color:var(--ink-mid);
}
.legal-body strong{ color:var(--ink-soft); font-weight:500; }
.legal-body a{
  color:var(--gold-deep);
  border-bottom:1px solid var(--gold-pale);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.legal-body a:hover{ color:var(--gold); border-bottom-color:var(--gold-line); }
.legal-body hr{
  margin:clamp(34px,3.6vw,46px) 0;
  border:0; border-top:1px solid var(--paper-edge);
}
.legal-meta{
  margin:0 0 clamp(30px,3.4vw,44px);
  font-family:var(--sans); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint);
}


/* ============================================================
   404 PAGE (served by Cloudflare Pages for any unmatched path)
   ============================================================ */
.nf-actions{
  display:flex; flex-wrap:wrap; gap:14px;
  margin:clamp(34px,4vw,52px) 0 0;
}