@font-face {
  font-family: 'Tiro Devanagari Hindi';
  src: url('../fonts/TiroDevanagariHindi-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face { font-family: 'Mukta'; src: url('../fonts/Mukta-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap; }
@font-face { font-family: 'Mukta'; src: url('../fonts/Mukta-SemiBold.woff2') format('woff2');
  font-weight: 600; font-display: swap; }
@font-face { font-family: 'Mukta'; src: url('../fonts/Mukta-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap; }
@font-face { font-family: 'Mukta'; src: url('../fonts/Mukta-ExtraBold.woff2') format('woff2');
  font-weight: 800; font-display: swap; }

:root {
  --red: #b3261e;  --red-d: #8f1d16;
  --ind: #3b2f63;  --ind-d: #2c2348;
  --gold: #c9a227; --mar: #e8a33d;
  --ink: #241f2e;  --mute: #6b6270;
  --warm: #fffdfa; --line: #ece4d8;
  /* Second paper tone + a warmer rule, so sections can separate without boxing
     everything in. Both are tints of the existing palette, not new hues. */
  --paper: #f8f3ea; --rule: #ddd0b9;

  --head: 'Tiro Devanagari Hindi', serif;
  --body: 'Mukta', system-ui, sans-serif;
  /* The page holds nine tenths of the screen, with the last tenth left as
     margin either side; the reading measure is held back further, on .prose
     and on the paragraphs themselves. The gutter grows with the screen so
     text never touches the glass. */
  --wrap: 90%;
  --gutter: clamp(16px, 3.2vw, 56px);
  --r: 8px;
}

/* --gold is a border and badge colour only. It fails contrast as text
   on --warm, so it is never used for body or link text. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--warm);
  color: var(--ink);
  font-family: var(--body);
  /* 17px, not 16: Devanagari carries its matras above and below the line, and
     this site is read by people who are not young. The line-height follows. */
  font-size: 17px;
  line-height: 1.72;
}

h1, h2, h3 { font-family: var(--head); font-weight: 400; line-height: 1.3; }
/* Where a line turns is a typographic decision, not an accident of the box.
   `balance` evens out a heading's lines instead of leaving one word below a
   full one; `pretty` does the same for the last line of a paragraph. Both
   degrade to ordinary wrapping where the browser does not know them. */
h1, h2, h3, .fest-name, .brand b, .stat b { text-wrap: balance; }
p, li, figcaption, .subtitle, .hero-lede, .stats-note { text-wrap: pretty; }
/* The pages band holds the top of the screen, so a heading jumped to from a
   link stops below it rather than behind it. */
:target, [id] { scroll-margin-top: 72px; }
/* Devanagari must never be letter-spaced: it breaks the conjuncts. */
h1, h2, h3, .fest-name, .brand b { letter-spacing: normal; }

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

/* No link on this site carries a rule - not at rest, not under the pointer.
   Colour alone answers: a red link turns indigo, the समाज's other colour, which
   is a change of hue rather than a shade and so is seen at a glance. A link
   shaped like a button or a tab is listed below and answers with its own
   surface instead. */
a { color: var(--red); text-decoration: none; }
a:hover, a:focus-visible { color: var(--ind); text-decoration: none; }
/* These set their own colour further down the file, where an equal (or
   heavier) selector would hold it through the hover. Saying it once here, at a
   weight none of them reach, keeps every link answering the pointer. */
:is(.list-more a, .section-head .all, .gift-joint a, .dm-history a,
    .crumbs a, .contact-list a, .link-row a):not(.btn, .cta):is(:hover, :focus-visible) {
  color: var(--ind);
}
/* The :not() matters: .link-row holds the filled दान buttons, and this rule is
   heavier than .btn:hover - it was painting their white label indigo on red. */
.site-nav a:hover, .site-nav a:focus-visible { color: var(--red); }
.cta:hover, .cta:focus-visible, .btn:hover, .btn:focus-visible {
  background: var(--red-d); color: #fff;
}
.lang-toggle:hover, .lang-toggle:focus-visible { border-color: var(--red); color: var(--red-d); }
.heritage a:hover, .heritage a:focus-visible { background: var(--gold); color: var(--ind-d); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--mar); }

/* Indigo focus ring on light surfaces (11.67:1 on --warm). */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 3px solid var(--ind);
  outline-offset: 2px;
}
/* Marigold focus ring only where the surface is indigo - the hero and the
   कार्यक्रम invitation among them, or the indigo ring lands on indigo and a
   reader moving by keyboard cannot see where they are. */
:is(.hero, .invite, .heritage, .site-footer) :focus-visible { outline-color: var(--mar); }

/* Donor filters stay reachable with 44+ cards on a phone. */
.filters {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 0;
  background: var(--warm);
  border-bottom: 1px solid var(--rule);
}
.filters input, .filters select {
  min-height: 44px;
  padding: 8px 12px;
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.filters input { flex: 1 1 240px; max-width: 340px; }
.filters input::placeholder { color: var(--mute); }
.filters select { cursor: pointer; }

/* These are group photographs: at four across the faces were too small to pick
   anyone out, so the grid is three across and the photographs are larger. */
.gallery-grid {
  list-style: none; padding-left: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* The two आमंत्रण boards on /karyakram/. One is a wide banner and the other a
   tall sheet, so each is held inside the same height rather than the same box:
   side by side at their own width, neither one towering over the other. They
   are printed boards, so they sit on white with a hairline rather than bleeding
   into the page. */
.posters {
  list-style: none; padding-left: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px; align-items: start; justify-items: center;
}
.posters figure { margin: 0; }
.posters img {
  display: block; width: auto; max-width: 100%; max-height: 520px; height: auto;
  border: 1px solid var(--rule); border-radius: var(--r); background: #fff;
}
.posters figcaption { margin-top: 8px; color: var(--mute); font-size: 0.85rem;
                      text-align: center; }

/* The line above the two YouTube rows on संपर्क. Small and quiet: it exists to
   explain why one icon appears twice, not to be read first. */
.yt-note { margin: 14px 0 6px; color: var(--mute); font-size: 0.86rem; }

/* ---- the साझा page ---- */
/* Each ready-made message sits in its own ruled box with its button in the
   corner. The text is a <pre> because that is what it is: something to be
   taken away exactly as written, line breaks and all - so it wraps rather
   than scrolls sideways, and keeps the site's reading font rather than the
   monospace a browser would otherwise give it. */
.copy-box {
  margin: 0 0 16px; padding: 14px 16px 4px;
  border: 1px solid var(--rule); border-radius: var(--r); background: #fff;
}
.copy-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.copy-head h3 { margin: 0 0 6px; font-family: var(--head); font-weight: 400;
                font-size: 1.05rem; color: var(--ind); }
.copy-box pre {
  margin: 0 0 12px; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--body); font-size: 0.97rem; line-height: 1.6; color: var(--ink);
}
.copy-btn {
  flex-shrink: 0; min-height: 36px; padding: 6px 14px; cursor: pointer;
  border: 1px solid var(--red); border-radius: 6px;
  background: #fff; color: var(--red-d);
  font-family: var(--body); font-size: 0.88rem; font-weight: 600;
}
.copy-btn:hover, .copy-btn:focus-visible { background: var(--red); color: #fff; }
.copy-btn.is-done { border-color: var(--ind); background: var(--ind); color: #fff; }

/* The three things to take away. auto-fit rather than a fixed count: the card
   is square, the QR square, the reel upright, and at any width they should sit
   as many across as fit without any of them being squeezed. */
.share-kit {
  list-style: none; padding-left: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 22px; align-items: start; justify-items: center;
}
.share-kit figure { margin: 0; text-align: center; }
.share-kit img {
  display: block; width: auto; max-width: 100%; max-height: 300px; height: auto;
  margin-inline: auto;
  border: 1px solid var(--rule); border-radius: var(--r); background: #fff;
}
.share-kit figcaption { margin-top: 8px; color: var(--mute); font-size: 0.85rem; }

/* Said to a screen reader, shown to nobody - the copy button's result. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* A clip shown on its own, at a size a person can actually watch. The two on
   the गैलरी are opposite shapes - a 9:16 reel and a 16:9 one - so the cap is on
   BOTH sides: height holds the tall one to about a phone's worth of screen, and
   width holds the wide one short of the column. One rule, both shapes, no
   letterboxing and no clip taller than the window. */
.clip { margin: 0 0 26px; }
.clip video {
  display: block; width: auto; height: auto;
  max-width: min(100%, 560px); max-height: 600px;
  border-radius: var(--r); background: #000;
}
.clip video:focus-visible { outline: 3px solid var(--ind); outline-offset: 3px; }
.clip figcaption { margin-top: 8px; max-width: 560px; color: var(--mute);
                   font-size: 0.85rem; }

/* The roll is ruled between entries, like a register; the rules ARE the
   separation, so the entries carry no box, radius or shadow of their own. */
.donor-roll { display: grid; gap: 0 36px; max-width: 820px;
               border-top: 1px solid var(--rule); }
/* The full list (/daan/) runs to the page width in two columns; the home
   preview keeps one column, so three entries do not leave a hole. On a दान
   सूची page #grid holds one roll per type block, so the rolls inside it are
   what widen, not #grid itself. */
#grid .donor-roll { max-width: none; }
@media (min-width: 900px) { #grid .donor-roll { grid-template-columns: 1fr 1fr; } }

/* The heading of one type block: what was given, and how many gave it. The
   roll's own top rule draws the line under it. */
.roll-head {
  display: flex; align-items: baseline; gap: 9px;
  margin: 30px 0 7px; font-family: var(--head); font-size: 1.1rem;
  font-weight: 700; color: var(--ind);
}
#grid > .roll-head:first-child { margin-top: 0; }
.roll-head span {
  color: var(--mute); font-size: 0.8rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.donor-card {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  grid-template-areas: "av name figure" "av meta year";
  gap: 0 12px;
  align-items: center;
  padding: 7px 2px;
  border-bottom: 1px solid var(--rule);
}
.donor-card h3 { grid-area: name; margin: 0; font-size: 1.05rem; }
.donor-card > p { grid-area: figure; margin: 0; text-align: right;
                  font-weight: 800; font-variant-numeric: tabular-nums;
                  color: var(--ink); }
.donor-card .type-tag { grid-area: meta; color: var(--mute);
                        font-size: 0.78rem; font-weight: 600; }
.donor-card .year-badge { grid-area: year; justify-self: end;
                          color: var(--mute); font-size: 0.72rem; font-weight: 600;
                          font-variant-numeric: tabular-nums; }
/* In memoriam (स्मृति): a marker in the gutter, not a tinted box. */
.donor-card.memoriam { background: none; }
.donor-card.memoriam::before {
  content: ""; position: absolute; left: -10px; top: 14px;
  width: 3px; height: calc(100% - 28px); background: var(--ind);
}
/* On a phone, a link that stands on its own - a crumb, a "see all", the line
   under a list - is something a thumb has to hit. 44px of height, with the
   text sitting where it always did. A link inside a sentence is left alone:
   padding there would break the line. */
@media (max-width: 560px) {
  :is(.crumbs, .section-head, .list-more, .f-links li, .dm-history, .link-row) > a,
  .section-head .all {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .crumbs { padding-block: 4px; }
  .f-links li { margin-bottom: 0; }
}

@media (max-width: 560px) {
  .donor-card { grid-template-columns: 44px minmax(0, 1fr);
                grid-template-areas: "av name" "av meta" "figure figure" "year year"; }
  .donor-card > p, .donor-card .year-badge { text-align: left; justify-self: start; }
}

.no-results { padding: 24px 16px; text-align: center; color: var(--mute); }
/* The committee's thanks under a named list, and the home page's pointer to it. */
.list-credit { margin: 28px 0 8px; text-align: center; color: var(--mute); font-size: 0.9rem; }
.list-more { margin: 14px 0 0; font-weight: 600; }
.list-more a { color: var(--red); }

.load-error {
  padding: 20px;
  border: 1px solid var(--red);
  border-radius: var(--r);
  background: #fff;
  color: var(--red-d);
  text-align: center;
}

/* ---- skip link: off-screen until focused (WCAG 2.4.1) ---- */
.skip-link { position: absolute; left: 8px; top: -100px; z-index: 100; padding: 10px 16px;
  background: #fff; color: var(--ink); border: 2px solid var(--mar); border-radius: 6px;
  font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 8px; }
main:focus { outline: none; }

/* ---- chrome (आधुनिक zone) ---- */
.gold-line { height: 3px; background: linear-gradient(90deg, var(--gold), var(--mar), var(--gold)); }
.site-header { background: #fff; }
/* The mark carries the समाज's name and वीरांगना अवंतीबाई लोधी around the arc; at
   40px tall none of it could be read. Source art is 512x443, so this is still
   served at 2x. */
.brand img { width: 60px; height: 52px; }
/* Three columns, so the समाज's name sits in the middle of the page and not
   in a corner: the ☰ on the left (on wide screens that cell is simply empty),
   the name in the centre, EN and दान कीजिए on the right. */
.site-header-inner { display: grid; grid-template-columns: 1fr auto 1fr;
                     align-items: center; gap: 12px; padding: 12px 16px; }
/* Left: the mark. Middle: whose site this is. Right: what a visitor can do
   (menu, language, दान). Every cell names its row, or the grid would
   auto-place the second child onto a row of its own. */
.brand img { grid-column: 1; grid-row: 1; justify-self: start; }
.brand-text { grid-column: 2; grid-row: 1; justify-self: center; text-align: center; }
.head-do { grid-column: 3; grid-row: 1; justify-self: end;
           display: flex; align-items: center; gap: 10px; }
/* The link lays out nothing itself; its two halves are placed by the header
   grid. Browsers keep the link in the accessibility tree, and the focus ring
   is drawn around both halves. */
.brand { display: contents; color: inherit; }
.brand-text { color: inherit; }
/* The name stands alone in the middle now - the सेवा · शिक्षा · स्वास्थ्य line
   it used to carry is in the footer, where there is room to read it. */
/* The समाज's name is the title of the site, so it is set to the mark's own
   height rather than to the size of a label beside it. The line box is pulled
   in to 1.2 - at this size the body's 1.72 would leave it floating. */
.brand b { display: block; font-family: var(--head); font-weight: 400;
           font-size: clamp(1.3rem, 0.95rem + 1.1vw, 1.7rem); line-height: 1.2;
           color: var(--red-d); }
/* The band of pages: its own strip under the name, so ten Hindi words have
   room to breathe and each one is a 44px target. It stays at the top of the
   screen while the page scrolls - on a list of five hundred donors, going
   back to the menu should not mean scrolling back to the beginning. */
.nav-bar { background: var(--paper); border-block: 1px solid var(--line); }
/* The band stays at the top of the screen, not the whole header: the header
   is sticky with its own top row's height as a negative offset, so that row
   scrolls away and the pages band comes to rest against the top edge.
   (A sticky child cannot leave its parent's box, which is why the band itself
   is not the sticky one.) --head-top is that row: 12px padding twice and the
   52px mark beside the name. */
.site-header { position: sticky; top: calc(-1 * var(--head-top)); z-index: 40;
               --head-top: 85px; }
.site-nav { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 4px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
              color: #4a4556; font-weight: 600; font-size: 0.95rem; text-decoration: none;
              border-bottom: 3px solid transparent; }
.site-nav a[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); }
/* The page you are on is already red, so it deepens instead - otherwise it
   would be the one item in the menu that ignores the pointer. */
.site-nav a[aria-current="page"]:hover, .site-nav a[aria-current="page"]:focus-visible {
  color: var(--red-d); border-bottom-color: var(--red-d);
}
.site-nav a:hover { background: #fffdfa; }
.lang-toggle { padding: 4px 9px; border: 1px solid var(--line);
               border-radius: 4px; font-weight: 700; font-size: 0.75rem; text-decoration: none; }
.cta { padding: 8px 15px; background: var(--red); color: #fff; border-radius: 5px;
       font-weight: 700; font-size: 0.8rem; text-decoration: none; }
.nav-toggle { display: none; min-width: 44px; min-height: 44px; border: 1px solid var(--line);
              border-radius: var(--r); background: #fff; font-size: 1.1rem; cursor: pointer; }

/* ---- festival hero (उत्सव zone) ---- */
/* नवरात्र is nine nights, so the page opens on one: the deep indigo of the
   पंडाल after dark, lit from the corner the way the lamps light it. The dates
   sit beside the greeting as an invitation, and the समाज's own photograph
   follows immediately below - faces in daylight, never under a scrim. */
.hero {
  /* The side room is the page's gutter, carried by .hero-inner, so the
     greeting starts on the same line as every heading below it. */
  padding: 60px 0 56px;
  background: radial-gradient(circle at 10% -10%, rgba(232, 163, 61, 0.30), transparent 48%),
              radial-gradient(circle at 94% 112%, rgba(179, 38, 30, 0.34), transparent 54%),
              var(--ind-d);
  color: #ddd5ea;
}
.hero-inner { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter);
              display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.hero h1 { margin: 0 0 16px; font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.2rem); line-height: 1.12;
           color: #f6ecd2; }
.hero-lede { margin: 0 0 24px; max-width: 36ch; color: #cfc6e0; font-size: 1.1rem; }
.hero-do { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0; }
/* Marigold on the night: the one warm button on the page, and the colour the
   मंडप is dressed in. */
.hero .btn { background: var(--mar); color: var(--ind-d); }
.hero .btn:hover, .hero .btn:focus-visible { background: var(--gold); color: var(--ind-d); }
.hero-more { font-weight: 700; color: var(--mar); }
.hero-more:hover, .hero-more:focus-visible { color: #f6ecd2; }
:is(.hero, .invite) .festivals { border-top-color: rgba(243, 233, 205, 0.3); }
:is(.hero, .invite) .fest { border-bottom-color: rgba(243, 233, 205, 0.3); }
:is(.hero, .invite) .fest-when { color: var(--mar); }
:is(.hero, .invite) .fest-name { color: #f6ecd2; font-size: 1.3rem; }
:is(.hero, .invite) .fest-where { color: #bdb4cf; }
:is(.hero, .invite) .fest-where b { color: #f3e9cd; font-weight: 600; }

/* The festival calendar: date column, then the occasion. Ruled like an invitation. */
.festivals { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.fest { display: grid; grid-template-columns: 11rem 1fr; gap: 4px 20px;
        padding: 13px 0; border-bottom: 1px solid var(--rule); }
.fest-when { margin: 0; color: var(--mute); font-weight: 600; font-size: 0.9rem; }
.fest-name { margin: 0; font-size: 1.22rem; color: var(--ind); font-weight: 400; }
.fest-where { margin: 14px 0 0; color: var(--mute); font-size: 0.9rem; }
.fest-where b { font-weight: 600; color: var(--ink); }

/* The कार्यक्रम page's own invitation: the same night as the home hero, so the
   two pages speak with one voice, and the dates are the page's anchor rather
   than another ruled list among several. */
.invite { margin-block: 8px 12px; padding-block: 44px;
          background: radial-gradient(circle at 8% -20%, rgba(232, 163, 61, 0.26), transparent 46%),
                      radial-gradient(circle at 96% 120%, rgba(179, 38, 30, 0.30), transparent 52%),
                      var(--ind-d);
          color: #ddd5ea; }
.invite .section-head h2 { color: #f6ecd2; }
.invite .fest-note { color: #bdb4cf; }

/* ---- stats (आधुनिक zone) ---- */
/* What the समाज fed last नवरात्र, in three figures. It was one sentence, and
   the numbers - the whole point of it - read like any other words. */
.stats { background: var(--paper); border-block: 1px solid var(--rule); }
.stats .wrap { padding-block: 26px; display: grid; gap: 6px 48px;
               grid-template-columns: repeat(3, auto) 1fr; align-items: end; }
.stat { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.stat b { font-family: var(--head); font-weight: 400; font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.6rem);
          line-height: 1; color: var(--red-d); font-variant-numeric: tabular-nums; }
.stat span { color: var(--mute); font-size: 0.9rem; }
.stats-note { grid-column: 1 / -1; margin: 10px 0 0;
              color: var(--mute); font-size: 0.92rem; }
@media (max-width: 760px) {
  .stats .wrap { grid-template-columns: repeat(2, auto); gap: 18px 32px; }
}

/* ---- sections, with the marigold rule the user asked to extend ---- */
/* Block only: almost every .section is also a .wrap, and a "0" here took away
   the wrap's 16px side gutter, so content touched the screen edge below 1140px. */
.section { padding-block: 52px; }
.section + .section { padding-top: 8px; }
.section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.section-head h1 { margin: 0; font-size: 2rem; color: var(--ind); }
.section-head h2 { margin: 0; font-size: 1.55rem; color: var(--ind); }
.section-head h1::after { content: ""; display: block; width: 56px; height: 3px;
                          margin-top: 10px; background: var(--mar); }
.section-head .all { margin-left: auto; color: var(--red); font-weight: 600; font-size: 0.9rem; }
.crumbs { padding: 14px 0; font-size: 0.8rem; color: var(--mute); }

/* ---- heritage band (विरासत zone) ---- */
.heritage { display: grid; grid-template-columns: 0.62fr 1.38fr;
            background: var(--ind); color: #efe6d2; }
.heritage img { width: 100%; height: 100%; object-fit: cover; }
.heritage .tx { padding: 40px 32px; align-self: center; }
.heritage h2 { margin: 0 0 14px; color: #f3e9cd; font-size: 1.85rem; line-height: 1.2; }
.heritage p { color: #cfc6e0; }
.heritage a { display: inline-block; padding: 7px 15px; border: 1.5px solid var(--gold);
              border-radius: 3px; color: var(--gold); font-weight: 700;
              text-decoration: none; font-size: 0.8rem; }

/* ---- services (आधुनिक zone) ---- */

/* ---- footer (विरासत zone) ---- */
/* Three columns that each say one thing - who we are, how to reach us, where
   to follow - instead of one flex row where the address, the phone and four
   link words ran together. The last line is a rule apart, like a colophon. */
.site-footer { margin-top: 48px; background: var(--ind-d); color: #bdb4cf; }
.site-footer-inner { display: grid; grid-template-columns: 1.15fr 1fr 1.1fr auto;
                     gap: 28px 44px; padding: 34px 16px 28px; font-size: 0.85rem; }
.f-brand { display: flex; align-items: flex-start; gap: 12px; }
.f-brand img { flex: none; }
/* The menu again, in two short columns so ten pages do not become a ladder. */
.f-links { columns: 2; column-gap: 24px; margin: 0; padding: 0; list-style: none; }
.f-links li { margin: 0 0 6px; break-inside: avoid; }
/* Named through .site-footer, or the gold set for every footer link further
   down would hold these too - and a link already gold cannot turn gold. */
.site-footer .f-links a { color: #d9d1e6; }
.site-footer .f-links a:hover, .site-footer .f-links a:focus-visible { color: var(--gold); }
/* The one thing the समाज asks for, kept where a reader ends up. */
.f-donate { display: inline-flex; align-items: center; min-height: 38px; margin-top: 6px;
            padding: 6px 16px; border: 1px solid var(--gold); border-radius: 4px;
            font-weight: 700; }
/* Named through .site-footer: the marigold given to every footer link on
   hover is heavier than a bare .f-donate:hover, and it was painting the label
   marigold on this button's gold fill - gold on gold, the button went blank. */
.site-footer .f-donate:hover, .site-footer .f-donate:focus-visible {
  background: var(--gold); color: var(--ind-d);
}
.site-footer p { margin: 0 0 6px; line-height: 1.65; }
.site-footer b { color: #f3e9cd; font-family: var(--head); font-weight: 400; font-size: 1.15rem; }
.f-tag { margin-top: 4px; color: #a79cbb; font-size: 0.8rem; }
.f-head { margin: 0 0 10px; font-family: var(--head); font-weight: 400; font-size: 0.95rem;
          color: #f3e9cd; }
/* Each contact line opens with its own mark, so pin, handset and envelope
   tell address, phone and email apart before a word is read. The mark sits
   inside the link, so it takes the same colour when the pointer arrives. */
.f-line { display: flex; align-items: flex-start; gap: 9px; }
.f-line a { display: inline-flex; align-items: flex-start; gap: 9px; }
.f-line svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.f-addr { max-width: 34ch; }
.f-addr svg { color: #a79cbb; }
.site-footer a { color: var(--gold); }     /* gold on indigo: contrast is fine here */

/* The four marks: gold discs at rest, each one lighting up in its own
   platform's colour (--brand, set on the link) under the pointer. 44px is the
   tap target; the glyph inside stays 20px. */
.socials { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px;
             border-radius: 50%; border: 1px solid rgba(243, 233, 205, 0.22);
             color: var(--gold);
             transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
.socials svg { width: 20px; height: 20px; display: block; }
.socials a:hover, .socials a:focus-visible {
  color: var(--brand, var(--mar)); border-color: currentColor;
  background: rgba(255, 255, 255, 0.08);
}

/* The colophon: the समाज's name and year on one side, who keeps the site
   running on the other, under a hairline. */
.f-base { border-top: 1px solid rgba(243, 233, 205, 0.14); }
.f-base .wrap { padding: 12px 16px; font-size: 0.78rem; color: #a79cbb; }
.f-base-inner { display: flex; flex-wrap: wrap; align-items: center;
                justify-content: space-between; gap: 8px 20px; }
.f-base p { margin: 0; }
.f-by { display: inline-flex; align-items: center; gap: 9px; }
.f-by a { display: inline-flex; padding: 3px; border-radius: 3px; opacity: 0.85;
          transition: opacity 0.15s ease, background-color 0.15s ease; }
.f-by a:hover, .f-by a:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.08); }
.f-by img { display: block; height: 22px; width: auto; }

@media (max-width: 1000px) {
  .site-footer-inner { grid-template-columns: 1fr 1fr; gap: 26px 32px; }
}
@media (max-width: 620px) {
  .site-footer-inner { grid-template-columns: 1fr; gap: 22px; padding: 26px 16px 20px; }
  .f-base-inner { justify-content: flex-start; }
}

/* ---- inner pages (Task 9): prose, people, events, contact, gallery ---- */
/* A page that is mostly prose narrows as a whole, so every section keeps the same
   left edge and the text is not stranded in the left half of a wide frame. Scoping
   this per section instead would make the headings step in and out down the page.
   Browsers without :has() keep the old full-width behaviour, which is merely looser. */
/* Every page keeps the site's own width, so a heading starts on the same
   left edge as the mark and the menu above it, and the words beneath it run
   the whole way to that same right edge: a paragraph ends where its section
   ends, not short of it. */
.prose p { margin: 0 0 1em; }
/* Now that the page keeps the site's full width, the portrait beside the
   text can be seen rather than glanced at - and it stays in view while the
   eight paragraphs beside it are read. */
.prose-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px;
               align-items: start; }
.prose-split img { position: sticky; top: 76px; }
.prose-split img { width: 100%; height: auto; border-radius: var(--r); background: var(--warm); }
.callout { margin: 18px 0; padding: 16px 0; background: none;
           border-block: 1px solid var(--rule); }
.callout p { margin: 0 0 6px; }
.callout p:last-child { margin-bottom: 0; }
.list-plain { margin: 0 0 1em; padding-left: 1.2em; }
.list-plain li { margin-bottom: 6px; }

/* Fixed-width tracks, left-aligned: a row of two sits at its natural size
   instead of being stretched to fill four columns. */
.person-grid { list-style: none; margin: 0; padding-left: 0;
               display: grid; grid-template-columns: repeat(auto-fill, 212px);
               justify-content: start; gap: 14px; }
.person-card { padding: 16px 14px; background: #fff; border: 1px solid var(--line);
               border-radius: var(--r); text-align: center; }
.person-card .photo, .person-card .photo-empty {
  width: 120px; height: 120px; margin: 0 auto 10px; border-radius: 50%; }
.person-card .photo { display: block; object-fit: cover; }
.person-card .photo-empty { display: grid; place-items: center; background: var(--ind);
                            color: var(--gold); font-family: var(--head); font-size: 2.5rem; }
.person-card h3 { margin: 0 0 2px; font-size: 1.1rem; color: var(--ind); }
.person-card .role { margin: 0 0 6px; color: var(--mute); font-size: 0.9rem; }
/* How long they held the post. Quieter than the role, and tabular so a column
   of years lines up down the grid. */
.person-card .term { margin: -4px 0 6px; color: var(--mute); font-size: 0.82rem;
                     font-variant-numeric: tabular-nums; }
.person-card .phone { display: inline-block; min-height: 44px; line-height: 44px; font-weight: 700; }
/* ब्रह्मलीन: the card read exactly like a serving office bearer's. */
.person-card.memoriam { background: var(--paper); border-color: var(--rule); }
.person-card.memoriam h3 { color: var(--ind); }

.fest-note { grid-column: 2; margin: 2px 0 0; color: var(--mute); font-size: 0.9rem; }

.date-note { margin: 12px 0 0; color: var(--mute); font-size: 0.9rem; }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px;
       background: var(--red); color: #fff; border-radius: 5px; font-weight: 700;
       text-decoration: none; }
.contact-list { max-width: 620px; margin: 0 0 16px; padding: 0; list-style: none;
                border-top: 1px solid var(--rule); }
.contact-list li { display: grid; grid-template-columns: 7rem 1fr; gap: 4px 20px;
                   padding: 13px 0; border-bottom: 1px solid var(--rule); }
.contact-list .lab { color: var(--mute); }
.contact-list .big { font-size: 1.1rem; font-weight: 700; }
/* A scheme and what it is for: the contact list's two columns, but the name
   needs the room, so it gets a wider one and the site's heading face. */
.scheme-list { margin: 0 0 18px; padding: 0; list-style: none;
               border-top: 1px solid var(--rule); }
.scheme-list li { display: grid; grid-template-columns: 15rem 1fr; gap: 4px 22px;
                  padding: 13px 0; border-bottom: 1px solid var(--rule); }
.scheme-list .lab { font-family: var(--head); font-size: 1.1rem; color: var(--ind); }
@media (max-width: 640px) { .scheme-list li { grid-template-columns: 1fr; } }

.link-row { display: flex; gap: 12px 18px; flex-wrap: wrap; }
.link-row a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; }

.gallery-item { margin: 0; }
.gallery-item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
                    object-fit: cover; object-position: center 30%;
                    border-radius: var(--r); background: var(--warm); }

/* ---- the गैलरी's viewer ---- */
/* A thumbnail is a button, so it answers the keyboard as well as the thumb.
   The frame is black because a photograph should be judged against nothing. */
.shot { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.shot img { transition: filter 0.15s ease; }
@media (hover: hover) { .shot:hover img { filter: brightness(1.06); } }
.shot:focus-visible { outline: 3px solid var(--ind); outline-offset: 3px; }

.lightbox {
  position: fixed; inset: 0; z-index: 60;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  padding: 16px; background: rgba(18, 14, 30, 0.97);
}
.lightbox[hidden] { display: none; }
body.lb-open { overflow: hidden; }
.lb-frame { grid-column: 2; margin: 0; display: grid; justify-items: center; gap: 12px; }
.lb-frame img { max-width: min(100%, 1200px); max-height: 78vh; width: auto; height: auto;
                border-radius: 2px; background: #000; }
.lb-count { color: #cfc6e0; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.lightbox button {
  min-width: 48px; min-height: 48px; border: 1px solid rgba(243, 233, 205, 0.3);
  border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: #f3e9cd;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.lightbox button:hover { background: rgba(243, 233, 205, 0.18); border-color: var(--mar); }
.lightbox :focus-visible { outline: 3px solid var(--mar); outline-offset: 2px; }
.lb-close { position: absolute; top: 14px; right: 14px; }
@media (max-width: 560px) {
  .lightbox { grid-template-columns: 1fr; padding: 12px; }
  .lb-frame { grid-column: 1; }
  .lb-prev { position: absolute; left: 10px; top: 50%; }
  .lb-next { position: absolute; right: 10px; top: 50%; }
}

/* All mobile overrides live here, after every base rule they override. */
@media (max-width: 760px) {
  /* Two across, not one: a dozen photographs one per row is a long scroll. */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .heritage { grid-template-columns: 1fr; }
  .prose-split { grid-template-columns: 1fr; }
  .prose-split img { max-width: 220px; }
  .heritage img { height: auto; max-height: 320px; object-fit: cover; object-position: center 20%; }

  .brand b { font-size: 1.25rem; }
  .site-header { min-height: 70px; }
  .brand img { width: 46px; height: 40px; }
}

/* Below this the ☰ button in the top row opens the menu as a list.
   1000px is measured, not guessed: with all eleven links the English band
   wraps to a second row at 980px and holds at 1000px, Hindi holds down to
   960px. The wider of the two wins, so Hindi collapses about 40px earlier
   than it strictly must - one threshold for both languages is worth more
   than those 40px. Add a twelfth link and this has to be measured again. */
@media (max-width: 1000px) {
  /* No band to pin here - the ☰ sits in the top row, so the whole header
     stays instead, and the menu is one tap away down a long list. */
  .site-header { top: 0; }
  .site-header-inner { gap: 8px; }
  .brand { min-width: 0; }
  .brand img { flex-shrink: 0; }
  .nav-toggle { display: block; }
  .nav-bar { position: static; border-top: 0; }
  .nav-bar:not(:has(.open)) { border-bottom: 0; }
  .site-nav { display: none; }
  .site-nav.open { display: flex; flex-direction: column; padding-block: 4px; }
  .site-nav a { width: 100%; padding: 0 6px; border-bottom: 0; border-left: 3px solid transparent; }
  .site-nav a[aria-current="page"] { border-left-color: var(--red); }
  .lang-toggle { min-height: 44px; display: inline-flex; align-items: center; }
  .cta { min-height: 44px; display: inline-flex; align-items: center; }
}
/* After the block above, which sets the tablet gap. On a phone the three
   columns cannot hold name, ☰, EN and दान कीजिए side by side, so the name
   takes the first row on its own - still centred - and the controls line up
   under it. The button's words must not break in two. */
@media (max-width: 760px) {
  .site-header-inner { gap: 6px 8px; }
  .cta { padding: 8px 12px; white-space: nowrap; }
  .lang-toggle { white-space: nowrap; }
}
@media (max-width: 640px) {
  .site-header-inner { row-gap: 10px; }
  /* The mark keeps the left edge and the name the middle; the controls take
     the row below, where ☰, EN and दान कीजिए have room side by side. */
  .head-do { grid-column: 1 / -1; grid-row: 2; justify-self: end; }
}

.donor-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(36, 31, 46, 0.88);
}
.donor-modal[hidden] { display: none; }
.donor-modal-box {
  position: relative;
  width: 100%; max-width: 520px;
  padding: 28px 24px;
  background: var(--warm);
  border-top: 4px solid var(--gold);
  border-radius: var(--r);
  text-align: center;
}
.donor-modal-box .dm-name { margin: 10px 0 4px; font-size: 1.5rem; }
.donor-modal-box .dm-name:focus-visible { outline: 3px solid var(--mar); outline-offset: 4px; }
.dm-avatar {
  width: 64px; height: 64px; margin: 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ind); color: var(--gold);
  font-family: var(--head); font-size: 1.75rem;
}
.dm-progress { height: 3px; margin: 10px 0; background: var(--line); }
.dm-bar { height: 100%; width: 0; background: var(--mar); }
.dm-controls { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.dm-controls button, .dm-close {
  min-width: 44px; min-height: 44px;      /* a real tap target */
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; color: var(--ink); font-size: 1rem; cursor: pointer;
}
.dm-close { position: absolute; top: 8px; right: 8px; }

/* The whole card is clickable, but the accessible name lives on a real
   button. (.donor-card already has position:relative from Task 4.) */
.donor-open {
  position: absolute; inset: 0;
  border: 0; background: transparent; cursor: pointer;
}
.donor-open:focus-visible { outline: 3px solid var(--mar); outline-offset: -3px; }
/* 82 solid indigo discs down the left edge read as noise; the initial is a
   quiet marker, so it is a tint with the ring doing the work. A real photograph
   still fills its circle. */
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  object-fit: cover;
  background: #ece9f2; color: var(--ind);
  box-shadow: inset 0 0 0 1px #d6cfe4;
  font-family: var(--head); font-size: 1.05rem;
}
.dm-avatar .avatar, .donor-modal .avatar { width: 100%; height: 100%; }
.dm-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* The English-only tracking that used to sit here was there to space out ALL-CAPS
   labels. Those labels are now sentence case, and tracking sentence-case text just
   loosens it, so there is nothing left to track. (It was never applied to Devanagari:
   letter-spacing breaks the shirorekha and the conjuncts.) */

/* ---- year totals on /daan/: the footing of the register ---- */
.totals { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
          gap: 0 28px; margin: 0 0 20px; padding: 14px 0;
          border-block: 1px solid var(--rule); }
.total { display: flex; gap: 7px; margin: 0; padding: 3px 0; }
.total b { font-weight: 800; color: var(--red-d); font-variant-numeric: tabular-nums; }
.total span { color: var(--mute); }

/* An entry with no photograph should not leave a 44px hole where one would be. */
.donor-card:not(:has(.avatar)) {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name figure" "meta year";
}
/* स्मृति entries: the gutter rule alone is easy to miss, and this flag is
   hand-reviewed per donor - it has to read. */
.donor-card.memoriam h3 { color: var(--ind); }

/* A whole entry is one button on a सूची page, so it answers the pointer: the
   second paper tone follows the cursor down the roll, which is how a reader
   keeps their place in two columns of similar-looking rows. It comes after
   .memoriam so a स्मृति entry lights up too, and only entries that really open
   something get it - the home page preview has no button. Touch screens have
   no hover; there a tap opens the pop-up at once. */
.donor-card:has(.donor-open) { transition: background-color 0.12s ease; }
@media (hover: hover) {
  .donor-card:has(.donor-open):hover { background: var(--paper); }
}
/* The same band marks the entry a keyboard reader has tabbed to. */
.donor-card:has(.donor-open:focus-visible) { background: var(--paper); }

/* ---- the समाज's own photographs on the home page ---- */
/* A ribbon under the hero: the page's first proof that this is a real,
   active समाज. Kept shorter than the heritage band so the two do not
   compete down the page. */
.festival-band { background: var(--ind); }
.festival-band img { display: block; width: 100%;
                     height: clamp(180px, 22vw, 300px);
                     object-fit: cover; object-position: center 35%; }

/* Six thumbnails, a teaser for गैलरी. One link, in the heading: six links to
   the same page would read as six identical links to a screen reader. */
.photo-strip { list-style: none; margin: 0; padding: 0;
               display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.photo-strip img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
                   object-fit: cover; object-position: center 30%;
                   border-radius: var(--r); background: var(--warm); }

/* ---- two-column pages: the words on the left, the way to act on the right ---- */
.give-grid, .page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 44px;
             padding-block: 4px 52px; align-items: start; }
.page-main > .wrap.section:first-child { padding-top: 0; }
.page-main > .wrap.section { padding-inline: 0; max-width: none; }
/* The card is the दान page's, under a name every page can use. */
.side-card { position: sticky; top: 72px; padding: 22px 22px 18px;
             background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); }
.side-card h2 { margin: 0 0 10px; font-size: 1.3rem; color: var(--ind); }
.side-card p { margin: 0 0 12px; font-size: 0.95rem; }
.side-card p:last-child { margin-bottom: 0; }
/* In a card the four places to follow read as a list, not as a row that wraps
   after three. */
/* The contents of a long page: numbered, because they are read in order. */
.page-rail ol { margin: 0; padding-left: 1.2em; }
.page-rail li { margin: 0 0 2px; }
.page-rail a { display: inline-flex; align-items: center; min-height: 36px; }
.page-rail a:hover, .page-rail a:focus-visible { color: var(--ind); }

.side-card .link-row { flex-direction: column; align-items: flex-start; gap: 0; }
.side-card .link-row a { min-height: 40px; }
@media (max-width: 900px) {
  .page-grid { grid-template-columns: 1fr; gap: 24px; }
  .side-card { position: static; }
  /* Stacked, a contents list belongs before what it lists. */
  .page-rail { order: -1; }
  .prose-split img { position: static; }
}
/* Three different things were being read as one long ladder. Each is its own
   card now, under a band of its own colour: the temple in indigo (it is being
   built, year after year), the यात्रा in red (सावन, बोल बम), the महोत्सव in
   marigold (the नवरात्र मंडप). The colour is only the signal - the type and
   the rows inside stay the same, so the three still belong to one page. */
/* The page's own opening: the title and one line, then the lists. 52px of
   padding under a single sentence left the first card below the fold. */
.give-top { padding-block: 34px 10px; }
.give-part { padding: 22px 24px 8px; border: 1px solid var(--rule); border-radius: var(--r);
             border-top: 4px solid var(--accent, var(--rule)); background: #fff; }
.give-part + .give-part { margin-top: 26px; }
.give-part .section-head h2 { color: var(--accent, var(--ind)); }
.give-part .year-list { max-width: none; }
.give-temple { --accent: var(--ind); }
.give-yatra { --accent: var(--red); }
.give-festival { --accent: var(--gold); }
/* The festival's gold is a border colour, never text: it fails contrast on
   white. Its heading borrows the deeper red-brown of the सिंदूर instead. */
.give-festival .section-head h2 { color: var(--red-d); }
@media (max-width: 560px) { .give-part { padding: 18px 16px 6px; } }
/* The card keeps its place while the lists scroll past it. */
.give-card { position: sticky; top: 72px; padding: 22px 22px 18px;
             background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); }
.give-card h2 { margin: 0 0 10px; font-size: 1.3rem; color: var(--ind); }
.give-card p { margin: 0 0 12px; font-size: 0.95rem; }
.give-line { display: grid; grid-template-columns: 4.2rem 1fr; gap: 4px 10px; }
.give-line strong { color: var(--mute); font-weight: 600; }
.give-sum { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule);
            color: var(--mute); font-size: 0.9rem; }
.give-card .btn { margin-top: 2px; }
@media (max-width: 900px) {
  .give-grid { grid-template-columns: 1fr; gap: 28px; }
  /* Stacked, the card belongs above the registers: it is what the page is for. */
  .give-card { position: static; order: -1; }
}

/* ---- दान page: each आयोजन's figures, in the home band's hand ----
   The same big-number-small-label pair the home page uses, one line per year,
   so the तीन आयोजन can be read before their lists are opened. The year sits
   first, in the heading face, and the line rules separate the years. */
.sheet { margin: 0 0 16px; }
/* On the home page the same sheet carries every year, under the आयोजन's name:
   the name is said once and the years are read against each other below it. */
.sheet-group + .sheet-group { margin-top: 26px; }
.sheet-group > h3 { margin: 0; padding-bottom: 6px; font-size: 1.26rem; color: var(--ind);
                    border-bottom: 2px solid var(--accent, var(--rule)); }
.sheet-group .sheet { margin-bottom: 0; }
.sheet-group .sheet-row h3 { color: var(--red-d); }
.sheet-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 30px;
             padding: 11px 0; border-top: 1px solid var(--line); }
.sheet-row h3 { margin: 0; min-width: 4.4rem; font-size: 1.22rem; color: var(--accent, var(--ind)); }
/* The महोत्सव's gold fails contrast as text; its sheet keeps the indigo. */
.give-festival .sheet-row h3 { color: var(--red-d); }
.sheet-row .stat { margin: 0; flex-direction: row; align-items: baseline; gap: 6px; }
.sheet-row .stat b { font-size: 1.16rem; }
.sheet-row .stat span { font-size: 0.85rem; }
@media (max-width: 560px) {
  .sheet-row { gap: 4px 18px; }
  .sheet-row h3 { min-width: 100%; }
}

/* ---- /daan/ archive: the years on offer ---- */
.year-list { list-style: none; margin: 0; padding: 0; max-width: 520px;
             border-top: 1px solid var(--rule); }
.year-item { border-bottom: 1px solid var(--rule); }
.year-item a { display: flex; align-items: baseline; gap: 12px; padding: 14px 2px;
               font-family: var(--head); font-size: 1.22rem; color: var(--ind);
               text-decoration: none; }
/* How many gave to that list - the reason to pick one row over another. */
.year-item .n { margin-left: auto; font-family: var(--body); font-size: 0.9rem;
                color: var(--mute); font-variant-numeric: tabular-nums; }
.year-item a:hover .n, .year-item a:focus-visible .n { color: var(--red); }
/* Indigo at rest, so this one turns the other way: red marks the year the
   reader is about to open. */
.year-item a:hover, .year-item a:focus-visible { color: var(--red); }

/* ---- services: a list of ways in, ruled like the rest of the page ---- */
.service-list { display: grid; border-top: 1px solid var(--rule); }
.service-card { display: grid; grid-template-columns: 11rem 1fr; gap: 4px 20px;
                padding: 15px 2px; border-bottom: 1px solid var(--rule);
                text-decoration: none; color: var(--ink); }
.service-card h3 { margin: 0; font-size: 1.22rem; color: var(--red); font-weight: 400; }
.service-card p { margin: 0; color: var(--mute); font-size: 0.95rem; align-self: center; }
.service-card:hover h3, .service-card:focus-visible h3 { color: var(--red-d); }

/* The first paragraph of a page says what the page is for; it is read before
   anything else, so it is set a size up. It keeps the width of the page like
   every other paragraph. */
.wrap.section > .section-head:first-child + p,
.wrap.section > .section-head:first-child + .prose > p:first-child {
  font-size: 1.14rem; line-height: 1.66; color: var(--ink);
}

/* Mobile stays last in the file, as the rest of this stylesheet does. */
@media (max-width: 860px) {
  /* The hero's two columns need the width; below it the calendar follows the
     headline instead of being squeezed beside it. */
  .hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .hero { padding: 36px 0 32px; }
}
@media (max-width: 760px) {
  .service-card, .fest, .contact-list li { grid-template-columns: 1fr; }
  /* Six thumbnails across a phone are 57px each - three is the most that
     stays a photograph rather than a swatch. */
  .photo-strip { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .fest-note { grid-column: 1; }
  .person-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 560px) {
  /* Keep the figure in the name's column so an entry reads as one block. */
  .donor-card { grid-template-areas: "av name" "av figure" "av meta" "av year"; }
  .donor-card:not(:has(.avatar)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "name" "figure" "meta" "year";
  }
}

/* ---- donor history page (/daata/) ---- */
.donor-id { margin: 4px 0 0; color: var(--mute); font-size: 0.9rem; }
.donor-id b { color: var(--ink); font-variant-numeric: tabular-nums; }
.donor-aliases { margin: 6px 0 0; color: var(--mute); font-size: 0.9rem; }
.totals-note { margin: -8px 0 20px; color: var(--mute); font-size: 0.8rem; }
.history-group { margin-top: 28px; }
.history-group h2, .history-group h3 { margin: 0 0 8px; font-size: 1.25rem; }
.history-group :is(h2, h3) a { color: var(--ind); }
.history-group :is(h2, h3) a:hover, .history-group :is(h2, h3) a:focus-visible {
  color: var(--red);
}
.gift-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.gift { padding: 12px 0; border-bottom: 1px solid var(--line); }
.gift p { margin: 0; }
.gift-items { font-weight: 700; }
.gift-name { color: var(--mute); font-size: 0.9rem; }
.gift-joint { font-size: 0.9rem; }
.gift-joint a { color: var(--red); }

.dm-history { margin: 10px 0 0; }
.dm-history a { display: block; padding: 6px 0; color: var(--red); font-weight: 600; }

/* The whole history, shown inside the pop-up rather than on its own page. It
   reuses the /daata/ page's blocks (.totals, .history-group, .gift); only the
   frame around them differs - it scrolls, and it reads left-aligned. */
.dm-history-view {
  margin-top: 28px;
  max-height: min(68vh, 540px);
  overflow-y: auto; overscroll-behavior: contain;
  text-align: start;
}
.dm-history-view .section-head { margin-bottom: 10px; }
.dm-history-view .section-head h2 { font-size: 1.45rem; }
.dm-history-view .section-head h2:focus-visible { outline: 3px solid var(--mar); outline-offset: 4px; }
.dm-history-view .subtitle { margin: 8px 0 0; }
.dm-history-view .totals { margin: 14px 0 16px; }
.dm-history-view .totals-note { margin: -10px 0 0; }
.dm-history-view .history-group { margin-top: 22px; }
.dm-history-view .history-group h3 { font-size: 1.1rem; }
.dm-history-view .gift:last-child { border-bottom: 0; }
.dm-history-view .load-error { text-align: center; }
/* Pinned to the foot of the scroll box while there is more to read. */
.dm-history-view.is-scrollable::after {
  content: ""; display: block; position: sticky; bottom: 0;
  height: 36px; margin-top: -36px;
  background: linear-gradient(to top, var(--warm) 30%, transparent);
  pointer-events: none;
}
.dm-loading { padding: 40px 0; color: var(--mute); text-align: center; }
.dm-back {
  position: absolute; top: 8px; left: 8px;
  min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; color: var(--ink); font-size: 0.85rem; cursor: pointer;
}