/*
  Ink & Margin: an edited manuscript. Paper, ink, one vermilion pen.
  Instrument Serif (display) + Switzer (base.css). Red jobs: the primary
  call, the active state, the pen marks. Contrast table: tests/theme-ink.
  Motion: transform and opacity only, off under reduced motion.
*/

@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/InstrumentSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */

html[data-ui="ink"] {
  --bg: #f5efe3;
  --tint: #ebe2d0;
  --ink: #1e1914;
  --muted: #5c5249;
  --line: #d3c8b6;
  --rule-strong: #8a7f73;
  --accent: #be3418;
  --accent-strong: #9f2b13;
  --on-accent: #fff;
  --field: #fffdf8;
  /* No dark bands in Ink: "dark" sections and the footer stay on paper. */
  --bg-dark: var(--bg);
  --ink-on-dark: var(--ink);
  --muted-on-dark: var(--muted);
  --line-on-dark: var(--line);
  --accent-on-dark: var(--accent);
  /* Consent bar: a paper slip under an ink rule. */
  --consent-bg: var(--field);
  --consent-ink: var(--ink);
  --consent-btn-bg: var(--ink);
  --consent-btn-ink: var(--field);
  --consent-rule: 1px solid var(--ink);
  --consent-focus: var(--accent);
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --radius: 2px;
  --col-gap: 1.5rem;
  --pen: cubic-bezier(0.45, 0.05, 0.25, 1);
  --display-l: clamp(1.75rem, 1.45rem + 1.3vw, 2.75rem);
  --display-m: clamp(1.5rem, 1.4rem + 0.4vw, 1.75rem);

  /* Pen marks, drawn once. */
  --pen-under: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 7C52 3 122 2 198 5M26 10C84 8 138 8 176 9' fill='none' stroke='%23BE3418' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
  --pen-stroke: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'><path d='M2 5C30 2 66 3 98 4' fill='none' stroke='%23BE3418' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
  --pen-circle: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'><path d='M10 32C6 14 40 4 62 6C88 8 98 22 95 36C92 52 62 58 42 56C18 54 2 44 8 26C11 17 22 11 36 8' fill='none' stroke='%23BE3418' stroke-width='1.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
  --pen-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26'><path d='M3 14l9 9L31 3' fill='none' stroke='%23BE3418' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --pen-llama: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='8 -6 94 120' fill='none' stroke-linecap='round' stroke-linejoin='round'><path stroke='%231E1914' stroke-width='2.3' d='M60 55Q57 51 54 55Q50 51 46 56Q42 52 38 57Q34 53 30 58Q26 54 22 60C18 58 13 61 15 66C17 70 20 70 22 74C24 86 26 98 28 110L33 110L34 84C44 86 56 86 66 83L68 110L73 110C73 96 72 84 73 72C73 68 72 64 72 61M60 57C61 45 61 33 63 21L62 9L67 17L70 7L72 17C79 16 87 19 91 25C94 29 91 33 86 32C81 32 77 34 75 38C73 46 72 54 72 62'/><circle cx='79' cy='23' r='1.9' fill='%231E1914'/><path stroke='%23BE3418' stroke-width='2.6' d='M80 8L85 13L97-2'/></svg>");
  /* The head alone, drawn bolder so the ears and snout hold at 24px. */
  --pen-head: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32' fill='none' stroke='%231E1914' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 31V14C6 11 6.5 9.5 7.5 8.5L6 1L9.5 7L12 .5L13 7.5C17 7.5 21.5 9.5 22.5 12.5C23 14.5 21.5 15.5 19.5 15.5C16.5 15.5 14.5 16.5 14.5 19V31'/><circle cx='15.5' cy='11' r='1.1' fill='%231E1914'/></svg>");
}

/* ---------- Paper, type, links ---------- */

html[data-ui="ink"] body {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .12 0 0 0 0 .1 0 0 0 0 .08 0 0 0 .05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  font-feature-settings: "kern", "liga";
  line-height: 1.55;
}

/* Instrument Serif has one weight: never synthesise bold. */
html[data-ui="ink"] :is(h1, h2, h3, h4, .nav-brand, .footer-tagline, .card__title, .lane__num, .lane__name, .brief__num, .brief__figure, .bench__figure, .quote p) { font-weight: 400; letter-spacing: -0.005em; }

html[data-ui="ink"] h1 { font-size: clamp(2.75rem, 1.9rem + 3.6vw, 5rem); line-height: 0.98; }
html[data-ui="ink"] h2 { font-size: clamp(2.25rem, 2.05rem + 0.6vw, 2.75rem); line-height: 1.04; }
html[data-ui="ink"] h3 { font-size: clamp(1.375rem, 1.3rem + 0.3vw, 1.6rem); line-height: 1.12; }

html[data-ui="ink"] :is(.prose, .method__body) h3 { font-size: 1.375rem; font-style: italic; }

html[data-ui="ink"] a:hover { color: var(--ink); text-decoration-color: var(--accent); }

html[data-ui="ink"] :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

html[data-ui="ink"] .eyebrow,
html[data-ui="ink"] .card__meta {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

html[data-ui="ink"] .eyebrow { margin-bottom: var(--space-3); }

html[data-ui="ink"] .lede {
  max-width: 38ch;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

/* A short red pen stroke under every section heading. */
html[data-ui="ink"] :is(.section__head, .converge__intro, .brief__intro, .section > .wrap) h2:not(.visually-hidden)::after,
html[data-ui="ink"] .case__label::after,
html[data-ui="ink"] .nav-links a[aria-current="page"]::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 0.5rem;
  margin-top: 0.6rem;
  background: var(--pen-stroke) no-repeat center / 100% 100%;
  rotate: -2deg;
}

html[data-ui="ink"] .section { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }

html[data-ui="ink"] .section + .section { border-top: 1px solid var(--rule-strong); }

html[data-ui="ink"] .section--dark { background: transparent; }

/* ---------- Header ---------- */

html[data-ui="ink"] .site-header { border-bottom: 1px solid var(--rule-strong); }

html[data-ui="ink"] .nav { row-gap: 0; padding-block: var(--space-1) 0; }

html[data-ui="ink"] .nav-brand {
  gap: 0.5rem;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.45rem);
  letter-spacing: 0;
  white-space: nowrap;
}

html[data-ui="ink"] .nav-brand::before {
  content: "";
  width: 1.125rem;
  height: 1.5rem;
  flex: none;
  background: var(--pen-head) no-repeat center / contain;
}

html[data-ui="ink"] .nav-links {
  justify-content: space-between;
  gap: 0 var(--space-4);
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  border-top: 1px solid var(--line);
}

html[data-ui="ink"] .nav-links a {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 400;
}

html[data-ui="ink"] .nav a[aria-current="page"] { text-decoration-color: transparent; }

html[data-ui="ink"] .nav-links a[aria-current="page"]::after {
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0.45rem;
  width: auto;
  height: 0.45rem;
}

html[data-ui="ink"] .lang-switch {
  margin-right: 0;
  border-color: var(--rule-strong);
  font-weight: 500;
  letter-spacing: 0.08em;
}

@media (min-width: 56rem) {
  html[data-ui="ink"] .nav {
    padding-block: var(--space-2);
  }

  html[data-ui="ink"] .nav-links {
    justify-content: flex-end;
    gap: 0 var(--space-6);
    margin-inline: 0;
    padding-inline: 0;
    border-top: 0;
  }
}

/* ---------- Heroes ---------- */

html[data-ui="ink"] .hero {
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(2.5rem, 1.6rem + 4vw, 5rem);
}

html[data-ui="ink"] .hero .lede {
  max-width: 24ch;
  margin-top: var(--space-5);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--display-l);
  line-height: 1.14;
}

html[data-ui="ink"] .hero__sub {
  max-width: 60ch;
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule-strong);
  font-size: 0.9375rem;
}

html[data-ui="ink"] .hero .actions {
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
}

/* Interior heroes: a short pen underline, scaled to the title's size. */
html[data-ui="ink"] .hero h1:not(#hero-title)::after {
  content: "";
  display: block;
  width: min(100%, 2.4em);
  height: 0.55rem;
  margin-top: 0.4rem;
  background: var(--pen-under) no-repeat center / 100% 100%;
}

html[data-ui="ink"] .hero h1 + .eyebrow { margin-top: var(--space-4); }

/* Home: the name as tall caps with the llama drawn beside it, then the
   positioning line (the loudest sentence), proof, the call. The text
   column dissolves into the hero grid so each part can be placed. */
html[data-ui="ink"] .hero[aria-labelledby="hero-title"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 var(--space-3);
  align-items: start;
}

html[data-ui="ink"] .hero[aria-labelledby="hero-title"] > div { display: contents; }

html[data-ui="ink"] .hero[aria-labelledby="hero-title"] > div > * { grid-column: 1 / -1; }

html[data-ui="ink"] #hero-title {
  grid-column: 1;
  grid-row: 1;
  width: min-content;
  max-width: none;
  font-size: clamp(5.25rem, 2.35rem + 11.9vw, 10rem);
  line-height: 0.84;
  letter-spacing: -0.012em;
  text-transform: uppercase;
}

html[data-ui="ink"] .hero[aria-labelledby="hero-title"]::after,
html[data-ui="ink"] .hero:not(.hero--split)::after {
  content: "";
  aspect-ratio: 94 / 120;
  background: var(--pen-llama) no-repeat center bottom / contain;
}

html[data-ui="ink"] .hero[aria-labelledby="hero-title"]::after {
  grid-column: 2;
  grid-row: 1;
  width: clamp(6.25rem, 3rem + 9.4vw, 10.5rem);
  margin-top: -0.25rem;
  animation: ink-in 900ms var(--ease-out) 200ms both;
}

html[data-ui="ink"] .hero[aria-labelledby="hero-title"] .lede { max-width: 21ch; font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); }

/* The pen circles the decision and underlines the proof. */
html[data-ui="ink"] .hero__mark { position: relative; white-space: nowrap; }

html[data-ui="ink"] .hero__mark::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background: var(--pen-under) no-repeat center / 100% 100%;
  transform-origin: left center;
  animation: ink-draw 700ms var(--pen) 1100ms both;
}

html[data-ui="ink"] .hero__mark--circle::after {
  inset: -0.1em -0.28em -0.16em;
  background-image: var(--pen-circle);
  animation-name: ink-in;
  animation-delay: 800ms;
}

html[data-ui="ink"] .hero__mark--under::after {
  left: 0;
  right: 0;
  bottom: -0.3em;
  height: 0.4em;
}

/* The photo: a black and white print pinned to the page. */
html[data-ui="ink"] .hero--split img {
  width: 100%;
  border: 0.5rem solid var(--field);
  border-radius: 0;
  outline: 1px solid var(--line);
  rotate: -1.2deg;
}

html[data-ui="ink"] .hero[aria-labelledby="hero-title"] img {
  justify-self: center;
  max-width: 26rem;
  margin-top: var(--space-6);
}

@media (min-width: 56rem) {
  html[data-ui="ink"] .hero[aria-labelledby="hero-title"] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto 1fr;
    gap: 0 var(--col-gap);
  }

  html[data-ui="ink"] .hero[aria-labelledby="hero-title"] > div > * {
    grid-column: 1 / 9;
  }

  html[data-ui="ink"] #hero-title {
    grid-column: 1 / 9;
    align-self: end;
    width: auto;
    white-space: nowrap;
  }

  html[data-ui="ink"] .hero[aria-labelledby="hero-title"]::after {
    grid-column: 9 / 13;
    align-self: end;
    margin: 0 0 -0.25rem;
  }

  html[data-ui="ink"] .hero[aria-labelledby="hero-title"] .lede {
    max-width: 24ch;
  }

  html[data-ui="ink"] .hero[aria-labelledby="hero-title"] img {
    grid-column: 9 / 13;
    grid-row: 2 / 6;
    align-self: start;
    max-width: none;
    margin-top: var(--space-6);
  }

  html[data-ui="ink"] .hero--split:not([aria-labelledby="hero-title"]) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--space-7);
  }

  /* Interior heroes: the text in nine columns, the llama in the margin. */
  html[data-ui="ink"] .hero:not(.hero--split) {
    display: grid;
    grid-template-columns: minmax(0, 9fr) minmax(0, 3fr);
    column-gap: var(--col-gap);
  }

  html[data-ui="ink"] .hero:not(.hero--split) > * {
    grid-column: 1;
  }

  html[data-ui="ink"] .hero:not(.hero--split)::after {
    grid-column: 2;
    grid-row: 1 / span 6;
    align-self: end;
    justify-self: end;
    width: min(100%, 9rem);
  }
}

/* ---------- Buttons ---------- */

html[data-ui="ink"] .btn {
  min-height: 3rem;
  padding: 0.7em 1.4em;
  border-radius: var(--radius);
  font-weight: 500;
}

html[data-ui="ink"] .btn--ghost {
  padding-inline: 0;
  border-color: transparent;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  text-decoration-color: var(--rule-strong);
}

html[data-ui="ink"] .btn--ghost:hover,
html[data-ui="ink"] .section--dark .btn--ghost:hover {
  border-color: transparent;
  background: none;
  color: var(--ink);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}

html[data-ui="ink"] .btn--primary,
html[data-ui="ink"] .btn--primary:hover,
html[data-ui="ink"] .section--dark .btn--primary,
html[data-ui="ink"] .section--dark .btn--primary:hover { color: var(--on-accent); }

html[data-ui="ink"] .section--dark .btn--primary:hover { background: var(--accent-strong); }

/* ---------- Cards ---------- */

html[data-ui="ink"] .card {
  gap: var(--space-2);
  padding: var(--space-4) 0 0;
  border: 0;
  border-top: 1px solid var(--rule-strong);
  border-radius: 0;
}

html[data-ui="ink"] a.card:hover { border-color: var(--ink); }

html[data-ui="ink"] .card__title { font-size: var(--display-m); line-height: 1.1; }

html[data-ui="ink"] .card__title a { text-decoration-color: transparent; }

html[data-ui="ink"] :is(a.card:hover .card__title, .card__title a:hover) { text-decoration: underline 1.5px var(--accent); text-underline-offset: 0.18em; }

html[data-ui="ink"] .card__meta { order: -1; }

html[data-ui="ink"] :is(.card, .gallery, .prose) img {
  border-radius: 0;
  outline: 1px solid var(--line);
  outline-offset: -1px;
}

html[data-ui="ink"] .card img { order: -2; margin-bottom: var(--space-3); }

html[data-ui="ink"] .grid-3 { gap: var(--space-6); }

html[data-ui="ink"] .section__head { margin-bottom: var(--space-5); }

/* Desktop: a notebook margin. The section head sits in columns 1 to 3
   behind a hairline that runs the full height; content takes 4 to 12. */
@media (min-width: 64rem) {
  html[data-ui="ink"] .section > .wrap:where(:has(> .section__head, > .converge__intro, > .brief__intro, > h2:not(.visually-hidden))) {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    column-gap: var(--col-gap);
    align-items: start;
  }

  html[data-ui="ink"] .section > .wrap > * {
    grid-column: 2;
    min-width: 0;
  }

  html[data-ui="ink"] .section > .wrap > :is(.section__head, .converge__intro, .brief__intro, h2:not(.visually-hidden)) {
    grid-column: 1;
    grid-row: 1 / span 12;
    align-self: stretch;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0;
    padding-right: var(--col-gap);
    border-right: 1px solid var(--line);
  }



  html[data-ui="ink"] .section > .wrap > h2 + .lede {
    margin-top: 0;
  }
}

/* Method: each move opens with its lede set as a sentence, not a caption. */
html[data-ui="ink"] .section[id^="move-"] .lede {
  max-width: 40ch;
  padding-bottom: var(--space-2);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--display-m);
  line-height: 1.2;
}

/* ---------- Converge: messy to decided ---------- */

html[data-ui="ink"] .converge__stage { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }

html[data-ui="ink"] .scraps { grid-column: 1 / -1; gap: 0.625rem 0.5rem; }

/* Sorted: the emptied pile keeps a dashed outline and the pen's tick. */
html[data-ui="ink"] .converge.is-converged .scraps { border: 1px dashed var(--rule-strong); background: var(--pen-tick) no-repeat center / 2.25rem auto; }

html[data-ui="ink"] .scrap {
  position: relative;
  padding: 0.45rem 0.65rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 1px;
  background: var(--tint);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.3;
  rotate: var(--r, 0deg);
  transition: rotate 600ms var(--ease-out);
}

html[data-ui="ink"] .scrap:nth-child(6n + 1) { --r: -2.2deg; }
html[data-ui="ink"] .scrap:nth-child(6n + 2) { --r: 1.6deg; }
html[data-ui="ink"] .scrap:nth-child(6n + 3) { --r: -1deg; }
html[data-ui="ink"] .scrap:nth-child(6n + 4) { --r: 2.4deg; }
html[data-ui="ink"] .scrap:nth-child(6n + 5) { --r: -1.8deg; }
html[data-ui="ink"] .scrap:nth-child(6n + 6) { --r: 1.2deg; }

/* In a lane the slip flattens into a line of text and the pen underlines it. */
html[data-ui="ink"] .lane__slot .scrap {
  --r: 0deg;
  padding: 0.125rem 0 0.55rem;
  border-color: transparent;
  background: none;
  color: var(--ink);
}

html[data-ui="ink"] .lane__slot .scrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1rem;
  height: 0.4rem;
  background: var(--pen-stroke) no-repeat center / 100% 100%;
  transform-origin: left center;
  animation: ink-draw 500ms var(--pen) 450ms both;
}

html[data-ui="ink"] .converge__llama {
  --llama-size: 5.5rem;
  --ink-llama-stroke: 2.4px;
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
}

html[data-ui="ink"] .converge__controls {
  grid-column: 1;
  grid-row: 2;
  padding-top: var(--space-4);
}

html[data-ui="ink"] .converge__run { background: var(--ink); color: var(--bg); }
html[data-ui="ink"] .converge__run:hover { background: var(--muted); }


html[data-ui="ink"] .converge__status { color: var(--muted); font-size: 0.875rem; }

html[data-ui="ink"] .lanes {
  grid-column: 1 / -1;
  gap: var(--space-5) var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

@media (max-width: 39.99rem) {
  html[data-ui="ink"] .lanes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

html[data-ui="ink"] .lane {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: var(--space-1) var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule-strong);
}

html[data-ui="ink"] .lane > :not(.lane__num) { grid-column: 1 / -1; }

html[data-ui="ink"] .lane__num,
html[data-ui="ink"] .brief__num { position: relative; justify-self: start; }

html[data-ui="ink"] .lane__num {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.875rem;
  line-height: 1;
}

/* Converged, and on a result card: the pen circles the move's number. */
html[data-ui="ink"] .converge.is-converged .lane__num::after,
html[data-ui="ink"] .brief__num::after {
  content: "";
  position: absolute;
  inset: -0.3em -0.45em -0.2em;
  background: var(--pen-circle) no-repeat center / 100% 100%;
}

html[data-ui="ink"] .converge.is-converged .lane__num::after { animation: ink-in 500ms var(--pen) 300ms both; }

html[data-ui="ink"] .lane__name {
  font-size: 1.1875rem;
  font-style: italic;
  line-height: 1.12;
}

html[data-ui="ink"] .lane__name a { text-decoration-color: transparent; }


html[data-ui="ink"] .lane__line {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

html[data-ui="ink"] .lane__slot {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

/* ---------- Brief: what is messy on your side ---------- */

html[data-ui="ink"] .brief__intro { align-items: flex-end; }

html[data-ui="ink"] .brief__llama { --llama-size: 3.75rem; flex: none; }

html[data-ui="ink"] .brief__answers { gap: 0 var(--col-gap); border-top: 1px solid var(--rule-strong); }

html[data-ui="ink"] .brief__answer {
  display: grid;
  grid-template-columns: 1.375rem minmax(0, 1fr);
  gap: var(--space-3);
  min-height: 3.5rem;
  padding: 0.875rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem;
  line-height: 1.35;
}

html[data-ui="ink"] .brief__answer::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.25rem;
  border: 1.5px solid var(--rule-strong);
  border-radius: 50%;
}

html[data-ui="ink"] .brief__answer:hover::before { border-color: var(--accent); }

html[data-ui="ink"] .brief__answer[aria-pressed="true"] { border-width: 0 0 1px; }

html[data-ui="ink"] .brief__answer[aria-pressed="true"]::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--bg);
}

html[data-ui="ink"] .brief__result {
  gap: var(--space-2);
  padding-top: var(--space-5);
  border-top: 2px solid var(--ink);
  animation: ink-in 450ms var(--ease-out) both;
}

html[data-ui="ink"] :is(.brief__prompt, .brief__fallback p) { color: var(--muted); }

html[data-ui="ink"] .brief__move {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
}

html[data-ui="ink"] .brief__num {
  display: inline-block;
  margin-right: 0.3em;
  font-style: normal;
}

html[data-ui="ink"] .brief__num::after { inset: -0.25em -0.4em -0.15em; }

html[data-ui="ink"] .brief__title {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0;
}

html[data-ui="ink"] .brief__figure {
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: var(--display-l);
  line-height: 1.06;
}

html[data-ui="ink"] .brief__read { margin-top: var(--space-3); }

html[data-ui="ink"] .brief__fallback li { padding-block: var(--space-2); border-bottom: 1px solid var(--line); }

/* ---------- Quotes ---------- */

html[data-ui="ink"] .quote {
  max-width: 30ch;
  padding: 0;
  border: 0;
}

html[data-ui="ink"] .quote p {
  font-size: clamp(1.75rem, 1.6rem + 0.6vw, 2.25rem);
  font-style: italic;
  line-height: 1.15;
}

html[data-ui="ink"] .quote::before {
  content: "\201C" / "";
  display: block;
  height: 0.5em;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
}

html[data-ui="ink"] .quote__by {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  font-weight: 400;
}

@media (min-width: 64rem) {
  html[data-ui="ink"] .quotes .quote p {
    font-size: var(--display-m);
  }
}

/* ---------- Method ---------- */

html[data-ui="ink"] .method__body { gap: var(--space-6) 2.5rem; }

html[data-ui="ink"] :is(ul.practice, ul.deliverables) { list-style: none; padding-left: 0; }

html[data-ui="ink"] :is(ul.practice, ul.deliverables) > li { position: relative; padding-left: 1.25rem; }

html[data-ui="ink"] :is(ul.practice, ul.deliverables) > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 0.7rem;
  height: 0.3rem;
  background: var(--pen-stroke) no-repeat center / 100% 100%;
}

html[data-ui="ink"] .bench { padding-top: var(--space-4); border-top: 2px solid var(--ink); }

html[data-ui="ink"] .bench__figure { font-size: clamp(2.75rem, 2.3rem + 1.8vw, 4rem); line-height: 0.95; }

html[data-ui="ink"] .benchmarks > h3 { font-style: italic; }

/* ---------- Case studies and project pages ---------- */

html[data-ui="ink"] article.section > .wrap > .hero { padding-top: 0; }

html[data-ui="ink"] .case { border-bottom: 1px solid var(--rule-strong); }

html[data-ui="ink"] .case__section {
  gap: var(--space-3);
  padding-block: var(--space-5) var(--space-6);
  border-top-color: var(--rule-strong);
}

html[data-ui="ink"] .case__label {
  align-self: start;
  justify-self: start;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
}

html[data-ui="ink"] .case__label::after {
  width: 2.25rem;
  height: 0.4rem;
  margin-top: 0.4rem;
}

html[data-ui="ink"] .prose { max-width: 64ch; }

html[data-ui="ink"] .prose > h2 { font-size: 2rem; }

@media (min-width: 48rem) {
  html[data-ui="ink"] .case__section {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: var(--col-gap);
  }

  html[data-ui="ink"] .case__section > .prose {
    padding-left: var(--col-gap);
    border-left: 1px solid var(--line);
  }
}

/* ---------- About: timeline ---------- */

html[data-ui="ink"] .timeline { border-left-color: var(--rule-strong); }

html[data-ui="ink"] .timeline__item::before {
  top: 0.35em;
  left: calc(-1 * var(--space-5) - 0.5rem);
  width: 1rem;
  height: 0.7rem;
  border-radius: 0;
  background: var(--bg) var(--pen-circle) no-repeat center / 100% 100%;
}

html[data-ui="ink"] .timeline__item h3 { font-size: 1.5rem; }

/* ---------- Forms, 404 ---------- */

html[data-ui="ink"] .field label { font-weight: 500; }

html[data-ui="ink"] :is(.field input, .field textarea) {
  border-color: var(--muted);
  border-radius: var(--radius);
  background: var(--field);
}

html[data-ui="ink"] .not-found__fr { border-top-color: var(--rule-strong); }

/* ---------- Footer ---------- */

html[data-ui="ink"] .site-footer { padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--space-6); border-top: 2px solid var(--ink); }

html[data-ui="ink"] .footer-tagline {
  max-width: 24ch;
  font-size: clamp(1.625rem, 1.4rem + 1vw, 2.25rem);
  line-height: 1.12;
}

/* One red button per screen: the footer call is outlined in ink. */
html[data-ui="ink"] .site-footer .btn--primary {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

html[data-ui="ink"] .site-footer .btn--primary:hover { background: var(--ink); color: var(--bg); }

html[data-ui="ink"] .footer-links { border-top-color: var(--rule-strong); }

html[data-ui="ink"] .footer-links a { font-size: 0.9375rem; text-decoration-color: var(--rule-strong); }

html[data-ui="ink"] :is(.footer-links a, .ui-shuffle):hover { color: var(--ink); text-decoration-color: var(--accent); }

html[data-ui="ink"] .footer-mark { --llama-size: 2.75rem; color: var(--ink); }

html[data-ui="ink"] .ui-shuffle { text-decoration-color: var(--accent); }

/* ---------- The llama (partials/llama-ink.njk) ---------- */

html[data-ui="ink"] .ink-llama { overflow: visible; }

html[data-ui="ink"] :is(.ink-llama__line, .ink-llama__tick) {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--ink-llama-stroke, 2px);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

html[data-ui="ink"] .ink-llama__eye { fill: currentColor; }

html[data-ui="ink"] .ink-llama__head {
  transform-box: view-box;
  transform-origin: 66px 60px;
  transition: transform 900ms var(--ease-out);
}

html[data-ui="ink"] .ink-llama__tick {
  stroke: var(--accent);
  stroke-width: calc(var(--ink-llama-stroke, 2px) + 0.4px);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: left bottom;
  transform: scale(0.4);
  transition: opacity 300ms ease, transform 450ms var(--pen);
}

html[data-ui="ink"] .llama.is-converged .ink-llama__head { transform: rotate(-11deg); }

html[data-ui="ink"] .llama.is-converged .ink-llama__tick {
  opacity: 1;
  transform: none;
  transition-delay: 500ms;
}

html[data-ui="ink"] .llama.is-listening .ink-llama__head { transform: rotate(7deg); }

/* ---------- Motion ---------- */

@keyframes ink-draw {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes ink-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Same selectors as the rules they switch off, so they win on order. */
@media (prefers-reduced-motion: reduce) {
  html[data-ui="ink"] .scrap,
  html[data-ui="ink"] .ink-llama__head,
  html[data-ui="ink"] .ink-llama__tick,
  html[data-ui="ink"] .llama.is-converged .ink-llama__tick {
    transition: none;
  }

  html[data-ui="ink"] .hero[aria-labelledby="hero-title"]::after,
  html[data-ui="ink"] .hero__mark::after,
  html[data-ui="ink"] .hero__mark--circle::after,
  html[data-ui="ink"] .lane__slot .scrap::after,
  html[data-ui="ink"] .converge.is-converged .lane__num::after,
  html[data-ui="ink"] .brief__result {
    animation: none;
  }
}

/* Higher contrast requested: secondary text takes the body ink. */
@media (prefers-contrast: more) {
  html[data-ui="ink"] {
    --muted: var(--ink);
  }
}