/* ------------------------------------------------------------------
   rmfrancis.net — all typography, color and layout lives in this file.
   Edit values here, run `python3 build.py`, and re-upload `site/`.
   Measured from the live Squarespace site (1280px-wide window).
   ------------------------------------------------------------------ */

:root {
  /* FONTS. The original uses Adobe Fonts' "Runda" (body) and "Tondo" (headings),
     which can't be bundled here. Set "typekit_kit" in site.json to load them from
     your own Adobe Fonts web project; otherwise these fallbacks are used. */
  --body-font: "runda", "Avenir Next", "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
  --head-font: "tondo", "Avenir Next", "Nunito Sans", "Helvetica Neue", Arial, sans-serif;

  --bg: #ffffff;
  --text: #031111;          /* body text */
  --title: #080901;         /* "RM Francis" in the header */
  --nav: #474747;           /* nav links */
  --nav-active: #1cff14;    /* current page: the green */
  --link: #141414;
  --rule: rgba(0, 0, 0, .63);

  --gutter: 50px;           /* left/right page margin */
  --col-gap: 34px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/24px var(--body-font);
  letter-spacing: .45px;
}

/* ---------- header ---------- */
header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 140px;
  padding: 40px 68px 0 41px;
}
header .site {
  font: 400 48px/57.6px var(--head-font);
  letter-spacing: normal;
  color: var(--title);
  text-decoration: none;
}
nav { padding-top: 14px; }
nav a {
  font: 300 14px/14px var(--head-font);
  letter-spacing: normal;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--nav);
  margin-left: 37px;
  padding: 8px 0;
}
nav a:first-child { margin-left: 0; }
nav a[aria-current] { color: var(--nav-active); }

/* ---------- shared ---------- */
main { padding: 0 var(--gutter) 90px; }
main img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: none; border-bottom: 1px solid rgba(18, 18, 18, .3); }
header a, nav a { border-bottom: 0; }
figcaption, .credit { font-size: 12px; line-height: 20.16px; margin-top: 17px; }
.noimg { background: #eee; aspect-ratio: 1 / 1; width: 100%; }

/* ---------- home ---------- */
.home figure { margin: 58px 0 0; }
.home figcaption { font-size: 15px; line-height: 24px; margin-top: 55px; }

/* ---------- releases ---------- */
.releases { list-style: none; margin: 70px 0 0; padding: 0; }
.releases li { margin: 0 0 34px; }
.releases img, .releases .noimg { width: 371px; max-width: 100%; margin-bottom: 38px; }
.releases .t {
  margin: 0 0 15px;
  font: 300 21px/29.4px var(--body-font);
  letter-spacing: .84px;
}
.releases .t a { border-bottom: 1px solid rgba(20, 20, 20, .3); }
.releases .n { margin: 0; }

/* ---------- who & where ---------- */
.who-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--col-gap);
  margin-top: 70px;
  align-items: start;
}
.who-top figure { margin: 0; }
.who-top p { margin: 0 0 15px; }
h1 {
  font: 300 34px/40.8px var(--head-font);
  letter-spacing: -1.7px;
  color: #000;
  margin: 17px 0 41px;
}
h1 + hr { margin-top: 0; }
.perf-section + .perf-section h1 { margin-top: 23px; }
hr { border: 0; height: 1px; background: var(--rule); margin: 0 0 41px; }
.perf { list-style: none; margin: 0 0 15px; padding: 0; }
.perf strong { font-weight: 700; }

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  :root { --gutter: 20px; }
  header { height: auto; flex-direction: column; gap: 10px; padding: 24px 20px 10px; }
  header .site { font-size: 36px; line-height: 44px; }
  nav { padding-top: 0; }
  nav a { margin-left: 0; margin-right: 24px; }
  .who-top { grid-template-columns: 1fr; margin-top: 30px; }
  .who-top figure { margin-bottom: 24px; }
  .releases { margin-top: 30px; }
  .home figure { margin-top: 30px; }
  h1 { font-size: 28px; letter-spacing: -1.2px; }
}