/* Improvano maintenance page, in the landing page's Lamp set.
 *
 * This lives in its own file rather than an inline <style> block because
 * the production CSP in public/.htaccess sets style-src 'self' with no
 * 'unsafe-inline'. An inline <style> is silently dropped and the page
 * renders as unstyled serif text. Upload this file, index.html,
 * morning-light.jpg and the fonts/ folder together.
 *
 * The caching rule in .htaccess pins *.css for a year as immutable. That
 * is why this is maintenance-lamp.css and not maintenance.css: the old
 * light-mesh stylesheet had that name. If this file is edited after a
 * deploy, rename it again (and the <link>).
 *
 * Tokens transcribed from tailwind.config.js's Lamp set and the
 * `.ip-ln-page` block at the foot of src/index.css, which is the
 * authority (docs/context/styling.md). Values, not classes, because this
 * page never sees Tailwind. Same rule as the landing: `lamp` is the one
 * accent, and here it has two jobs, the eyebrow and the one italic word
 * in the headline. There is nothing to press.
 *
 * Fonts are self-hosted (fonts/*.woff2, copied from the same @fontsource
 * packages the main app bundles), never Google's CDN; see
 * PrivacyPolicyModal.jsx's "no outbound requests" claim. Latin only, and
 * only what this page sets: Fraunces (variable, roman + italic) and Plus
 * Jakarta Sans 300/500.
 */
@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/fraunces-latin-standard-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Fraunces Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/fraunces-latin-standard-italic.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('fonts/plus-jakarta-sans-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2');
}

:root {
  --ln-bg: oklch(0.148 0.012 264); /* dusk */
  --ln-ink: oklch(0.945 0.012 78); /* glow */
  --ln-muted: oklch(0.645 0.018 264); /* hush */
  --ln-accent: oklch(0.76 0.132 72); /* lamp */
  --font-serif: 'Fraunces Variable', ui-serif, Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI',
    sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  background: #0b0d12; /* dusk, for anything that can't read oklch */
  background: var(--ln-bg);
}

/* Phone first: the photo on top, fading down into the ground, the words
   under it. Wide screens put the two side by side (see the foot). */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ln-bg);
  color: var(--ln-ink);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  isolation: isolate;
}

/* The landing's mesh: slow radial washes of the accent over the ground,
   drifting on a 24s cycle. Kept faint so the photo stays the light. */
body::before {
  content: '';
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 48% at 16% 12%, color-mix(in oklch, var(--ln-accent) 12%, transparent), transparent 60%),
    radial-gradient(44% 54% at 86% 26%, color-mix(in oklch, var(--ln-accent) 8%, transparent), transparent 62%),
    radial-gradient(54% 60% at 50% 104%, color-mix(in oklch, var(--ln-accent) 12%, transparent), transparent 64%),
    var(--ln-bg);
  animation: ln-mesh 24s ease-in-out infinite;
}
@keyframes ln-mesh {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-2.2%, 1.6%, 0) scale(1.04);
  }
}

/* The frame's light enters from the left and its right half is still
   dark, so the dark side is the one that dissolves into the ground. */
.plate {
  margin: 0;
  height: 56svh;
  min-height: 300px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
  animation: plate-in 1400ms var(--ease) both;
}
.plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 42%;
}
@keyframes plate-in {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
}

.mark {
  margin-top: -12svh;
  padding: 0 16px 48px;
  text-align: center;
  position: relative;
  animation: rise-in 560ms var(--ease) 240ms both;
}
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.wordmark {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: 0.01em;
  color: var(--ln-ink);
}

.eye {
  margin: 28px 0 0;
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ln-accent);
}

h1 {
  margin: 14px 0 0;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(34px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-shadow: 0 4px 50px rgba(0, 0, 0, 0.5);
}
h1 em {
  font-style: italic;
  color: var(--ln-accent);
}

.sub {
  margin: 20px auto 0;
  max-width: 40ch;
  font-size: clamp(1.063rem, 0.989rem + 0.326vw, 1.25rem);
  line-height: 1.55;
  color: var(--ln-muted);
}

/* Wide: photo left, full height, its dark right edge fading into the
   ground the words sit on. */
@media (min-width: 820px) {
  body {
    flex-direction: row;
    align-items: stretch;
  }
  .plate {
    flex: 0 0 46%;
    height: auto;
    min-height: 100svh;
    -webkit-mask-image: linear-gradient(to right, #000 38%, transparent 96%);
    mask-image: linear-gradient(to right, #000 38%, transparent 96%);
  }
  .plate img {
    object-position: 20% 45%;
  }
  .mark {
    flex: 1;
    margin: auto 0;
    padding: 48px clamp(24px, 6vw, 96px) 48px 0;
    text-align: left;
  }
  .sub {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .plate,
  .mark {
    animation: none;
  }
}