/* One typeface (system UI), near-monochrome, underlined links. No cards, chips or animation. Light only: João found dark too dark. */
:root {
  --bg: #fff;
  --fg: #111;
  --muted: #5c5c5c;
  --hair: #e6e6e6;
  color-scheme: light;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--muted); }
a:hover { text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
img { max-width: 100%; }

.wrap {
  max-width: 720px; margin: 0 auto;
  padding: 0 max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px));
}

h1 { font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; margin: 0 0 20px; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 20px; }
h3 { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
p { margin: 0 0 14px; }

.intro { display: flex; gap: 40px; align-items: flex-start; padding: 96px 0 72px; }
.intro > div { flex: 1; min-width: 0; }
.intro p { font-size: 20px; line-height: 1.55; }
.links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 24px; font-size: 17px !important; }

section { padding: 48px 0; border-top: 1px solid var(--hair); }
.context { color: var(--muted); }
.rows { list-style: none; margin: 0 0 14px; padding: 0; }
.rows li { padding: 16px 0; }
.rows li p { margin: 0; color: var(--muted); }
.rows.dated li { display: grid; grid-template-columns: 96px 1fr; gap: 20px; }
.when { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; padding-top: 1px; }
@media (max-width: 560px) { .rows.dated li { grid-template-columns: 1fr; gap: 2px; } }

footer { border-top: 1px solid var(--hair); padding: 40px 0 64px; color: var(--muted); }
footer p:first-child { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--fg); }

/* Media slots: each <figure class="shot"> removes itself if its image is missing. */
.shot { margin: 0; overflow: hidden; border-radius: 6px; background: var(--hair); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rows .shot { aspect-ratio: 16 / 10; margin-bottom: 14px; }
.shot.wide { aspect-ratio: 16 / 10; margin: 0 0 40px; }
.shot.wide.photo { aspect-ratio: 3 / 2; margin: 0 0 20px; }
.portrait { flex: none; width: 200px; aspect-ratio: 4 / 5; }
@media (max-width: 720px) {
  .intro { flex-direction: column-reverse; gap: 24px; padding-top: 56px; }
  .portrait { width: 96px; aspect-ratio: 1; border-radius: 50%; }
}
.photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.photos .shot { background: none; border-radius: 0; }
.photos img { height: auto; aspect-ratio: 3 / 2; border-radius: 6px; }
.photos figcaption { font-size: 14px; color: var(--muted); padding-top: 6px; }

/* Secondary pages */
.back { display: inline-block; padding-top: 40px; }
.page-head { padding: 48px 0 40px; }
.page-head p { font-size: 20px; line-height: 1.55; }
section ol, section ul:not(.rows) { padding-left: 20px; margin: 0 0 14px; }