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

:root {
  --navy: #0B1927;
  --deep: #0E3244;
  --ivory: #F7F7F3;
  --slate: #33434F;
  --rule: rgb(11 25 39 / .2);
  --gutter: clamp(1.25rem, 3.4vw, 3.5rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--deep);
  color: var(--navy);
  font: 400 1.0625rem/1.5 "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, p { margin: 0; }
img, svg { display: block; }
::selection { background: var(--navy); color: var(--ivory); }

.sheet { display: grid; grid-template-rows: auto minmax(16rem, 1fr); min-height: 100svh; }

/* Above the waterline */
.shore {
  display: grid;
  gap: clamp(1.75rem, 4svh, 3rem);
  padding: 1.25rem var(--gutter) 1.25rem;
  background: var(--ivory);
}
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 500; letter-spacing: -.012em; }
.mark { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2.2; }

h1 {
  font-size: clamp(2.1rem, min(10.8vw, 19svh), 11rem);
  font-weight: 430;
  line-height: .98;
  letter-spacing: -.04em;
}
.translation { margin-top: .75em; font-size: clamp(1.125rem, 2.1vw, 1.875rem); letter-spacing: -.016em; color: var(--slate); }

.status { display: grid; gap: .1rem 2.5rem; padding-top: .9rem; border-top: 1px solid var(--rule); font-weight: 500; }
.status [lang] { font-weight: 400; color: var(--slate); }
.legal { margin-top: .75rem; font-size: .875rem; font-weight: 400; color: var(--slate); }

/* Below it */
.sea { position: relative; overflow: hidden; background: var(--deep); }
.sea img, .school { position: absolute; inset: 0; width: 100%; height: 100%; }
.sea img { object-fit: cover; object-position: top; }

@media (min-width: 760px) {
  .shore { padding-block: 1.75rem 1.25rem; }
  h1 { font-size: clamp(4rem, min(8.6vw, 15.5svh), 14rem); }
  .brand { font-size: clamp(1.0625rem, .85vw, 1.375rem); }
  .mark { width: 1.4em; height: 1.4em; }
  .status { font-size: clamp(1.1875rem, .95vw, 1.5rem); }
}

@media (min-width: 1000px) {
  .status { grid-template-columns: auto auto 1fr; align-items: baseline; }
  .legal { margin-top: 0; text-align: right; }
}

/* The one movement on the page: the school swims in once, then holds. */
@media (prefers-reduced-motion: no-preference) {
  .school { animation: swim 1.8s cubic-bezier(.16, .8, .24, 1) both; }
}
@keyframes swim { from { transform: translateX(5%); } }