/* ─────────────────────────────────────────────────────
   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 {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}

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

/* ───── 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;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(168,133,58,0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(31,24,18,0.03) 0%, transparent 50%);
  background-attachment: fixed;
}

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

/* ─────────────────────────────────────────────────────
   NAV — identical on every page
   ───────────────────────────────────────────────────── */
nav {
  background: rgba(219,207,180,0.93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  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-deep); }
.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-deep); }
.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;
  width: 38px;
  height: 38px;
  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;
  padding: 12px 4px;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
  transition: color 0.15s;
}
.nav-menu-link:hover { color: var(--gilt-deep); }
.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;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
}
.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: 14px;
  color: var(--cream-soft);
  line-height: 1.55;
}
.footer-col-title {
  font-family: 'LinuxLibertine', serif;
  font-size: 11px;
  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: 14px;
  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-style: italic;
  font-size: 14px;
  color: var(--cream-faint);
}
.footer-bottom a { color: var(--cream-faint); }
.footer-bottom a:hover { color: var(--gilt-bright); }
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { justify-content: center; text-align: center; }
}