@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500;1,9..144,600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --navy-950:#08151f;
  --navy-900:#0f2942;
  --navy-800:#173a59;
  --navy-700:#204a6e;
  --ink:#0f2942;
  --ink-soft:#55697c;
  --paper:#ffffff;
  --panel:#f3f1ec;
  --brass:#a97c3f;
  --brass-light:#e6cd9a;
  --line:rgba(15,41,66,0.12);
  --max:1180px;
}

/* Dark theme: applied when the visitor's device prefers dark AND they haven't
   manually overridden it, OR whenever data-theme="dark" is set explicitly. */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --ink:#f2ede0;
    --ink-soft:#9fb0c0;
    --paper:#0b1720;
    --panel:#16293a;
    --line:rgba(244,239,227,0.14);
  }
}
html[data-theme="dark"]{
  --ink:#f2ede0;
  --ink-soft:#9fb0c0;
  --paper:#0b1720;
  --panel:#16293a;
  --line:rgba(244,239,227,0.14);
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color 0.3s ease, color 0.3s ease;
}

img{max-width:100%; display:block;}

a{color:inherit; text-decoration:none;}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--brass);
}

h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--ink);
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 32px;
}

/* ---------- Scroll progress bar ---------- */
.progress-bar{
  position:fixed;
  top:0; left:0;
  height:3px;
  width:100%;
  background:var(--brass);
  transform:scaleX(0);
  transform-origin:left;
  z-index:200;
  will-change:transform;
}

/* ---------- Nav ---------- */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  transition:box-shadow 0.3s ease, background-color 0.3s ease;
}
.nav.scrolled{
  box-shadow:0 8px 28px rgba(15,41,66,0.08);
}
.brand{transition:opacity 0.2s ease;}
.brand:hover{opacity:0.72;}
.nav .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:84px;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:38px; width:auto;}
.brand span{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:500;
  font-size:1.25rem;
  color:var(--ink);
}
.nav-links{display:flex;}
.nav-links a{margin-right:40px;}
.nav-links a:last-child{margin-right:0;}
.nav-links a{
  font-size:0.85rem;
  letter-spacing:0.04em;
  color:var(--ink);
  transition:color 0.2s ease;
  position:relative;
}
.nav-links a:hover, .nav-links a:focus-visible{color:var(--brass);}
.nav-links a.active{color:var(--brass);}
.nav-links a::after{
  content:'';
  position:absolute;
  left:0; bottom:-6px;
  width:0; height:1px;
  background:var(--brass);
  transition:width 0.25s ease;
}
.nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a.active::after{width:100%;}

.nav-controls{
  display:flex;
  align-items:center;
  gap:18px;
  margin-left:40px;
}
.icon-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.icon-btn:hover, .icon-btn:focus-visible{
  border-color:var(--brass);
  color:var(--brass);
  transform:translateY(-1px);
}
.icon-btn svg{width:17px; height:17px;}
.icon-btn .icon-moon{display:none;}
html[data-theme="dark"] .icon-btn .icon-sun{display:none;}
html[data-theme="dark"] .icon-btn .icon-moon{display:block;}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .icon-btn .icon-sun{display:none;}
  html:not([data-theme="light"]) .icon-btn .icon-moon{display:block;}
}

.logo-dark{display:none;}
html[data-theme="dark"] .logo-light{display:none;}
html[data-theme="dark"] .logo-dark{display:block;}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .logo-light{display:none;}
  html:not([data-theme="light"]) .logo-dark{display:block;}
}

.lang-switch{
  display:flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px;
  gap:2px;
}
.lang-btn{
  border:none;
  background:transparent;
  color:var(--ink-soft);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.06em;
  padding:6px 12px;
  border-radius:999px;
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease;
}
.lang-btn.active{
  background:var(--brass);
  color:#ffffff;
}
.lang-btn:hover:not(.active){color:var(--ink);}

.nav-toggle{
  display:none;
  border:none;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  padding:6px;
}
.nav-toggle svg{width:24px; height:24px;}

/* ---------- Hero (stays dark so the photos + text keep contrast) ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--navy-950);
}
.hero-slideshow{
  position:absolute;
  inset:-5% 0 0 0;
  z-index:0;
  overflow:hidden;
  will-change:transform;
}
.hero-slideshow img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  animation:heroFade 30s infinite;
}
.hero-slideshow img:nth-child(1){animation-delay:0s;}
.hero-slideshow img:nth-child(2){animation-delay:5s;}
.hero-slideshow img:nth-child(3){animation-delay:10s;}
.hero-slideshow img:nth-child(4){animation-delay:15s;}
.hero-slideshow img:nth-child(5){animation-delay:20s;}
.hero-slideshow img:nth-child(6){animation-delay:25s;}
@keyframes heroFade{
  0%{opacity:0;}
  4%{opacity:1;}
  14%{opacity:1;}
  19%{opacity:0;}
  100%{opacity:0;}
}
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(8,21,31,0.88) 0%, rgba(8,21,31,0.65) 48%, rgba(8,21,31,0.4) 100%),
    linear-gradient(180deg, rgba(8,21,31,0.35) 0%, rgba(8,21,31,0.2) 40%, rgba(8,21,31,0.75) 100%);
}
.hero-content{
  position:relative;
  z-index:2;
  max-width:640px;
  padding-top:84px;
  will-change:transform, opacity;
}
.hero h1{
  font-size:clamp(2.3rem, 4.8vw, 3.8rem);
  font-style:italic;
  line-height:1.12;
  margin-bottom:26px;
  color:var(--brass-light);
}
.hero h1{ color:#f4efe3; }
.hero h1 em{
  color:var(--brass-light);
  font-style:italic;
}
.hero p{
  color:#c7d1da;
  font-size:1.05rem;
  max-width:480px;
  margin-bottom:38px;
}
@media (prefers-reduced-motion:reduce){
  .hero-slideshow img{animation:none; opacity:1;}
  .hero-slideshow img:not(:first-child){display:none;}
}

/* Shared button + on-dark modifier for use over the hero photos */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:16px 28px;
  border:1px solid var(--brass);
  color:var(--brass);
  transition:background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover, .btn:focus-visible{
  background:var(--brass);
  color:#ffffff;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(169,124,63,0.25);
}
.btn-on-dark{
  border-color:var(--brass-light);
  color:var(--brass-light);
}
.btn-on-dark:hover, .btn-on-dark:focus-visible{
  background:var(--brass-light);
  color:var(--navy-950);
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
}

.scroll-cue{
  position:absolute;
  bottom:36px;
  left:32px;
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.7rem;
  letter-spacing:0.14em;
  color:#c7d1da;
  z-index:2;
}
.scroll-cue .stem{
  width:1px; height:34px;
  background:linear-gradient(var(--brass-light), transparent);
}

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity 0.85s cubic-bezier(.16,.84,.44,1), transform 0.85s cubic-bezier(.16,.84,.44,1);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.logbook.reveal{transition-delay:0.12s;}
.contact-card.reveal{transition-delay:0.12s;}

/* ---------- Section shared ---------- */
section{
  padding:120px 0;
  position:relative;
  border-top:1px solid var(--line);
}
section:not(:first-of-type)::before,
footer::before{
  content:'';
  position:absolute;
  top:-4px; left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:7px; height:7px;
  background:var(--brass);
  z-index:2;
}
footer{position:relative;}

/* Whole-section rise + fade as it enters the viewport */
.section-enter{
  opacity:0;
  transform:translateY(56px);
  transition:opacity 1s cubic-bezier(.16,.84,.44,1), transform 1s cubic-bezier(.16,.84,.44,1);
}
.section-enter.is-visible{
  opacity:1;
  transform:translateY(0);
}
.section-head{
  margin-bottom:64px;
  max-width:620px;
}
.section-head .eyebrow{margin-bottom:16px; display:block;}
.section-head h2{
  font-size:clamp(2rem, 3.4vw, 2.8rem);
  font-style:italic;
}

/* ---------- About ---------- */
.about-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:80px;
  align-items:start;
}
.about-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.about-copy p{
  color:var(--ink-soft);
  margin-bottom:20px;
  max-width:52ch;
}
.about-copy p:first-of-type{
  color:var(--ink);
  font-size:1.1rem;
}

.logbook{
  border:1px solid var(--line);
  background:var(--panel);
  padding:36px 32px;
  position:relative;
}
.logbook::before, .logbook::after{
  content:'';
  position:absolute;
  width:16px; height:16px;
  border:1px solid var(--brass);
}
.logbook::before{top:14px; left:14px; border-right:none; border-bottom:none;}
.logbook::after{bottom:14px; right:14px; border-left:none; border-top:none;}
.logbook .eyebrow{margin-bottom:24px; display:block;}
.log-entry{
  display:flex;
  justify-content:space-between;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.82rem;
}
.log-entry:last-child{border-bottom:none;}
.log-entry span:first-child{color:var(--ink-soft);}
.log-entry span:last-child{color:var(--brass); font-weight:500;}

/* ---------- Tours ---------- */
.tour-feature{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  border:1px solid var(--line);
  background:var(--paper);
  overflow:hidden;
}
.tour-feature-media{
  position:relative;
  min-height:420px;
  overflow:hidden;
}
.tour-feature-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.7s cubic-bezier(.16,.84,.44,1);
}
.tour-feature:hover .tour-feature-media img{
  transform:scale(1.05);
}
.tour-feature-body{
  padding:48px 44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.tour-feature-body .eyebrow{display:block; margin-bottom:16px;}
.tour-feature-body h3{
  font-size:1.9rem;
  font-style:italic;
  margin-bottom:16px;
}
.tour-feature-body p{
  color:var(--ink-soft);
  font-size:0.98rem;
  margin-bottom:26px;
  max-width:46ch;
}
.tour-link{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.74rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--brass);
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:fit-content;
}
.tour-link .arrow{transition:transform 0.25s ease;}
.tour-feature:hover .arrow{transform:translateX(6px);}

/* ---------- Contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:80px;
  align-items:center;
}
.contact-copy .eyebrow{margin-bottom:16px; display:block;}
.contact-copy h2{
  font-size:clamp(2rem, 3.4vw, 2.6rem);
  font-style:italic;
  margin-bottom:22px;
}
.contact-copy p{
  color:var(--ink-soft);
  max-width:42ch;
}

.contact-card{
  position:relative;
  background:linear-gradient(180deg, var(--navy-900), var(--navy-950));
  border-radius:18px;
  padding:40px 36px;
  overflow:hidden;
}
.contact-dots{
  position:absolute;
  top:24px; right:24px;
  width:88px; height:64px;
  background-image:radial-gradient(rgba(230,205,154,0.55) 1.3px, transparent 1.3px);
  background-size:11px 11px;
  opacity:0.8;
}
.contact-card h3{
  color:#f4efe3;
  font-size:1.5rem;
  font-style:italic;
  margin-bottom:28px;
  position:relative;
  z-index:1;
}
.contact-row{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 12px;
  margin:0 -12px;
  border-radius:10px;
  transition:background 0.25s ease;
  position:relative;
  z-index:1;
}
.contact-row:hover, .contact-row:focus-visible{
  background:rgba(244,239,227,0.06);
}
.contact-icon{
  flex:none;
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid rgba(244,239,227,0.3);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brass-light);
}
.contact-icon svg{width:19px; height:19px;}
.contact-text{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.contact-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#8fa3b8;
}
.contact-value{
  color:#f4efe3;
  font-size:1rem;
}

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:64px 0 40px;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:32px;
  margin-bottom:48px;
}
.footer-brand{display:flex; align-items:center; gap:12px;}
.footer-brand img{height:30px;}
.footer-brand span{font-family:'Fraunces', serif; font-style:italic; font-size:1.1rem;}
.footer-tag{color:var(--ink-soft); font-size:0.9rem; max-width:280px;}
.footer-nav{display:flex; gap:32px;}
.footer-nav a{color:var(--ink-soft); font-size:0.85rem;}
.footer-nav a:hover{color:var(--brass);}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  color:var(--ink-soft);
  letter-spacing:0.04em;
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .nav-links{display:none;}
  .nav-controls{margin-left:auto;}
  .about-grid{grid-template-columns:1fr; gap:48px;}
  .contact-grid{grid-template-columns:1fr; gap:40px;}
  .tour-feature{grid-template-columns:1fr;}
  .tour-feature-media{min-height:280px;}
  .tour-feature-body{padding:36px 28px;}
  section{padding:80px 0;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal, .section-enter{opacity:1; transform:none; transition:none;}
  .hero-slideshow, .hero-content{transform:none !important;}
}