/* ─────────────────────────────────────────────────────
   THE REPTILE CLUB — shared stylesheet
   This file defines the palette, type system, nav, and footer
   used on every page. Page-specific styles live inline in each page.
   ───────────────────────────────────────────────────── */

/* ───── TYPE ───── */
@font-face {
  font-family: 'LinuxLibertine';
  src: url('../fonts/LinLibertine_R.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'LinuxLibertine';
  src: url('../fonts/LinLibertine_RI.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'LinuxLibertine';
  src: url('../fonts/LinLibertine_RB.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'LinuxLibertine';
  src: url('../fonts/LinLibertine_RBI.otf') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ───── RESET ───── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ───── HTML LEVEL ───── */
html {
  scroll-behavior: smooth;
  background: var(--paper);
}

/* ───── PALETTE ───── */
:root {
  --paper: #DBCFB4;
  --paper-lt: #E5DBC2;
  --paper-dk: #C9BB9C;
  --ink: #1F1812;
  --ink-soft: #2B2118;
  --ink-text: #3A2B1E;
  --ink-mute: #5C4A38;
  --ink-faint: #897560;
  --rule: #B5A684;
  --rule-soft: #C9BB9C;
  --gilt: #A8853A;
  --gilt-deep: #8B6B23;
  --gilt-bright: #C9A84C;
  /* Text-role gilt. Used wherever gilt appears as readable text on the
     paper ground (eyebrows, labels, links, dates). Darker than gilt-deep
     so it meets WCAG AA contrast (4.7:1 against paper). Ornamental
     uses (rules, dividers, dots, brackets) keep --gilt and --gilt-deep. */
  --gilt-text: #6E5114;
  --fern: #3D4A37;
  --fern-deep: #2F3D2A;
  --cream: #F0E6CE;
  --cream-soft: rgba(240,230,206,0.70);
  --cream-faint: rgba(240,230,206,0.42);

  /* ───── LAYOUT WIDTHS (from Bootstrap container conventions) ─────
     These five tiers give every page a consistent, research-grounded
     width vocabulary. Pick the OUTER tier for visual presence (frame
     width), and constrain INNER text columns inside it for readability.

     Outer (frame) tiers:
       --w-showcase   1140px   Hero blocks, figure breakouts (e.g. map)
       --w-editorial   960px   Article frames, mixed-content sections
       --w-reading     720px   Pure-text documents

     Inner (text-column) tiers:
       --w-text-body   640px   Body paragraphs (~66 CPL at 18px serif —
                               the typography sweet spot from Baymard /
                               NNGroup / Ruder research)
       --w-text-lead   540px   Centered intros, captions, emphasized
                               short text (~55 CPL)

     Source: Bootstrap 5 .container-{sm,md,lg,xl} = 540/720/960/1140.
     Keep these values stable; they're the spine of the layout system. */
  --w-showcase: 1140px;
  --w-editorial: 960px;
  --w-reading: 720px;
  --w-text-body: 640px;
  --w-text-lead: 540px;

  /* ───── TEXT SCALE (Text & Paragraph Rules) ─────
     Six canonical sizes for body typography across the site. Pages
     reference these by name (var(--text-body)) rather than picking raw
     pixel values, so the type system stays internally consistent.

     This scale covers BODY typography. Display-scale type (page-title
     heroes, rotator headlines, animal-name on certificates) is picked
     per context and not parameterized here, because those are creative
     choices that vary by page.

       --text-eyebrow   13px   Tracked caps labels: status, eyebrows,
                               section markers, table column headers
       --text-meta      15px   Dates, captions, secondary info, byline
                               metadata, table cells, footnotes
       --text-body      18px   Default body prose. The reading-size for
                               every paragraph in every document.
       --text-lead      20px   Lead paragraphs, page intros, standard
                               summaries — slightly larger than body
                               to mark importance without becoming a
                               heading.
       --text-h3        22px   Standard titles, card titles, sub-section
                               headings, h3-equivalent.
       --text-h2        28px   Section headings within long documents,
                               h2-equivalent.

     Companion line-heights:
       --lh-tight   1.2   For h2, h3 (sized to look held-together)
       --lh-meta    1.4   For eyebrow, meta (small caps + dates)
       --lh-body    1.65  For body, lead (comfortable reading)

     ─── NOTE ON FONT METRICS ───
     The site's primary fonts (Linux Libertine for display/headings,
     EB Garamond for body) both have smaller x-heights and tighter
     cap heights than fonts like Times New Roman, Helvetica, or
     Inter. At the same nominal pixel size, our fonts render visually
     smaller — Libertine has a smaller x-height than Times by design
     (Times was engineered for newspaper-column readability at small
     sizes; Libertine was designed for book setting). EB Garamond is
     even more pronounced — its x-height is roughly 0.40 of body size
     vs. 0.52 for typical sans-serifs, so 20px Garamond reads close
     to 16px Inter.

     This affects every size in the scale slightly, but it is most
     noticeable at --text-eyebrow (tracked caps) where small cap
     height and wide letter-spacing combine. The 13px eyebrow size
     accounts for Libertine's metrics; in a Times-like font, the
     same visual weight would land at ~12px. If the font choices
     change, the scale may need re-tuning.

     Rules of use:
     - Italic is NEVER used below 15px.
     - Italic is NOT used on metadata (dates, status text) at any size.
     - Italic IS allowed in flowing prose at body+ for emphasis, and
       for editorial uses (bylines, species names in Latin, work titles).
     - Light weights (300) are not used anywhere on the site.
     - Body weight is 400. Bold for emphasis is 700.
     */
  --text-eyebrow: 13px;
  --text-meta: 15px;
  --text-body: 18px;
  --text-lead: 20px;
  --text-h3: 22px;
  --text-h2: 28px;
  --lh-tight: 1.2;
  --lh-meta: 1.4;
  --lh-body: 1.65;
}

/* ───── BODY DEFAULTS ─────
   Each page sets its own body font-family/size as needed.
   The shared rule below is the SAFE default that every page can rely on.
   Pages can override .body or specific elements as desired,
   but should NOT set body font-family/size in conflict with this. */
body {
  background: var(--paper);
  color: var(--ink-text);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 17px;
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* No background-attachment: fixed — that property repaints the
     entire viewport every scroll frame on mobile/older devices and is
     the dominant cause of scroll stutter site-wide. The two subtle
     radial-gradient overlays it used to paint were so faint
     (rgba 0.04 / 0.03 alpha) that removing them is visually
     undetectable and reclaims the paint budget for actual content. */
}

body > footer { margin-top: auto; }

/* Body is a flex column; ensure top-level children stretch full width
   so full-bleed sections (nav, rotator, footer) keep their backgrounds. */
body > * { width: 100%; }

a { color: var(--gilt-text); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--ink); }

/* ─────────────────────────────────────────────────────
   NAV — identical on every page
   ───────────────────────────────────────────────────── */
nav {
  /* Solid-paper background (no backdrop-filter blur) so the sticky nav
     doesn't force the browser to re-capture and re-blur the area
     behind it on every scroll frame. backdrop-filter is the second-
     biggest scroll-stutter cause on older devices after fixed
     background-attachment. Opacity bumped from 0.93 to 0.97 to keep
     the soft paper-on-paper feel now that the blur isn't softening
     the transition. */
  background: rgba(219,207,180,0.97);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.nav-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  flex-shrink: 0;
  text-decoration: none;
}
.nav-egg {
  height: 32px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.nav-mark-divider {
  width: 1px;
  height: 28px;
  background: var(--gilt);
  opacity: 0.45;
}
.nav-mark-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  gap: 2px;
}
.nav-mark-the {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.nav-mark-name {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-link {
  font-family: 'DM Sans', sans-serif;
  color: var(--ink-mute);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 3px;
  transition: color 0.15s;
  text-decoration: none;
}
.nav-link:hover { color: var(--gilt-text); }
.nav-cta {
  font-family: 'DM Sans', sans-serif;
  background: var(--ink);
  color: var(--cream);
  border: none;
  border-radius: 3px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
.nav-cta:hover { background: var(--ink-soft); }

/* ─────────────────────────────────────────────────────
   AUTH-AWARE NAV
   Items in this group are populated by /js/nav-auth.js based on
   Firebase auth state. They start hidden so the page doesn't flicker
   between signed-out and signed-in renders on first paint.
   ───────────────────────────────────────────────────── */
.nav-auth {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--rule);
  flex-shrink: 0;
}
.nav-auth[data-state=""] > * { visibility: hidden; }
.nav-auth-link {
  font-family: 'DM Sans', sans-serif;
  color: var(--ink-mute);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 3px;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
}
.nav-auth-link:hover { color: var(--gilt-text); }
.nav-auth-link.is-primary {
  color: var(--ink);
  font-weight: 600;
}
.nav-auth-link.is-current {
  color: var(--ink);
  position: relative;
}
.nav-auth-link.is-current::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px;
  bottom: 4px;
  height: 1px;
  background: var(--gilt);
  opacity: 0.6;
}
.nav-auth-initial {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--paper-dk);
  border: 1px solid var(--rule);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'LinuxLibertine', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-right: 4px;
}

/* Mobile menu — auth items mirror the desktop pattern */
.nav-menu-auth { display: contents; }
.nav-menu-auth[data-state=""] > * { visibility: hidden; }
.nav-menu-divider {
  height: 1px;
  background: var(--rule-soft);
  margin: 8px 0 4px;
}

@media (max-width: 720px) {
  .nav-auth { display: none; }
}

/* ───── MOBILE MENU TRIGGER (shown only on mobile) ───── */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 8px 10px;
  cursor: pointer;
  /* 44x44 meets the Apple HIG and Material tap-target floor. This is
     the most-tapped element on mobile; under-floor sizes here are the
     biggest single usability hit on a phone. */
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}
.nav-toggle:hover { border-color: var(--gilt); background: rgba(168,133,58,0.05); }
.nav-toggle span {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ───── MOBILE MENU PANEL (drops down from nav, only on mobile) ───── */
.nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper-lt);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 8px 24px rgba(31,24,18,0.10);
  z-index: 99;
}
.nav-menu[data-open="true"] { display: block; }
.nav-menu-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-menu-link {
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  /* 12px horizontal padding (was 4px) so taps near the panel edge have
     a comfortable buffer rather than landing flush against the chrome. */
  padding: 12px 12px;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
  transition: color 0.15s;
}
.nav-menu-link:hover { color: var(--gilt-text); }
.nav-menu-link:last-child { border-bottom: none; }
.nav-menu-cta {
  font-family: 'DM Sans', sans-serif;
  background: var(--ink);
  color: var(--cream);
  border-radius: 3px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  margin-top: 12px;
  transition: background 0.15s;
}
.nav-menu-cta:hover { background: var(--ink-soft); color: var(--cream); }

@media (max-width: 720px) {
  .nav-inner { padding: 12px 20px; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-egg { height: 28px; }
  .nav-mark-the { font-size: 13px; }
  .nav-mark-name { font-size: 15px; letter-spacing: 0.10em; }
  .nav-mark { gap: 10px; }
  .nav-mark-divider { height: 24px; }
}
@media (max-width: 480px) {
  .nav-mark { gap: 10px; }
  .nav-mark-divider { height: 24px; }
  .nav-mark-the { font-size: 12px; }
  .nav-mark-name { font-size: 14px; letter-spacing: 0.10em; }
}

/* ─────────────────────────────────────────────────────
   FOOTER — identical on every page
   ───────────────────────────────────────────────────── */
footer {
  background: var(--ink);
  color: var(--cream);
  padding: 64px 32px 36px;
}
.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  /* Brand + four link columns: The Club, The Registry, HatchLog, Legal.
     HatchLog has its own column so the app store links sit under the
     product they belong to instead of under The Registry. */
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer-brand-block { max-width: 320px; }
.footer-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  text-decoration: none;
}
.footer-egg {
  height: 36px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.footer-mark-divider {
  width: 1px;
  height: 30px;
  background: var(--gilt-bright);
  opacity: 0.5;
}
.footer-mark-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  gap: 2px;
}
.footer-mark-the {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--cream-faint);
  letter-spacing: 0.04em;
}
.footer-mark-name {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
}
.footer-tagline {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: var(--text-meta);
  color: rgba(240,230,206,0.85);
  line-height: 1.55;
}
.footer-col-title {
  font-family: 'LinuxLibertine', serif;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gilt-bright);
  margin-bottom: 14px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-link {
  font-family: 'DM Sans', sans-serif;
  color: var(--cream-soft);
  font-size: var(--text-meta);
  /* Vertical padding gives each link a comfortable tap-target row.
     Without this the rows clock in at ~24px tall, well under the 44pt
     floor for thumb interaction on a phone. */
  padding: 6px 0;
  transition: color 0.15s;
  text-decoration: none;
}
.footer-link:hover { color: var(--gilt-bright); }
.footer-bottom {
  max-width: 1120px;
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(168,133,58,0.18);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: var(--text-meta);
  color: rgba(240,230,206,0.65);
}
.footer-bottom a { color: rgba(240,230,206,0.65); }
.footer-bottom a:hover { color: var(--gilt-bright); }
.footer-dot { margin: 0 0.35em; }
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  /* 2-column layout with the brand block spanning both columns. The
     four link columns drop into a 2x2 grid beneath the brand, which
     halves the footer's mobile vertical height and lines headers up
     across each row because every .footer-col-title is the first
     child of its grid cell. */
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand-block { grid-column: 1 / -1; max-width: none; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* ─────────────────────────────────────────────────────
   PAGE HEAD — uniform masthead across editorial pages
   ─────────────────────────────────────────────────────
   Applied to every editorial page (Registry, Standards,
   HatchLog, About, individual Standards, species profiles,
   Bulletin issues, Privacy, Terms, Support, Masthead).
   Replaces the older egg + eyebrow + "The X" pattern.

   Treatment: tracked roman caps title, hairline gilt rule,
   italic Garamond intro. No egg, no eyebrow — the site nav
   already carries the brand mark.

   Two sizes:
     .page-title       48px / .32em — short titles (≤ ~16 chars)
     .page-title.long  34px / .26em — long titles, allowed to
                                     wrap to two lines
   ───────────────────────────────────────────────────── */
.page-head {
  text-align: center;
  margin: 0 auto 48px;
  max-width: var(--w-editorial);
  padding: 64px 32px 0;
}
.page-title {
  font-family: 'LinuxLibertine', serif;
  font-size: 48px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.15;
  /* indent compensation for tracked uppercase — pulls visual
     center back so the rule below lines up with the title's
     optical center, not its trailing-letter-space center */
  text-indent: 0.32em;
  /* When a title wraps, balance the line breaks so we get a
     visually even split rather than one long line + one short. */
  text-wrap: balance;
  margin: 0 0 24px;
  /* Constrain the title's own width inside the wider .page-head
     wrapper so it doesn't sprawl across the editorial column. */
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.page-title.long {
  font-size: 34px;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  line-height: 1.3;
  max-width: 1040px;
}
.page-rule {
  width: 64px;
  height: 1px;
  background: var(--gilt);
  margin: 0 auto 24px;
  border: none;
}
.page-intro {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ink-mute);
  line-height: 1.55;
  max-width: var(--w-text-lead);
  margin: 0 auto;
  text-align: center;
}
@media (max-width: 600px) {
  .page-head { padding-top: 48px; margin-bottom: 36px; }
  .page-title { font-size: 28px; letter-spacing: 0.22em; text-indent: 0.22em; margin-bottom: 20px; }
  .page-title.long { font-size: 22px; letter-spacing: 0.18em; text-indent: 0.18em; }
  .page-intro { font-size: 16px; }
}
/* Metadata fragment inside .page-intro (e.g. "Last updated: 23 April 2026"
   on Privacy/Terms). Quieter than the rest of the intro line so it reads
   as a footnote-style timestamp, not part of the lede. */
.page-intro-meta {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 14px;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}