/* ============================================================================
   Prikichi Labs — "The Specimen Cabinet"
   One hand-authored stylesheet. No framework, no build step, no CDN runtime.

   The world: a painted-steel entomology cabinet. The page ground is the
   carcass; each section is a drawer face lifted a hairline out of it; content
   sits in darker wells inside. The only saturated thing in the whole cabinet
   is the specimen — the parakeet, drawn as a line engraving in its own hand.
   Everything else is steel, brass and label stock.
   ========================================================================= */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Cabinet — painted steel, blue-black. Deliberately dead-neutral so the
     specimen is the only saturated thing in frame. */
  --cabinet:        #141A22;  /* drawer face */
  --cabinet-deep:   #0B0F14;  /* carcass, wells, plate ground */
  --cabinet-rail:   #1E2732;  /* raised surface, hover */
  --cabinet-edge:   #2B3644;  /* drawer edge highlight, rules */
  --hairline:       #3A4756;  /* leader lines */
  --frame:          #232C38;  /* plate frame */

  /* Specimen — sampled from Eupsittula pertinax arubensis. */
  --plate-green:    #3DBB4A;
  --plate-green-dp: #2A8F38;
  --face-yellow:    #F2C230;
  --throat:         #C4611F;  /* used tiny — the mark's eye dot */

  /* Label stock — small cards only, never a page ground. */
  --label:          #E8E2D2;
  --label-ink:      #1A1712;

  --brass:          #B08D57;

  --ink:            #E9EEF2;
  --ink-soft:       #9FB0BE;  /* tinted from the hue, never gray */
  --ink-faint:      #8296A4;

  --danger:         #FF8A7A;

  --mark-eye:       var(--throat);

  font-optical-sizing: auto;
  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --sans:  Archivo, "Helvetica Neue", Helvetica, system-ui, sans-serif;

  /* Weighted drawer motion: fast out, long settle. Nothing floats. */
  --pull: cubic-bezier(0.18, 0.9, 0.22, 1);

  --shell: 1240px;
  --gutter: clamp(20px, 5vw, 48px);
}

/* --- 2. Reset and base -------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;  /* clear the sticky rail on anchor jumps */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cabinet-deep);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* An author `display` rule beats the UA sheet's `[hidden]` at any specificity,
   so the line above would otherwise keep a hidden <svg> on screen. */
[hidden] { display: none !important; }

/* Paint tooth. Sprayed steel is never optically flat, and at these sizes the
   difference between a fill and a finish is entirely in the grain. Fixed, so the
   tooth belongs to the cabinet rather than scrolling with what is in it. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

a { color: inherit; }

h1, h2, h3, h4, h5, p, figure, ul, ol, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Focus ring: green inside a dark ring, so one half always contrasts whether
   the control sits on steel or on label stock. */
:focus-visible {
  outline: 2px solid var(--plate-green);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--cabinet-deep);
  border-radius: 2px;
}
/* Programmatic focus moves the reading position; it must not ring a section. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible {
  outline: none; box-shadow: none;
}

::selection { background: var(--plate-green); color: var(--cabinet-deep); }

.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 200;
  background: var(--plate-green); color: var(--cabinet-deep);
  padding: 11px 20px;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  font-stretch: 78%; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  transition: top 200ms var(--pull);
}
.skip-link:focus { top: 16px; }

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

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }

/* --- 3. Type primitives ------------------------------------------------- */

/* Archivo's wdth axis gives one family both engraved label caps and running
   text, so the whole cabinet is lettered by two families total. */
.caps {
  font-family: var(--sans);
  font-stretch: 70%;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 1.5;
}

.eyebrow {
  font-family: var(--sans);
  font-stretch: 68%; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; font-size: 11px;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 22px;
}
.eyebrow::after { content: ""; height: 1px; flex: 1; background: var(--cabinet-edge); }
.eyebrow--bare::after { display: none; }

.display, h1, h2 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.012em;
}
h1, .display { font-size: clamp(40px, 6.6vw, 82px); }
h2 { font-size: clamp(32px, 4vw, 50px); }
h1 em, h2 em, .display em { font-style: italic; color: var(--plate-green); }

h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px); line-height: 1.14;
  letter-spacing: -.008em;
}

.lede {
  color: var(--ink-soft);
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.62;
  max-width: 52ch;
}

.binomial {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--ink);
}

.prose p + p { margin-top: 1.1em; }
.prose { color: var(--ink-soft); line-height: 1.68; max-width: 62ch; }

/* --- 4. Drawers --------------------------------------------------------- */

/* A drawer face: lifted off the carcass by a lit top edge, separated from the
   next by a seam of the carcass showing through.

   The lift has to be built, not asserted. A face that is genuinely proud of the
   carcass does three things at once: it takes the light along its top arris, it
   carries that light a few inches down the paint before the face falls away, and
   it casts into the seam below. A single flat hairline does none of them. */
.drawer {
  position: relative;
  background-color: var(--cabinet);
  background-image: linear-gradient(
    180deg, rgba(202, 224, 255, .050) 0, rgba(202, 224, 255, .014) 120px,
    rgba(0, 0, 0, 0) 300px);
  margin-bottom: 3px;
  padding: clamp(56px, 8vw, 108px) 0;
  box-shadow: 0 5px 12px -5px rgba(0, 0, 0, .62);
}

/* The arris. Light rakes across the cabinet rather than falling on it evenly,
   so the highlight peaks off-centre and dies before either end. */
.drawer::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg,
    var(--cabinet-deep) 0, var(--cabinet-edge) 6%, #5A708F 40%,
    var(--cabinet-edge) 76%, var(--cabinet-deep) 100%);
}

/* A well is the inside of the drawer, not another face: it is sunk, so it takes
   shadow from the lip above instead of light. */
.drawer--well {
  background-color: var(--cabinet-deep);
  background-image: none;
  box-shadow: inset 0 7px 16px -9px rgba(0, 0, 0, .9);
}
.drawer--well::before {
  background: linear-gradient(90deg,
    var(--cabinet-deep) 0, #26313E 40%, var(--cabinet-deep) 100%);
}

/* The drawer's own label plate: number, name, and the brass rule that runs
   out to the edge of the face. */
.drawer-tab {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.drawer-tab__no {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 15px; color: var(--brass);
  min-width: 2.4ch;
}
.drawer-tab__name {
  font-family: var(--sans); font-stretch: 68%; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; font-size: 11px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.drawer-tab::after { content: ""; height: 1px; flex: 1; background: var(--cabinet-edge); }

.grid-2 {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 5.5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

/* --- 5. The rail (site navigation) -------------------------------------- */

.rail {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11, 15, 20, .86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cabinet-edge);
}
.rail__in {
  max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter);
  height: 72px; display: flex; align-items: center; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand__mark { width: 30px; height: auto; color: var(--plate-green); flex: none; }
.brand__name {
  font-family: var(--sans); font-stretch: 72%; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; font-size: 12.5px;
  color: var(--ink);
}
.brand__name span { color: var(--ink-soft); font-weight: 400; }

.rail__nav { display: flex; align-items: center; gap: 26px; }
.rail__link {
  font-family: var(--sans); font-stretch: 74%; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; font-size: 11.5px;
  color: var(--ink-soft); text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 160ms var(--pull), border-color 160ms var(--pull);
}
.rail__link:hover { color: var(--ink); border-bottom-color: var(--plate-green); }
.rail__link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brass); }

.rail__toggle {
  display: none;
  background: none; border: 1px solid var(--cabinet-edge); color: var(--ink);
  width: 40px; height: 40px; padding: 0;
  align-items: center; justify-content: center; cursor: pointer;
  transition: border-color 160ms var(--pull);
}
.rail__toggle:hover { border-color: var(--plate-green); }

.drawer-menu {
  position: fixed; inset: 72px 0 0; z-index: 55;
  background: var(--cabinet-deep);
  padding: 24px var(--gutter) 40px;
  overflow-y: auto;
  border-top: 1px solid var(--cabinet-edge);
}
.drawer-menu[hidden] { display: none; }
.drawer-menu a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--cabinet-edge);
  text-decoration: none;
  font-family: var(--serif); font-size: 26px; font-weight: 500;
  color: var(--ink);
}
.drawer-menu a .n {
  font-family: var(--sans); font-stretch: 70%; font-size: 11px;
  letter-spacing: .2em; color: var(--brass);
}

/* The horizontal rail stops fitting beside the wordmark at 930px, so it hands
   over to the drawer with room to spare rather than at the crush point. The
   number lives only here; site.js reads the toggle's rendered state. */
@media (max-width: 980px) {
  .rail__nav { display: none; }
  .rail__toggle { display: flex; }
}

/* --- 6. Controls -------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  font-family: var(--sans); font-stretch: 74%; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; font-size: 11.5px;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background 180ms var(--pull), color 180ms var(--pull),
              border-color 180ms var(--pull), transform 180ms var(--pull);
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--primary { background: var(--plate-green); color: var(--cabinet-deep); }
.btn--primary:hover { background: #4DD35B; }
.btn--ghost { border-color: var(--cabinet-edge); color: var(--ink); }
.btn--ghost:hover { border-color: var(--brass); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* A link that behaves like a leader line: the rule extends on hover. */
.lead-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-stretch: 74%; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; font-size: 11.5px;
  color: var(--plate-green); text-decoration: none;
}
.lead-link::before {
  content: ""; height: 1px; width: 40px; background: currentColor;
  transform: scaleX(.5); transform-origin: left center;
  transition: transform 220ms var(--pull);
}
.lead-link:hover::before { transform: scaleX(1); }
.lead-link svg { width: 15px; height: 15px; }

/* --- 7. The plate (drawer II) ------------------------------------------- */

.plate {
  background: var(--cabinet-deep);
  border: 1px solid var(--cabinet-edge);
  padding: clamp(12px, 1.6vw, 18px);
}
.plate .lead { stroke: var(--hairline); stroke-width: 1; fill: none; }
.plate .pin { fill: var(--brass); }
.plate .cnum {
  fill: var(--brass); font-size: 15px; letter-spacing: .06em;
  font-family: var(--sans); font-variant-numeric: tabular-nums;
}
.plate .cal { transition: opacity 200ms var(--pull); }

.plate__cap {
  margin-top: 14px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--sans); font-size: 11px; font-stretch: 70%;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft);
}
.plate__cap .binomial { font-size: 13.5px; }

/* Anatomy list. Hovering a row dims every callout but its own. */
.anatomy { border-top: 1px solid var(--cabinet-edge); }
.anatomy .row {
  display: flex; gap: 20px; padding: 15px 10px;
  border-bottom: 1px solid var(--cabinet-edge);
  transition: background 180ms var(--pull);
}
.anatomy .row:hover { background: var(--cabinet-rail); }
/* The row indents on hover by moving its contents, not its box: shifting
   padding would relayout the row on every pointer pass. */
.anatomy .row > * { transition: transform 180ms var(--pull); }
.anatomy .row:hover > * { transform: translateX(6px); }
.anatomy .num {
  font-size: 12px; color: var(--brass); font-variant-numeric: tabular-nums;
  padding-top: 3px; min-width: 12px;
}
.anatomy h3 { margin: 0 0 3px; font-size: 15px; font-weight: 600; }
.anatomy h3 em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--ink-soft); font-size: 14.5px;
}
.anatomy .row p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.52; max-width: 42ch; }

.grid-2:has(.row:hover) .plate .cal { opacity: .28; }
.grid-2:has(.row[data-cal="1"]:hover) #cal-1,
.grid-2:has(.row[data-cal="2"]:hover) #cal-2,
.grid-2:has(.row[data-cal="3"]:hover) #cal-3,
.grid-2:has(.row[data-cal="4"]:hover) #cal-4,
.grid-2:has(.row[data-cal="5"]:hover) #cal-5 { opacity: 1; }
.grid-2:has(.row[data-cal="1"]:hover) #cal-1 .lead,
.grid-2:has(.row[data-cal="2"]:hover) #cal-2 .lead,
.grid-2:has(.row[data-cal="3"]:hover) #cal-3 .lead,
.grid-2:has(.row[data-cal="4"]:hover) #cal-4 .lead,
.grid-2:has(.row[data-cal="5"]:hover) #cal-5 .lead { stroke: var(--plate-green); }
.grid-2:has(.row[data-cal="1"]:hover) #cal-1 :is(.cnum, .pin),
.grid-2:has(.row[data-cal="2"]:hover) #cal-2 :is(.cnum, .pin),
.grid-2:has(.row[data-cal="3"]:hover) #cal-3 :is(.cnum, .pin),
.grid-2:has(.row[data-cal="4"]:hover) #cal-4 :is(.cnum, .pin),
.grid-2:has(.row[data-cal="5"]:hover) #cal-5 :is(.cnum, .pin) { fill: var(--plate-green); }

/* --- 8. Specimen cards and labels --------------------------------------- */

/* A mounted specimen: the image sits in a dark well, pinned, with a label
   card below it in the label-stock cream. */
.specimen { display: block; text-decoration: none; }
.specimen__well {
  position: relative;
  background: var(--cabinet-deep);
  border: 1px solid var(--cabinet-edge);
  padding: clamp(14px, 2vw, 22px);
  overflow: hidden;
}
.specimen__well img {
  width: 100%;
  filter: saturate(.72) contrast(1.04);
  transition: filter 320ms var(--pull), transform 420ms var(--pull);
}
.specimen:hover .specimen__well img,
.specimen:focus-visible .specimen__well img { filter: saturate(1) contrast(1); transform: scale(1.012); }

/* The label card. Label stock only ever appears at this size — never a ground. */
.label-card {
  background: var(--label); color: var(--label-ink);
  padding: 18px 20px 16px;
  border-top: 3px solid var(--brass);
}
.label-card__no {
  font-family: var(--sans); font-stretch: 70%; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; font-size: 11.5px;
  color: #6A5C41;
}
.label-card__name {
  font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1.1;
  margin: 4px 0 2px;
}
.label-card__sub {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 14px;
  color: #5B5245;
}
.label-card__body { font-size: 14px; line-height: 1.6; color: #3A342B; margin-top: 12px; max-width: 58ch; }
.label-card__meta {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(26,23,18,.18);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 24px;
}
.label-card__meta dt {
  font-family: var(--sans); font-stretch: 70%; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; font-size: 11px;
  color: #6A5C41; margin-bottom: 3px;
}
.label-card__meta dd { font-size: 13.5px; color: #2C271F; }

/* --- 9. The taxonomic key (method) -------------------------------------- */

/* Couplets, as a printed key: number, lead, then the determination. */
.key { border-top: 1px solid var(--cabinet-edge); }
.key__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(22px, 3vw, 32px) 0;
  border-bottom: 1px solid var(--cabinet-edge);
  align-items: baseline;
  transition: background 200ms var(--pull);
}
.key__row:hover { background: var(--cabinet-rail); }
.key__no {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 22px; color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.key__name { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 26px); font-weight: 500; line-height: 1.14; }
.key__name span {
  display: block; margin-top: 6px;
  font-family: var(--sans); font-stretch: 70%; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; font-size: 11px;
  color: var(--ink-faint);
}
.key__body { color: var(--ink-soft); font-size: 15px; line-height: 1.62; }

@media (max-width: 720px) {
  .key__row { grid-template-columns: 3rem minmax(0, 1fr); }
  .key__body { grid-column: 2; }
}

/* --- 10. Practice cards (services) -------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 3px;
  background: var(--cabinet-edge);
  border: 1px solid var(--cabinet-edge);
}
/* Mass, not cards: they share edges and read as one block of compartments. */
.compartment {
  background: var(--cabinet);
  padding: clamp(26px, 3vw, 38px) clamp(22px, 2.4vw, 32px);
  display: flex; flex-direction: column; gap: 14px;
  transition: background 220ms var(--pull);
}
.compartment:hover { background: var(--cabinet-rail); }
.compartment__ico { color: var(--brass); width: 26px; height: 26px; }
.compartment h3 { font-size: clamp(20px, 2vw, 24px); }
.compartment p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.62; }
.compartment__tag {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--cabinet-edge);
  font-family: var(--sans); font-stretch: 70%; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; font-size: 11px;
  color: var(--ink-faint);
}

/* The head row: the engraved glyph and the compartment's place in the order. */
.compartment__head { display: flex; align-items: baseline; gap: 12px; }
.compartment__no {
  font-family: var(--serif); font-style: italic; font-size: 15px;
  color: var(--brass); line-height: 1;
}

/* A compartmented drawer is not three boxes of equal size. Where a drawer has a
   primary compartment it takes the full width and runs as a ledger row, and the
   rest share the compartment beneath it. Drawers of equal compartments keep the
   auto-fit above. */
.cards:has(.compartment--wide) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compartment--wide {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr 1.55fr;
  gap: 0 clamp(28px, 4vw, 64px); align-content: start;
}
.compartment--wide > .compartment__head { grid-column: 1; margin-bottom: 14px; }
.compartment--wide > h3 { grid-column: 1; font-size: clamp(24px, 2.6vw, 32px); }
.compartment--wide > p:not(.compartment__tag):not(.compartment__head) {
  grid-column: 2; grid-row: 1 / span 2; font-size: 15.5px;
}
.compartment--wide > .compartment__tag { grid-column: 1 / -1; margin-top: clamp(26px, 3vw, 36px); }
@media (max-width: 860px) {
  .cards:has(.compartment--wide) { grid-template-columns: 1fr; }
  .compartment--wide { display: flex; gap: 14px; }
  .compartment--wide > h3 { font-size: clamp(20px, 2vw, 24px); }
  .compartment--wide > .compartment__head { margin-bottom: 0; }
}

/* --- 11. Stat pairs ----------------------------------------------------- */

.pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 28px; }
.pair__v {
  font-family: var(--serif); font-size: clamp(26px, 3vw, 36px); font-weight: 500;
  line-height: 1.05;
}
.pair__k {
  margin-top: 8px;
  font-family: var(--sans); font-stretch: 70%; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; font-size: 11px;
  color: var(--ink-faint);
}

/* --- 12. The reserved panel (enquiry) ----------------------------------- */

/* One calm panel. The single action on the whole site lives here. */
.panel {
  background: var(--cabinet);
  border: 1px solid var(--cabinet-edge);
  padding: clamp(28px, 4vw, 48px);
}
.field { margin-bottom: 20px; }
.field > label {
  display: block; margin-bottom: 8px;
  font-family: var(--sans); font-stretch: 70%; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; font-size: 11px;
  color: var(--ink-soft);
}
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--cabinet-deep);
  border: 1px solid #5A6D80;
  color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
  padding: 12px 14px;
  border-radius: 0;
  caret-color: var(--plate-green);
  transition: border-color 160ms var(--pull);
  -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 132px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: #7E92A6; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--plate-green); }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239FB0BE' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  padding-right: 40px;
}
.field-error {
  display: block; margin-top: 7px; min-height: 1em;
  font-size: 12.5px; color: var(--danger);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--danger); }

.form-status { margin-top: 16px; font-size: 14px; line-height: 1.6; }
.form-status--ok { color: var(--plate-green); }
.form-status--err { color: var(--danger); }

/* --- 13. Footer --------------------------------------------------------- */

.foot {
  background: var(--cabinet-deep);
  border-top: 1px solid var(--cabinet-edge);
  padding: clamp(48px, 6vw, 76px) 0 32px;
}
.foot__cols {
  display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 820px) { .foot__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot__cols { grid-template-columns: 1fr; } }
.foot h2, .foot__h {
  font-family: var(--sans); font-stretch: 70%; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; font-size: 11px;
  color: var(--ink-faint); margin-bottom: 16px;
}
.foot__cols a, .foot__cols p { font-size: 14px; color: var(--ink-soft); text-decoration: none; line-height: 1.9; }
.foot__cols a { transition: color 160ms var(--pull); }
.foot__cols a:hover { color: var(--plate-green); }
.foot__base {
  margin-top: clamp(36px, 5vw, 56px); padding-top: 22px;
  border-top: 1px solid var(--cabinet-edge);
  display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between;
  font-size: 12.5px; color: var(--ink-faint);
}

/* --- 14. Motion: the drawer pull ---------------------------------------- */

/* The one authored motion moment. A drawer's contents arrive on a short,
   weighted throw and settle — they never float in from far away, and they
   never fade without moving. JS applies the staged state, so with no JS the
   content is simply, immediately there. */
.pullable.is-staged {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 620ms var(--pull), transform 720ms var(--pull);
}
.pullable.is-staged.is-settled { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Depth stays; only the slide goes. */
  .pullable.is-staged { opacity: 1; transform: none; }
}

/* --- 15. Print ---------------------------------------------------------- */

@media print {
  :root {
    --cabinet: #fff; --cabinet-deep: #fff; --cabinet-rail: #fff;
    --cabinet-edge: #C8CDD3; --hairline: #8A939C; --frame: #B4BBC2;
    --ink: #101418; --ink-soft: #3E4750; --ink-faint: #6B747D;
    --label: #fff; --label-ink: #101418;
    /* The cabinet green is tuned for a dark carcass; on paper it needs the
       deep plate green to hold its weight in headings and links. */
    --plate-green: #1F6E2B; --brass: #7A5E2E;
  }
  body { background: #fff; color: #101418; }
  .rail, .drawer-menu, .skip-link, .no-print { display: none !important; }
  body::after, .drawer::before { display: none !important; }
  .drawer { box-shadow: none; background-image: none; }
  .drawer { border-top: 1px solid #C8CDD3; padding: 22px 0; }
  .plate, .panel, .specimen__well, .compartment, .label-card { border-color: #C8CDD3; background: #fff; }
  .label-card { border-top: 2px solid var(--brass); }
  a { text-decoration: none; }
  .pullable.is-staged { opacity: 1; transform: none; }
}

/* --- 16. Additions from the first review round -------------------------- */

/* The hero mount: the specimen pinned in its well, at plate scale. */
.mount { display: grid; place-items: center; padding: clamp(30px, 5vw, 56px); }
.mount__mark {
  width: min(252px, 70%); height: auto;
  color: var(--plate-green);
}

/* A cabinet photograph. Photography enters this world as a monochrome plate,
   not as stock colour: grayscale for luminance, a steel-blue layer for hue. */
.plate-photo { position: relative; isolation: isolate; }
.plate-photo img { filter: grayscale(1) contrast(1.14) brightness(.82); }
.plate-photo::after {
  content: ""; position: absolute; inset: 0;
  background: #24384F; mix-blend-mode: color; pointer-events: none;
}

/* A label pinned beside its specimen rather than banded across it, so a bright
   artifact and its cream card never merge into one lit block. */
.label-card--pinned { max-width: 620px; margin-left: clamp(0px, 3vw, 40px); }

/* The section head: the drawer's title and its one lateral exit, baselined
   against each other so the link reads as part of the heading, not a stray. */
.drawer-head {
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

/* The feature mount. Structurally identical to a tray cell — a 3px cabinet-edge
   frame, the well, the brass rule, the label — but laid on its side so a single
   specimen can carry a drawer. Turning the label into a column is the point:
   under a full-width well the cream spreads into a field and reads as a second
   lit block, and the leftover width beside it reads as a hole. */
.spec-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
  gap: 3px; background: var(--cabinet-edge); padding: 3px;
}
.spec-feature .specimen__well { border: 0; display: flex; align-items: center; }
.spec-feature .specimen__well img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.spec-feature:hover .specimen__well img { filter: saturate(1) contrast(1); }
.spec-feature .label-card {
  display: flex; flex-direction: column;
  border-top: 0; border-left: 3px solid var(--brass);
  padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 30px);
}
.spec-feature .label-card__name { font-size: clamp(27px, 2.5vw, 32px); }
.spec-feature .label-card__body { margin-top: 14px; }
.spec-feature .label-card__meta { margin-top: auto; grid-template-columns: 1fr; gap: 14px; }
.label-card__visit { margin-top: 18px; }

/* Below the split the mount stacks, and the brass rule returns to the top edge
   where it is the joint between artifact and label. */
@media (max-width: 860px) {
  .spec-feature { grid-template-columns: 1fr; }
  .spec-feature .specimen__well img { aspect-ratio: 16 / 9; }
  .spec-feature .label-card { border-left: 0; border-top: 3px solid var(--brass); }
  .spec-feature .label-card__meta { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 24px; }
}

/* The plate is drawn at a fixed 620-unit width, so its lettering shrinks with
   the column. Below the two-column break it is re-scaled to stay readable. */
@media (max-width: 900px) {
  .plate .cnum { font-size: 21px; }
  .plate text { font-size: 15px; }
  .plate .pin { r: 4.4; }
}

/* --- 17. The tray (inner pages) ----------------------------------------- */

/* A tray of mounts, 3px apart so the tray reads as one compartmented block.
   Every entry is a mount: the specimen in its well, the label beneath it.
   Label stock stays a label at this size and never becomes the field. */
.tray {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px; background: var(--cabinet-edge); padding: 3px;
}
.spec-mount {
  display: flex; flex-direction: column;
  background: var(--cabinet-deep);
  transition: transform 260ms var(--pull);
}
.spec-mount:hover { transform: translateY(-2px); }
.spec-mount .specimen__well { border: 0; border-bottom: 1px solid var(--cabinet-edge); }
.spec-mount .specimen__well img { aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; }
.spec-mount:hover .specimen__well img { filter: saturate(1) contrast(1); }
.tray .label-card {
  flex: 1;
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.4vw, 28px) clamp(22px, 2.4vw, 28px);
  display: flex; flex-direction: column;
}
.tray .label-card__name { font-size: clamp(24px, 2.2vw, 28px); }
.tray .label-card__meta { margin-top: auto; }

/* An open mount. A cabinet that cannot show a specimen leaves the mount empty
   and says so on the card rather than filling it with something invented. */
.vacant {
  aspect-ratio: 16 / 9;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 20px; text-align: center;
  box-shadow: inset 0 0 0 1px var(--cabinet-edge);
}
.vacant__glyph { width: 34px; height: 34px; color: var(--brass); opacity: .55; }
.vacant__note {
  font-family: var(--sans); font-stretch: 70%; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; font-size: 11px;
  color: var(--ink-faint); max-width: 34ch;
}

@media (max-width: 760px) { .tray { grid-template-columns: 1fr; } }

/* The drawer card: the studio's own entry, filed in its slot. The card is
   label stock, but it sits inside the carcass rather than on it, so the cream
   stays a label and the drawer stays the ground. */
.accession {
  background: var(--cabinet-deep);
  border: 1px solid var(--cabinet-edge);
  padding: clamp(16px, 2vw, 24px);
  max-width: 470px; margin-inline: auto; width: 100%;
}
.accession__tab {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
  font-family: var(--sans); font-stretch: 70%; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; font-size: 11px;
  color: var(--ink-faint);
}
.accession__tab::after { content: ""; flex: 1; height: 1px; background: var(--cabinet-edge); }

/* A label card carries its own link colour: the cabinet green is tuned for the
   carcass and drops below 4.5:1 on label stock. */
.label-card .lead-link { color: #2A6E33; }
.label-card__note {
  margin-top: 18px; display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #5B5245;
}
.label-card__note svg { width: 15px; height: 15px; flex: none; }

/* A leader line that points back rather than on. */
.lead-link--back svg { order: -1; }

/* --- 18. The one-pager (overview) --------------------------------------- */

/* A run of small facts set as an engraved strip rather than a card: used
   where the label stock would be too loud for three words. */
.strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px 32px; border-top: 1px solid var(--cabinet-edge);
  padding-top: 20px; margin-top: 28px;
}
.strip dt {
  font-family: var(--sans); font-stretch: 70%; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; font-size: 11px;
  color: var(--ink-faint); margin-bottom: 5px;
}
.strip dd { font-family: var(--serif); font-size: 18px; color: var(--ink); line-height: 1.3; }

/* Specification lines under the flagship: a glyph, then the fact. */
.specs { display: grid; gap: 12px; margin-top: 22px; }
.specs li {
  display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start;
  color: var(--ink-soft); font-size: 14.5px; line-height: 1.55;
}
.specs svg { width: 16px; height: 16px; color: var(--brass); margin-top: 2px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Print: the same document is the source for the PDF. */
@media print {
  @page { margin: 14mm 14mm; }
  .foot, .btn-row { display: none !important; }
  .grid-2 { grid-template-columns: 1.05fr 1fr !important; }
  .tray { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; background: none; padding: 0; gap: 14px; }
  .spec-feature { background: none; padding: 0; gap: 14px; }
  .spec-feature .label-card { border-left: 0; border-top: 2px solid var(--brass); }
  .plate-photo img { filter: none; }
  .plate-photo::after { display: none; }
  .drawer { padding: 18px 0; }
  .strip, .compartment, .key__row, .label-card, figure, .specimen__well,
  .spec-mount, .accession { break-inside: avoid; }
  /* On screen the compartments share edges over a lit ground; on paper an
     empty cell in that grid prints as a grey slab, so they get their own rules. */
  .cards { background: none !important; gap: 14px; }
  .compartment { border: 1px solid #C8CDD3; }
  h1, h2, h3, .drawer-tab { break-after: avoid; }
  /* A heading is one object on paper: a two-line title split across the fold
     reads as two half-sentences. Same for the three-up compartment grid, which
     otherwise opens an empty bordered cell at the foot of the page. */
  h1, h2, h3, .cards { break-inside: avoid; }
  .label-card__no, .label-card__name, .label-card__sub { break-after: avoid; }
  .specimen__well img { max-height: 220px; object-fit: contain; }
  /* Print columns are narrower than the screen's, and `anywhere` will hyphen a
     mail address mid-domain. On paper the strip sets one size smaller instead. */
  .strip dd { font-size: 15px; overflow-wrap: break-word !important; }
}

/* Links inside an engraved strip read as data, not as chrome. */
.strip dd a { color: var(--plate-green); text-decoration: none; }
.strip dd a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* A long address must not run under its neighbour when the strip is narrow. */
.strip > div { min-width: 0; }
.strip dd { overflow-wrap: anywhere; }

/* Centred panel headings read better balanced than ragged. */
.drawer [style*="text-align:center"] h2 { text-wrap: balance; }