/* Activity landing pages: the social, craft, game and wellness sections.
   ─────────────────────────────────────────────────────────────────────────
   These pages carry the same visual language as the dance pages (dark hero,
   teal accent, Plus Jakarta headings) so the site reads as one thing. They are
   NOT the dance pages though: there is no booking panel and no week grid, and
   the thing a visitor most needs is "when is the next one" answered from the
   live calendar rather than from a sentence somebody has to remember to edit.

   Scoped to .activity so nothing here can reach the dance pages, which carry
   their own copies of several of these names. */

.activity .wrap { max-width: var(--max); margin: 0 auto; padding: 0 40px; }
.activity .lbl {
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  color: var(--golddim); display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
}
.activity .btn-gold {
  display: inline-flex; align-items: center; gap: 7px; background: var(--gold); color: var(--dark);
  font-family: var(--fb); font-size: 13px; font-weight: 600; padding: 13px 24px;
  border-radius: 6px; transition: background .2s, transform .15s;
}
.activity .btn-gold:hover { background: #3FD9C4; transform: translateY(-1px); }
.activity .btn-ghost {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.28);
  color: var(--white); font-family: var(--fb); font-size: 13px; font-weight: 600;
  padding: 13px 24px; border-radius: 6px; transition: border-color .2s, background .2s;
}
.activity .btn-ghost:hover { border-color: var(--gold); background: rgba(20,199,176,.08); }
.activity .btn-dark {
  display: inline-flex; align-items: center; gap: 7px; background: var(--dark); color: var(--white);
  font-family: var(--fb); font-size: 13px; font-weight: 600; padding: 13px 24px;
  border-radius: 6px; transition: background .2s;
}
.activity .btn-dark:hover { background: #2A2A3A; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* The nav is fixed, so the first section has to be pushed out from under it.
   The dance pages do this with `.dance .sh { margin-top: var(--nh) }` and this
   one had no equivalent, so its top 68px were behind the nav and the
   breadcrumb sat 36px below it instead of 104. */
.ah { background: var(--dark); margin-top: var(--nh); padding: 104px 0 88px; position: relative; overflow: hidden; }
.ah-crumb { display: flex; align-items: center; gap: 6px; margin-bottom: 22px; font-size: 11px; color: rgba(255,255,255,.3); }
/* Its own wrap now, so the gap under it is the crumb's rather than the grid's. */
.ah .wrap + .wrap { margin-top: 0; }
.ah-crumb a { color: rgba(255,255,255,.4); transition: color .2s; }
.ah-crumb a:hover { color: var(--white); }
.ah-crumb-sep { color: rgba(255,255,255,.18); }
.ah-tag {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--golddim); border: 1px solid rgba(20,199,176,.25);
  padding: 4px 12px; border-radius: 100px; margin-bottom: 20px;
}
.ah-h {
  font-family: var(--fh); font-size: clamp(44px, 6.2vw, 88px); font-weight: 700;
  color: var(--white); letter-spacing: -.04em; line-height: .92; margin-bottom: 26px;
}
.ah-h em { color: var(--golddim); font-style: italic; }
.ah-p { font-size: 16px; color: rgba(255,255,255,.78); line-height: 1.8; max-width: 560px; font-weight: 300; margin-bottom: 30px; }

/* The one line somebody scans for. Kept as a strip rather than a sentence so it
   survives being read at arm's length on a phone. */
.ah-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
/* Not a flex row. It was, with a gap, and since these read "<b>At LLELA</b>,
   not the studio" the gap landed between the bold half and the comma: "At LLELA
   , not the studio". Inline text wants inline layout. */
.ah-fact {
  display: inline-block; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 9px 14px;
  font-size: 13px; color: rgba(255,255,255,.86);
}
.ah-fact b { color: var(--white); font-weight: 600; }
.ah-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* Hero with an image beside it. Only the section landings carry one, so the
   split is opt-in rather than a two-column grid every page has to fill. */
.ah-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
/* Half the width means half the room. The full-bleed clamp put "Social events
   across Dallas-Fort Worth" on four lines and left the image floating beside a
   wall of text. */
.ah-split .ah-h { font-size: clamp(38px, 3.8vw, 60px); }
/* The right-hand column: a photo, a card about whoever is teaching, or both
   stacked. A page with both keeps the photo shorter, since the two together
   would otherwise run well past the bottom of the hero text. */
.ah-side { display: flex; flex-direction: column; gap: 20px; }
.ah-img { border-radius: 16px; overflow: hidden; aspect-ratio: 4/5; background: var(--dark3); }
.ah-side .ah-img:not(:only-child) { aspect-ratio: 16/10; }
.ah-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ah-note { font-size: 12.5px; color: rgba(255,255,255,.5); line-height: 1.6; margin: -22px 0 30px; max-width: 460px; }

/* The Game Master, in the hero.
   Where a photo would go on a page that has one, so the split is the same
   shape either way: a light panel on the dark band, holding the one thing
   somebody deciding whether to come is actually deciding on. */
.ah-gm {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; padding: 28px 28px 30px;
}
.ah-gm-img {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  display: block; margin-bottom: 18px; border: 2px solid rgba(20,199,176,.35);
}
.ah-gm-lbl {
  font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--golddim); margin-bottom: 9px;
}
.ah-gm-n { font-family: var(--fh); font-size: 21px; font-weight: 700; color: var(--white); line-height: 1.2; }
.ah-gm-r { font-size: 12.5px; color: rgba(255,255,255,.55); margin: 5px 0 14px; }
.ah-gm-p { font-size: 13.5px; line-height: 1.75; color: rgba(255,255,255,.72); }
/* This card held one paragraph, an instructor's bio, until the pricing hero put
 * two in it and they ran together as one block. */
.ah-gm-p + .ah-gm-p { margin-top: 14px; }

/* Two of them, so the photo sits beside the name rather than above it: stacked
   portraits would run the panel past the bottom of the hero. */
.ah-gm-row { display: flex; gap: 16px; align-items: flex-start; }
.ah-gm-row + .ah-gm-row { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.ah-gm-img--sm { width: 56px; height: 56px; margin-bottom: 0; flex: none; }
.ah-gm-n--sm { font-size: 17px; }
@media (max-width: 480px) {
  .ah-gm-row { display: block; }
  .ah-gm-img--sm { margin-bottom: 12px; }
}

@media (max-width: 900px) {
  /* Stacked, the aside sits directly under the hero's buttons, and 36px is
   * not enough distance between a row of buttons and a card: they read as one
   * block and the instructor panel looks like part of the call to action.
   * A rule and real space say they are two different things. */
  .ah-split { grid-template-columns: 1fr; gap: 0; }
  .ah-side {
    margin-top: 40px; padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  /* Unless the aside is only a photograph, which needs no separating: a
   * picture is obviously not a button. */
  .ah-side:has(> .ah-img:only-child) { border-top: none; padding-top: 0; margin-top: 40px; }
  .ah-img { aspect-ratio: 16/10; }
}

/* ── Prose section ────────────────────────────────────────────────────── */
.as { background: var(--white); padding: 96px 0; }
.as-alt { background: var(--offwhite); padding: 96px 0; }
.as-h {
  font-family: var(--fh); font-size: clamp(30px, 3.4vw, 46px); font-weight: 700;
  color: var(--dark); letter-spacing: -.03em; line-height: 1.04; margin-bottom: 20px;
}
.as-h em { font-style: italic; color: var(--golddim); }
.as-body { max-width: 680px; }
/* The promo section's button. A btn-dark straight after a paragraph sits on
 * the text baseline and reads as part of it, so it gets its own row. */
.pm-cta { margin-top: 30px; }
.as-body p { font-size: 15px; color: #4A4B60; line-height: 1.85; margin-bottom: 18px; }
.as-body p:last-child { margin-bottom: 0; }
.as-body strong { color: var(--dark); font-weight: 600; }
/* Body copy links. Without this a link inside a paragraph is indistinguishable
 * from the text around it, so an <a> written into the copy reads as a dead
 * phrase. Matches the strip under the hero. */
.as-body a { color: var(--dark); font-weight: 600; border-bottom: 1px solid rgba(20,199,176,.5); }
.as-body a:hover { color: var(--golddim); }

/* ── Feature trio ─────────────────────────────────────────────────────── */
.af { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.af-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 30px 26px; }
.as .af-card { background: var(--offwhite); }
/* No icon. There was an emoji here, and an emoji in body copy is decoration
   pretending to be information. A rule does the same separating job. */
.af-h { font-family: var(--fh); font-size: 17px; font-weight: 700; color: var(--dark); margin-bottom: 10px; padding-top: 16px; border-top: 2px solid var(--gold); display: inline-block; }
.af-p { font-size: 13px; color: var(--muted); line-height: 1.7; }

/* ── What to bring ────────────────────────────────────────────────────── */
.ab { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 30px 32px; margin-top: 36px; max-width: 680px; }
.ab-h { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--golddim); margin-bottom: 16px; }
.ab-list { list-style: none; }
/* Two flex children: the tick, and everything else.
   The content used to be dropped straight into the li, so "<b>Label</b> text"
   became two flex items and laid itself out as two ragged columns. */
.ab-list li { font-size: 14px; color: #4A4B60; padding: 9px 0; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: baseline; }
.ab-t { flex: 1; line-height: 1.7; }
.ab-t b { color: var(--dark); font-weight: 600; }

/* The sign-off on /about. A line on its own under the button, in the voice of
   somebody who has just stopped talking. */
.ab-sign { margin-top: 34px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.ab-sign em { font-style: italic; color: var(--golddim); }
.ab-list li:last-child { border-bottom: none; }
.ab-list li::before { content: '✓'; color: var(--golddim); font-weight: 700; font-size: 12px; flex-shrink: 0; }

/* ── Rails ────────────────────────────────────────────────────────────────
   One row that runs off the edge, with an arrow at each end sitting ON the
   row. Used by the upcoming events, the activity list and each year of the
   reading shelf; the behaviour is in assets/js/rails.js.

   Arrows in the heading were a control you had to look away from the row to
   find. At the ends of the row they are where the row runs out. */
.rl { position: relative; }
.rl-track {
  display: grid; grid-auto-flow: column; overflow-x: auto;
  scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: none;
  /* Bled to the container edge so the item that is half on screen is cut by the
     page rather than by a box, and padded back so the first lines up with the
     heading above it. scroll-padding keeps the snap points off the border edge,
     without which the rail loads already scrolled by the width of the padding. */
  margin: 0 -40px; padding: 4px 40px 14px; scroll-padding-left: 40px;
}
.rl-track::-webkit-scrollbar { display: none; }
.rl-track > * { scroll-snap-align: start; }
.rl-btn {
  position: absolute; top: calc(50% - 7px); transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white); color: var(--dark);
  font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(26,29,46,.14);
  transition: border-color .18s, color .18s, opacity .18s;
}
.rl-btn--prev { left: -18px; }
.rl-btn--next { right: -18px; }
.rl-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--golddim); }
/* The glyph fades, not the button. Fading the whole thing took the white
   background with it, so a disabled arrow sitting over a card read as a smudge
   across the text rather than as a control that is off. */
.rl-btn:disabled { color: rgba(26,29,46,.24); border-color: #EEF0F5; box-shadow: 0 2px 6px rgba(26,29,46,.07); cursor: default; }
/* Nothing to scroll, nothing to press. */
.rl--static .rl-btn { display: none; }
/* Outside the content column while there is gutter to sit in, over the row
   once there is not. --max is 1180, so 1264 is the width at which a 40px
   button no longer clears it. */
@media (max-width: 1264px) {
  .rl-btn--prev { left: 6px; }
  .rl-btn--next { right: 6px; }
}
/* Swipe is the gesture on a touch screen, and an arrow under a thumb is in the
   way of it. */
@media (hover: none) { .rl-btn { display: none; } }

/* ── Upcoming dates, live from the calendar ───────────────────────────────
   The cards are the site's .up-card, in main.css. Three across and a sliver of
   the fourth: the sliver is what says the row moves. */
/* Track widths are definite, not percentages.
   ─────────────────────────────────────────────────────────────────────────
   grid-auto-columns given a percentage inside an overflow-x container has no
   definite basis to resolve against, so the browser sized the tracks to their
   content and the row fitted itself into the viewport instead of running off
   it. Fifteen tiles came out 147px wide and there was nothing to scroll. A
   fixed width is the only thing that makes an overflowing row overflow.

   The numbers are chosen against the content column, which is --max (1180)
   less the wrap's 40px padding either side, so 1100. */
/* Three cards across 1100, plus a sliver of the fourth. */
.au-rail { grid-auto-columns: 316px; gap: 24px; }
.au-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.au-msg { padding: 30px 0; font-size: 14px; color: var(--muted); }
.au-msg a { color: var(--golddim); font-weight: 600; }
@media (max-width: 1024px) { .au-rail { grid-auto-columns: 300px; } }
@media (max-width: 768px) {
  .rl-track { margin: 0 -20px; padding: 4px 20px 14px; scroll-padding-left: 20px; }
  .au-rail { grid-auto-columns: 78vw; }
}
.au-sub { margin-top: 12px; font-size: 14px; color: var(--muted); line-height: 1.7; max-width: 520px; }
.au-msg { grid-column: 1 / -1; padding: 30px 0; font-size: 14px; color: var(--muted); }
.au-msg a { color: var(--golddim); font-weight: 600; }

/* ── Supporting the club ──────────────────────────────────────────────────
   Present on every free page, and the brief was "obvious but not obtrusive".
   So: its own band, in the dark brand colour rather than a tinted box inside
   another section, and placed after the visitor has read what they came for
   rather than in front of it. No modal, no sticky bar, nothing that has to be
   dismissed. */
.ad { background: var(--dark); padding: 84px 0; }
.ad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.ad-h { font-family: var(--fh); font-size: clamp(28px, 3vw, 40px); font-weight: 700; color: var(--white); letter-spacing: -.03em; line-height: 1.05; margin-bottom: 18px; }
.ad-h em { font-style: italic; color: var(--golddim); }
.ad-p { font-size: 15px; color: rgba(255,255,255,.72); line-height: 1.8; font-weight: 300; margin-bottom: 16px; }
.ad-p:last-of-type { margin-bottom: 28px; }
/* The what-your-fiver-buys ladder used to sit here. It explained the
   denominations back at somebody who had already seen the amounts, which is
   filler on a panel whose whole job is three buttons and a card form. */
.ad-note { margin-top: 18px; font-size: 12px; color: rgba(255,255,255,.4); line-height: 1.7; }

/* ── Section index: what we run ───────────────────────────────────────────
   Always three rows. Fifteen tiles wrap to five columns on a wide screen; on a
   narrow one the columns keep their width and the row scrolls, rather than the
   grid reflowing into a nine-row wall. Three rows is the shape of the section
   at every size, which is the point. */
/* Five columns fill 1100 exactly, so a wide screen shows all fifteen with
   nothing to scroll and no arrows. Anything narrower keeps the tile width and
   scrolls, which is the carousel. Three rows either way. */
.ax-grid { grid-auto-columns: 210px; gap: 12px; margin-top: 40px; }
.ax-grid--r1 { grid-template-rows: 1fr; }
.ax-grid--r2 { grid-template-rows: repeat(2, 1fr); }
.ax-grid--r3 { grid-template-rows: repeat(3, 1fr); }
.ax-tile {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--white); border: 1px solid var(--line); border-radius: 11px;
  padding: 15px 15px 17px;
  transition: border-color .18s, transform .15s, box-shadow .18s;
}
.ax-tile:hover { border-color: rgba(20,199,176,.55); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(26,29,46,.07); }
.ax-when { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--golddim); line-height: 1.5; }
.ax-h { font-family: var(--fh); font-size: 14px; font-weight: 700; color: var(--dark); line-height: 1.3; }
.ax-p { font-size: 11.5px; color: var(--muted); line-height: 1.6; margin-top: auto; padding-top: 4px; }
@media (max-width: 560px) { .ax-grid { grid-auto-columns: 74vw; } }

/* ── Workshop types ───────────────────────────────────────────────────────
   Twelve crafts named on one page instead of six thin pages that would each
   have no dates on them. Compact, because the useful thing is the list. */
.aw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.aw { background: var(--white); border: 1px solid var(--line); border-radius: 11px; padding: 18px 18px 20px; }
.aw-h { font-family: var(--fh); font-size: 14px; font-weight: 700; color: var(--dark); margin-bottom: 7px; }
.aw-p { font-size: 12.5px; color: var(--muted); line-height: 1.65; }
@media (max-width: 1000px) { .aw-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .aw-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Callout ──────────────────────────────────────────────────────────────
   A thing worth saying on a page that does not warrant a page of its own. */
.ak { background: var(--offwhite); border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; padding: 22px 26px; margin-top: 32px; max-width: 680px; }
.ak-h { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--golddim); margin-bottom: 10px; }
.ak-p { font-size: 14px; color: #4A4B60; line-height: 1.8; }
/* Same block with somewhere to go. */
.ak--link { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
/* Several paragraphs and an action, so the block runs the width of the section
   rather than the 680px a single line of prose wants. */
.ak--wide { display: flex; align-items: center; justify-content: space-between; gap: 40px; max-width: none; }
.ak--wide .ak-p { margin-bottom: 12px; max-width: 640px; }
.ak--wide .ak-p:last-child { margin-bottom: 0; }
.ak--wide .btn-dark { flex-shrink: 0; }
@media (max-width: 760px) { .ak--wide { flex-direction: column; align-items: flex-start; gap: 22px; } }
.ak--link .btn-dark { flex-shrink: 0; }
@media (max-width: 620px) { .ak--link { flex-direction: column; align-items: flex-start; gap: 18px; } }

/* The address under the hero buttons. Quiet, and a link, because the one thing
   somebody does with an address is open it in a map. */
.ah-addr { margin-top: 22px; font-size: 12.5px; line-height: 1.7; color: rgba(255,255,255,.42); }
.ah-addr a { color: inherit; border-bottom: 1px solid rgba(255,255,255,.16); transition: color .2s, border-color .2s; }
.ah-addr a:hover { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.4); }


@media (max-width: 900px) {
  .af { grid-template-columns: 1fr; }
  .ad-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 768px) {
  .activity .wrap { padding: 0 20px; }
  .ah { padding: 62px 0 64px; }
  .as, .as-alt { padding: 64px 0; }
  .ad, .ac { padding: 60px 0; }
}

/* ── Donation panel ───────────────────────────────────────────────────────
   Built by assets/js/donate.js, styled here. Sits inside the dark band, so it
   is a light card against it rather than another dark box on a dark ground. */
.ad-panel { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 26px 26px 22px; }
.ad-panel-h { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--golddim); margin-bottom: 16px; }
.dn-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.dn-amt, .dn-custom {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.14);
  border-radius: 9px; padding: 13px 6px; color: var(--white);
  font-family: var(--fb); font-size: 15px; font-weight: 700;
  transition: border-color .18s, background .18s;
}
.dn-amt:hover, .dn-custom:hover { border-color: rgba(20,199,176,.55); }
/* Selected is a filled state, not a bigger one. A pill that only grows reads as
   a layout bug rather than as a choice that has been made. */
.dn-amt.on, .dn-custom.on { background: var(--gold); border-color: var(--gold); color: var(--dark); }
.dn-cur { opacity: .55; font-size: 13px; }
.dn-custom.on .dn-cur { opacity: .75; }
.dn-input {
  width: 100%; min-width: 0; background: none; border: none; outline: none;
  color: inherit; font: inherit; text-align: center; padding: 0;
  -moz-appearance: textfield; appearance: textfield;
}
.dn-input::-webkit-outer-spin-button, .dn-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dn-input::placeholder { color: rgba(255,255,255,.5); font-weight: 600; font-size: 13px; }
.dn-custom.on .dn-input::placeholder { color: rgba(20,20,32,.5); }
.activity .dn-go { width: 100%; justify-content: center; }
.dn-err { margin-top: 12px; font-size: 13px; color: #FCA5A5; line-height: 1.6; }
/* The card sheet, over the page. Stripe's iframe draws its own white card, so
   it gets room rather than styling. */
.dn-overlay {
  position: fixed; inset: 0; z-index: 2000; background: rgba(12,12,20,.72);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
.dn-overlay[hidden] { display: none; }
.dn-modal { background: var(--white); border-radius: 14px; width: 100%; max-width: 560px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.dn-modal-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
  font-family: var(--fh); font-size: 15px; font-weight: 700; color: var(--dark);
}
.dn-close { font-size: 15px; line-height: 1; color: var(--muted); padding: 6px; border-radius: 6px; }
.dn-close:hover { color: var(--dark); background: var(--offwhite); }
.dn-sheet { padding: 8px; min-height: 320px; }
.dn-thanks { padding: 4px 0; }
.dn-thanks-h { font-family: var(--fh); font-size: 22px; font-weight: 700; color: var(--white); margin-bottom: 10px; }
.dn-thanks-p { font-size: 14px; color: rgba(255,255,255,.72); line-height: 1.75; }
@media (max-width: 480px) {
  .dn-amounts { grid-template-columns: repeat(2, 1fr); }
}

/* ── Reading archive, as a shelf ──────────────────────────────────────────
   Covers first. The blurb is there for search engines and for anybody who
   wants it, revealed on hover or focus rather than printed under every book,
   because twenty-seven blurbs stacked up is the list this replaced. */
.ar-year { margin-top: 40px; }
.ar-y { font-family: var(--fh); font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--golddim); margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
/* One row a year, scrolled. Three years stacked as wrapping grids was most of
   a screen each, and the third year was never reached. */
.ar-shelf { grid-auto-columns: 158px; gap: 20px; }
.ar-book { position: relative; }
/* The rail clips horizontally; the blurb sits inside the cover so it is not
   cut off by that clipping. */
.ar-cover {
  position: relative; aspect-ratio: 2/3; border-radius: 4px 8px 8px 4px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 16px 14px; text-align: center;
  background: linear-gradient(150deg, hsl(var(--h) 42% 32%), hsl(var(--h) 46% 20%));
  box-shadow: 0 6px 18px rgba(26,29,46,.18);
  transition: transform .18s, box-shadow .18s;
}
/* The spine, so a typeset cover reads as a book rather than a coloured box. */
.ar-cover::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 7px;
  background: linear-gradient(90deg, rgba(0,0,0,.34), rgba(255,255,255,.09));
}
.ar-book:hover .ar-cover, .ar-book:focus-visible .ar-cover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(26,29,46,.26); }
.ar-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar-ct { font-family: var(--fh); font-size: 13px; font-weight: 700; color: #fff; line-height: 1.28; letter-spacing: -.01em; }
.ar-ca { font-size: 10px; color: rgba(255,255,255,.66); letter-spacing: .04em; }
.ar-meta { margin-top: 10px; }
.ar-t { font-size: 12.5px; font-weight: 600; color: var(--dark); line-height: 1.35; }
.ar-a { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* Present in the markup, shown on hover or focus. Never display:none, so it is
   read by search engines and by a screen reader either way. */
.ar-b {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  margin: 0; padding: 14px; border-radius: 8px;
  background: var(--dark); color: rgba(255,255,255,.86);
  font-size: 11.5px; line-height: 1.6;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s, transform .18s, visibility .18s;
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
}
.ar-book:hover .ar-b, .ar-book:focus-within .ar-b, .ar-book:focus .ar-b {
  opacity: 1; visibility: visible; transform: translateY(0);
}
@media (max-width: 560px) { .ar-shelf { grid-auto-columns: 38vw; gap: 14px; } }
/* No hover on a touch screen, so the blurb sits under the book instead. */
@media (hover: none) {
  .ar-b { position: static; opacity: 1; visibility: visible; transform: none;
    background: none; color: var(--muted); padding: 8px 0 0; box-shadow: none; }
}

/* The card that ends the calendar rail. Deliberately not a .up-card: it is not
   an event, and dressing it as one invites a click that goes somewhere else
   than the others. */
.au-end {
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  background: var(--offwhite); border: 1px dashed var(--line); border-radius: var(--radius-lg);
  padding: 26px 24px; transition: border-color .2s, background .2s;
}
.as .au-end { background: var(--white); }
.au-end:hover { border-color: rgba(20,199,176,.55); background: var(--goldtint); }
.au-end-h { font-family: var(--fh); font-size: 15px; font-weight: 700; color: var(--dark); line-height: 1.3; }
.au-end-p { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.au-end-cta { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--golddim); }

/* ── Board game library ───────────────────────────────────────────────────
   Three hundred cards, filtered by hiding rather than rebuilding. */
.gl-bar {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 10px;
  margin: 32px 0 12px; align-items: center;
}
.gl-in, .gl-sel {
  width: 100%; font: inherit; font-size: 13.5px; color: var(--dark);
  background: var(--white); border: 1px solid var(--line); border-radius: 9px;
  padding: 11px 13px; transition: border-color .18s;
}
.gl-in:focus, .gl-sel:focus { outline: none; border-color: var(--gold); }
.gl-sel { appearance: none; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.gl-clear { font-size: 13px; color: var(--muted); padding: 11px 14px; border-radius: 9px; white-space: nowrap; }
.gl-clear:hover { color: var(--dark); background: var(--offwhite); }
.gl-count { font-size: 12.5px; color: var(--muted); margin-bottom: 22px; }

.gl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* A button, because the whole card opens the write-up. That brings the browser's
   button defaults with it, so they are all turned back off here. */
.gl-card {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--line); border-radius: 13px; overflow: hidden;
  transition: border-color .18s, transform .15s, box-shadow .18s;
  font: inherit; text-align: left; padding: 0; width: 100%; cursor: pointer;
}
.gl-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gl-card:hover { border-color: rgba(20,199,176,.5); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(26,29,46,.08); }
.gl-card[hidden] { display: none; }
/* The art is BoardGameGeek's, on their CDN. A missing one removes itself and
   leaves the tinted panel, the same trick the book shelf uses. */
.gl-img { display: block; aspect-ratio: 3/2; background: linear-gradient(135deg, var(--goldtint), #eef0f5); }
.gl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-body { padding: 15px 16px 17px; display: flex; flex-direction: column; flex: 1; }
.gl-name { display: block; font-family: var(--fh); font-size: 15px; font-weight: 700; color: var(--dark); line-height: 1.3; margin-bottom: 7px; }
.gl-teaser { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-bottom: 12px; }
.gl-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11.5px; color: var(--muted); margin-top: auto; }
.gl-w { font-weight: 700; }
.gl-w--light { color: #6E9E6E; }
.gl-w--medium { color: #C08A3E; }
.gl-w--heavy, .gl-w--vheavy { color: #C2410C; }
.gl-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.gl-tag { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--golddim); background: var(--goldtint); border-radius: 4px; padding: 3px 7px; }
.gl-htp { margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--dark); }
.gl-htp:hover { color: var(--golddim); }
/* ── Blog ─────────────────────────────────────────────────────────────────
   The index is cards; a post is a column of prose. Neither uses the activity
   hero: there is nothing to book on a blog post, and a 90px display heading
   over somebody's member spotlight reads as a billboard rather than writing. */
.bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.bl-card {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  transition: border-color .18s, transform .15s, box-shadow .18s;
}
.bl-card:hover { border-color: rgba(20,199,176,.5); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(26,29,46,.09); }
.bl-img { display: block; aspect-ratio: 16/10; background: linear-gradient(135deg, var(--goldtint), #eef0f5); }
.bl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-body { display: block; padding: 22px 24px 26px; }
.bl-date { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--golddim); margin-bottom: 10px; }
.bl-t { display: block; font-family: var(--fh); font-size: 18px; font-weight: 700;
  color: var(--dark); line-height: 1.35; margin-bottom: 10px; }
.bl-x { display: block; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
@media (max-width: 1000px) { .bl-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .bl-grid { grid-template-columns: 1fr; } }

.bp { background: var(--white); padding: calc(var(--nh) + 56px) 0 96px; }
.bp .wrap > * { max-width: 720px; }
.bp .ah-crumb { color: var(--muted); margin-bottom: 26px; }
.bp .ah-crumb a { color: var(--muted); }
.bp .ah-crumb a:hover { color: var(--dark); }
.bp .ah-crumb-sep { color: var(--line); }
.bp-date { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--golddim); margin-bottom: 14px; }
.bp-h { font-family: var(--fh); font-size: clamp(30px, 3.6vw, 46px); font-weight: 800;
  color: var(--dark); letter-spacing: -.03em; line-height: 1.15; margin-bottom: 36px; }
/* The migration notice. Quiet, but the first thing under the headline: it is
   an explanation for anything that looks off, not an announcement. */
.bp-note {
  background: var(--offwhite); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 10px; padding: 16px 20px; margin-bottom: 34px;
  font-size: 13.5px; line-height: 1.7; color: var(--muted);
}
.bp-note a { color: var(--dark); font-weight: 600; border-bottom: 1px solid rgba(20,199,176,.5); }
.bp-note a:hover { color: var(--golddim); }
.bp-hero { border-radius: 16px; overflow: hidden; margin-bottom: 40px; max-width: 900px; }
.bp-hero img { width: 100%; height: auto; display: block; }
.bp-body p, .bp-body li { font-size: 16px; line-height: 1.9; color: #3F4152; margin-bottom: 22px; }
.bp-body li { margin-bottom: 10px; margin-left: 22px; list-style: disc; }
.bp-body h2 { font-family: var(--fh); font-size: 24px; font-weight: 700; color: var(--dark);
  line-height: 1.3; margin: 40px 0 18px; }
.bp-shots { display: grid; gap: 18px; margin: 40px 0; max-width: 900px; }
.bp-shot { width: 100%; height: auto; border-radius: 14px; display: block; }
.bp-nav { display: flex; justify-content: space-between; gap: 24px; margin: 56px 0 32px;
  padding-top: 28px; border-top: 1px solid var(--line); max-width: 900px; }
.bp-nav-a { font-size: 14px; font-weight: 600; color: var(--dark); line-height: 1.5; max-width: 300px; }
.bp-nav-a span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--golddim); margin-bottom: 6px; }
.bp-nav-a--next { text-align: right; }
.bp-nav-a:hover { color: var(--golddim); }

/* ── FAQ ──────────────────────────────────────────────────────────────────
   <details> rather than a script: it opens with no JavaScript, it is findable
   with the browser's own find-in-page in most browsers, and it needs no state
   of its own. */
.fq { max-width: 820px; }
.fq-i { border-bottom: 1px solid var(--line); }
.fq-i:first-child { border-top: 1px solid var(--line); }
.fq-q {
  list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  font-family: var(--fh); font-size: 16px; font-weight: 700; color: var(--dark); line-height: 1.45;
}
.fq-q::-webkit-details-marker { display: none; }
.fq-q::after {
  content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 20px; font-weight: 400; color: var(--golddim); line-height: 1;
}
.fq-i[open] .fq-q::after { content: '\2013'; }
.fq-q:hover { color: var(--golddim); }
.fq-a { padding: 0 40px 22px 0; }
.fq-a p { font-size: 14.5px; line-height: 1.85; color: #4A4B60; }
.fq-a a { color: var(--dark); font-weight: 600; border-bottom: 1px solid rgba(20,199,176,.5); }
.fq-a a:hover { color: var(--golddim); }

/* A strip under the hero, for something true that belongs to somebody else. */
.hn { background: var(--offwhite); border-bottom: 1px solid var(--line); padding: 20px 0; }
.hn-p { font-size: 14px; line-height: 1.7; color: var(--muted); }
.hn-p a { color: var(--dark); font-weight: 600; border-bottom: 1px solid rgba(20,199,176,.5); }
.hn-p a:hover { color: var(--golddim); }

/* ── Community partner ────────────────────────────────────────────────────
   One person, so a photo beside the text rather than a card in a grid. */
.pn { display: grid; grid-template-columns: 380px 1fr; gap: 48px; align-items: center; }
.pn-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; display: block;
  background: linear-gradient(135deg, var(--goldtint), #eef0f5); }
.pn-body { min-width: 0; }
.pn-r { font-size: 14px; color: var(--muted); margin: -14px 0 20px; }
.pn-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.btn-ghost-dark {
  display: inline-block; padding: 13px 24px; border-radius: 10px; font-size: 14px; font-weight: 700;
  color: var(--dark); border: 1.5px solid var(--line); background: var(--white);
}
.btn-ghost-dark:hover { border-color: var(--dark); }
@media (max-width: 860px) { .pn { grid-template-columns: 1fr; gap: 28px; } }

/* ── Venmo and Zelle ──────────────────────────────────────────────────────
   The code is the point, so it is large enough to scan from a laptop screen
   with a phone held at a normal distance. */
.qr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 780px; }
.qr {
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  padding: 28px; text-align: center;
}
/* A QR code is square. Nothing was holding the box to that, so a source image
 * with any padding on it rendered as a rectangle and the two blocks came out
 * different heights. The box is square and the code is fitted inside it, so a
 * code that is not square is letterboxed rather than stretched: a stretched QR
 * does not scan. */
/* height: auto is what actually fixes this, and it has to come before the
 * aspect-ratio to be worth writing. The <img> carries height="440", which maps
 * to a presentational height and is a used value, so aspect-ratio was being
 * ignored and the box came out 260 wide by 440 tall. */
.qr-img { width: 100%; max-width: 260px; height: auto; aspect-ratio: 1; object-fit: contain;
  background: var(--white); margin: 0 auto 20px; display: block; border-radius: 10px; }
.qr-h { font-family: var(--fh); font-size: 19px; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.qr-p { font-size: 13.5px; line-height: 1.7; color: var(--muted); margin-bottom: 18px; }
@media (max-width: 700px) { .qr-grid { grid-template-columns: 1fr; } }

/* ── Contact ──────────────────────────────────────────────────────────────
   The form and the things that answer a question without one. */
.ct { display: grid; grid-template-columns: 1.35fr .8fr; gap: 56px; align-items: start; }
.ct-form { min-width: 0; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.ct-chip {
  font-size: 13px; font-weight: 600; color: var(--muted); background: var(--white);
  border: 1.5px solid var(--line); border-radius: 999px; padding: 9px 16px; cursor: pointer;
  font-family: inherit; transition: border-color .18s, color .18s, background .18s;
}
.ct-chip:hover { border-color: var(--gold); color: var(--dark); }
.ct-chip.on { background: var(--dark); border-color: var(--dark); color: var(--white); }
.ct-side { display: flex; flex-direction: column; gap: 18px; }
.ct-card { background: var(--offwhite); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.ct-card--quiet { background: transparent; }
.ct-h { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--golddim); margin-bottom: 10px; }
.ct-p { font-size: 14px; line-height: 1.75; color: var(--muted); }
/* One per line: two inline-blocks in the same card ran together as
   "What is on and when What things cost". */
.ct-card a { display: block; width: fit-content; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--dark); }
.ct-card a:hover { color: var(--golddim); }
.ct-p a { display: inline; width: auto; margin-top: 0; font-weight: 600; color: var(--dark); }
@media (max-width: 900px) { .ct { grid-template-columns: 1fr; gap: 40px; } }

/* ── Tall profiles ────────────────────────────────────────────────────────
   The founders and the coordinator on /about/leadership, and the two founders
   at the top of /about/instructors. Several paragraphs each, so the photo is a
   wide crop above the text rather than a small round one beside it. */
/* start, not stretch: the three bios are different lengths, and equal-height
   cards leave the shortest one with a panel of empty space under it. */
.pf-grid { display: grid; gap: 34px; align-items: start; }
.pf-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pf-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pf {
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; padding: 0 0 28px;
}
.pf-img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: center top;
  display: block; background: linear-gradient(135deg, var(--goldtint), #eef0f5);
  margin-bottom: 24px;
}
.pf-n { font-family: var(--fh); font-size: 24px; font-weight: 800; color: var(--dark); padding: 0 28px; }
.pf-r {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--golddim); padding: 8px 28px 0; line-height: 1.5;
}
.pf-p { font-size: 14px; line-height: 1.8; color: var(--muted); padding: 16px 28px 0; }

/* The three stay in one row.
   A middle step of two columns puts one founder on a row of their own, which
   reads as a hierarchy that is not there. Three across, then straight to a
   single column when three no longer fit; the gap and the padding tighten
   rather than the row breaking. */
@media (max-width: 1100px) {
  .pf-grid { gap: 20px; }
  .pf-n { font-size: 21px; padding: 0 20px; }
  .pf-r, .pf-p { padding-left: 20px; padding-right: 20px; }
  .pf-p { font-size: 13.5px; }
}
@media (max-width: 820px) {
  .pf-grid--3, .pf-grid--2 { grid-template-columns: 1fr; }
  .pf-n { font-size: 24px; padding: 0 28px; }
  .pf-r, .pf-p { padding-left: 28px; padding-right: 28px; }
  .pf-p { font-size: 14px; }
}
/* Two side by side hold a wider column, so they can break later. */
@media (max-width: 820px) and (min-width: 621px) {
  .pf-grid--2 { grid-template-columns: 1fr 1fr; }
}

.gl-empty { padding: 40px 0; font-size: 14px; color: var(--muted); }
/* The scroll sentinel. It carries no content; the height is only so that it
   cannot be a zero-tall element the observer never has a chance to see. */
.gl-more { height: 1px; }

/* The write-up. Same shell as the donation modal, with room for the art and a
   couple of paragraphs, and its own scroll so a long description cannot push
   the close button off the screen. */
.gl-modal { max-width: 640px; max-height: 88vh; display: flex; flex-direction: column; }
.gl-detail { overflow-y: auto; }
.gl-d-img { background: linear-gradient(135deg, var(--goldtint), #eef0f5); }
.gl-d-img img { width: 100%; max-height: 300px; object-fit: cover; display: block; }
.gl-d-body { padding: 20px 22px 24px; }
.gl-d-pub { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.gl-d-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.gl-d-facts span {
  font-size: 12px; font-weight: 600; color: var(--dark);
  background: var(--offwhite); border-radius: 6px; padding: 5px 9px;
}
.gl-d-text { font-size: 14px; line-height: 1.75; color: var(--muted); }

@media (max-width: 1000px) { .gl-grid { grid-template-columns: repeat(3, 1fr); } .gl-bar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .gl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .gl-grid { grid-template-columns: 1fr; } }

/* ── Adventure boards ─────────────────────────────────────────────────────
   A catalogue of one-shots. Somebody choosing between twelve wants to read
   twelve, so this is a grid of blurbs rather than a list of titles. */
.ag { margin-top: 48px; }
.ag-h { font-family: var(--fh); font-size: 22px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.ag-p { font-size: 14px; color: var(--muted); line-height: 1.75; max-width: 680px; margin-bottom: 22px; }
.ag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ag-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 20px 20px 22px; }
.as-alt .ag-card { background: var(--white); }
.ag-kicker { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--golddim); margin-bottom: 9px; }
.ag-t { font-family: var(--fh); font-size: 16px; font-weight: 700; color: var(--dark); line-height: 1.3; margin-bottom: 8px; }
.ag-b { font-size: 13px; color: var(--muted); line-height: 1.7; }
@media (max-width: 900px) { .ag-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .ag-grid { grid-template-columns: 1fr; } }

/* ── Game Masters ─────────────────────────────────────────────────────── */
.gm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 36px; }
.gm { background: var(--white); border: 1px solid var(--line); border-radius: 13px; padding: 26px 26px 28px; }
.gm-n { font-family: var(--fh); font-size: 19px; font-weight: 700; color: var(--dark); }
.gm-r { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--golddim); margin: 5px 0 14px; }
.gm-p { font-size: 13.5px; color: var(--muted); line-height: 1.8; }
@media (max-width: 760px) { .gm-grid { grid-template-columns: 1fr; } }

/* Game Master with a photo. Without one the card is the text alone, which is
   how the pages that have no headshot still look deliberate. */
.gm--photo { display: flex; gap: 20px; align-items: flex-start; }
.gm-img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center top; flex-shrink: 0; background: var(--goldtint); }
.af-title { font-family: var(--fh); font-size: 20px; font-weight: 700; color: var(--dark); margin-top: 40px; }
.af-title + .af { margin-top: 18px; }
@media (max-width: 520px) { .gm--photo { flex-direction: column; gap: 14px; } }

/* ── /links ───────────────────────────────────────────────────────────────
   The page a QR code points at, so it is read on a phone at arm's length by
   somebody mid-conversation. Every row is a full-width target with the label
   first and the detail underneath, rather than a dense list of link text.
   Sized from a phone up, which is the reverse of the rest of this stylesheet
   and correct here: the desktop view is the incidental one. */
/* The nav is fixed, so the first section has to clear it. Without this the
 * page title sat behind the header. */
.lk { background: var(--offwhite, #FAFAFB); margin-top: var(--nh); padding: 40px 0 60px; }
.lk-wrap { max-width: 560px; }

.lk-top { text-align: center; margin-bottom: 34px; }
.lk-logo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin: 0 auto 18px; display: block; }
.lk-h { font-family: var(--fh); font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.lk-p { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 12px auto 0; max-width: 420px; }
.lk-social { display: flex; justify-content: center; gap: 14px; margin-top: 20px; }
.lk-social a {
  width: 42px; height: 42px; border-radius: 50%; background: var(--white);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, transform .2s;
}
.lk-social a:hover { border-color: var(--gold); transform: translateY(-2px); }

.lk-grp { margin-bottom: 26px; }
.lk-grp-h {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--golddim); margin-bottom: 10px; padding-left: 2px;
}
.lk-list { display: flex; flex-direction: column; gap: 9px; }

.lk-i {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 15px 18px; column-gap: 12px;
  transition: border-color .2s, transform .15s, box-shadow .2s;
}
.lk-i:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(20,20,32,.07); }
.lk-i-t { font-size: 15.5px; font-weight: 700; color: var(--dark); line-height: 1.3; }
.lk-i-s { grid-column: 1; font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.lk-i-go { grid-column: 2; grid-row: 1 / span 2; color: var(--golddim); font-size: 17px; }

/* The three that matter most, given the weight to match. */
.lk-list--lead .lk-i { background: var(--dark); border-color: var(--dark); padding: 17px 18px; }
.lk-list--lead .lk-i-t { color: var(--white); font-size: 16.5px; }
.lk-list--lead .lk-i-s { color: rgba(255,255,255,.6); }
.lk-list--lead .lk-i-go { color: var(--gold); }
.lk-list--lead .lk-i:hover { border-color: var(--gold); }

.lk-foot { text-align: center; margin-top: 34px; }
.lk-addr { font-size: 13px; line-height: 1.6; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 18px; display: block; }
.lk-addr:hover { color: var(--dark); }
.lk-fine { font-size: 11.5px; line-height: 1.6; color: var(--text-3, #8A8BA0); margin-top: 18px; }

@media (min-width: 700px) {
  .lk { padding: 60px 0 80px; }
  .lk-h { font-size: 32px; }
}

/* What Alexi teaches, on her own page.
   Its own block rather than .ax-grid, which is the horizontal 210px tile rail
   the section pages use and would fight a four-up grid of linked cards. */
.wt { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 40px; }
.wt-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 24px 24px 22px;
  transition: border-color .2s, transform .15s, box-shadow .2s;
}
.wt-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,29,46,.07); }
.wt-h { font-family: var(--fh); font-size: 17px; font-weight: 700; color: var(--dark); line-height: 1.25; }
.wt-p { font-size: 13.5px; color: var(--muted); line-height: 1.65; flex: 1; }
.wt-go { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--golddim); margin-top: 6px; }

/* The link out of a terse hero roster. Three names with no bios needs a way
   through to the people themselves. */
.ah-gm-more {
  display: inline-block; margin-top: 20px; font-size: 12.5px; font-weight: 600;
  color: var(--golddim); border-bottom: 1px solid rgba(20,199,176,.35); padding-bottom: 2px;
}
.ah-gm-more:hover { color: var(--white); border-color: rgba(255,255,255,.5); }

/* The tax-status line under the donate panel. Deliberately the quietest text
   in the block: true, present on every page that asks, and not competing with
   the ask itself. */
.ad-fine { font-size: 10.5px; line-height: 1.55; color: rgba(255,255,255,.32); margin-top: 16px; }