/* The Creature Corner colors and the user-approved alternative font pairing. */
:root {
  --display: 'DynaPuff', 'Trebuchet MS', sans-serif;
  --script: 'Sacramento', 'Segoe Script', cursive;
  --serif: var(--display);
  --brand-orange: #FF7828;
  --brand-orange-hover: #F36B1B;
  --brand-tint: #FFF0E5;
  --accent: #A33D00;
  --ink: #292522;
  --forest: var(--ink);
  --paper: #FAFAF8;
  --soft: #F0EEEA;
  --muted: #625D58;
  --line: #D7D3CE;
  --control-line: #867C73;
}

/* Orange carries the brand; dark labels and edges keep actions readable. */
.button:not(.secondary):not(.danger), .search-form button {
  background: var(--brand-orange);
  border: 1px solid var(--accent);
  color: var(--ink);
  font-weight: 600;
}
.button:not(.secondary):not(.danger):hover, .search-form button:hover {
  background: var(--brand-orange-hover);
}
.button.secondary { border-color: var(--control-line); }
.button.danger { color: #FFF; }
.filter { border-color: var(--control-line); }
.filter[aria-pressed=true] {
  background: var(--brand-orange);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
}
.filter:hover, .button.secondary:hover { background: var(--brand-tint); }
.filter[aria-pressed=true]:hover { background: var(--brand-orange-hover); }
.brand-mark { background: var(--brand-orange); border-color: var(--ink); color: var(--ink); }
.nav a[aria-current=page] { border-bottom-color: var(--accent); color: var(--accent); font-weight: 600; }
.workspace-tabs button[aria-selected=true] { border-bottom: 3px solid var(--brand-orange); }
.tool-card, .text-card, .library-grid .text-card { border-top-color: var(--brand-orange); }
.comparison-heads article, .reference-card { border-top-color: var(--brand-orange); }
.care-note, .notice, .finder-summary, .keeper-return, .start-keeping { border-left-color: var(--brand-orange); }
.footer .wordmark em { color: var(--brand-orange); }
.footer a:focus-visible { outline-color: var(--brand-orange); }
.search-form:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.check-item input, .shop-row input { accent-color: var(--accent); }
.progress-track { background: #E0D9D2; }
.progress-fill { background: var(--accent); }
.hero h1 { max-width: 11em; }
.hero h1 em { color: var(--accent); }

/* Display lettering carries the brand; paragraphs and controls use --sans. */
.wordmark {
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.25;
}
.wordmark em {
  font-family: var(--script);
  font-size: 1.35em;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}
.hero h1 {
  font-size: clamp(2.25rem, 3.8vw, 3.4rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.025em;
  max-width: 11.6em;
  text-wrap: balance;
}
.hero h1 em {
  font-family: var(--script);
  font-size: 1.35em;
  font-weight: 400;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: 0;
  white-space: nowrap;
  padding-inline-start: .25em;
}
.page-intro h1, .article-header h1, .journal-detail h1 {
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.article-body h2, .prose-page h2 {
  font-size: clamp(1.5rem, 2.3vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: 0;
}
.species-card h3, .build-card h3, .tool-card h2, .category-link span {
  overflow-wrap: anywhere;
  letter-spacing: 0;
}

@media print {
  .care-note, .notice, .finder-summary { border-left-color: var(--ink); }
}

/* The full brand name stays legible in the compact mobile header. */
.wordmark { font-size: 24px; }
.wordmark .brand-words { display:flex; flex-direction:column; line-height:1.15; }
.wordmark .brand-words em { font-size:1.35em; line-height:1; }
.library-more { display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
@media(max-width:760px) { .wordmark { font-size:21px; } }

/* Care reminder settings share the notebook form system. */
.reminder-grid { align-items:start;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
.reminder-grid .field { display:grid;gap:8px;margin:20px 0; }
.reminder-grid input:not([type=checkbox]),.reminder-grid select { width:100%;min-height:46px;padding:10px;border:1px solid var(--line,#c6bcb3);border-radius:3px;font:inherit;background:white;color:var(--ink,#282522); }
.reminder-grid .check-item { margin:16px 0; }
.reminder-grid .verification { margin-top:28px;padding-top:20px;border-top:1px solid #c6bcb3; }
.verification form { display:grid;gap:12px;margin-top:20px; }
.wrap-anywhere { overflow-wrap:anywhere; }
.reminder-grid [role=status] { scroll-margin-top:110px; }
@media(max-width:760px){.reminder-grid{grid-template-columns:1fr;}}