/* ==========================================================================
   Ghumushara Vaidya Sangha -- design system
   --------------------------------------------------------------------------
   Direction: warm ivory light, deep forest green, and a restrained antique
   gold used only for rings, rules and ornament. Sections alternate between
   ivory and a pale sage; content sits on light parchment-yellow cards with
   soft edges -- never pure white, which read as clinical against the warm
   grounds and the painted artwork; the footer is a deep green block. Headings are set in the serif, body in the
   sans, with a small gold leaf ornament marking each section.

   How this arrived: two earlier palettes were rejected as "too brown" -- a
   flat palm-leaf tan, then an ink-and-marigold scheme -- and a plain white and
   green build after them. What was actually wrong was not warmth but
   flatness. The warm tones here work because they are carried by luminous
   painted imagery rather than by slabs of tan, which is the distinction to
   hold on to before touching this palette again. See docs/DECISIONS.md.

   Explicitly avoided: mortar-and-pestle stock photography, lotus icons as
   decoration, and any claim-shaped copy or imagery -- see the compliance notes
   in CLAUDE.md before adding anything to a page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Ground */
  --ivory: #fbf8f0;         /* page */
  --cream: #f5f1e4;         /* alternating band */
  --sage: #eaefdf;          /* second alternating band */
  /* Boxes are a light parchment yellow, never pure white -- white read as
     clinical against the warm grounds and the painted artwork. Warmer and
     lighter than every band, so a card still lifts off whatever it sits on.
     Text on it: ink 12.8:1, forest 11.6:1, green 7.0:1. */
  --card: #fdf6de;

  /* Ink */
  --ink: #2a2e26;           /* body                          13.1:1 on ivory */
  --ink-soft: #555b4e;      /* secondary                      6.6:1 on ivory */

  /* Green */
  --forest: #1b3a22;        /* headings, buttons             11.8:1 on ivory */
  --forest-deep: #122a18;   /* footer ground */
  --green: #2f5d33;         /* labels, links, hover           7.2:1 on ivory */

  /* Gold. Decorative weight only -- 2.4:1, never text. */
  --gold: #c0a050;
  --gold-soft: #e3d5aa;

  /* Rules */
  --rule: #e4ddca;
  --rule-strong: #cfc4a6;

  /* Type */
  --font-body: 'Noto Sans Oriya', 'Noto Sans Devanagari',
    system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Cormorant Garamond', 'Noto Serif Oriya',
    'Noto Serif Devanagari', Georgia, 'Times New Roman', serif;

  /* Odia conjuncts stack tall; 1.78 is what real Odia paragraphs need to stop
     the ascenders of one line touching the descenders of the last. Tested with
     Odia copy, not lorem ipsum. */
  --lh-body: 1.78;
  --lh-heading: 1.34;
  --lh-display: 1.24;

  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --step-0: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --step-1: clamp(1.25rem, 1.17rem + 0.4vw, 1.4375rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --step-3: clamp(1.75rem, 1.45rem + 1.4vw, 2.625rem);
  --step-4: clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem);

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;

  --measure: 34rem;
  --wrap: 68rem;
  --band-pad: clamp(3rem, 2rem + 5vw, 5.5rem);
  --gutter: clamp(1.125rem, 0.7rem + 2.2vw, 2.25rem);

  /* Height of the sticky bar and nav above the hero, measured by
     assets/js/hero.js. 0 is a safe default: the hero is then a full viewport
     tall and merely a little long, rather than broken. */
  --chrome: 0px;

  --radius: 10px;
  --lift: 0 1px 2px rgb(27 58 34 / 0.05), 0 10px 30px -12px rgb(27 58 34 / 0.18);
  --lift-strong: 0 2px 6px rgb(27 58 34 / 0.07), 0 20px 46px -18px rgb(27 58 34 / 0.28);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;     /* anchor targets clear the sticky bar */
}

body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-weight: 700; line-height: var(--lh-heading); }

/* Cormorant sets noticeably smaller and lighter than Noto Serif Oriya at the
   same px, so Latin display text is nudged up to sit level with the Odia. */
html[data-lang='en'] .hero__name,
html[data-lang='en'] .band__title,
html[data-lang='en'] .brand__name { font-size: 1.12em; letter-spacing: 0.005em; }

a { color: var(--green); text-underline-offset: 0.18em; }
a:hover { color: var(--forest); }

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

/* --------------------------------------------------------------------------
   3. Language switching
   --------------------------------------------------------------------------
   Every translated block ships in the page with all three variants present in
   the DOM. Switching is a CSS attribute flip: instant, works offline once the
   page has loaded, and costs no Firestore read -- which is what lets the
   pre-rendered member pages carry all three languages in one file.
   -------------------------------------------------------------------------- */

[data-t] { display: none; }

html[data-lang='od'] [data-t='od'],
html[data-lang='en'] [data-t='en'],
html[data-lang='hi'] [data-t='hi'] { display: revert; }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band-pad); background: var(--ivory); }
.band--cream { background: var(--cream); }
.band--sage { background: var(--sage); }

.band__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  color: var(--forest);
  margin-bottom: var(--sp-3);
}

.band__lead {
  color: var(--ink-soft);
  max-width: var(--measure);
  margin-bottom: var(--sp-6);
}

/* Eyebrow: a small green label with a gold leaf, above a section title. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--green);
  margin-bottom: var(--sp-3);
}

.leaf {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--gold);
  border-radius: 0 60% 0 60%;
  transform: rotate(-45deg);
}

/* Section ornament: two gold hairlines flanking a leaf. */
.ornament {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 16rem;
  margin-block: var(--sp-4) var(--sp-6);
}

.ornament::before,
.ornament::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

.ornament--center { margin-inline: auto; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: var(--sp-3);
  z-index: 30;
  padding: var(--sp-2) var(--sp-4);
  background: var(--gold);
  color: var(--forest-deep);
  border-radius: 4px;
  transform: translateY(-250%);
}

.skip-link:focus { transform: none; }

/* The bar is the darkest green and the nav a step lighter, so the two read as
   one masthead with a clear hierarchy rather than as two stacked strips. Both
   are opaque -- a translucent bar over the painted hero muddied the artwork
   as it scrolled underneath. */
.site-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--forest-deep);
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
}

.site-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 4rem;
  padding-block: var(--sp-2);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

/* The emblem is generated on a transparent ground, so it needs a light plate
   to be legible on the dark bar. Same parchment as every other surface. */
.brand__mark {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--card);
  padding: 3px;
}

.brand__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.18;
  color: #fff;                /* on the dark bar: 15.4:1 */
  overflow-wrap: break-word;
  hyphens: none;
}

.brand__tag {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #b9c6b2;
  margin-top: 0.1rem;
}

/* Language control: three endonyms, always visible, never a dropdown.
   Every button clears a 44px touch target on a phone. */
.lang {
  display: flex;
  flex: none;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 999px;
  overflow: hidden;
  background: rgb(255 255 255 / 0.06);
}

.lang__btn {
  appearance: none;
  border: 0;
  border-inline-start: 1px solid rgb(255 255 255 / 0.2);
  background: transparent;
  color: #dfe7da;
  font-size: var(--step--1);
  line-height: 1;
  padding: 0.6rem 0.65rem;
  min-height: 2.5rem;
  cursor: pointer;
  white-space: nowrap;
}

.lang__btn:first-of-type { border-inline-start: 0; }
.lang__btn:hover { background: rgb(255 255 255 / 0.12); color: #fff; }

/* Gold on the dark bar: 6.1:1 against the deep green, and it ties the active
   state to the ornament colour used everywhere else. */
.lang__btn[aria-pressed='true'] { background: var(--gold); color: var(--forest-deep); font-weight: 700; }

/* On a phone the bar is sticky, so it has to stay cheap. "Ghumushara Vaidya
   Sangha" wraps to three lines at 360px and the tagline adds a fourth, which
   costs a quarter of the screen on every scroll. Drop the tagline and step the
   mark and name down. */
@media (max-width: 30rem) {
  .site-bar__inner { min-height: 3.25rem; gap: var(--sp-2); }
  .brand { gap: var(--sp-2); }
  .brand__mark { width: 2rem; height: 2rem; }
  .brand__name { font-size: var(--step-0); }
  .brand__tag { display: none; }
  .lang__btn { padding: 0.55rem 0.5rem; }
}

.site-nav { background: var(--forest); border-bottom: 3px solid var(--gold); }

/* This element also carries .wrap. Do NOT reset padding or margin wholesale
   here -- `padding: 0` and `margin: 0` would wipe out .wrap's padding-inline
   and margin-inline:auto, and the nav would run to the window edge while the
   rest of the page stayed centred. */
.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-5);
  list-style: none;
  padding-block: var(--sp-2) var(--sp-3);
}

.site-nav a {
  color: #dbe4d5;
  text-decoration: none;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  padding-block: var(--sp-2);
  border-bottom: 2px solid transparent;
}

.site-nav a:hover { color: #fff; border-bottom-color: var(--gold-soft); }

/* --------------------------------------------------------------------------
   6. Hero -- Option A
   --------------------------------------------------------------------------
   One painted scene with the copy over its open left. Two shapes from one
   piece of markup, because the two targets want opposite things:

   DESKTOP -- the picture must fill the entire viewport, not sit in a band in
   the middle or in one half. So the image is absolutely positioned across the
   whole section, the section is at least one screen tall, and the copy is laid
   over it behind a diagonal wash.

   PHONE -- the picture must never be cut in half by the fold. So the section
   becomes a two-row grid: copy first on a plain ivory ground, then the image
   below at its own full height, whole and uncropped-looking. No wash is needed
   because no text sits on the image at all.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--cream);
}

.hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Holds the figure in frame as the viewport narrows; the open left stays
     open for the headline. */
  object-position: 72% center;
  z-index: -2;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgb(251 248 240 / 0.96) 0%,
    rgb(251 248 240 / 0.88) 30%,
    rgb(251 248 240 / 0.38) 56%,
    rgb(251 248 240 / 0) 78%
  );
}

.hero__inner { max-width: 34rem; padding-block: clamp(3rem, 2rem + 6vw, 6rem); }

.hero__name {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: var(--lh-display);
  color: var(--forest);
  margin-bottom: var(--sp-2);
}

.hero__lede {
  font-size: var(--step-1);
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: var(--sp-6);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Desktop: the scene fills the screen edge to edge, and exactly one screen
   tall -- minus the bar and nav stacked above it, or the call to action ends
   up below the fold. svh, not vh, so mobile browser chrome cannot overflow it
   either. */
@media (min-width: 52rem) {
  .hero {
    min-height: calc(100svh - var(--chrome));
    display: grid;
    align-items: center;
  }

  /* Two problems, one fix.

     The figure's face was being sliced across the eyes by the nav: the crop
     was anchored at centre, which on a wide short box puts his head above the
     top edge. Anchoring near the top brings the whole face into frame.

     And rather than the image starting at a hard green line, the bar now
     bleeds into it -- the deep green of the nav continues a short way down and
     dissolves. His crown sits inside that dissolve, which reads as the bar
     resting on the picture instead of cutting it. The face clears the fade
     entirely.

     The green is listed FIRST in the background shorthand so it paints on top
     of the ivory scrim below it; later layers sit behind earlier ones. */
  .hero__art { object-position: 72% 8%; }

  .hero::after {
    background:
      linear-gradient(
        to bottom,
        var(--forest-deep) 0,
        rgb(27 58 34 / 0.55) 2.5rem,
        rgb(27 58 34 / 0) 7rem
      ),
      linear-gradient(
        100deg,
        rgb(251 248 240 / 0.96) 0%,
        rgb(251 248 240 / 0.88) 30%,
        rgb(251 248 240 / 0.38) 56%,
        rgb(251 248 240 / 0) 78%
      );
  }

  /* The nav loses its hard gold rule over the hero and hands off to that
     fade instead. */
  .site-nav { border-bottom-color: rgb(192 160 80 / 0.45); }

  /* align-items:center already centres the copy in that height, so the block
     padding only needs to keep it off the edges on a short laptop screen.
     The larger clamp used elsewhere pushed the buttons past the fold at
     647px of viewport height. */
  .hero__inner { padding-block: clamp(2rem, 1rem + 2.5vw, 3.5rem); }
}

/* Phone: copy above, whole picture below. The image is taken out of absolute
   flow and given its own row, so it can never straddle the fold. */
@media (max-width: 51.999rem) {
  .hero {
    display: grid;
    grid-template-rows: auto auto;
    background: var(--ivory);
  }

  /* No text over the image here, so the wash would only mute the painting. */
  .hero::after { display: none; }

  /* Picture first, copy under it. Copy-first was tried and put the image at
     616px on a 640px screen -- straddling the fold, which is the one thing
     this must not do. The Odia headline and lede simply need more height than
     is left over. Leading with the picture puts it whole and well above the
     fold, and the text below it can run as long as it needs to. */
  .hero__inner {
    max-width: none;
    padding-block: var(--sp-5) var(--sp-6);
  }

  .hero__art {
    position: static;
    width: 100%;
    height: clamp(13rem, 38svh, 18rem);
    object-position: 70% center;
    border-bottom: 1px solid var(--rule);
  }

  .hero__lede { font-size: var(--step-0); margin-bottom: var(--sp-5); }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* --------------------------------------------------------------------------
   7. What the Sangha does -- the four-up strip
   --------------------------------------------------------------------------
   Deliberately describes activity, never outcomes. Nothing here may drift
   into what a treatment achieves; see the compliance notes in CLAUDE.md.
   -------------------------------------------------------------------------- */

.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: var(--sp-5);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--lift);
}

@media (min-width: 34rem) { .pillars { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } }
@media (min-width: 60rem) { .pillars { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); padding: var(--sp-6); } }

/* Lifted so the strip overlaps the hero, as a card sitting on the image. */
.pillars-holder { margin-top: calc(var(--sp-7) * -1); position: relative; z-index: 2; }

.pillar { display: flex; gap: var(--sp-3); align-items: flex-start; padding-block: var(--sp-2); }

@media (min-width: 60rem) { .pillar { flex-direction: column; gap: var(--sp-3); } }

.pillar__badge {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sage);
  border: 1px solid var(--gold-soft);
}

.pillar__badge svg { width: 1.375rem; height: 1.375rem; stroke: var(--forest); fill: none; stroke-width: 1.6; }

.pillar__title,
.pillar__body { display: block; }

.pillar__title { font-family: var(--font-display); font-size: var(--step-0); color: var(--forest); margin-bottom: 0.15rem; }
.pillar__body { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.6; }

/* --------------------------------------------------------------------------
   8. Prose and About
   -------------------------------------------------------------------------- */

.about { display: grid; gap: var(--sp-6); align-items: center; }

@media (min-width: 52rem) {
  .about { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-8); }
}

.about__figure { margin: 0; }

.about__figure img {
  width: 100%;
  max-width: 20rem;
  margin-inline: auto;
  border-radius: var(--radius);
  box-shadow: var(--lift);
  background: var(--card);
}

.about__figure figcaption {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-align: center;
}

.prose { max-width: var(--measure); }

/* Each language variant is wrapped in its own [data-t] div, so the paragraphs
   are grandchildren, not children -- space both levels. */
.prose > * + *,
.prose > [data-t] > * + * { margin-top: var(--sp-5); }

.prose p { text-wrap: pretty; }

.prose h3 { font-family: var(--font-display); font-size: var(--step-1); color: var(--forest); margin-top: var(--sp-6); }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose li + li { margin-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   9. Member cards
   --------------------------------------------------------------------------
   One column at 360px -- the primary target -- then two, then three. The whole
   card is the link, so it is a large touch target rather than a small one.
   -------------------------------------------------------------------------- */

.cards { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); list-style: none; padding: 0; margin: 0; }

@media (min-width: 30rem) { .cards { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
@media (min-width: 52rem) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  box-shadow: var(--lift);
}

.card:hover { box-shadow: var(--lift-strong); border-color: var(--gold-soft); }

.card__figure { position: relative; background: var(--sage); }
.card__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--sage); }

/* The member's initial over the botanical plate when no photograph exists. */
.card__initial {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 700;
  color: var(--forest);
  pointer-events: none;
}

.card__initial::before {
  content: '';
  position: absolute;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: rgb(253 246 222 / 0.94);
  border: 1px solid var(--gold-soft);
}

.card__initial > span { position: relative; }

.card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); flex: 1 1 auto; }
.card__role { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.05em; color: var(--green); }
.card__name { font-family: var(--font-display); font-size: var(--step-1); color: var(--forest); }
.card__meta { font-size: var(--step--1); color: var(--ink-soft); }
.card__meta .sep { color: var(--rule-strong); padding-inline: 0.35em; }
.card__go { margin-top: auto; padding-top: var(--sp-3); font-size: var(--step--1); color: var(--green); font-weight: 700; }

.cards__group {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin-block: var(--sp-6) var(--sp-3);
}

.cards__group:first-of-type { margin-top: 0; }

/* Below 30rem the cards turn into compact rows. A 4:3 plate per card means one
   member fills a 360px screen, and this is a membership list people scan --
   most of them on a phone. As rows, five members fit in a screen and a half. */
@media (max-width: 29.999rem) {
  .cards { gap: var(--sp-3); }
  .card { flex-direction: row; align-items: stretch; }
  .card__figure { flex: none; width: 5.75rem; }
  .card__photo { height: 100%; aspect-ratio: auto; }
  .card__initial { font-size: 1.5rem; }
  .card__initial::before { width: 2.5rem; height: 2.5rem; }
  .card__body { padding: var(--sp-3) var(--sp-4); gap: 0.125rem; }
  .card__name { font-size: var(--step-0); }
  .card__go { padding-top: var(--sp-2); }
}

/* --------------------------------------------------------------------------
   10. Patrika
   -------------------------------------------------------------------------- */

.issues { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }

@media (min-width: 40rem) { .issues { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }

.issue {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--lift);
}

.issue__cover { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-bottom: 1px solid var(--rule); }
.issue__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1 1 auto; }
.issue__date { font-size: var(--step--1); letter-spacing: 0.06em; color: var(--green); font-weight: 700; }
.issue__title { font-family: var(--font-display); font-size: var(--step-1); color: var(--forest); }
.issue__summary { color: var(--ink-soft); font-size: var(--step--1); flex: 1 1 auto; }

.archive__year {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--forest);
  margin-block: var(--sp-7) var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--gold-soft);
}

.archive__year:first-of-type { margin-top: 0; }

/* --------------------------------------------------------------------------
   11. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 2.875rem;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--forest);
  border-radius: 6px;
  background: var(--forest);
  color: #fff;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover { background: var(--green); border-color: var(--green); color: #fff; }
.btn .leaf { background: var(--gold-soft); }

.btn--quiet { background: transparent; color: var(--forest); border-color: var(--rule-strong); }
.btn--quiet:hover { background: var(--sage); color: var(--forest); border-color: var(--gold); }

.link-more { display: inline-block; margin-top: var(--sp-5); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.04em; }

/* --------------------------------------------------------------------------
   12. Contact
   -------------------------------------------------------------------------- */

.details { display: grid; gap: var(--sp-5); }

@media (min-width: 40rem) {
  .details { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--sp-5) var(--sp-6); }
}

.detail__label {
  display: block;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--green);
  font-weight: 700;
  margin-bottom: var(--sp-1);
}

.detail__value { font-size: var(--step-0); overflow-wrap: break-word; }

/* --------------------------------------------------------------------------
   13. Notices
   --------------------------------------------------------------------------
   The disclaimer is a legal requirement under the Drugs and Magic Remedies
   (Objectionable Advertisements) Act, 1954 and the NCISM code of ethics. Set
   at full body size on a distinct ground -- a readable notice, not 9px grey.
   -------------------------------------------------------------------------- */

.notice {
  padding: var(--sp-5);
  background: var(--card);
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--gold);
  border-radius: var(--radius);
  max-width: 48rem;
}

.notice__title {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--green);
  margin-bottom: var(--sp-2);
}

.notice__body { font-size: var(--step-0); color: var(--ink); }
.notice--inline { margin-top: var(--sp-7); }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--forest-deep);
  color: #e6ece2;
  padding-block: var(--sp-8) var(--sp-6);
  border-top: 3px solid var(--gold);
}

.site-footer a { color: #e6ece2; }
.site-footer a:hover { color: var(--gold-soft); }

.site-footer .notice {
  background: rgb(255 255 255 / 0.05);
  border-color: rgb(255 255 255 / 0.14);
  border-inline-start-color: var(--gold);
  color: #eef2ea;
}

.site-footer .notice__title { color: var(--gold-soft); }
.site-footer .notice__body { color: #e6ece2; }

.footer-brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.footer-brand img { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--card); padding: 3px; }
.footer-brand__name { font-family: var(--font-display); font-size: var(--step-1); color: #fff; }

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid rgb(255 255 255 / 0.16);
  font-size: var(--step--1);
  color: #c3cdbc;
}

/* PatroVenture credit. The whole attribution is this one rule plus the single
   <p class="credit"> partial the pages share, so clearing
   config/site.showPatroventureCredit removes it with nothing left behind. */
.credit a { color: #c3cdbc; text-decoration-color: rgb(255 255 255 / 0.3); }
.credit a:hover { color: var(--gold-soft); }

/* --------------------------------------------------------------------------
   15. States
   -------------------------------------------------------------------------- */

.state { padding: var(--sp-5) 0; color: var(--ink-soft); font-size: var(--step--1); }
.state--error { color: #8c2f1d; }

.fallback-note {
  font-size: var(--step--1);
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: var(--sp-3);
  padding-inline-start: var(--sp-3);
  border-inline-start: 2px solid var(--gold);
}

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

/* --------------------------------------------------------------------------
   16. Focus, motion, print
   -------------------------------------------------------------------------- */

:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 3px; }
.site-footer :focus-visible,
.site-bar :focus-visible,
.site-nav :focus-visible { outline-color: var(--gold); }
.lang__btn:focus-visible { outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-bar, .site-nav, .skip-link, .card__go, .link-more, .hero__art, .pillars-holder { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band, .hero, .site-footer, .notice, .issue, .card { background: #fff; color: #000; box-shadow: none; }
  .hero::after { display: none; }
  a, .site-footer a, .hero__name, .band__title { color: #000; }
  .notice { border: 1px solid #000; }
  .card, .issue { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   17. Image-backed bands, feature rows, footer columns
   --------------------------------------------------------------------------
   These were lost once already: they lived in a section appended after the
   sample-content ribbon, and removing the ribbon by truncating the file took
   them with it. Keep them above any section that might later be deleted
   wholesale, or check what follows before truncating.
   -------------------------------------------------------------------------- */

/* A band whose artwork sits behind its own content rather than beside it. The
   wash is heavy on purpose: the picture should be felt, not read, and the text
   over it must never depend on what the image happens to be doing there. */
.band--image { position: relative; isolation: isolate; overflow: hidden; }

.band__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}

.band--image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wash, rgb(253 246 222 / 0.82));
}

/* Each section takes its own tint, so a long page reads as a sequence of
   places rather than one surface. All four are light enough that body ink
   clears 11:1 over them, whatever the photograph behind is doing. */
.wash--parchment { --wash: rgb(253 246 222 / 0.82); }
.wash--saffron   { --wash: rgb(252 233 200 / 0.82); }
.wash--sage      { --wash: rgb(228 239 221 / 0.82); }
.wash--olive     { --wash: rgb(239 240 214 / 0.82); }

/* A dark band breaks up a long page of warm light. The grove sits behind at
   reduced opacity; the panel over it carries the text at full contrast. */
.band--dark {
  position: relative;
  isolation: isolate;
  background: var(--forest-deep);
  color: #eef2ea;
  overflow: hidden;
}

.band--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('/img/grove.webp') center / cover no-repeat;
  opacity: 0.6;
}

.panel {
  background: rgb(253 246 222 / 0.95);
  color: var(--ink);
  padding: clamp(1.5rem, 1rem + 3vw, 2.75rem);
  border-radius: var(--radius);
  border: 1px solid rgb(192 160 80 / 0.4);
  max-width: 38rem;
  box-shadow: var(--lift-strong);
}

.panel .band__title { margin-bottom: var(--sp-3); }

/* Alternating image-and-text rows. */
.feature { display: grid; gap: var(--sp-6); align-items: center; }

@media (min-width: 52rem) {
  .feature { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .feature--flip .feature__media { order: -1; }
}

.feature__media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--lift);
}

.feature__media figcaption {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* Footer columns. */
.footer-cols { display: grid; gap: var(--sp-6); margin-bottom: var(--sp-6); }

@media (min-width: 44rem) {
  .footer-cols { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-7); }
}

.footer-col__title {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold-soft);
  margin-bottom: var(--sp-3);
}

.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.footer-col a { text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }
.footer-col p { color: #c9d3c2; font-size: var(--step--1); }


/* --------------------------------------------------------------------------
   18. Office-bearer pyramid, member photos, progressive reveal
   -------------------------------------------------------------------------- */

/* The office bearers step down: president alone, then the two others beside
   him, then the membership at large in the ordinary grid below. */
.pyramid { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-7); }

@media (min-width: 30rem) { .pyramid { gap: var(--sp-5); } }

.pyramid__tier { display: grid; gap: var(--sp-4); list-style: none; padding: 0; margin: 0; }

@media (min-width: 30rem) {
  .pyramid__tier { gap: var(--sp-5); }
  .pyramid__tier--lead { max-width: 21rem; margin-inline: auto; }
  .pyramid__tier--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 42rem; margin-inline: auto; }
}

/* The president's card carries a little more weight -- a gold keyline and a
   taller plate -- without becoming a different component. */
.card--lead { border-color: var(--gold); box-shadow: var(--lift-strong); }
.card--lead .card__name { font-size: var(--step-2); }

.card__desc {
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.6;
  margin-top: var(--sp-2);
}

/* Portraits get a fixed height rather than an aspect ratio: tied to column
   width, a square plate became 350px tall in the wide pyramid tiers and
   swallowed the card. Anchored to the top so a head is never cropped at the
   chin. */
.card__photo {
  aspect-ratio: auto;
  height: clamp(10rem, 18vw, 13rem);
  object-position: center top;
}

.card--lead .card__photo { height: clamp(12rem, 22vw, 16rem); }

/* Progressive reveal. data-reveal="9" hides everything past the ninth item
   until the button is pressed.

   A carousel or an auto-rotating strip was the other option and is worse
   here: it hides most of the roll behind a timer, is fiddly on a phone, and
   an auto-advancing list is hostile to anyone reading slowly. Nine keeps
   complete rows of three on a desktop; the rest are one tap away and are
   still in the DOM for search and for Ctrl+F. */
/* Both selectors carry the same specificity on purpose -- the open state must
   repeat :nth-child, or the hiding rule outranks it and the button does
   nothing. */
.cards[data-reveal] > li:nth-child(n + 10) { display: none; }
.cards[data-reveal='open'] > li:nth-child(n + 10) { display: revert; }

.reveal-more { margin-top: var(--sp-5); display: flex; justify-content: center; }

@media (max-width: 29.999rem) {
  /* Compact rows on a phone, matching the general grid. */
  .card--lead .card__photo,
  .card__photo { height: 100%; }
  .pyramid { gap: var(--sp-3); }
  .pyramid__tier { gap: var(--sp-3); }
}

/* --------------------------------------------------------------------------
   19. Member detail page
   --------------------------------------------------------------------------
   Used only by the pages functions/render-member.js writes to Storage. Those
   pages link this stylesheet rather than inlining it, so it stays in the
   browser cache across every member a reader opens.
   -------------------------------------------------------------------------- */

.member { display: grid; gap: var(--sp-6); align-items: start; }

@media (min-width: 46rem) {
  .member { grid-template-columns: 18rem minmax(0, 1fr); gap: var(--sp-7); }
}

.member__photo {
  width: 100%;
  max-width: 18rem;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  box-shadow: var(--lift);
  background: var(--card);
}

.member__body > * + * { margin-top: var(--sp-6); }

/* Detail rows stack on the member page rather than sitting in columns -- there
   are only a handful and several may be absent entirely. */
.member .details { grid-template-columns: 1fr; gap: var(--sp-4); }

@media (min-width: 34rem) {
  .member .details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}