:root {
  --paper: #f6edd9;
  --paper-deep: #ead8b8;
  --paper-light: #fff9ed;
  --ink: #3b2018;
  --ink-soft: #775447;
  --orange: #ed4b20;
  --orange-dark: #b9381d;
  --cobalt: #0d56a2;
  --cobalt-deep: #073b73;
  --green: #718b43;
  --line: rgba(92, 48, 32, 0.19);
  --shadow: rgba(70, 35, 17, 0.2);
  --display: "Arial Rounded MT Bold", "Avenir Next Rounded", "Trebuchet MS", "Segoe UI", sans-serif;
  --body: "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  overflow-x: hidden;
}
body::selection { background: var(--orange); color: var(--paper-light); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.page-noise {
  position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

.site-header {
  position: fixed; z-index: 20; inset: 0 0 auto; height: 76px; padding: 0 5vw;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  color: var(--ink);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 900; letter-spacing: -.04em; }
.brand-logo { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; border: 2px solid var(--paper-light); }
.brand-name { font-size: 20px; }
.brand-name b { color: var(--orange); }
.main-nav { display: flex; gap: 2px; margin-left: auto; margin-right: 12px; padding: 4px; border: 1px solid rgba(59, 32, 24, .28); border-radius: 999px; background: rgba(255, 249, 237, .9); font-size: 11px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.main-nav a { position: relative; padding: 11px 15px; border-radius: 999px; transition: background .2s ease, color .2s ease; }
.main-nav a:hover, .main-nav a:focus-visible { background: var(--ink); color: var(--paper-light); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.language-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid rgba(59, 32, 24, .28); border-radius: 999px; background: rgba(255, 249, 237, .9); }
.language-button { min-width: 31px; padding: 7px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 9px; font-weight: 900; letter-spacing: .08em; transition: background .2s ease, color .2s ease, transform .2s ease; }
.language-button:hover, .language-button:focus-visible { color: var(--ink); transform: translateY(-1px); }
.language-button.active { background: var(--ink); color: var(--paper-light); }
.header-cta { display: inline-flex; align-items: center; border: 0; border-radius: 999px; padding: 13px 17px; background: var(--orange); color: white; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; transition: background .2s ease, transform .2s ease; }
.header-cta:hover { background: var(--orange-dark); transform: translateY(-2px); }

.progress-rail { position: fixed; z-index: 15; right: 25px; top: 50%; transform: translateY(-50%); display: grid; gap: 9px; justify-items: center; color: var(--ink-soft); font-size: 9px; letter-spacing: .16em; }
.progress-label { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 800; }
.progress-number { font: 700 18px var(--display); color: var(--orange); letter-spacing: 0; }
.progress-rule { position: relative; display: block; width: 2px; height: 78px; background: var(--line); overflow: hidden; }
.progress-rule i { position: absolute; inset: 0 0 auto; height: 20%; background: var(--orange); transition: height .35s ease; }
.progress-total { font-weight: 800; }

.story-section { position: relative; overflow: hidden; }
.hero { min-height: 100svh; display: flex; align-items: center; padding: 110px 15vw 80px 10vw; isolation: isolate; background: #e8d6b3; }
.hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: url("assets/hero-taste-trail.webp") center / cover no-repeat; transform: translate3d(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px), 0) scale(1.025); transition: transform .12s ease-out; }
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(246,237,217,.98) 0%, rgba(246,237,217,.85) 29%, rgba(246,237,217,.03) 62%); }
.hero-copy { width: min(600px, 58vw); }
.eyebrow, .tiny-label, .chapter-number, .scene-note, .match-tag, .recipe-topline, .page-date { margin: 0; font-size: 10px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.eyebrow { color: var(--orange-dark); margin-bottom: 23px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; letter-spacing: -.045em; }
h1 { max-width: 680px; margin-bottom: 23px; font-size: clamp(48px, 7.2vw, 102px); line-height: .91; }
h1 em, h2 em { color: var(--orange); font-style: normal; }
.hero-intro { max-width: 390px; margin-bottom: 30px; color: var(--ink-soft); font-size: 17px; line-height: 1.55; }
.hero-actions { display: flex; align-items: center; gap: 18px; }
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-height: 52px; padding: 13px 21px 12px; border: 1px solid transparent; border-radius: 12px 12px 15px 15px; font-size: 12px; font-weight: 900; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-3px); }
.button > span { font-size: 12px; line-height: 1; }
.button > b { color: #ffc65c; font-size: 22px; line-height: .6; }
.button-primary { background: var(--orange); color: white; border-color: var(--orange-dark); border-bottom-width: 3px; }
.button-primary:hover { background: var(--orange-dark); }
.button-quiet { border-bottom-color: var(--ink); padding-left: 2px; padding-right: 2px; }
.dada-button { isolation: isolate; padding-right: 25px; }
.button-dada { position: absolute; z-index: 2; top: -42px; right: 12px; width: 54px; height: 54px; object-fit: contain; pointer-events: none; transform: rotate(5deg); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.dada-button:hover .button-dada { transform: translateY(-5px) rotate(-4deg); }
.hero-footnote { display: flex; align-items: center; gap: 11px; margin-top: 58px; color: var(--ink-soft); font-size: 10px; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; }
.seal-small { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid currentColor; border-radius: 50%; color: var(--orange); font-size: 10px; font-weight: 800; }
.hero-scribble, .final-scribble { position: absolute; font: italic 19px Georgia, serif; color: var(--cobalt); line-height: 1.02; }
.scribble-one { right: 24%; top: 16%; transform: rotate(-8deg); }
.scribble-two { right: 8%; bottom: 13%; transform: rotate(6deg); color: var(--orange); }
.hero-scroll-cue { position: absolute; bottom: 33px; left: 10vw; display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero-scroll-cue span { display: inline-block; width: 38px; height: 1px; background: currentColor; }

.mood-section { min-height: 100svh; padding: 150px 10vw 120px; background: var(--paper-light); }
.section-intro { width: min(530px, 100%); }
.chapter-number { display: block; margin-bottom: 20px; color: var(--orange-dark); }
h2 { margin-bottom: 20px; font-size: clamp(42px, 5.8vw, 82px); line-height: .94; }
.section-intro p, .map-heading p, .swipe-copy > p, .journal-copy > p { max-width: 390px; color: var(--ink-soft); font-size: 16px; line-height: 1.55; }
.mood-experience { display: grid; grid-template-columns: minmax(390px, 1.1fr) minmax(300px, .75fr); gap: clamp(50px, 10vw, 160px); align-items: center; margin-top: 62px; }
.mood-scene { position: relative; min-height: 500px; background: #eee0bd; border: 1px solid rgba(105, 63, 34, .24); isolation: isolate; overflow: hidden; }
.mood-scene::before { content: ""; position: absolute; inset: 10px; z-index: -1; border: 1px dashed rgba(101, 59, 33, .33); }
.scene-note { position: absolute; top: 26px; left: 28px; color: var(--ink-soft); }
.mood-dada { position: absolute; z-index: 2; width: min(66%, 390px); left: 50%; bottom: -4%; transform: translateX(-50%); filter: drop-shadow(0 16px 9px rgba(82, 43, 19, .19)); transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.mood-scene.selected .mood-dada { transform: translateX(-50%) translateY(-16px) rotate(-2deg); }
.mood-food { position: absolute; z-index: 1; width: 145px; height: 145px; object-fit: contain; top: 21%; left: 50%; opacity: .85; transform: translateX(-50%) rotate(-9deg); transition: opacity .35s ease, transform .35s ease; }
.mood-scene.selected .mood-food { opacity: 1; transform: translateX(-50%) rotate(4deg) scale(1.08); }
.mood-orbit { position: absolute; border: 1px solid rgba(13, 86, 162, .26); border-radius: 50%; left: 50%; top: 39%; transform: translate(-50%, -50%); }
.orbit-one { width: 310px; height: 170px; }
.orbit-two { width: 400px; height: 240px; transform: translate(-50%, -50%) rotate(24deg); border-color: rgba(237, 75, 32, .2); }
.mood-caption { position: absolute; left: 28px; bottom: 30px; max-width: 190px; color: var(--ink-soft); font: italic 18px Georgia, serif; line-height: 1.15; }
.mood-stamp { position: absolute; top: 45px; right: 31px; display: grid; place-items: center; width: 82px; height: 82px; border: 2px solid var(--orange); border-radius: 50%; color: var(--orange); font-size: 10px; font-weight: 900; line-height: 1.1; text-align: center; text-transform: uppercase; transform: rotate(12deg); transition: transform .3s ease, background .3s ease, color .3s ease; }
.mood-stamp.is-set { background: var(--orange); color: var(--paper-light); transform: rotate(-8deg) scale(1.06); }
.controls-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.tiny-label { color: var(--ink-soft); font-size: 9px; }
.choice-count { color: var(--orange-dark); font-size: 11px; font-weight: 800; }
.mood-options { margin-top: 4px; }
.mood-option, .swipe-choice { width: 100%; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 9px; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 20px 0; cursor: pointer; text-align: left; font-weight: 800; transition: padding .25s ease, color .25s ease; }
.mood-option:hover, .mood-option.selected { padding-left: 12px; color: var(--orange); }
.option-mark { color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.option-dada { width: 53px; height: 49px; object-fit: contain; transform: rotate(4deg); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.mood-option:nth-child(2) .option-dada { transform: rotate(-4deg) scale(.92); }
.mood-option:nth-child(3) .option-dada { transform: rotate(7deg) scale(.86); }
.mood-option:nth-child(4) .option-dada { transform: rotate(-7deg) scale(.95); }
.mood-option:hover .option-dada, .mood-option.selected .option-dada { transform: translateY(-4px) rotate(-3deg) scale(1.04); }
.mood-response { min-height: 49px; margin: 30px 0 0; color: var(--ink-soft); font: italic 16px Georgia, serif; line-height: 1.35; }

.map-section { padding: 145px 10vw 130px; background: #d8dfb9; color: var(--ink); }
.map-section::before { content: ""; position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(59,32,24,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(59,32,24,.28) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, black, transparent 75%); }
.map-section::after { content: "ATLAS / DADA / 2026"; position: absolute; right: 8vw; top: 92px; color: rgba(59,32,24,.4); font: 900 10px var(--body); letter-spacing: .2em; transform: rotate(90deg); transform-origin: right top; }
.chapter-number.light { color: var(--orange-dark); }
.map-heading { position: relative; max-width: 650px; }
.map-heading h2 { color: var(--ink); }
.map-heading p { color: var(--ink-soft); }
.map-layout { position: relative; display: grid; grid-template-columns: minmax(390px, 1.1fr) minmax(260px, .65fr); align-items: center; gap: clamp(55px, 10vw, 150px); margin-top: 55px; }
.map-board { position: relative; height: min(690px, 70vw); min-height: 570px; background: #e6d39e; color: var(--ink); overflow: hidden; transform: rotate(-1.2deg); border-radius: 2px 8px 3px 7px; }
.map-board::before { content: ""; position: absolute; inset: 18px; border: 1px dashed rgba(81, 54, 22, .35); background: radial-gradient(circle at 30% 20%, rgba(124, 159, 79, .25) 0 7%, transparent 7.5%), radial-gradient(circle at 76% 70%, rgba(124, 159, 79, .2) 0 6%, transparent 6.5%), linear-gradient(115deg, transparent 48%, rgba(103, 153, 171, .26) 48.5% 49.4%, transparent 49.9%); }
.map-compass { position: absolute; z-index: 3; top: 33px; right: 37px; color: var(--orange-dark); font-size: 10px; font-weight: 900; line-height: 1.1; text-align: center; }
.map-compass span { font-size: 23px; }
.map-sticker { position: absolute; z-index: 4; font: italic 15px Georgia, serif; color: var(--cobalt); line-height: 1; }
.sticker-a { top: 120px; left: 34px; transform: rotate(-8deg); }
.sticker-b { right: 32px; bottom: 105px; color: var(--orange-dark); transform: rotate(7deg); }
.map-route { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; fill: none; stroke: #9e5b39; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 8 13; opacity: .7; }
.map-stops { position: absolute; z-index: 4; inset: 0; }
.map-stop { position: absolute; display: flex; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; cursor: pointer; font-weight: 800; }
.map-stop span { display: grid; place-items: center; width: 51px; height: 51px; border: 3px solid #b26b3e; border-radius: 50%; background: #f8e7b9; color: var(--ink); transition: transform .25s ease, background .25s ease, color .25s ease; }
.map-stop b { font-size: 12px; white-space: nowrap; }
.map-stop:hover span, .map-stop.active span { background: var(--orange); color: white; transform: scale(1.14) rotate(-8deg); }
.stop-1 { left: 41%; bottom: 5%; }.stop-2 { left: 67%; bottom: 24%; }.stop-3 { left: 48%; bottom: 42%; }.stop-4 { left: 20%; bottom: 61%; }.stop-5 { left: 39%; top: 8%; }
.map-dada { position: absolute; z-index: 5; width: 75px; left: 37%; bottom: 11%; transition: left .5s cubic-bezier(.2,.8,.2,1), bottom .5s cubic-bezier(.2,.8,.2,1), transform .5s ease; filter: drop-shadow(0 8px 5px rgba(65, 37, 20, .25)); }
.map-story { max-width: 320px; }
.map-pin { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 26px; border: 1px solid var(--cobalt); border-radius: 50%; color: var(--cobalt); font-weight: 900; }
.map-story h3 { margin-bottom: 13px; color: var(--ink); font-size: 43px; line-height: .95; }
.map-story p { margin-bottom: 34px; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.map-progress { height: 3px; background: rgba(59,32,24,.2); }.map-progress span { display: block; height: 100%; width: 20%; background: var(--orange); transition: width .35s ease; }
.map-meta { display: flex; justify-content: space-between; margin-top: 12px; color: var(--orange-dark); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.map-tip { margin-top: 86px; color: var(--ink-soft); font: italic 14px Georgia, serif; line-height: 1.3; }.map-tip span { margin-right: 7px; color: var(--orange); }

.swipe-section { min-height: 100svh; display: grid; grid-template-columns: minmax(270px, .7fr) minmax(390px, 1fr); gap: clamp(40px, 10vw, 150px); align-items: center; padding: 145px 13vw 120px 10vw; background: #f7ead1; }
.swipe-copy { max-width: 420px; }.swipe-copy h2 { margin-bottom: 20px; }
.swipe-actions { margin-top: 40px; border-top: 1px solid var(--line); }
.swipe-choice { grid-template-columns: 1fr auto; font-size: 14px; }.swipe-choice span { color: var(--orange); font-size: 19px; }.swipe-choice:hover, .swipe-choice.active { padding-left: 12px; color: var(--orange); }
.phone-stage { position: relative; width: min(100%, 550px); justify-self: center; }
.phone-shadow { position: absolute; width: 68%; height: 35px; left: 16%; bottom: 3%; border-radius: 50%; background: rgba(66,34,17,.26); filter: blur(17px); }
.phone-frame { position: relative; width: min(75%, 386px); margin: auto; padding: 10px; border: 8px solid #151412; border-radius: 42px; background: #252320; transform: rotate(3deg); overflow: hidden; }
.phone-frame::after { content: ""; position: absolute; top: 10px; left: 50%; width: 100px; height: 22px; border-radius: 0 0 15px 15px; background: #151412; transform: translateX(-50%); }
.phone-frame img { width: 100%; aspect-ratio: 1284 / 2778; object-fit: cover; border-radius: 28px; transition: opacity .22s ease, transform .22s ease; }
.phone-frame img.changing { opacity: .15; transform: scale(.98); }
.swipe-float { position: absolute; z-index: 3; display: grid; gap: 4px; min-width: 140px; padding: 12px 14px; background: var(--paper-light); border: 1px solid var(--line); font-size: 10px; }.swipe-float span { color: var(--orange-dark); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.swipe-float b { font: 19px var(--display); letter-spacing: -.05em; }.swipe-float-top { top: 17%; left: 2%; transform: rotate(-7deg); }.swipe-float-bottom { right: -4%; bottom: 14%; transform: rotate(5deg); }.swipe-hand { position: absolute; right: 4%; top: 46%; z-index: 4; display: grid; place-items: center; width: 55px; height: 55px; border: 2px solid var(--orange); border-radius: 50%; color: var(--orange); font: 24px var(--display); transform: rotate(-14deg); }

.match-section { padding: 145px 10vw 130px; background: #ed7950; color: var(--paper-light); }
.match-section::before { content: "MATCH!"; position: absolute; z-index: 0; right: 7vw; top: 19%; color: rgba(255,249,237,.16); font: 900 clamp(150px, 25vw, 360px) var(--display); letter-spacing: -.12em; line-height: .7; transform: rotate(-9deg); pointer-events: none; }
.match-section::after { content: "✦  ✦  ✦  ✦  ✦"; position: absolute; right: 9vw; bottom: 11%; color: rgba(255,249,237,.42); font-size: 17px; letter-spacing: .65em; transform: rotate(-8deg); pointer-events: none; }
.match-header { position: relative; z-index: 1; max-width: 610px; }.match-header h2 { color: var(--paper-light); }
.match-reveal { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(370px, 1fr) minmax(320px, .9fr); align-items: center; gap: clamp(35px, 7vw, 100px); margin-top: 70px; }
.match-art { position: relative; min-height: 470px; display: grid; place-items: center; background: #f5dfae; border-radius: 49% 51% 46% 54% / 54% 43% 57% 46%; overflow: hidden; transform: rotate(-2deg); }
.match-art::before { content: ""; position: absolute; inset: 16px; border: 1px dashed rgba(77,40,24,.3); }
.match-art > img:first-of-type { position: relative; z-index: 1; width: 61%; filter: drop-shadow(0 19px 10px rgba(73, 34, 14, .26)); transform: rotate(-4deg); }
.match-dada { position: absolute; z-index: 2; width: 43%; right: -2%; bottom: -8%; transform: rotate(3deg); }
.match-tag { position: absolute; z-index: 4; top: 29px; left: 30px; color: var(--orange-dark); }.match-spark { position: absolute; color: var(--orange); font-size: 28px; }.spark-a { top: 28%; left: 16%; }.spark-b { right: 23%; bottom: 25%; }
.match-recipe { max-width: 460px; }.recipe-topline { display: flex; justify-content: space-between; color: #ffc65c; font-size: 9px; }.recipe-topline span:last-child { color: var(--paper-light); }
.match-recipe h3 { margin: 23px 0 14px; font-size: clamp(47px, 6vw, 82px); line-height: .9; }.recipe-reason { max-width: 390px; color: rgba(255,249,237,.73); font: italic 19px Georgia, serif; line-height: 1.45; }.recipe-facts { display: flex; gap: 9px; flex-wrap: wrap; margin: 32px 0; }.recipe-facts span { padding: 7px 10px; border: 1px solid rgba(255,249,237,.35); color: #ffc65c; font-size: 9px; font-weight: 900; letter-spacing: .12em; }.recipe-rule { height: 1px; background: rgba(255,249,237,.28); }.recipe-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 20px; color: rgba(255,249,237,.58); font-size: 11px; }.stamp-button { border: 0; border-bottom: 1px solid #ffc65c; background: transparent; padding: 0 0 5px; color: #ffc65c; cursor: pointer; font-weight: 800; }.stamp-button span { margin-left: 8px; font-size: 18px; }.stamp-button.is-saved { color: #fff9ed; border-color: #fff9ed; }

.journal-section { min-height: 100svh; display: grid; grid-template-columns: minmax(280px, .72fr) minmax(450px, 1fr); align-items: center; gap: clamp(50px, 9vw, 150px); padding: 145px 10vw 130px; background: var(--paper); }
.journal-copy { max-width: 420px; }.journal-copy h2 { margin-bottom: 20px; }.journal-stats { display: grid; gap: 14px; margin-top: 45px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 12px; }.journal-stats span { display: flex; align-items: baseline; gap: 12px; }.journal-stats b { width: 31px; color: var(--orange); font: 26px var(--display); }
.journal-book { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 510px; transform: rotate(2.5deg); filter: drop-shadow(12px 18px 0 rgba(80, 43, 20, .12)); }.journal-book::before { content: ""; position: absolute; z-index: 3; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(77,43,24,.24); box-shadow: 2px 0 0 rgba(255,255,255,.32); }.journal-page { position: relative; overflow: hidden; background: #eee0bd; border: 1px solid rgba(85, 49, 24, .18); }.journal-page-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }.journal-page-note { padding: 42px 34px; background: #f5e5bb; }.journal-page-note::before { content: ""; position: absolute; inset: 19px; border: 1px dashed rgba(87,47,23,.28); }.journal-page-note > * { position: relative; z-index: 1; }.page-date { display: block; color: var(--orange-dark); font-size: 8px; line-height: 1.4; }.journal-page-note h3 { margin: 50px 0 20px; font-size: 37px; line-height: .96; }.journal-page-note p { max-width: 210px; color: var(--ink-soft); font: italic 17px Georgia, serif; line-height: 1.45; }.journal-page-note img { position: absolute; z-index: 2; right: 5px; bottom: -2px; width: 130px; transform: rotate(-3deg); }.page-sign { position: absolute; right: 33px; bottom: 32px; color: var(--orange-dark); font: italic 16px Georgia, serif; }.journal-ribbon { position: absolute; z-index: 4; left: 47%; top: -10px; width: 25px; height: calc(100% + 20px); background: var(--cobalt); box-shadow: 4px 0 0 rgba(255,255,255,.22); }

.download-section { min-height: 92svh; display: grid; grid-template-columns: minmax(280px, .72fr) minmax(450px, 1fr); align-items: center; gap: clamp(50px, 9vw, 150px); padding: 135px 10vw 120px; background: #f0d49c; }
.download-section::before { content: ""; position: absolute; inset: 0; opacity: .18; background: repeating-linear-gradient(135deg, transparent 0 19px, rgba(59,32,24,.14) 20px 21px); mask-image: linear-gradient(90deg, transparent 0%, black 34%, transparent 100%); pointer-events: none; }
.download-heading { position: relative; z-index: 1; max-width: 430px; }.download-heading h2 { margin-bottom: 20px; }.download-heading p { max-width: 380px; color: var(--ink-soft); font-size: 16px; line-height: 1.55; }.download-note { display: inline-block; max-width: 300px; margin-top: 38px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--orange-dark); font: italic 15px Georgia, serif; line-height: 1.35; }
.download-stage { position: relative; z-index: 1; min-height: 570px; padding-top: 15px; }.download-stage-label { position: absolute; top: 0; right: 0; color: rgba(59,32,24,.52); font-size: 9px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }.download-orbit { position: absolute; left: 33%; top: 18%; border: 1px solid rgba(13,86,162,.36); border-radius: 50%; transform: rotate(-18deg); }.orbit-large { width: 390px; height: 245px; }.orbit-small { width: 270px; height: 190px; border-color: rgba(237,75,32,.3); transform: rotate(34deg); }.download-app-icon { position: absolute; z-index: 2; top: 23%; left: 45%; width: 150px; height: 150px; border: 6px solid var(--paper-light); border-radius: 37px; object-fit: cover; transform: rotate(-7deg); }.download-dada { position: absolute; z-index: 4; top: 9%; right: 12%; width: 126px; height: 126px; object-fit: contain; transform: rotate(8deg); animation: gentle-bob 4s ease-in-out infinite; }.download-sticker { position: absolute; z-index: 3; color: var(--cobalt); font: italic 15px Georgia, serif; line-height: .95; }.download-sticker b { font: 900 27px var(--display); }.sticker-ios { top: 19%; left: 24%; transform: rotate(-11deg); }.sticker-android { top: 42%; right: 4%; color: var(--orange-dark); transform: rotate(9deg); }.download-tickets { position: absolute; left: 8%; right: 0; bottom: 1%; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.store-ticket { position: relative; display: grid; grid-template-columns: 52px 1fr 20px; align-items: center; gap: 14px; min-height: 91px; padding: 16px 18px; border: 1px solid rgba(59,32,24,.32); border-radius: 8px 22px 9px 20px; background: var(--paper-light); cursor: pointer; text-align: left; transition: transform .2s ease, background .2s ease, color .2s ease; }.store-ticket::before, .store-ticket::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #f0d49c; transform: translateY(-50%); }.store-ticket::before { left: -7px; }.store-ticket::after { right: -7px; }.store-ticket:hover, .store-ticket.active { background: var(--ink); color: var(--paper-light); transform: translateY(-5px) rotate(-1deg); }.store-ticket:nth-child(2):hover, .store-ticket:nth-child(2).active { transform: translateY(-5px) rotate(1deg); }.store-emblem { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--orange); border-radius: 50%; color: var(--orange-dark); font: 900 11px var(--display); }.store-emblem.android { background: var(--green); border-color: var(--green); color: white; font-size: 22px; }.store-copy { display: grid; gap: 5px; }.store-copy small { font-size: 8px; font-weight: 900; letter-spacing: .14em; opacity: .66; }.store-copy b { font: 20px var(--display); letter-spacing: -.04em; }.store-arrow { color: var(--orange); font-size: 22px; }.store-ticket.active .store-arrow { color: #ffc65c; }

.store-ticket { grid-template-columns: 52px 1fr; }
.store-badge { position: absolute; top: 10px; right: 13px; padding: 4px 7px 3px; border: 1px solid var(--orange); border-radius: 999px; background: #ffc65c; color: var(--ink); font-size: 8px; font-weight: 900; letter-spacing: .1em; line-height: 1; }
.store-ticket.active .store-badge { border-color: #ffc65c; background: var(--orange); color: var(--paper-light); }
.store-emblem { font-size: 27px; line-height: 1; }
.store-emblem.apple { padding-bottom: 3px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Symbol", sans-serif; }
.store-emblem.android { border-color: var(--green); background: var(--paper-light); color: white; font-size: 0; }
.android-mark { position: relative; display: block; width: 28px; height: 28px; }
.android-mark::before { content: ""; position: absolute; top: 7px; left: 2px; width: 24px; height: 17px; border-radius: 11px 11px 5px 5px; background: var(--green); }
.android-mark::after { content: "•  •"; position: absolute; top: 9px; left: 4px; color: white; font: 900 9px Arial, sans-serif; letter-spacing: 3px; }
.android-mark > i { position: absolute; top: 1px; left: 6px; width: 17px; height: 10px; border-top: 2px solid var(--green); transform: rotate(-8deg); }
.android-mark > i::before, .android-mark > i::after { content: ""; position: absolute; top: -5px; width: 2px; height: 7px; background: var(--green); }
.android-mark > i::before { left: 1px; transform: rotate(-28deg); }.android-mark > i::after { right: 1px; transform: rotate(28deg); }
.final-cta { min-height: 76svh; display: grid; grid-template-columns: 1fr .8fr; align-items: center; padding: 110px 12vw 80px 10vw; background: var(--orange); color: var(--paper-light); }.final-cta::before { content: ""; position: absolute; inset: 0; opacity: .18; background: radial-gradient(circle at 78% 50%, #ffc65c 0 1px, transparent 2px), radial-gradient(circle at 78% 50%, transparent 0 150px, rgba(255,255,255,.7) 151px 152px, transparent 153px); background-size: 25px 25px, auto; }.final-cta-copy { position: relative; z-index: 2; }.final-cta h2 { margin-bottom: 20px; color: var(--paper-light); }.final-cta h2 em { color: #ffc65c; }.final-cta p { color: rgba(255,249,237,.8); font-size: 17px; }.button-light { margin-top: 18px; background: var(--paper-light); color: var(--orange-dark); }.button-light:hover { background: #ffc65c; color: var(--ink); }.final-plate { position: relative; z-index: 2; align-self: end; justify-self: center; width: min(100%, 430px); }.final-plate img { width: 100%; filter: drop-shadow(0 20px 7px rgba(101, 36, 15, .23)); animation: gentle-bob 4s ease-in-out infinite; }.final-scribble { z-index: 3; right: 9%; bottom: 13%; color: var(--paper-light); transform: rotate(-8deg); }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 5vw; background: var(--ink); color: var(--paper); font-size: 11px; }.site-footer .brand { color: var(--paper); }.site-footer p { margin: 0; color: #ffc65c; font: italic 17px Georgia, serif; }.site-footer > span { color: rgba(246,237,217,.55); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }.reveal.visible { opacity: 1; transform: none; }
@keyframes gentle-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(1.2deg); } }

@media (max-width: 900px) {
  .main-nav { display: none; }.progress-rail { right: 13px; }.hero { padding-left: 8vw; padding-right: 17vw; }.hero::after { background: linear-gradient(90deg, rgba(246,237,217,.97), rgba(246,237,217,.35) 65%, rgba(246,237,217,.05)); }.hero-copy { width: min(600px, 76vw); }
  .mood-section, .map-section, .match-section, .journal-section, .download-section { padding-left: 7vw; padding-right: 9vw; }.mood-experience, .map-layout, .match-reveal, .journal-section, .download-section { gap: 40px; }.mood-experience, .map-layout, .match-reveal, .journal-section, .download-section { grid-template-columns: 1fr; }.mood-scene { max-width: 600px; }.map-board { width: min(100%, 620px); height: 630px; }.map-story { max-width: 470px; }.map-tip { margin-top: 42px; }.swipe-section { grid-template-columns: 1fr; padding-left: 8vw; padding-right: 9vw; }.swipe-copy { max-width: 620px; }.phone-stage { margin-top: 15px; }.journal-book { max-width: 680px; width: 100%; }.download-stage { width: min(100%, 700px); min-height: 540px; }
}
@media (max-width: 600px) {
  .site-header { height: 66px; padding: 0 5vw; }.brand-logo { width: 34px; height: 34px; border-radius: 10px; }.brand-name { font-size: 17px; }.header-actions { gap: 6px; }.language-button { min-width: 27px; padding: 6px; font-size: 8px; }.header-cta { padding: 11px 12px; font-size: 9px; }.progress-rail { display: none; }
  .hero { min-height: 100svh; align-items: end; padding: 115px 12vw 92px 7vw; }.hero::before { background-position: 62% center; }.hero::after { background: linear-gradient(180deg, rgba(246,237,217,.3), rgba(246,237,217,.92) 57%, rgba(246,237,217,1) 100%); }.hero-copy { width: 100%; }.eyebrow { font-size: 8px; }.hero-intro { font-size: 15px; }.hero-actions { align-items: stretch; flex-direction: column; gap: 13px; }.button { width: fit-content; min-height: 46px; }.hero-footnote { margin-top: 34px; }.hero-scribble { display: none; }.hero-scroll-cue { left: 7vw; bottom: 28px; font-size: 8px; }
  .mood-section, .map-section, .swipe-section, .match-section, .journal-section, .download-section { padding: 105px 7vw 84px; }.section-intro p, .map-heading p, .swipe-copy > p, .journal-copy > p, .download-heading p { font-size: 15px; }.mood-experience { margin-top: 43px; }.mood-scene { min-height: 410px; }.mood-dada { width: 77%; }.mood-food { width: 100px; height: 100px; top: 25%; }.mood-option { padding: 19px 0; font-size: 14px; }.option-dada { width: 48px; height: 45px; }.mood-stamp { width: 69px; height: 69px; top: 28px; right: 22px; font-size: 8px; }.map-section::after { display: none; }.map-board { min-height: 510px; height: 125vw; }.map-stop span { width: 42px; height: 42px; border-width: 2px; font-size: 11px; }.map-stop b { font-size: 9px; }.map-dada { width: 62px; }.map-compass { top: 25px; right: 24px; }.map-sticker { font-size: 12px; }.stop-1 { left: 36%; }.stop-2 { left: 63%; }.stop-3 { left: 45%; }.stop-4 { left: 10%; }.stop-5 { left: 31%; }.map-story h3 { font-size: 37px; }
  .phone-frame { width: 76%; border-radius: 31px; }.phone-frame img { border-radius: 22px; }.swipe-float { min-width: 115px; padding: 9px 10px; }.swipe-float b { font-size: 15px; }.swipe-float-top { left: -2%; }.swipe-float-bottom { right: -1%; }.swipe-hand { width: 43px; height: 43px; font-size: 18px; }.button { padding-top: 12px; padding-bottom: 12px; }.button-dada { top: -38px; right: 9px; width: 49px; height: 49px; }.match-section::before { top: 20%; right: -8vw; font-size: 145px; }.match-section::after { display: none; }.match-art { min-height: 360px; }.match-recipe h3 { font-size: 59px; }.recipe-bottom { align-items: flex-start; flex-direction: column; }.journal-book { min-height: 380px; }.journal-page-note { padding: 28px 20px; }.journal-page-note h3 { margin-top: 39px; font-size: 26px; }.journal-page-note p { font-size: 13px; }.journal-page-note img { width: 90px; }.page-sign { right: 18px; bottom: 22px; font-size: 12px; }.journal-ribbon { width: 17px; }.download-section { min-height: auto; }.download-stage { min-height: 490px; padding-top: 12px; }.download-stage-label { left: 0; right: auto; font-size: 8px; }.download-orbit { left: 27%; top: 15%; }.orbit-large { width: 270px; height: 180px; }.orbit-small { width: 205px; height: 145px; }.download-app-icon { top: 20%; left: 36%; width: 112px; height: 112px; border-radius: 28px; }.download-dada { top: 7%; right: 8%; width: 93px; height: 93px; }.sticker-ios { top: 16%; left: 12%; }.sticker-android { top: 36%; right: 0; }.download-tickets { left: 0; right: 0; bottom: 0; grid-template-columns: 1fr; gap: 11px; }.store-ticket { min-height: 79px; padding: 13px 15px; }.store-copy b { font-size: 17px; }.final-cta { min-height: 90svh; grid-template-columns: 1fr; padding: 100px 7vw 40px; }.final-plate { width: 82%; margin-top: -8px; }.final-scribble { display: none; }.site-footer { align-items: flex-start; flex-direction: column; padding: 25px 7vw; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }.hero::before, .mood-dada, .mood-food, .map-dada, .phone-frame img, .download-dada, .final-plate img { transition: none; animation: none; }.reveal { opacity: 1; transform: none; transition: none; }
}