@font-face {
  font-family: Schibsted;
  src: url("assets/SchibstedGrotesk-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #F5F3F0;
  --ink: #232027;
  --blue: #3458B4;
  --muted: #6D6670;
  --rule: #D8D3D8;
  font-family: Schibsted, Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 28px; }
body { margin: 0; }
a { color: inherit; text-underline-offset: 5px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; }
::selection { background: #9EBBFF; color: var(--ink); }
/* The shell fills the window, so the footer sits at the bottom of short pages. */
.site-shell { width: min(100% - 112px, 1320px); margin-inline: auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.site-shell > main { flex: 1 0 auto; }
.skip-link { position: absolute; left: 16px; top: 12px; padding: 10px 16px; background: var(--ink); color: var(--paper); transform: translateY(-150%); z-index: 1; }
.skip-link:focus { transform: translateY(0); }
.masthead { display: flex; align-items: center; min-height: 109px; border-bottom: 1px solid var(--rule); }
.hero { padding: 70px 0 74px; }
.hero h1 { margin: 0; font-size: inherit; }
.wordmark { display: block; width: 100%; height: auto; }
/* The Easter egg: clicking Oklahoma, the wordmark's period, replays the intro (replay.js).
   The button covers the state using the geometry in wordmark.svg: the state's 100 by 49
   outline is drawn at 0.43 scale from (686.17, 161.93) in a 680 by 120 frame that starts at (60, 75). */
.hero-top { position: relative; }
.replay { position: absolute; left: 92.084%; top: 72.442%; width: 6.324%; height: 17.558%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* A fingertip gets at least 44px square around the state. */
.replay::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
/* A mouse gets the state's exact outline. The keyboard focus ring needs the whole box. */
@media (pointer: fine) {
  .replay:not(:focus-visible) { clip-path: polygon(0% 0%, 100% 0%, 100% 77.551%, 99% 100%, 91% 89.796%, 84% 93.878%, 77% 100%, 70% 91.837%, 63% 97.959%, 56% 87.755%, 49% 89.796%, 43% 83.673%, 36% 81.633%, 36% 26.531%, 0% 26.531%); }
}
/* With reduced motion the intro never plays, so there's nothing to replay. */
@media (prefers-reduced-motion: reduce) { .replay { display: none; } }
.hero-bottom { margin: 28px 2.12% 0; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
/* The stamp image has room for the stamp's landing: half the stamp's width on every
   side. The image is pulled back by that room, so the stamp sits where it always has.
   --stamp is the stamp's own width. */
.phrase { --stamp: 232px; display: block; width: calc(var(--stamp) * 2); height: auto; margin: calc(7px - var(--stamp) / 2) calc(var(--stamp) / -2) calc(var(--stamp) / -2); pointer-events: none; }
.hello { max-width: 470px; padding-top: 1px; }
.introduction { margin: 0; font-size: clamp(25px, 2.6vw, 35px); line-height: 1.3; letter-spacing: -.9px; font-weight: 550; }
.undercut { font-size: 17px; line-height: 1.65; color: var(--muted); margin: 20px 0 28px; }
.channel-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 52px; padding: 13px 19px; border-radius: 3px; background: var(--blue); color: var(--paper); text-decoration: none; font-size: 14px; font-weight: 550; }
.channel-link:hover { background: #28499E; }
.channel-link span { font-size: 20px; line-height: 1; }
.social-links { margin: 22px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink); }
/* Padding enlarges each tap target, and the matching negative margin keeps the sentence's spacing. */
.social-links a { display: inline-block; padding: 12px 4px; margin: -12px -4px; color: var(--blue); }
/* Nothing follows the last link, so its tap area can reach further right. */
.social-links a:last-child { padding-right: 12px; margin-right: -12px; }
.handle { font-weight: 650; }
.section-number { display: block; font-size: 10px; color: var(--blue); letter-spacing: 1.2px; margin-bottom: 23px; }
footer { border-top: 1px solid var(--rule); padding: 25px 0 31px; color: var(--muted); font-size: 11px; }
footer a { text-underline-offset: 3px; }
footer a:hover { color: var(--ink); }
.error-home img { width: 220px; height: auto; display: block; }
.error-content { padding: 88px 0 110px; max-width: 720px; }
.error-content h1 { font-size: clamp(36px, 6vw, 68px); line-height: 1.08; letter-spacing: -.05em; font-weight: 800; margin: 0 0 26px; }
.error-content p { font-size: 20px; line-height: 1.6; color: var(--muted); margin: 0 0 30px; }

@media (min-width: 1700px) { .hero { padding-top: 84px; } }
@media (max-width: 900px) {
  .site-shell { width: calc(100% - 72px); }
  .masthead { min-height: 90px; }
  .hero { padding: 54px 0 56px; }
  .hero-bottom { gap: 38px; margin-top: 24px; }
  .phrase { --stamp: 190px; }
  .introduction { font-size: 26px; letter-spacing: -.6px; }
  .undercut { font-size: 15px; }
  .channel-link { gap: 15px; font-size: 12px; padding-inline: 15px; }
}
@media (max-width: 620px) {
  .site-shell { width: calc(100% - 40px); }
  .masthead { min-height: 78px; }
  .hero { padding: 42px 0 42px; }
  .hero-bottom { grid-template-columns: 1fr; gap: 34px; margin-top: 21px; }
  .phrase { --stamp: 158px; margin: calc(var(--stamp) / -2); }
  .hello { padding-top: 0; max-width: 100%; }
  .introduction { font-size: 28px; line-height: 1.28; letter-spacing: -.7px; }
  .undercut { font-size: 16px; margin: 17px 0 23px; }
  .channel-link { font-size: 13px; gap: 25px; padding: 13px 17px; }
  .section-number { font-size: 9px; margin-bottom: 17px; }
  footer { padding: 23px 0; font-size: 10px; }
  .error-content { padding: 58px 0 80px; }
  .error-content p { font-size: 18px; }
}