/* ramongonzalez.com — apex landing-site styles.
 *
 * Design family matches research.ramongonzalez.com:
 *   - Source Serif 4 for body and headlines
 *   - Inter for nav, footer chrome
 *   - Navy accent (#2c4565) for h1 + links
 * The apex sits a notch more understated than the research piece:
 * smaller h1, body-size h2, plain disc bullets, no card chrome.
 */

:root {
  --bg:             #f0e8d2;   /* warm cream page background, a notch
                                  stronger than the original #faf6ee
                                  to give the page a touch more
                                  presence without going full
                                  Squarespace-rose-tan */
  --text:           #1a1a1a;   /* primary body text */
  --text-secondary: #3d3d3d;
  --text-muted:     #6b6b6b;   /* metadata, qualifiers */
  --accent:         #2c4565;   /* navy: h1 and links */
  --accent-hover:   #1e3050;
  --rule:           #d8d2c4;

  --col:            720px;     /* content column max; matches the
                                  research-paper sister site (research.
                                  ramongonzalez.com) so both sites read
                                  with the same measure */
  --pad-x:          24px;
  --pad-y:          56px;

  --serif:          'Source Serif 4', Georgia, 'Times New Roman', serif;
  --ui:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:           ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

html {
  font-size: 18px;
  /* Reserve the scrollbar gutter on every page. Without this, short
   * pages (e.g., /projects/) render without a scrollbar while long
   * pages (apex) render with one, and the centered 640px column
   * shifts ~8-17px between them. scrollbar-gutter:stable keeps the
   * viewport width constant so the column lands at the same x on
   * every page. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-feature-settings: "kern", "liga", "onum";
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page {
  max-width: var(--col);
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x) 32px;
}

/* -- Top nav -------------------------------------------------------- */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 48px;
  font-family: var(--ui);
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}
.nav a {
  color: var(--text);
  text-decoration: none;
}
.nav a:hover { color: var(--accent); }
.nav .site-title { font-weight: 600; }

/* -- Headings ------------------------------------------------------- */
/* h1 is a sub-page title (Research & Projects). Apex has no h1; the
 * site title in the nav is the implicit heading for the apex. */
h1 {
  font-family: var(--serif);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  line-height: 1.2;
}

/* h2 is deliberately modest: bold serif at body size, dark (not navy),
 * so section headers feel like quiet shelf labels rather than
 * announcements. */
h2 {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
  margin: 32px 0 8px;
  line-height: 1.35;
}
h2 .qualifier {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* -- Body ----------------------------------------------------------- */
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--accent-hover); }

em { font-style: italic; }

/* Lead-in line into the writing list. Italic, slightly muted, with a
 * tighter top margin so it reads as a setup for the headers below. */
.lead-in {
  margin-top: 28px;
  font-style: italic;
  color: var(--text-secondary);
}

/* -- Item context line --------------------------------------------- */
/* Optional one-sentence summary line under select items in the
 * writing list (e.g. policy-reform pieces where the title alone
 * doesn't communicate the argument). Italic, slightly smaller, lighter
 * color so it reads as caption rather than primary content. */
.context {
  display: block;
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* -- Lists ---------------------------------------------------------- */
/* Plain disc bullets; the modest UX wants no rules, no chrome.
 * Items are link + (year) or link + (year, publication). */
main ul {
  list-style: disc;
  padding-left: 1.25em;
  margin: 0 0 8px;
}
main ul li {
  margin: 0 0 6px;
  padding: 0;
}
main ul li:last-child { margin-bottom: 0; }

/* -- Apex hero ------------------------------------------------------ */
.portrait {
  display: block;
  width: 300px;
  max-width: 60%;
  /* Centered within the column. Earlier draft was left-flush; we
   * flipped to centered so the portrait sits as a small anchor at
   * the top of the page rather than hugging the left margin. */
  margin: 0 auto 28px;
  border-radius: 4px;
}

/* -- Sub-page external link line ----------------------------------- */
/* For each project on /research-and-projects/: the canonical URL on a
 * line of its own, smaller and Inter, with an optional muted note
 * (e.g. "access on request"). Plain paragraph styling, no card. */
.external {
  font-family: var(--ui);
  font-size: 0.875rem;
  margin: 8px 0 24px;
}
.external .note {
  margin-left: 8px;
  color: var(--text-muted);
}

/* -- Back link (sub-pages) ------------------------------------------ */
.back-link {
  font-family: var(--ui);
  font-size: 0.8125rem;
  margin-bottom: 24px;
}
.back-link a {
  color: var(--text-muted);
  text-decoration: none;
}
.back-link a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* -- Copyright ------------------------------------------------------ */
/* Discreet footer line. Any link inside (currently the LinkedIn link
 * on the apex) inherits the muted color and gets a soft underline,
 * so it sits as chrome rather than calling for attention. */
.copyright {
  font-family: var(--ui);
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  margin: 48px 0 0;
}
.copyright a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(107, 107, 107, 0.45);
}
.copyright a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* -- Page-version footer (rendered by nav.js) ----------------------- */
/* Appended to <body>; centered to match the column. Quiet by default,
 * disappears into the cream background unless the reader looks for it. */
.page-footer {
  max-width: var(--col);
  margin: 16px auto 24px;
  padding: 12px var(--pad-x) 0;
  font-family: var(--ui);
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}
.page-footer code {
  font-family: var(--mono);
  font-size: 0.6875rem;
  background: rgba(44, 69, 101, 0.06);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 3px;
}

/* -- Narrow viewport ------------------------------------------------ */
@media (max-width: 640px) {
  :root {
    --pad-y: 36px;
    --pad-x: 20px;
  }
  h1 { font-size: 1.625rem; }
  .nav {
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 32px;
  }
  .portrait { width: 200px; }
}