/* Voronda — reset, typography, and the shared chrome every page carries.

   Fonts are self-hosted. Nothing on this site fetches from a third party, which is the
   product claim made literal: no Google Fonts, no CDN, no analytics, no cookie banner. */

@font-face { font-family: Chivo; src: url("../assets/fonts/Chivo-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Chivo; src: url("../assets/fonts/Chivo-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Chivo; src: url("../assets/fonts/Chivo-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Chivo; src: url("../assets/fonts/Chivo-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: Chivo; src: url("../assets/fonts/Chivo-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap; }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body-ground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
address { font-style: normal; }

h1, h2, h3, h4 { font-weight: var(--w-display); line-height: var(--lh-h);
  letter-spacing: var(--track-h); text-wrap: balance; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: var(--w-strong); letter-spacing: -0.01em; }
p { text-wrap: pretty; }

a { color: inherit; }

:where(a, button, [tabindex], summary, input, select, textarea):focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}

::selection { background: var(--c-scarlet); color: var(--c-white); }

.skip {
  position: absolute; left: var(--s-4); top: var(--s-4); z-index: var(--z-toast);
  transform: translateY(-200%);
  background: var(--c-carbon); color: var(--c-white);
  padding: var(--s-3) var(--s-5); font-weight: var(--w-ui); text-decoration: none;
}
.skip:focus { transform: none; }

/* ---------- layout ---------- */

.shell { width: min(var(--shell), 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding-block: var(--s-section); }
.section--lg { padding-block: var(--s-section-lg); }
.measure { max-width: var(--measure); }
.measure-tight { max-width: var(--measure-tight); }

.lead { font-size: var(--t-lead); color: var(--ink-muted); line-height: 1.5; }

/* ---------- the petal, this site's one recurring graphic ---------- */

.petal {
  width: 0.62em; height: 1em; flex: none;
  color: var(--accent);
  transition: transform var(--dur) var(--ease-out-quart);
}

/* Petal-marked lists. Replaces both the bullet and the tiny uppercase eyebrow. */
.petal-list { list-style: none; padding: 0; display: grid; gap: var(--s-5); }
.petal-list li { display: grid; grid-template-columns: 1.1em 1fr; gap: var(--s-4); align-items: start; }
.petal-list .petal { margin-top: 0.22em; }

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

.display {
  font-size: var(--t-display); font-weight: var(--w-display);
  line-height: var(--lh-display); letter-spacing: var(--track-display);
  text-wrap: balance;
}
.accent { color: var(--accent-text); }

/* ---------- links and actions ---------- */

.link {
  color: inherit; text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur) var(--ease-out-quart);
}
.link:hover, .link:focus-visible { background-size: 100% 2px; }

.cta {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-weight: var(--w-strong); font-size: var(--t-body);
  text-decoration: none; color: var(--ink);
  padding: var(--s-4) 0;
  border-bottom: 2px solid var(--rule-firm);
  transition: border-color var(--dur) var(--ease-out-quart), gap var(--dur) var(--ease-out-quart),
    transform 160ms var(--ease-out-quart);
}
/* The same line as a button (it opens something rather than going somewhere). */
button.cta { margin: 0; border-width: 0 0 2px; border-radius: 0; background: none; font-family: inherit; line-height: inherit; cursor: pointer; }
.cta:hover, .cta:focus-visible { border-bottom-color: var(--accent); gap: var(--s-5); }
.cta:hover .petal, .cta:focus-visible .petal { transform: rotate(14deg); }

/* The solid button is only ever the free demo; everything else that leads on is a .cta. */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-weight: var(--w-strong); font-size: var(--t-body); text-decoration: none;
  padding: var(--s-4) var(--s-6);
  background: var(--c-red); color: var(--c-white);
  border: 0; cursor: pointer;
  transition: background var(--dur) var(--ease-out-quart), gap var(--dur) var(--ease-out-quart),
    transform 160ms var(--ease-out-quart);
}
.btn:hover, .btn:focus-visible { background: var(--c-scarlet); gap: var(--s-4); }
.btn .petal { color: currentColor; }
.btn:hover .petal, .btn:focus-visible .petal { transform: rotate(14deg); }
/* Pressed: it gives a little under the finger, and comes straight back. */
.btn:active, .cta:active { transform: scale(0.97); }
.btn--quiet {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule-firm);
}
.btn--quiet:hover, .btn--quiet:focus-visible {
  background: transparent; box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-text);
}

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

.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--bg); color: var(--ink);
  border-bottom: 1px solid var(--rule);
  transition: background var(--dur) var(--ease-out-quart), border-color var(--dur) var(--ease-out-quart), color var(--dur) var(--ease-out-quart);
}
/* Over a hero the header starts invisible so the photograph reaches the top edge,
   then takes its ground back as soon as the page moves. */
body[data-hero] .header { background: transparent; border-bottom-color: transparent; }
body[data-hero] .header.is-stuck { background: var(--bg); border-bottom-color: var(--rule); }
/* Over the photograph, nav ink runs at full strength rather than muted. */
body[data-hero] .header:not(.is-stuck) .nav a { color: var(--ink); }
body[data-hero] .header:not(.is-stuck) .lang a { color: oklch(92.7% 0.007 5.6 / 0.78); }

.header__in {
  display: flex; align-items: center; gap: var(--s-6);
  min-height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; margin-inline-end: auto; }
.brand svg, .brand img { width: 30px; height: 28px; }
.brand__name { font-weight: var(--w-display); font-size: 1.15rem; letter-spacing: -0.02em; }

.nav { display: flex; align-items: center; gap: var(--s-6); }
.nav a {
  text-decoration: none; font-weight: var(--w-ui); font-size: var(--t-small);
  color: var(--ink-muted); padding-block: var(--s-2);
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease-out-quart), border-color var(--dur) var(--ease-out-quart);
}
.nav a:hover, .nav a:focus-visible { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.lang { display: flex; align-items: center; gap: var(--s-1); }
/* The languages are links to the same page in each language, so they work without scripts
   and crawlers can follow them to every version. */
.lang a {
  font: inherit; font-size: var(--t-label); font-weight: var(--w-ui);
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  background: none; border: 0; cursor: pointer; padding: var(--s-2) var(--s-2);
  color: var(--ink-faint-text);
  transition: color var(--dur) var(--ease-out-quart);
}
.lang a:hover { color: var(--ink); }
.lang a[aria-current="true"] { color: var(--accent-text); font-weight: var(--w-strong); }

.burger { display: none; background: none; border: 0; cursor: pointer; padding: var(--s-2);
  color: var(--ink); font: inherit; font-size: var(--t-small); font-weight: var(--w-ui); }

/* Mobile menu uses <dialog>, so it escapes the header's stacking context instead of
   being clipped by it. */
.menu { border: 0; padding: 0; max-width: none; max-height: none; width: 100%; height: 100%;
  background: var(--bg); color: var(--ink); }
.menu::backdrop { background: oklch(14.5% 0 0 / 0.7); }
.menu__in { display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-6) var(--gutter); height: 100%; }
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.menu a { font-size: var(--t-h2); font-weight: var(--w-display); letter-spacing: var(--track-h);
  text-decoration: none; }
.menu a[aria-current="page"] { color: var(--accent-text); }

/* The use-cases menu (2026-10-17, rebuilt 2026-10-18). "Use cases" has no page of its own: it is the
   button that opens a dark panel under the header. In it the three AIs Voronda offers sit small in one
   row (Tutor, Agent, Chat: the name and one line, each a link to where that AI is shown), and the
   four kinds of organisation under them, larger, each its drawing and name. site.js opens it on hover
   (a mouse) and on the button (a tap, Enter or Space); Escape, a tap outside or leaving closes it. In
   the phone menu the same links fold out under "Use cases". Without scripts the panel opens while the
   mouse is over it or focus is in it, and the footer lists the four kinds of organisation. */
.nav__uses { display: flex; align-items: center; }
.nav__trig, .menu__trig { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; cursor: pointer; }
.nav__trig { padding-block: var(--s-2); border-bottom: 2px solid transparent; font-size: var(--t-small); font-weight: var(--w-ui); color: var(--ink-muted);
  transition: color var(--dur) var(--ease-out-quart), border-color var(--dur) var(--ease-out-quart); }
.nav__trig:is(:hover, :focus-visible, [aria-expanded="true"]), .nav__uses:hover .nav__trig { color: var(--ink); }
.nav__trig[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
:is(.nav__trig, .menu__trig) svg { flex: none; width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round;
  stroke-linejoin: round; transition: transform var(--dur) var(--ease-out-quart); }
:is(.nav__trig, .menu__trig)[aria-expanded="true"] svg { transform: rotate(180deg); }
.uses { position: absolute; left: 0; right: 0; top: calc(100% + 1px); background: var(--bg-raised); color: var(--ink);
  border-bottom: 1px solid var(--rule); box-shadow: 0 2.5rem 3rem -2.5rem oklch(14.5% 0 0 / 0.8);
  transition: opacity 200ms var(--ease-out-quart), translate 260ms var(--ease-out-expo); }
@starting-style { .uses { opacity: 0; translate: 0 -0.5rem; } }
.uses[hidden], .menu__uses[hidden] { display: none; }
html:not(.js) .nav__uses:is(:hover, :focus-within) .uses[hidden] { display: block; }
.uses__in { display: grid; gap: var(--s-6); padding-block: var(--s-6); }
.uses__k { margin: 0 0 var(--s-2); font-size: var(--t-small); font-weight: var(--w-strong); font-variant-caps: all-small-caps;
  letter-spacing: 0.06em; color: var(--ink-muted); }
.uses__ai, .uses__list { display: grid; margin: 0; padding: 0; list-style: none; }
/* The AIs: three cells in the hairline grid, a rule over them and hairlines between; small. */
.uses__ai { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--hairline); }
.nav .uses__ai a { position: relative; display: grid; align-content: start; gap: 0.15rem; height: 100%; padding: var(--s-3) var(--s-5) var(--s-3) 0; border: 0; }
.nav .uses__ai li + li a { padding-inline-start: var(--s-5); border-inline-start: var(--hairline-soft); }
.uses__ai b { font-size: 1rem; font-weight: var(--w-strong); line-height: 1.3; color: var(--ink); transition: color var(--dur) var(--ease-out-quart); }
.uses__ai span { font-size: var(--t-small); line-height: 1.4; color: var(--ink-muted); }
.uses__ai a::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease-out-expo); }
.uses__ai a:is(:hover, :focus-visible) b, .uses__ai a[aria-current="page"] b { color: var(--accent-text); }
.uses__ai a:is(:hover, :focus-visible)::before, .uses__ai a[aria-current="page"]::before { transform: none; }
/* The four kinds of organisation: larger, the drawing over the name. */
.uses__list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s-5); }
.nav .uses__row { position: relative; display: grid; gap: var(--s-3); padding: 0 0 var(--s-3); border-bottom: 1px solid var(--rule);
  font-size: 1rem; font-weight: var(--w-strong); line-height: 1.3; }
.uses__row span { color: var(--ink); transition: color var(--dur) var(--ease-out-quart); }
.uses__row img { display: block; width: 100%; height: 8rem; object-fit: contain; padding: 0.25rem; background: var(--c-blush); }
.uses__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease-out-expo); }
.uses__row:is(:hover, :focus-visible) span { color: var(--accent-text); }
.uses__row:is(:hover, :focus-visible)::after { transform: none; }
.nav .uses__all { display: inline-flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); padding-block: var(--s-2);
  border-bottom: 2px solid var(--rule-firm); color: var(--ink); font-weight: var(--w-strong); }
.nav .uses__all:is(:hover, :focus-visible) { border-bottom-color: var(--accent); }
.menu .petal-list li:has(> .menu__trig) { align-items: center; }
.menu .petal-list li:has(> .menu__trig) > .petal { margin-top: 0; }
.menu__trig { width: 100%; justify-content: space-between; min-height: 2.75rem; font-size: var(--t-h2); font-weight: var(--w-display);
  letter-spacing: var(--track-h); text-align: start; color: var(--ink); }
.menu__trig[aria-current] { color: var(--accent-text); }
.menu__trig svg { width: 1.25rem; height: 1.25rem; }
.menu__uses { grid-column: 2 / -1; padding-bottom: var(--s-2); }
.menu__uses ul { margin: 0 0 var(--s-4); padding: 0; list-style: none; }
.menu .menu__uses li { display: block; }
.menu .menu__uses a { display: block; padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); font-size: var(--t-body);
  font-weight: var(--w-ui); letter-spacing: normal; }
.menu .menu__ai a { display: grid; gap: 0.1rem; }
.menu .menu__ai b { font-weight: var(--w-strong); }
.menu .menu__ai span { font-size: var(--t-small); color: var(--ink-muted); }

/* The four links, five languages and the demo button fit from 1100px in every language (it was
   set for five links, so there is room to spare); below that the header folds into the menu. */
@media (max-width: 1099px) {
  .nav, .header .lang { display: none; }
  .burger { display: inline-flex; align-items: center; gap: var(--s-2); }
}

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

.footer { border-top: 1px solid var(--rule); padding-block: var(--s-8) var(--s-7); }
.footer__grid {
  display: grid; gap: var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
/* The columns name themselves; their headings stay for screen readers only. */
.footer h2 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.footer ul { list-style: none; padding: 0; display: grid; gap: var(--s-3); margin-top: 0; }
.footer li { color: var(--ink-muted); font-size: var(--t-small); }
.footer li > ul { margin: var(--s-3) 0 0; padding-inline-start: var(--s-4); gap: var(--s-2); border-inline-start: var(--hairline-soft); }
.footer a { text-decoration: none; color: inherit; font-size: inherit; }
.footer a:hover { color: var(--ink); }
.footer__base {
  margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  font-size: var(--t-small); color: var(--ink-faint-text);
}

/* The proof line. This site genuinely makes no third-party request, so it can say so. */
.no-track { display: flex; align-items: center; gap: var(--s-3); margin-inline-end: auto; }
.no-track .petal { color: var(--accent); }

/* ---------- reveals ----------
   Scoped to .js, which an inline script in <head> adds. Without JavaScript the class
   never appears, these rules never apply, and the content is simply visible. Gating
   visibility on a class that only JS can add would leave the page blank whenever the
   script fails, is blocked, or is skipped by a crawler. */

.js [data-reveal] { opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* The browser draws its own parts (scrollbars, form controls, autofill) in the page's scheme. */
:root:has(body[data-ground="dark"]) { color-scheme: dark; }
:root:has(body[data-ground="light"]) { color-scheme: light; }
/* No double-tap-to-zoom delay on what can be tapped; pinch zoom still works. */
a, button, input, label, summary, [contenteditable] { touch-action: manipulation; }
/* A tap shows a faint red, not the browser's grey block; the pressed states do the rest. */
html { -webkit-tap-highlight-color: oklch(59.2% 0.241 29.2 / 0.18); }