:root {
  --paper: #f5f0e6;
  --paper-bright: #fbf8f1;
  --navy: #1f3a52;
  --dusty-navy: #3d5a73;
  --slate: #6b7580;
  --terracotta: #d97a3f;
  --line: #dcd6c9;
  --sage: #7f9583;
  --ink-soft: rgba(31, 58, 82, 0.12);
  --max: 1200px;
  --serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --sans: "Avenir Next", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--navy); background: var(--paper); font-family: var(--sans); line-height: 1.8; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .32; background-image: linear-gradient(rgba(31,58,82,.055) 1px, transparent 1px), radial-gradient(circle at 25% 25%, rgba(217,122,63,.06), transparent 30%); background-size: 100% 72px, 100% 100%; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid rgba(217,122,63,.55); outline-offset: 5px; border-radius: 3px; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 10px 18px; background: var(--navy); color: white; }
.skip-link:focus { top: 12px; }
.mobile-only { display: none; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; border-bottom: 1px solid transparent; transition: .25s ease; }
.site-header.scrolled { background: rgba(245,240,230,.9); backdrop-filter: blur(14px); border-color: var(--line); }
.header-inner { width: min(calc(100% - 64px), var(--max)); height: 86px; margin: auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 21px; font-weight: 700; letter-spacing: .01em; }
.brand-mark { width: 40px; height: 40px; overflow: hidden; border: 1px solid var(--line); border-radius: 50%; background: var(--paper-bright); }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.desktop-nav { display: flex; gap: 36px; font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.desktop-nav a { position: relative; }
.desktop-nav a::after { content:""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px; background: var(--terracotta); transition: .2s; }
.desktop-nav a:hover::after { right: 0; }
.header-cta { padding: 11px 18px; border: 1px solid var(--navy); border-radius: 999px; font-size: 13px; font-weight: 650; }

.hero { min-height: 780px; height: 100svh; max-height: 980px; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(300px, .86fr) minmax(480px, 1.14fr); align-items: center; gap: 56px; padding: 110px max(5vw, calc((100vw - var(--max)) / 2)) 56px; }
.hero-route { position: absolute; inset: 0; opacity: .42; pointer-events: none; }
.hero-route svg { width: 100%; height: 100%; }
.hero-route path { fill: none; stroke: var(--terracotta); stroke-width: 2; stroke-dasharray: 6 11; }
.hero-route circle { fill: var(--paper); stroke: var(--terracotta); stroke-width: 4; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 30px; }
.eyebrow, .section-label { display: flex; align-items: center; gap: 13px; margin: 0 0 30px; font-size: 11px; font-weight: 700; letter-spacing: .22em; }
.eyebrow span, .section-label::before { content: ""; width: 45px; height: 1px; background: currentColor; }
.hero h1 { margin: 0; font-family: var(--serif); font-size: clamp(47px, 5.05vw, 75px); font-weight: 600; line-height: 1.34; letter-spacing: .03em; }
.hero-lead { margin: 30px 0 0; color: var(--slate); font-size: 16px; line-height: 2; }
.hero-actions { display: flex; align-items: center; gap: 32px; margin-top: 38px; }
.button { min-height: 55px; padding: 14px 26px; display: inline-flex; align-items: center; justify-content: center; gap: 30px; border-radius: 4px; font-weight: 700; letter-spacing: .04em; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(31,58,82,.14); }
.button-primary { background: var(--terracotta); color: white; }
.text-link { font-size: 13px; font-weight: 650; border-bottom: 1px solid var(--navy); }
.availability { font-size: 11px; color: var(--slate); letter-spacing: .08em; }
.hero-visual { position: relative; z-index: 1; min-height: 620px; }
.sun { position: absolute; width: 310px; height: 310px; right: -30px; top: 12px; border-radius: 50%; background: rgba(217,122,63,.13); }
.postcard { position: absolute; background: var(--paper-bright); border: 1px solid rgba(31,58,82,.13); box-shadow: 0 28px 70px rgba(31,58,82,.14); }
.postcard-back { width: 420px; height: 260px; right: 0; top: 90px; transform: rotate(8deg); padding: 28px; color: rgba(31,58,82,.38); font: 11px var(--sans); letter-spacing: .18em; }
.postcard-back::after { content:""; position:absolute; left:50%; top:20px; bottom:20px; width:1px; background:var(--line); }
.postcard-back i { display:block; width:42%; height:1px; margin-top:24px; background:var(--line); }
.postcard-main { width: min(520px, 88%); left: 0; top: 128px; transform: rotate(-2.2deg); padding: 16px 16px 23px; }
.photo-frame { height: 292px; overflow: hidden; background: #e8dcc6; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.postcard-meta { display: flex; justify-content: space-between; align-items: center; padding: 18px 14px 5px; }
.postcard-meta small { display:block; color: var(--slate); font-size: 10px; letter-spacing: .08em; }
.postcard-meta strong { display:block; font-family: var(--serif); font-size: 25px; }
.arrival-stamp { width: 92px; height: 92px; border: 2px solid var(--terracotta); border-radius: 50%; color: var(--terracotta); display:grid; place-content:center; text-align:center; font-size:9px; line-height:1.2; letter-spacing:.14em; transform:rotate(7deg); }
.arrival-stamp b { font-size: 22px; }
.postcard-main > p { margin: 4px 14px 0; font-family: var(--serif); font-size: 13px; line-height: 1.9; }
.map-note { position: absolute; right: 4%; bottom: 40px; display:flex; align-items:center; gap:12px; font-size:9px; letter-spacing:.16em; transform:rotate(3deg); }
.map-line { width:150px; height:34px; position:relative; border-top:1px dashed var(--dusty-navy); }
.map-line i,.map-line b { position:absolute; top:-5px; width:9px; height:9px; border-radius:50%; background:var(--navy); }
.map-line b { right:0; background:var(--terracotta); }
.scroll-note { position:absolute; left:32px; bottom:35px; writing-mode:vertical-rl; font-size:8px; letter-spacing:.2em; }
.scroll-note span { display:inline-block; width:1px; height:42px; background:var(--navy); margin-bottom:10px; }

.section-pad { padding: 130px max(5vw, calc((100vw - var(--max)) / 2)); }
.section-label { margin-bottom: 60px; color: var(--dusty-navy); }
.section-label::before { display:none; }
.section-label span { color: var(--terracotta); }
.intro-grid { display:grid; grid-template-columns: 1fr .82fr; gap: 12%; align-items:start; }
.intro h2, .section-heading h2, .letters h2, .slow-copy h2, .archive h2, .principles h2, .download h2 { margin:0; font-family:var(--serif); font-size:clamp(38px,4.5vw,64px); font-weight:600; line-height:1.48; letter-spacing:.04em; }
.intro-copy { border-top: 1px solid var(--navy); padding-top: 22px; font-size: 15px; color: var(--slate); }
.quote { width:min(720px, 80%); margin:120px auto 0; padding:50px 20px; border-block:1px solid var(--line); text-align:center; position:relative; }
.quote span { position:absolute; left:4%; top:25px; color:var(--terracotta); font:80px var(--serif); opacity:.5; }
.quote p { margin:0; font:600 clamp(26px,3vw,40px)/1.8 var(--serif); }

.experience { background: var(--navy); color: var(--paper); }
.light { color:var(--paper); }
.section-heading { display:grid; grid-template-columns:1fr .7fr; align-items:end; gap:10%; }
.section-heading p { color:rgba(245,240,230,.67); font-size:14px; }
.journey-steps { margin-top:80px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(245,240,230,.25); }
.journey-step { position:relative; min-width:0; padding:32px 20px 0; border-right:1px solid rgba(245,240,230,.18); }
.journey-step:last-child { border-right:0; }
.step-number { color:var(--terracotta); font:12px var(--sans); letter-spacing:.15em; }
.mini-scene { height:145px; margin:22px 0; position:relative; overflow:hidden; background:rgba(245,240,230,.05); }
.journey-step h3 { margin:0 0 8px; font:600 23px var(--serif); }
.journey-step p { margin:0; color:rgba(245,240,230,.62); font-size:12px; }
.scene-depart .route-dashes { position:absolute; width:230px; height:100px; left:15px; top:40px; border-top:2px dashed var(--terracotta); border-radius:50%; transform:rotate(-12deg); }
.companion { position:absolute; left:50px; top:55px; color:var(--paper); font-size:28px; }
.scene-depart .arrow { position:absolute; right:30px; top:54px; font-size:34px; color:var(--terracotta); }
.scene-travel svg { width:100%; height:100%; }
.scene-travel path { fill:none; stroke:rgba(245,240,230,.55); stroke-width:2; }
.scene-travel circle { fill:var(--terracotta); }
.tiny-postcard { width:150px; height:100px; background:var(--paper); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-5deg); border:1px solid var(--line); }
.tiny-postcard i { position:absolute; inset:12px 12px 36px; background:linear-gradient(145deg,#8095a1,#d9c5a1); }
.tiny-postcard span { position:absolute; right:8px; bottom:8px; color:var(--terracotta); font-size:8px; }
.scene-home > span { position:absolute; left:35%; top:45%; transform:translate(-50%,-50%); font-size:68px; color:var(--paper); }
.stamp-small { position:absolute; width:74px; height:74px; right:18px; top:34px; border:1px solid var(--terracotta); border-radius:50%; display:grid; place-content:center; text-align:center; color:var(--terracotta); font-size:7px; transform:rotate(8deg); }

.letters { display:grid; grid-template-columns:.82fr 1fr; gap:10%; align-items:center; }
.letters-copy > p { color:var(--slate); max-width:500px; }
.letters ul { list-style:none; padding:0; margin:45px 0 0; }
.letters li { display:flex; gap:18px; padding:18px 0; border-top:1px solid var(--line); }
.letters li > span { color:var(--terracotta); font-size:11px; }
.letters li b,.letters li small { display:block; }
.letters li small { color:var(--slate); margin-top:4px; }
.phone-stage { min-height:780px; position:relative; display:grid; place-items:center; background:radial-gradient(circle,rgba(217,122,63,.18),transparent 62%); }
.phone { width:370px; height:750px; padding:16px; overflow:hidden; background:var(--paper); border:5px solid var(--navy); border-radius:46px; box-shadow:0 30px 70px rgba(31,58,82,.2); }
.phone-top { height:30px; display:flex; justify-content:space-between; font-size:11px; font-weight:700; padding:0 10px; }
.phone-top i { width:75px; height:20px; background:var(--navy); border-radius:20px; }
.phone-content { padding:18px 12px; text-align:center; }
.phone-content > small { color:var(--dusty-navy); font-size:9px; letter-spacing:.18em; }
.phone-content h3 { margin:18px 0; font:600 30px/1.4 var(--serif); }
.phone-card { background:var(--paper-bright); border:1px solid var(--line); padding:10px 10px 24px; position:relative; }
.phone-card img { height:300px; width:100%; object-fit:cover; }
.phone-card h4 { margin:23px 0 4px; font:600 25px var(--serif); }
.phone-card p { margin:12px 18px 0; font:13px/2 var(--serif); }
.phone-stamp { position:absolute; right:-4px; top:274px; width:78px; height:78px; display:grid; place-content:center; border:2px solid var(--terracotta); border-radius:50%; color:var(--terracotta); font-size:8px; line-height:1.2; transform:rotate(8deg); }
.phone-stamp b { font-size:18px; }
.weather-ticket { position:absolute; right:1%; top:25%; background:var(--paper-bright); border:1px solid var(--line); box-shadow:0 14px 35px rgba(31,58,82,.12); padding:14px 18px; transform:rotate(4deg); }
.weather-ticket span,.weather-ticket b,.weather-ticket small { display:block; }
.weather-ticket span { color:var(--dusty-navy); font-size:24px; }
.weather-ticket small { color:var(--slate); }

.slow-time { display:grid; grid-template-columns:1.15fr .85fr; gap:10%; align-items:center; background:#e9e2d5; }
.night-image { position:relative; }
.night-image::before { content:""; position:absolute; inset:18px -18px -18px 18px; border:1px solid var(--dusty-navy); }
.night-image img { position:relative; width:100%; aspect-ratio:4/3; object-fit:cover; filter:saturate(.72) sepia(.08); }
.night-image span { position:absolute; left:24px; bottom:18px; padding:5px 10px; color:var(--paper); background:rgba(31,58,82,.78); font-size:10px; letter-spacing:.08em; }
.slow-copy p { color:var(--slate); }
.slow-copy blockquote { margin:35px 0 0; padding:20px 24px; border-left:2px solid var(--terracotta); font:17px/1.9 var(--serif); }

.archive { background:var(--dusty-navy); color:var(--paper); overflow:hidden; }
.archive-head { text-align:center; }
.archive-head .section-label { justify-content:center; }
.archive-head p { color:rgba(245,240,230,.65); }
.book-shelf { max-width:960px; height:350px; margin:70px auto 0; display:flex; align-items:flex-end; justify-content:center; border-bottom:18px solid #d5b184; box-shadow:0 15px 0 #23394a; }
.travel-book { width:140px; height:310px; padding:28px 14px 18px; display:flex; flex-direction:column; align-items:center; border:1px solid rgba(245,240,230,.5); background:#eee6d8; color:var(--navy); writing-mode:vertical-rl; box-shadow:inset 8px 0 rgba(31,58,82,.05); }
.travel-book:nth-child(2) { height:285px; background:#d8c9ad; }
.travel-book:nth-child(3) { height:330px; background:#b9c3bb; }
.travel-book:nth-child(4) { height:270px; background:#e8d6bc; }
.travel-book.active { background:var(--navy); color:var(--paper); transform:translateY(-10px); }
.travel-book span { font:600 22px var(--serif); letter-spacing:.18em; }
.travel-book small { font-size:9px; margin-top:auto; letter-spacing:.12em; }
.travel-book i { font-style:normal; font-size:24px; margin-top:12px; }
.travel-book.thin { width:92px; }

.principles { text-align:center; }
.principle-grid { margin-top:70px; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; text-align:left; }
.principle-grid article { padding:42px 34px; border:1px solid var(--line); background:rgba(251,248,241,.56); }
.principle-grid article > span { color:var(--terracotta); font:36px var(--serif); }
.principle-grid h3 { margin:22px 0 10px; font:600 21px var(--serif); }
.principle-grid p { color:var(--slate); font-size:13px; }

.download { min-height:680px; display:grid; place-items:center; position:relative; overflow:hidden; text-align:center; }
.download-route { position:absolute; width:900px; height:900px; border:1px dashed rgba(217,122,63,.38); border-radius:50%; }
.download-route::before,.download-route::after { content:""; position:absolute; border:1px dashed rgba(31,58,82,.16); border-radius:50%; inset:100px; }
.download-route::after { inset:220px; }
.download-inner { position:relative; max-width:650px; }
.download-inner > img { width:90px; height:90px; object-fit:cover; border-radius:50%; margin:0 auto 28px; }
.download-inner .eyebrow { justify-content:center; }
.download-inner p { color:var(--slate); }
.download-inner .button { margin-top:20px; }
.download-inner > small { display:block; margin-top:15px; color:var(--slate); font-size:10px; }
.app-store-button { width:218px; min-height:66px; margin:24px auto 0; padding:10px 22px; display:flex; align-items:center; justify-content:center; gap:14px; color:#fff; background:#111; border:1px solid #000; border-radius:12px; text-align:left; transition:transform .2s, box-shadow .2s; }
.app-store-button:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(31,58,82,.2); }
.app-store-button svg { width:28px; height:34px; fill:currentColor; flex:0 0 auto; }
.app-store-button span,.app-store-button small,.app-store-button strong { display:block; }
.app-store-button small { margin:0; color:#fff; font-size:10px; line-height:1.1; letter-spacing:.04em; }
.app-store-button strong { margin-top:2px; font-size:19px; line-height:1.1; letter-spacing:.02em; }

footer { padding:42px max(5vw,calc((100vw - var(--max))/2)); display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:24px; border-top:1px solid var(--line); font-size:11px; color:var(--slate); }
footer .brand { color:var(--navy); font-size:18px; }
footer .brand-mark { width:34px; height:34px; }
footer > p { text-align:center; }
footer > div { display:flex; gap:20px; }

.legal-page { min-height:100svh; }
.legal-header { position:relative; border-bottom:1px solid var(--line); }
.legal-main { width:min(calc(100% - 48px), 850px); margin:0 auto; padding:150px 0 120px; }
.legal-kicker { display:flex; align-items:center; gap:14px; margin:0 0 25px; color:var(--terracotta); font-size:10px; font-weight:700; letter-spacing:.2em; }
.legal-kicker::before { content:""; width:42px; height:1px; background:currentColor; }
.legal-main h1 { margin:0; font:600 clamp(38px,6vw,62px)/1.4 var(--serif); letter-spacing:.04em; }
.legal-meta { margin:14px 0 70px; color:var(--slate); font-size:12px; }
.legal-document { padding:52px clamp(24px,6vw,64px); background:rgba(251,248,241,.72); border:1px solid var(--line); }
.legal-placeholder { min-height:350px; display:grid; place-content:center; text-align:center; border:1px dashed var(--line); color:var(--slate); }
.legal-placeholder span { display:block; margin-bottom:16px; color:var(--terracotta); font-size:10px; font-weight:700; letter-spacing:.18em; }
.legal-placeholder p { margin:0; font:600 clamp(20px,3vw,28px)/1.8 var(--serif); }
.legal-note { margin:24px 0 0; color:var(--slate); font-size:11px; text-align:center; }
.legal-footer { grid-template-columns:1fr auto; }
.legal-footer > p { display:none; }

.reveal { opacity:1; transform:none; }
.js .reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.js .reveal.visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none;transition:none}.button{transition:none} }

@media (max-width: 980px) {
  .desktop-nav { display:none; }
  .hero { height:auto; max-height:none; min-height:0; grid-template-columns:1fr; padding-top:150px; gap:20px; }
  .hero-copy { max-width:700px; }
  .hero-visual { width:min(690px,100%); margin:auto; }
  .hero-route { opacity:.28; }
  .intro-grid,.section-heading,.letters,.slow-time { grid-template-columns:1fr; }
  .intro-copy,.section-heading p { max-width:650px; margin-left:auto; }
  .journey-steps { grid-template-columns:repeat(2,1fr); }
  .journey-step:nth-child(2) { border-right:0; }
  .journey-step:nth-child(n+3) { border-top:1px solid rgba(245,240,230,.18); }
  .letters { gap:60px; }
  .phone-stage { min-height:760px; }
  .slow-time { gap:80px; }
  .slow-copy { max-width:650px; }
  footer { grid-template-columns:1fr auto; }
  footer > p { display:none; }
}

@media (max-width: 640px) {
  body::before { background-size:100% 56px,100% 100%; }
  .mobile-only { display:block; }
  .header-inner { width:calc(100% - 34px); height:70px; }
  .brand { font-size:18px; }
  .brand-mark { width:34px; height:34px; }
  .header-cta { padding:8px 12px; font-size:10px; }
  .hero { padding:125px 22px 55px; }
  .hero h1 { font-size:clamp(39px,12vw,54px); line-height:1.42; }
  .hero-lead { font-size:14px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:18px; }
  .availability { margin-top:20px; }
  .button { width:100%; }
  .hero-visual { min-height:500px; margin-top:10px; }
  .sun { width:220px; height:220px; }
  .postcard-main { width:94%; top:70px; padding:10px 10px 18px; }
  .postcard-back { width:78%; height:180px; top:40px; }
  .photo-frame { height:220px; }
  .postcard-meta { padding:13px 8px 3px; }
  .postcard-meta strong { font-size:21px; }
  .arrival-stamp { width:72px; height:72px; font-size:7px; }
  .arrival-stamp b { font-size:17px; }
  .postcard-main > p { font-size:11px; }
  .map-note { bottom:8px; }
  .map-line { width:85px; }
  .scroll-note { display:none; }
  .section-pad { padding:90px 24px; }
  .section-label { margin-bottom:38px; font-size:9px; }
  .intro h2,.section-heading h2,.letters h2,.slow-copy h2,.archive h2,.principles h2,.download h2 { font-size:clamp(32px,10vw,43px); }
  .intro-grid { gap:44px; }
  .intro-copy { margin-left:0; }
  .quote { width:100%; margin-top:70px; }
  .journey-steps { grid-template-columns:1fr; margin-top:55px; }
  .journey-step { border-right:0; border-top:1px solid rgba(245,240,230,.18); padding:26px 0 34px; }
  .journey-step:first-child { border-top:0; }
  .mini-scene { width:100%; }
  .letters { gap:50px; }
  .letters-copy > p { font-size:14px; }
  .phone-stage { min-height:670px; margin-inline:-18px; }
  .phone { width:min(340px,90vw); height:660px; border-radius:38px; }
  .phone-card img { height:240px; }
  .weather-ticket { right:-5px; top:12%; }
  .night-image::before { inset:10px -10px -10px 10px; }
  .book-shelf { height:280px; justify-content:flex-start; overflow:hidden; margin-inline:-24px; padding-left:24px; }
  .travel-book { flex:0 0 92px; height:240px; padding:20px 10px; }
  .travel-book:nth-child(2){height:220px}.travel-book:nth-child(3){height:255px}.travel-book:nth-child(4){height:210px}
  .travel-book span { font-size:18px; }
  .travel-book.thin { flex-basis:72px; }
  .principle-grid { grid-template-columns:1fr; gap:14px; }
  .principle-grid article { padding:30px 25px; }
  .download { min-height:620px; }
  .download-route { width:650px; height:650px; }
  footer { grid-template-columns:1fr; padding:35px 24px; }
  footer > div { flex-wrap:wrap; gap:10px 18px; }
  .legal-main { width:min(calc(100% - 40px),850px); padding:120px 0 80px; }
  .legal-document { padding:20px; }
  .legal-placeholder { min-height:300px; }
}

@media (max-width: 380px) {
  .header-cta { max-width:132px; line-height:1.35; text-align:center; }
  .hero { padding-inline:18px; }
  .hero h1 { font-size:38px; }
  .postcard-main { width:98%; left:-2%; }
  .photo-frame { height:195px; }
  .postcard-main > p { margin-inline:8px; }
  .section-pad { padding-inline:20px; }
  .phone { width:92vw; padding-inline:10px; }
  .phone-card p { margin-inline:10px; }
}