:root {
  /* Compliance typography note: Use IBM Plex Sans* Sans** for concise body copy and project descriptions. Use **Cormorant Garamond* Garamond** sparingly for larger poetic scene titles. */
  --burgundy: #5A1024;
  --cream: #F7EAD2;
  --seafoam: #66CDBD;
  --kelp: #152B2A;
  --rose: #B96A72;
  --pearl: #FFF8E8;
  --lagoon: #2F8F9D;
  --hand: "Caveat", "Comic Sans MS", cursive;
  --body: "IBM Plex Sans", Inter, system-ui, sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--cream);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--burgundy);
  font-family: var(--body);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 248, 232, .96), transparent 30rem),
    radial-gradient(circle at 75% 30%, rgba(102, 205, 189, .22), transparent 26rem),
    linear-gradient(180deg, var(--cream), #f3dfbf 58%, #ead0b5);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  z-index: 5;
  background-image:
    linear-gradient(rgba(90, 16, 36, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 16, 36, .05) 1px, transparent 1px);
  background-size: 52px 52px, 52px 52px;
  mask-image: radial-gradient(circle at center, black, transparent 80%);
}

.weather {
  position: fixed;
  inset: -20vmax;
  z-index: 0;
  pointer-events: none;
  filter: blur(38px) saturate(118%);
  opacity: .78;
  background:
    radial-gradient(circle at var(--mx, 22%) var(--my, 76%), rgba(102, 205, 189, .54), transparent 22vmax),
    radial-gradient(circle at 70% 22%, rgba(185, 106, 114, .36), transparent 24vmax),
    radial-gradient(circle at 54% 63%, rgba(47, 143, 157, .34), transparent 25vmax),
    radial-gradient(circle at 18% 38%, rgba(255, 248, 232, .72), transparent 19vmax);
  animation: weatherDrift 20s ease-in-out infinite alternate;
}

@keyframes weatherDrift {
  from { transform: translate3d(-2%, 1%, 0) scale(1); }
  to { transform: translate3d(3%, -2%, 0) scale(1.05); }
}

.map-nav {
  position: fixed;
  top: 1.15rem;
  right: 1.4rem;
  z-index: 20;
  display: flex;
  gap: .55rem;
  padding: .4rem .55rem;
  border: 1px solid rgba(90, 16, 36, .28);
  border-radius: 999px;
  background: rgba(255, 248, 232, .58);
  backdrop-filter: blur(12px);
}

.map-nav a {
  color: var(--burgundy);
  font: 700 1.28rem/1 var(--hand);
  text-decoration: none;
  padding: .18rem .52rem .28rem;
  border-radius: 999px;
  transition: background .28s ease, color .28s ease, transform .28s ease;
}

.map-nav a:hover {
  color: var(--kelp);
  background: rgba(102, 205, 189, .36);
  transform: translateY(-1px) rotate(-2deg);
}

.tidal-map, .scene {
  position: relative;
  z-index: 1;
}

.scene {
  min-height: 100vh;
  padding: clamp(1.5rem, 5vw, 5rem);
}

.low-tide {
  display: grid;
  align-content: center;
  overflow: hidden;
}

.shore-notes {
  width: min(680px, 88vw);
  margin-top: -8vh;
}

.coordinate, .reverse-coord {
  display: inline-block;
  color: var(--lagoon);
  font: 700 1.2rem/1 var(--hand);
  letter-spacing: .04em;
}

h1 {
  margin: .3rem 0 .25rem;
  color: var(--burgundy);
  font: 700 clamp(5.8rem, 17vw, 15rem)/.78 var(--hand);
  letter-spacing: -.055em;
  text-shadow: 0 14px 32px rgba(90, 16, 36, .12);
}

.shore-notes p, .scene-heading p, .summit-panel p {
  max-width: 36rem;
  color: rgba(21, 43, 42, .82);
  font-size: clamp(1rem, 1.7vw, 1.24rem);
  line-height: 1.75;
  font-weight: 400;
}

.horizon-glyph {
  position: absolute;
  right: 12vw;
  top: 22vh;
  width: 150px;
  height: 150px;
}

.moon {
  position: absolute;
  inset: 42px;
  border: 2px solid var(--burgundy);
  border-radius: 50%;
  background: rgba(255, 248, 232, .45);
  box-shadow: -12px 10px 0 rgba(102, 205, 189, .36);
}

.tide-ring {
  position: absolute;
  border: 1px solid rgba(47, 143, 157, .42);
  border-radius: 50%;
  animation: pulseRing 4.5s ease-in-out infinite;
}

.ring-one { inset: 22px; }
.ring-two { inset: 2px; animation-delay: 1.2s; }

@keyframes pulseRing {
  50% { transform: scale(1.05); opacity: .35; }
}

.mountain {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 42vh;
  overflow: visible;
}

.mountain .fill, .mountain-summit path {
  fill: rgba(90, 16, 36, .95);
}

.contour {
  fill: none;
  stroke: var(--pearl);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1300;
  stroke-dashoffset: 1300;
  opacity: .72;
  animation: drawLine 5s ease forwards;
}

.contour.delay { animation-delay: .8s; }
.contour.delay-two { animation-delay: 1.5s; }

@keyframes drawLine { to { stroke-dashoffset: 0; } }

.cabin-scene {
  padding-top: 6rem;
  min-height: 132vh;
}

.scene-heading {
  max-width: 710px;
  margin-bottom: 2rem;
}

h2 {
  margin: .2rem 0 .6rem;
  color: var(--burgundy);
  font: 600 clamp(2.4rem, 6vw, 5.8rem)/.92 var(--serif);
  letter-spacing: -.04em;
}

.contour-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(74px, auto);
  gap: clamp(.85rem, 1.55vw, 1.4rem);
  width: min(1120px, 94vw);
  margin: 0 auto;
  min-height: 820px;
  padding: clamp(1rem, 2vw, 2rem);
}

.paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .55;
}

.paths path {
  fill: none;
  stroke: rgba(90, 16, 36, .42);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 10 16;
}

.project-card {
  position: relative;
  z-index: 2;
  min-height: 176px;
  perspective: 1100px;
  cursor: pointer;
  transform: rotate(var(--tilt, -1deg));
}

.project-card:hover .pin,
.project-card.is-near .pin {
  box-shadow: 0 0 0 10px rgba(102, 205, 189, .14), 0 0 24px rgba(102, 205, 189, .8);
  background: var(--seafoam);
}

.card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.22, .88, .26, 1.1), filter .35s ease;
}

.project-card.is-flipped .card-inner { transform: rotateY(180deg) rotateZ(.6deg); }
.project-card:hover .card-inner { filter: drop-shadow(0 20px 28px rgba(90, 16, 36, .14)); }

.card-face {
  position: absolute;
  inset: 0;
  padding: 1rem;
  border: 1.5px solid var(--burgundy);
  border-radius: 18px 14px 20px 13px;
  backface-visibility: hidden;
  overflow: hidden;
}

.card-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background:
    radial-gradient(circle at 20% 30%, rgba(90, 16, 36, .12) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 70%, rgba(21, 43, 42, .09) 0 1px, transparent 2px);
  background-size: 17px 19px, 23px 21px;
}

.front {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(150deg, var(--pearl), var(--cream));
  box-shadow: inset 0 0 0 7px rgba(255, 248, 232, .65), 0 12px 32px rgba(90, 16, 36, .1);
}

.back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 82% 18%, rgba(102, 205, 189, .32), transparent 4rem),
    linear-gradient(145deg, var(--kelp), #254240 62%, var(--rose));
  color: var(--pearl);
}

.back p {
  margin: .85rem 0 1rem;
  font: 500 1.35rem/1.1 var(--hand);
}

.back b {
  color: var(--seafoam);
  font: 500 .77rem/1.2 var(--body);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pin {
  position: absolute;
  top: .75rem;
  right: .82rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--rose);
  border: 1px solid var(--burgundy);
  transition: box-shadow .3s ease, background .3s ease;
}

.icon {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 54px;
  height: 54px;
}

.icon::before, .icon::after {
  content: "";
  position: absolute;
  border-color: var(--burgundy);
}

.cabin-icon::before { inset: 18px 8px 4px; border: 2px solid; }
.cabin-icon::after { left: 8px; top: 9px; width: 36px; height: 36px; border-top: 2px solid; border-left: 2px solid; transform: rotate(45deg); }
.wave-icon::before { left: 2px; right: 2px; top: 24px; height: 16px; border-top: 3px solid; border-radius: 50%; box-shadow: 0 10px 0 -7px var(--burgundy); }
.shell-icon::before { inset: 6px; border: 2px solid; border-radius: 50% 50% 8px 8px; }
.shell-icon::after { left: 26px; top: 8px; height: 36px; border-left: 2px solid; box-shadow: -12px 7px 0 -5px var(--burgundy), 12px 7px 0 -5px var(--burgundy); }
.compass-icon::before { inset: 6px; border: 2px solid; border-radius: 50%; }
.compass-icon::after { left: 25px; top: 7px; width: 0; height: 40px; border-left: 2px solid; transform: rotate(35deg); }
.moon-icon::before { inset: 9px; border: 2px solid; border-radius: 50%; box-shadow: -8px 6px 0 var(--cream); background: transparent; }
.prompt-icon::before { left: 4px; top: 13px; width: 42px; height: 28px; border: 2px solid; border-radius: 6px; }
.prompt-icon::after { left: 12px; top: 25px; width: 12px; height: 12px; border-top: 2px solid; border-right: 2px solid; transform: rotate(45deg); }

.front h3 {
  margin: 0;
  color: var(--burgundy);
  font: 700 clamp(1.85rem, 3vw, 2.8rem)/.88 var(--hand);
}

.front p {
  margin: .25rem 0 0;
  color: rgba(21, 43, 42, .72);
  font-size: .86rem;
}

.tile-a { grid-column: 1 / span 3; grid-row: 6 / span 2; --tilt: -3deg; }
.tile-b { grid-column: 3 / span 5; grid-row: 4 / span 2; --tilt: 1.7deg; }
.tile-c { grid-column: 8 / span 3; grid-row: 2 / span 4; --tilt: -1.4deg; min-height: 360px; }
.tile-d { grid-column: 5 / span 3; grid-row: 7 / span 2; --tilt: 2.5deg; }
.tile-e { grid-column: 9 / span 3; grid-row: 6 / span 2; --tilt: -2.2deg; }
.tile-f { grid-column: 2 / span 5; grid-row: 1 / span 2; --tilt: 1deg; }
.wide { min-height: 170px; }

.artifact {
  position: absolute;
  z-index: 1;
  color: var(--burgundy);
  font-family: var(--hand);
  pointer-events: none;
}

.pearl {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pearl);
  border: 1px solid rgba(90, 16, 36, .35);
  box-shadow: 0 0 18px rgba(102, 205, 189, .72);
}

.p-one { left: 17%; top: 46%; }
.p-two { right: 21%; bottom: 22%; }
.s-one { left: 72%; top: 12%; font-size: 3rem; color: var(--lagoon); transform: rotate(-16deg); }
.c-one { left: 42%; top: 67%; font-size: 4rem; color: var(--rose); }
.c-two { right: 4%; top: 35%; font-size: 4rem; color: var(--seafoam); }

.summit-log {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.summit-panel {
  position: relative;
  z-index: 2;
  width: min(760px, 90vw);
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgba(90, 16, 36, .32);
  border-radius: 30px 22px 34px 20px;
  background: rgba(255, 248, 232, .62);
  box-shadow: 0 24px 70px rgba(90, 16, 36, .12);
  backdrop-filter: blur(14px);
}

.tide-glyph {
  display: flex;
  gap: .7rem;
  margin-top: 1.4rem;
}

.tide-glyph span {
  width: 42px;
  height: 13px;
  border-top: 2px solid var(--seafoam);
  border-radius: 50%;
}

.mountain-summit { height: 34vh; opacity: .95; }

@media (max-width: 860px) {
  .map-nav { left: 1rem; right: 1rem; justify-content: center; }
  .horizon-glyph { right: 5vw; top: 15vh; transform: scale(.7); }
  .cabin-scene { padding-top: 5rem; }
  .contour-map { display: block; min-height: 0; }
  .project-card { height: 210px; margin: 1rem 0; transform: rotate(0); }
  .project-card.tall { height: 260px; min-height: 260px; }
  .paths { opacity: .26; }
  h1 { font-size: clamp(5rem, 26vw, 9rem); }
}