/* ============================================================
   Faunaly site.css
   Canonical brand system. Palette + self-hosted fonts here;
   per-page layout stays inline on each page.
   ============================================================ */

/* ---- Self-hosted fonts (Fraunces + Inter), woff2 ---- */
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/f01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/f02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/f03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/f01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/f02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/f03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/f04.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/f05.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/f06.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f04.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f05.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f06.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/f04.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/f05.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/f06.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f07.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f08.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f09.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f10.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f11.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f12.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f13.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/f07.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/f08.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/f09.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/f10.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/f11.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/f12.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/f13.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════
   FAUNALY — SHARED SITE STYLES
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Canonical brand palette (single source of truth) ── */
  --ink:        #1a3a47;   /* deep teal: primary text + the one solid-navy surface */
  --ink-soft:   #4a6470;   /* body copy */
  --ink-muted:  #7c8d93;   /* captions, metadata, descriptors */
  --accent:     #c89a4a;   /* warm gold: italics, eyebrows, CTAs */
  --accent-warm:#b8843a;   /* gold, hover only */
  --leaf:       #7a8e6f;   /* sage: conservation contexts only */
  --line:       #d8d2c4;   /* hairlines, borders */
  --paper:      #f0e9db;   /* cards, contained surfaces */
  --cream:      #f6f1e6;   /* warm cream: default page background */
  --bg-deep:    #ece4d3;   /* alternating section background */

  /* On-dark (navy footer / dark surfaces) */
  --paper-on-dark: #f6f1e6;
  --muted-on-dark: #8fa6ac;
  --line-on-dark:  rgba(246,241,230,0.16);

  /* Brand-mark ring colors */
  --ring-olive:  #4D5941;
  --ring-copper: #AB7750;
  --ring-brown:  #7B4A2A;

  /* Layout */
  --container: 1180px;
  --gutter: 32px;
  --rhythm: 80px;

  /* ── Compatibility aliases ──
     Legacy token names still referenced by the seven non-index pages,
     remapped onto the canonical palette so those pages inherit the new
     system without markup changes. Retire once those pages migrate to
     the canonical token names. */
  --bg:                 var(--cream);   /* old default background */
  --ink-dark:           #1a3a47;        /* old near-black dark surface -> canonical navy */
  --text-on-dark:       #f6f1e6;        /* text on navy */
  --text-on-dark-soft:  #8fa6ac;        /* muted text on navy */
  --accent-on-leaf:     #b8843a;        /* gold accent on sage */
  --section-pad-y:      72px;           /* mobile vertical rhythm (desktop analog: --rhythm) */
}

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

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  width: 100%;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Horizontal-overflow clipping lives on <body> (see the body rule
   above), NOT on <html>. Setting any overflow value — including
   overflow-x: clip — on the root <html> element makes <html> the
   scroll/clip container, which breaks position: sticky on the
   header in Chromium and Safari (the header detaches and page
   content slides under it). Clipping on <body> contains the same
   horizontal overflow without that side effect.

   text-size-adjust: 100% disables iOS Safari's automatic text
   inflation in landscape orientation. Without this, Safari scales
   up small body/footer text on rotation to landscape, causing
   inconsistent type sizing across orientations (e.g. footer
   tagline appearing visibly larger in landscape than portrait
   despite no CSS font-size change). 100% means "honor my CSS,
   don't inflate." */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.045;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  width: 100%;
}

.container-narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 48px;
  width: 100%;
}

/* ── BASE TYPOGRAPHY ──
   Shared heading defaults. Pages override font-size, font-weight,
   margin-bottom, and any other property as needed. ── */
h1, h2, h3 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: pretty;
}
h1 em, h2 em, h3 em { font-style: italic; color: var(--accent); }

/* ── BUTTONS ── */
.btn {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border: 1px solid currentColor;
  cursor: pointer;
  background: transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-primary {
  background: var(--accent);
  color: #2a2410;
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-warm);
  border-color: var(--accent-warm);
}
.btn-secondary {
  color: var(--ink);
  border-color: var(--line);
}
.btn-secondary:hover { border-color: var(--ink); }

.btn-ghost {
  color: var(--accent);
  border-color: var(--accent);
}
.btn-ghost:hover {
  background: var(--accent);
  color: var(--paper);
}

/* ── ACCESSIBILITY: keyboard focus rings ── */
.btn:focus-visible,
.logo:focus-visible,
.nav-links a:focus-visible,
.footer-col a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── Carousel affordances: hidden by default on desktop.
   Mobile rules in the @media block below enable .display: flex. ── */
.carousel-dots,
.carousel-hint { display: none; }

/* ── HEADER ── (matched to index.html canonical header) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246,241,230,0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 23px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.logo svg { width: 30px; height: 30px; flex-shrink: 0; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
}
.nav-links a {
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s ease-out;
}
.nav-links a:hover,
.nav-links a.active { color: var(--accent); }
.header-right { display: flex; align-items: center; gap: 28px; }
.header-right .btn { padding: 12px 22px; }
.nav-toggle { display: none; }
.mobile-nav { display: none; }

/* ── PAGE HERO ── */
.page-hero {
  padding: 56px 0 72px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 24px;
}

.page-hero h1 {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(32px, 5.5vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 24px;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}

.page-hero h1 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.page-hero .lede {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}

/* ── SECTION LABEL ── */
.section-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-label::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--accent);
}

/* ── INTRO STRIP (reusable editorial lede band) ──
   Used directly below .page-hero on content pages (research, animals).
   Renders a left-aligned, large-serif lede paragraph that sets the
   thesis of the page. Symmetric padding so the lede hover-aligns
   vertically between the page-hero's bottom border and the strip's
   own bottom border. ── */
.intro-strip {
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
}
.intro-strip .lede-2 {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 760px;
}
.intro-strip .lede-2 em { font-style: italic; color: var(--accent); }
.intro-strip .lede-2 strong { font-weight: 500; color: var(--ink); }
.intro-strip .lede-2 a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color 0.2s;
}
.intro-strip .lede-2 a:hover { color: var(--accent-warm); }

/* ── BUCKET TAG (reusable section eyebrow) ──
   Used on animals.html (above bucket titles), conservation.html. ── */
.bucket-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 18px;
}
.bucket-tag::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--accent);
}

/* ── CTA BAND (reusable closing call-to-action) ──
   Used on about, conservation, faq, research, animals.
   Pages can override font-size or add a background/border. ── */
.cta-band {
  padding: 96px 0;
  text-align: center;
}
.cta-band h2 {
  font-weight: 300;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.cta-band p {
  font-size: 16px;
  color: var(--ink-soft);
  margin-bottom: 32px;
}

/* ── FOOTER ──
   Footer styling matches the markup shipped on every page
   (.footer-mark, bare .footer-col, single inline brand row).
   Palette + fonts above are canonical; this block is the
   markup-matched footer carried over during consolidation. */
footer.site-footer {
  background: var(--ink);
  color: var(--text-on-dark);
  border-top: 1px solid var(--line-on-dark);
  padding: 72px 0 40px;
  margin-top: 0;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line-on-dark);
}
.footer-links { display: contents; }

.footer-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--text-on-dark);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.footer-mark { width: 28px; height: 28px; flex: 0 0 auto; }

.footer-tagline {
  font-size: 14px;
  color: var(--text-on-dark-soft);
  max-width: 320px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.footer-tagline::before {
  content: "Discover the nature in your child. Unlock the guidance to nurture it.";
}

.footer-pronounce {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--text-on-dark-soft);
}
.footer-pronounce em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--text-on-dark);
}

.footer-col h4 {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
  margin-bottom: 18px;
}

.footer-col a, .footer-col p {
  display: block;
  font-size: 14px;
  color: var(--text-on-dark);
  text-decoration: none;
  margin-bottom: 11px;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 28px;
  font-size: 12.5px;
  color: var(--text-on-dark-soft);
  flex-wrap: wrap;
}

/* ── HAMBURGER NAV (mobile menu) ──
   Hamburger button is hidden on desktop; it's the toggle for the
   mobile-nav dropdown panel that appears below the header on ≤960px.
   When open, the three bars animate to an X via aria-expanded state.
──────────────────────────────────────────────────────────────── */
/* Toggle + mobile-nav: base display handled here, full rules in the
   ≤960 media query below (matched to index.html canonical header). */
.nav-toggle { display: none; }
.mobile-nav { display: none; }
.mobile-nav.open { display: block; }
body.nav-open {}

/* ── RESPONSIVE ──
   Canonical breakpoints across the Faunaly site:
     960px = tablet / collapse multi-column to single
     600px = mobile / single-column phone layouts
   Page-specific overrides (e.g., animals.html's 480px ultra-narrow)
   are kept inline in that page's embedded <style>.
──────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .container, .container-narrow { padding: 0 28px; }
  .nav-links { display: none; }
  .nav-toggle {
    display: flex; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 8px;
  }
  .nav-toggle span { width: 22px; height: 1.5px; background: var(--ink); display: block; }
  .header-right .btn.desktop-cta { display: none; }
  .mobile-nav { display: none; border-bottom: 1px solid var(--line); background: var(--cream); }
  .mobile-nav.open { display: block; }
  .mobile-nav a { display: block; padding: 16px 24px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 15px; }
  .mobile-nav a[data-faunaly-cta] { background: var(--bg-deep); }
  .btn { padding: 16px 28px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-top > :first-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
  .page-hero { padding: 40px 0 52px; }
}

@media (max-width: 600px),
       (orientation: landscape) and (max-height: 500px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ── ACCESSIBILITY: respect prefers-reduced-motion ──
   For users who request reduced motion at the OS level, kill
   transitions, animations, and smooth scrolling. ── */
@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;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE STICKY CTA
   Fixed bottom bar that appears after the user scrolls past the
   hero on phones. Gives a constant path to the assessment without
   forcing a scroll back up. Hidden on tablet+ — desktop already
   has the persistent header CTA.
   ═══════════════════════════════════════════════════════════ */
.mobile-sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(250, 247, 239, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  z-index: 90;
  align-items: center;
  gap: 12px;
  transform: translateY(110%);
  transition: transform 280ms ease, opacity 280ms ease;
  opacity: 0;
  pointer-events: none;
}

.mobile-sticky-cta.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.mobile-sticky-cta .msc-blurb {
  flex: 1;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-soft);
  min-width: 0;
}

.mobile-sticky-cta .msc-blurb strong {
  display: block;
  color: var(--ink);
  font-weight: 500;
  font-family: 'Fraunces', serif;
  font-size: 14px;
  letter-spacing: -0.01em;
  margin-bottom: 1px;
}

.mobile-sticky-cta .msc-btn {
  border: none;
  cursor: pointer;
  background: var(--ink);
  color: var(--paper);
  padding: 13px 18px;
  min-height: 46px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}

.mobile-sticky-cta .msc-btn:hover {
  background: var(--accent);
}

/* ═══════════════════════════════════════════════════════════
   MOBILE CONCISION (phones, both orientations)
   Targeted tightening to reduce vertical scroll and improve
   information density on phone-sized screens. Desktop layout
   is untouched.

   Targets:
     • Portrait phones (≤600px wide) — iPhone SE → Pro Max
     • Landscape phones — landscape orientation with viewport
       height ≤500px. This catches every iPhone in landscape
       (heights 320–430px) while excluding iPads in landscape
       (height ≥768px) and small laptop windows.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 600px),
       (orientation: landscape) and (max-height: 500px) {
  /* Show the sticky CTA on phones */
  .mobile-sticky-cta { display: flex; }

  /* Reserve room so the fixed bar doesn't overlap the footer's
     last line when the user reaches the bottom. */
  body { padding-bottom: 84px; }

  /* ── Full-bleed mobile ──
     Container loses horizontal padding on phones so every section
     reaches viewport edges. Inner content blocks (headlines, body
     copy, button rows, image wrappers) carry their own 20px padding
     via .mobile-pad rules below. Carousels can now bleed edge-to-edge
     without negative-margin tricks. */
  .container, .container-narrow { padding: 0; }

  /* Apply 20px horizontal padding to content blocks that should NOT
     bleed to the edge. Carousels and full-bleed images are excluded.
     This selector list covers every page on the site:
       • index.html (hero/how/animals/science/sample/conservation/pricing)
       • about.html (philosophy/pillars header/founder/cd-grid)
       • research.html (intro/dim header/method/trust/cites)
       • animals.html (intro/bucket headers/method)
       • conservation.html (intro/bucket headers/partner cards)
       • faq.html (faq-layout, faq-toc, faq-section)
       • privacy/terms.html (legal-toc, legal content)
     Anything missing here will appear flush-left in mobile portrait —
     this was the root cause of the "margins broken in vertical mode"
     bug across inner pages prior to this consolidation. ── */
  .hero-grid > div,
  .how-header,
  .animals-header,
  .science-text,
  .sample-text,
  .conservation-inner,
  .pricing-inner,
  .footer-top,
  .footer-bottom,
  .header-inner,
  .page-hero .container-narrow,
  .intro-strip .container-narrow,
  .cta-band .container-narrow,
  .cta-band .container,
  /* about.html */
  .philosophy-grid,
  .pillars-header,
  .cd-grid > div,
  .founder-inner,
  /* research.html */
  .dim-header,
  .method-text,
  .trust-section .dim-header,
  .cites-inner,
  /* animals.html */
  .bucket-header,
  .method-grid > div,
  /* conservation.html */
  .intro-grid > div,
  .partners-section > .container > .bucket-tag,
  .partners-section > .container > .bucket-title,
  /* faq.html */
  .faq-toc,
  .faq-section,
  /* privacy.html / terms.html */
  .legal-toc,
  .legal-content {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* ── /learn/ hub + spoke reading gutter ──
     The /learn/ pages were added after the full-bleed consolidation
     above, so their wrappers never opted into the 20px compensating
     gutter and rendered flush to the viewport edge on phones. These
     pages are long-form reading, so they take a slightly wider 24px
     gutter (vs the 20px card gutter) for comfort on iPhone, applied
     to hero and article body together so both align at one inset.
     Scoped to body.learn so no other page hero is affected.
       • spoke body:  <div class="container learn-body">
       • hub body:    <section class="learn-body"><div class="container">
       • hero (both): <section class="page-hero"><div class="container-narrow"> ── */
  .learn .page-hero .container-narrow,
  .learn-body.container,
  .learn-body > .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* ── Reusable carousel utility ──
     Drop-in horizontal swipe carousel matching index.html's
     archetypes/steps/trust-items pattern. Apply .mobile-carousel
     to any container of cards on mobile to convert it to a
     scroll-snap carousel. Cards inside become .mobile-carousel-card
     (78%-wide, max 320px, snap-aligned, fixed height for visual
     balance). Pair with .carousel-dots + .carousel-hint affordances
     for full pagination feedback.

     scroll-padding-left: 20px is critical — without it, scroll-snap
     parks the first card flush against the viewport edge (x=0) on
     initial render because the snap target ignores carousel padding.
     With scroll-padding-left, the snap origin shifts inward 20px so
     the first card visually lands at x=20 (matching section headlines
     above it). This is what makes index.html's carousels look
     "professional" — every snapped card sits at the same gutter as
     section headlines. ── */
  .mobile-carousel {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 20px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 4px 20px 12px !important;
    margin: 24px 0 0 !important;
    border: none !important;
    grid-template-columns: none !important; /* defeat any inherited grid */
  }
  .mobile-carousel::-webkit-scrollbar { display: none; }
  .mobile-carousel > * {
    flex: 0 0 78% !important;
    max-width: 320px;
    scroll-snap-align: start;
    box-sizing: border-box;
  }

  /* Header: desktop CTA already hidden at ≤960; this keeps it hidden
     at ≤600 too. Repointed to the real markup selector. */
  .header-right .btn.desktop-cta {
    display: none;
  }

  /* Page hero (used on inner pages): same vertical rhythm as
     section breaks, driven by --section-pad-y. */
  .page-hero { padding: 40px 0 var(--section-pad-y); }
  .page-hero h1 { margin-bottom: 18px; }

  /* CTA bands — same vertical rhythm as section breaks. */
  .cta-band { padding: var(--section-pad-y) 0; }
  .cta-band p { margin-bottom: 24px; }

  /* Footer — keeps its own rhythm (different visual context). */
  footer.site-footer { padding: 48px 0 24px; }

  /* Mobile footer matches index: brand spans full width, links in 2 cols. */
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
  }
  .footer-top > :first-child { grid-column: 1 / -1; }
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  /* Intro strip — same vertical rhythm as section breaks. */
  .intro-strip { padding: var(--section-pad-y) 0; }

  /* ── Global carousel affordances (mobile) ──
     Pagination dots + "swipe" hint, available to every page that
     uses the .mobile-carousel utility. Hidden on desktop via the
     base rule above (.carousel-dots, .carousel-hint { display: none }
     in the desktop layer — see below). Populated and tracked by
     site.js based on scroll position of [data-carousel-target]. ── */
  .carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    padding: 0 20px;
    flex-wrap: nowrap;
  }
  .carousel-dots .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--line);
    transition: background 0.2s, width 0.2s;
    flex-shrink: 0;
  }
  .carousel-dots .dot.active {
    background: var(--accent);
    width: 18px;
    border-radius: 3px;
  }
  .carousel-hint {
    text-align: center;
    margin-top: 14px;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 13px;
    color: var(--ink-muted);
    letter-spacing: 0.01em;
  }
  .carousel-hint .arrow {
    font-style: normal;
    margin-left: 4px;
    color: var(--accent);
  }
}

/* ═══════════════════════════════════════════════════════════
   LANDSCAPE-PHONE-SPECIFIC OVERRIDES (global)
   Sits after the merged mobile-concision block above. Targets
   only landscape phones (height ≤500px). Portrait phones, iPads,
   and desktop are unaffected.

   Site.css concerns: global headers/footers/cta-bands and the
   shared .page-hero. Page-specific landscape rules (e.g. hero
   carousels in index.html) live in each page's inline <style>.
   ═══════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {
  /* Override the unified vertical-rhythm variable for landscape.
     Also redefined in index.html's landscape block — having it
     here too means inner pages (about, research, etc.) that link
     to site.css but don't have their own landscape block still
     get the tighter rhythm. */
  :root { --section-pad-y: 52px; }

  /* Page-hero: cap headline so it doesn't dominate the viewport,
     and drop the 18ch desktop max-width so the headline fills
     available width instead of sitting in a narrow centered box.
     Vertical padding is driven by --section-pad-y (overridden to
     40px in the index.html landscape block). */
  .page-hero h1 {
    font-size: clamp(26px, 4.5vw, 34px);
    margin-bottom: 14px;
    max-width: 100%;
  }
  .page-hero .lede {
    font-size: 15px;
    max-width: 100%;
  }

  /* CTA bands — driven by --section-pad-y for harmonized rhythm. */
  .cta-band h2 { font-size: clamp(22px, 4vw, 30px); max-width: 100%; }

  /* Footer — single column already (via the 600px/landscape grid
     rule); just tighten top padding for short landscape viewports. */
  footer.site-footer { padding: 36px 0 20px; }

  /* Intro strip — driven by --section-pad-y for harmonized rhythm. */
  .intro-strip .lede-2 { font-size: 17px; max-width: 100%; }

  /* Sticky CTA: keep but reduce body padding-bottom since landscape
     viewport is so short, the 84px reservation eats too much room. */
  body { padding-bottom: 68px; }
  .mobile-sticky-cta { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}