/* Flox. Black and white only. One accent is not a thing here: the art is the colour. */

@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #000;
  --paper: #fff;
  --line: rgba(0, 0, 0, 0.14);
  --muted: rgba(0, 0, 0, 0.58);
  --veil: rgba(0, 0, 0, 0.04);
  --nav-h: 68px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --shell: 1400px;
  /* Shape rule for the whole site: interactive things are full pill, everything
     else is sharp. The logo is round enough for both to read as one family. */
  --pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #fff;
    --paper: #000;
    --line: rgba(255, 255, 255, 0.18);
    --muted: rgba(255, 255, 255, 0.62);
    --veil: rgba(255, 255, 255, 0.06);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* the nav is sticky, so an anchor would otherwise land under it */
  scroll-padding-top: var(--nav-h);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

::selection { background: var(--ink); color: var(--paper); }

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

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--gutter);
  top: 0.75rem;
  z-index: 10;
  background: var(--ink);
  color: var(--paper);
  padding: 0.65rem 1.1rem;
  border-radius: var(--pill);
}

/* ---------- type ---------- */

h1, h2, h3 {
  font-weight: 560;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.1rem, 1.1rem + 3.4vw, 3.9rem);
}

.section-head {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
}

p { margin: 0; }

.lede {
  color: var(--muted);
  max-width: 34ch;
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem);
}

.prose { max-width: 68ch; }
.prose h2 { font-size: 1.45rem; margin-top: 2.75rem; }
.prose h3 { font-size: 1.1rem; margin-top: 1.9rem; letter-spacing: -0.02em; }
.prose p, .prose li { color: var(--muted); }
.prose p + p { margin-top: 0.9rem; }
.prose h2 + p, .prose h3 + p { margin-top: 0.6rem; }
.prose ul { padding-left: 1.1rem; margin: 0.6rem 0 0; }
.prose li + li { margin-top: 0.35rem; }
.prose a { text-underline-offset: 3px; }
.prose address { font-style: normal; color: var(--muted); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border: 1px solid var(--ink);
  border-radius: var(--pill);
  padding: 0.85rem 1.6rem;
  font: inherit;
  font-weight: 540;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  background: var(--ink);
  color: var(--paper);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s;
}
.btn:hover { opacity: 0.82; }
.btn:active { transform: translateY(1px) scale(0.985); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); opacity: 1; }

/* ---------- nav ---------- */

.nav {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav .shell { display: flex; align-items: center; justify-content: space-between; }
.nav a { display: inline-flex; }
.nav svg { width: 74px; height: auto; }

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

.hero {
  min-height: calc(100dvh - var(--nav-h));
  display: grid;
  align-items: center;
  padding-block: clamp(1.5rem, 4vh, 3.5rem) clamp(2rem, 6vh, 4rem);
}
.hero .shell {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .hero .shell { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.hero-mark {
  width: clamp(190px, 26vw, 330px);
  height: auto;
  margin-bottom: clamp(1.4rem, 3vw, 2.1rem);
  overflow: visible;
}
.hero h1 { margin-bottom: 1.05rem; }
.hero .lede { margin-bottom: 1.9rem; }

.hero-art { background: var(--veil); }
.hero-art img { width: 100%; }
@media (min-width: 900px) {
  /* The art runs to the true right edge of the window, while the copy stays on
     the same left rule as every other section. Without this the image would sit
     inset by half the leftover width on monitors wider than --shell. */
  .hero .shell {
    max-width: none;
    padding-right: 0;
    padding-left: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
  }
}

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

.l {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-mark .l {
    animation: flow 5.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
  .hero-mark .l-f { animation-delay: 0s; }
  .hero-mark .l-l { animation-delay: 0.16s; }
  .hero-mark .l-o { animation-delay: 0.32s; }
  .hero-mark .l-x { animation-delay: 0.48s; }

  /* letters lean toward the pointer; --lean is written by app.js */
  .hero-mark { --lean: 0; }
  .hero-mark .l {
    translate: calc(var(--lean) * var(--pull, 1) * 7px) 0;
    transition: translate 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .hero-mark .l-f { --pull: 0.35; }
  .hero-mark .l-l { --pull: 0.65; }
  .hero-mark .l-o { --pull: 1; }
  .hero-mark .l-x { --pull: 1.4; }
}

/* percentages resolve against each letter's own box, so the short o travels
   less than the tall f. That difference is what makes it read as flow. */
@keyframes flow {
  0%, 100% { transform: translateY(0) scaleY(1); }
  38%      { transform: translateY(-7.5%) scaleY(1.025); }
  72%      { transform: translateY(1.5%) scaleY(0.988); }
}

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

.section { padding-block: clamp(4.5rem, 11vh, 9rem); }
.section-intro { max-width: 46ch; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.section-intro p { color: var(--muted); margin-top: 1rem; }

/* ---------- volumes ---------- */

.volume + .volume { margin-top: clamp(4rem, 10vh, 8rem); }

/* One grid, one cell per preview, and the lead one takes four cells. The
   images size themselves from their own width and height, so nothing is
   cropped and any number of previews tiles correctly. */
.volume-grid {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  grid-template-columns: repeat(2, 1fr);
}
/* 640 and 900 are already this file's breakpoints. Three steps rather than two:
   at two columns a tablet gives the lead square the full width, which is taller
   than the screen. */
@media (min-width: 640px) {
  .volume-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .volume-grid { grid-template-columns: repeat(4, 1fr); }
}

.volume-grid img { width: 100%; background: var(--veil); }

.volume-grid img:first-child { grid-column: span 2; grid-row: span 2; }
@media (min-width: 900px) {
  /* the lead square swaps sides between volumes; identical rows all the way
     down would read as a template */
  .volume-b .volume-grid img:first-child { grid-column: 3 / span 2; grid-row: 1 / span 2; }
}

.volume-bar {
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  padding-top: clamp(1.1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
}
.volume-bar h3 { font-size: clamp(1.5rem, 1rem + 1.7vw, 2.3rem); }
.volume-bar .meta { color: var(--muted); flex: 1 1 14ch; }
.volume-bar form { margin-left: auto; }
@media (max-width: 640px) {
  /* full width beats a button floating on its own line */
  .volume-bar form { margin-left: 0; flex: 1 0 100%; }
  .volume-bar .btn { width: 100%; }
}

/* ---------- steps ---------- */

.step {
  display: grid;
  gap: 0.4rem 3rem;
  padding-block: clamp(1.5rem, 3.5vw, 2.4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .step { grid-template-columns: minmax(0, 19ch) minmax(0, 1fr); align-items: baseline; }
}
.step + .step { border-top: 1px solid var(--line); }
.step h3 { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.65rem); }
.step p { color: var(--muted); max-width: 60ch; }

/* ---------- faq ---------- */

.faq details {
  border-top: 1px solid var(--line);
  padding-block: 1.35rem;
}
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  font-weight: 520;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  letter-spacing: -0.02em;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq details[open] summary::after { rotate: -135deg; translate: 0 2px; }
.faq details p { color: var(--muted); margin-top: 0.85rem; max-width: 62ch; }

/* ---------- success ---------- */

.centered-page {
  min-height: calc(100dvh - var(--nav-h));
  display: grid;
  align-content: center;
  padding-block: clamp(3rem, 9vh, 6rem);
}
.receipt {
  max-width: 44ch;
  display: grid;
  gap: 1.15rem;
  justify-items: start;
}
.receipt .lede { max-width: none; }
.fineprint { font-size: 0.85rem; color: var(--muted); max-width: 52ch; }

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

.footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 6vh, 4rem);
  font-size: 0.9rem;
}
.footer .shell {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: flex-start;
  justify-content: space-between;
}
.footer svg { width: 56px; height: auto; margin-bottom: 0.9rem; }
.footer p { color: var(--muted); max-width: 30ch; }
.footer nav { display: grid; gap: 0.5rem; }
.footer nav a { text-decoration: none; }
.footer nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- scroll reveal ---------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
    @keyframes rise {
      from { opacity: 0; transform: translateY(26px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
}