/* citizen.org.in — landing page.
 *
 * Colour: the app's seed scheme (palette.css, DESIGN.md §3.2). Shape,
 * elevation, focus ring and targets: Material 3, as in the app (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 (AppTypography). */
  --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;

  /* Material 3 corners and elevation, named as in Material's tokens.css; the
     values are the app's (packages/design_tokens). A shadow is a key layer at
     30 % and an ambient one at 15 %, in the same shadow colour in both modes. */
  --md-sys-shape-corner-small: 0.5rem; /* 8 px */
  --md-sys-shape-corner-medium: 0.75rem; /* 12 px: cards */
  --md-sys-shape-corner-large: 1rem; /* 16 px */
  --md-sys-shape-corner-extra-large: 1.75rem; /* 28 px: dialogs, the composer */
  --md-sys-shape-corner-full: 9999px; /* pills: buttons, chips, tags */
  --md-sys-elevation-level1-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15);
  --md-sys-elevation-level2-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 6px 2px rgb(0 0 0 / 0.15);
  --md-sys-elevation-level3-shadow: 0 1px 3px rgb(0 0 0 / 0.3), 0 4px 8px 3px rgb(0 0 0 / 0.15);
  /* Material's minimum touch target. */
  --target: 3rem;
  /* Widths (media queries cannot read custom properties): below 37.5rem (600 px),
     Material's compact window, the language dialog fills the screen and the CTA spans
     the page. The other width rules follow the content: the hero's copy and CTA sit
     side by side from 62rem, the 23 beside its copy from 48rem, and the 22 and 26 rem
     rules fit small phones. */

  --container: 82.5rem; /* the widest the page grows */
  /* Doubled on 8 Oct 2026 (owner); also the space above the header. */
  --gutter: clamp(2rem, 8vw, 6rem);
  --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 {
    --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;
}

/* Material's focus ring: 3 px in secondary, 2 px outside the element. */
:focus-visible {
  outline: 3px solid var(--md-secondary);
  outline-offset: 2px;
}

.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 by boot.js on the English page while it moves on to the page in the
   visitor's language: keep this one out of sight in between. */
.is-leaving body {
  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(--md-sys-shape-corner-small);
  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;
  /* The gutter above and below the header, as at the sides (owner, 8 Oct 2026). The
     header sticks, so once the page scrolls (.is-scrolled, site.js) it tightens and
     does not keep up to 12rem of the screen. */
  padding-block: var(--gutter);
  transition: padding-block 0.2s ease;
}

.site-header.is-scrolled .site-header__inner {
  padding-block: 0.75rem;
}

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

/* The mark (brand/citizen-logo.svg) and the name, one link. The designer's
   navy; the scheme's primary on dark, where the navy would disappear (as
   BrandMark in the app). */
.brand__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* 3rem, the height of the language button and the blog link beside it (owner,
   8 Oct 2026), at every width. */
.brand__mark {
  flex: none;
  width: var(--target);
  height: var(--target);
  fill: #07038d;
}

@media (prefers-color-scheme: dark) {
  .brand__mark {
    fill: var(--md-primary);
  }
}

.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);
}

/* The app's InfoTag: a small soft-neutral pill. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--md-sys-shape-corner-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: var(--target);
  padding: 0.25rem 0.75rem 0.25rem 0.875rem;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-surface-container-lowest);
  box-shadow: var(--md-sys-elevation-level1-shadow);
  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(--md-sys-elevation-level2-shadow);
}

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

/* The language button and the link to the blog, side by side on the right. The blog
   link wears the language button's pill (.lang-button) and is a plain link. */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}

.header-link {
  color: var(--md-on-surface);
  text-decoration: none;
  font-size: 1.0625rem;
  line-height: 1.5;
  white-space: nowrap;
}

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

/* On a phone the logo stands alone; its name stays for screen readers (owner,
   8 Oct 2026). */
@media (max-width: 37.5rem) {
  .brand__name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

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

  /* On a phone the blog link is its icon (the label stays for screen readers), and the
     header tightens so the wordmark, the blog link and the language name fit at 375px. */
  .site-header__inner {
    gap: 0.5rem;
  }

  .header-actions {
    gap: 0.375rem;
  }

  .header-link {
    padding: 0.25rem 0.625rem;
  }

  .lang-button {
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
  }

  .lang-button .icon:last-child {
    display: none;
  }

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

  .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);
}

/* The app's InlineAlert, 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(--md-sys-shape-corner-medium);
  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 corners (Material's
   extra-large), 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(--md-sys-shape-corner-extra-large);
  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(--md-sys-elevation-level2-shadow), 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: 37.5rem) {
  .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(--md-sys-shape-corner-large);
  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(--md-sys-elevation-level3-shadow), 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);
}

.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, in the footer: secondary in weight, never hidden (DESIGN.md §7). */
.notice {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--md-on-surface-variant);
}

/* ------------------------------------------------------------ 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: var(--target);
  margin-inline-start: -1rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--md-sys-shape-corner-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 answer card: surfaceContainerLowest, Material's medium corners,
   outlineVariant, flat like every card that does not float. */
.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(--md-sys-shape-corner-medium);
  background: var(--md-surface-container-lowest);
}

.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: Material's pill, 48 px target. */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--target);
  padding: 0.625rem 1.25rem 0.625rem 1rem;
  border-radius: var(--md-sys-shape-corner-full);
  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);
}

/* Aryabeta's logo and "An Aryabeta project", one link (owner, 9 Oct 2026). The logo
   draws in the text colour (brand/aryabeta-logo.svg); the link is a 48 px target. */
.site-footer__project {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--target);
  /* The 48 px target reaches into the gaps around it, so the line sits just
     under the notice. */
  margin-block: -0.75rem;
  color: var(--md-on-surface-variant);
  text-decoration: none;
}

.site-footer__project:hover span {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer__logo {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--md-on-surface);
}

.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.75rem; /* 48 px targets around a 24 px line */
  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(--md-sys-shape-corner-extra-large);
  background: var(--md-surface-container-lowest);
  color: var(--md-on-surface);
  box-shadow: var(--md-sys-elevation-level3-shadow);
  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: var(--target);
  height: var(--target);
  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: var(--target);
  padding: 0.05em 0.45em;
  border-radius: var(--md-sys-shape-corner-large);
  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: 37.5rem) {
  .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,
  .site-header__inner {
    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);
  }
}

/* The narrowest phones (under 352px, e.g. 320px): the language button keeps only its
   globe (the name stays for screen readers), so the wordmark, the blog link and the
   language button still fit side by side in every script. */
@media (max-width: 22rem) {
  .lang-button__name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .lang-button {
    padding: 0.25rem 0.625rem;
  }
}

@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;
  }

  .brand__mark {
    fill: CanvasText;
  }
}