:root {
  --paper:#F7F5EF;
  --panel:#FFFFFF;
  --ink:#172223;
  --navy:#183642;
  --muted:#69706E;
  --line:#D7D1C3;
  --teal:#176D75;
  --cream:#FFF9EE;
}
* { box-sizing:border-box; }
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Georgia, serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand,.nav a,.eyebrow,.opener,.caption-line,.button-link {
  font-family:"EB Garamond", Garamond, Georgia, serif;
}
.site-header {
  position:sticky;
  top:0;
  z-index:20;
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(24px,6vw,88px);
  background:rgba(247,245,239,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(215,209,195,.75);
}
.brand {
  color:var(--teal);
  font-size:clamp(26px,2.2vw,34px);
  text-decoration:none;
  font-weight:500;
}
.nav {
  display:flex;
  gap:clamp(20px,2.5vw,38px);
  align-items:center;
}
.nav a {
  color:var(--navy);
  text-decoration:none;
  font-size:19px;
  border-bottom:1px solid transparent;
  padding-bottom:3px;
}
.nav a.active,.nav a:hover {
  color:var(--teal);
  border-color:var(--teal);
}

main {
  padding:clamp(68px,8vw,112px) clamp(24px,6vw,88px) clamp(80px,9vw,130px);
}
.page-wrap {
  max-width:1120px;
  margin:0 auto;
}
h1 {
  font-size:clamp(58px,8vw,104px);
  line-height:.92;
  font-weight:500;
  letter-spacing:-.018em;
  margin:0 0 22px;
}
.title-rule {
  width:90px;
  height:2px;
  background:var(--teal);
  margin:0 0 42px;
}
.eyebrow {
  color:var(--teal);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:16px;
  margin:0 0 18px;
  font-weight:500;
}
.opener {
  max-width:920px;
  color:var(--ink);
  font-size:clamp(36px,4.2vw,64px);
  line-height:1.06;
  font-style:italic;
  margin:0 0 46px;
}
.hero-photo {
  width:100%;
  margin:0 0 clamp(42px,5vw,70px);
}
.hero-photo img {
  display:block;
  width:100%;
  height:auto;
  border:1px solid rgba(215,209,195,.9);
}
.story-grid {
  display:grid;
  grid-template-columns:minmax(0, 1fr) 340px;
  gap:clamp(44px,7vw,90px);
  align-items:start;
  margin-top:0;
}
.copy {
  max-width:760px;
}
.copy p {
  font-size:clamp(21px,1.55vw,25px);
  line-height:1.72;
  margin:0 0 30px;
}
.scuba-lockup {
  justify-self:end;
  text-align:center;
  margin-top:8px;
}
.scuba-frame {
  width:min(340px, 72vw);
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  border:1.5px solid var(--teal);
  background:var(--panel);
  box-shadow:0 12px 35px rgba(23,34,35,.08);
}
.scuba-frame img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}
.closing {
  max-width:600px;
  margin:28px auto 0;
  font-family:"EB Garamond", Garamond, Georgia, serif;
  font-style:italic;
  font-size:clamp(25px,2.1vw,34px);
  line-height:1.25;
  color:var(--ink);
}
.bottom-rule {
  height:1px;
  background:var(--teal);
  margin:clamp(70px,8vw,110px) 0 0;
  opacity:.72;
}
.hold-note {
  max-width:760px;
  margin:34px 0 0;
  color:var(--muted);
  font-size:18px;
  line-height:1.55;
  font-style:italic;
}
footer {
  border-top:1px solid var(--line);
  padding:34px clamp(24px,6vw,88px);
  color:var(--muted);
  font-size:17px;
  display:flex;
  justify-content:space-between;
  gap:24px;
}
footer a {
  color:var(--teal);
  text-decoration:none;
}
@media(max-width:900px) {
  .site-header {
    height:auto;
    padding-top:18px;
    padding-bottom:18px;
    align-items:flex-start;
    gap:14px;
    flex-direction:column;
  }
  .nav {
    flex-wrap:wrap;
    gap:16px 24px;
  }
  .story-grid {
    grid-template-columns:1fr;
  }
  .scuba-lockup {
    justify-self:center;
    margin-top:22px;
  }
  .closing {
    max-width:680px;
  }
  footer {
    flex-direction:column;
  }
}

.opener-line {
  display: block;
}
.opener-line-2 {
  margin-top: 18px;
}


.footer-contact {
  display:flex;
  align-items:center;
  gap:0;
  flex-wrap:wrap;
}
.social-links {
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-left:2px;
}
.social-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--teal);
  line-height:1;
}
.social-icon:hover,
.social-icon:focus {
  opacity:.75;
}
.social-icon:focus {
  outline:1px solid var(--teal);
  outline-offset:4px;
}

.social-icon svg {
  display:block;
  width:20px;
  height:20px;
  flex:0 0 20px;
}