/* Protozoan PTM Database — champagne-gold theme (v3) */

:root {
  --ivory: #FAF8F2;
  --surface: #FFFFFF;
  --gold-100: #F7F0DD;
  --gold-200: #F0E6CC;
  --gold-300: #E5D6AE;
  --gold-400: #D4B976;
  --gold-500: #C9A75C;
  --gold-600: #AE8B45;
  --gold-700: #8C6D2F;
  --gold-800: #6F5524;
  --ink-900: #2B241A;
  --ink-700: #4A4133;
  --ink-500: #6E6455;
  --line: #E8E0CB;
  --success: #5F7350;
  --danger: #A3574B;
}

body { font-feature-settings: "tnum" 1; }

/* Gold hairline (nav bottom / card top) */
.gold-hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-400) 18%, var(--gold-500) 50%, var(--gold-400) 82%, transparent);
}

/* Card: hairline border + top gold line + faint shadow */
.card-gold {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  position: relative;
  box-shadow: 0 1px 3px rgba(43, 36, 26, 0.05);
  overflow: hidden;
}
.card-gold::before {
  content: "";
  position: absolute; top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
}
.card-gold--flat::before { display: none; }

/* Buttons */
.btn-ink {
  background: var(--ink-900); color: var(--ivory);
  border-radius: 8px; padding: 8px 22px; font-size: 14px; font-weight: 500;
  transition: color .2s;
}
.btn-ink:hover { color: var(--gold-300); }

.btn-gold-ghost {
  background: transparent; color: var(--gold-800);
  border: 1px solid var(--gold-400); border-radius: 8px;
  padding: 8px 22px; font-size: 14px; font-weight: 500;
  transition: background .2s, border-color .2s;
}
.btn-gold-ghost:hover { background: var(--gold-100); border-color: var(--gold-600); }

/* Small-caps letterspaced label */
.label-caps {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-700); font-weight: 600;
}

/* KPI serif gold numerals */
.kpi-number {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 44px; font-weight: 600; line-height: 1.1;
  color: var(--gold-700);
}

/* Badge: champagne base, bronze text */
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 9999px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
}
.badge-gold { background: var(--gold-100); color: var(--gold-800); }
.badge-success { background: #EBEEE5; color: var(--success); }
.badge-warn { background: #F6E9E4; color: var(--danger); }

/* Tables */
table.data-table { border-collapse: collapse; width: 100%; }
table.data-table th, table.data-table td {
  padding: 9px 12px; text-align: left;
  border-bottom: 1px solid var(--line);
}
table.data-table th {
  background: var(--gold-100);
  font-weight: 600; font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--gold-800);
}
table.data-table tbody tr:hover { background: var(--gold-50); }

/* Form controls */
.input-gold {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; font-size: 13px; background: var(--surface);
  color: var(--ink-900);
}
.input-gold:focus { outline: none; border-color: var(--gold-500); }

/* Chart containers */
.chart { width: 100%; height: 420px; }
.chart-sm { width: 100%; height: 280px; }

.fade-in { animation: fade .3s ease; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

/* Quiet admin link */
.admin-quiet-link {
  font-size: 12px; color: var(--ink-500);
  text-decoration: none; transition: color .2s;
}
.admin-quiet-link:hover { color: var(--gold-700); }

/* ============ Premium redesign (v4) ============ */

/* Hero: warm ivory base + top gold sheen + faint vertical gradient */
.hero {
  background:
    radial-gradient(1200px 420px at 50% -140px, rgba(201,167,92,0.16), rgba(201,167,92,0.05) 45%, transparent 70%),
    linear-gradient(180deg, #FDFBF5 0%, var(--ivory) 60%, var(--ivory) 100%);
}
/* Thin gold rules flanking the eyebrow label */
.rule { display:inline-block; width:56px; height:1px;
  background: linear-gradient(90deg, transparent, var(--gold-500)); }
.rule--r { background: linear-gradient(90deg, var(--gold-500), transparent); }

/* Ornament divider: gold diamond + hairline rules */
.ornament { display:flex; align-items:center; justify-content:center; gap:14px; }
.ornament::before, .ornament::after { content:""; height:1px; width:72px;
  background: linear-gradient(90deg, transparent, var(--gold-400)); }
.ornament::after { background: linear-gradient(90deg, var(--gold-400), transparent); }
.ornament i { width:7px; height:7px; transform: rotate(45deg);
  background: var(--gold-500); display:inline-block; }

/* Annual-report stats band: hairline top/bottom + vertical hairline dividers */
.stat-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #FFFFFF, #FDFAF3);
}
.stat-band > div + div { border-left: 1px solid var(--line); }
.kpi-number { font-size: 46px; font-weight: 500; letter-spacing: .01em; }

/* Specimen-plate clade cards: hairline border + inner gold inset frame + hover lift */
.clade-card {
  background: linear-gradient(180deg, #FFFFFF, #FCF9F1);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(201,167,92,0.0), 0 1px 3px rgba(43,36,26,0.05);
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.clade-card::after { content:""; position:absolute; inset:8px;
  border:1px solid rgba(201,167,92,0.28); border-radius:2px; pointer-events:none;
  transition: border-color .25s ease; }
.clade-card:hover { transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(140,109,47,0.14); border-color: var(--gold-400); }
.clade-card:hover::after { border-color: rgba(201,167,92,0.55); }
.clade-genus { font-family:"Cormorant Garamond",Georgia,serif; font-style:italic;
  font-size:26px; color:var(--ink-900); line-height:1.15; }
.clade-explore { font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-600); }

/* Hero display heading — restrained serif, no flashy accent */
.display-hero { font-family:"Cormorant Garamond",Georgia,serif; font-weight:500;
  letter-spacing:0.005em; line-height:1.14; color:var(--ink-900); }