/* બેઠક — Bethak
   ─────────────────────────────────────────────────────────────────────────
   Ajrakh has three colours: indigo, madder, and the undyed cotton they are
   printed onto. This is the cotton — khadi ground, with indigo and madder
   used only as marks. Calm, warm, and a lot of air.

   Type: Rasa (Ek Type, Mumbai) for Gujarati — a Gujarati serif rather than
   the usual sans, drawn by an Indian foundry. Gentium Book Plus for Latin,
   because it is the one warm serif that actually carries every ISO 15919
   mark including ṁ, which appears in 725 of the 1,234 transliterations and
   was silently falling back to a system font before.

   The Gujarati is the hero everywhere. A reader recognises the saying before
   they read the English; the script gets the size and the space. */

:root {
  --khadi:     #FAF6EC;   /* undyed cotton: ground */
  --khadi-2:   #F3ECDD;   /* a shade in the weave */
  --rule:      #E3D9C5;   /* hairlines */
  --stone:     #8B8173;   /* secondary type */
  --ink:       #2B2620;   /* body: warm near-black, never #000 */
  --madder:    #B03A22;   /* madder root */
  --indigo:    #21406A;   /* indigo vat */

  --lh-gu: 1.8;           /* Gujarati stacks marks above AND below the
                             baseline; Latin leading clips the matras */
  --lh-la: 1.68;
  --measure: 38rem;
}

*, *::before, *::after { box-sizing: border-box; }
/* 18px root: every rem below scales from here, so the small labels
   land at a readable size instead of 10px. */
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--khadi);
  color: var(--ink);
  font-family: "Gentium Book Plus", Georgia, serif;
  font-size: 1.06rem;
  line-height: var(--lh-la);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── the two scripts ───────────────────────────────────────────────────── */

.gu {
  font-family: "Rasa", "Noto Serif Gujarati", serif;
  line-height: var(--lh-gu);
  font-size: 1.2em;
  font-weight: 500;
}

/* Gentium carries ā ī ū ē ō ṅ ś ṭ ḍ ṇ ṁ ḷ ṛ ṣ — verified against the served
   woff2, not assumed. Do not swap this face without re-checking. */
.iso {
  font-style: italic;
  font-size: .97em;
  color: var(--indigo);
  letter-spacing: .01em;
}

a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 4px; }
a:hover { color: var(--madder); text-decoration-color: var(--madder); }
a:focus-visible, input:focus-visible, button:focus-visible {
  outline: 2px solid var(--madder); outline-offset: 3px;
}

/* ── frame ──────────────────────────────────────────────────────────────
   Sadhguru's elegance is almost entirely air, so the frames come off: no
   boxes, no cards. Space does the separating. */

main { max-width: var(--measure); margin: 0 auto; padding: 4.5rem 1.5rem 6rem; }

header.site {
  max-width: var(--measure); margin: 0 auto;
  padding: 2.25rem 1.5rem 0;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.brand { text-decoration: none; color: inherit; display: flex; align-items: baseline; gap: .6rem; }
.brand-gu {
  font-family: "Rasa", serif; font-size: 1.75rem; font-weight: 600; line-height: 1;
}
.brand-en {
  font-size: .76rem; letter-spacing: .24em; text-transform: uppercase; color: var(--stone);
}
nav { display: flex; gap: 1.6rem; font-size: 1rem; }
nav a { text-decoration: none; color: var(--stone); }
nav a:hover { color: var(--madder); }

/* ── ajrakh mark ───────────────────────────────────────────────────────────
   The signature, and the only ornament on the page. Real Ajrakh is a printed
   ground, not a badge, so the lattice sits *behind* the saying at 7% and
   fades at the edges — the eye takes it in with the words rather than as a
   separate mark. Indigo, because on real cloth the ground is the dyed part
   and madder is saved for the figure. */

.ajrakh {
  position: absolute; inset: -1.75rem -2.5rem auto;
  height: calc(100% + 3.5rem); width: calc(100% + 5rem);
  color: var(--indigo); opacity: .07;
  pointer-events: none; z-index: 0;
  /* fades out at the edges so it reads as cloth the words are printed on,
     not as a boxed panel behind them */
  -webkit-mask-image: radial-gradient(115% 85% at 50% 45%, #000 38%, transparent 78%);
          mask-image: radial-gradient(115% 85% at 50% 45%, #000 38%, transparent 78%);
}

/* ── the saying ────────────────────────────────────────────────────────── */

.saying { position: relative; margin: 0 0 3rem; padding: .5rem 0 .25rem; }
.saying > .gu, .saying > .iso { position: relative; z-index: 1; }
.saying .gu {
  font-size: 2.7rem; font-weight: 500; margin: 0 0 .55rem;
  line-height: 1.5; letter-spacing: -.005em;
}
.saying .iso { font-size: 1.02rem; margin: 0; }

/* ── glosses ───────────────────────────────────────────────────────────── */

.gloss { margin: 0; padding-top: 2rem; border-top: 1px solid var(--rule); }
.gloss dt {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--stone); font-weight: 700; margin-bottom: .45rem;
}
.gloss dd { margin: 0 0 2rem; font-size: 1.06rem; }
.gloss dd:last-child { margin-bottom: 0; }

.pending { color: var(--stone); font-style: italic; }

.meta {
  margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
  font-size: .94rem; color: var(--stone);
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline;
}
.meta a { color: var(--stone); }

/* ── lists ─────────────────────────────────────────────────────────────── */

ol.results { list-style: none; padding: 0; margin: 2.5rem 0 0; }
ol.results li + li { border-top: 1px solid var(--rule); }
ol.results a {
  text-decoration: none; display: block; color: inherit;
  padding: 1.5rem 0; transition: color .14s ease;
}
ol.results a:hover .gu { color: var(--madder); }
ol.results .gu  { font-size: 1.62rem; margin: 0 0 .15rem; transition: color .14s ease; }
ol.results .iso { font-size: 1rem; margin: 0; }
ol.results .en  { font-size: 1.02rem; color: var(--stone); margin: .45rem 0 0; }

/* ── search ────────────────────────────────────────────────────────────── */

/* A real field, not a hairline. The bare underline read as broken. */
form.search { display: flex; gap: .5rem; margin: 2rem 0 .9rem; }
form.search input {
  flex: 1; min-width: 0; padding: .85rem 1rem; font: inherit; font-size: 1.15rem;
  border: 1.5px solid var(--rule); border-radius: 2px;
  background: var(--khadi-2); color: var(--ink);
}
form.search input:focus { border-color: var(--madder); outline: none; background: var(--khadi); }
form.search input::placeholder { color: var(--stone); opacity: .8; }
form.search button {
  padding: .85rem 1.4rem; font: inherit; font-size: .92rem; cursor: pointer;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  border: 1.5px solid var(--madder); border-radius: 2px;
  background: var(--madder); color: var(--khadi); white-space: nowrap;
}
form.search button:hover { background: var(--ink); border-color: var(--ink); }
.hint { font-size: .98rem; color: var(--stone); margin: 0 0 3rem; }
.hint a { color: var(--stone); }

/* ── letters ───────────────────────────────────────────────────────────── */

.letters { display: flex; flex-wrap: wrap; gap: .15rem .55rem; margin: 1.5rem 0 3rem; }
.letters a {
  font-family: "Rasa", serif; font-size: 1.45rem; line-height: 1.6;
  padding: .1rem .3rem; text-decoration: none; color: var(--ink);
}
.letters a:hover { color: var(--madder); }
.letters a.on { color: var(--madder); border-bottom: 2px solid var(--madder); }

/* ── text ──────────────────────────────────────────────────────────────── */

h1 { font-size: 1.5rem; line-height: 1.45; margin: 0 0 1.25rem; font-weight: 400; color: var(--stone); }
h1 .gu {
  font-size: 2.8rem; display: block; margin-bottom: .5rem;
  font-weight: 500; color: var(--ink); line-height: 1.4;
}
h2 {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--stone); font-weight: 700; margin: 4rem 0 1rem;
}
p { margin: 0 0 1.35rem; }
.lede { font-size: 1.14rem; margin-bottom: 3rem; }
.muted { color: var(--stone); font-size: .98rem; }
.stats { font-size: .94rem; color: var(--stone); letter-spacing: .01em; }
.stats b { color: var(--ink); font-weight: 700; }

footer {
  max-width: var(--measure); margin: 0 auto;
  padding: 2rem 1.5rem 4rem; border-top: 1px solid var(--rule);
  font-size: .92rem; color: var(--stone); line-height: 1.6;
}
footer a { color: var(--stone); }

/* ── quality floor ─────────────────────────────────────────────────────── */

@media (max-width: 540px) {
  body { font-size: 18px; }
  main { padding: 3rem 1.25rem 4rem; }
  header.site { padding: 1.75rem 1.25rem 0; }
  .saying .gu { font-size: 1.75rem; }
  h1 .gu { font-size: 1.9rem; }
  h1 { font-size: 1.15rem; }
  nav { gap: 1.1rem; font-size: .94rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}