/* Usugurai — marketing landing styles ("Sky & Sun"). Page-scoped under .landing
   so the landing rides inside the shared application layout (the header + footer
   come from the layout). Fonts are loaded by the layout. */

:root {
  --sky:#e4eef5; --sky-soft:#eff5fa; --paper:#f8fbfd; --mist:#d3e2ee;
  --ink:#1c2730; --ink-soft:#3a4a55; --ink-muted:#6a8090; --ink-faint:#a6b8c4;
  --blue:#5b8aae; --blue-deep:#3d6f94; --blue-soft:#c5dbea; --blue-tint:#e7f0f6;
  --sun-yellow:#f6c63c; --sun-amber:#f3a02e; --sun-orange:#ee7b2f; --sun-vermilion:#e5562b; --sun-red:#d33a26;
  --sun-soft:#fbe3bf; --sun-tint:#fdf3e2;
  --rule:#d4e0ea; --rule-soft:#e6eef4; --dusk:#16222c; --dusk-2:#1f2f3a;
  --font-ui:"Plus Jakarta Sans",system-ui,sans-serif;
  --font-article:"Lora",Georgia,serif;
  --font-serif:"Newsreader",Georgia,serif;
  --font-jp:"Noto Sans JP",sans-serif;
  --font-mono:"DM Mono",ui-monospace,monospace;
}

html { scroll-behavior:smooth; }

/* Dark mode: redefine the palette tokens on the .landing subtree, so every inline
   var(--ink)/var(--sky)/… in the sections flips automatically (custom properties
   cascade) — the landing goes dusk without editing the section markup. The dusk
   privacy band keeps its own fixed colours. */
.dark .landing {
  --sky:#16222c; --sky-soft:#1f2f3a; --paper:#1f2f3a; --mist:#2a3f4d;
  --ink:#e7eef4; --ink-soft:#b9c9d6; --ink-muted:#8aa0b0; --ink-faint:#5f7686;
  --blue-deep:#6ea8cf; --blue-soft:#2a3f4d; --blue-tint:#233340;
  --sun-soft:#3a2e1d; --sun-tint:#241d12;
  --rule:#2a3f4d; --rule-soft:#233340;
}

.landing { background:var(--sky); color:var(--ink); font-family:var(--font-ui); -webkit-font-smoothing:antialiased; }
.landing img { display:block; max-width:100%; }
.landing a { color:inherit; text-decoration:none; }

.wrap { max-width:1180px; margin:0 auto; padding:0 40px; }
.eyebrow { font-family:var(--font-mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--sun-orange); }
.serif { font-family:var(--font-article); }
.news-it { font-family:var(--font-serif); font-style:italic; }
.jp { font-family:var(--font-jp); }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-ui);
  font-weight:600; font-size:15px; border-radius:8px; padding:12px 20px; cursor:pointer; border:none;
  transition:transform .12s ease, background .15s ease; }
.btn:active { transform:scale(.985); }
/* Two-class selectors so the button text colour outranks `.landing a`. */
.btn.btn-app { background:var(--ink); color:var(--sky-soft); padding:11px 18px; }
.btn.btn-app:hover { background:var(--ink-soft); }
.btn.btn-primary { background:var(--sun-orange); color:#fff; }
.btn.btn-primary:hover { background:#e56f22; }
.btn.btn-ghost { color:var(--blue-deep); box-shadow:inset 0 0 0 1px var(--blue-deep); background:transparent; }

/* Japanese-first: never the heavy serif, never italic. Use Noto Sans JP. */
[lang="ja"] .landing .serif,
[lang="ja"] .landing .news-it { font-family:"Noto Sans JP", sans-serif; font-style:normal; }
[lang="ja"] .landing .jp,
[lang="ja"] .landing em, [lang="ja"] .landing i { font-style:normal; }

.rule { height:1px; background:var(--rule); border:0; }
.landing section { position:relative; }

/* hero */
.hero-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
@media (max-width:880px){ .hero-grid { grid-template-columns:1fr; gap:40px; } }
.sun-glow { position:absolute; width:320px; height:320px; border-radius:50%; top:30px;
  background:radial-gradient(circle, rgba(246,198,60,0.5), rgba(238,123,47,0.18) 45%, transparent 70%); filter:blur(6px); }

/* hero phone */
.phone { width:300px; border-radius:42px; background:#0c1318; padding:11px;
  box-shadow:0 40px 90px rgba(28,39,48,0.28), 0 0 0 1px rgba(28,39,48,0.1); }
.phone-screen { border-radius:32px; overflow:hidden; background:var(--sky); }
.spark { display:flex; align-items:flex-end; gap:1.5px; height:60px; }
.spark > div { flex:1; position:relative; height:100%; display:flex; align-items:flex-end; }
.spark > div > i { width:100%; border-radius:2px 2px 0 0; display:block; }

/* duality cards */
.how-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:880px){ .how-grid { grid-template-columns:1fr; } }
.how-card { background:var(--paper); border:1px solid var(--rule); border-radius:18px; padding:30px 30px 32px;
  box-shadow:0 1px 0 rgba(28,39,48,0.03), 0 10px 30px rgba(28,39,48,0.06); }

/* journal cards */
.journal-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:28px; }
@media (max-width:880px){ .journal-grid { grid-template-columns:1fr; gap:22px; } }
.jcard { display:block; }
.jcard .thumb { aspect-ratio:16/10; overflow:hidden; border-radius:10px; background:var(--mist); }
.jcard .thumb img, .jcard .thumb > div { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.jcard:hover .thumb img, .jcard:hover .thumb > div { transform:scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .landing * { transition:none !important; animation:none !important; }
  html { scroll-behavior:auto; }
}