:root{
    --paper:#FAFAF8;
    --ink:#1C1C1E;
    --ink-soft:#3A3A3D;
    --muted:#8A8A8E;
    --line:#E4E4E0;
    --accent:#3454D1;
    --accent-soft:#EDF0FC;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    font-size:16px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3{
    font-family:'Space Grotesk',sans-serif;
    margin:0;
    letter-spacing:-0.01em;
  }

  .mono{
    font-family:'IBM Plex Mono',monospace;
    letter-spacing:0.02em;
  }

  a{color:inherit;}

  .wrap{
    max-width:960px;
    margin:0 auto;
    padding:0 32px;
  }

  /* ---------- Nav ---------- */
  header{
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(250,250,248,0.86);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:960px;
    margin:0 auto;
    padding:18px 32px;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .nav-inner .name{
    font-size:15px;
    font-weight:600;
  }
  .nav-links{
    display:flex;
    gap:28px;
    font-size:13px;
    color:var(--muted);
  }
  .nav-links a{text-decoration:none; transition:color .15s ease;}
  .nav-links a:hover, .nav-links a:focus-visible{color:var(--ink);}

  /* ---------- Hero ---------- */
  .hero{
    padding:120px 0 96px;
    border-bottom:1px solid var(--line);
    position:relative;
  }
  .eyebrow{
    font-size:13px;
    color:var(--accent);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:24px;
  }
  .eyebrow .tick{
    display:inline-block;
    width:28px;
    height:1px;
    background:var(--accent);
  }
  .hero h1{
    font-size:clamp(38px, 6vw, 64px);
    font-weight:600;
    line-height:1.08;
    max-width:16ch;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--accent);
  }
  .hero p.lede{
    margin-top:28px;
    max-width:46ch;
    font-size:18px;
    color:var(--ink-soft);
  }
  .hero .meta-row{
    margin-top:48px;
    display:flex;
    gap:36px;
    flex-wrap:wrap;
  }
  .meta-item{
    font-size:12px;
    color:var(--muted);
  }
  .meta-item span{
    display:block;
    margin-top:4px;
    font-size:14px;
    color:var(--ink);
    font-family:'Inter',sans-serif;
  }

  /* ---------- Section labels ---------- */
  .section-label{
    font-size:12px;
    color:var(--muted);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:40px;
  }
  .section-label .tick{
    width:20px;
    height:1px;
    background:var(--line);
  }
  section{padding:96px 0;}
  section + section{border-top:1px solid var(--line);}

  /* ---------- Work ---------- */
  .project{
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:56px;
    align-items:start;
    padding:56px 0;
  }
  .project + .project{border-top:1px solid var(--line);}
  .project:first-child{padding-top:0;}

  .project-figure{
    position:relative;
    border:1px solid var(--line);
    background:#F1F1EE;
    aspect-ratio:4/3;
    overflow:hidden;
  }
  .project-figure img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .project-figure .placeholder{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    color:var(--muted);
    text-align:center;
    padding:24px;
  }

  .project-body h3{
    font-size:26px;
    font-weight:600;
    margin-bottom:14px;
  }
  .project-body p.summary{
    color:var(--ink-soft);
    font-size:15px;
    margin-bottom:24px;
  }

  .spec-grid{
    display:grid;
    grid-template-columns:repeat(3,auto);
    gap:8px 28px;
    margin-bottom:24px;
    padding:16px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .spec-grid dt{
    font-size:11px;
    color:var(--muted);
    grid-row:1;
  }
  .spec-grid dd{
    font-size:13px;
    margin:4px 0 0;
    grid-row:2;
  }

  .pull-quote{
    margin:0 0 24px;
    padding-left:18px;
    border-left:2px solid var(--accent);
    font-size:14px;
    font-style:normal;
    color:var(--ink-soft);
  }

  .project-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    text-decoration:none;
    color:var(--accent);
    border-bottom:1px solid transparent;
    transition:border-color .15s ease;
  }
  .project-link:hover, .project-link:focus-visible{border-color:var(--accent);}

  /* ---------- About ---------- */
  .about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
  }
  .about-grid p{
    font-size:16px;
    color:var(--ink-soft);
    margin:0 0 18px;
  }
  .about-list{
    list-style:none;
    margin:0;
    padding:0;
  }
  .about-list li{
    display:flex;
    justify-content:space-between;
    padding:14px 0;
    border-top:1px solid var(--line);
    font-size:14px;
  }
  .about-list li:last-child{border-bottom:1px solid var(--line);}
  .about-list .role{color:var(--muted);}

  /* ---------- Contact ---------- */
  .contact h2{
    font-size:clamp(32px,5vw,48px);
    font-weight:600;
    max-width:14ch;
    margin-bottom:32px;
  }
  .contact-links{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
  }
  .contact-links a{
    text-decoration:none;
    font-size:14px;
    padding:14px 22px;
    border:1px solid var(--line);
    transition:background .15s ease, border-color .15s ease;
  }
  .contact-links a.primary{
    background:var(--ink);
    color:var(--paper);
    border-color:var(--ink);
  }
  .contact-links a:not(.primary):hover,
  .contact-links a:not(.primary):focus-visible{
    background:var(--accent-soft);
    border-color:var(--accent);
  }

  footer{
    padding:32px 0 48px;
    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:var(--muted);
  }

  /* ---------- Reveal on scroll ---------- */
  .reveal{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .6s ease, transform .6s ease;
  }
  .reveal.is-visible{
    opacity:1;
    transform:none;
  }
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none; transition:none;}
    html{scroll-behavior:auto;}
  }

  /* ---------- Responsive ---------- */
  @media (max-width:800px){
    .nav-links{display:none;}
    .project{grid-template-columns:1fr;}
    .about-grid{grid-template-columns:1fr;}
    .hero{padding:88px 0 64px;}
    section{padding:64px 0;}
  }

  /* ---------- Case study pages ---------- */
  .back-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--muted);
    text-decoration:none;
    margin-bottom:40px;
    transition:color .15s ease;
  }
  .back-link:hover, .back-link:focus-visible{color:var(--accent);}

  .case-body h2{
    font-size:22px;
    font-weight:600;
    margin-bottom:18px;
  }
  .case-body p{
    font-size:16px;
    color:var(--ink-soft);
    margin:0 0 18px;
    max-width:68ch;
  }
  .case-body ul{
    margin:0 0 24px;
    padding-left:20px;
    color:var(--ink-soft);
  }
  .case-body li{margin-bottom:8px;}

  .issue{
    padding:40px 0;
  }
  .issue + .issue{border-top:1px solid var(--line);}
  .issue-eyebrow{
    font-size:12px;
    color:var(--accent);
    margin-bottom:14px;
  }

  .stat-grid{
    display:flex;
    flex-wrap:wrap;
    gap:48px;
    padding:32px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    margin:8px 0 40px;
  }
  .stat .num{
    font-family:'Space Grotesk',sans-serif;
    font-size:40px;
    font-weight:600;
    color:var(--accent);
    line-height:1;
  }
  .stat .label{
    font-size:12px;
    color:var(--muted);
    margin-top:8px;
    max-width:22ch;
  }

  .case-figure{
    border:1px solid var(--line);
    background:#F1F1EE;
    overflow:hidden;
    position:relative;
    margin-bottom:20px;
  }
  .case-figure img{width:100%; height:auto; object-fit:contain; display:block;}
  .case-figure .placeholder{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    color:var(--muted);
    text-align:center;
    padding:24px;
  }
  .case-figure.mobile{
    aspect-ratio:auto;
    max-width:320px;
    margin:0 auto 20px;
    background:#F1F1EE;
    padding:16px;
  }
  .case-figure.mobile img{
    object-fit:contain;
    height:auto;
  }

  .case-figure-caption{
    font-size:13px;
    color:var(--muted);
    margin:-8px 0 32px;
  }

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