/* ---- tokens.css ---- */
/*
 * Design tokens. Values come from the reference the brief supplied, with one change:
 * the accent colours in that reference fail 4.5:1 as text on this background, so text
 * accents are darkened here and the bright values survive only as non-text marks.
 */

:root {
  color-scheme: light;

  /* surfaces */
  --bg: #f4f4f2;
  --bg-raised: #fbfbfa;
  --white: #fdfdfc;
  --dark: #2c2c2c;

  /* text */
  --ink: #171717;
  --ink-soft: #37352f;
  --muted: #6b6862;

  /* lines */
  --line: #e4e4e2;
  --line-strong: #d3d2ce;

  /* accents used as text, all pass 4.5:1 on --bg */
  --blue: #1b62c4;
  --red: #c63a2b;
  --green: #1f7a34;
  --yellow: #7a5f00;

  /* accents used as marks, never as body text */
  --mark-blue: #2f80ed;
  --mark-red: #ee5a4a;
  --mark-green: #4cbf62;
  --mark-yellow: #e8cf47;

  /* type */
  --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-ar-display: 'Amiri', 'Noto Naskh Arabic', Georgia, serif;
  --font-ui: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;

  --t-hero: clamp(2.75rem, 1.6rem + 4.9vw, 4.25rem);
  --t-h2: clamp(1.5rem, 1.24rem + 1.05vw, 2rem);
  --t-h3: 1.0625rem;
  --t-lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
  --t-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  --lh-hero: 1;
  --lh-display: 1.12;
  --lh-body: 1.62;
  --lh-small: 1.45;

  /* spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* layout */
  --shell: 68rem;
  --measure: 30rem;
  --measure-prose: 38rem;
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 180ms;
  --radius: 8px;
}

/* ---- fonts.css ---- */
/* Generated by scripts/fetch-fonts.mjs. Do not edit by hand. */
/* Fonts are Google unicode-range subsets, self-hosted and trimmed. */

/* Instrument Serif 400 italic · latin-ext · 12.1KB */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-latin-ext-400i.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Instrument Serif 400 italic · latin · 19.8KB (from 22KB) */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-latin-400i.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2015, U+2018-201D, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+00B7, U+2190-2193, U+2212, U+221E, U+2248, U+2260, U+2264-2265, U+00D7, U+00F7;
}

/* Instrument Serif 400 normal · latin-ext · 11.3KB */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Instrument Serif 400 normal · latin · 18.8KB (from 21KB) */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-latin-400.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2015, U+2018-201D, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+00B7, U+2190-2193, U+2212, U+221E, U+2248, U+2260, U+2264-2265, U+00D7, U+00F7;
}

/* IBM Plex Sans 400 normal · cyrillic-ext · 11.9KB */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plex-sans-cyrillic-ext-400.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* IBM Plex Sans 400 normal · cyrillic · 14.5KB */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plex-sans-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* IBM Plex Sans 400 normal · greek · 9.7KB */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plex-sans-greek-400.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* IBM Plex Sans 400 normal · vietnamese · 8.0KB */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plex-sans-vietnamese-400.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* IBM Plex Sans 400 normal · latin-ext · 15.6KB */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plex-sans-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 400 normal · latin · 19.6KB (from 22KB) */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plex-sans-latin-400.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2015, U+2018-201D, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+00B7, U+2190-2193, U+2212, U+221E, U+2248, U+2260, U+2264-2265, U+00D7, U+00F7;
}

/* IBM Plex Sans Arabic 400 normal · arabic · 37.7KB (from 42KB) */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plex-sans-arabic-arabic-400.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}

/* IBM Plex Sans Arabic 400 normal · cyrillic-ext · 1.4KB */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plex-sans-arabic-cyrillic-ext-400.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* IBM Plex Sans Arabic 400 normal · latin-ext · 6.5KB */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plex-sans-arabic-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans Arabic 400 normal · latin · 17.2KB (from 19KB) */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plex-sans-arabic-latin-400.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2015, U+2018-201D, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+00B7, U+2190-2193, U+2212, U+221E, U+2248, U+2260, U+2264-2265, U+00D7, U+00F7;
}

/* Amiri 400 normal · arabic · 96.9KB (from 106KB) */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/amiri-arabic-400.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}

/* Amiri 400 normal · latin-ext · 10.2KB */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/amiri-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Amiri 400 normal · latin · 19.1KB */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/amiri-latin-400.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;
}

/* ---- base.css ---- */
/* Reset and element defaults. Nothing here knows about components. */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  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-ui);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* Arabic runs need their own family and looser leading. This is the single most
   repeated rule on the site, so it is an element default, not a component style. */
[lang='ar'],
.ar {
  font-family: var(--font-ar);
  line-height: 1.9;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-hero);
  line-height: var(--lh-hero);
  letter-spacing: -0.03em;
}

h2 {
  font-size: var(--t-h2);
}

h3 {
  font-family: var(--font-ui);
  font-size: var(--t-h3);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
}

p {
  text-wrap: pretty;
}

p + p {
  margin-top: var(--sp-4);
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color var(--dur) var(--ease);
}

a:hover {
  text-decoration-color: currentColor;
}

strong {
  font-weight: 400;
}

code,
kbd,
samp,
pre {
  /* Latin first, unchanged; the Arabic family follows so Arabic-Indic digits in a code
     sample resolve to a face that contains them instead of the system default. */
  font-family: var(--font-ui), 'IBM Plex Sans Arabic', monospace;
  font-size: 0.9em;
  letter-spacing: 0;
}

code {
  background: rgba(23, 23, 23, 0.05);
  border-radius: 4px;
  padding: 0.1em 0.34em;
  white-space: nowrap;
}

pre {
  overflow-x: auto;
  padding: var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  line-height: 1.55;
}

pre code {
  background: none;
  padding: 0;
  white-space: pre;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
}

::selection {
  background: #e7e4d8;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Keyboard users get here first. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--ink);
  color: var(--white);
  padding: var(--sp-2) var(--sp-4);
  border-radius: 0 0 var(--radius) 0;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- site.css ---- */
/*
 * Layout and components. The whole page is one column on a large empty canvas, with
 * hairlines doing the work that cards and shadows do elsewhere.
 */

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

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

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
}

.brand {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand span {
  color: var(--muted);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.nav ul {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  list-style: none;
  padding: 0;
  font-size: var(--t-small);
}

.nav a {
  text-decoration: none;
  color: var(--ink-soft);
}

.nav a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.24em;
}

@media (max-width: 30rem) {
  .nav ul {
    gap: var(--sp-4);
  }
}

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

.hero {
  width: min(100% - var(--gutter) * 2, var(--measure));
  margin-inline: auto;
  padding-block: clamp(var(--sp-6), 9vw, var(--sp-10)) var(--sp-9);
}

.hero__title {
  margin-bottom: var(--sp-5);
}

.hero__lead {
  max-width: 32rem;
  font-size: var(--t-lead);
  line-height: 1.5;
  letter-spacing: -0.011em;
  margin-block: var(--sp-5) var(--sp-4);
}

.hero__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: var(--sp-5);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.accent-blue {
  color: var(--blue);
}
.accent-red {
  color: var(--red);
}
.accent-green {
  color: var(--green);
}
.accent-yellow {
  color: var(--yellow);
}

/* ---------- dot field: the hero image ---------- */

.dotfield {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  grid-auto-rows: 26px;
  width: 100%;
  margin-block: var(--sp-4);
  contain: layout style;
}

@media (max-width: 26rem) {
  .dotfield {
    grid-auto-rows: 22px;
  }
}

.dotfield__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  justify-self: start;
  align-self: center;
  background: var(--dot-color, var(--line-strong));
}

@media (max-width: 26rem) {
  .dotfield__dot {
    width: 6px;
    height: 6px;
  }
}

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

.section {
  padding-block: var(--sp-9);
  border-top: 1px solid var(--line);
}

.section__head {
  margin-bottom: var(--sp-6);
}

.section__title {
  max-width: 24ch;
}

.section__intro {
  max-width: var(--measure-prose);
  color: var(--ink-soft);
  margin-top: var(--sp-3);
}

.split {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: var(--sp-8);
  }

  .split--wide {
    grid-template-columns: 18rem minmax(0, 1fr);
  }
}

/* ---------- break list ---------- */

.breaks {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-6);
  counter-reset: none;
}

.breaks > li {
  display: grid;
  grid-template-columns: 0.625rem minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

.breaks > li::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.62em;
  border-radius: 50%;
  background: var(--ink);
}

.break__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-1);
}

.break__body {
  color: var(--ink-soft);
  max-width: 32rem;
  font-size: var(--t-body);
  margin-top: var(--sp-2);
}

/* ---------- rows: the ledger of tools, fonts, guides ---------- */

.rows {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--line);
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-5);
  align-items: baseline;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.row__title {
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.row__note {
  grid-column: 1;
  color: var(--muted);
  font-size: var(--t-small);
  line-height: var(--lh-small);
  max-width: var(--measure-prose);
}

.row__meta {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--muted);
  font-size: var(--t-small);
  white-space: nowrap;
}

a.row:hover .row__title {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a.row:hover .row__arrow {
  transform: translateX(3px);
}

.row__arrow {
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}

/* ---------- specimen ---------- */

.specimen {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
}

.specimen__row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: center;
  padding-block: var(--sp-5);
}

.specimen__row + .specimen__row {
  border-top: 1px solid var(--line);
}

.specimen__tag {
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
  color: var(--muted);
  align-self: start;
  padding-top: 0.45em;
}

.specimen__lines {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
}

.specimen__line {
  font-family: var(--font-ar);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  line-height: 1.85;
  direction: rtl;
  text-align: right;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.specimen__line--latin {
  font-family: var(--font-ui);
  direction: ltr;
  text-align: left;
  line-height: 1.55;
}

.specimen__line--tracked {
  letter-spacing: 0.055em;
}

.specimen__verdict {
  font-size: var(--t-small);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 40rem) {
  .specimen__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2);
    padding-block: var(--sp-4);
  }

  .specimen__tag {
    padding-top: 0;
  }

  .specimen__verdict {
    text-align: left;
  }
}

.specimen__caption {
  color: var(--ink-soft);
  font-size: var(--t-small);
  line-height: var(--lh-small);
  max-width: 34rem;
  margin-top: var(--sp-4);
}

/* ---------- prose ---------- */

.prose {
  max-width: var(--measure-prose);
}

.prose h2 {
  margin-block: var(--sp-8) var(--sp-3);
}

.prose h3 {
  margin-block: var(--sp-6) var(--sp-2);
}

.prose p,
.prose ul,
.prose ol {
  color: var(--ink-soft);
  margin-block: var(--sp-3);
}

.prose ul,
.prose ol {
  padding-left: 1.15rem;
}

.prose li + li {
  margin-top: var(--sp-2);
}

.prose a {
  color: var(--ink);
}

.note {
  color: var(--muted);
  font-size: var(--t-small);
  line-height: var(--lh-small);
}

.rule {
  border-top: 1px solid var(--line);
}

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

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-7) var(--sp-8);
  margin-top: var(--sp-9);
}

.site-footer__grid {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 44rem) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}

.site-footer ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--t-small);
}

.site-footer a {
  text-decoration: none;
  color: var(--ink-soft);
}

.site-footer a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* ---------- buttons ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding-inline: 1rem;
  border-radius: var(--radius);
  border: 1px solid #d8d7d2;
  background: var(--white);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.pill:hover {
  border-color: var(--line-strong);
  background: #f7f7f5;
}

.pill--dark {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--white);
}

.pill--dark:hover {
  background: #1f1f1f;
  border-color: #1f1f1f;
  color: var(--white);
}

.pill--quiet {
  background: transparent;
  border-color: transparent;
  padding-inline: 0;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.22em;
}

.pill--quiet:hover {
  background: transparent;
  color: var(--ink);
  text-decoration-color: currentColor;
}

/* ---------- ad slot ---------- */

.ad-slot__label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--t-micro);
}

.ad-slot {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: var(--sp-4);
  min-height: 4.5rem;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: var(--t-micro);
}

/* ---------- page head for inner pages ---------- */

.page-head {
  width: min(100% - var(--gutter) * 2, var(--measure-prose));
  margin-inline: auto;
  padding-block: clamp(var(--sp-7), 8vw, var(--sp-9)) var(--sp-6);
}

.page-head h1 {
  font-size: clamp(2.25rem, 1.6rem + 3vw, 3.25rem);
  margin-bottom: var(--sp-4);
}

.page-head__intro {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.page-body {
  width: min(100% - var(--gutter) * 2, var(--measure-prose));
  margin-inline: auto;
  padding-bottom: var(--sp-9);
}

/* ---- tools.css ---- */
/* ---------- tool pages ---------- */

.page-body--wide {
  width: min(100% - var(--gutter) * 2, 54rem);
}

.page-head--wide {
  width: min(100% - var(--gutter) * 2, 54rem);
}

@media (max-width: 40rem) {
  /* Six columns do not fit a phone. The step name is the one that can go. */
  .table--scale th:nth-child(2),
  .table--scale td:nth-child(2) {
    display: none;
  }

  .table--scale {
    font-size: 0.8125rem;
  }

  .table th,
  .table td {
    padding-right: 0.4rem;
  }
}

.table--numbers td:nth-child(2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tool {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.tool__fields {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-bottom: var(--sp-5);
}

.field {
  display: grid;
  gap: var(--sp-1);
  align-content: start;
}

.field > label,
.field > legend {
  font-size: var(--t-small);
  color: var(--ink-soft);
  padding: 0;
}

.field__hint {
  font-size: var(--t-micro);
  color: var(--muted);
  line-height: 1.4;
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.625rem;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink);
  appearance: none;
}

.select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 1.05rem) 1.05rem,
    calc(100% - 0.7rem) 1.05rem;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.textarea {
  min-height: 12rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  resize: vertical;
  tab-size: 2;
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.input[aria-invalid='true'] {
  border-color: var(--red);
}

.check-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.check input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--ink);
}

.tool__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding-inline: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--dark);
  background: var(--dark);
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.button:hover {
  background: #1f1f1f;
}

.button[disabled] {
  opacity: 0.55;
  cursor: progress;
}

/* ---------- results ---------- */

.result {
  margin-top: var(--sp-5);
}

.result:empty {
  display: none;
}

.result__status {
  font-size: var(--t-small);
  color: var(--ink-soft);
  min-height: 1.4em;
}

.result__status[data-tone='error'] {
  color: var(--red);
}

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin-block: var(--sp-4);
}

.stat {
  display: grid;
  gap: 0.15rem;
}

.stat__value {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: var(--t-micro);
  color: var(--muted);
}

/* A table with Arabic digits and four headers has a minimum width near 300px. Below that,
   the wrapper scrolls: the table keeps its display, so it stays a table to assistive tech. */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
}

.table caption {
  text-align: left;
  color: var(--muted);
  font-size: var(--t-micro);
  padding-bottom: var(--sp-2);
}

.table th,
.table td {
  text-align: left;
  padding: 0.45rem 0.6rem 0.45rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}

.table th {
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

.table caption {
  color: var(--muted);
  font-size: 0.8125rem;
}

.table--numbers td:last-child,
.table--numbers th:last-child {
  text-align: right;
  padding-right: 0;
}

.table tfoot td {
  border-bottom: 0;
  border-top: 1px solid var(--line-strong);
  color: var(--ink);
}

.findings {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.finding {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-small);
}

.finding:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.finding__level {
  font-size: var(--t-micro);
  color: var(--muted);
  padding-top: 0.1em;
}

.finding__level--high {
  color: var(--red);
}

.finding__level--medium {
  color: var(--yellow);
}

.finding__what {
  color: var(--ink);
}

.finding__fix {
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

.finding code,
.result code {
  background: rgba(23, 23, 23, 0.06);
}

.snippet {
  margin-top: var(--sp-3);
}

.snippet__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.snippet pre {
  font-size: 0.8125rem;
  max-height: 22rem;
}

/* scale specimen */

.scale-specimen {
  border-top: 1px solid var(--line);
  margin-top: var(--sp-6);
}

.scale-step {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.scale-step__meta {
  font-size: var(--t-micro);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.scale-step__latin {
  color: var(--ink);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.scale-step__arabic {
  font-family: var(--font-ar);
  color: var(--ink-soft);
  direction: rtl;
  text-align: right;
  line-height: 1.3;
}

/* numerals */

.numeral-demo {
  display: grid;
  gap: var(--sp-4);
  margin-block: var(--sp-5);
}

.numeral-line {
  display: grid;
  gap: 0.2rem;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.numeral-line__value {
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.numeral-line__label {
  font-size: var(--t-micro);
  color: var(--muted);
}