/* The public site: the homepage sections and the program, community, about, privacy and events pages.
 * Reads semantic tokens only (tokens.css), so both themes follow. Phone first: one column below 40rem,
 * grids from 60rem; every tap target is at least 2.75rem (44px) tall. */

/* ---- Shared pieces ------------------------------------------------------- */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}

.text-link,
.card-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.text-link:hover,
.card-link:hover {
  text-decoration: underline;
}

.text-link::after,
.card-link::after {
  content: "→";
  content: "→" / "";
  margin-inline-start: var(--space-2);
  transition: transform var(--duration-hover) var(--ease-out);
}

.text-link:hover::after,
.card-link:hover::after {
  transform: translateX(3px);
}

/* A section's head (Direction B): the title at headline size, an optional lede under it. */
.section-head {
  display: grid;
  gap: var(--space-3);
  max-width: 52rem;
  margin-bottom: var(--space-7);
}

.section-head h2 {
  font-size: var(--text-headline);
  line-height: var(--leading-heading);
}

.section-head p {
  color: var(--color-muted);
  font-size: var(--text-lg);
}

.section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  max-width: none;
}

/* ---- Photo slots (src/site/pages/photo.ts) --------------------------------- */

.photo {
  position: relative;
  margin: 0;
}

.photo img,
.photo-placeholder {
  width: 100%;
  object-fit: cover;
}

.photo-landscape img,
.photo-landscape.photo-placeholder {
  aspect-ratio: 4 / 3;
}

.photo-portrait img,
.photo-portrait.photo-placeholder {
  aspect-ratio: 4 / 5;
}

/* Until a photo arrives: a quiet panel of the band colours with the brand symbol, or a person's initials. */
.photo-placeholder {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 10%, color-mix(in srgb, var(--color-on-band) 10%, transparent), transparent 70%),
    var(--color-band-2);
}

/* Mixed against the panel, not transparent: the capsule outline overlaps the people, and translucent fills would
   double up where they meet. */
.photo-placeholder .logo {
  --logo-1: color-mix(in srgb, var(--color-on-band) 35%, var(--color-band-2));
  --logo-2: color-mix(in srgb, var(--color-band-accent) 60%, var(--color-band-2));
  width: 34%;
  height: auto;
}

.photo-initials {
  color: color-mix(in srgb, var(--color-on-band) 55%, transparent);
  font-family: var(--font-display);
  font-size: var(--text-headline);
  letter-spacing: 0.04em;
}

.photo figcaption {
  margin-top: var(--space-3);
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-mark-2);
  color: var(--color-muted);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
}

/* ---- Hero: the dark band, the photo bleeding to the right edge ------------- */

.home-hero {
  background: var(--color-band);
  color: var(--color-on-band);
  overflow: hidden;
}

.home-hero-inner {
  display: grid;
  max-width: 100rem;
  padding-inline: 0;
}

.home-hero-text {
  padding: var(--space-7) var(--space-gutter);
}

.home-hero .eyebrow {
  margin-bottom: 0;
  color: var(--color-band-accent);
}

.home-hero .eyebrow::before {
  background: var(--color-band-accent);
}

.home-hero h1 {
  max-width: 18ch;
  margin-top: var(--space-4);
  font-size: var(--text-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  overflow-wrap: break-word;
}

.home-hero-lede {
  max-width: 32rem;
  margin-top: var(--space-5);
  color: var(--color-on-band-muted);
  font-size: var(--text-md);
}

.home-hero-actions {
  margin-top: var(--space-6);
}

/* On the band the button is the highlight (its label in --color-on-band-accent) and the companion is ghost. */
.home-hero .button,
.home-closing .button {
  background: var(--color-band-accent);
  color: var(--color-on-band-accent);
}

.home-hero .button:hover {
  background: color-mix(in srgb, var(--color-band-accent) 80%, white);
  color: var(--color-on-band-accent);
}

.home-hero .text-link {
  min-height: 2.875rem;
  padding: 0 var(--space-5);
  border: 1.5px solid rgb(255 255 255 / 0.45);
  border-radius: var(--radius-md);
  color: var(--color-on-band);
}

.home-hero .text-link::after {
  content: none;
}

.home-hero .text-link:hover {
  border-color: var(--color-on-band);
  background: rgb(255 255 255 / 0.06);
  color: var(--color-on-band);
  text-decoration: none;
}

.home-hero :focus-visible,
.home-closing :focus-visible {
  outline-color: var(--color-band-accent);
}

.home-hero .photo {
  position: relative;
  min-width: 0;
}

.home-hero .photo img,
.home-hero .photo-placeholder {
  aspect-ratio: 4 / 3;
  min-height: 17.5rem;
}

.home-hero .photo-placeholder {
  height: 100%;
}

/* The caption sits on the picture, on a band-coloured plate with the highlight rule. */
.home-hero .photo figcaption {
  position: absolute;
  inset: auto var(--space-4) var(--space-4);
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--color-band-accent);
  background: color-mix(in srgb, var(--color-band-2) 82%, transparent);
  color: var(--color-on-band);
}

@media (max-width: 37.49rem) {
  .home-hero-actions .button,
  .home-hero-actions .text-link {
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 40rem) {
  .home-hero-lede {
    font-size: var(--text-lg);
  }
}

@media (min-width: 60rem) {
  .home-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  /* The text column lines up with the page's column; the photo runs on to the screen's right edge. */
  .home-hero-text {
    padding: var(--space-hero) var(--space-7) var(--space-hero)
      max(var(--space-gutter), calc((100vw - var(--page-max)) / 2 + var(--space-gutter)));
  }

  .home-hero .photo img,
  .home-hero .photo-placeholder {
    height: 100%;
    aspect-ratio: auto;
    min-height: 26rem;
  }

  .home-hero .photo figcaption {
    inset: auto var(--space-5) var(--space-5);
  }
}

/* ---- Inside the Collective: three equal panels under the hero --------------- */

.home-inside {
  padding-block: var(--space-7) var(--space-section);
}

.inside-head {
  display: grid;
  gap: var(--space-3);
  max-width: 40rem;
  margin-bottom: var(--space-6);
}

.inside-head h2 {
  font-size: var(--text-headline);
  line-height: var(--leading-heading);
}

.inside-head p {
  color: var(--color-muted);
  font-size: var(--text-lg);
}

.inside-list {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One treatment for all three: the same surface, rule and radius; the art area is clipped to the corners. */
.inside-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: var(--rule-width) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.inside-art {
  border-bottom: var(--rule-width) solid var(--color-rule);
  background: var(--color-tint);
  line-height: 0;
}

.inside-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The drawings take their colours from here, never from the markup (the CSP forbids inline styles). */
.ia-field {
  fill: var(--color-tint);
}

.ia-line {
  fill: none;
  stroke: var(--color-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.ia-mass {
  fill: var(--color-accent);
}

.ia-lit {
  fill: var(--color-mark-2);
}

.inside-body {
  display: grid;
  grid-template-rows: auto 1fr 1fr auto;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--space-5);
}

.inside-body h3 {
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
}

.inside-body p {
  color: var(--color-muted);
}

/* A quiet button: outlined in the accent, filling on hover. */
.button-quiet {
  margin-top: var(--space-2);
  border-color: var(--color-accent);
  background: none;
  color: var(--color-accent);
}

.button-quiet:hover {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

@media (min-width: 56rem) {
  .inside-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

/* ---- Facts strip: big numerals on the surface, ruled ----------------------- */

.home-facts {
  border-bottom: var(--rule-width) solid var(--color-rule);
  background: var(--color-surface);
}

.home-facts-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block: 0;
}

.fact {
  padding: var(--space-5) var(--space-4);
  border-top: var(--rule-width) solid var(--color-rule);
  border-left: var(--rule-width) solid var(--color-rule);
}

.fact:nth-child(odd) {
  padding-left: 0;
  border-left: 0;
}

.fact:nth-child(-n + 2) {
  border-top: 0;
}

.fact dt {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 2.4vw, 3.5rem);
  font-stretch: 88%;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.fact dd {
  max-width: 24ch;
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

@media (min-width: 60rem) {
  .home-facts-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .fact {
    padding: var(--space-6) var(--space-5);
    border-top: 0;
  }

  .fact:nth-child(odd) {
    padding-left: var(--space-5);
    border-left: var(--rule-width) solid var(--color-rule);
  }

  .fact:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

/* ---- Homepage sections --------------------------------------------------- */

.home-section {
  padding-top: var(--space-section);
}

/* Why: the lead statement beside the rest, which carries the accent rule. */
.home-why {
  display: grid;
  gap: var(--space-5) var(--space-8);
}

.home-why-lead {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-stretch: 92%;
  font-weight: var(--weight-medium);
  line-height: 1.3;
}

.home-why-rest {
  display: grid;
  gap: var(--space-4);
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-accent);
  color: var(--color-muted);
}

.home-why-signature {
  color: var(--color-ink);
  font-style: italic;
}

@media (min-width: 60rem) {
  .home-why {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  }

  .home-why-lead,
  .home-why-rest {
    grid-column: 2;
  }

  .home-why .section-label {
    grid-row: 1;
    align-self: start;
  }

  .home-why-rest {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-why-signature {
    grid-column: 1 / -1;
  }
}

/* What you get: a ruled index, numbered in the stylesheet. */
.offer-list,
.index-list,
.diff-list,
.contents-list,
.steps,
.founder-list,
.unit-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.index-list {
  counter-reset: index;
}

.index-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  align-items: baseline;
  padding-block: var(--space-5);
  border-top: var(--rule-width) solid var(--color-rule-strong);
  counter-increment: index;
}

.index-row::before {
  content: counter(index, decimal-leading-zero);
  grid-row: 1;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  font-variant-numeric: tabular-nums;
}

.index-row:last-child {
  border-bottom: var(--rule-width) solid var(--color-rule-strong);
}

.index-row h3 {
  font-size: var(--text-lg);
  line-height: var(--leading-heading);
}

.index-row p,
.index-link {
  grid-column: 2;
}

.index-row p {
  color: var(--color-muted);
}

.index-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.index-link::after {
  content: "→";
  content: "→" / "";
  margin-inline-start: var(--space-2);
}

.index-link:hover {
  text-decoration: underline;
}

@media (min-width: 60rem) {
  .index-row {
    grid-template-columns: 3rem minmax(0, 4fr) minmax(0, 5fr) minmax(0, 1.4fr);
    column-gap: var(--space-7);
  }

  .index-row h3 {
    grid-column: 2;
    grid-row: 1;
  }

  .index-row p {
    grid-column: 3;
    grid-row: 1;
  }

  .index-link {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    min-height: 0;
  }
}

/* Why we're different: on the dark band, two columns of ruled statements. */
.home-band {
  margin-top: var(--space-section);
  padding-block: var(--space-section);
  background: var(--color-band);
  color: var(--color-on-band);
}

.home-band .section-label {
  color: var(--color-band-accent);
}

.home-band .section-label::before {
  background: var(--color-band-accent);
}

.diff-list {
  display: grid;
  gap: 0 var(--space-8);
}

.diff-item {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-top: var(--rule-width) solid rgb(255 255 255 / 0.16);
}

.diff-number {
  color: var(--color-band-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  line-height: 1;
}

.diff-item h3 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

.diff-item p {
  color: var(--color-on-band-muted);
}

@media (min-width: 40rem) {
  .diff-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The program: a table of contents beside its title. */
.home-program {
  display: grid;
  gap: var(--space-7);
}

.home-program-side {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--space-4);
}

.home-program-side h2 {
  font-size: var(--text-headline);
  line-height: var(--leading-heading);
}

.home-program-side p {
  margin-bottom: var(--space-2);
  color: var(--color-muted);
}

.contents-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-4);
  align-items: baseline;
  padding-block: var(--space-4);
  border-bottom: var(--rule-width) solid var(--color-rule);
}

.contents-row:first-child {
  padding-top: 0;
}

.contents-week {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.contents-theme {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-align: end;
  text-transform: uppercase;
}

.contents-title {
  grid-column: 1 / -1;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-decoration: none;
}

.contents-title:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

@media (min-width: 60rem) {
  .home-program {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-8);
  }

  .home-program-side {
    position: sticky;
    top: var(--space-5);
  }

  .contents-row {
    grid-template-columns: 6rem 7rem minmax(0, 1fr);
  }

  .contents-theme {
    text-align: start;
  }

  .contents-title {
    grid-column: 3;
  }

}

/* Who it's for and how joining works, on the surface band. */
.home-who {
  margin-top: var(--space-section);
  padding-block: var(--space-section);
  border-block: var(--rule-width) solid var(--color-rule);
  background: var(--color-surface);
}

.home-who-inner {
  display: grid;
  gap: var(--space-7);
}

.home-who h2 {
  margin-bottom: var(--space-5);
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
}

.home-who-lead {
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: 1.4;
}

.home-who-for > p:last-child {
  color: var(--color-muted);
}

.steps {
  counter-reset: step;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: var(--space-4);
  padding-bottom: var(--space-5);
  counter-increment: step;
}

/* The steps are numbered in a ring, joined by a hairline. */
.step::before {
  content: counter(step);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1.5px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.6rem;
  bottom: 0.2rem;
  left: 1.2rem;
  width: var(--rule-width);
  background: var(--color-rule-strong);
}

.step h3 {
  padding-top: 0.45rem;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-stretch: 100%;
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
}

.step p {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

@media (min-width: 60rem) {
  .home-who-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
  }
}

/* The founders: a portrait slot beside each name. */
.founder-list {
  display: grid;
  gap: var(--space-7);
}

.founder {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-5);
  border: var(--rule-width) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.founder h3 {
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
}

.founder-text > p:last-child {
  margin-top: var(--space-3);
  color: var(--color-muted);
}

@media (min-width: 40rem) {
  .founder {
    grid-template-columns: 9rem minmax(0, 1fr);
  }
}

@media (min-width: 60rem) {
  .founder-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Closing: the accent band, one line and the buttons. The button inverts the band (the text colour on the
   accent), which reads in both themes. */
.home-closing {
  margin-top: var(--space-section);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.home-closing-inner {
  display: grid;
  justify-items: start;
  gap: var(--space-5);
  padding-block: var(--space-7);
}

.home-closing h2 {
  max-width: 30ch;
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
}

.home-closing .button {
  background: var(--color-on-accent);
  color: var(--color-accent);
}

.home-closing .button:hover {
  background: var(--color-on-accent);
  color: var(--color-accent-hover);
}

.home-closing :focus-visible {
  outline-color: var(--color-on-accent);
}

@media (min-width: 60rem) {
  .home-closing-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-6);
  }
}

/* ---- Program, community, about and privacy pages ------------------------ */

.pub-page {
  padding-block: var(--space-7) var(--space-section);
}

/* A page's head: the title large, its lede, and a hairline under the whole column. */
.pub-head {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  border-bottom: var(--rule-width) solid var(--color-rule-strong);
}

.pub-head h1 {
  max-width: 20ch;
  font-size: var(--text-display);
  line-height: var(--leading-tight);
}

.pub-head .lede {
  max-width: 40rem;
}

.pub-actions {
  margin-top: var(--space-2);
}

.pub-prose .pub-actions {
  margin-top: var(--space-7);
}

.pub-note {
  color: var(--color-muted);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

.pub-section {
  display: grid;
  gap: var(--space-3);
  max-width: 40rem;
  padding-top: var(--space-7);
}

.pub-section h2 {
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
}

.pub-section p,
.pub-section li {
  color: var(--color-muted);
}

/* The founders on /about take the page's width, as on the homepage. */
.pub-founders {
  max-width: none;
}

.pub-founders .founder-list {
  margin-top: var(--space-4);
}

.pub-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-inline-start: var(--space-5);
}

.pub-quote {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--color-accent);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.cookie-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.cookie {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-3);
  border-top: var(--rule-width) solid var(--color-rule);
}

.cookie code {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

.cookie-kept {
  color: var(--color-muted);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

/* The program page: a section per week (its label, title and question beside the list of units), each unit a
   contents line with an Open preview or Members tag. */
.week-section {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-bottom: var(--rule-width) solid var(--color-rule);
  scroll-margin-top: var(--space-5);
}

.week-number {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.week-section h2 {
  max-width: 28ch;
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
}

.week-section .week-question {
  max-width: 34rem;
  color: var(--color-muted);
  font-size: var(--text-md);
}

.unit-list {
  border-top: var(--rule-width) solid var(--color-rule);
}

.unit-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-3);
  border-bottom: var(--rule-width) solid var(--color-rule);
}

.unit-list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-block: var(--space-2);
  color: var(--color-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.unit-list a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.unit-tag {
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--color-tint);
  color: var(--color-muted);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.unit-tag-free {
  color: var(--color-accent);
}

@media (min-width: 60rem) {
  .week-section {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-3) var(--space-7);
    align-items: start;
  }

  .week-section > :not(.unit-list) {
    grid-column: 1;
  }

  .week-section > .unit-list {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
}

/* ---- Events: cards on the homepage and /events, and an event's own page ---- */

.event-grid {
  display: grid;
  gap: var(--space-5);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.pub-page .event-grid {
  margin-top: var(--space-6);
}

/* Every event card the same: a hairline frame on the surface, the image, the title in ink. */
.event-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  border: var(--rule-width) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.event-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-tint);
}

.event-card h2,
.event-card h3 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.event-card h2 a,
.event-card h3 a {
  display: inline-block;
  min-height: 2.75rem;
  color: var(--color-ink);
  text-decoration: none;
}

.event-card h2 a:hover,
.event-card h3 a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.event-meta {
  color: var(--color-muted);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

.event-detail {
  display: grid;
  gap: var(--space-4);
  max-width: 44rem;
  margin-bottom: var(--space-6);
}

.event-detail h1 {
  font-size: var(--text-display);
  line-height: var(--leading-heading);
}

.event-body {
  overflow-wrap: anywhere;
}

.event-closed {
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
}

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

@media (min-width: 60rem) {
  .event-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- Introductory meetups: a ruled list, one row per date, every row the same ---- */

.meetup-list {
  margin: var(--space-6) 0 var(--space-5);
  padding: 0;
  list-style: none;
  border-top: var(--rule-width) solid var(--color-rule);
}

.meetup {
  display: grid;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: var(--rule-width) solid var(--color-rule);
}

.meetup-date {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 6rem;
  padding: var(--space-3);
  background: var(--color-band);
  color: var(--color-on-band);
  font-family: var(--font-ui);
  text-align: center;
}

.meetup-day {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.meetup-month {
  font-size: var(--text-sm);
}

.meetup-main h2 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.meetup-action form {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 40rem) {
  .meetup {
    grid-template-columns: 6rem minmax(0, 1fr) auto;
    gap: var(--space-5);
  }
}

/* ---- News: a typographic list, every entry the same (date, title, body, topic, sources) ---- */

.news-list {
  margin-top: var(--space-2);
}

.news-entry {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-bottom: var(--rule-width) solid var(--color-rule);
}

.news-date {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.news-updated {
  color: var(--color-muted);
}

.news-title {
  max-width: 40rem;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
  overflow-wrap: anywhere;
}

.news-title a {
  color: var(--color-ink);
  text-decoration: none;
}

.news-title a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.news-body {
  display: grid;
  gap: var(--space-3);
  max-width: 40rem;
  overflow-wrap: anywhere;
}

.news-topic {
  color: var(--color-muted);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.news-sources-label {
  margin-top: var(--space-1);
  color: var(--color-muted);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.news-sources {
  display: grid;
  gap: var(--space-1);
  max-width: 40rem;
  padding-inline-start: var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.news-sources li::marker {
  color: var(--color-muted);
  font-family: var(--font-mono);
}

.news-source-meta {
  color: var(--color-muted);
}

.news-pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  font-family: var(--font-ui);
}

.news-page-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.news-page-link[rel="next"] {
  margin-left: auto;
}

/* An entry on its own page: the same parts, the title as the page's heading. */
.news-detail {
  display: grid;
  gap: var(--space-4);
  max-width: 44rem;
}

.news-detail h1 {
  font-size: var(--text-headline);
  line-height: var(--leading-heading);
  overflow-wrap: anywhere;
}

.news-detail .news-body {
  font-size: var(--text-lg);
}

.news-back {
  padding-top: var(--space-7);
}

/* From desktop widths the date and topic sit in a narrow rail beside the title, body and sources. */
@media (min-width: 60rem) {
  .news-entry {
    grid-template-columns: 11rem minmax(0, 44rem);
    grid-template-areas:
      "date title"
      "topic body"
      ". label"
      ". sources";
    gap: var(--space-3) var(--space-7);
    align-items: start;
  }

  .news-entry .news-date {
    grid-area: date;
    padding-top: 0.45em;
  }

  /* In the narrow rail the edit date takes its own line instead of wrapping mid-date. */
  .news-entry .news-sep {
    display: none;
  }

  .news-entry .news-updated {
    display: block;
  }

  .news-entry .news-title {
    grid-area: title;
  }

  .news-entry .news-body {
    grid-area: body;
  }

  .news-entry .news-topic {
    grid-area: topic;
    padding-top: 0.3em;
  }

  .news-entry .news-sources-label {
    grid-area: label;
  }

  .news-entry .news-sources {
    grid-area: sources;
  }
}

/* ---- Entrance motion (CSS only; base.css switches it off for reduced motion) */

.home-hero-text,
.home-hero .photo {
  animation: rise var(--duration-enter) var(--ease-out) both;
}

.home-hero .photo {
  animation-delay: 160ms;
}

/* ---- Print --------------------------------------------------------------- */

@media print {
  .photo-placeholder,
  .home-closing,
  .text-link::after,
  .card-link::after,
  .index-link::after {
    display: none;
  }

  .home-hero,
  .home-band,
  .home-closing,
  .home-who,
  .home-facts {
    background: none;
    color: var(--color-ink);
  }
}