/*
  SEED: 1790238807098

  A — Layout:      digit 8 → Diagonal composition
  B — Color:       digit 9 → Soft sage (#8fa888) base, near-black type, dusty pink accent
  C — Typography:  digit 0 → Playfair Display + DM Mono
  D — Visual lang: digit 7 → Hard geometric cutouts (clip-path polygon borders)
  E — Navigation:  digit 0 → Left sidebar, fixed, icon + label, collapses on scroll
  F — Tone:        digit 8 → Luxury restrained

  These choices were determined by the seed and must not be changed
  for reasons of "appropriateness" or "better fit for the content".
  Tension between content and form is intentional.
*/

/*
  BRAND ARCHETYPE:    Luminary
  LAYOUT PARADIGM:    Diagonal clip-path composition, cinematic diagonal flow
  SECTION ORDER:      Hero → Notice → Rituals → Bridge → Kit → Footer
  DISPLAY FONT:       Playfair Display — https://fonts.google.com/specimen/Playfair+Display
  BODY FONT:          DM Mono — https://fonts.google.com/specimen/DM+Mono
  PRIMARY COLOR:      #8fa888 — soft sage, the seed base, held as the field of the page
  SHAPE LANGUAGE:     sharp
  SIGNATURE MOMENT:   Diagonal polygon seams, with a clip-path wipe on headings as they enter
  TONE OF VOICE:      evocative, sparse, restrained
*/

:root {
  --brand-primary: #8fa888;
  --brand-secondary: #c9a3ab;
  --brand-accent: #c48b98;

  --surface-base: #8fa888;
  --surface-raised: #e7efe2;
  --surface-inverse: #1c211b;

  --text-primary: #141714;
  --text-secondary: #243028;
  --text-inverse: #f4f7f1;
  --text-inverse-dim: #c5cdc0;

  --border-subtle: rgba(20, 23, 20, 0.2);
  --border-strong: #141714;

  --font-display: "Playfair Display", "Iowan Old Style", Palatino, serif;
  --font-body: "DM Mono", "Courier New", monospace;

  --text-hero: clamp(3.5rem, 10vw, 9rem);
  --text-h1: clamp(2.5rem, 6vw, 5rem);
  --text-h2: clamp(1.75rem, 4vw, 3rem);
  --text-h3: clamp(1.25rem, 2.5vw, 1.75rem);
  --text-body: clamp(1rem, 1.5vw, 1.125rem);
  --text-sm: clamp(0.75rem, 1vw, 0.875rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3.5rem;
  --space-8: 6rem;

  --rail: 15.5rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-wipe: cubic-bezier(0.77, 0, 0.18, 1);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: 1.7;
  font-feature-settings: "ss01" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.is-collapsed {
  --rail: 4.75rem;
}

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}

h1,
h2,
h3,
.wordmark-luce {
  font-family: var(--font-display);
  font-weight: 700;
  font-feature-settings: "liga" 1, "dlig" 1, "onum" 1;
  letter-spacing: -0.03em;
  line-height: 0.92;
  text-wrap: balance;
}

p {
  margin: 0;
}

::selection {
  background: var(--brand-accent);
  color: var(--text-primary);
}

:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: 0.07;
  background: var(--text-primary);
  filter: url("#svg-noise");
  mix-blend-mode: multiply;
}

.skip {
  position: absolute;
  left: var(--rail);
  top: 0;
  transform: translateY(-120%);
  background: var(--surface-raised);
  color: var(--text-primary);
  padding: var(--space-3) var(--space-4);
  z-index: 80;
}

.skip:focus {
  transform: none;
}

@media (max-width: 767px) {
  :root,
  body.is-collapsed {
    --rail: 4.25rem;
  }
}