:root{
    --ink: #1B1B18;
    --ink-soft: #4A4740;
    --paper: #EDEAE1;
    --paper-raised: #F4F2EC;
    --brick: #B33A2F;
    --stone: #8C877C;
    --line: #D8D3C7;
  }

  @media (prefers-color-scheme: dark){
    :root{
      --ink: #EDEAE1;
      --ink-soft: #B4AFA3;
      --paper: #1A1917;
      --paper-raised: #232220;
      --brick: #D9584A;
      --stone: #8F8A7E;
      --line: #33312B;
    }
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  html{scroll-behavior:smooth;}

  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Serif', serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  ::selection{ background:var(--brick); color:var(--paper); }

  a{ color:inherit; }

  .wrap{
    max-width:760px;
    margin:0 auto;
    padding:0 28px;
  }

  /* ---------- HERO ---------- */

  .hero{
    padding:15vh 0 12vh;
  }

  .mark{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:clamp(72px, 16vw, 168px);
    letter-spacing:-0.03em;
    line-height:0.85;
    display:flex;
    align-items:center;
    gap:0.02em;
    margin-bottom:36px;
    animation: rise 0.9s cubic-bezier(.16,1,.3,1) both;
  }

  .mark .cursor{
    display:inline-block;
    width:0.5em;
    height:0.78em;
    background:var(--brick);
    align-self:center;
    margin-left:0.06em;
    animation: blink 1.1s step-end infinite;
  }

  @keyframes blink{
    0%, 45%{ opacity:1; }
    50%, 95%{ opacity:0; }
    100%{ opacity:1; }
  }

  .mark .gloss{
    font-size:0.14em;
    font-family:'IBM Plex Mono', monospace;
    color:var(--stone);
    letter-spacing:0.08em;
    margin-left:0.5em;
    align-self:flex-end;
    margin-bottom:0.9em;
    font-weight:400;
    line-height:1.4;
  }

  .kicker{
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--stone);
    margin-bottom:18px;
    animation: rise 0.9s cubic-bezier(.16,1,.3,1) both;
    animation-delay:0.05s;
  }

  .lede{
    font-size:clamp(19px, 2.4vw, 23px);
    max-width:38ch;
    font-weight:400;
    animation: rise 0.9s cubic-bezier(.16,1,.3,1) both;
    animation-delay:0.15s;
  }

  .lede em{
    font-style:normal;
    color:var(--brick);
  }

  @keyframes rise{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
  }

  @media (prefers-reduced-motion: reduce){
    .mark, .kicker, .lede{ animation:none; }
    .mark .cursor{ animation:none; opacity:1; }
    html{ scroll-behavior:auto; }
  }

  /* ---------- SECTION SCAFFOLDING ---------- */

  section{
    padding:64px 0;
    border-top:1px solid var(--line);
  }

  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:32px;
    gap:16px;
  }

  .section-title{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:22px;
    letter-spacing:-0.01em;
  }

  .section-label{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    color:var(--stone);
    letter-spacing:0.08em;
    text-transform:uppercase;
    white-space:nowrap;
  }

  .prose p{
    font-size:17px;
    max-width:58ch;
  }

  .prose p + p{ margin-top:16px; }

  .prose a{
    text-decoration:underline;
    text-decoration-color:var(--line);
    text-underline-offset:3px;
    transition:text-decoration-color 0.15s ease, color 0.15s ease;
  }

  .prose a:hover{
    color:var(--brick);
    text-decoration-color:var(--brick);
  }

  /* ---------- PATH ---------- */

  .path-list{ list-style:none; }

  .path-item{
    display:grid;
    grid-template-columns:110px 1fr;
    gap:20px;
    padding:22px 0;
    border-top:1px solid var(--line);
    align-items:baseline;
  }

  .path-item:first-child{ border-top:none; padding-top:0; }

  .path-step{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    color:var(--stone);
    letter-spacing:0.06em;
  }

  .path-body h3{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:17px;
    margin-bottom:6px;
  }

  .path-body p{
    font-size:15.5px;
    color:var(--ink-soft);
    max-width:52ch;
  }

  /* ---------- PROJECTS ---------- */

  .proj-intro{
    font-size:15.5px;
    color:var(--ink-soft);
    max-width:56ch;
    margin-bottom:28px;
  }

  .proj-intro a{
    text-decoration:underline;
    text-decoration-color:var(--line);
    text-underline-offset:3px;
    transition:text-decoration-color 0.15s ease, color 0.15s ease;
  }

  .proj-intro a:hover{ color:var(--brick); text-decoration-color:var(--brick); }

  .proj-list{ list-style:none; }

  .proj-item{
    padding:22px 0;
    border-top:1px solid var(--line);
  }

  .proj-item:first-child{ border-top:none; padding-top:0; }

  .proj-head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:6px;
  }

  .proj-head h3{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:17px;
  }

  .proj-links{
    display:flex;
    gap:14px;
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
  }

  .proj-links a{
    color:var(--stone);
    text-decoration:none;
    white-space:nowrap;
    transition:color 0.15s ease;
  }

  .proj-links a:hover{ color:var(--brick); }

  .proj-links a:focus-visible{
    outline:2px solid var(--brick);
    outline-offset:2px;
  }

  .proj-item > p{
    font-size:15.5px;
    color:var(--ink-soft);
    max-width:56ch;
  }

  /* ---------- CONTACT ---------- */

  .arrow{
    display:inline-block;
    width:0.72em;
    height:0.72em;
    vertical-align:-0.1em;
    flex:0 0 auto;
  }

  .contact{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:13px;
  }

  .contact-link{
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    color:var(--ink);
    text-decoration:none;
    transition:color 0.15s ease;
  }

  .contact-link span{
    text-decoration:underline;
    text-decoration-color:var(--line);
    text-underline-offset:3px;
    transition:text-decoration-color 0.15s ease;
  }

  .contact-link:hover{ color:var(--brick); }
  .contact-link:hover span{ text-decoration-color:var(--brick); }

  .contact-link:focus-visible{
    outline:2px solid var(--brick);
    outline-offset:2px;
  }

  .contact-line{
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    color:var(--stone);
    letter-spacing:0.01em;
  }

  .contact-line .addr{ color:var(--ink); }

  /* ---------- FOOTER ---------- */

  footer{
    padding:48px 0 64px;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
  }

  .footer-note{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    color:var(--stone);
    letter-spacing:0.02em;
  }

  .footer-note .brick{ color:var(--brick); }

  @media (max-width:560px){
    .path-item{ grid-template-columns:1fr; gap:6px; }
    .hero{ padding:12vh 0 8vh; }
    .mark{ flex-wrap:wrap; }
    .mark .gloss{ margin-left:0; margin-bottom:0; flex-basis:100%; margin-top:0.8em; }
  }