/* YNL Family Bullies. One face, two dark grounds, one accent used only for actions. The storm behind
   everything answers to the scroll; the page moves as the reader moves, and holds still when they do. */
@font-face {
  font-family: "Bricolage";
  src: url("fonts/bricolage-var.woff2") format("woff2");
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: optional;   /* a first visit never waits on the font; from the second page on it is cached and used */
}

:root {
  /* The colour values below are filled by build.py from the "theme" object in kennel.json. Edit kennel.json, not this block. */
  --white: #ffffff;
  --ink: #05070d;
  --ink-rgb: 5,7,13;
  --ground: #182236;
  --ground-rgb: 24,34,54;
  --muted-light: #9aa7ba;
  --muted-dark: #a1a1a6;
  --brass: #4cc2ff;        /* the one accent, on light grounds */
  --brass-dark: #4cc2ff;   /* the one accent, on dark grounds */
  --button-text: #05070d;
  --ph-light: #162032;
  --ph-dark: #1c1d23;
  --page: #05070d;         /* what is behind everything, seen where nothing else is drawn */
  --on-ground: #ffffff;    /* text on the lighter of the two grounds */
  --rule: rgba(255,255,255,.12);
  --rule-strong: rgba(255,255,255,.22);
  --accent-rgb: 76,194,255;
  --ease: cubic-bezier(.2,.7,.2,1);
  --nav-h: 48px;           /* the header's height as drawn on a phone, so nothing moves when site.js measures it */
  --display: clamp(38px, 10vw, 44px);
  --reading: 19px;
  --pad-x: 24px;
  --pad-y: 56px;
}
@media (min-width: 900px) {
  :root { --display: 64px; --reading: 21px; --pad-x: 64px; --pad-y: 96px; --nav-h: 100px; }
}
@media (min-width: 1200px) {
  :root { --display: 76px; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Bricolage", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--reading);
  line-height: 1.45;
  color: var(--ink);
  background: var(--page);
  font-variation-settings: "opsz" 14;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-variation-settings: "opsz" 96; font-size: var(--display); }
p { margin: 0; }

.skip {
  position: absolute; left: -999px; top: 8px; background: var(--ground); color: var(--on-ground);
  padding: 8px 12px; z-index: 100;
}
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--brass-dark); outline-offset: 3px; }

/* Header: two rows, glass over the first module. Never the title and the links on one line. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  color: var(--white);
  background: rgba(var(--ink-rgb),.22);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav.is-scrolled {
  background: rgba(var(--ink-rgb),.66);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}
@supports not (backdrop-filter: blur(1px)) {
  .nav, .nav.is-scrolled { background: rgba(var(--ink-rgb),.92); }
}
.nav__row { display: flex; align-items: center; padding: 0 var(--pad-x); }
.nav__row--brand { height: 48px; transition: height .3s var(--ease); }
.nav__row--links { height: 44px; gap: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.nav__row--links nav { flex: 1 1 auto; min-width: 0; }
.nav.is-scrolled .nav__row--brand { height: 40px; }
.nav__brand { font-weight: 700; text-decoration: none; letter-spacing: -0.02em; font-size: 19px; white-space: nowrap; transition: font-size .3s var(--ease); }
.nav.is-scrolled .nav__brand { font-size: 16px; }
.nav__links {
  display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.nav__links::-webkit-scrollbar { display: none; }
.nav__links li { flex: 0 0 auto; }
.nav__links a { text-decoration: none; font-size: 16px; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; transition: transform .25s var(--ease); }
.nav__links a:hover { transform: translateY(-2px); }
.nav__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; text-decoration-color: var(--brass-dark); }
.nav__cta {
  flex: 0 0 auto; white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 600; color: var(--button-text);
  background: var(--brass-dark); padding: 0 14px; min-height: 36px; display: inline-flex; align-items: center;
}
/* Signed-in bar: empty and hidden until the office script fills it. */
#signed-in:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; min-height: 40px; padding: 0 var(--pad-x); font-size: 15px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
#signed-in a { color: var(--white); text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; }
#signed-in a:hover { text-decoration: underline; text-underline-offset: 6px; }
.nav:has(#signed-in:not([hidden])) .nav__signin { display: none; }
/* Phone: the brand row carries a compact Ask a question and a menu button; the links row and the
   signed-in bar are folded into a panel under the header, one link per row. */
.nav__phone { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav__cta--phone { min-height: 34px; padding: 0 12px; font-size: 14px; }
.nav__burger {
  width: 44px; height: 44px; margin: 0 -8px 0 0; padding: 0; border: 0; background: none; color: var(--white); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 22px;
}
.nav__burger svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav__burger svg path { transition: transform .25s var(--ease), opacity .2s var(--ease); transform-origin: 12px 12px; }
.nav__burger[aria-expanded="true"] .nav__burger-top { transform: translateY(5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__burger-mid { opacity: 0; }
.nav__burger[aria-expanded="true"] .nav__burger-bot { transform: translateY(-5px) rotate(-45deg); }
.nav__burger:focus-visible { outline: 3px solid var(--brass-dark); outline-offset: -3px; }
.nav__menu {
  position: absolute; left: 0; right: 0; top: 100%; background: rgba(var(--ink-rgb), .96);
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 24px 40px rgba(0,0,0,.35); padding: 6px 0 12px;
  max-height: calc(100svh - 48px); overflow-y: auto;
}
.nav__menu[hidden] { display: none; }
.nav__menu-list { list-style: none; margin: 0; padding: 0; }
.nav__menu-list a, .nav__menu-signed a, .nav__menu-signed button {
  display: flex; align-items: center; min-height: 48px; padding: 0 var(--pad-x); color: var(--white); text-decoration: none;
  font-size: 17px; font-weight: 600; box-shadow: inset 0 -1px 0 rgba(255,255,255,.08); width: 100%; text-align: left; background: none; border: 0; font-family: inherit; cursor: pointer;
}
.nav__menu-list a[aria-current="page"] { color: var(--brass-dark); }
.nav__menu-signed { display: contents; }
.nav__menu-signed form { display: contents; }
.nav:has(.nav__menu-signed a) .nav__menu-list .nav__signin { display: none; }
body.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .nav__menu:not([hidden]) { animation: menu-in .22s var(--ease); }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 899px) {
  .nav__row--links { display: none; }
  #signed-in:not([hidden]) { display: none; }
}
@media (min-width: 900px) {
  .nav__row--brand { height: 56px; }
  .nav__brand { font-size: 22px; }
  .nav__links { gap: 32px; overflow: visible; }
  .nav__links a { font-size: 17px; }
  .nav__phone, .nav__menu { display: none; }
}

/* ============================================================
   Modules. On a phone the photograph sits above the words. On a
   wide screen the two share the screen side by side, and the
   side the photograph takes alternates down the page, so no two
   modules in a row are the same shape.
   ============================================================ */
.mod {
  position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow: hidden;
}
.mod--dark { background: rgba(var(--ink-rgb), .72); color: var(--white); }
.mod--light { background: rgba(var(--ground-rgb), .82); color: var(--on-ground); }
.mod--tight { min-height: 0; }

.mod__photo { position: relative; grid-row: 1; min-height: 58svh; }
/* The ground around a contained photo keeps the photo's own hue, but only close in: it fades out to
   the page so a wide screen shows a lit surround, not a slab of colour beside the picture. */
.mod__img { position: absolute; inset: 0; background: radial-gradient(closest-side at 50% 50%, var(--pg, var(--ph-dark)) 0%, rgba(var(--ink-rgb),.55) 82%, rgba(var(--ink-rgb),.9) 100%), var(--pg, var(--ph-dark)); }
.mod__img picture { display: contents; }
.mod__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
.mod__img img.is-broken, .gallery img.is-broken { visibility: hidden; }
@media (max-width: 899px) {
  /* A landscape photo does not sit in a full-height ground: the box takes the photo's own aspect and the module shrinks to photo plus words. */
  .mod:not(.hero):has(.mod__img[data-wide]) { min-height: 0; }
  .mod:not(.hero) .mod__photo:has(.mod__img[data-wide]) { min-height: 0; padding-top: 12px; }
  .mod:not(.hero) .mod__img[data-wide] { position: relative; aspect-ratio: var(--ar, 4/3); }
}
/* The photo ground melts into the module ground at the bottom, so the photo never reads as a box. */
.mod__photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: linear-gradient(to top, rgba(var(--ink-rgb),1) 0%, rgba(var(--ink-rgb),.6) 35%, rgba(var(--ink-rgb),0) 100%);
  pointer-events: none;
}
.mod--light .mod__photo::after { background: linear-gradient(to top, rgba(var(--ground-rgb),1) 0%, rgba(var(--ground-rgb),.6) 35%, rgba(var(--ground-rgb),0) 100%); }
.mod__photo::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14%;
  background: linear-gradient(to bottom, rgba(var(--ink-rgb),.35), rgba(var(--ink-rgb),0));
  pointer-events: none; z-index: 1;
}
.mod--light .mod__photo::before { background: linear-gradient(to bottom, rgba(var(--ground-rgb),.35), rgba(var(--ground-rgb),0)); }

/* Placeholder for a photograph that does not exist yet. */
.ph {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  background: var(--ph-dark); color: var(--muted-dark); font-size: 15px; padding: 24px;
}
.mod--light .ph { background: var(--ph-light); color: var(--muted-light); }
.ph span { display: block; max-width: 34ch; }
.ph b { font-weight: 600; display: block; margin-bottom: 4px; }

.mod__text { grid-row: 2; padding: 8px var(--pad-x) var(--pad-y); max-width: 720px; }
.mod__text p { margin-top: 16px; color: var(--muted-dark); max-width: 38ch; }
.mod--light .mod__text p { color: var(--muted-light); }
.mod__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; margin: 20px 0 0; padding: 0; list-style: none; }
.mod__links a {
  text-decoration: none; color: var(--brass-dark); font-weight: 600; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; line-height: 1; transition: transform .25s var(--ease);
}
.mod--light .mod__links a { color: var(--brass); }
.mod__links a::after {
  content: ""; width: 8px; height: 8px; flex: 0 0 8px; margin-top: 1px;
  border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
.mod__links a:hover { transform: translateY(-2px); }
.mod__links a:hover::after { transform: translate(4px, 0) rotate(45deg); }

@media (min-width: 900px) {
  .mod:not(.mod--tight) { grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .mod__photo { grid-row: 1; grid-column: 2; min-height: 100svh; }
  .mod__text { grid-row: 1; grid-column: 1; align-self: center; z-index: 2; padding: calc(var(--nav-h) + 24px) var(--pad-x) var(--pad-y); max-width: none; }
  .mod__text p { max-width: 42ch; }
  .mod--light .mod__text { color: var(--on-ground); }
  /* every other module puts the photograph on the left */
  main > section.mod:nth-of-type(odd):not(.mod--tight) .mod__photo { grid-column: 1; }
  main > section.mod:nth-of-type(odd):not(.mod--tight) .mod__text { grid-column: 2; }
  /* the words sit beside the photograph, not over it, so the photograph keeps its bottom edge */
  .mod:not(.hero) .mod__photo::after { display: none; }
  .mod__photo::before { display: none; }
  .mod__img { inset: 6% 0; }
  .mod__img img { inset: 0; }
}

/* ============================================================
   The hero. On a wide screen it holds for most of a screen while
   the page begins to move beneath the reader: the photograph
   grows a little, its reflection deepens, the words lift away,
   and the storm strikes as they scroll. Then the page carries on.
   ============================================================ */
.pin { position: relative; }
.hero .mod__photo { min-height: 62svh; }
.hero .mod__img { top: var(--nav-h); }
.hero .mod__photo::before { top: var(--nav-h); }
.hero .ph { top: var(--nav-h); }
@media (min-width: 900px) {
  .pin { height: 170svh; }
  /* the reflection: the photograph stands on a wet floor; on a phone the words sit where the floor would be, so none there */
  .hero .mod__img img { -webkit-box-reflect: below 2px linear-gradient(rgba(0,0,0,0) 64%, rgba(0,0,0,.34)); }
  .hero { position: sticky; top: 0; height: 100svh; min-height: 0; }
  .hero .mod__img { top: var(--nav-h); bottom: 0; }
  /* the photograph stands on the floor of the module at its own shape, so its reflection sits right under it */
  .hero .mod__img img { inset: auto; top: 7%; left: 0; right: 0; margin: 0 auto; height: 72%; width: auto; max-width: 92%; }
  .hero .mod__img[data-wide] img { width: 90%; height: auto; max-height: 80%; top: 12%; }
  .hero .mod__photo::after { height: 22%; }
}

/* The ring wordmark, in the top corner of the photograph's side, turns with the scroll. */
.ring { position: absolute; right: var(--pad-x); top: calc(var(--nav-h) + 12px); width: 88px; aspect-ratio: 1; z-index: 2; }
@media (min-width: 900px) { .ring { width: 124px; top: calc(var(--nav-h) + 20px); } }
.ring svg { width: 100%; height: 100%; overflow: visible; }
.ring__text { fill: var(--white); font-family: "Bricolage", Arial, sans-serif; font-weight: 700; font-size: 15.5px; letter-spacing: .14em; }
.ring__spin { transform-origin: 50% 50%; }
.ring__mark { fill: none; stroke: var(--white); stroke-width: 2; }
.ring__star { fill: var(--brass-dark); }
.ring__initials { fill: var(--white); font-family: "Bricolage", Arial, sans-serif; font-weight: 800; font-size: 46px; letter-spacing: -0.04em; }

/* ============================================================
   Motion. Reveal on entry (one observer, once, the photograph a
   beat before the words), gentle parallax on every photograph
   (scroll-driven, no script), the hero's hold, and hover lifts.
   ============================================================ */
.mod__img, .ph { transition: opacity .8s var(--ease), scale 1.1s var(--ease); }
.mod__text > *, .sheet > *, .gallery__head { transition: opacity .6s var(--ease), translate .6s var(--ease); }
.mod__text > :nth-child(2), .sheet > :nth-child(2) { transition-delay: .12s; }
.mod__text > :nth-child(3), .sheet > :nth-child(3) { transition-delay: .22s; }
.mod__text > :nth-child(4), .sheet > :nth-child(4) { transition-delay: .32s; }
.mod__text > :nth-child(5), .sheet > :nth-child(5) { transition-delay: .42s; }
.js .mod:not(.is-in) .mod__img, .js .mod:not(.is-in) .ph { opacity: 0; scale: 1.04; }
/* The first photograph is there from the first paint and only settles into place: it is what the page is judged on. */
.js .hero:not(.is-in) .mod__img, .js .hero:not(.is-in) .ph { opacity: 1; }
/* Below the first screen a photograph is not asked for until the page has loaded: site.js marks each module
   is-near as it comes within a screen and a half, starting at load, so the first photograph has the phone's
   connection to itself. A hidden lazy image is never fetched. Without script every photo loads as it always did. */
@media (scripting: enabled) {
  .mod:not(.hero):not(.is-near) img[loading="lazy"] { display: none; }
}
.js .mod:not(.is-in) .mod__text > *, .js .mod:not(.is-in) .sheet > *, .js .mod:not(.is-in) .gallery__head { opacity: 0; translate: 0 22px; }
.rows li { transition: opacity .5s var(--ease), translate .5s var(--ease); }
.rows li:nth-child(2) { transition-delay: .08s; }
.rows li:nth-child(3) { transition-delay: .16s; }
.rows li:nth-child(4) { transition-delay: .24s; }
.rows li:nth-child(5) { transition-delay: .32s; }
.rows li:nth-child(n+6) { transition-delay: .4s; }
.js .mod:not(.is-in) .rows li { opacity: 0; translate: 0 14px; }
.gallery figure { transition: opacity .6s var(--ease), translate .6s var(--ease); }
.gallery figure:nth-child(2) { transition-delay: .08s; }
.gallery figure:nth-child(3) { transition-delay: .16s; }
.gallery figure:nth-child(4) { transition-delay: .24s; }
.gallery figure:nth-child(5) { transition-delay: .32s; }
.gallery figure:nth-child(n+6) { transition-delay: .4s; }
.js .mod:not(.is-in) .gallery figure { opacity: 0; translate: 0 18px; }

/* Hover: a photograph leans in, a link lifts. The hero's photograph is driven by the scroll instead. */
.mod:not(.hero) .mod__img img { transition: scale .7s var(--ease); }
.mod:not(.hero) .mod__img:hover img { scale: 1.02; }

@supports (animation-timeline: view()) {
  /* Parallax: each photograph drifts up through its module a little slower than the page, so the page has depth. */
  .mod:not(.hero) .mod__img img { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes drift { from { translate: 0 5%; } to { translate: 0 -5%; } }
}
@supports (animation-timeline: scroll()) {
  .ring__spin { animation: ring-turn linear both; animation-timeline: scroll(root); animation-range: 0 120vh; }
  @keyframes ring-turn { from { transform: rotate(0deg); } to { transform: rotate(120deg); } }
  /* The hero's hold: as the reader scrolls the first screen, the photograph grows and the words lift away. */
  .hero .mod__img img { animation: hero-grow linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
  @keyframes hero-grow { from { scale: 1; } to { scale: 1.10; } }
  .hero .mod__text { animation: hero-hold linear both; animation-timeline: scroll(root); animation-range: 18vh 66vh; }
  @keyframes hero-hold { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -28px; } }
  .hero .ring { animation: hero-hold linear both; animation-timeline: scroll(root); animation-range: 30vh 70vh; }
}
@media (max-width: 899px) {
  /* On a phone the hero scrolls away like any module; nothing holds. */
  .hero .mod__text, .hero .ring { animation: none; }
}
@media (max-width: 768px) {
  /* On a phone the hero photograph holds still. It used to grow with the scroll, which slid the
     module's own bottom fade up the dog and read as a shadow moving under him. No growth, no
     drift, no reflection: the picture and everything under it stay put and only the page moves. */
  .hero .mod__img img { animation: none; scale: 1; translate: none; -webkit-box-reflect: none; }
  .hero .mod__img, .hero .mod__photo { transform: none; }
}

/* Sheets: the facts that do not fit a module. Same padding, same two sizes of type, the rows on glass. */
.sheet { padding: var(--pad-y) var(--pad-x); max-width: 960px; }
.sheet h2 { margin-bottom: 24px; }
.sheet p { color: var(--muted-light); max-width: 60ch; }
.mod--light .rows .k, .mod--light .rows .note, .mod--light .rows del { color: var(--muted-light); }
.sheet p + p { margin-top: 12px; }
.mod--dark .sheet p { color: var(--muted-dark); }
.sheet .mod__links { margin-top: 8px; }
.rows {
  list-style: none; margin: 16px 0 0; padding: 4px 22px; max-width: 640px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
.rows li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--rule); }
.rows li:first-child { border-top: 0; }
.mod--dark .rows li { border-color: rgba(255,255,255,.12); }
.rows .k { color: var(--muted-light); }
.mod--dark .rows .k { color: var(--muted-dark); }
.rows .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.rows .note { display: block; font-weight: 400; color: var(--muted-light); font-size: 16px; }
.mod--dark .rows .note { color: var(--muted-dark); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rows del { color: var(--muted-light); font-weight: 400; text-decoration-thickness: 1px; margin-right: 8px; }
.mod--dark .rows del { color: var(--muted-dark); }
.price-now { color: var(--brass); }
.mod--dark .price-now { color: var(--brass-dark); }
.v--finding { text-decoration: underline; text-underline-offset: 4px; }
.v--pending { font-weight: 400; }
.sheet p a { color: var(--brass); font-weight: 600; text-decoration: none; }
.mod--dark .sheet p a { color: var(--brass-dark); }
@media (min-width: 900px) {
  .sheet { padding: calc(var(--pad-y) * .9) var(--pad-x); }
}

/* Past bullies: a grid of whole dogs on matched grounds. */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 24px var(--pad-x); }
.gallery__head { padding: 24px var(--pad-x) 0; color: var(--muted-light); font-size: 16px; }
.mod--dark .gallery__head { color: var(--muted-dark); }
.gallery figure { margin: 0; position: relative; aspect-ratio: 1; overflow: hidden; }
.gallery .mod__img { position: absolute; inset: 0; }
.gallery figure img { width: 100%; height: 100%; object-fit: contain; transition: scale .6s var(--ease); }
.gallery figure:hover img { scale: 1.02; }
.gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px; color: var(--white); background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0)); font-size: 15px; }
.gallery .ph { font-size: 13px; }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(3, 1fr); } }

.away { margin-top: 18px; color: var(--muted-dark); font-size: 17px; max-width: 42ch; }

/* The line above the form that says what the question is about. */
.about { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--white); font-size: 17px; }
.about img { width: 64px; height: 64px; object-fit: contain; background: rgba(255,255,255,.08); flex: 0 0 64px; }
.about a { color: var(--brass-dark); font-weight: 600; text-decoration: none; }

/* Form: glass on dark. */
.form { display: grid; gap: 14px; max-width: 520px; margin-top: 24px; }
.form label { display: grid; gap: 6px; font-size: 16px; color: var(--muted-dark); }
.form input, .form textarea {
  font: inherit; color: var(--white); padding: 12px 14px; min-height: 48px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 0;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.form textarea { min-height: 140px; resize: vertical; }
.form button {
  font: inherit; font-weight: 600; color: var(--button-text); background: var(--brass-dark); border: 0; min-height: 48px; padding: 0 22px; cursor: pointer; justify-self: start;
}
.form__note { font-size: 16px; color: var(--muted-dark); }
@media (min-width: 900px) {
  /* the contact hero carries the form beside the photograph and is not held */
  .pin:has(.form) { height: auto; }
  .hero:has(.form) { position: relative; height: auto; min-height: 100svh; }
  .hero:has(.form) .mod__text { animation: none; }
}

/* Footer: a dark closing band. Wordmark, who and where, the pages, the socials, one quiet line. */
.foot { background: var(--ink); color: var(--muted-dark); font-size: 15px; padding: 40px var(--pad-x) 36px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot a { text-decoration: none; color: var(--white); }
.foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__brand { font-weight: 700; font-size: 19px; letter-spacing: -0.02em; display: inline-block; }
.foot__who { margin-top: 4px; }
.foot__contact:empty { display: none; }
.foot__contact li a { display: inline-flex; align-items: center; min-height: 36px; }
.foot .foot__pages { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 24px; padding-top: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.foot__pages a { display: inline-flex; align-items: center; min-height: 36px; font-size: 15px; }
.foot .foot__social { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 4px; }
.foot__social a { display: inline-flex; align-items: center; min-height: 36px; color: var(--muted-dark); }
.foot__small { margin-top: 20px; padding-top: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); font-size: 14px; max-width: 60ch; line-height: 1.4; }
.foot__small + .foot__small { margin-top: 12px; padding-top: 0; box-shadow: none; }
.foot__small a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.inline-form { display: inline; }
.foot__small button { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--white); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Reading layout for the privacy page. */
main > .mod--tight:first-child { padding-top: var(--nav-h); }
.doc { max-width: 720px; }
.doc h1 { margin-bottom: 24px; }
.doc h2 { font-size: var(--reading); font-weight: 700; letter-spacing: 0; line-height: 1.3; margin: 28px 0 8px; font-variation-settings: "opsz" 14; }
.doc p, .doc li { color: var(--on-ground); }
.doc ul { margin: 8px 0; padding-left: 22px; }
.doc li + li { margin-top: 6px; }
.doc form { margin: 12px 0 4px; }
.doc button { font: inherit; font-weight: 600; color: var(--on-ground); background: none; border: 2px solid var(--on-ground); min-height: 44px; padding: 0 18px; cursor: pointer; }
@media (min-width: 900px) {
  .foot { padding: 48px var(--pad-x) 40px; }
  .foot .foot__pages { display: flex; flex-wrap: wrap; gap: 0 28px; }
  .foot .foot__social { margin-top: 0; }
}

/* ============================================================
   The storm. Everything below is the weather and the weight it
   puts on the page. Nothing here is ever laid over a dog: the
   coat colours are what people are buying, so the light stays
   behind the photographs and around them, never on them.
   ============================================================ */

.storm { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.storm__sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.storm__flash {
  position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(120% 85% at var(--fx, 50%) -12%,
    rgba(196,228,255,.90) 0%, rgba(86,164,236,.40) 32%, rgba(20,60,110,.12) 58%, rgba(0,0,0,0) 76%);
  transition: opacity .06s linear;
}
/* Under a no-motion setting the canvas stays empty; a single still glow stands in for the sky. */
.storm[data-still] .storm__sky { display: none; }
.storm[data-still] { background: radial-gradient(120% 70% at 62% -10%, rgba(76,194,255,.10) 0%, rgba(0,0,0,0) 62%); }

/* Everything the page draws sits above the weather. */
.nav, main, .foot, .skip { position: relative; z-index: 1; }
.nav { z-index: 50; }

/* Poster type: heavy and narrowed, the way a fight bill is set. */
h1, h2 { font-variation-settings: "opsz" 96, "wdth" 84; font-weight: 800; letter-spacing: -0.035em; }
.nav__brand, .foot__brand { font-variation-settings: "wdth" 84; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }

/* The small line above a heading that says what you are looking at. */
.eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brass-dark); font-variation-settings: "wdth" 100;
}
.eyebrow::before {
  content: ""; width: 24px; height: 2px; flex: 0 0 24px; background: currentColor;
  box-shadow: 0 0 calc(6px + var(--storm-glow, 0) * 22px) rgba(var(--accent-rgb), calc(.5 + var(--storm-glow, 0) * .5));
}
.mod--light .eyebrow { color: var(--brass); }

/* A seam between modules that the lightning lights up. */
.mod + .mod, .pin + .mod { box-shadow: inset 0 1px 0 rgba(var(--accent-rgb), calc(.10 + var(--storm-glow, 0) * .55)); }
.nav { box-shadow: inset 0 -1px 0 rgba(var(--accent-rgb), calc(.14 + var(--storm-glow, 0) * .6)); }
.nav.is-scrolled { box-shadow: inset 0 -1px 0 rgba(var(--accent-rgb), calc(.22 + var(--storm-glow, 0) * .6)); }

/* A hairline around each photograph, lit by the same flash. The picture itself is untouched. */
.mod__img, .gallery figure {
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), calc(.08 + var(--storm-glow, 0) * .40));
}
.hero .mod__img { box-shadow: none; }

/* The one button that matters: live, and it catches the light when the cursor lands on it. */
.nav__cta, .cta {
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 6px 26px rgba(var(--accent-rgb), .34);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nav__cta:hover, .cta:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 10px 32px rgba(var(--accent-rgb), .45); }
.nav__cta::after, .cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(104deg, transparent 34%, rgba(255,255,255,.55) 50%, transparent 66%);
  transform: translateX(-130%);
  transition: transform .55s var(--ease);
}
.nav__cta:hover::after, .nav__cta:focus-visible::after, .cta:hover::after, .cta:focus-visible::after { transform: translateX(130%); }
.cta {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; margin-top: 22px;
  font-weight: 700; font-size: 17px; text-decoration: none; letter-spacing: .01em;
  color: var(--button-text); background: var(--brass-dark);
}
.mod--light .cta { background: var(--brass); }

/* Words over the weather need their own floor on a small screen. */
@media (max-width: 899px) {
  .mod__text { background: linear-gradient(to bottom, rgba(var(--ink-rgb),0) 0%, rgba(var(--ink-rgb),.55) 18%, rgba(var(--ink-rgb),.75) 100%); }
  .mod--light .mod__text { background: linear-gradient(to bottom, rgba(var(--ground-rgb),0) 0%, rgba(var(--ground-rgb),.6) 18%, rgba(var(--ground-rgb),.8) 100%); }
}

/* A vignette, so a bright daylight photograph settles into a night page instead of punching a hole in it.
   It darkens the frame only: the middle, where the dog is, is left exactly as it was photographed. */
.mod__img::after, .gallery figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(118% 88% at 50% 46%,
    rgba(var(--ink-rgb),0) 40%, rgba(var(--ink-rgb),.16) 62%, rgba(var(--ink-rgb),.44) 82%, rgba(var(--ink-rgb),.78) 100%);
}
.gallery figure { position: relative; }

/* ============================================================
   No motion, on request. Everything above that moves is off, and
   the page reads exactly the same standing still.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .mod:not(.is-in) .mod__img, .js .mod:not(.is-in) .ph { opacity: 1; scale: none; }
  .js .mod:not(.is-in) .mod__text > *, .js .mod:not(.is-in) .sheet > *, .js .mod:not(.is-in) .gallery__head,
  .js .mod:not(.is-in) .rows li, .js .mod:not(.is-in) .gallery figure { opacity: 1; translate: none; }
  .mod__img, .ph, .mod__text > *, .sheet > *, .rows li, .gallery figure, .gallery__head,
  .mod__img img, .gallery figure img, .mod__links a, .nav__links a, .nav__cta, .cta, .nav__row--brand, .nav__brand, .nav { transition: none; animation: none; }
  .ring__spin, .hero .mod__img img, .hero .mod__text, .hero .ring { animation: none; }
  .pin { height: auto; }
  .hero { position: relative; height: auto; min-height: 100svh; }
  .mod:not(.hero) .mod__img:hover img, .gallery figure:hover img { scale: none; }
  .storm__flash { display: none; }
  .nav__cta::after, .cta::after { display: none; }
}

/* The photo viewer: full screen on the dark ground, the picture contained, arrows at the edges. */
.gallery figure[role="button"] { cursor: zoom-in; }
.gallery figure[role="button"]:focus-visible { outline: 3px solid var(--brass-dark); outline-offset: 2px; }
.lb { position: fixed; inset: 0; z-index: 100; background: #05070d; color: var(--white); display: grid; grid-template-rows: 1fr auto; }
.lb[hidden] { display: none; }
.lb__stage { grid-row: 1; display: flex; align-items: center; justify-content: center; padding: 56px 8px 8px; min-height: 0; }
.lb__stage picture, .lb__stage img { display: block; max-width: 100%; max-height: calc(100svh - 56px - 8px - 64px); width: auto; height: auto; object-fit: contain; border-radius: 6px; }
.lb__foot { grid-row: 2; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); min-height: 64px; }
.lb__cap { margin: 0; font-size: 15px; color: var(--muted-dark); }
.lb__cap[hidden] { display: none; }
.lb__count { margin: 0 0 0 auto; font-size: 14px; color: var(--muted-dark); white-space: nowrap; }
.lb__btn { position: absolute; width: 44px; height: 44px; border-radius: 22px; border: 0; background: rgba(255,255,255,.14); color: var(--white); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.lb__btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb__btn:hover { background: rgba(255,255,255,.24); }
.lb__btn:focus-visible { outline: 3px solid var(--brass-dark); outline-offset: 2px; }
.lb__btn:disabled { opacity: .25; cursor: default; }
.lb__close { top: 8px; right: 8px; }
.lb__prev { left: 6px; top: 50%; transform: translateY(-50%); }
.lb__next { right: 6px; top: 50%; transform: translateY(-50%); }
body.lb-open { overflow: hidden; }
@media (min-width: 900px) {
  .lb__stage { padding: 64px 72px 8px; }
  .lb__prev { left: 16px; }
  .lb__next { right: 16px; }
  .lb__cap { font-size: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .lb:not([hidden]) { animation: lb-in .2s var(--ease); }
  @keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
}
.form__keep { margin: 10px 0 0; font-size: 14px; color: var(--muted-dark); }
.form__keep a { color: var(--brass-dark); }

/* ============================================================
   Pedigree trees. David, 22 Sep: "animate them and make it lives
   and have a proper pedigree line on the website"; 24 Sep: "it
   should be a top down tree instead". The dog (or the litter) at
   the top, sire and dam on the row below, sire's side on the left,
   the lines running down. A wide screen shows every row: eight
   great grandparents across, and on a dog's own tree each of them
   carries its two parents as a pair underneath. A phone shows the
   first three rows; under each grandparent a small chevron opens
   that grandparent's parents below the tree (site.js), one branch
   at a time. Each card carries the kennel prefix on its own small
   line over the dog's own name (David, 24 Sep, "New Image" was
   noise). As the tree comes into view the lines draw down and the
   cards lift in a generation at a time; still under reduced motion.
   ============================================================ */
.ped-mod .sheet { padding-bottom: 8px; }
.ped { padding: 8px 12px var(--pad-y); --line: rgba(var(--accent-rgb), .55); --glow: rgba(var(--accent-rgb), .35); --drop: 14px; }
.ped ol { list-style: none; margin: 0; padding: 0; }
.ped__tree { display: flex; max-width: 1320px; margin: 0 auto; }
.ped__tree > .ped__n { flex: 1 1 auto; }
.ped__n { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.ped__card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 250px;
  padding: 10px 8px 12px; margin: 0; font: inherit; text-align: center; color: var(--white); text-decoration: none;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 18px;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 8px 26px rgba(0,0,0,.18);
}
button.ped__card, a.ped__card { cursor: pointer; }
.mod--light .ped__card { color: var(--on-ground); }
.ped__face { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.08); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .55); }
.ped__face--init { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 19px; color: var(--muted-dark); box-shadow: 0 0 0 1px rgba(255,255,255,.22); letter-spacing: 0; }
.ped__face--ring { background: none; box-shadow: 0 0 0 2px var(--brass-dark), inset 0 0 0 7px rgba(var(--accent-rgb), .18); }
.ped__text { display: grid; justify-items: center; gap: 1px; min-width: 0; max-width: 100%; }
.ped__role { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-dark); }
.ped__pre { font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: .02em; color: var(--muted-dark); overflow-wrap: anywhere; }
.mod--light .ped__pre { color: var(--muted-light); }
.ped__name { font-size: 16px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.ped__note { font-size: 14px; color: var(--muted-dark); }
.ped__marks { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; }
.ped__star { width: 16px; height: 16px; fill: #f5c542; flex: 0 0 16px; }
.ped__twin { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .7); flex: 0 0 10px; }
.ped__card.is-twin { border-color: rgba(var(--accent-rgb), .8); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .5), 0 0 24px var(--glow); }
.ped__card--root { max-width: 240px; }
.ped__card--root .ped__face { width: 56px; height: 56px; }
.ped__card--root .ped__name { font-size: 19px; }
.ped__card:focus-visible { outline: 3px solid var(--brass-dark); outline-offset: 3px; }
.ped__credits { list-style: none; margin: 0; padding: 0 var(--pad-x) var(--pad-y); font-size: 14px; color: var(--muted-dark); }
.ped__credits a { color: var(--white); text-underline-offset: 3px; }
.mod--light .ped__credits { color: var(--muted-light); }
.mod--light .ped__credits a { color: var(--on-ground); }
section[id] { scroll-margin-top: var(--nav-h); }
.ped-index { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; max-width: 880px; }
.ped-index > li { display: flex; flex: 0 1 156px; min-width: 140px; }
.ped-index .ped__card { max-width: none; }

/* The lines. Under a card its line drops to a bar; the bar runs from the sire's middle to the dam's; each drops
   again into its own card. The first child's half of the bar grows out from the parent's side, as does the last's. */
.ped .ped__kids { position: relative; display: flex; align-self: stretch; flex: 1 1 auto; padding-top: var(--drop); }
.ped__kids::before { content: ""; position: absolute; left: 50%; top: 0; height: var(--drop); margin-left: -1px; border-left: 2px solid var(--line); transform-origin: 50% 0; }
.ped__kids > li { position: relative; flex: 1 1 0; padding: var(--drop) 3px 0; }
.ped__kids > li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 2px solid var(--line); }
.ped__kids > li:first-child::before { left: 50%; margin-left: -1px; transform-origin: 100% 50%; }
.ped__kids > li:last-child::before { right: 50%; margin-right: -1px; transform-origin: 0 50%; }
.ped__kids > li:only-child::before { display: none; }
.ped__kids > li::after { content: ""; position: absolute; left: 50%; top: 0; height: var(--drop); margin-left: -1px; border-left: 2px solid var(--line); transform-origin: 50% 0; }

/* The fifth row on a dog's own tree: sire over dam in one glass box, hung under the dog they belong to. */
.ped__kids--pair {
  flex-direction: column; flex: 0 0 auto; align-self: stretch; margin: var(--drop) 3px 0;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.ped .ped__kids--pair { flex: 0 0 auto; padding: 0; }
.ped__kids--pair::before { top: calc(-1 * var(--drop) - 1px); }
.ped__kids.ped__kids--pair > li { flex: 0 0 auto; padding: 0; }
.ped__kids.ped__kids--pair > li::before, .ped__kids.ped__kids--pair > li::after { display: none; }
.ped__kids--pair > li + li { border-top: 1px solid rgba(255,255,255,.1); }
.ped__kids--pair .ped__card { max-width: none; padding: 7px 6px 8px; gap: 2px; background: none; border: 0; border-radius: 12px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.ped__kids--pair .ped__face--init { display: none; }
.ped__kids--pair .ped__face { width: 28px; height: 28px; }
.ped__kids--pair .ped__name { font-size: 13px; }

/* The chevron under a grandparent (phone only) and the branch it opens. */
.ped__open { display: none; }
.ped__more { display: none; }

@media (max-width: 1099px) {
  .ped { --drop: 12px; }
  .ped__n.g2 > .ped__kids { display: none; }
  .ped__n.g2 > .ped__card { flex: 1 1 auto; }
  .ped__n.g1 > .ped__card { max-width: 200px; }
  .ped__card { padding: 8px 6px 10px; }
  .ped__n.g2 > .ped__card { padding: 8px 4px 10px; gap: 5px; border-radius: 16px; }
  .ped__n.g2 > .ped__card .ped__face { width: 34px; height: 34px; font-size: 16px; }
  .ped__n.g2 > .ped__card .ped__name { font-size: 13px; }
  .ped__n.g2 > .ped__card .ped__text { font-stretch: 84%; }
  .ped__n.g2 > .ped__card .ped__role { letter-spacing: .04em; }
  .ped__n.g2 > .ped__card .ped__marks { top: 4px; right: 4px; }
  .ped__open {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 44px; height: 44px; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--brass-dark); cursor: pointer;
  }
  .ped__open::before { content: ""; position: absolute; left: 50%; top: -4px; height: 12px; margin-left: -1px; border-left: 2px solid var(--line); }
  .ped__open::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 1.5px solid var(--line); background: rgba(255,255,255,.05); transition: background .25s var(--ease), border-color .25s var(--ease); }
  .ped__open svg { position: relative; z-index: 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: rotate .3s var(--ease); }
  .ped__open[aria-expanded="true"] { color: var(--ink); }
  .ped__open[aria-expanded="true"]::after { background: var(--brass-dark); border-color: var(--brass-dark); box-shadow: 0 0 18px var(--glow); }
  .ped__open[aria-expanded="true"] svg { rotate: 180deg; }
  .ped__more { display: block; max-width: 640px; margin: 0 auto; }
  .ped__branch { position: relative; padding-top: var(--drop); }
  .ped__branch[hidden] { display: none; }
  /* without script every branch stands open, one under the other */
  html:not(.js) .ped__branch[hidden] { display: block; margin-top: 18px; }
  /* the line from the open chevron down to the branch, then across to the middle of its two */
  .ped__branch::before { content: ""; position: absolute; top: 0; height: var(--drop); margin-left: -1px; border-left: 2px solid var(--line); }
  .ped__branch > .ped__kids::before { top: 0; height: 0; margin: 0; border-left: 0; border-top: 2px solid var(--line); }
  .ped__branch.at0::before { left: 12.5%; } .ped__branch.at0 > .ped__kids::before { left: 12.5%; width: 12.5%; }
  .ped__branch.at1::before { left: 37.5%; } .ped__branch.at1 > .ped__kids::before { display: none; }
  .ped__branch.at2::before { left: 62.5%; } .ped__branch.at2 > .ped__kids::before { display: none; }
  .ped__branch.at3::before { left: 87.5%; } .ped__branch.at3 > .ped__kids::before { left: 75%; width: 12.5%; }
  .ped .ped__branch > .ped__kids { padding-top: 0; }
  .ped__branch .ped__card { max-width: 220px; }
  .ped__branch .ped__kids--pair { max-width: 220px; align-self: center; width: calc(100% - 6px); }
}
@media (max-width: 1099px) and (min-width: 700px) {
  .ped { padding-inline: var(--pad-x); }
  .ped__n.g2 > .ped__card .ped__name { font-size: 15px; }
  .ped__n.g2 > .ped__card .ped__text { font-stretch: 100%; }
  .ped__more { max-width: none; }
}

/* Wide: the whole tree at once, eight across at the fourth row. */
@media (min-width: 1100px) {
  .ped { --drop: 16px; padding-inline: 40px; }
  .ped__n.g1 > .ped__card { max-width: 240px; }
  .ped__n.g1 > .ped__card .ped__face { width: 48px; height: 48px; }
  .ped__n.g1 > .ped__card .ped__name { font-size: 17px; }
  .ped__n.g2 > .ped__card { max-width: 220px; }
  .ped__n.g2 > .ped__card .ped__face { width: 40px; height: 40px; font-size: 17px; }
  .ped__n.g3 > .ped__card { padding: 8px 6px 10px; gap: 4px; }
  .ped__n.g3 > .ped__card .ped__face { width: 32px; height: 32px; font-size: 15px; }
  .ped__n.g3 > .ped__card .ped__name { font-size: 14px; }
  .ped__n.g3 > .ped__card .ped__marks { top: 5px; right: 5px; }
}
@media (min-width: 1100px) and (max-width: 1299px) {
  /* eight across on a narrower screen: the outer two rows set a little narrower so no name breaks inside a word */
  .ped { padding-inline: 24px; }
  .ped__n.g3 > .ped__card .ped__text { font-stretch: 82%; }
  .ped__kids--pair .ped__text { font-stretch: 76%; }
  .ped__kids--pair .ped__card { padding-inline: 3px; }
}

/* The draw. Only with script (the reveal observer marks each card is-in as it arrives) and only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .ped__card { transition: opacity .55s var(--ease), translate .55s var(--ease), scale .55s var(--ease), box-shadow .6s var(--ease), border-color .3s var(--ease); }
  .ped__kids > li::before, .ped__kids > li::after, .ped__kids::before { transition: transform .45s var(--ease), opacity .2s linear; }
  .ped__kids--pair { transition: opacity .55s var(--ease), translate .55s var(--ease); }
  .js .ped__card:not(.is-in) { opacity: 0; translate: 0 -12px; scale: .96; }
  .js .ped__n:not(:has(> .ped__card.is-in)) > .ped__kids::before { transform: scaleY(0); opacity: 0; }
  .js .ped__kids > li:not(:has(> .ped__card.is-in))::before { transform: scaleX(0); opacity: 0; }
  .js .ped__kids > li:not(:has(> .ped__card.is-in))::after { transform: scaleY(0); opacity: 0; }
  .js .ped__kids--pair:not(:has(.ped__card.is-in)) { opacity: 0; translate: 0 -10px; }
  /* a generation at a time: the line first, then the card drops onto it with a flash of the storm's blue */
  .ped__card.is-in { animation: ped-lit 1.1s var(--ease) both; }
  .ped__kids--pair .ped__card.is-in { animation: none; }
  @keyframes ped-lit { 0% { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .9), 0 0 34px rgba(var(--accent-rgb), .55); } 100% { box-shadow: 0 8px 26px rgba(0,0,0,.18); } }
  .ped__n.g1 > .ped__card { transition-delay: .3s; animation-delay: .3s; }
  .ped__n.g2 > .ped__card { transition-delay: .6s; animation-delay: .6s; }
  .ped__n.g3 > .ped__card { transition-delay: .9s; animation-delay: .9s; }
  .ped__kids--pair, .ped__n.g4 > .ped__card { transition-delay: 1.2s; }
  .ped__kids > li.g1::before, .ped__kids > li.g1::after, .ped__n.g0 > .ped__kids::before { transition-delay: .08s; }
  .ped__kids > li.g2::before, .ped__kids > li.g2::after, .ped__n.g1 > .ped__kids::before { transition-delay: .38s; }
  .ped__kids > li.g3::before, .ped__kids > li.g3::after, .ped__n.g2 > .ped__kids::before { transition-delay: .68s; }
  .ped__n.g3 > .ped__kids::before { transition-delay: .98s; }
  /* a branch opened on a phone draws at once, from the chevron down */
  .ped__branch .ped__n.g3 > .ped__card { transition-delay: .2s; animation-delay: .2s; }
  .ped__branch .ped__kids--pair, .ped__branch .ped__n.g4 > .ped__card { transition-delay: .45s; }
  .ped__branch .ped__kids > li.g3::before, .ped__branch .ped__kids > li.g3::after { transition-delay: .05s; }
  .ped__branch .ped__n.g3 > .ped__kids::before { transition-delay: .35s; }
  .ped__branch:not([hidden])::before { animation: ped-drop .3s var(--ease) both; transform-origin: 50% 0; }
  @keyframes ped-drop { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  button.ped__card:hover, a.ped__card:hover { translate: 0 -2px; border-color: rgba(var(--accent-rgb), .6); transition-delay: 0s; }
  .pedpop:not([hidden]) { animation: pedpop-in .22s var(--ease); }
  @keyframes pedpop-in { from { opacity: 0; translate: 0 8px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
}

/* The card, larger: tap on a phone, hover or focus on a wide screen. Built by site.js. */
.pedpop {
  position: fixed; z-index: 90; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 420px; margin: 0 auto;
  padding: 16px; color: var(--white); background: rgba(var(--ink-rgb), .92); border: 1px solid rgba(var(--accent-rgb), .45);
  border-radius: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 40px rgba(var(--accent-rgb), .18);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
}
.pedpop[hidden] { display: none; }
.pedpop__img { display: block; width: auto; max-width: 100%; max-height: min(52svh, 380px); margin: 0 auto 12px; border-radius: 14px; object-fit: contain; }
.pedpop__img--small { max-width: 200px; max-height: 200px; border-radius: 50%; }
.pedpop__name { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; padding-right: 40px; }
.pedpop__credit { margin: 6px 0 0; font-size: 14px; }
.pedpop__credit a { color: var(--brass-dark); font-weight: 600; text-decoration: none; }
.pedpop__close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 20px; border: 0; background: rgba(255,255,255,.12); color: var(--white); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.pedpop__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (min-width: 1100px) {
  .pedpop { position: absolute; left: auto; right: auto; bottom: auto; margin: 0; width: 320px; }
}

/* Written by build.py: one class per photo ground colour and per photo shape, so no page needs a style attribute. */
.pg-090c0f { --pg: #090c0f; }
.pg-0c0c0f { --pg: #0c0c0f; }
.pg-0d0d11 { --pg: #0d0d11; }
.pg-100e12 { --pg: #100e12; }
.pg-101218 { --pg: #101218; }
.pg-101312 { --pg: #101312; }
.pg-111117 { --pg: #111117; }
.pg-111319 { --pg: #111319; }
.pg-120e12 { --pg: #120e12; }
.pg-121317 { --pg: #121317; }
.pg-121717 { --pg: #121717; }
.pg-131215 { --pg: #131215; }
.pg-131614 { --pg: #131614; }
.pg-131916 { --pg: #131916; }
.pg-140d14 { --pg: #140d14; }
.pg-141418 { --pg: #141418; }
.pg-141515 { --pg: #141515; }
.pg-141613 { --pg: #141613; }
.pg-141614 { --pg: #141614; }
.pg-141811 { --pg: #141811; }
.pg-151316 { --pg: #151316; }
.pg-151815 { --pg: #151815; }
.pg-15181d { --pg: #15181d; }
.pg-161618 { --pg: #161618; }
.pg-171618 { --pg: #171618; }
.pg-171917 { --pg: #171917; }
.pg-171b15 { --pg: #171b15; }
.pg-181617 { --pg: #181617; }
.pg-181719 { --pg: #181719; }
.pg-18171c { --pg: #18171c; }
.pg-181c15 { --pg: #181c15; }
.pg-182236 { --pg: #182236; }
.pg-1a181a { --pg: #1a181a; }
.pg-1a1a1f { --pg: #1a1a1f; }
.pg-1b121c { --pg: #1b121c; }
.pg-1b1d22 { --pg: #1b1d22; }
.ar-1050x1400 { --ar: 1050/1400; }
.ar-1054x1400 { --ar: 1054/1400; }
.ar-1200x1600 { --ar: 1200/1600; }
.ar-1264x1568 { --ar: 1264/1568; }
.ar-1400x1050 { --ar: 1400/1050; }
.ar-1408x1408 { --ar: 1408/1408; }
.ar-1600x1200 { --ar: 1600/1200; }
.ar-1600x900 { --ar: 1600/900; }
.ar-713x1600 { --ar: 713/1600; }
.ar-787x1400 { --ar: 787/1400; }
.ar-885x1600 { --ar: 885/1600; }
.ar-900x1600 { --ar: 900/1600; }
.ar-903x1600 { --ar: 903/1600; }