/* ============================================================
   LarkWard coming-soon site — page composition
   ------------------------------------------------------------
   This is the "pages compose tokens" layer. It references the
   LarkWard Design System tokens (var(--…)) and never invents a
   brand color, size, or spacing value. Layout/structure only.
   ============================================================ */

/* ---- Page shell: hero centered, footer pinned ---- */
.page {
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.container {
  width: 100%;
  max-width: var(--container-md);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -3rem;
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-card);
  color: var(--text-link);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  transition: top var(--duration-fast) var(--ease-calm);
}
.skip-link:focus { top: var(--space-4); text-decoration: none; }

/* ============================================================
   First Light atmosphere — the signature.
   A diffuse sunrise rising from the horizon (bottom), a faint
   "night before dawn" indigo overhead. The page IS dawn breaking.
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding-block: var(--space-hero) var(--space-block);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(145% 84% at 50% 108%,
      rgba(255, 140, 90, 0.42) 0%,
      rgba(255, 167, 123, 0.24) 20%,
      rgba(255, 214, 170, 0.11) 40%,
      transparent 62%),
    radial-gradient(72% 48% at 50% 113%,
      rgba(255, 190, 110, 0.28) 0%,
      transparent 56%),
    radial-gradient(125% 62% at 50% -10%,
      rgba(47, 80, 192, 0.09) 0%,
      rgba(47, 80, 192, 0.02) 32%,
      transparent 56%);
  pointer-events: none;
  animation: dawn-rise var(--duration-ambient) var(--ease-enter) both;
  animation-duration: 1500ms;
}
/* a barely-there grain to warm the gradient and kill banding */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ---- Brand lockup (vertical: mark over wordmark) ---- */
.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: max-content;
  max-width: 100%;
  margin: 0 auto var(--space-10);
}
.lockup__mark {
  width: clamp(54px, 8vw, 70px);
  height: auto;
  display: block;
  filter: drop-shadow(0 3px 13px rgba(255, 140, 90, 0.32));
}
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(1.75rem, 4.2vw, 2.5rem);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  white-space: nowrap;
}
.wordmark .lark { color: var(--ink-900); }
.wordmark .ward { color: var(--spruce-700); }

/* ---- "Coming soon" chip ---- */
.chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: max-content;
  max-width: 100%;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-700);
  margin: 0 auto var(--space-8);
}
.chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dawn-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dawn-500) 22%, transparent);
}

/* ---- Headline + sub-line ---- */
.headline {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  color: var(--text-strong);
  font-size: clamp(2.25rem, 5.6vw, 4.5rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 auto;
  max-width: 18ch;
  text-wrap: balance;
}
.headline em {
  font-style: italic;
  color: var(--spruce-700);
}
.subline {
  font-family: var(--font-sans);
  font-size: clamp(1.0625rem, 1.9vw, 1.375rem);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  max-width: 54ch;
  margin: var(--space-6) auto 0;
  text-wrap: pretty;
}

/* ---- Contact ---- */
.contact {
  margin-top: var(--space-12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.contact__label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}
.contact__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  color: var(--spruce-700);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-snug);
  transition:
    transform var(--duration-normal) var(--ease-calm),
    box-shadow var(--duration-normal) var(--ease-calm),
    border-color var(--duration-normal) var(--ease-calm),
    background-color var(--duration-normal) var(--ease-calm);
}
.contact__btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--spruce-200);
  background: var(--spruce-50);
}
.contact__btn:active { transform: translateY(0) scale(0.985); }
.contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--spruce-100);
  color: var(--spruce-700);
  flex: none;
}
.contact__icon svg { width: 16px; height: 16px; }

/* ============================================================
   Footer (shared)
   ============================================================ */
.footer {
  border-top: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--paper) 60%, transparent);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
}
.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-md);
  color: var(--ink-900);
}
.footer__brand .ward { color: var(--spruce-700); }
.footer__brand svg { width: 22px; height: 22px; }
.footer__nav {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.footer__nav a { color: var(--text-muted); }
.footer__nav a:hover { color: var(--spruce-700); }
.footer__sep { color: var(--sand-300); }
.footer__copy { color: var(--text-muted); }

/* ============================================================
   Site header (legal pages) — minimal brand bar
   ============================================================ */
.site-header {
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--paper) 70%, transparent);
}
.site-header__inner {
  display: flex;
  align-items: center;
  padding-block: var(--space-5);
}
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
  color: var(--ink-900);
}
.brand-link:hover { text-decoration: none; }
.brand-link .ward { color: var(--spruce-700); }
.brand-link svg { width: 26px; height: 26px; }

/* ============================================================
   Legal pages (privacy / terms) — calm reading
   ============================================================ */
.legal {
  flex: 1 1 auto;
  padding-block: var(--space-16) var(--space-section);
}
.legal__head { margin-bottom: var(--space-block); }
.legal__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-accent-hover);
  margin: 0 0 var(--space-3);
}
.legal h1 {
  font-size: clamp(2rem, 4.4vw, var(--text-3xl));
  margin: 0 0 var(--space-3);
}
.legal__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
}
.notice {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-block) 0;
  background: var(--status-attention-bg);
  border-radius: var(--radius-lg);
  color: var(--attention-700);
}
.notice svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.notice p { margin: 0; color: var(--ink-800); font-size: var(--text-sm); line-height: var(--leading-normal); }
.notice strong { color: var(--attention-700); }

.prose { max-width: var(--measure); }
.prose h2 {
  font-size: var(--text-xl);
  margin: var(--space-12) 0 var(--space-4);
}
.prose h2:first-of-type { margin-top: var(--space-8); }
.prose p { color: var(--text-body); margin: 0 0 var(--space-4); }
.prose ul { color: var(--text-body); margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.prose li { margin-bottom: var(--space-2); }
.prose a { color: var(--spruce-700); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--ink-900); font-weight: var(--weight-semibold); }
.back-home {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-block);
  font-size: var(--text-sm);
  color: var(--spruce-700);
  font-weight: var(--weight-medium);
}
.back-home svg { width: 16px; height: 16px; }

/* ============================================================
   Focus + motion (quality floor)
   ============================================================ */
a:focus-visible,
.contact__btn:focus-visible,
.skip-link:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-pill);
}

@keyframes dawn-rise {
  from { opacity: 0; transform: translateY(22px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.reveal { opacity: 0; animation: rise-in var(--duration-slow) var(--ease-enter) forwards; }
.reveal.d1 { animation-delay: 120ms; }
.reveal.d2 { animation-delay: 240ms; }
.reveal.d3 { animation-delay: 380ms; }
.reveal.d4 { animation-delay: 520ms; }
.reveal.d5 { animation-delay: 660ms; }

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- Responsive ---- */
@media (max-width: 720px) {
  .lockup { margin-bottom: var(--space-8); }
  .headline { max-width: 16ch; }
  .footer__inner { justify-content: center; text-align: center; }
}