@font-face { font-family: "Spectral"; src: url("/fonts/spectral-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-grotesk.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

/* Night sky, one fire. Each band of the page takes a colour from the flame or its opposite. */
:root {
  color-scheme: dark;
  --night: oklch(0.2 0.055 278);
  --deep: oklch(0.34 0.095 238);
  --bone: oklch(0.97 0.018 85);
  --mist: oklch(0.85 0.035 278);
  --ink: oklch(0.19 0.05 278);
  --orange: oklch(0.76 0.175 54);
  --gold: oklch(0.88 0.15 90);

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: clamp(2.5rem, 5vw, 4rem);
  --space-xl: clamp(4rem, 8vw, 7rem);
  --gutter: clamp(1rem, 4vw, 3.5rem);

  --serif: "Spectral", Georgia, serif;
  --sans: "Schibsted Grotesk", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--bone);
  font: 400 1.0625rem/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, p, dl, dd, figure { margin: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: color 160ms ease-out; }
a:hover { color: var(--gold); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.skip { position: absolute; left: var(--gutter); top: -4rem; background: var(--bone); color: var(--ink); padding: var(--space-xs) var(--space-sm); z-index: 2; }
.skip:focus { top: var(--space-xs); }

.page { max-width: 92rem; margin-inline: auto; padding-inline: var(--gutter); }

.masthead { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding-block: var(--space-md); position: relative; z-index: 1; }
.wordmark { display: inline-flex; align-items: center; gap: 0.5rem; font: 300 1.75rem/1 var(--serif); letter-spacing: -0.01em; text-decoration: none; }
.wordmark svg { width: 1.5rem; height: 1.75rem; flex: none; }
.masthead nav { display: flex; gap: var(--space-md); font-size: 0.9375rem; }
.masthead nav a { text-decoration: none; }

/* Hero: headline on the left, the flame burning at its shoulder. */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; column-gap: var(--space-md); }
.hero-text { grid-column: 1; grid-row: 1; position: relative; z-index: 1; padding-block: clamp(1.5rem, 3vw, 3rem) var(--space-md); }
h1 { font: 300 clamp(3.25rem, 7.8vw, 8.5rem)/0.98 var(--serif); letter-spacing: -0.028em; text-wrap: balance; }
h1 .hot { color: var(--orange); }
.lead { font-size: clamp(1.1875rem, 1.7vw, 1.5rem); line-height: 1.5; max-width: 32em; margin-block-start: var(--space-lg); }

.flame { grid-column: 2; grid-row: 1; position: relative; aspect-ratio: 3 / 4; width: 100%; max-height: 76vh; justify-self: center; }
.flame canvas, .flame svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.flame svg { padding: 12% 16% 8%; }
.flame.is-live svg { display: none; }

/* Bands */
.band { padding-block: var(--space-xl); }
.band-first { padding-block: 0 var(--space-xl); }
.band-deep { background: var(--deep); }
.band-orange { background: var(--orange); color: var(--ink); }
.band-orange a:hover { color: var(--ink); text-decoration-thickness: 2px; }

.part { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-md); row-gap: var(--space-md); }
.part h2 { grid-column: 1 / span 4; font: 300 clamp(2rem, 3.6vw, 3.25rem)/1.08 var(--serif); letter-spacing: -0.015em; }
.part > .body { grid-column: 6 / span 7; }
.prose { display: grid; gap: var(--space-sm); max-width: 62ch; }

.facts > div { display: grid; grid-template-columns: minmax(7.5rem, 2fr) 5fr; gap: var(--space-md); padding-block: 0.875rem; border-block-start: 1px solid color-mix(in oklch, var(--ink) 45%, transparent); }
.facts > div:last-child { border-block-end: 1px solid color-mix(in oklch, var(--ink) 45%, transparent); }
.facts dd { font-weight: 500; }

.contact { display: grid; gap: var(--space-md); }
.contact h2 { font: inherit; max-width: 44ch; }
.write { display: inline-block; font: 300 clamp(2.25rem, 7.4vw, 7.5rem)/1.05 var(--serif); letter-spacing: -0.02em; overflow-wrap: anywhere; color: var(--gold); }
.write:hover { color: var(--orange); }

.colophon { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-md); padding-block: var(--space-md); border-block-start: 1px solid color-mix(in oklch, var(--mist) 35%, transparent); font-size: 0.875rem; line-height: 1.5; color: var(--mist); }

.legal { padding-block: clamp(2rem, 5vw, 4rem) var(--space-xl); }
.legal h1 { font-size: clamp(2.75rem, 7vw, 6rem); padding-block-end: var(--space-lg); }
.legal h2 { font: 300 1.75rem/1.2 var(--serif); margin-block-start: var(--space-sm); color: var(--gold); }
.legal .prose { margin-inline-start: 41.66%; }

@media (max-width: 52rem) {
  .hero { grid-template-columns: 1fr; }
  .flame { grid-column: 1; grid-row: 1; width: min(62vw, 16rem); justify-self: start; margin-block-end: -1.5rem; }
  .hero-text { grid-row: 2; padding-block-start: 0; }
  .part h2, .part > .body { grid-column: 1 / -1; }
  .legal .prose { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  a { transition: none; }
}