/* Hallmark · genre: editorial · macrostructure: Catalogue · theme: custom (vibe: "maderería de oficio, papel y caoba")
 * paper oklch(95.5% 0.012 78) · accent oklch(43% 0.115 34) caoba · Newsreader + Hanken Grotesk + IBM Plex Mono
 * axes: light / roman-serif / warm · enrichment: none (typography only) · nav: N6 · footer: Ft4
 * tone: editorial de oficio · audience: pescadores, ganaderos, agricultores, carpinteros · use: consultar especie por uso
 * Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--space-md); }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: var(--rule-hair); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--color-accent); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
cite { font-style: italic; }
.mono { font-family: var(--font-mono); }

.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }

.skip { position: absolute; left: var(--space-sm); top: -4rem; background: var(--color-ink); color: var(--color-paper); padding: var(--space-2xs) var(--space-sm); z-index: 10; }
.skip:focus { top: var(--space-sm); }

/* N6 · masthead */
.mast { text-align: center; padding: var(--space-md) var(--page-gutter) 0; max-width: var(--page-max); margin-inline: auto; }
.mast__line {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-muted);
}
.mast__name {
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-mast);
  letter-spacing: -0.03em; line-height: 0.9; margin-top: var(--space-xs);
  font-variation-settings: "opsz" 72;
}
.mast__sub {
  display: block; font-style: italic; font-weight: 400; font-size: var(--text-lg);
  letter-spacing: 0.01em; line-height: 1.4; color: var(--color-neutral); margin-top: var(--space-2xs);
}
.mast__nav { margin-top: var(--space-md); padding-block: var(--space-2xs); border-top: var(--rule-hair) solid var(--color-rule); border-bottom: 3px double var(--color-rule-2); }
.mast__nav ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 var(--space-lg); }
.mast__nav a {
  display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap;
  font-size: var(--text-sm); font-weight: 500; text-decoration: none; color: var(--color-ink-2);
}
.mast__nav a:hover { color: var(--color-accent); }

/* Intro */
.intro {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl);
  align-items: end; padding-block: var(--space-2xl) var(--space-xl);
}
.display {
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-display);
  line-height: var(--lh-tight); letter-spacing: var(--tracking-display);
  font-variation-settings: "opsz" 72; text-wrap: balance; overflow-wrap: anywhere; min-width: 0;
}
.lede { margin-top: var(--space-md); max-width: var(--measure); font-size: var(--text-md); color: var(--color-ink-2); text-wrap: pretty; }

.who { border-top: var(--rule-hair) solid var(--color-ink); }
.who li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.who__item {
  display: grid; gap: var(--space-3xs); padding: var(--space-sm) 0; text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
.who__name { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--lh-snug); }
.who__name::after { content: "→"; margin-left: 0.35em; font-family: var(--font-body); font-size: var(--text-md); color: var(--color-muted); transition: transform var(--dur-base) var(--ease-out); display: inline-block; }
.who__desc { font-size: var(--text-sm); color: var(--color-muted); max-width: 40ch; }
.who__item:hover .who__name, .who__item:focus-visible .who__name { color: var(--color-accent); }
.who__item:hover .who__name::after { transform: translateX(4px); color: var(--color-accent); }

/* Catalogue */
.catalog { padding-block: var(--space-2xl) var(--space-xl); }
.catalog__head { display: grid; gap: var(--space-2xs); max-width: 46rem; }
.h2 {
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl);
  line-height: var(--lh-snug); letter-spacing: -0.012em; text-wrap: balance;
}
.note { font-size: var(--text-sm); color: var(--color-muted); }

.filter { border: 0; margin: var(--space-lg) 0 0; padding: var(--space-sm) 0; border-block: var(--rule-hair) solid var(--color-rule); }
.filter__legend {
  float: left; width: 100%; padding: 0; margin-bottom: var(--space-xs);
  font-family: var(--font-display); font-style: italic; font-size: var(--text-lg);
}
.filter__chips { clear: both; display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-chip);
  font-size: var(--text-sm); font-weight: 500; white-space: nowrap; color: var(--color-ink-2);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.chip:hover span { border-color: var(--color-ink); background: var(--color-paper-2); }
.chip input:active + span { transform: translateY(1px); }
.chip input:checked + span { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.chip input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.filter__count { margin-top: var(--space-xs); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }

.catalog__body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: var(--space-xl); align-items: start; margin-top: var(--space-lg);
}

.species {
  counter-reset: sp; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  column-gap: var(--space-lg);
}
.sp {
  counter-increment: sp; display: grid; align-content: start; gap: var(--space-3xs);
  padding: var(--space-sm) 0 var(--space-md); border-top: var(--rule-hair) solid var(--color-rule);
}
.sp::before {
  content: counter(sp, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); letter-spacing: var(--tracking-label);
}
.sp[data-n]::before { content: attr(data-n); }
.sp[hidden] { display: none; }
.sp.is-in { animation: sp-in var(--dur-slow) var(--ease-out) both; }
@keyframes sp-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sp__name { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); line-height: var(--lh-snug); letter-spacing: -0.01em; }
.sp__alt { font-style: italic; font-weight: 400; font-size: var(--text-md); color: var(--color-muted); }
.sp__sci { font-family: var(--font-display); font-style: italic; font-size: var(--text-sm); color: var(--color-neutral); }
.sp__uses { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); text-wrap: pretty; }
.sp__uses mark {
  background: none; color: var(--color-ink);
  text-decoration: underline 2px var(--color-accent); text-underline-offset: 0.18em; text-decoration-skip-ink: none;
}

/* Questions aside */
.ask {
  position: sticky; top: var(--space-md);
  background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule);
  padding: var(--space-md);
}
.ask__title { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); line-height: var(--lh-snug); }
.ask__for { margin-top: var(--space-2xs); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-accent); }
.ask__list { counter-reset: q; margin-top: var(--space-sm); display: grid; gap: var(--space-xs); }
.ask__list li {
  counter-increment: q; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr);
  font-size: var(--text-sm); color: var(--color-ink-2); text-wrap: pretty;
}
.ask__list li::before { content: counter(q) "."; font-family: var(--font-display); font-style: italic; color: var(--color-muted); }
.ask__list .is-extra { color: var(--color-ink); }

.copy {
  margin-top: var(--space-md); width: 100%; min-height: 48px; padding: 0 var(--space-md);
  border: 0; border-radius: var(--radius-chip); cursor: pointer;
  background: var(--color-accent); color: var(--color-on-accent);
  font: 600 var(--text-sm)/1 var(--font-body); letter-spacing: 0.01em; white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.copy:hover { background: var(--color-accent-2); }
.copy:active { transform: translateY(1px); }
.copy:disabled { opacity: 0.5; cursor: not-allowed; }
.copy[data-state="copied"] { background: var(--color-ink); }
.copy[data-state="error"] { background: var(--color-neutral); }
.ask__hint { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); text-align: center; }

.source { margin-top: var(--space-lg); font-size: var(--text-xs); color: var(--color-muted); max-width: var(--measure); }

/* Procedencia */
.origin { background: var(--color-ink); color: var(--color-paper); padding-block: var(--space-2xl); margin-top: var(--space-xl); }
.origin__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); }
.origin__title {
  font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: var(--text-display);
  line-height: var(--lh-tight); letter-spacing: var(--tracking-display); overflow-wrap: anywhere; min-width: 0;
}
.origin__body { display: grid; gap: var(--space-sm); max-width: var(--measure); font-size: var(--text-md); color: var(--color-paper-3); }
.origin__body strong { color: var(--color-paper); font-weight: 600; }
.origin__body sup a { color: var(--color-paper); text-decoration: none; padding-inline: 0.1em; }
.origin a:hover { text-decoration-color: var(--color-paper); }
.notes { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule-2); display: grid; gap: var(--space-3xs); font-size: var(--text-xs); color: var(--color-rule); counter-reset: n; }
.notes li { counter-increment: n; }
.notes li::before { content: counter(n) ". "; }

/* Ft4 · colophon */
.colophon { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg); align-items: baseline; padding-block: var(--space-xl) var(--space-2xl); }
.colophon__mark { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; white-space: nowrap; }
.colophon__mark em { font-weight: 400; color: var(--color-neutral); }
.colophon__text { font-size: var(--text-xs); line-height: 1.7; color: var(--color-muted); }

/* Responsive */
@media (max-width: 60rem) {
  .intro { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-top: var(--space-xl); }
  .catalog__body { grid-template-columns: minmax(0, 1fr); }
  .ask { position: static; }
  .origin__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
}
@media (max-width: 40rem) {
  .mast__nav ul { gap: 0 var(--space-md); }
  .catalog { padding-top: var(--space-xl); }
  .h2 { font-size: var(--text-xl); }
  .chip span { padding: 0 var(--space-xs); }
  .colophon { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; }
  .sp.is-in { animation: sp-fade 120ms linear both; }
  @keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }
  .who__item:hover .who__name::after { transform: none; }
}