:root {
  --espresso: #2A1710;
  --cream: #E9D6B7;
  --glass: #3F7D62;
  --tape: #D86F3D;
  --pulp: #B9A98A;
  --chip: #7EA6A1;
  --gold: #C6A24A;
  --fraunces: 'Fraunces', serif;
  --nunito: 'Nunito Sans', sans-serif;
  --gloria: 'Gloria Hallelujah', cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--espresso);
  color: var(--cream);
  font-family: var(--nunito);
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .28;
  background-image:
    radial-gradient(circle at 12% 17%, rgba(233,214,183,.5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 61% 44%, rgba(185,169,138,.38) 0 1px, transparent 1.8px),
    radial-gradient(circle at 83% 76%, rgba(216,111,61,.25) 0 1px, transparent 1.6px),
    linear-gradient(112deg, rgba(233,214,183,.05), rgba(42,23,16,0));
  background-size: 38px 38px, 53px 53px, 71px 71px, 100% 100%;
  mix-blend-mode: overlay;
}

.cap-nav {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: 12px;
}

.cap {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 33% 28%, var(--gold), #7d6330 58%, var(--espresso) 62%);
  border: 2px dashed var(--pulp);
  color: var(--cream);
  text-decoration: none;
  display: grid;
  place-items: center;
  transform: rotate(var(--turn, -5deg));
  box-shadow: 0 8px 18px rgba(0,0,0,.34);
  transition: transform .4s ease, border-color .4s ease;
}
.cap:nth-child(2) { --turn: 8deg; }
.cap:nth-child(3) { --turn: -11deg; }
.cap:nth-child(4) { --turn: 14deg; }
.cap:nth-child(5) { --turn: -3deg; }
.cap span { font: 13px var(--gloria); }
.cap.active { border-color: var(--tape); transform: scale(1.12) rotate(var(--turn)); }

.counter-path {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 500vh;
  pointer-events: none;
  z-index: 3;
  opacity: .9;
}
#coffeePath {
  fill: none;
  stroke: rgba(198,162,74,.75);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 10px rgba(216,111,61,.28));
}

.room {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(42px, 7vw, 90px);
}

.room::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at var(--ring-x, 70%) var(--ring-y, 30%), transparent 0 72px, rgba(198,162,74,.18) 74px 78px, transparent 81px),
    linear-gradient(130deg, rgba(233,214,183,.08), rgba(126,166,161,.05) 42%, rgba(42,23,16,.3));
}

.crate-room { background: linear-gradient(145deg, #20100b, var(--espresso) 57%, #402418); }
.grounds-room { background: linear-gradient(25deg, #24140e, #3a2116 45%, #21352a); }
.mend-room { background: linear-gradient(145deg, #321c14, #1f100c 65%); }
.lantern-room { background: radial-gradient(circle at 68% 36%, rgba(198,162,74,.2), transparent 34%), linear-gradient(145deg, #1d100c, #332017); }
.return-room { background: linear-gradient(140deg, #2c1710, #17271f 68%, #2A1710); }

h1, h2 { font-family: var(--fraunces); margin: 0; line-height: .9; font-weight: 900; letter-spacing: -.04em; }
h1 { font-size: clamp(62px, 13vw, 178px); color: var(--espresso); }
h2 { font-size: clamp(52px, 9vw, 124px); color: var(--cream); text-shadow: 0 9px 0 rgba(42,23,16,.25); }
p { font-size: clamp(17px, 1.6vw, 23px); line-height: 1.45; }

.kicker, .room-title span { text-transform: uppercase; letter-spacing: .18em; font-weight: 800; color: var(--glass); font-size: 13px; }
.hand-note { font-family: var(--gloria); color: var(--tape); font-size: clamp(18px, 2.1vw, 28px); transform: rotate(-3deg); }
.poem-link {
  display: inline-block;
  color: var(--espresso);
  background: var(--tape);
  text-decoration: none;
  font-weight: 800;
  padding: 13px 22px;
  border-radius: 6px 19px 8px 16px;
  box-shadow: 8px 8px 0 rgba(42,23,16,.18);
  transform: rotate(-2deg);
}

.sleeve-sign, .torn-panel, .cardboard-plaque {
  background: var(--cream);
  color: var(--espresso);
  clip-path: polygon(2% 4%, 98% 1%, 96% 88%, 91% 91%, 88% 98%, 4% 95%, 0 78%);
  box-shadow: 18px 24px 0 rgba(42,23,16,.24), inset 0 0 0 2px rgba(185,169,138,.55);
}

.crate-stack {
  position: absolute;
  left: 6vw;
  top: 8vh;
  width: min(620px, 55vw);
  height: 78vh;
  z-index: -1;
}
.crate { position: absolute; border: 9px solid var(--pulp); background: rgba(185,169,138,.16); box-shadow: inset 0 0 0 11px rgba(42,23,16,.35); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.crate i { position: absolute; left: 8%; right: 8%; height: 9px; background: var(--pulp); opacity: .86; }
.crate i:nth-child(1) { top: 24%; transform: rotate(-7deg); }
.crate i:nth-child(2) { top: 50%; transform: rotate(5deg); }
.crate i:nth-child(3) { top: 73%; transform: rotate(-3deg); }
.crate-a { inset: 0 19% 18% 0; transform: rotate(-4deg); }
.crate-b { inset: 20% 0 0 23%; transform: rotate(7deg); }
.crate-c { inset: 34% 33% 5% 9%; transform: rotate(2deg); }
.crate-stack.open .crate-a { transform: translateX(-26px) rotate(-8deg); }
.crate-stack.open .crate-b { transform: translateX(30px) rotate(11deg); }
.crate-stack.open .crate-c { transform: translateY(18px) rotate(-2deg); }
.glow-door { position: absolute; inset: 13% 24% 8% 28%; background: radial-gradient(circle, rgba(233,214,183,.9), rgba(216,111,61,.42) 44%, transparent 72%); filter: blur(10px); animation: cafeGlow 3s ease-in-out infinite; }

.sleeve-sign { position: relative; width: min(720px, 72vw); margin: 18vh 0 0 auto; padding: clamp(28px, 5vw, 62px); transform: rotate(2deg); }
.door-note { position: absolute; left: 11vw; bottom: 10vh; background: rgba(42,23,16,.55); padding: 8px 16px; }
.receipt-steam { position: absolute; right: 14vw; bottom: 18vh; width: 150px; height: 220px; }
.receipt-steam span { position: absolute; width: 24px; height: 130px; background: var(--cream); opacity: .72; clip-path: polygon(0 0,100% 7%,82% 100%,10% 92%); animation: steamFloat 5s ease-in-out infinite; }
.receipt-steam span:nth-child(2){ left: 45px; animation-delay: -1.6s; }
.receipt-steam span:nth-child(3){ left: 92px; animation-delay: -3s; }

.room-title { position: relative; z-index: 4; max-width: 760px; }
.grounds-room .room-title { margin-left: 46vw; padding-top: 6vh; }
.scoop-note { width: min(430px, 80vw); padding: 28px; margin: 10vh 0 0 8vw; transform: rotate(-4deg); }
.grounds-bowl { position: absolute; right: 9vw; bottom: 11vh; width: min(480px, 42vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #120906 0 20%, var(--espresso) 36%, var(--gold) 37% 40%, var(--pulp) 41% 45%, transparent 46%); box-shadow: inset 0 -28px 0 rgba(42,23,16,.35), 0 30px 60px rgba(0,0,0,.32); }
.grounds-swirl { position: absolute; inset: 18%; border-radius: 50%; border: 18px dotted rgba(185,169,138,.45); animation: saucerSpin 28s linear infinite; }
.sprout { position: absolute; width: 14px; height: 78px; background: var(--glass); bottom: 46%; left: 47%; transform-origin: bottom; border-radius: 12px; }
.sprout::before, .sprout::after { content:""; position:absolute; width:42px; height:25px; background:var(--chip); border-radius: 50% 0 50% 0; top:11px; }
.sprout::before { right: 9px; transform: rotate(-22deg); }
.sprout::after { left: 8px; transform: rotate(112deg); }
.sprout-b { left: 34%; bottom: 38%; transform: scale(.72) rotate(-18deg); }
.sprout-c { left: 62%; bottom: 34%; transform: scale(.58) rotate(20deg); }
.jar-row { position: absolute; left: 8vw; bottom: 6vh; display: flex; gap: 30px; align-items: end; }
.jar { width: 118px; height: 190px; border: 4px solid var(--chip); border-radius: 22px 22px 34px 34px; background: rgba(126,166,161,.18); position: relative; }
.jar.small { transform: scale(.78) rotate(7deg); }
.jar b { position: absolute; left: 20px; right: 20px; top: -16px; height: 20px; background: var(--gold); border-radius: 10px; }
.jar span { position: absolute; bottom: 26px; left: -14px; width: 160px; color: var(--tape); font: 17px var(--gloria); transform: rotate(-8deg); }

.mend-room .room-title { margin: 4vh 0 0 8vw; }
.mend-copy { width: min(520px, 82vw); padding: 32px; margin: 14vh 0 0 auto; transform: rotate(3deg); }
.mug-scene { position: absolute; left: 10vw; bottom: 8vh; width: 520px; max-width: 48vw; height: 430px; }
.mug { position: absolute; left: 0; bottom: 0; width: 275px; height: 235px; border-radius: 0 0 92px 92px; background: var(--chip); box-shadow: inset -28px -24px 0 rgba(42,23,16,.16); }
.mug::after { content:""; position:absolute; right:-62px; top:55px; width:88px; height:92px; border:18px solid var(--chip); border-left:0; border-radius:0 60px 60px 0; }
.crack { position:absolute; background: var(--espresso); width:5px; transform-origin: top; }
.crack-one { height:122px; left:108px; top:0; transform: rotate(14deg); }
.crack-two { height:76px; left:148px; top:56px; transform: rotate(-28deg); }
.tape { position:absolute; width:115px; height:25px; background: var(--tape); box-shadow: 0 0 0 2px rgba(42,23,16,.12); animation: tapePress 2.6s ease-in-out infinite; }
.tape-one { left:66px; top:72px; transform: rotate(28deg); }
.tape-two { left:116px; top:126px; transform: rotate(-18deg); animation-delay:-1.2s; }
.chair-parts { position:absolute; right:18px; bottom:24px; width:170px; height:260px; transform: rotate(7deg); }
.chair-parts i { position:absolute; background: var(--pulp); border-radius:6px; }
.chair-parts i:nth-child(1){ width:145px; height:24px; top:54px; left:5px; }
.chair-parts i:nth-child(2){ width:28px; height:214px; left:28px; top:28px; transform: rotate(9deg); }
.chair-parts i:nth-child(3){ width:28px; height:178px; right:35px; top:70px; transform: rotate(-13deg); }
.stitches { position:absolute; left:305px; top:52px; display:flex; gap:12px; transform: rotate(16deg); }
.stitches span { width:8px; height:46px; background: var(--tape); border-radius:8px; animation: stitchBlink 1.7s ease-in-out infinite; }
.stitches span:nth-child(even){ animation-delay:.4s; }

.lantern-room .room-title { margin-left: 8vw; padding-top: 6vh; }
.lantern-copy { width:min(510px, 80vw); padding:30px; margin: 9vh 0 0 48vw; transform: rotate(4deg); }
.lantern-cluster { position:absolute; left:10vw; bottom:12vh; width:50vw; height:56vh; }
.lantern { position:absolute; width:190px; height:245px; background: var(--cream); clip-path: polygon(15% 6%, 80% 0, 94% 38%, 82% 100%, 18% 93%, 0 36%); box-shadow: 0 0 75px rgba(198,162,74,.72); animation: lanternFlicker 3.5s ease-in-out infinite; }
.lantern::before { content:""; position:absolute; inset:22px; border:2px dashed var(--pulp); opacity:.65; }
.lantern span { position:absolute; inset:48px; background: radial-gradient(circle, var(--gold), transparent 65%); filter: blur(8px); }
.lamp-a { left: 4%; top: 8%; transform: rotate(-8deg); }
.lamp-b { left: 38%; top: 30%; transform: scale(1.24) rotate(5deg); animation-delay:-1s; }
.lamp-c { left: 72%; top: 4%; transform: scale(.78) rotate(11deg); animation-delay:-2s; }
.receipt-garland { position:absolute; right:6vw; top:13vh; display:flex; gap:13px; transform: rotate(-7deg); }
.receipt-garland i { display:block; width:46px; height:150px; background: var(--cream); clip-path: polygon(0 0,100% 5%,92% 100%,8% 96%); opacity:.78; animation: steamFloat 6s ease-in-out infinite; }
.receipt-garland i:nth-child(2n){ background: var(--pulp); animation-delay:-1.3s; }

.shelf-back { position:absolute; left:0; right:0; bottom:9vh; height:35vh; background: repeating-linear-gradient(0deg, rgba(185,169,138,.32) 0 24px, rgba(42,23,16,.16) 24px 32px), linear-gradient(90deg, var(--pulp), #806a48); transform: rotate(-1deg); box-shadow: 0 -18px 0 rgba(42,23,16,.45); }
.return-room .room-title { margin: 7vh 0 0 auto; width:min(700px,72vw); transform: rotate(2deg); }
.return-copy { width:min(545px,82vw); padding:34px; margin: 10vh 0 0 7vw; transform: rotate(-3deg); }
.mini-skyline { position:absolute; right:8vw; bottom:12vh; width:min(560px,52vw); height:430px; }
.cup-planter { position:absolute; left:0; bottom:0; width:160px; height:142px; border-radius:0 0 58px 58px; background:var(--chip); }
.cup-planter i { position:absolute; left:68px; top:-94px; width:16px; height:100px; background:var(--glass); border-radius:12px; }
.cup-planter i::before,.cup-planter i::after{content:"";position:absolute;width:54px;height:32px;background:var(--glass);border-radius:50% 0 50% 0;top:20px}.cup-planter i::before{right:8px;transform:rotate(-20deg)}.cup-planter i::after{left:8px;transform:rotate(110deg)}
.jar-lamp { position:absolute; left:185px; bottom:16px; width:142px; height:250px; border:4px solid var(--chip); border-radius:26px 26px 46px 46px; background:rgba(126,166,161,.16); box-shadow:0 0 55px rgba(198,162,74,.45); }
.jar-lamp i { position:absolute; inset:44px 24px; background:radial-gradient(circle,var(--gold),transparent 70%); }
.crate-tower { position:absolute; right:0; bottom:0; width:190px; height:320px; }
.crate-tower i { display:block; height:94px; margin-bottom:11px; border:7px solid var(--pulp); background:rgba(185,169,138,.18); transform:rotate(var(--r)); }
.crate-tower i:nth-child(1){--r:4deg}.crate-tower i:nth-child(2){--r:-6deg}.crate-tower i:nth-child(3){--r:2deg}
.saucer-moon { position:absolute; right:135px; top:0; width:100px; height:100px; border-radius:50%; background:radial-gradient(circle at 34% 32%, var(--cream), var(--gold)); box-shadow:0 0 40px rgba(198,162,74,.45); animation:saucerSpin 36s linear infinite; }
.loop-note { position:absolute; left:48vw; bottom:5vh; max-width:520px; }

.object-transform { transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter 1.2s ease; }
.room.in-view .object-transform { transform: translateY(-18px) rotate(.8deg); filter: saturate(1.12); }
.room.in-view .sprout { animation: growSprout 2.4s ease-out both; }

@keyframes cafeGlow { 0%,100%{opacity:.68; transform:scale(.96)} 50%{opacity:1; transform:scale(1.05)} }
@keyframes steamFloat { 0%,100%{transform:translateY(0) rotate(-3deg); opacity:.55} 50%{transform:translateY(-28px) rotate(6deg); opacity:.9} }
@keyframes saucerSpin { to { transform: rotate(360deg); } }
@keyframes tapePress { 0%,100%{filter:brightness(.9)} 50%{filter:brightness(1.2); transform: translateY(2px) rotate(var(--rot, 0deg));} }
@keyframes stitchBlink { 0%,100%{opacity:.45} 50%{opacity:1} }
@keyframes lanternFlicker { 0%,100%{filter:brightness(.95)} 35%{filter:brightness(1.18)} 62%{filter:brightness(.88)} }
@keyframes growSprout { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0)} }

@media (max-width: 820px) {
  .cap-nav { right: 8px; transform: translateY(-50%) scale(.75); }
  .room { padding: 38px 26px 90px; }
  .sleeve-sign { margin-top: 26vh; width: 86vw; }
  .crate-stack { width: 85vw; left: -8vw; opacity: .9; }
  .grounds-room .room-title, .lantern-copy, .return-room .room-title { margin-left: 0; width: 86vw; }
  .grounds-bowl, .mug-scene, .mini-skyline { position: relative; right: auto; left: auto; bottom: auto; width: 82vw; max-width: 82vw; margin: 10vh auto 0; }
  .jar-row, .lantern-cluster { opacity: .55; }
  .counter-path { opacity: .45; }
}