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

:root {
  --paper: #fafaf9;
  --ink: #16191d;
  --muted: #5d646d;
  --rule: #d6d9dd;
  --link: #1d5b54;
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 2rem;
  --s4: 4rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --col: 9.5rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #131518; --ink: #e9ebed; --muted: #9aa1a9; --rule: #30353b; --link: #8cc7bd;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #131518; --ink: #e9ebed; --muted: #9aa1a9; --rule: #30353b; --link: #8cc7bd;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 2px; }

.page {
  min-height: min(100svh, 56rem);
  display: grid;
  grid-template-rows: 1fr auto;
  max-width: 64rem;
  margin: 0 auto;
  padding: var(--s4) var(--gutter) var(--s3);
}

/* Content block sits slightly above the optical centre on tall screens */
.page > :first-child { align-self: center; padding-bottom: 6vh; }

/* The name is the one loud element; negative indent aligns the stems optically */
.name {
  margin: 0 0 var(--s3) -0.057em;
  font-size: clamp(2.75rem, 7vw, 5.25rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.name span { display: block; }

/* Everything below the name hangs on one content column, offset by the term column */
.grid { padding-left: calc(var(--col) + var(--s3)); }
.lede {
  max-width: 30rem;
  margin: 0 0 var(--s3);
  font-size: clamp(1.1875rem, 2vw, 1.3125rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.facts { margin: 0; }
.facts > div {
  display: grid;
  grid-template-columns: var(--col) minmax(0, 34rem);
  gap: var(--s1) var(--s3);
  margin-left: calc(-1 * (var(--col) + var(--s3)));
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule);
}
.facts > div:first-child { border-top: 1px solid var(--rule); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.facts p { margin: 0; }
.facts p + p { margin-top: 0.75rem; }

.foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--s3);
  margin-top: var(--s4);
  font-size: 0.875rem;
}
.foot a { color: var(--muted); }
.foot a[aria-current] { color: var(--ink); text-decoration: none; }

/* Legal pages reuse the facts grid */
.back { display: inline-block; margin-bottom: var(--s3); color: var(--muted); }
.title {
  margin: 0 0 var(--s3);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.page > .legal { align-self: start; padding-bottom: 0; }
.legal dd { hyphens: auto; hyphenate-limit-chars: 10 4 4; }
.nobr { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

@media (max-width: 40rem) {
  .page { padding-top: var(--s3); }
  .page > :first-child { align-self: start; padding-bottom: 0; }
  .name { letter-spacing: -0.03em; }
  .grid { padding-left: 0; }
  .facts > div { grid-template-columns: 1fr; gap: 0.125rem; margin-left: 0; }
  .facts dt { font-size: 0.875rem; }
  .foot { justify-content: flex-start; margin-top: var(--s3); }
}
@media (max-width: 22rem) {
  .lede { font-size: 1.125rem; }
}
