@font-face {
  font-family: 'Lovelo';
  src: url('../fonts/Lovelo-Black.woff') format('woff'), url('../fonts/Lovelo-Black.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Layout concept: a single dark stage that opens like waking eyes, then
   long editorial scroll — wide gutters, oversized condensed caps, one serif voice. */
:root {
  /* colour: night tones with a faint violet bias, bone for type, lavender used only for light */
  --ink: #0a0a0c;
  --ink-94: rgba(10, 10, 12, 0.94);
  --night: #111115;
  --char: #1a1a1f;
  --line: rgba(233, 230, 224, 0.12);
  --line-strong: rgba(233, 230, 224, 0.28);
  --mist: #8e8b95;
  --bone: #e9e6e0;
  --bone-70: rgba(233, 230, 224, 0.7);
  --lilac: #a89fc3;
  --lilac-soft: rgba(168, 159, 195, 0.14);
  --danger: #d9a3a0;

  /* type: Lovelo (the brand face) for wordmark and headlines, Bodoni italic for the dream voice, Archivo for reading, Plex Mono for labels */
  --f-display: 'Lovelo', 'Futura', 'Century Gothic', 'Avenir Next', var(--f-sans);
  --f-serif: 'Bodoni Moda', 'Bodoni 72', Didot, 'Times New Roman', serif;
  --f-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-label: 11px;
  --t-small: 13px;
  --t-body: 16px;
  --t-lead: clamp(20px, 1.1vw + 14px, 30px);
  --t-h3: clamp(28px, 2.6vw + 14px, 48px);
  --t-h2: clamp(38px, 5.6vw, 104px);
  --t-hero: clamp(56px, 10.5vw, 210px);

  --gx: clamp(16px, 4vw, 64px);
  --side-l: max(var(--gx), env(safe-area-inset-left, 0px));
  --side-r: max(var(--gx), env(safe-area-inset-right, 0px));
  --nav-h: 64px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
html.modal-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--lilac); color: var(--ink); }
:focus-visible { outline: 1px solid var(--lilac); outline-offset: 4px; }
main:focus { outline: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.wrap {
  width: 100%;
  max-width: 1720px;
  margin-inline: auto;
  padding-left: var(--side-l);
  padding-right: var(--side-r);
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.skip {
  position: fixed; z-index: 100; top: calc(env(safe-area-inset-top, 0px) + 8px); left: var(--side-l);
  padding: 10px 14px; background: var(--bone); color: var(--ink); text-decoration: none;
  font-size: var(--t-small); transform: translateY(-160%); transition: transform 0.2s;
}
.skip:focus { transform: none; }

/* type roles */
.label {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
  line-height: 1.4;
}
.caps {
  font-family: var(--f-sans);
  font-stretch: 66%;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: -0.005em;
}
.muted { color: var(--mist); }
.nowrap { white-space: nowrap; }
h1, h2, h3 { text-wrap: balance; }

.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lilac); margin-right: 10px; vertical-align: 1px; animation: pulse 2.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

/* Static, near-invisible dither: only there to stop dark gradients from banding. It never moves. */
.grain {
  position: fixed; inset: 0; z-index: 80; pointer-events: none;
  background-image: var(--noise); background-size: 128px;
  opacity: 0.018;
}

/* reveal */
[data-reveal] { transition: opacity 1.1s var(--ease), transform 1.3s var(--ease); }
.js [data-reveal].pre { opacity: 0; transform: translate3d(0, 32px, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
[tabindex="-1"]:focus { outline: none; }