*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  /* the cabinet's grain: two barely-there bands, not a gradient wash */
  background-image:
    linear-gradient(180deg, var(--buckram-900) 0, transparent 22rem),
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 2px, transparent 2px 6px);
}
img { max-width: 100%; height: auto; display: block; }

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; inset-inline-start: -9999px; top: var(--space-2);
  background: var(--surface-raised); color: var(--text);
  padding: var(--space-2) var(--space-4); z-index: 20;
}
.skip:focus { inset-inline-start: var(--space-2); }

/* ---- the drawer front ------------------------------------------------- */
.drawer {
  border-block-end: var(--hairline) solid var(--rule-dark);
  background: linear-gradient(180deg, var(--buckram-700), var(--buckram-800));
}
.drawer__plate {
  max-width: 74rem; margin-inline: auto;
  padding: var(--space-3) var(--gutter);
  display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
}
.drawer__name {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-typed);
  font-size: var(--step-0); letter-spacing: .06em; text-transform: lowercase;
  color: var(--brass-100); text-decoration: none;
  padding: var(--space-1) var(--space-3);
  /* the brass label holder screwed to the drawer front */
  border: var(--hairline) solid var(--brass-500);
  background: rgba(168,130,60,.10);
}
.drawer__name:hover { background: rgba(168,130,60,.20); }
.drawer__name:focus-visible { outline: var(--focus) solid var(--brass-400); outline-offset: 2px; }
.drawer__mark {
  inline-size: .5rem; block-size: .5rem;
  border: var(--hairline) solid var(--brass-400);
  background: var(--brass-500);
}

.drawer__tabs { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-inline-end: auto; }
.drawer__tab {
  font-size: var(--step--1); letter-spacing: .04em;
  color: var(--text-on-dark-quiet); text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-block-end: 2px solid transparent;
}
.drawer__tab:hover { color: var(--stock-100); border-block-end-color: var(--rule-dark); }
.drawer__tab:focus-visible { outline: var(--focus) solid var(--brass-400); outline-offset: -2px; }
.drawer__tab[aria-current="page"] { color: var(--stock-100); border-block-end-color: var(--brass-500); }

.drawer__lang select {
  font: inherit; font-size: var(--step--1);
  color: var(--text-on-dark); background: var(--buckram-900);
  border: var(--hairline) solid var(--rule-dark);
  padding: var(--space-2) var(--space-3); border-radius: 0;
}
.drawer__lang select:focus-visible { outline: var(--focus) solid var(--brass-400); outline-offset: 1px; }

/* ---- the card ---------------------------------------------------------- */
.tool { max-width: 74rem; margin: var(--space-6) auto var(--space-7); padding-inline: var(--gutter); }
@media (min-width: 60rem) {
  .tool { display: grid; grid-template-columns: minmax(0,1fr) 15rem; gap: var(--space-5); align-items: start; }
}

.card {
  position: relative;
  background: var(--surface);
  color: var(--text);
  border: var(--hairline) solid var(--stock-400);
  /* a catalogue card has no rounded corners; nothing here does */
  border-radius: 0;
  padding: var(--space-5) var(--gutter) var(--space-6);
  box-shadow: 0 1px 0 rgba(0,0,0,.35), 0 12px 28px -18px rgba(0,0,0,.7);
}

.card__head {
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  font-family: var(--font-typed); font-size: var(--step--1);
  padding-block-end: var(--space-3);
  border-block-end: var(--hairline) solid var(--rule);
}
.card__callno, .card__kind { margin: 0; display: flex; gap: var(--space-2); align-items: baseline; }
.card__callno-key, .card__kind-key { color: var(--text-quiet); letter-spacing: .08em; text-transform: uppercase; font-size: .82em; }
.card__callno-val { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.card__kind-val { text-transform: uppercase; letter-spacing: .08em; }

/* the main rule: the input sits ON the line, it is not a box floating above it */
.card__rule { margin-block: var(--space-5) var(--space-4); }
.card__rule-label {
  display: block; font-family: var(--font-typed); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-quiet);
  margin-block-end: var(--space-2);
}
.card__rule-line { display: flex; gap: var(--space-3); align-items: stretch; flex-wrap: wrap; }
.card__input {
  flex: 1 1 18rem; min-width: 0;
  font-family: var(--font-typed); font-size: var(--step-1); color: var(--text);
  background: transparent; border: 0; border-radius: 0;
  border-block-end: 2px solid var(--ink-900);
  padding: var(--space-2) var(--space-1);
}
.card__input::placeholder { color: var(--stock-400); }
.card__input:hover { background: rgba(0,0,0,.03); }
.card__input:focus { outline: 0; border-block-end-color: var(--accent); background: rgba(91,58,142,.06); }
.card__input:focus-visible { outline: var(--focus) solid var(--accent); outline-offset: 3px; }

.card__hint { margin: var(--space-3) 0 0; font-size: var(--step--1); color: var(--text-quiet); }
.card__hint--warn { color: var(--warn-600); }

/* ---- the stamp: every action in this world is a rubber stamp ----------- */
.stamp {
  font-family: var(--font-typed); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--violet-600); background: transparent;
  border: 2px solid var(--violet-600); border-radius: 0;
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
  /* a stamp sits slightly askew until it is pressed */
  transform: rotate(-.5deg);
  transition: background-color .12s var(--ease), color .12s var(--ease), transform .12s var(--ease);
}
.stamp:hover { background: var(--violet-100); }
.stamp:focus-visible { outline: var(--focus) solid var(--accent); outline-offset: 3px; }
.stamp:active { background: var(--violet-600); color: var(--stock-100); transform: rotate(0deg) translateY(1px); }
.stamp[disabled] { color: var(--stock-400); border-color: var(--stock-400); cursor: not-allowed; transform: none; }
.stamp--action { flex: 0 0 auto; }

/* ---- the record -------------------------------------------------------- */
.card__body { display: grid; gap: var(--space-5); }
/* With nothing resolved both children are hidden, so the grid must not keep
   holding their gap open. */
.card__body:not(:has(> :not([hidden]))) { display: none; }
@media (min-width: 44rem) {
  /* donated discipline: once resolved, the pin's own picture is the largest
     thing here — the record apparatus holds the margin */
  .card__body { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); align-items: start; }
}
.record { margin: 0; font-size: var(--step--1); }
.record__row {
  display: grid; grid-template-columns: 7.5rem minmax(0,1fr); gap: var(--space-3);
  padding-block: var(--space-2);
  border-block-end: var(--hairline) solid var(--rule);
}
.record dt { font-family: var(--font-typed); text-transform: uppercase; letter-spacing: .08em; color: var(--text-quiet); font-size: .9em; }
.record dd { margin: 0; overflow-wrap: anywhere; }

/* The pin's own picture is the largest thing on the card — that is the point.
 * But measured unbounded it ran 730px tall on a portrait pin and pushed the
 * pocket, which is the actual task, to 1299px down the page. Largest is not the
 * same as unbounded: the cap keeps it dominant and keeps the action reachable. */
.plate {
  margin: 0; border: var(--hairline) solid var(--rule); background: var(--stock-300);
  display: flex; justify-content: center;
  max-block-size: min(52vh, 26rem); overflow: hidden;
}
.plate__img { inline-size: auto; max-inline-size: 100%; max-block-size: min(52vh, 26rem); object-fit: contain; }

/* ---- the circulation pocket -------------------------------------------- */
.pocket {
  margin-block-start: var(--space-5);
  padding: var(--space-4) var(--space-4) var(--space-5);
  background: var(--stock-300);
  border: var(--hairline) solid var(--stock-400);
  /* a real pocket is cut, not rounded: the top edge steps down at the corners */
  clip-path: polygon(0 1.1rem, 1.1rem 0, calc(100% - 1.1rem) 0, 100% 1.1rem, 100% 100%, 0 100%);
}
.pocket__legend {
  margin: 0 0 var(--space-3); font-family: var(--font-typed); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-quiet);
}
.pocket__tiers { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-3); flex-wrap: wrap; }
.pocket__caveat { margin: var(--space-3) 0 0; font-size: var(--step--1); color: var(--warn-600); }

.tier {
  display: flex; flex-direction: column; gap: var(--space-1);
  min-inline-size: 8.5rem; text-decoration: none;
  padding: var(--space-3) var(--space-4);
  color: var(--text); background: var(--surface-raised);
  border: 2px solid var(--ink-900); border-radius: 0;
  transition: background-color .12s var(--ease), transform .12s var(--ease);
}
.tier:hover { background: var(--violet-100); }
.tier:focus-visible { outline: var(--focus) solid var(--accent); outline-offset: 3px; }
.tier:active { transform: translateY(1px); }
.tier[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.tier__name { font-family: var(--font-typed); text-transform: uppercase; letter-spacing: .08em; font-size: var(--step--1); }
.tier__size { font-variant-numeric: tabular-nums; font-size: var(--step-1); }
.tier__mark { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--warn-600); }
.tier__only { font-size: var(--step--1); color: var(--text-quiet); }

/* ---- status: a word and a mark, never colour alone --------------------- */
.card__status { margin: var(--space-4) 0 0; font-size: var(--step--1); min-block-size: 1.5em; }
.card__status::before { content: ""; }
.card__status[data-tone="working"]::before { content: "› "; color: var(--accent); }
.card__status[data-tone="done"]::before { content: "✓ "; color: var(--violet-600); }
.card__status[data-tone="error"] { color: var(--stop-600); }
.card__status[data-tone="error"]::before { content: "✕ "; }

/* the rod through the card's foot */
.card__rod {
  position: absolute; inset-inline: var(--gutter); bottom: var(--space-4);
  block-size: var(--hairline); background: var(--stock-400);
}
.card__rod::before {
  content: ""; position: absolute; inset-block-start: -.28rem;
  inset-inline-start: 50%; inline-size: .56rem; block-size: .56rem;
  transform: translateX(-50%);
  border: var(--hairline) solid var(--stock-400); border-radius: 50%;
  background: var(--surface);
}

/* ---- the date-due slip ------------------------------------------------- */
.slip {
  margin-block-start: var(--space-5);
  padding: var(--space-4);
  border: var(--hairline) dashed var(--rule-dark);
  background: rgba(0,0,0,.14);
}
@media (min-width: 60rem) { .slip { margin-block-start: 0; position: sticky; top: var(--space-4); } }
.slip__legend {
  margin: 0 0 var(--space-3); font-family: var(--font-typed); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-on-dark-quiet);
}
.slip__stamps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.slip__empty { margin: 0; font-size: var(--step--1); color: var(--text-on-dark-quiet); }
.slip__stamp {
  font-family: var(--font-typed); font-size: var(--step--1);
  color: var(--violet-100); border: var(--hairline) solid var(--violet-500);
  padding: var(--space-2) var(--space-3);
  transform: rotate(-.6deg);
  display: grid; gap: 2px;
}
.slip__stamp:nth-child(even) { transform: rotate(.5deg); }
.slip__stamp b { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.slip__stamp span { color: var(--text-on-dark-quiet); overflow-wrap: anywhere; }

/* ---- the prose sheet --------------------------------------------------- */
/* One container holds both the prose and the card, so they share a left edge.
 * Measured before this: the card sat at x=80 while the text sat at x=302, which
 * reads as two pages stacked rather than one sheet. */
.sheet {
  max-width: 74rem; margin-inline: auto;
  padding: var(--space-6) var(--gutter) 0;
  color: var(--text-on-dark);
}
/* Prose keeps its reading measure inside the wider container; the tool does not. */
.sheet > :is(h1, h2, h3, p, ul, ol, blockquote) { max-inline-size: var(--measure); }
.sheet h1 {
  font-size: var(--step-3); line-height: 1.12; letter-spacing: -.015em;
  margin: 0 0 var(--space-4); color: var(--stock-100);
}
.sheet h2 {
  font-size: var(--step-2); line-height: 1.2; margin: var(--space-7) 0 var(--space-3);
  color: var(--stock-100);
  padding-block-end: var(--space-2);
  border-block-end: var(--hairline) solid var(--rule-dark);
}
.sheet h3 { font-size: var(--step-1); margin: var(--space-5) 0 var(--space-2); color: var(--stock-100); }
.sheet p, .sheet li { color: var(--text-on-dark); }
.sheet strong { color: var(--stock-100); }
.sheet code {
  font-family: var(--font-typed); font-size: .92em;
  background: rgba(0,0,0,.28); padding: .1em .35em;
  border: var(--hairline) solid var(--rule-dark);
}
.sheet ul { padding-inline-start: 1.1rem; }
.sheet li { margin-block: var(--space-2); }
.sheet li::marker { color: var(--brass-500); }
.sheet a { color: var(--brass-100); text-underline-offset: .2em; }
.sheet a:hover { color: #fff; }
.sheet a:focus-visible { outline: var(--focus) solid var(--brass-400); outline-offset: 2px; }
/* The tool already lives in the 74rem container, so it only sheds the padding
 * the prose needs and spans the full width. */
.sheet .tool { max-width: none; margin-inline: 0; padding-inline: 0; }

/* ---- reserved ad shelf -------------------------------------------------
 * No advertising ships at launch (owner's decision), but the slot is held in
 * the grid so adding one later does not re-lay out the page. */
.shelf { max-width: 74rem; margin: var(--space-6) auto 0; padding-inline: var(--gutter); min-block-size: 0; }

/* ---- colophon ---------------------------------------------------------- */
.colophon {
  margin-block-start: var(--space-7);
  border-block-start: var(--hairline) solid var(--rule-dark);
  background: var(--buckram-900);
  padding: var(--space-5) var(--gutter);
}
.colophon__line {
  max-width: var(--measure); margin: 0 auto var(--space-2);
  font-size: var(--step--1); color: var(--text-on-dark-quiet);
}
.colophon__line--quiet { color: #7C918B; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .stamp, .slip__stamp { transform: none; }
}

/* ---- captures of the real interface ------------------------------------
 * Every .shot is a frame of the running tool, generated by tools-makegifs.mjs.
 * width/height are the real pixel dimensions from its manifest, so the space is
 * reserved before the file lands and nothing shifts. An animated GIF cannot be
 * stopped by CSS, so the reduced-motion source is a genuine still frame. */
.shot {
  margin: var(--space-5) 0;
  max-inline-size: var(--measure);
  border: var(--hairline) solid var(--rule-dark);
  background: var(--buckram-900);
  padding: var(--space-3);
}
.shot__img { inline-size: 100%; block-size: auto; display: block; }
.shot__cap {
  margin: var(--space-3) 0 0;
  font-family: var(--font-typed); font-size: var(--step--1);
  color: var(--text-on-dark-quiet); letter-spacing: .02em;
}

/* ---- the notes index ---------------------------------------------------- */
.cards { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 52rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cards__item { display: flex; }
.cards__link {
  display: flex; flex-direction: column; gap: var(--space-2);
  inline-size: 100%; text-decoration: none;
  padding: var(--space-4);
  background: var(--buckram-900);
  border: var(--hairline) solid var(--rule-dark);
  border-inline-start: 3px solid var(--brass-500);
  transition: background-color .12s var(--ease), border-color .12s var(--ease);
}
.cards__link:hover { background: var(--buckram-700); border-inline-start-color: var(--violet-500); }
.cards__link:focus-visible { outline: var(--focus) solid var(--brass-400); outline-offset: 2px; }
.cards__title { margin: 0; font-size: var(--step-1); line-height: 1.25; color: var(--stock-100); }
.cards__desc { margin: 0; font-size: var(--step--1); color: var(--text-on-dark-quiet); }
.cards__date {
  margin-block-start: auto; padding-block-start: var(--space-2);
  font-family: var(--font-typed); font-size: var(--step--1);
  color: var(--brass-500); letter-spacing: .06em;
}

/* ---- a single note ------------------------------------------------------ */
.sheet--post h1 { margin-block-end: var(--space-2); }
.post__meta {
  margin: 0 0 var(--space-6);
  font-family: var(--font-typed); font-size: var(--step--1);
  color: var(--brass-500); letter-spacing: .06em; text-transform: uppercase;
}
.post__foot {
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-4);
  border-block-start: var(--hairline) solid var(--rule-dark);
  display: flex; gap: var(--space-4); flex-wrap: wrap;
}
.post__back, .post__cta {
  font-family: var(--font-typed); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .1em; text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border: 2px solid currentColor;
}
.post__back { color: var(--text-on-dark-quiet); }
.post__back:hover { color: var(--stock-100); }
.post__cta { color: var(--violet-100); border-color: var(--violet-500); }
.post__cta:hover { background: var(--violet-600); color: #fff; }
.post__back:focus-visible, .post__cta:focus-visible { outline: var(--focus) solid var(--brass-400); outline-offset: 3px; }