/* SleeptCode landing page. Dark only, no motion, no JavaScript.
   Palette and type follow assets/branding/README.md. */

:root {
  --color-navy: #07182e;
  --color-navy-raised: #0b2140;
  --color-navy-glow: #10294a;
  --color-ivory: #f5e6c8;
  --color-amber: #e9bd78;
  --color-blue-gray: #b9cad4;

  --font-sans: "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: Menlo, "Courier New", monospace;

  --measure: 68ch;
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-xxl: 6rem;

  --radius-pill: 999px;
  --divider-width: 12rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--color-navy);
  color: var(--color-ivory);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.container {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-m);
}

/* Skip link: off-screen until it receives keyboard focus. */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-s);
  z-index: 1;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-pill);
  background: var(--color-amber);
  color: var(--color-navy);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-s);
}

/* Hero.
   PLACEHOLDER BACKGROUND. The brand atmosphere image is deferred
   (spec section 9). When it lands, add a background-image layer above
   the gradients below and keep the final fade into var(--color-navy)
   so the page ground stays plain. */
.hero {
  padding-block: var(--space-xxl) var(--space-xl);
  text-align: center;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, var(--color-navy-glow) 0%, transparent 70%),
    linear-gradient(180deg, var(--color-navy-raised) 0%, var(--color-navy) 100%);
}

.hero__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-s);
}

.hero__mark {
  width: 7.5rem;
  border-radius: 50%;
}

.hero__title {
  margin: var(--space-s) 0 0;
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero__brand-line {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blue-gray);
}

.hero__pitch {
  margin: var(--space-m) 0 0;
  max-width: 40ch;
  font-size: 1.2rem;
}

.hero__status {
  margin: var(--space-m) 0 0;
  padding: var(--space-xs) var(--space-s);
  border: 1px solid var(--color-amber);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-amber);
}

/* Sections */
.section {
  padding-block: var(--space-l);
}

.section h2 {
  margin: 0 0 var(--space-s);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-amber);
}

.section p {
  margin: 0 0 var(--space-s);
}

.section > :last-child {
  margin-bottom: 0;
}

.points,
.steps {
  margin: 0 0 var(--space-s);
  padding-left: 1.4rem;
}

.points li,
.steps li {
  margin-bottom: var(--space-xs);
}

.points li::marker,
.steps li::marker {
  color: var(--color-amber);
}

.steps li::marker {
  font-family: var(--font-mono);
}

/* Divider: a thin amber line with three constellation dots. */
.divider {
  width: var(--divider-width);
  height: 6px;
  margin: var(--space-s) auto;
  border: 0;
  opacity: 0.7;
  background:
    radial-gradient(circle, var(--color-amber) 0 2px, transparent 2.5px) 0 50% / 6px 6px no-repeat,
    radial-gradient(circle, var(--color-amber) 0 2px, transparent 2.5px) 50% 50% / 6px 6px no-repeat,
    radial-gradient(circle, var(--color-amber) 0 2px, transparent 2.5px) 100% 50% / 6px 6px no-repeat,
    linear-gradient(var(--color-amber), var(--color-amber)) 50% 50% / 100% 1px no-repeat;
}

.pull-quote {
  margin: 0 0 var(--space-m);
  padding-left: var(--space-m);
  border-left: 2px solid var(--color-amber);
  font-size: 1.25rem;
  color: var(--color-blue-gray);
}

.pull-quote p {
  margin: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: var(--space-xs) var(--space-s);
  border: 1px solid var(--color-blue-gray);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-blue-gray);
}

/* Footer */
.footer {
  margin-top: var(--space-xl);
  padding-block: var(--space-l) var(--space-xl);
  border-top: 1px solid var(--color-navy-glow);
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-blue-gray);
}

.footer__wordmark {
  width: min(22rem, 100%);
  margin: 0 auto var(--space-m);
}

.footer p {
  margin: 0 0 var(--space-xs);
}

.footer__note {
  max-width: 52ch;
  margin-inline: auto;
}