/* ═══════════════════════════════════════════════════════════════════════
   morph — specimen catalogue
   Document model : laboratory catalogue / plate index. Six plates, one
                    left-hand index, marginal notes in the outer column.
   Register       : clinical. Cool neutral greys, hairline rules, one cold
                    accent, small-caps labels, catalogue numbers everywhere.
   Type           : IBM Plex Sans (labels/headings), IBM Plex Mono (all data
                    and catalogue numbers), IBM Plex Serif (running prose).
                    All three vendored locally — the page makes no external
                    request of any kind.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── vendored faces ─────────────────────────────────────────────────── */
@font-face{
  font-family:"Plex Sans"; font-style:normal; font-weight:400 600;
  font-display:swap; src:url("fonts/plex-sans-var.woff2") format("woff2");
}
@font-face{
  font-family:"Plex Mono"; font-style:normal; font-weight:400;
  font-display:swap; src:url("fonts/plex-mono-400.woff2") format("woff2");
}
@font-face{
  font-family:"Plex Mono"; font-style:normal; font-weight:500;
  font-display:swap; src:url("fonts/plex-mono-500.woff2") format("woff2");
}
@font-face{
  font-family:"Plex Serif"; font-style:normal; font-weight:400;
  font-display:swap; src:url("fonts/plex-serif-400.woff2") format("woff2");
}
@font-face{
  font-family:"Plex Serif"; font-style:italic; font-weight:400;
  font-display:swap; src:url("fonts/plex-serif-400i.woff2") format("woff2");
}

/* ── palette ────────────────────────────────────────────────────────── */
:root{
  --paper:    #edeff1;   /* page ground — cool neutral grey            */
  --sheet:    #fbfcfc;   /* plate / sheet white                        */
  --sheet-2:  #f4f6f7;   /* inset cells                                */
  --ink:      #13171a;   /* primary text                               */
  --ink-2:    #464d53;   /* secondary                                  */
  --ink-3:    #5e686f;     /* tertiary / captions — AA on paper (4.9:1)  */
  --rule:     #d5d9dc;   /* hairline                                   */
  --rule-2:   #bcc3c8;   /* emphatic hairline                          */
  --slate:    #0d1114;   /* specimen plate ground                      */
  --slate-2:  #171d22;
  --accent:   #1a6b90;   /* the single cold accent                     */
  --accent-2: #12506d;
  --tint:     rgba(26,107,144,.075);

  --sans:  "Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:  "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --serif: "Plex Serif", Georgia, "Times New Roman", serif;

  --rail: 258px;
  --measure: 71ch;
}

/* ── reset-ish ──────────────────────────────────────────────────────── */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:16.5px;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,canvas{ max-width:100%; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-2); text-decoration:underline; text-underline-offset:3px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
hr{ border:0; border-top:1px solid var(--rule); margin:34px 0; }

.skip{
  position:absolute; left:-9999px; top:0; background:var(--sheet);
  padding:10px 16px; border:1px solid var(--rule-2); z-index:99;
  font-family:var(--sans); font-size:13px;
}
.skip:focus{ left:8px; top:8px; }

/* ── shell ──────────────────────────────────────────────────────────── */
.shell{ display:block; }

/* ── left index rail ────────────────────────────────────────────────── */
.rail{
  position:fixed; inset:0 auto 0 0; width:var(--rail);
  background:var(--sheet);
  border-right:1px solid var(--rule);
  padding:26px 22px 22px;
  display:flex; flex-direction:column; gap:26px;
  overflow-y:auto;
}
.rail__mark{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.rail__mark:hover{ text-decoration:none; }
.rail__glyph{ width:30px; height:30px; flex:none; display:block; }
.rail__word{
  display:block;
  font-family:var(--sans); font-weight:600; font-size:19px;
  letter-spacing:.02em; color:var(--ink); line-height:1.1;
}
.rail__sub{
  display:block;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); margin:3px 0 0;
  line-height:1.4;
}

.idx{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.idx li{ border-bottom:1px solid var(--rule); }
.idx a{
  position:relative;
  display:grid; grid-template-columns:30px 1fr; gap:10px; align-items:baseline;
  padding:9px 2px; color:var(--ink-2); text-decoration:none;
  font-family:var(--sans); font-size:13.5px; line-height:1.35;
}
.idx a:hover{ color:var(--ink); background:var(--sheet-2); text-decoration:none; }
.idx .n{ font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.04em; }
.idx [aria-current="page"]{ color:var(--ink); font-weight:600; }
.idx [aria-current="page"] .n{ color:var(--accent); }
.idx [aria-current="page"]::before{
  content:""; position:absolute; left:-22px; top:10px; width:3px; height:19px;
  background:var(--accent);
}

.rail__foot{
  margin-top:auto; font-family:var(--mono); font-size:10.5px; line-height:1.75;
  color:var(--ink-3); letter-spacing:.02em;
}
.rail__foot b{ font-weight:500; color:var(--ink-2); }

/* ── main column ────────────────────────────────────────────────────── */
.main{ margin-left:var(--rail); padding:0 0 90px; }
.wrap{ max-width:1116px; padding:0 46px; margin:0 auto; }

/* plate header block */
.plate-head{
  border-bottom:1px solid var(--rule-2);
  padding:46px 0 22px; margin-bottom:38px;
}
.plate-no{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin:0 0 14px;
}
h1{
  font-family:var(--sans); font-weight:600; letter-spacing:-.015em;
  font-size:clamp(27px,3.4vw,39px); line-height:1.12; margin:0;
  color:var(--ink);
}
.plate-head p{
  font-family:var(--sans); font-size:16px; color:var(--ink-2);
  margin:13px 0 0; max-width:64ch; line-height:1.55;
}

/* two-column document grid: prose + marginalia */
.doc{ display:block; }
@media (min-width:1180px){
  .doc{
    display:grid; grid-template-columns:minmax(0,var(--measure)) 210px;
    column-gap:44px; align-items:start;
  }
  .doc > *{ grid-column:1; }
  .doc > .marginal{ grid-column:2; }
}
.doc > *{ max-width:var(--measure); }

section{ margin:0 0 46px; }
section > :first-child{ margin-top:0; }

h2{
  font-family:var(--sans); font-weight:600; font-size:19px; letter-spacing:-.005em;
  margin:0 0 4px; color:var(--ink);
}
h2 .h-no{
  font-family:var(--mono); font-weight:400; font-size:12px; color:var(--ink-3);
  letter-spacing:.08em; margin-right:11px;
}
h3{
  font-family:var(--sans); font-weight:600; font-size:15px; margin:30px 0 6px;
  color:var(--ink);
}
.rule-under{ border-bottom:1px solid var(--rule); padding-bottom:9px; margin-bottom:18px; }

p{ margin:0 0 15px; }
p.lede{ font-size:19px; line-height:1.6; color:var(--ink); }
strong{ font-weight:400; font-family:var(--sans); font-weight:600; }
em{ font-style:italic; }
code, .m{ font-family:var(--mono); font-size:.88em; }
code{
  background:var(--sheet); border:1px solid var(--rule); border-radius:2px;
  padding:.06em .34em; color:var(--ink);
}

.label{
  font-family:var(--sans); font-weight:600; font-size:10.5px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 9px;
}

ul.plain{ list-style:none; margin:0 0 16px; padding:0; }
ul.plain li{
  position:relative; padding-left:20px; margin-bottom:8px;
}
ul.plain li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:9px; height:1px; background:var(--rule-2);
}

/* marginal note */
.marginal{
  font-family:var(--sans); font-size:12.5px; line-height:1.55; color:var(--ink-3);
  border-top:1px solid var(--rule-2); padding-top:9px; margin:6px 0 26px;
}
.marginal b{ display:block; font-family:var(--mono); font-size:10px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--accent); font-weight:500;
  margin-bottom:5px; }
@media (max-width:1179px){
  .marginal{ max-width:var(--measure); background:var(--sheet);
    border:1px solid var(--rule); border-top:2px solid var(--rule-2);
    padding:12px 14px; }
}

/* ── the specimen plate (3D) ────────────────────────────────────────── */
/* the dark ground belongs to the stage, not to the figure — the caption sits
   on paper underneath it, where a plate caption belongs. */
.specimen{ margin:0 0 34px; position:relative; }
@media (min-width:1180px){
  .specimen{ grid-column:1 / -1 !important; max-width:none !important; }
}
.specimen__stage{
  border:1px solid var(--rule-2); border-bottom:0;
  position:relative; aspect-ratio:16/10; min-height:280px; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 8%, #1c242b 0%, #0d1114 62%, #090c0f 100%);
}
.specimen__stage canvas{ display:block; width:100%; height:100%; }
.specimen__overlay{
  position:absolute; inset:0; pointer-events:none;
}
.specimen__ticks{ position:absolute; inset:0; width:100%; height:100%; }
.specimen__id{
  position:absolute; left:14px; top:12px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:#7e8d97;
}
.specimen__id b{ color:#d3dce2; font-weight:500; }
.specimen__disclaimer{
  position:absolute; right:14px; top:12px; text-align:right;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:#7e8d97;
}
.specimen__fallback{
  position:absolute; inset:0; display:none; place-items:center; padding:22px;
}
.specimen.is-fallback .specimen__fallback{ display:grid; }
.specimen__fallback svg{ width:min(360px,72%); height:auto; }

.specimen__bar{
  display:flex; flex-wrap:wrap; gap:0;
  border:1px solid var(--rule-2); border-top:1px solid var(--rule);
  background:var(--sheet);
}
.specimen__read{
  flex:1 1 210px; padding:11px 14px; border-right:1px solid var(--rule);
  min-width:0;
}
.specimen__read:last-child{ border-right:0; }
.specimen__read .k{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:3px;
}
.specimen__read .v{
  font-family:var(--sans); font-weight:600; font-size:14px; color:var(--ink);
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.specimen__read .v .m{ font-weight:400; color:var(--ink-2); }

/* ballot controls */
.ballot{
  border:1px solid var(--rule-2); border-top:0; border-bottom:0;
  background:var(--sheet-2); padding:14px;
}
.ballot__row{ display:flex; flex-wrap:wrap; gap:8px; align-items:stretch; }
.ballot__btn{
  flex:1 1 165px; min-width:0; text-align:left; cursor:pointer;
  background:var(--sheet); border:1px solid var(--rule-2); border-radius:0;
  padding:9px 11px; font-family:var(--sans); font-size:13px; color:var(--ink);
  display:block; transition:border-color .16s, background .16s;
}
.ballot__btn .bn{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--ink-3);
  display:block; margin-bottom:2px;
}
.ballot__btn:hover{ border-color:var(--accent); background:#fff; }
.ballot__btn[aria-pressed="true"]{
  border-color:var(--accent); background:var(--tint); color:var(--accent-2);
}
.ballot__btn[aria-pressed="true"] .bn{ color:var(--accent); }
.ballot__meter{
  margin-top:11px; height:3px; background:var(--rule); position:relative; overflow:hidden;
}
.ballot__meter i{
  position:absolute; inset:0 auto 0 0; width:0%; background:var(--accent);
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
.ballot__status{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  color:var(--ink-3); margin:8px 0 0; min-height:1.5em;
}
.ballot__status b{ color:var(--accent); font-weight:500; }

figcaption, .caption{
  font-family:var(--sans); font-size:12px; color:var(--ink-3); line-height:1.5;
  margin-top:9px;
}
figure{ margin:0 0 30px; }
.caption .c-no{ font-family:var(--mono); color:var(--ink-2); letter-spacing:.06em; }

/* ── data tables ────────────────────────────────────────────────────── */
.tablewrap{ overflow-x:auto; margin:0 0 20px; border:1px solid var(--rule); background:var(--sheet); }
table{ border-collapse:collapse; width:100%; min-width:420px; }
caption{
  caption-side:top; text-align:left; padding:11px 14px 0;
  font-family:var(--sans); font-weight:600; font-size:10.5px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3);
}
th, td{
  text-align:left; padding:9px 14px; border-bottom:1px solid var(--rule);
  font-size:14px; vertical-align:top;
}
thead th{
  font-family:var(--sans); font-weight:600; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
  border-bottom:1px solid var(--rule-2);
}
tbody th{ font-family:var(--sans); font-weight:600; font-size:13.5px; white-space:nowrap; }
td.num, td .m, td.mono{ font-family:var(--mono); font-size:13px; }
tbody tr:last-child th, tbody tr:last-child td{ border-bottom:0; }
tbody tr:hover{ background:var(--sheet-2); }

/* ── catalogue entry ────────────────────────────────────────────────── */
.entry{
  border-top:2px solid var(--ink); padding-top:18px; margin:0 0 52px;
  max-width:none !important;
}
@media (min-width:1180px){ .entry{ grid-column:1 / -1 !important; } }
.entry__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:14px; margin-bottom:4px; }
.entry__no{
  font-family:var(--mono); font-size:12px; letter-spacing:.13em; color:var(--accent);
}
.entry__name{ font-family:var(--sans); font-weight:600; font-size:22px; margin:0; }
.entry__latin{ font-family:var(--serif); font-style:italic; color:var(--ink-3); font-size:15px; }
.entry__body{ display:grid; gap:26px; margin-top:16px; }
@media (min-width:900px){
  .entry__body{ grid-template-columns:230px minmax(0,1fr); align-items:start; }
}
.entry__plate{
  background:var(--slate); border:1px solid var(--rule-2); padding:14px;
  position:relative;
}
.entry__plate svg{ display:block; width:100%; height:auto; }
.entry__plate .pl{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:#7e8d97; margin-top:9px; display:block;
}
.entry__prose > :last-child{ margin-bottom:0; }

.kv{ margin:0 0 16px; border-top:1px solid var(--rule); }
.kv div{
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px;
  border-bottom:1px solid var(--rule); padding:7px 0;
}
.kv dt{
  font-family:var(--sans); font-weight:600; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin:0; padding-top:2px;
}
.kv dd{ margin:0; font-family:var(--mono); font-size:13px; color:var(--ink); }
.kv dd.txt{ font-family:var(--serif); font-size:15px; }
@media (max-width:560px){
  .kv div{ grid-template-columns:1fr; gap:2px; }
}

/* ── numbered procedure ─────────────────────────────────────────────── */
.steps{ counter-reset:s; margin:0 0 22px; }
.steps > li{ list-style:none; }
.steps{ padding:0; }
.step{
  display:grid; grid-template-columns:52px minmax(0,1fr); gap:16px;
  border-top:1px solid var(--rule); padding:18px 0;
}
.step:last-child{ border-bottom:1px solid var(--rule); }
.step__n{
  counter-increment:s; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:var(--accent); padding-top:4px;
}
.step__n::before{ content:"STEP " counter(s,decimal-leading-zero); }
.step h3{ margin:0 0 4px; font-size:16px; }
.step p{ margin:0; color:var(--ink-2); }

/* ── status / registration block ────────────────────────────────────── */
.status{
  border:1px solid var(--rule-2); background:var(--sheet);
  margin:0 0 26px;
}
.status__top{
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  border-bottom:1px solid var(--rule);
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, rgba(26,107,144,.055) 7px 14px);
}
.status__dot{ width:7px; height:7px; background:var(--accent); flex:none; }
.status__top span{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-2);
}
.status__body{ padding:14px; }
.status__body p{ margin:0 0 10px; font-size:15px; color:var(--ink-2); }
.status__body p:last-child{ margin-bottom:0; }
.status__body .m{ color:var(--ink); }

/* ── page navigation ────────────────────────────────────────────────── */
.pagenav{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--rule-2); margin-top:16px; padding-top:16px;
  max-width:none !important;
}
@media (min-width:1180px){ .pagenav{ grid-column:1 / -1 !important; } }
.pagenav a{
  font-family:var(--sans); font-size:13.5px; text-decoration:none;
  display:block; max-width:46%;
}
.pagenav a:hover{ text-decoration:none; }
.pagenav .pn-k{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:2px;
}
.pagenav a:hover .pn-t{ text-decoration:underline; text-underline-offset:3px; }
.pagenav .r{ text-align:right; margin-left:auto; }

/* ── colophon ───────────────────────────────────────────────────────── */
.colophon{
  border-top:1px solid var(--rule); margin-top:56px; padding-top:18px;
  font-family:var(--mono); font-size:11px; line-height:1.9; color:var(--ink-3);
  letter-spacing:.02em; max-width:none !important;
}
@media (min-width:1180px){ .colophon{ grid-column:1 / -1 !important; } }
.colophon a{ color:var(--ink-2); }
.colophon .cols{ display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; }

/* ── mobile ─────────────────────────────────────────────────────────── */
.railtoggle{ display:none; }
@media (max-width:980px){
  .rail{
    position:static; width:auto; height:auto; border-right:0;
    border-bottom:1px solid var(--rule-2); padding:16px 20px;
    flex-direction:column; gap:14px; overflow:visible;
  }
  .rail__foot{ display:none; }
  .idx{
    display:flex; gap:0; overflow-x:auto; border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule); scrollbar-width:thin;
  }
  .idx li{ border-bottom:0; border-right:1px solid var(--rule); flex:none; }
  .idx a{
    grid-template-columns:1fr; gap:0; padding:8px 13px; white-space:nowrap;
    font-size:13px;
  }
  .idx a .n{ display:block; }
  .idx [aria-current="page"]::before{ display:none; }
  .idx [aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--accent); }
  .main{ margin-left:0; }
  .wrap{ padding:0 20px; }
  .plate-head{ padding-top:28px; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .wrap{ padding:0 15px; }
  .specimen__stage{ aspect-ratio:4/3.4; }
  .specimen__disclaimer{ display:none; }
  .ballot__btn{ flex:1 1 100%; }
  .step{ grid-template-columns:1fr; gap:4px; }
  th, td{ padding:8px 11px; font-size:13px; }
}

/* ── motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}