/* FinChip holding page
   Palette comes from the hardware itself: solder-mask blue, silkscreen white,
   gold contact plating and tin. One typeface (Archivo) used across its width axis. */

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

:root {
  --mask: #10304f;
  --silk: #f2f4ef;
  --gold: #d4a24c;
  --tin: #9fb3c4;
  --green: #45c486;

  --wrap: 72rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--mask);
  color: var(--silk);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, p { margin: 0; }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

header { padding-top: 1.5rem; }

main {
  align-self: center;
  padding-block: clamp(3rem, 8vw, 6rem);
}

h1 {
  max-width: 17em;
  font-stretch: 125%;
  font-weight: 650;
  font-size: clamp(2rem, 5.2vw, 4.25rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.status {
  margin-top: 2rem;
  padding-left: 1rem;
  border-left: 3px solid var(--gold);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: #d5dde3;
}

/* Tick bars: a row of card-edge connector fingers on a 1.25rem pitch, with the
   logo set into the row. */

footer p { font-size: 0.875rem; color: var(--tin); padding-bottom: 1.5rem; }

.fingers {
  position: relative;
  overflow: hidden;
  height: 2.5rem;
  /* Snap the width to whole fingers where the browser can. */
  width: calc(round(down, 100% + 0.5rem, 1.25rem) - 0.5rem);
  /* One green finger near the start, over the row of gold ones. */
  background:
    linear-gradient(var(--green), var(--green)) 2.5rem 0 / 0.75rem 100% no-repeat,
    repeating-linear-gradient(90deg, var(--gold) 0 0.75rem, transparent 0.75rem 1.25rem);
}

/* The logo takes the place of eight fingers. By default it follows the first six. */
.fingers__logo {
  position: absolute;
  top: 0;
  left: 7.5rem;
  width: 9.5rem;
  height: 2.5rem;
  background: var(--mask);
}
.fingers__logo path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; }
.fingers__logo text {
  fill: var(--silk);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
}

/* Two green fingers at the middle, kept on the same pitch as the gold ones and
   never so far left that they run into the start of the bar. */
.fingers--top    { --middle: max(round(down, 50%, 1.25rem), 17.5rem); }
.fingers--bottom { --middle: max(round(down, 50%, 1.25rem), 21.25rem); }

@supports (left: round(down, 50%, 1.25rem)) {
  .fingers::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: var(--middle);
    width: 2rem;
    background: repeating-linear-gradient(90deg, var(--green) 0 0.75rem, var(--mask) 0.75rem 1.25rem);
  }

  /* Bottom bar: the logo sits three fingers before the green pair. */
  .fingers--bottom .fingers__logo { left: calc(var(--middle) - 13.75rem); }

  /* On a phone there is no room for that around the middle, so the bottom bar
     keeps the same order but ends on the green pair. */
  @media (max-width: 25.99rem) {
    .fingers--bottom::before { left: auto; right: 0; }
    .fingers--bottom .fingers__logo { left: auto; right: 6.25rem; }
  }
}