/* ===========================================================================
   genoeaves.com

   Two ideas carry this page.

   1. A margin rail and a spine. Section titles hang in a narrow left column,
      right-aligned against a single hairline that runs the length of the page.
      The portrait heads that column. The spine breaks in exactly one place —
      "In His Own Words" — where he stops being described and starts speaking.

   2. The arch. The portrait is cropped to a doorway, with a second arch drawn
      in outline behind it. A threshold: the shape of coming home, and of the
      church door. It appears once and nowhere else.

   Cool paper, blue ink. The portrait's warm stucco wall is the only warm
   thing on the page, and that is on purpose.
   =========================================================================== */

:root {
  --page:    #e7e8e4;  /* cool neutral stock, not cream */
  --panel:   #dbddd5;  /* the one filled area */
  --ink:     #17203a;  /* deep navy — ballpoint, not black */
  --ink-2:   #4a5265;  /* secondary */
  --accent:  #1e3c8c;  /* ballpoint blue */
  --rule:    #a8ada0;
  --spine:   #959c8c;

  --rail: 200px;
  --gutter: 30px;
  --pad: 22px;
  --bleed: 20px;   /* vertical rhythm, carried by the cells so the spine is continuous */

  --sans: "Helvetica Neue", Helvetica, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Charter, "Source Serif Pro", Georgia, serif;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page:   #11141b;
    --panel:  #1a1e28;
    --ink:    #e3e5de;
    --ink-2:  #a3aab8;
    --accent: #9cb8f5;
    --rule:   #434b59;
    --spine:  #525a6b;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.68;
  text-rendering: optimizeLegibility;
}

/* ---- The page frame, the rail, the spine -------------------------------- */

.page {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* The spine is the left border of every body cell. Because the cells carry the
   page's vertical rhythm themselves, those borders meet end to end and read as
   one continuous line running the length of the page. */
.row {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
}

.row__rail {
  padding: var(--bleed) var(--gutter) var(--bleed) 0;
  text-align: right;
}

.row__body {
  padding: var(--bleed) 0 var(--bleed) var(--gutter);
  max-width: calc(56ch + var(--gutter));
  border-left: 1px solid var(--spine);
}

/* Section titles live in the margin, set small and quiet against the spine. */
main .row__rail {
  font-family: var(--serif);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: var(--ink-2);
  padding-top: calc(var(--bleed) + 0.42em);
}

main > section.row:first-child .row__body { padding-top: 30px; }
main > section.row:first-child .row__rail { padding-top: calc(30px + 0.42em); }

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

.hero .row__rail,
.hero .row__body { padding-top: 50px; padding-bottom: 16px; }

/* Stretch the cell so the spine runs from the very top of the page, but keep
   the name optically seated on the portrait's baseline. */
.hero .row__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.portrait {
  position: relative;
  width: 200px;
  margin-left: auto;
}

/* The doorway he is standing in: a second arch drawn around the first, with a
   heavier base, like a jamb sitting on the ground. Drawn, never a shadow. */
.portrait::before {
  content: "";
  position: absolute;
  inset: -15px -15px -24px -15px;
  border: 1px solid var(--accent);
  border-radius: 115px 115px 4px 4px;
  opacity: 0.75;
}

.portrait__img {
  position: relative;
  display: block;
  width: 200px;
  height: 250px;
  object-fit: cover;
  object-position: 50% 26%;
  border-radius: 100px 100px 3px 3px;
}

h1 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2.7rem, 7.2vw, 3.7rem);
  line-height: 0.92;
  letter-spacing: -0.038em;
  color: var(--ink);
}

.tagline {
  margin: 0.72em 0 0;
  text-wrap: balance;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--ink-2);
}

/* ---- Body copy ---------------------------------------------------------- */

main { padding-bottom: 8px; }

.row__body p { margin: 0 0 0.95em; }
.row__body p:last-child { margin-bottom: 0; }

/* ---- In His Own Words: the one break in the spine ------------------------ */

/* The panel runs out to the page edge, across the rail. The spine stops here
   and picks up again after — the one place the structure gives way is the one
   place he speaks for himself. */
main section.quote {
  background: var(--panel);
  padding: 0 var(--pad);
  margin: 0 calc(-1 * var(--pad));
}

.quote .row__rail,
.quote .row__body { padding-top: 40px; padding-bottom: 42px; }

.quote .row__body { border-left: none; }

.quote .row__rail { color: var(--ink-2); }

blockquote.row__body {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.6;
}

blockquote p { margin: 0 0 0.85em; }
blockquote p:last-child { margin-bottom: 0; }

/* ---- Current work ------------------------------------------------------- */

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

.work-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 18px;
  align-items: baseline;
  padding: 11px 0 12px;
  border-bottom: 1px solid var(--rule);
}

.work-row:first-child { padding-top: 0; }
.work-row:last-child { border-bottom: none; padding-bottom: 0; }

.work-role {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  line-height: 1.4;
}

.work-org {
  grid-column: 1;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.work-when {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* ---- In the community: hanging citations -------------------------------- */

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

.citations li { margin-bottom: 22px; }

.citations li:last-child { margin-bottom: 0; }

.citations .source {
  display: block;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.004em;
  line-height: 1.45;
}

.citations p {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* ---- Links -------------------------------------------------------------- */

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent);
}

a:hover { text-decoration-color: currentColor; }

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

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

footer .row__rail,
footer .row__body { padding-top: 30px; padding-bottom: 50px; }

footer .row__body { border-top: 1px solid var(--rule); }

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 18px;
  font-family: var(--sans);
  font-size: 0.78125rem;
}

.footer-meta a {
  color: var(--ink-2);
  text-decoration-color: color-mix(in srgb, var(--ink-2) 32%, transparent);
}

.footer-meta a:hover { color: var(--accent); }

.footer-info {
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.5;
}

.footer-info p { margin: 0; }
.footer-sub { margin-top: 4px; font-size: 0.8125rem; }

/* ---- The one moment of motion: the spine draws itself in ---------------- */

@media (prefers-reduced-motion: no-preference) {
  .row__body { animation: draw 1100ms ease-out both; }
  @keyframes draw {
    from { border-left-color: transparent; }
    to   { border-left-color: var(--spine); }
  }
}

/* ---- Narrow ------------------------------------------------------------- */

@media (max-width: 860px) {
  :root { --rail: 168px; --gutter: 26px; }
  .portrait, .portrait__img { width: 168px; }
  .portrait__img { height: 210px; }
  .portrait::before { border-radius: 84px 84px 3px 3px; }
  .portrait__img { border-radius: 84px 84px 3px 3px; }
}

@media (max-width: 720px) {
  :root { --rail: 126px; --gutter: 20px; }
  .portrait, .portrait__img { width: 126px; }
  .portrait__img { height: 158px; }
  .portrait::before { border-radius: 63px 63px 3px 3px; }
  .portrait__img { border-radius: 63px 63px 3px 3px; }
  h1 { font-size: clamp(2.3rem, 9vw, 2.9rem); }
}

@media (max-width: 560px) {
  body { font-size: 1.03125rem; }

  .row {
    display: block;
  }

  .row__rail,
  .row__body {
    padding-left: 0;
    padding-right: 0;
    text-align: left;
    max-width: none;
    border-left: none;
    animation: none;
  }

  .hero .row__rail, .hero .row__body { padding-top: 40px; padding-bottom: 0; }
  main > section.row:first-child .row__rail { padding-top: 30px; }
  .quote .row__rail { padding-top: 34px; }
  .quote .row__body { padding-top: 0; padding-bottom: 36px; }
  footer .row__body { padding-top: 26px; }

  main .row__rail {
    padding-top: 30px;
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--rule);
  }

  .quote .row__rail { border-bottom-color: color-mix(in srgb, var(--ink-2) 34%, transparent); }

  .portrait {
    margin-left: 15px;
    margin-bottom: 28px;
    width: 144px;
  }

  .portrait::before { border-radius: 72px 72px 3px 3px; }

  .portrait__img {
    width: 144px;
    height: 180px;
    border-radius: 72px 72px 3px 3px;
  }

  blockquote.row__body { font-size: 1.125rem; }

  footer .row__rail { display: none; }
}