/* 05 Contact Sheet
   Film strips laid on a light table. Every photo of the selected eight is a
   frame on the roll; the main image of each work is circled in grease pencil.
   The red loop is drawn AROUND the frame (in the gap and the rebate), never over
   the photo. No filters or overlays on any image. */

:root {
  --table: #eef1f0;        /* light-table diffuser */
  --table-glow: #fbfcfc;
  --ink: #141515;
  --ink-soft: #4a4d4c;     /* 7.4:1 on the table */
  --rule: #c5cac8;
  --film: #1b1815;         /* film base */
  --gate: #0e0d0c;         /* inside the frame line */
  --frame-line: #3d3833;
  --edge: #e8b65e;         /* edge printing, 9:1 on film */
  --grease: #d3281e;       /* grease pencil */
  --note-bg: #f3e6a0;      /* yellow lab tape = draft notes */
  --note-ink: #2a2310;
  --focus-dark: #ffd84a;   /* focus ring on film */
  --focus-light: #141515;  /* focus ring on the table */

  --gut: 16px;
  --mono: "Martian Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --read: "Instrument Sans", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif;
}

@media (min-width: 700px) { :root { --gut: 40px; } }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--table);
  background-image: radial-gradient(ellipse 80% 60% at 50% 0%, var(--table-glow), rgba(251, 252, 252, 0) 70%);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--read);
  font-size: 16px;
  line-height: 1.55;
}

img { max-width: 100%; }

[hidden] { display: none !important; }

h1, h2, h3 { text-wrap: balance; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--focus-light);
  outline-offset: 3px;
}

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gut);
  top: -60px;
  z-index: 30;
  padding: 10px 14px;
  background: var(--ink);
  color: #fff;
  font: 600 14px var(--mono);
}
.skip:focus { top: 8px; }

.wrap {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* ---------- header ---------- */

.lab {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 32px;
  padding-top: 22px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ink);
}

.brand {
  margin: 0;
  font-family: var(--mono);
  font-weight: 700;
  font-stretch: 75%;
  font-variation-settings: "wdth" 75;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;
}
.brand a { text-decoration: none; }
h1.brand { font-size: clamp(30px, 7vw, 58px); letter-spacing: 0.02em; }

.lab ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lab nav a {
  display: inline-block;
  padding: 4px 0;
  font: 500 13.5px var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.lab nav a:hover { border-bottom-color: var(--ink-soft); }
.lab nav a[aria-current="page"] { border-bottom-color: var(--ink); }

.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin: 14px 0 28px;
  font: 400 12.5px/1.5 var(--mono);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.legend b { color: var(--ink); font-weight: 600; }
.legend-loop { display: inline-flex; align-items: center; gap: 8px; }
.legend-loop svg { width: 30px; height: 21px; flex: 0 0 auto; }

.page-title {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-weight: 700;
  font-variation-settings: "wdth" 75;
  font-size: clamp(30px, 7vw, 58px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---------- draft notes ---------- */

.note {
  display: inline-block;
  max-width: 62ch;
  margin: 10px 0 0;
  padding: 4px 9px 5px;
  background: var(--note-bg);
  color: var(--note-ink);
  font: 400 12px/1.45 var(--mono);
  letter-spacing: 0.01em;
}

.tbc {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--note-bg);
  color: var(--note-ink);
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ---------- film strips ---------- */

.block { margin: 0 0 52px; }

.strip {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  row-gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  --cell: calc(100cqw / 2 - 0.5px);
}

@media (min-width: 560px) {
  .strip { --cell: calc(100cqw / 4 - 0.5px); }
}
@media (min-width: 900px) {
  .strip { --cell: min(184px, calc(100cqw / 7 - 0.5px)); }
}

.cell {
  position: relative;
  flex: 0 0 auto;
  width: var(--cell);
}
.cell.has-loop { z-index: 2; }

.perf {
  height: calc(var(--cell) * 0.115);
  background: var(--film);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H20V20H0Z M6.5 4.5H13.5Q15 4.5 15 6V14Q15 15.5 13.5 15.5H6.5Q5 15.5 5 14V6Q5 4.5 6.5 4.5Z'/%3E%3C/svg%3E") 0 0 / calc(var(--cell) / 8) 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H20V20H0Z M6.5 4.5H13.5Q15 4.5 15 6V14Q15 15.5 13.5 15.5H6.5Q5 15.5 5 14V6Q5 4.5 6.5 4.5Z'/%3E%3C/svg%3E") 0 0 / calc(var(--cell) / 8) 100% repeat-x;
}

.edge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(var(--cell) * 0.075);
  padding: 0 calc(var(--cell) * 0.06);
  background: var(--film);
  color: var(--edge);
  font-family: var(--mono);
  font-size: max(9px, calc(var(--cell) * 0.052));
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}

.gate {
  position: relative;
  padding: 0 calc(var(--cell) * 0.04);
  background: var(--film);
}

.frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 1px solid var(--frame-line);
  background: var(--gate);
  color: inherit;
  font: inherit;
  cursor: zoom-in;
}
.frame:hover { border-color: var(--edge); }
.frame:focus-visible { outline: 3px solid var(--focus-dark); outline-offset: 2px; }

.frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.frame--blank { cursor: default; }

/* grease-pencil loop: the 340x240 box maps the frame (0.92 x 0.6133 cell) to
   (20,20)-(320,220), so the line runs in the gap and the rebate around it */
.loop {
  position: absolute;
  left: calc(var(--cell) * -0.02133);
  top: calc(var(--cell) * -0.06133);
  width: calc(var(--cell) * 1.04267);
  height: calc(var(--cell) * 0.736);
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}
.loop path {
  fill: none;
  stroke: var(--grease);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.js-draw .loop path { stroke-dashoffset: 1; }
.js-draw .is-drawn .loop path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.55, 0.1, 0.3, 1);
}

.cell-cap {
  margin: 8px calc(var(--cell) * 0.04) 0;
  font: 400 12px/1.4 var(--mono);
  color: var(--ink);
}
.cell-cap span { color: var(--ink-soft); }
/* facts line under an earlier painting's frame (same look as the slate facts) */
.cell .slate-facts { margin: 2px calc(var(--cell) * 0.04) 0; font-size: 12px; }

/* ---------- slate (caption under each strip) ---------- */

.slate {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 28px;
  margin-top: 14px;
  max-width: 1104px;
}
@media (min-width: 760px) {
  .slate { grid-template-columns: 150px minmax(0, 1fr); }
}

.slate-id {
  margin: 0;
  font: 500 12.5px/1.6 var(--mono);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.slate-id b { display: block; color: var(--ink); font-size: 14px; letter-spacing: 0.04em; }

.slate-title {
  margin: 0;
  font-family: var(--mono);
  font-weight: 700;
  font-variation-settings: "wdth" 87.5;
  font-size: clamp(20px, 3.2vw, 28px);
  line-height: 1.15;
}

.slate-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font: 400 13px/1.55 var(--mono);
  color: var(--ink-soft);
  max-width: 80ch;
}
.slate-facts li:not(:last-child)::after { content: "·"; margin: 0 0.6em; color: var(--rule); }
.slate-facts .k { color: var(--ink); }

.slate-open {
  margin-top: 10px;
  padding: 6px 12px;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: 500 12.5px var(--mono);
  letter-spacing: 0.03em;
  cursor: pointer;
}
.slate-open:hover { background: var(--ink); color: var(--table); }

/* phones: each work's slate (ID, title, facts, notes, button) comes before its strip */
@media (max-width: 559px) {
  .block:has(> .slate) { display: flex; flex-direction: column; }
  .block > .slate { order: -1; margin: 0 0 14px; }
}

/* ---------- section heads (earlier page) ---------- */

.sec-head {
  margin: 8px 0 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-weight: 700;
  font-variation-settings: "wdth" 87.5;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- about ---------- */

.about {
  display: grid;
  gap: 8px 28px;
  margin: 24px 0 56px;
  padding-top: 22px;
  border-top: 2px solid var(--ink);
}
@media (min-width: 760px) { .about { grid-template-columns: 150px minmax(0, 1fr); } }

.about h2 {
  margin: 0;
  font: 700 14px/1.6 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.about-text { max-width: 60ch; }
.about-text p { margin: 0 0 0.7em; font-size: 20px; line-height: 1.5; }
.about-text .note { font-size: 12px; }
.about-contact { font: 500 14px var(--mono) !important; margin-top: 14px !important; }

/* ---------- footer ---------- */

.foot {
  padding-top: 16px;
  padding-bottom: 28px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.foot p { margin: 0; max-width: 100ch; }

/* ---------- loupe (large view) ---------- */

.loupe {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--table);
  color: var(--ink);
  overflow: auto;
}
.loupe::backdrop { background: rgba(14, 13, 12, 0.75); }

.loupe-grid {
  display: grid;
  grid-template-rows: minmax(260px, 56vh) auto;
  min-height: 100%;
}

.loupe-view {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: var(--film);
  min-height: 0;
}

.loupe-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.loupe-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px var(--gut) 24px;
  min-width: 0;
}

.loupe-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.loupe-frame { margin: 0; font: 500 12.5px var(--mono); letter-spacing: 0.06em; color: var(--ink-soft); }

.lbtn {
  padding: 7px 12px;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: 500 12.5px var(--mono);
  cursor: pointer;
}
.lbtn:hover:not(:disabled) { background: var(--ink); color: var(--table); }
.lbtn:disabled { opacity: 0.4; cursor: default; }

.loupe-text { max-width: 65ch; }
.loupe-text h2 {
  margin: 0;
  font-family: var(--mono);
  font-weight: 700;
  font-variation-settings: "wdth" 87.5;
  font-size: 24px;
  line-height: 1.2;
}
.loupe-text .l-cap { margin: 4px 0 0; font: 500 13px var(--mono); color: var(--ink); }
.loupe-text .slate-facts { margin-top: 8px; }
.loupe-text .st { margin-top: 16px; }
.loupe-text .st p { margin: 0 0 0.85em; font-size: 16px; line-height: 1.6; }
.loupe-text .k {
  display: block;
  margin: 16px 0 4px;
  font: 600 11.5px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.loupe-text ol { margin: 0; padding-left: 1.4em; font-size: 15px; }
.loupe-text .inq { margin: 0; font-size: 16px; font-style: italic; }
.loupe-text a { font-weight: 600; }

.loupe-nav { display: flex; gap: 10px; margin-top: auto; padding-top: 8px; }

@media (min-width: 900px) {
  .loupe { overflow: hidden; }
  .loupe-grid {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) min(460px, 36vw);
    height: 100%;
  }
  .loupe-view { padding: 28px; }
  .loupe-info { overflow-y: auto; padding: 18px 28px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .js-draw .loop path { stroke-dashoffset: 0; }
}