:root{
    --paper:      #F6F5F1;
    --ink:        #1B1F23;
    --ink-soft:   #5B6168;
    --pine:       #2C5F4E;
    --gold:       #A9822F;
    --pine-tint:  #E3ECE7;
    --gold-tint:  #F1E9D3;
    --ink-tint:   #E9E7E2;
    --line:       #DEDAD0;
    --blue: #4A3AFF;

    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Inter', -apple-system, sans-serif;
  }

  *{ box-sizing: border-box; }

  html, body{ height: 100%; }

  body{
    margin: 0.5rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  a{ color: inherit; }
  a:focus-visible, button:focus-visible{
    outline: 2px solid var(--pine);
    outline-offset: 3px;
  }

  .wrap{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
  }

  /* ---------- intro ---------- */

  .intro{ padding: 3.5rem 0 1.5rem; }

  .intro h1{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.4rem, 9vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
    margin: 0 0 0.6rem;
  }

  .role{
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--blue);
    margin: 0 0 1.1rem;
  }

  .description{
    font-size: 1.05rem;
    color: var(--ink-soft);
    max-width: 54ch;
    margin: 0;
  }

  /* ---------- project grid ---------- */

  main{ flex: 1 0 auto; }

  .section-heading{
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.4rem;
    margin: 0 0 1.25rem;
  }

  .work{
    padding: 2.5rem 0;
    border-top: 1px solid var(--line);
  }

  .grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .project{
    margin: 0;
  }

  .project .image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
    transition: transform 0.2s ease;
  }

  .project:hover .image { transform: translateY(-3px); }
  .project .accent{ transition: fill 0.2s ease; }
  .project:hover .accent{ fill: var(--pine); }

  .project figcaption{ margin-top: 0.85rem; }

  .project-title{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    margin: 0 0 0.2rem;
  }

  .project-meta{
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin: 0;
  }

  /* ---------- writing list ---------- */

  .writing{
    padding: 2.5rem 0 3rem;
    border-top: 1px solid var(--line);
  }

  .articles{
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
  }

  .articles li{ border-bottom: 1px solid var(--line); }

  .articles a{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 1rem 0;
    text-decoration: none;
  }

  .article-title{ font-size: 1rem; }
  .articles a:hover .article-title{ color: var(--pine); }

  .article-meta{
    font-size: 0.8rem;
    color: var(--ink-soft);
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ---------- footer ---------- */

  footer{
    border-top: 1px solid var(--line);
    padding: 1.5rem 0 2rem;
  }

  footer .wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--ink-soft);
  }

  .github-link {  display: inline-flex;  align-items: center;  gap: 0.5rem;  color: #24292f;  font-size: 1rem;  font-weight: 600;  text-decoration: none;}
  .github-icon {  width: 1.5rem;  height: 1.5rem;}
  .github-link:hover {  color: #0969da;}
  .github-link:focus-visible {  outline: 3px solid #0969da;  outline-offset: 4px;}

  @media (prefers-reduced-motion: reduce){
    *{ transition: none !important; }
  }

  /* ---------- desktop ---------- */

  @media (min-width: 780px){

    .wrap{ padding: 0 3rem; }

    .intro{ padding: 6rem 0 2.5rem; }
    .description{ font-size: 1.15rem; }

    .work{ padding: 3.5rem 0; }
    .grid{ grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; }

    .writing{ padding: 3.5rem 0 4rem; }
    .section-heading{ font-size: 1.6rem; }

    footer{ padding: 1.75rem 0; }
  }