/* ==========================================================================
   Bridge Australia Foundation
   --------------------------------------------------------------------------
   The design follows the Foundation's own logo: a hand holding four suits.
   Four suits, four seats at a bridge table, four funding areas. The deal
   diagram on the home page is the one loud element; everything else stays
   quiet so it can carry the page.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Ground: the dark of a card room, deep enough that the brand cyan glows. */
  --ink:        #0b1f2a;
  --ink-soft:   #13303f;
  --ink-line:   #1d4355;

  /* Card stock. Warm, so the portraits and the logo's black sit naturally. */
  --card:       #faf7f0;
  --card-sunk:  #f1ece1;
  --card-line:  #ddd5c6;

  /* Brand. Taken from the logo and left alone. */
  --cyan:       #24aae1;
  --cyan-deep:  #0e7fae;
  --cyan-wash:  #cbe4f6;

  /* The two colours a deck of cards is printed in. */
  --suit-red:   #c62434;
  --suit-black: #10242e;

  --brass:      #c9a227;

  /* Baize: the green of a card table. Used for the centre of the deal, so the
     four hands read as sitting around an actual table. */
  --baize:      #0e5a41;
  --baize-edge: #1b7a5b;
  --baize-text: #e8f4ed;

  --text:          #10242e;
  --text-muted:    #4b6270;
  --text-on-ink:   #eef6fa;
  --text-on-ink-muted: #9db8c6;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale: 1.25 minor third, fluid between 380px and 1280px. */
  --step--1: clamp(0.84rem, 0.80rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.24vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.45vw, 1.55rem);
  --step-2:  clamp(1.55rem, 1.36rem + 0.84vw, 2.13rem);
  --step-3:  clamp(1.94rem, 1.59rem + 1.53vw, 2.93rem);
  --step-4:  clamp(2.43rem, 1.82rem + 2.66vw, 4.03rem);

  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-s:   0.75rem;
  --space-m:   1.25rem;
  --space-l:   2rem;
  --space-xl:  3.25rem;
  --space-2xl: 5rem;
  --space-3xl: 7.5rem;

  --measure: 62ch;
  --shell: 72rem;
  --radius: 4px;
  --radius-card: 10px;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* --- Reset -------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--card);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgb(36 170 225 / 0.2);
  overflow-x: hidden;
}

img,
svg { display: block; max-width: 100%; }

img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
  font-variation-settings: "SOFT" 12, "WONK" 0;
}

p, li { text-wrap: pretty; }

p { margin: 0 0 var(--space-m); }

a { color: var(--cyan-deep); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

a:hover { color: var(--suit-red); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Layout helpers ----------------------------------------------------- */

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

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

/* Blocks inside a single-column band share the prose measure so the left edge
   lines up with the page heading above them. */
.band .block-heading,
.band .callout,
.band .checklist,
.band .quote,
.band .figure,
.band .button-row { max-width: var(--measure); }

.prose > :last-child { margin-bottom: 0; }

.skip-link {
  position: absolute;
  left: var(--space-m);
  top: -4rem;
  z-index: 100;
  padding: var(--space-xs) var(--space-m);
  background: var(--cyan);
  color: var(--ink);
  font-weight: 700;
  border-radius: var(--radius);
  transition: top 160ms var(--ease);
}

.skip-link:focus { top: var(--space-m); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-deep);
  margin: 0 0 var(--space-s);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.eyebrow::before {
  content: "";
  inline-size: 1.75rem;
  block-size: 2px;
  background: currentColor;
  flex: none;
}

.on-ink .eyebrow { color: var(--cyan); }

/* --- Suits -------------------------------------------------------------- */

.suit { font-style: normal; line-height: 1; }
.suit--heart,
.suit--diamond { color: var(--suit-red); }
.suit--spade,
.suit--club { color: var(--suit-black); }

.on-ink .suit--spade,
.on-ink .suit--club { color: var(--text-on-ink); }
.on-ink .suit--heart,
.on-ink .suit--diamond { color: #ff6b76; }

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.78rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease),
              border-color 180ms var(--ease), transform 180ms var(--ease);
}

.btn:hover { transform: translateY(-2px); }

.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--ink);
}

.btn--primary:hover {
  background: var(--cyan-deep);
  border-color: var(--cyan-deep);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  border-color: var(--ink-line);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: var(--cyan-deep);
  color: var(--cyan-deep);
  background: var(--cyan-wash);
}

.on-ink .btn--ghost {
  border-color: #2f5d72;
  color: var(--text-on-ink);
}

.on-ink .btn--ghost:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgb(36 170 225 / 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
}

/* --- Header ------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ink);
  border-bottom: 1px solid var(--ink-line);
  padding-top: env(safe-area-inset-top);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: 4.5rem;
}

.masthead__brand { display: inline-flex; align-items: center; flex: none; }

.masthead__brand img { width: 168px; height: auto; }

@media (max-width: 30rem) {
  .masthead__brand img { width: 118px; }
  .masthead__inner { min-height: 3.75rem; }
  .nav { inset-block-start: 3.75rem; }
}

.masthead__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  color: var(--text-on-ink);
  cursor: pointer;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: inline-block;
  padding: 0.5rem 0.78rem;
  border-radius: var(--radius);
  color: var(--text-on-ink);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}

.nav__link:hover { background: var(--ink-soft); color: var(--cyan); }

.nav__link[aria-current="page"] {
  color: var(--cyan);
  box-shadow: inset 0 -2px 0 var(--cyan);
}

.nav__link--cta {
  margin-left: var(--space-xs);
  background: var(--cyan);
  color: var(--ink);
  padding-inline: 1.1rem;
  border-radius: 999px;
}

.nav__link--cta:hover { background: #fff; color: var(--ink); }

@media (max-width: 62rem) {
  .masthead__toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: 4.5rem 0 0;
    background: var(--ink);
    padding: var(--space-m) 1.25rem calc(var(--space-xl) + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms var(--ease), transform 200ms var(--ease),
                visibility 200ms;
  }

  .nav[data-open="true"] { transform: translateY(0); opacity: 1; visibility: visible; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  .nav__link {
    padding: 0.9rem 0.25rem;
    border-bottom: 1px solid var(--ink-line);
    border-radius: 0;
    font-size: var(--step-0);
  }

  .nav__link--cta {
    margin: var(--space-m) 0 0;
    text-align: center;
    border-bottom: 0;
  }
}

/* --- Hero --------------------------------------------------------------- */

/* The top padding is small on purpose. The masthead and the hero share the
   same ink background, so the registered name below reads as part of the
   logo's block rather than as a line floating in the dark — which is what Kim
   asked for on 21 October 2026. The generous spacing is kept at the bottom. */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--text-on-ink);
  padding-block: var(--space-s) var(--space-2xl);
  overflow: hidden;
}

/* A felt-like grain, not a gradient — it reads as a table, not a SaaS header. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60rem 40rem at 72% -10%, rgb(36 170 225 / 0.16), transparent 70%),
    radial-gradient(40rem 30rem at 0% 110%, rgb(201 162 39 / 0.08), transparent 70%);
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 1; }

/* The registered name, sitting above the announcement. Sized and weighted well
   below the <h1> on purpose — it identifies the organisation, it is not the
   page's heading, and a <p> styled like one trips Axe's p-as-heading rule. */
.hero__orgname {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--text-on-ink-muted);
  margin: 0 0 var(--space-m);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--ink-line);
}

.hero__lede {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: end;
  margin-bottom: var(--space-2xl);
}

.hero__aside {
  padding-left: var(--space-l);
  border-left: 1px solid var(--ink-line);
  color: var(--text-on-ink-muted);
  font-size: var(--step-0);
}

.hero__aside p:last-child { margin-bottom: 0; }

@media (max-width: 62rem) {
.hero__lede {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l);
    align-items: start;
    margin-bottom: var(--space-xl);
  }
  .hero__aside { padding-left: 0; border-left: 0; border-top: 1px solid var(--ink-line); padding-top: var(--space-m); }
}

.hero__title {
  font-size: var(--step-4);
  max-width: 16ch;
  margin-bottom: var(--space-m);
}

.hero__standfirst {
  font-size: var(--step-1);
  color: var(--text-on-ink-muted);
  max-width: 46ch;
  line-height: 1.45;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

/* --- Announcement ------------------------------------------------------- */

.announce {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-m);
  margin-bottom: var(--space-xl);
  padding: var(--space-m) var(--space-l);
  background: rgb(36 170 225 / 0.1);
  border: 1px solid #27576d;
  border-radius: var(--radius-card);
}

.announce__date {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--cyan);
  border-right: 1px solid #27576d;
  padding-right: var(--space-m);
  line-height: 1.3;
}

.announce__day { display: block; font-size: var(--step-2); font-weight: 600; }

/* A real <h2> (see the template comment); these only set its size, since the
   global heading rules already supply the face, weight and tracking. */
.announce__title {
  font-size: var(--step-1);
  margin: 0 0 var(--space-2xs);
}

.announce__body { margin: 0; color: var(--text-on-ink-muted); font-size: var(--step--1); }

@media (max-width: 48rem) {
  .announce { grid-template-columns: 1fr; text-align: left; }
  .announce__date {
    border-right: 0;
    border-bottom: 1px solid #27576d;
    padding: 0 0 var(--space-s);
    text-align: left;
  }
}

/* --- The deal: the signature element ------------------------------------ */
/*
   Four funding areas laid out as the four seats of a bridge table. The grid is
   the real thing — North above, South below, West and East either side — and
   it collapses to a single column on a phone where that geometry stops being
   readable.
*/

.deal {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    ".    north ."
    "west table east"
    ".    south .";
  align-items: stretch;
}

.deal__seat--north { grid-area: north; }
.deal__seat--west  { grid-area: west; }
.deal__seat--east  { grid-area: east; }
.deal__seat--south { grid-area: south; }

.deal__table {
  grid-area: table;
  display: grid;
  place-content: center;
  place-self: center;
  margin: 0;
  text-align: center;
  inline-size: 11rem;
  block-size: 11rem;
  /* Square, not a circle: a bridge table is square, and the four cards sitting
     around a green square read as the table far more readily than an outline
     did. The inset hairline is the stitched edge of the baize. */
  border-radius: var(--radius-card);
  background:
    radial-gradient(120% 120% at 50% 0%, rgb(255 255 255 / 0.07), transparent 60%),
    var(--baize);
  box-shadow:
    inset 0 0 0 1px var(--baize-edge),
    inset 0 0 0 7px rgb(0 0 0 / 0.10),
    0 14px 28px -16px rgb(0 0 0 / 0.75);
  color: var(--baize-text);
}

.deal__table-label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* A seat is a card face, so the pips are printed in the deck's own two colours
   regardless of the dark table it sits on. */
.seat .suit--spade,
.seat .suit--club { color: var(--suit-black); }
.seat .suit--heart,
.seat .suit--diamond { color: var(--suit-red); }

/* A card laid on the table: card stock, square-ish, lifted off the dark. */
.seat {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m) var(--space-m) var(--space-l);
  background: var(--card);
  color: var(--text);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 24px -14px rgb(0 0 0 / 0.65);
}

.seat .seat__name,
.seat .seat__body { color: inherit; }

.seat__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
}

.seat__compass {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.seat__suit { font-size: var(--step-2); }

.seat__name { font-size: var(--step-1); }

.seat__body { margin: 0; font-size: var(--step--1); color: var(--text-muted); }

.deal__footnotes {
  margin: var(--space-l) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
  color: var(--text-on-ink-muted);
  max-width: var(--measure);
}

.deal__footnotes li { padding-left: 1.1rem; text-indent: -1.1rem; }
.deal__footnotes li::before { content: "* "; color: var(--cyan); }

@media (max-width: 54rem) {
  .deal {
    grid-template-columns: 1fr;
    grid-template-areas: "north" "east" "south" "west";
  }
  .deal__table { display: none; }
}

/* Deal the hands in on load — one orchestrated moment, nothing else moves.
   Gated on .deal-animate, which head.js adds before first paint and only when
   the page is actually visible. The cards must never depend on an animation
   running in order to be seen: a background tab freezes CSS animations at time
   zero, so hiding them by default left them invisible until the tab was
   focused. Absent the class, they are simply there. */
@media (prefers-reduced-motion: no-preference) {
  .deal-animate .deal__seat {
    opacity: 0;
    transform: translateY(14px);
    animation: deal-in 520ms var(--ease) forwards;
    animation-delay: var(--deal-delay, 0ms);
  }
}

@keyframes deal-in {
  to { opacity: 1; transform: translateY(0); }
}

/* --- Sections ----------------------------------------------------------- */

.band { padding-block: var(--space-2xl); }

.band--sunk { background: var(--card-sunk); }

.band--ink {
  background: var(--ink);
  color: var(--text-on-ink);
}

.band--ink h2,
.band--ink h3 { color: #fff; }

.band__title { font-size: var(--step-3); margin-bottom: var(--space-m); }

.band__intro {
  max-width: var(--measure);
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: 1.5;
}

.band--ink .band__intro { color: var(--text-on-ink-muted); }

.band__split {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 54rem) {
  .band__split { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
}

/* --- Page header (inner pages) ------------------------------------------ */

.page-head {
  background: var(--ink);
  color: var(--text-on-ink);
  padding-block: var(--space-xl) var(--space-2xl);
}

.page-head__title { font-size: var(--step-3); max-width: 20ch; }

.page-head__standfirst {
  max-width: 54ch;
  margin-top: var(--space-m);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-on-ink-muted);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  margin: 0 0 var(--space-m);
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-on-ink-muted);
}

.breadcrumbs a { color: var(--cyan); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-xs); opacity: 0.5; }

/* --- Blocks ------------------------------------------------------------- */

.block + .block { margin-top: var(--space-l); }

.block-heading { font-size: var(--step-2); margin-top: var(--space-xl); }

.block-heading:first-child { margin-top: 0; }

.block-heading--h3 { font-size: var(--step-1); }

.callout {
  padding: var(--space-l);
  background: var(--cyan-wash);
  border-left: 3px solid var(--cyan);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

.callout__title { font-size: var(--step-1); margin-bottom: var(--space-xs); }

.callout > :last-child { margin-bottom: 0; }

/* Account numbers are transcribed into a banking app, so they are set in
   tabular mono where every digit holds its own column. */
.callout code,
.prose code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.05em;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: rgb(255 255 255 / 0.65);
  border: 1px solid var(--cyan);
  border-radius: 3px;
  padding: 0.08em 0.4em;
  white-space: nowrap;
  user-select: all;
}

.checklist { margin: 0; padding: 0; list-style: none; }

.checklist li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: var(--space-s);
}

.checklist li::before {
  content: "\2666";              /* a diamond pip, the one list marker bridge owns */
  position: absolute;
  left: 0;
  top: -0.08em;
  color: var(--suit-red);
  font-size: 1.05em;
}

.quote {
  margin: 0;
  padding-left: var(--space-l);
  border-left: 3px solid var(--brass);
}

.quote p {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.3;
}

.quote figcaption {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
}

.figure { margin: 0; }

.figure img { border-radius: var(--radius-card); width: 100%; }

.figure figcaption {
  margin-top: var(--space-xs);
  font-size: var(--step--1);
  color: var(--text-muted);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

/* --- Trustees ----------------------------------------------------------- */

.trustees { display: grid; gap: var(--space-xl); }

.trustee {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: var(--space-l);
  align-items: start;
}

.trustee__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: var(--card-sunk);
}

.trustee__name { font-size: var(--step-2); }

.trustee__role {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan-deep);
  margin-bottom: var(--space-s);
}

.trustee__bio { max-width: var(--measure); }
.trustee__bio > :last-child { margin-bottom: 0; }

@media (max-width: 48rem) {
  .trustee { grid-template-columns: minmax(0, 1fr); gap: var(--space-m); }
  .trustee__photo { max-width: 13rem; }
}

/* --- Projects ----------------------------------------------------------- */

.project-list { display: grid; gap: var(--space-l); }

.project {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--space-l);
  padding-bottom: var(--space-l);
  border-bottom: 1px solid var(--card-line);
  align-items: start;
}

.project:last-child { border-bottom: 0; padding-bottom: 0; }

.project__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: var(--card-sunk);
}

.project__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.project__amount { color: var(--suit-red); font-weight: 600; }

.project__title { font-size: var(--step-2); margin-bottom: var(--space-xs); }

.project__title a { color: inherit; text-decoration: none; }
.project__title a:hover { color: var(--cyan-deep); text-decoration: underline; }

.project__summary { color: var(--text-muted); margin: 0; }

@media (max-width: 48rem) {
  .project { grid-template-columns: minmax(0, 1fr); }
}

/* --- Fundraisers ledger ------------------------------------------------- */
/*
   Monospace with tabular figures, because a fundraising ledger is a column of
   money and the amounts have to line up to be read against each other.
*/

.ledger { width: 100%; border-collapse: collapse; }

.ledger caption {
  text-align: left;
  color: var(--text-muted);
  font-size: var(--step--1);
  padding-bottom: var(--space-s);
}

.ledger th,
.ledger td {
  padding: var(--space-s) var(--space-xs);
  border-bottom: 1px solid var(--card-line);
  text-align: left;
  vertical-align: baseline;
}

.ledger thead th {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom-color: var(--text-muted);
}

.ledger__amount,
.ledger__date {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ledger__amount { text-align: right; font-weight: 600; }

.ledger tfoot td {
  font-family: var(--font-mono);
  font-weight: 700;
  border-bottom: 0;
  border-top: 2px solid var(--text);
  padding-top: var(--space-s);
}

.ledger__event { font-weight: 600; }

@media (max-width: 40rem) {
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ledger tr { display: grid; gap: var(--space-2xs); padding: var(--space-s) 0; border-bottom: 1px solid var(--card-line); }
  .ledger td { border-bottom: 0; padding: 0; }
  .ledger__amount { text-align: left; }
  .ledger tfoot tr { border-bottom: 0; }
}

/* --- Forms -------------------------------------------------------------- */

.form { display: grid; gap: var(--space-m); max-width: 46rem; }

.field { display: grid; gap: var(--space-2xs); }

.field > label {
  font-weight: 600;
  font-size: var(--step--1);
}

.field__help { font-size: var(--step--1); color: var(--text-muted); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="number"],
.field input[type="date"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: var(--step-0);
  color: var(--text);
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}

.field select { appearance: none; background-image: none; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--text-muted); }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--cyan); }

.field textarea { min-height: 7rem; resize: vertical; }

.field--checkbox {
  display: block;
}

.field--checkbox label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  cursor: pointer;
  font-weight: 400;
  font-size: var(--step-0);
}

.field--checkbox input { margin-top: 0.3em; inline-size: 1.1rem; block-size: 1.1rem; flex: none; }

.field--error input,
.field--error select,
.field--error textarea { border-color: var(--suit-red); }

.field__error {
  color: var(--suit-red);
  font-size: var(--step--1);
  font-weight: 600;
}

.form__status { font-size: var(--step--1); }

/* --- Footer ------------------------------------------------------------- */

.footer {
  background: var(--ink);
  color: var(--text-on-ink-muted);
  padding-block: var(--space-2xl) var(--space-l);
  padding-bottom: calc(var(--space-l) + env(safe-area-inset-bottom));
  font-size: var(--step--1);
}

.footer__grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--ink-line);
}

.footer__logo { width: 180px; height: auto; margin-bottom: var(--space-m); }

.footer h2 {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: var(--space-s);
}

.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }

.footer a { color: var(--text-on-ink); text-decoration: none; }
.footer a:hover { color: var(--cyan); text-decoration: underline; }

.footer address { font-style: normal; line-height: 1.7; }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  padding-top: var(--space-m);
}

.footer__suits { letter-spacing: 0.3em; font-size: var(--step-0); }

@media (max-width: 54rem) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
}

/* --- Utility ------------------------------------------------------------ */

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

.empty-state {
  padding: var(--space-l);
  border: 1px dashed var(--card-line);
  border-radius: var(--radius-card);
  color: var(--text-muted);
  text-align: center;
}

/* The brand mark is printed on a card, so it is shown on one. */
.masthead__brand img,
.footer__logo {
  background: #fff;
  border-radius: 6px;
  padding: 6px 10px;
}

/* --- Recent projects reel ----------------------------------------------- */

/* A strip of recent project photographs that drifts sideways.
   Two rules it must keep:

   - The pictures are visible whether or not the animation runs. The four
     funding cards were once hidden behind an animation and Chrome freezes
     animations in a background tab, so anyone opening the site in one saw an
     empty section. Motion here only moves what is already drawn.
   - With motion turned off the strip becomes an ordinary scrollable row, so
     the items past the fold stay reachable rather than being clipped away by
     the viewport's overflow. */

.reel { padding-block: var(--space-xl); background: var(--card-sunk); }

.reel .eyebrow { margin-bottom: var(--space-m); }

.reel__viewport { overflow: hidden; }

.reel__track {
  display: flex;
  gap: var(--space-m);
  margin: 0;
  padding: 0 var(--space-m);
  list-style: none;
  width: max-content;
}

.reel__item { flex: 0 0 auto; width: min(20rem, 72vw); }

.reel__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.reel__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: var(--card);
}

.reel__caption {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--step--1);
  color: var(--text-muted);
}

.reel__link:hover .reel__caption,
.reel__link:focus-visible .reel__caption { color: var(--cyan-deep); }

@media (prefers-reduced-motion: no-preference) {
  .reel__track { animation: reel-drift 48s linear infinite; }

  /* Stop for anyone reading a caption or tabbing through the links. */
  .reel__viewport:hover .reel__track,
  .reel__track:focus-within { animation-play-state: paused; }
}

/* Half of the track is the duplicate set, so -50% lands back at the start. */
@keyframes reel-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .reel__viewport { overflow-x: auto; }
}