/* =========================================================
   AngelfishTypes.com — "Field Ledger" design system
   A naturalist's expedition-notebook aesthetic: aged paper,
   ink-green type, specimen-tag data treatment. Freshwater
   sections lean moss green; saltwater sections lean reef blue.
   ========================================================= */

:root {
  /* Palette */
  --paper:        #EDE6D6;
  --paper-raised: #F5F0E4;
  --ink:          #2B2F26;
  --ink-soft:     #4B4F3F;
  --rule:         #8B7355;
  --moss:         #4A5D3A;      /* freshwater / general accent */
  --moss-dark:    #34432A;
  --reef:         #1F4E5F;      /* saltwater accent */
  --reef-dark:    #163944;
  --rust:         #A65E2E;      /* sparing highlight / warning */
  --gold:         #B7963E;      /* specimen-tag stamp color */

  /* Type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Source Serif 4", Georgia, serif;
  --font-mono:    "Space Mono", "Courier New", monospace;

  --radius: 3px;
  --max-w: 1180px;
}

.realm-freshwater { --realm: var(--moss); --realm-dark: var(--moss-dark); }
.realm-saltwater  { --realm: var(--reef); --realm-dark: var(--reef-dark); }
.realm-neutral    { --realm: var(--moss); --realm-dark: var(--moss-dark); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(ellipse at top left, rgba(139,115,85,0.06), transparent 60%),
    var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

a { color: var(--realm); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--realm-dark); }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper);
  padding: 10px 16px; z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--ink); line-height: 1.15; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); border-bottom: 1px solid var(--rule); padding-bottom: 0.3em; margin-top: 2.2em; }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1.1em; }

/* ---------- Header ---------- */
.site-header { background: var(--paper-raised); border-bottom: 2px solid var(--ink); position: sticky; top: 0; z-index: 100; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; gap: 24px; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { color: var(--realm); font-size: 1.1rem; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--ink); }
.brand-tagline { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }

.primary-nav > ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.primary-nav > ul > li { position: relative; }
.primary-nav > ul > li > a {
  display: block; padding: 10px 14px; text-decoration: none; color: var(--ink);
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.03em; text-transform: uppercase;
  border-radius: var(--radius);
}
.primary-nav > ul > li > a:hover { background: rgba(74,93,58,0.1); color: var(--realm-dark); }

.sub-nav {
  display: none; position: absolute; top: 100%; left: 0; width: max-content; min-width: 230px; max-width: 300px;
  background: var(--paper-raised); border: 1px solid var(--rule); box-shadow: 3px 4px 0 rgba(43,47,38,0.12);
  padding: 6px 0; z-index: 50;
}
/* Only the item explicitly opened by JS (see nav.js) shows its dropdown.
   This replaces a pure-:hover approach, which let adjacent dropdowns
   open simultaneously and overlap/clip each other. */
.has-children.is-open > .sub-nav { display: block; }
.sub-nav li a { display: block; padding: 8px 16px; font-family: var(--font-body); font-size: 0.92rem; text-transform: none; text-decoration: none; color: var(--ink); }
.sub-nav li a:hover { background: rgba(74,93,58,0.08); }

/* Desktop: the whole toggle is irrelevant, so keep it out of the tab order too. */
.nav-toggle-input, .nav-toggle { display: none; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { background: transparent; padding: 10px 0; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }
.breadcrumbs ol { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; color: var(--ink-soft); }
.breadcrumbs li:not(:last-child)::after { content: "\203A"; margin-left: 6px; color: var(--rule); }
.breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--realm); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--realm) 0%, var(--realm-dark) 100%);
  color: var(--paper);
  padding: 64px 0 76px;
  border-bottom: 3px solid var(--ink);
}
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: 0.08; pointer-events: none;
  z-index: 2;
  background-image: repeating-linear-gradient(0deg, #fff 0, #fff 1px, transparent 1px, transparent 28px);
}
/* The hero photo is a real <img> so it can be indexed, carry alt text and be
   fetched before the stylesheet parses. It is stacked explicitly rather than
   left to paint order: photo (0) -> tint (1) -> scanlines (2) -> text (3). */
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The specimen-plate illustrations are whole compositions -- ruled border,
   catalogue line, fish centred inside it -- so cropping them to fill a wide
   hero throws away the parts that make them read as plates. Fit the whole
   plate instead and park it on the right, which leaves the headline sitting
   on clean gradient rather than on the fish. Photographs still cover. */
.hero-media img[src$=".svg"] { object-fit: contain; object-position: right center; }
@media (max-width: 700px) {
  .hero-media img[src$=".svg"] { object-position: center bottom; opacity: 0.55; }
}
.hero.has-image::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  z-index: 1;
  background: linear-gradient(160deg, rgba(31,32,26,0.82) 0%, rgba(31,32,26,0.55) 55%, rgba(31,32,26,0.75) 100%);
}
.hero.has-image .hero-inner { position: relative; z-index: 3; }
.hero-inner { position: relative; max-width: 760px; }
.hero-eyebrow {
  display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; background: rgba(237,230,214,0.14); border: 1px solid rgba(237,230,214,0.4);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 18px;
}
.hero h1 { color: #fff; }
.hero-dek { font-size: 1.15rem; opacity: 0.92; max-width: 62ch; }
.hero-byline { font-family: var(--font-mono); font-size: 0.75rem; opacity: 0.75; margin-top: 18px; }

/* ---------- Specimen card (signature element) ---------- */
.specimen-tag {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--paper-raised); border: 1px solid var(--ink);
  padding: 8px 14px; font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--ink); transform: rotate(-1deg); box-shadow: 2px 3px 0 rgba(43,47,38,0.18);
}
.specimen-tag .entry-no { color: var(--gold); font-weight: 700; }

/* ---------- Quick facts table ---------- */
.quick-facts { width: 100%; border-collapse: collapse; margin: 1.4em 0 2em; font-family: var(--font-mono); font-size: 0.92rem; }
.quick-facts caption { text-align: left; font-family: var(--font-body); font-style: italic; color: var(--ink-soft); margin-bottom: 6px; }
.quick-facts th, .quick-facts td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.quick-facts th { width: 34%; color: var(--ink-soft); font-weight: 400; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.03em; }

/* ---------- Cards / gallery ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; margin: 1.6em 0 2.4em; }
.species-card { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.species-card:hover { transform: translateY(-3px); box-shadow: 4px 6px 0 rgba(43,47,38,0.14); }
.species-card .thumb { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--realm) 0%, var(--realm-dark) 100%); display: flex; align-items: center; justify-content: center; color: rgba(237,230,214,0.55); font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; padding: 10px; }
.species-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.species-card .body { padding: 16px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.species-card h3 { font-size: 1.05rem; margin-bottom: 0.35em; }
.species-card p { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 0; }

/* ---------- Content sections ---------- */
main { padding-bottom: 40px; }
.section { padding: 44px 0; }
.section-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.callout {
  background: var(--paper-raised); border-left: 3px solid var(--realm);
  padding: 16px 20px; margin: 1.6em 0; font-size: 0.96rem;
}
.callout strong { color: var(--realm-dark); }

/* Explanatory image in the body. Shown whole -- no crop, no tint -- because
   these carry labels that have to stay readable. */
.body-figure { margin: 2em 0 2.4em; }
.body-figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--ink); background: var(--paper-raised);
}
.body-figure figcaption {
  font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.5;
  color: var(--ink-soft); margin-top: 10px; padding-left: 2px;
}

.toc { background: var(--paper-raised); border: 1px solid var(--rule); padding: 18px 22px; margin: 1.6em 0 2.4em; }
.toc p.toc-label { font-family: var(--font-mono); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: 10px; }
.toc ul { columns: 2; column-gap: 24px; margin: 0; padding-left: 18px; font-size: 0.94rem; }
.toc li { break-inside: avoid; margin-bottom: 6px; }

/* ---------- Comparison table ---------- */
.compare-table { width: 100%; border-collapse: collapse; margin: 1.6em 0 2.4em; font-size: 0.94rem; }
.compare-table th, .compare-table td { border: 1px solid var(--rule); padding: 12px 14px; text-align: left; vertical-align: top; }
.compare-table thead th { background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.compare-table tbody th { font-weight: 600; background: var(--paper-raised); font-family: var(--font-mono); font-size: 0.82rem; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--rule); padding: 18px 0; }
.faq-item summary { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--font-mono); color: var(--realm); flex-shrink: 0; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin-top: 10px; color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; font-family: var(--font-mono); font-size: 0.82rem; text-transform: uppercase;
  letter-spacing: 0.04em; text-decoration: none; padding: 12px 22px; border: 1.5px solid currentColor; border-radius: var(--radius);
}
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: var(--realm-dark); border-color: var(--realm-dark); color: #fff; }
.btn-ghost { color: var(--paper); }
.btn-ghost:hover { background: rgba(237,230,214,0.14); color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--paper); margin-top: 50px; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; padding: 40px 24px; }
.footer-about { max-width: 480px; }
.footer-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; margin-bottom: 8px; }
.footer-about p:last-child { color: rgba(237,230,214,0.72); font-size: 0.92rem; }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links a { color: var(--paper); font-family: var(--font-mono); font-size: 0.82rem; text-decoration: none; }
.footer-links a:hover { color: var(--gold); }
.footer-bottom { border-top: 1px solid rgba(237,230,214,0.18); padding: 16px 24px; font-family: var(--font-mono); font-size: 0.72rem; color: rgba(237,230,214,0.55); }

/* ---------- Two-worlds split (home) ---------- */
.two-worlds { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 2em 0; }
.world-card { border: 1px solid var(--ink); padding: 28px 26px; background: var(--paper-raised); }
.world-card.world-fresh { border-top: 4px solid var(--moss); }
.world-card.world-salt { border-top: 4px solid var(--reef); }
.world-card .kicker { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }

@media (max-width: 860px) {
  .primary-nav { position: fixed; inset: 61px 0 0 0; background: var(--paper); transform: translateX(100%); transition: transform 0.2s ease; overflow-y: auto; padding: 20px; }
  .primary-nav ul { flex-direction: column; }
  .sub-nav { display: block; position: static; border: none; box-shadow: none; padding-left: 14px; }
  .nav-toggle { display: flex; flex-direction: column; gap: 5px; cursor: pointer; z-index: 110; }
  .nav-toggle span { width: 24px; height: 2px; background: var(--ink); }
  /* Visually hidden rather than display:none, so the checkbox stays focusable
     and stays in the accessibility tree — it is the only way to reach the menu
     by keyboard or screen reader. display:none made the mobile nav unreachable. */
  .nav-toggle-input {
    display: block; position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden; border: 0; white-space: nowrap;
    clip: rect(0 0 0 0); clip-path: inset(50%);
  }
  .nav-toggle-input:focus-visible ~ .nav-toggle { outline: 2px solid var(--reef); outline-offset: 6px; }
  .nav-toggle-input:checked ~ .primary-nav { transform: translateX(0); }
  .two-worlds { grid-template-columns: 1fr; }
  .toc ul { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .species-card { transition: none; }
}