/* === generated by tools/fetch-fonts.py — do not edit by hand === */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-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;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-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;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/newsreader-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/newsreader-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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/newsreader-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/newsreader-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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/newsreader-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/newsreader-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;
}
@font-face {
  font-family: 'Tiro Gurmukhi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/tiro-gurmukhi-gurmukhi-400.woff2) format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0A01-0A76, U+200C-200D, U+20B9, U+25CC, U+262C, U+A830-A839;
}
@font-face {
  font-family: 'Tiro Gurmukhi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/tiro-gurmukhi-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Tiro Gurmukhi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/tiro-gurmukhi-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;
}
/* === end generated fonts === */

/* Gurbani Prakash
   One stylesheet for every static page. Replaces the five identical inline
   <style> blocks that used to live in each file.

   Palette is sampled from the site's own artwork rather than picked first and
   fought with afterwards: the ink is the ink in the paintings, the paper is the
   paper, the gold is the leaf gold in the ornaments.

   Signature: the sirlekh rule. Every Gurmukhi letter hangs from a continuous
   headstroke. Section headings here hang from a rule the same way. */

/* ── tokens ─────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  --ink:       #0B1220;
  --ink-2:     #16213A;
  --lapis:     #243C6C;
  --paper:     #E3D9C3;
  --paper-hi:  #EFE8D8;
  --deckle:    #CBAA7E;
  --gold:      #C89A46;
  --saffron:   #E07A1F;
  --rubric:    #9B2B2B;

  --bg:        var(--paper);
  --surface:   var(--paper-hi);
  --text:      #1A1710;
  --text-soft: #574E3D;
  --rule:      #C4B79A;
  --accent:    var(--saffron);
  --link:      #7A4A12;

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --ui: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --gurmukhi: "Tiro Gurmukhi", "Noto Serif Gurmukhi", "Noto Sans Gurmukhi", serif;

  --measure: 34rem;
  --wide: 68rem;
  --step: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:        var(--ink);
    --surface:   var(--ink-2);
    --text:      #E8E0CD;
    --text-soft: #A9A08A;
    --rule:      #2E3A57;
    --link:      #E0B25E;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        var(--ink);
  --surface:   var(--ink-2);
  --text:      #E8E0CD;
  --text-soft: #A9A08A;
  --rule:      #2E3A57;
  --link:      #E0B25E;
}

/* ── base ───────────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: 1.0625rem;
  line-height: 1.65;
}

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

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .7rem 1.1rem;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ── layout ─────────────────────────────────────────────────────────────── */

.wrap { width: min(100% - 2.5rem, var(--wide)); margin-inline: auto; }
.wrap--text { width: min(100% - 2.5rem, var(--measure)); margin-inline: auto; }

.band { padding: clamp(3rem, 7vw, 6rem) 0; }
.band--ink {
  background: var(--ink);
  color: #E8E0CD;
  --text: #E8E0CD;
  --text-soft: #A9A08A;
  --rule: #2E3A57;
  --link: #E0B25E;
  --accent: var(--gold);
}
.band--surface { background: var(--surface); }
.band--tight { padding: clamp(2rem, 4vw, 3rem) 0; }

/* ── type ───────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.4rem); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + .7vw, 1.4rem);
  line-height: 1.5;
  color: var(--text-soft);
}

.eyebrow {
  font-family: var(--ui);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rubric);
  margin: 0 0 .6rem;
}
.band--ink .eyebrow { color: var(--gold); }

/* The signature. A heading hangs from a rule the way Gurmukhi letters hang
   from the sirlekh. The rule is the full column, the heading sits tight under
   it, and the rubric mark sits on the line at the left. */
.sirlekh {
  border-top: 1px solid var(--rule);
  padding-top: .85rem;
  margin-top: 0;
  position: relative;
}
.sirlekh::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 3.5rem; height: 3px;
  background: var(--rubric);
}
.band--ink .sirlekh::before { background: var(--gold); }

/* ── gurmukhi ───────────────────────────────────────────────────────────── */

.gurmukhi, [lang="pa"] {
  font-family: var(--gurmukhi);
  line-height: 1.95;
}

/* ── pankti: the citation block, the atomic unit of the blog ────────────── */

.pankti {
  margin: 2rem 0;
  padding: 1.4rem 0 1.4rem 1.4rem;
  border-left: 2px solid var(--gold);
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 7%, transparent), transparent 60%);
}
.pankti__line {
  font-family: var(--gurmukhi);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.7rem);
  line-height: 1.9;
  /* Without this the closing danda wraps onto a line by itself. Balancing is a
     layout change only: the Gurmukhi is never altered to make it fit. */
  text-wrap: balance;
  color: var(--text);
  margin: 0 0 .6rem;
}
.pankti__translit {
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: lowercase;
  color: var(--text-soft);
  margin: 0 0 .8rem;
}
.pankti__meaning { margin: 0 0 .5rem; }
.pankti__meaning[lang="pa"] { font-family: var(--gurmukhi); line-height: 1.9; }
.pankti__ref {
  font-family: var(--ui);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--rubric);
  margin: .8rem 0 0;
}
.band--ink .pankti__ref { color: var(--gold); }
.pankti__ref b { font-weight: 600; }

/* ── plate: artwork mounted on the page, deckle edge showing ────────────── */

.plate {
  border: 1px solid color-mix(in srgb, var(--deckle) 60%, transparent);
  background: var(--deckle);
  padding: 6px;
  overflow: hidden;
}
.plate img { width: 100%; }
/* hero-ai is deliberately near-black. On the ink band it needs a lift or it
   reads as an empty frame. */
.plate--lift img { filter: brightness(1.5) saturate(1.15) contrast(1.05); }

/* ── ornament ───────────────────────────────────────────────────────────── */

.ornament {
  display: block;
  width: min(320px, 60%);
  margin: clamp(2.5rem, 5vw, 4rem) auto;
  opacity: .85;
}
.rosette { width: 34px; height: 34px; flex: 0 0 34px; opacity: .9; }

/* The project's own mark. The logo is drawn on white, so on the ink palette it
   needs a disc behind it rather than being left to float on a dark ground. */
.brandmark {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 50%;
  background: #fff;
}

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--ui);
  font-size: .95rem;
  font-weight: 600;
  padding: .78rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--ink); color: var(--paper-hi); }
.band--ink .btn--primary { background: var(--gold); color: var(--ink); }
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--rule);
}
.btn--ghost:hover { border-color: var(--accent); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }

/* ── nav ────────────────────────────────────────────────────────────────── */

.nav {
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 20;
}
.nav__in {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .85rem 0;
}
.nav__brand {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--text);
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.nav__links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.nav a:not(.nav__brand):not(.btn) {
  font-size: .92rem;
  text-decoration: none;
  color: var(--text-soft);
}
.nav a:not(.nav__brand):not(.btn):hover,
.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"] { border-bottom: 2px solid var(--accent); }

@media (max-width: 40rem) {
  .nav__in { flex-wrap: wrap; gap: .75rem 1rem; }
  .nav__brand { margin-right: 0; width: 100%; }
  .nav__links { gap: 1rem; font-size: .88rem; }
}

/* ── footer ─────────────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--rule);
  padding: 2.5rem 0 3rem;
  font-size: .9rem;
  color: var(--text-soft);
}
.foot__cols {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-bottom: 2rem;
}
.foot h4 {
  font-family: var(--ui);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: .7rem;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .4rem; }
.foot a { color: var(--text-soft); text-decoration: none; }
.foot a:hover { color: var(--text); text-decoration: underline; }
/* A link inside a footer sentence has to look like one. The column lists above
   are entirely links so they read as navigation without any marking, but the
   BaniDB credit and the build credit sit mid-sentence and were invisible. */
.foot p a {
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: .18em;
}
.foot p a:hover { text-decoration-color: currentColor; }

/* ── prose pages ────────────────────────────────────────────────────────── */

.prose h2 { margin-top: 2.75rem; }
.prose h3 { margin-top: 2rem; }
.prose ul, .prose ol { padding-left: 1.2rem; margin: 0 0 1.15em; }
.prose li { margin-bottom: .45rem; }
.prose blockquote {
  margin: 1.75rem 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--rule);
  color: var(--text-soft);
}

.note {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  background: var(--surface);
  padding: 1rem 1.15rem;
  font-size: .93rem;
  margin: 2rem 0;
}

/* ── utilities ──────────────────────────────────────────────────────────── */

.stack > * + * { margin-top: var(--step); }
.center { text-align: center; }
.muted { color: var(--text-soft); }
.small { font-size: .88rem; }
.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── hero: the read-along mechanic, running ─────────────────────────────── */

.hero {
  position: relative;
  background: var(--ink) url("../assets/art/hero-home.webp") center / cover no-repeat;
  color: #E8E0CD;
  padding: clamp(4rem, 11vw, 8.5rem) 0 clamp(3rem, 7vw, 5rem);
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, #0B1220 62%, transparent),
    color-mix(in srgb, #0B1220 30%, transparent) 55%,
    color-mix(in srgb, #0B1220 78%, transparent));
}
.hero__in { max-width: 44rem; }

.hero__rule {
  height: 1px;
  background: color-mix(in srgb, #C89A46 55%, transparent);
  margin-bottom: 1.4rem;
}

/* Words light one at a time, driven by site.js, the way they do in the app.
   Under reduced motion every word is simply lit and nothing moves. */
.pankti-live {
  font-family: var(--gurmukhi);
  font-size: clamp(1.4rem, 1rem + 2.2vw, 2.5rem);
  line-height: 1.95;
  text-wrap: balance;
  margin: 0 0 1rem;
  color: color-mix(in srgb, #E8E0CD 55%, transparent);
}
.pankti-live w {
  transition: color .18s ease;
  padding: 0 .06em;
}
.pankti-live w.lit { color: #F3C46A; }
@media (prefers-reduced-motion: reduce) {
  .pankti-live { color: #E8E0CD; }
  .pankti-live w.lit { color: #E8E0CD; }
}

.hero__translit {
  font-size: .85rem;
  letter-spacing: .07em;
  color: #A9A08A;
  margin: 0 0 .5rem;
}
.hero__meaning {
  font-family: var(--display);
  font-size: clamp(1.05rem, .95rem + .6vw, 1.3rem);
  color: #D6CDB6;
  margin: 0;
  max-width: 30rem;
}
.hero__ref {
  font-size: .82rem;
  letter-spacing: .05em;
  color: #C89A46;
  margin: .9rem 0 0;
}
.hero__pitch {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.012em;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  line-height: 1.4;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  max-width: 26rem;
  color: #E8E0CD;
}
.hero .btn--ghost { color: #E8E0CD; border-color: rgba(232, 224, 205, .35); }
.hero .btn--ghost:hover { border-color: var(--gold); }
.hero .btn--primary { background: var(--gold); color: var(--ink); }

/* ── doors: the three products, as bands not as a row of cards ──────────── */

.door { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 52rem) {
  .door { grid-template-columns: 1fr 1fr; }
  .door--flip .door__art { order: -1; }
}
.door__body { max-width: 32rem; }
.door__art img { width: 100%; }
.door__shots {
  display: flex;
  gap: 1rem;
  justify-content: center;
  /* Without this the phones stretch to equal height, and the staggered second
     one drags 2.5rem of empty bezel onto the bottom of the first. */
  align-items: flex-start;
}
.door__shots .phone:nth-child(2) { margin-top: 2.5rem; }

/* Screenshots are quarantined inside a dark bezel. The app's UI is cobalt on
   pale lavender, which does not belong to this palette; framing them makes them
   read as a screen shown on the page rather than as part of the page. */
.phone {
  background: #0B1220;
  border: 1px solid #2E3A57;
  border-radius: 14px;
  padding: 5px;
  max-width: 210px;
  /* min-width:0 is what actually lets these shrink. Without it a flex item
     refuses to go below its content width and two phones side by side push the
     whole page wider than a narrow viewport. */
  flex: 1 1 0;
  min-width: 0;
  box-shadow: 0 12px 30px -18px rgba(11,18,32,.75);
}
.phone img { border-radius: 10px; width: 100%; }

/* A pair of screens shown on their own rather than beside body copy. They get
   more width than a door's phones because the point here is that the text on
   the screen is readable. */
.shots-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2rem);
  justify-content: center;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.shots-row figure { margin: 0; max-width: 300px; flex: 1 1 240px; min-width: 0; }
.shots-row .phone { max-width: none; }
.shots-row figcaption {
  font-family: var(--ui);
  font-size: .82rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin-top: .8rem;
  text-align: center;
}

/* ── steps: a real sequence, so numbering is earned ─────────────────────── */

.steps { counter-reset: step; display: grid; gap: 1.75rem; margin-top: 2.5rem; }
@media (min-width: 46rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { counter-increment: step; border-top: 1px solid var(--rule); padding-top: 1rem; }
.step::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--ui);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--gold);
  margin-bottom: .5rem;
}
.step h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.step p { font-size: .94rem; color: var(--text-soft); margin: 0; }

/* ── transcript: a real exchange, shown rather than described ───────────── */

.chat { display: grid; gap: 1rem; max-width: 38rem; margin-top: 2rem; }
.turn {
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1rem 1.15rem;
  background: color-mix(in srgb, var(--ink-2) 55%, transparent);
}
.turn__who {
  font-family: var(--ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .5rem;
}
.turn--you { margin-right: clamp(0rem, 8vw, 4rem); }
.turn--ai { margin-left: clamp(0rem, 8vw, 4rem); }
.turn p:last-child { margin-bottom: 0; }
.turn .pankti { margin: 1rem 0 .5rem; }

/* ── blog index ─────────────────────────────────────────────────────────── */

.entries { list-style: none; margin: 2rem 0 0; padding: 0; }
.entry { border-top: 1px solid var(--rule); }
.entry:last-child { border-bottom: 1px solid var(--rule); }
.entry a {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 1.15rem .25rem;
  text-decoration: none;
  color: var(--text);
}
.entry a:hover { background: color-mix(in srgb, var(--gold) 8%, transparent); }
/* The gutter mark encodes the kind: a question, or an article. */
.entry__mark {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--rubric);
  font-style: italic;
}
.entry__title { font-family: var(--display); font-size: 1.16rem; line-height: 1.3; }
.entry__sum { font-size: .9rem; color: var(--text-soft); margin-top: .25rem; display: block; }
.entry__meta { font-size: .8rem; color: var(--text-soft); white-space: nowrap; letter-spacing: .04em; }
@media (max-width: 36rem) {
  .entry a { grid-template-columns: 1.6rem 1fr; }
  .entry__meta { grid-column: 2; }
}

.filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.filters button {
  font-family: var(--ui); font-size: .85rem;
  padding: .4rem .9rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--text-soft);
  cursor: pointer;
}
.filters button[aria-pressed="true"] {
  background: var(--ink); color: var(--paper-hi); border-color: var(--ink);
}

/* ── language toggle on an answer ───────────────────────────────────────── */

.langbar { display: flex; gap: .4rem; margin: 0 0 2rem; }
.langbar button {
  font-family: var(--ui); font-size: .85rem; font-weight: 600;
  padding: .4rem 1rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--text-soft);
  cursor: pointer;
}
.langbar button[aria-pressed="true"] {
  background: var(--ink); color: var(--paper-hi); border-color: var(--ink);
}
.answer__meta {
  font-size: .85rem;
  color: var(--text-soft);
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  margin-top: 3rem;
}

/* ── answer block: the direct answer, before the reasoning ──────────────── */

.answerbox {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rubric);
  background: var(--surface);
  padding: 1.15rem 1.3rem;
  margin: 0 0 2.5rem;
}
.answerbox__label {
  font-family: var(--ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rubric);
  margin: 0 0 .5rem;
}
.answerbox__text {
  font-family: var(--display);
  font-size: clamp(1.08rem, 1rem + .5vw, 1.25rem);
  line-height: 1.5;
  margin: 0;
}
.answerbox__text[lang="pa"] { font-family: var(--gurmukhi); line-height: 1.85; }

/* ── inline quotation inside a paragraph ────────────────────────────────── */

/* Gurmukhi set inside running English needs a size bump: at the same nominal
   size it reads noticeably smaller than the Latin around it. */
.q {
  font-family: var(--gurmukhi);
  font-size: 1.12em;
  line-height: 1.9;
  quotes: none;
  color: var(--text);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
}
.q-cite {
  font-family: var(--ui);
  font-size: .72em;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--rubric);
  text-decoration: none;
  margin-left: .35em;
  vertical-align: .15em;
}
.q-cite:hover { text-decoration: underline; }
.band--ink .q-cite { color: var(--gold); }

/* ── every pankti cited, listed at the end ──────────────────────────────── */

.sources {
  list-style: none;
  counter-reset: src;
  margin: 1.5rem 0 0;
  padding: 0;
}
.sources li {
  counter-increment: src;
  border-top: 1px solid var(--rule);
  padding: 1rem 0 1rem 2.4rem;
  position: relative;
  scroll-margin-top: 5rem;
}
.sources li::before {
  content: counter(src);
  position: absolute;
  left: 0;
  top: 1.05rem;
  font-family: var(--ui);
  font-size: .78rem;
  font-weight: 600;
  color: var(--rubric);
}
.sources li:target { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.src__line {
  font-family: var(--gurmukhi);
  font-size: 1.12rem;
  line-height: 1.85;
  margin: 0 0 .3rem;
}
.src__meaning { font-size: .93rem; color: var(--text-soft); margin: 0 0 .3rem; }
.src__meaning[lang="pa"] { font-family: var(--gurmukhi); line-height: 1.85; }
.src__ref { font-size: .8rem; letter-spacing: .04em; color: var(--rubric); margin: 0; }

/* ── homepage: the project first, then its parts ────────────────────────── */

.hero-plate { padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero-plate h1 {
  max-width: 20ch;
  margin-inline: auto;
}
.hero-plate__lede {
  max-width: 46ch;
  margin: 0 auto;
  color: #D6CDB6;
}

/* The three products, named together so the project reads as a whole rather
   than as whichever tool happens to be at the top of the page. */
.parts {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  text-align: left;
}
@media (min-width: 46rem) { .parts { grid-template-columns: repeat(3, 1fr); } }
.parts li {
  border-top: 1px solid #2E3A57;
  padding-top: 1.1rem;
  min-width: 0;
}
.parts img {
  width: 64px; height: 64px;
  border-radius: 12px;
  margin-bottom: .9rem;
}
.parts h2 {
  font-size: 1.25rem;
  margin-bottom: .35rem;
}
.parts p {
  font-size: .95rem;
  color: #A9A08A;
  margin-bottom: .6rem;
}
.parts a {
  font-family: var(--ui);
  font-size: .85rem;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
}
.parts a:hover { text-decoration: underline; }

/* Store links. Used in the homepage cards and under the call to action on
   each app page, so the colours come from tokens. .band--ink is dark in
   either theme and gets fixed values. The marks are inline SVG: the official
   badge images are illegible at this size and would cost four more requests
   on the home page. */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .9rem 0 0;
}
.btn-row + .stores { margin-top: 1rem; }
a.store {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--ui);
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-soft);
  text-decoration: none;
}
a.store:hover {
  border-color: var(--gold);
  color: var(--link);
  text-decoration: none;
}
.band--ink a.store, .parts a.store { border-color: #2E3A57; color: #C8C0AC; }
.band--ink a.store:hover, .parts a.store:hover { border-color: var(--gold); color: var(--gold); }
.store__mark { flex: none; }
.btn .store__mark { width: 16px; height: 16px; }

/* The word highlighting, shown where it belongs: inside the Read Along
   section, labelled, rather than standing in for the whole project. */
.demo {
  margin: 2rem 0 0;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  background: var(--surface);
}
.demo .pankti-live {
  font-size: clamp(1.15rem, .9rem + 1.4vw, 1.7rem);
  margin: 0 0 .7rem;
  color: color-mix(in srgb, var(--text) 40%, transparent);
}
.demo .pankti-live w.lit { color: var(--saffron); }
@media (prefers-reduced-motion: reduce) {
  .demo .pankti-live { color: var(--text); }
  .demo .pankti-live w.lit { color: var(--text); }
}
.demo__cap {
  font-family: var(--ui);
  font-size: .8rem;
  color: var(--text-soft);
  margin: 0;
}

/* The homepage plate. Dark-grounded, so it sits on the ink band in either
   theme. Capped in width because its lettering is part of the artwork and
   stops being legible if it is scaled down too far. */
.plate {
  /* Capped well below the band width on purpose. At 58rem the plate alone
     filled a laptop screen and pushed the headline below the fold, so a
     visitor saw a picture and no words. */
  width: min(100%, 38rem);
  margin: 0 auto clamp(1.5rem, 2.5vw, 2rem);
  border-radius: 2px;
}

/* ── getting into the reader ─────────────────────────────────────────────── */

.btn-row--center { justify-content: center; }
.btn--lg { font-size: 1.05rem; padding: .95rem 1.9rem; }

.hero-plate__note {
  font-family: var(--ui);
  font-size: .85rem;
  color: #A9A08A;
  margin: 1rem 0 0;
}

/* The reader moved off the root, so this is the one persistent way back into
   it. Sits apart from the text links so it never reads as another article. */
.nav__open {
  padding: .45rem 1rem;
  font-size: .85rem;
  margin-left: .5rem;
}
.nav__open:hover { transform: none; }
@media (max-width: 40rem) {
  .nav__open { margin-left: 0; }
}