:root {
    --navy:    #1E2E5E;
    --copper:  #B05D41;
    --peach:   #F59768;
    --field:   #0E111B;
    --ink:     #EDEBE8;
    --muted:   #9AA0AE;
    --faint:   #5B6270;
    --hair:    rgba(154, 160, 174, 0.13);
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    min-height: 100vh;
    background: var(--field);
    color: var(--ink);
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    position: relative;
    overflow-x: hidden;
  }
  a { color: inherit; }
  ::selection { background: var(--copper); color: #0B0C0F; }

  /* ============ ATMOSPHERE ============ */

  /* light field: warm key upper-left, cool fill lower-right, slow convergence */
  .field {
    position: fixed;
    inset: -25vmax;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(58vmax 46vmax at 14% -2%,  rgba(176, 93, 65, 0.62) 0%, rgba(176, 93, 65, 0.16) 36%, transparent 64%),
      radial-gradient(54vmax 54vmax at 96% 94%,  rgba(30, 46, 94, 0.78) 0%,  rgba(30, 46, 94, 0.22) 40%, transparent 70%),
      radial-gradient(38vmax 30vmax at 74% 24%,  rgba(245, 151, 104, 0.16) 0%, transparent 58%),
      radial-gradient(30vmax 26vmax at 30% 78%,  rgba(176, 93, 65, 0.13) 0%, transparent 60%);
    animation: breathe 28s ease-in-out infinite alternate;
  }
  @keyframes breathe {
    from { transform: translate3d(0,0,0) scale(1);          opacity: .88; }
    to   { transform: translate3d(3%, -2.5%, 0) scale(1.09); opacity: 1; }
  }

  /* hairline grid */
  .grid {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .5;
    background-image:
      linear-gradient(to right,  var(--hair) 1px, transparent 1px),
      linear-gradient(to bottom, var(--hair) 1px, transparent 1px);
    background-size: 7.5rem 7.5rem;
    mask-image: radial-gradient(70% 60% at 50% 35%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 0%, transparent 78%);
  }

  /* aperture: concentric lens rings, slow rotation */
  .aperture {
    position: fixed;
    top: -14vmax; right: -18vmax;
    width: 62vmax; height: 62vmax;
    z-index: 1;
    pointer-events: none;
    border-radius: 50%;
    opacity: .5;
    background:
      repeating-radial-gradient(circle at 50% 50%,
        transparent 0 3.2rem,
        rgba(176, 93, 65, 0.085) 3.2rem 3.24rem);
    mask-image: radial-gradient(circle at 50% 50%, #000 12%, transparent 68%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 12%, transparent 68%);
    animation: turn 150s linear infinite;
  }
  @keyframes turn { to { transform: rotate(360deg); } }

  /* film grain */
  .grain {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .14;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: shift 900ms steps(2) infinite;
  }
  @keyframes shift {
    0%   { transform: translate3d(0,0,0); }
    50%  { transform: translate3d(-1.5%, 1%, 0); }
    100% { transform: translate3d(0,0,0); }
  }

  /* ============ LAYOUT ============ */

  .wrap {
    position: relative;
    z-index: 3;
    max-width: 46rem;
    margin: 0 auto;
    padding: clamp(4rem, 13vh, 9.5rem) clamp(1.5rem, 6vw, 3rem) 5rem;
  }

  /* ============ RACK FOCUS ============ */
  /* the signature: loads out of focus, racks to sharp */

  .rack {
    opacity: 0;
    filter: blur(16px);
    transform: translateY(14px) scale(1.012);
    animation: rackin 1.6s cubic-bezier(.16,.8,.24,1) forwards;
  }
  @keyframes rackin {
    to { opacity: 1; filter: blur(0); transform: none; }
  }
  .d1 { animation-delay: .10s; }
  .d2 { animation-delay: .34s; }
  .d3 { animation-delay: .56s; }
  .d4 { animation-delay: .74s; }

  /* scroll-revealed sections: same rack, triggered on entry */
  .reveal {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(18px);
    transition:
      opacity 1.25s cubic-bezier(.16,.8,.24,1),
      filter  1.25s cubic-bezier(.16,.8,.24,1),
      transform 1.25s cubic-bezier(.16,.8,.24,1);
  }
  .reveal.in { opacity: 1; filter: blur(0); transform: none; }

  /* ============ MASTHEAD ============ */

  h1 {
    font-size: clamp(2.9rem, 9vw, 5.25rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 500;
    margin: 0;
  }
  .role {
    margin: 1.15rem 0 0;
    font-size: clamp(1rem, 2.6vw, 1.2rem);
    color: var(--muted);
  }
  .role b { color: var(--ink); font-weight: 500; }

  .lede {
    margin: 2.9rem 0 0;
    font-size: clamp(1.2rem, 3.1vw, 1.5rem);
    line-height: 1.45;
    letter-spacing: -0.015em;
    max-width: 33ch;
  }
  .body { margin: 1.5rem 0 0; color: var(--muted); max-width: 54ch; }

  /* ============ SECTIONS ============ */

  section { margin-top: clamp(3.5rem, 9vh, 5.75rem); }
  h2 {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 500;
    color: var(--faint);
    margin: 0 0 1.6rem;
    display: flex;
    align-items: center;
    gap: .9rem;
  }
  h2::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--hair), transparent);
  }

  /* ============ WORK: scattered, resolves on focus ============ */

  ol { list-style: none; margin: 0; padding: 0; }
  .item {
    position: relative;
    display: grid;
    grid-template-columns: 2.6rem 1fr auto;
    gap: 0 1rem;
    align-items: baseline;
    padding: 1.2rem .9rem 1.2rem .6rem;
    border-top: 1px solid var(--hair);
    text-decoration: none;
    filter: blur(.55px);
    opacity: .66;
    transition: opacity .55s cubic-bezier(.16,.8,.24,1),
                filter .55s cubic-bezier(.16,.8,.24,1),
                padding-left .45s cubic-bezier(.16,.8,.24,1);
  }
  ol li:last-child .item { border-bottom: 1px solid var(--hair); }
  .item::before {
    content: "";
    position: absolute;
    left: 0; top: -1px; bottom: -1px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--copper), transparent);
    transform: scaleY(0);
    transition: transform .55s cubic-bezier(.16,.8,.24,1);
  }
  .item:hover, .item:focus-visible {
    filter: blur(0);
    opacity: 1;
    padding-left: 1.15rem;
    outline: none;
  }
  .item:hover::before, .item:focus-visible::before { transform: scaleY(1); }

  .num { font-size: .78rem; color: var(--faint); font-variant-numeric: tabular-nums; }
  .name {
    font-size: clamp(1.1rem, 2.6vw, 1.32rem);
    letter-spacing: -0.015em;
    transition: color .4s ease;
  }
  .item:hover .name, .item:focus-visible .name { color: var(--peach); }
  .meta { font-size: .78rem; color: var(--faint); text-align: right; }

  /* ============ WRITING ============ */

  .piece {
    position: relative;
    display: block;
    padding: 1.05rem .6rem;
    border-top: 1px solid var(--hair);
    text-decoration: none;
    opacity: .78;
    transition: opacity .45s ease, padding-left .45s cubic-bezier(.16,.8,.24,1);
  }
  .piece:last-of-type { border-bottom: 1px solid var(--hair); }
  .piece:hover, .piece:focus-visible { opacity: 1; padding-left: 1.15rem; outline: none; }
  .piece::before {
    content: "";
    position: absolute;
    left: 0; top: -1px; bottom: -1px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--copper), transparent);
    transform: scaleY(0);
    transition: transform .5s cubic-bezier(.16,.8,.24,1);
  }
  .piece:hover::before, .piece:focus-visible::before { transform: scaleY(1); }
  .piece-title { display: block; letter-spacing: -0.01em; transition: color .4s ease; }
  .piece:hover .piece-title, .piece:focus-visible .piece-title { color: var(--peach); }
  .piece-date { display: block; font-size: .76rem; color: var(--faint); margin-top: .3rem; }

  /* ============ ELSEWHERE ============ */

  .links { display: flex; flex-wrap: wrap; gap: 1.9rem; margin: 0; padding: 0; list-style: none; }
  .links a {
    position: relative;
    text-decoration: none;
    color: var(--muted);
    padding-bottom: 3px;
    transition: color .4s ease;
  }
  .links a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--copper);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s cubic-bezier(.16,.8,.24,1);
  }
  .links a:hover, .links a:focus-visible { color: var(--ink); outline: none; }
  .links a:hover::after, .links a:focus-visible::after { transform: scaleX(1); }

  footer {
    margin-top: clamp(4rem, 10vh, 6rem);
    padding-top: 1.8rem;
    border-top: 1px solid var(--hair);
    font-size: .76rem;
    color: var(--faint);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }
  footer a { text-decoration: none; transition: color .4s ease; }
  footer a:hover { color: var(--muted); }

  @media (max-width: 30rem) {
    .item { grid-template-columns: 2rem 1fr; }
    .meta { grid-column: 2; text-align: left; margin-top: .2rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .field, .aperture, .grain { animation: none; }
    .rack { animation: none; opacity: 1; filter: none; transform: none; }
    .reveal { opacity: 1; filter: none; transform: none; transition: none; }
    .item { filter: none; opacity: 1; }
    * { transition-duration: .01ms !important; }
  }

  /* ============ SUBPAGE ============ */

  .backlink {
    display: inline-block;
    margin: 0 0 2.6rem;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--faint);
    text-decoration: none;
    transition: color .4s ease;
  }
  .backlink:hover, .backlink:focus-visible { color: var(--copper); outline: none; }

  .prose { margin-top: 1.6rem; }
  .prose p {
    margin: 0 0 1.15rem;
    color: var(--muted);
    max-width: 60ch;
  }
  .prose p:first-of-type { color: var(--ink); }

  /* ============ TIMELINE ============ */

  .tl { list-style: none; margin: 0; padding: 0; }
  .tl li {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 0 1.4rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--hair);
  }
  .tl li:last-child { border-bottom: 1px solid var(--hair); }
  .tl time {
    font-size: .78rem;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
    padding-top: .22rem;
  }
  .tl-role { display: block; letter-spacing: -.01em; }
  .tl-org { display: block; font-size: .88rem; color: var(--muted); margin-top: .15rem; }
  .tl-note { display: block; font-size: .88rem; color: var(--faint); margin-top: .4rem; max-width: 52ch; }

  /* ============ FAQ ============ */

  .faq { margin: 0; }
  .faq dt {
    font-size: 1.02rem;
    letter-spacing: -.01em;
    color: var(--ink);
    margin: 0 0 .55rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--hair);
  }
  .faq dt:first-of-type { padding-top: 0; border-top: 0; }
  .faq dd {
    margin: 0 0 1.5rem;
    color: var(--muted);
    max-width: 58ch;
  }

  /* ============ FACTS ============ */

  .facts { list-style: none; margin: 0; padding: 0; }
  .facts li {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 0 1.4rem;
    padding: .72rem 0;
    border-top: 1px solid var(--hair);
    font-size: .94rem;
  }
  .facts li:last-child { border-bottom: 1px solid var(--hair); }
  .facts .k { color: var(--faint); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; padding-top: .18rem; }
  .facts .v { color: var(--muted); }
  .facts .v a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--hair); }
  .facts .v a:hover { color: var(--ink); }
  .facts address { font-style: normal; display: inline; }

  @media (max-width: 34rem) {
    .tl li, .facts li { grid-template-columns: 1fr; gap: .3rem; }
    .tl time { padding-top: 0; }
  }

  .more {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid var(--hair);
    padding-bottom: 2px;
    transition: color .4s ease, border-color .4s ease;
  }
  .more:hover, .more:focus-visible { color: var(--ink); border-color: var(--copper); outline: none; }

  /* ============ PORTRAIT ============ */

  .portrait {
    display: block;
    width: 132px;
    height: auto;
    margin: 0 0 1.9rem;
    /* the source is a cutout with a transparent background, so it sits directly
       on the field with no plate behind it. Desaturated slightly and warmed by
       the copper key so it belongs to the same light as the rest of the page. */
    filter: grayscale(1) contrast(1.04) brightness(.96);
    opacity: .95;
    /* dissolve the bottom crop into the field instead of ending on a hard edge */
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
  }
  @media (prefers-reduced-motion: reduce) {
    .portrait { opacity: .92; }
  }