:root {
  color-scheme: dark;

  --ground: #0c0c0b;
  --ground-rgb: 12, 12, 11;
  --ink: #ebe7de;
  --ink-2: #a8a399;
  --ink-3: #847f77; /* 4.5:1 on ground, the floor for small text */
  --rule: rgba(235, 231, 222, 0.13);

  /* The grade for the background plate: grey, dim, low contrast, then a faint
     surgical-drape cast from --tint (multiplied). */
  --plate-filter: grayscale(1) contrast(0.82) brightness(0.56);
  --tint: #a3ada6;

  --sans: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --deva: "Mukta", "Noto Sans Devanagari", sans-serif;

  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
}

body {
  font-family: var(--sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--ground); }

/* ---- Background plate ------------------------------------------------ */

#source {
  position: fixed;
  left: 0;
  top: 0;
  width: 2px;
  height: 2px;
  opacity: 0;
  pointer-events: none;
}

.plate {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  /* Dims as the programmes chapter scrolls in; main.js sets --depth (0 to 1). */
  opacity: calc(1 - 0.6 * var(--depth, 0));
}

#plate {
  position: absolute;
  left: 0;
  top: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: var(--plate-filter);
  opacity: 0;
  transition: opacity 2.4s ease;
}

#plate.on { opacity: 1; }

/* Tint, then shade: darker on the text side and along the bottom, so the
   image breathes on the right and the words never sit on bright pixels. */
.plate::before,
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
}

.plate::before {
  background: var(--tint);
  mix-blend-mode: multiply;
}

.plate::after {
  background:
    linear-gradient(90deg,
      rgba(var(--ground-rgb), 0.86) 0%,
      rgba(var(--ground-rgb), 0.62) 34%,
      rgba(var(--ground-rgb), 0.12) 68%,
      rgba(var(--ground-rgb), 0.2) 100%),
    linear-gradient(0deg,
      rgba(var(--ground-rgb), 0.92) 0%,
      rgba(var(--ground-rgb), 0) 34%),
    linear-gradient(180deg,
      rgba(var(--ground-rgb), 0.55) 0%,
      rgba(var(--ground-rgb), 0) 16%);
}

/* ---- Page frame ------------------------------------------------------ */

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 26px var(--gutter);
  font-size: 14px;
  line-height: 1;
}

/* Larger than the menu, so the name leads the bar. The bar aligns on the
   baseline, so "Research" still sits level with it. */
.wordmark {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ---- Research menu --------------------------------------------------- */

.menu {
  position: relative;
  z-index: 3; /* over the verse below */
}

/* Reads like the rest of the bar. The padding is a bigger tap target; the
   negative margin cancels it so the text sits where the label did. */
.menu-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: -12px;
  padding: 12px;
  border: 0;
  background: none;
  font: inherit;
  line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.3s ease;
}

.menu-button:focus-visible {
  outline: 1px solid var(--ink-2);
  outline-offset: -4px;
}

.chevron { transition: transform 0.3s ease; }

/* The top padding bridges the gap, so the pointer can travel from the
   button to the panel without closing it. */
.menu-panel {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 14rem;
  padding-top: 16px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.menu-panel ul {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  border: 1px solid rgba(235, 231, 222, 0.3);
  background: rgba(19, 19, 18, 0.97);
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-2);
  text-decoration: none;
}

a.menu-item { color: var(--ink); }
a.menu-item:hover,
a.menu-item:focus-visible {
  background: rgba(235, 231, 222, 0.06);
  outline: none;
}

.soon {
  font-size: 13px;
  color: var(--ink-3);
}

/* Open: on hover where there is a pointer, or on click or tap (main.js adds .open). */
@media (hover: hover) {
  .menu-button:hover { color: var(--ink); }
  .menu:hover .menu-panel {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }
  .menu:hover .chevron { transform: rotate(180deg); }
}

.menu.open .menu-button { color: var(--ink); }
.menu.open .menu-panel {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.menu.open .chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .menu-button,
  .chevron,
  .menu-panel { transition: none; }
}

/* ---- Verse ----------------------------------------------------------- */

.verse {
  display: flex;
  align-items: flex-end;
  padding: 48px var(--gutter) clamp(56px, 12vh, 120px);
}

.verse figure {
  margin: 0;
  max-width: 60rem;
}

.sanskrit {
  margin: 0 0 1.2rem;
  font-family: var(--deva);
  font-weight: 300;
  font-size: clamp(1.05rem, 0.85rem + 0.6vw, 1.45rem);
  line-height: 1.5;
  color: var(--ink-2);
}

.english { margin: 0; }

.english p {
  margin: 0;
  max-width: 17ch;
  font-weight: 340;
  font-size: clamp(2.1rem, 1.1rem + 3.1vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}

.verse figcaption {
  display: grid;
  grid-template-columns: max-content minmax(0, 36ch);
  gap: 0.5rem 2.5rem;
  margin-top: 2.25rem;
  font-size: 13px;
  line-height: 1.55;
}

.source { color: var(--ink-2); }
.note { color: var(--ink-3); }

/* A slow, quiet entrance. Pure CSS, so the text still appears without scripts. */
.sanskrit,
.english,
.verse figcaption,
.index {
  animation: appear 1.6s ease both;
}
.sanskrit          { animation-delay: 0.3s; }
.english           { animation-delay: 0.55s; }
.verse figcaption  { animation-delay: 0.9s; }
.index             { animation-delay: 1.2s; }

@keyframes appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Programmes: the index on the first screen ----------------------- */

/* Index links glide to their entry, unless the visitor prefers less motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.index {
  padding: 0 var(--gutter) var(--gutter);
}

/* One four-column grid for the index and the chapter, so each description
   starts under the second column of the index. */
.index ul,
.entries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 24px;
}

/* Each link hangs from its own hairline: the name and an arrow pointing
   down to the chapter. */
.index a {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.3s ease-out;
}

.index-name {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.index-arrow {
  grid-row: 1;
  grid-column: 2;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink-2);
  transition: color 0.3s ease-out, transform 0.3s ease-out;
}

@media (hover: hover) {
  .index a:hover { border-top-color: var(--ink-2); }
  .index a:hover .index-arrow { color: var(--ink); transform: translateY(2px); }
}

/* Focus: a frame whose top edge is the link's own hairline. */
.index a:focus-visible { outline: none; }
.index a:focus-visible::after {
  content: "";
  position: absolute;
  inset: -1px -12px -12px;
  border: 1px solid var(--ink-2);
  pointer-events: none;
}
.index a:focus-visible .index-arrow { color: var(--ink); transform: translateY(2px); }

/* ---- Programmes: the chapter below ----------------------------------- */

/* Positioned like .page so it paints above the fixed plate. A running head
   sits at the top, where the bar is; the entries settle at the bottom,
   where the quote does. */
.chapter {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 26px var(--gutter) var(--gutter);
}

.chapter h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink-2);
}

/* An entry spans three of the four columns: the name in the first, the
   description across the next two. */
.entry {
  grid-column: 1 / 4;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding: clamp(16px, 2.5vh, 28px) 0 clamp(18px, 3vh, 32px);
  border-top: 1px solid var(--rule);
  scroll-margin-top: var(--gutter);
  transition: border-color 0.4s ease-out;
}

.entry:last-child { border-bottom: 1px solid var(--rule); }

/* The entry the visitor arrived at from the index. The glide takes about
   half a second, so the rule waits for it to settle and the visitor sees it light. */
.entry:target { border-top-color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .entry:target { transition-delay: 0.4s; }
}

.entry h3 {
  grid-area: 1 / 1;
  margin: 0;
  font-size: clamp(1.375rem, 1rem + 1vw, 2rem);
  font-weight: 340;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.entry-text {
  grid-area: 1 / 2 / 2 / 4;
  max-width: 32rem;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Keeps "pre-authorisations" whole, so no line ends on "pre-". */
.nowrap { white-space: nowrap; }

/* ---- Sign-off -------------------------------------------------------- */

/* The name across the full width, set like the headline. At this weight and
   tracking it is about 4.55 times as wide as its font size; dividing by 4.7
   leaves room for a scrollbar, so it never runs past the gutter. */
.signoff {
  position: relative;
  z-index: 1;
  padding: clamp(48px, 10vh, 120px) var(--gutter) calc(var(--gutter) * 0.75);
  font-size: calc((100vw - 2 * var(--gutter)) / 4.7);
  font-weight: 340;
  line-height: 0.8;
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: var(--ink);
}

/* Narrower screens: the longest names fill their column and crowd the
   description, so an entry takes all four, two for the name and two for
   the description. */
@media (max-width: 1180px) {
  .entry { grid-column: 1 / -1; }
  .entry h3 { grid-column: 1 / 3; }
  .entry-text { grid-column: 3 / 5; }
}

@media (max-width: 760px) {
  .verse { padding-top: 32px; padding-bottom: 40px; }
  .verse figcaption { grid-template-columns: 1fr; margin-top: 1.75rem; }

  /* On a phone the index only repeats the names the chapter lists a scroll
     below, so the quote leads straight into the chapter instead. */
  .index { display: none; }

  .entries { grid-template-columns: minmax(0, 1fr); }
  .chapter { padding-top: 64px; gap: 28px; }
  .entry {
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 20px 0 28px;
  }
  .entry h3 { grid-column: 1; }
  .entry-text { grid-area: 2 / 1 / 3 / -1; max-width: none; }

  /* Text runs the full width on a phone, so the whole plate sits lower. */
  .plate::after {
    background:
      linear-gradient(0deg,
        rgba(var(--ground-rgb), 0.94) 0%,
        rgba(var(--ground-rgb), 0.7) 45%,
        rgba(var(--ground-rgb), 0.45) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #plate,
  .index a,
  .index-arrow,
  .entry { transition: none; }
  .sanskrit,
  .english,
  .verse figcaption,
  .index {
    animation: none;
  }
}