/* ==========================================================================
   editions.css — the print room
   --------------------------------------------------------------------------
   Rebuilt against two references the artist chose: Unit London Editions and
   Artsy. What was wrong with the previous version, and what those two do
   instead:

   1. IT HAD A FILTER BAR. Six products do not need filtering, sorting, or a
      count. Unit London shows a title, a rule, and the grid. Nothing else.
      Removed entirely.

   2. THE BUY RAIL WAS AN ELEVEN-ROW TABLE. Artist, Series, Year, Medium,
      Edition, Size, Finish, Signature, Certificate, Condition, Frame — every
      fact the page knew, stacked beside the price. Unit London's rail is
      FOUR lines: what it is printed on, that it is signed, the edition size,
      the dimensions. Artsy is the same, and keeps its full specification
      table further down the page, below the fold, for the person who scrolls
      looking for it. That is the structure here now: a short rail that lets
      you buy, and the complete record underneath for whoever wants it.

   3. IT TALKED TOO MUCH. Three reassurance bullets, a four-panel guarantee
      row, six FAQs and a note under the form. Neither reference does any of
      that on a product page. Shipping, returns and release terms are closed
      accordions — present, findable, silent until asked.

   4. AVAILABILITY WAS A NUMBER. It is binary now, which is what was asked
      for: a price, or the words Sold Out in its place. No counters, no
      "only four left". Unit London does exactly this.

   The structure is theirs. The palette, the type and the voice are the
   site's own.
   ========================================================================== */

/* ==========================================================================
   1. THE INDEX
   ========================================================================== */

.ed-head{
  max-width:1360px; margin-inline:auto;
  padding:calc(var(--page-header-h) + clamp(40px,7vh,88px)) var(--sp-2) clamp(28px,4vh,48px);
}
/* Title with a rule running off to the right of it — Unit London's masthead
   for a collection. The rule is what makes it read as a section of a shop
   rather than the title of an essay. */
.ed-head__title{
  display:flex; align-items:center; gap:clamp(18px,2vw,32px);
  font-family:var(--font-serif); font-size:clamp(28px,3vw,42px);
  line-height:1; color:var(--umber-900); margin:0; font-weight:400;
}
.ed-head__title::after{
  content:""; flex:1 1 auto; height:1px; background:var(--on-light-4);
}
.ed-head__lead{
  font-family:var(--font-longform); font-size:16px; line-height:1.7;
  color:var(--on-light-2); max-width:62ch; margin:var(--sp-3) 0 0;
}

/* ---- the grid ---- */
.ed-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(40px,4vw,72px) clamp(20px,2.4vw,40px);
  max-width:1360px; margin-inline:auto;
  padding:0 var(--sp-2) clamp(64px,10vh,120px);
  list-style:none;
}
.ed-grid li{ min-width:0; }

.ed-card{ display:block; text-decoration:none; color:inherit; }

/* A uniform box keeps the row reading as a set rather than as six unrelated
   pictures. */
.ed-card__plate{
  overflow:hidden; background:var(--plaster-200);
  aspect-ratio:4/5;
}
.ed-card__plate img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.2s var(--ease);
}
.ed-card:hover .ed-card__plate img,
.ed-card:focus-visible .ed-card__plate img{ transform:scale(1.03); }

/* The head row: who made it on the left, what it costs on the right, on one
   baseline. The price is a filled block, not a line of text — it is the one
   thing on the card that is an offer rather than a description. */
.ed-card__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin-top:var(--sp-2);
}
.ed-card__artist{
  font-family:var(--font-sans); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--umber-900); margin:0;
}
.ed-card__title{
  font-family:var(--font-serif); font-style:italic; font-size:19px;
  line-height:1.3; color:var(--umber-900); margin:4px 0 0;
}
.ed-card__price{
  flex:none;
  font-family:var(--font-sans); font-size:11.5px; letter-spacing:.1em;
  padding:7px 14px; white-space:nowrap;
  background:var(--chip-bg); color:var(--chip-fg);
  transition:background-color 220ms ease, color 220ms ease;
}
.ed-card:hover .ed-card__price{ background:var(--sienna); color:#f5f1e8; }
/* Sold out is not a button. It is a statement, so it loses the fill. */
.ed-card__price--sold{
  background:transparent; color:var(--on-light-3);
  border:1px solid var(--on-light-4);
}
.ed-card:hover .ed-card__price--sold{ background:transparent; color:var(--on-light-3); }

/* The four lines. Tight, small, grey — the specification as a caption, not
   as a feature list. */
.ed-card__spec{
  font-family:var(--font-longform); font-size:13.5px; line-height:1.62;
  color:var(--on-light-2); margin:14px 0 0;
}

@media (max-width:1000px){ .ed-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){
  .ed-grid{ grid-template-columns:1fr; gap:var(--sp-4); }
  .ed-card__plate{ aspect-ratio:1/1; }
}


/* ==========================================================================
   2. THE DETAIL PAGE
   Two columns. Work on the left, the whole of the business on the right.
   ========================================================================== */

.pdp{
  max-width:1360px; margin-inline:auto;
  padding:calc(var(--page-header-h) + clamp(24px,4vh,52px)) var(--sp-2) clamp(56px,8vh,100px);
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(36px,5vw,96px); align-items:start;
}

.pdp__crumb{
  grid-column:1/-1;
  font-family:var(--font-sans); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--on-light-3); margin:0 0 var(--sp-3);
}
.pdp__crumb a{ color:inherit; text-decoration:none; }
.pdp__crumb a:hover{ color:var(--sienna); }
.pdp__crumb span{ margin:0 8px; opacity:.45; }

/* ---- the work ---- */
.pdp__stage{
  background:var(--plaster-200); cursor:zoom-in; position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,3vw,44px);
}
.pdp__stage img{ width:100%; height:auto; display:block; }
.pdp__stage::after{
  content:"Click to enlarge";
  position:absolute; right:14px; bottom:14px;
  font-family:var(--font-sans); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--on-light-3);
  opacity:0; transition:opacity 240ms ease;
}
.pdp__stage:hover::after{ opacity:1; }

/* ---- the rail ---- */
.pdp__rail{ position:sticky; top:calc(var(--page-header-h) + 28px); }

.pdp__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.pdp__artist{
  font-family:var(--font-sans); font-size:13px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--umber-900); margin:0;
}
.pdp__price{
  font-family:var(--font-sans); font-size:17px; letter-spacing:.04em;
  color:var(--umber-900); margin:0;
}
.pdp__price--sold{
  color:var(--on-light-3); letter-spacing:.14em;
  text-transform:uppercase; font-size:12px;
}
.pdp__title{
  font-family:var(--font-serif); font-style:italic;
  font-size:clamp(24px,2.4vw,34px); line-height:1.15;
  color:var(--umber-900); margin:6px 0 0; font-weight:400;
}
.pdp__title span{ font-style:normal; color:var(--on-light-3); }

.pdp__sep{ border:0; border-top:1px solid var(--on-light-4); margin:22px 0 20px; }

/* The four lines, exactly as the index card carries them. */
.pdp__label{
  font-family:var(--font-sans); font-size:12px; font-weight:500;
  letter-spacing:.02em; color:var(--umber-900); margin:0 0 10px;
}
.pdp__desc{
  font-family:var(--font-longform); font-size:14px; line-height:1.72;
  color:var(--on-light-2); margin:0;
}

/* Unit London runs Description straight into About with one gap, not a
   section break. var(--sp-4) was leaving a hole that read as a missing
   element rather than as breathing room. */
/* ---- the rail is one accordion ----
   Every panel, Description included, belongs to a single exclusive group
   (name="pdp" in the markup). Opening one closes whichever was open, so the
   rail is always exactly one panel tall and the button never moves far down
   the page. Description is the panel that starts open.

   The old version had Description and the bio sitting permanently above four
   collapsed panels, which meant the rail's height depended on which sitter
   you were looking at and the buy button could be most of a screen down. */
.pdp__more{ margin-top:22px; }
.pdp__more details{ border-top:1px solid var(--on-light-4); }
.pdp__more details:last-of-type{ border-bottom:1px solid var(--on-light-4); }
/* the open panel's label carries a little more weight, so the rail
   always shows you where you are */
.pdp__more details[open] > summary{ color:var(--umber-900); font-weight:500; }
.pdp__more summary{
  cursor:pointer; list-style:none; position:relative;
  font-family:var(--font-sans); font-size:13px;
  color:var(--umber-900); padding:16px 30px 16px 0;
  transition:color 200ms ease;
}
.pdp__more summary::-webkit-details-marker{ display:none; }
.pdp__more summary:hover{ color:var(--sienna); }
/* an arrow, the way both references mark these */
.pdp__more summary::after{
  content:"\2192"; position:absolute; right:2px; top:50%;
  transform:translateY(-50%); transition:transform 300ms var(--ease);
  color:var(--on-light-3);
}
.pdp__more details[open] summary::after{ transform:translateY(-50%) rotate(90deg); }
.pdp__more details p{
  font-family:var(--font-longform); font-size:14px; line-height:1.75;
  color:var(--on-light-2); margin:0 0 var(--sp-3); max-width:58ch;
}

/* ---- the one action ---- */
.ed-btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; margin-top:26px;
  font-family:var(--font-sans); font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; cursor:pointer;
  padding:17px 24px; border:1px solid var(--chip-bg);
  background:var(--chip-bg); color:var(--chip-fg);
  transition:background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}
.ed-btn:hover, .ed-btn:focus-visible{
  background:var(--sienna); border-color:var(--sienna); color:#f5f1e8;
}
.ed-btn--sold{
  background:transparent; color:var(--on-light-3);
  border-color:var(--on-light-4); cursor:default;
}
.ed-btn--sold:hover{
  background:transparent; color:var(--on-light-3); border-color:var(--on-light-4);
}


/* ==========================================================================
   4. KEEP EXPLORING — the other five, in the index's own card language
   ========================================================================== */

.ed-more{ background:var(--plaster-100); }
.ed-more__inner{
  max-width:1360px; margin-inline:auto;
  padding:clamp(48px,7vh,88px) var(--sp-2);
}
.ed-more h2{
  font-family:var(--font-sans); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--on-light-3);
  margin:0 0 var(--sp-4); font-weight:500;
}
.ed-more__grid{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(14px,1.8vw,28px); list-style:none; padding:0; margin:0;
}
.ed-more__grid .ed-card__title{ font-size:15px; }
.ed-more__grid .ed-card__price{ font-size:10.5px; padding:5px 10px; }

@media (max-width:900px){ .ed-more__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:520px){ .ed-more__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media (max-width:980px){
  .pdp{ grid-template-columns:1fr; }
  .pdp__rail{ position:static; }
}


/* ---- lightbox ---- */
.pdp-zoom{
  position:fixed; inset:0; z-index:250; background:rgba(10,8,6,.95);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 260ms ease;
  cursor:zoom-out; overflow:auto; padding:24px;
}
.pdp-zoom.on{ opacity:1; pointer-events:auto; }
.pdp-zoom img{ max-width:none; width:min(2200px,185%); height:auto; display:block; }
.pdp-zoom__close{
  position:fixed; top:18px; right:18px; z-index:2;
  font-family:var(--font-sans); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:#f5f1e8;
  background:none; border:1px solid rgba(245,241,232,.4);
  padding:9px 14px; cursor:pointer;
}
.pdp-zoom__close:hover{ background:rgba(245,241,232,.14); }


/* ==========================================================================
   5. ENQUIRY — one screen, at the foot of the index only
   ========================================================================== */

.ed-enq{ max-width:640px; margin-inline:auto; }
.ed-enq__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3); }
.ed-field{ display:flex; flex-direction:column; gap:8px; }
.ed-field--wide{ grid-column:1/-1; }
.ed-field label{
  font-family:var(--font-sans); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--on-light-3);
}
.ed-field input, .ed-field textarea, .ed-field select{
  font-family:var(--font-longform); font-size:15px; color:var(--umber-900);
  background:transparent; border:0; border-bottom:1px solid var(--on-light-4);
  padding:9px 0; transition:border-color 200ms ease;
}
.ed-field textarea{ resize:vertical; min-height:88px; line-height:1.6; }
.ed-field input:focus, .ed-field textarea:focus, .ed-field select:focus{
  outline:none; border-bottom-color:var(--sienna);
}
.ed-field select option{ color:#1a170e; background:#f5f1e8; }
.ed-enq__msg{
  font-family:var(--font-longform); font-style:italic; font-size:15px;
  color:var(--sienna); margin:var(--sp-3) 0 0;
}
@media (max-width:620px){ .ed-enq__grid{ grid-template-columns:1fr; } }


/* ==========================================================================
   6. LINK COLOUR SPECIFICITY
   siris-light.css sets `body.v2-light a{ color:var(--umber-500) }`, which is
   two elements plus a class and therefore beats a bare component class.
   Every link that is part of a component has to restate its colour at
   matching weight or it silently comes out brown.
   ========================================================================== */

body.v2-light a.ed-btn{ color:var(--chip-fg); }
body.v2-light a.ed-btn:hover,
body.v2-light a.ed-btn:focus-visible{ color:#f5f1e8; }
body.v2-light a.ed-btn--sold{ color:var(--on-light-3); }
body.v2-light a.ed-card,
body.v2-light .ed-more__grid a,
body.v2-light .ed-grid a{ color:inherit; }
body.v2-light .pdp__crumb a{ color:var(--on-light-3); }
body.v2-light .pdp__crumb a:hover{ color:var(--sienna); }
body.v2-light .pdp__more details p a,
body.v2-light .ed-record dd a{ color:var(--sienna); }

@media print{
  .pdp{ display:block !important; }
  .ed-btn, .pdp-zoom, .ed-enq, .ed-more{ display:none !important; }
}