/* ==========================================================================
   FOUNDERS REPUBLIC — HERITAGE LAYER · v3
   --------------------------------------------------------------------------
   A museum-grade elevation applied across the whole house. Loaded AFTER each
   page's own inline <style>, so these refinements win on the cascade without
   rewriting any page. No build step, no framework — a single tunable layer.

   Principles: more craft, not more decoration. Finer rules, more confident
   type, deeper atmosphere, motion that feels considered. The deep republic
   navy is drawn from the strap of the watches themselves.
   ========================================================================== */

:root {
  /* New tokens layered on the existing ink / parchment / brass palette */
  --navy:        #1c2a44;   /* the republic blue — taken from the watch strap */
  --navy-deep:   #121b2e;
  --gild:        #caa86c;   /* a brighter struck-gold for highlights */
  --gild-bright: #ddc08a;
  --rule-hair:   rgba(10, 10, 10, 0.09);
  --rule-gild:   rgba(168, 132, 92, 0.30);
  --shadow-soft: 0 24px 50px -28px rgba(26, 18, 9, 0.30);
  --shadow-lift: 0 44px 84px -38px rgba(26, 18, 9, 0.44);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:   cubic-bezier(0.40, 0, 0.20, 1);
}

/* ==========================================================================
   1 · TYPOGRAPHIC CRAFT  (site-wide)
   Real kerning, ligatures and optical sizing. The single biggest, quietest
   upgrade — every line of type on every page reads finer.
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }

body {
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1;
  font-kerning: normal;
}

h1, h2, h3, h4 { font-optical-sizing: auto; }

/* Confident display headlines — a hair tighter, with discretionary ligatures */
.hero-title, .prelude-title, .endures-title, .founder-title, .section-title,
.future-chapters-title, .archive-hero h1, .archive-register h2, .mission-quote,
.pdp-hero-title, .pdp-title, .med-hero h1, .preorder-hero h1, .faq-hero h1,
.legal-hero h1, .lincoln-title, .eagle-title, .footer-cta h2, .editorial-title,
.heirloom-title {
  letter-spacing: -0.014em;
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1;
}

/* Struck-numeral feel for the figures the brand leans on */
.lincoln-edition-number, .giveback-amount, .commemorative-card-price {
  font-feature-settings: "onum" 1, "pnum" 1;
}

/* ==========================================================================
   2 · SELECTION & FOCUS  (museum-grade also means accessible)
   ========================================================================== */
::selection { background: var(--brass); color: #fff; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ==========================================================================
   3 · GILT HAIRLINES  — eyebrow & ornament rules read as engraved gilt
   The flanking eyebrow rules now fade at their ends like a struck line.
   ========================================================================== */
.section-eyebrow::before, .section-eyebrow::after,
.hero-eyebrow::before, .hero-eyebrow::after,
.future-chapters-eyebrow::before, .future-chapters-eyebrow::after,
.giveback-eyebrow::before, .giveback-eyebrow::after,
.founder-eyebrow::before, .founder-eyebrow::after,
.archive-register .eyebrow::before, .archive-register .eyebrow::after,
.prelude-ornament .line, .mission-ornament::before, .mission-ornament::after {
  background: linear-gradient(90deg, transparent, var(--brass) 28%, var(--brass) 72%, transparent) !important;
  height: 1px !important;
}

/* A finer paper grain — quieter, warmer */
body::before { opacity: 0.04 !important; }

/* ==========================================================================
   4 · DEPTH  — cards, tiles & vitrine framing
   Layered, slower, more expensive-feeling shadows and lifts.
   ========================================================================== */
.commemorative-card, .archive-pillar, .archive-benefit, .heritage-tile,
.med-card, .preorder-card, .future-chapter {
  transition: transform 0.55s var(--ease-out),
              box-shadow 0.55s var(--ease-out),
              border-color 0.55s var(--ease-out) !important;
}
.commemorative-card:hover, .archive-pillar:hover, .archive-benefit:hover,
.med-card:hover, .preorder-card:hover {
  box-shadow: var(--shadow-lift) !important;
}
.heritage-tile { box-shadow: var(--shadow-soft); }
.heritage-tile:hover { box-shadow: var(--shadow-lift); }

/* A single struck gilt hairline above the major dark moments. Seam-safe
   (no vignette banding) and it doubles as a refined divider where dark
   spreads stack. */
.editorial, .founder, .endures, .giveback, .future-chapters,
.archive-hero, .archive-band, .archive-register, .footer-cta,
.pdp-hero, .pdp-band, .pdp-closing, .chapter-nav,
.med-hero, .preorder-hero, .faq-hero, .legal-hero {
  box-shadow: inset 0 1px 0 0 var(--rule-gild);
}

/* ==========================================================================
   5 · THE LINE OF THE REPUBLIC  — scroll-progress hairline
   A thin struck rule at the very top that fills brass → gild → navy as the
   visitor moves through the page. Quiet, but it signals craft instantly.
   ========================================================================== */
.fr-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  z-index: 300;            /* above nav (100) and overlay (200) */
  background: linear-gradient(90deg, var(--brass), var(--gild) 55%, var(--navy));
  box-shadow: 0 0 10px rgba(168, 132, 92, 0.55);
  pointer-events: none;
  transition: width 0.08s linear;
}

/* ==========================================================================
   6 · NAV & FOOTER  — finer lockup
   ========================================================================== */
.nav { border-bottom-color: var(--rule-gild); }

/* Bulletproof the off-canvas menu: when closed, nothing inside it may paint
   or take hit-tests (a child was re-asserting visibility, ghosting the
   concierge block + a rule under the nav on every page). */
.nav-overlay:not(.is-open),
.nav-overlay:not(.is-open) * { visibility: hidden !important; }
.nav-overlay:not(.is-open) { pointer-events: none; }
.nav-overlay.is-open,
.nav-overlay.is-open * { visibility: visible; }
.nav-brand img { transition: filter 0.4s var(--ease-out), transform 0.5s var(--ease-out); }
.nav-brand:hover img { transform: translateY(-1px); }

/* Brass buttons get a faint struck sheen */
.nav-menu-btn { background-image: linear-gradient(180deg, rgba(255,255,255,0.10), transparent 60%); }

/* CTA buttons — smoother, more considered motion */
.hero-cta, .editorial-cta, .commemorative-cta, .prelude-cta,
.archive-cta, .pdp-cta, .footer-cta button, .newsletter button {
  transition: background 0.45s var(--ease-out), color 0.45s var(--ease-out),
              transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out) !important;
}
.hero-cta:hover { box-shadow: 0 18px 40px -18px rgba(26, 18, 9, 0.55); }

/* Remove the decorative 13-dot ring behind the homepage hero watch (per client) */
.hero::before { display: none !important; }

/* ==========================================================================
   6b · THE REPUBLIC IN TIME  — homepage history timeline
   A vertical, ledger-style timeline that places the three live chapters at
   their moment in American history and carries the line forward into the
   chapters still to come. Dark section, gilt spine.
   ========================================================================== */
.timeline {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(168, 132, 92, 0.16), transparent 60%),
    linear-gradient(180deg, #0a0a0a 0%, #110d08 100%);
  color: var(--parchment);
  padding: 8.5rem 2.5rem;
  position: relative;
  overflow: hidden;
}
.timeline::before {   /* faint engraved grain, matching the other dark spreads */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='nt'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23nt)'/></svg>");
}
.timeline-inner { max-width: 1060px; margin: 0 auto; position: relative; z-index: 2; }
.timeline-head { text-align: center; max-width: 760px; margin: 0 auto 5rem; }
.timeline-head .timeline-eyebrow {
  font-family: var(--ui); font-size: 0.7rem; letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 1.8rem;
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
}
.timeline-head .timeline-eyebrow::before, .timeline-head .timeline-eyebrow::after {
  content: ""; display: block; width: 50px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass));
}
.timeline-head .timeline-eyebrow::after { background: linear-gradient(90deg, var(--brass), transparent); }
.timeline-title {
  font-family: var(--display); font-weight: 400; font-size: clamp(2.3rem, 4.4vw, 3.6rem);
  line-height: 1.08; letter-spacing: -0.012em; color: var(--parchment); margin-bottom: 1.5rem;
}
.timeline-title em { font-style: italic; color: var(--brass); }
.timeline-intro {
  font-family: var(--display); font-style: italic; font-size: 1.25rem;
  line-height: 1.6; color: rgba(244, 237, 224, 0.74);
}

.tl-track { list-style: none; margin: 0 auto; padding: 0; position: relative; max-width: 880px; }
.tl-track::before {        /* the gilt spine */
  content: ""; position: absolute; left: 8px; top: 0.4rem; bottom: 1.6rem; width: 1px;
  background: linear-gradient(180deg, transparent, var(--brass) 5%, var(--brass) 90%, rgba(168,132,92,0.15));
  opacity: 0.55;
}
.tl-item { position: relative; padding: 0 0 3.6rem 3.6rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-node {                 /* diamond node sitting on the spine */
  position: absolute; left: 1px; top: 0.65rem; width: 15px; height: 15px;
  transform: rotate(45deg); transition: all 0.4s var(--ease-out);
}
.tl-item--live .tl-node {
  background: var(--brass);
  box-shadow: 0 0 0 4px rgba(168, 132, 92, 0.16), 0 0 16px rgba(168, 132, 92, 0.55);
}
.tl-item--future .tl-node { background: var(--ink); border: 1px solid rgba(168, 132, 92, 0.7); }
.tl-item--horizon .tl-node { background: transparent; border: 1px solid rgba(168, 132, 92, 0.4); width: 11px; height: 11px; top: 0.75rem; }

.tl-row { display: flex; gap: 2.8rem; align-items: flex-start; justify-content: space-between; }
.tl-text { flex: 1 1 auto; min-width: 0; }
.tl-year {
  font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1; letter-spacing: 0.015em; color: var(--brass); margin-bottom: 0.7rem;
  font-feature-settings: "onum" 1, "pnum" 1;
}
.tl-item--future .tl-year { color: rgba(193, 156, 112, 0.7); }
.tl-item--horizon .tl-year { font-style: italic; font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: rgba(193, 156, 112, 0.6); }
.tl-moment {
  font-family: var(--display); font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.2; color: var(--parchment); margin-bottom: 0.8rem; letter-spacing: 0.005em;
}
.tl-item--future .tl-moment { color: rgba(244, 237, 224, 0.84); }
.tl-desc {
  font-family: var(--body); font-size: 0.99rem; line-height: 1.72;
  color: rgba(244, 237, 224, 0.64); max-width: 54ch; margin-bottom: 1.2rem;
}
.tl-chapter {
  display: inline-flex; align-items: baseline; gap: 0.75rem; text-decoration: none;
  font-family: var(--ui); font-size: 0.58rem; letter-spacing: 0.34em; text-transform: uppercase;
  transition: gap 0.35s var(--ease-out);
}
.tl-ch-kicker { color: var(--brass); }
.tl-ch-name {
  font-family: var(--display); font-style: italic; font-size: 1.55em; letter-spacing: 0.01em;
  text-transform: none; color: var(--parchment); transition: color 0.35s var(--ease-out);
}
.tl-chapter svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; color: var(--brass); transition: transform 0.35s var(--ease-out); align-self: center; }
a.tl-chapter:hover { gap: 1.1rem; }
a.tl-chapter:hover .tl-ch-name { color: var(--brass-bright); }
a.tl-chapter:hover svg { transform: translateX(5px); }
.tl-chapter--future .tl-ch-kicker { color: rgba(168, 132, 92, 0.7); }
.tl-chapter--future .tl-ch-name { color: rgba(244, 237, 224, 0.6); }

.tl-watch { flex: 0 0 auto; width: 128px; display: block; }
.tl-watch img { width: 100%; height: auto; filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.5)); transition: transform 0.5s var(--ease-out); }
a.tl-watch:hover img { transform: translateY(-5px); }

/* The whole live entry is clickable (→ its chapter page); future entries are not */
.tl-item--live { cursor: pointer; }
.tl-item--live .tl-moment { transition: color 0.35s var(--ease-out); }
.tl-item--live:hover .tl-moment { color: var(--brass-bright); }
.tl-item--live:hover .tl-watch img { transform: translateY(-5px); }
.tl-item--live:hover .tl-chapter { gap: 1.1rem; }
.tl-item--live:hover .tl-chapter .tl-ch-name { color: var(--brass-bright); }
.tl-item--live:hover .tl-chapter svg { transform: translateX(5px); }
.tl-item--live:hover .tl-node {
  box-shadow: 0 0 0 5px rgba(168, 132, 92, 0.20), 0 0 22px rgba(168, 132, 92, 0.7);
}

.tl-foot {
  text-align: center; margin: 4.5rem auto 0; max-width: 640px;
  font-family: var(--display); font-style: italic; font-size: 1.15rem; color: rgba(244, 237, 224, 0.6);
}
.tl-foot a { color: var(--brass); text-decoration: none; border-bottom: 1px solid rgba(168, 132, 92, 0.5); padding-bottom: 2px; transition: color 0.3s ease; }
.tl-foot a:hover { color: var(--brass-bright); }

@media (max-width: 760px) {
  .timeline { padding: 5rem 1.4rem; }
  .timeline-head { margin-bottom: 3.2rem; }
  .tl-item { padding-left: 2.5rem; padding-bottom: 2.8rem; }
  .tl-row { flex-direction: column; gap: 1.5rem; }
  .tl-watch { width: 92px; }
  .tl-desc { max-width: none; }
}

/* ==========================================================================
   7 · MOTION  — cinematic reveals (driven by heritage.js)
   The 13 interior pages have no motion today. We add a considered reveal to
   the whole house. Existing .reveal (homepage) is upgraded in feel; .fr-reveal
   is applied by JS everywhere else. Everything degrades to fully-visible when
   the visitor prefers reduced motion.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Upgrade the homepage's existing reveal to a softer, slower settle */
  .reveal {
    transition: opacity 1.15s var(--ease-out), transform 1.15s var(--ease-out) !important;
  }

  .fr-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1.05s var(--ease-out), transform 1.05s var(--ease-out);
    transition-delay: var(--fr-delay, 0ms);
    will-change: opacity, transform;
  }
  .fr-reveal.fr-in { opacity: 1; transform: none; }

  /* Slow ken-burns drift available to hero / editorial imagery via JS */
  [data-parallax] { will-change: transform; }
}

/* ==========================================================================
   8 · ATMOSPHERE  — a single warm vignette across the whole house
   Reads as aged paper on the parchment sections and as vitrine depth on the
   dark ones. Kept to the outer frame so it never dims the reading column.
   Injected by heritage.js as a fixed, non-interactive layer.
   ========================================================================== */
.fr-atmos {
  position: fixed;
  inset: 0;
  z-index: 999;            /* beneath the grain (1000), above page content */
  pointer-events: none;
  mix-blend-mode: multiply;
  background:
    radial-gradient(135% 115% at 50% 30%, transparent 72%, rgba(28, 20, 10, 0.13) 100%),
    radial-gradient(100% 100% at 50% 100%, rgba(28, 20, 10, 0.06), transparent 55%);
}

/* ==========================================================================
   9 · RESPONSIVE TRIM
   ========================================================================== */
@media (max-width: 1100px) {
  /* Pre-existing bug: hero-content (order 1) and hero-img (order 2) carry
     explicit orders, but the marquee stayed at order 0 — so on mobile it
     leapt above the headline. Send it to the foot of the hero where it
     belongs: headline → watch → marquee. */
  .hero-marquee { order: 3; }
}