:root {
  --cream: #F4E8D0;
  --glass: #8FC7C7;
  --teak: #3B3228;
  --coral: #E98F72;
  --peach: #F2BE8D;
  --navy: #22495A;
  --kelp: #6F8A62;
  --shadow: 0 10px 28px rgba(59, 50, 40, 0.14);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--teak);
  font-family: "Nunito", sans-serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(143, 199, 199, .42) 0 12%, transparent 25%),
    radial-gradient(circle at 82% 28%, rgba(242, 190, 141, .38) 0 11%, transparent 24%),
    radial-gradient(circle at 44% 86%, rgba(233, 143, 114, .16) 0 10%, transparent 23%),
    linear-gradient(135deg, var(--cream), var(--glass));
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  z-index: 10;
  background-image:
    radial-gradient(rgba(59, 50, 40, .11) .8px, transparent .8px),
    radial-gradient(rgba(244, 232, 208, .32) .9px, transparent .9px);
  background-size: 19px 19px, 31px 31px;
  mix-blend-mode: multiply;
}

.shore-canvas {
  background: transparent;
  transition: background-color 800ms ease;
}

.room {
  position: relative;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 72px);
  display: grid;
  align-items: center;
  overflow: hidden;
}

.hero-room { background: rgba(244, 232, 208, .36); }
.works-room { background: linear-gradient(180deg, rgba(143, 199, 199, .72), rgba(244, 232, 208, .3)); }
.botany-room { background: linear-gradient(180deg, rgba(242, 190, 141, .56), rgba(244, 232, 208, .65)); }
.notes-room { background: var(--navy); color: var(--cream); }

.tide-index {
  position: fixed;
  right: 24px;
  bottom: 28px;
  width: 42px;
  height: 172px;
  z-index: 20;
}

.index-line {
  position: absolute;
  inset: 6px 4px;
  fill: none;
  stroke: rgba(59, 50, 40, .46);
  stroke-width: 2;
  stroke-linecap: round;
}

.pebble {
  position: absolute;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 52% 44% 48% 58%;
  border: 1px solid rgba(59, 50, 40, .55);
  box-shadow: var(--shadow);
  transition: transform 240ms ease, border-color 240ms ease;
}

.pebble span {
  position: absolute;
  right: 31px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  background: var(--cream);
  color: var(--teak);
  border: 1px solid var(--teak);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.pebble:hover span, .pebble.active span { opacity: 1; transform: translateY(-50%); }
.pebble:hover, .pebble.active { transform: scale(1.18) rotate(8deg); border-color: var(--coral); }
.pebble-one { top: 0; background: var(--cream); }
.pebble-two { top: 45px; background: var(--glass); }
.pebble-three { top: 92px; background: var(--peach); }
.pebble-four { top: 138px; background: var(--navy); }

.studio-board {
  position: relative;
  width: min(1120px, 100%);
  min-height: 640px;
  margin: 0 auto;
  border: 1px solid rgba(59, 50, 40, .25);
  border-radius: 42px;
  background:
    radial-gradient(circle at 26% 20%, rgba(143, 199, 199, .38), transparent 26%),
    radial-gradient(circle at 76% 70%, rgba(242, 190, 141, .5), transparent 24%),
    rgba(244, 232, 208, .72);
  box-shadow: var(--shadow);
  padding: clamp(28px, 6vw, 74px);
}

.nameplate {
  position: relative;
  z-index: 2;
  margin: 72px 0 20px;
  font-family: "Fredoka", sans-serif;
  font-size: clamp(72px, 15vw, 194px);
  line-height: .78;
  letter-spacing: -.055em;
  color: var(--navy);
  max-width: 690px;
}

.nameplate span { display: block; }

.serif-note {
  position: relative;
  z-index: 3;
  max-width: 520px;
  font-family: "Fraunces", serif;
  font-size: clamp(21px, 3vw, 34px);
  line-height: 1.2;
  color: var(--teak);
}

.serif-note.light { color: var(--cream); }

.paper-tab, .label-tab {
  display: inline-block;
  background: var(--cream);
  border: 1px solid rgba(59, 50, 40, .68);
  border-radius: 999px;
  padding: 7px 13px;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 12px;
  text-transform: uppercase;
  box-shadow: 3px 4px 0 rgba(59, 50, 40, .12);
}

.intro-tab { position: absolute; top: 34px; left: 42px; transform: rotate(-1deg); }

.floating-fragment, .work-tile, .specimen-card, .note-piece {
  animation: cork-bounce both;
  animation-duration: 850ms;
  animation-delay: var(--delay, 0ms);
  animation-timing-function: cubic-bezier(.22,1.35,.36,1);
}

@keyframes cork-bounce {
  0% { opacity: 0; transform: translateY(24px) scale(.96) rotate(var(--tilt, 0deg)); }
  68% { opacity: 1; transform: translateY(-4px) scale(1.025) rotate(var(--tilt, 0deg)); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(var(--tilt, 0deg)); }
}

.floating-fragment {
  position: absolute;
  background: var(--cream);
  border: 1px solid var(--teak);
  box-shadow: var(--shadow);
  padding: 16px;
  border-radius: 28px;
}

.fragment-wide { right: 78px; top: 96px; width: 270px; }
.fragment-round { right: 305px; bottom: 62px; width: 160px; height: 160px; border-radius: 50%; text-align: center; background: var(--peach); }
.fragment-tall { right: 56px; bottom: 112px; width: 178px; min-height: 250px; background: var(--glass); }
.fragment-round svg { width: 96px; fill: rgba(111, 138, 98, .72); margin-top: 14px; }
.floating-fragment strong { display: block; font-family: "Fredoka"; font-size: 22px; margin-top: 12px; }
.floating-fragment small, .specimen-code { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }

.thumb, .tiny-window, .collage {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(59, 50, 40, .62);
  border-radius: 22px;
  background: var(--glass);
}

.horizon-thumb { height: 104px; background: linear-gradient(var(--glass) 0 48%, var(--peach) 49% 62%, var(--cream) 63%); }
.horizon-thumb i, .horizon-thumb b, .horizon-thumb em { position: absolute; display: block; border-radius: 999px; }
.horizon-thumb i { width: 84px; height: 38px; background: var(--coral); left: 22px; top: 20px; }
.horizon-thumb b { width: 120px; height: 10px; background: var(--navy); left: 86px; bottom: 22px; }
.horizon-thumb em { width: 64px; height: 64px; background: var(--cream); right: 24px; top: 18px; }
.tiny-window { height: 142px; margin: 22px 0; background: linear-gradient(90deg, var(--cream), var(--peach)); }
.tiny-window::before { content: ""; position: absolute; inset: 18px; border: 2px solid var(--navy); border-radius: 16px; }

.bg-bean { position: absolute; border-radius: 55% 45% 62% 38%; opacity: .42; z-index: 0; }
.bean-a { width: 300px; height: 118px; background: var(--coral); left: -70px; top: 100px; transform: rotate(-22deg); }
.bean-b { width: 410px; height: 150px; background: var(--kelp); right: -120px; bottom: 80px; transform: rotate(18deg); }

.tide-rule { width: min(900px, 80vw); margin: 30px auto 0; display: block; fill: none; stroke: var(--kelp); stroke-width: 4; stroke-linecap: round; opacity: .76; }
.hero-rule { position: absolute; left: 10vw; bottom: 24px; }

.room-heading { align-self: end; margin: 0 auto 28px; width: min(1120px, 100%); }
.room-heading h2, .closing-composition h2 {
  font-family: "Fredoka", sans-serif;
  font-size: clamp(40px, 7vw, 92px);
  line-height: .93;
  margin: 18px 0 0;
  color: var(--navy);
  letter-spacing: -.035em;
}
.notes-room .closing-composition h2 { color: var(--cream); }

.portfolio-grid {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(128px, auto);
  gap: 22px;
  align-self: start;
}

.work-tile {
  position: relative;
  grid-column: span 4;
  min-height: 330px;
  padding: 22px;
  border: 1px solid var(--teak);
  border-radius: 32px;
  background: var(--cream);
  box-shadow: var(--shadow);
  transform: rotate(var(--tilt));
  transition: transform 250ms ease, border-color 250ms ease, background 250ms ease;
}

.work-tile:hover { transform: translateY(-4px) rotate(var(--tilt)); border-color: var(--coral); }
.work-tile:hover .label-tab { transform: translateX(8px); }
.work-tile:hover .pressed-flower { opacity: .78; transform: rotate(12deg) scale(1); }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-7 { grid-column: span 7; }
.tall { min-height: 440px; }
.peach { background: var(--peach); }
.coral { background: rgba(233, 143, 114, .72); }
.navy { background: var(--navy); color: var(--cream); }
.navy h3 { color: var(--cream); }
.label-tab { transition: transform 250ms ease; }
.work-tile h3 { font-family: "Fredoka"; font-size: 34px; line-height: 1; margin: 18px 0 10px; color: var(--navy); }
.work-tile p { font-size: 17px; line-height: 1.55; margin: 0; max-width: 420px; }

.collage { height: 158px; margin-top: 18px; background: var(--glass); }
.collage span, .collage i, .collage b, .collage em { position: absolute; display: block; }
.collage-one span { width: 58%; height: 48%; background: var(--peach); left: 10%; top: 15%; border-radius: 18px; }
.collage-one i { width: 90px; height: 90px; background: var(--coral); right: 12%; top: 19%; border-radius: 50%; }
.collage-one b { width: 72%; height: 8px; background: var(--navy); left: 14%; bottom: 24px; border-radius: 99px; }
.collage-two span { inset: 18px 46px 18px 18px; background: var(--cream); border-radius: 20px; }
.collage-two i { width: 70px; height: 36px; background: var(--kelp); right: 20px; top: 32px; border-radius: 50%; }
.collage-two b { width: 30px; height: 110px; background: var(--coral); right: 42px; bottom: 18px; border-radius: 99px; }
.collage-three span { width: 120px; height: 120px; background: var(--cream); border-radius: 47% 53% 42% 58%; left: 24px; top: 18px; }
.collage-three i { inset: 40px 20px auto 172px; height: 14px; background: var(--navy); border-radius: 99px; }
.collage-three b { inset: 76px 50px auto 172px; height: 14px; background: var(--kelp); border-radius: 99px; }
.collage-four span { width: 44%; height: 100%; background: var(--glass); left: 0; top: 0; }
.collage-four i { width: 135px; height: 90px; border: 3px solid var(--cream); left: 24%; top: 22%; border-radius: 24px; }
.collage-four b { width: 180px; height: 28px; background: var(--coral); right: 30px; bottom: 28px; border-radius: 999px; }
.collage-five span { inset: 18px; border: 2px solid var(--kelp); border-radius: 28px; }
.collage-five i { width: 70px; height: 70px; background: var(--peach); border-radius: 50%; left: 48px; top: 42px; }
.collage-five b { width: 56%; height: 12px; background: var(--navy); right: 34px; top: 72px; border-radius: 99px; }
.collage-six span { width: 78px; height: 78px; background: var(--cream); border-radius: 50%; left: 36px; top: 38px; }
.collage-six i { width: 140px; height: 48px; background: var(--navy); border-radius: 999px; right: 30px; top: 28px; }
.collage-six b { width: 62%; height: 12px; background: var(--kelp); right: 25px; bottom: 38px; border-radius: 99px; }

.pressed-flower {
  position: absolute;
  width: 76px;
  height: 102px;
  right: 18px;
  top: 18px;
  opacity: 0;
  transform: rotate(-8deg) scale(.8);
  transition: opacity 280ms ease, transform 280ms ease;
}
.pressed-flower::before { content: ""; position: absolute; width: 3px; height: 74px; background: var(--kelp); left: 36px; bottom: 0; border-radius: 99px; }
.pressed-flower::after { content: ""; position: absolute; width: 42px; height: 42px; left: 16px; top: 0; background: var(--coral); clip-path: polygon(50% 0, 62% 32%, 98% 22%, 73% 52%, 98% 78%, 62% 68%, 50% 100%, 38% 68%, 2% 78%, 27% 52%, 2% 22%, 38% 32%); }

.specimen-band {
  width: min(1180px, 100%);
  margin: 10px auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 22px;
}

.specimen-card {
  min-height: 460px;
  border: 1px solid var(--teak);
  border-radius: 38px;
  padding: 28px;
  background: rgba(244, 232, 208, .84);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.specimen-card:nth-child(even) { transform: translateY(34px); background: rgba(143, 199, 199, .55); }
.specimen-card h3 { font-family: "Fraunces"; font-size: 32px; margin: 230px 0 12px; color: var(--navy); }
.specimen-card p { line-height: 1.55; font-size: 16px; }
.specimen-card span { position: absolute; left: 28px; bottom: 24px; font-weight: 900; letter-spacing: .1em; }
.flower-stem { position: absolute; top: 36px; left: 50%; width: 4px; height: 210px; background: var(--kelp); border-radius: 99px; }
.flower-stem::before, .flower-stem::after { content: ""; position: absolute; border-radius: 50%; background: rgba(111, 138, 98, .5); }
.flower-stem::before { width: 68px; height: 34px; left: -66px; top: 86px; transform: rotate(-25deg); }
.flower-stem::after { width: 92px; height: 92px; left: -44px; top: -22px; background: rgba(233, 143, 114, .62); clip-path: polygon(50% 0, 62% 32%, 98% 22%, 73% 52%, 98% 78%, 62% 68%, 50% 100%, 38% 68%, 2% 78%, 27% 52%, 2% 22%, 38% 32%); }
.flower-b::after { background: rgba(242, 190, 141, .72); }
.flower-c::after { background: rgba(143, 199, 199, .78); }
.flower-d::after { background: rgba(111, 138, 98, .58); }

.closing-composition {
  position: relative;
  width: min(980px, 100%);
  min-height: 620px;
  margin: 0 auto;
  padding: clamp(34px, 6vw, 76px);
  border: 1px solid rgba(244, 232, 208, .52);
  border-radius: 46px;
  background: radial-gradient(circle at 72% 26%, rgba(143, 199, 199, .28), transparent 24%), rgba(34, 73, 90, .95);
  box-shadow: var(--shadow);
}
.closing-composition .paper-tab { color: var(--teak); }
.closing-rule { stroke: var(--cream); margin: 36px 0; }
.note-piece { position: absolute; background: var(--cream); color: var(--teak); border: 1px solid var(--teak); border-radius: 22px; padding: 16px 20px; font-weight: 900; box-shadow: var(--shadow); }
.note-one { right: 70px; top: 82px; transform: rotate(2deg); }
.note-two { left: 88px; bottom: 70px; transform: rotate(-2deg); }
.sea-glass-piece { position: absolute; right: 126px; bottom: 86px; width: 145px; height: 104px; background: var(--glass); opacity: .72; border-radius: 48% 52% 38% 62%; transform: rotate(14deg); }

@media (max-width: 860px) {
  .room { padding: 24px 18px 74px; }
  .studio-board { min-height: 760px; }
  .fragment-wide { left: 24px; right: auto; top: 430px; width: 238px; }
  .fragment-round { right: 22px; bottom: 108px; }
  .fragment-tall { display: none; }
  .portfolio-grid, .specimen-band { grid-template-columns: 1fr; }
  .span-3, .span-4, .span-5, .span-7 { grid-column: 1; }
  .specimen-card:nth-child(even) { transform: none; }
  .tide-index { right: 12px; bottom: 14px; transform: scale(.86); transform-origin: bottom right; }
  .room-heading h2, .closing-composition h2 { font-size: 48px; }
}