/* ============================================================
   LEDURA home: chrome (header, mobile menu, footer)
   The header floats over one sky that turns from night to dawn.
   It follows data-sky on <html> (written by js/fx-sky.js): the
   header flips skin once, as a whole, instead of fading through
   an unreadable middle; colour transitions soften the flip. While
   the night glass nears the flip it thins with --dawn, so it never
   lies as a grey band over the brightening sky.
   The legal pages keep the base chrome from css/ledura.css.
   ============================================================ */
.home .site-header {
  --day: 0;
  --glass-a: clamp(0%, calc(68% - var(--dawn, 0) * 110%), 68%);
  --hd-ink: color-mix(in srgb, var(--ink) calc(var(--day) * 100%), var(--night-ink));
  --hd-gold: color-mix(in srgb, color-mix(in srgb, var(--gold-deep) 80%, var(--ink)) calc(var(--day) * 100%), var(--night-glow));
  --hd-on-gold: color-mix(in srgb, var(--elevated) calc(var(--day) * 100%), var(--night-bg));
  --hd-glass: color-mix(in srgb, var(--bg) calc(var(--day) * 100%), var(--sky-midnight));
  position: fixed;
  inset: 0 0 auto;
  padding-top: env(safe-area-inset-top);
  color: var(--hd-ink);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: color .6s ease, background-color .6s ease, border-color .6s ease, backdrop-filter .6s ease;
}
html[data-sky="dawn"] .home .site-header { --day: 1; --glass-a: 68%; }
/* Scrolled, or menu open: a thin frosted pane of whichever sky is behind. */
.home .site-header.is-scrolled,
.home .site-header:has(.mobile-nav.is-open),
html:not(.has-sky) .home .site-header {
  background: color-mix(in srgb, var(--hd-glass) var(--glass-a), transparent);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-bottom-color: color-mix(in srgb, var(--hd-ink) 10%, transparent);
}
.home .site-header:has(.mobile-nav.is-open) { background: var(--hd-glass); }
.home .header-inner {
  padding-block: 12px;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.home .site-header .wordmark { color: inherit; }

/* The wordmark is one PNG used as a mask, so it takes the header's ink. */
.logo-mark {
  display: block;
  height: 44px;
  aspect-ratio: 640 / 316;
  background: currentColor;
  -webkit-mask: url("../../assets/logo.png") center / contain no-repeat;
  mask: url("../../assets/logo.png") center / contain no-repeat;
}

.home .nav-links a { color: color-mix(in srgb, var(--hd-ink) 74%, transparent); }
.home .nav-links a:hover { color: var(--hd-ink); }
.home .nav-links a::after { background: var(--hd-gold); }

.home .site-header .lang {
  background: transparent;
  border-color: color-mix(in srgb, var(--hd-ink) 22%, transparent);
}
.home .site-header .lang button { color: color-mix(in srgb, var(--hd-ink) 62%, transparent); }
.home .site-header .lang button:hover { color: var(--hd-ink); }
.home .site-header .lang button.is-active { color: var(--hd-on-gold); background: var(--hd-gold); }

.home .site-header .btn--primary { background: var(--hd-gold); color: var(--hd-on-gold); }
.home .site-header .btn--primary:hover { background: color-mix(in srgb, var(--hd-gold) 86%, var(--hd-ink)); }
.home .header-cta { padding: 12px 22px; white-space: nowrap; }
.home .menu-toggle { color: inherit; }

/* ---------- mobile menu: a full sheet of the current sky ---------- */
@media (max-width: 900px) {
  .home .mobile-nav {
    position: absolute;
    inset: 100% 0 auto;
    height: calc(100dvh - 100%);
    max-height: none;
    padding: clamp(28px, 7svh, 64px) var(--gutter) calc(40px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 0;
    border-top: 1px solid color-mix(in srgb, var(--hd-ink) 10%, transparent);
    /* nested backdrop-filter does not blur inside the header's own, so the sheet is solid */
    background: var(--hd-glass);
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .35s ease, transform .5s var(--ease-out), visibility 0s linear .5s;
  }
  .home .mobile-nav.is-open {
    visibility: visible;
    transform: none;
    transition: opacity .35s ease, transform .5s var(--ease-out);
  }
  .home .mobile-nav a:not(.btn) {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(32px, 9vw, 44px);
    line-height: 1.15;
    padding: 14px 0;
    color: var(--hd-ink);
    border-bottom-color: color-mix(in srgb, var(--hd-ink) 12%, transparent);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .5s ease, transform .6s var(--ease-out);
  }
  .home .mobile-nav.is-open a:not(.btn) { opacity: 1; transform: none; }
  .home .mobile-nav.is-open a:nth-child(2) { transition-delay: .05s; }
  .home .mobile-nav.is-open a:nth-child(3) { transition-delay: .1s; }
  .home .mobile-nav a.btn { margin-top: 36px; padding-block: 18px; background: var(--hd-gold); color: var(--hd-on-gold); }
}
@media (max-width: 560px) {
  .home .header-inner { padding-block: 8px; }
  .logo-mark { height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .home .site-header, .home .mobile-nav, .home .mobile-nav a { transition: none !important; }
}

/* ============================================================
   FOOTER: the morning, settled. It stays in daylight and lays a
   warm ground under the last section; without the sky script
   it carries its own parchment.
   ============================================================ */
.home .site-footer {
  color: var(--ink);
  background: var(--bg);
  padding-block: clamp(64px, 8vw, 104px) calc(clamp(36px, 4vw, 48px) + env(safe-area-inset-bottom));
  border-top: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
}
html.has-sky .home .site-footer {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--soft-tan) 70%, transparent) 55%, var(--soft-tan));
}
.home .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }
.home .footer-brand .wordmark { display: inline-block; color: var(--ink); }
.home .footer-brand .logo-mark { height: 64px; }
.home .footer-tag {
  margin: 22px 0 0;
  max-width: 26ch;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(21px, 1.8vw, 25px);
  line-height: 1.3;
  color: var(--ink);
}
.home .footer-col h4 { color: var(--gold-deep); }
.home .footer-col a { color: var(--body); }
.home .footer-col a:hover { color: var(--ink); }

.home .footer-lang { margin-top: 28px; border-color: color-mix(in srgb, var(--ink) 16%, transparent); }
.home .footer-lang button { color: var(--muted); }
.home .footer-lang button:hover { color: var(--ink); }
.home .footer-lang button.is-active { color: var(--elevated); background: var(--gold-deep); }

.home .footer-bottom {
  margin-top: clamp(44px, 6vw, 72px);
  border-top-color: color-mix(in srgb, var(--ink) 12%, transparent);
}
/* The disclaimer is an App Store requirement: full body colour, its own line. */
.home .footer-disclaimer {
  flex: 1 1 100%;
  margin: 0;
  max-width: none;
  color: var(--body);
}
.home .footer-meta { margin: 0; color: var(--muted); }
.home .footer-social { order: 1; }
.home .footer-social a { color: var(--body); border-color: color-mix(in srgb, var(--ink) 16%, transparent); }
.home .footer-social a:hover { color: var(--elevated); background: var(--gold-deep); border-color: var(--gold-deep); }

@media (max-width: 820px) {
  .home .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .home .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .home .footer-brand .logo-mark { height: 52px; }
}