/* base reset, typography roles, a11y, reduced-motion — M2 refined */
*{margin:0;padding:0;box-sizing:border-box}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  font-family:var(--sans);font-weight:300;line-height:1.7;
  color:var(--charcoal);background:var(--ivory);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--lagoon);color:var(--ivory)}
:focus-visible{outline:2px solid var(--lagoon);outline-offset:3px;border-radius:3px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--charcoal);color:var(--ivory);padding:.8rem 1.2rem;z-index:2000}
.skip-link:focus{left:0}

.wrap{max-width:var(--w-max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.wrap.narrow{max-width:880px}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:-.014em}
h1 em,h2 em{font-style:italic;font-weight:300;letter-spacing:0}
.d-xl{font-size:clamp(2.7rem,7vw,6.2rem)}
.d-lg{font-size:clamp(2.1rem,4.4vw,3.9rem)}
.d-md{font-size:clamp(1.5rem,2.6vw,2.2rem)}
.lede{font-size:clamp(1.05rem,1.35vw,1.24rem);line-height:1.66;color:var(--charcoal-soft);max-width:32em}
.copy{color:var(--charcoal-soft);max-width:34em}
.voice{font-family:var(--serif);font-style:italic;font-size:1.04em}

/* chapter marker — the journey, numbered (mono = structure encodes sequence) */
.chapter{display:flex;align-items:baseline;gap:1rem;font-size:.7rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--driftwood)}
.chapter span{font-family:var(--mono);font-size:.72rem;color:var(--lagoon);letter-spacing:.1em}
.chapter::after{content:"";flex:0 0 2.4rem;height:1px;background:var(--travertine);transform:translateY(-3px)}

/* measured fact — the dive-log */
.fact{font-family:var(--mono);font-size:.8rem;letter-spacing:.03em;color:var(--deep)}
.on-deep .fact{color:var(--shallow)}

.eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--driftwood)}

/* buttons — soft expansion, soft shadow, never abrupt */
.btn{display:inline-flex;align-items:center;gap:.8rem;font-family:var(--sans);
  font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  padding:1.05rem 2.1rem;border:1px solid currentColor;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--charcoal);
  transition:background .55s var(--ease),color .55s var(--ease),border-color .55s var(--ease),
             padding .55s var(--ease),box-shadow .55s var(--ease),transform .55s var(--ease)}
.btn:hover{padding-left:2.5rem;padding-right:2.5rem;box-shadow:0 14px 34px -18px rgba(14,78,92,.45)}
.btn:active{transform:translateY(1px)}
.btn .arr{transition:transform .5s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn-reserve{background:var(--deep);border-color:var(--deep);color:var(--ivory)}
.btn-reserve:hover{background:var(--abyss)}
.btn-light{color:var(--ivory)}
.btn-light:hover{background:rgba(250,247,240,.14)}
.btn-ghost{color:rgba(250,247,240,.85);border-color:rgba(250,247,240,.4)}
.btn-ghost:hover{border-color:var(--ivory);color:var(--ivory)}

/* link with drawn underline */
.link{position:relative;display:inline-flex;align-items:center;gap:.6rem;font-size:.74rem;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--deep);padding-bottom:.35rem}
.link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--lagoon);transform-origin:left;transform:scaleX(.35);transition:transform .55s var(--ease)}
.link:hover::after{transform:scaleX(1)}
.link .arr{transition:transform .45s var(--ease)}
.link:hover .arr{transform:translateX(5px)}

/* the gate aperture + reveal primitives */
.gate-mask{clip-path:var(--gate)}
.rv{opacity:0;transform:translateY(28px);transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.14s}.rv-d2{transition-delay:.28s}.rv-d3{transition-delay:.42s}
.mask{position:relative;overflow:hidden;border-radius:2px}
.mask img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.9s var(--ease)}
.mask.in img{transform:scale(1)}
.mask::after{content:"";position:absolute;inset:0;background:var(--sand);transition:transform 1.2s var(--ease)}
.mask.in::after{transform:translateY(-101%)}
.mask.mask-deep::after{background:var(--deep)}

/* image loading — fade beautifully, never pop */
img[loading="lazy"]{opacity:0;transition:opacity 1s var(--ease)}
img[loading="lazy"].is-loaded{opacity:1}
.mask img[loading="lazy"]{opacity:1} /* masks handle their own reveal */

/* waterline */
.waterline{width:100%;height:1px;opacity:.55;
  background:linear-gradient(90deg,transparent,var(--lagoon) 15%,var(--lagoon) 85%,transparent)}

/* honesty badges */
.badge{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--driftwood);
  border-radius:999px;padding:.35rem .8rem;color:var(--charcoal-soft)}
.badge-todo{border-color:var(--lagoon);color:var(--deep)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.mask img{opacity:1!important;transform:none!important}
  .mask::after{display:none}
  img[loading="lazy"]{opacity:1}
}