:root {
  --blue-950:#0a1f3b; --blue-900:#102d52; --blue-800:#173c68; --blue-700:#244f7c;
  --gold-500:#c9a34e; --gold-400:#d7b867; --gold-200:#ead9aa;
  --cream:#f7f3ea; --paper:#0a1f3b; --ink:#ead9aa; --muted:#c8c1ad; --line:rgba(234,217,170,.22);
  --white:#ead9aa; --shadow:0 16px 45px rgba(16,45,82,.09);
  --radius-lg:28px; --radius-md:18px; --radius-sm:12px;
  --serif:'Cormorant Garamond', Georgia, serif; --sans:'Source Sans 3', system-ui, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--gold-200);font-family:var(--sans);line-height:1.6}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.site-shell{
  min-height:100vh; /* 100% viewport height (browser area on device) */
  display:flex; flex-direction:column
}
.container{width:min(1160px,calc(100% - 40px));margin:0 auto}

.header{position:sticky;top:0;z-index:50;background:rgba(10,31,59,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(222,215,200,.75)}
.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex; align-items:center; gap:12px; font-weight:600; letter-spacing:.02em}
.brand-logo{width:42px; height:42px; border-radius:50%; border:1.5px solid var(--gold-500); background:transparent; color:var(--gold-200); display:grid; place-items:center;}
.brand-logo svg{width:32px}
.brand-name{font-family:'Fraunces', var(--serif); font-size:24px; line-height:1}

.nav-links{display:flex;align-items:center;gap:28px}.nav-links a:not(.nav-cta){position:relative;padding:10px 0;color:var(--gold-200);font-size:15px}.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1.5px;background:var(--gold-500);transform:scaleX(0);transform-origin:left;transition:.25s}.nav-links a:not(.nav-cta):hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-cta{display:inline-flex;align-items:center;justify-content:center;padding:9px 17px;border:1.5px solid var(--gold-500);border-radius:999px;color:var(--gold-200);font-weight:600;transition:.2s}.nav-cta:hover{transform:scale(1.04);background:var(--gold-500);color:var(--blue-950)}
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--line);background:transparent;border-radius:12px;cursor:pointer;color:var(--blue-900)}

.hero{padding:74px 0 34px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;min-height: 70vh;}.eyebrow{text-transform:uppercase;letter-spacing:.19em;font-size:12px;font-weight:700;color:var(--gold-500)}h1,h2,h3{font-family:var(--serif);color:var(--gold-200);margin:0;line-height:.98}h1{font-size:clamp(46px,5.3vw,66px);letter-spacing:-.03em;max-width:690px;margin:13px 0 24px;line-height:.99}h2{font-size:clamp(40px,5vw,62px)}h3{font-size:31px}
.hero-copy{position: relative;z-index: 2;}
.hero-copy p{font-size:18px;color:var(--muted);max-width:560px;}
.hero-actions{display:flex;gap:14px;margin:30px 0 0;flex-wrap:wrap}
.hero-map {position: relative;height: 500px;overflow: hidden;}
.hero-map img {width: 100%; height: 100%; object-fit: cover; object-position: center;
  /* Fade the left side into the background */
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.4) 15%, black 40%);
    -webkit-mask-image: linear-gradient(to right,transparent 0%, rgba(0, 0, 0, 0.4) 15%, black 40%);
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:14px 21px;border:1px solid var(--blue-900);font-weight:600;transition:.22s;cursor:pointer}.btn-primary{background:var(--blue-900);color:var(--white)}.btn-primary:hover{background:var(--blue-700);transform:translateY(-2px)}.btn-secondary{background:transparent;color:var(--blue-900);border-color:var(--gold-500)}.btn-secondary:hover{background:#102d52cc;transform:translateY(-2px)}.map-card{background:#112b4d;border:1px solid rgba(234,217,170,.18);border-radius:var(--radius-lg);min-height:450px;position:relative;overflow:hidden;box-shadow:var(--shadow)}.map-card::before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 70% 20%,#27476d 0 16%,transparent 16.5%),radial-gradient(circle at 10% 70%,#173c68 0 20%,transparent 20.5%);opacity:.75}.map-water{position:absolute;right:-12%;top:-8%;width:54%;height:130%;background:#1b426b;border-radius:55% 0 0 60%;transform:rotate(9deg)}.map-lines{position:absolute;inset:10%}.map-lines span{position:absolute;height:2px;background:#54718e;border-radius:99px;transform-origin:left}.map-lines span:nth-child(1){width:78%;top:22%;left:4%;transform:rotate(18deg)}.map-lines span:nth-child(2){width:64%;top:48%;left:2%;transform:rotate(-11deg)}.map-lines span:nth-child(3){width:72%;top:70%;left:8%;transform:rotate(8deg)}.map-lines span:nth-child(4){width:45%;top:36%;left:34%;transform:rotate(63deg)}.map-label{position:absolute;left:30px;bottom:28px;background:rgba(10,31,59,.9);padding:11px 14px;border-radius:12px;box-shadow:0 10px 26px rgba(16,45,82,.11);font-weight:700;color:var(--gold-200)}.map-pin{position:absolute;right:37%;top:43%;width:27px;height:27px;border-radius:50% 50% 50% 0;background:var(--gold-500);transform:rotate(-45deg);box-shadow:0 8px 18px rgba(109,81,16,.22)}.map-pin::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--blue-950);left:10px;top:10px}.walk-strip{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 0}.info-card{background:var(--blue-900);color:var(--white);border-radius:20px;padding:24px 26px;min-height:132px}.info-card.gold{background:#b99a4b;color:var(--blue-950)}.info-label{font-size:12px;text-transform:uppercase;letter-spacing:.16em;opacity:.72}.info-value{font-family:var(--serif);font-size:28px;margin-top:8px}.section{padding:92px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:38px}.section-heading p{max-width:520px;color:var(--muted);margin:0}.intro-panel{background:#112f53;border-radius:var(--radius-lg);padding:54px;display:grid;grid-template-columns:.8fr 1.2fr;gap:50px}.intro-panel p{font-size:20px;margin:0;color:var(--blue-950)}.kicker-link{margin-top:25px;display:inline-flex;font-weight:700;color:var(--blue-900)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:#102d52;border:1px solid var(--line);border-radius:var(--radius-md);padding:27px;box-shadow:0 8px 28px rgba(16,45,82,.05)}.card p{color:var(--muted);margin-bottom:0}.mini-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(201,163,78,.16);color:var(--gold-200);margin-bottom:18px}.band{background:var(--blue-950);color:var(--white);padding:75px 0}.band h2{color:var(--white)}.band p{max-width:700px;color:#d8e1eb;font-size:18px}
.page-hero{padding:72px 0 40px;background:linear-gradient(180deg,#102d52,transparent)}.page-hero-inner{max-width:800px}
.page-hero h1{font-size:clamp(50px,7vw,80px)}
.page-hero p{font-size:19px;color:var(--muted);max-width:730px}
.story-layout{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:stretch}
.photo-placeholder{min-height:320px;border-radius:var(--radius-lg);background:linear-gradient(135deg,#5b4c2c,#274d74 60%,#102d52);position:relative;overflow:hidden}
.photo-placeholder::after{content:"PHOTO PLACEHOLDER";position:absolute;inset:auto 20px 20px;padding:8px 12px;border-radius:999px;background:rgba(255,253,248,.84);font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--blue-950)}
.timeline{display:grid;gap:15px}.timeline-item{display:grid;grid-template-columns:86px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--line)}.timeline-item:first-child{border-top:0}
.year{font-family:var(--serif);font-size:28px;color:var(--gold-500)}
.timeline-item p{margin:2px 0 0;color:var(--muted)}

.crew-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}
.person-card{background:#102d52;border:1px solid var(--line);border-radius:20px;padding:20px}
.avatar{aspect-ratio:1;border-radius:16px;background:linear-gradient(135deg,#846e39,#34587d);display:grid;place-items:center;color:var(--white);font-family:var(--serif);font-size:46px;margin-bottom:16px}
.role{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-500);font-weight:700}
.person-card p{color:var(--muted);margin:8px 0 0;font-size:14px}

.thank-grid{display:flex;flex-wrap:wrap;gap:10px}
.name-pill{border:1px solid var(--line);background:#102d52;padding:9px 15px;border-radius:999px}
.friends-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.filter-btn{border:1px solid var(--line);background:#102d52;border-radius:999px;padding:9px 14px;cursor:pointer;color:var(--gold-200)}
.filter-btn.active,.filter-btn:hover{background:#f0e3bd;border-color:#c9a34e}

.friend-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.friend-card{background:#102d52;border:1px solid var(--line);border-radius:20px;padding:22px}
.friend-icon{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:rgba(201,163,78,.14);color:var(--gold-200);font-size:30px;margin-bottom:15px}
.friend-meta{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--gold-500);font-weight:700}
.friend-card p{color:var(--muted)}.privacy-note{background:rgba(201,163,78,.10);border-left:3px solid var(--gold-500);padding:18px 20px;border-radius:0 12px 12px 0;color:var(--gold-200);margin-top:27px}

.involve-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.involve-card{border:1px solid var(--line);border-radius:24px;padding:30px;background:#102d52;display:flex;flex-direction:column;min-height:310px}
.involve-card.primary{background:var(--blue-900);color:var(--white);border-color:var(--blue-900)}
.involve-card h3{color:inherit;margin-bottom:10px}
.involve-card p{color:var(--muted)}
.involve-card.primary p{color:#d8e1eb}.involve-card .btn{margin-top:auto;align-self:flex-start}

.step-list{display:grid;gap:13px;margin:20px 0 0;padding:0;list-style:none}
.step-list li{display:flex;gap:13px;align-items:flex-start}
.step-list span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#eee3c6;color:var(--blue-900);font-weight:700;flex:0 0 auto}

.signup{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;background:#112f53;border-radius:28px;padding:35px}
.signup form{display:flex;gap:10px}.signup input{min-width:0;flex:1;padding:14px 15px;border:1px solid #cfc5af;border-radius:12px;background:#102d52}
.form-message{margin:10px 0 0;color:var(--blue-900);font-size:14px}

.footer{margin-top:auto;background:var(--blue-950);color:var(--white);padding:68px 0 35px}
.footer-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:45px}
.footer .brand{color:var(--white)}.footer .brand-mark{background:transparent;color:var(--white)}
.quote{font-family:var(--serif);font-size:22px;line-height:1.15;margin:22px 0;color:#f5e9c9;max-width:290px}
.socials{display:grid;gap:8px}.socials a{color:#d5dee7}
.footer h4{margin:0 0 15px;text-transform:uppercase;letter-spacing:.13em;font-size:11px;color:var(--gold-400)}
.footer-links{display:grid;gap:10px;color:#dbe3eb}.reach{color:#dbe3eb}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:50px;padding-top:20px;color:#aebbc8;font-size:13px;display:flex;justify-content:space-between;gap:20px}

.mobile-menu{display:none}
.fade-in{animation:fade .7s ease both}@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(max-width:900px){.nav-links{gap:16px}.nav-links a{font-size:14px}.hero-grid,.story-layout,.intro-panel,.signup{grid-template-columns:1fr}.hero{padding-top:50px}.map-card{min-height:360px}.cards,.involve-grid{grid-template-columns:1fr}.crew-grid{grid-template-columns:repeat(2,1fr)}.friend-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.container{width:min(100% - 28px,1160px)}.nav{min-height:68px}.nav-links{display:none}.menu-btn{display:grid;place-items:center}.mobile-menu{display:none;border-bottom:1px solid var(--line);background:var(--paper);padding:14px 0 20px}.mobile-menu.open{display:block}.mobile-menu a{display:block;padding:12px 0;border-bottom:1px solid #ebe5d9}.mobile-menu a:last-child{border-bottom:0}.hero{padding:46px 0 28px}.hero-actions{flex-direction:column;align-items:stretch}.walk-strip{grid-template-columns:1fr}.info-card{min-height:auto}.section{padding:70px 0}.section-heading{display:block}.section-heading p{margin-top:15px}.intro-panel{padding:30px}.crew-grid,.friend-grid,.footer-grid{grid-template-columns:1fr}.footer{padding:55px 0 28px}.footer-bottom{flex-direction:column;margin-top:35px}.signup{padding:27px}.signup form{flex-direction:column}.page-hero{padding:50px 0 30px}.photo-placeholder{min-height:260px}}
@media(max-width:430px){.brand-name{font-size:22px}.nav-cta{padding:8px 12px;font-size:14px}.header .nav > .nav-cta{display:none}.nav{gap:10px}.menu-btn{margin-left:auto}.hero h1{font-size:52px}}

/* Navy + light-gold theme overrides */
:root{
  --paper:#0a1f3b;
  --ink:#ead9aa;
  --muted:#c9c3b3;
  --white:#ead9aa;
  --line:rgba(234,217,170,.20);
  --shadow:0 16px 45px rgba(0,0,0,.18);
}
body{background:#0a1f3b;color:#ead9aa}
a{color:#ead9aa}
.header{background:rgba(10,31,59,.96);border-bottom-color:rgba(234,217,170,.18)}
.brand-mark{color:#ead9aa}
.menu-btn{color:#ead9aa;background:#0a1f3b}
.nav-cta{color:#ead9aa}
.nav-cta:hover{background:#c9a34e;color:#0a1f3b}
.btn{border-color:#c9a34e}
.btn-primary{background:#c9a34e;color:#0a1f3b;border-color:#c9a34e}
.btn-primary:hover{background:#d7b867;color:#0a1f3b}
.btn-secondary{color:#ead9aa;background:transparent}
.btn-secondary:hover{background:rgba(201,163,78,.16)}
.hero-copy p,.section-heading p,.page-hero p,.card p,.person-card p,.friend-card p,.timeline-item p,.involve-card p{color:#c9c3b3}
.info-card{background:#102d52;color:#ead9aa}
.info-card.gold{background:#c9a34e;color:#0a1f3b}
.intro-panel,.signup{background:#102d52}
.intro-panel p{color:#ead9aa}
.kicker-link{color:#ead9aa}
.card,.person-card,.friend-card,.involve-card,.name-pill,.filter-btn{background:#102d52;color:#ead9aa}
.card:hover,.person-card:hover,.friend-card:hover,.involve-card:hover{border-color:rgba(201,163,78,.55)}
.mini-icon,.friend-icon{background:rgba(201,163,78,.15);color:#ead9aa}
.band{background:#07182f;color:#ead9aa}
.band h2{color:#ead9aa}
.band p{color:#c9c3b3}
.page-hero{background:linear-gradient(180deg,#102d52,transparent)}
.filter-btn{border-color:rgba(234,217,170,.2)}
.filter-btn.active,.filter-btn:hover{background:rgba(201,163,78,.22);color:#ead9aa;border-color:#c9a34e}
.privacy-note{color:#ead9aa}
.step-list span{background:rgba(201,163,78,.18);color:#ead9aa}
.signup input{background:#0d2748;color:#ead9aa;border-color:rgba(234,217,170,.25)}
.signup input::placeholder{color:#8f8a7c}
.form-message{color:#ead9aa}
.footer{background:#07182f;color:#ead9aa}
.footer .brand,.footer .socials a,.footer-links,.reach{color:#ead9aa}
.footer h4{color:#d7b867}
.footer-bottom{color:#9f9889;border-top-color:rgba(234,217,170,.14)}
.mobile-menu{background:#0a1f3b;border-bottom-color:rgba(234,217,170,.18)}
.mobile-menu a{color:#ead9aa;border-bottom-color:rgba(234,217,170,.14)}
.photo-placeholder::after{background:rgba(10,31,59,.88);color:#ead9aa}

/* repair malformed generated hover value */
.btn-secondary:hover{background:rgba(201,163,78,.16)!important}


/* --- Day / night themes --- */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center; 
  padding:8px; width:30px; height:30px; border:1px solid var(--gold-500); border-radius:999px;
  background:transparent; color:var(--gold-200); cursor:pointer; transition:.2s
}
.theme-toggle:hover{background:rgba(201,163,78,.16); transform:translateY(-1px)}
.theme-icon{font-size:16px; line-height:1}
.nav-links{margin-left:auto}
.walk-strip{max-width:850px;margin-left:auto;margin-right:auto}
.info-card{text-align:center}
.info-value{line-height:1.05}
.footer .subscribe-form{background:#203f69;border-radius:16px;padding:12px}
.footer .subscribe-form input{background:#294d7e;border-color:rgba(234,217,170,.28)}

:root[data-theme="light"]{
  --paper:#f7f3ea;
  --ink:#1c3150;
  --muted:#5f655f;
  --white:#fffdf8;
  --line:rgba(28,49,80,.16);
  --shadow:0 16px 45px rgba(16,45,82,.09);
}
:root[data-theme="light"] body{background:var(--paper);color:#1c3150}
:root[data-theme="light"] a{color:#1c3150}
:root[data-theme="light"] .header{background:rgba(247,243,234,.94);border-bottom-color:rgba(16,45,82,.12)}
:root[data-theme="light"] .brand-logo{color:#173c68;background:transparent}
:root[data-theme="light"] .brand-name{color:#173c68}
:root[data-theme="light"] .nav-links a:not(.nav-cta){color:#173c68}
:root[data-theme="light"] .nav-cta{color:#173c68}
:root[data-theme="light"] .nav-cta:hover{color:#fffdf8}
:root[data-theme="light"] .theme-toggle{color:#173c68}
:root[data-theme="light"] .menu-btn{color:#173c68;background:#f7f3ea}
:root[data-theme="light"] .mobile-menu{background:#f7f3ea;border-bottom-color:rgba(16,45,82,.12)}
:root[data-theme="light"] .mobile-menu a{color:#173c68;border-bottom-color:rgba(16,45,82,.12)}
:root[data-theme="light"] h1,:root[data-theme="light"] h2,:root[data-theme="light"] h3{color:#173c68}
:root[data-theme="light"] .hero-copy p,:root[data-theme="light"] .section-heading p,:root[data-theme="light"] .page-hero p,:root[data-theme="light"] .card p,:root[data-theme="light"] .person-card p,:root[data-theme="light"] .friend-card p,:root[data-theme="light"] .timeline-item p,:root[data-theme="light"] .involve-card p{color:#5f655f}
:root[data-theme="light"] .btn{border-color:#c9a34e}
:root[data-theme="light"] .btn-primary{background:#173c68;color:#fffdf8;border-color:#173c68}
:root[data-theme="light"] .btn-primary:hover{background:#244f7c}
:root[data-theme="light"] .btn-secondary{color:#173c68}
:root[data-theme="light"] .map-card{background:#dbe2e8;border-color:rgba(16,45,82,.13)}
:root[data-theme="light"] .map-card::before{background:radial-gradient(circle at 70% 20%,#c9d5df 0 16%,transparent 16.5%),radial-gradient(circle at 10% 70%,#c6d6e4 0 20%,transparent 20.5%)}
:root[data-theme="light"] .map-water{background:#b9ccdb}
:root[data-theme="light"] .map-lines span{background:#8ea6ba}
:root[data-theme="light"] .map-label{background:rgba(255,253,248,.9);color:#173c68}
:root[data-theme="light"] .map-pin::after{background:#173c68}
:root[data-theme="light"] .info-card{background:#173c68;color:#fffdf8}
:root[data-theme="light"] .info-card.gold{background:#c9a34e;color:#173c68}
:root[data-theme="light"] .intro-panel,:root[data-theme="light"] .signup{background:#e9e2d2}
:root[data-theme="light"] .intro-panel p{color:#263e5d}
:root[data-theme="light"] .kicker-link{color:#173c68}
:root[data-theme="light"] .card,:root[data-theme="light"] .person-card,:root[data-theme="light"] .friend-card,:root[data-theme="light"] .involve-card,:root[data-theme="light"] .name-pill,:root[data-theme="light"] .filter-btn{background:#fffdf8;color:#173c68}
:root[data-theme="light"] .mini-icon,:root[data-theme="light"] .friend-icon{background:rgba(201,163,78,.16);color:#173c68}
:root[data-theme="light"] .band{background:#173c68;color:#fffdf8}
:root[data-theme="light"] .band h2{color:#fffdf8}
:root[data-theme="light"] .band p{color:#e0e7ee}
:root[data-theme="light"] .page-hero{background:linear-gradient(180deg,#e8e1d2,transparent)}
:root[data-theme="light"] .filter-btn.active,:root[data-theme="light"] .filter-btn:hover{background:#ead9aa;color:#173c68}
:root[data-theme="light"] .privacy-note{color:#173c68}
:root[data-theme="light"] .step-list span{background:#ead9aa;color:#173c68}
:root[data-theme="light"] .signup input{background:#fffdf8;color:#173c68;border-color:#cfc5af}
:root[data-theme="light"] .signup input::placeholder{color:#7a7d78}
:root[data-theme="light"] .form-message{color:#173c68}
:root[data-theme="light"] .footer{background:#102d52;color:#fffdf8}
:root[data-theme="light"] .footer .brand,:root[data-theme="light"] .footer .socials a,:root[data-theme="light"] .footer-links,:root[data-theme="light"] .reach{color:#fffdf8}
:root[data-theme="light"] .footer .subscribe-form{background:#294c79}
:root[data-theme="light"] .footer .subscribe-form input{background:#365f8f;color:#fffdf8;border-color:rgba(255,255,255,.22)}
:root[data-theme="light"] .footer .subscribe-form input::placeholder{color:#d7e0ea}
:root[data-theme="light"] .footer-bottom{color:#bbc9d7;border-top-color:rgba(255,255,255,.16)}
:root[data-theme="light"] .photo-placeholder::after{background:rgba(23,60,104,.9);color:#fffdf8}

@media (min-width:721px){
  .hero-copy h1 span{white-space:nowrap}
}
@media (max-width:720px){
  .nav{justify-content:flex-end}
  .theme-toggle{margin-left:auto}
}