/* ==========================================================================
   lightmotif — "Plein Air" theme (Claude Design handoff)
   Impressionist plein-air language: Giverny (light, default) + Nocturne (dark).
   Cormorant Garamond + EB Garamond, mesh-gradient atmosphere, grain + haze,
   glow shadows, large radii. Fonts load via <link> in index.html.

   Every visual decision is a token in :root. The whole look — this entire
   restyle — is CSS only: index.html structure and the .js are untouched (the
   hero recolors through --key-glow; hero.js just writes --glow/--pulse/--press).
   ========================================================================== */

/* Self-hosted fonts (variable, latin subset) — no third-party requests. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-latin.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/eb-garamond-latin.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/eb-garamond-italic-latin.woff2") format("woff2");
}

:root {
  /* Type — light serifs (Google Fonts, with serif fallbacks) */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "EB Garamond", Georgia, serif;

  /* Giverny palette (light — default) */
  --bg: #efe5db;                       /* Sunlit Cream — flat fallback */
  --bg-mesh:
    radial-gradient(85% 55% at 84% 5%, rgba(220, 239, 106, 0.42) 0%, transparent 50%),
    radial-gradient(80% 55% at 5% 19%, rgba(176, 145, 198, 0.40) 0%, transparent 56%),
    radial-gradient(95% 65% at 66% 104%, rgba(217, 144, 187, 0.32) 0%, transparent 56%),
    radial-gradient(70% 50% at 22% 80%, rgba(95, 132, 75, 0.20) 0%, transparent 62%),
    linear-gradient(176deg, #f2e9dd 0%, #efe5db 55%, #e9dfd0 100%);
  --haze: 233, 224, 210;               /* edge-fade color (rgb triplet) */

  --surface: rgba(252, 247, 239, 0.58); /* translucent card fill */
  --text: #2c3b24;                     /* Deep Foliage */
  --text-muted: #5f6650;               /* deepened olive — keeps ≥ 4.5:1 on --bg */
  --border: rgba(44, 59, 36, 0.13);    /* hairline */
  --border-strong: rgba(44, 59, 36, 0.20);

  --accent: #855fa1;                   /* Iris Violet — primary */
  --accent-text: #fbf6ef;              /* onAccent (cream) */
  --accent-gradient: linear-gradient(135deg, #9d74b7 0%, #c38eb2 52%, #d990bb 100%);
  --accent-shadow: rgba(133, 95, 161, 0.28);
  --accent-on-dark: #c8b0e6;           /* accent for text on the dark hero (≥ 4.5:1) */
  --focus: #855fa1;

  /* Hero — always a "Nocturne" night panel so the LED glow reads */
  --hero-bg: #0e1428;                  /* deep ultramarine — flat fallback */
  --hero-mesh:
    radial-gradient(85% 55% at 82% 7%, rgba(207, 197, 133, 0.18) 0%, transparent 46%),
    radial-gradient(80% 55% at 11% 19%, rgba(143, 160, 222, 0.30) 0%, transparent 53%),
    radial-gradient(100% 70% at 57% 106%, rgba(70, 79, 133, 0.52) 0%, transparent 56%),
    radial-gradient(60% 45% at 30% 64%, rgba(103, 116, 172, 0.26) 0%, transparent 60%),
    linear-gradient(176deg, #1c2238 0%, #121a30 55%, #070c1c 100%);
  --hero-text: #e5e8cc;                /* Star White */
  --hero-text-muted: #9aa7c2;          /* Dawn Haze */
  --hero-surface: rgba(154, 167, 194, 0.12);

  /* Piano keys on the dark hero */
  --key-white: #e7e4d2;
  --key-black: #0b1024;
  --key-edge: rgba(154, 167, 194, 0.22);
  --key-glow: #a98fe6;                 /* luminous iris-periwinkle LED glow */

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  /* Type scale (serif — airy) */
  --fs-1: 0.8125rem;   /* caption */
  --fs-2: 0.9375rem;   /* small body */
  --fs-3: 1.0625rem;   /* body */
  --fs-4: 1.375rem;    /* subhead / list title */
  --fs-5: 2rem;        /* section heading */
  --fs-6: 2.75rem;     /* hero (also clamped below) */
  --lh-tight: 1.06;
  --lh-body: 1.7;
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;

  /* Radius — cards 26, controls 13–16, pills 999 */
  --radius: 15px;
  --radius-sm: 13px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --key-radius: 3px;

  /* Layout */
  --content-max: 40rem;
  --wide-max: 60rem;
  --page-pad: var(--space-4);

  /* Elevation (glows, not drop shadows) & motion */
  --shadow: 0 10px 30px rgba(44, 59, 36, 0.08);
  --glow: 0 10px 26px var(--accent-shadow);
  --transition: 360ms ease;

  /* Hero animation */
  --hero-aspect: 700 / 250;
  --hero-max-h: 30vh;
  --key-press-dip: 3px;
  --glow-halo: 22px;
  --glow-halo-pulse: 16px;

  color-scheme: light;
}

/* Nocturne (dark) — dusk. Gold is a spark, never a fill. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1428;
    --bg-mesh: var(--hero-mesh);
    --haze: 8, 13, 30;

    --surface: rgba(103, 116, 172, 0.15);
    --text: #e5e8cc;
    --text-muted: #9aa7c2;
    --border: rgba(154, 167, 194, 0.18);
    --border-strong: rgba(154, 167, 194, 0.28);

    --accent: #cfc585;                 /* Star Gold */
    --accent-text: #121831;
    --accent-gradient: linear-gradient(135deg, #dcd292 0%, #cfc585 46%, #8a7a2e 100%);
    --accent-shadow: rgba(207, 197, 133, 0.26);
    --accent-on-dark: #dcd7b0;
    --focus: #cfc585;

    /* Hero is already a night panel; deepen it a touch so it still reads apart. */
    --hero-bg: #060a18;
    --hero-mesh:
      radial-gradient(90% 60% at 80% 4%, rgba(207, 197, 133, 0.16) 0%, transparent 46%),
      radial-gradient(85% 60% at 10% 16%, rgba(143, 160, 222, 0.26) 0%, transparent 55%),
      radial-gradient(100% 70% at 55% 108%, rgba(70, 79, 133, 0.46) 0%, transparent 58%),
      linear-gradient(176deg, #131a30 0%, #0b1124 55%, #04070f 100%);

    color-scheme: dark;
  }
}

/* Reduced motion: zero the transition token (no !important); hero.js also renders
   a static frame with no RAF loop. */
@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0ms; }
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  background-image: var(--bg-mesh);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-3);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Atmosphere overlays — fixed, above content, non-interactive. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
/* canvas-tooth / broken-stroke grain */
body::before {
  z-index: 100;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* aerial-perspective edge haze */
body::after {
  z-index: 99;
  background: radial-gradient(135% 100% at 50% 44%, transparent 54%, rgba(var(--haze), 0.42) 100%);
}

h1, h2, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}
a:hover { border-bottom-color: currentColor; }

button, input { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.page > section { padding-inline: var(--page-pad); }

.site-header {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--page-pad);
}

.site-header__wordmark {
  position: relative;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-4);
  letter-spacing: 0.18em;
  padding-left: 1.5em;
  color: var(--text);
}
/* watercolor logo dot */
.site-header__wordmark::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.9em;
  height: 0.9em;
  transform: translateY(-50%);
  border-radius: var(--radius-pill);
  background: radial-gradient(circle at 35% 30%, #dcef6a 0%, #b091c6 45%, #855fa1 80%);
  box-shadow: 0 0 14px var(--accent-shadow);
}

/* ==========================================================================
   Hero — the one "Nocturne" night panel
   ========================================================================== */
.hero {
  position: relative;
  background-color: var(--hero-bg);
  background-image: var(--hero-mesh);
  color: var(--hero-text);
  padding-block: var(--space-5);
  padding-inline: var(--page-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid rgba(154, 167, 194, 0.14);
  overflow: hidden;
}

.hero__stage {
  width: 100%;
  max-width: var(--wide-max);
  aspect-ratio: var(--hero-aspect);
  max-height: var(--hero-max-h);
}

.hero__stage svg { display: block; width: 100%; height: 100%; overflow: hidden; }

.hero__inner {
  width: 100%;
  max-width: var(--content-max);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 8vw, var(--fs-6));
  line-height: var(--lh-tight);
  font-weight: var(--fw-normal);
  letter-spacing: 0.012em;
}

.hero__subhead {
  color: var(--hero-text-muted);
  font-size: var(--fs-3);
  max-width: 34rem;
}

/* ==========================================================================
   Signup unit (in the hero and again mid-page)
   ========================================================================== */
.signup { width: 100%; max-width: 30rem; }

.signup-form { display: flex; flex-direction: column; gap: var(--space-3); }

.signup-form__field { display: flex; flex-direction: column; gap: var(--space-1); }

.signup-form__label {
  font-size: var(--fs-1);
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.signup-form__input {
  width: 100%;
  padding: var(--space-3) var(--space-3);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.signup-form__input::placeholder { color: var(--text-muted); }

.signup-form__input:focus-visible {
  border-color: var(--accent);
  outline-offset: 1px;
}

.signup-form__checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--fs-3);
}

.signup-form__checkbox-input {
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--accent);
  flex: none;
  cursor: pointer;
}

.signup-form__submit {
  padding: var(--space-3) var(--space-4);
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-3);
  letter-spacing: 0.04em;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: var(--glow);
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}

.signup-form__submit:hover {
  filter: brightness(1.04);
  box-shadow: 0 12px 32px var(--accent-shadow);
}

.signup-form__submit:disabled { opacity: 0.6; cursor: progress; box-shadow: none; }

.signup-form__error {
  margin: 0;
  font-style: italic;
  font-size: var(--fs-2);
  color: var(--accent);
}

.signup-success {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: var(--fw-normal);
  line-height: 1.3;
}

/* Honeypot: present in the DOM, out of view and the a11y tree. */
.signup-form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* In-hero (dark) context. */
.hero .signup-form__label { color: var(--hero-text-muted); }
.hero .signup-form__input {
  background: var(--hero-surface);
  color: var(--hero-text);
  border-color: var(--key-edge);
}
.hero .signup-form__input::placeholder { color: var(--hero-text-muted); }
.hero .signup-form__error { color: var(--accent-on-dark); }
.hero .signup-form__checkbox { color: var(--hero-text); }
.hero .signup-success { color: var(--hero-text); }

/* ==========================================================================
   Features — soft frosted cards
   ========================================================================== */
.features { padding-block: var(--space-6); }

.features__list {
  max-width: var(--content-max);
  margin-inline: auto;
  display: grid;
  gap: var(--space-3);
}

.features__item {
  position: relative;
  font-size: var(--fs-3);
  line-height: 1.5;
  padding: var(--space-4);
  padding-top: calc(var(--space-4) + 1.4em);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* painterly marks (Unicode glyphs, per the design language) */
.features__item::before {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  font-size: 1.5em;
  line-height: 1;
  color: var(--accent);
}
.features__item:nth-child(1)::before { content: "\2740"; }  /* ❀ */
.features__item:nth-child(2)::before { content: "\2726"; }  /* ✦ */
.features__item:nth-child(3)::before { content: "\25C6"; }  /* ◆ */

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq {
  padding-block: var(--space-6);
  max-width: var(--content-max);
  margin-inline: auto;
}

.faq__title {
  font-family: var(--font-display);
  font-size: var(--fs-5);
  font-weight: var(--fw-normal);
  letter-spacing: 0.01em;
  margin-bottom: var(--space-4);
}

.faq__item {
  border-top: 1px solid var(--border);
  padding-block: var(--space-3);
}
.faq__item:last-of-type { border-bottom: 1px solid var(--border); }

.faq__question {
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: var(--fw-medium);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}
.faq__question::-webkit-details-marker { display: none; }

.faq__question::after {
  content: "\203A";           /* › */
  color: var(--accent);
  font-size: 1.3em;
  line-height: 1;
  transition: transform var(--transition);
}
.faq__item[open] .faq__question::after { transform: rotate(90deg); }

.faq__answer {
  color: var(--text-muted);
  padding-top: var(--space-2);
  max-width: 32rem;
}

/* ==========================================================================
   Second signup section — frosted card
   ========================================================================== */
.signup-section {
  padding-block: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.signup-section__title {
  font-family: var(--font-display);
  font-size: var(--fs-5);
  font-weight: var(--fw-normal);
  letter-spacing: 0.01em;
}

.signup-section .signup {
  padding: var(--space-5) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.signup-section .signup-form { text-align: start; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-5) var(--page-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-2);
}

.site-footer__social {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.site-footer__social-link { letter-spacing: 0.02em; }

.site-footer__disclosure { font-style: italic; }

/* ==========================================================================
   Hero keyboard (built by hero.js). Colors and glow are CSS-driven; the script
   only supplies dimensionless progress via --glow / --pulse / --press.
   ========================================================================== */
.hero-key { transform: translateY(calc(var(--press, 0) * var(--key-press-dip))); }

.hero-key__body {
  rx: var(--key-radius);
  fill: color-mix(in srgb, var(--key-white), var(--key-glow) calc(var(--glow, 0) * 100%));
  filter:
    drop-shadow(0 0 calc(var(--glow, 0) * var(--glow-halo)) var(--key-glow))
    drop-shadow(0 0 calc(var(--pulse, 0) * var(--glow-halo-pulse)) var(--key-glow));
}

.hero-key--black .hero-key__body {
  fill: color-mix(in srgb, var(--key-black), var(--key-glow) calc(var(--glow, 0) * 100%));
}

/* ==========================================================================
   Larger viewports
   ========================================================================== */
@media (min-width: 48rem) {
  :root { --page-pad: var(--space-6); --hero-max-h: 34vh; }

  .hero { padding-block: var(--space-6); gap: var(--space-4); }
  .hero__inner { align-items: start; }

  .features__list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}