/* Palette sampled from the LaQuidity artwork: parchment ground, warm near-black
   ink, crown/medallion gold. Every text pair is checked against the darkest
   point of the drifting gradient rather than the flat page colour. Measured with
   all three blobs stacked (a conservative floor -- they sit in different corners
   and never fully overlap): body 6.47:1, headings 12.9:1, and the slogan's gold
   brand word 4.42:1, which clears the 3:1 large-text floor it is always set at.

   The page is deliberately light-only. The artwork is a cream field, so a dark
   page put a bright rectangle in a dark frame; matching the ground to the art
   and going dark on the type is the look we want, and it should not flip based
   on the visitor's OS setting. The dark palette that used to live here is in
   git at commit 929de36 if it is ever wanted back. */
:root {
  /* Tells the browser this page only does light: form controls, scrollbars and
     the canvas behind the page follow suit instead of being rendered dark. */
  color-scheme: light;

  /* One display face for every piece of lettering, plus the single weight every
     rule using it should ask for. Oswald is a variable font carrying 200-700,
     so this is a real dial: change --display-weight alone to make the whole
     page's lettering heavier or lighter, with no new file to download. The
     fallbacks are the closest condensed faces already on Windows/macOS. */
  --display: "Oswald", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --display-weight: 600;
  --bg: #f7f1e3;
  --fg: #241d14;
  --muted: #5a4c36;
  --accent: #8a5e14;
  --gold: #e0ab45;
  --gold-ink: #241d14;
  --card: #fffaf0;
  --line: color-mix(in srgb, var(--fg) 14%, transparent);
  /* The two gold blobs carry the orange cast, so their alpha is the dial for
     how warm the page reads. Kept low: the artwork supplies the gold, and the
     background only has to hint at it. */
  --blob-a: rgba(224, 171, 69, 0.28);
  --blob-b: rgba(201, 139, 45, 0.20);
  --blob-c: rgba(245, 233, 214, 0.70);
}

/* Self-hosted so the page depends on no third party and the file can be cached
   for a year. Latin subset, variable 200-700 in one 28 KB file -- the whole
   weight range costs less than shipping two static cuts. The range in
   font-weight is what makes that axis addressable; declaring a single value
   here would make the browser synthesise every other weight instead.
   swap: the wordmark paints immediately in the fallback and upgrades when
   Oswald lands, rather than sitting invisible. */
@font-face {
  font-family: "Oswald";
  src: url("oswald-var.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ---- liquid gradient ------------------------------------------------------
   Fixed layer behind everything. Blobs are transform-animated (compositor
   friendly) rather than background-position, so no seams can appear, and the
   layer clips its own overflow so it can never create a scrollbar. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--bg);
}

.bg span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}

.bg span:nth-child(1) {
  width: 62vmax; height: 62vmax; top: -22vmax; left: -18vmax;
  background: var(--blob-a);
  animation: drift-a 30s ease-in-out infinite alternate;
}
.bg span:nth-child(2) {
  width: 54vmax; height: 54vmax; top: 10vmax; right: -20vmax;
  background: var(--blob-b);
  animation: drift-b 38s ease-in-out infinite alternate;
}
.bg span:nth-child(3) {
  width: 58vmax; height: 58vmax; bottom: -26vmax; left: 20%;
  background: var(--blob-c);
  animation: drift-c 34s ease-in-out infinite alternate;
}

@keyframes drift-a { to { transform: translate3d(8vmax, 6vmax, 0) scale(1.15); } }
@keyframes drift-b { to { transform: translate3d(-9vmax, 8vmax, 0) scale(1.1); } }
@keyframes drift-c { to { transform: translate3d(6vmax, -7vmax, 0) scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Must match the specificity of the :nth-child rules above (0,2,1), or those
     win on specificity and the animation keeps running. */
  .bg span:nth-child(n) { animation: none; }
  .btn, .socials a { transition: none; }
}

/* ---- layout --------------------------------------------------------------- */
.wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

section {
  padding: 3.5rem 0;
  border-top: 1px solid var(--line);
}

/* All display lettering. A tall narrow face takes slightly looser tracking than
   the -0.02em a normal grotesque wants at this size. */
h1, h2 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: 0.005em;
  line-height: 1.1;
}

h2 {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  margin: 0 0 1.15rem;
}

/* ---- hero ----------------------------------------------------------------- */
.hero {
  text-align: center;
  padding: 3rem 0 3.5rem;
}

/* The art is 16:9 (1856x1045), so unlike the old portrait crop it is WIDTH that
   binds, not height. It deliberately breaks past the 44rem text column to read as
   a hero band, but stays well short of full-bleed: 58rem, with the same 1.5rem
   gutter as .wrap once the viewport drops below that. */
.hero picture {
  display: block;
  max-width: 58rem;
  margin: 0 auto 1.75rem;
  padding: 0 1.5rem;
}

.hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--line),
              0 2px 4px rgb(0 0 0 / 0.06),
              0 18px 44px -18px rgb(0 0 0 / 0.35);
}

.hero h1 {
  font-size: clamp(3rem, 9vw, 4.75rem);
  margin: 0 0 0.75rem;
}

.ticker {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: 0.25em 0.75em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg);
}

/* Set as a slogan rather than a sentence: display face, uppercase, and the two
   halves stacked so "Liquidity" and "LaQuidity" sit one above the other and the
   joke is a vertical rhyme you read in one glance. The <br> is deliberate --
   letting it reflow would scatter the pairing. */
.slogan {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: clamp(1.5rem, 4.6vw, 2.4rem);
  line-height: 1.12;
  /* Deliberately NOT uppercased: the capital Q is the brand's signature, and
     against a lowercase "Liquidity" directly above it, it is also the glyph
     that makes the joke visible at a glance. */
  letter-spacing: 0.01em;
  color: var(--fg);
  margin: 0 auto 2rem;
  max-width: 34rem;
}

/* The payoff word carries the gold -- but --gold is the bright crown yellow, and
   on the light theme's parchment that measures 1.85:1, failing even the 3:1
   large-text floor. --accent is the same hue darkened for exactly this job:
   5.05:1 on parchment, 11.3:1 on the dark ground. */
.slogan .brand { color: var(--accent); }

p { color: var(--muted); margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* ---- about ---------------------------------------------------------------- */
/* Centred copy: paragraphs also get a tighter measure than the 44rem .wrap, so
   ragged centred lines stay readable instead of running the full width. */
#about { text-align: center; }
#about p {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;
}

/* The Kai quote reads as one unit, so it never breaks across lines. It is
   short enough (~13rem) to still fit the 390px measure without overflowing. */
.quote { white-space: nowrap; }

/* The Monk lines read as a stanza; the kicker is the payoff. */
.stanza { color: var(--fg); }
.kicker {
  color: var(--fg);
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: clamp(1.3rem, 3.4vw, 1.6rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* ---- buttons -------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 0.8em 1.6em;
  border-radius: 999px;
  background: var(--gold);
  color: var(--gold-ink);
  font-weight: 650;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 2px 3px rgb(0 0 0 / 0.08), 0 10px 24px -10px rgb(0 0 0 / 0.45);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn:active { transform: translateY(0); }

/* ---- socials -------------------------------------------------------------- */
/* Centred to match the hero and the about copy -- this was the only block still
   hanging off the left edge of .wrap. */
#socials { text-align: center; }
.socials {
  display: flex;
  flex-wrap: wrap;
  /* Centres each row independently, so a wrapped second row on a phone stays
     centred rather than left-aligning under the first. */
  justify-content: center;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.socials a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7em 1.1em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.socials a:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--gold) 70%, transparent);
}
.socials svg { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* ---- footer --------------------------------------------------------------- */
footer {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8125rem;
  text-align: center;
}
footer p { margin: 0 auto 0.6rem; max-width: 38rem; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

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

/* ---- 404 ------------------------------------------------------------------ */
.center {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
}
.center h1 { font-size: clamp(2.5rem, 8vw, 4rem); margin: 0 0 0.5rem; }