/* Aviario Ashee
   Design read: a specialist breeder's showcase and guide for hobbyists, buyers and fellow
   exhibitors in BC. Option B's language, kept and tightened: cool off-white paper, green-black
   ink, one canary-yellow accent, heavy Geist display, sharp corners throughout (colour swatches
   are the one round shape, because they are colour samples, not controls).
   His colours (2026-10-13): canary yellow and Orula's green. The green comes in as colour only,
   never as a religious symbol: deep Iroko green for ink, buttons and the footer, brighter Ifá
   green for hovers and dark mode. Cuba and Canada flags sign off the footer and the About page.
   Dials: variance 7, motion 5, density 4. */

@font-face {
  font-family: 'Geist';
  src: url('fonts/geist-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/geist-mono-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --paper: #edeee8;
  --paper-2: #e3e5dd;
  --paper-3: #d8dbd1;
  --ink: #0c2a1e;
  --ink-2: #26453a;
  --muted: #4f6158;
  --line: #c6cdc2;
  --canary: #f3d02f;
  --on-canary: #0b3d2a;
  --iroko: #0b3d2a;
  --orula: #1f7a4d;
  --btn: var(--iroko);
  --btn-hover: var(--orula);
  --on-dark: #eef0e8;
  --shadow: 22 44 34;
  --scrim: 9 22 16;

  /* Colour samples (content, not UI) */
  --sw-red: #c8152f;
  --sw-yellow: #f2cf1d;
  --sw-white: #f7f7f2;
  --sw-head-red: #c8152f;
  --sw-head-black: #161616;
  --sw-head-orange: #ee8a22;
  --sw-breast-purple: #7b4aa6;
  --sw-breast-white: #f4f4ee;
  --sw-body-green: #5d9a3a;
  --sw-body-blue: #5b9bc8;
  --sw-body-yellow: #e7c739;

  --f-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --s--1: clamp(0.82rem, 0.79rem + 0.12vw, 0.9rem);
  --s-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --s-1: clamp(1.15rem, 1.07rem + 0.4vw, 1.375rem);
  --s-2: clamp(1.45rem, 1.25rem + 0.9vw, 1.9rem);
  --s-3: clamp(1.9rem, 1.5rem + 1.9vw, 3rem);
  --s-4: clamp(2.5rem, 1.8rem + 3.4vw, 4.6rem);
  --s-5: clamp(3.1rem, 1.9rem + 6vw, 7.4rem);
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  --maxw: 1360px;
  --header-h: 72px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --z-header: 30;
  --z-sheet: 40;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #0b1510;
    --paper-2: #101e17;
    --paper-3: #17281f;
    --ink: #eceee6;
    --ink-2: #d2d8ce;
    --muted: #a3b0a7;
    --line: #24372c;
    --btn: var(--orula);
    --btn-hover: #17643f;
    --shadow: 0 0 0;
    --sw-white: #e9eae3;
    --sw-head-black: #0b0b0b;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --paper: #0b1510;
  --paper-2: #101e17;
  --paper-3: #17281f;
  --ink: #eceee6;
  --ink-2: #d2d8ce;
  --muted: #a3b0a7;
  --line: #24372c;
  --btn: var(--orula);
  --btn-hover: #17643f;
  --shadow: 0 0 0;
  --sw-white: #e9eae3;
  --sw-head-black: #0b0b0b;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--s-0) / 1.6 var(--f-sans);
  font-feature-settings: 'ss01', 'cv11';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: 1; text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--canary); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--canary); color: var(--on-canary); padding: 12px 16px; font-weight: 700; }
.skip:focus { top: 12px; }
main:focus { outline: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.muted { color: var(--muted); }
.icon { width: 1em; height: 1em; flex: none; }
.flip { transform: scaleX(-1); }

.h1 { font-size: var(--s-4); letter-spacing: -0.045em; line-height: 0.95; }
.h2 { font-size: var(--s-3); letter-spacing: -0.04em; line-height: 1; }
.h3 { font-size: var(--s-2); letter-spacing: -0.03em; line-height: 1.05; }
.lede { font-size: var(--s-1); line-height: 1.5; color: var(--ink-2); max-width: 58ch; }
.lede--wide { margin-top: clamp(2rem, 5vw, 3.5rem); max-width: 62ch; }
.eyebrow { font: 500 var(--s--1) / 1.2 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 1.25rem; display: flex; align-items: center; gap: 0.75rem; }
.eyebrow::before { content: ''; width: 28px; height: 3px; background: linear-gradient(90deg, var(--orula) 0 50%, var(--canary) 50% 100%); }
.eyebrow--light { color: #f2f3ee; }
.meta { font: 500 var(--s--1) / 1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.6rem; }
.tags { font: 500 var(--s--1) / 1.3 var(--f-mono); color: var(--muted); letter-spacing: 0.03em; }

/* Draft-only verification tag */
.vfy {
  display: inline-block; vertical-align: middle; margin-left: 0.5em;
  font: 600 0.62rem / 1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.35em 0.55em; background: var(--canary); color: var(--on-canary);
  border: 1px dashed var(--on-canary); white-space: nowrap; cursor: help;
}

/* ---------- Buttons & links ---------- */
.btn {
  --bg: var(--btn); --fg: var(--on-dark);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 48px; padding: 0.75rem 1.35rem;
  background: var(--bg); color: var(--fg); border: 2px solid var(--bg);
  font-weight: 650; font-size: var(--s-0); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.15s var(--ease);
}
.btn .icon { transition: transform 0.3s var(--ease); }
.btn:hover .icon { transform: translate(2px, -2px); }
.btn:active { transform: translateY(1px); }
.btn:hover { --bg: var(--btn-hover); }
.btn--ghost { --bg: transparent; --fg: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { --bg: var(--ink); --fg: var(--paper); }
.btn--sm { min-height: 42px; padding: 0.5rem 1rem; font-size: var(--s--1); }
.btn--lg { min-height: 56px; padding: 0.9rem 1.6rem; font-size: var(--s-1); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.link {
  display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 650;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--canary);
}
.link .icon { transition: transform 0.3s var(--ease); }
.link:hover .icon, a:hover > .link .icon { transform: translateX(3px); }
.link--back:hover .icon { transform: scaleX(-1) translateX(3px); }

/* ---------- Brand mark ---------- */
.mark { width: 40px; height: 40px; flex: none; }
.mark__bg { fill: var(--canary); }
.mark__bird { fill: var(--iroko); }
.mark__eye { fill: var(--canary); }
.brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.brand__text { display: grid; line-height: 1.1; }
.brand__name { white-space: nowrap; font-weight: 750; font-size: 1.2rem; letter-spacing: -0.035em; }
.brand__place { font: 500 0.68rem / 1.4 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-header); background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease); }
.site-header__inner { height: var(--header-h); display: flex; align-items: center; gap: 1.5rem; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 0.25rem; list-style: none; }
.nav a { display: block; white-space: nowrap; padding: 0.55rem 0.8rem; font-weight: 600; text-decoration: none; position: relative; }
.nav a::after { content: ''; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.3rem; height: 2px; background: var(--canary); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); }
.nav a:hover::after, .nav a[aria-current='page']::after { transform: scaleX(1); }
.site-header__end { display: flex; align-items: center; gap: 0.75rem; }
.lang { display: inline-flex; border: 1px solid var(--line); }
.lang a { display: grid; place-items: center; min-width: 40px; height: 34px; font: 600 0.75rem / 1 var(--f-mono); letter-spacing: 0.08em; text-decoration: none; }
.lang abbr { text-decoration: none; }
.lang a[aria-current='true'] { background: var(--ink); color: var(--paper); }
.menu-btn { display: none; width: 46px; height: 46px; place-items: center; background: none; border: 1px solid var(--line); cursor: pointer; font-size: 1.4rem; }

/* Over the hero: transparent until the hero scrolls away */
.site-header--over { position: fixed; inset: 0 0 auto 0; padding-top: env(safe-area-inset-top, 0px); color: #f2f3ee; background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header--over .brand__place { color: rgb(242 243 238 / 0.75); }
.site-header--over .lang { border-color: rgb(242 243 238 / 0.35); }
.site-header--over .lang a[aria-current='true'] { background: #f2f3ee; color: #0b3d2a; }
.site-header--over .site-header__cta { --bg: var(--canary); --fg: var(--on-canary); }
.site-header--over .menu-btn { border-color: rgb(242 243 238 / 0.35); }
.site-header--over.is-solid { color: var(--ink); background: color-mix(in srgb, var(--paper) 92%, transparent); border-color: var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.site-header--over.is-solid .brand__place { color: var(--muted); }
.site-header--over.is-solid .lang { border-color: var(--line); }
.site-header--over.is-solid .lang a[aria-current='true'] { background: var(--ink); color: var(--paper); }
.site-header--over.is-solid .site-header__cta { --bg: var(--ink); --fg: var(--paper); }
.site-header--over.is-solid .menu-btn { border-color: var(--line); }

.sheet { position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-sheet); background: var(--paper); color: var(--ink); padding: 1.5rem var(--gutter) 2rem; display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; }
.sheet[hidden] { display: none; }
.sheet ul { list-style: none; display: grid; }
.sheet nav a { display: block; padding: 0.9rem 0; font-size: var(--s-3); font-weight: 800; letter-spacing: -0.04em; text-decoration: none; border-bottom: 1px solid var(--line); }
.sheet nav a[aria-current='page'] { text-decoration: underline; text-decoration-color: var(--canary); text-decoration-thickness: 4px; text-underline-offset: 6px; }
.sheet__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 2rem; }

/* Five links in Spanish need about 1040px on one line; below this the menu button takes over. */
@media (max-width: 1080px) {
  .nav, .site-header__cta { display: none; }
  .menu-btn { display: grid; }
  .site-header__end { margin-left: auto; }
}
/* Phones keep EN/ES in the bar, so switching language never needs the menu */
@media (max-width: 480px) {
  .site-header__inner { gap: 0.75rem; }
  .site-header__end { gap: 0.5rem; }
  .site-header__end > .lang a { min-width: 34px; height: 32px; }
}
@media (max-width: 360px) { .brand__place { display: none; } }

/* ---------- Hero ---------- */
/* Capped so a very tall frame (some embeds size it to the page) never balloons the hero */
.hero { --hero-h: clamp(560px, 100vh, 1000px); --hero-h: clamp(560px, 100svh, 1000px); position: relative; min-height: var(--hero-h); display: grid; color: #f2f3ee; isolation: isolate; background: #0b3d2a; }
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* His clips side by side in a native snap scroller, so a finger or a trackpad swipes
   between them. Each fills the whole hero: the 9:16 clip on narrow screens, the birds'
   band of it (<name>-wide.mp4, upscaled 2x) on wide ones. */
.hero__slides { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.hero__slides::-webkit-scrollbar { display: none; }
.hero__slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
.hero__poster img, .hero__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Phones: the headline covers the lower half, so each clip is lifted (--lift, a share of
   the hero's height) until its bird clears it. */
@media (max-width: 860px) {
  .hero__slide .hero__poster img, .hero__slide .hero__film { top: calc(var(--lift, 0) * -100%); height: calc((1 + var(--lift, 0)) * 100%); }
}
/* Swipes over the headline reach the clips; its links and buttons still take clicks. */
.hero__inner, .hero__scrim { pointer-events: none; }
.hero__inner .spots, .hero__inner a, .hero__inner button { pointer-events: auto; }
.hero__film { opacity: 0; transition: opacity 0.8s var(--ease); }
.hero__film.is-playing { opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgb(var(--scrim) / 0.55) 0%, rgb(var(--scrim) / 0) 22%),
    linear-gradient(0deg, rgb(var(--scrim) / 0.82) 0%, rgb(var(--scrim) / 0.35) 45%, rgb(var(--scrim) / 0.1) 70%),
    linear-gradient(90deg, rgb(var(--scrim) / 0.55) 0%, rgb(var(--scrim) / 0) 60%);
}
.hero__inner { align-self: end; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem clamp(2rem, 5vw, 5rem); align-items: end; padding-top: calc(var(--header-h) + 2.5rem); padding-bottom: clamp(2rem, 6vh, 4.5rem); }
.hero__copy { min-width: 0; }
.hero__h1 { font-size: var(--s-5); letter-spacing: -0.055em; line-height: 0.9; font-weight: 850; margin-bottom: 1.5rem; }
.hero__h1 span { display: block; }
.hero__h1 .hl { color: var(--canary); padding-bottom: 0.06em; }
.hero__h1 .hero__h1-more { font-size: 0.42em; letter-spacing: -0.03em; line-height: 1.05; margin-top: 0.35em; }
.hero__sub { font-size: var(--s-1); line-height: 1.45; max-width: 34ch; color: rgb(242 243 238 / 0.9); margin: 0; }
.hero__controls { position: absolute; right: var(--gutter); top: calc(var(--header-h) + 1rem); z-index: 2; display: flex; align-items: center; gap: 0.5rem; }
html:not(.js) .hero__controls { display: none; }
.hero__btn {
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  color: #f2f3ee; background: rgb(var(--scrim) / 0.45); border: 1px solid rgb(242 243 238 / 0.35);
  font-size: 1.1rem;
}
.hero__btn:hover { background: rgb(var(--scrim) / 0.7); }
.hero__dots { display: flex; margin-right: 0.25rem; }
.hero__dot { width: 26px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer; background: none; border: 0; }
.hero__dot::before { content: ''; width: 8px; height: 8px; border-radius: 4px; background: rgb(242 243 238 / 0.6); box-shadow: 0 0 0 1px rgb(var(--scrim) / 0.35); transition: width 0.3s var(--ease), background-color 0.3s var(--ease); }
.hero__dot[aria-current='true']::before { width: 22px; background: var(--canary); }
/* Small phones: swipe and the dots are enough */
@media (max-width: 480px) { .hero__step { display: none; } }
.hero__toggle .i-play, .hero__toggle[aria-pressed='true'] .i-pause { display: none; }
.hero__toggle[aria-pressed='true'] .i-play { display: block; }

/* Entrance: one staggered reveal of the hero copy */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__copy > *, .js .spots { animation: rise 1s var(--ease) both; }
  .js .hero__copy > :nth-child(2) { animation-delay: 0.08s; }
  .js .hero__copy > :nth-child(3) { animation-delay: 0.16s; }
  .js .spots { animation-delay: 0.3s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* Wide screens: the headline sits over the picture, so the scrim darkens the left and
   the foot, and leaves the birds on the right in full colour. */
@media (min-width: 861px) {
  .hero__scrim { background:
    linear-gradient(180deg, rgb(var(--scrim) / 0.5) 0%, rgb(var(--scrim) / 0) 24%),
    linear-gradient(0deg, rgb(var(--scrim) / 0.7) 0%, rgb(var(--scrim) / 0.2) 42%, rgb(var(--scrim) / 0) 62%),
    linear-gradient(90deg, rgb(var(--scrim) / 0.78) 0%, rgb(var(--scrim) / 0.5) 38%, rgb(var(--scrim) / 0.08) 72%, rgb(var(--scrim) / 0) 100%); }
}

/* Hotspots: native <details>, enhanced in main.js */
.spots { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; max-width: 600px; margin-top: clamp(1.5rem, 4vh, 2.5rem); }
.spot { position: relative; }
.spot__btn {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.9rem;
  padding: 1rem 1.1rem; min-height: 76px;
  background: rgb(242 243 238 / 0.94); color: #0b3d2a;
  border: 1px solid rgb(242 243 238 / 0.5);
  transition: background-color 0.25s var(--ease), transform 0.15s var(--ease);
}
.spot__btn::-webkit-details-marker { display: none; }
.spot__btn:hover { background: #fff; }
.spot__btn:active { transform: translateY(1px); }
.spot[open] .spot__btn { background: var(--canary); }
.spot__ring { position: relative; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--canary); box-shadow: 0 0 0 2px #0b3d2a inset; }
.spot[open] .spot__ring { background: #0b3d2a; }
.spot__text { display: grid; gap: 0.15rem; flex: 1; min-width: 0; }
.spot__label { font-weight: 800; font-size: var(--s-1); letter-spacing: -0.03em; line-height: 1; }
.spot__hint { font: 500 0.72rem / 1.2 var(--f-mono); letter-spacing: 0.04em; color: #4b524b; }
.spot__caret { font-size: 1.1rem; transition: transform 0.3s var(--ease); }
.spot[open] .spot__caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
  .spot:not([open]) .spot__ring::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--canary); animation: ping 2.4s var(--ease) infinite; }
  .spot:nth-child(2) .spot__ring::after { animation-delay: 1.2s; }
}
@keyframes ping { 0% { transform: scale(0.6); opacity: 1; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

.spot__panel {
  position: absolute; bottom: calc(100% + 0.5rem); left: 0; width: max(100%, 400px); z-index: 3;
  background: var(--paper); color: var(--ink); padding: 1.25rem 1.25rem 1rem;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -20px rgb(var(--shadow) / 0.55), 0 2px 8px rgb(var(--shadow) / 0.2);
  transform-origin: bottom left;
}
.spot:nth-child(2) .spot__panel { left: auto; right: 0; transform-origin: bottom right; }
@media (prefers-reduced-motion: no-preference) {
  .spot[open] .spot__panel { animation: pop 0.35s var(--ease); }
}
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.spot__heading { font-weight: 800; font-size: var(--s-1); letter-spacing: -0.03em; margin-bottom: 1rem; }
.spot__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.spot__groups > :only-child { grid-column: 1 / -1; }
.spot__glabel { font: 600 0.7rem / 1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }
.spot__list { list-style: none; display: grid; }
.spot__list a { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0; font-weight: 600; text-decoration: none; }
.spot__list a:hover { text-decoration: underline; text-decoration-color: var(--canary); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.spot__all { display: flex; align-items: center; justify-content: space-between; margin-top: 0.9rem; padding-top: 0.85rem; border-top: 1px solid var(--line); font-weight: 700; text-decoration: none; }
.spot__all:hover .icon { transform: translateX(3px); }
.spot__all .icon { transition: transform 0.3s var(--ease); }

.dot { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18); }
.dot--lg { width: 30px; height: 30px; }

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; padding-bottom: 1.25rem; }
  .hero__sub { max-width: 30ch; }
  .spots { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .spot__btn { padding: 0.8rem 0.85rem; min-height: 64px; gap: 0.65rem; }
  .spot__hint { display: none; }
  /* Panel opens above both buttons, full width, so the other hotspot stays reachable */
  .spots { position: relative; }
  .spot { position: static; }
  .spot__panel, .spot:nth-child(2) .spot__panel { left: 0; right: 0; width: auto; max-height: calc(var(--hero-h) - var(--header-h) - 120px); overflow-y: auto; }
}

/* ---------- Sections ---------- */
section { scroll-margin-top: calc(var(--header-h) + 16px); }
.page-head { padding-top: clamp(3rem, 8vw, 6rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.page-head__sub { font-size: var(--s-1); line-height: 1.45; color: var(--ink-2); max-width: 46ch; margin-top: 1.25rem; }
/* Title at the top, next to the picture: never pinned low under an empty block */
.split-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.split-head__media .fig img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
@media (max-width: 860px) { .split-head { grid-template-columns: 1fr; } }

.fig { margin: 0; }
.fig img { width: 100%; }
/* Photos whose subject sits high in the frame keep it when cropped wide */
img.focus-top { object-position: 50% 10%; }
.fig__cap { margin-top: 0.6rem; font: 500 var(--s--1) / 1.3 var(--f-mono); letter-spacing: 0.04em; color: var(--muted); }
.wide-media .fig img { aspect-ratio: 21 / 9; object-fit: cover; }

/* Swatches (colour samples / illustration fallbacks) */
.sw { width: 100%; height: 100%; min-height: 120px; position: relative; overflow: hidden; }
.sw--red-intensive { background: radial-gradient(120% 90% at 30% 25%, #e33a44 0%, #b3112a 55%, #7d0a1d 100%); }
.sw--red-frosted { background: radial-gradient(120% 90% at 30% 25%, #f08467 0%, #d24e35 55%, #a5361f 100%); }
.sw--red-frosted::after { content: ''; position: absolute; inset: 0; background: radial-gradient(rgb(255 255 255 / 0.32) 1px, transparent 1.6px) 0 0 / 7px 7px; }
.sw--red-mosaic { background:
  radial-gradient(34% 26% at 24% 24%, rgb(214 40 58 / 0.95), rgb(214 40 58 / 0) 100%),
  radial-gradient(30% 24% at 76% 76%, rgb(214 40 58 / 0.9), rgb(214 40 58 / 0) 100%),
  radial-gradient(26% 20% at 70% 30%, rgb(214 40 58 / 0.55), rgb(214 40 58 / 0) 100%),
  linear-gradient(160deg, #f8f1ec, #ebe0d8); }
.sw--yellow { background: radial-gradient(120% 90% at 30% 25%, #fbe465 0%, #f0c718 55%, #d6a90a 100%); }
.sw--white { background: radial-gradient(120% 90% at 30% 25%, #ffffff 0%, #f1f2ec 60%, #dfe1d9 100%); box-shadow: inset 0 0 0 1px var(--line); }
.sw--bronze { background:
  repeating-linear-gradient(102deg, rgb(25 10 4 / 0.45) 0 3px, transparent 3px 11px),
  radial-gradient(120% 90% at 30% 25%, #b8552f 0%, #8a3519 55%, #5c200d 100%); }
.sw--cat-canaries { background: linear-gradient(120deg, #b3112a, #e33a44 45%, #f0c718 100%); }
.sw--cat-finches { background: linear-gradient(120deg, #5d9a3a, #7b4aa6 50%, #c8152f 100%); }
.sw--cat-showing { background: linear-gradient(120deg, #0b3d2a, #3a403a 60%, var(--canary) 100%); }
.sw--cat-care { background: linear-gradient(120deg, #5b9bc8, #9cc3dd 50%, #edeee8 100%); }
.sw--band { aspect-ratio: 21 / 9; }
.strip { display: grid; grid-template-columns: repeat(6, 1fr); width: 100%; height: 100%; min-height: 260px; }
.strip .sw { min-height: 0; }
.strip--tall { aspect-ratio: 21 / 9; }

/* Two families */
.two { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); padding-block: clamp(4rem, 10vw, 8rem); }
.two__intro { grid-column: 1 / span 8; margin-bottom: clamp(0.5rem, 2vw, 1.5rem); }
.two__intro .h2 { margin-bottom: 1.25rem; }
.tile { display: flex; flex-direction: column; align-self: start; text-decoration: none; background: var(--paper-2); }
.tile--canary { grid-column: 1 / span 7; }
.tile--finch { grid-column: 8 / span 5; margin-top: clamp(0rem, 8vw, 7rem); }
.tile__media { overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-3); }
.tile--finch .tile__media { aspect-ratio: 4 / 5; }
.tile--canary .tile__media { aspect-ratio: 1 / 1; }
.tile__media img, .tile__media .strip { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.tile:hover .tile__media img { transform: scale(1.03); }
.tile__body { padding: 1.4rem 1.5rem 1.6rem; }
.tile__title { font-size: var(--s-3); letter-spacing: -0.045em; margin-bottom: 0.6rem; }
.tile__body p { color: var(--ink-2); max-width: 40ch; }
@media (max-width: 860px) {
  .two__intro, .tile--canary, .tile--finch { grid-column: 1 / -1; }
  .tile--finch { margin-top: 0; }
}

/* Show record: the page's one colour block */
.record { background: var(--canary); color: var(--on-canary); }
.record__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(4rem, 9vw, 7rem); }
.record__h { font-size: var(--s-4); letter-spacing: -0.05em; line-height: 0.95; margin-bottom: 1.25rem; }
.record__icon { font-size: 0.55em; margin-bottom: 0.6rem; }
.record__copy > p { font-size: var(--s-1); line-height: 1.45; max-width: 44ch; }
.record__list { list-style: none; margin: 1.75rem 0 2rem; border-top: 2px solid var(--on-canary); }
.record__list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid rgb(11 61 42 / 0.25); }
.record__title { font-weight: 700; }
.record__meta { font: 500 var(--s--1) / 1.6 var(--f-mono); white-space: nowrap; }
.record .btn { --bg: #0b3d2a; --fg: var(--canary); }
.record .fig__cap { color: rgb(11 61 42 / 0.7); }
.record .vfy { background: #0b3d2a; color: var(--canary); border-color: var(--canary); }
@media (max-width: 860px) { .record__inner { grid-template-columns: 1fr; } .record__media { order: -1; } }

/* Colour atlas: one horizontal scroll-snap row */
.atlas { padding-block: clamp(4rem, 10vw, 8rem) 0; }
.atlas__head { margin-bottom: 2rem; }
.atlas__head .h2 { margin-bottom: 1rem; }
.atlas__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 22vw, 280px); gap: 1rem;
  --edge: max(var(--gutter), (100% - var(--maxw)) / 2);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 0.5rem var(--edge) 1.5rem; scroll-padding-inline: var(--edge); scrollbar-width: thin;
}
.chipcard { scroll-snap-align: start; text-decoration: none; display: grid; gap: 0.75rem; }
.chipcard__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.chipcard__media img, .chipcard__media .sw { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.chipcard:hover .chipcard__media > * { transform: scale(1.04); }
.chipcard__name { font-weight: 750; font-size: var(--s-1); letter-spacing: -0.03em; display: flex; justify-content: space-between; }

/* Journal teaser */
.journal-teaser { padding-block: clamp(4rem, 10vw, 8rem); }
.journal-teaser__head { margin-bottom: 2rem; }
.journal-teaser__head .h2 { margin-bottom: 1rem; }
.journal-teaser__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; gap: 1.5rem 2.5rem; margin-bottom: 2rem; }
.post-link { text-decoration: none; display: grid; gap: 1rem; align-content: start; }
.post-link--lead { grid-row: span 2; }
.post-link:not(.post-link--lead) { grid-template-columns: 40% 1fr; align-items: center; align-self: start; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.post-link__media { overflow: hidden; aspect-ratio: 3 / 2; background: var(--paper-2); }
.post-link__media img, .post-link__media .sw { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.post-link:hover .post-link__media > * { transform: scale(1.03); }
.post-link__title { font-size: var(--s-2); }
.post-link--lead .post-link__title { font-size: var(--s-3); margin-bottom: 0.75rem; }
.post-link:hover .post-link__title { text-decoration: underline; text-decoration-color: var(--canary); text-decoration-thickness: 3px; text-underline-offset: 6px; }
@media (max-width: 860px) { .journal-teaser__grid { grid-template-columns: 1fr; } .post-link--lead { grid-row: auto; } }

/* About teaser */
.about-teaser { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-bottom: clamp(4rem, 10vw, 8rem); }
.about-teaser .h2 { margin-bottom: 1.25rem; }
.about-teaser .lede { margin-bottom: 2rem; }
.about-teaser__media img { aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 860px) { .about-teaser { grid-template-columns: 1fr; } }

/* Catalogue (filters + grid) */
.catalog { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.catalog__note { margin: 0 0 1.25rem; color: var(--ink-2); }
.card .bred { display: inline-block; justify-self: start; width: fit-content; margin: 0 0 0.9rem; padding: 0.3rem 0.5rem; background: var(--canary); color: var(--ink); font: 600 0.7rem / 1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.filters { display: grid; gap: 0.75rem; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.filters[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.chips__label { font: 600 0.72rem / 1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); min-width: 5.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0.4rem 0.9rem;
  background: transparent; border: 1px solid var(--line); cursor: pointer; font-weight: 600; font-size: var(--s--1);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip .dot { width: 12px; height: 12px; }
.filters__count { margin: 0.25rem 0 0; font: 500 var(--s--1) / 1 var(--f-mono); color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.card { display: flex; flex-direction: column; background: var(--paper-2); scroll-margin-top: calc(var(--header-h) + 24px); }
.card[hidden] { display: none; }
.card:target { outline: 3px solid var(--canary); outline-offset: 4px; }
.card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-3); }
.card__media--sq { aspect-ratio: 1; }
.card__media img, .card__media .sw { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 1.1rem 1.2rem 1.3rem; display: grid; gap: 0.25rem; align-content: start; flex: 1; }
.card__body p { color: var(--ink-2); margin-bottom: 0.4rem; font-size: 0.97rem; }
.card__body .link { margin-top: auto; padding-top: 0.4rem; }
.card__title { font-size: var(--s-1); letter-spacing: -0.03em; margin-bottom: 0.35rem; line-height: 1.15; }
.empty { padding: 2rem; border: 1px dashed var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.empty[hidden] { display: none; }
.empty p { margin: 0; max-width: 52ch; }

/* Judged: 2x2 definition grid */
/* His own photos, a four-up strip after the catalog */
.aviary-photos { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--line); }
.aviary-photos__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.aviary-photos__head .lede { margin: 0; }
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.photo-grid__item img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
@media (max-width: 760px) { .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } }
/* Accessories (coming soon) */
.soon { display: inline-block; margin-bottom: 1.25rem; padding: 0.5rem 0.7rem; background: var(--canary); color: var(--ink); font: 600 0.72rem / 1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.made { padding-bottom: clamp(3rem, 8vw, 6rem); }
.made__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem; align-items: start; }
.made__grid img { object-fit: cover; }
.made__a img { aspect-ratio: 4 / 5; }
.made__b img { aspect-ratio: 28 / 25; }
@media (max-width: 760px) { .made__grid { grid-template-columns: 1fr; } }
/* Finches: his photos, whole, each with the colours you can see in it */
.finch-photos { padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 7vw, 5rem); }
.finch-photos__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.finch-photo .fig img { aspect-ratio: 4 / 5; object-fit: cover; }
.finch-photo .h3 { margin: 1.25rem 0 0.5rem; }
.seen { list-style: none; display: grid; }
.seen li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; padding-block: 0.65rem; border-top: 1px solid var(--line); }
.seen__dots { display: flex; gap: 0.3rem; }
.seen--birds { margin-top: 1.25rem; }
.seen__code { font: 600 var(--s--1) / 1.4 var(--f-mono); margin-right: 0.35rem; }
.seen__kind { display: inline-block; font-size: var(--s--1); color: var(--ink-2); margin-left: 0.35rem; }
.seen__kind::before { content: "/ "; }
.gen { padding-top: clamp(1rem, 3vw, 2rem); }
.gen .lede--wide { margin-top: 1rem; }
.catalog__tip { margin: -0.5rem 0 1.25rem; font-weight: 700; }
@media (min-width: 1100px) { .finch-photos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .finch-photos__grid { grid-template-columns: 1fr; } }
.judged { padding-block: clamp(3rem, 8vw, 6rem); }
.judged .h2 { margin-bottom: 2rem; max-width: 18ch; }
.judged__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 5rem); margin: 0 0 2rem; }
.judged__list > div { padding: 1.5rem 0; border-top: 2px solid var(--ink); }
.judged__list dt { font-size: var(--s-2); font-weight: 800; letter-spacing: -0.035em; margin-bottom: 0.5rem; }
.judged__list dd { margin: 0; color: var(--ink-2); max-width: 44ch; }
@media (max-width: 700px) { .judged__list { grid-template-columns: 1fr; } }

/* What the judge looks for, per category (his own wording) */
.cats { padding-bottom: clamp(3rem, 8vw, 6rem); }
.cats .h2 { margin-bottom: 2rem; max-width: 22ch; }
.cats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 5rem); }
.cat { border-top: 2px solid var(--ink); padding-top: 1.25rem; }
.cat__h { font-size: var(--s-2); font-weight: 800; letter-spacing: -0.035em; margin-bottom: 0.75rem; }
.cat p { color: var(--ink-2); max-width: 52ch; margin: 0 0 0.6rem; }
.cat strong { color: var(--ink); }
@media (max-width: 700px) { .cats__grid { grid-template-columns: 1fr; } }

/* The breeder's guides: seven short chapters */
.guides { padding-bottom: clamp(3rem, 8vw, 6rem); }
.guides .lede { margin-bottom: 2rem; }
.guides__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; counter-reset: g; }
.guide { counter-increment: g; padding: 1.25rem; background: var(--paper-2); }
.guide__h { font-size: var(--s-1); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 0.5rem; }
.guide__h::before { content: counter(g) ". "; color: var(--ink-2); }
.guide p { margin: 0; color: var(--ink-2); }
.guides__draft { font: 600 var(--s--1) / 1.4 var(--f-mono); background: var(--canary); color: #0b3d2a; padding: 0.5rem 0.75rem; margin-bottom: 1.25rem; }

/* Steps: verbs as the labels */
.steps { padding-bottom: clamp(3rem, 8vw, 6rem); }
.steps .h2 { margin-bottom: 2rem; }
.steps__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: s; }
.steps__list li { padding: 1.5rem 1.5rem 1.5rem 0; border-top: 1px solid var(--line); position: relative; }
.steps__list li + li { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.steps__list h3 { font-size: var(--s-3); letter-spacing: -0.045em; margin-bottom: 0.75rem; }
.steps__list p { color: var(--ink-2); max-width: 32ch; margin: 0; }
@media (max-width: 760px) { .steps__list { grid-template-columns: 1fr; } .steps__list li + li { padding-left: 0; border-left: 0; } }

/* Gouldian zones */
.zones { padding-block: clamp(3rem, 8vw, 6rem); }
.zones__head { margin-bottom: 2.5rem; }
.zones__head .h2 { margin-bottom: 1rem; }
.zones__list { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: clamp(1rem, 3vw, 2.5rem); margin-bottom: 2rem; }
.zone { padding-top: 1.25rem; border-top: 2px solid var(--ink); }
.zone__sw { display: flex; gap: 0.4rem; margin-bottom: 1rem; }
.zone h3 { font-size: var(--s-2); margin-bottom: 0.6rem; }
.zone p { color: var(--ink-2); margin: 0; }
/* With the close-up beside it: the photo on the left, the three zones down the right */
.zones--photo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.zones--photo .zones__media .fig img { aspect-ratio: 4 / 5; object-fit: cover; }
.zones--photo .zones__list { grid-template-columns: 1fr; gap: 1.5rem; }
.zones--photo .zone { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0 1.25rem; }
.zones--photo .zone__sw { grid-row: span 2; margin: 0.2rem 0 0; }
@media (max-width: 860px) { .zones--photo { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .zones--photo .zone { grid-template-columns: 1fr; } .zones--photo .zone__sw { grid-row: auto; margin-bottom: 0.75rem; } }
@media (max-width: 760px) { .zones__list { grid-template-columns: 1fr; } }

/* Care */
.care { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-bottom: clamp(3rem, 8vw, 6rem); }
.care .h2 { margin-bottom: 1.5rem; }
.care__list { margin: 0; }
.care__list > div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.care__list dt { font-weight: 800; font-size: var(--s-1); letter-spacing: -0.03em; }
.care__list dd { margin: 0; color: var(--ink-2); }
@media (max-width: 760px) { .care { grid-template-columns: 1fr; } .care__list > div { grid-template-columns: 1fr; gap: 0.25rem; } }
.other, .clubs { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.other .h3, .clubs .h3 { margin-bottom: 0.75rem; }

/* CTA band */
.band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; padding-block: clamp(2.5rem, 6vw, 4rem); margin-bottom: clamp(3rem, 8vw, 6rem); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.band__h { font-size: var(--s-3); letter-spacing: -0.045em; max-width: 20ch; }

/* About: timeline */
.timeline { padding-block: clamp(3rem, 8vw, 6rem); }
.timeline__head { margin-bottom: 2.5rem; }
.timeline__head .h2 { margin-bottom: 1rem; }
.timeline__year { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem 2rem; padding: 1.5rem 0; border-top: 2px solid var(--ink); }
.timeline__y { font-size: var(--s-3); letter-spacing: -0.05em; }
.timeline__year ul { list-style: none; display: grid; gap: 0.25rem; }
.award { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.award:last-child { border-bottom: 0; }
.award__title { font-weight: 650; }
.award--lead .award__title { font-size: var(--s-1); font-weight: 800; letter-spacing: -0.02em; }
.award__meta { font: 500 var(--s--1) / 1.7 var(--f-mono); color: var(--muted); }
@media (max-width: 700px) { .timeline__year { grid-template-columns: 1fr; } }

.aviary { padding-bottom: clamp(3rem, 8vw, 6rem); }
.aviary .h2 { margin-bottom: 1rem; }
.aviary .lede { margin-bottom: 2rem; }
.gallery { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; gap: 1rem; }
.gallery__a { grid-row: span 2; }
.gallery img { height: 100%; object-fit: cover; }
.gallery__a img { aspect-ratio: 4 / 5; height: auto; }
/* The lead photo sets the height; the two beside it fill half each, whatever their shape */
.gallery__b, .gallery__c { position: relative; min-height: 0; }
.gallery__b picture, .gallery__c picture { position: absolute; inset: 0; }
.gallery__b img, .gallery__c img { width: 100%; height: 100%; }
@media (max-width: 760px) {
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .gallery__a { grid-column: 1 / -1; grid-row: auto; }
  .gallery__b picture, .gallery__c picture { position: static; }
  .gallery__b img, .gallery__c img { aspect-ratio: 4 / 5; height: auto; }
}

.story { padding-bottom: clamp(2rem, 5vw, 3rem); }
.story .h2 { margin-bottom: 1.25rem; }
.story__body, .story .placeholder { max-width: 68ch; }
.placeholder { padding: 1.5rem; border: 1px dashed var(--muted); color: var(--ink-2); }

/* Journal */
.post-lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; text-decoration: none; padding-bottom: clamp(2.5rem, 6vw, 4rem); border-bottom: 2px solid var(--ink); }
.post-lead[hidden], .post-row[hidden] { display: none; }
.post-lead__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.post-lead__media img, .post-lead__media .sw, .post-row__media img, .post-row__media .sw { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.post-lead:hover .post-lead__media > *, .post-row:hover .post-row__media > * { transform: scale(1.03); }
.post-lead .h2 { margin-bottom: 1rem; }
.post-lead .lede { margin-bottom: 1.25rem; }
.post-list { display: grid; padding-bottom: clamp(3rem, 8vw, 6rem); }
.post-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: center; padding: 1.75rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.post-row__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.post-row__title { font-size: var(--s-2); margin-bottom: 0.5rem; }
.post-row:hover .post-row__title { text-decoration: underline; text-decoration-color: var(--canary); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.post-row__body p:last-child { color: var(--ink-2); margin: 0; max-width: 60ch; }
@media (max-width: 760px) { .post-lead { grid-template-columns: 1fr; } .post-row { grid-template-columns: 1fr 2fr; align-items: start; } .post-row__body p:last-child { display: none; } }

.post__head { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: 2rem; max-width: min(100% - 2 * var(--gutter), 960px); }
.post__head .link--back { margin-bottom: 2rem; text-decoration: none; }
.post__title { margin-bottom: 0.5rem; }
.post__media { max-width: min(100% - 2 * var(--gutter), 1100px); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.post__media img { aspect-ratio: 3 / 2; object-fit: cover; }
.prose { max-width: min(100% - 2 * var(--gutter), 68ch); padding-bottom: clamp(3rem, 7vw, 5rem); font-size: 1.0625rem; line-height: 1.7; }
.prose h2 { font-size: var(--s-2); margin: 2.25rem 0 0.9rem; letter-spacing: -0.03em; line-height: 1.1; }
/* Article figures: a row of colour illustrations, or one wide figure */
.post-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.75rem 0 2rem; }
.post-figs__item img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.post-fig { margin: 1.75rem 0 2rem; }
.prose ul { padding-left: 1.2rem; margin: 0 0 1.25rem; display: grid; gap: 0.6rem; }
.prose li::marker { color: var(--ink); }
.prose a { text-decoration-color: var(--canary); text-decoration-thickness: 2px; text-underline-offset: 4px; font-weight: 600; }
.note { margin: 2rem 0 0; padding: 1.25rem 1.4rem; background: var(--canary); color: var(--on-canary); font-weight: 600; }
.note p { margin: 0; }
.note a { color: inherit; text-decoration-color: currentColor; }
.more { padding-bottom: clamp(3rem, 8vw, 6rem); }
.more .h3 { margin-bottom: 1rem; padding-top: 2rem; border-top: 2px solid var(--ink); }
.more__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.more__grid .post-row { grid-template-columns: 2fr 3fr; }
@media (max-width: 760px) { .more__grid { grid-template-columns: 1fr; } }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 6vw, 6rem); padding-bottom: clamp(4rem, 9vw, 7rem); align-items: start; }
.form { display: grid; gap: 1.25rem; padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--paper-2); }
.form .h3 { margin-bottom: 0.25rem; }
.field { display: grid; gap: 0.45rem; }
.field label { font-weight: 650; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 0.7rem 0.85rem; background: var(--paper); border: 1px solid var(--muted);
  border-radius: 0; color: var(--ink); transition: border-color 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field [aria-invalid='true'] { border-color: #b3112a; border-width: 2px; }
.field__help { margin: 0; font-size: var(--s--1); color: var(--muted); }
.field__error { margin: 0; font-size: var(--s--1); font-weight: 650; color: #b3112a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .field__error, :root:not([data-theme='light']) .field [aria-invalid='true'] { color: #ff8a8f; border-color: #ff8a8f; } }
.form__end { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.contact__direct .h3 { margin-bottom: 1.25rem; }
.contact-list { list-style: none; display: grid; gap: 0.75rem; }
.contact-list a, .contact-list li { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; font-weight: 600; }
.contact-list li.muted { font-weight: 400; align-items: flex-start; }
.contact-list .icon { font-size: 1.15rem; margin-top: 0.2em; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { --line: rgb(238 240 232 / 0.16); --muted: rgb(238 240 232 / 0.66); --ink: var(--on-dark); --ink-2: rgb(238 240 232 / 0.84); background: var(--iroko); color: var(--on-dark); padding-top: clamp(3rem, 6vw, 4.5rem); }
.site-footer :focus-visible { outline-color: var(--on-dark); }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1.3fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.site-footer__brand p { margin-top: 1.25rem; color: var(--ink-2); max-width: 36ch; }
.site-footer__h { font: 600 0.72rem / 1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.site-footer nav ul { list-style: none; display: grid; gap: 0.5rem; }
.site-footer nav a { text-decoration: none; font-weight: 600; }
.site-footer nav a:hover { text-decoration: underline; text-decoration-color: var(--canary); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; border-top: 1px solid var(--line); font-size: var(--s--1); color: var(--muted); }
.site-footer__base p { margin: 0; }
/* Cuba + Canada sign-off */
.roots { display: flex; align-items: center; gap: 0.7rem; margin: 1.25rem 0 0; font: 500 var(--s--1) / 1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.roots .flags { display: inline-flex; gap: 4px; flex: none; }
.roots .flags svg { width: 30px; height: 15px; box-shadow: 0 0 0 1px rgb(127 140 132 / 0.35); }
.site-footer__brand .roots { max-width: none; }
.roots--lg { margin-top: 1.75rem; color: var(--ink-2); }
.roots--lg .flags svg { width: 40px; height: 20px; }
.draft-flag { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.1em; background: var(--canary); color: var(--on-canary); padding: 0.2rem 0.5rem; }
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }

.checklist { margin-bottom: 2rem; padding: 1rem 1.25rem; border: 2px dashed var(--ink); background: var(--paper); font-size: var(--s--1); }
.checklist summary { cursor: pointer; font-weight: 700; }
.checklist__n { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; margin-left: 0.4rem; background: var(--canary); color: var(--on-canary); font-family: var(--f-mono); }
.checklist ul { padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.checklist p { margin: 0.75rem 0; color: var(--muted); }

.nf { min-height: 50vh; }
.nf .btn { margin-top: 1.5rem; }

/* Scroll reveal (JS adds .is-in). Without JS or with reduced motion, everything is visible. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .hero__media, .spots, .hero__controls, .checklist, .band .btn { display: none !important; }
  .hero { min-height: 0; color: #000; background: none; }
}

/* ---------- His pairs and colour key (written in by the Worker from what Kevin approved) ---------- */
.guia-slot:empty { display: none; }
.guia { display: grid; gap: 1.25rem; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.guia .lede { margin: 0; }
.guia__nota { margin: 0; font-weight: 650; display: flex; align-items: center; gap: 0.5rem; }
.guia__star { color: var(--orula); font-size: 1.15em; line-height: 1; }
.parejas { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.pareja { display: grid; gap: 0.75rem; align-content: start; padding: 1.1rem; background: var(--paper-2); border-top: 3px solid var(--line); }
.pareja--star { border-top-color: var(--orula); }
.pareja__n { margin: 0; font: 600 var(--s--1) / 1.2 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; display: flex; gap: 0.5rem; align-items: center; }
.pareja__foto { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.pareja dl { margin: 0; display: grid; gap: 0.6rem; }
.pareja__ave { display: grid; gap: 0.15rem; }
.pareja dt { font-weight: 700; }
.pareja dd { margin: 0; display: grid; gap: 0.1rem; }
.pareja__code { font: 500 var(--s--1) / 1.3 var(--f-mono); letter-spacing: 0.04em; color: var(--muted); }
.pareja__words { line-height: 1.4; }
.pareja__notas { margin: 0; font-size: var(--s--1); color: var(--ink-2); white-space: pre-line; }
.guia__clave-h { margin-top: 0.5rem; }
.guia__how { margin: 0; max-width: 65ch; color: var(--ink-2); }
.clave-wrap { overflow-x: auto; max-width: 40rem; }
.clave { width: 100%; border-collapse: collapse; font-size: var(--s-0); }
.clave th, .clave td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.clave thead th { font: 600 var(--s--1) / 1.2 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.clave tbody th { font: 600 var(--s-0) / 1.4 var(--f-mono); white-space: nowrap; }