/* The brand system (blueprint/spec/brand/02-brand-system.md) for the
   server's pages. The tokens are brand/tokens.css; the components are
   the ones the system names. The page__ and rows__ classes are the ones
   the framework's pages use too (arp's templates/browser/). The fonts
   sit beside this file in static/. */

/* Relative to this stylesheet's own versioned URL, so the browser
   asks for them under it and revalidates them by their ETag. */
@font-face {
  font-family: "Archivo";
  font-weight: 100 900;
  font-display: swap;
  src: url("archivo.woff2") format("woff2");
}

@font-face {
  font-family: "Space Mono";
  font-weight: 400;
  font-display: swap;
  src: url("space-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "Space Mono";
  font-weight: 700;
  font-display: swap;
  src: url("space-mono-700.woff2") format("woff2");
}

:root {
  /* colour */
  --wit: #ffffff;
  --inkt: #111111;
  --kobalt: #2b3aa0;
  --rood: #e4141b;
  --geel: #f5c518;
  --scherm: #cfd65a;
  --glow: #4a7dff;
  --text-muted: #444444;
  --label-muted: #555555;
  /* type */
  --font-sans: "Archivo", Helvetica, Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --h1: 38px;
  --h2: 22px;
  --lead: 18px;
  --body: 14px;
  --small: 13px;
  --label: 12px;
  /* shape */
  --line: 2px;
  --r-card: 16px;
  --r-card-sm: 12px;
  --r-pill: 999px;
  --shadow-hard: 4px 4px 0 var(--inkt);
  --band: 10px;
  /* space */
  --page-max: 1200px;
  --page-pad-x: 32px;
  --page-pad-top: 40px;
  --page-pad-bottom: 96px;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--wit);
  color: var(--inkt);
  font: 400 var(--body) / 1.55 var(--font-sans);
}

a {
  color: var(--kobalt);
}

:focus-visible {
  outline: var(--line) solid var(--kobalt);
  outline-offset: 2px;
}

/* Navigation: the lockup on the left, a 2 px rule below. */
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 22px var(--page-pad-x);
  border-bottom: var(--line) solid var(--inkt);
}

/* The ping at 36 px beside the wordmark at 20 px, its integer scale. */
.lockup {
  display: block;
  line-height: 0;
}

.lockup img {
  display: block;
  width: 126px;
  height: 36px;
}

.nav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  font-weight: 500;
  font-size: var(--small);
}

.nav__links a:not(.pill) {
  color: var(--inkt);
  text-decoration: none;
}

/* The page frame. */
.shell {
  flex: 1;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--page-pad-top) var(--page-pad-x) var(--page-pad-bottom);
}

/* Type. */
.headline,
.page__title {
  margin: 0;
  font-weight: 700;
  font-size: var(--h1);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.headline__turn {
  display: block;
  color: var(--kobalt);
}

.lead {
  margin: 0;
  font-size: var(--lead);
  line-height: 1.5;
  color: var(--inkt);
}

.label {
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--label-muted);
}

.fine {
  margin: 0;
  color: var(--text-muted);
}

/* Pills and buttons: a 2 px Inkt outline, fully round. Hover lifts the
   pill onto its hard shadow; pressed, it sits back down. */
.pill,
.page__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 7px 18px;
  border: var(--line) solid var(--inkt);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--inkt);
  font: 500 var(--small) / 1.2 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform 80ms, box-shadow 80ms;
}

.pill:hover,
.page__button:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard);
}

.pill:active,
.page__button:active {
  transform: none;
  box-shadow: none;
}

.pill--primary,
.page__button {
  background: var(--inkt);
  color: var(--wit);
  font-weight: 600;
}

.pill--secondary {
  background: var(--kobalt);
  color: var(--wit);
  font-weight: 600;
}

/* The big one: a sign-in or the one thing a page is for. */
.pill--large {
  width: 100%;
  min-height: 60px;
  padding: 14px 28px;
  font-size: var(--lead);
}

.pill__icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: currentColor;
}

/* Stickers: a brand colour, tilted, never more than two on a surface. */
.sticker {
  display: inline-block;
  padding: 6px 14px;
  border: var(--line) solid var(--inkt);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--small);
  letter-spacing: 0.04em;
  transform: rotate(var(--tilt, -2deg));
}

.sticker--geel {
  background: var(--geel);
  color: var(--inkt);
}

.sticker--rood {
  background: var(--rood);
  color: var(--wit);
}

.sticker--kobalt {
  background: var(--kobalt);
  color: var(--wit);
}

/* Cards: white or a brand colour, outlined. Only a clickable one
   carries the hard shadow. */
.card {
  border: var(--line) solid var(--inkt);
  border-radius: var(--r-card);
  background: var(--wit);
  overflow: hidden;
}

/* The stripe band: Rood, Geel, Kobalt and Scherm under an Inkt rule. */
.band {
  height: calc(var(--band) + var(--line));
  border-top: var(--line) solid var(--inkt);
  background: linear-gradient(
    to right,
    var(--rood) 0 25%,
    var(--geel) 25% 50%,
    var(--kobalt) 50% 75%,
    var(--scherm) 75% 100%
  );
}

/* The hero: text on the left, the device on its ray burst on the
   right, one column under 720 px. */
.hero {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 2fr);
}

.hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 40px 32px;
}

.hero__panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  border-left: var(--line) solid var(--inkt);
  background-color: var(--inkt);
  background-image: repeating-conic-gradient(
    from 0deg at 50% 50%,
    var(--rood) 0 0.6deg,
    transparent 0.6deg 9deg,
    var(--geel) 9deg 9.6deg,
    transparent 9.6deg 18deg
  );
}

/* The device at ×8 of its 22 × 38 grid. */
.hero__device {
  width: 176px;
  height: 304px;
  filter: drop-shadow(0 0 2px var(--wit)) drop-shadow(0 0 14px var(--glow));
}

.hero__panel .sticker {
  --tilt: 6deg;
  position: absolute;
  top: 20px;
  right: 20px;
}

.hero__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 8px 0 0;
}

@media (max-width: 720px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero__panel {
    border-left: 0;
    border-top: var(--line) solid var(--inkt);
  }
}

/* The single-column pages: the account, the legal pages and the
   framework's own. */
.page {
  max-width: 520px;
}

.page__title {
  margin: 0 0 12px;
}

.page__lede {
  margin: 0 0 24px;
  font-size: var(--lead);
  line-height: 1.5;
}

.page p {
  color: var(--text-muted);
}

.page p.page__lede,
.page p.page__flash {
  color: var(--inkt);
}

.page__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 24px;
}

.page__button {
  align-self: flex-start;
}

.page__button--quiet {
  background: transparent;
  color: var(--inkt);
  font-weight: 500;
}

.page__flash {
  display: inline-block;
  padding: 6px 14px;
  border: var(--line) solid var(--inkt);
  border-radius: var(--r-pill);
  background: var(--geel);
  color: var(--inkt);
  font-weight: 600;
  font-size: var(--small);
}

/* A section header: the title, then a 2 px rule. */
.page__heading,
.legal__heading {
  margin: 40px 0 20px;
  padding-bottom: 10px;
  border-bottom: var(--line) solid var(--inkt);
  font-weight: 700;
  font-size: var(--h2);
  letter-spacing: -0.02em;
}

.rows {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.rows__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--inkt);
}

.rows__name {
  font-weight: 600;
}

.rows__detail {
  font-family: var(--font-mono);
  font-size: var(--label);
  color: var(--label-muted);
}

.rows__action {
  margin-left: auto;
}

/* The foot of every page: the links, then the band. */
.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  padding: 16px var(--page-pad-x);
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.foot a {
  color: var(--label-muted);
}

.foot__links,
.foot__maker {
  font-size: var(--small);
  color: var(--label-muted);
}

@media (max-width: 720px) {
  :root {
    --page-pad-x: 16px;
    --page-pad-top: 24px;
    --page-pad-bottom: 56px;
  }
}

/* A legal page is a text to be read: body text at the brand's
   measure, numbered section headings. */
.legal {
  max-width: 520px;
}

.legal .label {
  margin: 0 0 12px;
}

.legal p,
.legal li {
  color: var(--text-muted);
  font-size: var(--body);
  line-height: 1.55;
}

.legal ul {
  padding-left: 20px;
}

.legal li + li {
  margin-top: 6px;
}

.legal__heading {
  margin: 36px 0 12px;
  padding-bottom: 8px;
}