/* ============================================================
   work.html — "The Work" page styles
   Class-based system extracted from the former inline markup.
   Declarations mirror the originals verbatim, so the visual
   result is identical; responsiveness now lives in classes
   (no [style*] hooks). Reuses tokens from site.css.
   ============================================================ */

/* ---------- layout shell ---------- */
.wk-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); box-sizing: border-box; }
.wk-intro { margin-bottom: 8px; }
.wk-block { display: flex; flex-direction: column; gap: 16px; margin-bottom: 64px; }
.wk-block.is-tight { margin-bottom: 24px; }
.wk-part { margin: 0 0 32px; }
.wk-tick { width: 26px; height: 1px; background: var(--amber); }
.wk-rule { display: block; width: 44px; height: 1px; background: var(--amber); margin-bottom: 24px; }

/* ---------- headings + intro copy ---------- */
.wk-h1   { font-family: var(--display); font-weight: 500; font-size: clamp(28px, 5.4vw, 44px); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 18px; }
.wk-lede { font-size: 16px; line-height: 1.6; color: #3A3633; max-width: 720px; margin: 0 0 14px; }
.wk-dek  { font-size: 15px; line-height: 1.6; color: #3A3633; max-width: 680px; margin: 0; }
.wk-h-dest  { font-family: var(--display); font-weight: 500; font-size: clamp(26px, 4.4vw, 34px); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 12px; }
.wk-h-prob  { font-family: var(--display); font-weight: 500; font-size: clamp(27px, 5.1vw, 42px); line-height: 1.04; letter-spacing: -0.01em; margin: 0 0 28px; }
.wk-h-story { font-family: var(--display); font-weight: 500; font-size: clamp(27px, 4.8vw, 38px); line-height: 1; margin: 0 0 8px; }
.wk-h-zine  { font-family: var(--display); font-weight: 500; font-size: clamp(26px, 4.4vw, 34px); line-height: 1.04; margin: 0 0 14px; }
.wk-h-folio { font-family: var(--display); font-weight: 500; font-size: clamp(24px, 3.6vw, 28px); line-height: 1.08; margin: 8px 0 14px; }
.wk-h-30    { font-family: var(--display); font-weight: 500; font-size: clamp(24px, 3.8vw, 30px); line-height: 1.05; margin: 0 0 6px; }

/* ---------- section-header eyebrow row ---------- */
.wk-hd { display: flex; align-items: baseline; gap: 12px; }
.wk-hd-idx  { font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); }
.wk-hd-name { font-family: var(--display); font-size: 21px; font-weight: 500; }
.wk-hd-note { font-size: 12px; color: var(--gray); }

/* ---------- cards ---------- */
.card { border-radius: 2px; padding: clamp(22px, 4.4vw, 56px); }
.card--paper { background: var(--paper); border: 1px solid rgba(17,17,17,0.10); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.card--black { background: #111111; color: var(--paper); box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
.card--warm  { background: var(--warm); border: 1px solid rgba(17,17,17,0.10); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.card.p64 { padding: clamp(24px, 4.8vw, 64px); }

/* ---------- two-column label↔content splits ---------- */
.split { display: grid; gap: 48px; align-items: start; }
.split--340 { grid-template-columns: 340px 1fr; gap: 56px; }
.split--300 { grid-template-columns: 300px 1fr; }
.split--236 { grid-template-columns: 236px 1fr; align-items: end; margin-bottom: 40px; }
.split-copy { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin: 0 0 24px; max-width: 300px; }

/* ---------- the haystack (contact-sheet grids) ---------- */
.hs-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(34px, 7vw, 68px), 1fr)); gap: 5px; }
.hs-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(32px, 6.5vw, 62px), 1fr)); gap: 6px; }
.hs  { position: relative; aspect-ratio: 3/2; border-radius: 1px; overflow: hidden; background: #1a1a18; }
.hs-i  { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(100%) brightness(0.6); }
.hs-i--b7 { filter: grayscale(100%) brightness(0.7); }

/* ---------- generic image fills ---------- */
/* let grid items shrink below their content's intrinsic width (prevents squeeze overflow) */
.split > *, .hs-grid > *, .hs-grid2 > *, .grid-seq > *, .grid-5 > *, .grid-5b > *,
.grid-story > *, .grid-3 > *, .grid-2 > *, .print > * { min-width: 0; }
.img-cover   { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(100%); }
.img-contain { width: 100%; height: 100%; object-fit: contain; display: block; filter: grayscale(100%); }

/* ---------- showcase grids ---------- */
.grid-seq   { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.grid-story { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.grid-5     { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.grid-5b    { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.grid-3     { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; align-items: start; }
.grid-2     { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

/* showcase cells */
.cell  { display: flex; flex-direction: column; gap: 9px; }
.cell8 { display: flex; flex-direction: column; gap: 8px; }
.kpr   { position: relative; aspect-ratio: 3/2; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1.5px var(--amber), 0 6px 18px rgba(0,0,0,0.5); }
.shot  { position: relative; aspect-ratio: 3/2; overflow: hidden; border-radius: 1px; box-shadow: 0 0 0 1px rgba(17,17,17,0.16); }
.shot--d { position: relative; aspect-ratio: 3/2; overflow: hidden; border-radius: 2px; border: 1px solid rgba(246,242,234,0.16); box-shadow: none; }
.idx   { position: absolute; top: 7px; left: 8px; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 10px; color: var(--amber); text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.idx--w { color: var(--paper); top: 6px; left: 7px; }
.tier  { position: absolute; top: 7px; right: 8px; font-size: 8px; color: var(--amber); line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.9); }
.cap-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cap   { font-family: 'Cormorant Garamond', serif; font-size: 15px; line-height: 1.1; color: #111; }
/* portfolio caption: title on its own line, then a tidy city · score meta row */
.fcap  { display: block; font-family: 'Cormorant Garamond', serif; font-size: 16px; line-height: 1.12; color: #111; text-wrap: balance; }
.fmeta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 4px; border-top: 1px solid rgba(17,17,17,0.10); }
/* portfolio stacks: intro on top (constrained), gallery full-width below */
.folio { grid-template-columns: 1fr !important; gap: 36px !important; }
.folio-intro { max-width: 760px; }
.folio-intro p { max-width: 640px; }
.cap-w { font-family: 'Cormorant Garamond', serif; font-size: 14px; line-height: 1.1; color: var(--paper); }
.score { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--amber); }
.meta  { font-size: 11px; letter-spacing: 0.04em; color: var(--gray); }
.crit  { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); }

/* ---------- the story (film strip) ---------- */
.sframe { position: relative; flex: 1; aspect-ratio: 4/5; background: #000; border: 1px solid rgba(246,242,234,0.14); border-radius: 2px; overflow: hidden; }
.sframe-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sidx { position: absolute; top: 8px; left: 9px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--amber); }
.scap { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; color: var(--paper); text-shadow: 0 1px 4px rgba(0,0,0,0.85); }
.bar    { height: 4px; background: rgba(200,154,43,0.55); border-radius: 2px; }
.barcol { display: flex; flex-direction: column; gap: 7px; }

/* ---------- exhibition wall ---------- */
.wall { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; position: relative; z-index: 1; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.station { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; }
.station-hd { display: flex; align-items: center; gap: 7px; height: 18px; }
.station-n { width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--amber); color: var(--amber); font-family: 'JetBrains Mono', monospace; font-size: 9px; display: flex; align-items: center; justify-content: center; }
.station-wall { font-weight: 600; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-ui); }
.station-cap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.station-title { font-family: 'Cormorant Garamond', serif; font-size: 14px; color: #111; text-align: center; line-height: 1.1; }
.frame { background: #111; padding: 6px; box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
.mat   { width: 100%; height: 100%; background: var(--paper); padding: 7px; box-sizing: border-box; }
.clip  { width: 100%; height: 100%; overflow: hidden; }

/* ---------- prints ---------- */
.print { display: grid; grid-template-columns: 170px 1fr; gap: 22px; align-items: start; }
.price-row { display: grid; grid-template-columns: 1.4fr 0.9fr 0.5fr 0.8fr; gap: 8px; padding: 7px 0; border-top: 1px solid rgba(17,17,17,0.08); align-items: baseline; }
.price-row.is-head { border-top-color: rgba(17,17,17,0.14); }

/* ---------- contest jury / checklist ---------- */
.jrow  { display: flex; gap: 9px; align-items: baseline; }
.jtext { font-size: 13px; color: rgba(246,242,234,0.85); }
.crow  { display: flex; gap: 9px; align-items: center; }
.ok    { color: var(--success-green, #44AA99); }

/* ---------- small shared text ---------- */
.amber  { color: var(--amber); }
.mono-g { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--gray); }
.mono18 { font-family: 'JetBrains Mono', monospace; font-size: 18px; }
.statcol  { display: flex; flex-direction: column; gap: 3px; }
.statlbl  { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); }
.statlbl2 { font-family: 'Inter'; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray); }
.lbl-amber  { font-weight: 600; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); }
.lbl-amber2 { font-weight: 600; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); }
.act      { font-weight: 600; font-size: 9.5px; letter-spacing: 0.16em; color: var(--amber); }
.act-name { font-family: 'Cormorant Garamond', serif; font-size: 15px; color: #111; margin-left: 8px; }
.mt9 { margin-top: 9px; }

/* helpers referenced by the price table, keeper variants, zine frames */
.mono-6f { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--gray-ui); }
.mono-8a { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--gray); }
.price-amt  { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--amber); text-align: right; }
.price-tier { font-size: 12px; color: #111; }
.kpr2  { position: relative; aspect-ratio: 3/2; border-radius: 1px; overflow: hidden; box-shadow: 0 0 0 1.5px var(--amber); }
.tier2 { position: absolute; top: 4px; left: 4px; font-size: 8px; color: var(--amber); line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.zframe { aspect-ratio: 3/2; border: 1px solid rgba(17,17,17,0.14); border-radius: 1px; overflow: hidden; }

/* ---------- the Haystack: a window into a vast archive ----------
   Denser sheet + a fade into the paper so it reads as a fraction of
   12,418 (and the partial last row dissolves instead of looking broken).
   Noise sinks back; the few keepers rise out of it. */
.haystack { position: relative; }
.haystack .hs-grid {
  grid-template-columns: repeat(auto-fill, minmax(clamp(30px, 5.4vw, 54px), 1fr));
  gap: 4px;
  grid-auto-rows: 1fr;
  /* percentage fade on the grid's own pixels → the bottom rows dissolve to
     nothing regardless of how many columns fit, so the ragged final row
     (now buried in throwaway filler rows) is never visible */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,0.35) 74%, transparent 90%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,0.35) 74%, transparent 90%);
}
.haystack .hs { background: var(--deep); }
.haystack .hs-i { filter: grayscale(100%) brightness(0.52); }

/* count funnel — a vertical narrowing that fits the 340px column (no arrow glyphs) */
.fnl { border-top: 1px solid rgba(17,17,17,0.12); }
.fnl-col { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; }
.fnl-col + .fnl-col { border-top: 1px solid rgba(17,17,17,0.08); }
.fnl-n { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 30px; line-height: 1; color: #111; min-width: 82px; }
.fnl-n.is-amber { color: var(--amber); }
.fnl-l { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8A847C; }
.haystack .kpr2 {
  box-shadow: 0 0 0 1.5px var(--amber), 0 3px 12px rgba(0,0,0,0.5), 0 0 0 5px rgba(200,154,43,0.12);
  transform: scale(1.05);
  z-index: 2;
  border-radius: 2px;
}
.haystack .kpr2 .img-cover { filter: grayscale(100%) brightness(1.04); }

/* ============================================================
   Responsive — one clean ladder, no [style*] hooks
   ============================================================ */

/* showcase grids don't stretch their cells (keeps captions tidy) */
.grid-5, .grid-5b { align-items: start; }

/* asymmetric splits stack once the row gets tight */
@media (max-width: 860px) {
  .split--340, .split--236 { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .split-copy { max-width: none; }
}
/* portfolio + contest stack earlier — their right side is a 5-up gallery
   that must never be crushed into the leftover sliver beside a 300px column */
@media (max-width: 1024px) {
  .split--300 { grid-template-columns: 1fr; gap: 32px; align-items: start; }
}

/* designed N-up grids step down (haystacks auto-fill on their own) */
@media (max-width: 1000px) {
  .grid-5, .grid-5b { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }          /* prints */
}
@media (max-width: 760px) {
  .grid-3 { grid-template-columns: 1fr; }           /* zine spreads */
  .grid-5, .grid-5b { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .print { grid-template-columns: 1fr; gap: 16px; } /* image ↔ price table */
}
@media (max-width: 560px) {
  .grid-seq, .grid-story { grid-template-columns: repeat(3, 1fr); }
  .grid-5, .grid-5b { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .grid-seq, .grid-story { grid-template-columns: repeat(2, 1fr); }
}

/* ---- mobile composition pass (phones) ----
   Give the photographs the width, calm the rhythm, let header
   rows wrap, and lift the smallest labels to a legible size. */
@media (max-width: 600px) {
  .wk-wrap { padding-left: 16px; padding-right: 16px; }
  .card { padding: 20px; }
  .card.p64 { padding: 20px; }
  .wk-block { margin-bottom: 40px; }
  .wk-hd { flex-wrap: wrap; row-gap: 4px; }
  .statlbl2, .lbl-amber, .lbl-amber2, .crit { font-size: 11px; }
  .idx, .idx--w, .sidx { font-size: 11px; }
}