:root {
  --paper: #f4f1e9;
  --ink: #171715;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.site-header {
  position: fixed;
  z-index: 100;
  top: 0; left: 0; width: 100%;
  padding: 28px 34px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .02em;
  mix-blend-mode: normal;
}
.site-header a { text-decoration: none; }
.site-header nav { display: flex; gap: 34px; }
.site-header a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* homepage */
.home {
  min-height: 100vh;
  overflow: hidden;
  padding: 150px 0 100px;
}
.text-object {
  width: 100%;
  margin-left: 0;
  transform: rotate(-0.5deg);
  transform-origin: left top;
  font-size: clamp(38px, 5.15vw, 86px);
  line-height: .98;
  letter-spacing: -.045em;
}
.text-object p { margin: 0 0 .8em; }
.text-object p + p { margin-left: 2.5vw; max-width: 94%; }

/* selected works */
.works-page {
  padding: 150px 0 18vw;
  overflow: hidden;
}
.cluster {
  position: relative;
  width: 100%;
}
.cluster-road { min-height: 145vw; }
.cluster-seen { min-height: 115vw; }

.work-img, .work-video {
  position: absolute;
  display: block;
  height: auto;
  object-fit: contain;
}
.work-video { background: #111; cursor: pointer; }

.r1 { width: 31vw; left: 7vw; top: 2vw; transform: rotate(-.35deg); }
.r2 { width: 42vw; right: -3vw; top: 18vw; transform: rotate(.18deg); }
.r3 { width: 24vw; left: 41vw; top: 48vw; transform: rotate(-.7deg); }
.r4 { width: 37vw; left: -4vw; top: 67vw; transform: rotate(.42deg); }
.r5 { width: 29vw; right: 7vw; top: 79vw; transform: rotate(-.22deg); }
.r6 { width: 20vw; left: 29vw; top: 104vw; transform: rotate(.6deg); }
.r7 { width: 35vw; right: -1vw; top: 116vw; transform: rotate(-.38deg); }
.r8 { width: 25vw; left: 5vw; top: 123vw; transform: rotate(.15deg); }

.cluster-label {
  position: absolute;
  z-index: 5;
  font-size: clamp(12px, 1.05vw, 17px);
  line-height: 1.28;
  letter-spacing: -.01em;
}
.cluster-label em { font-style: italic; }
.road-label { left: 44vw; top: 23vw; max-width: 25vw; }
.seen-label { right: 8vw; top: 15vw; max-width: 24vw; }
.bird-label { left: 8vw; top: 79vw; max-width: 23vw; }

/* Text works are full-width objects, but remain entirely inside the viewport. */
.kantian {
  position: relative;
  z-index: 4;
  width: calc(100% - 68px);
  margin: 7vw 34px 11vw;
  font-size: clamp(26px, 3.55vw, 58px);
  line-height: 1.04;
  letter-spacing: -.035em;
  transform-origin: center center;
}
.kantian p { margin: 0; width: 100%; }
.kantian .kp-label {
  margin-top: 1.6vw;
  margin-left: 58%;
  font-size: clamp(11px, .9vw, 15px);
  line-height: 1.2;
  letter-spacing: 0;
}
.k1 { transform: rotate(-.18deg); }
.k2 { transform: rotate(.12deg); }
.k3 { transform: rotate(-.10deg); }
.k4 { transform: rotate(.14deg); }
.k6 { transform: rotate(-.15deg); }

.s1 { width: 39vw; left: -2vw; top: 0; transform: rotate(.22deg); }
.s2 { width: 26vw; left: 48vw; top: 19vw; transform: rotate(-.3deg); }
.s3 { width: 34vw; right: -4vw; top: 47vw; transform: rotate(.4deg); }
.s4 { width: 25vw; left: 13vw; top: 55vw; transform: rotate(-.18deg); }
.s5 { width: 31vw; left: 40vw; top: 79vw; transform: rotate(.25deg); }
.bird-video { width: 31vw; right: 5vw; top: 82vw; transform: rotate(-.32deg); }


.about-bio {
  max-width: 900px;
  margin: 0 0 95px;
  font-size: clamp(22px, 2.35vw, 36px);
  line-height: 1.16;
  letter-spacing: -.028em;
}
.about-bio p { margin: 0 0 1.1em; }
.about-bio strong { font-weight: 500; }

/* About / CV */
.cv-page {
  padding: 150px 34px 110px;
  max-width: 1180px;
}
.cv-page h1, .cv-page h2, .cv-page h3, .cv-page p { font: inherit; }
.cv-page h1 {
  margin: 0 0 75px;
  font-size: clamp(42px, 6vw, 94px);
  font-weight: 400;
  letter-spacing: -.045em;
  transform: rotate(-.18deg);
}
.cv-section { margin: 0 0 85px; max-width: 820px; }
.cv-section h2 {
  margin: 0 0 38px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .02em;
}
.cv-year {
  margin: 38px 0 20px;
  font-size: 14px;
}
.cv-entry {
  margin: 0 0 28px;
  font-size: clamp(18px, 1.65vw, 25px);
  line-height: 1.22;
  letter-spacing: -.018em;
}
.cv-entry .venue { display: block; }
.cv-entry .work { display: block; margin-top: 3px; }
.cv-entry em { font-style: italic; }


/* Contact */
.contact-page {
  min-height: 100vh;
  position: relative;
}
.contact-email {
  position: absolute;
  left: 53%;
  top: 54%;
  transform: translate(-50%, -50%) rotate(-0.18deg);
  color: inherit;
  text-decoration: none;
  font-size: clamp(24px, 3.1vw, 48px);
  line-height: 1;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.contact-email:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

@media (max-width: 700px) {
  .contact-email {
    left: 48%;
    top: 52%;
    font-size: clamp(22px, 7vw, 34px);
  }
  .site-header {
    position: absolute;
    padding: 20px 18px;
    display: block;
    font-size: 12px;
    line-height: 1.25;
  }
  .site-header nav { margin-top: 14px; gap: 18px; flex-wrap: wrap; }
  .home { padding-top: 145px; }
  .text-object {
    width: 100%; margin-left: 0; transform: rotate(-.7deg);
    font-size: clamp(32px, 9.5vw, 62px); line-height: .99;
  }
  .text-object p + p { margin-left: 5vw; max-width: 92%; }

  .works-page { padding-top: 130px; }
  .cluster-road { min-height: 315vw; }
  .cluster-seen { min-height: 275vw; }
  .r1 { width: 64vw; left: 5vw; top: 0; }
  .r2 { width: 78vw; right: -12vw; top: 52vw; }
  .r3 { width: 51vw; left: 10vw; top: 115vw; }
  .r4 { width: 68vw; left: -8vw; top: 151vw; }
  .r5 { width: 57vw; right: 4vw; top: 198vw; }
  .r6 { width: 46vw; left: 8vw; top: 235vw; }
  .r7 { width: 69vw; right: -10vw; top: 266vw; }
  .r8 { width: 50vw; left: 3vw; top: 287vw; }
  .road-label { left: 64vw; top: 121vw; max-width: 31vw; }
  .cluster-label { font-size: 11px; }

  .kantian {
    width: calc(100% - 36px);
    margin: 15vw 18px 20vw;
    font-size: clamp(23px, 6.9vw, 38px);
    line-height: 1.06;
    letter-spacing: -.03em;
  }
  .kantian .kp-label {
    margin-top: 5vw;
    margin-left: 45%;
    font-size: 10px;
  }

  .s1 { width: 78vw; left: -7vw; top: 0; }
  .s2 { width: 59vw; left: 36vw; top: 63vw; }
  .s3 { width: 72vw; right: -10vw; top: 110vw; }
  .s4 { width: 59vw; left: 3vw; top: 161vw; }
  .s5 { width: 69vw; left: 26vw; top: 204vw; }
  .bird-video { width: 72vw; right: -7vw; top: 241vw; }
  .seen-label { right: 5vw; top: 49vw; max-width: 37vw; }
  .bird-label { left: 4vw; top: 247vw; max-width: 32vw; }

  .cv-page { padding: 135px 18px 70px; }
  .about-bio { margin-bottom: 70px; font-size: 22px; line-height: 1.18; }
  .cv-page h1 { margin-bottom: 55px; }
  .cv-section { margin-bottom: 65px; }
  .cv-section h2 { margin-bottom: 28px; }
  .cv-entry { font-size: 18px; margin-bottom: 24px; }

}