/* Static public splash: no scripts, remote fonts, tracking or app imports. */
:root {
  color-scheme: light;
  --paper: #f7f8f5;
  --ink: #182d31;
  --muted: #53676a;
  --accent: #1c6c5c;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: radial-gradient(ellipse at 50% 40%, #fff, var(--paper) 75%);
  -webkit-font-smoothing: antialiased;
}

.splash {
  flex: 1;
  display: grid;
  place-items: center;
  padding: max(40px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 40px max(24px, env(safe-area-inset-left));
  text-align: center;
}

.splash-content { width: min(100%, 48rem); min-width: 0; }

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 36px;
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -.045em;
}

.brand svg { flex: none; }
.brand-light { font-weight: 400; }
.brand-box { fill: var(--ink); }
.brand-line { fill: none; stroke: #f6f8ef; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand-spark { fill: none; stroke: #c7d791; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.status {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin: 0 auto 24px;
  padding: 6px 12px;
  border: 1px solid #ccdcd3;
  border-radius: 999px;
  color: var(--accent);
  background: #edf3ee;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .06em;
}

.status-dot { width: 5px; height: 5px; flex: none; border-radius: 50%; background: currentColor; }

h1 {
  margin: 0;
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.045em;
  overflow-wrap: break-word;
}

h1 span { display: block; color: var(--accent); }

.supporting-line {
  max-width: 32rem;
  margin: 24px auto 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.7;
  overflow-wrap: break-word;
}

.site-footer {
  padding: 0 max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  color: var(--muted);
  text-align: center;
  font-size: .75rem;
  line-height: 1.5;
}

.site-footer p { margin: 0; }
.home-link { display: inline-block; margin-top: 24px; color: var(--accent); text-underline-offset: 4px; }
.home-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; border-radius: 2px; }

/* Compact spacing for short windows; enlarged text can still flow and scroll. */
@media (max-height: 600px) {
  .splash { padding-block: max(20px, env(safe-area-inset-top)) 20px; }
  .brand { margin-bottom: 20px; font-size: 1.375rem; }
  .brand svg { width: 30px; height: 30px; }
  .status { margin-bottom: 16px; padding-block: 4px; }
  h1 { font-size: clamp(1.75rem, 4.5vw, 3rem); }
  .supporting-line { margin-top: 18px; line-height: 1.6; }
  .site-footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

@media (max-height: 480px) {
  .splash { padding-block: max(12px, env(safe-area-inset-top)) 12px; }
  .brand { margin-bottom: 12px; }
  .brand svg { width: 28px; height: 28px; }
  .status { margin-bottom: 12px; }
  h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
  .supporting-line { margin-top: 12px; font-size: .9375rem; line-height: 1.5; }
  .site-footer { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}

@media (max-height: 600px) and (min-width: 560px) {
  h1 span { display: inline; }
}