/* citizen.org.in — landing page.
 *
 * Colour: the app's seed scheme (palette.css, DESIGN.md §3.2). Shape, spacing
 * and elevation: UX4G 3.0 (DESIGN.md §3.4). Type: Noto Sans 500 for text,
 * Noto Serif 500 for the display type and for every language's own name
 * (fonts.css, DESIGN.md §3.3). Logical properties throughout, so the page
 * mirrors for ur, ks and sd once they are translated (DESIGN.md §5). */

:root {
  /* Bundled faces first (fonts.css); system Noto Sans script families catch
     body text in Indic scripts, as in the app (Ux4gTypography). */
  --sans: "Noto Sans", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Gujarati",
    "Noto Sans Gurmukhi", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Oriya",
    "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Arabic", "Noto Sans Ol Chiki",
    "Noto Sans Meetei Mayek", system-ui, sans-serif;
  /* Every face here is bundled; each covers only its own script. */
  --serif: "Noto Serif", "Noto Serif Devanagari", "Noto Serif Bengali", "Noto Serif Gujarati",
    "Noto Serif Gurmukhi", "Noto Serif Kannada", "Noto Serif Malayalam", "Noto Serif Oriya",
    "Noto Serif Tamil", "Noto Serif Telugu", "Noto Naskh Arabic", "Noto Sans Ol Chiki",
    "Noto Sans Meetei Mayek", serif;

  /* UX4G radii (--ux4g-radius-md … -2xl, -circular) */
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 999px;
  /* UX4G elevation (--ux4g-shadow-l1 … l3) */
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-2: 0 4px 8px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-3: 0 8px 16px rgb(0 0 0 / 0.16), 0 4px 8px rgb(0 0 0 / 0.08);

  --container: 82.5rem; /* UX4G 2xl container */
  --gutter: clamp(1rem, 4vw, 3rem);
  --section-gap: clamp(6rem, 16vw, 12rem);
  --wash-strength: 1;

  /* Latin display type can sit tight; other scripts need room for stacked
     conjuncts and matras (DESIGN.md §5). */
  --lh-display: 1.04;
  --lh-title: 1.2;
  --lh-text: 1.6;
  --tracking-display: -0.025em;
}

@media (prefers-color-scheme: dark) {
  :root {
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.2), 0 1px 2px rgb(0 0 0 / 0.2);
    --shadow-2: 0 4px 8px rgb(0 0 0 / 0.3), 0 1px 2px rgb(0 0 0 / 0.2);
    --shadow-3: 0 8px 16px rgb(0 0 0 / 0.5), 0 4px 8px rgb(0 0 0 / 0.3);
    --wash-strength: 0.55; /* TricolourWash in dark mode */
  }
}

:root:not(:lang(en)) {
  --lh-display: 1.32;
  --lh-title: 1.45;
  --lh-text: 1.75;
  --tracking-display: 0; /* tracking breaks joining scripts */
}

/* ---------------------------------------------------------------- base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 6rem;
}

html:has(dialog[open]) {
  overflow: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-family: var(--sans);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: var(--lh-text);
  font-synthesis: none;
  overflow-wrap: break-word; /* a word longer than its line still wraps */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1,
h2,
p,
ul,
ol {
  margin: 0;
}

h1,
h2 {
  font-weight: inherit;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

svg {
  display: block;
}

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

.icons {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
}

[dir="rtl"] .icon--directional {
  transform: scaleX(-1);
}

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

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.script-name {
  font-family: var(--serif);
}

/* Set before first paint when a translated language was chosen (index.html):
   keep the English copy out of sight until the translation lands. */
.i18n-pending [data-i18n] {
  visibility: hidden;
}

.no-js [data-open-languages] {
  display: none;
}

.skip-link {
  position: absolute;
  top: -10rem;
  inset-inline-start: 1rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: var(--md-primary);
  color: var(--md-on-primary);
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

/* ------------------------------------------------------------ the wash */

/* TricolourWash (apps/mobile/lib/core/widgets/tricolour_wash.dart) in CSS:
   the same centres, radii (a fraction of the viewport's shortest side),
   stops and opacities, fixed behind the whole page, header and footer
   included. No bands, no edges, no Chakra (DESIGN.md §7). */
.wash {
  --k: var(--wash-strength);
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle 115vmin at 15% -5%,
      rgb(255 153 51 / calc(0.24 * var(--k))),
      rgb(255 153 51 / calc(0.108 * var(--k))) 45%,
      rgb(255 153 51 / 0) 100%),
    radial-gradient(circle 90vmin at 50% 52.5%,
      rgb(0 0 128 / calc(0.07 * var(--k))),
      rgb(0 0 128 / calc(0.0315 * var(--k))) 45%,
      rgb(0 0 128 / 0) 100%),
    radial-gradient(circle 115vmin at 85% 107.5%,
      rgb(19 136 8 / calc(0.22 * var(--k))),
      rgb(19 136 8 / calc(0.099 * var(--k))) 45%,
      rgb(19 136 8 / 0) 100%);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.site-header.is-scrolled {
  background: color-mix(in srgb, var(--md-surface) 78%, transparent);
  border-bottom-color: var(--md-outline-variant);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}

.brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
  min-width: 0;
}

.brand__name {
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--md-on-surface);
  text-decoration: none;
  white-space: nowrap;
}

.brand__name span {
  color: var(--md-on-surface-variant);
}

/* Ux4gTag: `ux4g-tag-tonal-neutral`. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--md-surface-container-low);
  color: var(--md-on-surface);
  font-size: 0.8125rem;
  line-height: 1.4;
  white-space: nowrap;
}

.tag .icon {
  width: 1rem;
  height: 1rem;
  color: var(--md-on-surface-variant);
}

.brand .tag {
  box-shadow: inset 0 0 0 1px var(--md-outline-variant);
}

/* The language switcher: always one tap away, the current language in its
   own script (DESIGN.md §5; the app's composer language chip). */
.lang-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.25rem 0.75rem 0.25rem 0.875rem;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-full);
  background: var(--md-surface-container-lowest);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.lang-button:hover {
  background: var(--md-surface-container-low);
  box-shadow: var(--shadow-2);
}

.lang-button .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--md-on-surface-variant);
}

.lang-button__name {
  font-size: 1.0625rem;
  line-height: 1.5;
  white-space: nowrap;
}

@media (max-width: 26rem) {
  .brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
  }

  .brand__name {
    font-size: 1.1875rem;
  }

  .brand .tag {
    min-height: 1.5rem;
    padding: 0.0625rem 0.5rem;
    font-size: 0.75rem;
  }
}

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

.hero {
  padding-block: clamp(0.5rem, 2vh, 1.5rem) 0;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 3vh, 2rem);
}

/* Ux4gAlert, info → secondaryContainer (DESIGN.md §3.2): the note that the
   page is still in English, or that its translation is an unreviewed draft. */
.banner {
  display: flex;
  align-items: flex-start;
  align-self: flex-start;
  gap: 0.625rem;
  max-width: 40rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.banner[hidden] {
  display: none;
}

.banner .icon {
  margin-top: 0.15em;
}

/* "Hello, India", one script at a time: each phrase broken after its comma
   into two lines that site.js sizes to fill the width, inside a box of fixed
   height so nothing below moves when the script changes. */
.greeting {
  position: relative;
  height: clamp(12rem, min(46vh, 84vw), 34rem);
}

.greeting__phrase {
  --leading: 1.32;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--serif);
  line-height: var(--leading);
  color: var(--md-on-surface);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.greeting__phrase[data-script="Latn"] {
  --leading: 1.04;
  --tracking: -0.03em; /* Latin only: tracking breaks joining scripts */
}

.greeting__line {
  display: block;
  width: max-content;
  font-size: clamp(3rem, 15vw, 11rem);
  letter-spacing: var(--tracking, 0); /* em of the line's own size */
  white-space: nowrap;
}

.greeting__line:first-child {
  align-self: flex-start;
}

.greeting__line:last-child {
  align-self: flex-end;
}

.greeting__line:only-child {
  align-self: center;
}

.js .greeting:not(.is-ready) .greeting__phrase {
  opacity: 0;
}

.greeting__phrase.is-entering {
  opacity: 0;
  transform: translateY(0.5rem);
}

.greeting__phrase.is-leaving {
  opacity: 0;
  transform: translateY(-0.5rem);
}

.hero__lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vh, 2.25rem);
  align-items: end;
}

.hero__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.875rem;
  max-width: 36rem;
}

.hero__title {
  font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2.125rem);
  line-height: var(--lh-title);
  text-wrap: balance;
}

.hero__body {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  color: var(--md-on-surface-variant);
  text-wrap: pretty;
}

.hero__action {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 1.25rem;
}

@media (min-width: 62rem) {
  .hero__lower {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(2rem, 5vw, 5rem);
  }

  .hero__action {
    justify-items: end;
  }
}

/* The extra-large call to action: the app's composer radius (UX4G 2xl), the
   arrow in a chip of its own. */
.cta {
  --pad: clamp(0.5rem, 0.3rem + 0.6vw, 0.875rem);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  width: 100%;
  min-height: clamp(4.75rem, 3.75rem + 3.6vw, 7.5rem);
  padding: var(--pad);
  padding-inline-start: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  border-radius: var(--radius-2xl);
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-size: clamp(1.625rem, 1.1rem + 2.4vw, 3.25rem);
  line-height: var(--lh-title);
  text-decoration: none;
  box-shadow: var(--shadow-2), 0 1.5rem 3rem -1.5rem color-mix(in srgb, var(--md-primary) 80%, transparent);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

@media (min-width: 40rem) {
  .cta {
    width: auto;
    min-width: min(100%, 30rem);
  }
}

.cta__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(3.5rem, 2.9rem + 2.4vw, 6rem);
  aspect-ratio: 1;
  border-radius: var(--radius-xl);
  background: var(--md-on-primary);
  color: var(--md-primary);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cta__icon .icon {
  width: 48%;
  height: 48%;
}

/* Material state layers: on-primary at 8 % (hover) and 12 % (pressed). */
.cta:hover {
  background: color-mix(in srgb, var(--md-primary), var(--md-on-primary) 8%);
  box-shadow: var(--shadow-3), 0 2rem 3.5rem -1.5rem color-mix(in srgb, var(--md-primary) 85%, transparent);
  transform: translateY(-2px);
}

.cta:hover .cta__icon {
  transform: translateX(0.375rem);
}

[dir="rtl"] .cta:hover .cta__icon {
  transform: translateX(-0.375rem);
}

.cta:active {
  background: color-mix(in srgb, var(--md-primary), var(--md-on-primary) 12%);
  transform: translateY(0);
}

.cta:focus-visible {
  outline-width: 3px;
  outline-offset: 4px;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--md-on-surface-variant);
}

.facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.facts .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--md-primary);
}

/* The unofficial notice: secondary in weight, never hidden (DESIGN.md §7). */
.notice {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--md-on-surface-variant);
}

.hero .notice {
  padding-top: clamp(0.25rem, 1.5vh, 1rem);
}

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

main > section + section {
  margin-top: var(--section-gap);
}

.section-title {
  font-family: var(--serif);
  font-size: clamp(1.875rem, 1.2rem + 2.8vw, 3.75rem);
  line-height: var(--lh-title);
  text-wrap: balance;
}

.section-body {
  max-width: 38rem;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  color: var(--md-on-surface-variant);
  text-wrap: pretty;
}

.kicker {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  color: var(--md-primary);
}

/* Big numbers: primary into tertiary, both scheme roles. */
.numeral,
.fit--sites .fit__text {
  background: linear-gradient(120deg, var(--md-primary) 15%, var(--md-tertiary) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------- 23 languages */

.languages__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: clamp(1rem, 3vw, 2rem);
}

@media (min-width: 48rem) {
  .languages__inner {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(1.5rem, 4vw, 4.5rem);
  }
}

.numeral {
  margin-inline-start: -0.06em;
  padding-inline-end: 0.04em;
  font-family: var(--serif);
  font-size: clamp(11rem, 6rem + 30vw, 34rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  user-select: none;
}

.languages__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 1.25rem;
  padding-bottom: 0.5rem;
}

.text-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin-inline-start: -1rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--md-primary);
  font-size: 1.0625rem;
  line-height: 1.4;
  cursor: pointer;
}

.text-button:hover {
  background: color-mix(in srgb, var(--md-primary) 8%, transparent);
}

/* Two rows of every language's name, sliding apart as the page scrolls
   (site.js sets --shift); a plain wrapped list when motion is reduced. */
/* Block layout on purpose: a grid's auto track would grow to the row's
   width and `left: 50%` would no longer mean the viewport's middle. */
.rows {
  margin-top: clamp(2.5rem, 6vw, 5rem);
  overflow: clip;
  direction: ltr;
}

.rows__row + .rows__row {
  margin-top: clamp(0.25rem, 1vw, 0.75rem);
}

.rows__row {
  position: relative;
  left: 50%;
  display: flex;
  width: max-content;
  font-family: var(--serif);
  font-size: clamp(2.75rem, 1.5rem + 6vw, 7.5rem);
  line-height: 1.5;
  white-space: nowrap;
  transform: translate3d(calc(-50% + var(--shift, 0px)), 0, 0);
  will-change: transform;
}

.rows__row:nth-child(2) {
  color: var(--md-primary);
}

.rows__item {
  display: inline-flex;
  align-items: center;
}

.rows__item::after {
  content: "";
  width: 0.12em;
  height: 0.12em;
  margin-inline: 0.5em;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
}

/* ---------------------------------------------------------------- demo */

.demo .kicker {
  margin-bottom: clamp(0.75rem, 2vw, 1.5rem);
}

.question {
  max-width: 15ch;
  font-family: var(--serif);
  font-size: clamp(2.375rem, 0.6rem + 7.4vw, 7rem);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

/* 15ch suits English; scripts with long words get the full measure. */
:root:not(:lang(en)) .question {
  max-width: none;
}

.demo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: clamp(2.5rem, 5vw, 4rem);
  margin-top: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 62rem) {
  .demo__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

/* The app's AnswerCard: surfaceContainerLowest, radius lg, outlineVariant. */
.answer-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 1.25rem;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-lg);
  background: var(--md-surface-container-lowest);
  box-shadow: var(--shadow-2);
}

.tag--example {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

.answer-card__answer {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  line-height: var(--lh-title);
}

.answer-card__sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* FilledButton: UX4G radius md, 44 px target. */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.625rem 1.25rem 0.625rem 1rem;
  border-radius: var(--radius-md);
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-size: 1rem;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.button:hover {
  background: color-mix(in srgb, var(--md-primary), var(--md-on-primary) 8%);
}

.button .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.answer-card__checked {
  font-size: 0.875rem;
  color: var(--md-on-surface-variant);
}

.points {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.25rem);
  counter-reset: point;
}

.points li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: 1rem;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4375rem);
  line-height: 1.5;
  counter-increment: point;
}

.points li::before {
  content: counter(point);
  font-family: var(--serif);
  font-size: 2.4em;
  line-height: 1;
  color: var(--md-primary);
}

/* ------------------------------------------------------ fit-to-width */

/* One line sized by site.js to the container's width; without script it
   simply wraps at a large size. */
.fit {
  font-family: var(--serif);
  line-height: 0.95;
}

/* Tracking is set on the sized element itself (through --tracking) so its
   em follows the size site.js gives it; an em inherited from the parent
   would arrive as fixed pixels and skew the measurement. */
.fit__text {
  display: inline-block;
  letter-spacing: var(--tracking, 0);
}

.fit.is-fitted .fit__text {
  white-space: nowrap;
}

.fit--sites {
  --tracking: -0.045em;
  font-size: clamp(5rem, 24vw, 22rem);
}

.fit--sites .fit__text {
  padding-inline-end: 0.05em;
}

.sites__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 62rem) {
  .sites__copy {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    column-gap: 4rem;
  }
}

/* --------------------------------------------------------------- never */

.never__title {
  margin-bottom: clamp(1rem, 3vw, 2rem);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  line-height: var(--lh-title);
}

/* Each item stays on one line so its stroke crosses it once; site.js shrinks
   the list when its widest item (padding included) would not fit. */
.strikes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  font-family: var(--serif);
  font-size: clamp(3rem, 0.5rem + 11vw, 10rem);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}

.strikes li:nth-child(5n + 2) {
  justify-self: end;
}

.strikes li:nth-child(5n + 3) {
  justify-self: center;
}

.strikes li:nth-child(5n + 4) {
  padding-inline-start: 8%;
}

.strikes li:nth-child(5n) {
  justify-self: end;
  padding-inline-end: 4%;
}

.strike {
  position: relative;
  display: inline-block;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}

.strike::after {
  content: "";
  position: absolute;
  top: 52%;
  inset-inline: -0.08em;
  height: 0.085em;
  border-radius: 0.05em;
  background: var(--md-primary);
  transform: rotate(-3deg) scaleX(1);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.2, 0.75, 0.2, 1);
}

/* Scripts hung from a headline (Devanagari, Bengali, Gurmukhi …) carry
   their weight below it; through the middle of the line box the stroke
   reads as an overline. */
:root:not(:lang(en)) .strike::after {
  top: 58%;
}

[dir="rtl"] .strike::after {
  transform: rotate(3deg) scaleX(1);
  transform-origin: right center;
}

.js .strikes:not(.is-in) .strike::after {
  transform: rotate(-3deg) scaleX(0);
}

[dir="rtl"].js .strikes:not(.is-in) .strike::after {
  transform: rotate(3deg) scaleX(0);
}

.strikes li:nth-child(2) .strike::after { transition-delay: 0.12s; }
.strikes li:nth-child(3) .strike::after { transition-delay: 0.24s; }
.strikes li:nth-child(4) .strike::after { transition-delay: 0.36s; }
.strikes li:nth-child(5) .strike::after { transition-delay: 0.48s; }

.never__body {
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

/* ------------------------------------------------------------- closing */

.closing {
  padding-bottom: var(--section-gap);
}

/* minmax(0, 1fr): an auto track would grow to the unwrapped line and the
   fit would measure its own width. */
.closing__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}

.fit--closing {
  --tracking: var(--tracking-display);
  width: 100%;
  font-size: clamp(4rem, 18vw, 16rem);
  line-height: var(--lh-display);
}

.closing .cta {
  max-width: 100%;
}

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

.site-footer {
  border-top: 1px solid var(--md-outline-variant);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 2rem 2.5rem;
}

.notice--footer {
  font-size: 1rem;
  color: var(--md-on-surface);
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--md-on-surface-variant);
}

.brand__name--small {
  font-size: 1.0625rem;
}

.site-footer__meta a {
  color: var(--md-primary);
  text-underline-offset: 0.2em;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin-top: 0.25rem;
  font-size: 0.9375rem;
}

.site-footer__links a {
  display: inline-block;
  padding-block: 0.625rem; /* 44 px targets */
  color: var(--md-primary);
  text-underline-offset: 0.2em;
}

.site-footer__links a:hover {
  text-decoration-thickness: 2px;
}

/* ------------------------------------------------------ language picker */

.lang-dialog {
  width: min(100% - 2rem, 68rem);
  max-width: none;
  max-height: min(100% - 2rem, 52rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-2xl);
  background: var(--md-surface-container-lowest);
  color: var(--md-on-surface);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}

.lang-dialog::backdrop {
  background: rgb(0 0 0 / 0.32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.lang-dialog[open] {
  animation: dialog-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(1rem) scale(0.98);
  }
}

.lang-dialog__panel {
  max-height: min(100dvh - 2rem, 52rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lang-dialog__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.25rem 0.75rem 1.75rem;
  background: var(--md-surface-container-lowest);
}

.lang-dialog__title {
  font-size: 1.25rem;
  line-height: 1.4;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: var(--md-surface-container-low);
  cursor: pointer;
}

.icon-button:hover {
  background: var(--md-surface-container);
}

.lang-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.375rem;
  padding: 0.25rem 1rem 1.75rem;
}

.lang-option {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 2.75rem;
  padding: 0.05em 0.45em;
  border-radius: var(--radius-xl);
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.25rem);
  line-height: 1.5;
  color: var(--md-on-surface);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.lang-option:hover {
  background: var(--md-surface-container);
}

.lang-option[aria-current="true"] {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

.lang-option .icon {
  width: 0.55em;
  height: 0.55em;
}

.lang-option:not([aria-current="true"]) .icon {
  display: none;
}

@media (max-width: 40rem) {
  .lang-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .lang-dialog__panel {
    height: 100%;
    max-height: none;
  }
}

/* ------------------------------------------------- preferences & modes */

@media (prefers-reduced-motion: reduce) {
  .greeting__phrase,
  .strike::after,
  .cta,
  .cta__icon {
    transition: none;
  }

  .lang-dialog[open] {
    animation: none;
  }

  .rows__row {
    left: 0;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    font-size: clamp(2rem, 1rem + 4vw, 4.5rem);
    white-space: normal;
    transform: none;
  }

  .rows__row:nth-child(2) {
    display: none;
  }
}

@media print {
  .wash,
  .rows,
  [data-open-languages] {
    display: none;
  }

  .site-header {
    position: static;
  }

  /* The strokes carry the meaning; on paper they are always drawn. */
  .js .strikes:not(.is-in) .strike::after {
    transform: rotate(-3deg) scaleX(1);
  }
}

@media (prefers-contrast: more) {
  :root {
    --md-on-surface-variant: var(--md-on-surface);
    --md-outline-variant: var(--md-outline);
    --wash-strength: 0;
  }
}

@media (forced-colors: active) {
  .wash {
    display: none;
  }

  .numeral,
  .fit--sites .fit__text {
    background: none;
    color: CanvasText;
  }

  .cta,
  .button,
  .tag,
  .lang-button {
    border: 1px solid;
  }

  .strike::after {
    background: CanvasText;
  }
}