@layer features {

/* ============================================================
   FIELD JOURNAL · instruments and advanced features
   ============================================================ */

:root:not(.js) :is(.tool-rack, .pull-cord, .lamp-pool, .page-curl,
  .specimen-open) { display: none; }

/* ------------------------------------------------------------
   POCKET INSTRUMENTS
   ------------------------------------------------------------ */
.tool-rack {
  position: fixed; top: 0.65rem; left: 50%; translate: -50% 0;
  z-index: var(--z-chrome); display: flex; gap: 0.25rem;
  padding: 0.28rem; border: 1.5px solid var(--rule-edge);
  border-radius: 50px; background: rgb(from var(--paper-warm) r g b / 0.92);
  box-shadow: var(--shadow-soft);
}
.tool-rack button,
.specimen-open,
.dialog-close {
  appearance: none; border: 1px solid var(--rule-edge);
  background: var(--paper); color: var(--ink); font: inherit;
  cursor: pointer;
}
.tool-rack button {
  inline-size: 2rem; block-size: 2rem; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-mono);
  transition: translate 0.2s var(--ease-spring), background 0.2s ease, color 0.2s ease;
}
.tool-rack button:hover { translate: 0 -2px; }
.tool-rack button[aria-pressed="true"] { background: var(--green); color: var(--paper); }

.pull-cord {
  position: fixed; z-index: var(--z-lamp); right: clamp(2.7rem, 7vw, 6.5rem); top: 0;
  inline-size: 3rem; block-size: 8rem; border: 0; padding: 0;
  background: transparent; color: var(--brown); cursor: grab;
  touch-action: none;
}
.pull-cord:active { cursor: grabbing; }
.pull-cord-line {
  position: absolute; top: 0; left: 50%; translate: -50% 0;
  width: 2px; height: calc(100% - 1.5rem);
  background: repeating-linear-gradient(var(--brown) 0 5px, var(--amber) 5px 7px);
}
.pull-cord-weight {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  inline-size: 1.25rem; block-size: 1.75rem;
  border: 2px solid var(--brown); border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 35% 25%, var(--amber), var(--brown) 72%);
  box-shadow: var(--shadow-soft);
}
.pull-cord[aria-pressed="true"] .pull-cord-weight { filter: saturate(1.25) brightness(1.12); }

.lamp-pool {
  --lamp-x: 50vw; --lamp-y: 30vh;
  position: fixed; inset: 0; pointer-events: none; z-index: var(--z-lamp);
  opacity: 0; transition: opacity 0.55s ease;
  background: radial-gradient(circle 24rem at var(--lamp-x) var(--lamp-y),
    rgb(from var(--amber) r g b / 0.16), transparent 72%);
  mix-blend-mode: screen;
}
:root[data-theme="lamp"] .lamp-pool { opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]):not([data-theme="lamp"]) .lamp-pool { opacity: 1; }
}

/* ------------------------------------------------------------
   CARD CATALOGUE
   ------------------------------------------------------------ */
dialog {
  color: var(--ink); background: var(--paper); border: 0;
}
dialog::backdrop {
  background: rgb(from var(--shade) r g b / 0.44);
  opacity: 0; transition: opacity 0.3s ease, display 0.3s allow-discrete,
    overlay 0.3s allow-discrete;
  transition-behavior: allow-discrete;
}
dialog[open]::backdrop { opacity: 1; }

.catalogue {
  inset: 0 auto 0 0; margin: 0;
  width: min(92vw, 34rem); max-width: none; height: 100dvh; max-height: none;
  padding: 0; border-right: 2px solid var(--ink);
  translate: -104% 0;
  transition: translate 0.42s var(--ease-out), display 0.42s allow-discrete,
    overlay 0.42s allow-discrete;
  transition-behavior: allow-discrete;
}
.catalogue[open] { translate: 0 0; }
.catalogue-shell { position: relative; z-index: 3; min-height: 100%; padding: clamp(1rem, 4vw, 2.4rem); }
.catalogue-head { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.catalogue-head .mono { color: var(--rust); }
.catalogue-head h2 { font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1; margin-top: 0.4rem; }
.dialog-close {
  flex: 0 0 auto; inline-size: 2.5rem; block-size: 2.5rem;
  border-radius: 50%; font-size: 1.6rem; line-height: 1;
}
.catalogue-search { display: block; margin-top: 1.8rem; }
.catalogue-search input {
  width: 100%; border: 0; border-bottom: 2px solid var(--ink);
  background: transparent; color: var(--ink); border-radius: 0;
  padding: 0.7rem 0.2rem; font: 1.1rem/1.3 var(--font-mono);
}
.catalogue-search input::placeholder { color: var(--ink-soft); opacity: 0.75; }
.catalogue-hint { color: var(--ink-soft); padding: 0.55rem 0 1rem; }
.catalogue-results { list-style: none; display: grid; gap: 0.55rem; }
.catalogue-card {
  display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem;
  width: 100%; padding: 0.9rem 1rem; text-align: left;
  border: 1.5px solid var(--rule-edge); border-radius: 7px 70px 5px 80px / 80px 6px 70px 7px;
  background: var(--stock); color: var(--ink); cursor: pointer;
  box-shadow: var(--shadow-soft); font: inherit;
}
.catalogue-card[aria-selected="true"] { border-color: var(--green); translate: 5px 0; }
.catalogue-card strong { line-height: 1.2; }
.catalogue-card .mono { color: var(--rust); }
.catalogue-card small { grid-column: 1 / -1; color: var(--ink-soft); }
.catalogue-empty { font-size: 1.5rem; color: var(--brown); margin-top: 2rem; }

@starting-style {
  .catalogue[open] { translate: -104% 0; }
  dialog[open]::backdrop { opacity: 0; }
}

/* ------------------------------------------------------------
   HERBARIUM CABINET + SPECIMEN SHEETS
   ------------------------------------------------------------ */
.specimen-cabinet {
  position: relative; padding: clamp(0.65rem, 2vw, 1rem);
  border: 2px solid var(--ink); border-radius: 8px 14px 9px 12px;
  background:
    repeating-linear-gradient(88deg, transparent 0 26px, rgb(from var(--ink) r g b / 0.035) 27px 28px),
    var(--brown);
  box-shadow: inset 0 0 0 4px rgb(from var(--paper-deep) r g b / 0.28), var(--shadow-photo);
}
.specimen-cabinet::before,
.specimen-cabinet::after {
  content: ""; position: absolute; top: 4.2rem; bottom: 0.75rem;
  width: 5px; border: 1px solid var(--ink); background: var(--paper-deep);
}
.specimen-cabinet::before { left: 0.35rem; }
.specimen-cabinet::after { right: 0.35rem; }
.cabinet-plaque {
  position: relative; z-index: 2; display: flex; justify-content: space-between;
  align-items: baseline; gap: 1rem; margin: 0.2rem auto 0.75rem;
  width: min(94%, 46rem); padding: 0.35rem 0.8rem;
  border: 1.5px solid var(--ink); border-radius: 3px;
  background: var(--cabinet-plaque-bg); color: var(--cabinet-plaque-fg); text-align: center;
  box-shadow: inset 0 0 0 2px rgb(from var(--paper) r g b / 0.35);
}
.cabinet-plaque .hand { font-size: 1.15rem; }

.specimen-drawer {
  position: relative; z-index: 2; border: 1.5px solid var(--ink);
  background: var(--paper-deep); box-shadow: inset 0 -4px 8px rgb(from var(--shade) r g b / 0.1);
}
.specimen-drawer + .specimen-drawer { margin-top: 0.42rem; }
.drawer-front {
  list-style: none; display: grid;
  grid-template-columns: 2.65rem minmax(12rem, 0.8fr) minmax(10rem, 1.2fr) auto 1.3rem;
  gap: clamp(0.55rem, 2vw, 1.2rem); align-items: center;
  min-height: 4.6rem; padding: 0.65rem clamp(0.7rem, 2vw, 1.1rem);
  background:
    linear-gradient(90deg, rgb(from var(--paper) r g b / 0.28), transparent 16% 84%, rgb(from var(--ink) r g b / 0.055)),
    var(--paper-warm);
  cursor: pointer; user-select: none;
}
.drawer-front::-webkit-details-marker { display: none; }
.drawer-front::marker { content: ""; }
.drawer-front:hover { background-color: var(--paper); }
.specimen-drawer[open] > .drawer-front {
  color: var(--green-deep); background-color: var(--paper); border-bottom: 1.5px dashed var(--rule-dash);
}
.drawer-handle {
  position: relative; display: block; inline-size: 2.35rem; block-size: 1.2rem;
  border: 1.5px solid var(--ink); border-radius: 50px 50px 8px 8px;
  background: linear-gradient(var(--amber), var(--brown)); box-shadow: var(--shadow-soft);
}
.drawer-handle::before {
  content: ""; position: absolute; left: 0.42rem; right: 0.42rem; top: -0.38rem;
  height: 0.55rem; border: 1.5px solid var(--ink); border-bottom: 0;
  border-radius: 9px 9px 0 0;
}
.drawer-heading { display: grid; line-height: 1.15; }
.drawer-heading .mono { color: var(--rust); }
.drawer-heading strong { font-size: clamp(1.05rem, 2vw, 1.35rem); }
.drawer-peek { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-count { color: var(--brown); white-space: nowrap; }
.drawer-toggle::before { content: "+"; font: 1.5rem/1 var(--font-mono); color: var(--green); }
.specimen-drawer[open] .drawer-toggle::before { content: "−"; }

.drawer-tray {
  padding: clamp(0.85rem, 2.5vw, 1.65rem);
  background:
    linear-gradient(var(--graph-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--graph-line) 1px, transparent 1px),
    var(--paper-warm);
  background-size: 22px 22px, 22px 22px, auto;
  animation: drawer-reveal 0.36s var(--ease-out) both;
}
.specimen--featured {
  min-height: 100%; display: flex; flex-direction: column; align-items: start;
  transform: rotate(-0.45deg);
}
.specimen--featured:hover { transform: rotate(0deg) translateY(-3px); }
.specimen--featured .specimen-kicker { color: var(--rust); line-height: 1.35; }
.specimen--featured .specimen-detail {
  margin-top: 0.85rem; color: var(--ink); font: 1rem/1.45 var(--font-display);
}
.specimen-open {
  margin-top: auto; padding: 0.42rem 0.6rem;
  color: var(--green); border-color: var(--green); border-radius: 4px;
}
.specimen-open:hover { background: var(--green); color: var(--paper); }

.accession-index { min-width: 0; padding: 0.1rem; }
.accession-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem;
  margin-bottom: 0.75rem; padding-bottom: 0.45rem; border-bottom: 1px dashed var(--rule-dash);
}
.accession-head .mono { color: var(--rust); }
.accession-head .hand { color: var(--green); font-size: 1.25rem; text-align: right; }
.accession-list { list-style: none; counter-reset: none; }
.accession {
  appearance: none; width: 100%; min-height: 2.7rem;
  display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) 0.7rem;
  gap: 0.5rem; align-items: center; padding: 0.38rem 0.55rem;
  border: 1px solid var(--rule-edge); border-radius: 3px 28px 3px 30px / 30px 3px 28px 3px;
  background: rgb(from var(--paper) r g b / 0.82); color: var(--ink);
  text-align: left; cursor: pointer; box-shadow: var(--shadow-soft);
  transition: translate 0.18s var(--ease-spring), border-color 0.18s ease, background 0.18s ease;
}
.accession:hover { translate: 2px 0; border-color: var(--green); }
.accession > span { color: var(--rust); font: 0.62rem/1 var(--font-mono); }
.accession > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.accession > i {
  display: block; inline-size: 0.55rem; block-size: 0.55rem;
  border: 1.5px solid var(--green); border-radius: 50%;
}
.accession.is-active { border-color: var(--green); background: var(--leaf-fill); translate: 3px 0; }
.accession.is-active > i { background: var(--green); box-shadow: 0 0 0 2px var(--paper); }
:root:not(.js) .accession { cursor: default; }

@keyframes drawer-reveal {
  from { opacity: 0; translate: 0 -0.6rem; }
  to { opacity: 1; translate: 0 0; }
}

.herbarium {
  width: min(92vw, 42rem); max-width: none; max-height: 90dvh;
  padding: 0; border: 2px solid var(--ink);
  border-radius: 10px 120px 8px 130px / 130px 8px 120px 10px;
  opacity: 0; scale: 0.94;
  transition: opacity 0.3s ease, scale 0.38s var(--ease-out),
    display 0.38s allow-discrete, overlay 0.38s allow-discrete;
  transition-behavior: allow-discrete;
}
.herbarium[open] { opacity: 1; scale: 1; }
.herbarium-sheet { position: relative; z-index: 3; padding: clamp(1.2rem, 5vw, 3rem); }
.herbarium-sheet form { position: absolute; right: 1rem; top: 1rem; }
.herbarium-number { color: var(--rust); }
.herbarium-pressing { width: min(55%, 15rem); margin: 0 auto 1rem; color: var(--green); }
.herbarium-pressing path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.herbarium-pressing .leaf-fill { fill: var(--leaf-fill); }
.herbarium-meta { color: var(--brown); border-top: 1px dashed var(--rule-dash); padding-top: 0.7rem; }
.herbarium h2 { font-size: clamp(2rem, 7vw, 3.8rem); line-height: 1; margin: 0.4rem 0 1rem; }
.herbarium-detail { max-width: 52ch; }
.herbarium-observed { margin-top: 1.2rem; color: var(--green); font-size: 1.35rem; rotate: -1deg; }
@starting-style { .herbarium[open] { opacity: 0; scale: 0.94; } }

/* ------------------------------------------------------------
   LOUPE + MARGINALIA
   ------------------------------------------------------------ */
.loupe {
  position: fixed; left: 0; top: 0; z-index: calc(var(--z-cursor) - 1);
  inline-size: 11rem; block-size: 11rem; border: 4px double var(--brown);
  border-radius: 50%; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 2px rgb(from var(--amber) r g b / 0.35), var(--shadow-photo);
  translate: -50% -50%; transition: opacity 0.2s ease;
}
.loupe::after {
  content: ""; position: absolute; width: 4.8rem; height: 0.8rem;
  right: -3.6rem; bottom: 0; rotate: 45deg; transform-origin: left center;
  border: 2px solid var(--brown); border-radius: 50px; background: var(--paper-warm);
}
:root.loupe-on .loupe { opacity: 1; }
:root.loupe-on body.cursor-active .cursor { opacity: 0.35; }
.loupe-note {
  position: absolute; left: var(--note-left); top: var(--note-top); z-index: 8;
  max-width: 15ch; color: var(--green); font-size: 1.35rem; line-height: 1.05;
  rotate: -4deg; pointer-events: none; opacity: 0;
  clip-path: circle(0 at var(--loupe-local-x, 0) var(--loupe-local-y, 0));
  transition: opacity 0.2s ease;
}
:root.loupe-on .loupe-note {
  opacity: 1;
  clip-path: circle(5.35rem at var(--loupe-local-x, 0) var(--loupe-local-y, 0));
}

/* ------------------------------------------------------------
   MEASUREMENT SHELF + SEEDED CHARTS
   ------------------------------------------------------------ */
.instrument-shelf {
  margin-top: clamp(3rem, 7vw, 5rem); padding-top: 2rem;
  border-top: 2px solid var(--ink);
}
.instrument-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.instrument-head h3 { font-size: clamp(1.6rem, 4vw, 2.5rem); }
.chart-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sketch-chart {
  background: var(--paper-warm); border: 1.5px solid var(--ink);
  padding: 0.8rem; border-radius: 8px 80px 6px 90px / 90px 6px 80px 8px;
}
.sketch-chart svg { display: block; width: 100%; overflow: visible; }
.chart-axis { stroke: var(--rule-strong); stroke-width: 1; }
.chart-gridline { stroke: var(--rule-dot); stroke-width: 1; stroke-dasharray: 3 5; }
.chart-line-ghost { fill: none; stroke: var(--amber); stroke-width: 6; opacity: 0.3; stroke-linecap: round; }
.chart-line { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-dot { fill: var(--paper); stroke: var(--rust); stroke-width: 2; }
.chart-label { fill: var(--ink-soft); font: 10px var(--font-mono); }
.sketch-chart figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.sketch-chart figcaption strong { color: var(--green); }
.sketch-chart figcaption .mono { color: var(--ink-soft); text-align: right; }

/* ------------------------------------------------------------
   PAPER RENDERERS
   ------------------------------------------------------------ */
:root[data-paper="css"] .grain {
  background-image:
    radial-gradient(ellipse at 28% 18%, rgb(from var(--amber) r g b / 0.07), transparent 38%),
    repeating-linear-gradient(87deg, transparent 0 17px, rgb(from var(--brown) r g b / 0.025) 18px 19px),
    var(--noise-grain);
}
:root[data-paper="off"] .grain,
:root[data-paper="gl"] .grain { display: none; }
.paper-gl {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: var(--z-speck); pointer-events: none;
  mix-blend-mode: var(--grain-blend); opacity: 0.34;
}

/* ------------------------------------------------------------
   OVERTURE
   ------------------------------------------------------------ */
.overture {
  position: fixed; inset: 0; z-index: 1000; place-items: center;
  align-content: center; gap: 0.35rem; background: var(--paper);
  color: var(--ink); text-align: center;
}
.overture:not([hidden]) { display: grid; animation: overture-away 0.7s var(--ease-out) 1.7s forwards; }
.overture .hand { color: var(--green); font-size: 1.7rem; }
.overture-leaf {
  width: 4rem; height: 5.5rem; margin-bottom: 0.8rem;
  border: 2px solid var(--green); border-radius: 80% 0 80% 0;
  background: var(--leaf-fill); rotate: -38deg;
  animation: overture-leaf 1.25s var(--ease-spring) both;
}

/* ------------------------------------------------------------
   SCROLL-DRIVEN PAPER HARDWARE
   ------------------------------------------------------------ */
.page-curl {
  position: fixed; right: 0; bottom: 0; z-index: calc(var(--z-chrome) - 1);
  width: 5.5rem; height: 5.5rem; pointer-events: none;
  background: linear-gradient(135deg, transparent 48%, var(--paper-deep) 49% 62%, var(--paper-warm) 63%);
  filter: drop-shadow(-3px -3px 3px rgb(from var(--shade) r g b / 0.12));
  transform-origin: right bottom;
}
@supports (animation-timeline: scroll()) {
  .page-curl { animation: corner-curl linear both; animation-timeline: scroll(root block); }
  [data-parallax] { animation: paper-drift linear both; animation-timeline: view(block); animation-range: entry -15% exit 115%; }
}
[data-parallax] { --drift-from: -10px; --drift-to: 10px; }
[data-parallax^="-"] { --drift-from: 10px; --drift-to: -10px; }

/* ------------------------------------------------------------
   FIELD REPORTS
   ------------------------------------------------------------ */
@view-transition { navigation: auto; }
.lamp-transition::view-transition-old(root) { animation: none; }
.lamp-transition::view-transition-new(root) {
  animation: lamp-wipe 0.7s var(--ease-out) both;
  transform-origin: var(--wipe-x) var(--wipe-y);
}
.field-report { background: var(--paper); }
.report-nav {
  position: sticky; top: 0; z-index: var(--z-chrome);
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
  background: rgb(from var(--paper) r g b / 0.94); border-bottom: 1px solid var(--rule-edge);
}
.report-nav a { text-decoration: none; color: var(--green); }
.report-hero {
  min-height: 62svh; display: grid; align-content: end;
  padding: clamp(4rem, 10vw, 8rem) clamp(1.2rem, 7vw, 6rem);
  border-bottom: 2px solid var(--ink);
}
.report-hero > * { width: min(100%, 68rem); margin-inline: auto; }
.report-hero h1 { font-size: clamp(3rem, 9vw, 7rem); line-height: 0.92; max-width: 12ch; margin-top: 0.5rem; }
.report-deck { max-width: 50ch; color: var(--ink-soft); font-size: 1.25rem; margin-top: 1.2rem; }
.report-copy { width: min(calc(100% - 2.4rem), 68rem); margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) 0; }
.report-copy section { display: grid; grid-template-columns: minmax(12rem, 0.6fr) minmax(0, 1.5fr); gap: 2rem; padding: 2.5rem 0; border-bottom: 1px dashed var(--rule-dash); }
.report-copy h2 { font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.05; }
.report-copy p + p { margin-top: 1rem; }
.report-evidence { background: var(--paper-warm); border: 1.5px solid var(--ink); padding: 1rem; margin-top: 1.2rem; }
.report-footer { padding: 3rem 1.2rem 6rem; text-align: center; }
#project-pipelines, .report-pipelines .report-hero h1 { view-transition-name: report-pipelines; }
#project-vision, .report-vision .report-hero h1 { view-transition-name: report-vision; }
#project-rentswipe, .report-rentswipe .report-hero h1 { view-transition-name: report-rentswipe; }
#project-similarity, .report-similarity .report-hero h1 { view-transition-name: report-similarity; }

/* ------------------------------------------------------------
   FEATURE KEYFRAMES
   ------------------------------------------------------------ */
@keyframes overture-leaf {
  from { opacity: 0; translate: 0 2rem; rotate: -70deg; }
  to { opacity: 1; translate: 0 0; rotate: -38deg; }
}
@keyframes overture-away { to { opacity: 0; visibility: hidden; } }
@keyframes corner-curl {
  0% { scale: 0.35; rotate: -8deg; }
  55% { scale: 0.75; rotate: 2deg; }
  100% { scale: 1; rotate: 0deg; }
}
@keyframes lamp-wipe {
  from { clip-path: circle(0 at var(--wipe-x) var(--wipe-y)); }
  to { clip-path: circle(150vmax at var(--wipe-x) var(--wipe-y)); }
}
@keyframes paper-drift {
  from { translate: 0 var(--drift-from); }
  to { translate: 0 var(--drift-to); }
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  .tool-rack { top: 0.35rem; scale: 0.9; }
  .pull-cord { right: 0.35rem; height: 6.5rem; }
  .drawer-front { grid-template-columns: 2.65rem minmax(0, 1fr) auto 1.3rem; }
  .drawer-peek { display: none; }
  .chart-grid { grid-template-columns: 1fr; }
  .instrument-head { display: block; }
  .page-curl { display: none; }
  .report-copy section { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 560px) {
  .tool-rack { left: 0.35rem; translate: none; transform-origin: left top; }
  .pull-cord { opacity: 0.8; }
  .specimen-cabinet { margin-inline: -0.45rem; }
  .cabinet-plaque { display: block; width: 90%; }
  .cabinet-plaque .hand { display: none; }
  .drawer-front {
    grid-template-columns: 2.35rem minmax(0, 1fr) 1.1rem;
    min-height: 4.2rem; padding-inline: 0.55rem;
  }
  .drawer-handle { inline-size: 2rem; }
  .drawer-count { display: none; }
  .drawer-heading strong { font-size: 1rem; }
  .drawer-tray { padding: 0.75rem; }
  .specimen--featured { min-height: 18rem; }
  .accession-head { display: block; }
  .accession-head .hand { text-align: left; }
  .loupe { inline-size: 8rem; block-size: 8rem; }
  :root.loupe-on .loupe-note { clip-path: circle(3.85rem at var(--loupe-local-x, 0) var(--loupe-local-y, 0)); }
}
@media (pointer: coarse) {
  [data-action="loupe"] { display: none; }
}

}
