/* ==========================================================================
   Evince Design System v1
   --------------------------------------------------------------------------
   Implementation of `Evince Design System.dc.html`.

   This file is the shippable half: design tokens, base styles, motion
   vocabulary and reusable components. Any Evince page can link it on its own.
   The spec document's own page chrome lives in `design-system.css`.
   ========================================================================== */

/* The two brand families. Kept here rather than in a <link> so the stylesheet
   is self-contained — anything consuming this file gets the real type. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@400;500;700&display=swap");

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Palette — the seven earth tones, plus the two neutral grounds. */
  --ev-rust:       #7A3E2B; /* dark surfaces, deep text */
  --ev-sand:       #E7D8C5; /* light surfaces */
  --ev-terracotta: #C86A4A; /* the one hero accent */
  --ev-mustard:    #D4A32A; /* emphasis on dark only */
  --ev-teal:       #3D6D6E; /* secondary, data */
  --ev-olive:      #6B705C; /* muted, supporting text */
  --ev-clay:       #D48D7A; /* soft, tertiary, on rust */
  --ev-cream:      #FDFBF7; /* cards on sand */
  --ev-page:       #F2EDE6; /* the page ground behind a sheet */

  /* Semantic roles — prefer these over raw palette names. */
  --ev-text-deep:      var(--ev-rust);
  --ev-text-muted:     var(--ev-olive);
  --ev-text-on-rust:   var(--ev-sand);
  --ev-text-on-rust-muted: rgba(231, 216, 197, 0.9);
  --ev-accent:         var(--ev-terracotta);
  --ev-accent-on-rust: var(--ev-mustard);

  /* Rules and dividers are always rust at low opacity — never accent bars. */
  --ev-rule:         rgba(122, 62, 43, 0.14);
  --ev-rule-strong:  rgba(122, 62, 43, 0.16);
  --ev-rule-link:    rgba(122, 62, 43, 0.30);
  --ev-rule-link-2:  rgba(122, 62, 43, 0.35);
  --ev-rule-on-rust: rgba(231, 216, 197, 0.35);

  /* Type */
  --ev-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --ev-font-ui: "Space Grotesk", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;

  /* Scale. Upper bounds are the spec sizes, reached at >= ~1240px. */
  --ev-size-display: clamp(2.75rem, 7.75vw, 6rem);    /* 96 */
  --ev-size-h1:      clamp(2.125rem, 4.2vw, 3.25rem); /* 52 */
  --ev-size-h2:      clamp(1.625rem, 2.75vw, 2.125rem); /* 34 */
  --ev-size-quote:   clamp(1.375rem, 2.4vw, 1.875rem); /* 30 */
  --ev-size-lead:    1.25rem;   /* 20 */
  --ev-size-body:    1rem;      /* 16 */
  --ev-size-small:   0.9375rem; /* 15 */
  --ev-size-fine:    0.8125rem; /* 13 */
  --ev-size-eyebrow: 0.75rem;   /* 12 */

  --ev-leading-display: 0.95;
  --ev-leading-h1: 1.1;
  --ev-leading-h2: 1.2;
  --ev-leading-lead: 1.6;
  --ev-leading-body: 1.65;
  --ev-leading-loose: 1.9;

  --ev-tracking-wordmark: 0.14em;
  --ev-tracking-eyebrow: 0.2em;
  --ev-tracking-tagline: 0.42em;

  /* Space */
  --ev-space-1: 6px;
  --ev-space-2: 10px;
  --ev-space-3: 14px;
  --ev-space-4: 20px;
  --ev-space-5: 26px;
  --ev-space-6: 36px;
  --ev-space-7: 48px;
  --ev-space-8: 64px;
  --ev-space-9: 72px;

  /* Shape */
  --ev-radius-card: 20px;
  --ev-radius-tile: 26%; /* of tile size */
  --ev-radius-pill: 999px;

  --ev-shadow-card:       0 18px 44px rgba(122, 62, 43, 0.12);
  --ev-shadow-sheet:      0 24px 60px rgba(122, 62, 43, 0.14);
  --ev-shadow-btn-hover:  0 12px 26px rgba(122, 62, 43, 0.28);
  --ev-shadow-btn-active: 0 2px 8px rgba(122, 62, 43, 0.22);

  /* Motion — one easing, everywhere. */
  --ev-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ev-dur-micro: 250ms;
  --ev-dur-press: 90ms;
  --ev-dur-entrance: 900ms;
  --ev-dur-entrance-fast: 600ms;
  --ev-stagger: 90ms;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--ev-page);
  color: var(--ev-text-deep);
  font-family: var(--ev-font-ui);
  font-size: var(--ev-size-body);
  line-height: var(--ev-leading-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ev-text-deep);
  text-decoration: none;
}

a:hover {
  color: var(--ev-accent);
}

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

img,
svg {
  max-width: 100%;
}

.ev-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Type utilities
   -------------------------------------------------------------------------- */

.ev-display,
.ev-h1,
.ev-h2,
.ev-quote {
  font-family: var(--ev-font-display);
  font-weight: 400;
  color: var(--ev-text-deep);
  margin: 0;
}

.ev-display { font-size: var(--ev-size-display); line-height: var(--ev-leading-display); }
.ev-h1      { font-size: var(--ev-size-h1);      line-height: var(--ev-leading-h1); }
.ev-h2      { font-size: var(--ev-size-h2);      line-height: var(--ev-leading-h2); }
.ev-quote   { font-size: var(--ev-size-quote);   line-height: 1.3; }

.ev-quote > p { margin: 0; }

/* Italic is the only emphasis in the display face, and it takes the accent. */
.ev-display em,
.ev-h1 em,
.ev-h2 em,
.ev-quote em {
  font-family: var(--ev-font-display);
  font-style: italic;
  color: var(--ev-accent);
}

.ev-lead {
  margin: 0;
  font-size: var(--ev-size-lead);
  line-height: var(--ev-leading-lead);
  color: var(--ev-text-deep);
  max-width: 56ch;
}

.ev-body {
  margin: 0;
  font-size: var(--ev-size-body);
  line-height: var(--ev-leading-body);
  color: var(--ev-text-muted);
  max-width: 64ch;
}

.ev-fine {
  margin: 0;
  font-size: var(--ev-size-fine);
  line-height: var(--ev-leading-body);
  color: var(--ev-text-muted);
}

/* Eyebrow: 12px, uppercase, 0.2em tracking.
   Olive on cream, rust on sand, sand on rust. */
.ev-eyebrow {
  margin: 0;
  font-family: var(--ev-font-ui);
  font-size: var(--ev-size-eyebrow);
  font-weight: 400;
  letter-spacing: var(--ev-tracking-eyebrow);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ev-text-muted);
}

.ev-eyebrow--on-sand { color: var(--ev-rust); }
.ev-eyebrow--on-rust { color: var(--ev-sand); }

/* Rule lists — the "never do this" / "always do this" blocks. */
.ev-rules {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ev-size-fine);
  line-height: var(--ev-leading-loose);
  color: var(--ev-text-muted);
}

.ev-rules--loose { line-height: 2; }

/* --------------------------------------------------------------------------
   4. Surfaces
   -------------------------------------------------------------------------- */

/* One dominant tone per surface. Sections alternate rust <-> sand. */
.ev-surface--rust  { background: var(--ev-rust);  color: var(--ev-text-on-rust); }
.ev-surface--sand  { background: var(--ev-sand);  color: var(--ev-text-deep); }
.ev-surface--cream { background: var(--ev-cream); color: var(--ev-text-deep); }

/* A surface sets the colour context for everything inside it, so a section
   only needs the right Surface around it — no per-element colour props. */
.ev-surface--rust .ev-fine,
.ev-surface--rust .ev-body,
.ev-surface--rust .ev-lead {
  color: var(--ev-text-on-rust-muted);
}

.ev-surface--rust .ev-display,
.ev-surface--rust .ev-h1,
.ev-surface--rust .ev-h2,
.ev-surface--rust .ev-quote {
  color: var(--ev-cream);
}

/* Terracotta emphasis has too little contrast on rust, and the palette already
   names mustard as the emphasis colour on dark grounds. */
.ev-surface--rust .ev-display em,
.ev-surface--rust .ev-h1 em,
.ev-surface--rust .ev-h2 em,
.ev-surface--rust .ev-quote em {
  color: var(--ev-mustard);
}

.ev-surface--rust .ev-eyebrow { color: var(--ev-sand); }
.ev-surface--sand .ev-eyebrow { color: var(--ev-rust); }

/* Brand glyphs default to rust, which is invisible on a rust ground. Tiles
   set their own mark colour later in the cascade, so they are unaffected. */
.ev-surface--rust .ev-mark,
.ev-surface--rust .ev-open-circle {
  color: var(--ev-sand);
}

.ev-surface--rust .ev-wordmark { color: var(--ev-cream); }

/* Hairline panel — the default enclosure. No radius, no shadow. */
.ev-panel {
  display: flex;
  flex-direction: column;
  gap: var(--ev-panel-gap, var(--ev-space-4));
  border: 1px solid var(--ev-rule);
  padding: var(--ev-space-6);
}

/* A panel sitting on rust carries no rule — the ground already separates it. */
.ev-panel.ev-surface--rust { border-color: transparent; }

.ev-panel--gap-sm { --ev-panel-gap: var(--ev-space-2); }
.ev-panel--gap-md { --ev-panel-gap: var(--ev-space-3); }
.ev-panel--gap-lg { --ev-panel-gap: 24px; }

/* Card — cream on sand. Radius 20, border rust 14%, shadow rust 12%. */
.ev-card {
  background: var(--ev-cream);
  border: 1px solid var(--ev-rule);
  border-radius: var(--ev-radius-card);
  box-shadow: var(--ev-shadow-card);
  padding: 18px var(--ev-space-4);
}

/* Cards on rust are a sand-white overlay rather than a fill. */
.ev-card--on-rust {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--ev-rule-on-rust);
  box-shadow: none;
  color: var(--ev-text-on-rust);
}

/* --------------------------------------------------------------------------
   5. Logo system
   -------------------------------------------------------------------------- */

/* Wordmark: EVIN + the open C + E. The C is a circle with its right side
   removed, rotated so the opening faces the join. Colour comes from
   `color`, so a reversed lockup is just a colour change. */
.ev-wordmark {
  --ev-wordmark-size: 54px;
  display: inline-flex;
  align-items: baseline;
  font-family: var(--ev-font-display);
  font-weight: 400;
  font-size: var(--ev-wordmark-size);
  letter-spacing: var(--ev-tracking-wordmark);
  line-height: 1;
  color: var(--ev-rust);
  /* Clearspace: one circle-width on all sides. */
  --ev-wordmark-clearspace: calc(var(--ev-wordmark-size) * 0.78);
}

.ev-wordmark--reversed { color: var(--ev-cream); }

.ev-wordmark__c {
  position: relative;
  display: inline-block;
  width: 0.78em;
  height: 0.72em;
  margin: 0 0.14em 0 0.03em;
}

.ev-wordmark__c::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 0.06em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(-42deg);
}

/* Minimum size guard, expressed as the documented 18px cap height. */
.ev-wordmark--min { --ev-wordmark-size: 26px; }

/* The mark: two open circles linked at their openings. The circle you leave
   sits on the left at 55%; the circle you enter is at full strength. */
.ev-mark {
  --ev-mark-size: 64px;
  --ev-mark-stroke: 5px;
  --ev-mark-fade: 0.55;
  position: relative;
  display: inline-block;
  width: calc(var(--ev-mark-size) * 1.66);
  height: var(--ev-mark-size);
  color: var(--ev-rust);
}

.ev-mark::before,
.ev-mark::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--ev-mark-size);
  height: var(--ev-mark-size);
  border: var(--ev-mark-stroke) solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}

.ev-mark::before {
  left: 0;
  transform: rotate(-42deg);
  opacity: var(--ev-mark-fade);
}

.ev-mark::after {
  right: 0;
  transform: rotate(138deg);
}

.ev-mark--sm { --ev-mark-size: 36px; --ev-mark-stroke: 3px; }

/* Tiles: rust, terracotta or sand fields only. Radius 26% of tile size. */
.ev-tile {
  --ev-tile-size: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ev-tile-size);
  height: var(--ev-tile-size);
  border-radius: var(--ev-radius-tile);
}

.ev-tile .ev-mark {
  --ev-mark-size: calc(var(--ev-tile-size) * 0.435);
  --ev-mark-stroke: calc(var(--ev-tile-size) * 0.048);
  --ev-mark-fade: 0.65;
}

.ev-tile--rust       { background: var(--ev-rust); }
.ev-tile--rust       .ev-mark { color: var(--ev-sand); }
.ev-tile--terracotta { background: var(--ev-terracotta); }
.ev-tile--terracotta .ev-mark { color: var(--ev-cream); }
.ev-tile--sand       { background: var(--ev-sand); }
.ev-tile--sand       .ev-mark { color: var(--ev-rust); }

/* --------------------------------------------------------------------------
   6. Graphic language
   -------------------------------------------------------------------------- */

/* Numbered circles. Fixed colour order: terracotta, teal, olive, clay, mustard.
   Light text on 1-3, rust text on 4-5. */
.ev-num {
  --ev-num-size: 44px;
  --ev-num-font: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--ev-num-size);
  height: var(--ev-num-size);
  border-radius: 50%;
  font-family: var(--ev-font-ui);
  font-size: var(--ev-num-font);
  font-weight: 700;
  line-height: 1;
}

.ev-num--1 { background: var(--ev-terracotta); color: var(--ev-cream); }
.ev-num--2 { background: var(--ev-teal);       color: var(--ev-cream); }
.ev-num--3 { background: var(--ev-olive);      color: var(--ev-cream); }
.ev-num--4 { background: var(--ev-clay);       color: var(--ev-rust); }
.ev-num--5 { background: var(--ev-mustard);    color: var(--ev-rust); }

.ev-num--sm { --ev-num-size: 34px; --ev-num-font: 15px; }

/* The open circle: bullet, diagram node, progress glyph.
   The opening faces the direction of travel — right by default. */
.ev-open-circle {
  --ev-open-size: 44px;
  --ev-open-stroke: 3.5px;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--ev-open-size);
  height: var(--ev-open-size);
  color: var(--ev-rust);
}

.ev-open-circle::before {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--ev-open-stroke) solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(-42deg);
}

/* --------------------------------------------------------------------------
   7. Buttons and links
   -------------------------------------------------------------------------- */

/* Primary: terracotta pill, cream text. Lifts 2px on hover, presses on click.
   Never two primaries side by side. */
.ev-btn {
  --ev-btn-bg: var(--ev-terracotta);
  --ev-btn-fg: var(--ev-cream);
  display: inline-block;
  background: var(--ev-btn-bg);
  border: 0;
  border-radius: var(--ev-radius-pill);
  padding: 14px 32px;
  font-family: var(--ev-font-ui);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  transition:
    transform var(--ev-dur-micro) var(--ev-ease),
    box-shadow var(--ev-dur-micro) var(--ev-ease);
}

/* Held at higher specificity than the base `a:hover` colour change —
   the pill never changes colour, only elevation. */
.ev-btn,
.ev-btn:hover,
.ev-btn:focus,
.ev-btn:active {
  color: var(--ev-btn-fg);
}

.ev-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--ev-shadow-btn-hover);
}

.ev-btn:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: var(--ev-shadow-btn-active);
  transition-duration: var(--ev-dur-press);
}

/* Not in the source rulebook — a real button needs a disabled state. Kept
   restrained: the pill dims and stops responding, no colour change. */
.ev-btn:disabled,
.ev-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

.ev-btn:disabled:hover,
.ev-btn:disabled:active,
.ev-btn[aria-disabled="true"]:hover {
  transform: none;
  box-shadow: none;
}

/* On rust the primary flips to mustard — the only place mustard fills a shape. */
.ev-btn--on-rust {
  --ev-btn-bg: var(--ev-mustard);
  --ev-btn-fg: var(--ev-rust);
}

.ev-btn--on-rust:focus-visible { outline-color: var(--ev-mustard); }

/* Secondary: plain text on a hairline rule, with the accent wiping in left to
   right and an arrow that travels 5px right. The wipe is the house treatment —
   the only one. It travels rightward, the direction of the opening.
   `--u` is the hover switch; children read it so several parts move together
   off one state change, and nothing has to animate a colour to do it. */
.ev-link {
  --u: 0;
  --ev-link-rule: var(--ev-rule-link);
  --ev-link-accent: var(--ev-accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px 9px;
  font-size: var(--ev-size-body);
  color: var(--ev-text-deep);
}

/* The resting hairline. */
.ev-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ev-link-rule);
}

/* The accent, redrawn from the left on hover. */
.ev-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ev-link-accent);
  transform: scaleX(var(--u));
  transform-origin: left;
  transition: transform 300ms var(--ev-ease);
}

.ev-link:hover,
.ev-link:focus-visible {
  --u: 1;
  color: var(--ev-text-deep);
}

.ev-link__arrow {
  display: inline-block;
  transform: translateX(calc(var(--u) * 5px));
  transition: transform var(--ev-dur-micro) var(--ev-ease);
}

/* On rust the accent is mustard — terracotta has too little contrast there,
   and mustard is the palette's emphasis colour on dark. The text colour is
   constant either way: only the rule and the arrow move. */
.ev-link--on-rust {
  --ev-link-rule: var(--ev-rule-on-rust);
  --ev-link-accent: var(--ev-mustard);
  color: var(--ev-sand);
}

.ev-link--on-rust:hover,
.ev-link--on-rust:focus-visible { color: var(--ev-sand); }

.ev-link--on-rust:focus-visible { outline-color: var(--ev-mustard); }

/* --------------------------------------------------------------------------
   8. List row — the sequence pattern
   -------------------------------------------------------------------------- */

.ev-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ev-list-row {
  display: grid;
  grid-template-columns: 62px 1fr 1fr;
  gap: 28px;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid var(--ev-rule-strong);
}

.ev-list > .ev-list-row:last-child {
  border-bottom: 1px solid var(--ev-rule-strong);
}

.ev-list-row .ev-num { --ev-num-size: 46px; }

.ev-list-row__title {
  margin: 0;
  font-family: var(--ev-font-ui);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ev-text-deep);
}

.ev-list-row__desc {
  margin: 0;
  font-size: var(--ev-size-small);
  line-height: var(--ev-leading-lead);
  color: var(--ev-text-muted);
}

/* --------------------------------------------------------------------------
   9. Motion
   -------------------------------------------------------------------------- */

@keyframes ev-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes ev-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes ev-word {
  0%, 2%    { opacity: 0; transform: translateY(16px); }
  10%       { opacity: 1; transform: translateY(0); }
  86%       { opacity: 1; transform: translateY(0); }
  94%, 100% { opacity: 0; transform: translateY(0); }
}

/* The handover — the circle you leave draws first, right to left, then
   settles to 55% as the circle you enter draws itself left to right. */
@keyframes ev-hand-l {
  0%        { stroke-dasharray: 0 100; opacity: 0; }
  4%        { opacity: 1; }
  28%       { stroke-dasharray: 75 25; opacity: 1; }
  42%       { stroke-dasharray: 75 25; opacity: 0.55; }
  88%       { stroke-dasharray: 75 25; opacity: 0.55; }
  96%, 100% { stroke-dasharray: 75 25; opacity: 0; }
}

@keyframes ev-hand-r {
  0%, 34%   { stroke-dasharray: 0 100; opacity: 0; }
  38%       { opacity: 1; }
  62%       { stroke-dasharray: 75 25; opacity: 1; }
  88%       { stroke-dasharray: 75 25; opacity: 1; }
  96%, 100% { stroke-dasharray: 75 25; opacity: 0; }
}

@keyframes ev-wipe {
  0%   { transform: scaleX(0); }
  35%  { transform: scaleX(1); }
  88%  { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

@keyframes ev-pop {
  0%, 4%    { opacity: 0; transform: scale(0.55); }
  14%       { opacity: 1; transform: scale(1.04); }
  20%       { transform: scale(1); }
  84%       { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes ev-type {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ev-handc {
  from { stroke-dasharray: 0 100; }
  to   { stroke-dasharray: 75 25; }
}

/* Entrance. Stagger siblings by 90ms, left to right, via `--i`. */
.ev-rise {
  animation: ev-rise var(--ev-dur-entrance) var(--ev-ease) both;
  animation-delay: calc(var(--i, 0) * var(--ev-stagger));
}

/* The handover, used once per page — hero, loading or confirmation.
   Never decorative wallpaper. */
.ev-handover {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  color: var(--ev-sand);
}

.ev-handover__circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
}

.ev-handover__circle--leave { animation: ev-hand-l 5s var(--ev-ease) infinite; }
.ev-handover__circle--enter { animation: ev-hand-r 5s var(--ev-ease) infinite; }

/* Entrance wordmark — the machine types the letters, then the hand draws
   the circle into the gap it left. Hero and loading state only. */
.ev-wordmark--typed > span {
  animation: ev-type 0.01s linear both;
}

/* Each letter is its own flex item here, so the container's letter-spacing
   already supplies the gap after every one. The source doc also set an explicit
   margin-left per letter, which double-counted the tracking and made the
   entrance lockup 16% wider than the static one it is supposed to resolve into. */
.ev-wordmark--typed > span:nth-child(1) { animation-delay: 0s; }
.ev-wordmark--typed > span:nth-child(2) { animation-delay: 0.35s; }
.ev-wordmark--typed > span:nth-child(3) { animation-delay: 0.7s; }
.ev-wordmark--typed > span:nth-child(4) { animation-delay: 1.05s; }
.ev-wordmark--typed > span:nth-child(6) { animation-delay: 1.4s; }

.ev-wordmark--typed .ev-wordmark__c {
  margin: 0 0.14em 0 0.03em;
  animation: none;
}

/* The static C is replaced by a stroked ellipse that can be line-drawn. */
.ev-wordmark--typed .ev-wordmark__c::before { content: none; }

.ev-wordmark__draw {
  position: absolute;
  inset: -6.7%;
  width: 113.4%;
  height: 116.7%;
  overflow: visible;
}

.ev-wordmark__draw ellipse {
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
  animation: ev-handc 1.3s var(--ev-ease) 1.85s both;
}

/* Micro-interactions. */
.ev-pop {
  animation: ev-pop 4.5s infinite;
  animation-delay: calc(var(--i, 0) * var(--ev-stagger));
}

.ev-rule-wipe {
  height: 2px;
  background: var(--ev-terracotta);
  transform-origin: left;
  animation: ev-wipe 4.5s infinite;
}

/* Everything obeys prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    /* Without these a staggered entrance still assembles over its delay window,
       which is exactly the motion the user asked not to see. Both are needed:
       entrances run on animations, scroll reveals run on transitions. */
    animation-delay: 0s !important;
    transition-delay: 0s !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .ev-panel {
    padding: var(--ev-space-5);
  }
}

@media (max-width: 760px) {
  .ev-list-row {
    grid-template-columns: 46px 1fr;
    gap: 14px 20px;
  }

  .ev-list-row__desc {
    grid-column: 2;
  }

  .ev-panel {
    padding: var(--ev-space-5) var(--ev-space-4);
  }
}