/* Hallmark · macrostructure: Portfolio Grid · F6 card knobs: ratio=16/9, density=2-up, micro-action=none, caption=title+date
 * theme: studied-DNA (source: image, user reference) · paper: oklch(99% 0.005 150) · ink: oklch(18% 0.010 150) · accent: none (neutral)
 * display: Graphik 700 uppercase (stand-in Hanken Grotesk) · body: Graphik 400 · axes: light / display-heavy / neutral
 * genre: editorial · nav: N9 edge-aligned two-point bar · footer: Ft2 single line, inverted bar · enrichment: none · studied: yes
 * DNA kept: split-edge uppercase display · hairline index row · 2-up photo grid · bold-caps title + light numeric date · monochrome imagery
 * DNA dropped: italic display word (gate 38a) · description line under titles (brief: title only) · prev/next carousel
 * context: user reference + brief ("bold text, 2 grid image panes, white, no tags") · pre-emit critique: P4 H5 E4 S4 R4 V4
 * slop test 58/58 · contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48)
 * responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) — checked at 375 / 1280
 */

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

[hidden] { display: none !important; }

html {
  overflow-x: clip;
  background: var(--color-paper);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  min-height: 100dvh;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-inline: max(var(--page-gutter), env(safe-area-inset-left)) max(var(--page-gutter), env(safe-area-inset-right));
  padding-block: 0 env(safe-area-inset-bottom);
}

.page { max-width: 90rem; margin-inline: auto; }

/* Small caps labels — the reference's bar, index row and captions all share this register. */
.label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Bar — N9 edge-aligned: wordmark hard-left, one line of meta hard-right, nothing in between. */
.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-lg) var(--space-xl);
}
.bar__mark {
  margin: 0;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (hover: hover) and (pointer: fine) {
  .bar__mark:hover { text-decoration: underline; text-underline-offset: 0.2em; }
}
.bar__mark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.bar__mark:active { transform: translateY(1px); }
.bar__mark[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.bar__meta { margin: 0; white-space: nowrap; color: var(--color-ink-2); }

/* Display — two words pushed to the page edges. On narrow screens they stack, both left. */
.display {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 var(--space-xl);
  margin: 0;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.display > span { min-width: 0; }

/* Index row — hairlines above and below, count left, the one instruction right. */
.index-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-xl) 0 var(--space-2xl);
  padding-block: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-ink);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.index-row span { margin: 0; white-space: nowrap; }
.index-row .count { font-variant-numeric: tabular-nums; }
.index-row .hint { color: var(--color-muted); }

/* Grid — two panes across from 40rem, one below. Row gaps larger than column gaps, as in the reference. */
.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl) var(--space-xl);
}
@media (min-width: 40rem) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tile { min-width: 0; }
.tile__link {
  display: grid;
  gap: var(--space-md);
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.tile__media {
  margin: 0;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  overflow: hidden;
  background: var(--color-paper-2);
}
.tile__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, center);
  filter: var(--img-filter);
  transition: transform var(--dur-long) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}
.tile[data-fit="contain"] .tile__img { object-fit: contain; }

/* Caption — bold caps title left, light numeric date right, on one baseline. */
.tile__cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  min-width: 0;
}
.tile__title {
  margin: 0;
  max-width: 34ch;
  min-width: 0;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.tile__date {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-ink);
}
@media (min-width: 60rem) { .tile__date { font-size: var(--text-xl); } }

/* Tile states — default · hover · focus · active · loading · error · (disabled via aria, for a withdrawn entry). No success state: the action is navigation. */
@media (hover: hover) and (pointer: fine) {
  .tile__link:hover .tile__img { transform: scale(1.02); }
}
.tile__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.tile__link:active { transform: translateY(1px); }
.tile__link[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.tile[data-state="loading"] .tile__img { opacity: 0; }
.tile[data-state="error"] .tile__media {
  display: grid;
  place-items: center;
  border: var(--rule-hair) solid var(--color-rule);
}
.tile[data-state="error"] .tile__img { display: none; }
.tile[data-state="error"] .tile__media::after {
  content: "Image missing";
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Notices — empty database, failed load. */
.notice {
  max-width: 48ch;
  margin: 0;
  padding-block: var(--space-2xl);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

/* Footer — Ft2, one line, set as an inverted bar. The bar sets its own text colour with its fill. */
.foot-bar {
  margin-top: var(--space-3xl);
  padding: var(--space-lg) var(--space-lg);
  background: var(--color-ink);
  color: var(--color-paper);
}
.foot-bar p { margin: 0; overflow-wrap: anywhere; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .tile__link:hover .tile__img { transform: none; }
}