:root {
  /* Typeface source: Caveat (Google Fonts), Libre Baskerville (Google Fonts), IBM Plex Mono (Google Fonts). */
  --abyss: #1A0A0F;
  --lacquer: #6B1D2A;
  --twilight: #8B4A5E;
  --rose: #A06B7A;
  --bone: #F5ECD7;
  --foam: #E8DCC8;
  --current: #2A1F22;
  --trench: #0F0709;
  --fish-moorish-idol: polygon(2% 50%, 16% 33%, 38% 25%, 56% 7%, 53% 31%, 80% 37%, 98% 18%, 88% 50%, 98% 82%, 78% 63%, 51% 69%, 57% 95%, 37% 74%, 15% 67%);
  --fish-butterflyfish: polygon(4% 50%, 22% 25%, 52% 13%, 78% 25%, 96% 50%, 78% 75%, 52% 87%, 22% 75%);
  --fish-barracuda: polygon(0 50%, 16% 38%, 72% 42%, 100% 18%, 88% 50%, 100% 82%, 72% 58%, 16% 62%);
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; background: var(--abyss); overflow: hidden; }

body {
  color: var(--foam);
  font-family: "Libre Baskerville", Georgia, serif;
}

.magazine {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  background: var(--abyss);
}

.spread {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 10%, rgba(139,74,94,.26), transparent 32%),
    linear-gradient(135deg, var(--abyss), var(--trench) 60%, var(--current));
  opacity: 0;
  transform: scale(1.15);
  transition: opacity 600ms cubic-bezier(.22,1,.36,1), transform 600ms cubic-bezier(.22,1,.36,1);
}

.spread.active { opacity: 1; transform: scale(1); }

.spread::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 66%;
  width: 1px;
  background: var(--lacquer);
  z-index: 4;
  opacity: .85;
}

.spread::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-conic-gradient(from 18deg, rgba(245,236,215,.035) 0 8deg, transparent 8deg 21deg), repeating-linear-gradient(91deg, rgba(160,107,122,.045) 0 1px, transparent 1px 6px);
  mix-blend-mode: screen;
  opacity: .42;
}

.caustic {
  position: absolute;
  inset: -30%;
  background: repeating-conic-gradient(from 0deg, rgba(139,74,94,.12) 0 4deg, transparent 4deg 12deg);
  animation: causticSpin 120s linear infinite;
  opacity: .55;
  pointer-events: none;
}

.dateline {
  margin: 0 0 1.2rem;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 300;
  font-size: clamp(.75rem, 1vw, .9rem);
  letter-spacing: .12em;
  color: var(--rose);
}

h1, h2 {
  margin: 0;
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--bone);
}

p { font-size: clamp(1rem, 1.8vw, 1.2rem); line-height: 1.75; }

.write-title span { display: inline-block; opacity: 1; clip-path: inset(0 0 0 0); }
.spread.active .write-title.armed span { animation: handwriting 420ms ease-out both; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--trench);
  pointer-events: none;
  transition: opacity 700ms ease;
}

.loader.hidden { opacity: 0; }

.loader-fish {
  position: absolute;
  top: 48%;
  left: -18vw;
  width: 18vw;
  height: 7vw;
  min-width: 140px;
  min-height: 54px;
  clip-path: var(--fish-moorish-idol);
  background: radial-gradient(circle at 42% 48%, var(--bone), var(--lacquer) 38%, var(--current) 73%);
  animation: swimLoad 1500ms cubic-bezier(.4,0,.2,1) forwards;
}

.page-eyes {
  position: fixed;
  right: 1.8rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  z-index: 30;
}

.eye-dot {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--lacquer);
  position: relative;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(245,236,215,.12), 0 0 16px rgba(107,29,42,.7);
}

.eye-dot::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  top: 4px;
  left: 7px;
  background: var(--bone);
  opacity: .45;
}

.eye-dot.active::after { animation: eyePulse 2s ease-in-out infinite; }

.hero-spread { display: grid; grid-template-columns: 66% 34%; }
.hero-image { position: relative; min-height: 100vh; border-right: 1px solid var(--lacquer); }
.reef-photo, .mini-photo, .clip {
  background:
    radial-gradient(circle at 30% 35%, rgba(245,236,215,.22), transparent 22%),
    linear-gradient(145deg, var(--lacquer), var(--current) 55%, var(--trench));
  box-shadow: inset 0 0 80px rgba(15,7,9,.85), 0 16px 40px rgba(15,7,9,.45);
}

.grain { position: absolute; inset: 0; background-image: repeating-conic-gradient(rgba(245,236,215,.055) 0 .5deg, transparent .5deg 1.5deg); opacity: .8; }
.reef { position: absolute; bottom: -5%; clip-path: polygon(0 100%, 0 46%, 8% 51%, 16% 27%, 23% 45%, 31% 21%, 39% 49%, 49% 30%, 57% 48%, 65% 20%, 73% 46%, 82% 28%, 90% 50%, 100% 38%, 100% 100%); background: var(--lacquer); opacity: .8; }
.ridge-one { left: 0; width: 100%; height: 42%; }
.ridge-two { right: 0; width: 78%; height: 55%; background: var(--current); opacity: .92; }
.fish { display: block; background: radial-gradient(circle at 38% 50%, var(--lacquer), var(--current) 72%); filter: drop-shadow(0 10px 20px rgba(15,7,9,.65)); }
.fish-moorish { clip-path: var(--fish-moorish-idol); }
.fish-butterfly, .fish-disc { clip-path: var(--fish-butterflyfish); }
.fish-barracuda { clip-path: var(--fish-barracuda); }
.hero-fish { position: absolute; width: 32vw; height: 17vw; left: 18%; top: 26%; transform: rotate(-8deg); background: radial-gradient(circle at 45% 48%, var(--bone), var(--lacquer) 32%, var(--current) 68%); }

.hero-title-panel { padding: 12vh 6vw 8vh 4vw; position: relative; z-index: 5; }
.hero-title-panel h1 { transform: rotate(-3deg); writing-mode: vertical-rl; text-orientation: mixed; font-size: clamp(4rem, 10vw, 8.5rem); margin: 4vh 0; }
.deck { max-width: 22rem; color: var(--foam); font-style: italic; }

.article-spread { display: grid; grid-template-columns: 20% 50% 30%; padding: 9vh 6vw; gap: 2.2vw; }
.article-spread > * { position: relative; z-index: 5; }
.annotations { border-right: 2px dotted var(--lacquer); padding-right: 2vw; }
.annotations p, figcaption { font-family: "Caveat", cursive; font-size: clamp(.85rem, 1.4vw, 1rem); color: var(--twilight); line-height: 1.3; }
.annotations p:nth-child(1) { transform: rotate(-1deg); margin-top: 8vh; }
.annotations p:nth-child(2) { transform: rotate(2deg); margin-top: 16vh; }
.annotations p:nth-child(3) { transform: rotate(-2deg); margin-top: 20vh; }
.article-copy { border-right: 2px dotted var(--lacquer); padding-right: 2.5vw; }
.article-copy h2 { transform: rotate(2deg); margin-bottom: 2rem; }
.pull { color: var(--bone); font-style: italic; padding: 1rem 0 1rem 2.4rem; position: relative; }
.hook { position: absolute; left: .2rem; top: 1.25rem; width: 23px; height: 32px; border: 4px solid var(--twilight); border-left: 0; border-top: 0; border-radius: 0 0 18px 0; transform: rotate(35deg); }
.photo-stack { display: grid; gap: 1rem; align-content: center; }
.mini-photo { margin: 0; height: 22vh; padding: 1rem; position: relative; overflow: hidden; }
.mini-photo.tall { height: 30vh; }
.mini-photo .fish { width: 75%; height: 55%; margin: 6% auto 0; background: radial-gradient(circle at 45% 50%, var(--bone), var(--lacquer) 35%, var(--current) 72%); }
.mini-photo figcaption { position: absolute; left: 1rem; bottom: .7rem; transform: rotate(-2deg); }

.essay-spread { padding: 6vh 8vw; }
.essay-title { position: relative; z-index: 5; transform: rotate(-1.5deg); }
.collage { position: relative; z-index: 5; height: 76vh; margin-top: 2vh; }
.clip { position: absolute; margin: 0; padding: 1rem; overflow: hidden; border: 1px solid rgba(160,107,122,.35); }
.clip .fish, .texture-reef { width: 100%; height: 76%; }
.clip-a { width: 35%; height: 38%; left: 2%; top: 7%; transform: rotate(-2deg); }
.clip-b { width: 31%; height: 31%; left: 34%; top: 2%; transform: rotate(1deg); }
.clip-c { width: 28%; height: 44%; right: 4%; top: 13%; transform: rotate(2deg); }
.clip-d { width: 42%; height: 35%; left: 12%; bottom: 4%; transform: rotate(1.5deg); }
.clip-e { width: 35%; height: 30%; right: 12%; bottom: 8%; transform: rotate(-1deg); }
.texture-reef { display:block; clip-path: polygon(0 100%, 0 28%, 9% 45%, 17% 17%, 26% 55%, 36% 25%, 48% 62%, 58% 19%, 70% 49%, 82% 22%, 91% 58%, 100% 34%, 100% 100%); background: linear-gradient(120deg, var(--rose), var(--lacquer), var(--current)); }
.texture-reef.coral { clip-path: polygon(0 100%, 0 55%, 11% 46%, 17% 22%, 24% 53%, 34% 12%, 41% 59%, 52% 28%, 60% 65%, 68% 16%, 77% 55%, 88% 25%, 100% 50%, 100% 100%); }
.swim { animation: idleFish 4s ease-in-out infinite; }
.reverse { animation-direction: alternate-reverse; }

.dispatch-spread { display: flex; justify-content: center; padding: 8vh 15%; }
.dispatch-spread::before { display: none; }
.dispatch-column { position: relative; z-index: 5; max-width: 760px; }
.dispatch-column h2 { transform: rotate(1.5deg); margin-bottom: 2rem; }
.fishbone { height: 34px; margin: 2rem auto; width: min(460px, 80%); position: relative; opacity: .4; }
.fishbone::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--rose); }
.fishbone::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(60deg, transparent 0 22px, var(--rose) 22px 24px, transparent 24px 46px); clip-path: polygon(5% 0, 95% 0, 86% 100%, 14% 100%); }

.cover-spread { display: grid; place-items: center; background: var(--abyss); }
.cover-spread::before { display: none; }
.back-cover-mark { position: relative; z-index: 5; text-align: center; }
.back-cover-mark h2 { font-size: clamp(5rem, 16vw, 15rem); animation: coverPulse 4s ease-in-out infinite; }
.cover-rule { height: 1px; width: min(540px, 64vw); background: var(--lacquer); margin: 2rem auto; }
.back-cover-mark p { font-family: "IBM Plex Mono", monospace; font-weight: 300; letter-spacing: .12em; font-size: clamp(.75rem, 1vw, .9rem); color: var(--rose); }

@keyframes causticSpin { to { transform: rotate(360deg); } }
@keyframes swimLoad { to { transform: translateX(128vw) rotate(2deg); } }
@keyframes eyePulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes handwriting { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(3px); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); } }
@keyframes idleFish { 0%,100% { transform: translateX(-5px) rotate(-1deg); } 50% { transform: translateX(5px) rotate(1deg); } }
@keyframes coverPulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } }

@media (max-width: 760px) {
  html, body { overflow: hidden; }
  .page-eyes { right: .8rem; }
  .hero-spread, .article-spread { grid-template-columns: 1fr; }
  .hero-image { min-height: 50vh; }
  .hero-title-panel h1 { writing-mode: horizontal-tb; font-size: clamp(4rem, 22vw, 7rem); }
  .article-spread { padding: 5vh 9vw; gap: 1rem; }
  .annotations, .article-copy { border-right: 0; padding-right: 0; }
  .annotations { display: flex; gap: 1rem; }
  .annotations p { margin: 0 !important; }
  .photo-stack { grid-template-columns: repeat(3, 1fr); }
  .mini-photo, .mini-photo.tall { height: 15vh; }
  .collage { height: 82vh; }
  .clip-a, .clip-b, .clip-c, .clip-d, .clip-e { width: 48%; height: 28%; }
  .clip-a { left: 0; top: 3%; } .clip-b { left: 46%; top: 8%; } .clip-c { left: 5%; top: 35%; right: auto; } .clip-d { left: 43%; bottom: 20%; } .clip-e { right: 10%; bottom: 0; }
}