/* ============================================================
   AnoScene — Landing Page
   Photography-led, nostalgic, cinematic. One warm accent
   (terracotta). Navy is the ink, never black. Real travel
   photos, unified by a warm memory grade + paper grain.
   ============================================================ */

/* Self-hosted brand fonts (Google Fonts, SIL Open Font License; latin subset).
   Bundled locally so the page has no third-party runtime font dependency.
   Japanese renders from the system font stack (see html[lang=ja]). */
@font-face {
  font-family:'Fraunces'; font-style:normal; font-weight:340 560; font-display:swap;
  src:url('./assets/fonts/fraunces-latin-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:'Fraunces'; font-style:italic; font-weight:340 560; font-display:swap;
  src:url('./assets/fonts/fraunces-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:'Hanken Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('./assets/fonts/hankengrotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --paper-cream:#EAD9BD; --paper-card:#E8DCC4; --road:#E9DBBE;
  --terracotta:#C55A34; --navy:#26374A; --field:#B9C2B7; --water:#8AA0A0;
  --terracotta-deep:#A8482A; --terracotta-soft:#D98A6C;
  --navy-700:#1C2A38; --navy-500:#3B4E62; --navy-300:#61738A;
  --sage-100:#D7DDD3; --sage-300:#C6CEC2;
  --cream-hi:#F3ECD6;

  --bg:var(--field);
  --surface:var(--paper-card);
  --surface-2:var(--paper-cream);
  --ink:var(--navy);
  --ink-muted:#3E4C5B; /* WCAG AA: 4.8:1 on sage --bg, 6.5:1 on --surface */
  --line:rgba(38,55,74,.14);
  --accent:var(--terracotta);
  --accent-strong:var(--terracotta-deep); /* button bg: #A8482A on #FBF3E6 = 5.26:1 (WCAG AA) */
  --accent-ink:#FBF3E6;
  --focus:#3B4E62;

  --serif:'Fraunces','Newsreader',ui-serif,Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-caption:.8125rem;
  --fs-body:clamp(1rem,.96rem + .2vw,1.125rem);
  --fs-h4:clamp(1.2rem,1.05rem + .5vw,1.5rem);
  --fs-h3:clamp(1.6rem,1.25rem + 1.4vw,2.4rem);
  --fs-h2:clamp(2rem,1.5rem + 2.2vw,3.2rem);
  --fs-h1:clamp(2.8rem,2rem + 4vw,5rem);
  --fs-display:clamp(2.6rem,1.8rem + 4vw,4.6rem);

  --measure:72rem;
  --measure-text:42rem;
  --section-y:clamp(4.5rem,10vw,9rem);
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --shadow-paper:0 1px 2px rgba(28,42,56,.06),0 10px 30px rgba(28,42,56,.12);
  --shadow-lift:0 2px 6px rgba(28,42,56,.08),0 26px 60px rgba(28,42,56,.22);

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --t-fast:180ms; --t-med:440ms; --t-slow:900ms;
}

/* Opt-in "dusk" dark variant (no toggle wired). Light is primary & default. */
:root[data-theme=dark]{ color-scheme:dark;
  --bg:#141E28; --surface:#26374A; --surface-2:#2E4155;
  --paper-card:#26374A; --paper-cream:#2E4155;
  --ink:#EAD9BD; --ink-muted:#9FB0A8; --line:rgba(234,217,189,.16);
  --accent:#D9724C; --accent-strong:#D9724C; --accent-ink:#141E28; --water:#5E7574;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; color-scheme:light; }
body {
  margin:0; font-family:var(--sans); font-size:var(--fs-body); line-height:1.62;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img,svg { display:block; max-width:100%; }
img { height:auto; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { margin:0; font-weight:450; line-height:1.08; letter-spacing:-.02em; text-wrap:balance; }
p { margin:0; }
button { font:inherit; color:inherit; cursor:pointer; }

/* paper grain over the whole page */
body::after {
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.055; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { width:min(var(--measure),100% - 2.5rem); margin-inline:auto; }
.display { font-family:var(--serif); font-optical-sizing:auto; }
.eyebrow { font-size:var(--fs-caption); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 1rem; }
:lang(ja) .eyebrow { letter-spacing:.12em; }
.on-photo { color:var(--cream-hi); text-shadow:0 1px 24px rgba(15,20,26,.55), 0 1px 3px rgba(15,20,26,.5); }
.on-photo.eyebrow { color:#F2C6A8; }

.section-head { max-width:var(--measure-text); margin-bottom:clamp(2.4rem,5vw,4rem); }
.section-head.center { margin-inline:auto; text-align:center; }
.section-head h2 { font-size:var(--fs-h2); }
.section-sub { margin-top:1.1rem; color:var(--ink-muted); font-size:clamp(1.02rem,.98rem + .3vw,1.2rem); max-width:44ch; }
.section-head.center .section-sub { margin-inline:auto; }

.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip { position:fixed; top:-100px; left:1rem; z-index:10000; background:var(--navy); color:var(--accent-ink); padding:.7rem 1.1rem; border-radius:var(--r-sm); transition:top var(--t-fast); }
.skip:focus { top:1rem; }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; border-radius:4px; }
.on-photo ~ * :focus-visible, .hero :focus-visible, .cta :focus-visible { outline-color:var(--cream-hi); }
/* Unscrolled header sits over the dark hero photo — keep its focus ring visible there. */
.site-header[data-scrolled=false] :focus-visible { outline-color:var(--cream-hi); }

/* ---------- Warm "memory" photo grade (unifies all stock into one mood) ---------- */
.photo { position:relative; overflow:hidden; background:var(--navy-700); }
.photo > img { width:100%; height:100%; object-fit:cover; filter:saturate(.86) contrast(1.03) brightness(1.02) sepia(.12); }
.photo::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(197,90,52,.10), rgba(38,55,74,.14)),
    radial-gradient(120% 100% at 50% 0%, transparent 55%, rgba(28,42,56,.28));
  mix-blend-mode:multiply;
}

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5em; min-height:50px; padding:.85rem 1.7rem; border:0; border-radius:var(--r-pill); font-weight:600; letter-spacing:.01em; white-space:nowrap; transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast), background var(--t-fast); }
.btn-sm { min-height:40px; padding:.5rem 1.1rem; font-size:.95rem; }
.btn-primary { background:var(--accent-strong); color:var(--accent-ink); box-shadow:0 10px 24px rgba(168,72,42,.34); }
.btn-primary:hover { background:var(--terracotta-deep); transform:translateY(-2px); }
.btn-glass { color:var(--cream-hi); border:1.5px solid rgba(243,236,214,.5); background:rgba(20,25,30,.18); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.btn-glass:hover { border-color:var(--cream-hi); background:rgba(20,25,30,.34); transform:translateY(-2px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header { position:fixed; top:0; left:0; right:0; z-index:100; transition:background var(--t-med), border-color var(--t-med), backdrop-filter var(--t-med); border-bottom:1px solid transparent; }
.site-header[data-scrolled=true] { background:color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter:saturate(1.2) blur(12px); -webkit-backdrop-filter:saturate(1.2) blur(12px); border-bottom-color:var(--line); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; }
.brand { display:inline-flex; align-items:center; gap:.6rem; color:var(--cream-hi); transition:color var(--t-med); }
.site-header[data-scrolled=true] .brand { color:var(--ink); }
.brand-mark { border-radius:8px; box-shadow:var(--shadow-paper); }
.brand-word { font-family:var(--serif); font-weight:560; font-size:1.25rem; letter-spacing:-.01em; }
.header-actions { display:flex; align-items:center; gap:.6rem; }
.lang { display:inline-flex; align-items:center; gap:.2rem; }
.lang-btn { background:none; border:0; padding:.4rem .5rem; border-radius:var(--r-sm); font-size:.85rem; font-weight:600; white-space:nowrap; color:rgba(243,236,214,.62); transition:color var(--t-fast); min-height:40px; }
.site-header[data-scrolled=true] .lang-btn { color:var(--ink-muted); }
.lang-btn[aria-pressed=true] { color:var(--cream-hi); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; text-decoration-thickness:1.5px; }
.site-header[data-scrolled=true] .lang-btn[aria-pressed=true] { color:var(--ink); }
.lang-btn:hover { color:var(--cream-hi); }
.site-header[data-scrolled=true] .lang-btn:hover { color:var(--ink); }
.lang-sep { color:rgba(243,236,214,.4); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.hero-media { position:absolute; inset:0; z-index:0; }
.hero-media > img { width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.04) brightness(.98) sepia(.1); animation:kenburns 26s ease-in-out infinite alternate; transform-origin:60% 40%; }
.hero-scrim { position:absolute; inset:0; background:linear-gradient(90deg, rgba(13,17,22,.86) 0%, rgba(13,17,22,.6) 42%, rgba(13,17,22,.4) 100%), linear-gradient(0deg, rgba(13,17,22,.66), transparent 46%); }
.hero-inner { position:relative; z-index:2; padding-block:8rem 6rem; display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:center; grid-template-columns:1fr; }
@media (min-width:58rem){ .hero-inner { grid-template-columns:1.02fr .98fr; } }
.hero-copy { max-width:38rem; }
.hero h1 { font-size:var(--fs-h1); margin:.4rem 0 1.3rem; }
.hero .lede { font-size:clamp(1.1rem,1rem + .6vw,1.4rem); color:rgba(243,236,214,.9); max-width:34ch; }
.hero-cta { display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }

/* hero device mockup */
.hero-device { position:relative; display:flex; justify-content:center; }
.hero-device .phone { --phw:clamp(230px,58vw,300px); }
@media (min-width:58rem){ .hero-device .phone { transform:perspective(1500px) rotateY(-11deg) rotateX(3deg) rotate(1deg); } }

.scroll-cue { position:absolute; z-index:2; left:50%; bottom:2rem; translate:-50% 0; width:26px; height:42px; border:2px solid rgba(243,236,214,.6); border-radius:var(--r-pill); display:flex; justify-content:center; padding-top:7px; }
.scroll-dot { width:4px; height:8px; border-radius:var(--r-pill); background:var(--cream-hi); animation:scrollcue 1.8s var(--ease-soft) infinite; }
@keyframes scrollcue { 0%{ transform:translateY(0); opacity:1;} 70%{ transform:translateY(12px); opacity:0;} 100%{opacity:0;} }
@keyframes kenburns { from{ transform:scale(1);} to{ transform:scale(1.08);} }

/* ============================================================
   PHONE (real replay)
   ============================================================ */
.phone { --phw:clamp(248px,74vw,330px); position:relative; width:var(--phw); transform:perspective(1500px) rotateY(-6deg) rotateX(2.5deg); transition:transform var(--t-slow) var(--ease-out); will-change:transform; }
.phone:hover { transform:perspective(1600px) rotateY(0) rotateX(0); }
.phone-hand { position:absolute; left:-16%; bottom:-12%; width:132%; height:46%; background:radial-gradient(60% 80% at 42% 30%, rgba(38,55,74,.5), transparent 72%); filter:blur(30px); opacity:.6; z-index:-1; pointer-events:none; }
.phone-body { position:relative; border-radius:40px; padding:9px; background:linear-gradient(160deg,#33475c,#1a2833); box-shadow:var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,.14); }
.phone-island { position:absolute; top:17px; left:50%; translate:-50% 0; width:33%; height:22px; background:#0e1a24; border-radius:var(--r-pill); z-index:4; }
.screen { position:relative; border-radius:31px; overflow:hidden; aspect-ratio:260/540; background:var(--navy-700); }
.screen-photo { position:absolute; inset:0; }
.screen-photo::after { background:linear-gradient(180deg, rgba(38,55,74,.35), rgba(20,26,32,.5)); }
.screen-veil { position:absolute; inset:0; background:radial-gradient(90% 60% at 50% 42%, transparent, rgba(20,26,32,.35)); pointer-events:none; }
.map-route { position:absolute; inset:0; width:100%; height:100%; z-index:2; }
.route-path { stroke-dasharray:var(--len,1000); stroke-dashoffset:var(--len,1000); filter:drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
.js-phone.is-playing .route-path { animation:draw 2600ms forwards var(--ease-soft); }
@keyframes draw { to { stroke-dashoffset:0; } }
.route-dot { offset-path:var(--dot-path); offset-distance:0%; offset-rotate:0deg; opacity:0; filter:drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
.js-phone.is-playing .route-dot { animation:travel 2600ms forwards var(--ease-soft), dotin var(--t-med) forwards; }
@keyframes travel { from { offset-distance:0%; } to { offset-distance:100%; } }
@keyframes dotin { to { opacity:1; } }

.screen-ui { position:absolute; inset:0; z-index:3; font-family:var(--sans); }
.status-bar { position:absolute; top:46px; left:0; right:0; display:flex; justify-content:center; }
.stamp { display:inline-flex; align-items:center; gap:.3rem; font-size:.68rem; font-weight:600; letter-spacing:.02em; color:var(--cream-hi); background:rgba(20,26,32,.5); padding:.24rem .66rem; border-radius:var(--r-pill); backdrop-filter:blur(4px); box-shadow:0 1px 3px rgba(0,0,0,.3); }
.stamp-pin { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(197,90,52,.35); }
.photo-chip { position:absolute; margin:0; width:64px; background:var(--cream-hi); padding:4px; border-radius:9px 9px 9px 3px; box-shadow:var(--shadow-lift); opacity:0; transform:translateY(10px) scale(.92); transform-origin:bottom; }
.photo-chip img { width:100%; aspect-ratio:1/.82; object-fit:cover; border-radius:5px; filter:saturate(.9) sepia(.1); }
.photo-chip figcaption { font-size:.52rem; color:var(--navy-500); letter-spacing:.02em; text-align:center; padding:2px 0 1px; }
.photo-chip.c1 { top:39%; left:8%; rotate:-4deg; }
.photo-chip.c2 { top:20%; right:7%; rotate:5deg; }
.js-phone.is-playing .photo-chip.c1 { animation:pop var(--t-med) 1500ms forwards var(--ease-out); }
.js-phone.is-playing .photo-chip.c2 { animation:pop var(--t-med) 2900ms forwards var(--ease-out); }
@keyframes pop { to { opacity:1; transform:none; } }
.seek { position:absolute; left:14px; right:14px; bottom:16px; }
.seek-track { display:block; height:4px; border-radius:var(--r-pill); background:rgba(243,236,214,.32); overflow:hidden; }
.seek-fill { display:block; height:100%; width:8%; border-radius:inherit; background:var(--terracotta); }
.js-phone.is-playing .seek-fill { animation:seek 2600ms forwards var(--ease-soft); }
@keyframes seek { to { width:100%; } }
.seek-meta { display:block; margin-top:6px; font-size:.6rem; color:rgba(243,236,214,.85); letter-spacing:.03em; }

/* ============================================================
   PROOF STRIP
   ============================================================ */
.proof { background:var(--surface); border-bottom:1px solid var(--line); padding:clamp(1.4rem,3vw,2rem) 0; }
.proof-row { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 2.6rem; text-align:center; }
.proof-item { display:inline-flex; align-items:center; gap:.55rem; font-size:.98rem; color:var(--ink); font-weight:500; }
.proof-glyph { color:var(--accent); font-size:.82rem; }

/* ============================================================
   HOW IT FEELS
   ============================================================ */
.feel { padding:var(--section-y) 0; background:var(--bg); }
.feel-stage { display:grid; gap:2rem; align-items:center; justify-items:center; grid-template-columns:1fr; }
@media (min-width:62rem){ .feel-stage { grid-template-columns:1fr auto 1fr; gap:clamp(1rem,3vw,2.6rem); } }
.feel-chips { list-style:none; margin:0; padding:0; display:grid; gap:1.2rem; width:100%; max-width:22rem; }
.feel-chips.right { justify-items:end; }
@media (max-width:62rem){ .feel-chips { max-width:26rem; justify-items:start!important; } }
.chip-line { display:inline-flex; align-items:center; gap:.7rem; background:var(--surface-2); padding:.72rem 1.15rem; border-radius:var(--r-pill); box-shadow:var(--shadow-paper); font-weight:500; font-size:1rem; }
.feel-chips.right .chip-line { flex-direction:row-reverse; }
@media (max-width:62rem){ .feel-chips.right .chip-line { flex-direction:row; } }
.chip-line .dot { width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(197,90,52,.16); flex:none; }

/* ============================================================
   FEATURE ROWS (alternating photo)
   ============================================================ */
.features { padding:var(--section-y) 0; background:var(--surface); }
.feature-row { display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center; grid-template-columns:1fr; margin-bottom:clamp(4rem,9vw,8rem); }
.feature-row:last-child { margin-bottom:0; }
@media (min-width:52rem){ .feature-row { grid-template-columns:1fr 1fr; } .feature-row.reverse .feature-media { order:2; } }

/* photo "snapshot" stack — kept-memory / postcard feel */
.feature-media { position:relative; padding:clamp(1.5rem,4vw,3rem) clamp(1rem,3vw,2.5rem); }
.snap { background:var(--cream-hi); padding:10px 10px 8px; border-radius:6px; box-shadow:var(--shadow-lift); }
.snap img { display:block; width:100%; border-radius:3px; filter:saturate(.9) contrast(1.03) sepia(.08); }
.snap-main { position:relative; z-index:2; rotate:1.6deg; transition:rotate var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); }
.feature-row.reverse .snap-main { rotate:-1.6deg; }
.snap-main img { aspect-ratio:4/4.6; object-fit:cover; }
.snap-back { position:absolute; z-index:1; width:42%; top:0; right:2%; rotate:7deg; opacity:.96; }
.feature-row.reverse .snap-back { right:auto; left:2%; rotate:-7deg; }
.snap-back img { aspect-ratio:1/1; object-fit:cover; }
.feature-media:hover .snap-main { rotate:0deg; transform:translateY(-4px); }
.snap-cap { display:flex; align-items:center; justify-content:center; gap:.4rem; padding:.5rem 0 .2rem; font-size:.8rem; font-weight:600; letter-spacing:.03em; color:var(--navy-500); }
.snap-pin { width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }
.feature-tag { position:absolute; top:20px; left:20px; z-index:3; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); background:color-mix(in srgb, var(--cream-hi) 88%, transparent); backdrop-filter:blur(3px); padding:.35rem .7rem; border-radius:var(--r-pill); box-shadow:var(--shadow-paper); }

.feature-copy { position:relative; }
.feature-num { display:block; font-family:var(--serif); font-size:clamp(2.4rem,1.6rem + 3vw,3.6rem); font-weight:340; line-height:1; color:var(--accent); opacity:.42; margin-bottom:.4rem; letter-spacing:.02em; }
.feature-copy h3 { font-size:var(--fs-h3); margin-bottom:1rem; }
.feature-copy p { color:var(--ink-muted); font-size:clamp(1.05rem,1rem + .4vw,1.25rem); max-width:38ch; }

/* ============================================================
   MOMENTS GRID
   ============================================================ */
.moments { padding:var(--section-y) 0; background:var(--bg); }
.moments-grid { display:grid; gap:clamp(.8rem,2vw,1.4rem); grid-template-columns:repeat(2,1fr); }
@media (min-width:48rem){ .moments-grid { grid-template-columns:repeat(3,1fr); } }
.moment { position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-paper); background:var(--navy-700); border:1px solid var(--line); }
.moment:nth-child(3n+1) { aspect-ratio:4/5; }
.moment:nth-child(3n+2) { aspect-ratio:4/5; }
.moment:nth-child(3n) { aspect-ratio:4/5; }
.moment img { width:100%; height:100%; object-fit:cover; filter:saturate(.86) contrast(1.03) brightness(1.02) sepia(.12); transition:transform 1.2s var(--ease-out); }
.moment:hover img { transform:scale(1.05); }
.moment figcaption { position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; align-items:center; gap:.4rem; padding:1.6rem .9rem .8rem; font-size:.82rem; font-weight:600; color:var(--cream-hi); background:linear-gradient(0deg, rgba(20,26,32,.72), transparent); text-shadow:0 1px 3px rgba(0,0,0,.4); }
.moment .pin { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(197,90,52,.4); flex:none; }

/* ============================================================
   ATLAS (full-bleed vintage map + overlaid copy)
   ============================================================ */
.atlas { position:relative; overflow:hidden; display:flex; align-items:center; min-height:80svh; padding:var(--section-y) 0; }
.atlas-media { position:absolute; inset:0; }
.atlas-media img { width:100%; height:100%; object-fit:cover; filter:saturate(.92) contrast(1.04) brightness(.92); animation:kenburns 32s ease-in-out infinite alternate; }
.atlas-scrim { position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,16,10,.86) 0%, rgba(20,16,10,.5) 44%, rgba(20,16,10,.12) 82%), linear-gradient(0deg, rgba(20,16,10,.5), transparent 40%); }
.atlas-inner { position:relative; z-index:2; max-width:40rem; }
.atlas-inner > * { max-width:34rem; }
.atlas-eyebrow { color:#E6B48F; }
.atlas-inner h2 { font-size:var(--fs-h2); }
.atlas-sub { margin-top:1.1rem; color:rgba(243,236,214,.86); font-size:clamp(1.02rem,.98rem + .3vw,1.2rem); }

/* ============================================================
   EMOTIONAL FULL-BLEED
   ============================================================ */
.nostalgia { position:relative; overflow:hidden; display:flex; align-items:center; min-height:82svh; text-align:center; }
.nostalgia-media { position:absolute; inset:0; }
.nostalgia-media img { width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(1.05) brightness(.94) sepia(.14); animation:kenburns 30s ease-in-out infinite alternate; }
.nostalgia-scrim { position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,26,32,.72), rgba(20,26,32,.4) 50%, rgba(20,26,32,.6)); }
.nostalgia-inner { position:relative; z-index:2; max-width:46rem; padding-block:6rem; }
.pull { margin:0 0 1.4rem; }
.pull .display { font-size:var(--fs-display); font-weight:340; line-height:1.08; font-style:italic; }
.nos-lede { font-size:clamp(1.05rem,1rem + .5vw,1.3rem); color:rgba(243,236,214,.86); max-width:36rem; margin-inline:auto; }
.nos-lede em, .nostalgia .display em { font-style:italic; color:var(--terracotta-soft); }

/* ============================================================
   CTA over photo
   ============================================================ */
.cta { position:relative; overflow:hidden; padding:var(--section-y) 0; display:flex; align-items:center; min-height:70svh; }
.cta-media { position:absolute; inset:0; }
.cta-media img { width:100%; height:100%; object-fit:cover; filter:saturate(.85) contrast(1.03) brightness(.9) sepia(.12); }
.cta-scrim { position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,26,32,.8), rgba(20,26,32,.5)); }
.cta .wrap { position:relative; z-index:2; }
.cta-inner { max-width:40rem; margin-inline:auto; text-align:center; }
.cta-inner h2 { font-size:var(--fs-h2); }
.cta-sub { color:rgba(243,236,214,.86); max-width:34rem; margin:1.1rem auto 2rem; }
.soon-badge { display:inline-flex; align-items:center; gap:.6rem; margin-top:2rem; padding:.6rem 1.1rem; border:1.5px solid rgba(243,236,214,.35); border-radius:var(--r-md); color:var(--cream-hi); }
.soon-glyph { width:22px; height:22px; border-radius:6px; background:var(--cream-hi); position:relative; flex:none; }
.soon-glyph::after { content:''; position:absolute; inset:5px; border-radius:2px; background:linear-gradient(135deg,#EBD9BC 0 45%,#C55A34 45% 60%,#26374A 60%); }
.soon-text { display:flex; flex-direction:column; line-height:1.1; text-align:left; }
.soon-text small { font-size:.62rem; letter-spacing:.04em; opacity:.85; }
.soon-text strong { font-size:1rem; font-weight:600; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background:var(--navy); color:var(--cream-hi); padding:clamp(2.5rem,6vw,4rem) 0 2rem; }
.footer-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem; }
.footer-brand { display:inline-flex; align-items:center; gap:.55rem; }
.footer-brand .brand-word { font-size:1.15rem; }
.footer-ethos { font-size:.98rem; color:rgba(243,236,214,.72); flex:1 1 16rem; text-align:center; }
.footer-links { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.1rem; }
.footer-links a:hover { text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; }
.footer-lang { color:var(--cream-hi); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; }
.copyright { text-align:center; margin-top:2rem; font-size:.8rem; color:rgba(243,236,214,.5); }

/* ============================================================
   Card kept turned-corner motif
   ============================================================ */
.card--kept::before { content:''; position:absolute; right:0; top:0; z-index:3; width:26px; height:26px; background:linear-gradient(225deg, var(--bg) 0 50%, transparent 50%); box-shadow:-2px 2px 4px rgba(28,42,56,.16); transition:width var(--t-med) var(--ease-out), height var(--t-med) var(--ease-out); pointer-events:none; }
.moment.card--kept:hover::before { width:34px; height:34px; }

/* ============================================================
   REVEAL / SCROLL ANIMATION
   ============================================================ */
.js .reveal { opacity:0; transform:translateY(28px); }
@media (prefers-reduced-motion:no-preference) {
  .js .reveal { transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay:calc(var(--d,0) * 90ms); }
}
.reveal.in { opacity:1; transform:none; }
.reveal[data-delay="1"]{ --d:1; } .reveal[data-delay="2"]{ --d:2; } .reveal[data-delay="3"]{ --d:3; }

/* ============================================================
   REDUCED MOTION — bulletproof end states
   ============================================================ */
@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  html { scroll-behavior:auto; }
  .reveal { opacity:1!important; transform:none!important; }
  .route-path { stroke-dashoffset:0!important; }
  .route-dot { offset-distance:100%!important; opacity:1!important; }
  .photo-chip { opacity:1!important; transform:none!important; }
  .seek-fill { width:100%!important; }
  .phone { transform:none!important; }
  .hero-media > img, .nostalgia-media img, .atlas-media img { animation:none!important; transform:none!important; }
  .scroll-cue { display:none; }
}

/* ============================================================
   Japanese adjustments
   ============================================================ */
/* Japanese uses the reader's system fonts (Hiragino on Apple, Yu/Noto elsewhere) —
   no downloaded JP webfont, so there is no third-party runtime dependency. */
html[lang=ja] { font-family:'Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic',YuGothic,'Noto Sans JP','Noto Sans CJK JP',var(--sans); }
html[lang=ja] .display { font-family:'Hiragino Mincho ProN','Yu Mincho',YuMincho,'Noto Serif JP','Noto Serif CJK JP',serif; }
html[lang=ja] body { line-height:1.8; }
html[lang=ja] h1,html[lang=ja] h2,html[lang=ja] h3 { line-height:1.32; letter-spacing:.01em; word-break:normal; text-wrap:normal; }
html[lang=ja] .lede,html[lang=ja] .section-sub,html[lang=ja] .pull .display,html[lang=ja] .nos-lede { text-wrap:normal; }
html[lang=ja] .pull .display { font-style:normal; }

/* ============================================================
   Very small screens (≤384px) — keep the header from crowding
   ============================================================ */
/* Phones: declutter the header (hero already has the CTA) and pull the
   device mockup up so the hero is not a wall of text. */
@media (max-width:40rem) {
  .header-actions .btn-primary { display:none; }
  .header-actions { gap:.5rem; }
  .hero { min-height:auto; }
  .hero-inner { padding-block:5rem 2.5rem; gap:1.5rem; }
  .hero h1 { margin:.3rem 0 .9rem; }
  .hero .lede { font-size:1.04rem; max-width:32ch; }
  .hero-cta { margin-top:1.6rem; gap:.7rem; }
  .hero-device .phone { --phw:clamp(250px,64vw,300px); }
}

@media (max-width:24rem) {
  .brand-word { display:none; }
  .header-actions { gap:.4rem; }
  .lang-btn { padding:.4rem .3rem; }
  .hero-inner { padding-block:4.5rem 2rem; }
}

/* ============================================================
   forced-colors
   ============================================================ */
@media (forced-colors:active) {
  .moment,.chip-line,.proof,.feature-media { border:1px solid CanvasText; }
  .btn-primary,.btn-glass { border:1px solid CanvasText; }
}