/* Tesel site. Plain CSS, no build step, no third-party requests (ADR-0017).
   The design: a night map and paper. Two surfaces (ink and paper) alternate down the page; the
   photograph and the screenshots of the app are the loud elements, the rest is type set with care.
   Signal lime is kept for the one action on each screen and for what marks this device; on paper
   it takes its deep shade, since lime alone does not stand out on a light background. The brand
   colours come from brand/colors.json, like the app's (a test keeps them in step). */

@font-face {
  font-family: Archivo;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('fonts/archivo-latin-standard-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Archivo;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('fonts/archivo-latin-ext-standard-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  /* Ink: the night map. Paper: where the reading happens. */
  --ink: #10202c;
  --ink-deep: #0a161f;
  --ink-raised: #172b39;
  --ink-text: #e6ebe8;
  --ink-muted: #93a6ad;
  --contour: #2a4654;
  --contour-strong: #3b6072;
  --paper: #e8ece9;
  --paper-deep: #dde3df;
  --paper-text: #15232d;
  --paper-muted: #4f6069;
  --rule: #c2ccc7;
  --signal: #c8f04a; /* the one action on each screen, with ink on it */
  --signal-hover: #b4dc30;
  --signal-deep: #4d6e00; /* the same, as text and lines on paper */
  --measure: 62ch;
  font-family:
    Archivo,
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
  font-weight: 400;
  line-height: 1.55;
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--paper-text);
  background: var(--paper);
}

a {
  color: inherit;
}

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

p {
  margin: 0 0 1em;
  max-width: var(--measure);
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 650;
  font-stretch: 112%;
  letter-spacing: -0.025em;
  line-height: 1.06;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
  max-width: 22ch;
}

h3 {
  font-size: 1.12rem;
  font-stretch: 106%;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.wrap {
  width: min(72rem, 100% - 2.5rem);
  margin: 0 auto;
}

:focus-visible {
  outline: 3px solid var(--signal-deep);
  outline-offset: 3px;
}

.ink :focus-visible,
.top :focus-visible,
.hero :focus-visible {
  outline-color: var(--signal);
}

/* A short label above a heading. */
.eyebrow {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  font-stretch: 115%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal-deep);
}

.ink .eyebrow,
.hero .eyebrow {
  color: var(--signal);
}

/* Surfaces */

.ink {
  color: var(--ink-text);
  background: var(--ink);
}

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

/* Top bar: the brand on the left; the guide, the app and the language on the right. */

.top {
  position: sticky;
  z-index: 10;
  top: 0;
  background: var(--ink);
  color: var(--ink-text);
  border-bottom: 1px solid rgb(255 255 255 / 6%);
}

.top .wrap {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  min-height: 4rem;
}

.brand {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  margin-right: auto;
}

.brand img {
  display: block;
  height: 1.6rem;
  width: auto;
}

.top nav {
  display: flex;
  gap: 1.75rem;
  align-items: center;
}

.top nav > a:not(.button) {
  font-size: 0.95rem;
  color: var(--ink-muted);
  text-decoration: none;
}

.top nav > a:not(.button):hover,
.top nav > a[aria-current='page'] {
  color: var(--ink-text);
}

.top .button {
  white-space: nowrap;
}

/* The language switch: both languages, the current one lit. */
.lang {
  display: inline-flex;
  padding: 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  font-stretch: 110%;
  letter-spacing: 0.06em;
  border: 1px solid var(--contour);
  border-radius: 0.5rem;
}

.lang a,
.lang span {
  padding: 0.2rem 0.5rem;
  color: var(--ink-muted);
  text-decoration: none;
  border-radius: 0.3rem;
}

.lang a:hover {
  color: var(--ink-text);
}

.lang span {
  color: var(--ink-text);
  background: var(--ink-raised);
}

@media (max-width: 40rem) {
  .top .wrap {
    gap: 0.75rem;
  }

  .top nav {
    gap: 0.9rem;
  }

  .brand img {
    height: 1.35rem;
  }

  .top .optional {
    display: none;
  }
}

/* Buttons: one filled action per screen, the rest quiet */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.6rem 1.4rem;
  font-weight: 600;
  font-stretch: 106%;
  color: var(--ink);
  text-decoration: none;
  background: var(--signal);
  border: 1.5px solid transparent;
  border-radius: 0.6rem;
}

.button:hover {
  background: var(--signal-hover);
}

.button.quiet {
  color: inherit;
  background: transparent;
  border-color: currentcolor;
}

.button.quiet:hover {
  background: rgb(255 255 255 / 8%);
}

.paper .button.quiet:hover,
.prose .button.quiet:hover {
  background: rgb(0 0 0 / 5%);
}

.button.small {
  min-height: 2.4rem;
  padding: 0.3rem 1rem;
  font-size: 0.92rem;
}

/* Hero: one photograph, full bleed, with the words over the sky */

.hero {
  position: relative;
  display: grid;
  min-height: min(92vh, 56rem);
  overflow: hidden;
  color: var(--ink-text);
  background: var(--ink);
  isolation: isolate;
}

.hero picture,
.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero img {
  object-fit: cover;
  object-position: 70% 40%;
}

/* Darkens the left, where the words are, and dissolves the bottom into the page's ink. */
.hero::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: '';
  background:
    linear-gradient(
      180deg,
      rgb(16 32 44 / 30%) 0%,
      rgb(16 32 44 / 0%) 40%,
      rgb(16 32 44 / 0%) 82%,
      var(--ink) 100%
    ),
    linear-gradient(
      90deg,
      var(--ink) 0%,
      rgb(16 32 44 / 88%) 30%,
      rgb(16 32 44 / 30%) 55%,
      rgb(16 32 44 / 0%) 70%
    );
}

.hero .wrap {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 5rem 0 7rem;
}

.hero h1 {
  font-size: clamp(2.5rem, 1.3rem + 4.6vw, 4.6rem);
  max-width: 14ch;
  text-shadow: 0 2px 24px rgb(0 0 0 / 35%);
}

.hero .lead {
  margin: 1.5rem 0 2.2rem;
  font-size: 1.2rem;
  max-width: 38ch;
  color: #dfe6e3;
  text-shadow: 0 1px 12px rgb(0 0 0 / 45%);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.hero .fine {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 2.2rem 0 0;
  padding: 0;
  font-size: 0.92rem;
  list-style: none;
  color: #c2cfd0;
  text-shadow: 0 1px 8px rgb(0 0 0 / 50%);
}

.hero .fine li::before {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.55rem;
  content: '';
  vertical-align: 0.12em;
  background: var(--signal);
  transform: rotate(45deg);
}

/* The photographer's credit: there, but out of the way. */
.hero .credit {
  position: absolute;
  right: 1rem;
  bottom: 0.6rem;
  z-index: 2;
  margin: 0;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: rgb(230 235 232 / 28%);
}

@media (max-width: 46rem) {
  .hero {
    min-height: 0;
  }

  .hero .wrap {
    align-self: start;
    padding: 2.5rem 0 22rem;
  }

  .hero img {
    object-position: 50% 100%;
  }

  .hero::after {
    background: linear-gradient(
      180deg,
      rgb(16 32 44 / 88%) 0%,
      rgb(16 32 44 / 70%) 45%,
      rgb(16 32 44 / 0%) 68%,
      rgb(16 32 44 / 0%) 88%,
      var(--ink) 100%
    );
  }
}

/* Sections */

section {
  padding: 6rem 0;
}

section.paper + section.paper {
  padding-top: 0;
}

section.paper + section.paper > .wrap {
  padding-top: 5rem;
  border-top: 1px solid var(--rule);
}

.section-head {
  margin-bottom: 3rem;
}

.section-head p:not(.eyebrow) {
  margin-top: 1.1rem;
  font-size: 1.15rem;
  color: var(--paper-muted);
  max-width: 52ch;
}

.ink .section-head p:not(.eyebrow) {
  color: var(--ink-muted);
}

/* Capabilities: the app itself, annotated, and what each number means. */

.shot {
  position: relative;
  margin: 0 0 3.5rem;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.9rem;
  box-shadow:
    0 0 0 1px rgb(16 32 44 / 12%),
    0 30px 60px -20px rgb(16 32 44 / 45%),
    0 12px 24px -12px rgb(16 32 44 / 30%);
}

.pin {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--signal);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 3px 10px rgb(0 0 0 / 35%);
  transform: translate(-50%, -50%);
}

/* On a phone the page shows the app as it looks on a phone, without the numbers. */
@media (max-width: 40rem) {
  .pin {
    display: none;
  }

  .shot img {
    width: min(100%, 17rem);
    margin: 0 auto;
    border-radius: 1.6rem;
    box-shadow:
      0 0 0 0.4rem #050c12,
      0 30px 60px -20px rgb(16 32 44 / 55%);
  }
}

.capabilities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: capability;
}

.capabilities li {
  position: relative;
  padding-left: 2.8rem;
  counter-increment: capability;
}

.capabilities li::before {
  position: absolute;
  top: -0.1rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  font-size: 0.85rem;
  font-weight: 700;
  content: counter(capability);
  color: var(--ink);
  background: var(--signal);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
}

.capabilities h3 {
  margin-bottom: 0.4rem;
}

.capabilities p {
  margin: 0;
  color: var(--paper-muted);
}

@media (max-width: 60rem) {
  .capabilities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 36rem) {
  .capabilities {
    grid-template-columns: 1fr;
  }
}

/* Connectivity: how the data travels in each situation */

.routes {
  display: grid;
  border-top: 1px solid var(--contour);
}

.route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 3rem;
  align-items: center;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--contour);
}

.route h3 {
  margin-bottom: 0.5rem;
  font-size: 1.35rem;
}

.route p {
  margin: 0;
  color: var(--ink-muted);
}

.path {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.9rem;
}

.path .node {
  padding: 0.4rem 0.8rem;
  color: var(--ink-text);
  border: 1px solid var(--contour-strong);
  border-radius: 999px;
  white-space: nowrap;
}

.path .node.hub {
  font-weight: 600;
  color: #fff;
  background: var(--ink-raised);
  border-color: var(--signal);
}

.path .line {
  height: 0;
  border-top: 2px solid var(--ink-text);
}

.path .line.air {
  border-top: 3px dotted var(--signal);
}

.path .line.later {
  border-top: 2px dashed var(--contour-strong);
}

/* The same diagram, on paper (in the guide). */
.prose .path .node {
  color: var(--paper-text);
  background: #fff;
  border-color: var(--rule);
}

.prose .path .node.hub {
  color: var(--paper-text);
  background: #fff;
  border-color: var(--signal-deep);
}

.prose .path .line {
  border-top-color: var(--paper-text);
}

.prose .path .line.air {
  border-top-color: var(--signal-deep);
}

.prose .path .line.later {
  border-top-color: var(--rule);
}

@media (max-width: 50rem) {
  .route {
    grid-template-columns: 1fr;
    gap: 1.3rem;
  }

  .path {
    font-size: 0.8rem;
    gap: 0.4rem;
  }

  .path .node {
    padding: 0.3rem 0.6rem;
  }
}

/* Audiences: who it is for, in a row */

.audiences {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.audiences li {
  padding-top: 1rem;
  border-top: 2px solid var(--paper-text);
}

.audiences h3 {
  margin-bottom: 0.4rem;
  font-size: 1.02rem;
}

.audiences p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--paper-muted);
}

@media (max-width: 60rem) {
  .audiences {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 34rem) {
  .audiences {
    grid-template-columns: 1fr;
  }
}

/* Steps: an actual sequence, so it is numbered */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 3rem;
  margin: 0 0 2.8rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
}

.steps li::before {
  display: block;
  margin-bottom: 0.9rem;
  font-size: 2.6rem;
  font-weight: 250;
  font-stretch: 120%;
  line-height: 1;
  content: counter(step, decimal-leading-zero);
  color: var(--signal-deep);
}

.steps h3 {
  margin-bottom: 0.4rem;
}

.steps p {
  margin: 0;
  color: var(--paper-muted);
}

@media (max-width: 50rem) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* Get: two plain columns */

.get {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 4rem;
}

.get h2 {
  margin-bottom: 1.1rem;
}

.get p,
.get ul {
  color: var(--ink-muted);
}

.get ul {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
}

.get li + li {
  margin-top: 0.5rem;
}

.get .note {
  margin-top: 2rem;
  padding-top: 1.2rem;
  font-size: 0.95rem;
  border-top: 1px solid var(--contour);
}

@media (max-width: 50rem) {
  .get {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Privacy: four plain statements */

.principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.principles li {
  padding-top: 1rem;
  border-top: 2px solid var(--paper-text);
}

.principles h3 {
  margin-bottom: 0.4rem;
}

.principles p {
  margin: 0;
  color: var(--paper-muted);
}

.principles + .aside {
  margin: 2.5rem 0 0;
  color: var(--paper-muted);
}

@media (max-width: 60rem) {
  .principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 34rem) {
  .principles {
    grid-template-columns: 1fr;
  }
}

/* Questions */

details {
  border-top: 1px solid var(--rule);
}

details:last-of-type {
  border-bottom: 1px solid var(--rule);
}

summary {
  position: relative;
  padding: 1.1rem 2rem 1.1rem 0;
  font-size: 1.08rem;
  font-weight: 560;
  cursor: pointer;
  list-style: none;
}

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

summary::after {
  position: absolute;
  top: 1.1rem;
  right: 0.2rem;
  content: '+';
  font-weight: 300;
  color: var(--paper-muted);
}

details[open] summary::after {
  content: '–';
}

details p {
  margin: 0 0 1.2rem;
  color: var(--paper-muted);
}

.questions {
  max-width: 46rem;
}

/* Footer */

footer {
  padding: 3rem 0;
  font-size: 0.95rem;
  color: var(--ink-muted);
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  align-items: center;
  justify-content: space-between;
}

footer img {
  display: block;
  height: 1.3rem;
  width: auto;
}

footer a {
  color: var(--ink-text);
}

footer p,
footer.ink p {
  margin: 0;
  color: var(--ink-muted);
}

footer nav {
  display: flex;
  gap: 1.5rem;
}

/* Guide: an ink header with the app, a map of the contents, then long-form reading on paper */

.guide-head {
  padding: 4.5rem 0 0;
  overflow: hidden;
}

.guide-head .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: end;
}

.guide-head .text {
  align-self: center;
  padding-bottom: 4rem;
}

.guide-head h1 {
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.8rem);
  max-width: 14ch;
}

.guide-head .lead {
  margin: 1.3rem 0 0;
  font-size: 1.2rem;
  max-width: 40ch;
  color: var(--ink-muted);
}

/* A phone, cut by the bottom of the band. */
.phone {
  justify-self: center;
  width: min(19rem, 100%);
  margin: 0;
  padding: 0.55rem 0.55rem 0;
  background: #050c12;
  border-radius: 2.4rem 2.4rem 0 0;
  box-shadow: 0 0 0 1px var(--contour);
}

.phone img {
  display: block;
  width: 100%;
  height: 26rem;
  object-fit: cover;
  object-position: top;
  border-radius: 1.9rem 1.9rem 0 0;
}

@media (max-width: 46rem) {
  .guide-head {
    padding-top: 3rem;
  }

  .guide-head .wrap {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .guide-head .text {
    padding-bottom: 2.5rem;
  }

  .phone {
    width: 15rem;
  }

  .phone img {
    height: 17rem;
  }
}

.prose {
  max-width: 46rem;
  padding: 3.5rem 0 5rem;
  counter-reset: chapter;
}

.prose h2 {
  margin: 4rem 0 1.1rem;
  padding-top: 2rem;
  font-size: 1.8rem;
  max-width: none;
  border-top: 1px solid var(--rule);
  counter-increment: chapter;
}

.prose h2::before {
  display: block;
  margin-bottom: 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  content: counter(chapter, decimal-leading-zero);
  color: var(--signal-deep);
}

.prose h3 {
  margin: 2rem 0 0.5rem;
}

.prose li + li {
  margin-top: 0.45rem;
}

/* Contents: a grid of numbered cards. */
.toc {
  margin: 0;
}

.toc .label {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-muted);
}

.toc ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.toc li {
  margin: 0;
  counter-increment: toc;
}

.toc li + li {
  margin: 0;
}

.toc a {
  display: block;
  height: 100%;
  padding: 0.85rem 1rem 0.9rem;
  font-weight: 560;
  line-height: 1.3;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 0.6rem;
}

.toc a::before {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  content: counter(toc, decimal-leading-zero);
  color: var(--signal-deep);
}

.toc a:hover {
  border-color: var(--paper-text);
}

@media (max-width: 40rem) {
  .toc ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.box {
  margin: 1.6rem 0;
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--signal-deep);
  background: var(--paper-deep);
  border-radius: 0 0.6rem 0.6rem 0;
}

.box p {
  margin: 0.3rem 0 0;
}

.box p:first-child {
  margin-top: 0;
}

/* Figures in the guide: screenshots and diagrams, with a caption under them. */
.figure {
  margin: 2rem 0;
}

.figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.7rem;
  box-shadow:
    0 0 0 1px rgb(16 32 44 / 12%),
    0 18px 40px -18px rgb(16 32 44 / 40%);
}

.figure figcaption {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: var(--paper-muted);
}

.diagram {
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 0.8rem;
}

.diagram svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: inherit;
}

.diagram .routes {
  border-top: none;
}

.diagram .route {
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
}

.diagram .route:last-child {
  border-bottom: none;
}

.diagram .route h3 {
  margin: 0;
  font-size: 0.95rem;
}

@media (max-width: 40rem) {
  .diagram {
    padding: 1rem;
  }

  .diagram .route {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
}

.prose details {
  border: none;
  border-top: 1px solid var(--rule);
}

.prose details:last-of-type {
  border-bottom: 1px solid var(--rule);
}

[id] {
  scroll-margin-top: 4.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}