/* ── IDENTICAL :root to index.html ── */
:root { --ink: #111111; --muted: #595959; --line: #1e1e1e; --purple: #000000; --green: #000000; --panel: #ffffff; --soft: #fafafa;
/* Type faces now match geneticdesigner.io's elevation pass: Inter (chrome/body),
JetBrains Mono (ids, prices, figures), EB Garamond loaded but not applied by
default — the operator's call: "i liked the sans serif". This DOES cost three
webfonts; the previous comment claiming none is no longer true. */
--ui: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--serif: "EB Garamond", Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, "Times New Roman", serif;
/* 8pt-ish rhythm scale (additive — use on new/adjusted rules) */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; }
* { box-sizing: border-box; }
/* ── MONOCHROME STATE SYSTEM (keyboard a11y + selection) ── */
::selection { background: var(--ink); color: #fff; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 1px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }
/* Declares Inter because Inter is what RENDERS. /game/game.css loads after this block on
every page here and sets the body face, so the mono/system stacks these files used to
name had not painted a pixel in months — the source said one thing and the browser did
another. Measured 2026-09-04 across the whole lane: 6 pages declared a face that never
rendered. Inter is the operator's own call, recorded in registry.html's type comment
("i liked the sans serif"); JetBrains Mono stays for FIGURES. Changing a dead
declaration to the live one is zero-visual-change by construction — verified against a
computed-style signature of 60 elements per page, before and after. */
html, body { background: #ffffff; color: var(--ink); min-height: 100vh; font-family: var(--ui); display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0; }
main { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 10px; padding-bottom: 200px; }
.frame { width: 900px; max-width: 98vw; border: 1px solid var(--line); padding: 20px; overflow-x: hidden; background: #fff; }
/* ── BANNER + HEADER (from index.html) ── */
.banner-wrap { display: flex; justify-content: center; overflow: hidden; width: 100%; }
.banner { margin: 1.5rem 0; color: var(--ink); font-size: min(0.55vw, 13.5px); line-height: 1.1; text-align: center; white-space: pre; width: 100%; letter-spacing: -0.02em; overflow-x: auto; }
/* ── SEARCH (from index.html) ── */
.search-wrap { margin: 10px 0 0 0; border: 1px solid var(--line); background: var(--soft); display: flex; align-items: center; padding: 8px; gap: 10px; width: 100%; }
.search-label { color: #000; font-weight: bold; font-size: 10px; white-space: nowrap; }
#tuiSearch { background: none; border: none; color: var(--ink); font-family: inherit; font-size: 11px; width: 100%; outline: none; text-transform: uppercase; }
/* ── KINGDOM BAR (from index.html) ── */
.kingdom-bar { display: flex; gap: 6px; padding: 8px 0 0 0; margin-bottom: 0; }
.kingdom-btn { background: var(--soft); border: 1px solid var(--line); color: var(--muted); font-family: inherit; font-size: 10px; cursor: pointer; padding: 4px 12px; font-weight: normal; text-transform: uppercase; }
.kingdom-btn.active { background: #000; color: #fff; border-color: #000; font-weight: bold; }
.kingdom-btn:hover:not(.active) { border-color: #000; color: #000; }
.kingdom-btn, .filter-btn { transition: all 0.12s ease; }
/* ── SEARCH DROPDOWN (registry-only) ── */
#searchResults {
position: absolute;
z-index: 200;
background: #fff;
border: 1px solid var(--line);
border-top: none;
width: 100%;
left: 0;
top: 100%;
max-height: 240px;
overflow-y: auto;
display: none;
}
#searchResults.open { display: block; }
#searchWrap { position: relative; }
.search-result-item {
display: block;
padding: 5px 10px;
font-size: 10px;
cursor: pointer;
border-bottom: 1px solid #eee;
color: var(--ink);
text-decoration: none;
text-transform: uppercase;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--soft); }
.search-result-meta { font-size:9px; color: var(--muted); margin-left: 6px; }
/* ── SEPARATOR between header and registry content ── */
.registry-divider {
border-top: 1px solid var(--line);
margin: 14px 0 20px 0;
}
/* ── BREADCRUMB ── */
.breadcrumb {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
margin-bottom: 16px;
letter-spacing: 0.04em;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb span { color: var(--ink); }
/* ── STRAIN HEADER SECTION ── */
.strain-header {
border-bottom: 2px solid var(--line);
padding-bottom: 14px;
margin-bottom: 20px;
}
.strain-name-line {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
/* THE CULTIVAR'S NAME IS THE SUBJECT OF THE PAGE. At 22px it sat a hair above body text
and level with the section labels, so the page read as a form rather than a record.
Scales with the viewport and stops growing on a wide screen. */
.strain-name {
font-size: clamp(30px, 4.6vw, 54px);
font-weight: 900;
color: var(--ink);
line-height: 1.02;
letter-spacing: -0.035em;
text-transform: uppercase;
}
/* ── THE LEAD PHOTOGRAPH ──────────────────────────────────────────────────────────────
The photo record sat SECOND TO LAST, after citations, ~1,400px down and inside a
collapsed accordion: a $99 product whose picture a reader had to go looking for. The
best photograph now opens the record, full column width, and is removed from the strip
below so it is not shown twice. Pages with no photograph are unchanged - nothing is
invented to fill the space. */
.record-hero {
margin: 0 0 22px;
border: 1px solid var(--line);
background: var(--soft);
overflow: hidden;
}
/* THE WHOLE PHOTOGRAPH. Operator 2026-09-14: "the main photo is cropped at the top because its probably
a taller photo and the bud is clipped". A fixed-height band with object-fit: cover showed 28-36% of a
portrait photograph's height at desktop width and 65-83% on a phone (measured on production:
vx1000, og-garlic-breath, anthomancer). The photograph keeps its own proportions now, capped in
height and centred on the soft ground, and a click opens it full size. */
.record-hero img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: min(72vh, 640px);
margin: 0 auto;
}
.record-hero figcaption {
font-size: 9px;
color: #595959;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 7px 10px;
border-top: 1px solid var(--line);
background: #fff;
}
.tier-badge {
display: inline-block;
border: 1px solid var(--line);
font-size:9px;
font-weight: bold;
padding: 2px 7px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
background: var(--soft);
vertical-align: middle;
white-space: nowrap;
}
.tier-badge.catalog { background: var(--ink); color: #fff; border-color: var(--ink); }
.breeder-line {
font-size: 10px;
color: var(--muted);
text-transform: uppercase;
margin-top: 5px;
letter-spacing: 0.06em;
}
.breeder-line strong { color: var(--ink); }
.header-cta {
margin-top: 12px;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.cta-price {
font-size: 18px;
font-weight: 900;
color: var(--ink);
}
.cta-buy-btn {
background: var(--ink);
color: #fff;
border: none;
font-family: inherit;
font-size: 10px;
font-weight: bold;
padding: 6px 18px;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.08em;
text-decoration: none;
}
.cta-buy-btn:hover { opacity: 0.82; }
.registry-label {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.1em;
border: 1px solid var(--line);
padding: 3px 8px;
background: var(--soft);
}
/* ── REFERENCE PAGE BG MODIFIER ── */
.frame.reference-page { border-left: 2px solid var(--line); }
/* ── BODY SECTIONS ── */
.reg-section {
margin-bottom: 20px;
border: 1px solid var(--line);
background: #fff;
}
.reg-section-header {
background: var(--soft);
border-bottom: 1px solid var(--line);
padding: 6px 12px;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink);
display: flex;
justify-content: space-between;
align-items: center;
}
/* The section labels are as of 2026-09-04 (they were ). The sections
were already accessible — each is a , so a screen reader
announced the region by name — but the DOCUMENT OUTLINE was two h1s and nothing beneath,
on the registry's most-indexed page type. Promoting the label serves the outline and keeps
the aria-labelledby wiring pointing at the same ids.
This rule exists only to strip the UA's h2 defaults so the header renders identically to
the span it replaced: the h2 must inherit the .reg-section-header font, not impose its
own size, weight or margins.
Two shared rules have to be beaten for the h2 to look like the span it replaced, both
found by asking the browser which rules matched rather than by guessing:
· game.css declares `h2, .sec-title, .kingdom-title { font-size:16px !important }`
· a mobile legibility floor, `body :where(p,span,div,a,...) { font-size:max(12px,1em) }`,
lifts the header's own 9px to 15px on a phone — and `h2` is NOT in that :where() list,
so an h2 there would sit at 16px against the span's 15px.
Hence `font-size: inherit !important` at (0,2,0) specificity: equal importance, higher
specificity, and inheriting from .reg-section-header means the label tracks the header at
whatever size that floor settles on, at every viewport, instead of pinning a number here. */
.reg-section-header .reg-section-title {
margin: 0; font-size: inherit !important; font-weight: inherit; letter-spacing: inherit;
line-height: inherit; color: inherit; text-transform: inherit; font-family: inherit;
}
.reg-section-body {
padding: 12px;
font-size: 10.5px;
line-height: 1.5;
color: var(--ink);
}
/* ── Collapsible section (progressive disclosure) — science folds away by default;
the summary keeps the basic takeaway visible, tap to reveal the depth. ── */
details.reg-fold { margin-bottom: 20px; border: 1px solid var(--line); background: #fff; }
details.reg-fold > summary { list-style: none; cursor: pointer; background: var(--soft); padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
details.reg-fold > summary::-webkit-details-marker { display: none; }
details.reg-fold > summary .rf-title { font-size: 9px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); white-space: nowrap; }
details.reg-fold > summary .rf-hint { font-size: 10px; color: var(--muted); text-align: right; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.reg-fold > summary::after { content: '+'; color: var(--green); font-weight: bold; font-size: 13px; margin-left: 8px; }
details.reg-fold[open] > summary::after { content: '–'; }
details.reg-fold[open] > summary { border-bottom: 1px solid var(--line); }
details.reg-fold[open] > summary .rf-hint { color:#595959; }
/* ── PARENTAGE ── */
.parentage-line {
font-size: 13px;
font-weight: bold;
letter-spacing: -0.01em;
}
.parent-link {
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--line);
}
.parent-link:hover { border-bottom-color: var(--ink); }
.parent-sep {
color: var(--muted);
font-size: 12px;
padding: 0 6px;
}
.provenance-badge {
display: inline-block;
font-size:9px;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 1px 5px;
border: 1px solid var(--line);
color: var(--muted);
vertical-align: middle;
margin-left: 6px;
white-space: nowrap;
}
.provenance-badge.decreed { border-color: var(--ink); color: var(--ink); }
/* ── CHIPS ── */
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 6px;
}
.chip {
display: inline-block;
border: 1px solid var(--line);
font-size: 9px;
padding: 2px 7px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.chip a { color: var(--muted); text-decoration: none; }
.chip a:hover { color: var(--ink); }
.chip.for-sale { border-color: var(--ink); color: var(--ink); font-weight: bold; }
.chip.for-sale a { color: var(--ink); }
.chip-label {
font-size:9px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
margin-top: 6px;
display: block;
}
/* ── LEAN LABEL ── */
.lean-label {
display: inline-block;
border: 1px solid var(--line);
font-size:9px;
padding: 2px 8px;
color: var(--ink);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 8px;
}
/* ── THE INDICA / SATIVA LINE (operator 2026-09-08: "maybe charts (the indica/sativa% line
from gd is cool)"). Drawn from pedigree_analysis.indica_pct, which is derived from the
pedigree — so it is a READING of the lineage, not a lab result, and the caption says so.
No bar is drawn when there is no number: an even 50/50 default would be a fabricated fact. */
.lean-wrap { margin-top: 12px; }
.lean-bar { display: flex; height: 12px; border: 1px solid var(--line); overflow: hidden; background: #fff; }
.lean-bar i { display: block; height: 100%; }
.lean-bar .i { background: #2f2f2f; }
.lean-bar .s { background: #d8d8d8; }
.lean-ends { display: flex; justify-content: space-between; margin-top: 5px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lean-ends b { color: var(--ink); font-weight: 700; }
.lean-note { font-size: 12px; color: var(--muted); margin-top: 4px; }
/* THE ANCESTRY IS THE WHOLE ANCESTRY. It showed pedigree_analysis.dominant_ancestry, which is
capped at four names — operator: "its simply not exhaustive when it lists the ancestry not
sure why it only shows a limited # of strains". 3RD Coast has 73. They are ordered by
Wright influence (the share of the plant each ancestor accounts for), which is why Cherry
Pie Kush leads Girl Scout Cookies unprompted, and the deeper ones stay behind a control
rather than burying the page. */
.anc-grid { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.anc { display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid var(--line); padding: 4px 9px; font-size: 15px; color: var(--ink); text-decoration: none; }
.anc:hover { border-color: var(--ink); background: var(--soft); }
.anc em { font-style: normal; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.anc-more { background: var(--soft); border: 1px solid var(--line); font: inherit; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 7px 12px; margin-top: 9px; cursor: pointer; }
.anc-more:hover { border-color: var(--ink); }
.anc-rest { display: none; }
.anc-rest.open { display: flex; }
.depth-note { font-size: 13px; color: var(--muted); margin-top: 8px; }
/* ── ANCESTRY TREE ── */
.ancestry-toggle {
background: var(--soft);
border: 1px solid var(--line);
font-family: inherit;
font-size: 9.5px;
color: var(--ink);
cursor: pointer;
padding: 5px 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: bold;
display: block;
width: 100%;
text-align: left;
}
.ancestry-toggle:hover { background: #f0f0f0; }
/* ── UPOV TG/276 SPEC SHEET STYLES ── */
.upov-meta { padding: 8px 0 12px; border-bottom: 1px solid #eee; margin-bottom: 12px; font-size: 10px; }
.upov-meta b { font-size: 13px; }
.upov-pct { color: var(--ink); }
.upov-tier { display: inline-block; margin-left: 8px; padding: 2px 8px; font-size:9px;
letter-spacing: 1.5px; text-transform: uppercase; background: #f3f3f3; }
.upov-tier-UPOV-grade { background: var(--ink); color: #fff; }
.upov-tier-comprehensive { background: var(--ink); color: #fff; }
.upov-tier-substantial { background: #595959; color: #fff; }
.upov-tier-partial { background: #aaa; color: var(--ink); }
.upov-tier-incomplete-record { background: #eee; color: var(--muted); }
.upov-count { margin-left: 8px; color: var(--muted); font-size: 9.5px; }
.upov-group { margin: 10px 0; }
.upov-group h4 { font-size: 9.5px; letter-spacing: 2.5px; margin: 0 0 4px; padding-bottom: 3px;
border-bottom: 1px solid var(--line); color: var(--ink); text-transform: uppercase; }
.upov-table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.upov-table td { padding: 3px 6px; border-bottom: 1px dotted #ddd; vertical-align: top; }
.upov-table .upov-did { font-size: 9px; color: var(--muted); width: 70px; }
.upov-table .upov-name { width: 50%; }
.upov-table .upov-val b { color: var(--ink); }
.upov-code { font-size: 9px; color: var(--muted); }
/* Confidence-basis pill — honest provenance per descriptor */
.upov-basis { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size:9px;
letter-spacing: 1px; text-transform: uppercase; vertical-align: middle;
border: 1px solid currentColor; opacity: 0.85; }
.upov-basis-lab-tested { color: #111; background: #e6e6e6; border-color:#111; font-weight:bold; }
.upov-basis-operator-observation { color: #111; background: #f3f3f3; }
.upov-basis-approximate { color: #595959; background: #fafafa; border-style:dashed; }
.upov-basis-breeder-claim { color: #595959; background: #fafafa; }
.upov-basis-text-extracted { color: #595959; background: #fafafa; }
.upov-basis-documented-pedigree { color: #111; background: #f3f3f3; }
/* Family wayfinding chips above strain title */
.family-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; font-size: 10px; }
.family-chips .label { color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; padding-top: 2px; }
.family-chips a { display: inline-block; padding: 3px 9px; border: 1px solid var(--ink); background: #fff;
color: var(--ink); text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px;
font-weight: bold; transition: background 0.12s; }
.family-chips a:hover { background: var(--ink); color: #fff; }
.upov-null { color:#595959; font-style: italic; font-size: 9.5px; }
.upov-ext { font-size:9px; background: var(--ink); color: #fff; padding: 1px 3px;
margin-left: 2px; vertical-align: top; letter-spacing: 1px; }
.upov-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid #eee;
font-size: 9px; color: var(--muted); font-style: italic; }
#ancestryTreeContainer {
display: none;
min-height: 600px;
border-top: 1px solid var(--line);
overflow: hidden;
position: relative;
}
#ancestryTreeContainer.open { display: block; }
#ancestryTree { width: 100%; display: block; }
/* Floating zoom HUD — minimalist top-right corner */
.lineage-hud {
position: absolute; top: 12px; right: 12px;
display: flex; flex-direction: column; gap: 4px; z-index: 5;
}
.lineage-hud button {
width: 30px; height: 30px; background: #fff; border: 1px solid var(--ink);
color: var(--ink); font-family: inherit; font-size: 14px; font-weight: bold;
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background 0.12s, color 0.12s;
}
.lineage-hud button:hover { background: var(--ink); color: #fff; }
@media (pointer: coarse) {
/* 30px is under the 44px touch minimum. Growing the button alone would make the
4px gap a 10px overlap, so the gap grows with it: 44 + 8 = 52px pitch. */
.lineage-hud { gap: 8px; }
.lineage-hud button { width: 44px; height: 44px; font-size: 17px; }
}
/* ── DESCENDANTS / HALF-SIBLINGS ── */
.desc-list { list-style: none; margin: 0; padding: 0; }
.desc-list li { border-bottom: 1px solid #eee; padding: 5px 0; font-size: 10px; }
.desc-list li:last-child { border-bottom: none; }
.desc-list a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
.desc-list a:hover { border-bottom-color: var(--line); }
.desc-count { color: var(--muted); font-size:9px; margin-left: 6px; }
.load-more-btn {
background: var(--soft);
border: 1px solid var(--line);
font-family: inherit;
font-size: 9px;
font-weight: bold;
color: var(--ink);
cursor: pointer;
padding: 5px 14px;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 8px;
display: none;
}
.load-more-btn:hover { background: var(--ink); color: #fff; }
.load-more-btn.visible { display: inline-block; }
.half-sib-side { margin-bottom: 12px; }
.half-sib-label {
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
color: var(--muted);
letter-spacing: 0.08em;
border-bottom: 1px solid var(--line);
padding-bottom: 4px;
margin-bottom: 6px;
}
/* ── CHARACTER ── */
.character-block { display: flex; flex-direction: column; gap: 6px; }
.char-row { display: flex; align-items: flex-start; gap: 8px; font-size: 10px; }
.char-label { flex: 0 0 80px; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; padding-top: 2px; }
.char-value { color: var(--ink); font-size: 10.5px; }
.char-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.char-chip { display: inline-block; padding: 2px 7px; border: 1px solid var(--line); background: #fafafa; color: var(--ink); font-size: 9.5px; border-radius: 2px; }
.char-chip-dashed { border-style: dashed; background: transparent; }
/* ── DESCRIPTION (two-tier type: prose set in serif "read", data stays mono) ── */
.description-text{ font-family: var(--serif); font-size: 14px; line-height: 1.72; color: var(--ink); white-space: pre-wrap; letter-spacing: 0; max-width:70ch; /* was ~129 characters a line */}
.description-text sup { font-family: var(--mono); font-size: 9px; color: var(--muted); vertical-align: super; }
.description-fallback{ font-family: var(--serif); font-size: 14px; line-height: 1.72; color: var(--muted); font-style: italic; max-width:70ch; /* was ~129 characters a line */}
/* ── CITATIONS ── */
.citation-list { list-style: none; margin: 0; padding: 0; font-size: 9.5px; line-height: 1.7; color: var(--muted); }
.citation-list li { margin-bottom: 4px; }
.citation-list .cit-num { color: var(--ink); font-weight: bold; margin-right: 4px; }
.citation-list a { color: var(--muted); text-decoration: underline; word-break: break-all; }
.citation-list a:hover { color: var(--ink); }
/* ── PHOTO GALLERY ── */
.photo-gallery { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.photo-gallery img { max-width: 220px; max-height: 180px; border: 1px solid var(--line); object-fit: cover; }
/* photographs (not a breeder's mark, which must never be cropped) sit in an even grid and open on click */
.photo-gallery.is-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.photo-gallery a.photo-open, .record-hero a.photo-open { display: block; cursor: zoom-in; }
.photo-gallery a.photo-open img { display: block; width: 100%; max-width: none; max-height: none; aspect-ratio: 1; height: auto; }
.photo-gallery a.photo-open:focus-visible, .record-hero a.photo-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* ── PHOTO VIEWER ── the whole photograph, on dark, over the page */
.photo-viewer { padding: 0; border: 0; margin: 0; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; background: transparent; overflow: hidden; }
.photo-viewer::backdrop { background: rgba(10, 10, 10, 0.9); }
.photo-viewer .pv-fig { margin: 0; height: 100%; box-sizing: border-box; padding: 60px 12px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; pointer-events: none; }
.photo-viewer .pv-img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100% - 40px); object-fit: contain; pointer-events: auto; }
.photo-viewer .pv-cap { color: #f2f2f2; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; }
.photo-viewer .pv-btn { position: absolute; min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.photo-viewer .pv-close { top: 8px; right: 8px; }
.photo-viewer .pv-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.photo-viewer .pv-next { right: 8px; top: 50%; transform: translateY(-50%); }
.photo-viewer .pv-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* ── PRICE BLOCK ── */
.price-block { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.price-block .price-figure { font-size: 22px; font-weight: 900; color: var(--ink); }
.price-block .seed-type-tag { font-size: 9px; color: var(--muted); text-transform: uppercase; border: 1px solid var(--line); padding: 2px 7px; }
.price-block .stock-tag { font-size: 9px; color: var(--ink); text-transform: uppercase; font-weight: bold; }
/* ── LOADING / ERROR STATES ── */
#loadingState {
text-align: center;
padding: 60px 0;
color: var(--muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
}
#errorState {
text-align: center;
padding: 60px 0;
color: var(--ink);
font-size: 11px;
}
#errorState .err-code {
font-size: 28px;
font-weight: 900;
border-bottom: 2px solid var(--line);
margin-bottom: 12px;
padding-bottom: 8px;
}
#errorState a { color: var(--ink); text-decoration: underline; }
/* ── TOAST ── */
#toast { display: none; min-width: 250px; background-color: #000; color: #fff; text-align: center; padding: 10px; position: fixed; z-index: 2000; left: 50%; bottom: 40px; transform: translateX(-50%); font-weight: 900; letter-spacing: 2px; }
#toast.show { display: block; }
/* ── FOOTER (from index.html) ── */
.footer { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; color: var(--ink); text-transform: uppercase; font-size: 10px; line-height: 1.6; font-weight: normal; }
.footer a { color: var(--ink); text-decoration: underline; }
/* THE ORDERS ADDRESS FITS ON ONE LINE (2026-09-14): its box stayed 357px wide at 300-360px, past the edge of the screen.
Held to the footer, scaled with the screen as on the homepage, break-anywhere kept as the guard. */
.footer > .orders-address { max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
@media (max-width: 600px) { .footer > .orders-address { font-size: clamp(12px, calc((100vw - 64px) * 0.046), 16px); } }
.footer-registry-link { margin-top: 10px; font-size: 9px; color: var(--muted); }
.footer-registry-link a { color: var(--muted); }
.footer-registry-link a:hover { color: var(--ink); }
/* ── RESPONSIVE (mirrors index.html breakpoints exactly) ── */
/* TAP TARGETS on every touch-sized screen, as index.html does: the navigation buttons on record pages were 23px tall at
390px (2026-09-14). min-height alone, so the label stays centred. */
@media (max-width: 1024px) {
.kingdom-btn { min-height: 44px; }
}
@media (max-width: 900px) {
.frame { width: 100%; max-width: calc(100vw - 20px); padding: 10px; margin: 0 auto; box-sizing: border-box; }
.banner { font-size: min(1.5vw, 12px) !important; letter-spacing: -0.02em; white-space: pre !important; }
.kingdom-bar { gap: 4px; padding: 6px 0 0 0; }
.kingdom-btn { font-size: 12px; padding: 3px 8px; } /* 12px is the site's own floor; 9px sat under it */
}
@media (max-width: 600px) {
.strain-name { font-size: 16px; }
.reg-section-body { padding: 8px; font-size: 10px; }
.parentage-line { font-size: 11px; }
.photo-gallery img { max-width: 100%; }
.price-block .price-figure { font-size: 18px; }
.banner { font-size: min(1.5vw, 12px) !important; }
}
@media (min-width: 1600px) {
.frame { max-width: 1200px; padding: 40px; }
.banner { font-size: 16px !important; }
}
/* Masthead live-dot — matches index.html's PRIMARY REGISTRY INSTITUTE box. */
@keyframes gh-blink { 0%,100% { opacity:1; } 50% { opacity:.25; } }
.sbi-livedot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#111; animation:gh-blink 1.6s infinite; vertical-align:middle; margin-right:6px; }
/* wordmark — matches index.html; tighten letter-spacing on mobile so it fits one line */
@media (max-width:480px){ .regmast { letter-spacing:0.04em !important; font-size:clamp(15px,5.4vw,22px) !important; } }
/* Matching the homepage pass: open tracking on the small uppercase section labels so
they read as archival eyebrows rather than a shout; tabular figures wherever numbers
sit in a column. Running prose is left alone — tracking hurts legibility there. */
.reg-section-header{ letter-spacing:.18em; }
.reg-section-body{ letter-spacing:0; }
.chip, .badge{ letter-spacing:.08em; }
/* An inferred parent link is shown in the muted tone, never the decreed tone: the
customer should be able to see at a glance that nobody sourced this. */
.provenance-badge.inferred{ background:transparent; color:var(--muted);
border:1px dashed var(--line); letter-spacing:.08em; }
/* collapsible sections — a header is a toggle; most start closed (operator 2026-09-02) */
.reg-section-header { cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; }
.reg-section-header::after { content: '\25BE'; font-size: 10px; color: var(--muted); margin-left: 8px; transition: transform .15s ease; }
.reg-section.is-closed .reg-section-header::after { transform: rotate(-90deg); }
.reg-section.is-closed .reg-section-body { display: none; }
/* ── THE LEDE ─────────────────────────────────────────────────────────────────────────────
The photograph and the record's identity are one band. On a phone they stack in DOM order,
picture first, exactly as before. From 960px up they sit side by side, which is what puts the
name, the originator, the accession and the price on the first screen — measured 2026-09-19,
the first screen of a strain page was a letterboxed packshot and nothing else, with the title
itself below the fold.
The image no longer sets the height of the band: in a 46% column a portrait packshot is about
520px tall instead of 800, and the white margins either side of it are gone because the column
is the width of the picture. */
.record-lede { display: block; }
/* THE CAPTION SAID WHAT IS DIRECTLY BELOW IT. "ASCENSION · GAGE GREEN GROUP" under the photograph
is the name and the originator again, one line above the header that states both — side by side
on a wide screen, stacked on a phone, redundant either way. Removing it also lifts the name onto
the first screen at 390px. Nothing is lost: the record names its own originator. */
.record-lede > .record-hero figcaption { display: none; }
.record-lede > .record-hero { margin-bottom: 18px; }
@media (min-width: 960px) {
.record-lede.has-hero {
display: grid;
grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
gap: 32px;
/* CENTRED, NOT TOP-ALIGNED. The identity is six short lines against a 520px photograph, so
top-aligning it left a third of the band empty under the buy button and the eye had
nowhere to go. Centred, the name sits on the picture's optical middle. */
align-items: center;
margin-bottom: 24px;
border-bottom: 2px solid var(--line);
padding-bottom: 22px;
}
.record-lede.has-hero > .record-hero { margin: 0; }
.record-lede.has-hero > .record-hero img { max-height: min(56vh, 520px); }
/* the rule the band sits on belongs to the band, not to one column of it */
.record-lede.has-hero > .strain-header { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
}
/* The badge rode the baseline of a 54px name and read as something dropped on it. Aligned to the
name's own line box, it reads as part of the title. */
.strain-name-line { align-items: center; }
.strain-name-line .tier-badge { transform: translateY(1px); }
/* the citation form, one step quieter than the accession it cites */
.cite-as { font-family: 'SF Mono', Menlo, monospace; font-size: 10px; line-height: 1.5; color: #777;
letter-spacing: 0.2px; margin-top: 3px; max-width: 46ch; }
/* ON A PHONE THE PICTURE MUST NOT BE THE WHOLE FIRST SCREEN. Measured 2026-09-19 at 390x844: the
packshot ran 830px on its own, so the name, the originator and the price were all below the
fold and the reader's first screen said only "there is a photograph". Capped to a little under
half the viewport, the identity follows it into view without the picture stopping being the
lead. Portrait photographs keep their aspect — the width shrinks with the height. */
@media (max-width: 720px) {
.record-lede > .record-hero img { max-height: 44vh; }
}
/* THE FRAME HUGS THE PICTURE. A height-capped portrait packshot is narrower than the column, and a
full-width frame around it drew two white bands either side of the photograph — the letterbox
moved rather than left. The figure takes the picture's own width and centres. */
.record-lede > .record-hero { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }