/* ── Fonts (self-hosted, Latin subset; all SIL Open Font License) ── */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/source-serif-4-400-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/source-serif-4-italic-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/libre-baskerville-400-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
}

/* ── Variables ── */
:root {
  --page-bg: #eae8e0;
  --bg: #fbfaf6;
  --tint: #f2efe6;
  --fg: #1c1c1c;
  --dim: #5f5d57;
  --muted: #8a877f;
  --border: #ddd9cc;
  --accent: #3d6b3a;        /* Repair Café green; swap back to #a9812f for the old gold */
  --accent-fg: #fbfaf6;
  --shadow: rgba(30, 25, 10, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #0a0a09;
    --bg: #161512;
    --tint: #1e1d19;
    --fg: #dcdbd3;
    --dim: #9a988e;
    --muted: #6f6d66;
    --border: #2c2b26;
    --accent: #94bd86;      /* old gold: #d9b872 */
    --accent-fg: #12160f;
    --shadow: rgba(0, 0, 0, 0.45);
  }
}

/* ── Reset ── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--page-bg);
  min-height: 100%;
}

/* ── Base ── */
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Source Serif 4', serif;
  font-size: 17.5px;
  line-height: 1.65;
  max-width: 820px;
  margin: 40px auto 24px;
  padding: 44px 48px 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 1px 3px var(--shadow);
}

@media (max-width: 860px) {
  body { margin: 0 auto; padding: 32px 22px 24px; border-radius: 0; border-width: 0 0 1px; }
}

p { margin-bottom: 18px; }

.nowrap { white-space: nowrap; }

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}
a:hover { text-decoration-color: var(--accent); }

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Header ── */
header { margin-bottom: 8px; }

.intro-top {
  --name-size: 40px;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 32px;
}

/* Photo spans from the top of the M badge to the baseline of the tidbit line.
   The badge rises 0.2 × name size above the name's line box (see .name-m), and its
   1.3 × name size height ends 0.2 × name size below the name's baseline; the name's
   line box ends at the same point (Libre Baskerville: ascent 0.97, descent 0.27, line-height 1.1).
   Below that: the tidbit's 8px top margin + its baseline 20.6px into its line
   (Source Serif 4 at 17.5px: ascent 1.036, descent 0.335, line-height 1.65). */
.avatar {
  width: calc(1.3 * var(--name-size) + 28.6px);
  height: calc(1.3 * var(--name-size) + 28.6px);
  margin-top: calc(-0.2 * var(--name-size));
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.name {
  font-family: 'Libre Baskerville', serif;
  font-size: var(--name-size);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* The logo badge stands in for the "M" visually; the real "M" stays in the DOM (visually hidden) so the name reads "Max Pereira" to search engines, screen readers and copy/paste */
.name-m {
  height: 1.3em;
  width: 1.3em;
  margin: -0.3em 0.1em -0.3em 0; /* negative block margins keep the badge from growing the line box */
  /* vertical-align positions the bottom *margin* edge (0.3em above the badge's bottom edge). The badge's M ends
     0.2em above that bottom edge, so a +0.1em offset lands the M's feet exactly on the baseline of "ax". */
  vertical-align: 0.1em;
}

/* zero-size inline text (not absolutely positioned) so copy/paste and innerText don't gain a line break */
.visually-hidden {
  font-size: 0;
  line-height: 0;
}

.tidbit {
  margin: 8px 0 0;
  font-style: italic;
  color: var(--dim);
}

.lede {
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  margin-bottom: 0;
}
.lede a { text-decoration-color: var(--border); }
.lede a:hover { text-decoration-color: currentColor; }

.elsewhere {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin-top: 22px;
  list-style: none;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
}
.elsewhere a { color: var(--dim); }
.elsewhere a:hover { color: var(--fg); }

@media (max-width: 600px) {
  .intro-top { --name-size: 30px; gap: 16px; margin-bottom: 26px; }
  .lede { font-size: 20px; }
}

/* ── Sections ── */
section { margin-top: 48px; }

.section-title {
  font-family: 'Libre Baskerville', serif;
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.label {
  font-size: 14px;
  color: var(--dim);
  margin-bottom: 4px;
}

/* ── Repair Café ── */
/* Text and photo in two equal-height columns: the button sits at the bottom of the text column,
   and the photo (at least square) stretches to the same height, so their bottom edges line up */
.rc-intro {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 24px;
  margin-bottom: 18px;
}

.rc-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Slightly smaller text beside the photo so the paragraphs don't end on a lone word */
.rc-text p { font-size: 16.5px; }
.rc-text p:last-of-type { margin-bottom: 24px; }
.rc-text .btn-primary { margin-top: auto; }

.rc-photo {
  position: relative;
  min-height: 200px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 4px;
}

/* "cover" trims the sides; the scale (anchored bottom right) zooms in a bit more. Absolutely positioned so
   the image never sets the row height itself */
.rc-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 85% bottom;
  transform: scale(1.15);
  transform-origin: 85% bottom;
}

.event {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 22px;
  align-items: center;
  margin: 8px 0 32px;
  padding: 20px 22px;
  background: var(--tint);
  border-radius: 3px;
}

.event-day {
  grid-row: span 2;
  padding-right: 22px;
  border-right: 1px solid var(--border);
  text-align: center;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 13px;
  line-height: 1.2;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.event-day b {
  display: block;
  margin: 2px 0;
  font-family: 'Source Serif 4', serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: var(--fg);
}

.event-when { font-weight: 600; font-size: 20px; line-height: 1.35; }
.event-label {
  display: block;
  margin-bottom: 2px;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}
.event-where { margin-top: 4px; color: var(--dim); line-height: 1.45; }
.event-where a { color: inherit; text-decoration-color: var(--border); }
.event-where a:hover { text-decoration-color: currentColor; }

@media (max-width: 600px) {
  .event { padding: 16px; gap: 0 16px; }
  .event-day { padding-right: 16px; }
}

/* Stats: one row of figures split by thin rules, no boxes */
.impact-stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  margin: 6px 0 28px;
}

.impact-stats > div {
  display: flex;
  flex-direction: column;
  padding: 0 28px;
  border-left: 1px solid var(--border);
}
.impact-stats > div:first-child { padding-left: 0; border-left: 0; }

.impact-stats dd {
  font-family: 'Libre Baskerville', serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: lining-nums;
}

.impact-stats dd small { font-size: 0.6em; font-weight: 400; }

.impact-stats dt {
  order: 2;
  font-size: 14px;
  color: var(--dim);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px 10px 14px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 80%, var(--fg)); }
.btn-primary img { width: 16px; height: 16px; border-radius: 2px; background: #fbfaf6; padding: 1px; }

/* Narrow screens: photo goes above the text at full width instead of a tall strip beside it */
@media (max-width: 600px) {
  .rc-intro { grid-template-columns: 1fr; gap: 20px; }
  .rc-photo { order: -1; min-height: 0; aspect-ratio: 16 / 10; margin-top: 0; }
  .rc-photo img { object-position: 70% 60%; transform: none; }
}

@media (max-width: 520px) {
  .impact-stats { grid-template-columns: repeat(2, auto); gap: 14px 0; }
  .impact-stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* ── Causes ── */
.cause-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.cause-list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 20px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.cause-icon {
  font-size: 26px;
  line-height: 1;
  margin-bottom: 10px;
}

.cause-title {
  font-family: 'Libre Baskerville', serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
}

.cause-lead {
  margin-bottom: 6px;
  font-weight: 600;
  line-height: 1.45;
}

.cause-desc {
  margin-bottom: 10px;
  color: var(--dim);
  font-size: 15.5px;
  line-height: 1.55;
}

.cause-link { margin-top: auto; font-size: 15px; }

@media (max-width: 600px) {
  .cause-list { grid-template-columns: 1fr; gap: 14px; }
  .cause-list li { padding: 16px 18px 18px; }
}

/* ── Error pages (403 / 404) ── */
.error-title {
  font-family: 'Libre Baskerville', serif;
  font-size: 26px;
  line-height: 1.3;
  margin: 8px 0 14px;
}

/* ── Footer ── */
footer {
  margin-top: 56px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--dim);
  text-align: center;
  letter-spacing: 0.08em;
}