/* Onken Proofs — Onken Site Language at product dials.
   VARIANCE 3 / MOTION 2 / DENSITY 7.
   Square corners everywhere, weights 400/700 only, tracking only on uppercase,
   no gradients, no shadows, no rounded chips. Magenta is punctuation: it marks
   the final list and the active filter, nothing else. */

@font-face {
  font-family: "AwesomeSerif";
  src: url("fonts/awesomeserif-extratall-webfont.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "SweetSans";
  src: url("fonts/sweetsansproregular-webfont.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "SweetSans";
  src: url("fonts/sweetsansprobold-webfont.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --paper: #FFFFFF;
  --bone: #E6E6E6;
  --fill: #EEEEEE;
  --ink: #000000;
  --ink-soft: #313131;
  --ink-mid: #444444;
  --quiet: #8A8A8A;
  --line: #DDDDDD;
  --accent: #F90089;
  --sans: "SweetSans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --serif: "AwesomeSerif", "Cormorant Garamond", Georgia, serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font: 400 14px/1.6 var(--sans);
}

img { max-width: 100%; }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.display {
  font: 400 40px/1.05 var(--serif);
  color: var(--ink);
  margin: 0;
}
.h2 { font: 700 13px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--ink); margin: 0 0 16px; }
.label { display: block; font: 700 11px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-mid); margin-bottom: 6px; }
.note { font-size: 13px; color: var(--ink-mid); margin: 12px 0 0; max-width: 62ch; }
.quiet { color: var(--quiet); font-size: 12px; }
.empty { color: var(--quiet); padding: 48px 0; }
.error { color: var(--accent); font-size: 13px; margin: 8px 0 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- controls */

.field {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 14px/1.4 var(--sans);
}
.field:focus { border-color: var(--ink); outline: none; }
select.field { appearance: none; background: var(--paper); }
textarea.list { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.7; resize: vertical; margin-top: 16px; }

.btn {
  display: inline-block;
  padding: 11px 22px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  font: 700 11px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: .12em;
  text-decoration: none;
  cursor: pointer;
  transition: background .5s ease, color .5s ease;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btn.small { padding: 8px 14px; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.linkbtn {
  border: 0; background: none; padding: 0;
  font: 400 13px/1.5 var(--sans);
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.linkbtn:hover { color: var(--accent); }

/* ---------------------------------------------------------------- shells */

.centred { display: grid; place-items: center; min-height: 100svh; }
.gate { width: 300px; padding: 24px; }
.gate .display { margin-bottom: 24px; }
.stack > * + * { margin-top: 16px; }

.bar {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 32px 24px 24px;
  border-bottom: 1px solid var(--line);
}
.page { padding: 32px 24px 96px; max-width: 1100px; }
.panel { padding: 32px 0; border-bottom: 1px solid var(--line); }
.panel:last-child { border-bottom: 0; }

.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; align-items: end; margin-top: 24px; }
.grid-form .span { grid-column: 1 / -1; }

.sheet { width: 100%; border-collapse: collapse; font-size: 13px; }
.sheet th { text-align: left; font: 700 10px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--quiet); padding: 0 12px 8px 0; border-bottom: 1px solid var(--line); }
.sheet td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sheet .num { text-align: right; padding-right: 24px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; margin: 0; }
.stats dt { font: 700 10px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--quiet); }
.stats dd { margin: 6px 0 0; font: 400 32px/1 var(--serif); color: var(--ink); }

/* ---------------------------------------------------------------- gallery head */

.ghead {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  padding: 24px 24px 0;
}
.ghead-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.ghead .display { font-size: 32px; }
.sub { margin: 6px 0 0; font-size: 13px; color: var(--quiet); }
.ghead-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.whoami { margin: 0; font-size: 13px; color: var(--ink-mid); }
.whoami strong { font-weight: 700; color: var(--ink); }

.filters {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 24px; padding-bottom: 12px;
}
.filters::-webkit-scrollbar { display: none; }
.filt {
  flex: none;
  border: 0; background: none; padding: 0 0 4px;
  border-bottom: 2px solid transparent;
  font: 700 11px/1 var(--sans);
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--quiet); cursor: pointer; white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}
.filt:hover { color: var(--ink); }
.filt.is-on { color: var(--ink); border-bottom-color: var(--accent); }
.filt .ct { font-variant-numeric: tabular-nums; margin-left: 6px; color: var(--quiet); }
.filt.is-on .ct { color: var(--ink); }
.filt-rule { flex: none; width: 1px; height: 12px; background: var(--line); }

.tally { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; padding: 12px 0 16px; border-top: 1px solid var(--line); }
.tally-line { margin: 0; font-size: 13px; color: var(--ink-mid); }
.tally-line b { font-weight: 700; color: var(--ink); }

/* ---------------------------------------------------------------- the sheet */

.sheetwrap { padding: 32px 24px 96px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  column-gap: 16px;
  row-gap: 32px;
}

.cell { margin: 0; content-visibility: auto; contain-intrinsic-size: auto 260px; }
.cell[hidden] { display: none; }

/* The shoot is 60% portrait (2:3) and 39% landscape (3:2), exactly two inverse
   ratios. A square cell gives both the same area and, more importantly, keeps
   every pick rule on the same baseline across a row, which is what makes them
   scannable down a sheet of 343. The cell ground is white so the box does its
   structural job invisibly; a hairline holds the edge of frames that are light
   to the border. */
.frame {
  /* Bottom-aligned, not centred: every frame then sits on one baseline, so the
     rule and initials underneath read as belonging to that photograph instead
     of floating away from a landscape frame. */
  display: flex; align-items: flex-end; justify-content: center;
  width: 100%; aspect-ratio: 1 / 1;
  padding: 0; border: 0; border-radius: 0;
  background: var(--paper);
  cursor: zoom-in;
  overflow: hidden;
}
.frame img {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain; display: block;
  border: 1px solid var(--line);
  box-sizing: border-box;
}

/* The signature: a picked frame gets a rule beneath it and the names sit in the
   gutter, each in that person's colour. Three people on one frame reads as three
   coloured segments and three coloured names. Nothing is ever drawn on top of a
   photograph, and the name is always present, so colour is a second signal
   rather than the only one. */
.mark { margin-top: 8px; }
.rule { display: flex; gap: 2px; height: 2px; }
.rule i { flex: 1 1 0; height: 2px; display: block; }
.markrow {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 6px; min-height: 16px;
}
.marks { display: flex; gap: 8px; align-items: center; min-height: 10px; flex-wrap: wrap; }
.ini { font: 700 10px/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; }
.fin { flex: none; width: 7px; height: 7px; background: transparent; }
.cell.final .fin { background: var(--accent); }

.swatch { display: inline-block; width: 8px; height: 8px; margin-right: 7px; vertical-align: baseline; }
.swatch.final { background: var(--accent); }

.howto {
  margin: 0; padding: 12px 0 0;
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-mid); max-width: 78ch;
}
.howto strong { font-weight: 700; color: var(--ink); }

/* ---------------------------------------------------------------- lightbox */

.lightbox {
  position: fixed; inset: 0; z-index: 60;
  background: var(--paper);
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  grid-template-rows: 1fr auto;
  align-items: center;
}
.lightbox[hidden] { display: none; }
.lb-fig { grid-column: 2; grid-row: 1; margin: 0; display: flex; align-items: center; justify-content: center; min-height: 0; height: 100%; padding: 24px 0; }
.lb-fig img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lb-nav {
  grid-row: 1; border: 0; background: none; cursor: pointer;
  font-size: 20px; color: var(--quiet); padding: 0; height: 100%;
}
.lb-nav:hover { color: var(--accent); }
.lb-nav.prev { grid-column: 1; }
.lb-nav.next { grid-column: 3; }
.lb-close {
  position: absolute; top: 16px; right: 16px;
  border: 0; background: none; cursor: pointer;
  font: 700 11px/1 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--ink);
}
.lb-close:hover { color: var(--accent); }
.lb-bar {
  grid-column: 1 / -1; grid-row: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 24px; border-top: 1px solid var(--line);
}
.lb-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- modal */

.modal { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,0.55); display: grid; place-items: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal-card { background: var(--paper); border-radius: 0; padding: 32px; width: 100%; max-width: 660px; max-height: 88svh; overflow-y: auto; }
.modal-acts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 24px; }

/* ---------------------------------------------------------------- narrow */

@media (max-width: 720px) {
  .display { font-size: 28px; }
  .ghead { padding: 14px 16px 0; }
  .ghead .display { font-size: 22px; }
  .ghead-top { gap: 12px; }
  .ghead-right { margin-top: 4px; }
  .filters {
    margin-top: 14px; gap: 18px; padding-bottom: 10px;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  .filters::-webkit-scrollbar { display: none; }
  .tally { padding: 10px 0 12px; gap: 8px; }
  .sheetwrap { padding: 24px 16px 64px; }
  .bar, .page { padding-left: 16px; padding-right: 16px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); column-gap: 12px; row-gap: 24px; }
  .lightbox { grid-template-columns: 44px 1fr 44px; }
  .ghead-right { width: 100%; justify-content: space-between; }
  .stats dd { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}