/* GARDEN — shared aesthetic foundation
   Italian botanical compendium × Kew monograph × hot-press cotton paper */

@property --tod {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

:root {
  /* Static palette */
  --sage: #7a9967;
  --deep-sage: #3d5630;
  --bone: #f0ead2;
  --glass: #f7f7f0;
  --terracotta: #a04c2b;
  --bloom: #d68a6f;
  --gold: #d9b265;
  --ink: #2a2417;
  --ink-soft: #4a3f2a;
  --ledger: #b8a880;

  /* Time-of-day modulated tones. Default to morning; the timer in
     js/timeofday.js drives --tod 0→1→2 (morning→noon→dusk). */
  --paper: oklch(95% 0.012 80);
  --paper-edge: oklch(90% 0.025 75);
  --type: oklch(22% 0.025 60);
  --rule: oklch(78% 0.02 75);
  --tint: oklch(64% 0.05 100);

  --leading-body: 1.6;
  --rule-w: 0.5px;
}

@font-face {
  font-family: 'Garden Hand';
  src: local('Homemade Apple');
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--type);
  font-family: 'Crimson Text', 'EB Garamond', Georgia, serif;
  font-size: 17px;
  line-height: var(--leading-body);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

body {
  background-image:
    /* hot-press grain */
    radial-gradient(circle at 30% 20%, rgba(122, 153, 103, 0.025), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(160, 76, 43, 0.018), transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.13  0 0 0 0 0.10  0 0 0 0 0.06  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  min-height: 100vh;
}

/* ─────────────────────── Type ─────────────────────── */
.display, h1, .hero-title {
  font-family: 'Italiana', 'Cormorant Garamond', serif;
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 0.92;
}

.latin, .binomial, em.latin {
  font-style: italic;
  font-family: 'Crimson Text', Georgia, serif;
}

.mono, .plot-id, .addr, code {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 0.78em;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.smallcap {
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.68rem;
  color: var(--ink-soft);
}

.hand {
  font-family: 'Homemade Apple', 'Caveat', cursive;
  font-weight: 400;
}

.rule {
  border: 0;
  border-top: var(--rule-w) solid var(--rule);
  margin: 1.5rem 0;
}

a { color: var(--terracotta); text-decoration: none; border-bottom: 1px dotted currentColor; }
a:hover { color: var(--deep-sage); }

/* ─────────────────────── Top frame ─────────────────────── */
.folio {
  position: fixed;
  top: 22px;
  left: 28px;
  right: 28px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  z-index: 10;
  pointer-events: none;
}
.folio .nav { pointer-events: auto; display: flex; gap: 1.4rem; }
.folio .nav a { color: var(--ink-soft); border-bottom: 0; opacity: 0.7; }
.folio .nav a:hover, .folio .nav a.active { opacity: 1; color: var(--deep-sage); border-bottom: 0; }
.folio .mark { font-family: 'Italiana', serif; font-size: 18px; letter-spacing: 0.18em; text-transform: none; color: var(--deep-sage); }

/* ─────────────────────── Page frame ─────────────────────── */
.page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 110px 56px 220px;
  position: relative;
}

.signature-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 0.6rem;
  border-bottom: var(--rule-w) solid var(--rule);
  margin-bottom: 2.6rem;
}

/* ─────────────────────── Cards / plates ─────────────────────── */
.plate {
  background: var(--glass);
  border: var(--rule-w) solid var(--rule);
  padding: 1.6rem 1.8rem 1.4rem;
  position: relative;
}
.plate::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: var(--rule-w) solid color-mix(in oklch, var(--rule), transparent 55%);
  pointer-events: none;
}

.plate .plate-no {
  position: absolute;
  top: -10px;
  left: 1.6rem;
  background: var(--paper);
  padding: 0 0.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--terracotta);
}

/* ─────────────────────── Specimen container ─────────────────────── */
.specimen {
  position: relative;
  display: inline-block;
  transform: rotate(var(--lean, 0deg));
  transform-origin: 50% 92%;
  /* Shorter transition so frequent --lean updates don't stack up an
     interpolation queue. 280ms feels lively without piling work on the
     compositor when the cursor moves. */
  transition: transform 280ms cubic-bezier(0.2, 0.65, 0.2, 1);
  will-change: transform;
}
.specimen svg { display: block; overflow: visible; }

/* watercolour wash (SVG-filter fallback for browsers without Houdini) */
.watercolour {
  filter: url(#wc-wash);
}

/* goldleaf overlay removed: the noise filter inside .goldleaf was bleeding
   yellowish tones onto specimens that happened to receive the overlay,
   which read as an inconsistency. Cultivars are now signaled by a small
   gold dot in the label, not a full-canvas overlay. */

/* ─────────────────────── Roots (below-fold) ─────────────────────── */
.roots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 360px;
  pointer-events: none;
  opacity: 0.45;
  z-index: 0;
}

/* ─────────────────────── Pollen ─────────────────────── */
#pollen-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  mix-blend-mode: multiply;
}

/* ─────────────────────── Buttons ─────────────────────── */
.btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 12px 22px;
  border: var(--rule-w) solid var(--deep-sage);
  background: transparent;
  color: var(--deep-sage);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.btn:hover { background: var(--deep-sage); color: var(--bone); }
.btn.solid { background: var(--deep-sage); color: var(--bone); }
.btn.solid:hover { background: var(--terracotta); border-color: var(--terracotta); }

.btn-bind {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 7px 14px;
  border: 0.5px solid var(--deep-sage);
  background: var(--paper);
  color: var(--deep-sage);
  cursor: pointer;
  pointer-events: auto;
}
.btn-bind:hover { background: var(--deep-sage); color: var(--bone); }

.wallet-pill {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  padding: 7px 14px;
  border: 0.5px solid var(--deep-sage);
  color: var(--deep-sage);
  background: var(--glass);
  pointer-events: auto;
}

.folio .x-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0.5px solid var(--deep-sage);
  background: var(--paper);
  color: var(--deep-sage);
  pointer-events: auto;
  margin-right: 10px;
  text-decoration: none;
  border-bottom: 0.5px solid var(--deep-sage);
  transition: background 200ms ease, color 200ms ease;
}
.folio .x-link:hover { background: var(--deep-sage); color: var(--bone); }
.folio .x-link svg { width: 12px; height: 12px; display: block; }

.folio-right {
  display: inline-flex;
  align-items: center;
  pointer-events: auto;
}

/* ─────────────────────── Grid ─────────────────────── */
.grid {
  display: grid;
  gap: 28px;
}
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-2 { grid-template-columns: 1fr 1fr; }

@media (prefers-reduced-motion: reduce) {
  .specimen { transition: none; }
  .goldleaf { animation: none; }
}