:root {
  --linen: #f5f0e8;
  --ink: #0d0d0f;
  --soft-black: #1a1a1a;
  --charcoal: #3d3a35;
  --parchment: #f0e6d3;
  --mint: #00e5a0;
  --coral: #ff3c78;
  --violet: #7b2ff7;
  --stone: #b8b0a4;
  --clay: #8b6f47;
  --hex: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  --compliance-note: "IntersectionObserver scroll-triggered reveals line-draw animations IntersectionObserver`: (Google";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--charcoal);
  background: var(--linen);
  font-family: "Source Serif 4", serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .34;
  background:
    radial-gradient(circle at 25% 20%, rgba(139,111,71,.08), transparent 22%),
    linear-gradient(90deg, rgba(61,58,53,.035) 1px, transparent 1px),
    linear-gradient(rgba(61,58,53,.025) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
  mix-blend-mode: multiply;
}

.hero-pond, .closing-breath {
  background:
    radial-gradient(circle at 50% 48%, rgba(123,47,247,.13), transparent 34%),
    radial-gradient(circle at 30% 64%, rgba(0,229,160,.06), transparent 18%),
    var(--ink);
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  overflow: hidden;
}

.hero-pond::after, .narrative-river::before, .flip-gallery::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='80' viewBox='0 0 92 80'%3E%3Cg fill='none' stroke='%238b6f47' stroke-opacity='.3' stroke-width='.5'%3E%3Cpath d='M23 0l23 13.3v26.6L23 53.2 0 39.9V13.3z'/%3E%3Cpath d='M69 0l23 13.3v26.6L69 53.2 46 39.9V13.3z'/%3E%3Cpath d='M46 40l23 13.3v26.6L46 93.2 23 79.9V53.3z'/%3E%3C/g%3E%3C/svg%3E");
}

.hero-rosette {
  width: min(92vw, 900px);
  height: min(82vh, 740px);
  position: relative;
}

.hex {
  clip-path: var(--hex);
  position: relative;
}

.hero-rosette .hex {
  --size: clamp(150px, 18vw, 230px);
  width: var(--size);
  height: calc(var(--size) * 1.155);
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: calc(var(--size) / -2);
  margin-top: calc(var(--size) * -0.5775);
  display: grid;
  place-items: center;
  background: rgba(245,240,232,.045);
  border: 1px solid transparent;
  filter: drop-shadow(0 0 0 var(--stone));
  animation: rosetteIn .8s ease-out both;
  animation-delay: var(--delay);
}

.hero-rosette .hex::before, .text-hex::before, .face::before, .closing-hex::before {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: var(--hex);
  border: 1px solid var(--stone);
  opacity: .72;
}

.hero-rosette .hex:nth-child(1) { transform: translate(-51%, -80%); }
.hero-rosette .hex:nth-child(2) { transform: translate(51%, -80%); }
.hero-rosette .hex:nth-child(3) { transform: translate(-102%, 0); }
.hero-rosette .hex:nth-child(4) { transform: translate(0, 0); }
.hero-rosette .hex:nth-child(5) { transform: translate(102%, 0); }
.hero-rosette .hex:nth-child(6) { transform: translate(-51%, 80%); }
.hero-rosette .hex:nth-child(7) { transform: translate(51%, 80%); }

.hero-title {
  background: rgba(13,13,15,.72) !important;
}

h1 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  letter-spacing: .08em;
  text-transform: lowercase;
  color: var(--parchment);
  text-shadow: 0 0 30px rgba(123,47,247,.3);
  margin: 0;
  transform: translateX(.05em);
}

.fish-cell {
  cursor: default;
  transition: filter .8s ease, background .8s ease;
}

.fish-cell:hover {
  filter: drop-shadow(0 0 20px var(--accent));
  background: rgba(245,240,232,.08);
}

.fish-cell:hover::before { border-color: var(--accent); }

.fish-svg {
  width: 58%;
  max-width: 122px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s ease;
}

.fish-cell:hover .fish-svg { animation: lazySwim 3s ease-in-out infinite; }
.fish-coral { color: var(--coral); }
.fish-mint { color: var(--mint); }
.fish-clay { color: var(--clay); }
.fish-stone { color: var(--stone); }
.fish-parchment { color: var(--parchment); }
.fish-violet { color: var(--violet); }
.purple { stroke: var(--violet); }
.mint { stroke: var(--mint); }
.spot { fill: var(--coral); stroke: var(--coral); }
.detail, .rays { opacity: .75; }

.narrative-river {
  position: relative;
  padding: 30vh 7vw 18vh;
  min-height: 150vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 920px) minmax(0, 1fr);
  row-gap: 8vh;
  background: linear-gradient(to bottom, var(--ink) 0, var(--linen) 30vh, var(--linen) 100%);
  overflow: hidden;
}

.river-lines {
  position: absolute;
  left: 50%;
  top: 21vh;
  transform: translateX(-50%);
  width: min(62vw, 760px);
  height: calc(100% - 27vh);
  pointer-events: none;
}

.river-path {
  fill: none;
  stroke: var(--stone);
  stroke-width: .45;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: .55;
  transition: stroke-dashoffset 1.6s ease, stroke .9s ease;
}

.river-path.visible {
  stroke-dashoffset: 0;
  stroke: var(--mint);
}

.text-hex {
  width: clamp(230px, 25vw, 340px);
  height: clamp(266px, 28.9vw, 393px);
  grid-column: 2;
  background: rgba(245,240,232,.96);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.8rem 3rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease, filter 1.2s ease;
}

.text-hex.visible {
  opacity: 1;
  transform: translateY(0);
  filter: drop-shadow(0 0 20px rgba(0,229,160,.18));
}

.text-hex.left { justify-self: start; }
.text-hex.right { justify-self: end; }

.text-hex span, .text-hex p { position: relative; z-index: 2; }
.text-hex span {
  font-family: "Noto Sans JP", sans-serif;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: .65rem;
}

.text-hex p {
  margin: 0;
  font-size: clamp(.95rem, 1.1vw, 1.15rem);
  line-height: 1.72;
  max-width: 28ch;
}

.flip-gallery {
  position: relative;
  min-height: 90vh;
  padding: 10vh 5vw 16vh;
  background: var(--linen);
  overflow: hidden;
}

.brush-rule {
  width: min(72vw, 720px);
  height: 42px;
  margin: 0 auto 7vh;
}

.brush-rule path {
  fill: none;
  stroke: var(--stone);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .4;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, clamp(160px, 20vw, 280px));
  justify-content: center;
  gap: 4px 10px;
}

.flip-hex {
  width: clamp(160px, 20vw, 280px);
  height: clamp(185px, 23.1vw, 323px);
  perspective: 1000px;
  margin-top: calc(var(--row-offset, 0) * -2rem);
}

.flip-hex:nth-child(3n+2) { transform: translateY(48%); }

.flip-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
  transform-style: preserve-3d;
}

.flip-hex.flipped .flip-inner { transform: rotateY(180deg); }

.face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  background: var(--linen);
  filter: drop-shadow(0 0 0 var(--stone));
}

.face svg {
  width: 48%;
  fill: none;
  stroke: var(--charcoal);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .8;
}

.back {
  transform: rotateY(180deg);
  padding: 26%;
  background: color-mix(in srgb, var(--accent) 10%, var(--linen));
}

.back p {
  margin: 0;
  text-align: center;
  font-size: clamp(.83rem, 1vw, 1rem);
  line-height: 1.55;
  max-width: 22ch;
}

.flip-hex.flipped .face { filter: drop-shadow(0 0 20px color-mix(in srgb, var(--accent) 60%, transparent)); }
.flip-hex.flipped .face::before { border-color: var(--accent); }

.flip-hex::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--hex);
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 62%, transparent), transparent 60%);
  transform: scale(0);
}

.flip-hex.splash::after { animation: inkSplash .4s ease-out; }

.closing-breath {
  min-height: 60vh;
}

.closing-hex {
  width: clamp(240px, 30vw, 400px);
  height: clamp(277px, 34.65vw, 462px);
  display: grid;
  place-items: center;
  background: rgba(245,240,232,.028);
  animation: closingPulse 6s ease-in-out infinite;
}

.closing-hex p {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  letter-spacing: .08em;
  color: rgba(240,230,211,.6);
  margin: 0;
}

.watermark {
  position: absolute;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 6rem;
  opacity: .04;
  pointer-events: none;
  z-index: 0;
}

.mark-left { left: 8vw; top: 14vh; color: var(--parchment); }
.mark-right { right: 8vw; top: 34vh; color: var(--charcoal); }
.flip-gallery .mark-left { color: var(--charcoal); top: 6vh; }

@keyframes rosetteIn {
  from { opacity: 0; scale: .8; }
  to { opacity: 1; scale: 1; }
}

@keyframes lazySwim {
  0%, 100% { transform: translateX(-8px) rotate(-1deg); }
  50% { transform: translateX(8px) rotate(1.5deg); }
}

@keyframes inkSplash {
  0% { opacity: .6; transform: scale(0); }
  100% { opacity: 0; transform: scale(1.5); }
}

@keyframes closingPulse {
  0%, 100% { filter: drop-shadow(0 0 0 var(--stone)); }
  50% { filter: drop-shadow(0 0 20px rgba(0,229,160,.45)); }
}

@media (max-width: 820px) {
  .hero-rosette .hex { --size: clamp(120px, 27vw, 180px); }
  .narrative-river { grid-template-columns: 1fr; padding-inline: 5vw; }
  .text-hex { grid-column: 1; }
  .text-hex.left, .text-hex.right { justify-self: center; }
  .text-hex.right { transform: translate(7vw, 20px); }
  .text-hex.left { transform: translate(-7vw, 20px); }
  .text-hex.visible { transform: translate(0, 0); }
  .gallery-grid { grid-template-columns: repeat(2, clamp(150px, 42vw, 220px)); row-gap: 5rem; }
  .flip-hex:nth-child(3n+2) { transform: none; }
  .flip-hex:nth-child(even) { transform: translateY(38%); }
}

@media (max-width: 520px) {
  .hero-rosette { width: 100vw; height: 76vh; }
  .hero-rosette .hex { --size: 34vw; }
  h1 { font-size: 2.15rem; }
  .gallery-grid { grid-template-columns: minmax(180px, 70vw); row-gap: 1.2rem; }
  .flip-hex:nth-child(even) { transform: none; }
  .text-hex { width: 88vw; height: calc(88vw * 1.155); padding: 4rem 3.2rem; }
}