/* Quire: a herbarium cabinet. Sage ground, cream sheets, green-black ink, one madder accent.
   Sorts Mill Goudy for text (italic for Latin names); IM Fell French Canon for the name and heads. */

@font-face { font-family: "Sorts Mill Goudy"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/specimen/sorts-mill-goudy-400.woff2") format("woff2"); }
@font-face { font-family: "Sorts Mill Goudy"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/specimen/sorts-mill-goudy-400-italic.woff2") format("woff2"); }
@font-face { font-family: "IM Fell French Canon"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/specimen/im-fell-french-canon-400.woff2") format("woff2"); }
/* the label face: IM Fell for the letters, Goudy's figures (Fell has no lining figures, so its 0 reads as o) */
@font-face { font-family: "Quire Fell"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/specimen/im-fell-french-canon-400.woff2") format("woff2"); unicode-range: U+0000-002F, U+003A-10FFFF; }
@font-face { font-family: "Quire Fell"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/specimen/sorts-mill-goudy-400.woff2") format("woff2"); unicode-range: U+0030-0039; }
@property --qr-sx { syntax: "<number>"; inherits: true; initial-value: 1; }

.spec-quire {
  --qr-sage: #A9B793; --qr-ink: #1B2519; --qr-madder: #7A1F24; --qr-cream: #F1ECDA; --qr-cream-hi: #F7F3E6;
  --qr-ink-72: rgba(27, 37, 25, .72); --qr-rule: rgba(27, 37, 25, .28); --qr-tape: rgba(214, 200, 160, .78);
  --qr-fillc: #C9B458;
  --qr-goudy: "Sorts Mill Goudy", "Goudy Old Style", Garamond, "Times New Roman", serif;
  --qr-fell: "Quire Fell", "IM Fell French Canon", "Iowan Old Style", Georgia, serif;
  --qr-m: clamp(16px, 5.5vw, 80px); --qr-gut: clamp(12px, 1.7vw, 24px); --qr-pad: clamp(20px, 4.4vw, 64px);
  --qr-side: clamp(16px, 3vw, 32px); --qr-over: 40px; --qr-nav-h: 56px;
  --qr-shadow: 0 1px 0 rgba(27, 37, 25, .10), calc(var(--qr-sx) * 9px) 14px 28px -16px rgba(27, 37, 25, .38);
  --qr-lift: 0 1px 0 rgba(27, 37, 25, .10), calc(var(--qr-sx) * 14px) 26px 44px -18px rgba(27, 37, 25, .45);
  --qr-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .106 0 0 0 0 .145 0 0 0 0 .098 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --qr-dots: radial-gradient(circle, rgba(27, 37, 25, .55) .7px, transparent .95px) 0 50% / 6px 3px repeat-x;
}
body.spec-quire { margin: 0; background: #A9B793; }

.qr-cabinet {
  position: relative; overflow-x: clip; padding-bottom: 72px;
  background: var(--qr-sage) var(--qr-grain);
  color: var(--qr-ink);
  font: 400 clamp(1.0625rem, 1rem + .25vw, 1.1875rem)/1.55 var(--qr-goudy);
  font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.qr-cabinet.qr-ready { transition: --qr-sx 900ms cubic-bezier(.45, 0, .2, 1); }
.qr-cabinet *, .qr-cabinet *::before, .qr-cabinet *::after { box-sizing: border-box; }
.qr-cabinet :where(h1, h2, h3, p, ol, ul, dl, dd, figure, fieldset, legend, table, caption) { margin: 0; padding: 0; }
.qr-cabinet :where(ol, ul) { list-style: none; }
.qr-cabinet fieldset { border: 0; min-width: 0; }
.qr-cabinet img { display: block; max-width: 100%; height: auto; }
.qr-cabinet [hidden] { display: none !important; }
.qr-cabinet [id] { scroll-margin-top: calc(var(--bar-h, 40px) + var(--qr-nav-h) + 14px); }
.qr-cabinet a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(27, 37, 25, .42); }
.qr-cabinet a:hover { text-decoration-color: currentColor; }
.qr-cabinet :focus-visible { outline: 2px solid var(--qr-madder); outline-offset: 3px; }
.qr-cabinet i, .qr-cabinet em { font-style: italic; }
.qr-cabinet b { font-weight: 400; }
.qr-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.qr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.qr-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: butt; stroke-linejoin: miter; }

/* type roles */
.qr-kicker, .qr-regline, .qr-acc, .qr-pc-acc, .qr-an, .qr-r-acc, .qr-slip-acc, .qr-det-no, .qr-sl-acc {
  font-family: var(--qr-fell); letter-spacing: .14em; color: var(--qr-madder); font-feature-settings: "lnum";
}
.qr-kicker { font-size: .875rem; line-height: 1.2; text-transform: uppercase; margin-bottom: 18px; }
.qr-h2 { font: 400 clamp(2.125rem, 1.5rem + 2.4vw, 3.5rem)/1 var(--qr-fell); letter-spacing: -.005em; max-width: 19ch; text-wrap: balance; }
.qr-h3 { font: 400 1.5rem/1.1 var(--qr-fell); }
.qr-lede { margin-top: 22px; max-width: 44ch; font-size: clamp(1.1875rem, 1rem + .6vw, 1.4375rem); line-height: 1.45; text-wrap: pretty; }
.qr-cabinet p { text-wrap: pretty; hanging-punctuation: first; }
.qr-sc { font-variant: small-caps; letter-spacing: .06em; text-transform: lowercase; margin-right: .3em; }
.qr-dots { flex: 1 1 24px; min-width: 24px; height: 3px; align-self: flex-end; margin-bottom: .42em; background: var(--qr-dots); }

/* tape: gummed paper, deckled at its short ends */
.qr-tape {
  position: absolute; z-index: 4; width: 88px; height: 22px; pointer-events: none;
  background: var(--qr-tape); box-shadow: inset 0 0 0 1px rgba(27, 37, 25, .12);
  clip-path: polygon(0 10%, 3% 0, 97% 4%, 100% 14%, 98% 36%, 100% 62%, 97% 100%, 4% 94%, 1% 70%, 3% 42%);
}
.qr-tl { top: -11px; left: 56px; transform: rotate(-3deg); }
.qr-tr { top: -10px; right: 72px; transform: rotate(2.5deg); }
.qr-nt { top: -11px; left: 50%; margin-left: -44px; transform: rotate(-2deg); width: 76px; }

/* ── the running register (nav) ─────────────────────────────────────────────────────────────── */
.qr-nav {
  position: sticky; top: var(--bar-h, 40px); z-index: 50; height: var(--qr-nav-h);
  display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: center; column-gap: 20px;
  padding-inline: var(--qr-m); background: var(--qr-sage) var(--qr-grain); border-bottom: 1px solid var(--qr-ink);
}
.qr-nav-name { justify-self: start; font: 1.375rem/1 var(--qr-fell); text-decoration: none; padding: 6px 0; }
.qr-cabinet .qr-nav-name { text-decoration: none; }
.qr-folder { min-width: 0; font-size: 1rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.qr-folder-acc { font-family: var(--qr-fell); letter-spacing: .14em; color: var(--qr-madder); }
.qr-folder-lat:not(:empty)::before { content: " · "; font-style: normal; }
.qr-nav-r { justify-self: end; display: flex; align-items: center; gap: 26px; }
.qr-regbtn, .qr-write, .qr-tbtn, .qr-stand {
  font: 1rem/1.2 var(--qr-goudy); color: inherit; background: none; border: 0; padding: 8px 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(27, 37, 25, .5);
  display: inline-flex; align-items: center; gap: 8px;
}
.qr-cabinet .qr-write { text-decoration-color: var(--qr-madder); text-decoration-thickness: 2px; }
.qr-regbtn[aria-expanded="true"] { text-decoration-color: currentColor; }
.qr-drop {
  position: absolute; top: calc(100% + 1px); right: var(--qr-m); z-index: 60;
  width: min(400px, calc(100vw - 32px)); max-height: calc(100svh - var(--bar-h, 40px) - var(--qr-nav-h) - 16px); overflow: auto;
  background: var(--qr-cream); padding: 26px 26px 20px; box-shadow: var(--qr-lift);
}
.qr-drop .qr-kicker { margin-bottom: 10px; }
.qr-drop-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; color: inherit; cursor: pointer; }
.qr-droplist a { display: flex; gap: 14px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--qr-rule); text-decoration: none; }
.qr-cabinet .qr-droplist a, .qr-cabinet .qr-reglist a { text-decoration: none; }
.qr-droplist a:hover .qr-r-name, .qr-reglist a:hover .qr-r-name { text-decoration: underline 1px; text-underline-offset: 4px; }
.qr-r-acc { font-size: .875rem; flex: none; width: 3.4em; }

/* ── QR-A: the title sheet, laid on the cabinet ─────────────────────────────────────────────── */
.qr-a { position: relative; padding-inline: var(--qr-m); }
.qr-hero {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--qr-gut); align-items: start;
  padding-top: 24px; padding-bottom: 8px;
}
.qr-hero-t { grid-column: 1 / 5; display: flex; flex-direction: column; padding-top: 2px; }
.qr-stage { grid-column: 5 / 10; display: flex; justify-content: center; min-width: 0; position: relative; isolation: isolate; }
.qr-hero-r { grid-column: 10 / 13; position: relative; }
.qr-regline { font-size: .875rem; line-height: 1.2; text-transform: uppercase; padding-bottom: 12px; border-bottom: 1px solid var(--qr-ink); }
.qr-h1 { font-weight: 400; margin-top: 16px; }
.qr-h1-name { display: block; font: 400 clamp(4.5rem, 2.2rem + 8.6vw, 10rem)/.86 var(--qr-fell); letter-spacing: -.01em; margin-left: -.045em; }
.qr-h1-line { display: block; margin-top: 22px; font: 400 clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem)/1.08 var(--qr-goudy); text-wrap: balance; }
.qr-stop { color: var(--qr-madder); }
.qr-sub { margin-top: 26px; max-width: 34ch; }
.qr-links { margin-top: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.qr-tlink { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; }
.qr-tlink .qr-ic { margin-top: 2px; }

/* the card: the signature piece's sheet, with two sheets of the quire under it */
.qr-card {
  position: relative; margin: 0; background: var(--qr-cream); box-shadow: var(--qr-shadow);
  width: min(100%, 519px, calc((100svh - var(--bar-h, 40px) - var(--qr-nav-h) - 52px) * 29 / 42)); aspect-ratio: 29 / 42;
}
.qr-card::before, .qr-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #EBE5D0; box-shadow: 0 1px 0 rgba(27, 37, 25, .12), calc(var(--qr-sx) * 8px) 12px 24px -16px rgba(27, 37, 25, .4); }
.qr-card::before { transform: translate(8px, 8px); }
.qr-card::after { transform: translate(16px, 16px); background: #E4DDC6; z-index: -2; }
.qr-poster, .qr-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.qr-poster { z-index: 2; overflow: hidden; pointer-events: none; transition: opacity 240ms ease; }
/* the poster is the canvas's own first frame at this card's shape; any other shape crops round the base */
.qr-poster img { width: 100%; height: 100%; object-fit: cover; object-position: 36% 70%; }
.qr-poster .qr-third { position: absolute; top: -42%; left: 0; width: 300%; max-width: none; height: auto; }
.qr-poster .qr-third.qr-third-r { left: -200%; }
.qr-gl { z-index: 1; display: block; touch-action: pan-y; cursor: grab; outline: none; }
.qr-gl:active { cursor: grabbing; }
.qr-card.qr-live .qr-poster { opacity: 0; }
.qr-card:not(.qr-live) .qr-stamp { background: rgba(247, 243, 230, .9); }
.qr-card:has(.qr-gl:focus-visible) { outline: 2px solid var(--qr-madder); outline-offset: 3px; }
.qr-stamp { position: absolute; top: 16px; right: 16px; z-index: 3; font: .875rem/1 var(--qr-fell); letter-spacing: .14em; color: var(--qr-madder); border: 1.5px solid var(--qr-madder); padding: 6px 6px 4px 9px; }

/* the eight-field letterpress label */
.qr-label {
  position: absolute; right: 14px; bottom: 14px; z-index: 3; width: 214px;
  display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-content: start;
  background: var(--qr-cream-hi); border-top: 2px solid var(--qr-madder); padding: 7px 11px 9px;
  font-size: .8125rem; line-height: 1.24; box-shadow: 0 1px 2px rgba(27, 37, 25, .16), 0 6px 14px -10px rgba(27, 37, 25, .4);
}
.qr-lf { display: contents; }
.qr-lf dt { font: .75rem/1.5 var(--qr-fell); letter-spacing: .12em; text-transform: uppercase; color: var(--qr-ink-72); }
.qr-lf-head dd, .qr-lf-fam dd, .qr-lf-lat dd, .qr-lf-com dd { grid-column: 1 / -1; }
.qr-lf-head dd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.qr-lh { font: .75rem/1.3 var(--qr-fell); letter-spacing: .12em; text-transform: uppercase; color: var(--qr-ink-72); }
.qr-lacc { font: .875rem/1.2 var(--qr-fell); letter-spacing: .12em; color: var(--qr-madder); }
.qr-lh, .qr-lacc { white-space: nowrap; }
.qr-hsheet .qr-lh { letter-spacing: .07em; }
.qr-hsheet .qr-lacc { font-size: .8125rem; letter-spacing: .08em; }
.qr-lf-fam dd { font: .75rem/1.4 var(--qr-fell); letter-spacing: .14em; text-transform: uppercase; }
.qr-lf-lat dd { font-size: clamp(1rem, .9rem + .3vw, 1.125rem); line-height: 1.15; margin: 1px 0 1px; }
.qr-lf-lat dd, .qr-bl-lat dd { font-feature-settings: "kern"; }
.qr-lf-lat dd i + *, .qr-lf-lat dd { font-style: normal; }
.qr-lf-lat dd i { font-style: italic; }
.qr-lf-com dd { margin-bottom: 4px; }
.qr-slim { display: none; }
.qr-bite { animation: qr-bite 140ms ease-out; }
@keyframes qr-bite { from { filter: blur(.8px); opacity: .6; } to { filter: none; opacity: 1; } }
.qr-stampdown { animation: qr-stamp 120ms ease-out; }
@keyframes qr-stamp { from { transform: scale(1.08); opacity: 0; } to { transform: none; opacity: 1; } }

/* the scale (0 to 5 cm at the sheet's size: 1 cm is a 21st of the width) and the colour strip */
.qr-scale { position: absolute; left: 14px; bottom: 20px; z-index: 3; display: flex; width: calc(100% * 5 / 21); height: 6px; border: 1px solid var(--qr-ink); }
.qr-scale i { flex: 1; }
.qr-scale i:nth-child(odd) { background: var(--qr-ink); }
.qr-scale span { position: absolute; top: 7px; font: .6875rem/1 var(--qr-goudy); white-space: nowrap; }
.qr-sc0 { left: -3px; }
.qr-sc5 { right: -14px; }
.qr-strip { position: absolute; left: 14px; bottom: 42px; z-index: 3; display: flex; gap: 3px; }
.qr-strip i { width: 14px; height: 14px; box-shadow: inset 0 0 0 1px rgba(27, 37, 25, .22); }
.qr-strip i:nth-child(1) { background: var(--qr-sage); }
.qr-strip i:nth-child(2) { background: var(--qr-ink); }
.qr-strip i:nth-child(3) { background: var(--qr-madder); }
.qr-strip i:nth-child(4) { background: var(--qr-cream); }
.qr-strip .qr-sw { background: var(--qr-fillc); transition: background-color 700ms ease; }

/* corner tape on the card */
.qr-card .qr-tape { width: 78px; height: 20px; }
.qr-t1 { top: 2px; left: -26px; transform: rotate(-42deg); }
.qr-t2 { top: 2px; right: -26px; transform: rotate(42deg); }
.qr-t3 { bottom: 2px; left: -26px; transform: rotate(42deg); }
.qr-t4 { bottom: 2px; right: -26px; transform: rotate(-42deg); }

/* the product index cards */
.qr-acc { display: inline-block; font-size: .875rem; line-height: 1; border: 1.5px solid var(--qr-madder); padding: 7px 7px 5px 10px; }
.qr-acc-a { position: absolute; top: 0; right: 0; }
.qr-products { display: grid; gap: 8px; padding-top: 44px; }
.qr-products legend { margin-bottom: 10px; font: .875rem/1.2 var(--qr-fell); letter-spacing: .14em; text-transform: uppercase; }
.qr-pc { position: relative; }
.qr-radio { position: absolute; top: 12px; left: 12px; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.qr-pcard {
  display: grid; gap: 1px; min-height: 84px; padding: 10px 14px 11px 16px; cursor: pointer;
  border: 1px solid rgba(27, 37, 25, .3); transition: background-color 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.qr-pcard:hover { border-color: rgba(27, 37, 25, .6); }
.qr-radio:checked + .qr-pcard { background: var(--qr-cream); border-color: transparent; box-shadow: inset 3px 0 0 var(--qr-madder), var(--qr-shadow); }
.qr-radio:focus-visible + .qr-pcard { outline: 2px solid var(--qr-madder); outline-offset: 3px; }
.qr-radio:disabled + .qr-pcard { cursor: default; }
.qr-pc-top { display: flex; align-items: baseline; gap: 10px; }
.qr-pc-acc { font-size: .875rem; }
.qr-pc-name { font: 400 1.3125rem/1.1 var(--qr-fell); }
.qr-pc-shape { font-size: .9375rem; line-height: 1.3; }
.qr-pc-filed { font-size: .9375rem; line-height: 1.3; color: var(--qr-ink); }
.qr-pc-filed i { color: var(--qr-ink); }
.qr-short { display: none; }
.qr-filedcap { display: none; }

/* the live specification */
.qr-spec { width: 100%; margin-top: 30px; border-collapse: collapse; font-size: 1rem; line-height: 1.35; border-top: 1px solid var(--qr-ink); }
.qr-spec th { width: 5.6em; padding: 8px 12px 6px 0; text-align: left; vertical-align: baseline; font: 400 .75rem/1.3 var(--qr-fell); letter-spacing: .16em; text-transform: uppercase; }
.qr-spec td { padding: 6px 0; vertical-align: baseline; }
.qr-spec tr + tr { border-top: 1px solid var(--qr-rule); }
.qr-num { display: inline-block; min-width: 2.6ch; text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.qr-sp-turn .qr-num { min-width: 3.2ch; }
.qr-howto { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-style: italic; font-size: .9375rem; line-height: 1.45; }
.qr-howto .qr-ic { margin-top: 3px; }
.qr-nogl .qr-ic-turn { display: none; }

/* the register, the contents of the cabinet */
.qr-regsheet {
  position: relative; width: min(1064px, 100%); margin: 64px auto 0; padding: 36px var(--qr-pad) calc(var(--qr-over) + 26px);
  background: var(--qr-cream); box-shadow: var(--qr-shadow);
}
.qr-regsheet .qr-kicker { margin-bottom: 14px; }
.qr-reglist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 40px; border-top: 1px solid var(--qr-ink); font-size: 1rem; }
.qr-reglist a { display: flex; align-items: baseline; gap: 10px; padding: 11px 0 9px; border-bottom: 1px solid var(--qr-rule); }
.qr-r-no { font-variant-numeric: lining-nums; }

/* ── the section sheets ─────────────────────────────────────────────────────────────────────── */
.qr-sheet {
  position: relative; width: min(1064px, calc(100% - 2 * var(--qr-side))); margin: calc(var(--qr-over) * -1) auto 0;
  padding: 64px var(--qr-pad) calc(var(--qr-over) + 26px); background: var(--qr-cream); box-shadow: var(--qr-shadow);
}
.qr-sheet::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none; background: linear-gradient(rgba(27, 37, 25, 0), rgba(27, 37, 25, .04)); }
.qr-sheet > .qr-acc { position: absolute; top: 26px; right: var(--qr-pad); }
.qr-foot { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; margin-top: 56px; }
.qr-seclabel { display: grid; grid-template-columns: auto auto; justify-content: space-between; column-gap: 18px; min-width: 214px; padding-top: 6px; border-top: 2px solid var(--qr-madder); font: .75rem/1.45 var(--qr-fell); letter-spacing: .16em; text-transform: uppercase; }
.qr-sl-acc { letter-spacing: .16em; }
.qr-sl-name { grid-column: 1 / -1; }
.qr-catch { font: italic 1.125rem/1 var(--qr-goudy); padding-bottom: 4px; background: linear-gradient(var(--qr-madder), var(--qr-madder)) 0 100% / 100% 1.5px no-repeat; }
.qr-a .qr-foot { margin-top: 30px; }

/* QR-B: how to read a sheet */
.qr-b-grid { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 48px; }
.qr-bl {
  display: grid; grid-template-columns: auto 1fr; column-gap: 20px; row-gap: 4px; align-content: start; min-height: 340px;
  background: var(--qr-cream-hi); border-top: 2px solid var(--qr-madder); padding: 20px 28px 24px;
  box-shadow: 0 1px 0 rgba(27, 37, 25, .1), calc(var(--qr-sx) * 6px) 12px 26px -18px rgba(27, 37, 25, .5);
}
.qr-bl > div { display: contents; }
.qr-bl-head dd, .qr-bl-fam dd, .qr-bl-lat dd, .qr-bl-com dd { grid-column: 1 / -1; }
.qr-bl-head dd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.qr-bl-head .qr-lh { font-size: .8125rem; }
.qr-bl-acc { font: 1.125rem/1 var(--qr-fell); letter-spacing: .12em; color: var(--qr-madder); white-space: nowrap; }
.qr-bl-fam dd { font: .9375rem/1.4 var(--qr-fell); letter-spacing: .16em; text-transform: uppercase; }
.qr-bl-lat dd { font-size: 1.75rem; line-height: 1.15; margin: 4px 0; }
.qr-bl-lat dd i { font-size: 1em; }
.qr-bl-com dd { font-size: 1.1875rem; margin-bottom: 14px; }
.qr-bl-row dt { font: .8125rem/1.9 var(--qr-fell); letter-spacing: .14em; text-transform: uppercase; color: var(--qr-ink-72); white-space: nowrap; }
.qr-bl-row dd { font-size: 1.0625rem; line-height: 1.6; border-bottom: 1px solid var(--qr-rule); }
.qr-bl sup, .qr-keyto li::before, .qr-notes li::before { color: var(--qr-madder); font: .72em/1 var(--qr-goudy); vertical-align: .55em; margin-right: 4px; font-variant-numeric: lining-nums; letter-spacing: 0; text-transform: none; font-style: normal; }
.qr-biglabel figcaption { margin-top: 12px; font-style: italic; font-size: .9375rem; color: var(--qr-ink-72); }
.qr-keyto { counter-reset: qk; border-top: 1px solid var(--qr-ink); font-size: 1rem; }
.qr-keyto li { counter-increment: qk; padding: 9px 0 8px; border-bottom: 1px solid var(--qr-rule); }
.qr-keyto li::before { content: counter(qk); }
.qr-furn { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--qr-rule); font-size: .9375rem; line-height: 1.45; }
.qr-furn li { display: grid; align-content: start; gap: 14px; }
.qr-fx { position: relative; display: flex; align-items: center; height: 34px; }
.qr-fx-tape::before { content: ""; width: 88px; height: 22px; background: var(--qr-tape); box-shadow: inset 0 0 0 1px rgba(27, 37, 25, .12); transform: rotate(-3deg); clip-path: polygon(0 10%, 3% 0, 97% 4%, 100% 14%, 98% 36%, 100% 62%, 97% 100%, 4% 94%, 1% 70%, 3% 42%); }
.qr-fx-scale i { width: 20px; height: 6px; border: 1px solid var(--qr-ink); margin-left: -1px; }
.qr-fx-scale i:nth-child(odd) { background: var(--qr-ink); }
.qr-fx-strip { gap: 3px; }
.qr-fx-strip i { width: 14px; height: 14px; box-shadow: inset 0 0 0 1px rgba(27, 37, 25, .22); }
.qr-fx-strip i:nth-child(1) { background: var(--qr-sage); }
.qr-fx-strip i:nth-child(2) { background: var(--qr-ink); }
.qr-fx-strip i:nth-child(3) { background: var(--qr-madder); }
.qr-fx-strip i:nth-child(4) { background: var(--qr-cream); }
.qr-fx-strip i:nth-child(5) { background: var(--qr-fillc); }
.qr-fx-stamp { width: max-content; height: auto; font: .875rem/1 var(--qr-fell); letter-spacing: .14em; color: var(--qr-madder); border: 1.5px solid var(--qr-madder); padding: 7px 6px 5px 9px; margin-top: 4px; }
.qr-fx-catch { width: max-content; height: auto; margin-top: 8px; font: italic 1.125rem/1 var(--qr-goudy); padding-bottom: 4px; background: linear-gradient(var(--qr-madder), var(--qr-madder)) 0 100% / 100% 1.5px no-repeat; }

/* ── QR-C: the herbarium ────────────────────────────────────────────────────────────────────── */
.qr-herb { margin-top: 44px; }
.qr-hindex { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 18px; border-top: 1px solid var(--qr-ink); }
.qr-hb {
  display: grid; align-content: center; gap: 1px; min-height: 64px; width: 100%; padding: 9px 12px 9px 14px; text-align: left;
  font: inherit; font-size: 1rem; line-height: 1.25; color: inherit; background: none; border: 0; border-bottom: 1px solid var(--qr-rule); cursor: pointer;
}
.qr-cabinet .qr-hb { text-decoration: none; }
.qr-hb-acc { font: .875rem/1.2 var(--qr-fell); letter-spacing: .14em; color: var(--qr-madder); }
.qr-hb-lat { font-size: 1.0625rem; }
.qr-hb-com { font-size: .9375rem; color: var(--qr-ink-72); }
.qr-hb[aria-pressed="true"] { background: var(--qr-cream-hi); box-shadow: inset 3px 0 0 var(--qr-madder); }
.qr-hb:hover .qr-hb-lat { text-decoration: underline 1px; text-underline-offset: 4px; }
.qr-hs { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 48px; scroll-margin-top: calc(var(--bar-h, 40px) + var(--qr-nav-h) + 16px); }
.qr-hsheet { position: relative; margin: 0; aspect-ratio: 29 / 42; background: var(--qr-cream); box-shadow: var(--qr-shadow); }
.qr-hsheet picture, .qr-hsheet img { position: absolute; inset: 0; width: 100%; height: 100%; }
.qr-hsheet img { object-fit: cover; }
.qr-cabinet .qr-half-l { object-position: 0% 50%; }
.qr-cabinet .qr-half-r { object-position: 100% 50%; }
.qr-hsheet::before, .qr-hsheet::after {
  content: ""; position: absolute; z-index: 4; top: -9px; width: 70px; height: 20px; background: var(--qr-tape); box-shadow: inset 0 0 0 1px rgba(27, 37, 25, .12);
  clip-path: polygon(0 10%, 3% 0, 97% 4%, 100% 14%, 98% 36%, 100% 62%, 97% 100%, 4% 94%, 1% 70%, 3% 42%);
}
.qr-hsheet::before { left: 18px; transform: rotate(-4deg); }
.qr-hsheet::after { right: 18px; transform: rotate(3deg); }
.qr-hsheet .qr-label { width: 178px; right: 12px; bottom: 12px; padding: 6px 9px 7px; font-size: .75rem; line-height: 1.22; column-gap: 7px; }
.qr-hsheet .qr-lf-lat dd { font-size: .9375rem; }
.qr-hsheet .qr-label dt, .qr-hsheet .qr-lh, .qr-hsheet .qr-lf-fam dd { font-size: .6875rem; }
.qr-hsheet .qr-stamp { top: 18px; right: 14px; }
.qr-hsheet .qr-scale { left: 12px; bottom: 18px; }
.qr-hnote {
  position: relative; background: var(--qr-cream-hi); padding: 28px 28px 24px; font-size: 1rem; line-height: 1.55;
  box-shadow: 0 1px 0 rgba(27, 37, 25, .1), calc(var(--qr-sx) * 6px) 12px 24px -18px rgba(27, 37, 25, .5);
}
.qr-hn-lat { margin: 4px 0 14px; font-size: 1.0625rem; }
.qr-hnote p + p { margin-top: 10px; }
.qr-rh { font: .75rem/1 var(--qr-fell); letter-spacing: .14em; text-transform: uppercase; color: var(--qr-ink-72); margin-right: .35em; }
.qr-herbhint { margin-top: 18px; font-style: italic; font-size: .9375rem; color: var(--qr-ink-72); }

/* with the script: a squared pile of sheets; reading one slides the sheets above it aside */
.qr-herb.qr-live {
  display: grid; grid-template-columns: [fan] minmax(0, 150px) [stack] minmax(0, 400px) [side] minmax(0, 1fr);
  grid-template-rows: auto 1fr; column-gap: 24px; row-gap: 22px; align-items: start;
}
.qr-live .qr-stack, .qr-live .qr-hs { display: contents; }
.qr-live .qr-hindex { grid-column: side; grid-row: 1; grid-template-columns: 1fr; }
.qr-live .qr-hsheet {
  grid-column: stack; grid-row: 1 / span 2; z-index: calc(20 - var(--d, 0));
  transform: translate(calc(var(--d, 0) * 8px), calc(var(--d, 0) * 8px));
  transition: transform 560ms cubic-bezier(.3, .7, .2, 1) calc(var(--dl, 0) * 60ms), box-shadow 220ms ease calc(var(--dl, 0) * 60ms);
}
.qr-live .qr-hsheet.qr-read { z-index: calc(1 + var(--p, 0)); box-shadow: var(--qr-lift); transform: translate(-62%, calc(var(--p, 0) * 46px)) rotate(-2.5deg); }
.qr-live .qr-hsheet:not(.qr-top) .qr-label, .qr-live .qr-hsheet:not(.qr-top) .qr-scale { visibility: hidden; }
.qr-live .qr-hsheet.qr-read .qr-label, .qr-live .qr-hsheet.qr-read .qr-scale { visibility: visible; }
.qr-live .qr-hsheet.qr-read .qr-stamp { right: auto; left: 14px; }
.qr-live .qr-hsheet.qr-top { cursor: grab; touch-action: pan-y; }
.qr-live .qr-hnote { grid-column: side; grid-row: 2; }
.qr-live .qr-hnote:not(.qr-open) { display: none; }

/* ── QR-D: the concordance ──────────────────────────────────────────────────────────────────── */
.qr-tscroll { margin-top: 36px; overflow-x: auto; }
.qr-conc { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 1rem; line-height: 1.4; }
.qr-conc caption { caption-side: top; text-align: left; padding-bottom: 12px; font-style: italic; font-size: .9375rem; color: var(--qr-ink-72); }
.qr-conc th, .qr-conc td { padding: 16px 14px 14px 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--qr-rule); font-weight: 400; transition: background-color 160ms ease; }
.qr-conc thead th { vertical-align: bottom; padding-bottom: 10px; border-bottom: 1px solid var(--qr-ink); font-size: 1.0625rem; }
.qr-conc thead th:first-child { width: 34%; font: .75rem/1.3 var(--qr-fell); letter-spacing: .16em; text-transform: uppercase; }
.qr-conc th a, .qr-conc th a:hover { text-decoration-color: rgba(27, 37, 25, .35); }
.qr-conc .qr-an, .qr-dist .qr-an { font-size: .8125rem; margin-right: 6px; }
.qr-conc th[scope="row"] { padding-left: 10px; }
.qr-in { font-style: italic; }
.qr-in::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--qr-madder); vertical-align: .12em; }
.qr-out::before { content: ""; display: inline-block; width: 18px; height: 1px; background: rgba(27, 37, 25, .45); vertical-align: .32em; }
.qr-also th, .qr-also td { font-size: .9375rem; color: var(--qr-ink-72); border-bottom: 0; }
.qr-also th i { color: var(--qr-ink); }
.qr-conc tbody tr:not(.qr-also):hover > *, .qr-conc tbody tr:not(.qr-also):focus-within > * { background: var(--qr-cream-hi); }
.qr-conc:has(tbody tr:not(.qr-also):hover) tbody tr:not(:hover) > *, .qr-conc:has(tbody tr:not(.qr-also):focus-within) tbody tr:not(:focus-within) > * { background: rgba(27, 37, 25, .035); }
.qr-swipe { display: none; }
.qr-footline { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--qr-ink); max-width: 64ch; font-style: italic; }

/* ── QR-E: the range ────────────────────────────────────────────────────────────────────────── */
.qr-plate { position: relative; margin-top: 40px; }
.qr-plate img { width: 100%; box-shadow: var(--qr-shadow); }
.qr-plate figcaption, .qr-draw figcaption, .qr-map figcaption, .qr-cap { margin-top: 12px; font-style: italic; font-size: .9375rem; line-height: 1.45; color: var(--qr-ink-72); }
.qr-plate .qr-tape { width: 76px; height: 20px; }
.qr-c1 { top: -4px; left: -22px; transform: rotate(-40deg); }
.qr-c2 { top: -4px; right: -22px; transform: rotate(40deg); }
.qr-plate-ph { position: relative; }
.qr-plate-ph picture { display: block; }
.qr-c3 { bottom: -4px; left: -22px; transform: rotate(40deg); }
.qr-c4 { bottom: -4px; right: -22px; transform: rotate(-40deg); }
.qr-slips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; margin-top: 52px; }
.qr-slip {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 30px 24px 22px; background: var(--qr-cream-hi); font-size: 1rem; line-height: 1.5;
  box-shadow: 0 1px 0 rgba(27, 37, 25, .1), calc(var(--qr-sx) * 6px) 12px 24px -18px rgba(27, 37, 25, .5); scroll-margin-top: calc(var(--bar-h, 40px) + var(--qr-nav-h) + 20px);
}
.qr-slip:nth-child(2) { margin-top: 22px; }
.qr-slip:nth-child(3) { margin-top: 8px; }
.qr-slip-acc { font-size: .875rem; line-height: 1; }
.qr-slip .qr-h3 { font-size: 1.75rem; }
.qr-slip-shape { margin-top: -4px; font-size: .9375rem; color: var(--qr-ink-72); }
.qr-slip-what { font-style: italic; }
.qr-ingr { font-size: .9375rem; line-height: 1.5; }
.qr-ingr-n { font-style: italic; color: var(--qr-ink-72); margin-right: 3px; }
.qr-ingr-n::after { content: ":"; }
.qr-price { display: flex; flex-direction: column; gap: 3px; padding-top: 12px; border-top: 1px solid var(--qr-rule); }
.qr-price-n { font: 1.625rem/1 var(--qr-fell); color: var(--qr-madder); font-feature-settings: "lnum"; }
.qr-price-note { font-style: italic; font-size: .875rem; line-height: 1.35; color: var(--qr-ink-72); }
.qr-stand { align-self: flex-start; }

/* ── QR-F: the key ──────────────────────────────────────────────────────────────────────────── */
.qr-keygrid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 48px; align-items: start; margin-top: 36px; }
.qr-cp { margin-top: 22px; transition: opacity 260ms ease; }
.qr-cp:first-child { margin-top: 0; }
.qr-cp-2 { padding-left: 30px; }
.qr-cp-3 { padding-left: 60px; }
.qr-cp legend { margin-bottom: 4px; font: .75rem/1.4 var(--qr-fell); letter-spacing: .14em; text-transform: uppercase; color: var(--qr-ink-72); }
.qr-cpn { color: var(--qr-madder); margin-right: 8px; }
.qr-leadrow { position: relative; }
.qr-lead { display: flex; align-items: baseline; gap: 10px; min-height: 48px; padding: 11px 6px 10px 0; border-bottom: 1px solid var(--qr-rule); cursor: pointer; font-size: 1rem; line-height: 1.4; }
.qr-lead::before { content: ""; flex: none; align-self: center; width: 10px; height: 10px; border: 1px solid var(--qr-ink); border-radius: 50%; }
.qr-radio:checked + .qr-lead::before { background: var(--qr-madder); border-color: var(--qr-madder); box-shadow: 0 0 0 2px var(--qr-cream), 0 0 0 3px var(--qr-madder); }
.qr-radio:focus-visible + .qr-lead { outline: 2px solid var(--qr-madder); outline-offset: 2px; }
.qr-lead:hover .qr-lt { text-decoration: underline 1px; text-underline-offset: 4px; }
.qr-ln { flex: none; width: 1.8em; font-variant-numeric: lining-nums; }
.qr-lt { flex: 0 1 auto; }
.qr-lg { flex: none; }
.qr-lead .qr-dots { transition: clip-path 260ms ease; }
.qr-js .qr-cp:not(.qr-lit) .qr-dots { clip-path: inset(0 100% 0 0); }
.qr-cp.qr-dim { opacity: .45; }
.qr-det { position: relative; margin-top: 24px; }
.qr-detslip { position: relative; padding: 30px 28px 24px; background: var(--qr-cream-hi); box-shadow: 0 1px 0 rgba(27, 37, 25, .1), calc(var(--qr-sx) * 6px) 12px 24px -18px rgba(27, 37, 25, .5); scroll-margin: 90px 0 24px; }
.qr-det-tag { font: .75rem/1.3 var(--qr-fell); letter-spacing: .14em; text-transform: uppercase; color: var(--qr-ink-72); }
.qr-det-no { margin-top: 10px; font-size: 1.625rem; line-height: 1; }
.qr-detslip .qr-h3 { margin-top: 6px; font-size: 1.375rem; line-height: 1.2; }
.qr-det-empty { margin-top: 12px; font-style: italic; color: var(--qr-ink-72); }
.qr-steps { counter-reset: qs; margin-top: 16px; border-top: 1px solid var(--qr-ink); font-size: 1rem; line-height: 1.45; }
.qr-steps li { counter-increment: qs; position: relative; padding: 10px 0 9px 30px; border-bottom: 1px solid var(--qr-rule); }
.qr-steps li::before { content: counter(qs); position: absolute; left: 2px; top: 8px; font: 1.25rem/1.2 var(--qr-fell); color: var(--qr-madder); }
.qr-total { margin-top: 16px; font: 1.1875rem/1.25 var(--qr-fell); }
.qr-total-note { margin-top: 4px; font-style: italic; font-size: .875rem; color: var(--qr-ink-72); }
.qr-det-btns { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 12px; }

/* ── QR-G: the distribution map ─────────────────────────────────────────────────────────────── */
.qr-g-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 44px; align-items: start; margin-top: 40px; }
.qr-map { margin: 0; }
.qr-mapsvg { display: block; width: 100%; height: auto; overflow: visible; }
.qr-land { fill: none; stroke: var(--qr-ink); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.qr-range { fill: rgba(169, 183, 147, .55); stroke: var(--qr-ink); stroke-width: .75; vector-effect: non-scaling-stroke; transition: opacity 200ms ease; }
#qr-hatch path { stroke: var(--qr-ink); stroke-width: 1.3; }
.qr-mtag { font: 34px/1 var(--qr-fell); letter-spacing: .1em; fill: var(--qr-madder); }
.qr-mwork { font: italic 34px/1 var(--qr-goudy); fill: var(--qr-ink); }
.qr-adl { fill: none; stroke: var(--qr-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.qr-mapsvg[data-hi] .qr-range { opacity: .3; }
.qr-mapsvg[data-hi="1"] [data-h="1"], .qr-mapsvg[data-hi="2"] [data-h="2"], .qr-mapsvg[data-hi="3"] [data-h="3"],
.qr-mapsvg[data-hi="4"] [data-h="4"], .qr-mapsvg[data-hi="5"] [data-h="5"] { opacity: 1; }
.qr-mapsvg[data-hi="1"] .qr-range[data-h="1"], .qr-mapsvg[data-hi="2"] .qr-range[data-h="2"], .qr-mapsvg[data-hi="3"] .qr-range[data-h="3"],
.qr-mapsvg[data-hi="4"] .qr-range[data-h="4"], .qr-mapsvg[data-hi="5"] .qr-range[data-h="5"] { fill: url(#qr-hatch); }
.qr-dist { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.4; }
.qr-dist th, .qr-dist td { padding: 11px 12px 10px 0; text-align: left; vertical-align: baseline; font-weight: 400; border-bottom: 1px solid var(--qr-rule); }
.qr-dist thead th { padding-top: 0; font: .75rem/1.3 var(--qr-fell); letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid var(--qr-ink); }
.qr-dist tbody th { padding-left: 8px; white-space: nowrap; }
.qr-dist tbody tr { cursor: default; outline-offset: -2px; }
.qr-dist tbody tr:hover > *, .qr-dist tbody tr:focus > * { background: var(--qr-cream-hi); }
.qr-gnote { max-width: 44ch; margin-top: 22px; }
.qr-gnote + .qr-gnote { margin-top: 10px; }

/* ── QR-H: the workroom ─────────────────────────────────────────────────────────────────────── */
.qr-h-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 44px; align-items: start; margin-top: 40px; }
.qr-leaf { position: absolute; top: 34px; right: calc(var(--qr-pad) + 150px); width: 40px; height: auto; fill: none; stroke: var(--qr-ink); stroke-width: 1; vector-effect: non-scaling-stroke; transform: rotate(58deg); transform-origin: 50% 50%; opacity: .9; }
.qr-stages { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
.qr-stages th, .qr-stages td { padding: 12px 14px 11px 0; text-align: left; vertical-align: baseline; font-weight: 400; border-bottom: 1px solid var(--qr-rule); }
.qr-stages thead th { padding-top: 0; font: .75rem/1.3 var(--qr-fell); letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid var(--qr-ink); }
.qr-stages tbody th { font: 1.125rem/1.3 var(--qr-fell); white-space: nowrap; }
.qr-stages td:nth-child(3) { white-space: nowrap; }
.qr-stages td:last-child { padding-right: 0; }
.qr-stn { display: inline-block; width: 1.3em; color: var(--qr-madder); font-size: .875rem; }
.qr-batch { display: inline-block; width: 4.6em; border-bottom: 1px solid var(--qr-madder); font: .875rem/1.2 var(--qr-fell); letter-spacing: .1em; color: var(--qr-madder); }
.qr-draw { margin: 28px 0 0; }
.qr-draw svg { display: block; width: 100%; height: auto; }
.qr-vg path, .qr-vg rect, .qr-vg circle, .qr-vbase, .qr-dscale rect { fill: none; stroke: var(--qr-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.qr-vg .qr-vin { stroke-dasharray: 3 4; opacity: .55; }
.qr-dscale .qr-dsw { fill: var(--qr-ink); }
.qr-dnum { font: 19px/1 var(--qr-goudy); fill: var(--qr-ink); }
.qr-dlab { font: 22px/1 var(--qr-fell); letter-spacing: .12em; fill: var(--qr-madder); }

/* ── QR-J: notes ────────────────────────────────────────────────────────────────────────────── */
.qr-notes { counter-reset: qn; columns: 2; column-gap: 52px; margin-top: 36px; border-top: 1px solid var(--qr-ink); }
.qr-notes li { counter-increment: qn; break-inside: avoid; padding: 16px 0 15px; border-bottom: 1px solid var(--qr-rule); }
.qr-nq { margin-bottom: 5px; font: 1.1875rem/1.25 var(--qr-fell); }
.qr-nq::before { content: counter(qn); color: var(--qr-madder); font: .72em/1 var(--qr-goudy); vertical-align: .55em; margin-right: 5px; font-variant-numeric: lining-nums; }

/* ── QR-K: write to us ──────────────────────────────────────────────────────────────────────── */
.qr-k-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 48px; align-items: start; margin-top: 36px; }
.qr-form {
  position: relative; display: grid; gap: 16px; padding: 32px 32px 28px; background: var(--qr-cream-hi);
  box-shadow: 0 1px 0 rgba(27, 37, 25, .1), calc(var(--qr-sx) * 6px) 12px 24px -18px rgba(27, 37, 25, .5);
}
.qr-form-h { padding-bottom: 8px; border-bottom: 2px solid var(--qr-madder); }
.qr-f-row { display: grid; gap: 2px; }
.qr-f-row label { font: .75rem/1.3 var(--qr-fell); letter-spacing: .16em; text-transform: uppercase; color: var(--qr-ink-72); }
.qr-form input, .qr-form select, .qr-form textarea {
  width: 100%; min-height: 48px; padding: 10px 0 7px; font: 1.0625rem/1.45 var(--qr-goudy); color: var(--qr-ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--qr-ink); border-radius: 0; appearance: none;
}
.qr-form textarea { resize: vertical; min-height: 96px; }
.qr-form select { cursor: pointer; padding-right: 28px; background: no-repeat right 4px center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231B2519' stroke-width='1.25'/%3E%3C/svg%3E"); }
.qr-form :is(input, select, textarea):focus-visible { outline: 2px solid var(--qr-madder); outline-offset: 3px; box-shadow: 0 2px 0 var(--qr-madder); }
.qr-takeout { justify-self: start; padding: 6px 0; font-size: .9375rem; }
.qr-f-send { margin-top: 6px; }
.qr-send { min-height: 48px; padding: 13px 28px 11px; font: 1.25rem/1 var(--qr-fell); letter-spacing: .04em; color: var(--qr-cream); background: var(--qr-ink); border: 0; cursor: pointer; }
.qr-send:hover { background: #2A3727; }
.qr-filed { display: inline-block; padding: 10px 12px 8px 14px; font: 1.0625rem/1 var(--qr-fell); letter-spacing: .14em; text-transform: uppercase; color: var(--qr-madder); border: 1.5px solid var(--qr-madder); }
.qr-status { margin-top: 14px; font-style: italic; }
.qr-k-note { margin-top: 18px; max-width: 34ch; font-size: 1rem; color: var(--qr-ink-72); }
.qr-colophon { max-width: 60ch; margin: 64px auto 0; padding-top: 22px; border-top: 1px solid var(--qr-rule); text-align: center; font-style: italic; font-size: .9375rem; line-height: 1.6; }
.qr-finis { padding-top: 4px; font: 1rem/1 var(--qr-fell); letter-spacing: .32em; text-transform: uppercase; color: var(--qr-madder); }

/* ── motion: filed, not animated ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .qr-sheet, .qr-regsheet {
      view-timeline: --qr-leaf block;
      animation: qr-arrive linear both, qr-leave linear both;
      animation-timeline: --qr-leaf, --qr-leaf;
      animation-range: entry 0% entry 40%, exit 30% exit 100%;
    }
    .qr-sheet .qr-catch, .qr-regsheet .qr-catch { animation: qr-underline linear both; animation-timeline: --qr-leaf; animation-range: exit 0% exit 38%; }
  }
  .qr-io .qr-sheet { transition: translate 620ms cubic-bezier(.3, .7, .2, 1); }
  .qr-io .qr-sheet:not(.qr-in) { translate: 24px 0; }
}
@keyframes qr-arrive {
  from { translate: 24px 0; box-shadow: 0 1px 0 rgba(27, 37, 25, .05), calc(var(--qr-sx) * 4px) 7px 14px -8px rgba(27, 37, 25, .19); }
  to { translate: 0 0; }
}
@keyframes qr-leave { to { transform: translateX(-2.5vw); } }
@keyframes qr-underline { from { background-size: 0 1.5px; } to { background-size: 100% 1.5px; } }
@media (prefers-reduced-motion: reduce) {
  .qr-cabinet, .qr-cabinet * { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}

/* ── tablet ─────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .qr-hero { grid-template-areas: "reg reg reg reg reg reg reg reg reg reg reg reg" "h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1" "card card card card card card card side side side side side" "sub sub sub sub sub sub sub links links links links links"; }
  .qr-hero-t { display: contents; }
  .qr-regline { grid-area: reg; }
  .qr-h1 { grid-area: h1; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 28px; margin: 14px 0 26px; }
  .qr-h1-line { margin-top: 12px; }
  .qr-stage { grid-area: card; justify-content: flex-start; }
  .qr-card { width: min(100%, calc((100svh - var(--bar-h, 48px) - var(--qr-nav-h) - 40px) * 29 / 42)); }
  .qr-hero-r { grid-area: side; }
  .qr-sub { grid-area: sub; margin-top: 36px; }
  .qr-links { grid-area: links; margin-top: 40px; }
  .qr-reglist { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); }
  .qr-b-grid { grid-template-columns: minmax(0, 1fr); }
  .qr-biglabel { max-width: 560px; }
  .qr-furn { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .qr-herb.qr-live { grid-template-columns: [stack] minmax(0, 1fr) [side] minmax(0, 1fr); }
  .qr-slips { grid-template-columns: minmax(0, 1fr); max-width: 620px; gap: 22px; }
  .qr-slip:nth-child(n) { margin-top: 0; }
  .qr-slip:nth-child(2) { margin-left: 24px; }
  .qr-keygrid, .qr-k-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .qr-det { max-width: 560px; }
  .qr-leaf { display: none; }
}
@media (max-width: 900px) {
  .qr-g-grid, .qr-h-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .qr-map { max-width: 560px; }
  .qr-notes { columns: 1; }
}

/* ── phone ──────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .spec-quire { --qr-nav-h: 48px; --qr-over: 24px; }
  .qr-nav { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; }
  .qr-folder { text-align: left; }
  .qr-folder-name, .qr-folder-lat, .qr-write { display: none; }
  .qr-kicker, .qr-regline { font-size: .8125rem; }
  .qr-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "reg" "h1" "card" "prod" "cap" "spec" "how" "sub" "links"; padding-top: 14px; }
  .qr-hero-r { display: contents; }
  .qr-acc-a { display: none; }
  .qr-regline { padding-bottom: 8px; white-space: nowrap; }
  .qr-h1 { display: block; margin: 10px 0 16px; }
  .qr-h1-line { margin-top: 8px; }
  .qr-stage { justify-self: stretch; }
  .qr-card { width: 100%; aspect-ratio: 3 / 4; }
  .qr-card::before { transform: translate(5px, 5px); }
  .qr-card::after { transform: translate(10px, 10px); }
  .qr-card .qr-tape { width: 60px; height: 18px; }
  .qr-t1, .qr-t3 { left: -20px; }
  .qr-t2, .qr-t4 { right: -20px; }
  .qr-stamp { font-size: .75rem; top: 12px; right: 12px; }
  .qr-card .qr-label { width: 172px; right: 10px; bottom: 10px; padding: 5px 8px 6px; font-size: .6875rem; line-height: 1.2; column-gap: 6px; }
  .qr-card .qr-label dt, .qr-card .qr-lh { font-size: .625rem; letter-spacing: .1em; }
  .qr-card .qr-lf-fam dd { font-size: .625rem; }
  .qr-card .qr-lacc { font-size: .75rem; }
  .qr-card .qr-lf-lat dd { font-size: .875rem; }
  .qr-card .qr-lf-com dd { margin-bottom: 2px; }
  .qr-card .qr-scale { left: 10px; bottom: 16px; }
  .qr-card .qr-strip { left: 10px; bottom: 36px; }
  .qr-products { grid-area: prod; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding-top: 20px; }
  .qr-products legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .qr-pc + .qr-pc .qr-pcard { border-left: 0; }
  .qr-pcard { min-height: 52px; align-content: center; padding: 8px 10px; }
  .qr-pc-top { gap: 6px; flex-wrap: wrap; }
  .qr-pc-name { font-size: 1.125rem; }
  .qr-pc-shape, .qr-pc-filed { display: none; }
  .qr-long { display: none; }
  .qr-short { display: inline; }
  .qr-filedcap { grid-area: cap; display: block; margin-top: 10px; font-style: italic; font-size: .9375rem; color: var(--qr-ink); }
  .qr-filedcap i { color: var(--qr-ink); }
  .qr-spec { grid-area: spec; display: block; margin-top: 14px; border-bottom: 1px solid var(--qr-rule); }
  .qr-spec tbody { display: flex; flex-wrap: wrap; }
  .qr-spec tr, .qr-spec tr + tr { display: block; border: 0; }
  .qr-spec th, .qr-sp-light, .qr-sp-t { display: none; }
  .qr-spec td { display: block; padding: 8px 0 7px; }
  .qr-spec tr:not([hidden]) ~ tr td::before { content: "·"; margin: 0 .55em; }
  .qr-howto { grid-area: how; margin-top: 12px; }
  .qr-sub { grid-area: sub; margin-top: 22px; }
  .qr-links { grid-area: links; margin-top: 16px; }
  .qr-regsheet { margin-top: 44px; }
  .qr-reglist { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .qr-r-no, .qr-reglist .qr-dots { display: none; }
  .qr-sheet { padding-top: 56px; }
  .qr-tl { left: 28px; }
  .qr-tr { right: 40px; }
  .qr-tape { width: 64px; height: 18px; }
  .qr-sheet > .qr-acc { top: 18px; }
  .qr-h2 { padding-right: 0; }
  .qr-foot { margin-top: 44px; }
  .qr-furn { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .qr-furn li { grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 14px; }
  .qr-bl { padding: 16px 16px 18px; min-height: 0; column-gap: 12px; }
  .qr-bl-lat dd { font-size: 1.375rem; }
  .qr-bl-row dt { white-space: normal; line-height: 1.5; padding-top: 3px; }
  /* herbarium: a sticky strip of tabs, one sheet at a time */
  .qr-hindex { grid-template-columns: minmax(0, 1fr); }
  .qr-hs { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .qr-herb.qr-live { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: 18px; }
  .qr-live .qr-hindex {
    grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--bar-h, 48px) + var(--qr-nav-h)); z-index: 30;
    display: flex; overflow-x: auto; margin-inline: calc(var(--qr-pad) * -1); padding-inline: var(--qr-pad); background: var(--qr-cream); scrollbar-width: none;
  }
  .qr-live .qr-hindex li { flex: none; }
  .qr-live .qr-hb { min-height: 48px; padding: 6px 12px 5px; border-bottom: 1px solid var(--qr-rule); }
  .qr-live .qr-hb .qr-hb-lat { display: none; }
  .qr-live .qr-hsheet { grid-column: 1; grid-row: 2; }
  .qr-live .qr-hsheet.qr-read { transform: translate(calc(-100% - var(--qr-pad) - var(--qr-side) + 10px), 0) rotate(-2.5deg); }
  .qr-live .qr-hnote { grid-column: 1; grid-row: 3; }
  .qr-hsheet .qr-label { width: 170px; right: 10px; bottom: 10px; padding: 5px 8px 6px; font-size: .6875rem; line-height: 1.2; column-gap: 6px; }
  .qr-hsheet .qr-label dt, .qr-hsheet .qr-lh, .qr-hsheet .qr-lf-fam dd { font-size: .625rem; letter-spacing: .1em; }
  .qr-hsheet .qr-lf-lat dd { font-size: .875rem; }
  .qr-hsheet .qr-stamp { font-size: .75rem; top: 14px; right: 12px; }
  .qr-hnote { padding: 24px 18px 20px; }
  .qr-conc { width: 612px; }
  .qr-conc thead th:first-child { width: 132px; }
  .qr-conc th[scope="row"], .qr-conc thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--qr-cream); }
  .qr-conc th[scope="row"] { padding-left: 4px; box-shadow: 1px 0 0 var(--qr-rule); }
  .qr-swipe { display: block; margin-top: 10px; font-style: italic; font-size: .9375rem; color: var(--qr-ink-72); }
  .qr-plate .qr-tape { width: 54px; height: 16px; }
  .qr-c1, .qr-c3 { left: -16px; }
  .qr-c2, .qr-c4 { right: -16px; }
  .qr-slip:nth-child(2) { margin-left: 0; }
  .qr-slip { padding: 26px 18px 20px; }
  .qr-cp-2 { padding-left: 14px; }
  .qr-cp-3 { padding-left: 28px; }
  .qr-lead { font-size: .9375rem; gap: 8px; }
  .qr-ln { width: 1.6em; }
  .qr-detslip { padding: 26px 18px 20px; }
  .qr-dist tbody th { white-space: normal; }
  .qr-stages thead { display: none; }
  .qr-stages, .qr-stages tbody, .qr-stages tr, .qr-stages th, .qr-stages td { display: block; }
  .qr-stages tr { padding: 12px 0 10px; border-bottom: 1px solid var(--qr-rule); }
  .qr-stages th, .qr-stages td { padding: 2px 0; border: 0; }
  .qr-stages td:nth-child(3), .qr-stages td:nth-child(4) { display: inline-block; margin-right: 14px; }
  .qr-form { padding: 28px 18px 22px; }
  .qr-colophon { margin-top: 48px; }
}

/* ── a short phone: the name, the promise, the bottle and the choice make the whole first screen */
@media (max-width: 700px) and (max-height: 640px) {
  .spec-quire { --qr-nav-h: 44px; }
  .qr-hero { grid-template-areas: "h1" "card" "prod" "cap" "spec" "how" "sub" "links" "reg"; padding-top: 6px; }
  .qr-regline { display: none; }
  .qr-h1 { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 14px; margin: 0 0 8px; }
  .qr-h1-name { font-size: 3rem; line-height: .86; }
  .qr-h1-line { margin: 0 0 1px; font-size: 1.0625rem; line-height: 1.12; }
  .qr-card { aspect-ratio: auto; height: max(250px, calc(100svh - var(--bar-h, 44px) - var(--qr-nav-h) - 52px - 8px - 44px - 30px)); }
  .qr-card .qr-label, .qr-card .qr-scale, .qr-card .qr-strip { display: none; }
  .qr-slim { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; justify-content: space-between; gap: 10px; padding: 6px 12px 6px; background: var(--qr-cream-hi); border-top: 2px solid var(--qr-madder); font-size: .75rem; line-height: 1.2; white-space: nowrap; }
  .qr-slim span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .qr-t3, .qr-t4 { display: none; }
  .qr-products { padding-top: 8px; }
  .qr-products legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .qr-pcard { min-height: 44px; padding: 5px 8px; }
  .qr-live .qr-hsheet { width: min(100%, calc((100svh - var(--bar-h, 44px) - var(--qr-nav-h) - 72px) * 29 / 42)); justify-self: center; }
}

/* figures: lining everywhere, so accession numbers and sheet counts read H-01 and 1 of 10, never H-o1 or I of IO.
   Set from the cabinet's id so it outranks every font shorthand above (a shorthand resets the numeric variant). */
#qr-top, #qr-top *, #qr-top *::before, #qr-top *::after { font-variant-numeric: lining-nums; }
#qr-top .qr-num { font-variant-numeric: tabular-nums lining-nums; }