:root {
  --ink: #0b0b0b;
  --paper: #f7f6ef;
  --white: #fff;
  --dim: rgba(255, 255, 255, 0.32);
  --gutter: clamp(16px, 2.2vw, 32px);
  --small: clamp(11px, 0.85vw, 13px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: "Archivo", system-ui, sans-serif;
  font-variation-settings: "wdth" 100;
  background: var(--ink);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ---------- Fixed chrome ---------- */

.top, .bottom, .index {
  position: fixed;
  z-index: 10;
  left: var(--gutter);
  right: var(--gutter);
  pointer-events: none;
}
.top a, .bottom a, .index a { pointer-events: auto; }

.top {
  top: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.wordmark {
  font-weight: 900;
  font-variation-settings: "wdth" 125;
  font-size: clamp(22px, 2.6vw, 40px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.role {
  font-size: var(--small);
  font-weight: 300;
  font-variation-settings: "wdth" 125;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
  padding-top: 0.4em;
}
.role .short { display: none; }

.index {
  top: 50%;
  transform: translateY(-50%);
  right: auto;
  max-width: min(720px, 70vw);
}
.index ol { list-style: none; }
.index li {
  font-size: clamp(13px, 1.15vw, 17px);
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--dim);
  transition: color 0.4s ease;
}
.index li b { font-weight: 700; }
.index li.active { color: var(--white); }
.index a:hover { color: var(--white); }

.bottom {
  bottom: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: var(--small);
}
.counter { font-variant-numeric: tabular-nums; }

/* ---------- Reel ---------- */

.reel {
  height: 100vh;
  height: 100svh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
}

.slide {
  position: relative;
  height: 100vh;
  height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: var(--ink);
}

.slide video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Darkens the left edge and bottom so the text stays readable over any footage */
.shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 30%);
}

.meta {
  position: absolute;
  left: var(--gutter);
  bottom: calc(var(--gutter) + 2.2em);
  display: flex;
  gap: 1.6em;
  font-size: var(--small);
  font-weight: 300;
  font-variation-settings: "wdth" 125;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.meta a {
  font-weight: 500;
  border-bottom: 1px solid currentColor;
}

/* ---------- Contact ---------- */

.contact {
  height: 100vh;
  height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--gutter);
  background: var(--ink);
}
.contact p {
  font-size: var(--small);
  font-weight: 300;
  font-variation-settings: "wdth" 125;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.2em;
}
.contact a {
  align-self: flex-start;
  font-weight: 900;
  font-variation-settings: "wdth" 125;
  font-size: min(6.4vw, 104px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-decoration: underline transparent 0.06em;
  text-underline-offset: 0.12em;
  transition: text-decoration-color 0.3s ease;
}
.contact a:hover,
.contact a:focus-visible { text-decoration-color: currentColor; }

.index, .counter { transition: opacity 0.4s ease; }
.on-contact .index,
.on-contact .counter { opacity: 0; }
.on-contact .index a { pointer-events: none; }

/* ---------- Intro ---------- */

.intro { display: none; }
.intro-on .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #fff;
  cursor: pointer;
}
.intro-mark {
  position: fixed;
  color: #000;
  opacity: 0;
  transform-origin: center;
}
.intro-on .top .wordmark { visibility: hidden; }

/* ---------- Mobile ---------- */

@media (max-width: 700px) {
  .top { flex-direction: column; gap: 0.3em; }
  .role { text-align: left; }
  .role .long { display: none; }
  .role .short { display: inline; }
  .index {
    top: auto;
    bottom: calc(var(--gutter) + 6.5em);
    transform: none;
    max-width: none;
    right: var(--gutter);
  }
  .meta { flex-wrap: wrap; gap: 0.4em 1.2em; }
  .shade {
    background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 60%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .index li { transition: none; }
}