/* Approved Navy & Gold theme, derived from the reviewed option. */
:root { --navy: #0b2341; --navy-soft: #173956; --gold: #c7a15a; --gold-soft: #e7c887; --gold-pale: #f3e2b9; --emerald: #0e6b57; --emerald-deep: #063f37; --paper: #fffefa; --cream: #faf5ea; --sand: #ede7d9; --muted: #5f6a77; --texture-navy: url('../images/brand/final/texture-navy.webp'); --texture-gold: url('../images/brand/final/texture-gold.webp'); --texture-emerald: url('../images/brand/final/texture-emerald.webp'); --accent-ink: #886222; --compass-opacity: .13; }
body { background: var(--paper); }
nav { background: rgba(6, 25, 46, 0.97); box-shadow: rgba(3, 18, 38, 0.133) 0px 4px 22px; }
.nav-logo-img { background: none; border: 0px; border-radius: 0px; box-shadow: none; }
.nav-logo-img img { width: 140px; height: 46px; }
.nav-links a { color: rgb(238, 233, 223); }
.nav-links a:hover { color: var(--gold-soft); }
.nav-cta, .btn-p, .email-btn { background: linear-gradient(#f4d79740,#d8ae5630),var(--texture-gold) center/cover; color: rgb(6, 26, 49); border-color: rgb(221, 187, 118); }
.hero-ov { background: linear-gradient(rgba(3, 18, 38, 0.125) 10%, rgba(3, 18, 38, 0.467) 52%, rgba(3, 18, 38, 0.9) 100%); }
.hero-ov::after { display: none; }
.hero-logo { filter: drop-shadow(rgba(3, 18, 38, 0.7) 0px 3px 8px); }
.hero-c::before { background: var(--gold); opacity: 0.45; }
.hero-eye { background: rgba(6, 27, 49, 0.88); color: rgb(248, 237, 218); border-color: rgba(199, 161, 90, 0.533); }
.hero-p { color: rgb(255, 254, 250); }
.hero-headline { color: rgb(255, 254, 250); }
.stat { background: rgba(6, 27, 49, 0.77); border-color: rgba(199, 161, 90, 0.49); box-shadow: none; }
.stat-l { color: rgb(237, 232, 221); }
.btn-o { background: rgba(6, 27, 49, 0.55); color: rgb(255, 254, 250); }
.scroll-hint { color: rgb(243, 226, 185); }
#strip { border-width: 1px; }
.sec-eye, .ivy-role, .about-role { color: var(--accent-ink); }
.sec-hdr::before { visibility: hidden; }
.sec-eye::before, .sec-eye::after { background: var(--gold); }
#map-sec, #tips-sec, #merch-sec { background: linear-gradient(#0b2341eb,#0b2341eb),var(--texture-navy) center/cover; }
#prog-sec, #blog-sec, #gear-sec { background: var(--paper); }
#states-sec, #ivy-sec, #about-sec { background: var(--cream); }
#map-sec::before, #tips-sec::before, #merch-sec::before, #prog-sec::before, #blog-sec::before, #gear-sec::before, #states-sec::before, #ivy-sec::before, #about-sec::before { inset: auto 0px 0px; height: 64px; opacity: 0.85; background-color: var(--gold); mask: url("../images/brand/final/waves-left.webp") left bottom / min(42%, 580px) 62px no-repeat, url("../images/brand/final/waves-right.webp") right bottom / min(42%, 580px) 62px no-repeat, linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)) left bottom / calc(50% - 64px) 1px no-repeat, linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)) right bottom / calc(50% - 64px) 1px no-repeat; pointer-events: none; }
#map-sec::after, #tips-sec::after, #merch-sec::after, #prog-sec::after, #blog-sec::after, #gear-sec::after, #states-sec::after, #ivy-sec::after, #about-sec::after { content: ""; position: absolute; inset: 0px; pointer-events: none; background: var(--gold); opacity: var(--compass-opacity); mix-blend-mode: normal; mask: url("../images/brand/final/compass-outline.webp") left -100px top 90px / 320px auto no-repeat, url("../images/brand/final/compass-outline.webp") right -130px bottom 45px / 360px auto no-repeat; }
#prog-sec::after, #gear-sec::after { display: none; }
#ivy-sec::after { background: var(--emerald); opacity: 0.09; }
#about-sec::after { mask-position: right -70px top 40px, left -160px bottom 30px; }
#map-sec .sec-eye, #tips-sec .sec-eye, #merch-sec .sec-eye { color: var(--gold-soft); }
.sec-sub.light, .tip-text, .merch-sub { color: rgb(223, 229, 230); }
.map-legend, .map-help { color: rgb(243, 226, 185); }
.prog-bar { background: var(--texture-emerald) center/cover; }
.region-browser, .state-panel { background: var(--paper); box-shadow: rgba(3, 18, 38, 0.03) 0px 10px 32px; }
.region-tabs { background: rgb(240, 241, 237); }
.sph { background: var(--navy); }
.sph-title { color: rgb(245, 230, 201); }
.sph-sub { opacity: 1; color: rgb(221, 228, 232); }
.s-chip, .stop-item, .blog-card, .p-stat, .gear-card, .ivy-stat, .paw-stop { background: var(--paper); }
.stop-item { border-color: rgba(214, 196, 155, 0.533); }
.stop-meta, .blog-exc { color: rgb(95, 106, 119); }
.t-tab.active, .m-btn.active { background: var(--gold-pale); color: var(--navy); }
.tip-card { background: rgba(10, 32, 58, 0.8); border-color: rgba(181, 145, 77, 0.533); }
.tip-icon { background: linear-gradient(#063f374d,#063f374d),var(--texture-emerald) center/cover; color: rgb(255, 246, 223); }
.tip-title { color: rgb(243, 226, 185); }
.gear-icon { background: var(--cream); color: var(--accent-ink); }
.blog-tag { background: var(--navy); color: rgb(246, 227, 183); }
.journal-note { color: rgb(89, 102, 120); letter-spacing: 0px; }
.ivy-avatar, .about-avatar { border-color: rgb(199, 161, 90); box-shadow: rgba(199, 161, 90, 0.08) 0px 0px 0px 4px; }
.about-photo-wrap { box-shadow: rgba(3, 18, 38, 0.086) 0px 14px 36px; }
.about-photo-wrap, .journal-photo { position: relative; }
.about-photo-wrap::after, .journal-photo::after { content: ""; position: absolute; inset: 16px; pointer-events: none; z-index: 2; background: linear-gradient(rgb(245, 214, 145), rgb(245, 214, 145)) left top / 30px 1px no-repeat, linear-gradient(rgb(245, 214, 145), rgb(245, 214, 145)) left top / 1px 30px no-repeat, linear-gradient(rgb(245, 214, 145), rgb(245, 214, 145)) right bottom / 30px 1px no-repeat, linear-gradient(rgb(245, 214, 145), rgb(245, 214, 145)) right bottom / 1px 30px no-repeat; }
.read-more { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.brand-point { width: 32px; height: 13px; object-fit: contain; flex: 0 0 auto; transition: transform 0.2s; }
.blog-card:hover .brand-point, .blog-card:focus-within .brand-point { transform: translateX(4px); }
.journal-signoff { display: flex; align-items: center; gap: 14px; margin: 1.6rem 0px; color: var(--navy); }
.journal-signoff img { width: 68px; height: 68px; object-fit: contain; flex: 0 0 auto; }
.signoff-name { display: block; font-family: var(--serif); font-size: 1.4rem; line-height: 1.2; }
.signoff-brand { display: block; margin-top: 4px; color: var(--accent-ink); font-size: 0.62rem; font-weight: 800; text-transform: uppercase; }
.merch-box { background: rgba(6, 27, 49, 0.68); border-style: solid; }
.email-inp::placeholder { color: rgb(218, 225, 230); }
footer { background: rgb(4, 22, 41); border-top: 1px solid rgba(199, 161, 90, 0.533); }
.foot-logo img { display: block; width: 210px; max-width: 65vw; height: auto; margin: 0px auto 1rem; }
footer p, .foot-copy { color: rgb(199, 206, 216) !important; }
.soc { color: rgb(242, 229, 201); }
.soc:hover { background: var(--gold-pale); }
.modal-h { background: var(--navy); }
.modal-b { background: var(--paper); }
:focus-visible { outline: rgb(146, 113, 43) solid 3px; outline-offset: 4px; }
[data-theme="navy"] #blog-sec { background: rgb(7, 28, 52); }
[data-theme="navy"] #blog-sec .sec-title { color: rgb(255, 250, 240); }
[data-theme="navy"] #blog-sec .sec-eye { color: rgb(229, 199, 139); }
[data-theme="navy"] .blog-card { background: rgb(16, 43, 71); border-color: rgba(199, 161, 90, 0.4); }
[data-theme="navy"] .blog-title { color: rgb(245, 232, 202); }
[data-theme="navy"] .blog-exc, [data-theme="navy"] .blog-meta, [data-theme="navy"] .journal-note { color: rgb(213, 222, 229); }
[data-theme="navy"] .read-more { color: rgb(165, 213, 199); }
[data-theme="navy"] .sph { background: linear-gradient(90deg,#0b2341ff 35%,#0b2341d4 75%,#0b2341c2),var(--texture-emerald) right center/540px auto no-repeat; }
[data-theme="navy"] #merch-sec { background: linear-gradient(90deg,#063f37d9,#061b31e8),var(--texture-emerald) center/cover; }
@media (max-width: 700px) {
  #map-sec::after, #tips-sec::after, #merch-sec::after, #blog-sec::after, #states-sec::after, #ivy-sec::after, #about-sec::after { mask-size: 240px auto, 260px auto; mask-position: left -155px top 80px, right -155px bottom 40px; opacity: 0.1; }
  #map-sec::before, #tips-sec::before, #merch-sec::before, #prog-sec::before, #blog-sec::before, #gear-sec::before, #states-sec::before, #ivy-sec::before, #about-sec::before { mask-size: 42% 33px, 42% 33px, calc(50% - 28px) 1px, calc(50% - 28px) 1px; height: 35px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
  .blog-card:hover .brand-point, .blog-card:focus-within .brand-point { transform: none; }
}