:root{
    --bg: #F6F7F5;
    --ink: #15181A;
    --ink-soft: #55605C;
    --line: #D8DCD8;
    --accent: #3A5A54;
    --paper: #FFFFFF;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', -apple-system, sans-serif;
    font-weight:400;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;}
  .wrap, .wrap-wide{
    max-width:1360px;
    margin:0 auto;
    padding:0 32px;
  }

  header{
    padding:28px 0;
    border-bottom:1px solid var(--line);
  }
  nav.wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .nav-name{
    font-family:'Fraunces', serif;
    font-size:19px;
    font-weight:560;
    letter-spacing:-0.01em;
  }
  .nav-links{
    display:flex;
    gap:28px;
    font-size:14px;
    color:var(--ink-soft);
  }
  .nav-links a{text-decoration:none;}
  .nav-links a:hover{color:var(--ink);}

  .hero{
    padding-top:96px;
    padding-bottom:88px;
  }
  .hero-eyebrow{
    font-size:14px;
    color:var(--ink-soft);
    margin:0 0 18px;
  }
  h1{
    font-family:'Fraunces', serif;
    font-weight:450;
    font-style:italic;
    font-size:clamp(34px, 5.6vw, 54px);
    line-height:1.12;
    letter-spacing:-0.01em;
    margin:0 0 28px;
    max-width:16ch;
  }
  }
  .hero-lede{
    font-size:18px;
    color:var(--ink-soft);
    max-width:54ch;
    margin:0 0 36px;
  }
  .hero-meta{
    display:flex;
    gap:36px;
    font-size:14px;
    color:var(--ink-soft);
    flex-wrap:wrap;
  }
  .hero-meta strong{
    display:block;
    color:var(--ink);
    font-weight:500;
    margin-bottom:2px;
  }

  .section{
    padding:72px 0;
    border-top:1px solid var(--line);
  }
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:44px;
    gap:24px;
  }
  .section-head h2{
    font-family:'Fraunces', serif;
    font-weight:450;
    font-size:28px;
    margin:0;
    letter-spacing:-0.01em;
  }
  .section-head p{
    color:var(--ink-soft);
    font-size:14px;
    margin:0;
    max-width:28ch;
    text-align:right;
  }

  .work-row{
    display:grid;
    grid-template-columns:120px 1fr auto;
    gap:24px;
    align-items:baseline;
    padding:26px 0;
    border-top:1px solid var(--line);
  }
  .section-head + .work-row{border-top:none;}
  .work-year{
    font-size:14px;
    color:var(--ink-soft);
  }
  .work-title{
    font-family:'Fraunces', serif;
    font-size:22px;
    font-weight:450;
  }
  .work-tag{
    font-size:14px;
    color:var(--ink-soft);
    white-space:nowrap;
  }
  .work-desc{
    grid-column:2 / 3;
    font-size:15px;
    color:var(--ink-soft);
    max-width:52ch;
    margin-top:6px;
  }

  .about-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:56px;
  }
  .about-body p{
    font-size:16px;
    color:var(--ink-soft);
    max-width:56ch;
    margin:0 0 18px;
  }
  .about-body p:last-child{margin-bottom:0;}
  .facts dt{
    font-size:13px;
    color:var(--ink-soft);
    margin-bottom:4px;
  }
  .facts dd{
    margin:0 0 22px;
    font-size:15px;
  }
  .facts dd:last-child{margin-bottom:0;}

  .contact{
    padding:80px 0 90px;
    border-top:1px solid var(--line);
  }
  .contact h2{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:450;
    font-size:clamp(30px, 4.6vw, 42px);
    margin:0 0 32px;
    max-width:18ch;
  }
  .contact-links{
    display:flex;
    gap:40px;
    flex-wrap:wrap;
  }
  .contact-links a{
    font-size:15px;
    text-decoration:none;
    border-bottom:1px solid var(--line);
    padding-bottom:2px;
  }
  .contact-links a:hover{border-color:var(--accent); color:var(--accent);}

  footer{
    padding:28px 0 48px;
    font-size:13px;
    color:var(--ink-soft);
  }

  @media (max-width:640px){
    .hero{padding-top:64px; padding-bottom:56px;}
    .nav-links{gap:18px; font-size:13px;}
    .work-row{grid-template-columns:1fr; gap:6px;}
    .work-desc{grid-column:auto;}
    .about-grid{grid-template-columns:1fr; gap:36px;}
    .section-head{flex-direction:column; align-items:flex-start;}
    .section-head p{text-align:left;}
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .project-img img{transition:none;}
  }


  /* =========================================================
     PROJECT CARDS (index page)
  ========================================================= */
  .projects{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:56px 32px;
  }
  .project{display:block; text-decoration:none; color:inherit;}
  .project.big{grid-column:1 / -1;}

  .project-img{
    overflow:hidden;
    background:var(--paper);
  }
  .project-img img{
    display:block;
    width:100%;
    aspect-ratio:16 / 10;
    object-fit:cover;
    transition:transform .6s cubic-bezier(.2,.8,.2,1);
  }
  .project.big .project-img img{aspect-ratio:16 / 9;}
  .project:hover .project-img img{transform:scale(1.03);}

  .project-info{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:24px;
    padding-top:16px;
  }
  .project-year{font-size:14px; color:var(--ink-soft);}
  .project-title{
    font-family:'Fraunces', serif;
    font-size:22px;
    font-weight:450;
    margin:2px 0 0;
    letter-spacing:-0.01em;
  }
  .project:hover .project-title{text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px;}
  .project-tag{font-size:14px; color:var(--ink-soft); text-align:right;}

  /* empty image slot */
  .placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:24px;
    color:var(--ink-soft);
    font-size:14px;
    border:2px dashed var(--line);
    background:transparent;
  }
  .project-img.placeholder{aspect-ratio:16 / 10;}
  .project.big .project-img.placeholder{aspect-ratio:16 / 9;}

  /* =========================================================
     PROJECT PAGES
  ========================================================= */
  .back{
    display:inline-block;
    margin-top:40px;
    font-size:14px;
    color:var(--ink-soft);
    text-decoration:none;
  }
  .back:hover{color:var(--ink);}

  .project-head{padding:56px 0 56px;}
  .project-head h1{max-width:none; margin-bottom:20px;}
  .project-lede{
    font-size:18px;
    color:var(--ink-soft);
    max-width:62ch;
    margin:0;
  }
  .project-meta{
    display:flex;
    flex-wrap:wrap;
    gap:16px 56px;
    margin:36px 0 0;
    font-size:15px;
  }
  .project-meta dt{font-size:13px; color:var(--ink-soft); margin:0 0 3px;}
  .project-meta dd{margin:0; font-weight:500;}

  .gallery{
    display:flex;
    flex-direction:column;
    gap:32px;
    padding-bottom:96px;
  }
  .shot{margin:0;}
  .shot img{
    display:block;
    width:100%;
    height:auto;
  }
  .shot.narrow{max-width:560px; width:100%; margin:0 auto;}
  figcaption{font-size:13px; color:var(--ink-soft); margin-top:10px;}

  .pair{display:grid; grid-template-columns:1fr 1fr; gap:32px;}
  .pair .shot img{aspect-ratio:3 / 2; object-fit:cover;}

  .phones{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
  }
  .phones.cols-2{grid-template-columns:repeat(2, 1fr); max-width:940px; margin:0 auto; width:100%;}

  /* Images with a white background melt into the page instead of sitting in a white box */
  .phones img, .blend img{mix-blend-mode:multiply;}
  .project-img.blend{background:transparent;}
  .project-img.blend img{mix-blend-mode:multiply;}


  /* Coloured backdrop for frameless app screens (used on the knitting page) */
  .backdrop{background:#DCE4DE; padding:56px 32px;}
  .backdrop .phones{max-width:1080px; margin:0 auto; gap:32px;}
  .backdrop .phones img{mix-blend-mode:normal;}
  .backdrop2{background:#DCE4DE}

  .shot.placeholder{aspect-ratio:16 / 9;}

  .text-block{
    max-width:62ch;
    font-size:17px;
    color:var(--ink-soft);
    margin:16px 0;
  }

  /* Previous / next project, right under "All work" */
  .project-switch{
    display:flex;
    justify-content:space-between;
    gap:24px;
    margin-top:22px;
  }
  .project-switch a{display:block; max-width:48%; text-decoration:none;}
  .project-switch .label{display:block; font-size:13px; color:var(--ink-soft); margin-bottom:2px;}
  .project-switch .name{font-family:'Fraunces', serif; font-size:19px; font-weight:450; line-height:1.25;}
  .project-switch a:hover .name{text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px;}
  .project-switch .next{text-align:right; margin-left:auto;}

  @media (max-width:900px){
    .projects{gap:44px 24px;}
    .project-title{font-size:22px;}
  }
  @media (max-width:760px){
    .wrap, .wrap-wide{padding-left:24px; padding-right:24px;}
    .projects{grid-template-columns:1fr;}
    .project-info{flex-direction:column; gap:4px;}
    .project-tag{text-align:left;}
    .pair{grid-template-columns:1fr;}
    .phones, .phones.cols-2{grid-template-columns:repeat(2, 1fr); gap:12px;}
    .project-switch{gap:16px;}
    .project-switch .name{font-size:16px;}
    .backdrop{padding:32px 20px;}
  }