:root {
  --black-bar: #090c0b;
  --bone-50: #f7f3ec;
  --bone-100: #efe9df;
  --bone-200: #e3dccf;
  --bone-300: #cfc7b8;
  --bone-400: #aaa396;
  --bone-500: #857f74;
  --bone-600: #5f5a52;
  --ink-900: #0f1312;
  --verdigris-900: #0f2a25;
  --verdigris-700: #1f5c50;
  --verdigris-200: #b4dccf;
  --verdigris-150: #c6e6db;
  --verdigris-100: #e7f4ef;
  --brass-900: #3b2d14;
  --brass-600: #7d6129;
  --brass-50: #fbf6ea;
  --brass-300: #f1e4c6;
  --brass-200: #f4ead3;
  --brass-100: #f9f2e2;
  --vermilion-300: #ffb59c;
  --vermilion-500: #ff4a1c;
  --vermilion-600: #e63a0e;
  --vermilion-700: #b82d08;
  --vermilion-ink: #1b0a04;
  --vermilion-ink-2: #3d1205;
  --bar: var(--black-bar);
  --glass-clear: var(--bone-50);
  --glass-capability: var(--verdigris-700);
  --glass-work: var(--brass-600);
  --glass-action: var(--vermilion-500);
  --glass-frost: var(--bone-200);
  --on-clear: var(--ink-900);
  --on-clear-2: var(--bone-600);
  --on-capability: var(--verdigris-100);
  --on-capability-2: var(--verdigris-150);
  --on-work: var(--brass-50);
  --on-work-2: var(--brass-100);
  --on-action: var(--vermilion-ink);
  --on-action-2: var(--vermilion-ink-2);
  --on-frost: var(--bone-600);
  --error: var(--vermilion-700);
  --bar-w: 10px;
  --mullion: 16px;
  --rule: 1px;
  --font: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-xs: .75rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.5rem, 1.1rem + 1vw, 1.75rem);
  --fs-2xl: clamp(2rem, 1.4rem + 1.6vw, 2.875rem);
  --fs-3xl: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  --fs-door: clamp(2.25rem, 1.4rem + 2vw, 3.25rem);
  --fs-statement: clamp(2.25rem, 1.2rem + 3.4vw, 4.5rem);
  --lh-tight: 1.08;
  --lh-snug: 1.2;
  --lh-body: 1.55;
  --track-display: -.025em;
  --measure: 68ch;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --pad-tight: var(--s-5);
  --pad: var(--s-6);
  --pad-roomy: var(--s-7);
  --pad-calm: clamp(48px, 5vw, 64px);
  --section-gap: 32px;
  --ease-light: cubic-bezier(.16, 1, .3, 1);
  --dur-quick: .16s;
  --dur-light: .8s;
  --dur-pass: 1.6s;
  --pass-step: 90ms;
}

*, :before, :after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  background: var(--bar);
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  scrollbar-color: var(--bone-500) var(--bar);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bar);
  color: var(--on-clear);
  font: 400 var(--fs-base) / var(--lh-body) var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}

img, svg {
  max-width: 100%;
  display: block;
}

h1, h2, h3, h4 {
  font-weight: 400;
  line-height: var(--lh-snug);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
  max-width: var(--measure);
}

ul, ol {
  padding: 0;
  list-style: none;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

time, .num, table {
  font-variant-numeric: tabular-nums;
}

::selection {
  background: var(--sel-bg, var(--glass-capability));
  color: var(--sel-ink, var(--on-capability));
}

input, textarea {
  caret-color: var(--glass-capability);
}

::-webkit-scrollbar {
  background: var(--bar);
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-thumb {
  background: var(--bone-500);
  border: 3px solid var(--bar);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bone-300);
}

:focus {
  outline: none;
}

.is-focus {
  outline: 3px solid var(--focus, var(--glass-capability));
  outline-offset: 3px;
}

:focus-visible {
  outline: 3px solid var(--focus, var(--glass-capability));
  outline-offset: 3px;
}

a {
  color: inherit;
  text-underline-offset: .24em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

.vh {
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  width: 1.25em;
  height: 1.25em;
}

.wall {
  gap: var(--section-gap);
  padding: var(--mullion);
  background: var(--bar);
  display: grid;
}

.bay {
  gap: var(--bar-w);
  min-height: 0;
  display: grid;
}

.pane {
  --pane-bg: var(--glass-clear);
  --pane-ink: var(--on-clear);
  --pane-ink-2: var(--on-clear-2);
  --pane-line: #090c0b29;
  --sel-bg: var(--glass-capability);
  --sel-ink: var(--on-capability);
  --focus: var(--glass-capability);
  --flood-bg: var(--glass-capability);
  --flood-ink: var(--on-capability);
  --flood-ink-2: var(--on-capability-2);
  --sheen-o: .5;
  --pass-peak: .85;
  isolation: isolate;
  min-width: 0;
  padding: var(--pad);
  color: var(--pane-ink);
  background: var(--pane-bg);
  transition: opacity var(--dur-light) var(--ease-light),
    filter var(--dur-light) var(--ease-light),
    background-color var(--dur-light) var(--ease-light),
    color var(--dur-light) var(--ease-light);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffff29;
}

.pane:before {
  content: "";
  z-index: -1;
  pointer-events: none;
  opacity: var(--sheen-o);
  background: linear-gradient(100deg, #0000 15%, #ffffff80 38%, #0000 62%);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.pane:after {
  content: "";
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-light) var(--ease-light);
  background: radial-gradient(120% 90% at 50% 40%, #fff6, #0000 70%);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.pane :where(.ink-2, small) {
  color: var(--pane-ink-2);
  transition: color var(--dur-light) var(--ease-light);
}

.pane--clear {
  --pane-bg: var(--glass-clear);
}

.pane--capability {
  --pane-bg: var(--glass-capability);
  --pane-ink: var(--on-capability);
  --pane-ink-2: var(--on-capability-2);
  --pane-line: #e7f4ef47;
  --sel-bg: var(--on-capability);
  --sel-ink: var(--verdigris-900);
  --focus: var(--bone-50);
  --flood-bg: var(--verdigris-900);
  --flood-ink: var(--on-capability);
  --flood-ink-2: var(--on-capability-2);
}

.pane--work {
  --pane-bg: var(--glass-work);
  --pane-ink: var(--on-work);
  --pane-ink-2: var(--on-work-2);
  --pane-line: #f4ead34d;
  --sel-bg: var(--on-work);
  --sel-ink: var(--brass-900);
  --focus: var(--bone-50);
  --flood-bg: var(--brass-900);
  --flood-ink: var(--on-work);
  --flood-ink-2: var(--on-work-2);
}

.pane--action {
  --pane-bg: var(--glass-action);
  --pane-ink: var(--on-action);
  --pane-ink-2: var(--on-action-2);
  --pane-line: #1b0a0447;
  --sel-bg: var(--vermilion-ink);
  --sel-ink: var(--vermilion-300);
  --focus: var(--bar);
  --flood-bg: var(--vermilion-600);
  --flood-ink: var(--on-action);
  --flood-ink-2: var(--on-action-2);
  --error: var(--vermilion-ink);
}

:-webkit-any(.pane--capability, .pane--work, .pane--action) {
  --sheen-o: .04;
  --pass-peak: .12;
  box-shadow: inset 0 1px #ffffff1a;
}

:is(.pane--capability, .pane--work, .pane--action) {
  --sheen-o: .04;
  --pass-peak: .12;
  box-shadow: inset 0 1px #ffffff1a;
}

.pane--flood-work {
  --flood-bg: var(--glass-work);
  --flood-ink: var(--on-work);
  --flood-ink-2: var(--on-work-2);
}

.pane--flood-action {
  --flood-bg: var(--glass-action);
  --flood-ink: var(--on-action);
  --flood-ink-2: var(--on-action-2);
}

.pane--interactive:hover, .pane.is-hover {
  filter: brightness(1.05) saturate(1.04);
}

:-webkit-any(a, button, label).pane:hover {
  filter: brightness(1.05) saturate(1.04);
}

:is(a, button, label).pane:hover {
  filter: brightness(1.05) saturate(1.04);
}

.pane--interactive:hover:after, .pane.is-hover:after {
  opacity: 1;
}

:-webkit-any(a, button, label).pane:hover:after {
  opacity: 1;
}

:is(a, button, label).pane:hover:after {
  opacity: 1;
}

:-webkit-any(.pane--capability, .pane--work):-webkit-any(a.pane:hover, .pane--interactive:hover, .is-hover) {
  --pane-ink: #fff;
  --pane-ink-2: var(--bone-50);
  filter: saturate(1.06);
}

:is(.pane--capability, .pane--work):is(a.pane:hover, .pane--interactive:hover, .is-hover) {
  --pane-ink: #fff;
  --pane-ink-2: var(--bone-50);
  filter: saturate(1.06);
}

.pane--capability:-webkit-any(a.pane:hover, .pane--interactive:hover, .is-hover):after {
  opacity: .12;
}

.pane--capability:is(a.pane:hover, .pane--interactive:hover, .is-hover):after {
  opacity: .12;
}

.pane--work:-webkit-any(a.pane:hover, .pane--interactive:hover, .is-hover) {
  --pane-ink-2: #fff;
}

.pane--work:is(a.pane:hover, .pane--interactive:hover, .is-hover) {
  --pane-ink-2: #fff;
}

.pane--work:-webkit-any(a.pane:hover, .pane--interactive:hover, .is-hover):after {
  opacity: .12;
}

.pane--work:is(a.pane:hover, .pane--interactive:hover, .is-hover):after {
  opacity: .12;
}

.pane.is-focus {
  outline-offset: -9px;
}

a.pane:focus-visible {
  outline-offset: -9px;
}

button.pane:focus-visible {
  outline-offset: -9px;
}

.pane.is-selected, .pane[aria-current="page"], .pane[aria-pressed="true"] {
  --pane-bg: var(--flood-bg);
  --pane-ink: var(--flood-ink);
  --pane-ink-2: var(--flood-ink-2);
  --pane-line: #ffffff42;
  --sheen-o: .04;
  --focus: var(--bone-50);
}

.pane--frost, .pane[aria-disabled="true"] {
  --pane-bg: var(--glass-frost);
  --pane-ink: var(--on-frost);
  --pane-ink-2: var(--on-frost);
  cursor: not-allowed;
  filter: none !important;
}

.pane--frost:before, .pane[aria-disabled="true"]:before {
  opacity: 0;
}

.pane--frost:after, .pane[aria-disabled="true"]:after {
  opacity: 0 !important;
}

.pane--dimmed {
  opacity: .3;
  filter: none !important;
}

.pane--dimmed:after {
  opacity: 0 !important;
}

.tbc {
  -webkit-text-decoration: underline dotted var(--vermilion-700) 2px;
  text-decoration: underline dotted var(--vermilion-700) 2px;
  text-underline-offset: .2em;
}

.tbc:after {
  content: "to confirm";
  vertical-align: .15em;
  letter-spacing: .01em;
  color: #fff;
  background: var(--vermilion-700);
  margin-inline-start: .4em;
  padding: 1px 5px 0;
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  display: inline-block;
}

.lightpass .pane:after {
  animation: lightpass var(--dur-pass) var(--ease-light) calc(.2s + var(--i, 0) * var(--pass-step)) 1 none;
}

@keyframes lightpass {
  0% {
    opacity: 0;
  }

  30% {
    opacity: var(--pass-peak);
  }

  100% {
    opacity: 0;
  }
}

.display {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
}

.title {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
}

.heading {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: -.012em;
}

.lede {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

.meta {
  font-size: var(--fs-sm);
  color: var(--pane-ink-2);
}

.pane--nav {
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3) var(--s-6);
  padding-block: var(--s-3);
  padding-inline: var(--pad);
  flex-wrap: wrap;
  display: flex;
}

.wordmark {
  font-weight: 500;
  font-size: var(--fs-base);
  letter-spacing: -.005em;
  text-decoration: none;
}

.wordmark span {
  color: var(--pane-ink-2);
  margin-left: var(--s-3);
  font-weight: 400;
}

.nav-links {
  gap: var(--s-2) var(--s-6);
  font-size: var(--fs-sm);
  flex-wrap: wrap;
  display: flex;
}

.nav-links a {
  padding-block: var(--s-1);
  text-decoration: none;
}

.nav-links {
  align-items: center;
}

.nav-links a:hover, .nav-links a[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.nav-links a[aria-current] {
  font-weight: 500;
}

.nav-links a.nav-quiet:not([aria-current]) {
  color: var(--pane-ink-2);
}

.nav-links a.btn {
  padding-block-start: 0;
  padding-block-end: 0;
  text-decoration: none;
}

.door {
  padding: var(--pad-roomy) var(--pad) var(--pad);
  justify-content: space-between;
  gap: var(--s-5);
  flex-direction: column;
  text-decoration: none;
  display: flex;
}

.door__title {
  font-size: var(--fs-door);
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
}

.door__title small {
  font-size: var(--fs-md);
  letter-spacing: 0;
  margin-top: var(--s-3);
  max-width: 30ch;
  line-height: 1.45;
  display: block;
}

.door__go {
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--fs-base);
  padding-top: var(--s-4);
  border-top: var(--rule) solid var(--pane-line);
  font-weight: 500;
  display: flex;
}

.door--compact .door__title {
  font-size: var(--fs-xl);
}

.door__list {
  font-size: var(--fs-base);
  border-top: var(--rule) solid var(--pane-line);
  align-content: start;
  line-height: 1.35;
  display: grid;
}

.door__list li {
  padding-block: var(--s-3);
  border-bottom: var(--rule) solid var(--pane-line);
  gap: 2px;
  display: grid;
}

.door__list small {
  font-size: var(--fs-sm);
  color: var(--pane-ink-2);
}

.door__note {
  font-size: var(--fs-sm);
  color: var(--pane-ink-2);
  margin-top: var(--s-3);
  display: block;
}

@media (max-width: 600px) {
  .pane--nav {
    gap: var(--s-2);
  }

  .nav-links {
    justify-content: space-between;
    gap: var(--s-2) var(--s-3);
    width: 100%;
  }

  .nav-links li:has(.btn) {
    flex-basis: 100%;
  }

  .nav-links .btn {
    width: 100%;
  }

  :root {
    --pad: var(--s-5);
    --pad-roomy: var(--s-6);
    --section-gap: 20px;
  }
}

.demo {
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--pad-tight);
  flex-direction: column;
  text-decoration: none;
  display: flex;
}

.demo__title {
  font-size: max(1.25rem, min(1rem + .6vw, 1.5rem));
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: -.01em;
}

.demo__domain {
  margin-top: var(--s-2);
  font-size: var(--fs-base);
  color: var(--pane-ink-2);
  font-weight: 400;
  display: block;
}

.marks {
  gap: var(--s-1);
  font-size: var(--fs-sm);
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}

.mark {
  border: var(--rule) solid currentColor;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  gap: 3px;
  padding: 4px 4px 3px;
  display: inline-flex;
}

.mark .icon {
  width: 1em;
  height: 1em;
}

.mark--absent {
  color: var(--on-frost);
  background: var(--glass-frost);
  border-color: #5f5a5252;
}

.btn {
  --btn-bg: var(--glass-clear);
  --btn-ink: var(--on-clear);
  justify-content: center;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  padding: 0 var(--s-5);
  font-size: var(--fs-base);
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: 2px solid var(--bar);
  cursor: pointer;
  transition: filter var(--dur-light) var(--ease-light), background-color var(--dur-light) var(--ease-light);
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.btn--primary {
  --btn-bg: var(--glass-action);
  --btn-ink: var(--on-action);
  --focus: var(--glass-capability);
}

.btn--secondary {
  --btn-bg: var(--glass-clear);
}

.btn:hover, .btn.is-hover {
  filter: brightness(1.07) saturate(1.05);
}

.btn:active {
  filter: brightness(.96);
  transition-duration: var(--dur-quick);
}

.btn:disabled, .btn[aria-disabled="true"] {
  --btn-bg: var(--glass-frost);
  --btn-ink: var(--on-frost);
  border-color: var(--bone-400);
  cursor: not-allowed;
  filter: none;
}

.tags {
  gap: var(--s-2);
  flex-wrap: wrap;
  display: flex;
}

.tag {
  padding: 2px var(--s-2) 1px;
  font-size: var(--fs-xs);
  color: var(--pane-ink);
  border: var(--rule) solid var(--pane-line);
  white-space: nowrap;
  background: #ffffff2e;
  line-height: 1.6;
  display: inline-block;
}

:-webkit-any(.pane--capability, .pane--work) .tag {
  background: #ffffff0f;
}

:is(.pane--capability, .pane--work) .tag {
  background: #ffffff0f;
}

.ledger {
  border-top: var(--rule) solid var(--pane-line);
}

.ledger li {
  gap: var(--s-1) var(--s-5);
  padding-block: var(--s-5);
  border-bottom: var(--rule) solid var(--pane-line);
  grid-template-columns: minmax(7.5rem, .32fr) 1fr;
  display: grid;
}

.ledger__when {
  font-size: var(--fs-sm);
  color: var(--pane-ink-2);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.ledger__what {
  font-size: var(--fs-base);
  line-height: 1.4;
}

.ledger__what small {
  font-size: var(--fs-sm);
  margin-top: 2px;
  display: block;
}

@media (max-width: 480px) {
  .ledger li {
    grid-template-columns: 1fr;
  }
}

.field {
  align-content: start;
  gap: var(--s-2);
  max-width: 32rem;
  display: grid;
}

.field__label {
  font-size: var(--fs-sm);
  font-weight: 500;
}

.field__hint {
  font-size: var(--fs-sm);
  color: var(--pane-ink-2);
}

.input {
  width: 100%;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  color: var(--on-clear);
  border: 2px solid var(--bar);
  transition: background-color var(--dur-light) var(--ease-light);
  background: #ffffffb3;
  border-radius: 0;
}

.input::placeholder {
  color: var(--bone-600);
  opacity: 1;
}

.input:hover {
  background: #fff;
}

.input.is-focus {
  outline: 3px solid var(--focus, var(--glass-capability));
  outline-offset: 2px;
  background: #fff;
}

.input:focus-visible {
  outline: 3px solid var(--focus, var(--glass-capability));
  outline-offset: 2px;
  background: #fff;
}

.input:disabled {
  background: var(--glass-frost);
  color: var(--on-frost);
  border-color: var(--bone-400);
  cursor: not-allowed;
}

.field--error .input {
  border-color: var(--error);
}

.field--error .field__hint {
  color: var(--error);
}

textarea.input {
  resize: vertical;
  min-height: 8rem;
  line-height: var(--lh-body);
}

.form {
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  min-width: 0;
  max-width: 44rem;
  display: grid;
}

.form .field {
  max-width: none;
}

.form .field--wide, .form__foot {
  grid-column: 1 / -1;
}

.form__foot {
  align-items: center;
  gap: var(--s-3) var(--s-5);
  flex-wrap: wrap;
  display: flex;
}

.form__status {
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-md);
  display: none;
}

.form.is-sent .field, .form.is-sent .form__foot .btn {
  display: none;
}

.form.is-sent .form__status--sent, .form.is-error .form__status--error {
  display: flex;
}

.form.is-sending .btn {
  cursor: progress;
  filter: saturate(.6);
}

.pane--action .input {
  background: var(--bone-50);
}

.pane--action .btn--primary {
  --btn-bg: var(--bar);
  --btn-ink: var(--bone-50);
  --focus: var(--bar);
}

.pane--calm {
  padding: var(--pad-calm) var(--pad-roomy);
  --sheen-o: .2;
}

.pane--calm p {
  max-width: 30ch;
  font-size: var(--fs-statement);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

.pane--calm p .ink-2 {
  display: block;
}

@media (max-width: 600px) {
  .pane--calm p {
    font-size: var(--fs-2xl);
  }
}

.more summary {
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  cursor: pointer;
  padding-block: var(--s-2);
  font-weight: 500;
  list-style: none;
  display: inline-flex;
}

.more summary::-webkit-details-marker {
  display: none;
}

.more summary .icon {
  transition: transform var(--dur-quick) var(--ease-light);
}

.more[open] summary .icon {
  transform: rotate(180deg);
}

.more summary:hover {
  text-underline-offset: .24em;
  text-decoration: underline;
}

.more > :not(summary) {
  margin-top: var(--s-4);
}

.pane--footer {
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3) var(--s-6);
  padding-block: var(--s-5);
  padding-inline: var(--pad);
  font-size: var(--fs-sm);
  flex-wrap: wrap;
  display: flex;
}

.pane--footer ul {
  gap: var(--s-2) var(--s-5);
  flex-wrap: wrap;
  display: flex;
}

@media (prefers-reduced-motion: reduce) {
  .lightpass .pane:after {
    animation: none;
  }

  .more summary .icon {
    transition: none;
  }

  .pane, .pane:after, .btn, .input {
    transition-duration: 1ms;
  }

  .pane :where(.ink-2, small) {
    transition-duration: 1ms;
  }
}

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

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

.skip {
  z-index: 1;
  padding: var(--s-2) var(--s-4);
  background: var(--glass-clear);
  color: var(--on-clear);
  position: absolute;
  left: -9999px;
}

.skip:focus-visible {
  left: var(--s-4);
  top: var(--s-4);
}

.wall > main {
  gap: var(--section-gap);
  min-width: 0;
  display: grid;
}

a.mark {
  text-decoration: none;
}

@media (max-width: 600px) {
  .pane--nav {
    position: relative;
  }

  .wordmark {
    align-items: center;
    max-width: calc(100% - 7.5rem);
    min-height: 44px;
    display: flex;
  }

  .wordmark span {
    display: none;
  }

  .nav-links li:has(.btn) {
    top: var(--s-3);
    right: var(--pad);
    position: absolute;
  }

  .nav-links .btn {
    width: auto;
    padding-inline: var(--s-3);
    font-size: var(--fs-sm);
  }
}