/* SL Collective, sugarlandcollective.com
 *
 * Dark only, on purpose. The brand is white on black, and both product icons have their glow
 * painted into the artwork: on a light page the halo has nothing to sit in and reads as a
 * badly cut-out sticker. IPT's launch screen stands on black for the same reason.
 *
 * No script anywhere, and no inline styles: the Content-Security-Policy in _headers allows this
 * file, the fonts and the images, and nothing else. Every motion below is CSS, and every one of
 * them sits inside a prefers-reduced-motion: no-preference block, which check_site.py enforces.
 * The scroll-linked ones are also behind @supports, so a browser without scroll timelines shows
 * the page complete and still.
 */

@font-face {
  font-family: "DM Serif Display";
  src: url("/fonts/dm-serif-display.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat.woff") format("woff");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* check_site.py measures these: ink and muted are text and must clear 4.5:1 on bg, and on
     the backdrop images at their brightest (Tools/backdrop.json). build_assets.py paints the
     favicon, the backdrop and the share image in the same values, and the check holds the two
     files to each other. */
  --bg: #08090a;
  --ink: #f2efe9;
  --muted: #a8a39b;
  /* Setronome's accent in dark mode, which IPT shares. */
  --amber: #ff9f0a;

  --line: rgba(242, 239, 233, 0.14);
  --line-strong: rgba(242, 239, 233, 0.3);
  --glass-edge: rgba(242, 239, 233, 0.1);

  --serif: "DM Serif Display", "Bodoni 72", Didot, Georgia, "Times New Roman", serif;
  --sans: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(16px, 5vw, 64px);
  --measure: 1160px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

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

/* The page colour lives on the root and body stays transparent. The backdrop is a fixed layer
   at z-index -1, painted after the root's background and before body's content; a background
   on body would be painted over it and the art would vanish. */
html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

::selection {
  background: var(--amber);
  color: var(--bg);
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
  border-radius: 4px;
}

img {
  display: block;
  max-width: 100%;
}

.wrap {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -200px;
  z-index: 50;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

/* ---------------------------------------------------------------- the backdrop */

/* Vector art, inlined into each page from src/ by build_assets.py: a fluted arch, a plinth with
   a sphere, a drafting dimension, registration marks, and an open ring of ticks with a stretch lit
   in amber. The ring sits behind the centre of the screen, so the hero's words are set inside it.
   Each layer covers the screen the way `background-size: cover` would (preserveAspectRatio
   slice). The negative inset leaves room for the drift. */
.backdrop {
  position: fixed;
  inset: -4vmax;
  z-index: -1;
  background: var(--bg);
  pointer-events: none;
}

.art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* The ring's scale turns about the ring's own centre, in the art's coordinates. */
.art .scale {
  transform-box: view-box;
  transform-origin: 800px 470px;
}

/* Each string has pathLength="1", so a dash of 1 is the whole string: drawn in full at rest, and
   pulled taut from its first pin by the motion block below. The glint is a short dash parked
   just before the start of the lit string, where it cannot be seen until it runs. */
.art .string {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.art .glint {
  stroke-dasharray: 0.08 1.2;
  stroke-dashoffset: 0.08;
}

/* The scroll progress line only exists where a scroll timeline can drive it. */
.progress {
  display: none;
}

/* ---------------------------------------------------------------- the rule */

/* The line under the wordmark, as on the logo, fading from white into the amber. The amber
   takes the last third outright: a straight white-to-amber blend spent most of its length on a
   beige that read as neither. */
.rule {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 20%, #ffc774 52%, var(--amber) 72%, var(--amber) 100%);
}

/* ---------------------------------------------------------------- masthead */

.masthead {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 9, 10, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
}

@media (min-width: 600px) {
  .masthead {
    position: sticky;
    top: 0;
  }
}

.masthead-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 32px;
  min-height: 60px;
}

.wordmark {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.34em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* The trailing tracking after the last letter is not part of the word: the negative margin
   takes it out of the layout, so the rule stops under the E. */
.wordmark-text {
  margin-right: -0.34em;
}

.nav {
  display: flex;
  gap: 28px;
}

.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.2em;
  bottom: 10px;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
}

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

.nav a:hover::after {
  transform: scaleX(1);
}

@media (max-width: 599px) {
  .masthead-inner {
    padding-block: 6px 2px;
  }

  .nav {
    width: 100%;
    gap: 22px;
  }

  /* On a phone the masthead does not stick, so the small wordmark would sit directly above the
     hero's full-size one. The home page's masthead is the three links alone. */
  .home .masthead .wordmark {
    display: none;
  }

  .home .masthead-inner {
    min-height: 52px;
    padding-block: 4px;
  }
}

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  /* The masthead is 60px and its border 1px; the hero fills what is left of the first screen. */
  min-height: min(calc(100svh - 61px), 980px);
  padding-block: clamp(64px, 11vh, 140px) clamp(96px, 14vh, 160px);
  text-align: center;
}

/* A pool of amber light behind the lockup. */
.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 34%;
  width: min(90vw, 900px);
  aspect-ratio: 1.6;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 159, 10, 0.1), rgba(255, 159, 10, 0.03) 55%, transparent);
  pointer-events: none;
  z-index: -1;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.62em;
  margin: 0 0 clamp(40px, 6vh, 64px);
  font-family: var(--sans);
  font-size: clamp(20px, 3.3vw, 40px);
  font-weight: 600;
  letter-spacing: 0.34em;
  line-height: 1;
  text-transform: uppercase;
}

.lockup-letters {
  display: inline-flex;
  justify-content: center;
  margin-right: -0.34em;
}

.lockup-letters span {
  display: inline-block;
  white-space: pre;
}

.lockup .rule {
  position: relative;
  height: max(1px, 0.06em);
  overflow: hidden;
  transform-origin: left center;
  box-shadow: 0 0 18px rgba(255, 159, 10, 0.35);
}

/* A light that travels along the rule now and then. */
.lockup .rule::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255, 244, 224, 0.95), transparent);
  transform: translateX(-110%);
}

.statement {
  margin: 0;
  max-width: 11.5em;
  font-family: var(--serif);
  font-size: clamp(42px, 7.4vw, 96px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* Each half is its own block so each balances on its own: three lines on a wide screen and four
   on a phone. Balancing the sentence whole put "rehearsal, and" on one line. The space between
   the spans keeps the text one sentence for anything that reads the DOM. */
.statement .line {
  display: block;
}

.lede {
  margin: clamp(26px, 4vh, 40px) auto 0;
  max-width: 34em;
  color: var(--muted);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(32px, 5vh, 48px);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4vh, 40px);
  width: 1px;
  height: 52px;
  background: linear-gradient(var(--line-strong), transparent);
  overflow: hidden;
}

.scroll-cue::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 16px;
  background: var(--amber);
  opacity: 0;
}

@media (max-height: 620px) {
  .scroll-cue {
    display: none;
  }
}

/* ---------------------------------------------------------------- buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(8, 9, 10, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease, translate 0.35s var(--ease-out);
}

.button:hover {
  border-color: rgba(255, 159, 10, 0.75);
  background: rgba(255, 159, 10, 0.1);
  box-shadow: 0 14px 40px -16px rgba(255, 159, 10, 0.55);
  translate: 0 -1px;
}

.button--primary {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.button--primary:hover {
  border-color: #fff;
  background: #fff;
  box-shadow: 0 16px 48px -14px rgba(255, 159, 10, 0.65);
}

.arrow {
  display: inline-block;
  transition: translate 0.35s var(--ease-out);
}

.button:hover .arrow {
  translate: 2px -2px;
}

.button:hover .arrow--down {
  translate: 0 2px;
}

/* ---------------------------------------------------------------- sections */

.section {
  padding-block: clamp(56px, 8vw, 112px);
}

.section-head {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: clamp(32px, 5vw, 56px);
  padding-top: 20px;
}

/* A hairline that begins in amber, the rule's colour at its other end. */
.section-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--amber) 0, rgba(255, 159, 10, 0.4) 64px, var(--line) 180px, var(--line));
  transform-origin: left center;
}

.section-index {
  color: var(--amber);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}

.section-head h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- cards */

.card {
  position: relative;
  border: 1px solid var(--glass-edge);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(24, 23, 22, 0.7), rgba(10, 10, 11, 0.62));
  -webkit-backdrop-filter: blur(20px) saturate(115%);
  backdrop-filter: blur(20px) saturate(115%);
  box-shadow: 0 40px 90px -56px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: translate 0.6s var(--ease-out), border-color 0.6s ease, box-shadow 0.6s ease;
}

/* `translate`, not `transform`: the scroll reveal animates transform and an animation's value
   wins over a hover's, so a hover written as transform would never move the card. */
.card:hover {
  translate: 0 -4px;
  border-color: rgba(255, 159, 10, 0.26);
  box-shadow: 0 50px 100px -56px rgba(0, 0, 0, 0.95), 0 30px 90px -50px rgba(255, 159, 10, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.apps {
  display: grid;
  gap: clamp(16px, 2.4vw, 28px);
}

@media (min-width: 880px) {
  .apps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.app {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3.2vw, 40px);
}

.app-icon {
  display: inline-block;
  align-self: flex-start;
  border-radius: 22%;
}

.app-icon img {
  width: 104px;
  height: 104px;
  border-radius: 22%;
  box-shadow: 0 0 0 1px var(--line), 0 24px 48px -24px rgba(0, 0, 0, 0.95);
  transition: scale 0.6s var(--ease-out), box-shadow 0.6s ease;
}

.app:hover .app-icon img {
  scale: 1.045;
  box-shadow: 0 0 0 1px rgba(255, 159, 10, 0.5), 0 24px 70px -18px rgba(255, 159, 10, 0.5);
}

.app-name {
  margin: 28px 0 0;
  font-family: var(--serif);
  font-size: clamp(40px, 4.4vw, 56px);
  font-weight: 400;
  line-height: 1;
}

.app-name a {
  text-decoration: none;
}

.app-tagline {
  margin: 12px 0 0;
  font-size: 18px;
  font-weight: 500;
  text-wrap: balance;
}

.app-text {
  margin: 16px 0 0;
  color: var(--muted);
  text-wrap: pretty;
}

.status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px var(--amber);
}

.status--soon::before {
  background: transparent;
  border: 1px solid var(--muted);
  box-shadow: none;
}

.app-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 28px;
}

/* The shop: copy on one side, the render's plinth and sphere on the other. */
.shop {
  display: grid;
  margin-top: clamp(16px, 2.4vw, 28px);
  overflow: hidden;
}

.shop-copy {
  padding: clamp(24px, 3.2vw, 40px);
}

.eyebrow {
  margin: 0;
  color: var(--amber);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.shop-title {
  margin: 14px 0 0;
  max-width: 12em;
  font-family: var(--serif);
  font-size: clamp(34px, 3.8vw, 48px);
  font-weight: 400;
  line-height: 1.05;
  text-wrap: balance;
}

.shop-title a {
  text-decoration: none;
}

.shop-text {
  margin: 16px 0 28px;
  max-width: 30em;
  color: var(--muted);
}

/* The string art on the right of the backdrop, cropped from the same art by build_assets.py. */
.shop-art {
  min-height: 240px;
  background: var(--bg) url("/images/shop.svg") 50% 50% / cover no-repeat;
  transition: scale 1.2s var(--ease-out);
}

.shop:hover .shop-art {
  scale: 1.04;
}

@media (min-width: 880px) {
  .shop {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .shop-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  .shop-art {
    min-height: 100%;
  }
}

/* ---------------------------------------------------------------- principles */

.principles {
  display: grid;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.principles li::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin-bottom: 22px;
  background: linear-gradient(90deg, var(--amber), rgba(255, 159, 10, 0.2));
  transform-origin: left center;
  transition: scale 0.6s var(--ease-out);
}

.principles li:hover::before {
  scale: 1.8 1;
}

.principles h3 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: clamp(28px, 2.7vw, 36px);
  font-weight: 400;
  line-height: 1.1;
}

.principles p {
  margin: 0;
  max-width: 22em;
  color: var(--muted);
}

@media (min-width: 760px) {
  .principles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;
  }
}

/* ---------------------------------------------------------------- company and contact */

.company {
  display: grid;
  gap: clamp(36px, 5vw, 56px);
}

/* Who we are: the story in the serif, what comes out of it in the body face, and the legal
   sentence last and small, because Apple's reviewer needs it and a visitor mostly does not. */
.company-story {
  display: grid;
  gap: 20px;
}

.company-statement {
  margin: 0;
  max-width: 24em;
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.24;
  text-wrap: pretty;
}

.company-text {
  margin: 0;
  max-width: 36em;
  color: var(--muted);
  font-size: clamp(17px, 1.4vw, 19px);
  text-wrap: pretty;
}

.company-legal {
  margin: 0;
  max-width: 48em;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.facts {
  margin: 0;
}

.facts dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.facts a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-color 0.3s ease;
}

.facts a:hover {
  text-decoration-color: var(--amber);
}

/* The company's particulars: label over value, four across on a wide screen. As label-beside-
   value rows in half the width, "Sugar Land Collective LLC" broke onto two lines. */
.facts--spec {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 32px;
}

.facts--spec div {
  display: grid;
  align-content: start;
  gap: 6px;
  padding-block: 16px 18px;
  border-top: 1px solid var(--line);
}

@media (min-width: 520px) {
  .facts--spec {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Four across only where a column holds "Sugar Land Collective LLC" on one line: at 1024 the
   quarter-width columns broke it, and "Limited liability company" with it. */
@media (min-width: 1200px) {
  .facts--spec {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.facts--rows div {
  display: grid;
  gap: 4px;
  padding-block: 16px;
  border-top: 1px solid var(--line);
}

.facts--rows div:last-child {
  border-bottom: 1px solid var(--line);
}

@media (min-width: 600px) {
  .facts--rows div {
    grid-template-columns: minmax(160px, 0.8fr) minmax(0, 1.2fr);
    gap: 24px;
    align-items: baseline;
  }
}

.contact-mail {
  position: relative;
  display: inline-block;
  margin: 0 0 clamp(36px, 5vw, 56px);
  font-family: var(--serif);
  font-size: clamp(22px, 5.2vw, 64px);
  line-height: 1.15;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-mail::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  height: max(1px, 0.03em);
  background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 20%, #ffc774 52%, var(--amber) 72%, var(--amber) 100%);
  transform-origin: left center;
  transition: scale 0.7s var(--ease-out);
}

.contact-mail:hover::after {
  scale: 1 2.5;
}

/* ---------------------------------------------------------------- prose pages */

.page {
  padding-block: clamp(56px, 9vw, 120px) clamp(48px, 7vw, 96px);
}

.prose {
  max-width: 40em;
}

.prose h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(44px, 6.4vw, 80px);
  font-weight: 400;
  line-height: 1.02;
}

.prose .updated {
  margin: 14px 0 48px;
  color: var(--muted);
  font-size: 15px;
}

.prose h2 {
  position: relative;
  margin: 44px 0 14px;
  padding-top: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.prose h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--amber) 0, rgba(255, 159, 10, 0.4) 48px, var(--line) 140px, var(--line));
}

.prose p {
  margin: 0 0 16px;
}

.prose a {
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  overflow-wrap: anywhere;
  transition: text-decoration-color 0.3s ease;
}

.prose a:hover {
  text-decoration-color: var(--amber);
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(8, 9, 10, 0.35), rgba(8, 9, 10, 0.85));
}

.footer-inner {
  display: grid;
  gap: 24px;
  padding-block: 44px 40px;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-nav a:hover {
  color: var(--ink);
}

.legal {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* ---------------------------------------------------------------- motion */

/* Every animation on the site is in this block. A visitor who has asked for reduced motion gets
   the finished page, with nothing moving. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .backdrop {
    animation: backdrop-in 2.4s var(--ease-out) both, drift 50s ease-in-out 2.4s infinite alternate;
  }

  .hero::before {
    animation: breathe 9s ease-in-out 2s infinite alternate;
  }

  .art .scale {
    animation: sway 22s ease-in-out infinite alternate;
  }

  .art .marker {
    animation: breathe 3.6s ease-in-out infinite alternate;
  }

  .art .string {
    animation: string-in 1.8s var(--ease-out) both;
  }

  .art .string:nth-child(1) { animation-delay: 0.5s; }
  .art .string:nth-child(2) { animation-delay: 0.62s; }
  .art .string:nth-child(3) { animation-delay: 0.74s; }
  .art .string:nth-child(4) { animation-delay: 0.86s; }
  .art .string:nth-child(5) { animation-delay: 0.98s; }
  .art .string:nth-child(6) { animation-delay: 0.56s; }
  .art .string:nth-child(7) { animation-delay: 0.68s; }
  .art .string:nth-child(8) { animation-delay: 0.8s; }
  .art .string:nth-child(9) { animation-delay: 1.1s; }

  .art .pins {
    animation: fade-in 0.8s ease 0.3s both;
  }

  .art .glint {
    animation: glint-run 8s var(--ease-in-out) 3.4s infinite;
  }

  .lockup-letters span {
    animation: letter-in 1s var(--ease-out) both;
  }

  .lockup-letters span:nth-child(1) { animation-delay: 0.2s; }
  .lockup-letters span:nth-child(2) { animation-delay: 0.24s; }
  .lockup-letters span:nth-child(3) { animation-delay: 0.28s; }
  .lockup-letters span:nth-child(4) { animation-delay: 0.32s; }
  .lockup-letters span:nth-child(5) { animation-delay: 0.36s; }
  .lockup-letters span:nth-child(6) { animation-delay: 0.4s; }
  .lockup-letters span:nth-child(7) { animation-delay: 0.44s; }
  .lockup-letters span:nth-child(8) { animation-delay: 0.48s; }
  .lockup-letters span:nth-child(9) { animation-delay: 0.52s; }
  .lockup-letters span:nth-child(10) { animation-delay: 0.56s; }
  .lockup-letters span:nth-child(11) { animation-delay: 0.6s; }
  .lockup-letters span:nth-child(12) { animation-delay: 0.64s; }
  .lockup-letters span:nth-child(13) { animation-delay: 0.68s; }

  .lockup .rule {
    animation: draw 1.5s var(--ease-out) 0.85s both;
  }

  .lockup .rule::after {
    animation: glint 7s var(--ease-in-out) 3s infinite;
  }

  .statement .line {
    animation: rise 1.2s var(--ease-out) both;
  }

  .statement .line:nth-child(1) { animation-delay: 1.05s; }
  .statement .line:nth-child(2) { animation-delay: 1.2s; }

  .hero .lede {
    animation: rise 1.2s var(--ease-out) 1.4s both;
  }

  .hero-actions {
    animation: rise 1.2s var(--ease-out) 1.55s both;
  }

  .scroll-cue {
    animation: fade-in 1s ease 2.4s both;
  }

  .scroll-cue::after {
    animation: cue 2.6s var(--ease-in-out) 3s infinite;
  }

  .status:not(.status--soon)::before {
    animation: pulse 2.8s ease-in-out infinite;
  }

  .masthead .wordmark .rule {
    animation: draw 1.2s var(--ease-out) 0.3s both;
  }

  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 26%;
    }

    .section-head::before {
      animation: draw linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
  }

  @supports (animation-timeline: scroll()) {
    .progress {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 40;
      height: 2px;
      background: linear-gradient(90deg, var(--ink), var(--amber));
      transform-origin: left center;
      animation: grow linear both;
      animation-timeline: scroll(root block);
    }

    /* On the home page the hero carries the full lockup, so the small one in the masthead
       waits until the hero has scrolled away. Only where the masthead sticks: on a phone it
       scrolls off with the page, and the wordmark is not drawn there at all. */
    @media (min-width: 600px) {
      .home .masthead .wordmark {
        animation: fade-in linear both;
        animation-timeline: scroll(root block);
        animation-range: 30vh 60vh;
      }
    }
  }
}

@keyframes backdrop-in {
  from {
    opacity: 0;
    transform: scale(1.12);
  }
  to {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes drift {
  from {
    transform: scale(1.04) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.1) translate3d(-1.4%, -1.2%, 0);
  }
}

@keyframes string-in {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes glint-run {
  0% {
    stroke-dashoffset: 0.08;
  }
  40%,
  100% {
    stroke-dashoffset: -1;
  }
}

@keyframes sway {
  from {
    transform: rotate(-9deg);
  }
  to {
    transform: rotate(9deg);
  }
}

@keyframes breathe {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}

@keyframes letter-in {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(0.3em);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

@keyframes draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes glint {
  0% {
    transform: translateX(-110%);
  }
  45%,
  100% {
    transform: translateX(560%);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes cue {
  0% {
    opacity: 0;
    transform: translateY(-16px);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(52px);
  }
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 6px var(--amber);
  }
  50% {
    box-shadow: 0 0 16px var(--amber);
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}