/* Universal Protocol Systems — Employee Handbook.
   A handbook on a lit microfiche table. Deliberately single-theme.
   Spec: docs/specs/2026-09-26-ups-handbook-design.md */

@font-face { font-family: "Jost"; font-weight: 400; font-display: swap; src: url("/assets/fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-display: swap; src: url("/assets/fonts/jost-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 700; font-display: swap; src: url("/assets/fonts/jost-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  --table: #dfe6ea;       /* lit glass */
  --paper: #f7f8f6;       /* frame stock */
  --paper-warm: #f8f4ee;  /* stock under the anomaly */
  --film: #12304a;        /* negative; brand navy */
  --film-2: #1a4266;
  --film-line: #28506f;
  --film-edge: #3a6689;
  --film-ink: #bcdaee;
  --film-dim: #7fb0d4;
  --film-hi: #f2f8fb;
  --ink: #14222e;
  --ink-2: #33434f;
  --slate: #5b6f7d;
  --line: #c3cfd6;
  --orange: #e0571b;      /* brand signal */
  --amber: #ffc98a;       /* the anomaly, on film */
  --amber-deep: #b8661c;  /* the anomaly, on paper */
  --display: "Jost", "Futura", "Century Gothic", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
body {
  margin: 0; padding-inline: 16px;
  background-color: var(--table);
  background-image:
    linear-gradient(to right, rgba(20, 34, 46, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 34, 46, .05) 1px, transparent 1px);
  background-size: 48px 48px;
  color: var(--ink);
  font: 400 15px/1.55 var(--display);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; background: var(--paper); padding: 8px 12px; z-index: 10; }

.sheet { max-width: 1140px; margin: 0 auto; padding-block: 28px 40px; display: grid; gap: 14px; }
.stack { display: grid; gap: 14px; }
.frame.hero { padding: 34px 34px 30px; gap: 22px; }
.frame.clock { gap: 18px; }

/* ── Column ruler ── */
.ruler { display: grid; grid-template-columns: repeat(12, 1fr); font: 500 10px/1 var(--mono); color: var(--slate); letter-spacing: .08em; }
.ruler span { border-left: 1px solid var(--line); padding: 0 0 6px 5px; }

/* ── Header: a strip of film ── */
.strip { background: var(--film); color: var(--film-ink); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 16px 22px; position: relative; }
.strip::before, .strip::after { content: ""; position: absolute; left: 0; right: 0; height: 5px; background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(223, 230, 234, .18) 10px 18px); }
.strip::before { top: 3px; }
.strip::after { bottom: 3px; }
.mark { display: flex; align-items: center; gap: 10px; font: 700 12px/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--film-hi); text-decoration: none; }
.mark i { width: 14px; height: 14px; background: var(--orange); flex: none; }
.strip nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font: 400 12px/1.4 var(--mono); }
.strip nav a { color: var(--film-ink); text-decoration: none; }
.strip nav a:hover { color: var(--film-hi); }
.strip nav b { color: var(--film-hi); font-weight: 500; }
.strip nav a[aria-current] b { color: var(--orange); }
.badge { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--film-dim); font-variant-numeric: tabular-nums; }

/* ── Frames ── */
.row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.frame { position: relative; background: var(--paper); padding: 26px 26px 24px; display: grid; gap: 14px; align-content: start; grid-column: span 12; min-width: 0; }
.frame::before {                 /* engineering-drawing crop marks */
  content: ""; position: absolute; inset: -6px; pointer-events: none; opacity: .55;
  --m: linear-gradient(var(--slate), var(--slate));
  background:
    var(--m) top left / 12px 1px no-repeat, var(--m) top left / 1px 12px no-repeat,
    var(--m) top right / 12px 1px no-repeat, var(--m) top right / 1px 12px no-repeat,
    var(--m) bottom left / 12px 1px no-repeat, var(--m) bottom left / 1px 12px no-repeat,
    var(--m) bottom right / 12px 1px no-repeat, var(--m) bottom right / 1px 12px no-repeat;
}
.span-8 { grid-column: span 8; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
.idx { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.idx b { color: var(--orange); font-weight: 500; }
.neg { background: var(--film); color: var(--film-ink); }
.neg .idx { color: var(--film-dim); }
.neg .idx b { color: var(--film-hi); }
.neg h1, .neg h2, .neg h3 { color: var(--film-hi); }

h1, h2, h3 { text-wrap: balance; }
.display { margin: 0; font: 700 clamp(34px, 5.2vw, 64px)/.96 var(--display); letter-spacing: -.014em; }
.title { margin: 0; font: 700 clamp(28px, 3.8vw, 44px)/1 var(--display); letter-spacing: -.01em; }
.lede { margin: 0; font-size: 18px; line-height: 1.5; max-width: 42ch; }
.prose { max-width: 62ch; display: grid; gap: 12px; }
.prose p { margin: 0; }
.prose h2 { margin: 10px 0 0; font: 500 20px/1.25 var(--display); }
.small { font-size: 13px; color: var(--slate); }
.mono { font-family: var(--mono); }

/* ── Pictograms ── */
.picto { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: end; padding-top: 4px; }
.picto figure { margin: 0; display: grid; gap: 7px; justify-items: center; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }

/* ── A02 Duration ── */
.clock h2 { margin: 0; font: 500 22px/1.2 var(--display); }
.clock p { margin: 0; font: 400 12.5px/1.6 var(--mono); }
.dial { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.dial span { height: 22px; background: var(--film-line); }
.dial .done { background: var(--film-ink); }
.dial .now { background: var(--orange); }
.dial-cap { display: flex; justify-content: space-between; font: 400 10px/1 var(--mono); color: var(--film-dim); }

/* ── System cards ── */
.sys { text-decoration: none; color: inherit; transition: transform .2s ease; }
a.sys:hover { transform: translateY(-2px); }
.sys .code { font: 700 38px/1 var(--display); color: var(--orange); letter-spacing: -.01em; }
.sys h3 { margin: 0; font: 500 17px/1.25 var(--display); }
.sys p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.status { font: 500 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); border-top: 1px solid var(--line); padding-top: 10px; }

/* ── The anomaly register ── */
.off { background: var(--paper-warm); }
.off .code { font: 500 30px/1.05 var(--mono); color: var(--amber-deep); letter-spacing: .02em; }
.off .idx b, .off .status { color: var(--amber-deep); }
.off p { font: 400 13px/1.6 var(--mono); }
.amber { color: var(--amber); }
.neg .amber-deep, .amber-deep { color: var(--amber-deep); }

/* ── Records reader ── */
.records { grid-template-columns: 1.4fr 1fr; gap: 22px 30px; }
.records > .idx { grid-column: 1 / -1; }
.thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.thumb { aspect-ratio: 1 / 1; max-width: 100%; border: 1px solid var(--film-edge); padding: 8px; display: grid; align-content: space-between; font: 400 9.5px/1.35 var(--mono); color: #9cc6e4; text-decoration: none; background: transparent; text-align: left; width: 100%; cursor: pointer; }
.thumb b { font-weight: 500; color: #eaf5fb; font-size: 10.5px; }
.thumb:hover { border-color: var(--film-ink); }
.thumb[aria-current="true"] { border-color: #eaf5fb; box-shadow: 0 0 0 1px #eaf5fb; }
.thumb.dead { border-style: dashed; color: #4f7898; cursor: default; }
.thumb.dead b { color: #6d93b1; }
.thumb.warm { border-color: var(--amber); color: var(--amber); animation: warm 7s ease-in-out infinite; }
.thumb.warm b { color: var(--amber); }
@keyframes warm { 0%, 100% { box-shadow: 0 0 14px rgba(255, 201, 138, .12); } 50% { box-shadow: 0 0 26px rgba(255, 201, 138, .32); } }
.loupe { display: grid; gap: 14px; align-content: start; border-left: 1px solid var(--film-line); padding-left: 28px; }
.loupe h3 { margin: 0; font: 500 21px/1.2 var(--display); }
.loupe p { margin: 0; font: 400 13px/1.6 var(--mono); }
.loupe hr { border: 0; border-top: 1px dashed var(--film-edge); margin: 0; width: 100%; }
.loupe a { color: var(--film-hi); font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* ── Lists of fields (spec sheets) ── */
.fields { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: 14px; }
.fields dt { font: 500 10.5px/1.9 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.fields dd { margin: 0; }
.neg .fields dt { color: var(--film-dim); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: s; }
.steps li { border-top: 2px solid var(--ink); padding-top: 10px; font-size: 14px; }
.steps b { display: block; font-weight: 500; }

/* ── Cromwell: the seal ── */
.seal-wrap { display: grid; place-items: center; padding: 10px 0; }
.seal-wrap svg { width: min(360px, 100%); height: auto; }
.levels { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font: 400 13px/1.5 var(--mono); }
.levels li { display: grid; grid-template-columns: 3.2em 1fr; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--film-edge); }
.levels li b { color: var(--amber); font-weight: 500; font-size: 18px; line-height: 1.2; }
.invocation { margin: 0; font: 400 14px/1.9 var(--mono); color: var(--film-dim); letter-spacing: .04em; }
.invocation em { font-style: normal; color: var(--amber); }

/* ── Footer ── */
.fine { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; font: 400 10.5px/1.4 var(--mono); color: var(--slate); letter-spacing: .04em; padding-top: 6px; }
.seal { display: inline-flex; color: var(--slate); transition: color .4s ease; }
.seal:hover, .seal:focus-visible { color: var(--amber-deep); }
.seal svg { width: 22px; height: 22px; }

@media (max-width: 860px) {
  .span-8, .span-6, .span-4 { grid-column: span 12; }
  .records { grid-template-columns: 1fr; }
  .loupe { border-left: 0; padding-left: 0; border-top: 1px solid var(--film-line); padding-top: 18px; }
  .ruler { grid-template-columns: repeat(6, 1fr); }
  .ruler span:nth-child(n+7) { display: none; }
  .steps { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; gap: 2px 0; }
  .fields dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .thumb.warm { animation: none; }
  a.sys, .seal { transition: none; }
}

/* ── Page-level pieces ── */
.title.s { font-size: clamp(22px, 2.6vw, 28px); }
.note { margin: 0; font: 400 12.5px/1.6 var(--mono); }
.neg .note a { color: var(--film-hi); }
.designation { font: 500 clamp(34px, 5vw, 56px)/1 var(--mono); letter-spacing: .02em; color: var(--amber); }
.lede.archive { font: 400 15px/1.7 var(--mono); }
.kicker { margin: 0; font: 500 14px/1.4 var(--mono); color: var(--film-dim); }
.kicker.caps { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.loupe h3.amber { color: var(--amber); }
.idx b.amber { color: var(--amber); }

@media (max-width: 480px) {
  .picto { flex-wrap: nowrap; justify-content: space-between; gap: 6px; }
  .picto figure { font-size: 8.5px; letter-spacing: .06em; text-align: center; }
  .picto svg { height: 46px; width: auto; }
  .thumbs { grid-template-columns: repeat(2, 1fr); }
  .thumb { aspect-ratio: 5 / 3; }
}