
:root {
  --ink: #151515;
  --navy: #101a25;
  --navy-2: #172638;
  --paper: #f2eadb;
  --paper-light: #fbf7ef;
  --red: #8e1f27;
  --red-bright: #b52d35;
  --gold: #c4a56a;
  --muted: #6e6a62;
  --white: #fff;
  --shadow: 0 18px 50px rgba(0,0,0,.2);
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper-light); font-family: Georgia, 'Times New Roman', serif; line-height: 1.65; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.skip-link { position:absolute; left:-9999px; top:0; background:#fff; color:#000; padding:.75rem 1rem; z-index:1000; }
.skip-link:focus { left:1rem; top:1rem; }
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(13,22,32,.97); color: white; border-bottom: 1px solid rgba(196,165,106,.42); backdrop-filter: blur(12px); }
.header-inner { max-width: var(--max); margin: auto; min-height: 84px; display: flex; align-items: center; gap: 1.2rem; padding: .65rem 1.2rem; }
.brand { display:flex; align-items:center; flex:0 0 auto; text-decoration:none; min-width:205px; }
.brand-logo { display:block; width:auto; height:60px; max-width:205px; object-fit:contain; }
.site-nav { margin-left:auto; }
.site-nav ul { list-style:none; display:flex; align-items:center; gap:.2rem; padding:0; margin:0; }
.site-nav a { text-decoration:none; font-family: Arial, Helvetica, sans-serif; text-transform:uppercase; letter-spacing:.085em; font-size:.68rem; padding:.75rem .58rem; border-bottom:2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current='page'] { color:#f6dfb1; border-color:var(--gold); }
.menu-toggle { display:none; margin-left:auto; border:1px solid rgba(255,255,255,.38); background:none; color:#fff; padding:.6rem .75rem; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }
.home-poster { background:#080b0f; line-height:0; }
.home-poster img { width:100%; height:auto; }
.home-actions { background:var(--navy); border-top:1px solid rgba(196,165,106,.42); border-bottom:1px solid rgba(196,165,106,.28); padding:1.05rem 1.2rem; }
.home-actions .button-row { max-width:var(--max); margin:0 auto; justify-content:center; }
.home-credit-lines { max-width:var(--max); margin:1.1rem auto 0; text-align:center; color:#f7f1e6; font-family:Arial, Helvetica, sans-serif; letter-spacing:.035em; }
.home-credit-lines p { margin:.2rem 0; font-size:clamp(.95rem,1.6vw,1.15rem); }
.home-credit-lines strong { color:#efd49e; font-weight:700; }
.home-credit-lines em { font-family:Georgia, 'Times New Roman', serif; }
.hero { min-height: 72vh; display:grid; align-items:end; position:relative; color:#fff; background-position:center; background-size:cover; isolation:isolate; }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,9,14,.08), rgba(4,9,14,.22) 35%, rgba(4,9,14,.92)); z-index:-1; }
.hero-production { background-image:url('../images/production/production-hero.webp'); }
.hero-filmmakers { background-image:url('../images/team/filmmakers-hero.webp'); }
.hero-historians { background-image:url('../images/historians/historians-hero.webp'); }
.hero-story { background-image:url('../images/story/battle-of-ridgefield.webp'); }
.hero-media { background-image:url('../images/home/battle-scene.webp'); }
.hero-watch { background-image:url('../images/home/boot-monument.webp'); }
.hero-education { background-image:url('../images/story/battle-of-quebec.webp'); }
.hero-content { width:min(var(--max), calc(100% - 2.4rem)); margin:0 auto; padding: 5rem 0 4.5rem; }
.eyebrow { font-family: Arial, Helvetica, sans-serif; text-transform:uppercase; letter-spacing:.2em; font-size:.75rem; color:#efd49e; margin:0 0 .7rem; }
h1,h2,h3 { line-height:1.08; font-weight:500; }
h1 { font-size:clamp(2.7rem,7vw,6.4rem); margin:0; max-width:950px; text-shadow:0 3px 24px rgba(0,0,0,.45); }
.hero-deck { max-width:720px; font-size:clamp(1.05rem,2vw,1.42rem); margin:1.25rem 0 0; color:#f8f3e9; }
.button-row { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.8rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.75rem 1.15rem; font-family:Arial, Helvetica, sans-serif; font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; text-decoration:none; border:1px solid var(--gold); background:var(--red); color:#fff; transition:.2s ease; }
.btn:hover { transform:translateY(-2px); background:var(--red-bright); }
.btn.secondary { background:rgba(10,17,25,.55); }
.section { padding:clamp(4rem,8vw,7rem) 1.2rem; }
.section-dark { background:var(--navy); color:#fff; }
.section-paper { background:var(--paper); }
.section-white { background:var(--paper-light); }
.container { max-width:var(--max); margin:auto; }
.narrow { max-width:820px; margin:auto; }
.section-heading { font-size:clamp(2rem,4.5vw,4rem); margin:0 0 1.25rem; }
.lede { font-size:clamp(1.15rem,2.2vw,1.55rem); line-height:1.55; }
.kicker { font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:var(--red); font-weight:700; }
.section-dark .kicker { color:#efd49e; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
.feature-image { border:1px solid rgba(196,165,106,.6); box-shadow:var(--shadow); }
.quote { border-left:3px solid var(--gold); padding:.25rem 0 .25rem 1.4rem; margin:2rem 0; font-size:clamp(1.25rem,2.5vw,1.8rem); font-style:italic; }
.quote cite { display:block; margin-top:.8rem; font-size:.78rem; font-style:normal; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; letter-spacing:.12em; }
.video-wrap { position:relative; aspect-ratio:16/9; background:#000; box-shadow:var(--shadow); border:1px solid rgba(196,165,106,.5); }
.video-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.3rem; }
.card { background:#fff; border:1px solid #d8ccba; padding:1.55rem; box-shadow:0 9px 25px rgba(24,18,10,.08); }
.section-dark .card { background:var(--navy-2); border-color:rgba(196,165,106,.32); }
.card h3 { margin:.2rem 0 .75rem; font-size:1.45rem; }
.rating { font-family:Arial, Helvetica, sans-serif; font-weight:700; letter-spacing:.08em; color:var(--red); }
.section-dark .rating { color:#efd49e; }
.gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
.gallery button { padding:0; border:0; background:none; cursor:zoom-in; overflow:hidden; position:relative; }
.gallery img { width:100%; height:280px; object-fit:cover; transition:transform .35s ease, filter .35s ease; }
.gallery button:hover img { transform:scale(1.04); filter:brightness(.78); }
.gallery figcaption { position:absolute; left:.75rem; bottom:.65rem; right:.75rem; color:#fff; text-align:left; font-family:Arial,Helvetica,sans-serif; font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; text-shadow:0 2px 7px #000; }
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.93); z-index:1000; display:none; align-items:center; justify-content:center; padding:2rem; }
.lightbox.open { display:flex; }
.lightbox img { max-width:min(1200px,94vw); max-height:82vh; box-shadow:0 0 0 1px rgba(255,255,255,.25); }
.lightbox-close { position:absolute; top:1rem; right:1rem; color:#fff; background:none; border:1px solid rgba(255,255,255,.5); width:44px; height:44px; font-size:1.4rem; cursor:pointer; }
.lightbox-caption { position:absolute; bottom:1rem; color:#fff; font-family:Arial,Helvetica,sans-serif; }
.people { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.person { background:#fff; border-top:5px solid var(--red); padding:1.6rem; }
.person h2 { margin:0; font-size:1.8rem; }
.person .role { color:var(--red); font-family:Arial,Helvetica,sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; font-weight:700; }
.person p { margin:.9rem 0 0; }
.people.compact { grid-template-columns:repeat(3,minmax(0,1fr)); }
.people.compact .person h2 { font-size:1.45rem; }
.timeline { border-left:2px solid var(--gold); margin:2rem 0 0 1rem; padding-left:2rem; }
.timeline article { position:relative; padding:0 0 2rem; }
.timeline article::before { content:''; width:12px; height:12px; border-radius:50%; background:var(--red); position:absolute; left:-2.45rem; top:.35rem; border:2px solid var(--paper-light); }
.timeline h3 { margin:0; }
.link-list { list-style:none; margin:0; padding:0; }
.link-list li { border-bottom:1px solid #d9cfbf; }
.link-list a { display:flex; justify-content:space-between; gap:1rem; padding:1rem .25rem; text-decoration:none; }
.link-list a:hover { color:var(--red); }
.link-list .link-unavailable { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem .25rem; color:#6f6a62; }
.link-list .link-unavailable span:last-child { font-family:Arial,Helvetica,sans-serif; font-size:.76rem; font-style:italic; text-align:right; }

.platform-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-top:2rem; }
.platform { background:#fff; border:1px solid #d7cbb8; padding:1.4rem 1rem; text-align:center; font-family:Arial,Helvetica,sans-serif; font-weight:700; text-decoration:none; min-height:92px; display:grid; place-items:center; }
.platform:hover { border-color:var(--red); color:var(--red); }
.resource { display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:center; padding:1.5rem; background:#fff; border:1px solid #d7cbb8; margin-top:1rem; }
.notice { padding:1rem 1.2rem; border:1px solid #d4be91; background:#fff7e6; }
.site-footer { background:#0b121a; color:#ddd; padding:3rem 1.2rem; border-top:1px solid rgba(196,165,106,.35); }
.footer-inner { max-width:var(--max); margin:auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem; }
.footer-title { color:#fff; text-transform:uppercase; letter-spacing:.08em; }
.footer-links { list-style:none; margin:0; padding:0; }
.footer-links a { color:#ddd; text-decoration:none; }
.footer-links a:hover { color:#efd49e; }
.copyright { max-width:var(--max); margin:2rem auto 0; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12); font-family:Arial,Helvetica,sans-serif; font-size:.76rem; }
.back-top { display:inline-block; margin-top:1rem; font-family:Arial,Helvetica,sans-serif; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; }
@media (max-width: 1020px) {
  .menu-toggle { display:block; }
  .site-nav { display:none; position:absolute; top:100%; left:0; right:0; background:#0d1620; padding:.7rem 1rem 1.1rem; border-bottom:1px solid var(--gold); }
  .site-nav.open { display:block; }
  .site-nav ul { display:grid; }
  .site-nav a { display:block; padding:.72rem .5rem; }
  .cards, .people.compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .platform-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .header-inner { min-height:70px; }
  .brand { min-width:0; }
  .brand-logo { width:auto; height:48px; max-width:155px; }
  .hero { min-height:64vh; }
  .hero-content { padding:4rem 0 3rem; }
  .two-col, .cards, .people, .people.compact, .gallery, .footer-inner { grid-template-columns:1fr; }
  .gallery img { height:260px; }
  .resource { grid-template-columns:1fr; }
  .platform-grid { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; transition:none !important; }
}

.video-fallback { margin:1rem 0 0; text-align:center; color:rgba(255,255,255,.78); font-size:.95rem; }
.video-fallback a { color:var(--gold-light, #d9bf84); text-decoration:underline; text-underline-offset:3px; }
.video-fallback a:hover, .video-fallback a:focus { color:#fff; }

/* Social links */
.social-links {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.72rem;
  margin-top:1rem;
}
.social-icon-link {
  width:44px;
  height:44px;
  min-width:44px;
  max-width:44px;
  min-height:44px;
  max-height:44px;
  flex:0 0 44px;
  display:grid;
  place-items:center;
  overflow:hidden;
  line-height:0;
  border-radius:50%;
  color:#f7f1e6;
  text-decoration:none;
  border:1px solid rgba(196,165,106,.72);
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
  transition:transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
}
.social-icon-link > svg { width:21px !important; height:21px !important; min-width:21px; max-width:21px; min-height:21px; max-height:21px; display:block; flex:0 0 21px; overflow:hidden; }
.social-icon-link:hover,
.social-icon-link:focus-visible {
  color:var(--navy);
  border-color:#efd49e;
  background:#efd49e;
  box-shadow:0 8px 20px rgba(0,0,0,.22);
  transform:translateY(-2px);
  outline:none;
}
.social-links-large {
  justify-content:center;
  gap:1rem;
  margin-top:2rem;
}
.social-links-large .social-icon-link {
  width:58px;
  height:58px;
  min-width:58px;
  max-width:58px;
  min-height:58px;
  max-height:58px;
  flex-basis:58px;
  background:rgba(255,255,255,.055);
}
.social-links-large .social-icon-link > svg { width:26px !important; height:26px !important; min-width:26px; max-width:26px; min-height:26px; max-height:26px; flex-basis:26px; }
.footer-social .social-links { max-width:280px; }
@media (max-width:520px) {
  .social-links-large { gap:.75rem; }
  .social-links-large .social-icon-link { width:52px; height:52px; min-width:52px; max-width:52px; min-height:52px; max-height:52px; flex-basis:52px; }
}
.follow-section { background:linear-gradient(135deg, #111c28, #0b121a); color:#fff; text-align:center; border-top:1px solid rgba(196,165,106,.35); }
.follow-section .kicker { color:#efd49e; }
.follow-panel .lede { color:#e9e2d7; margin:0 auto; }
