*{box-sizing:border-box}
  html,body{margin:0;padding:0;background:#fff;color:#111;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;-webkit-font-smoothing:antialiased}
  a{color:#111;text-decoration:none}
  a:hover{text-decoration:underline}
  img{display:block;width:100%;height:100%;object-fit:cover}
  figure{margin:0}

  nav{position:fixed;top:0;left:0;width:230px;height:100vh;padding:34px 0 0 38px;display:flex;flex-direction:column;gap:9px;align-items:flex-start;z-index:20;background:#fff}
  nav a.item{font:600 14px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif}
  nav a.item.off{color:#a5a5a5}
  nav a.ig{display:flex;align-items:center;margin-top:3px;color:#a5a5a5}
  nav a.ig:hover{color:#111}
  nav .views{margin-top:auto;display:flex;flex-direction:column;gap:5px;font:600 10px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif;letter-spacing:.06em;text-transform:uppercase}
  nav .views button{all:unset;cursor:pointer;color:#a5a5a5}
  nav .views button:hover,nav .views button[aria-pressed="true"]{color:#111}
  nav .foot{margin-top:22px;padding:0 0 30px;font:400 10.5px/1.6 'Helvetica Neue', Helvetica, Arial, sans-serif;color:#a5a5a5;letter-spacing:.02em}

  main{margin-left:230px;padding:26px 40px 150px}
  .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px;row-gap:28px;align-items:start;max-width:1680px}
  .grid .c1.r1.s1{grid-column:1;grid-row:1 / span 1}
  .grid .c2.r1.s1{grid-column:2;grid-row:1 / span 1}
  .grid .c3.r1.s1{grid-column:3;grid-row:1 / span 1}
  .grid .c1.r2.s1{grid-column:1;grid-row:2 / span 1}
  .grid .c2.r2.s2{grid-column:2;grid-row:2 / span 2}
  .grid .c3.r3.s1{grid-column:3;grid-row:3 / span 1}
  .grid .c1.r4.s1{grid-column:1;grid-row:4 / span 1}
  .grid .c2.r4.s1{grid-column:2;grid-row:4 / span 1}
  .grid .c3.r4.s1{grid-column:3;grid-row:4 / span 1}
  .grid .c2.r5.s1{grid-column:2;grid-row:5 / span 1}
  .grid .c3.r5.s2{grid-column:3;grid-row:5 / span 2}
  .grid .c1.r6.s1{grid-column:1;grid-row:6 / span 1}
  .grid .c2.r7.s2{grid-column:2;grid-row:7 / span 2}
  .grid .c3.r7.s1{grid-column:3;grid-row:7 / span 1}
  .grid .c1.r8.s1{grid-column:1;grid-row:8 / span 1}
  .grid .c1.r9.s1{grid-column:1;grid-row:9 / span 1}
  .grid .c2.r9.s1{grid-column:2;grid-row:9 / span 1}
  .grid .c3.r9.s1{grid-column:3;grid-row:9 / span 1}
  .grid .c1.r10.s1{grid-column:1;grid-row:10 / span 1}
  .grid .c2.r10.s2{grid-column:2;grid-row:10 / span 2}
  .grid .c3.r11.s1{grid-column:3;grid-row:11 / span 1}
  .grid .c1.r12.s1{grid-column:1;grid-row:12 / span 1}
  .grid .c2.r12.s1{grid-column:2;grid-row:12 / span 1}
  .grid .c3.r12.s1{grid-column:3;grid-row:12 / span 1}
  .grid .c2.r13.s2{grid-column:2;grid-row:13 / span 2}
  .grid .c3.r13.s1{grid-column:3;grid-row:13 / span 1}
  .grid .c1.r14.s1{grid-column:1;grid-row:14 / span 1}
  .grid .c1.r15.s1{grid-column:1;grid-row:15 / span 1}
  .grid .c2.r15.s1{grid-column:2;grid-row:15 / span 1}
  .grid .c3.r15.s2{grid-column:3;grid-row:15 / span 2}
  .grid .c1.r17.s2{grid-column:1;grid-row:17 / span 2}
  .grid .c2.r17.s1{grid-column:2;grid-row:17 / span 1}
  .grid .c3.r17.s1{grid-column:3;grid-row:17 / span 1}
  .grid .c1.r19.s1{grid-column:1;grid-row:19 / span 1}
  .grid .c2.r19.s2{grid-column:2;grid-row:19 / span 2}
  .grid .c3.r20.s1{grid-column:3;grid-row:20 / span 1}
  .grid .c1.r21.s2{grid-column:1;grid-row:21 / span 2}
  .grid .c2.r22.s1{grid-column:2;grid-row:22 / span 1}
  .grid .c3.r21.s2{grid-column:3;grid-row:21 / span 2}

  .grid.as-column{grid-template-columns:minmax(0,1fr);row-gap:112px;max-width:820px;margin:0 auto}
  .grid.as-column figure{grid-column:auto !important;grid-row:auto !important}

  .bio{max-width:640px;display:flex;flex-direction:column;gap:16px}
  .bio p{margin:0;font:400 14px/1.68 'Helvetica Neue', Helvetica, Arial, sans-serif;text-wrap:pretty}
  .bio p.sub{color:#4a4a4a}
  .meta{display:grid;grid-template-columns:104px minmax(0,1fr);row-gap:12px;column-gap:22px;font:400 12.5px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;padding-top:20px;border-top:1px solid #e6e6e6}
  .meta .k{font:600 10px/1.6 'Helvetica Neue', Helvetica, Arial, sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#a5a5a5}
  .contact{display:flex;flex-direction:column;gap:7px;font:400 13px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;padding-top:20px;border-top:1px solid #e6e6e6}
  .contact a.ig{display:inline-flex;align-items:center;gap:7px}

  @media (max-width:1120px){
    .grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:20px}
    .grid figure{grid-column:auto !important;grid-row:auto !important}
  }
  @media (max-width:760px){
    nav{position:fixed;width:100%;height:auto;padding:13px 16px;flex-direction:row;gap:16px;align-items:center;border-bottom:1px solid #ececec}
    nav .foot{display:none}
    nav .views{margin:0 0 0 auto;flex-direction:row;gap:11px}
    .grid.as-column{row-gap:48px}
    main{margin-left:0;padding:62px 12px 80px}
    .grid{column-gap:10px;row-gap:10px}
    .meta{grid-template-columns:minmax(0,1fr)}
  }