/* site-v2.css — shared design system for the v2 collection pages.
   Lines up to the EXTENSIONS fence are a verbatim extraction of
   selected-works.html lines 9-379, plus the six edits listed below.
   selected-works.html is FROZEN and does NOT load this file; it keeps
   its own inline copy. That duplication is deliberate and is guarded by
   check-parity.py — run it after ANY token change.

   The six edits, all computed-value-preserving:
     E1  :root gains --gutter --fade-w --card-max --page-bg-rgb
     E2  those tokens substituted at every existing 104/56/22 site, and both
         edge-fade gradients rebuilt from --page-bg-rgb
     E3  .work-card width gains var(--ar, 1) fallback and var(--card-max)
     E4  .arrow[disabled] becomes CSS instead of a JS inline style
     E5  .art-button:focus-visible (the reference has none)
     E6  .section-subtitle[hidden],.work-line[hidden]{display:none}

   Do NOT resolve or delete the UNDECIDED .work-title comment block. It is an
   open design decision and it now lives in exactly one place, which is the
   entire point of extracting this file. */

/* ============================================================
   FONTS — pointing at the real site files (correct boxen path)
   ============================================================ */
@font-face{
  font-family:'GothamPro Light';
  src:url('webfonts/GothamPro_Light/GothamPro-Light.woff') format('woff'),
      url('webfonts/GothamPro_Light/GothamPro-Light.ttf') format('truetype');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'boxen light';
  src:url('webfonts/boxen_light/boxen-light.woff') format('woff'),
      url('webfonts/boxen_light/boxen-light.ttf') format('truetype');
  font-weight:normal; font-style:normal; font-display:swap;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:#111111;
  --ink-soft:rgba(17,17,17,.58);
  --ink-faint:rgba(17,17,17,.58);   /* .38 measured 2.48:1 on the white card, below the 4.5:1 floor for the dimensions line and scroll hint. .58 = 4.61:1. */
  --accent:#982068;
  --sans:'GothamPro Light', Arial, sans-serif;
  --serif:'boxen light', Georgia, "Times New Roman", serif;

  --page-bg:#f6f5f3;          /* warm paper, so white cards read as objects */
  --card-bg:#ffffff;
  --card-radius:18px;
  --card-pad:22px;
  --card-line:rgba(17,17,17,.07);

  --frame-h:520px;            /* uniform image height = gallery hanging line */
  --card-gap:38px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* v2 additions — see check-parity.py allowlist */
  --gutter:104px;             /* the page's master horizontal unit */
  --fade-w:104px;             /* edge-fade width; tracks the gutter except at mobile */
  --card-max:62vw;            /* upper clamp on card width */
  --page-bg-rgb:246,245,243;  /* --page-bg as components, so the fades can take alpha */
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--page-bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}

/* ============================================================
   SITE CHROME — logo + nav, styling copied from your style.css
   ============================================================ */
.site-chrome{ padding:0 var(--gutter); }
.navbar{ padding-left:0; padding-right:0; }
.site-logo{ height:40px; width:auto; display:block; }
.navbar-nav.ml-auto{ align-items:flex-start; }
.navbar-nav.ml-auto .nav-item{ display:flex; align-items:flex-start; }
.navbar-nav.ml-auto .nav-link{
  margin-top:30px; margin-left:28px;
  padding-top:0; padding-bottom:0; line-height:1;
  font-family:var(--sans); color:var(--ink);
  display:inline-flex; align-items:center;
}
.navbar-nav.ml-auto .nav-link:hover,
.navbar-nav .nav-link:hover{ color:var(--accent) !important; }
.navbar-nav .nav-link{ letter-spacing:.04em; }
#navbarDropdown1{ color:var(--ink); }
#navbarDropdown1:hover{ color:var(--accent); }
.navbar-nav.ml-auto .dropdown-toggle::after{
  margin-left:.35em; vertical-align:middle; position:relative; top:-1px;
}
.dropdown-menu{ font-family:var(--sans); font-size:14px; border-radius:8px; }
.dropdown-item:hover,
.dropdown-item.active{ background:transparent; color:var(--accent); }

/* ============================================================
   HEADER
   ============================================================ */
.section-header{ margin:64px 0 26px var(--gutter); max-width:60ch; }
.section-title{
  font-family:var(--serif);
  font-size:34px; font-weight:400; letter-spacing:.01em;
  margin:0 0 6px;
}
.section-subtitle{
  font-family:var(--sans); font-size:13px; letter-spacing:.06em;
  color:var(--ink-soft); margin:0;
}
.scroll-hint{
  margin:0 0 0 var(--gutter); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint);
  display:flex; align-items:center; gap:9px;
}
.scroll-hint svg{ animation:nudge 2.4s var(--ease) infinite; }
@keyframes nudge{ 0%,60%,100%{transform:translateX(0);} 75%{transform:translateX(5px);} }

/* ============================================================
   SCROLLER — same mechanics as the live site
   ============================================================ */
.media-scroller-wrap{ position:relative; padding:22px 0 20px; }
.media-scroller-wrap::before,
.media-scroller-wrap::after{
  content:""; position:absolute; top:0; bottom:0; width:var(--fade-w);
  pointer-events:none; z-index:3; transition:opacity .3s var(--ease);
}
.media-scroller-wrap::before{ left:0;  background:linear-gradient(to right,rgb(var(--page-bg-rgb)) 0%,rgba(var(--page-bg-rgb),.9) 34%,rgba(var(--page-bg-rgb),0) 100%); }
.media-scroller-wrap::after{  right:0; background:linear-gradient(to left, rgb(var(--page-bg-rgb)) 0%,rgba(var(--page-bg-rgb),.9) 34%,rgba(var(--page-bg-rgb),0) 100%); }
.media-scroller-wrap.at-start::before{ opacity:0; }
.media-scroller-wrap.at-end::after{ opacity:0; }

.media-scroller{
  display:grid; grid-auto-flow:column; align-items:start;
  overflow-x:auto; overflow-y:visible;
  overscroll-behavior-inline:contain;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scroll-snap-stop:always;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  grid-auto-columns:max-content;
  gap:var(--card-gap);
  padding:14px var(--gutter) 44px;
}
.media-scroller::-webkit-scrollbar{ display:none; }

/* ============================================================
   THE CARD
   ============================================================ */
.work-card{
  /* it is a real button: whole surface is the target */
  appearance:none; -webkit-appearance:none;
  font:inherit; color:inherit; text-align:left;
  background:var(--card-bg);
  border:1px solid var(--card-line);
  border-radius:var(--card-radius);
  padding:var(--card-pad);
  margin:0;
  cursor:pointer;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  display:grid;
  grid-template-rows:var(--frame-h) auto;
  gap:16px;
  width:clamp(290px, calc(var(--frame-h) * var(--ar, 1) + 2 * var(--card-pad)), var(--card-max));
  position:relative;
  opacity:.5;
  transform:scale(.972);
  box-shadow:0 1px 2px rgba(17,17,17,.04);
  transition:opacity .46s var(--ease), transform .46s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.work-card.active{
  opacity:1;
  transform:scale(1);
  box-shadow:0 1px 2px rgba(17,17,17,.05), 0 10px 26px -14px rgba(17,17,17,.22);
}
.work-card:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
@media (hover:hover) and (pointer:fine){
  .work-card.active:hover{
    transform:scale(1) translateY(-5px);
    border-color:rgba(17,17,17,.13);
    box-shadow:0 2px 4px rgba(17,17,17,.05), 0 22px 44px -18px rgba(17,17,17,.34);
  }
  .work-card.active:hover .work-frame img{ transform:scale(1.028); }
  .work-card.active:hover .work-cue{ color:var(--ink); }
  .work-card.active:hover .work-cue .cue-arrow{ transform:translateX(4px); }
}

/* image frame — fixed height, natural width: the gallery hanging line */
.work-frame{
  height:var(--frame-h);
  width:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border-radius:8px;
  position:relative;
}
.work-frame img{
  flex:0 0 auto;
  max-width:100%; max-height:100%;
  width:auto; height:auto; display:block;
  transition:transform .6s var(--ease);
}

/* detail-count badge — tells you there's depth BEFORE you click */
.detail-badge{
  position:absolute; top:10px; right:10px;
  display:flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(17,17,17,.08);
  border-radius:100px;
  padding:5px 11px;
  font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft);
  opacity:0; transform:translateY(-4px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events:none;
}
.work-card.active .detail-badge{ opacity:1; transform:translateY(0); }

/* ---- metadata block ---- */
.work-meta{ display:grid; gap:3px; align-content:start; }
.work-title{
  font-family:var(--serif); font-size:19px; letter-spacing:.01em;
  margin:0; line-height:1.25; color:var(--ink);
}
/* --- UNDECIDED: quieter sans titles. Swap the block above for this one
       to compare. Nothing else needs to change.
.work-title{
  font-family:var(--sans); font-size:14.5px; letter-spacing:.05em;
  margin:0 0 1px; line-height:1.35; color:var(--ink);
}
--- */
.work-line{
  font-size:11.5px; letter-spacing:.045em; color:var(--ink-soft);
  margin:0; line-height:1.5;
}
.work-dims{ font-size:11.5px; letter-spacing:.045em; color:var(--ink-faint); margin:0; }
.section-subtitle[hidden],.work-line[hidden]{ display:none; }

/* ---- the affordance row: ALWAYS visible, never hover-gated ---- */
.work-foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:13px; padding-top:13px;
  border-top:1px solid var(--card-line);
}
.work-cue{
  display:flex; align-items:center; gap:7px;
  font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-soft);
  transition:color .25s var(--ease);
}
.work-cue .cue-arrow{ transition:transform .3s var(--ease); display:block; }
.work-status{
  font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--accent);
  border:1px solid rgba(152,32,104,.3);
  border-radius:100px; padding:4px 10px; white-space:nowrap;
}

/* ============================================================
   ARROWS
   ============================================================ */
.gallery-nav{
  display:flex; justify-content:space-between; align-items:center;
  padding:0 var(--gutter); margin-top:4px;
}
.arrow{
  background:var(--card-bg); border:1px solid var(--card-line);
  border-radius:50%; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink);
  transition:opacity .3s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow:0 1px 3px rgba(17,17,17,.06);
}
.arrow:hover{ transform:scale(1.06); box-shadow:0 4px 12px -3px rgba(17,17,17,.2); }
.arrow:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.arrow[disabled]{ opacity:.28; pointer-events:none; }

/* ============================================================
   LIGHTBOX — kept, but given orientation
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:9999;
  background:rgba(12,12,12,.96);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:34px 88px 22px;
  opacity:0; visibility:hidden;
  transition:opacity .36s var(--ease), visibility .36s var(--ease);
  overscroll-behavior:none;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
body.lightbox-open{ overflow:hidden; }

.lightbox-stage{
  flex:1; min-height:0; width:100%;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-image{
  max-width:100%; max-height:100%; width:auto; height:auto; display:block;
  border-radius:6px;
  animation:lbFade .42s var(--ease);
}
@keyframes lbFade{ from{opacity:0; transform:scale(.985);} to{opacity:1; transform:scale(1);} }

.lightbox-bar{
  width:100%; display:flex; align-items:flex-end; justify-content:space-between;
  gap:26px; padding-top:18px; flex-shrink:0;
}
.lightbox-meta{ display:grid; gap:4px; }
.lightbox-title{ font-family:var(--serif); font-size:17px; color:#f4f4f4; margin:0; }
.lightbox-caption{ font-size:11.5px; letter-spacing:.045em; color:#8f8f8f; margin:0; }

/* filmstrip: see every detail at once, jump anywhere */
.lightbox-strip{
  display:flex; gap:8px; align-items:center;
  overflow-x:auto; scrollbar-width:none; max-width:52vw; padding:2px;
}
.lightbox-strip::-webkit-scrollbar{ display:none; }
.strip-thumb{
  flex:0 0 auto; width:52px; height:52px; padding:0;
  border:1px solid rgba(255,255,255,.16); border-radius:6px;
  background:#1a1a1a; overflow:hidden; cursor:pointer;
  opacity:.5; transition:opacity .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.strip-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.strip-thumb:hover{ opacity:.85; }
.strip-thumb.current{ opacity:1; border-color:#f4f4f4; transform:translateY(-2px); }
.strip-thumb:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.lightbox-right{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.lightbox-counter{
  font-size:10.5px; letter-spacing:.16em; color:#8f8f8f;
  font-variant-numeric:tabular-nums;
}
.art-button{
  display:inline-block; text-decoration:none;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:#f4f4f4; border:1px solid rgba(255,255,255,.34);
  border-radius:100px; padding:9px 20px;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.art-button:hover{ background:#f4f4f4; color:#111; border-color:#f4f4f4; }
.art-button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.lightbox-close{
  position:absolute; top:20px; right:26px;
  background:none; border:none; color:#f2f2f2;
  font-size:30px; line-height:1; cursor:pointer; opacity:.8;
  width:40px; height:40px; border-radius:50%;
  transition:opacity .25s var(--ease), background .25s var(--ease);
}
.lightbox-close:hover{ opacity:1; background:rgba(255,255,255,.1); }
.lightbox-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:none; color:#f2f2f2; cursor:pointer;
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .25s var(--ease), background .25s var(--ease);
}
.lightbox-arrow:hover{ background:rgba(255,255,255,.1); }
.lightbox-prev{ left:22px; } .lightbox-next{ right:22px; }
.lightbox-close:focus-visible,.lightbox-arrow:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1199.98px){
  :root{ --frame-h:430px; --gutter:56px; --fade-w:56px; }
}
@media (max-width:767.98px){
  /* --fade-w is 24 while --gutter is 22. That mismatch is deliberate in the
     original: the mobile fade is slightly wider than the mobile gutter. */
  :root{ --frame-h:330px; --card-pad:16px; --card-gap:20px; --gutter:22px; --fade-w:24px; }
  .section-header{ margin:40px 0 18px var(--gutter); }
  .section-title{ font-size:26px; }
  .lightbox{ padding:56px 14px 16px; }
  .lightbox-bar{ flex-direction:column; align-items:flex-start; gap:14px; }
  .lightbox-strip{ max-width:100%; }
  .lightbox-right{ align-items:flex-start; }
  .lightbox-arrow{ width:44px; height:44px; }
  .lightbox-prev{ left:4px; } .lightbox-next{ right:4px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .media-scroller{ scroll-behavior:auto; }
}


/* ===================== v2 EXTENSIONS ===================== */
/* New selectors only. Nothing above this fence is touched by anything below it. */

/* ---- video card model (videos.html) ----------------------------------
   The card frame is shaped by cardAspect (the video's true shape); the poster
   inside it is a different shape on all five records. The gap is filled by a
   blurred, darkened copy of the same image — nothing is cropped or upscaled. */
.work-card.model-video{ --card-max:82vw; }   /* load-bearing: at cardAspect 2.1546 the
                                                800-lb-gorillas card computes to 1164px,
                                                which 62vw would clamp to 893px @1440. */
.work-card.model-video .work-frame{ background:#0d0d0d; }
.video-plate{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:blur(22px) saturate(.65) brightness(.5);
  transform:scale(1.12);
  z-index:0; pointer-events:none;
}
.work-card.model-video .work-frame img{ position:relative; z-index:1; }
.play-badge{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:62px; height:62px; border-radius:50%;
  background:rgba(20,20,20,.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
  color:#fff; pointer-events:none;
  transition:transform .3s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .work-card.active:hover .play-badge{ transform:translate(-50%,-50%) scale(1.06); }
}
/* same geometry and reveal as .detail-badge, inverted for the dark plate */
.duration-badge{
  position:absolute; top:10px; right:10px;
  border-radius:100px; padding:5px 11px;
  font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  background:rgba(12,12,12,.72); color:#f2f2f2;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transform:translateY(-4px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events:none; z-index:2;
}
.work-card.active .duration-badge{ opacity:1; transform:translateY(0); }

/* ---- missing-image tripwire -------------------------------------------- */
.work-frame.is-missing::after{
  content:"image missing";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-faint); background:rgba(17,17,17,.03);
}

/* ---- lightbox video ----------------------------------------------------- */
.lightbox-video{
  max-width:100%; max-height:100%; width:auto; height:auto; display:block;
  border-radius:6px; background:#000;
}
.media-note{
  font-size:11px; letter-spacing:.09em; color:#7d7d7d; margin:0;
  font-variant-numeric:tabular-nums;
}

/* ---- empty collection (offerings.html) ------------------------------- */
.collection-empty{ margin:8px 0 0 var(--gutter); max-width:46ch; }
.empty-note{
  font-family:var(--serif); font-size:19px; line-height:1.45;
  color:var(--ink); margin:0 0 12px;
}
.empty-subnote{
  font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-soft); margin:0;
}
/* DESIGN-SYSTEM.md §4.7's one addition. Quiet on purpose: an underlined line of
   text, not a pill — the same register as .cv-download / .btn--quiet in §4.8.
   Adds no tokens, so check-parity.py is unaffected. Only offerings.html
   carries the markup these rules select. */
.empty-cta{ margin:28px 0 0; }
.empty-cta-link{
  font-size:12px; letter-spacing:.055em; color:var(--ink);
  text-decoration:none; border-bottom:1px solid var(--card-line);
  padding-bottom:2px; transition:color .18s var(--ease), border-color .18s var(--ease);
}
.empty-cta-link:hover,
.empty-cta-link:focus{ color:var(--accent); border-bottom-color:var(--accent); }
.empty-cta-note{
  display:block; margin-top:8px;
  font-size:11px; letter-spacing:.09em; color:var(--ink-soft);
}

/* ---- commerce slots (prints.html) — written now, used by nothing today.
   Every gate in gallery-v2.js fails against data/prints.json as it stands:
   acquireSuppressed:true, and all seven works have acquireEnabled:false,
   acquireUrl:null, price:null, edition:null, badge:null. ------------------- */
.work-price{ font-size:13px; letter-spacing:.045em; color:var(--ink); margin:0; }
.work-edition{ font-size:11.5px; letter-spacing:.045em; color:var(--ink-soft); margin:0; }
.work-badge{
  font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--accent);
  border:1px solid rgba(152,32,104,.3);
  border-radius:100px; padding:4px 10px; white-space:nowrap;
}
/* .art-button is styled for the dark lightbox and is illegible on --page-bg. */
.art-button--light{ color:var(--ink); border-color:var(--card-line); background:var(--card-bg); }
.art-button--light:hover{ background:var(--ink); color:var(--page-bg); border-color:var(--ink); }


/* ============================================================
   PRINTS — dark card ground
   ------------------------------------------------------------
   The Residue prints are photographed as framed, matted objects: cream frame,
   cream mat, and the work itself is often close to a blind emboss. Measured,
   33-65% of each image is near-white. On the white card they simply vanish —
   every asset loads, nothing errors, and the card still reads as blank.

   A dark ground makes them read as objects on a wall. It is also the ground the
   paintings themselves are built on, so this is consistent rather than special.

   Scoped to .work-card, NOT to body, so the scroller arrows and .art-button--light
   around it keep the light treatment they were designed for.

   Contrast measured against #1c1a18: ink 15.13:1, ink-soft 6.25:1,
   ink-faint 4.96:1, accent 4.65:1 — all pass WCAG AA for their sizes.
   The site accent #982068 is only 2.27:1 here, so it is lifted to the same hue.
   ============================================================ */
body.collection-prints .work-card{
  --card-bg:#1c1a18;
  --card-line:rgba(255,255,255,.12);
  --ink:#f2efea;
  --ink-soft:rgba(242,239,234,.62);
  --ink-faint:rgba(242,239,234,.52);
  --accent:#c9628f;
}
/* the frame's own rounding sits inside the dark card, so soften its edge */
body.collection-prints .work-frame{ background:rgba(255,255,255,.02); }