:root {
    --paper: #F6F7F9;
    --ink: #1A2233;
    --indigo: #2D3F8C;
    --turmeric: #D69A1E;
    --slate: #5E6678;
    --rule: #DDE1E8;
    --sans: "Bricolage Grotesque", system-ui, sans-serif;
    --serif: "Source Serif 4", Georgia, serif;
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.65 var(--serif); }
  a { color: var(--indigo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  a:hover { text-decoration-thickness: 2px; }
  a:focus-visible { outline: 3px solid var(--turmeric); outline-offset: 3px; border-radius: 2px; }

  .wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }

  header.site { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.5rem 0; font: 600 1rem/1 var(--sans); }
  header.site a { color: var(--ink); text-decoration: none; }
  header.site nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
  header.site nav a { color: var(--slate); font-weight: 400; }
  header.site nav a:hover { color: var(--ink); }

  .hero { padding: 11vh 0 9vh; display: grid; grid-template-columns: 1fr 20rem; gap: 3rem; align-items: start; }
  .hero .hero-text { grid-column: 1; grid-row: 1; }
  .portrait { grid-column: 2; grid-row: 1; margin: .5rem 0 0; position: relative; }
  .portrait img { display: block; width: 100%; height: auto; border-radius: 4px; position: relative; z-index: 1; }
  .portrait::before { content: ""; position: absolute; inset: 1rem -1rem -1rem 1rem; background: var(--turmeric); border-radius: 4px; }
  .hero h1 { margin: 0; font: 800 clamp(4rem, 14vw, 11rem)/.88 var(--sans); letter-spacing: -.045em; }
  .hero h1 .initials { display: block; color: var(--indigo); font-weight: 600; font-size: .42em; letter-spacing: -.02em; margin-bottom: .1em; }
  .hero .mark { display: block; width: 4.5rem; height: .5rem; background: var(--turmeric); margin: 2.5rem 0 1.75rem; }
  .hero p.lede { max-width: 36rem; margin: 0; font: 400 clamp(1.25rem, 2.2vw, 1.5rem)/1.45 var(--serif); }
  .hero blockquote { margin: 2.5rem 0 0; max-width: 36rem; font: italic 400 clamp(1.125rem, 1.8vw, 1.25rem)/1.5 var(--serif); color: var(--slate); }

  section.block { display: grid; grid-template-columns: 14rem 1fr; gap: 2rem; padding: 4rem 0; border-top: 1px solid var(--rule); }
  section.block h2 { margin: 0; font: 600 1.375rem/1.2 var(--sans); letter-spacing: -.01em; }
  .body { max-width: 42rem; }
  .body p { margin: 0 0 1.1em; }

  .work { list-style: none; padding: 0; margin: 0; }
  .work li { padding: 0 0 1.5rem; }
  .work h3 { margin: 0 0 .25rem; font: 600 1.125rem/1.3 var(--sans); }
  .work p { margin: 0; color: var(--slate); }

  /* Career: the one bold element below the hero. Cities carry the story. */
  .career { list-style: none; padding: 0; margin: 0; }
  .career li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.25rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
  .career li:first-child { padding-top: 0; }
  .career .yrs { font: 400 .95rem/1.9 var(--sans); color: var(--slate); font-variant-numeric: tabular-nums; }
  .career .city { display: block; font: 800 clamp(1.5rem, 3.2vw, 2.25rem)/1.05 var(--sans); letter-spacing: -.025em; }
  .career .role { display: block; margin-top: .3rem; font: 600 1rem/1.4 var(--sans); color: var(--indigo); }
  .career .what { display: block; margin-top: .15rem; font-size: 1rem; color: var(--slate); }
  .career li.now .city::after { content: ""; display: inline-block; width: .55em; height: .55em; margin-left: .4em; border-radius: 50%; background: var(--turmeric); vertical-align: .12em; }
  .career-note { margin: 1.5rem 0 0; font-size: 1rem; color: var(--slate); }

  .edu { list-style: none; padding: 0; margin: 0; }
  .edu li { padding: 0 0 1rem; }
  .edu strong { display: block; font: 600 1.125rem/1.3 var(--sans); }
  .edu span { color: var(--slate); }

  .post h3 { margin: 0 0 .25rem; font: 600 1.375rem/1.3 var(--sans); letter-spacing: -.01em; }
  .post .date { margin: 0 0 1rem; font: 400 .95rem/1.4 var(--sans); color: var(--slate); }
  .post blockquote { margin: 0 0 1.25rem; padding-left: 1.25rem; border-left: 3px solid var(--turmeric); }
  .post blockquote p { margin: 0 0 .8em; }
  .post a.more { font: 600 1rem/1 var(--sans); }

  .contact a.email { font: 600 clamp(1.5rem, 3.5vw, 2.25rem)/1.2 var(--sans); letter-spacing: -.02em; color: var(--indigo); }
  .contact ul { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-family: var(--sans); }

  footer { padding: 3rem 0 4rem; border-top: 1px solid var(--rule); font: 400 .9rem/1.5 var(--sans); color: var(--slate); }

  @media (min-width: 721px) and (max-width: 960px) {
    .hero { grid-template-columns: 1fr 14rem; gap: 2rem; }
    .hero h1 { font-size: clamp(4rem, 10vw, 7rem); }
  }
  @media (max-width: 720px) {
    section.block { grid-template-columns: 1fr; gap: 1.25rem; padding: 3rem 0; }
    .career li { grid-template-columns: 1fr; gap: .1rem; }
    .hero { padding: 3vh 0 6vh; grid-template-columns: 1fr; gap: 2.5rem; }
    .portrait { grid-column: 1; grid-row: 1; max-width: 15rem; }
    .hero .hero-text { grid-row: 2; }
    header.site { flex-direction: column; align-items: flex-start; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero .mark { animation: draw .7s .2s cubic-bezier(.2,.7,.2,1) both; transform-origin: left; }
    @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }

  /* Writing list on home page */
  .posts { list-style: none; padding: 0; margin: 0; }
  .posts li { padding: 0 0 1.5rem; margin: 0 0 1.5rem; border-bottom: 1px solid var(--rule); }
  .posts li:last-child { border-bottom: 0; margin-bottom: 0; }
  .posts .date { margin: 0 0 .25rem; font: 400 .95rem/1.4 var(--sans); color: var(--slate); }
  .posts h3 { margin: 0 0 .4rem; font: 600 1.375rem/1.3 var(--sans); letter-spacing: -.01em; }
  .posts h3 a { color: var(--ink); text-decoration: none; }
  .posts h3 a:hover { color: var(--indigo); text-decoration: underline; }
  .posts p { margin: 0; color: var(--slate); }

  /* Article pages */
  .article { max-width: 40rem; padding: 8vh 0 4rem; }
  .article .back { font: 600 1rem/1 var(--sans); }
  .article h1 { margin: 2rem 0 .75rem; font: 800 clamp(2.25rem, 6vw, 3.75rem)/1.02 var(--sans); letter-spacing: -.035em; }
  .article .date { margin: 0 0 2.5rem; font: 400 1rem/1.4 var(--sans); color: var(--slate); }
  .article .mark { display: block; width: 4.5rem; height: .5rem; background: var(--turmeric); margin: 0 0 2.5rem; }
  .article p { margin: 0 0 1.2em; line-height: 1.75; }
  .article p.pull { margin: 2rem 0; font: italic 400 1.375rem/1.5 var(--serif); color: var(--indigo); }
  .article figure { margin: 2.5rem 0; }
  .article figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
  .article figcaption { margin-top: .6rem; font: 400 .95rem/1.5 var(--sans); color: var(--slate); }
  .article .source { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font: 400 1rem/1.5 var(--sans); color: var(--slate); }