/* ============================================================
   FIELD ARCHIVE — editorial layer
   Loaded last. Re-themes existing components (paper / ink /
   hairlines / mono labels) and defines the new archive modules:
   masthead, plate, ledger, story, timeline, index, entries table,
   specimen label, related entries, tools shelf, colophon.
   ============================================================ */

/* ---------- base ---------- */
html { background: var(--color-paper); }
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-primary);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
::selection { background: #E4DCC6; }

.mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-mid);
}
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rule { border: 0; border-top: 1px solid var(--color-rule); margin: var(--space-xl) 0; }
.rule--strong { border-top-color: var(--color-ink); }

/* Section heads: small mono kicker + serif title on one hairline */
.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  color: var(--color-ink);
  margin-bottom: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-ink);
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.section-title .mono { font-weight: 400; }
.section-title.text-center { justify-content: flex-start; text-align: left; }

/* ---------- header ---------- */
.header {
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-ink);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header__inner { height: 56px; }
.header__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  color: var(--color-ink);
  line-height: 1;
}
.header__nav-link,
.header__nav a { color: var(--color-ink); }
.header__nav-link { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.header__nav-link:hover, .header__nav a:hover, .header__nav a.active { color: var(--color-primary); text-decoration: underline; }
.header__nav-link--cta {
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
}
.header__nav-link--cta:hover { background: var(--color-ink); color: var(--color-paper); text-decoration: none; }
.header__btn, .header__lang {
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 6px 12px;
}
.header__lang { border-color: var(--color-rule-strong); color: var(--color-mid); }
.header__btn:hover, .header__lang:hover { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.header__hamburger span { background: var(--color-ink); }
.header__user-icon { background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-sm); }

.header__logo, .header__btn, .header__lang, .header__nav-link { white-space: nowrap; }
/* Mobile header: the primary action (+ 投稿) is visible; login lives in the menu */
.header__contribute { display: none; }
@media (max-width: 767px) {
  .header__actions .header__contribute { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
  .header__contribute:hover { background: var(--color-green); border-color: var(--color-green); }
  #header-auth-btn { display: none !important; }
}
@media (max-width: 480px) {
  .header__logo { font-size: 0.95rem; letter-spacing: 0.1em; }
  .header__lang { padding: 5px 8px; font-size: 0.62rem; }
  .header__btn { padding: 5px 9px; }
  .header__actions { gap: 6px; }
}
.mobile-nav { background: var(--color-paper); top: 56px; border-top: 1px solid var(--color-ink); }
.mobile-nav a { border-bottom: 1px solid var(--color-rule); color: var(--color-ink); border-radius: 0; }
.mobile-nav a:hover, .mobile-nav a:active { background: transparent; color: var(--color-primary); }
@media (min-width: 768px) { .mobile-nav { border-left: 1px solid var(--color-ink); box-shadow: none; } }

/* ---------- buttons / chips / badges ---------- */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  border-width: 1px;
}
.btn--primary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.btn--primary:hover { background: var(--color-primary); border-color: var(--color-primary); box-shadow: none; }
.btn--secondary { background: transparent; border-color: var(--color-ink); color: var(--color-ink); }
.btn--secondary:hover { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.btn--outline { border-color: var(--color-ink); color: var(--color-ink); }
.btn--outline:hover { background: var(--color-ink); color: var(--color-paper); }
.btn--danger { border-color: var(--color-rule-strong); }
.btn--sm { min-height: 40px; }
.header__btn { min-height: 0; }

.chips { gap: 0; border-bottom: 1px solid var(--color-rule); }
.chip {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  background: transparent;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-mid);
}
.chip:hover { color: var(--color-ink); border-color: var(--color-rule-strong); }
.chip.active { background: transparent; color: var(--color-ink); border-bottom-color: var(--color-ink); }
.filter-chips { border-left: 0; padding-left: 0; margin-left: var(--space-md); }
.sort-bar { gap: var(--space-md) var(--space-lg); align-items: flex-end; }

.badge, .badge--inline, .badge--type-sm {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  background: transparent;
  border: 1px solid currentColor;
  line-height: 1.5;
}
.badge--species { color: var(--badge-species-fg); background: transparent; }
.badge--hybrid { color: var(--badge-hybrid-fg); background: transparent; }
.badge--clone { color: var(--badge-clone-fg); background: transparent; }
.badge--seedling { color: var(--badge-seedling-fg); background: transparent; }
.badge--ai { color: var(--badge-ai-fg); background: transparent; border-style: dashed; }
.badge--locked { color: var(--color-mid); background: transparent; }
.badge--species, .badge--hybrid, .badge--clone, .badge--seedling, .badge--ai { border-color: currentColor; }
.genus-stat-chip {
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--color-rule-strong);
  color: var(--color-mid);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.genus-stat-chip--species, .genus-stat-chip--hybrid, .genus-stat-chip--clone { background: transparent; border-color: currentColor; }
.tier-badge { border-radius: var(--radius-sm); font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.06em; }

/* ---------- search ---------- */
.search-bar {
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
  box-shadow: none;
}
.search-bar:focus-within { border-color: var(--color-ink); box-shadow: 0 0 0 3px rgba(47, 93, 74, 0.15); }
.search-bar__input { font-family: var(--font-primary); }
.search-bar__input:focus { outline: none; box-shadow: none; }
.search-bar__btn { background: var(--color-ink); }
.search-bar__btn:hover { background: var(--color-primary); }

/* ---------- cards / rows / tables ---------- */
.card {
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.card:hover { box-shadow: none; }
.card--clickable:hover { transform: none; border-color: var(--color-ink); }
.card-img-container { border-radius: 0; }
.recent-card__placeholder { background: var(--color-paper); }

.cultivar-row { border-bottom: 1px solid var(--color-rule); padding: var(--space-md) var(--space-md); }
.cultivar-row:hover { background: rgba(30, 38, 34, 0.035); }
.cultivar-row__thumb {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  overflow: hidden;
}
.thumb-img { border-radius: 0; }
.thumb-mono {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--color-rule-strong);
  line-height: 1;
}
.cultivar-row__name { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: 0.01em; margin-bottom: 2px; }
.cultivar-row__meta { font-size: var(--font-size-xs); color: var(--color-mid); gap: var(--space-sm) var(--space-md); }
.cultivar-row__cite { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--color-mid); margin-top: 3px; }
.cultivar-row__cite .year { color: var(--color-accent-warm); }

.trust { gap: var(--space-sm); }
.trust__bar { height: 3px; border-radius: 0; background: var(--color-lighter); max-width: 90px; }
.trust__fill { border-radius: 0; }
.trust__label { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.04em; min-width: 30px; }
.trust--lg .trust__bar { height: 4px; }
.trust--lg .trust__label { font-size: 0.85rem; }

.pagination { gap: 2px; }
.page-link { border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-mid); }
.page-link.active { background: var(--color-ink); color: var(--color-paper); }

.breadcrumb { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; }
.breadcrumb a { color: var(--color-mid); }
.breadcrumb a:hover { color: var(--color-ink); }
.breadcrumb__sep { color: var(--color-rule-strong); }

/* genus page tabs */
.genus-tabs { gap: 0; border-bottom: 1px solid var(--color-ink); margin-bottom: var(--space-lg); }
.genus-tab, .genus-tab[data-tab="seedlings"] {
  border: 0; border-bottom: 3px solid transparent; border-radius: 0; margin-bottom: -1px;
  background: transparent; color: var(--color-mid);
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.02em;
  padding: var(--space-sm) var(--space-md);
}
.genus-tab:hover, .genus-tab[data-tab="seedlings"]:hover { background: transparent; filter: none; color: var(--color-ink); }
.genus-tab.active, .genus-tab[data-tab="seedlings"].active { background: transparent; color: var(--color-ink); border-bottom-color: var(--color-ink); }

/* ---------- detail page ---------- */
.detail-title { font-family: var(--font-display); font-weight: 600; font-size: 2.2rem; line-height: 1.15; letter-spacing: 0.005em; }
#page-cultivar .section-title { font-size: 1.25rem; }
#page-cultivar .origin-card:first-of-type { border-left: 3px solid var(--color-ink); }

.specimen {
  margin: var(--space-md) 0 var(--space-lg);
  border-top: 1px solid var(--color-ink);
  border-bottom: 1px solid var(--color-rule);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.specimen__cell { padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-right: 1px solid var(--color-rule); }
.specimen__cell:last-child { border-right: 0; }
.specimen__cell + .specimen__cell { padding-left: var(--space-md); }
.specimen__k { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mid); margin-bottom: 2px; }
.specimen__v { font-size: var(--font-size-sm); color: var(--color-ink); line-height: 1.5; }
.specimen__v .year { font-family: var(--font-mono); color: var(--color-accent-warm); }
.specimen__v a { text-decoration: underline; }

.origin-card { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); }
.origin-card__rank { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mid); font-weight: 500; }
.origin-card__body { line-height: 1.9; }
.origin-card__sources, .origin-card__footer { border-top: 1px solid var(--color-rule); }
.origin-card__sources .font-bold { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mid); font-weight: 500; }
.origin-card__author { color: var(--color-mid); }
.structured-section__title, .structured-field__label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mid); }
.structured-fieldset__legend { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }

.formula-box { border: 1px solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper); }
.formula-parent { border: 0; border-bottom: 1px solid var(--color-ink); border-radius: 0; background: transparent; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; font-weight: 600; text-decoration: none; padding: 2px 4px; }
.formula-parent:hover { background: transparent; color: var(--color-primary); }
.formula-operator { font-family: var(--font-display); font-weight: 400; color: var(--color-mid); }

.gallery__empty-glass { border-radius: var(--radius-sm); background: var(--color-paper-2); border: 1px dashed var(--color-rule-strong); box-shadow: none; }
.gallery__empty-accent { display: none; }
.vote-btn { border-radius: var(--radius-sm); }
.share-menu-popup { border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }

/* related entries */
.related { margin-top: var(--space-2xl); }
.related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-lg); }
.related__group h3 { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mid); font-weight: 500; margin-bottom: var(--space-sm); padding-bottom: 4px; border-bottom: 1px solid var(--color-rule); }
.related__group ul { list-style: none; margin: 0; padding: 0; }
.related__group li { padding: 5px 0; border-bottom: 1px dotted var(--color-rule); font-size: var(--font-size-sm); display: flex; justify-content: space-between; gap: var(--space-sm); }
.related__group li a { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; text-decoration: none; }
.related__group li a:hover { text-decoration: underline; }
.related__group li .mono { font-size: 0.66rem; white-space: nowrap; }
.related__nav { display: flex; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--color-ink); }
.related__nav a { text-decoration: none; max-width: 48%; }
.related__nav a:hover .related__nav-name { text-decoration: underline; }
.related__nav-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; display: block; }
.related__nav--next { text-align: right; margin-left: auto; }

/* ---------- affiliate → tools shelf ---------- */
.affiliate-section { background: transparent; border: 0; padding: 0; margin-top: var(--space-2xl); }
.affiliate-banner { background: transparent; border-radius: 0; padding: 0; border-top: 1px solid var(--color-ink); padding-top: var(--space-sm); }
.affiliate-banner::before, .affiliate-banner::after { display: none; }
.affiliate-banner__context { justify-content: flex-start; color: var(--color-mid); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; }
.affiliate-banner__context-icon { display: none; }
.affiliate-banner__title { color: var(--color-ink); font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; text-align: left; margin-bottom: var(--space-md); }
.affiliate-banner__grid { gap: 1px; background: var(--color-rule); border: 1px solid var(--color-rule); }
.affiliate-card { background: var(--color-paper-2); border-radius: 0; padding: 14px 12px 12px; text-align: left; }
.affiliate-card:hover { transform: none; box-shadow: none; background: var(--color-paper); }
.affiliate-card__image { border-radius: 0; background: transparent; mix-blend-mode: multiply; max-width: 100%; height: 96px; }
.affiliate-card__category { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; }
.affiliate-card__name { color: var(--color-ink); font-weight: 600; font-size: 0.82rem; }
.affiliate-card__badge, .affiliate-card__recommend { background: transparent; color: var(--color-accent-warm); border: 1px solid currentColor; border-radius: var(--radius-sm); font-family: var(--font-mono); letter-spacing: 0.08em; }
.affiliate-card__recommend { top: 8px; left: auto; right: 8px; }
.affiliate-card__shops { justify-content: flex-start; gap: 0; }
.affiliate-card__shop, .affiliate-card__shop--rakuten, .affiliate-card__shop--amazon, .affiliate-card__shop--yahoo {
  background: transparent; color: var(--color-mid); border-radius: 0; padding: 4px 8px 4px 0;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-decoration: underline;
}
.affiliate-card__shop + .affiliate-card__shop { border-left: 1px solid var(--color-rule); padding-left: 8px; }
.affiliate-card__shop:hover { color: var(--color-ink); opacity: 1; }
.affiliate-notice { text-align: left; color: var(--color-mid); }

/* Ad slots: nothing to show yet — keep them out of the reader's way */
.ad-placeholder { display: none; }

/* ---------- footer / colophon ---------- */
.footer { background: transparent; border-top: 1px solid var(--color-ink); margin-top: var(--space-3xl); padding: var(--space-xl) 0 var(--space-2xl); }
.footer__inner { text-align: left; }
.footer__links { justify-content: flex-start; }
.footer__links a { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-mid); }
.footer__copy { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--color-mid); }

/* ============================================================
   TOP PAGE — archive front
   ============================================================ */
.masthead {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding: var(--space-lg) 0 var(--space-xl);
  border-bottom: 1px solid var(--color-ink);
}
.masthead__kicker { margin-bottom: var(--space-md); }
.masthead__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 9vw, 6.4rem);
  line-height: 0.92;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  margin: 0 0 var(--space-md);
}
/* Hierarchy: the value statement is the sentence to read; the tagline is the annotation above it */
.masthead__tagline { font-family: var(--font-display); font-size: 1rem; font-weight: 500; letter-spacing: 0.1em; color: var(--color-mid); margin-bottom: var(--space-xs); }
.masthead__desc { color: var(--color-ink); font-size: 1rem; line-height: 1.8; max-width: 560px; }
.masthead__kicker { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; }
.masthead__lang { color: var(--color-mid); text-decoration: none; border-bottom: 1px solid var(--color-rule); padding: 6px 0; min-height: 0; }
.masthead__lang:hover { color: var(--color-green); border-color: var(--color-green); }
@media (max-width: 480px) { .masthead__desc { font-size: 0.95rem; } }
.masthead .search-bar { margin: var(--space-lg) 0 0; max-width: 520px; }
.masthead__meta { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-md); }
.masthead__meta a { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-mid); }
.masthead__meta a:hover { color: var(--color-ink); }

.plate { position: relative; background: #0B0F0D; border: 1px solid var(--color-ink); padding: 12px; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; }
.plate img { max-width: 78%; max-height: 92%; object-fit: contain; filter: saturate(0.75) contrast(1.05); }
.plate::after {
  content: ""; position: absolute; inset: 6px; border: 1px solid rgba(244, 241, 234, 0.25); pointer-events: none;
}
.masthead__plate { margin: 0; max-width: 320px; }
@media (max-width: 899px) {
  .masthead__plate { max-width: 200px; }
  .masthead__title { font-size: clamp(3rem, 16vw, 4.6rem); }
}
.masthead__plate figcaption { margin-top: var(--space-sm); display: flex; justify-content: space-between; gap: var(--space-sm); }
.masthead__plate figcaption i { font-family: var(--font-display); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 0.9rem; color: var(--color-ink); }

.ledger { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--color-ink); margin: 0; }
.ledger > div { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }
.ledger dt { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mid); }
.ledger dd { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin: 2px 0 0; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.ledger dd small { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--color-mid); margin-left: 4px; font-weight: 400; }

@media (min-width: 900px) {
  .masthead { grid-template-columns: minmax(0, 1.5fr) minmax(260px, 320px); grid-template-rows: auto auto; column-gap: var(--space-3xl); }
  .masthead__main { grid-row: 1 / span 2; }
  .masthead__plate { grid-column: 2; }
  .masthead__ledger { grid-column: 2; }
}

/* story of the day */
.front { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); margin-top: var(--space-xl); }
@media (min-width: 900px) { .front { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); } }

.story { border-top: 1px solid var(--color-ink); padding-top: var(--space-sm); }
.story__label { display: flex; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.story__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; margin: 0 0 var(--space-xs); }
.story__title a { text-decoration: none; }
.story__title a:hover { text-decoration: underline; }
.story__cite { margin-bottom: var(--space-md); }
.story__cite .year { color: var(--color-accent-warm); }
.story__body { font-size: var(--font-size-base); line-height: 1.95; color: var(--color-ink); max-width: 62ch; }
.story__body--dropcap::first-letter { font-family: var(--font-display); font-size: 2.2em; line-height: 0.8; float: left; padding: 0.12em 0.12em 0 0; color: var(--color-ink); }
.story__more { display: inline-block; margin-top: var(--space-md); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--color-ink); padding-bottom: 2px; }
.story__more:hover { color: var(--color-primary); border-color: var(--color-primary); }
/* The photo is shown whole (never cropped), mounted on a paper-2 mat */
.story__figure { margin: 0 0 var(--space-md); border: 1px solid var(--color-rule); background: var(--color-paper-2); aspect-ratio: 4 / 3; overflow: hidden; padding: 10px; }
.story__figure a { display: block; width: 100%; height: 100%; }
.story__figure img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* index (localities / people / types) */
.index { border-top: 1px solid var(--color-ink); padding-top: var(--space-sm); }
.index__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-md); }
.index__head h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; margin: 0; }
.index__group + .index__group { margin-top: var(--space-lg); }
.index__group h3 { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mid); font-weight: 500; margin: 0 0 4px; }
.index__list { list-style: none; margin: 0; padding: 0; }
.index__item { border-bottom: 1px dotted var(--color-rule); }
.index__toggle {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm);
  background: transparent; border: 0; padding: 7px 0; font: inherit; color: var(--color-ink); cursor: pointer; text-align: left;
}
.index__toggle:hover .index__name { text-decoration: underline; }
.index__name { font-size: var(--font-size-sm); }
.index__count { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-accent-warm); font-variant-numeric: tabular-nums; }
.index__sub { display: none; list-style: none; margin: 0 0 var(--space-sm); padding: 0 0 0 var(--space-md); border-left: 1px solid var(--color-rule); }
.index__item.open .index__sub { display: block; }
.index__item.open .index__toggle .index__name { text-decoration: underline; }
.index__sub li { padding: 3px 0; font-size: var(--font-size-sm); }
.index__sub a { font-family: var(--font-display); font-weight: 600; font-size: 1rem; text-decoration: none; }
.index__sub a:hover { text-decoration: underline; }
.index__sub .mono { margin-left: 6px; font-size: 0.62rem; }

/* timeline */
.timeline { border-top: 1px solid var(--color-ink); padding-top: var(--space-sm); margin-top: var(--space-2xl); }
.timeline__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.timeline__head h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; margin: 0; }
.timeline__axis { position: relative; height: 96px; margin: 0 8px; }
.timeline__track { position: absolute; left: 0; right: 0; top: 60px; height: 1px; background: var(--color-ink); }
.timeline__tick { position: absolute; top: 56px; width: 1px; height: 9px; background: var(--color-ink); }
.timeline__tick span { position: absolute; top: 12px; left: 0; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--color-mid); white-space: nowrap; }
.timeline__tick--minor { height: 5px; top: 58px; background: var(--color-rule-strong); }
.timeline__dot {
  position: absolute; top: 60px; width: 11px; height: 11px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--color-paper); border: 1.5px solid var(--color-ink);
  cursor: pointer; transition: background var(--transition), transform var(--transition);
}
.timeline__dot--1 { top: 46px; }
.timeline__dot--2 { top: 32px; }
.timeline__dot--1::after, .timeline__dot--2::after { content: ""; position: absolute; left: 4px; top: 9px; width: 1px; height: 14px; background: var(--color-rule-strong); }
.timeline__dot--2::after { height: 28px; }
.timeline__dot:hover, .timeline__dot:focus-visible, .timeline__dot.is-hot { background: var(--color-ink); transform: scale(1.25); z-index: 3; }
.timeline__tip {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: var(--color-ink); color: var(--color-paper); padding: 4px 8px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--transition); z-index: 4;
}
.timeline__tip i { font-family: var(--font-display); font-style: italic; font-size: 0.85rem; letter-spacing: 0; }
.timeline__dot:hover .timeline__tip, .timeline__dot:focus-visible .timeline__tip, .timeline__dot.is-hot .timeline__tip { opacity: 1; }
.timeline__dot:first-child .timeline__tip { transform: none; left: -6px; }
.timeline__dot:last-child .timeline__tip { transform: none; left: auto; right: -6px; }
.timeline__list { list-style: none; margin: var(--space-xl) 0 0; padding: 0; columns: 1; column-gap: var(--space-2xl); }
@media (min-width: 700px) { .timeline__list { columns: 2; } }
@media (min-width: 1024px) { .timeline__list { columns: 3; } }
.timeline__decade { break-inside: avoid; padding: 6px 0; border-top: 1px solid var(--color-rule); display: grid; grid-template-columns: 56px 1fr; gap: var(--space-sm); }
.timeline__decade > .mono { color: var(--color-accent-warm); padding-top: 3px; }
.timeline__decade a { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; text-decoration: none; line-height: 1.5; }
.timeline__decade a:hover { text-decoration: underline; }
.timeline__decade a .num { font-family: var(--font-mono); font-size: 0.66rem; color: var(--color-mid); margin-left: 6px; }

/* entries ledger */
.ledger-table { width: 100%; border-collapse: collapse; }
.ledger-table th { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mid); font-weight: 500; text-align: left; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--color-ink); }
.ledger-table td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--color-rule); vertical-align: middle; font-size: var(--font-size-sm); }
.ledger-table tr[role="link"] { cursor: pointer; }
.ledger-table tr[role="link"]:hover td { background: rgba(30, 38, 34, 0.035); }
.ledger-table tr[role="link"]:hover .ledger-table__name { text-decoration: underline; }
.ledger-table__no { font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-mid); width: 44px; }
.ledger-table__name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.ledger-table__thumb { width: 36px; height: 36px; object-fit: cover; border: 1px solid var(--color-rule); display: block; }
.ledger-table__year { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-accent-warm); white-space: nowrap; }
.ledger-table__meta { color: var(--color-mid); font-size: var(--font-size-xs); }
.ledger-table .trust { justify-content: flex-end; }
.ledger-table th.right, .ledger-table td.right { text-align: right; padding-right: 0; }
@media (max-width: 640px) {
  .ledger-table thead { display: none; }
  .ledger-table tr { display: grid; grid-template-columns: 40px 1fr auto; grid-template-areas: "no name trust" "no meta meta"; column-gap: 8px; row-gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--color-rule); }
  .ledger-table td { display: block; padding: 0; border: 0; }
  .ledger-table__no { grid-area: no; }
  .ledger-table__cell-name { grid-area: name; }
  .ledger-table__cell-meta { grid-area: meta; }
  .ledger-table__cell-trust { grid-area: trust; }
  .ledger-table__cell-type { display: none; }
}

/* seedling notes (reuse existing card render, quieter) */
#seedling-preview-grid .card { padding: 0; }
#seedling-preview-grid .card .font-bold { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }

/* colophon */
.colophon { border-top: 1px solid var(--color-ink); padding-top: var(--space-sm); margin-top: var(--space-2xl); display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
@media (min-width: 900px) { .colophon { grid-template-columns: 1fr 2fr; gap: var(--space-3xl); } }
.colophon h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; margin: 0; }
.colophon p { color: var(--color-ink); line-height: 1.95; max-width: 64ch; }
.colophon p + p { margin-top: var(--space-md); }
.colophon__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-lg); }
.colophon dl { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-md); margin-top: var(--space-lg); font-size: var(--font-size-sm); }
.colophon dt { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mid); padding-top: 3px; }
.colophon dd { margin: 0; color: var(--color-ink); }

/* small polish */
.empty-state, .loading-text { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-mid); }
.skeleton { background: linear-gradient(90deg, var(--color-lighter) 25%, var(--color-rule) 50%, var(--color-lighter) 75%); background-size: 200% 100%; }
.toast-notification { border-radius: var(--radius-sm); background: var(--color-ink); }
.dialog-clean { border-radius: var(--radius-sm); border: 1px solid var(--color-ink); box-shadow: var(--shadow-lg); }
.about-mission { background: var(--color-ink); border-radius: var(--radius-sm); }
.login-benefits-bg { background: var(--color-paper-2); border-color: var(--color-rule); }
.legal-page h2 { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-rule); padding-top: var(--space-sm); font-family: var(--font-display); font-size: 1.3rem; }
.contact-link { border-radius: var(--radius-sm); }
.contact-link__icon { border-radius: var(--radius-sm); }
.paywall-modal { border-radius: var(--radius-sm); }

/* paywall: legal confirmation block (特商法 12条の6) */
.paywall-modal__legal { border: 1px solid var(--color-rule); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); margin: var(--space-md) 0; text-align: left; color: var(--color-ink); line-height: 1.7; }
.paywall-modal__legal p { margin: 0 0 4px; }
.paywall-modal__legal ul { margin: 0 0 0 1.1em; padding: 0; }
.paywall-modal__legal li { margin: 2px 0; }
.paywall-modal__legal a { text-decoration: underline; }

/* ---------- design-director audit (2026-09-04) ---------- */
/* tap targets stay 44px */
.btn--sm { min-height: 44px; }
.vote-btn, .page-link { min-width: 40px; min-height: 40px; }
/* badges: keep Japanese labels legible */
.badge, .badge--inline, .badge--type-sm { font-size: 0.68rem; }
/* empty gallery: an "unrecorded" specimen sheet, not a glass card */
.gallery__empty { background: transparent; border-radius: 0; padding: 0; }
.gallery__empty-glass { background: var(--color-paper-2); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px dashed var(--color-rule-strong); border-radius: var(--radius-sm); padding: 32px 20px; }
.gallery__empty-glass:hover { background: var(--color-paper); border-color: var(--color-ink); }
.gallery__empty-icon { color: var(--color-rule-strong); }
.gallery__empty-text { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mid); font-weight: 500; }
.gallery__img { background: var(--color-paper); border-radius: 0; }
.gallery__img-full { border-radius: 0; }
/* source tiers: one ink, letter carries the meaning */
.tier-badge { background: var(--color-ink) !important; color: var(--color-paper); }
/* votes */
.vote-btn { border-radius: var(--radius-sm); }
.vote-btn--active { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.vote-btn--active-down { background: transparent; border-color: var(--color-danger); color: var(--color-danger); }
.fav-remove-btn { color: var(--color-ink); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); box-shadow: none; }
/* paywall */
.pricing-card { border-radius: var(--radius-sm); box-shadow: none; border: 1px solid var(--color-rule); }
.pricing-card:hover, .pricing-card.selected, .pricing-card--selected { border-color: var(--color-ink); box-shadow: none; transform: none; }
.paywall-modal__content { border-radius: var(--radius-sm); }
.paywall-modal__icon { display: none; }
/* specimen label: hairlines only between cells, no stray verticals at row ends */
.specimen { gap: 0; }
.specimen__cell { border-right: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); margin-bottom: -1px; }
.specimen__cell:last-child { border-right: 1px solid var(--color-rule); }
.specimen__cell:nth-child(n) { padding-left: var(--space-md); }
.specimen__cell:first-child { padding-left: 0; }
/* genus sort bar: search on its own line on narrow screens */
@media (max-width: 640px) {
  .sort-bar { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
  .sort-bar .search-bar--inline { max-width: none; }
  .sort-bar .chips { justify-content: flex-start; }
  .filter-chips { margin-left: 0; }
  .btn--ml-auto { margin-left: 0; }
}
/* timeline: on phones the dots overlap — keep the decade list only */
@media (max-width: 480px) {
  .timeline__axis { display: none; }
  .timeline__list { margin-top: var(--space-sm); }
}
/* profile / favorites cards inherit the sheet look */
.profile-avatar { border: 1px solid var(--color-rule); }
.contact-link__icon--instagram { background: var(--color-ink); }
/* text-gray was declared decorative-only; keep body copy readable */
.text-gray, .desc-text, .form-hint, .legal-date, .contact-link__value, .gallery-carousel__counter { color: var(--color-mid); }
/* mono labels that carry Japanese fall back to the body face — give them room */
.mono:lang(ja) { font-size: 0.76rem; letter-spacing: 0.04em; }
/* seedling notes ledger keeps its own spacing */
#seedling-preview-grid .ledger-table { margin-bottom: var(--space-sm); }

/* ---------- people pages ---------- */
.people__intro { color: var(--color-mid); line-height: 1.9; max-width: 64ch; margin-bottom: var(--space-xl); }
.people__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
@media (min-width: 700px) { .people__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl); } }
.people__group h2 { border-bottom: 1px solid var(--color-ink); padding-bottom: 4px; margin: 0 0 var(--space-sm); font-weight: 500; }
.people__list { list-style: none; margin: 0; padding: 0; }
.people__list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding: 8px 0; border-bottom: 1px dotted var(--color-rule); }
.people__list a { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; text-decoration: none; }
.people__list a:hover { text-decoration: underline; }
.people__list .mono { white-space: nowrap; font-size: 0.64rem; }
.people__roles { margin: calc(-1 * var(--space-md)) 0 var(--space-lg); }
.people__facts { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: var(--space-2xl); margin-bottom: var(--space-2xl); }
.people__facts-small { font-size: 1rem !important; font-family: var(--font-primary) !important; padding-top: 6px; }
#page-people .section-title { font-size: 1.25rem; }
.specimen__v a { text-decoration: none; border-bottom: 1px solid var(--color-rule-strong); }
.specimen__v a:hover { border-color: var(--color-ink); }
.specimen__note { margin: calc(-1 * var(--space-sm)) 0 var(--space-lg); color: var(--color-accent-warm); }
.index__group h3 a { color: inherit; text-decoration: none; }
.index__group h3 a:hover { color: var(--color-ink); text-decoration: underline; }

/* ---------- lineage tree ---------- */
.lineage { margin-bottom: var(--space-2xl); }
.lineage__title { margin-bottom: var(--space-md); }
.lineage__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: var(--space-sm); }
.lineage__node { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 150px; max-width: 260px; padding: 10px 14px; border: 1px solid var(--color-rule-strong); border-radius: var(--radius-sm); background: var(--color-paper-2); text-decoration: none; color: var(--color-ink); }
a.lineage__node:hover { border-color: var(--color-ink); }
.lineage__node--self { border: 1.5px solid var(--color-ink); background: var(--color-paper); }
.lineage__node--text { border-style: dashed; color: var(--color-mid); }
.lineage__name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.25; }
.lineage__meta { font-size: 0.62rem; margin-top: 3px; }
.lineage__sub { font-size: 0.72rem; color: var(--color-mid); margin-top: 4px; line-height: 1.4; }
.lineage__x { align-self: center; font-family: var(--font-display); font-size: 1.4rem; color: var(--color-mid); padding: 0 4px; }
.lineage__joint { width: 1px; height: 22px; margin: 0 auto; background: var(--color-ink); position: relative; }
.lineage__joint--down::after { content: ""; position: absolute; left: -3px; bottom: -1px; width: 7px; height: 7px; border-right: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); transform: rotate(45deg); }
.lineage__row--children .lineage__node { min-width: 130px; }
@media (max-width: 480px) { .lineage__node { min-width: 0; flex: 1 1 40%; padding: 8px 10px; } .lineage__name { font-size: 1rem; } }

/* self node: parents already drawn above */
.lineage__row--parents + .lineage__joint + .lineage__row .lineage__node--self .lineage__sub { display: none; }

/* ---------- glossary ---------- */
.glossary { margin: 0 0 var(--space-lg); }
.glossary dt { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; margin-top: var(--space-md); color: var(--color-ink); }
.glossary dd { margin: 4px 0 0; line-height: 1.9; color: var(--color-ink); }
.glossary dd a { text-decoration: underline; }
.legal-page .breadcrumb { margin-bottom: var(--space-md); }

/* ---------- contribution form: name builder ---------- */
.name-builder__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-sm) var(--space-md); }
@media (min-width: 640px) { .name-builder__grid { grid-template-columns: 1fr 1fr; } }
.name-builder [data-for][hidden] { display: none !important; }
.name-builder__result { background: var(--color-paper); font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--color-ink); }
.name-builder__result:read-only { cursor: default; }
.name-builder .species-subcategory { margin: 0 0 var(--space-sm); }
.name-builder .chips { border-bottom: 0; gap: 4px; flex-wrap: wrap; }
.name-builder .chip { border: 1px solid var(--color-rule-strong); border-radius: var(--radius-sm); padding: 5px 10px; margin: 0; text-transform: none; letter-spacing: 0.02em; font-family: var(--font-primary); font-size: 0.8rem; }
.name-builder .chip.active { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }

/* glossary term links inside origin text */
a.term { text-decoration: none; border-bottom: 1px dotted var(--color-accent-warm); color: inherit; }
a.term:hover { border-bottom-style: solid; color: var(--color-primary); }
.glossary__hit { color: var(--color-primary); }

/* native dialogs stay centred (reset zeroes margins) */
dialog.dialog-clean { margin: auto; }

/* private (owner-only) records */
.badge--private { color: var(--color-accent-warm); border-color: currentColor; }
.private-toggle { border: 1px solid var(--color-rule); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); background: var(--color-paper); }
.private-toggle .form-radio { margin: 0; }
.private-note { color: var(--color-accent-warm); margin: calc(-1 * var(--space-sm)) 0 var(--space-md); }

/* new-entries ledger + missing parent CTA */
#new-entries-count { color: var(--color-accent-warm); }
.lineage__add { display: inline-block; margin-top: 5px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--color-accent-warm); color: var(--color-accent-warm); }
.lineage__add:hover { color: var(--color-ink); border-color: var(--color-ink); }
.cultivar-row__state { font-size: 0.66rem; color: var(--color-mid); }
.footer__lang { margin-top: var(--space-sm); }
.footer__lang .header__lang { border-color: var(--color-rule-strong); color: var(--color-mid); }

/* unified "unrecorded" sheet */
.sheet { border: 1px dashed var(--color-rule-strong); border-radius: var(--radius-sm); background: var(--color-paper-2); padding: var(--space-xl) var(--space-lg); text-align: center; }
.sheet__title { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; margin: 0 0 var(--space-xs); color: var(--color-ink); }
.sheet__note { margin: 0 0 var(--space-md); color: var(--color-mid); }
.sheet__cta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--color-ink); padding-bottom: 2px; }
.sheet__cta:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* mobile: 44px targets on touch devices (M-C) */
@media (pointer: coarse) {
  .chip, .page-link, .index__toggle, .genus-tab, .footer__links a, .header__hamburger, .gallery-carousel__arrow { min-height: 44px; }
  .chip, .page-link { display: inline-flex; align-items: center; }
  .gallery-carousel__arrow { min-width: 44px; }
}
/* M-B: the trust bar is noise on a narrow row — keep the number only */
@media (max-width: 640px) {
  .cultivar-row__meta .trust__bar { display: none; }
  .ledger-table .trust__bar { display: none; }
}
/* timeline axis hidden a bit earlier (design M) */
@media (max-width: 700px) { .timeline__axis { display: none; } }

/* Share menu (PC): one mono row, paper + hairline, no shadow */
.share-menu-popup { background: var(--color-paper); border: 1px solid var(--color-ink); border-radius: 2px; box-shadow: none; padding: 4px 10px; gap: 8px; align-items: center; }
.share-menu__link { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--color-ink); text-decoration: none; background: none; border: 0; padding: 6px 2px; min-height: 32px; cursor: pointer; font-family: var(--font-mono); }
.share-menu__link:hover { color: var(--color-green); text-decoration: underline; text-underline-offset: 3px; }
.share-menu__sep { color: var(--color-mid); font-size: 0.72rem; }

/* ==========================================================================
   Mobile pass (2026-09-06): tighten the phone layout without changing the
   desktop. Measured at 375px before: masthead 889, index 1084, ledger row
   ~100, detail action row 96 (2 lines), tools shelf 1160.
   ========================================================================== */

/* Masthead: plate and ledger stats sit side by side under the title */
@media (max-width: 899px) {
  .masthead {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    grid-template-areas: "main main" "plate ledger";
    column-gap: var(--space-lg);
    row-gap: var(--space-lg);
    align-items: start;
  }
  .masthead__main { grid-area: main; }
  .masthead__plate { grid-area: plate; max-width: none; }
  .masthead__plate figcaption { flex-direction: column; align-items: flex-start; gap: 2px; }
  .masthead__ledger { grid-area: ledger; grid-template-columns: 1fr; border-top: 0; align-self: stretch; }
  .masthead__ledger > div { padding: 5px 0 6px; }
  .masthead__ledger > div:first-child { padding-top: 0; }
  .masthead__ledger dd { font-size: 1.2rem; }
  .masthead__kicker { margin-bottom: var(--space-sm); }
  .masthead .search-bar { margin-top: var(--space-md); }
}

/* Index: two columns of toggles; an opened item takes the full width */
@media (max-width: 899px) {
  .index__list { columns: 2; column-gap: var(--space-lg); }
  .index__item { break-inside: avoid; }
  .index__item.open { column-span: all; }
  .index__group + .index__group { margin-top: var(--space-md); }
}

/* New-entries ledger rows: date | name | type badge / meta | trust */
@media (max-width: 640px) {
  .ledger-table tr {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "no name type" "no meta trust";
    align-items: baseline;
    row-gap: 4px;
  }
  .ledger-table__cell-type { display: block; grid-area: type; justify-self: end; }
  .ledger-table__cell-trust { grid-area: trust; justify-self: end; }
  .ledger-table__cell-meta { grid-area: meta; min-width: 0; }
  .ledger-table__name { font-size: 1.02rem; line-height: 1.3; }
  .ledger-table__meta { font-size: 0.72rem; line-height: 1.5; }
  .ledger-table__meta .text-xs { margin-top: 2px; }
}

/* Colophon actions: full-width buttons on phones */
@media (max-width: 480px) {
  .colophon__actions { flex-direction: column; gap: var(--space-sm); }
  .colophon__actions .btn { width: 100%; text-align: center; }
}

/* Footer: two tidy columns of mono links */
@media (max-width: 640px) {
  .footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--space-lg); }
  .footer__links a { padding: 2px 0; }
  .footer__lang { margin-top: var(--space-lg); }
}

/* Detail page: the action row becomes one line of mono text actions */
@media (max-width: 640px) {
  #page-cultivar div:has(> #share-btn) { gap: 0 var(--space-md); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); padding: 2px 0; margin-top: var(--space-md); }
  #page-cultivar div:has(> #share-btn) .btn {
    border: 0; background: none; padding: 10px 0; min-height: 40px; border-radius: 0;
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink);
  }
  #page-cultivar div:has(> #share-btn) .btn:hover { background: none; color: var(--color-green); text-decoration: underline; text-underline-offset: 3px; }
  #page-cultivar div:has(> #share-btn) .text-danger-border { color: var(--color-danger, #8b2e2e); margin-left: auto; }
  #page-cultivar .share-menu-popup { top: 100%; left: 0; }
}

/* Tools shelf on phones: two columns, smaller images */
@media (max-width: 640px) {
  .affiliate-banner__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .affiliate-card { padding: 10px 10px 10px; }
  .affiliate-card__image { height: 72px; }
  .affiliate-banner__title { font-size: 1.1rem; }
}

/* Related entries: let long names wrap without pushing the year off */
@media (max-width: 640px) {
  .related__grid { gap: var(--space-md); }
  .related__group li a { font-size: 0.98rem; min-width: 0; }
}

/* Genus page on phones: everything shares one left edge (16px), ragged right.
   Search box and add button no longer stretch to the right margin; list rows
   drop the card frame so their text lines up with the headings. */
@media (max-width: 640px) {
  .sort-bar .search-bar--inline { max-width: 280px; align-self: flex-start; width: 100%; }
  .sort-bar .btn { align-self: flex-start; width: auto; }
  #page-genus .card--no-pad { border-left: 0; border-right: 0; border-radius: 0; }
  #page-genus .cultivar-row { padding-left: 0; padding-right: 0; }
  #page-genus .cultivar-row__info { min-width: 0; }
}

/* Contribute form: a type option the chosen genus does not accept stays visible but muted */
.form-radio--disabled { opacity: 0.45; cursor: not-allowed; }
.form-radio--disabled input { cursor: not-allowed; }

/* Genus request link (masthead meta row + contribute form) and dialog input */
.genus-request-link { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-mid); text-decoration: none; border-bottom: 1px solid var(--color-rule); }
.genus-request-link:hover { color: var(--color-green); border-color: var(--color-green); }
#genus-request-dialog .form-input { margin-top: 4px; }
#genus-request-dialog .form-label { display: block; margin-top: var(--space-sm); }

/* ---------- Origin records under the photo: entries on the paper, no cards ---------- */
.record { background: transparent; border: 0; border-top: 1px solid var(--color-ink); border-radius: 0; padding: var(--space-md) 0 var(--space-lg); margin: 0; }
.record + .record { border-top: 1px solid var(--color-rule); }
.record__head { display: flex; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mid); margin-bottom: var(--space-sm); }
.record__rank { color: var(--color-ink); font-weight: 500; }
.record__trust { margin-left: auto; color: var(--color-ink); font-weight: 500; }
.record__trust.trust--low { color: var(--color-danger); }
.record__body { line-height: 1.95; max-width: 68ch; }
.record__body p { margin: 0 0 0.8em; }
.record__body p:last-child { margin-bottom: 0; }
.record__body--fields .structured-section { background: transparent; border: 0; padding: 0; margin: 0 0 var(--space-sm); }
.record__body--fields .structured-fields { gap: 4px var(--space-lg); }
.record__sources { margin-top: var(--space-md); display: flex; flex-wrap: wrap; gap: 4px var(--space-md); align-items: baseline; }
.record__label { font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mid); }
.record__source a { color: var(--color-mid); text-decoration: underline; text-underline-offset: 3px; font-size: var(--font-size-sm); }
.record__source a:hover { color: var(--color-ink); }
.record__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); margin-top: var(--space-md); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-mid); }
.record .vote-group { display: flex; gap: 6px; }
.record .vote-btn { border: 1px solid var(--color-rule); background: transparent; color: var(--color-mid); padding: 4px 8px; min-height: 32px; min-width: 32px; }
.record .vote-btn:hover { border-color: var(--color-ink); color: var(--color-ink); }
.record .verification-details { margin-top: var(--space-sm); }
.record .verification-toggle { background: none; border: 0; border-bottom: 1px solid var(--color-rule); padding: 4px 0; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mid); cursor: pointer; }
.record .variation-detail { margin-top: var(--space-sm); padding: var(--space-sm) 0 0; border-top: 1px dotted var(--color-rule); font-size: var(--font-size-sm); }
#page-cultivar .structured-section { background: transparent; border-color: var(--color-rule); }

/* ---------- Individuals of a species ---------- */
.individuals { margin-top: var(--space-2xl); }
.individuals__list { list-style: none; margin: 0 0 var(--space-md); padding: 0; }
.individuals__list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding: 8px 0; border-bottom: 1px dotted var(--color-rule); }
.individuals__list a { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; text-decoration: none; }
.individuals__list a:hover { text-decoration: underline; }
.individuals__list .mono { font-size: 0.66rem; white-space: nowrap; }
.individuals__empty { font-size: 0.7rem; letter-spacing: 0.06em; margin: 0 0 var(--space-md); }
.individuals__add { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--color-ink); padding: 8px 12px; color: var(--color-ink); min-height: 36px; }
.individuals__add:hover { background: var(--color-ink); color: var(--color-paper); }
.cultivar-row__individuals { font-size: 0.64rem; letter-spacing: 0.08em; color: var(--color-mid); margin-top: 2px; }
/* compact add form: replaces the full form while the page carries .contribute--individual */
#individual-form { display: none; }
.contribute--individual #individual-form { display: block; }
.contribute--individual .container > .card, .contribute--individual #contribute-submit-btn, .contribute--individual .container > form { display: none !important; }
.individual-form { border-top: 1px solid var(--color-ink); padding-top: var(--space-md); max-width: 560px; }
.individual-form__row { display: flex; gap: var(--space-md); align-items: baseline; margin-bottom: var(--space-md); }
.individual-form__k { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mid); }
.individual-form__species { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; font-style: italic; }
.individual-form__preview { font-size: 0.7rem; margin: 6px 0 0; color: var(--color-mid); min-height: 1em; }
.individual-form__grid { display: grid; grid-template-columns: 1fr 120px; gap: var(--space-md); }
.individual-form__actions { display: flex; gap: var(--space-sm); margin-top: var(--space-md); }

/* ---------- record gate: drafts folded, state labels, sheet on the detail page ---------- */
.record--draft { border-top: 1px solid var(--color-rule); padding: 0; }
.record--draft > summary { list-style: none; cursor: pointer; padding: 12px 0; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mid); }
.record--draft > summary::-webkit-details-marker { display: none; }
.record--draft > summary:hover { color: var(--color-ink); }
.record--draft[open] > summary { border-bottom: 1px dotted var(--color-rule); }
.record--draft .record__inner { border-top: 0; padding-top: var(--space-md); opacity: 0.85; }
.cultivar-row__state--none, .ledger-table__state { color: var(--color-mid); }
.cultivar-row__state--unrecorded { color: var(--color-accent-warm); }
.sheet--gate { margin: 0 0 var(--space-lg); }
#record-gate.d-none { display: none; }

/* disputed parentage flag on the specimen label; people authority extras */
.specimen__flag { display: block; margin-top: 4px; font-size: 0.62rem; letter-spacing: 0.08em; color: var(--color-accent-warm); }
.people__abbr { font-size: 0.62rem; margin-left: 6px; color: var(--color-mid); }
.people__note { color: var(--color-mid); max-width: 64ch; margin: calc(-1 * var(--space-sm)) 0 var(--space-lg); line-height: 1.8; }

/* search-zero sheet: two mono actions */
.sheet__actions { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; }
.sheet__cta--done { color: var(--color-green); border-color: var(--color-green); pointer-events: none; }

/* one-time share band after a registration */
.share-band { border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-rule); padding: var(--space-sm) 0 var(--space-md); margin: var(--space-md) 0; }
.share-band__title { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-green); margin: 0 0 6px; }
.share-band__text { font-size: var(--font-size-sm); line-height: 1.7; margin: 0 0 8px; color: var(--color-ink); word-break: break-all; }
.share-band__actions { display: flex; gap: var(--space-md); align-items: center; margin: 0; }
.share-band__btn { background: none; border: 0; border-bottom: 1px solid var(--color-ink); padding: 6px 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink); cursor: pointer; text-decoration: none; min-height: 32px; }
.share-band__btn:hover { color: var(--color-green); border-color: var(--color-green); }
.share-band__close { margin-left: auto; background: none; border: 0; color: var(--color-mid); font-size: 1rem; cursor: pointer; }

/* ---------- Text size: three steps (every size in this project is rem-based) ---------- */
html[data-textsize="large"] { font-size: 18px; }
html[data-textsize="xlarge"] { font-size: 20.5px; }
/* the plate and the masthead title are viewport-scaled, so give them a nudge too */
html[data-textsize="large"] .masthead__title { font-size: clamp(3.2rem, 9vw, 6.4rem); }
html[data-textsize="xlarge"] .masthead__title { font-size: clamp(3.4rem, 9vw, 6.4rem); }

.textsize { display: flex; align-items: center; gap: 6px; margin-top: var(--space-sm); }
.textsize__label { font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mid); margin-right: 2px; }
.textsize__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; min-height: 34px; padding: 0 8px;
  border: 1px solid var(--color-rule-strong); border-radius: 2px; background: transparent;
  color: var(--color-mid); font-family: var(--font-display); font-weight: 600; line-height: 1; cursor: pointer;
}
.textsize__btn--1 { font-size: 0.8rem; }
.textsize__btn--2 { font-size: 1rem; }
.textsize__btn--3 { font-size: 1.25rem; }
.textsize__btn:hover { color: var(--color-ink); border-color: var(--color-ink); }
.textsize__btn.is-active { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* inside the mobile menu the row sits on the paper, not on the dark header */
.textsize--nav { margin: var(--space-sm) 0; }
.textsize--nav .textsize__btn { min-width: 44px; min-height: 44px; }
@media (pointer: coarse) { .textsize__btn { min-width: 40px; min-height: 40px; } }

/* ---------- T27a: detail page reading order ---------- */
.detail-standard { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-mid); margin: 0 0 6px; }
.detail-badges { display: none !important; }
.detail-head { margin-bottom: var(--space-md); }
.detail-actions { margin: var(--space-md) 0 var(--space-lg); }
#page-cultivar .affiliate-section { display: none; } /* until T34 limits it to species with habitat context */
.plate-policy { font-size: 0.64rem; letter-spacing: 0.08em; color: var(--color-mid); margin: var(--space-sm) 0 0; }
.sheet--plate { padding: var(--space-lg); text-align: left; }
.gallery__empty { background: transparent; border: 0; padding: 0; }
.record-add { background: none; border: 0; border-bottom: 1px solid var(--color-ink); padding: 8px 0; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink); cursor: pointer; min-height: 36px; }
.record-add:hover { color: var(--color-green); border-color: var(--color-green); }
#add-origin-section { border-top: 1px solid var(--color-rule); padding-top: var(--space-sm); }
.record-add__details { margin: var(--space-md) 0; }
.record-add__details > summary { cursor: pointer; list-style: none; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mid); padding: 6px 0; border-bottom: 1px dotted var(--color-rule); }
.record-add__details > summary::-webkit-details-marker { display: none; }
.record-add__details[open] > summary { color: var(--color-ink); margin-bottom: var(--space-md); }
.related__exit { margin-top: var(--space-lg); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mid); display: flex; flex-wrap: wrap; gap: 6px 10px; }
.related__exit a { color: var(--color-ink); text-decoration: none; border-bottom: 1px solid var(--color-rule); }
.related__exit a:hover { color: var(--color-green); border-color: var(--color-green); }
.related__exit-sep { color: var(--color-rule-strong); }
.detail-colophon { margin-top: var(--space-2xl); padding-top: var(--space-sm); border-top: 1px solid var(--color-ink); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mid); }
.detail-colophon a { color: var(--color-ink); text-decoration: none; text-transform: none; letter-spacing: 0.04em; }
.detail-colophon__sep { margin: 0 8px; color: var(--color-rule-strong); }