@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Serif+SC:wght@600;700;900&display=swap');

:root {
  --paper: #f3f0e7;
  --ink: #18251d;
  --green: #193d2d;
  --lime: #c9e662;
  --yellow: #f5cb54;
  --cream: #fbf8ef;
  --line: rgba(24, 37, 29, 0.18);
  --serif: "Noto Serif SC", "Songti SC", serif;
  --sans: "Noto Sans SC", "PingFang SC", sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
.noise { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .035; 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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header { height: 86px; display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; border-bottom: 1px solid var(--line); position: relative; z-index: 10; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 21px; font-weight: 900; letter-spacing: -.06em; }
.brand b { color: #56745e; }
.brand-mark { width: 29px; height: 29px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; transform: rotate(-8deg); }
.brand-mark i { display: block; background: var(--ink); border-radius: 100% 0; }
.brand-mark i:last-child { background: var(--lime); transform: rotate(180deg); }
.nav { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); font-size: 14px; font-weight: 500; }
.nav > a:not(.nav-cta) { position: relative; }
.nav > a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px; background: var(--ink); transition: right .25s; }
.nav > a:hover::after { right: 0; }
.nav-cta { padding: 11px 17px; border: 1px solid var(--ink); border-radius: 99px; transition: .2s; }
.nav-cta:hover { color: var(--paper); background: var(--ink); }
.nav-cta span { margin-left: 10px; }
.menu-button { display: none; border: 0; background: none; padding: 8px; }

.hero { min-height: 700px; display: grid; grid-template-columns: .95fr 1.05fr; padding: 74px 5vw 70px; position: relative; }
.hero-copy { padding: 35px 4vw 0 2vw; position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 26px; font-family: var(--mono); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; font-weight: 500; }
.eyebrow > span { width: 28px; height: 2px; background: var(--lime); }
.hero h1 { max-width: 720px; margin: 0; font-family: var(--serif); font-size: clamp(48px, 5.2vw, 78px); line-height: 1.18; letter-spacing: -.07em; }
.scribble { position: relative; color: var(--green); z-index: 1; }
.scribble::after { content: ""; position: absolute; z-index: -1; height: 15px; left: -3%; right: -8%; bottom: 3px; background: var(--lime); transform: rotate(-2deg); border-radius: 40% 15%; }
.hero-intro { max-width: 540px; margin: 34px 0; color: #516057; font-size: 16px; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 35px; padding: 16px 22px; border-radius: 2px; font-size: 14px; }
.button-dark { color: var(--cream); background: var(--ink); transition: transform .2s, box-shadow .2s; }
.button-dark:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 var(--lime); }
.text-link { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.play { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-size: 9px; padding-left: 2px; }
.trust-row { display: flex; align-items: center; gap: 14px; margin-top: 55px; }
.trust-row p { margin: 0; color: #69736d; font-size: 11px; line-height: 1.5; }
.trust-row strong { color: var(--ink); font-family: var(--mono); font-size: 13px; }
.avatars { display: flex; }
.avatars span { width: 35px; height: 35px; display: grid; place-items: center; margin-left: -7px; border: 2px solid var(--paper); border-radius: 50%; background: #d5a877; font-family: var(--serif); font-size: 11px; }
.avatars span:nth-child(2) { background: #75917d; }.avatars span:nth-child(3) { background: #ded080; }.avatars span:last-child { background: var(--ink); color: white; }

.hero-visual { min-height: 565px; position: relative; display: grid; place-items: center; }
.hero-visual::before { content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: var(--yellow); right: 5%; top: 0; }
.orbit { position: absolute; border: 1px solid rgba(24,37,29,.24); border-radius: 50%; z-index: 1; }
.orbit-one { width: 92%; height: 65%; transform: rotate(-20deg); }
.orbit-two { width: 70%; height: 85%; transform: rotate(35deg); }
.sun-shape { position: absolute; z-index: 2; width: 78px; height: 78px; right: 2%; top: 17%; background: var(--ink); display: grid; place-items: center; clip-path: polygon(50% 0,60% 28%,85% 15%,72% 40%,100% 50%,72% 60%,85% 85%,60% 72%,50% 100%,40% 72%,15% 85%,28% 60%,0 50%,28% 40%,15% 15%,40% 28%); animation: spin 18s linear infinite; }
.sun-shape span { width: 28px; height: 28px; background: var(--lime); border-radius: 50%; }
.phone-card { width: min(340px, 70%); min-height: 500px; padding: 18px 22px 22px; position: relative; z-index: 3; background: rgba(250,248,239,.94); border: 1px solid rgba(24,37,29,.2); border-radius: 28px; box-shadow: 22px 28px 45px rgba(40,48,35,.18); transform: rotate(-2deg); backdrop-filter: blur(12px); }
.phone-top { display: flex; justify-content: space-between; font: 500 9px var(--mono); }
.hello { margin: 32px 0 5px; color: #788078; font-size: 12px; }
.phone-card h2 { margin: 0; font-family: var(--serif); font-size: 27px; letter-spacing: -.05em; line-height: 1.35; }
.prompt-box { min-height: 56px; display: flex; align-items: center; gap: 9px; margin-top: 22px; padding: 8px 8px 8px 13px; border: 1px solid #cdd1c8; border-radius: 13px; background: white; color: #8a918a; font-size: 11px; }
.prompt-box .spark { color: #6d8f26; font-size: 17px; }.prompt-box button { width: 34px; height: 34px; margin-left: auto; border: 0; border-radius: 10px; background: var(--ink); color: white; cursor: pointer; }
.quick-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 15px; }
.quick-grid button { border: 1px solid #dedfd8; border-radius: 10px; padding: 11px 3px; background: #f7f5ed; font-size: 9px; cursor: pointer; transition: .2s; }
.quick-grid button:hover { background: var(--lime); transform: translateY(-2px); }.quick-grid span { display: block; margin-bottom: 5px; font-size: 18px; }
.ai-note { display: flex; gap: 10px; margin-top: 17px; padding: 13px; border-radius: 12px; background: #e2ebc7; }
.note-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: var(--lime); }
.ai-note b { font-family: var(--serif); font-size: 12px; }.ai-note p { margin: 4px 0 0; color: #52604f; font-size: 9px; line-height: 1.6; }
.float-card { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--cream); border: 1px solid var(--ink); box-shadow: 6px 6px 0 rgba(24,37,29,.14); }
.float-card > span { width: 36px; height: 36px; display: grid; place-items: center; background: var(--yellow); border-radius: 50%; font: 500 13px var(--mono); }
.float-card b,.float-card small { display: block; }.float-card b { font-family: var(--serif); font-size: 12px; }.float-card small { margin-top: 3px; color: #747d76; font-size: 8px; }
.float-weather { left: 1%; top: 14%; transform: rotate(4deg); }.float-time { right: -1%; bottom: 16%; transform: rotate(-3deg); }.float-time > span { background: var(--lime); }
.vertical-note { position: absolute; right: -2%; bottom: 42%; margin: 0; transform: rotate(90deg); font: 9px var(--mono); letter-spacing: .15em; }

.marquee { overflow: hidden; padding: 14px 0; color: var(--cream); background: var(--green); transform: rotate(-1deg) scale(1.02); }
.marquee-track { width: max-content; display: flex; gap: 32px; align-items: center; animation: marquee 24s linear infinite; }
.marquee span { font-family: var(--serif); font-size: 17px; }.marquee i { color: var(--lime); font-style: normal; }
.section { padding: 120px 6vw; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 55px; }
.section-heading h2,.day-title h2 { margin: 0; font-family: var(--serif); font-size: clamp(38px, 4vw, 58px); line-height: 1.28; letter-spacing: -.06em; }
.section-heading h2 span { position: relative; }.section-heading h2 span::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:8px; background:var(--yellow); z-index:-1; }
.section-heading > p { max-width: 330px; margin: 0 0 7px; color: #667169; font-size: 14px; line-height: 1.8; }
.scene-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 18px; }
.scene-card { min-height: 600px; display: flex; flex-direction: column; position: relative; overflow: hidden; border: 1px solid var(--ink); background: #e9e4d8; }
.card-number { position: absolute; z-index: 2; top: 20px; left: 20px; font: 11px var(--mono); }
.kitchen-visual,.trip-visual,.idea-visual { height: 310px; position: relative; overflow: hidden; background: #d9c3a7; }
.plate { width: 260px; height: 260px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; position: absolute; top: 34px; left: 15%; border: 20px solid #f5f1e8; border-radius: 50%; background: #56735b; box-shadow: 0 10px 30px #846b4d66; font-size: 48px; }
.recipe-slip { width: 190px; display:flex; flex-direction:column; gap:7px; position:absolute; right:-15px; bottom:23px; padding:18px; background:var(--cream); transform:rotate(-5deg); box-shadow:0 8px 20px #44362133; }
.recipe-slip small,.recipe-slip span { font-size:8px; color:#76776f; }.recipe-slip b { font-family:var(--serif); font-size:14px; }
.card-copy { flex: 1; position: relative; padding: 30px 30px 26px; background: var(--cream); }
.tag { padding: 5px 9px; border: 1px solid var(--ink); border-radius: 99px; font: 9px var(--mono); }
.card-copy h3 { margin: 20px 0 14px; font-family: var(--serif); font-size: clamp(23px, 2.1vw, 31px); line-height: 1.4; letter-spacing: -.04em; }.card-copy p { margin:0; max-width:340px; color:#69736c; font-size:12px; line-height:1.8; }.card-copy > a { width:42px; height:42px; display:grid; place-items:center; position:absolute; right:24px; bottom:24px; border-radius:50%; background:var(--ink); color:white; transition:.2s; }.card-copy > a:hover { transform:rotate(45deg); background:var(--yellow); color:var(--ink); }
.trip-visual { background: #a9c2b6; }.trip-visual::after { content:""; position:absolute; inset:0; opacity:.35; background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px); background-size:28px 28px; }
.map-line { position:absolute; z-index:1; width:210px; height:130px; top:65px; left:16%; border:3px dashed var(--cream); border-color:var(--cream) transparent transparent var(--cream); border-radius:50%; transform:rotate(13deg); }.pin { position:absolute; z-index:2; padding:5px 8px; background:var(--ink); color:white; font:8px var(--mono); }.pin-a{left:10%;bottom:55px}.pin-b{right:12%;top:55px}.ticket { position:absolute; z-index:3; right:13%; bottom:25px; width:105px; padding:13px; background:var(--yellow); transform:rotate(7deg); box-shadow:5px 5px 0 #193d2d55; }.ticket small,.ticket span{display:block;font:7px var(--mono)}.ticket b{display:block;margin:4px 0;font:700 27px var(--serif)}
.scene-yellow .idea-visual { display:grid; place-items:center; background:var(--yellow); }.idea-sun { width:90px;height:90px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--lime);font-size:40px;animation:pulse 3s ease-in-out infinite}.idea-visual p{position:absolute;top:25px;right:20px;margin:0;font-family:var(--serif);font-size:12px;line-height:1.6;transform:rotate(5deg)}.idea-visual > span{position:absolute;left:22px;bottom:22px;font:8px var(--mono)}

.day { color: var(--cream); background: var(--green); display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; }
.day-title { position: sticky; top: 80px; align-self: start; }.eyebrow.light > span { background:var(--yellow); }.day-title h2 { font-size:clamp(38px,4.3vw,65px); }
.timeline { position:relative; }.timeline-progress { position:absolute; width:1px; top:18px; bottom:18px; left:85px; background:#789080; }
.timeline article { min-height:185px; display:grid; grid-template-columns:65px 20px 1fr; gap:12px; position:relative; padding-bottom:34px; }.timeline time { padding-top:3px; color:var(--lime); font:11px var(--mono); }.dot { width:11px;height:11px;margin-top:3px;border:3px solid var(--green);border-radius:50%;background:var(--lime);box-shadow:0 0 0 1px var(--lime);z-index:1}.timeline small{font:9px var(--mono);letter-spacing:.15em;color:#96a49a}.timeline h3{margin:10px 0 10px;font-family:var(--serif);font-size:25px}.timeline p{max-width:430px;margin:0;color:#b9c3bc;font-size:13px;line-height:1.8}

.manifesto { display:grid;grid-template-columns:.7fr 1.3fr;gap:8vw;align-items:center;min-height:670px;background:var(--yellow);position:relative;overflow:hidden}.manifesto::before{content:"";position:absolute;width:450px;height:450px;left:-140px;bottom:-210px;border:1px solid #18251d55;border-radius:50%;box-shadow:0 0 0 55px #f5cb54,0 0 0 56px #18251d55,0 0 0 110px #f5cb54,0 0 0 111px #18251d55}.manifesto-stamp{width:270px;height:270px;display:flex;align-items:center;justify-content:center;gap:15px;position:relative;border:2px solid var(--ink);border-radius:50%;transform:rotate(-8deg)}.manifesto-stamp::before,.manifesto-stamp::after{content:"✦";position:absolute;left:50%;transform:translateX(-50%);font-size:20px}.manifesto-stamp::before{top:15px}.manifesto-stamp::after{bottom:15px}.manifesto-stamp > span{font:900 85px var(--serif);letter-spacing:-.12em}.manifesto-stamp small{font:500 10px/1.5 var(--mono);letter-spacing:.1em}.manifesto-copy{position:relative;z-index:1}.manifesto blockquote{margin:0 0 35px;font:700 clamp(29px,3.5vw,51px)/1.5 var(--serif);letter-spacing:-.06em}.manifesto blockquote span{background:var(--cream);padding:0 4px}.manifesto-copy>p:not(.eyebrow){max-width:620px;font-size:14px;line-height:2}.arrow-link{margin-top:25px;border-bottom:1px solid var(--ink);padding-bottom:7px}.arrow-link span{margin-left:40px}
.join { padding-top:100px;padding-bottom:100px;background:var(--paper)}.join-inner{padding:65px 7%;background:var(--ink);color:var(--cream);position:relative;overflow:hidden}.join-inner::after{content:"✦";position:absolute;right:4%;top:-48px;color:var(--lime);font-size:180px;line-height:1;opacity:.18}.join-copy p{font:10px var(--mono);letter-spacing:.12em;color:var(--lime)}.join-copy h2{margin:15px 0 35px;font:700 clamp(32px,3.7vw,52px)/1.4 var(--serif);letter-spacing:-.05em}.subscribe-form{max-width:620px;display:flex;border-bottom:1px solid #89948c}.subscribe-form input{flex:1;padding:16px 0;border:0;outline:0;color:white;background:transparent}.subscribe-form input::placeholder{color:#849087}.subscribe-form button{border:0;background:transparent;color:var(--lime);cursor:pointer;font-weight:600}.subscribe-form button span{margin-left:20px}.form-note{margin:12px 0 0;color:#7e8b82;font-size:10px}
.footer { display:grid;grid-template-columns:1fr 1.4fr .8fr;gap:30px;align-items:start;padding:55px 6vw 30px;border-top:1px solid var(--line);font-size:12px}.footer>p{margin:7px 0;color:#6d776f}.footer-links{display:flex;justify-content:flex-end;gap:25px}.copyright{grid-column:1/-1!important;padding-top:35px;border-top:1px solid var(--line);font:9px var(--mono)}

.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s ease,transform .8s ease; }.reveal.is-visible{opacity:1;transform:none}.delay-1{transition-delay:.12s}.delay-2{transition-delay:.22s}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{transform:scale(1.08) rotate(8deg)}}@keyframes marquee{to{transform:translateX(-50%)}}

@media (max-width: 980px) {
  .hero{grid-template-columns:1fr;padding-top:35px}.hero-copy{padding-left:0}.hero-visual{margin-top:35px}.scene-grid{grid-template-columns:1fr 1fr}.scene-large{grid-column:1/-1}.day{grid-template-columns:1fr}.day-title{position:relative;top:auto}.manifesto{grid-template-columns:.7fr 1.3fr}.float-time{right:4%}
}
@media (max-width: 700px) {
  .site-header{height:70px}.menu-button{display:block;position:relative;z-index:2}.menu-button span{width:24px;height:1px;display:block;margin:6px;background:var(--ink);transition:.2s}.menu-button[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-button[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .nav{display:none;position:absolute;left:0;right:0;top:69px;padding:25px 5vw;flex-direction:column;align-items:flex-start;background:var(--paper);border-bottom:1px solid var(--ink)}.nav.is-open{display:flex}.nav-cta{width:100%;text-align:center}
  .hero{padding:45px 5vw 60px}.hero h1{font-size:43px}.hero-intro{font-size:14px}.hero-actions{align-items:flex-start;flex-direction:column;gap:20px}.trust-row{margin-top:35px}.hero-visual{min-height:500px;margin-left:-4vw;margin-right:-4vw}.hero-visual::before{width:95%;right:-5%}.phone-card{width:72%;min-height:450px;padding:15px 17px}.phone-card h2{font-size:23px}.float-card{padding:9px}.float-weather{left:0}.float-time{right:0;bottom:10%}.vertical-note,.sun-shape{display:none}
  .section{padding:85px 5vw}.section-heading{display:block}.section-heading>p{margin-top:25px}.section-heading h2,.day-title h2{font-size:37px}.scene-grid{grid-template-columns:1fr}.scene-large{grid-column:auto}.scene-card{min-height:560px}.kitchen-visual,.trip-visual,.idea-visual{height:285px}.plate{left:5%}
  .day{gap:65px}.timeline-progress{left:71px}.timeline article{grid-template-columns:52px 18px 1fr;gap:10px}.timeline h3{font-size:21px}
  .manifesto{grid-template-columns:1fr;padding-top:80px}.manifesto-stamp{width:190px;height:190px}.manifesto-stamp>span{font-size:60px}.manifesto blockquote{font-size:29px}.join{padding-left:0;padding-right:0}.join-inner{padding:52px 6%}.subscribe-form{display:block;border:0}.subscribe-form input{width:100%;border-bottom:1px solid #89948c}.subscribe-form button{width:100%;margin-top:15px;padding:15px;background:var(--lime);color:var(--ink)}
  .footer{grid-template-columns:1fr}.footer-links{justify-content:flex-start}.copyright{margin-top:20px!important}.marquee span{font-size:14px}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}