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

:root{
  --slate:#2c3e50;
  --parchment:#f4f0eb;
  --warm-parchment:#e8ddd0;
  --steel:#4a6580;
  --forest:#3d5c4a;
  --driftwood:#8a7e72;
  --terracotta:#c4907a;
  --sage:#a8c5b8;
  --mist:#c8d6df;
  --blue-mid:#8badc4;
  --teal:#6b9dad;
  --light-steel:#d4dde4;
  --ff:'Commissioner',sans-serif;
  --ff-mono:'IBM Plex Mono',monospace;
}

html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:var(--ff);
  font-variation-settings:'FLAR' 50,'VOLM' 50;
  background:var(--parchment);
  color:var(--slate);
  overflow-x:hidden;
}

/* Scroll indicator */
.scroll-indicator{
  position:fixed;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  width:10px;
  height:40vh;
  z-index:100;
  opacity:.6;
  transition:opacity .3s;
}
.scroll-indicator:hover{opacity:1}
.scroll-indicator svg{width:100%;height:100%}
.sine-track{opacity:.3}
.sine-progress{
  stroke-dasharray:300;
  stroke-dashoffset:300;
  transition:stroke-dashoffset .1s linear;
}

/* Sections common */
section{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.gradient-mesh{
  position:absolute;
  inset:0;
  opacity:.35;
  pointer-events:none;
  z-index:0;
}

/* HORIZON */
.horizon{
  height:100vh;
  flex-direction:column;
  background:linear-gradient(180deg,var(--parchment) 0%,var(--warm-parchment) 60%,var(--mist) 100%);
}
#mesh-horizon{
  background:
    radial-gradient(ellipse 60% 40% at 30% 70%,rgba(168,197,184,.4),transparent),
    radial-gradient(ellipse 50% 50% at 70% 50%,rgba(139,173,196,.3),transparent),
    radial-gradient(ellipse 40% 30% at 50% 80%,rgba(196,144,122,.2),transparent);
}
.horizon-content{
  position:relative;z-index:1;text-align:center;
}
.site-title{
  font-weight:200;
  font-size:clamp(3rem,8vw,7rem);
  letter-spacing:.15em;
  color:var(--slate);
  font-variation-settings:'FLAR' 80,'VOLM' 30;
  margin-bottom:.25em;
}
.site-subtitle{
  font-weight:300;
  font-size:clamp(.9rem,1.8vw,1.3rem);
  letter-spacing:.3em;
  text-transform:lowercase;
  color:var(--steel);
  opacity:0;
  animation:fadeSubtitle 2s ease 1s forwards;
}
@keyframes fadeSubtitle{to{opacity:1}}

.horizon-line{
  position:absolute;
  bottom:30%;
  left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--teal),var(--driftwood),transparent);
  opacity:.4;
}

/* SPECIMEN */
.specimen{
  background:var(--parchment);
  padding:10vh 8vw;
  flex-direction:column;
}
#mesh-specimen{
  background:
    radial-gradient(ellipse 45% 45% at 20% 30%,rgba(61,92,74,.15),transparent),
    radial-gradient(ellipse 50% 40% at 80% 70%,rgba(200,214,223,.3),transparent);
}
.specimen-content{
  position:relative;z-index:1;
  max-width:1100px;width:100%;
}
.specimen-text{margin-bottom:4rem;max-width:600px}
.specimen-text h2{
  font-weight:300;font-size:clamp(1.8rem,3vw,2.8rem);
  letter-spacing:.05em;margin-bottom:1rem;
  color:var(--slate);
}
.specimen-text p{
  font-weight:400;font-size:1rem;line-height:1.8;
  color:var(--driftwood);
}
.specimen-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}
.specimen-card{
  aspect-ratio:1;
  background:var(--warm-parchment);
  border:1px solid rgba(44,62,80,.08);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:1.5rem;
  transition:transform .6s ease,box-shadow .6s ease;
}
.specimen-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(44,62,80,.08);
}
.plot-svg{width:80%;height:auto;margin-bottom:1rem}
.specimen-label{
  font-family:var(--ff-mono);
  font-weight:400;font-size:.8rem;letter-spacing:.15em;
  text-transform:lowercase;color:var(--driftwood);
}

/* METHODOLOGY */
.methodology{
  background:var(--slate);
  color:var(--parchment);
  padding:10vh 8vw;
  flex-direction:column;
}
#mesh-methodology{
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%,rgba(74,101,128,.3),transparent),
    radial-gradient(ellipse 40% 40% at 80% 20%,rgba(168,197,184,.15),transparent);
}
.methodology-content{
  position:relative;z-index:1;
  max-width:1000px;width:100%;
}
.methodology-content h2{
  font-weight:200;font-size:clamp(1.8rem,3vw,2.8rem);
  letter-spacing:.08em;margin-bottom:4rem;
  color:var(--mist);
}
.axis-lines{position:absolute;inset:0;pointer-events:none;opacity:.1}
.axis-x{position:absolute;bottom:20%;left:5%;right:5%;height:1px;background:var(--mist)}
.axis-y{position:absolute;top:10%;bottom:20%;left:10%;width:1px;background:var(--mist)}

.methodology-points{
  display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;
}
.method-point{
  opacity:0;transform:translateY(30px);
  transition:opacity .8s ease,transform .8s ease;
}
.method-point.visible{opacity:1;transform:translateY(0)}
.method-number{
  font-weight:200;font-size:2.5rem;
  color:var(--terracotta);
  font-variation-settings:'FLAR' 80,'VOLM' 20;
  display:block;margin-bottom:.5rem;
}
.method-point h3{
  font-weight:500;font-size:1.1rem;letter-spacing:.1em;
  margin-bottom:.75rem;color:var(--sage);
}
.method-point p{
  font-weight:300;font-size:.9rem;line-height:1.8;
  color:var(--mist);opacity:.8;
}

/* TIDAL */
.tidal{
  background:linear-gradient(180deg,var(--warm-parchment),var(--parchment));
  padding:10vh 8vw;
  flex-direction:column;
}
#mesh-tidal{
  background:
    radial-gradient(ellipse 70% 50% at 40% 60%,rgba(139,173,196,.2),transparent),
    radial-gradient(ellipse 50% 40% at 70% 30%,rgba(196,144,122,.15),transparent);
}
.tidal-content{
  position:relative;z-index:1;
  max-width:1000px;width:100%;text-align:center;
}
.tidal-content h2{
  font-weight:300;font-size:clamp(1.8rem,3vw,2.8rem);
  letter-spacing:.05em;margin-bottom:1rem;
}
.tidal-desc{
  font-weight:400;font-size:1rem;line-height:1.8;
  color:var(--driftwood);max-width:550px;margin:0 auto 3rem;
}
.tidal-wave-container{
  width:100%;height:200px;position:relative;
}
#tidal-canvas{
  width:100%;height:100%;display:block;
}

/* COORDINATES */
.coordinates{
  background:var(--slate);
  color:var(--parchment);
  padding:10vh 8vw;
  flex-direction:column;
  min-height:60vh;
}
#mesh-coordinates{
  background:
    radial-gradient(ellipse 50% 50% at 50% 50%,rgba(74,101,128,.2),transparent);
}
.coordinates-content{
  position:relative;z-index:1;text-align:center;
}
.coordinates-content h2{
  font-weight:200;font-size:clamp(1.6rem,2.5vw,2.4rem);
  letter-spacing:.08em;margin-bottom:1rem;color:var(--mist);
}
.coordinates-content>p{
  font-weight:300;font-size:.95rem;line-height:1.8;
  color:var(--driftwood);max-width:450px;margin:0 auto 2rem;
}
.coord-display{
  font-family:var(--ff-mono);
  font-weight:300;font-size:1.4rem;
  letter-spacing:.2em;
  color:var(--sage);
  margin-bottom:3rem;
  display:flex;gap:2rem;justify-content:center;
}
.coord-display em{font-style:normal;color:var(--terracotta)}
.contact-line{
  font-weight:300;font-size:.75rem;letter-spacing:.25em;
  text-transform:lowercase;color:var(--light-steel);opacity:.5;
}
.separator{margin:0 .5em}

/* Responsive */
@media(max-width:768px){
  .specimen-grid{grid-template-columns:1fr}
  .methodology-points{grid-template-columns:1fr;gap:2rem}
  .scroll-indicator{right:10px}
  .coord-display{flex-direction:column;gap:.5rem}
}