:root {
  /* DESIGN typography tokens: IBM Plex Sans JP** for compact sidebar labels; Space Mono** only for short score stamps. */
  --kelp: #243B35;
  --coral: #FF8FA3;
  --lavender: #B9B4FF;
  --cream: #F4E8CF;
  --brown: #8A5A44;
  --mint: #9EEBD9;
  --blue: #78AFC4;
  --display: "Cormorant Garamond", Georgia, serif;
  --body: "EB Garamond", Georgia, serif;
  --ui: "IBM Plex Sans JP", system-ui, sans-serif;
  --mono: "Space Mono", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--kelp);
  background:
    radial-gradient(circle at 86% 18%, rgba(255, 143, 163, .28), transparent 20rem),
    radial-gradient(circle at 42% 80%, rgba(158, 235, 217, .42), transparent 26rem),
    linear-gradient(135deg, #78AFC4 0%, #9EEBD9 42%, #F4E8CF 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(36, 59, 53, .045) 1px, transparent 1px),
    repeating-linear-gradient(90deg, rgba(185, 180, 255, .18) 0 2px, transparent 2px 14px);
  background-size: 100% 5px, 32px 32px;
  mix-blend-mode: multiply;
  opacity: .45;
  z-index: 4;
}

.reluctant-margin {
  position: fixed;
  inset: 0 auto 0 0;
  width: clamp(230px, 22vw, 330px);
  padding: 26px 20px;
  z-index: 10;
  background:
    radial-gradient(circle at 20% 16%, rgba(255, 143, 163, .24), transparent 6rem),
    linear-gradient(90deg, rgba(244, 232, 207, .96), rgba(244, 232, 207, .76));
  border-right: 2px dashed rgba(138, 90, 68, .55);
  box-shadow: 18px 0 40px rgba(36, 59, 53, .14);
  font-family: var(--ui);
  overflow: hidden;
}

.spine-tear {
  position: absolute;
  right: -11px;
  top: 0;
  width: 22px;
  height: 100%;
  background: repeating-linear-gradient(180deg, transparent 0 16px, rgba(138, 90, 68, .3) 16px 20px), var(--cream);
  clip-path: polygon(0 0, 100% 3%, 38% 8%, 92% 14%, 26% 21%, 100% 30%, 35% 40%, 92% 54%, 28% 65%, 100% 79%, 32% 90%, 80% 100%, 0 100%);
}

.site-mark strong {
  display: block;
  font: 700 34px/0.86 var(--display);
  letter-spacing: -.04em;
}

.site-mark em, .crossouts, .meter-labels, .receipt-strip, .kicker { font-family: var(--ui); }
.site-mark em { color: var(--brown); font-size: 12px; }
.tiny-shell { color: var(--coral); font-size: 28px; }

.chapter-tabs { margin: 34px 0 20px; display: grid; gap: 10px; }
.tab {
  border: 1px solid rgba(36, 59, 53, .25);
  background: rgba(244, 232, 207, .58);
  color: var(--kelp);
  padding: 11px 12px;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 2px 8px;
  transform: rotate(-1deg);
  transition: transform .35s ease, background .35s ease, box-shadow .35s ease;
}
.tab:nth-child(even) { transform: rotate(1deg); }
.tab span, .tab i { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--blue); }
.tab b { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.tab i { grid-column: 2; color: var(--brown); }
.tab.active { background: rgba(158, 235, 217, .42); box-shadow: 5px 5px 0 rgba(185, 180, 255, .55); transform: rotate(0) translateX(8px); }

.crossouts { display: grid; gap: 8px; font-size: 12px; color: var(--brown); }
.crossouts del { color: var(--coral); }
.tide-ticks { position: absolute; left: 14px; bottom: 122px; display: grid; gap: 12px; }
.tide-ticks span { width: 34px; height: 2px; background: var(--blue); opacity: .55; }
.tide-ticks span.active { background: var(--mint); opacity: 1; box-shadow: 0 0 12px var(--mint); }
.meter-block { position: absolute; left: 20px; right: 20px; bottom: 44px; }
.meter-labels { display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 8px; color: var(--brown); }
.emotion-meter { position: relative; height: 12px; border: 1px solid var(--kelp); background: rgba(120, 175, 196, .18); }
.meter-fill { width: 8%; height: 100%; background: linear-gradient(90deg, var(--mint), var(--coral)); transition: width .6s ease; }
.meter-pin { position: absolute; top: -8px; left: 8%; width: 12px; height: 28px; background: var(--coral); clip-path: polygon(50% 0, 100% 100%, 0 100%); transition: left .6s ease; }
.marginal-stamp { margin-top: 20px; width: max-content; padding: 5px 10px; border: 2px solid var(--coral); color: var(--coral); font: 700 16px var(--mono); transform: rotate(-8deg); mix-blend-mode: multiply; }
.pixel-fish { position: absolute; right: 26px; bottom: 155px; font: 13px var(--mono); color: var(--blue); animation: fish 7s ease-in-out infinite; }

.sheet-stack { margin-left: clamp(230px, 22vw, 330px); min-height: 100vh; position: relative; padding: 5vh 5vw 12vh; }
.waterfield { position: fixed; inset: 0; margin-left: clamp(230px, 22vw, 330px); background: radial-gradient(ellipse at center, transparent 0 44%, rgba(36, 59, 53, .08) 45% 46%, transparent 47%); background-size: 220px 120px; opacity: .38; pointer-events: none; }
.review-sheet {
  position: relative;
  min-height: 86vh;
  margin: 0 auto 8vh;
  max-width: 1060px;
  padding: clamp(34px, 6vw, 78px);
  background:
    radial-gradient(circle at 18% 24%, rgba(120, 175, 196, .16), transparent 8rem),
    radial-gradient(circle at 82% 72%, rgba(255, 143, 163, .13), transparent 11rem),
    var(--cream);
  box-shadow: 0 28px 65px rgba(36, 59, 53, .24), inset 0 0 0 1px rgba(138, 90, 68, .2);
  transform: rotate(var(--tilt, -1.2deg));
  overflow: hidden;
  display: flex;
  align-items: center;
}
.review-sheet:nth-of-type(3) { --tilt: 1.4deg; }
.review-sheet:nth-of-type(4) { --tilt: -2deg; }
.review-sheet:nth-of-type(5) { --tilt: 1deg; }
.review-sheet::before { content:""; position:absolute; inset:14px; border:1px dashed rgba(138,90,68,.32); pointer-events:none; }
.review-sheet::after { content:""; position:absolute; right:-20px; top:10%; width:70px; height:80%; background: repeating-linear-gradient(180deg, rgba(36,59,53,.16) 0 2px, transparent 2px 16px); clip-path: polygon(30% 0,100% 0,68% 12%,100% 21%,62% 34%,100% 52%,70% 67%,100% 82%,58% 100%,30% 100%); opacity:.34; }
.paper-grain { position:absolute; inset:0; background-image: radial-gradient(rgba(138,90,68,.16) .7px, transparent .7px), radial-gradient(rgba(36,59,53,.08) .6px, transparent .6px); background-size: 9px 9px, 15px 15px; opacity:.5; pointer-events:none; }
.spread { position: relative; z-index: 1; width: 100%; }
.kicker { margin: 0 0 12px; color: var(--brown); font-size: 12px; text-transform: uppercase; letter-spacing: .18em; }
h1, h2 { font-family: var(--display); margin: 0; color: var(--kelp); letter-spacing: -.06em; }
h1 { font-size: clamp(66px, 13vw, 158px); line-height: .76; max-width: 820px; }
h2 { font-size: clamp(46px, 8vw, 96px); line-height: .82; max-width: 780px; }
.excerpt { font: 400 clamp(22px, 2.4vw, 34px)/1.32 var(--body); max-width: 760px; margin: 28px 0 0; }
.pullquote { font: italic 600 clamp(30px, 4vw, 58px)/1.08 var(--display); color: var(--brown); max-width: 820px; }
.glitch-title { position: relative; text-shadow: 3px 0 var(--lavender), -3px 0 rgba(255,143,163,.8); }
.glitch-title::before, .glitch-title::after { content: attr(data-text); position:absolute; inset:0; pointer-events:none; opacity:.45; }
.glitch-title::before { color: var(--blue); transform: translate(6px, -2px); clip-path: inset(0 0 52% 0); animation: slip 4s infinite steps(2); }
.glitch-title::after { color: var(--coral); transform: translate(-4px, 3px); clip-path: inset(48% 0 0 0); animation: slip 5s infinite steps(2) reverse; }
.receipt-strip { position:absolute; top: 26px; right: 34px; padding: 10px 18px; background: rgba(244,232,207,.85); border-left: 2px dashed var(--brown); border-right: 2px dashed var(--brown); color: var(--brown); font-size: 11px; transform: rotate(2deg); }
.stamp-wrap { position: absolute; z-index: 3; right: 12%; top: 19%; display: grid; place-items: center; }
.stamp-button { border: 4px solid var(--coral); color: var(--coral); background: transparent; padding: 12px 20px; font: 700 22px var(--mono); text-transform: uppercase; transform: rotate(11deg); cursor: pointer; mix-blend-mode: multiply; transition: transform .3s ease, filter .3s ease; }
.stamp-wrap.revealed .stamp-button { animation: wetstamp .8s linear both; filter: blur(.3px); }
.secret-note { font: italic 700 24px var(--display); color: var(--coral); opacity: 0; transform: translateY(12px) rotate(-7deg); transition: opacity .55s ease .35s, transform .55s ease .35s; }
.stamp-wrap.revealed .secret-note { opacity: 1; transform: translateY(0) rotate(-7deg); }
.annotation { border: 1px solid var(--blue); background: rgba(158,235,217,.35); color: var(--kelp); padding: 9px 14px; font: 500 13px var(--ui); cursor: pointer; box-shadow: 4px 4px 0 rgba(185,180,255,.48); }
.flip-note.warm { background: rgba(255,143,163,.22); border-color: var(--coral); transform: rotate(-2deg); }
.seaglass-rating { position:absolute; left: 64px; bottom: 42px; display:flex; gap:10px; }
.seaglass-rating span { width:28px; height:20px; background: var(--mint); border-radius: 42% 58% 61% 39%; box-shadow: inset 0 -5px 0 rgba(120,175,196,.45); }
.seaglass-rating .dim { opacity:.32; }
.split { display:grid; grid-template-columns: 1.1fr .8fr; gap: 46px; align-items:center; }
.review-card, .scrap { background: rgba(244,232,207,.72); border: 1px solid rgba(138,90,68,.35); padding: 24px; box-shadow: 8px 8px 0 rgba(120,175,196,.22); }
.review-card strong, .scrap b { font: 700 13px var(--mono); color: var(--coral); text-transform: uppercase; }
.review-card p, .scrap span { font: 400 22px/1.35 var(--body); display:block; margin-top:10px; }
.tape { position:absolute; width: 110px; height: 32px; background: rgba(138,90,68,.25); transform: rotate(-12deg); }
.tape-a { top:34px; left:18%; } .tape-b { bottom:38px; right:16%; transform: rotate(18deg); }
.wet-word { position:absolute; right: 9%; bottom: 14%; font: 700 46px var(--display); color: var(--coral); }
.wet-word::after { content: attr(data-swap); position:absolute; left:0; top:0; color: var(--mint); opacity:0; transform: translateY(18px); transition: .5s ease; }
.review-sheet.active .wet-word::after { opacity:1; transform: translateY(0); }
.review-sheet.active .wet-word { color: rgba(255,143,163,.18); }
.board .evidence-grid { display:grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 22px; margin-top: 34px; }
.shell-check { background-image: linear-gradient(45deg, rgba(158,235,217,.3) 25%, transparent 25% 50%, rgba(185,180,255,.26) 50% 75%, transparent 75%); background-size: 22px 22px; }
.perforated { border-left: 5px dotted var(--blue); }
.lavender { background-color: rgba(185,180,255,.22); }
.board-note { position:absolute; right: 12%; top: 15%; transform: rotate(8deg); }
.correction-line { font: 700 clamp(38px, 7vw, 84px) var(--display); position: relative; }
.correction-line .bad { color: var(--brown); text-decoration: line-through; text-decoration-color: var(--coral); }
.correction-line .good { display:block; color: var(--coral); opacity:0; transform: translateX(-20px); transition:.8s ease; }
.review-sheet.active .correction-line .good { opacity:1; transform: translateX(0); }
.shell-icon { position:absolute; right: 11%; top: 15%; font-size: 72px; color: var(--lavender); animation: drift 5s ease-in-out infinite; }
.revision-poem p { margin: 18px 0; font: 400 clamp(25px, 3vw, 42px)/1.18 var(--body); }
.revision-poem del { color: var(--brown); margin-right: 16px; }
.revision-poem span { color: var(--kelp); background: linear-gradient(transparent 58%, rgba(158,235,217,.55) 58%); opacity: .12; transition: opacity .6s ease, color .6s ease; }
.review-sheet.active .revision-poem span { opacity: 1; color: var(--coral); }
.final-stamp { width:max-content; margin-top: 30px; padding: 10px 20px; border: 4px double var(--mint); color: var(--kelp); font: 700 30px var(--mono); transform: rotate(-5deg); background: rgba(158,235,217,.24); }

@keyframes slip { 50% { transform: translate(-3px, 2px); } }
@keyframes wetstamp { 0%,100% { transform: rotate(11deg); } 20% { transform: rotate(11deg) skewX(12deg) translateX(4px); } 45% { transform: rotate(9deg) skewX(-10deg); } 70% { transform: rotate(12deg) scaleY(1.14); } }
@keyframes fish { 50% { transform: translateX(-28px); color: var(--coral); } }
@keyframes drift { 50% { transform: translateY(18px) rotate(12deg); } }

@media (max-width: 820px) {
  .reluctant-margin { position: relative; width: 100%; min-height: 440px; }
  .sheet-stack, .waterfield { margin-left: 0; }
  .split, .board .evidence-grid { grid-template-columns: 1fr; }
  .review-sheet { min-height: auto; padding: 44px 26px; }
  .stamp-wrap { position: relative; right:auto; top:auto; margin: 0 0 24px auto; }
}