:root {
      --paper: #F3F2EF;
      --paper-deep: #E1E5EC;
      --ink: #23344A;
      --muted: #596574;
      --faint: #87909B;
      --line: #CBD0D7;
      --accent: #365C85;
      --accent-dark: #264362;
      --sage: #365C85;
      --display: Georgia, "Times New Roman", Times, serif;
      --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --page-pad: clamp(1.25rem, 4vw, 4.5rem);
      --section-space: clamp(5rem, 10vw, 9.5rem);
      --max: 91rem;
    }

    *, *::before, *::after { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      background: var(--paper);
    }

    body {
      margin: 0;
      color: var(--ink);
      background:
        linear-gradient(rgba(35, 52, 74, .025) 1px, transparent 1px),
        var(--paper);
      background-size: 100% 5px;
      font-family: var(--sans);
      font-size: 1rem;
      line-height: 1.55;
      text-rendering: optimizeLegibility;
    }

    a { color: inherit; }

    .skip-link {
      position: fixed;
      top: .75rem;
      left: .75rem;
      z-index: 10;
      padding: .7rem 1rem;
      background: var(--ink);
      color: var(--paper);
      transform: translateY(-160%);
      transition: transform 180ms ease;
    }

    .skip-link:focus { transform: translateY(0); }

    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 5px;
    }

    .shell {
      width: min(calc(100% - (2 * var(--page-pad))), var(--max));
      margin-inline: auto;
    }

    .site-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      min-height: 7rem;
      border-bottom: 1px solid var(--line);
    }

    .monogram {
      display: inline-flex;
      align-items: center;
      gap: .8rem;
      width: max-content;
      text-decoration: none;
      font-size: .74rem;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .monogram-mark {
      display: grid;
      place-items: center;
      width: 2.35rem;
      aspect-ratio: 1;
      border: 1px solid var(--ink);
      border-radius: 50%;
      font-family: var(--display);
      font-size: 1rem;
      font-style: italic;
      letter-spacing: -.08em;
    }

    .edition {
      justify-self: center;
      color: var(--muted);
      font-family: var(--display);
      font-size: .9rem;
      font-style: italic;
    }

    .site-nav {
      justify-self: end;
      display: flex;
      align-items: center;
      gap: clamp(1rem, 2.2vw, 2.25rem);
    }

    .site-nav a,
    .text-link {
      position: relative;
      text-decoration: none;
      font-size: .73rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .site-nav a::after,
    .text-link::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: -.35rem;
      left: 0;
      height: 1px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 220ms ease;
    }

    .site-nav a:hover::after,
    .site-nav a:focus-visible::after,
    .text-link:hover::after,
    .text-link:focus-visible::after {
      transform: scaleX(1);
      transform-origin: left;
    }

    .hero {
      display: grid;
      grid-template-columns: 2.1fr 1fr;
      gap: clamp(3rem, 6vw, 6rem);
      align-items: center;
      min-height: auto;
      padding-block: 5rem 4.5rem;
      border-bottom: 1px solid var(--line);
    }

    .eyebrow {
      display: flex;
      align-items: center;
      gap: .85rem;
      margin: 0 0 1.5rem;
      color: var(--accent);
      font-size: .73rem;
      font-weight: 700;
      letter-spacing: .17em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 2.5rem;
      height: 1px;
      background: currentColor;
    }

    h1, h2, h3, p { margin-top: 0; }

    h1 {
      max-width: 15ch;
      margin-bottom: 2rem;
      font-family: var(--display);
      font-size: clamp(4rem, 7.6vw, 8.1rem);
      font-weight: 400;
      letter-spacing: -.065em;
      line-height: .88;
    }

    h1 em {
      color: var(--accent);
      font-weight: 400;
    }

    .hero-intro {
      max-width: 37rem;
      margin: 0;
      color: var(--muted);
      font-family: var(--display);
      font-size: clamp(1.22rem, 1.6vw, 1.6rem);
      line-height: 1.45;
    }

    .hero-aside {
      position: relative;
      padding: 0;
      border: 0;
    }

    .hero-aside::before {
      display: none;
      content: "“";
      position: absolute;
      top: 1.45rem;
      left: 0;
      color: var(--accent);
      font-family: var(--display);
      font-size: 2.4rem;
      line-height: 1;
    }

    .hero-aside p {
      margin-bottom: 2rem;
      color: var(--muted);
      font-size: .97rem;
      line-height: 1.72;
    }

    .availability {
      display: flex;
      align-items: center;
      gap: .65rem;
      color: var(--sage);
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .availability::before {
      content: "";
      width: .48rem;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--sage);
      box-shadow: 0 0 0 4px rgba(54, 92, 133, .13);
    }

    section { scroll-margin-top: 2rem; }

    .section-head {
      display: grid;
      grid-template-columns: 1fr 2.1fr 1fr;
      align-items: baseline;
      gap: 2rem;
      margin-bottom: clamp(3rem, 6vw, 5.5rem);
    }

    .section-kicker,
    .section-count {
      margin: 0;
      color: var(--muted);
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .section-count { justify-self: end; }

    .section-title {
      margin: 0;
      font-family: var(--display);
      font-size: clamp(2.8rem, 4.5vw, 5rem);
      font-weight: 400;
      letter-spacing: -.045em;
      line-height: 1;
    }

    .notes {
      padding-block: var(--section-space);
      border-bottom: 1px solid var(--line);
    }

    .story-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 1.5rem;
    }

    .story {
      display: flex;
      flex-direction: column;
      min-height: 19rem;
      padding-top: 1.15rem;
      border-top: 1px solid var(--ink);
      text-decoration: none;
    }

    .story:first-child {
      grid-column: span 7;
      min-height: 30rem;
      padding: clamp(2rem, 4vw, 4rem);
      border-top: 0;
      background: var(--accent);
      color: var(--paper);
    }

    .story:nth-child(2) { grid-column: span 5; }
    .story:nth-child(3) { grid-column: span 4; }
    .story:nth-child(4) { grid-column: span 4; }
    .story:nth-child(5) { grid-column: span 4; }

    .story-meta {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: auto;
      color: var(--muted);
      font-size: .66rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .story:first-child .story-meta { color: var(--paper-deep); }

    .story h3 {
      margin: 4.5rem 0 1rem;
      font-family: var(--display);
      font-size: clamp(2rem, 3.1vw, 3.6rem);
      font-weight: 400;
      letter-spacing: -.04em;
      line-height: 1;
    }

    .story:first-child h3 {
      max-width: 9ch;
      font-size: clamp(3.5rem, 6.2vw, 7rem);
      line-height: .9;
    }

    .story-deck {
      max-width: 32rem;
      margin-bottom: 0;
      color: var(--muted);
      font-family: var(--display);
      font-size: 1rem;
      line-height: 1.55;
    }

    .story:first-child .story-deck {
      max-width: 28rem;
      color: var(--paper);
      font-size: 1.12rem;
    }

    .story-title-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 1.5rem;
    }

    .arrow {
      flex: 0 0 auto;
      padding-bottom: .45rem;
      font-size: 1.35rem;
      transition: transform 220ms ease;
    }

    .story:hover .arrow,
    .story:focus-visible .arrow { transform: translate(.3rem, -.3rem); }

    .about {
      display: grid;
      grid-template-columns: 1fr 2.1fr;
      gap: clamp(3rem, 8vw, 9rem);
      padding-block: var(--section-space);
      border-bottom: 1px solid var(--line);
    }

    .about-label { align-self: start; }

    .about-copy > p:first-child {
      max-width: 30ch;
      margin-bottom: clamp(3rem, 5vw, 5rem);
      font-family: var(--display);
      font-size: clamp(2.2rem, 4vw, 4.5rem);
      letter-spacing: -.04em;
      line-height: 1.08;
    }

    .about-copy > p:first-child em {
      color: var(--accent);
      font-weight: 400;
    }

    .bio-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: clamp(2rem, 5vw, 5rem);
    }

    .bio-grid p {
      margin: 0;
      color: var(--muted);
      line-height: 1.75;
    }

    .facts {
      padding-block: var(--section-space);
    }

    .fact-list {
      margin: 0;
      border-top: 1px solid var(--ink);
    }

    .fact {
      display: grid;
      grid-template-columns: minmax(11rem, 1fr) 2.1fr auto;
      gap: 2rem;
      align-items: baseline;
      padding: 1.5rem 0;
      border-bottom: 1px solid var(--line);
    }

    .fact dt {
      color: var(--muted);
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .fact dd {
      margin: 0;
      font-family: var(--display);
      font-size: clamp(1.2rem, 2vw, 1.75rem);
    }

    .fact small {
      color: var(--faint);
      font-size: .72rem;
    }

    .site-footer {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 3rem;
      align-items: end;
      padding-block: clamp(4rem, 8vw, 7rem) 2.2rem;
      background: var(--ink);
      color: var(--paper);
    }

    .footer-wrap { background: var(--ink); }

    .footer-message p {
      max-width: 14ch;
      margin-bottom: 2.6rem;
      font-family: var(--display);
      font-size: clamp(2.7rem, 5.5vw, 6rem);
      letter-spacing: -.05em;
      line-height: .96;
    }

    .footer-message .text-link { color: var(--paper-deep); }

    .socials {
      display: flex;
      gap: 1.5rem;
      align-items: center;
      padding-bottom: .2rem;
    }

    .socials a {
      color: var(--paper-deep);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-decoration: none;
      text-transform: uppercase;
    }

    .socials a:hover { color: var(--paper); }

    .copyright {
      grid-column: 1 / -1;
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      margin: 4rem 0 0;
      padding-top: 1.5rem;
      border-top: 1px solid var(--muted);
      color: var(--faint);
      font-size: .67rem;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    @media (max-width: 900px) {
      .site-header { grid-template-columns: 1fr auto; }
      .edition { display: none; }
      .hero { grid-template-columns: 1fr; min-height: auto; }
      .hero-aside { max-width: 33rem; }
      .section-head { grid-template-columns: 1fr auto; }
      .section-title { grid-column: 1 / -1; grid-row: 2; }
      .story:first-child,
      .story:nth-child(2) { grid-column: span 12; }
      .story:nth-child(3),
      .story:nth-child(4),
      .story:nth-child(5) { grid-column: span 4; }
      .about { grid-template-columns: 1fr; }
    }

    @media (max-width: 640px) {
      .site-header {
        min-height: 5.4rem;
      }

      .monogram span:last-child { display: none; }
      .site-nav { gap: .85rem; }
      .site-nav a { font-size: .64rem; }

      .hero {
        padding-block: 4rem;
      }

      h1 {
        font-size: clamp(3.4rem, 17vw, 5rem);
        line-height: .92;
      }

      .hero-aside { padding: 0; }
      .section-head { gap: 1rem; }
      .story-grid { display: block; }

      .story,
      .story:first-child {
        min-height: 20rem;
        margin-bottom: 3rem;
      }

      .story:first-child { padding: 1.75rem; }
      .story:first-child h3 { font-size: 3.8rem; }
      .bio-grid { grid-template-columns: 1fr; }

      .fact {
        grid-template-columns: 1fr;
        gap: .45rem;
      }

      .fact small { display: none; }
      .site-footer { grid-template-columns: 1fr; }
      .socials { justify-content: flex-start; }
      .copyright { flex-direction: column; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
      }
    }

/* Site and reading views, built on the approved navy and pearl study. */
figure { margin: 0; }
.portrait { display: block; width: 100%; max-width: 350px; height: auto; aspect-ratio: 7 / 8; object-fit: cover; }
figcaption { margin-top: 1rem; color: var(--muted); font-size: .78rem; }
.hero-aside .availability { margin: 1.5rem 0 0; font-size: .7rem; }
.section-title em { color: var(--accent); font-weight: 400; }
.read-time { display: block; color: var(--muted); font-size: .72rem; margin-top: 1.5rem; }
.story:first-child .read-time { color: var(--paper-deep); }
.about-copy > h2 { max-width: 30ch; margin: 0 0 clamp(3rem,5vw,5rem); font-family: var(--display); font-size: clamp(2.2rem,4vw,4.5rem); font-weight: 400; letter-spacing: -.04em; line-height: 1.08; }
.about-copy > h2 em { color: var(--accent); }
.bio-grid { align-items: start; }
.bio-grid p:nth-child(3) { grid-column: 1 / -1; max-width: 48rem; }
.work { padding-block: var(--section-space); }
.career-list { border-top: 1px solid var(--ink); }
.career { padding: 1.75rem 0; border-bottom: 1px solid var(--line); }
.career summary { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 2rem; align-items: center; cursor: pointer; list-style: none; }
.career summary::-webkit-details-marker { display: none; }
.career-role { color: var(--muted); font-size: .84rem; }
.career-name { font-family: var(--display); font-size: clamp(1.5rem,2.5vw,2.2rem); letter-spacing: -.03em; }
.career-date { text-align: right; color: var(--muted); font-size: .76rem; }
.detail-sign { display: inline-block; margin-left: 1.2rem; font-size: 1.25rem; }
.career[open] .detail-sign { transform: rotate(45deg); }
.career > p { margin: 1.5rem 0 0; padding-left: calc(29.4% + .6rem); max-width: 72rem; color: var(--muted); line-height: 1.8; }
.credentials { display: grid; grid-template-columns: 2fr 1fr; gap: 5rem; margin-top: 5rem; }
.credentials h3 { font-family: var(--display); font-size: 1.8rem; font-weight: 400; letter-spacing: -.03em; }
.credentials p { margin-bottom: 2rem; }
.credentials a { text-decoration-thickness: 1px; text-underline-offset: 5px; }
.muted { color: var(--muted); }
.story-meta, .section-kicker, .section-count, .copyright { font-size: .72rem; }
.copyright { color: var(--paper-deep); }
.archive { padding-block: 5rem 7rem; min-height: 65vh; }
.archive h1 { max-width: 19ch; font-size: clamp(3.5rem,7vw,7rem); line-height: .98; }
.archive-intro { max-width: 40rem; font-family: var(--display); color: var(--muted); font-size: clamp(1.2rem,2vw,1.5rem); }
.archive-list { margin-top: 4rem; border-top: 1px solid var(--ink); }
.archive-row { display: grid; grid-template-columns: 1fr 3fr auto; gap: 2rem; border-bottom: 1px solid var(--line); padding: 2rem 0; text-decoration: none; align-items: start; }
.archive-row > time { color: var(--muted); font-size: .8rem; }
.archive-row h2 { font-family: var(--display); font-size: clamp(1.75rem,3vw,2.75rem); font-weight: 400; letter-spacing: -.04em; margin: .75rem 0; }
.archive-row p { max-width: 42rem; margin: 0; color: var(--muted); }
.archive-row:hover h2 { color: var(--accent); }
.article { width: min(calc(100% - 2 * var(--page-pad)), 52rem); margin-inline: auto; padding-block: 4.5rem 6rem; }
.article-header > .text-link { display: inline-block; margin-bottom: 4rem; }
.article-header h1 { font-size: clamp(3.25rem,7vw,6.5rem); max-width: 17ch; line-height: .98; }
.article-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; color: var(--muted); font-size: .78rem; }
.article-summary { margin: 2rem 0 4rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 1.4rem; color: var(--muted); line-height: 1.5; }
.prose { font-family: var(--display); font-size: 1.2rem; line-height: 1.8; overflow-wrap: anywhere; }
.prose > p, .prose > ul, .prose > ol { margin-bottom: 1.7rem; }
.prose h2, .prose h3, .prose h4 { color: var(--ink); font-weight: 400; line-height: 1.2; letter-spacing: -.03em; margin: 3.2rem 0 1.4rem; }
.prose h2 { font-size: 2.6rem; }
.prose h3 { font-size: 2rem; }
.prose h4 { font-size: 1.6rem; }
.prose a { color: var(--accent); text-underline-offset: 4px; }
.prose :not(pre) > code { background: var(--paper-deep); font-size: .9em; padding: .1em .25em; }
.prose pre { position: relative; background: var(--ink); color: var(--paper); padding: 1.5rem; margin: 2rem 0; overflow-x: auto; border-radius: 2px; font: .88rem/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: normal; }
.prose pre code { font: inherit; }
.prose blockquote { margin: 2rem 0; border-left: 2px solid var(--accent); padding-left: 1.5rem; color: var(--muted); font-style: italic; }
.prose img { display: block; max-width: 100%; height: auto; margin: 2rem auto; }
.prose li { padding-left: .25rem; margin-bottom: .5rem; }
.article-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2rem; align-items: center; border-top: 1px solid var(--line); margin-top: 4rem; padding-top: 2rem; }
.article-footer > a { text-decoration: none; }
.next-title { display: block; font-family: var(--display); font-size: 1.5rem; margin-top: .5rem; }
@media (max-width: 900px) {
  .hero { gap: 3rem; }
  .hero-aside { max-width: 350px; }
  .career summary { grid-template-columns: 1fr 1.5fr; gap: .75rem 1.5rem; }
  .career-date { grid-column: 2; text-align: left; }
  .career > p { padding-left: 0; }
}
@media (max-width: 640px) {
  .site-nav a { font-size: .72rem; }
  .hero .eyebrow { font-size: .7rem; letter-spacing: .075em; }
  .hero .eyebrow::before { width: 1rem; flex-shrink: 0; }
  .hero-aside { width: min(100%,350px); }
  .credentials { grid-template-columns: 1fr; gap: 2rem; }
  .career summary { grid-template-columns: 1fr auto; }
  .career-name { grid-column: 1; grid-row: 1; }
  .career-role { grid-column: 1; grid-row: 2; }
  .career-date { grid-column: 1 / -1; grid-row: 3; }
  .archive-row { grid-template-columns: 1fr auto; gap: .5rem 1rem; }
  .archive-row time { grid-column: 1; }
  .archive-row > div { grid-column: 1; }
  .archive-row > .arrow { grid-column: 2; grid-row: 2; }
  .article { padding-block: 3rem 4rem; }
  .article-header > .text-link { margin-bottom: 3rem; }
  .article-summary { font-size: 1.2rem; }
  .prose { font-size: 1.1rem; }
  .prose h2 { font-size: 2rem; }
  .prose pre { font-size: .8rem; padding: 1.1rem; }
  .socials { flex-wrap: wrap; }
}