/* ============================================================
   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;
}

/* ── 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;
  }

  /* ── 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)); }
}