@charset "UTF-8";
/* ==========================================================================
   FIRE SKY ANKOLE — DESIGN SYSTEM
   Trace. Select. Combine. Prove. Preserve.

   Palette is drawn from the animals and the Limpopo bushveld in Fire Sky's own
   photographs: hide-dark, horn ivory, muted sand, and the existing Fire Sky
   fire-orange (#F47F20) carried over from the current site and logo.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root {
  /* Surfaces — ink dominates; ivory is the reading surface */
  --ink:        #17110D;   /* deep matte hide-brown, near-black          */
  --ink-2:      #211812;   /* raised panel on ink                        */
  --ink-3:      #2E221A;   /* hairline fills, hover                      */
  --paper:      #FAF6EF;   /* warm ivory page                            */
  --ivory:      #F2EBDF;   /* horn ivory                                 */
  --ivory-2:    #E6DCCB;   /* muted sand panel                           */

  /* Ink on surfaces */
  --sand:       #C3AF92;   /* secondary text on ink                      */
  --sand-dim:   #8C7C68;   /* tertiary text on ink                       */
  --stone:      #6E6157;   /* secondary text on ivory                    */

  /* Structure */
  --hide:       #6B3A22;   /* dark Ankole brown                          */
  --fire:       #F47F20;   /* FIRE SKY ACCENT — existing brand orange    */
  --fire-2:     #F4AA6E;   /* existing brand secondary                   */
  --ember:      #B4471A;   /* deeper rust, for accent on ivory           */
  --veld:       #4A5240;   /* muted grey-green, used sparingly           */

  --rule-dark:  rgba(242, 235, 223, 0.16);
  --rule-dark-2:rgba(242, 235, 223, 0.30);
  --rule-light: rgba(23, 17, 13, 0.15);
  --rule-light-2:rgba(23, 17, 13, 0.28);

  /* Type */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --fs-display: clamp(2.7rem, 7.2vw, 6.1rem);
  --fs-h1:      clamp(2.1rem, 5vw, 4rem);
  --fs-h2:      clamp(1.65rem, 3.4vw, 2.85rem);
  --fs-h3:      clamp(1.2rem, 2vw, 1.6rem);
  --fs-lead:    clamp(1.06rem, 1.5vw, 1.32rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.09rem);
  --fs-small:   0.875rem;
  --fs-micro:   0.7rem;

  /* Space */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 62ch;
  --maxw: 1500px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------- 2. BASELINE */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--fire);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 200;
  background: var(--fire); color: #17110D; padding: var(--s3) var(--s5);
  font: 600 var(--fs-small)/1 var(--mono); letter-spacing: 0.08em;
  transition: top 0.2s var(--ease);
}
.skip:focus { top: var(--s4); }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------ 3. TYPOGRAPHY */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  font-variation-settings: "opsz" 100, "SOFT" 20;
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}

.display { font-size: var(--fs-display); font-weight: 500; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); font-variation-settings: "opsz" 24, "SOFT" 20; }

p { margin: 0 0 var(--s4); max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--sand); }
:is(.on-ivory,.on-ivory-2) .lead { color: var(--stone); }

/* The mono voice: every registration, measurement and label in the system.
   Data reads as record, not as marketing. */
.eyebrow {
  font: 500 var(--fs-micro)/1.2 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fire);
  margin: 0 0 var(--s5);
  display: block;
}
.eyebrow--quiet { color: var(--sand-dim); }
:is(.on-ivory,.on-ivory-2) .eyebrow--quiet { color: var(--stone); }

.reg {
  font: 500 var(--fs-small)/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--sand-dim);
}
:is(.on-ivory,.on-ivory-2) .reg { color: var(--stone); }

/* Horn measurements keep their eighths — 52 4/8" is the vernacular. */
.measure-val {
  font: 500 clamp(1.5rem, 2.6vw, 2.1rem)/1 var(--mono);
  letter-spacing: -0.02em;
  color: var(--ivory);
  display: block;
}
:is(.on-ivory,.on-ivory-2) .measure-val { color: var(--ink); }

.measure-key {
  font: 400 var(--fs-micro)/1.2 var(--mono);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sand-dim); margin-top: var(--s2); display: block;
}
:is(.on-ivory,.on-ivory-2) .measure-key { color: var(--stone); }

/* --------------------------------------------------------------- 4. LAYOUT */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 980px; }

.section { padding-block: clamp(4rem, 9vw, 8.5rem); position: relative; }
.section--tight { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.section--flush-top { padding-top: 0; }

/* Surface modifiers. Kept as background/colour only so they never fight the
   .section padding rule above. */
.on-ivory { background: var(--paper); color: var(--ink); }
.on-ivory-2 { background: var(--ivory-2); color: var(--ink); }
.on-ink-2 { background: var(--ink-2); }

.rule-top { border-top: 1px solid var(--rule-dark); }
:is(.on-ivory,.on-ivory-2) .rule-top, .on-ivory-2 .rule-top { border-top-color: var(--rule-light); }

.grid { display: grid; gap: var(--s6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.section-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }

/* --------------------------------------------------------------- 5. BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: var(--s3);
  padding: 0.95rem 1.6rem;
  font: 600 var(--fs-small)/1 var(--mono);
  letter-spacing: 0.11em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease);
  min-height: 48px; /* touch target */
}
.btn__arrow { transition: transform 0.25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary { background: var(--fire); color: #17110D; }
.btn--primary:hover { background: var(--ivory); }

.btn--ghost { border-color: var(--rule-dark-2); color: var(--ivory); }
.btn--ghost:hover { border-color: var(--fire); color: var(--fire); }
:is(.on-ivory,.on-ivory-2) .btn--ghost { border-color: var(--rule-light-2); color: var(--ink); }
:is(.on-ivory,.on-ivory-2) .btn--ghost:hover { border-color: var(--ember); color: var(--ember); }

/* A text link that behaves like a record cross-reference */
.link {
  display: inline-flex; align-items: center; gap: var(--s3);
  font: 500 var(--fs-small)/1 var(--mono);
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--fire);
  padding-block: var(--s2);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), gap 0.25s var(--ease);
}
.link:hover { border-bottom-color: currentColor; gap: var(--s4); }
:is(.on-ivory,.on-ivory-2) .link { color: var(--ember); }

/* ------------------------------------------------------------ 6. HEADER/NAV */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5);
  padding: var(--s4) var(--gutter);
  background: transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
              padding 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-head.is-stuck {
  background: rgba(23, 17, 13, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--rule-dark);
  padding-block: var(--s3);
}
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { height: clamp(42px, 5vw, 58px); width: auto; }

.nav { display: flex; align-items: center; gap: clamp(0.9rem, 1.7vw, 1.9rem); }
.nav a {
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ivory);
  padding-block: var(--s3);
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
  white-space: nowrap;
}
.nav a:hover { color: var(--fire); }
.nav a[aria-current="page"] { color: var(--fire); border-bottom-color: var(--fire); }

.nav a.nav__cta {
  background: var(--fire); color: #17110D;
  padding: 0.8rem 1.2rem; border-bottom: 0;
}
.nav a.nav__cta:hover { background: var(--ivory); color: #17110D; }

.nav-toggle { display: none; }

@media (max-width: 1100px) {
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 48px; height: 48px; align-items: flex-end;
  }
  .nav-toggle span {
    display: block; height: 1px; width: 26px; background: var(--ivory);
    transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* The drawer sits just under the header (z-index 100) so the close button
     stays clickable, and above everything else on the page — including the
     fixed bottom bar at z-index 90, which used to paint over it near the foot
     of a long page.

     `justify-content: center` on a scrolling flex column makes the overflow
     unreachable at the top, so the menu was also being clipped whenever it
     was taller than the viewport. Auto margins on the first and last links
     centre it when it fits and let it scroll from the top when it does not. */
  .nav {
    position: fixed; inset: 0; z-index: 99;
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: var(--s2);
    padding: calc(var(--s10) + env(safe-area-inset-top)) var(--gutter)
             calc(var(--s8) + env(safe-area-inset-bottom));
    background: var(--ink);
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
  }
  .nav > :first-child { margin-top: auto; }
  .nav > :last-child  { margin-bottom: auto; }
  .nav.is-open { opacity: 1; visibility: visible; }
  /* The page must not scroll behind an open drawer. */
  body.nav-open { overflow: hidden; }
  .nav a {
    font-family: var(--display); font-size: clamp(1.6rem, 6vw, 2.4rem);
    font-weight: 500; letter-spacing: -0.02em; text-transform: none;
    line-height: 1.15; padding-block: var(--s3); border-bottom: 0;
  }
  .nav a.nav__cta {
    margin-top: var(--s5); font-family: var(--mono);
    font-size: var(--fs-small); letter-spacing: 0.11em; text-transform: uppercase;
  }
}

/* ----------------------------------------------------------------- 7. HERO */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(23,17,13,0.94) 0%, rgba(23,17,13,0.55) 34%, rgba(23,17,13,0.06) 62%),
    linear-gradient(to right, rgba(23,17,13,0.62) 0%, rgba(23,17,13,0) 55%);
}
.hero__body {
  position: relative;
  padding: var(--s9) var(--gutter) clamp(1.5rem, 3vw, 2.5rem);
  max-width: var(--maxw); margin-inline: auto; width: 100%;
}
.hero__title { font-size: var(--fs-display); max-width: 16ch; }
.hero__sub {
  font: 500 clamp(0.78rem, 1.15vw, 0.95rem)/1.5 var(--mono);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fire); margin: 0 0 var(--s5); max-width: 34ch;
}
.hero__stack {
  margin: var(--s5) 0 var(--s6);
  font-size: var(--fs-lead); color: var(--sand); max-width: 40ch;
}
.hero__stack span { display: block; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* The record rail: the hero animal's own registration data, along the base of
   the frame — the site's first statement that this is an archive. */
.record-rail {
  position: relative;
  border-top: 1px solid var(--rule-dark-2);
  background: rgba(23, 17, 13, 0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* Grid, not flex wrap, so every field lines up on its own column at any
   width instead of leaving a ragged second row. */
.record-rail__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.record-rail__cell {
  padding: var(--s4) var(--s5);
  display: flex; flex-direction: column; gap: var(--s1);
  border-left: 1px solid var(--rule-dark);
}
.record-rail__cell:first-child { padding-left: 0; border-left: 0; }
.record-rail__k {
  font: 400 var(--fs-micro)/1 var(--mono);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sand-dim);
}
.record-rail__v {
  font: 500 0.95rem/1.2 var(--mono);
  letter-spacing: 0.02em; color: var(--ivory);
}
/* Column counts are pinned rather than auto-fit so the divider rules always
   fall between columns, never at the start of a wrapped row. */
@media (max-width: 1200px) {
  .record-rail__inner { grid-template-columns: repeat(3, 1fr); }
  .record-rail__cell:nth-child(3n+1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 700px) {
  .record-rail__inner { grid-template-columns: repeat(2, 1fr); }
  .record-rail__cell:nth-child(3n+1) { border-left: 1px solid var(--rule-dark); padding-left: var(--s5); }
  .record-rail__cell:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* ------------------------------------------------------------ 8. PAGE HERO */
.page-hero {
  position: relative; min-height: clamp(360px, 58vh, 620px);
  display: flex; align-items: flex-end; overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(23,17,13,0.94), rgba(23,17,13,0.35) 65%, rgba(23,17,13,0.15));
}
.page-hero__body {
  position: relative; width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding: var(--s8) var(--gutter) var(--s7);
}
.page-hero--plain {
  min-height: 0; background: var(--ink-2);
  border-bottom: 1px solid var(--rule-dark);
  padding-top: clamp(6.5rem, 11vw, 9rem);
}

/* ------------------------------------------------------- 9. BREADCRUMB/TAGS */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  font: 400 var(--fs-micro)/1.4 var(--mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sand-dim); margin: 0 0 var(--s5); padding: 0; list-style: none;
}
.crumbs li { display: flex; align-items: center; gap: var(--s2); }
.crumbs li + li::before { content: "/"; color: var(--rule-dark-2); }
.crumbs a:hover { color: var(--fire); }
.crumbs [aria-current] { color: var(--ivory); }
:is(.on-ivory,.on-ivory-2) .crumbs { color: var(--stone); }
:is(.on-ivory,.on-ivory-2) .crumbs [aria-current] { color: var(--ink); }

/* Genetic tags — understated, never shouty. A sold animal keeps its place. */
.tag {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 0.35rem 0.6rem;
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--rule-dark-2); color: var(--sand);
  white-space: nowrap;
}
:is(.on-ivory,.on-ivory-2) .tag { border-color: var(--rule-light-2); color: var(--stone); }
.tag::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.tag--foundation { color: var(--fire-2); border-color: rgba(244,170,110,0.45); }
.tag--donor      { color: var(--fire); border-color: rgba(244,127,32,0.45); }
.tag--available  { color: #9DB08C; border-color: rgba(157,176,140,0.5); }
.tag--sold       { color: var(--sand-dim); border-color: var(--rule-dark); }
.tag--retained   { color: var(--sand); }
/* Fire Sky ownership is the one tag that wears the brand orange. */
.tag--owned {
  color: #17110D; background: var(--fire); border-color: var(--fire); font-weight: 600;
}
:is(.on-ivory,.on-ivory-2) .tag--owned { color: #17110D; background: var(--fire); border-color: var(--fire); }
.tag--trophy   { color: var(--fire-2); border-color: rgba(244,170,110,0.55); }
:is(.on-ivory,.on-ivory-2) .tag--trophy { color: var(--ember); border-color: rgba(180,71,26,0.45); }
.tag--topdonor { color: #9DB08C; border-color: rgba(157,176,140,0.55); }
:is(.on-ivory,.on-ivory-2) .tag--topdonor { color: #4A5240; border-color: rgba(74,82,64,0.45); }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ------------------------------------------------------- 10. METRIC / CARDS */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; }
.metric { padding: var(--s5) var(--s5) var(--s5) 0; border-top: 1px solid var(--rule-dark); }
:is(.on-ivory,.on-ivory-2) .metric { border-top-color: var(--rule-light); }
/* An optional third line under a metric: what the figure is counting. */
.measure-note {
  display: block; margin-top: var(--s2); max-width: 26ch;
  font: 400 var(--fs-small)/1.45 var(--body); color: var(--sand-dim);
}
:is(.on-ivory,.on-ivory-2) .measure-note { color: var(--stone); }

/* The stud card. Photographic plate + record strip. */
.card {
  display: flex; flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--rule-dark);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.card:hover { border-color: var(--fire); transform: translateY(-3px); }
:is(.on-ivory,.on-ivory-2) .card { background: var(--ivory); border-color: var(--rule-light); }
:is(.on-ivory,.on-ivory-2) .card:hover { border-color: var(--ember); }

.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-3); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.card:hover .card__media img { transform: scale(1.035); }
.card__tag { position: absolute; left: var(--s3); top: var(--s3); background: rgba(23,17,13,0.82); }

/* Badges over a photograph. Stacked at the top left with a real gap, so two
   or three can appear without ever touching. Kept deliberately small: they
   sit on top of the animal and the animal is the point. */
.badges {
  position: absolute; left: var(--s3); top: var(--s3); z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  max-width: calc(100% - var(--s5)); pointer-events: none;
}
.badge {
  display: inline-block; padding: 3px 7px; border-radius: 2px;
  font: 500 10px/1.25 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  background: rgba(23,17,13,0.86); color: var(--ivory);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(3px);
}
.badge--auction { background: var(--fire); color: #17110D; border-color: var(--fire); }
.badge--trophy  { color: var(--fire-2); border-color: rgba(244,170,110,0.5); }
.badge--donor   { color: #B6C7A4; border-color: rgba(157,176,140,0.5); }
.badge--new     { color: #8FD3E8; border-color: rgba(143,211,232,0.5); }
@media (max-width: 560px) { .badge { font-size: 9px; padding: 2px 6px; } }

.card__body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
.card__name { font-family: var(--display); font-size: 1.45rem; font-weight: 500; line-height: 1.1; }
.card__meta { display: flex; flex-direction: column; gap: var(--s1); margin-top: auto; }
.card__stat {
  font: 500 0.9rem/1.4 var(--mono); color: var(--ivory); letter-spacing: 0.01em;
}
:is(.on-ivory,.on-ivory-2) .card__stat { color: var(--ink); }
.card__by {
  font: 500 var(--fs-small)/1.4 var(--mono); letter-spacing: 0.02em; color: var(--fire);
}
:is(.on-ivory,.on-ivory-2) .card__by { color: var(--ember); }
.sw-inline {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 0.5rem; vertical-align: baseline;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}
table.data tr.is-focus td { background: var(--ink-3); }
:is(.on-ivory,.on-ivory-2) table.data tr.is-focus td { background: var(--ivory-2); }
.card__cross {
  font: 400 var(--fs-small)/1.4 var(--mono); color: var(--sand-dim); letter-spacing: 0.02em;
}
:is(.on-ivory,.on-ivory-2) .card__by {
  font: 500 var(--fs-small)/1.4 var(--mono); letter-spacing: 0.02em; color: var(--fire);
}
:is(.on-ivory,.on-ivory-2) .card__by { color: var(--ember); }
.sw-inline {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 0.5rem; vertical-align: baseline;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}
table.data tr.is-focus td { background: var(--ink-3); }
:is(.on-ivory,.on-ivory-2) table.data tr.is-focus td { background: var(--ivory-2); }
.card__cross { color: var(--stone); }
.card__cta { margin-top: var(--s3); }
a.card__cta { align-self: flex-start; }

/* --------------------------------------------------- 11. PENDING PLACEHOLDER
   Honest gaps. Where Fire Sky's records or photography are not yet in hand,
   the design shows the shape of what belongs there rather than inventing it. */
.pending {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s3); text-align: center;
  min-height: 160px; padding: var(--s5);
  border: 1px dashed var(--rule-dark-2);
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 9px, rgba(242,235,223,0.035) 9px 10px);
  color: var(--sand-dim);
}
:is(.on-ivory,.on-ivory-2) .pending, .on-ivory-2 .pending {
  border-color: var(--rule-light-2); color: var(--stone);
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 9px, rgba(23,17,13,0.05) 9px 10px);
}
.pending__label {
  font: 500 var(--fs-micro)/1.5 var(--mono);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fire);
}
:is(.on-ivory,.on-ivory-2) .pending__label { color: var(--ember); }
.pending__note { font: 400 var(--fs-small)/1.5 var(--body); max-width: 34ch; margin: 0; }
.pending--media { aspect-ratio: 4 / 3; min-height: 0; }
.pending--inline { min-height: 0; padding: var(--s4); align-items: flex-start; text-align: left; }

/* ------------------------------------------------- 12. THE FOUNDATION LEDGER
   The signature. Thirty-eight foundation cows were registered. Twenty-five
   left recorded descendants. Thirteen did not. The grid states that plainly. */
.ledger { margin-top: clamp(2rem, 4vw, 3.5rem); }
/* Borders sit on the cells, not on the container, so the unfilled column
   tracks in the final row stay empty rather than showing a block of fill. */
.ledger__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule-dark);
  border-left: 1px solid var(--rule-dark);
}
:is(.on-ivory,.on-ivory-2) .ledger__grid { border-color: var(--rule-light); }

.ledger__cell {
  position: relative; aspect-ratio: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--s3);
  background: var(--ink);
  border-right: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
  overflow: hidden;
  transition: background 0.3s var(--ease);
}
:is(.on-ivory,.on-ivory-2) .ledger__cell { background: var(--paper); border-color: var(--rule-light); }

.ledger__code {
  position: relative; z-index: 2;
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: 0.1em; color: var(--sand);
}
:is(.on-ivory,.on-ivory-2) .ledger__code { color: var(--stone); }

.ledger__count {
  position: relative; z-index: 2;
  font: 500 1.1rem/1 var(--mono); color: var(--ivory);
}
:is(.on-ivory,.on-ivory-2) .ledger__count { color: var(--ink); }
.ledger__count small {
  display: block; font-size: var(--fs-micro); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sand-dim); margin-top: var(--s1);
}
:is(.on-ivory,.on-ivory-2) .ledger__count small { color: var(--stone); }

/* Weight of a line, expressed as fill. A26 and A17 dominate on the record. */
.ledger__cell--live::before {
  content: ""; position: absolute; inset: auto 0 0 0; z-index: 1;
  height: calc(var(--weight, 0) * 1%);
  background: linear-gradient(to top, rgba(244,127,32,0.34), rgba(244,127,32,0.06));
  transform-origin: bottom;
  transform: scaleY(var(--fill, 0));
  transition: transform 0.9s var(--ease);
}
a.ledger__cell { text-decoration: none; }
a.ledger__cell:hover { border-color: var(--fire); }
.ledger__cell--live:hover { background: var(--ink-2); }
:is(.on-ivory,.on-ivory-2) .ledger__cell--live:hover { background: var(--ivory); }

.ledger__cell--empty { background: var(--ink-2); }
:is(.on-ivory,.on-ivory-2) .ledger__cell--empty { background: var(--ivory-2); }
.ledger__cell--empty .ledger__code { color: var(--sand-dim); }
.ledger__cell--empty::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: 50%; z-index: 3;
  height: 1px; background: var(--rule-dark-2);
  transform: scaleX(var(--strike, 0)); transform-origin: left;
  transition: transform 0.5s var(--ease);
}
:is(.on-ivory,.on-ivory-2) .ledger__cell--empty::after { background: var(--rule-light-2); }

.ledger__key {
  display: flex; flex-wrap: wrap; gap: var(--s5);
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--rule-dark);
  font: 400 var(--fs-small)/1.5 var(--mono); color: var(--sand-dim);
}
:is(.on-ivory,.on-ivory-2) .ledger__key { border-top-color: var(--rule-light); color: var(--stone); }
.ledger__key b { color: var(--ivory); font-weight: 500; }
:is(.on-ivory,.on-ivory-2) .ledger__key b { color: var(--ink); }

/* A bloodline result in the map search: swatch, name, foundation number. */
.chip--line { display: inline-flex; align-items: center; gap: var(--s2); }
.chip--line .sw {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
}
.chip--line small { opacity: 0.65; letter-spacing: 0.08em; }

/* "Available at the ..." on an animal that is catalogued for a coming sale. */
.avail-at {
  margin-top: var(--s3); padding: var(--s3) var(--s4);
  border-left: 2px solid var(--fire);
  background: rgba(244,127,32,0.08);
  font: 400 var(--fs-small)/1.5 var(--body); color: var(--ivory);
}
:is(.on-ivory,.on-ivory-2) .avail-at { color: var(--ink); }

/* The sale calendar above the for-sale grid. */
.sale-strip {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.sale-strip__item {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s5) var(--s5) var(--s5) 0;
  border-top: 1px solid var(--rule-dark);
}
:is(.on-ivory,.on-ivory-2) .sale-strip__item { border-top-color: var(--rule-light); }
.sale-strip__name { font: 500 1.1rem/1.25 var(--display); }
.sale-strip__date, .sale-strip__n {
  font: 400 var(--fs-micro)/1.4 var(--mono); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sand-dim);
}
:is(.on-ivory,.on-ivory-2) :is(.sale-strip__date, .sale-strip__n) { color: var(--stone); }
.sale-strip__n { color: var(--fire); }
:is(.on-ivory,.on-ivory-2) .sale-strip__n { color: var(--ember); }

/* The foundation register, cow by cow. A column layout rather than a table:
   the lists run from one entry to nineteen, and a table of that shape is
   mostly whitespace. */
.reg-grid {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  align-items: start;
}
/* Each cow is a boxed block. At this density a hairline rule is not enough to
   tell where one number's descendants stop and the next begins. */
.reg-cow {
  border: 1px solid var(--rule-dark);
  border-top: 3px solid var(--fire);
  padding: var(--s4);
  background: rgba(255,255,255,0.02);
}
:is(.on-ivory,.on-ivory-2) .reg-cow {
  border-color: var(--rule-light); border-top-color: var(--ember);
  background: rgba(23,17,13,0.025);
}
.reg-cow__head {
  padding-bottom: var(--s3); margin-bottom: var(--s1);
  border-bottom: 1px solid var(--rule-dark);
}
:is(.on-ivory,.on-ivory-2) .reg-cow__head { border-bottom-color: var(--rule-light); }
.reg-cow__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.reg-cow__code {
  font: 500 1.05rem/1 var(--display); color: var(--fire);
}
:is(.on-ivory,.on-ivory-2) .reg-cow__code { color: var(--ember); }
.reg-cow__ka, .reg-cow__n {
  font: 400 var(--fs-micro)/1 var(--mono); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sand-dim);
}
:is(.on-ivory,.on-ivory-2) :is(.reg-cow__ka, .reg-cow__n) { color: var(--stone); }
.reg-cow__n { margin-left: auto; }
.reg-cow__list {
  margin: var(--s3) 0 0; padding: 0; list-style: none;
  font: 400 var(--fs-small)/1.65 var(--mono); letter-spacing: 0.02em;
}
.reg-cow__list li { padding: 1px 0; }

/* Auction lot thumbnail. Square, cropped, and the same size whether the
   photograph exists or not so the column reads as a column. */
.lot-thumb { width: 64px; padding-right: var(--s3) !important; }
.lot-thumb__img,
.lot-thumb__none {
  display: block; width: 64px; height: 64px; object-fit: cover;
  border: 1px solid var(--rule-dark); background: var(--ink-2);
}
.lot-thumb a { display: block; }
.lot-thumb a:hover .lot-thumb__img { border-color: var(--fire); }
:is(.on-ivory,.on-ivory-2) :is(.lot-thumb__img,.lot-thumb__none) {
  border-color: var(--rule-light); background: rgba(23,17,13,0.04);
}
:is(.on-ivory,.on-ivory-2) .lot-thumb a:hover .lot-thumb__img { border-color: var(--ember); }

/* Small print: the VAT basis under an auction table, a source note under a
   figure. Quiet enough to skip, present enough to answer the question. */
.fine {
  font: 400 var(--fs-small)/1.5 var(--mono); color: var(--sand-dim);
  letter-spacing: 0.02em;
}
:is(.on-ivory,.on-ivory-2) .fine { color: var(--stone); }

/* -------------------------------------------------------- 13. THE PRINCIPLES
   Numbered because the five steps genuinely run in order: you cannot select
   what you have not traced, or prove what you have not combined. */
.principles {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--rule-dark);
}
.principle {
  padding: var(--s6) var(--s5) var(--s7) 0;
  border-right: 1px solid var(--rule-dark);
  padding-right: var(--s5);
}
.principle:last-child { border-right: 0; }
.principle__n {
  font: 400 var(--fs-micro)/1 var(--mono);
  letter-spacing: 0.2em; color: var(--fire); display: block; margin-bottom: var(--s5);
}
.principle__t {
  font-family: var(--display); font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  font-weight: 500; line-height: 1.05; margin-bottom: var(--s3); display: block;
}
.principle__d { font-size: var(--fs-small); color: var(--sand); line-height: 1.55; margin: 0; }
@media (max-width: 1000px) { .principles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .principles { grid-template-columns: 1fr; }
  .principle { border-right: 0; border-bottom: 1px solid var(--rule-dark); padding-bottom: var(--s5); }
}

/* --------------------------------------------------------- 14. PEDIGREE TREE */
.pedigree {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4); align-items: stretch;
}
.ped-col { display: flex; flex-direction: column; gap: var(--s3); justify-content: center; }
.ped-col__label {
  font: 400 var(--fs-micro)/1 var(--mono);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sand-dim);
  margin-bottom: var(--s2);
}
:is(.on-ivory,.on-ivory-2) .ped-col__label { color: var(--stone); }

.ped-node {
  display: block; padding: var(--s4);
  border: 1px solid var(--rule-dark); background: var(--ink-2);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
:is(.on-ivory,.on-ivory-2) .ped-node { background: var(--ivory); border-color: var(--rule-light); }
.ped-node:hover { border-color: var(--fire); background: var(--ink-3); }
:is(.on-ivory,.on-ivory-2) .ped-node:hover { border-color: var(--ember); background: var(--ivory-2); }
.ped-node__name { font-family: var(--display); font-size: 1.15rem; font-weight: 500; display: block; }
.ped-node__reg { font: 400 var(--fs-micro)/1.4 var(--mono); letter-spacing: 0.1em; color: var(--sand-dim); display: block; margin-top: var(--s1); }
:is(.on-ivory,.on-ivory-2) .ped-node__reg { color: var(--stone); }
.ped-node--self { border-color: var(--fire); background: var(--ink-3); }
:is(.on-ivory,.on-ivory-2) .ped-node--self { border-color: var(--ember); background: var(--ivory-2); }
.ped-node--unknown { border-style: dashed; color: var(--sand-dim); }

@media (max-width: 760px) {
  .pedigree { grid-template-columns: 1fr; }
  .ped-col { gap: var(--s2); }
}

/* -------------------------------------------------------- 15. ANIMAL PAGE UI */
.animal-hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0; }
@media (max-width: 940px) { .animal-hero { grid-template-columns: 1fr; } }
.animal-hero__frame { position: relative; display: flex; }
.animal-hero__frame > * { flex: 1; }
.animal-hero__media { position: relative; background: var(--ink-2); min-height: 320px; }
.animal-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.animal-hero__panel {
  padding: clamp(2rem, 4vw, 3.5rem) var(--gutter) clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
  display: flex; flex-direction: column; gap: var(--s5); justify-content: center;
  border-left: 1px solid var(--rule-dark);
}
@media (max-width: 940px) { .animal-hero__panel { border-left: 0; border-top: 1px solid var(--rule-dark); padding-inline: var(--gutter); } }

.quick-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px; background: var(--rule-dark); border: 1px solid var(--rule-dark);
}
.quick-facts div { background: var(--ink); padding: var(--s4); }
:is(.on-ivory,.on-ivory-2) .quick-facts { background: var(--rule-light); border-color: var(--rule-light); }
:is(.on-ivory,.on-ivory-2) .quick-facts div { background: var(--paper); }

/* Sticky enquiry bar — mobile always has ENQUIRE and WHATSAPP within reach. */
.sticky-enquire {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  display: none; gap: 1px;
  background: var(--rule-dark-2);
  border-top: 1px solid var(--rule-dark-2);
}
.sticky-enquire .btn { flex: 1; justify-content: center; border: 0; }
@media (max-width: 940px) { .sticky-enquire { display: flex; } body.has-sticky { padding-bottom: 64px; } }

/* ---------------------------------------------------------- 16. FILTER CHIPS */
.filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: clamp(2rem, 4vw, 3rem); }
.chip {
  padding: 0.65rem 1.05rem; min-height: 44px;
  display: inline-flex; align-items: center;
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: 0.15em; text-transform: uppercase;
  border: 1px solid var(--rule-dark); color: var(--sand);
  transition: all 0.2s var(--ease);
}
.chip:hover { border-color: var(--fire); color: var(--fire); }
.chip[aria-pressed="true"] { background: var(--fire); border-color: var(--fire); color: #17110D; }
:is(.on-ivory,.on-ivory-2) .chip { border-color: var(--rule-light); color: var(--stone); }
:is(.on-ivory,.on-ivory-2) .chip:hover { border-color: var(--ember); color: var(--ember); }
:is(.on-ivory,.on-ivory-2) .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------------------------------------------------------------- 17. TABLES */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; min-width: 620px; }
table.data th, table.data td {
  text-align: left; padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule-dark);
  font: 400 var(--fs-small)/1.5 var(--mono); letter-spacing: 0.01em;
  white-space: nowrap;
}
table.data th {
  font-weight: 500; font-size: var(--fs-micro); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sand-dim);
  border-bottom-color: var(--rule-dark-2);
}
table.data td { color: var(--ivory); }
table.data tr:hover td { background: var(--ink-2); }
:is(.on-ivory,.on-ivory-2) table.data th, :is(.on-ivory,.on-ivory-2) table.data td { border-bottom-color: var(--rule-light); }
:is(.on-ivory,.on-ivory-2) table.data th { color: var(--stone); border-bottom-color: var(--rule-light-2); }
:is(.on-ivory,.on-ivory-2) table.data td { color: var(--ink); }
:is(.on-ivory,.on-ivory-2) table.data tr:hover td { background: var(--ivory); }
td.is-firesky { color: var(--fire); }

/* --------------------------------------------------------------- 18. JOURNAL */
.article-card {
  display: flex; flex-direction: column; gap: var(--s3);
  padding-top: var(--s5); border-top: 1px solid var(--rule-dark);
}
:is(.on-ivory,.on-ivory-2) .article-card { border-top-color: var(--rule-light); }
.article-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  font: 400 var(--fs-micro)/1 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sand-dim);
}
:is(.on-ivory,.on-ivory-2) .article-card__meta { color: var(--stone); }
.article-card__title { font-family: var(--display); font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-weight: 500; line-height: 1.15; }
.article-card a.article-card__title:hover { color: var(--fire); }
:is(.on-ivory,.on-ivory-2) .article-card a.article-card__title:hover { color: var(--ember); }

/* ------------------------------------------------------- 18b. ARTICLE BODY */
.article-body { margin-top: var(--s7); }
.article-body p { margin-bottom: var(--s5); }
.article-body h2, .article-body h3, .article-body h4 {
  margin: var(--s8) 0 var(--s4);
}
.article-body h2 { font-size: var(--fs-h3); }
.article-body h3 { font-size: 1.2rem; font-variation-settings: "opsz" 24, "SOFT" 20; }
.article-body h4 {
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember);
}
.article-body ul, .article-body ol { margin: 0 0 var(--s5); padding-left: 1.35rem; max-width: var(--measure); }
.article-body li { margin-bottom: var(--s2); }
.article-body a { color: var(--ember); border-bottom: 1px solid currentColor; }
.article-body blockquote {
  margin: var(--s6) 0; padding-left: var(--s5);
  border-left: 2px solid var(--fire);
  font-family: var(--display); font-size: 1.3rem; line-height: 1.35;
}
.article-body img { margin: var(--s6) 0; width: 100%; }
.article-body figure { margin: var(--s6) 0; }
/* Tables in the migrated posts carry the site's data-table treatment */
.article-body figure:has(table) { overflow-x: auto; }
.article-body table {
  width: 100%; border-collapse: collapse; min-width: 460px;
  font: 400 var(--fs-small)/1.5 var(--mono);
}
.article-body th, .article-body td {
  text-align: left; padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule-light); vertical-align: top;
}
.article-body th { font-weight: 500; color: var(--stone); }
.article-body tr:first-child td { font-weight: 500; }

/* ------------------------------------------------------------------ 19. FORM */
.field { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s5); }
.field label {
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sand-dim);
}
:is(.on-ivory,.on-ivory-2) .field label { color: var(--stone); }
.field input, .field textarea, .field select {
  font: 400 1rem/1.5 var(--body);
  padding: 0.85rem 1rem; min-height: 48px;
  background: var(--ink-2); border: 1px solid var(--rule-dark);
  color: var(--ivory);
}
:is(.on-ivory,.on-ivory-2) .field input, :is(.on-ivory,.on-ivory-2) .field textarea, :is(.on-ivory,.on-ivory-2) .field select {
  background: var(--paper); border-color: var(--rule-light); color: var(--ink);
}
.field input:focus, .field textarea:focus { border-color: var(--fire); outline: none; }
.field textarea { resize: vertical; min-height: 140px; }

/* ---------------------------------------------------------------- 20. FOOTER */
.site-foot { background: var(--ink); border-top: 1px solid var(--rule-dark); padding-block: clamp(3rem, 6vw, 5rem) var(--s6); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s7); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-col h4 {
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fire);
  margin-bottom: var(--s4);
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.foot-col a { font-size: var(--fs-small); color: var(--sand); }
.foot-col a:hover { color: var(--fire); }
.foot-mark { font-family: var(--display); font-size: 1.5rem; font-weight: 500; margin-bottom: var(--s3); display: block; }
.foot-motto {
  font: 500 var(--fs-micro)/1.8 var(--mono);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand-dim);
}
.foot-base {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: var(--s5);
  border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between;
  font: 400 var(--fs-micro)/1.6 var(--mono); letter-spacing: 0.1em; color: var(--sand-dim);
}

/* ------------------------------------------------------ 20a. GENETIC MAP (SVG)
   A draggable, zoomable window onto the pedigree. Ancestors above the focus
   animal, descendants below; drag to pan, wheel or the buttons to zoom, click
   any animal to recentre. */
.gmap {
  position: relative;
  border: 1px solid var(--rule-dark);
  background: var(--ink-2);
  overflow: hidden;
  touch-action: none;
}
:is(.on-ivory,.on-ivory-2) .gmap { border-color: var(--rule-light); background: var(--ivory); }

.gmap__stage {
  display: block; width: 100%;
  height: clamp(460px, 68vh, 780px);
  cursor: grab;
  background-image:
    linear-gradient(var(--rule-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-dark) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
}
:is(.on-ivory,.on-ivory-2) .gmap__stage {
  background-image:
    linear-gradient(var(--rule-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-light) 1px, transparent 1px);
}
.gmap__stage.is-panning { cursor: grabbing; }

.gmap__edge { fill: none; stroke-width: 1.5; stroke-linecap: round; opacity: 0.55; }
.gmap__edge--dim { opacity: 0.12; }

.gmap__node { cursor: pointer; }
.gmap__node rect.plate {
  fill: var(--ink); stroke: var(--rule-dark-2); stroke-width: 1;
  transition: stroke 0.15s var(--ease);
}
:is(.on-ivory,.on-ivory-2) .gmap__node rect.plate { fill: var(--paper); stroke: var(--rule-light-2); }
.gmap__node:hover rect.plate { stroke: var(--fire); }
.gmap__node--focus rect.plate { stroke: var(--fire); stroke-width: 2; }
/* Fire Sky ownership reads at a glance on the map. */
.gmap__node rect.plate--owned { stroke: var(--fire); stroke-width: 1.5; }
.gmap__node--owned text.nm { font-weight: 600; }

/* Foundation cows Fire Sky owns or descends from are the clickable ones. */
.ledger__cell--owned { box-shadow: inset 0 0 0 2px var(--fire); }
.ledger__cell--owned .ledger__code { color: var(--fire); font-weight: 600; }
.gmap__node--dim { opacity: 0.22; }
/* A filtered-out animal stays on the map — the pedigree is still the truth —
   but recedes far enough that what matched is what you read. */
.gmap__node--filtered { opacity: 0.16; }
.gmap__node--filtered:hover { opacity: 0.6; }

/* Ownership: an orange dot in the top right corner of the plate. */
.gmap__node circle.own-dot { fill: var(--fire); stroke: none; }

.gmap__node text.nm {
  font: 500 13px/1 var(--display); fill: var(--ivory);
  dominant-baseline: middle;
}
:is(.on-ivory,.on-ivory-2) .gmap__node text.nm { fill: var(--ink); }
.gmap__node text.rg {
  font: 400 9.5px/1 var(--mono); letter-spacing: 0.06em; fill: var(--sand-dim);
  dominant-baseline: middle;
}
:is(.on-ivory,.on-ivory-2) .gmap__node text.rg { fill: var(--stone); }

.gmap__tier {
  font: 400 9.5px/1 var(--mono); letter-spacing: 0.18em;
  fill: var(--sand-dim); text-transform: uppercase;
}
:is(.on-ivory,.on-ivory-2) .gmap__tier { fill: var(--stone); }

/* Controls float over the stage */
.gmap__ctrls {
  position: absolute; right: var(--s4); bottom: var(--s4);
  display: flex; flex-direction: column; gap: 1px;
  border: 1px solid var(--rule-dark-2);
  background: var(--rule-dark-2);
}
.gmap__ctrls button {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--ivory);
  font: 500 1rem/1 var(--mono);
}
:is(.on-ivory,.on-ivory-2) .gmap__ctrls button { background: var(--paper); color: var(--ink); }
.gmap__ctrls button:hover { background: var(--fire); color: #17110D; }

.gmap__hint {
  position: absolute; left: var(--s4); bottom: var(--s4);
  font: 400 var(--fs-micro)/1.5 var(--mono); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sand-dim);
  pointer-events: none;
}
:is(.on-ivory,.on-ivory-2) .gmap__hint { color: var(--stone); }

/* Bloodline legend, doubling as the filter */
.lines-legend {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1px; background: var(--rule-dark); border: 1px solid var(--rule-dark);
}
:is(.on-ivory,.on-ivory-2) .lines-legend { background: var(--rule-light); border-color: var(--rule-light); }
.lines-legend button {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); min-height: 52px;
  background: var(--ink); text-align: left; width: 100%;
  transition: background 0.15s var(--ease);
}
:is(.on-ivory,.on-ivory-2) .lines-legend button { background: var(--paper); }
.lines-legend button:hover { background: var(--ink-3); }
:is(.on-ivory,.on-ivory-2) .lines-legend button:hover { background: var(--ivory-2); }
.lines-legend button[aria-pressed="true"] { background: var(--ink-3); }
:is(.on-ivory,.on-ivory-2) .lines-legend button[aria-pressed="true"] { background: var(--ivory-2); }
.lines-legend .sw {
  width: 14px; height: 14px; flex: 0 0 14px; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}
.lines-legend .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lines-legend .ln { font-family: var(--display); font-size: 1rem; font-weight: 500; line-height: 1.1; }
.lines-legend .fd {
  font: 400 var(--fs-micro)/1.3 var(--mono); letter-spacing: 0.1em; color: var(--sand-dim);
}
:is(.on-ivory,.on-ivory-2) .lines-legend .fd { color: var(--stone); }
.lines-legend .ct { margin-left: auto; font: 500 var(--fs-small)/1 var(--mono); color: var(--sand-dim); }
:is(.on-ivory,.on-ivory-2) .lines-legend .ct { color: var(--stone); }

/* ----------------------------------------------------------- 20b. GENETIC MAP
   Three bands: ancestors above, the focus animal, descendants below. Selecting
   any animal recentres the map on it. */
.map-shell { border: 1px solid var(--rule-dark); background: var(--ink-2); }
:is(.on-ivory,.on-ivory-2) .map-shell { border-color: var(--rule-light); background: var(--ivory); }

.map-bar {
  display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
  padding: var(--s4); border-bottom: 1px solid var(--rule-dark);
}
:is(.on-ivory,.on-ivory-2) .map-bar { border-bottom-color: var(--rule-light); }
.map-bar__label {
  font: 400 var(--fs-micro)/1 var(--mono); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--sand-dim); margin-right: var(--s2);
}
:is(.on-ivory,.on-ivory-2) .map-bar__label { color: var(--stone); }

/* The filter row. Each control is a labelled select rather than a chip, because
   five criteria as chips is a wall and as selects it is one line you can read. */
.map-bar--filters {
  border: 1px solid var(--rule-dark); border-top: 0; align-items: flex-end;
  gap: var(--s3) var(--s4);
}
:is(.on-ivory,.on-ivory-2) .map-bar--filters { border-color: var(--rule-light); }
.map-bar--filters.is-active { border-left: 2px solid var(--fire); }
.map-bar--filters .field { margin-bottom: 0; gap: var(--s1); }
.map-bar--filters .field__key {
  font: 400 var(--fs-micro)/1 var(--mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sand-dim);
}
:is(.on-ivory,.on-ivory-2) .map-bar--filters .field__key { color: var(--stone); }
.map-bar--filters select { min-height: 44px; padding: .5rem .7rem; }
.map-bar--filters [data-filter-clear] { align-self: flex-end; }

/* Inbreeding cell: figure first, band underneath, banded by severity. */
td.inb small {
  display: block; margin-top: 2px;
  font: 400 var(--fs-micro)/1.3 var(--mono);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--sand-dim);
}
:is(.on-ivory,.on-ivory-2) td.inb small { color: var(--stone); }
td.inb--medium { color: var(--fire-2); }
td.inb--high { color: var(--fire); font-weight: 600; }
:is(.on-ivory,.on-ivory-2) :is(td.inb--medium, td.inb--high) { color: var(--ember); }
td.inb--unknown { color: var(--sand-dim); }

.map-canvas { padding: clamp(1rem, 3vw, 2.5rem); overflow-x: auto; }
.map-band { margin-bottom: var(--s6); }
.map-band:last-child { margin-bottom: 0; }
.map-band__head {
  display: flex; align-items: baseline; gap: var(--s3);
  font: 400 var(--fs-micro)/1 var(--mono); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--sand-dim);
  padding-bottom: var(--s3); margin-bottom: var(--s4);
  border-bottom: 1px solid var(--rule-dark);
}
:is(.on-ivory,.on-ivory-2) .map-band__head { color: var(--stone); border-bottom-color: var(--rule-light); }
.map-band__count { color: var(--fire); }

.map-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.map-row--gen { gap: var(--s2); }

.map-node {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--rule-dark); background: var(--ink);
  min-width: 190px; text-align: left;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}
:is(.on-ivory,.on-ivory-2) .map-node { background: var(--paper); border-color: var(--rule-light); }
.map-node:hover { border-color: var(--fire); transform: translateY(-2px); }
.map-node__thumb {
  width: 44px; height: 44px; flex: 0 0 44px; object-fit: cover;
  background: var(--ink-3);
}
:is(.on-ivory,.on-ivory-2) .map-node__thumb { background: var(--ivory-2); }
.map-node__thumb--blank {
  display: flex; align-items: center; justify-content: center;
  font: 500 0.7rem/1 var(--mono); color: var(--sand-dim);
}
.map-node__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.map-node__name { font-family: var(--display); font-size: 1.02rem; font-weight: 500; line-height: 1.1; }
.map-node__reg { font: 400 var(--fs-micro)/1.3 var(--mono); letter-spacing: 0.08em; color: var(--sand-dim); }
:is(.on-ivory,.on-ivory-2) .map-node__reg { color: var(--stone); }
.map-node__sex { color: var(--fire); }

.map-node--focus {
  border-color: var(--fire); background: var(--ink-3);
  min-width: 260px; padding: var(--s4);
}
:is(.on-ivory,.on-ivory-2) .map-node--focus { background: var(--ivory-2); border-color: var(--ember); }
.map-node--focus .map-node__thumb { width: 84px; height: 84px; flex-basis: 84px; }
.map-node--focus .map-node__name { font-size: 1.5rem; }

.map-node--dim { opacity: 0.45; }
.map-empty {
  font: 400 var(--fs-small)/1.5 var(--mono); color: var(--sand-dim); padding: var(--s3) 0;
}
:is(.on-ivory,.on-ivory-2) .map-empty { color: var(--stone); }

.map-legend {
  display: flex; flex-wrap: wrap; gap: var(--s5);
  padding: var(--s4); border-top: 1px solid var(--rule-dark);
  font: 400 var(--fs-micro)/1.6 var(--mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sand-dim);
}
:is(.on-ivory,.on-ivory-2) .map-legend { border-top-color: var(--rule-light); color: var(--stone); }

/* ---------------------------------------------------------------- 21. MOTION */
[data-reveal] { opacity: 0; transform: translateY(14px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .ledger__cell--live::before { transform: scaleY(1); }
  .ledger__cell--empty::after { transform: scaleX(1); }
}