/* ============================================================
   LEDURA home: shared foundation for the night-to-dawn page
   Skins, type scale, the device frame. Section files build on
   these; tokens come from css/ledura.css and css/home/sky.css.
   ============================================================ */
.home {
  --fs-display: clamp(46px, 7.2vw, 108px);
  --fs-h2: clamp(36px, 5vw, 72px);
  --fs-h3: clamp(26px, 2.6vw, 38px);
  --fs-lead: clamp(17px, 1.35vw, 20px);
  --night-body: color-mix(in srgb, var(--night-ink) 72%, transparent);
  --night-faint: color-mix(in srgb, var(--night-ink) 38%, transparent);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  background: var(--night-bg);
}
/* The fixed sky and the grain sit behind every section. */
.home .sky { position: fixed; inset: 0; z-index: 0; }
.home main, .home .site-footer { position: relative; z-index: 1; }

/* ---------- skins ---------- */
[data-skin="night"] { color: var(--night-ink); }
[data-skin="night"] p { color: var(--night-body); }
[data-skin="night"] .eyebrow { color: var(--night-glow); }
[data-skin="dawn"] { color: var(--ink); }
[data-skin="dawn"] p { color: var(--body); }

/* ---------- headings: Cormorant, italic emphasis in the same family ---------- */
.home h1, .home h2, .home h3 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.1;          /* italic descender clearance (y g ğ ş ç) */
  padding-bottom: .06em;
  margin: 0;
  text-wrap: balance;
}
.home h1 em, .home h2 em { font-style: italic; color: var(--night-glow); }
[data-skin="dawn"] h2 em { color: var(--gold-deep); }
.home p { text-wrap: pretty; }

/* ---------- device: a real screenshot in a quiet bezel ---------- */
.device {
  --dw: 300px;
  position: relative;
  width: var(--dw);
  margin: 0;
  padding: calc(var(--dw) * .034);
  border-radius: calc(var(--dw) * .165);
  background: linear-gradient(150deg, var(--night-surface), var(--night-bg));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--night-glow) 22%, transparent),
    var(--shadow-phone);
}
.device img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--dw) * .135);
}

/* ---------- store badge and gold CTA on the night sky ---------- */
[data-skin="night"] .appstore-badge {
  background: var(--night-ink);
  color: var(--night-bg);
}
/* same gold as the header's night state (css/home/chrome.css) */
[data-skin="night"] .btn--primary { background: var(--night-glow); color: var(--night-bg); }
[data-skin="night"] .btn--primary:hover { background: color-mix(in srgb, var(--night-glow) 86%, var(--night-ink)); }

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  .device { --dw: min(260px, 70vw); }
}