/* Veridorn LLC - veridorn.com
   No external requests: the display face is self-hosted, no scripts, no analytics.

   Type system
   -----------
   Two scales, as editorial practice suggests: a wide ratio (~1.333, perfect fourth)
   for display, a tight one (~1.2) for text. Hierarchy is carried by four things at
   once - size, weight, tone, and placement - never by size alone.

     weight   700 display . 600 subhead . 500 nav, links, meta . 400 body
     tone     ink display and lede . muted body . faint meta only
     opsz     mapped to rendered size so contrast is optically correct
*/

/* Fraunces, SIL Open Font License 1.1. See /fonts/OFL.txt */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;

  --paper:       #fbf9f6;
  --raise:       #f4f0ea;
  --ink:         #121a18;
  --muted:       #55625f;
  --faint:       #8a9491;
  --line:        #e2dbd1;
  --hair:        #ece6dd;
  --accent:      #0f3d3a;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: 'Fraunces', ui-serif, "Iowan Old Style", Georgia, serif;

  --step--1: 0.875rem;
  --step-0:  1rem;
  --step-1:  1.125rem;
  --step-2:  clamp(1.25rem, 1.9vw, 1.4rem);
  --step-3:  clamp(1.55rem, 2.6vw, 1.85rem);
  --step-4:  clamp(2rem, 4.4vw, 2.8rem);
  --step-5:  clamp(2.75rem, 7.2vw, 4.75rem);

  --measure: 36rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #0c1110;
    --raise:   #121a18;
    --ink:     #eeebe4;
    --muted:   #a3aeab;
    --faint:   #74807d;
    --line:    #26302d;
    --hair:    #1a2321;
    --accent:  #86c7bb;
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--accent); font-weight: 500; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

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

.wordmark, h1, h2, .product h3, .principles h3 {
  font-family: var(--serif);
  font-optical-sizing: auto;
}

h1 { font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 1; }
h2 { font-variation-settings: 'opsz' 96, 'SOFT' 0, 'WONK' 1; }
.product h3 { font-variation-settings: 'opsz' 48, 'SOFT' 0, 'WONK' 1; }
.principles h3 { font-variation-settings: 'opsz' 32, 'SOFT' 0, 'WONK' 1; }
.wordmark { font-variation-settings: 'opsz' 24, 'SOFT' 0, 'WONK' 1; }

/* ---------- header ---------- */

.site-header { border-bottom: 1px solid var(--line); background: var(--paper); }

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1.4rem;
}

.wordmark {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--accent); }

.site-nav { display: flex; flex-wrap: wrap; gap: 1.75rem; font-size: var(--step--1); }
.site-nav a { color: var(--muted); font-weight: 500; text-decoration: none; }
.site-nav a:hover { color: var(--ink); }

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

/* The band clips the figure so it can bleed past the content column
   without ever giving the page a horizontal scrollbar. */
.hero-band { position: relative; overflow: hidden; }

.hero {
  position: relative;
  z-index: 1;
  padding-block: clamp(4.5rem, 13vw, 9rem) clamp(3.5rem, 9vw, 6rem);
}

.hero h1 {
  font-weight: 700;
  font-size: var(--step-5);
  line-height: 0.98;
  letter-spacing: -0.042em;
  color: var(--ink);
  margin: 0 0 1.5rem;
  max-width: 15ch;
  text-wrap: balance;
}

.lede {
  font-size: var(--step-2);
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  max-width: 33rem;
  text-wrap: pretty;
}

/* Hero field: a live strange-attractor ensemble on a canvas. The canvas paints
   trails by erasing toward transparent, so the page ground shows through
   untouched and no veil accumulates. See hero.js. */
.hero-figure { display: none; }

@media (min-width: 52rem) {
  .hero-figure {
    display: block;
    position: absolute;
    z-index: 0;
    top: 50%;
    right: -3%;
    width: min(40rem, 48vw);
    aspect-ratio: 1;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.52;
    -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
  }
}

@media (prefers-color-scheme: dark) {
  .hero-figure { opacity: 0.55; }
}

.hero-figure canvas { display: block; width: 100%; height: 100%; }

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

section { border-top: 1px solid var(--line); }
section > .wrap { padding-block: clamp(3rem, 7.5vw, 5.5rem); }

h2 {
  font-weight: 700;
  font-size: var(--step-4);
  line-height: 1.08;
  letter-spacing: -0.032em;
  color: var(--ink);
  margin: 0 0 1.25rem;
}

p { max-width: var(--measure); }
.prose p { margin: 0 0 1.1rem; color: var(--muted); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }

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

.principles { display: grid; grid-template-columns: 1fr; gap: 2.75rem; }

@media (min-width: 58rem) {
  .principles { grid-template-columns: repeat(3, 1fr); gap: 2.75rem 2.5rem; }
}

.principles > div { border-top: 1px solid var(--ink); padding-top: 1.1rem; }

.principles h3 {
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.principles p { color: var(--muted); margin: 0; font-size: var(--step-0); max-width: 30rem; }

/* ---------- products: rules, not boxes ---------- */

.products { display: grid; grid-template-columns: 1fr; gap: 3rem; }

@media (min-width: 52rem) {
  .products { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

.product {
  border-top: 2px solid var(--accent);
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.product-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 0.9rem; }

@media (min-width: 52rem) {
  .product-head .status { margin-left: auto; }
}

.product h3 {
  margin: 0;
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.1;
  color: var(--ink);
}

.status { font-size: var(--step--1); font-weight: 500; color: var(--faint); white-space: nowrap; }

.product p { margin: 0; color: var(--muted); max-width: 32rem; }
.product .link { margin-top: auto; padding-top: 0.35rem; }
.product .link .pending-note { color: var(--faint); font-weight: 400; }

/* ---------- company: asymmetric close ---------- */

.company-grid { display: grid; gap: 1.5rem 3.5rem; }

@media (min-width: 60rem) {
  .company-grid { grid-template-columns: 5fr 7fr; align-items: start; }
  .company-grid h2 { margin-bottom: 0; }
}

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

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem 3.5rem;
  font-size: var(--step--1);
  color: var(--faint);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  justify-content: space-between;
  align-items: baseline;
}
.site-footer a { color: var(--muted); }
.site-footer .colophon { max-width: 32rem; margin: 0; }
.site-footer p { margin: 0; }

/* ---------- interior pages ---------- */

.page { padding-block: clamp(3.5rem, 9vw, 6rem) clamp(3rem, 8vw, 5rem); }
.page h1 {
  font-weight: 700;
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 0.6rem;
}
.page .updated { color: var(--faint); font-size: var(--step--1); margin: 0 0 3rem; }
.page h2 {
  margin-top: 3rem;
  font-size: var(--step-3);
  letter-spacing: -0.026em;
  font-variation-settings: 'opsz' 48, 'SOFT' 0, 'WONK' 1;
}
.page ul { max-width: var(--measure); color: var(--muted); padding-left: 1.15rem; }
.page li { margin-bottom: 0.55rem; }
.page li::marker { color: var(--faint); }

/* Tight display tracking is an optical correction for large sizes. At small
   rendered sizes it closes counters, so relax it. */
@media (max-width: 40rem) {
  .hero h1 { letter-spacing: -0.028em; line-height: 1.02; }
  .page h1 { letter-spacing: -0.026em; }
  h2 { letter-spacing: -0.024em; }
  .wordmark { letter-spacing: -0.018em; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}