@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("fonts/archivo/archivo-latin-wdth-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Chivo Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/chivo-mono/chivo-mono-latin-wght-normal.woff2") format("woff2");
}

/* the teaser's world: graphit ground with its 40px night grid, mist strokes, one orange square */

:root {
  color-scheme: dark;
  --graphit: #1e2226;
  --block: #262b30;
  --night: #2a2f34;
  --weiss: #f6f6f3;
  --mist: #a0a7ae;
  --stahl: #5c636b;
  --orange: #f05a0a;
  --rule: rgb(246 246 243 / 0.14);
  --rule-2: rgb(246 246 243 / 0.32);
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Chivo Mono", ui-monospace, Menlo, Consolas, monospace;
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: 24px;
  --sec: 160px;
  --head-gap: 64px;
  --pw: 320px;
  --pgap: 160px;
}

@media (max-width: 1279px) {
  :root {
    --pw: 300px;
    --pgap: 128px;
  }
}

@media (max-width: 1023px) {
  :root {
    --sec: 120px;
    --head-gap: 56px;
    --pw: 280px;
    --pgap: 88px;
  }
}

@media (max-width: 719px) {
  :root {
    --sec: 88px;
    --head-gap: 48px;
    --pw: min(80vw, 320px);
  }
}

@media (max-width: 479px) {
  :root {
    --gutter: 16px;
  }
}

@media (min-width: 1600px) {
  :root {
    --pw: 336px;
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--graphit);
  -webkit-text-size-adjust: 100%;
}

html.motion {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--graphit);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M.5 0V40M0 .5H40' stroke='%232a2f34' fill='none'/%3E%3C/svg%3E");
  background-position: 50% 0;
  color: var(--weiss);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x: clip;
}

img,
svg {
  display: block;
}

p,
h1,
h2,
ul,
figure {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

a,
button,
input {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--weiss);
  outline-offset: 3px;
}

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

.art * {
  vector-effect: non-scaling-stroke;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.label {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mist);
}

/* headings: words arrive condensed and open to their set width, like the teaser's type */

.head {
  font-size: clamp(34px, calc(24px + 2.778vw), 64px);
  font-weight: 560;
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 18em;
}

.head .ln {
  display: block;
  text-wrap: balance;
}

.head .w {
  display: inline-block;
  white-space: nowrap;
}

.head .w-in {
  display: inline-block;
}

.motion .head .w-in {
  display: inline-block;
  font-stretch: 62%;
  visibility: hidden;
  transition:
    font-stretch 520ms var(--out) calc(var(--i) * 70ms),
    visibility 0s linear calc(var(--i) * 70ms);
}

.motion .head.in .w-in {
  font-stretch: 100%;
  visibility: visible;
}

.motion .head.measure .w-in {
  font-stretch: 100%;
  transition: none;
}

/* hero: the teaser edge to edge; without it, its last frame drawn here */

.hero {
  position: relative;
  height: 100svh;
  min-height: 420px;
  overflow: hidden;
}

.hero iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--graphit);
}

/* the lockup sits on the content column's left edge, endorsement under the wordmark */
/* it lies over the teaser iframe, so clicks must pass through to the teaser's own controls */
.endframe {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-bottom: 96px;
  pointer-events: none;
}

.end-stage {
  --ww: min(100%, clamp(240px, calc(22vw + 150px), 600px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  font-weight: inherit;
}

.end-werk {
  width: var(--ww);
  height: auto;
  /* the wordmark's art starts 12 units in from its box */
  margin-left: calc(var(--ww) * -12 / 2622);
}

.end-von {
  display: flex;
  align-items: flex-end;
  gap: 0.6em;
  margin-top: calc(var(--ww) * 0.05);
  font-family: var(--mono);
  font-size: clamp(13px, calc(0.3vw + 11px), 17px);
  line-height: 1;
  color: var(--mist);
}

.end-von img {
  width: auto;
  height: clamp(18px, calc(0.6vw + 15px), 28px);
  margin-bottom: 0.5px;
}

.end-line {
  margin-top: calc(var(--ww) * 0.12);
  font-size: clamp(24px, calc(2.2vw + 18px), 60px);
  font-weight: 560;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* kept in the layout (not clipped) so the arrow can be measured under it; the teaser draws it */
.has-teaser .end-stage {
  opacity: 0;
}

/* owner call: the way down is the one orange invitation on the hero, a big arrow drawn like the
   teaser's sound cue. main.js (moreArrow) sets its box and paths from the view and the lockup, the
   same numbers as the teaser's close (08-close.js), which draws it with its dot; here it draws
   itself on the same clock, then nudges */
.more {
  position: absolute;
  left: var(--left, calc(50% - 100px));
  top: var(--top, 60%);
  z-index: 2;
  display: block;
  width: 200px;
  height: calc(var(--h, 120px) + 12px);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--orange);
}

.more-text {
  display: inline-block;
  vertical-align: top;
  margin-top: 8px;
}

.more-arrow {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--orange);
  stroke-width: var(--lw, 2px);
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.more-arrow .shaft {
  stroke-dasharray: 1 1;
}

.more:hover,
.more:hover .more-arrow {
  color: var(--weiss);
  stroke: var(--weiss);
}

@keyframes more-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* the head is one mitred path: the left stroke grows out of the tip, then the right one */
@keyframes more-head {
  0% {
    stroke-dasharray: 0 1 0 2;
    animation-timing-function: cubic-bezier(0.7, 0, 0.08, 1);
  }
  37.5%,
  62.5% {
    stroke-dasharray: 0 0 1 2;
    animation-timing-function: cubic-bezier(0.7, 0, 0.08, 1);
  }
  100% {
    stroke-dasharray: 0 0 2 2;
  }
}

@keyframes more-type {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}

@keyframes more-nudge {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

/* the teaser's clock from its arrival: the label types at 90 characters a second (--n of them) as
   the shaft runs 0.44 s, each head stroke 0.12 s, 0.2 s apart, the nudge once its dot would have
   sunk in */
.motion .more-arrow .shaft {
  stroke-dashoffset: 1;
}

.motion .more-arrow .arms {
  stroke-dasharray: 0 1 0 2;
}

.motion .more-text {
  clip-path: inset(0 100% 0 0);
}

.motion .endframe.is-on + .more .more-text {
  animation: more-type calc(var(--n, 11) * 1000ms / 90) steps(var(--n, 11), jump-start) 970ms both;
}

.motion .endframe.is-on + .more .more-arrow .shaft {
  animation: more-draw 440ms cubic-bezier(0.7, 0, 0.08, 1) 970ms both;
}

.motion .endframe.is-on + .more .more-arrow .arms {
  animation: more-head 320ms linear 1410ms both;
}

.motion .endframe.is-on + .more .more-draw {
  animation: more-nudge 1.6s ease-in-out 1950ms infinite;
}

/* with the teaser the arrow is drawn by the teaser; this is only its hit area */
.has-teaser .more > * {
  visibility: hidden;
}

.has-teaser .more:not(.is-on) {
  display: none;
}

.replay,
.skip {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 12px;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mist);
  cursor: pointer;
}

.replay:hover,
.skip:hover {
  color: var(--weiss);
}

/* bottom left, mirroring the teaser's sound control (12px from the edges, a 32px row) */
.replay {
  left: 0;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
}

.replay[hidden] {
  display: none;
}

.replay-glyph {
  flex: none;
  width: 13px;
  height: 13px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5px;
}

.skip {
  left: calc(var(--gutter) - 12px);
  bottom: 12px;
}

/* first visit: the page holds still while the teaser plays */
html.locked,
html.locked body {
  overflow: hidden;
  overscroll-behavior: none;
}

.motion .end-stage > * {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 700ms var(--out),
    transform 700ms var(--out);
}

.motion .end-stage > .end-von {
  transition-delay: 120ms;
}

.motion .end-stage > .end-line {
  transition-delay: 240ms;
}

.motion .is-on .end-stage > * {
  opacity: 1;
  transform: none;
}

.motion .endframe:not(.is-on) + .more {
  pointer-events: none;
}

/* how it works: two phones drawn like the teaser's, the dot runs between them */

.how {
  padding-top: 80px;
}

.stage {
  position: relative;
  display: grid;
  grid-template-columns: var(--pw) var(--pw);
  justify-content: center;
  column-gap: var(--pgap);
}

.fig {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.phone {
  --u: calc(var(--pw) / 256);
  --msg: max(16px, calc(var(--u) * 16));
  --echo: max(15px, calc(var(--u) * 12.8));
  position: relative;
  width: var(--pw);
  aspect-ratio: 1 / 2;
  border: 1.5px solid var(--mist);
  border-radius: calc(var(--u) * 24);
  background: var(--graphit);
}

.slit {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * 16 - 1.5px);
  width: calc(var(--u) * 40);
  margin-left: calc(var(--u) * -20);
  border-top: 1.5px solid var(--mist);
}

.socket {
  position: absolute;
  top: calc(var(--u) * 48 - 1.5px);
  right: calc(var(--u) * 16 - 1.5px);
  width: calc(var(--u) * 9.6);
  height: calc(var(--u) * 9.6);
  transform: translate(0, -50%);
  border: 1.5px solid var(--mist);
}

.phone-head {
  position: absolute;
  left: calc(var(--u) * 16 - 1.5px);
  right: calc(var(--u) * 16 - 1.5px);
  top: calc(var(--u) * 40 - 1.5px);
  height: calc(var(--u) * 32);
  padding-bottom: calc(var(--u) * 16);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: max(12px, calc(var(--u) * 12));
  line-height: calc(var(--u) * 16);
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  color: var(--mist);
}

.screen {
  position: absolute;
  left: calc(var(--u) * 16 - 1.5px);
  right: calc(var(--u) * 16 - 1.5px);
  top: calc(var(--u) * 88 - 1.5px);
  bottom: calc(var(--u) * 24 - 1.5px);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
  overflow: hidden;
}

/* bottom-anchored like a chat: a new line slides up from under the edge, older ones leave the top */
.thread {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: calc(var(--u) * 8);
  min-height: 0;
  overflow: hidden;
}

.out,
.composer {
  font-size: var(--msg);
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.out {
  align-self: flex-end;
  max-width: 86%;
  padding: 0.32em 0.5em 0.38em;
  border: 1px solid var(--rule-2);
}

.werk,
.tag,
.done {
  font-family: var(--mono);
  line-height: 1.4;
  background: var(--block);
  border-left: 3px solid var(--weiss);
}

.werk {
  max-width: 92%;
  padding: 0.4em 0.6em 0.45em;
  font-size: var(--echo);
}

.werk b,
.tag b {
  font-weight: 700;
}

.typing {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.4em 0 0 calc(0.6em + 3px);
  font-family: var(--mono);
  font-size: var(--echo);
  line-height: 1.4;
  color: var(--mist);
}

.composer {
  flex: none;
  min-height: calc(var(--u) * 40);
  padding: 0.32em 0.5em;
  border: 1px solid var(--rule);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.caret {
  display: inline-block;
  width: 0.4em;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: var(--weiss);
}

.motion .phone .caret {
  animation: blink 1s steps(1) infinite;
}

.motion .phone.is-typing .caret {
  animation: none;
}

@keyframes blink {
  50% {
    visibility: hidden;
  }
}

.ch {
  visibility: hidden;
}

.ch.on {
  visibility: inherit;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.overlay .trace {
  fill: none;
  stroke: var(--weiss);
  stroke-width: 2px;
}

.overlay .ripple {
  fill: none;
  stroke: var(--weiss);
  stroke-width: 1.5px;
}

.overlay .dot {
  fill: var(--orange);
}

.how .head {
  margin-bottom: var(--head-gap);
}

@media (max-width: 719px) {
  .stage {
    grid-template-columns: var(--pw);
    row-gap: 96px;
  }
}

/* the plant: three record cards with the teaser's drawings */

.plant {
  padding-top: var(--sec);
}

.row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: var(--head-gap);
}

.card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  background: var(--block);
  border: 1px solid var(--rule);
}

.art {
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--stahl);
  stroke-width: 1.5px;
  transition: stroke 400ms var(--out);
}

.card.is-on .art {
  stroke: var(--weiss);
}

.card.is-done .art {
  stroke: var(--mist);
}

.art .sock {
  stroke: var(--mist);
}

.art .sock.is-filled {
  fill: var(--mist);
}

.art .drop {
  fill: var(--mist);
  stroke: none;
}

.tag {
  align-self: flex-start;
  padding: 0.4em 0.7em 0.45em;
  font-size: 15px;
  background: var(--graphit);
}

@media (max-width: 1023px) {
  .row {
    gap: 16px;
  }

  .card {
    padding: 16px;
    gap: 16px;
  }

  .tag {
    font-size: 14px;
  }
}

@media (max-width: 719px) {
  .row {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .card {
    padding: 20px;
    gap: 20px;
  }

  .tag {
    font-size: 15px;
  }
}

/* trust */

.trust {
  padding-top: var(--sec);
}

.points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.points li {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 18px;
  line-height: 1.35;
  text-wrap: balance;
}

.icon {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--weiss);
  stroke-width: 1.5px;
}

@media (max-width: 899px) {
  .points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 24px;
  }

  .points li {
    font-size: 17px;
  }
}

/* close */

.close {
  padding: var(--sec) 0;
}

.close .sub {
  margin-top: 16px;
  font-size: 19px;
  color: var(--mist);
}

.close .head {
  margin-top: 24px;
}

.form,
.done {
  margin-top: 48px;
  max-width: 560px;
}

.field {
  display: flex;
}

.field input {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0 16px;
  border: 1px solid var(--rule-2);
  border-radius: 0;
  background: var(--graphit);
  font-size: 17px;
  outline-offset: -2px;
}

.field input::placeholder {
  color: var(--mist);
  opacity: 1;
}

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

.field input[aria-invalid="true"] {
  border-color: var(--weiss);
}

.field button {
  flex: none;
  height: 56px;
  margin-left: -1px;
  padding: 0 24px;
  border: 1px solid var(--mist);
  border-radius: 0;
  background: var(--graphit);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.field button:hover {
  border-color: var(--weiss);
  background: var(--block);
}

.error:empty {
  display: none;
}

.error {
  margin-top: 12px;
  font-size: 15px;
}

.note {
  margin-top: 12px;
  font-size: 15px;
  color: var(--mist);
}

.done {
  align-self: flex-start;
  width: fit-content;
  padding: 0.5em 0.9em 0.55em;
  font-size: 16px;
}

.done:focus {
  outline: none;
}

@media (max-width: 419px) {
  .field {
    flex-direction: column;
    gap: 8px;
  }

  .field input {
    flex: none;
    width: 100%;
  }

  .field button {
    margin-left: 0;
  }
}

/* footer */

.foot {
  padding: 40px 0 48px;
}

.foot-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.lockup {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.lk-werk {
  width: auto;
  height: 26px;
}

.lk-haus {
  width: auto;
  height: 14px;
  margin-bottom: 0.5px;
}

.lockup .von {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 12px;
  color: var(--mist);
  margin-bottom: 0.5px;
}

.lang {
  display: flex;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.lang button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--mist);
  cursor: pointer;
}

.lang .ind {
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
}

.lang button[aria-pressed="true"] {
  color: var(--weiss);
}

.lang button[aria-pressed="true"] .ind {
  background: var(--weiss);
}

.lang button:hover {
  color: var(--weiss);
}