@font-face {
  font-family: Schibsted;
  src: url("/grok/receptionist/fonts/schibsted-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Schibsted;
  src: url("/grok/receptionist/fonts/schibsted-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --ink: #141516;
  --paper: #eef1f3;
  --mute: #5c6166;
  --line: rgba(20, 21, 22, 0.16);
  --accent: #155e75;
  --d: clamp(40px, 11vw, 56px);
  --b: 16.5px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; background: var(--paper); color: var(--ink); }
html { background: var(--paper); }
body {
  font-family: Schibsted, ui-sans-serif, system-ui, sans-serif;
  font-size: var(--b);
  line-height: 1.45;
  font-weight: 400;
  max-width: 42rem;
  padding:
    calc(0.9rem + env(safe-area-inset-top))
    clamp(1.15rem, 5vw, 3rem)
    calc(2.4rem + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

a { color: inherit; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.kicker {
  font-size: 13px;
  color: var(--mute);
  margin: 0 0 1.1rem;
}
.kicker a { text-decoration: underline; text-underline-offset: 0.14em; }

h1 {
  font-size: var(--d);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.05;
  margin: 0 0 0.7rem;
}

h2 {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 1.7rem 0 0.2rem;
  border-top: 1px solid var(--ink);
  padding-top: 1rem;
}

p { margin: 0 0 0.7rem; }
.lede { max-width: 24rem; margin: 0 0 1.2rem; }
.fine { font-size: 14px; color: var(--mute); }

.doors { margin-top: 0.2rem; }
.door {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
}
.door:first-child { border-top: 0; }
.door b {
  font-weight: 500;
  font-size: clamp(22px, 6vw, 32px);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.door span { color: var(--mute); text-align: right; max-width: 14rem; }
.door:hover b { color: var(--accent); }

.note {
  padding: 0.95rem 0 0.15rem;
  border-top: 1px solid var(--line);
}
.note:first-of-type { border-top: 0; padding-top: 0; }
.note .when {
  font-size: 13px;
  color: var(--mute);
  margin: 0 0 0.25rem;
}
.note h3 {
  font-size: clamp(18px, 4.5vw, 22px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 0.35rem;
}
.note p { margin: 0 0 0.45rem; }

.row {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
}
.row:first-of-type { border-top: 0; }
.row b { font-weight: 500; }
.row span { color: var(--mute); text-align: right; }

ul, ol { margin: 0 0 0.7rem; padding: 0 0 0 1.15rem; }
li { margin: 0 0 0.4rem; }

.foot {
  margin-top: 2.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ink);
  font-size: 13px;
  color: var(--mute);
}
.foot a { text-decoration: underline; text-underline-offset: 0.14em; }

@media (min-width: 720px) {
  body { padding-top: 2.4rem; }
}