/* WriteProtected tokens per docs/25-ui-design.md (§1–§8), carried over from
   mockups/site/tokens.css. The one deliberate difference: the typefaces
   are IBM Plex, self-hosted as renamed subset woff2 ("WP Sans"/"WP Mono";
   OFL reserved name, Decision 21 in docs/state.md; R13 allowlists no font
   origin). The doc stays the source of truth. */

@font-face { font-family: 'WP Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/wp-sans-400.bb49694db3.woff2') format('woff2'); }
@font-face { font-family: 'WP Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/wp-sans-500.b2b5a758e6.woff2') format('woff2'); }
@font-face { font-family: 'WP Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/wp-sans-600.5e1090ae79.woff2') format('woff2'); }
@font-face { font-family: 'WP Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/wp-mono-400.97ceb65881.woff2') format('woff2'); }
@font-face { font-family: 'WP Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/wp-mono-600.c2adfcd370.woff2') format('woff2'); }
/* Metric-matched fallbacks (P11): §2's system faces resized to the WP faces,
   so the font-display swap re-lays out almost nothing. Generated by
   site/scripts/fallback-metrics.py; local() only, no download. Arial has no
   medium face, so 500 falls back to its 400 like the real Arial. */
@font-face { font-family: 'WP Sans Fallback HN'; font-weight: 400; src: local('Helvetica Neue'), local('HelveticaNeue'); size-adjust: 99.96%; ascent-override: 102.54%; descent-override: 27.51%; line-gap-override: 0.00%; }
@font-face { font-family: 'WP Sans Fallback HN'; font-weight: 500; src: local('Helvetica Neue Medium'), local('HelveticaNeue-Medium'); size-adjust: 98.76%; ascent-override: 103.79%; descent-override: 27.85%; line-gap-override: 0.00%; }
@font-face { font-family: 'WP Sans Fallback HN'; font-weight: 600; src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'); size-adjust: 96.91%; ascent-override: 105.77%; descent-override: 28.38%; line-gap-override: 0.00%; }
@font-face { font-family: 'WP Sans Fallback Arial'; font-weight: 400; src: local('Arial'), local('ArialMT'); size-adjust: 101.25%; ascent-override: 101.23%; descent-override: 27.16%; line-gap-override: 0.00%; }
@font-face { font-family: 'WP Sans Fallback Arial'; font-weight: 600; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 96.86%; ascent-override: 105.82%; descent-override: 28.39%; line-gap-override: 0.00%; }
@font-face { font-family: 'WP Mono Fallback'; font-weight: 400; src: local('Menlo Regular'), local('Menlo-Regular'); size-adjust: 99.66%; ascent-override: 102.85%; descent-override: 27.59%; line-gap-override: 0.00%; }
@font-face { font-family: 'WP Mono Fallback'; font-weight: 600; src: local('Menlo Bold'), local('Menlo-Bold'); size-adjust: 99.66%; ascent-override: 102.85%; descent-override: 27.59%; line-gap-override: 0.00%; }

:root {
  /* type stacks (§2): the only place a font-family is written (R03 scan) */
  --font-sans: 'WP Sans', 'WP Sans Fallback HN', 'WP Sans Fallback Arial', sans-serif;
  --font-mono: 'WP Mono', 'WP Mono Fallback', monospace;
  /* 1ch of WP Sans and WP Mono (every digit is 0.6em in all five faces). Measures
     use it instead of `ch`, which follows whichever face is painting: the
     fallback's narrower 0 would re-wrap prose when the WP faces arrive. */
  --ch: 0.6em;
  --bg: #f4f4f4; --ink: #161616; --sec: #525252; --hair: #d8d8d8;
  --accent: #2d5fa8; --accent-hover: #1f4d92; --sel: #d0dcf0;
  --well: #e8e8e8; --well-fg: #525252;
  --backdrop: rgba(22, 22, 22, 0.82);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161616; --ink: #f4f4f4; --sec: #a8a8a8; --hair: #3a3a3a;
    --accent: #78a9ff; --accent-hover: #a6c8ff; --sel: #2a3a55;
    --well: #f4f4f4; --well-fg: #525252;
    --backdrop: rgba(22, 22, 22, 0.82);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.7;
}
::selection { background: var(--sel); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img { max-width: 100%; }

/* type registers (§2) */
.mono { font-family: var(--font-mono); }
.h1 { font-size: 33px; font-weight: 600; line-height: 1.15; margin: 0; }
.prose { max-width: calc(62 * var(--ch)); }
.prose a, .spec-value a { text-decoration: underline; }
.label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sec); }
.label .num { color: var(--accent); font-weight: 600; margin-right: 10px; }
.label-display { letter-spacing: 0.14em; }
h1.label, h2.label { margin: 0; font-weight: 400; }
.crumb { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--sec); }
.spec-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sec); }
.spec-value { font-size: 15px; line-height: 1.5; }
.register { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--sec); }
.register a { color: var(--sec); }
.register a:hover { color: var(--accent-hover); }
.chip { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sec); border: 1px solid var(--hair); padding: 4px 10px; display: inline-block; }
a.chip:hover { color: var(--accent-hover); border-color: var(--accent); text-decoration: none; }
.chip--accent { border-color: var(--accent); color: var(--accent); }

/* wordmark (§8): lowercase + drawn square period, inline flow */
.wordmark { font-family: var(--font-mono); font-weight: 600; color: var(--ink); white-space: nowrap; }
.wordmark .dot { display: inline-block; width: 0.18em; height: 0.18em; background: var(--accent); margin-left: 0.15em; }
a.wordmark:hover { color: var(--ink); text-decoration: none; }

/* page frame (§3–§4): rails + corner Ls seated on the rail ends */
.frame { padding: 28px 44px; min-height: 100vh; }
.pane {
  position: relative; max-width: 1200px; margin: 0 auto;
  border-left: 1px solid var(--hair); border-right: 1px solid var(--hair);
  padding: 24px 36px; display: flex; flex-direction: column; gap: 22px;
  min-height: calc(100vh - 56px);
}
.corner-tl, .corner-br { position: absolute; width: 28px; height: 28px; }
.corner-tl { top: 0; left: -1px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.corner-br { bottom: 0; right: -1px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.rule { height: 1px; background: var(--hair); margin: 0 -36px; }

/* photography (§5) */
.well { background: var(--well); border: 1px solid var(--hair); color: var(--well-fg); }
/* on-well scoping: anything seated on a well takes --well-fg, never --sec (dark-theme AA) */
.well .register, .well .meta, .well .label, .card .photo.register { color: var(--well-fg); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* header / footer chrome (§9 global) */
.site-header { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.site-nav { display: flex; gap: 26px; }
.site-nav a { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sec); }
.site-nav a.active { color: var(--accent); }
.site-footer { margin-top: auto; border-top: 1px solid var(--hair); margin-left: -36px; margin-right: -36px; padding: 14px 36px 0 36px; display: flex; flex-direction: column; gap: 8px; }
.foot-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }

/* object card (shared: catalogue grid, related objects, home, collection) */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.card { border: 1px solid var(--hair); display: flex; flex-direction: column; color: var(--ink); }
.card:hover { border-color: var(--accent); text-decoration: none; }
.card .photo { aspect-ratio: 4 / 5; background: var(--well); border-bottom: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; }
.card .plate { background: var(--ink); color: var(--bg); padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; }
.card .plate .name { font-size: 13px; font-weight: 500; }
.card .plate .id { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; }

/* mobile chrome (≤980px): tighter frame, wrapping header, no horizontal overflow */
@media (max-width: 980px) {
  .frame { padding: 14px 12px; }
  .pane { padding: 16px; min-height: calc(100vh - 28px); }
  .rule { margin: 0 -16px; }
  .site-header { flex-wrap: wrap; gap: 10px 16px; }
  .site-nav { gap: 14px; flex-wrap: wrap; }
  .site-footer { margin-left: -16px; margin-right: -16px; padding: 12px 16px 0 16px; }
  .foot-row { flex-wrap: wrap; gap: 6px 16px; }
  .head-row { flex-wrap: wrap; gap: 10px 16px; }
  .controls { flex-wrap: wrap; }
  .controls input { width: 100%; min-width: 0; }
}

/* form controls (sharp, hairline, mono) */
.control { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.05em; color: var(--ink); background: transparent; border: 1px solid var(--hair); padding: 8px 10px; border-radius: 0; }
.control::placeholder { color: var(--sec); text-transform: uppercase; letter-spacing: 0.08em; }
select.control { appearance: none; text-transform: uppercase; cursor: pointer; }