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

:root{
  --navy:      #0d2733;
  --navy-deep: #081a22;
  --teak:      #9a6a3f;
  --teak-dark: #6f4b2b;
  --sand:      #f3ede0;
  --sand-dim:  #e7dfcc;
  --sea:       #4a9f96;
  --ink:       #16211f;
  --white:     #ffffff;
  --max: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--sand);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Fraunces',serif;
  margin:0;
  font-weight:500;
  letter-spacing:-0.01em;
}
p{line-height:1.65; margin:0 0 1em;}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px;
  color:var(--white);
  mix-blend-mode:normal;
  transition:background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.nav.scrolled{
  background:var(--navy-deep);
  padding:12px 32px;
  box-shadow:0 2px 18px rgba(0,0,0,.25);
}
.nav__mark{
  font-family:'Fraunces',serif;
  font-size:1.05rem;
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--white);
  display:flex; flex-direction:column; line-height:1.1;
}
.nav__mark small{
  font-family:'Inter',sans-serif;
  font-size:.6rem;
  letter-spacing:.16em;
  color:var(--sea);
  font-weight:600;
  margin-top:2px;
}
.nav__links{display:flex; gap:34px; list-style:none; margin:0; padding:0;}
.nav__links a{
  text-decoration:none;
  font-size:.92rem;
  color:var(--sand);
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.nav__links a:hover{border-color:var(--sea); color:var(--white);}
.nav__toggle{display:none;}
.nav--solid{background:var(--navy-deep); padding:12px 32px;}

/* ---------- Photo labels ---------- */
.photo{position:relative;}
.photo-label{
  position:absolute;
  left:14px; bottom:14px;
  background:var(--white);
  color:#141a18;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.02em;
  padding:6px 13px;
  border-radius:999px;
  box-shadow:0 3px 10px rgba(0,0,0,.22);
  z-index:2;
  font-family:'Inter',sans-serif;
}
.hero__label{
  position:absolute;
  left:32px; top:96px;
  background:var(--white);
  color:#141a18;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.02em;
  padding:6px 13px;
  border-radius:999px;
  box-shadow:0 3px 10px rgba(0,0,0,.22);
  z-index:3;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  height:100svh;
  min-height:560px;
  overflow:hidden;
  background:var(--navy-deep);
}
.hero__slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
  transition:opacity 1.6s ease;
}
.hero__slide.active{opacity:1;}
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,26,34,.55) 0%, rgba(8,26,34,.05) 30%, rgba(8,26,34,.15) 60%, rgba(8,26,34,.75) 100%);
}
.hero__content{
  position:relative; z-index:2;
  height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 32px 56px;
  color:var(--white);
}
.hero__eyebrow{
  font-size:.8rem;
  letter-spacing:.08em;
  color:var(--sea);
  margin-bottom:14px;
  font-weight:600;
}
.hero h1{
  font-size:clamp(2.6rem, 7vw, 5rem);
  line-height:.98;
  max-width:14ch;
}
.hero__sub{
  margin-top:18px;
  font-size:1.05rem;
  max-width:46ch;
  color:var(--sand);
}
.hero__dots{
  position:absolute; bottom:24px; right:32px; z-index:3;
  display:flex; gap:8px;
}
.hero__dots button{
  width:8px; height:8px; border-radius:50%;
  border:1px solid rgba(255,255,255,.6);
  background:transparent;
  padding:0; cursor:pointer;
}
.hero__dots button.active{background:var(--white);}

/* ---------- Section shell ---------- */
section{padding:108px 0;}
.section__head{
  max-width:640px;
  margin-bottom:56px;
}
.section__kicker{
  font-size:.78rem;
  letter-spacing:.1em;
  color:var(--sea);
  font-weight:600;
  margin-bottom:10px;
}
.section__head h2{
  font-size:clamp(2rem, 4vw, 2.9rem);
  color:var(--navy);
}
.rule{
  border:none; border-top:1px solid var(--sand-dim);
  margin:0;
}

/* ---------- About ---------- */
.about{background:var(--sand);}
.about__grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:64px;
  align-items:center;
}
.about__text p{font-size:1.08rem; color:#2c3936;}
.about__photo{
  position:relative;
  border-radius:2px;
  overflow:hidden;
  aspect-ratio:4/5;
}
.about__photo img{width:100%; height:100%; object-fit:cover;}
.about__caption{
  margin-top:14px;
  font-size:.85rem;
  color:#6b7570;
  font-style:italic;
}
.about__facts{
  display:flex; gap:36px; margin-top:40px;
  padding-top:28px; border-top:1px solid var(--sand-dim);
  flex-wrap:wrap;
}
.about__fact dt{
  font-family:'Fraunces',serif; font-size:1.9rem; color:var(--teak-dark);
}
.about__fact dd{
  margin:4px 0 0; font-size:.82rem; color:#5c6863; letter-spacing:.02em;
}

/* ---------- Gallery strip ---------- */
.strip{background:var(--navy-deep); padding:0;}
.strip__row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.strip__row .photo{height:280px;}
.strip__row img{
  width:100%; height:280px; object-fit:cover;
  filter:saturate(1.02);
}

/* ---------- Simple page header (non-hero pages) ---------- */
.page-header{
  background:
    linear-gradient(180deg, rgba(243,237,224,.91), rgba(243,237,224,.97)),
    url('images/solar-array-dockside.jpg');
  background-size:cover;
  background-position:center 30%;
  color:var(--navy);
  padding:168px 0 64px;
}
.page-header .section__kicker{color:var(--sea);}
.page-header h1{
  font-size:clamp(2.4rem, 5vw, 3.4rem);
  font-family:'Fraunces',serif;
  font-weight:500;
  color:var(--navy);
}
.page-header p{
  margin-top:16px;
  max-width:56ch;
  color:#3f4a46;
  font-size:1.02rem;
}

/* ---------- Specs (table page) ---------- */
.specs{background:var(--white); color:var(--ink); min-height:100vh;}
.specs .section__head h2{color:var(--navy);}
.specs .section__kicker{color:var(--sea);}

.spec-category{margin-bottom:64px;}
.spec-category h3{
  font-size:1.1rem;
  color:var(--navy);
  font-family:'Inter',sans-serif;
  font-weight:600;
  letter-spacing:.01em;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--sand-dim);
}
.spec-table{
  width:100%;
  border-collapse:collapse;
}
.spec-table tr{border-top:1px solid var(--sand-dim);}
.spec-table tr:first-child{border-top:none;}
.spec-table td{
  padding:16px 14px;
  text-align:left;
  vertical-align:middle;
  font-size:.92rem;
}
.spec-table td.spec-item{
  color:#5c6863;
  width:26%;
  min-width:130px;
}
.spec-table td.spec-detail{
  color:var(--ink);
  width:auto;
}
.spec-table td.spec-photo{width:420px;}
.spec-table--no-photo td.spec-item{width:30%;}
.photo-placeholder{
  width:400px; height:300px;
  border:1px dashed #c9c0aa;
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  color:#b7ae97;
  font-size:2rem;
  background:repeating-linear-gradient(
    135deg, rgba(22,33,31,.03), rgba(22,33,31,.03) 6px,
    transparent 6px, transparent 12px
  );
}
.spec-table .photo{width:400px; cursor:zoom-in;}
.spec-table .photo > img{width:400px; height:300px; border-radius:6px; object-fit:cover; display:block;}
.spec-table .thumb-frame{position:relative; display:block; width:400px; height:300px; border-radius:6px; overflow:hidden;}
.spec-table .thumb-frame img{width:100%; height:100%; object-fit:cover; display:block;}
.spec-table .photo .photo-label{
  left:auto; right:auto; bottom:auto;
  position:static; display:block;
  font-size:.85rem; padding:6px 12px; margin-top:10px;
  text-align:center; box-shadow:none;
}
.video-thumb__play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,26,34,.32);
  color:var(--white); font-size:2rem;
  pointer-events:none;
}

.floorplan{margin-top:64px;}
.floorplan__trigger{
  display:block; width:100%;
  border:1px solid var(--sand-dim); background:var(--sand);
  padding:0; margin:0 0 32px; cursor:zoom-in;
  position:relative; overflow:hidden; border-radius:2px;
  font:inherit; text-align:left;
}
.floorplan__trigger img{width:100%; height:auto; display:block;}
.floorplan__zoom{
  position:absolute; top:14px; right:14px;
  background:var(--white); color:#141a18;
  font-size:.7rem; font-weight:600; letter-spacing:.02em;
  padding:6px 13px; border-radius:999px;
  box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.floorplan h3{color:var(--navy); font-size:1.3rem; margin-bottom:10px;}
.floorplan p{color:#3f4a46; font-size:.95rem; max-width:70ch;}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(8,26,34,.93);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px;
  padding:48px;
  opacity:0; visibility:hidden;
  transition:opacity .25s ease;
}
.lightbox.is-open{opacity:1; visibility:visible;}
.lightbox__img{
  width:min(94vw, 1500px);
  height:auto;
  max-height:76vh;
  object-fit:contain;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  border-radius:2px;
}
.lightbox__caption{
  color:var(--sand);
  max-width:min(80vw, 800px);
  text-align:center;
  font-size:1rem;
  line-height:1.6;
}
.lightbox__close{
  position:absolute; top:22px; right:28px;
  background:none; border:none; color:var(--white);
  font-size:2.4rem; line-height:1; cursor:pointer;
  font-family:'Inter',sans-serif; font-weight:300;
}

/* ---------- Where we are ---------- */
.now{background:var(--sand);}
.now__panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--sand-dim);
}
.now__photo{aspect-ratio:16/11; overflow:hidden;}
.now__photo img{width:100%; height:100%; object-fit:cover;}
.now__info{
  padding:48px;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--white);
}
.now__status{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; letter-spacing:.08em; font-weight:600;
  color:var(--sea); margin-bottom:16px;
}
.now__status i{
  width:8px; height:8px; border-radius:50%; background:var(--sea);
  display:inline-block;
}
.now__info h3{font-size:1.8rem; color:var(--navy); margin-bottom:12px;}
.now__info p{color:#3b4744; font-size:1rem;}
.now__updated{
  margin-top:24px; font-size:.82rem; color:#8b948f;
}

/* ---------- Live AIS card ---------- */
.ais-card{
  margin-top:28px;
  background:var(--white);
  border:1px solid var(--sand-dim);
}
.ais-card__head{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
  padding:28px 32px 22px;
}
.ais-card__head h3{font-size:1.3rem; color:var(--navy); margin-top:2px;}
.ais-card__note{
  font-size:.78rem; color:#8b948f; letter-spacing:.01em;
}
.ais-map{
  width:100%; height:440px;
  background:var(--navy-deep);
}
.ais-map iframe{width:100%; height:100%; border:0; display:block;}
.ais-map__placeholder{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:0 40px;
}
.ais-map__placeholder p{
  color:#93a19c; font-size:.92rem; max-width:36ch; margin:0;
}
.ais-card__footnote{
  margin:0; padding:14px 32px 22px;
  font-size:.8rem; color:#8b948f;
}
@media (max-width:860px){
  .ais-map{height:320px;}
  .ais-card__head{padding:22px 22px 18px;}
  .ais-card__footnote{padding:12px 22px 20px;}
}

/* ---------- Footer ---------- */
footer{
  background:var(--navy-deep); color:var(--sand);
  padding:56px 0 32px;
}
.footer__row{
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:24px;
  padding-bottom:32px; border-bottom:1px solid rgba(243,237,224,.12);
}
.footer__mark{font-family:'Fraunces',serif; font-size:1.3rem;}
.footer__mark small{
  display:block; font-family:'Inter',sans-serif; font-size:.7rem;
  letter-spacing:.14em; color:var(--sea); margin-top:6px; font-weight:600;
}
.footer__meta{font-size:.85rem; color:#93a19c; text-align:right;}
.footer__bottom{
  padding-top:24px; font-size:.78rem; color:#66756f;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:78%; max-width:320px;
    background:var(--navy-deep);
    flex-direction:column; padding:100px 32px; gap:26px;
    transform:translateX(100%); transition:transform .35s ease;
  }
  .nav__links.open{transform:translateX(0);}
  .nav__toggle{
    display:block; z-index:60; background:none; border:none; cursor:pointer;
    width:28px; height:20px; position:relative;
  }
  .nav__toggle span, .nav__toggle::before, .nav__toggle::after{
    content:''; position:absolute; left:0; right:0; height:2px; background:var(--white);
  }
  .nav__toggle span{top:9px;}
  .nav__toggle::before{top:0;}
  .nav__toggle::after{bottom:0;}
  .about__grid{grid-template-columns:1fr; gap:40px;}
  .about__photo{order:-1;}
  .strip__row{grid-template-columns:repeat(2,1fr);}
  .strip__row img{height:200px;}
  .now__panel{grid-template-columns:1fr;}
  section{padding:72px 0;}
  .spec-table td{padding:12px 8px; font-size:.86rem;}
  .spec-table td.spec-photo{width:260px;}
  .photo-placeholder, .spec-table .photo, .spec-table .photo > img, .spec-table .thumb-frame{width:260px; height:195px;}
  .spec-table .photo .photo-label{font-size:.7rem; padding:5px 10px; margin-top:8px;}
}