/* ============================================================
   SEQ WILDLIFE RESCUE
   Dark-ground rebuild. The crest and banner artwork are supplied
   on near-black (#020202 / #0B0B0B), so the page ground sits at
   #080909 and both drop straight onto it with no visible edge.

   Ocean blue carries every accent. Red is reserved — it appears
   only on the snakebite/000 alert and on the venom chip for
   dangerously venomous species, so that where it does show up it
   still means "danger", not "link".
   ============================================================ */
:root {
  color-scheme: dark;

  /* grounds */
  --ink: #080909;        /* page — matches the artwork's black */
  --panel: #131615;      /* lifted surface: cards, alternating sections */
  --panel-2: #1B1F1E;    /* inputs, hover states */
  --sea: #06212B;        /* ocean sections */

  /* text on dark */
  --cream: #F6F4ED;
  --body: #C6CAC4;
  --dim: #949893;
  --dim-2: #6C706B;

  /* structure — --rule is decorative grid; --rule-hi clears 3:1 on ink for
     boundaries that carry meaning, and --edge is for interactive borders
     (form fields), which WCAG treats as UI components. */
  --rule: #333836;
  --rule-hi: #5C625E;
  --edge: #7A807B;

  /* ocean accent */
  --ocean: #17738F;      /* fills */
  --ocean-dk: #0C4356;
  --ocean-br: #57C8EA;   /* bright accent on dark */

  /* status — red is deliberately scarce */
  --red: #E8574C;
  --red-bg: rgba(232, 87, 76, .09);
  --green: #5FBE73;
  --amber: #E0AC4B;

  --f-display: 'Archivo', system-ui, sans-serif;
  --f-body: 'Public Sans', system-ui, sans-serif;
  --f-data: 'IBM Plex Mono', ui-monospace, monospace;

  /* Strong curves — built-in CSS easings are too weak to read as deliberate.
     ease-out for anything entering or exiting; never ease-in on UI. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  --gut: clamp(18px, 5vw, 76px);
  --maxw: 1260px;
  --nav-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  margin: 0;
}

::selection { background: var(--ocean); color: var(--cream); }
:focus-visible { outline: 3px solid var(--ocean-br); outline-offset: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ocean); color: var(--cream); padding: 12px 18px;
  font-family: var(--f-data); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
}
.skip:focus { left: 0; }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

.sec {
  position: relative;
  padding-block: clamp(58px, 8vw, 118px);
  background: var(--ink);
}
.sec--panel { background: var(--panel); border-block: 2px solid var(--rule); }
.sec--sea { background: var(--sea); border-block: 2px solid var(--rule); }
.sec--tight { padding-block: clamp(40px, 5vw, 70px); }

.eyebrow {
  font-family: var(--f-data); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; font-weight: 500; color: var(--cream);
  display: block; margin-bottom: 18px;
  border-bottom: 2px solid var(--rule-hi); padding-bottom: 10px;
}
.eyebrow b { font-weight: 500; color: var(--ocean-br); }

.h1 { font-size: clamp(38px, 7vw, 84px); letter-spacing: -.05em; font-weight: 900; }
.h2 { font-size: clamp(28px, 5vw, 56px); letter-spacing: -.045em; font-weight: 900; }
.h3 { font-size: clamp(20px, 2.6vw, 30px); letter-spacing: -.035em; font-weight: 800; }

.lede {
  font-size: clamp(16.5px, 1.6vw, 19.5px);
  color: var(--body); max-width: 62ch; margin-top: 20px;
}
.prose { max-width: 68ch; color: var(--body); }
.prose p + p { margin-top: 16px; }
.small { font-size: 14.5px; color: var(--dim); }
.mono {
  font-family: var(--f-data); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim);
}

/* reveal on scroll */
.r {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.r.in { opacity: 1; transform: none; }
.r[data-d="1"] { transition-delay: .05s } .r[data-d="2"] { transition-delay: .1s }
.r[data-d="3"] { transition-delay: .15s } .r[data-d="4"] { transition-delay: .2s }
.r[data-d="5"] { transition-delay: .25s } .r[data-d="6"] { transition-delay: .3s }
.r[data-d="7"] { transition-delay: .35s } .r[data-d="8"] { transition-delay: .4s }

/* Species grids reveal as a group — 40ms apart so the last card is in
   under a third of a second. */
.species .spec:nth-child(2) { transition-delay: .04s }
.species .spec:nth-child(3) { transition-delay: .08s }
.species .spec:nth-child(4) { transition-delay: .12s }
.species .spec:nth-child(5) { transition-delay: .16s }
.species .spec:nth-child(6) { transition-delay: .2s }
.species .spec:nth-child(7) { transition-delay: .24s }
.species .spec:nth-child(8) { transition-delay: .28s }
.species .spec:nth-child(9) { transition-delay: .32s }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border: 2px solid var(--cream);
  font-family: var(--f-display); font-size: 14px; font-weight: 700;
  text-decoration: none; background: none; color: var(--cream);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out),
              background .18s ease, border-color .18s ease;
}
.btn--pri { background: var(--cream); color: var(--ink); }
.btn--ocean { background: var(--ocean); color: var(--cream); border-color: var(--ocean); }
.btn--sm { padding: 9px 15px; font-size: 12.5px; }
.btn svg { width: 15px; height: 15px; flex: none; }

/* Hover motion only where a real pointer exists — on touch, a tap fires a
   phantom hover and the lift sticks until you tap elsewhere. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--rule-hi); }
  .btn--pri:hover { box-shadow: 4px 4px 0 var(--ocean); }
  .btn--ocean:hover {
    background: var(--ocean-dk); border-color: var(--ocean-dk);
    box-shadow: 4px 4px 0 var(--ocean-br);
  }
}

/* Press feedback. Asymmetric on purpose: the press registers instantly, the
   release eases back. */
.btn:active, button:active:not(:disabled), .acc summary:active {
  transform: translateY(1px) scale(.985);
  transition-duration: .06s;
}

.btns { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  background: var(--ink); border-bottom: 2px solid var(--rule);
  transition: transform .22s var(--ease-out);
}
.nav--hidden { transform: translateY(-100%); }
.nav__in {
  max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gut);
  height: var(--nav-h); display: flex; align-items: center; gap: 24px;
}
/* No frame on the crest — its own black is the page ground, so it reads as
   artwork sitting on the page rather than an image in a box. */
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.mark img { width: 36px; height: 36px; }
.mark__t { font-family: var(--f-display); font-weight: 900; font-size: 15px; letter-spacing: -.04em; line-height: 1; }
.mark__s {
  display: block; font-family: var(--f-data); font-weight: 500;
  font-size: 8.5px; letter-spacing: .17em; color: var(--dim);
  text-transform: uppercase; margin-top: 3px;
}
.nav__links {
  display: flex; gap: 20px; margin-left: auto; color: var(--body);
  font-family: var(--f-data); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
}
.nav__links a { text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.nav__links a:hover { color: var(--cream); border-color: var(--cream); }
.nav__links a[aria-current="page"] { color: var(--cream); border-color: var(--ocean-br); }
.nav__cta { display: inline-flex; }
.progress {
  height: 3px; background: var(--ocean-br);
  transform: scaleX(0); transform-origin: left center; will-change: transform;
}

.burger {
  display: none; width: 40px; height: 34px; border: 2px solid var(--cream);
  padding: 8px 7px; margin-left: auto; flex-direction: column; justify-content: space-between;
}
.burger span { display: block; height: 2px; background: var(--cream); transition: transform .2s var(--ease-out), opacity .2s var(--ease-out); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.drawer {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 89;
  background: var(--ink); border-bottom: 2px solid var(--rule);
  padding: 8px var(--gut) 26px; display: none;
}
.drawer.open { display: block; }
.drawer a {
  display: block; text-decoration: none; padding: 15px 0;
  border-bottom: 2px solid var(--rule);
  font-family: var(--f-display); font-weight: 800; font-size: 21px; letter-spacing: -.03em;
}
.drawer .btn { display: flex; margin-top: 22px; width: 100%; justify-content: center; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding-top: calc(var(--nav-h) + clamp(38px, 6vw, 78px));
  padding-bottom: clamp(44px, 6vw, 82px);
  border-bottom: 2px solid var(--rule);
}
/* The artwork carries the brand, so it takes the larger share of the row and
   the text column is held to a comfortable measure rather than filling space. */
.hero__grid {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(20px, 3vw, 44px); align-items: center;
}
.stamp {
  display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid var(--ocean-br); background: var(--ocean); color: #fff;
  padding: 9px 16px;
  font-family: var(--f-data); font-size: 12.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: 24px; transform: rotate(-1.2deg);
  text-decoration: none;
}
/* Sized to fit the narrower text column — the artwork now takes the larger
   share of the row, so the headline can no longer run at full viewport scale. */
.hero__title {
  font-size: clamp(40px, 6.4vw, 88px); font-weight: 900;
  letter-spacing: -.055em; line-height: .88;
}
.hero__strap {
  font-family: var(--f-data); font-size: clamp(11px, 1.4vw, 15px);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ocean-br);
  margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--rule-hi);
}
.hero__sub { margin-top: 20px; font-size: clamp(15.5px, 1.5vw, 18.5px); color: var(--body); max-width: 50ch; }
.hero__meta {
  margin-top: 32px; padding-top: 16px; border-top: 2px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  font-family: var(--f-data); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim);
}
/* Unframed: the artwork's own black is the page ground. It is allowed to run
   past the right gutter to the viewport edge, which buys real size without
   pushing the headline and CTAs down the page. */
.hero__art { min-width: 0; }
.hero__art img { width: 100%; height: auto; }
@media (min-width: 1001px) {
  .hero__art { margin-right: calc(0px - var(--gut)); }
}

/* interior page header */
.phead {
  padding-top: calc(var(--nav-h) + clamp(30px, 4.5vw, 58px));
  padding-bottom: clamp(30px, 4vw, 54px);
  border-bottom: 2px solid var(--rule);
}
.crumbs {
  font-family: var(--f-data); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 20px;
}
.crumbs a { text-decoration: none; border-bottom: 1px solid var(--rule-hi); }
.crumbs a:hover { color: var(--ocean-br); border-color: var(--ocean-br); }
.crumbs span { color: var(--dim-2); padding: 0 6px; }

/* ============================================================
   STAT STRIP
   ============================================================ */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 2px solid var(--rule); background: var(--panel);
}
.stat { padding: clamp(20px, 3vw, 36px) clamp(12px, 1.6vw, 24px); border-right: 2px solid var(--rule); }
.stat:last-child { border-right: 0; }
.stat b {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(26px, 4vw, 52px); letter-spacing: -.055em;
  display: block; line-height: .9;
}
.stat small {
  font-family: var(--f-data); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ocean-br); display: block; margin-bottom: 12px;
}
.stat p { margin-top: 10px; font-size: 13.5px; line-height: 1.42; color: var(--body); }

/* ============================================================
   BORDERED CELL GRID
   ============================================================ */
.cells {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--rule); border-left: 2px solid var(--rule);
  margin-top: 44px;
}
.cells--4 { grid-template-columns: repeat(4, 1fr); }
.cells--2 { grid-template-columns: repeat(2, 1fr); }
.cell {
  border-right: 2px solid var(--rule); border-bottom: 2px solid var(--rule);
  padding: 24px 22px 30px;
}
.cell__n { font-family: var(--f-data); font-size: 10px; letter-spacing: .16em; display: block; color: var(--dim); }
.cell h3 { font-size: 19px; font-weight: 800; letter-spacing: -.03em; margin-top: 14px; }
.cell p { margin-top: 9px; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.cell em {
  font-style: normal; font-family: var(--f-data); font-size: 11px;
  display: block; margin-top: 14px; letter-spacing: .05em; color: var(--ocean-br);
}
.cell em a { text-decoration: none; border-bottom: 1px solid currentColor; }

/* ============================================================
   SPLIT
   ============================================================ */
.split { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(26px, 4.5vw, 64px); align-items: start; }
.split--even { grid-template-columns: 1fr 1fr; }
.split--stretch { align-items: stretch; }
.split--rev > *:first-child { order: 2; }

/* ============================================================
   NUMBERED STEPS
   ============================================================ */
.steps { border-top: 2px solid var(--rule); }
.step {
  display: grid; grid-template-columns: 34px 1fr; gap: 16px;
  padding: 20px 2px; border-bottom: 2px solid var(--rule);
}
.step__n { font-family: var(--f-data); font-size: 11px; letter-spacing: .1em; color: var(--ocean-br); padding-top: 4px; }
.step h3 { font-size: clamp(17px, 1.9vw, 21px); font-weight: 800; letter-spacing: -.03em; }
.step p { margin-top: 6px; font-size: 15px; color: var(--body); line-height: 1.5; }

/* ============================================================
   ALERT PANEL — the one place red still lives
   ============================================================ */
.alert {
  border: 2px solid var(--red); background: var(--red-bg);
  padding: clamp(20px, 3vw, 32px);
}
.alert__t {
  font-family: var(--f-display); font-weight: 900; color: var(--red);
  font-size: clamp(19px, 2.4vw, 26px); letter-spacing: -.035em;
  display: flex; align-items: flex-start; gap: 10px;
}
.alert__t svg { margin-top: .12em; }
.alert p { margin-top: 12px; font-size: 15.5px; color: var(--body); }
.alert p + p { margin-top: 10px; }
.alert strong { color: var(--red); }

/* ============================================================
   SPECIES CARDS
   ============================================================ */
.species {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--rule); border-left: 2px solid var(--rule);
  margin-top: 40px;
}
.spec {
  border-right: 2px solid var(--rule); border-bottom: 2px solid var(--rule);
  background: var(--panel); text-decoration: none; display: flex; flex-direction: column;
  transition: background .2s ease;
}
.spec:hover { background: var(--panel-2); }
.spec__img {
  aspect-ratio: 4 / 3; overflow: hidden; flex: 0 0 auto; min-height: 0;
  border-bottom: 2px solid var(--rule); background: var(--panel-2);
}
.spec__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .spec:hover .spec__img img { transform: scale(1.03); }
}
.spec__b { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.spec h3 { font-size: 19px; font-weight: 800; letter-spacing: -.035em; }
.spec:hover h3 { color: var(--ocean-br); }
.spec__sci { font-family: var(--f-data); font-size: 11px; color: var(--dim); margin-top: 5px; font-style: italic; }
.spec__f {
  margin-top: auto; padding-top: 14px; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.spec__len { font-family: var(--f-data); font-size: 11px; letter-spacing: .06em; color: var(--dim); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-data); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; font-weight: 500;
  border: 2px solid currentColor; padding: 4px 8px; white-space: nowrap;
}
.chip::before { content: ""; width: 7px; height: 7px; background: currentColor; flex: none; }
.chip--none { color: var(--green); }
.chip--mild { color: var(--amber); }
.chip--high { color: var(--red); }   /* danger — same language as the 000 alert */
/* Sold out is a stock state, not a hazard, so it must not borrow the red. */
.chip--soldout { color: var(--dim); }

.legend {
  display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px;
  padding-top: 18px; border-top: 2px solid var(--rule);
}

/* ============================================================
   SPECIES PAGE
   ============================================================ */
.shero { border-bottom: 2px solid var(--rule); padding-top: var(--nav-h); }
.shero__grid { display: grid; grid-template-columns: 1fr 1fr; }
.shero__img { border-right: 2px solid var(--rule); background: var(--panel); }
.shero__img img { width: 100%; height: 100%; object-fit: cover; min-height: clamp(280px, 40vw, 480px); }
.shero__b { padding: clamp(26px, 4vw, 54px) var(--gut) clamp(26px, 4vw, 48px) clamp(26px, 4vw, 54px); }

.facts { border-top: 2px solid var(--rule); margin-top: 26px; }
.fact {
  display: grid; grid-template-columns: 132px 1fr; gap: 14px;
  padding: 11px 0; border-bottom: 2px solid var(--rule); align-items: baseline;
}
.fact dt { font-family: var(--f-data); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.fact dd { margin: 0; font-size: 15px; color: var(--cream); }

.sbody h2 {
  font-size: clamp(23px, 3vw, 34px); font-weight: 900; letter-spacing: -.04em;
  margin-top: 52px; padding-top: 18px; border-top: 2px solid var(--rule-hi);
}
.sbody h2:first-child { margin-top: 0; }
.sbody h2.lab {
  font-family: var(--f-data); font-weight: 500;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ocean-br); margin-top: 52px; padding-top: 18px;
  border-top: 2px solid var(--rule-hi);
}
.sbody h2.lab + h3 {
  margin-top: 12px; font-size: clamp(23px, 3vw, 34px);
  font-weight: 900; letter-spacing: -.04em;
}
.sbody h3 { font-size: clamp(17px, 2vw, 21px); font-weight: 800; letter-spacing: -.03em; margin-top: 30px; }
.sbody p { margin-top: 14px; font-size: 16.5px; line-height: 1.62; color: var(--body); }
.sbody ul { margin-top: 16px; border-top: 2px solid var(--rule); }
.sbody li {
  padding: 9px 0 9px 24px; border-bottom: 2px solid var(--rule);
  font-size: 15.5px; position: relative; color: var(--body);
}
.sbody li::before {
  content: ""; position: absolute; left: 2px; top: 18px;
  width: 9px; height: 2px; background: var(--ocean-br);
}
.sbody strong { color: var(--cream); font-weight: 600; }

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--rule); border-left: 2px solid var(--rule); margin-top: 40px; }
.gallery img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-right: 2px solid var(--rule); border-bottom: 2px solid var(--rule);
}

.pager { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--rule); margin-top: 8px; }
.pager a { padding: 22px 24px; text-decoration: none; transition: background .2s; }
.pager a:hover { background: var(--panel); }
.pager a + a { border-left: 2px solid var(--rule); text-align: right; }
.pager span { font-family: var(--f-data); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); display: block; }
.pager b { font-family: var(--f-display); font-weight: 800; font-size: clamp(16px, 2vw, 21px); letter-spacing: -.03em; display: block; margin-top: 7px; }
.pager a:hover b { color: var(--ocean-br); }
.pager a:only-child { grid-column: 1 / -1; }

.rail { position: sticky; top: calc(var(--nav-h) + 28px); }
.toc { margin-bottom: 30px; }
.toc .eyebrow { margin-bottom: 4px; }
.toc li a {
  display: block; text-decoration: none;
  padding: 9px 0; border-bottom: 2px solid var(--rule);
  font-family: var(--f-data); font-size: 12px; letter-spacing: .06em;
  color: var(--body); text-transform: uppercase;
}
.toc li a:hover { color: var(--ocean-br); border-color: var(--ocean-br); }

/* ============================================================
   ACCORDION
   ============================================================ */
.acc { border-top: 2px solid var(--rule); }
.acc details { border-bottom: 2px solid var(--rule); }
.acc summary {
  list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative;
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(16px, 1.9vw, 20px); letter-spacing: -.03em;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 13px; height: 13px; margin-top: -7px;
  border-right: 2px solid var(--ocean-br); border-bottom: 2px solid var(--ocean-br);
  transform: rotate(45deg) translateY(-3px); transition: transform .2s var(--ease-out);
}
.acc details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.acc summary:hover { color: var(--ocean-br); }
.acc__a { padding: 0 44px 24px 0; font-size: 16px; color: var(--body); line-height: 1.6; }

/* ============================================================
   FORM
   ============================================================ */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--f-data); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim);
}
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; color: var(--cream);
  background: var(--panel-2); border: 2px solid var(--edge);
  padding: 12px 14px; border-radius: 0; width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field ::placeholder, .field textarea::placeholder { color: var(--dim-2); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--cream); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--ocean-br); outline-offset: 2px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__note { font-size: 13px; color: var(--dim); }

/* ============================================================
   CONTACT / SHOP
   ============================================================ */
.contact-list { border-top: 2px solid var(--rule); }
.contact-list a, .contact-list div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 16px 0; border-bottom: 2px solid var(--rule); text-decoration: none;
}
.contact-list .k {
  font-family: var(--f-data); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); flex: none;
}
.contact-list .v { font-family: var(--f-display); font-weight: 800; font-size: clamp(15px, 1.9vw, 20px); letter-spacing: -.03em; text-align: right; }
.contact-list a:hover .v { color: var(--ocean-br); }

.products { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--rule); border-left: 2px solid var(--rule); margin-top: 40px; }
.product { border-right: 2px solid var(--rule); border-bottom: 2px solid var(--rule); background: var(--panel); display: flex; flex-direction: column; }
.product__img {
  aspect-ratio: 3 / 4; overflow: hidden; flex: 0 0 auto; min-height: 0;
  border-bottom: 2px solid var(--rule);
  /* Product shots are normalised onto cream, so the tile matches the photo and
     the black merch reads against it — light swatches inside a dark grid. */
  background: var(--cream);
}
.product__img img { width: 100%; height: 100%; object-fit: cover; }
.product__b { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.product h3 { font-size: 18px; font-weight: 800; letter-spacing: -.035em; }
.product__p { font-family: var(--f-data); font-size: 14px; color: var(--body); }
.product__p s { color: var(--dim-2); margin-right: 8px; }
.product .chip { margin-top: auto; align-self: flex-start; }

/* ============================================================
   IMAGE BLOCKS
   ============================================================ */
.pair {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 2px solid var(--rule); height: 100%;
  min-height: clamp(300px, 32vw, 460px);
}
.pair img { width: 100%; height: 100%; object-fit: cover; }
.pair img + img { border-left: 2px solid var(--rule); }

.frame { border: 2px solid var(--rule); height: 100%; min-height: clamp(280px, 30vw, 420px); }
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   CTA BAND + FOOTER
   ============================================================ */
.band { background: var(--ocean); color: var(--cream); border-block: 2px solid var(--rule); }
.band__in {
  max-width: var(--maxw); margin-inline: auto; padding: 26px var(--gut);
  display: flex; align-items: center; gap: 18px 30px; flex-wrap: wrap;
}
.band b { font-family: var(--f-display); font-weight: 900; font-size: clamp(19px, 2.6vw, 30px); letter-spacing: -.04em; }
.band p { font-size: 14.5px; max-width: 52ch; }
.band .btn { margin-left: auto; }

.foot { background: #000; color: var(--cream); padding-block: clamp(46px, 6vw, 80px); border-top: 2px solid var(--rule); }
.foot__top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 34px; }
.foot__mark { display: flex; gap: 16px; align-items: flex-start; }
.foot__mark img { width: 84px; height: 84px; flex: none; }
.foot__name { font-family: var(--f-display); font-weight: 900; font-size: 22px; letter-spacing: -.045em; line-height: 1.05; }
.foot__strap { font-family: var(--f-data); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ocean-br); margin-top: 8px; }
.foot h4 { font-family: var(--f-data); font-weight: 500; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
.foot ul li { margin-bottom: 9px; color: var(--body); }
.foot a { text-decoration: none; border-bottom: 1px solid transparent; }
.foot a:hover { color: var(--ocean-br); border-color: var(--ocean-br); }
.foot__bot {
  margin-top: clamp(36px, 5vw, 60px); padding-top: 20px; border-top: 2px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  font-family: var(--f-data); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .cells, .cells--4 { grid-template-columns: repeat(2, 1fr); }
  .species { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 2px solid var(--rule); }
  .split, .split--even { grid-template-columns: 1fr; }
  .split--rev > *:first-child { order: 0; }
  .shero__grid { grid-template-columns: 1fr; }
  .shero__img { border-right: 0; border-bottom: 2px solid var(--rule); }
  .shero__b { padding: clamp(26px, 5vw, 40px) var(--gut); }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { order: -1; }
  .rail { position: static; }
  .toc { display: none; }
  .pair { min-height: clamp(220px, 46vw, 340px); }
}

@media (max-width: 760px) {
  .nav__links, .nav__cta { display: none; }
  .burger { display: flex; }
  .cells, .cells--4, .cells--2, .species, .products { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .form__row { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr; }
  .band .btn { margin-left: 0; }
  .fact { grid-template-columns: 1fr; gap: 3px; }
  .pager { grid-template-columns: 1fr; }
  .pager a + a { border-left: 0; border-top: 2px solid var(--rule); text-align: left; }
}

/* Reduced motion means less movement, not a dead interface: colour and opacity
   transitions still carry meaning, so only position/scale changes are dropped. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .r { opacity: 1; transform: none; transition: opacity .2s linear; }
  .nav { transition: none; }
  .progress { transition: none; }
  .btn:hover, .btn:active, button:active:not(:disabled),
  .acc summary:active, .spec:hover .spec__img img { transform: none; }
  .spec__img img, .burger span, .acc summary::after { transition: none; }
}

/* Printed pages go back to ink on white — a black page wastes toner, and the
   cream body text would come out invisible. */
@media print {
  .nav, .drawer, .band, .btns, .pager, .progress { display: none; }
  :root { --cream: #111; --body: #333; --dim: #555; --rule: #BBB; --rule-hi: #888; }
  body, .sec, .sec--panel, .sec--sea, .spec, .product, .foot {
    background: #FFF !important; color: #111;
  }
}

/* ============================================================
   PLACEHOLDER TILE + LOOKALIKE CROSS-LINKS
   ============================================================ */
/* Species awaiting a field photo. Marked rather than disguised — a guide that
   quietly shows the wrong snake is worse than one that shows none. */
.ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: var(--panel-2);
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 10px, rgba(246, 244, 237, .022) 10px 20px);
}
/* Beat the object-fit: cover sizing that .spec__img img / .shero__img img
   apply to real photos — the mark is a logo, not a filled tile. */
.spec__img.ph .ph__mark, .shero__img.ph .ph__mark {
  width: 34%; max-width: 108px; height: auto; min-height: 0;
  object-fit: contain; opacity: .2;
}
.shero__img.ph { min-height: clamp(280px, 40vw, 480px); }
.shero__img.ph .ph__mark { width: 22%; max-width: 150px; }
.ph__t {
  font-family: var(--f-data); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--dim-2);
}

.lookalike { margin-top: 34px; border-top: 2px solid var(--rule-hi); padding-top: 18px; }
.lookalike > .mono { display: block; margin-bottom: 12px; }
.lookalike a {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 2px solid var(--rule); text-decoration: none;
}
.lookalike a b {
  font-family: var(--f-display); font-weight: 800; font-size: 17px; letter-spacing: -.03em;
}
.lookalike a:hover b { color: var(--ocean-br); }
.lookalike p { margin-top: 14px; }

/* ============================================================
   PHOTO CREDITS
   Attribution for contributed photos reused under Creative Commons.
   Legally required for CC BY, so it renders on the page, not in a
   file nobody reads.
   ============================================================ */
.credit {
  font-family: var(--f-data); font-size: 10px; letter-spacing: .06em;
  color: var(--dim-2); padding: 8px 14px; background: var(--ink);
}
.credit a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--rule-hi); }
.credit a:hover { color: var(--ocean-br); border-color: var(--ocean-br); }

.credits { margin-top: 14px; display: grid; gap: 2px; }
.credits .credit { padding: 6px 0; background: none; }

/* The credit line makes the species hero a two-part cell, so the wrapper takes
   over as the grid item and owns the dividing rule. */
.shero__img-wrap {
  display: flex; flex-direction: column;
  border-right: 2px solid var(--rule); background: var(--panel);
}
.shero__img-wrap .shero__img { border-right: 0; flex: 1; min-height: 0; }
.shero__img-wrap .credit { border-top: 2px solid var(--rule); }

@media (max-width: 1000px) {
  .shero__img-wrap { border-right: 0; border-bottom: 2px solid var(--rule); }
}

/* Legless lizards are not on the venom scale at all — the chip uses the ocean
   accent so it reads as information ("this isn't a snake"), not as a hazard
   level somewhere between green and red. */
.chip--notsnake { color: var(--ocean-br); }

/* Legal notice, not an emergency. Red stays reserved for the snakebite alert,
   so this uses the ocean accent instead. */
.alert--law { border-color: var(--ocean-br); background: rgba(87, 200, 234, .07); }
.alert--law .alert__t { color: var(--ocean-br); }
.alert--law strong { color: var(--ocean-br); }

/* Grid group headings — 38 cards in one undifferentiated wall is unusable. */
.grouphd {
  font-size: clamp(20px, 2.4vw, 27px); font-weight: 900; letter-spacing: -.035em;
  margin-top: 52px; padding-top: 18px; border-top: 2px solid var(--rule-hi);
  display: flex; align-items: baseline; gap: 12px;
}
.grouphd span {
  font-family: var(--f-data); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; color: var(--ocean-br);
}
.grouphd + .species, .grouphd + .small + .species { margin-top: 22px; }

/* ============================================================
   PROJECTS
   ============================================================ */
/* A project card is a .cell with a state chip sitting opposite the index
   number, so the whole grid still reads as the same bordered card language. */
.cell__hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.cell__hd .cell__n { display: inline-block; }

/* Project state, not hazard — red stays reserved for the snakebite alert. */
.chip--live { color: var(--green); }
.chip--design { color: var(--amber); }
.chip--planned { color: var(--dim); }

/* Captioned photo strip under a project block. Same bordered-card language as
   the species grid; the caption carries the weight, so the tile stays plain. */
.shots {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--rule); border-left: 2px solid var(--rule);
  margin-top: 44px;
}
.shot {
  /* figure carries UA margins that would stop it filling its grid cell */
  margin: 0;
  border-right: 2px solid var(--rule); border-bottom: 2px solid var(--rule);
  background: var(--panel); display: flex; flex-direction: column;
}
.shot__img { aspect-ratio: 4 / 3; overflow: hidden; flex: 0 0 auto; min-height: 0; }
.shot__img img { width: 100%; height: 100%; object-fit: cover; }
.shot__img.ph .ph__mark { width: 30%; max-width: 92px; height: auto; opacity: .2; }
.shot__c {
  padding: 15px 17px 19px; font-size: 14.5px; line-height: 1.5; color: var(--body);
  flex: 1;
}
.shot .credit { padding: 0 17px 15px; background: none; margin-top: auto; }

/* App screens are portrait and are the content, not a backdrop: show the whole
   screen rather than cropping it to a landscape tile. */
.shots--app .shot__img {
  aspect-ratio: 3 / 4; background: var(--panel-2);
  padding: 14px; display: flex; align-items: center; justify-content: center;
}
.shots--app .shot__img img { object-fit: contain; border: 2px solid var(--rule-hi); }

/* ============================================================
   THE WILDLOG BLOCK — the app's own ground
   ============================================================ */
/* One project section runs light, on the beige the WildLog app itself uses
   (#F6F4EC ink #161512, sampled from the running app) so the two read as the
   same product. Every component in here already draws from the colour tokens,
   so remapping the tokens on this one section re-themes the whole block —
   nothing outside `.sec--app` can be touched by it. Do not turn this into a
   site-wide light mode; the rest of the site is deliberately near-black. */
.sec--app {
  --cream: #161512;              /* body text, button borders, headings */
  --ink: #E7E2D1;                /* what sat behind cream now sits behind ink */
  --body: #3B3931;
  --dim: #625D50;
  --dim-2: #5F5A4D;              /* credits and placeholder labels */
  --rule: #CEC8B5;               /* fine grid lines */
  --rule-hi: #161512;            /* the app draws its cards in 2px ink */
  --panel: #EFEBDF;              /* tiles lifted off the ground */
  --panel-2: #F6F4EC;            /* the app's own beige, lightest of the three */
  --ocean-br: #7A5D10;           /* the app's amber, in place of the sea blue */
  --ocean: #7A5D10;              /* button hover shadow follows it */
  background: #E7E2D1;
  color: #161512;
}
/* The crest watermark is cream line art and would vanish on the beige. */
.sec--app .ph__mark { filter: invert(1); opacity: .16; }

@media (max-width: 1000px) { .shots { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .shots { grid-template-columns: 1fr; } }

/* Seven nav items is one more than the bar was drawn for. Below 1000px they
   give up some tracking to fit, and below 900px they hand over to the drawer
   early rather than wrap the crest and the phone button onto two lines. */
@media (max-width: 1000px) {
  .nav__in { gap: 16px; }
  .nav__links { gap: 13px; font-size: 10.5px; letter-spacing: .1em; }
}
@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .burger { display: flex; }
}