/* The app's tokens, in mono. Dark follows the system unless the page says otherwise. */
:root {
  --color-canvas: oklch(100% 0 0);
  --color-ink: oklch(26% 0.05 264);
  --color-ink-dark: oklch(56% 0.014 260);
  --color-ink-light: oklch(84% 0.005 256);
  --color-ink-lighter: oklch(92% 0.003 254);
  --color-ink-lightest: oklch(96% 0.002 252);
  --color-link: oklch(54% 0.15 150);
  --color-negative: oklch(59% 0.19 38);
  --color-night: oklch(17% 0.02 232.58);
  --color-night-ink: oklch(96.02% 0.0034 260);
  --color-night-dim: oklch(73.97% 0.009 260);
  --color-night-line: oklch(30% 0.0178 260);
  --color-night-accent: oklch(74% 0.1293 256);
  --color-highlight: oklch(92% 0.12 95);
  --color-highlight-ink: oklch(26% 0.05 264);
  --lch-black: 0% 0 0;
  --shadow: 0 0 0 1px oklch(var(--lch-black) / 5%), 0 0.2em 0.2em oklch(var(--lch-black) / 5%),
            0 0.4em 0.4em oklch(var(--lch-black) / 5%), 0 0.8em 0.8em oklch(var(--lch-black) / 5%);

  /* System faces only: nothing is downloaded. The system's own sans for the words, its own mono for code */
  --font-text: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --font-size: max(1.1875rem, 1rem + 0.5vw);
  --size-display: clamp(2.4em, 6.5vw, 3.75em);
  --size-title: clamp(2em, 5.25vw, 3.125em);
  --size-heading: clamp(1.75em, 4.25vw, 2.5em);
  --size-lead: 1.12em;
  --size-small: 0.92em;
  --size-x-small: 0.82em;
  --radius: 8px;
  --column: 42em;
  --prose-width: 36em;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-end: max(16px, env(safe-area-inset-right, 0px));
}
@media (width >= 64em) {
  :root { --font-size: clamp(1.375rem, 1.7vw, 1.75rem); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-canvas: oklch(20% 0.0195 232.58);
    --color-ink: oklch(96.02% 0.0034 260);
    --color-ink-dark: oklch(73.97% 0.009 260);
    --color-ink-light: oklch(40% 0.0148 260);
    --color-ink-lighter: oklch(30% 0.0178 260);
    --color-ink-lightest: oklch(25% 0.0204 260);
    --color-link: oklch(74% 0.19 150);
    --color-negative: oklch(74% 0.15 40);
    --color-night: oklch(13% 0.02 232.58);
  --color-highlight: oklch(45% 0.09 95);
  --color-highlight-ink: oklch(98% 0.01 95);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-canvas: oklch(20% 0.0195 232.58);
  --color-ink: oklch(96.02% 0.0034 260);
  --color-ink-dark: oklch(73.97% 0.009 260);
  --color-ink-light: oklch(40% 0.0148 260);
  --color-ink-lighter: oklch(30% 0.0178 260);
  --color-ink-lightest: oklch(25% 0.0204 260);
  --color-link: oklch(74% 0.19 150);
  --color-negative: oklch(74% 0.15 40);
  --color-night: oklch(13% 0.02 232.58);
  --color-highlight: oklch(45% 0.09 95);
  --color-highlight-ink: oklch(98% 0.01 95);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; }
body {
  background: var(--color-canvas); color: var(--color-ink);
  font-family: var(--font-text); font-size: var(--font-size); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; text-wrap: balance; overflow-wrap: break-word; }
p { text-wrap: pretty; }
a { color: var(--color-link); text-decoration-thickness: 0.07em; text-underline-offset: 0.15em; }
@media (any-hover: hover) { a:hover { text-decoration: none; } }
:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }
mark {
  background: linear-gradient(transparent 12%, var(--color-highlight) 12%, var(--color-highlight) 88%, transparent 88%);
  color: var(--color-highlight-ink); padding-inline: 0.15em; margin-inline: -0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.scribble { position: relative; isolation: isolate; white-space: nowrap; }
.scribble__line {
  position: absolute; left: -0.08em; bottom: -0.12em; z-index: -1; width: calc(100% + 0.16em); height: 0.38em;
  overflow: visible; pointer-events: none;
}
.scribble__line path { stroke: var(--color-highlight); stroke-width: 5px; vector-effect: non-scaling-stroke; }
code { font-family: var(--font-mono); font-size: 0.92em; overflow-wrap: anywhere; background: var(--color-ink-lightest); padding: 0.1em 0.35em; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip-link { position: absolute; top: 0.5rem; left: var(--gutter); z-index: 1; translate: 0 -200%; }
.skip-link:focus { translate: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.5em 1.1em; border: 1px solid var(--color-ink-light); border-radius: var(--radius);
  background: var(--color-canvas); color: var(--color-ink); font: 600 1em var(--font-text);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn--link { background: var(--color-link); border-color: var(--color-link); color: var(--color-canvas); }
.btn--large { padding: 0.7em 1.4em; }
@media (any-hover: hover) { .btn:hover { filter: brightness(0.92); } }

.card { background: var(--color-canvas); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }

/* Three columns, the outer two equal, so the tagline sits at the true centre whatever the logo and buttons measure */
.header {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 2ch;
  padding-block: 0.6rem; padding-left: var(--gutter); padding-right: var(--gutter-end);
}
.header__logo { grid-column: 1; justify-self: start; color: var(--color-ink); font-size: 1.15em; font-weight: bold; letter-spacing: -0.01em; text-decoration: none; }
.header__tagline { display: none; grid-column: 2; min-width: 0; color: var(--color-ink-dark); font-size: var(--size-small); font-weight: 500; text-align: center; }
.header__actions { grid-column: 3; justify-self: end; display: flex; gap: 1ch; font-size: var(--size-small); }
@media (width >= 64em) { .header__tagline { display: block; } }
@media (width < 30em) { .header__actions .btn:first-child { display: none; } }

/* The logo is two words, so it stays on one line; on a phone the button does not fit beside it */
.header__logo { white-space: nowrap; }
@media (width < 36em) { .header__actions { display: none; } }

/* Auditans' frame, one centred column: a grey canvas holding white cards with Fizzy's shadow */
.canvas {
  display: flex; flex-direction: column; gap: clamp(2.75rem, 6vw, 4.25rem);
  padding-block: clamp(1.75rem, 5vw, 3.5rem); padding-left: var(--gutter); padding-right: var(--gutter-end);
  background: var(--color-ink-lightest);
}
.canvas:focus { outline: none; }
@media (width >= 64em) { .canvas { margin-inline: 1rem; border-radius: var(--radius); } }
.canvas > * { width: 100%; max-width: var(--column); margin-inline: auto; min-width: 0; }

.hero { text-align: center; display: grid; gap: 2.25em; }
.hero__kicker { font-size: var(--size-small); font-weight: 700; color: var(--color-ink-dark); margin-bottom: 0.5em; }
.hero__title { font-size: var(--size-display); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; }
.hero__title mark { background: none; color: var(--color-link); padding: 0; margin: 0; }
.hero__lead { max-width: var(--prose-width); margin: 0.9em auto 0; font-size: var(--size-lead); color: var(--color-ink-dark); }
.hero__actions { margin-top: 1.75em; }
.hero__links {
  width: fit-content; max-width: 100%; margin: 1.75em auto 0; padding: 0; list-style: none;
  display: grid; gap: 0.25em; text-align: start; font-size: var(--size-small);
}
.hero__links a { font-weight: bold; }
.hero__links--after { margin-top: 0; display: block; }

.block { display: grid; gap: 1.35em; }
.block__head { text-align: center; }
.block__title { font-size: var(--size-heading); max-width: 22em; margin-inline: auto; margin-top: 0.5em; }
.block__lead { max-width: var(--prose-width); margin: 0.5em auto 0; font-size: var(--size-lead); color: var(--color-ink-dark); }
.block__more { text-align: center; font-weight: 700; }

.prose { display: grid; gap: 0.9em; max-width: var(--prose-width); margin-inline: auto; text-align: center; }

/* A section's picture on a card, its caption under it */
.figure { overflow: hidden; }
.figure img { display: block; width: 100%; height: auto; }
.figure figcaption { padding: 0.75em 1.35em; text-align: center; color: var(--color-ink-dark); font-size: var(--size-small); }

/* Letter: a sheet of paper on two more, each a little askew */
.letter {
  position: relative; isolation: isolate; max-width: var(--column); margin-inline: auto;
  padding: clamp(1.25rem, 4vw, 2.25rem); border-radius: var(--radius); background: var(--color-canvas); box-shadow: var(--shadow);
  font-size: 0.95em;
}
.letter::before, .letter::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--color-canvas); box-shadow: var(--shadow);
}
.letter::before { rotate: -1.2deg; }
.letter::after { rotate: 0.9deg; }
.letter p + p { margin-top: 0.75em; }
.letter__signature { display: flex; align-items: flex-end; gap: 0.85em; margin-top: 1.5em; font-size: var(--size-small); }
.letter__picture { flex: none; width: 3em; height: 3em; border-radius: 50%; }
.letter__autograph { display: block; width: auto; max-width: 100%; height: 3.125em; margin-inline-start: -0.4em; }
.letter .letter__signature p { margin: 0; }
.letter__role { font-size: var(--size-small); color: var(--color-ink-dark); }

/* The letter's askew sheets poke past a phone's edge, which would let the page scroll sideways */
.canvas { overflow-x: clip; }

/* Google Calendar's booking page on a card, at the height it lays itself out for */
.appointment { overflow: hidden; }
.appointment__frame { display: block; width: 100%; height: 800px; border: 0; }

/* The Yes page: a question in bold, its Sí on a highlight, the answer under it */
.yes__title { font-size: var(--size-heading); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; }
.yes__list { list-style: none; padding: 0; width: 100%; max-width: var(--prose-width); margin-inline: auto; display: grid; gap: 0.9em; font-size: var(--size-small); }
.yes__list li { position: relative; padding-inline-start: 1.8em; line-height: 1.45; }
/* The check is cut out of the circle, so it shows the canvas in either theme */
.yes__list li::before {
  content: ""; position: absolute; top: 0.18em; left: 0; width: 1.15em; height: 1.15em; background: var(--color-link);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cmask id='m'%3E%3Crect width='16' height='16' fill='white'/%3E%3Cpath d='M4.2 8.6l2.5 2.5 5.1-5.6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='8' cy='8' r='8' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.yes__question::after {
  content: "Sí."; display: inline-block; margin-inline-start: 0.4em; padding: 0 0.3em;
  background: var(--color-highlight); color: var(--color-highlight-ink); font-size: 0.8em; font-weight: 900; letter-spacing: 0.03em;
}
.yes__answer { color: var(--color-ink-dark); }

/* The questions, one folding row each on a card, as auditans.com lays them out */
.faq {
  max-inline-size: 44em;
  margin-inline: auto;
  padding-inline: 1.5em;
  border-radius: var(--radius);
  background-color: var(--color-canvas);
  box-shadow: var(--shadow);
}

.faq__item + .faq__item {
  border-block-start: 1px solid var(--color-ink-lighter);
}

.faq__item summary {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding-block: 1em;
  font-weight: 700;
  cursor: pointer;

  &::after {
    content: "+";
    color: var(--color-ink-dark);
    font-weight: 400;
  }
}

.faq__item[open] summary::after {
  content: "−";
}

.faq__answer {
  display: grid;
  gap: 0.6em;
  padding-block-end: 1.1em;
  color: var(--color-ink-dark);
}

/* A machine, the questions or the history: a narrow column of prose under a centred header */
.canvas > .article { max-width: var(--column); display: grid; gap: 1em; }
.article { grid-template-columns: minmax(0, 1fr); }
.article > * { min-width: 0; }
.article__header { text-align: center; }
.article__kicker { font-size: var(--size-small); font-weight: 700; }
.article__title { font-size: var(--size-title); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; margin-top: 0.15em; }
.article__lead { font-size: var(--size-lead); color: var(--color-ink-dark); margin-top: 0.35em; }
.article__heading { font-size: 1.35em; font-weight: 900; letter-spacing: -0.01em; margin-bottom: 0.2em; }
/* Each section after the first sits apart from the one above it */
.article > section + section { margin-top: 1em; }
.article__answer { color: var(--color-ink); overflow-wrap: anywhere; }
.article__answer + .article__answer { margin-top: 0.5em; }
.article__list { display: grid; gap: 0.35em; padding-inline-start: 1.25em; }
.article__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75em; margin-top: 1em; }

/* The history as one line down the page, a round marker on it for each year */
.timeline { position: relative; padding-inline-start: 2em; }
.timeline::before { content: ""; position: absolute; top: 0.5em; bottom: 0.5em; left: calc(0.5em - 1px); width: 2px; background: var(--color-ink-light); }
.timeline > section { position: relative; }
.timeline > section::before {
  content: ""; position: absolute; top: 0.3em; left: -2em; width: 1em; height: 1em; border-radius: 50%;
  background: var(--color-link); box-shadow: 0 0 0 3px var(--color-ink-lightest);
}
@media (width >= 64em) {
  .timeline { padding-inline-start: 3em; }
  .timeline::before { left: calc(0.75em - 1px); }
  .timeline > section::before { left: -2.75em; width: 1.5em; height: 1.5em; top: 0.1em; }
}

/* A machine's figures on a card, one row each: the heading in a column of its own once the row has room for it */
.specs { display: grid; gap: 0.6em; padding: 1em 1.35em; font-size: var(--size-small); }
.specs > div { display: grid; gap: 0 1ch; }
.specs dt { font-weight: 700; color: var(--color-ink-dark); }
.specs dd { margin: 0; }
@media (width >= 64em) { .specs > div { grid-template-columns: 8em minmax(0, 1fr); } }

/* The machines, one card each, two abreast once there is room */
.models { display: grid; gap: 1em; padding: 0; list-style: none; }
.model { display: grid; gap: 0.3em; align-content: start; padding: 1em 1.35em; }
.model h3 { font-size: 1.1em; }
.model h3 a { color: inherit; text-decoration: none; }
.model__capacity { font-size: var(--size-small); font-weight: 700; color: var(--color-link); }
.model p { color: var(--color-ink-dark); font-size: var(--size-small); }
@media (any-hover: hover) { .model h3 a:hover { text-decoration: underline; } }
@media (width >= 64em) { .models { grid-template-columns: 1fr 1fr; } }

/* A machine's photo heads its card, edge to edge, on white in either scheme */
.model__image { display: block; width: calc(100% + 2.7em); height: auto; margin: -1em -1.35em 0.5em; border-radius: var(--radius) var(--radius) 0 0; background: oklch(100% 0 0); }

.footer {
  display: grid; justify-items: center; gap: 1.75em; text-align: center;
  padding-block: 2.75em 2.25em; padding-left: var(--gutter); padding-right: var(--gutter-end);
}
.footer__signoff { font-size: var(--size-heading); }
.footer__nav { display: grid; gap: 0.9em; width: 100%; max-width: 40em; }
.footer__heading { margin-bottom: 0.25em; font-size: var(--size-x-small); font-weight: 900; letter-spacing: -0.25px; text-transform: uppercase; color: var(--color-ink-dark); }
.footer__heading a { color: inherit; text-decoration: none; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.1em 0.9ch; padding: 0; list-style: none; font-weight: 900; font-variant-caps: all-small-caps; letter-spacing: -0.25px; }
.footer__links a { color: var(--color-link); text-decoration: none; }
@media (any-hover: hover) { .footer__links a:hover, .footer__heading a:hover { color: var(--color-ink); } }
@media (width < 40em) {
  .footer__nav { font-size: var(--size-small); }
}
.footer__legal { font-size: var(--size-x-small); color: var(--color-ink-dark); }

.contact { display: grid; gap: 0.35em; }
.contact__name { font-size: var(--size-heading); }

/* The footer's small print */
.notes { display: grid; gap: 0.75em; width: 100%; max-width: 48em; text-align: start; font-size: 0.7em; color: var(--color-ink-dark); }
.notes__title { font-size: 1em; font-weight: 900; letter-spacing: -0.25px; text-transform: uppercase; }