:root {
  --cream: #F3E6C8;
  --matcha: #A9B978;
  --salmon: #D98973;
  --sky: #8FB6C8;
  --ink: #2B2118;
  --shadow: #C7AD83;
  --plum: #7B4D61;
  --font-main: "Commissioner", Inter, system-ui, sans-serif;
  --font-hand: "Gaegu", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-main);
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .35;
  background:
    radial-gradient(circle at 20% 15%, rgba(43, 33, 24, .12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 52%, rgba(123, 77, 97, .11) 0 1px, transparent 1.5px),
    linear-gradient(115deg, transparent 0 48%, rgba(199, 173, 131, .18) 49% 51%, transparent 52%);
  background-size: 18px 18px, 27px 27px, 100% 100%;
  mix-blend-mode: multiply;
}

.site-shell { position: relative; z-index: 1; }

.spread {
  min-height: 100vh;
  position: relative;
  padding: clamp(22px, 4vw, 54px);
  display: grid;
  gap: 18px;
  isolation: isolate;
}

.curve-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.story-path {
  fill: none;
  stroke: var(--plum);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22 18;
  filter: drop-shadow(3px 3px 0 rgba(43, 33, 24, .18));
  opacity: .75;
  transition: stroke-dashoffset .6s ease, opacity .25s ease, stroke-width .25s ease;
}

.path-plum { stroke: #7B4D61; }
.path-salmon { stroke: #D98973; }
.path-matcha { stroke: #A9B978; }
.path-sky { stroke: #8FB6C8; }
.story-path.is-wiggling { opacity: 1; stroke-width: 15; }
.story-path.always-on { stroke-dasharray: 30 16; animation: crawl 9s linear infinite; }

@keyframes crawl { to { stroke-dashoffset: -184; } }

.block {
  position: relative;
  border: 3px solid #2B2118;
  background: #F3E6C8;
  box-shadow: 8px 8px 0 #C7AD83;
  padding: clamp(18px, 2.6vw, 34px);
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.block::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 86px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43,33,24,.22) 0 2px, transparent 2.5px);
  background-size: 12px 12px;
  opacity: .28;
}

.lift-block:hover,
.lift-block.is-lifted {
  transform: translate(-5px, -12px) rotate(var(--tilt, 0deg));
  box-shadow: 14px 18px 0 #C7AD83;
}

.tilted-left { --tilt: -1.8deg; transform: rotate(var(--tilt)); }
.tilted-right { --tilt: 2deg; transform: rotate(var(--tilt)); }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 900; letter-spacing: -.045em; line-height: .9; }
p { font-weight: 500; line-height: 1.35; font-size: clamp(1rem, 1.4vw, 1.22rem); }

.scribble { font-family: var(--font-hand); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.75rem); line-height: 1; }
.scribble.big { font-size: clamp(1.6rem, 3vw, 2.9rem); color: #7B4D61; }
.label, .section-tag {
  display: inline-block;
  border: 3px solid #2B2118;
  background: #D98973;
  padding: 6px 12px;
  box-shadow: 4px 4px 0 #2B2118;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-spread {
  grid-template-columns: 1.2fr .85fr .75fr;
  grid-template-rows: .8fr .55fr .65fr;
  background: linear-gradient(180deg, #F3E6C8 0%, rgba(169,185,120,.28) 100%);
}

.masthead-block { grid-column: 1 / 3; grid-row: 1 / 3; background: #F3E6C8; transform: rotate(-1.1deg); }
.masthead-block h1 {
  margin: .08em 0 .12em;
  font-size: clamp(4.5rem, 13.5vw, 13rem);
  letter-spacing: -.08em;
  text-transform: lowercase;
}
.lead { max-width: 740px; font-size: clamp(1.25rem, 2.2vw, 2.15rem); font-weight: 700; }
.sky-block { grid-column: 3; grid-row: 1; background: #8FB6C8; }
.small-note { grid-column: 3; grid-row: 2; background: #D98973; align-self: start; }
.map-block { grid-column: 2 / 4; grid-row: 3; background: #A9B978; margin-left: 24px; }
.fish-note { grid-column: 1; grid-row: 3; background: #F3E6C8; width: 82%; justify-self: center; }
.fish { font-family: var(--font-hand); font-size: clamp(2rem, 4vw, 4.8rem); color: #7B4D61; white-space: nowrap; }

.tape, .washi {
  position: absolute;
  width: 96px;
  height: 28px;
  background: rgba(143, 182, 200, .72);
  border: 2px solid rgba(43,33,24,.5);
  transform: rotate(-8deg);
}
.tape-a { top: -17px; left: 12%; }
.washi { top: -15px; left: 32px; background: rgba(217,137,115,.72); }
.pin { width: 18px; height: 18px; border: 3px solid #2B2118; background: #D98973; border-radius: 50%; position: absolute; top: 14px; right: 22px; box-shadow: 3px 3px 0 #2B2118; }
.mug-row { display: flex; align-items: center; gap: 12px; font-size: 2.2rem; }
.steam { font-family: var(--font-hand); color: #7B4D61; animation: wiggleText 2s ease-in-out infinite; }

.doodle-map { height: 120px; position: relative; margin: 10px 0; }
.doodle-map::before, .doodle-map::after { content: ""; position: absolute; border-top: 5px dashed #2B2118; transform-origin: left center; }
.doodle-map::before { width: 55%; left: 18%; top: 42%; transform: rotate(-12deg); }
.doodle-map::after { width: 48%; left: 34%; top: 58%; transform: rotate(10deg); }
.doodle-map span { position: absolute; width: 32px; height: 32px; border: 3px solid #2B2118; border-radius: 50%; background: #F3E6C8; box-shadow: 4px 4px 0 #2B2118; }
.doodle-map span:nth-child(1) { left: 14%; top: 18%; }
.doodle-map span:nth-child(2) { left: 38%; top: 54%; background: #D98973; }
.doodle-map span:nth-child(3) { left: 62%; top: 22%; background: #8FB6C8; }
.doodle-map span:nth-child(4) { left: 82%; top: 58%; background: #7B4D61; }

.companion-spread { grid-template-columns: repeat(6, 1fr); grid-template-rows: auto 1fr 1fr; background: rgba(143, 182, 200, .24); }
.section-tag { position: relative; z-index: 2; grid-column: 1 / 4; background: #A9B978; width: max-content; }
.headline-scrap { background: #F3E6C8; min-height: 260px; }
.headline-scrap h2 { font-size: clamp(2rem, 4.5vw, 4.5rem); }
.headline-scrap:nth-of-type(1) { grid-column: 1 / 4; grid-row: 2; transform: rotate(-1deg); }
.headline-scrap.blue { grid-column: 4 / 7; grid-row: 2; background: #8FB6C8; transform: rotate(1.4deg); margin-top: 34px; }
.center-stamp { grid-column: 3 / 5; grid-row: 2 / 4; align-self: center; z-index: 3; background: #D98973; text-align: center; transform: rotate(-2deg); }
.stamp { display: inline-block; border: 6px solid #2B2118; border-radius: 50%; padding: 28px; font-weight: 900; font-size: clamp(1.8rem, 4vw, 4rem); line-height: .82; color: #7B4D61; transform: rotate(8deg); }
.headline-scrap.green { grid-column: 1 / 3; grid-row: 3; background: #A9B978; transform: rotate(1.8deg); }
.headline-scrap.plum { grid-column: 5 / 7; grid-row: 3; background: #7B4D61; color: #F3E6C8; transform: rotate(-1.2deg); }
.headline-scrap.plum .label { background: #F3E6C8; color: #2B2118; }

.wall-spread { grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(5, 1fr); background: linear-gradient(180deg, rgba(217,137,115,.2), rgba(243,230,200,1)); }
.wall-title { grid-column: 1 / 5; grid-row: 1 / 3; background: #C7AD83; transform: rotate(1deg); z-index: 2; }
.wall-title h2 { font-size: clamp(3rem, 7vw, 7.5rem); }
.note h3 { font-size: clamp(1.9rem, 3vw, 3.5rem); }
.note-one { grid-column: 5 / 8; grid-row: 1 / 3; background: #F3E6C8; transform: rotate(-2deg); }
.note-two { grid-column: 2 / 5; grid-row: 3 / 5; background: #8FB6C8; transform: rotate(2deg); margin-top: -18px; }
.note-three { grid-column: 5 / 9; grid-row: 3 / 4; background: #A9B978; transform: rotate(-1deg); }
.note-four { grid-column: 6 / 8; grid-row: 4 / 6; background: #D98973; transform: rotate(1.5deg); }
.round-stamp { border: 5px solid #2B2118; border-radius: 50%; width: 150px; height: 150px; display: grid; place-items: center; text-align: center; font-weight: 900; color: #7B4D61; font-size: 2rem; line-height: .85; transform: rotate(-10deg); }

.poster-spread { place-items: center; background: #A9B978; }
.final-poster { width: min(1040px, 92vw); min-height: 64vh; background: #F3E6C8; text-align: center; display: grid; place-items: center; align-content: center; gap: 20px; transform: rotate(-.6deg); }
.final-poster h2 { font-size: clamp(3.6rem, 11vw, 11rem); margin: 0; }
.final-poster p:not(.scribble) { font-size: clamp(1.4rem, 2.6vw, 2.7rem); font-weight: 800; max-width: 760px; }
.sticker-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.sticker-row span { border: 3px solid #2B2118; background: #8FB6C8; padding: 10px 14px; box-shadow: 5px 5px 0 #2B2118; font-weight: 900; transform: rotate(var(--r)); }
.sticker-row span:nth-child(1) { --r: -3deg; background: #D98973; }
.sticker-row span:nth-child(2) { --r: 2deg; background: #8FB6C8; }
.sticker-row span:nth-child(3) { --r: -1deg; background: #A9B978; }

@keyframes wiggleText { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(3deg); } }

@media (max-width: 860px) {
  .spread { min-height: auto; grid-template-columns: 1fr !important; grid-template-rows: auto !important; padding: 24px; }
  .block, .section-tag { grid-column: 1 !important; grid-row: auto !important; margin: 0 !important; width: auto !important; }
  .masthead-block h1 { font-size: clamp(3.8rem, 20vw, 7rem); }
  .curve-field { opacity: .45; }
  .center-stamp { align-self: auto; }
  .final-poster { min-height: 70vh; }
}