/* ==========================================================================
   Homepage: opening shot, hero film, hover-to-play work index.
   Shared tokens, nav, cursor and type live in dc.css.
   ========================================================================== */

/* --- Loader ------------------------------------------------------------ */

.dc-loader {
  display: none;
}

.js .dc-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--gutter);
  background: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.dc-loader-top,
.dc-loader-bottom {
  display: flex;
  justify-content: space-between;
}

.dc-loader-tc {
  align-self: center;
  font-size: clamp(2.2rem, 9vw, 8rem);
  letter-spacing: 0;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.dc-loaded .dc-loader {
  display: none;
}

/* --- Hero -------------------------------------------------------------- */

.dc-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}

.dc-hero-media {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.dc-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dc-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(11, 11, 10, 0.35), transparent 30%),
    linear-gradient(to top, rgba(11, 11, 10, 0.75), transparent 55%);
}

.dc-letterbox {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 6vh;
  background: var(--ink);
}

.dc-letterbox-top { top: 0; }
.dc-letterbox-bottom { bottom: 0; }

.js .dc-letterbox {
  height: 50.5vh;
}

.dc-hero-meta {
  position: absolute;
  z-index: 3;
  top: calc(6vh + 18px);
  display: flex;
  flex-direction: column;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-dim);
  font-variant-numeric: tabular-nums;
}

.dc-hero-meta-left {
  left: var(--gutter);
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.dc-hero-meta-right {
  right: var(--gutter);
  text-align: right;
}

.dc-rec {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rec);
  animation: dc-blink 1.2s steps(2) infinite;
}

@keyframes dc-blink {
  50% { opacity: 0.15; }
}

.dc-hero-copy {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(6vh + 20px);
}

.dc-kicker {
  margin: 0 0 1rem;
  max-width: 22rem;
  font-size: 14px;
  color: var(--paper-dim);
}

.dc-hero-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(clamp(4.2rem, 17.5vw, 20rem) * 0.62);
  line-height: 0.82;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.dc-hero-title .word-wrap {
  display: inline-block;
  white-space: nowrap;
}

.dc-hero-title .char-wrap {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
  vertical-align: bottom;
}

.dc-hero-title .char {
  display: inline-block;
  will-change: transform;
}

@media (max-width: 760px) {
  .dc-hero-meta-right {
    display: none;
  }

  .dc-hero-title {
    white-space: normal;
    font-size: calc(clamp(4.2rem, 24vw, 9rem) * 0.62);
  }
}

/* --- Statement --------------------------------------------------------- */

.dc-statement {
  padding: clamp(7rem, 18vh, 12rem) var(--gutter);
  max-width: 1400px;
}

.dc-statement-text {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.dc-statement-text em {
  color: var(--accent);
}

.dc-statement-text .word {
  display: inline-block;
}

.dc-statement-sub {
  max-width: 30rem;
  margin: 3rem 0 0 auto;
  font-size: 17px;
  color: var(--paper-dim);
}

/* --- Work index -------------------------------------------------------- */

.dc-work {
  position: relative;
  min-height: 100vh;
  padding: clamp(5rem, 12vh, 8rem) var(--gutter);
  border-top: 1px solid var(--paper-faint);
  overflow: hidden;
  isolation: isolate;
}

.dc-work-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.dc-work-frame {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.7s var(--ease), transform 1.6s var(--ease);
}

.dc-work-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 10, 0.55);
}

.dc-work-frame img,
.dc-work-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dc-work-frame.is-active {
  opacity: 1;
  transform: scale(1);
}

.dc-work-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 3rem;
  margin-bottom: 3rem;
}

.dc-work-title {
  margin: 0;
  max-width: 14ch;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.dc-work-title em {
  color: var(--accent);
}

.dc-index {
  margin: 0 0 3rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--paper-faint);
}

.dc-index li {
  border-bottom: 1px solid var(--paper-faint);
}

.dc-index a {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: clamp(0.9rem, 1.8vw, 1.4rem) 0;
  transition: opacity 0.5s var(--ease), padding 0.5s var(--ease);
}

.dc-index-no {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--paper-dim);
}

.dc-index-name {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.2vw, 4rem);
  line-height: 1;
  letter-spacing: -0.015em;
  transition: transform 0.6s var(--ease), color 0.4s;
}

.dc-index-role {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.dc-index-thumb {
  display: none;
}

.dc-index.is-hovering a {
  opacity: 0.28;
}

.dc-index.is-hovering a.is-active {
  opacity: 1;
}

.dc-index a.is-active .dc-index-name {
  transform: translateX(1.25rem);
  font-style: italic;
}

@media (hover: none), (max-width: 760px) {
  .dc-index a {
    grid-template-columns: 2rem 1fr;
    grid-template-areas: "no name" "no role" "thumb thumb";
    row-gap: 0.4rem;
  }

  .dc-index-no { grid-area: no; }
  .dc-index-name { grid-area: name; }
  .dc-index-role { grid-area: role; }

  .dc-index-thumb {
    grid-area: thumb;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-top: 0.8rem;
  }

  .dc-work-media {
    display: none;
  }
}

/* --- Services ---------------------------------------------------------- */

.dc-services {
  padding: clamp(6rem, 15vh, 10rem) var(--gutter);
  background: var(--paper);
  color: var(--ink);
}

.dc-services .dc-label {
  color: rgba(11, 11, 10, 0.55);
}

.dc-services-head {
  margin-bottom: clamp(3rem, 8vh, 5rem);
}

.dc-service-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(11, 11, 10, 0.18);
}

.dc-service {
  display: grid;
  grid-template-columns: 5rem 1fr minmax(0, 26rem);
  align-items: start;
  gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid rgba(11, 11, 10, 0.18);
}

.dc-service-no {
  font-family: var(--mono);
  font-size: 12px;
  padding-top: 0.8rem;
}

.dc-service h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.015em;
}

.dc-service p {
  margin: 0.4rem 0 0;
  font-size: 15px;
  color: rgba(11, 11, 10, 0.68);
}

@media (max-width: 860px) {
  .dc-service {
    grid-template-columns: 3rem 1fr;
  }

  .dc-service p {
    grid-column: 2;
  }
}

/* --- Chapters ---------------------------------------------------------- */

.dc-chapters {
  position: relative;
}

.dc-chapters-pin {
  padding: clamp(5rem, 12vh, 8rem) var(--gutter);
}

.dc-chapters-track {
  display: grid;
  gap: 4rem;
}

.dc-chapter-intro p {
  max-width: 26rem;
  margin: 2rem 0;
  color: var(--paper-dim);
}

.dc-chapter-intro .dc-h2 em {
  color: var(--accent);
}

.dc-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 26rem;
}

.dc-timeline a {
  display: flex;
  gap: 1.5rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--paper-faint);
  font-size: 15px;
  transition: padding 0.4s var(--ease), color 0.3s;
}

.dc-timeline a:hover {
  padding-left: 0.6rem;
  color: var(--accent);
}

.dc-timeline span {
  width: 3rem;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--paper-dim);
  padding-top: 2px;
}

.dc-chapter {
  display: block;
}

.dc-chapter figure {
  margin: 0 0 1.4rem;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-2);
}

.dc-chapter img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.4s var(--ease), filter 0.8s;
  filter: grayscale(0.35);
}

.dc-chapter:hover img {
  transform: scale(1);
  filter: grayscale(0);
}

.dc-chapter-no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.dc-chapter h3 {
  margin: 0.5rem 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1;
}

.dc-chapter p {
  margin: 0;
  max-width: 24rem;
  font-size: 15px;
  color: var(--paper-dim);
}

.dc-chapters-progress {
  display: none;
}

@media (min-width: 900px) {
  .dc-anim .dc-chapters-pin {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }

  .dc-anim .dc-chapters-track {
    display: flex;
    align-items: center;
    gap: 6vw;
    width: max-content;
    will-change: transform;
  }

  .dc-anim .dc-chapter-intro {
    width: 34vw;
    flex: none;
  }

  .dc-anim .dc-chapter {
    width: min(30vw, 58vh);
    flex: none;
  }

  .dc-anim .dc-chapter:nth-child(odd) {
    margin-top: 12vh;
  }

  .dc-anim .dc-chapters-progress {
    display: block;
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: 5vh;
    height: 1px;
    background: var(--paper-faint);
  }

  .dc-chapters-progress i {
    display: block;
    height: 100%;
    background: var(--paper);
    transform-origin: left;
    transform: scaleX(0);
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .dc-chapters-track {
    grid-template-columns: 1fr 1fr;
  }

  .dc-chapter-intro {
    grid-column: 1 / -1;
  }
}

/* --- In the field ------------------------------------------------------ */

.dc-field {
  display: grid;
  gap: 1.2rem;
  padding: 2rem 0 clamp(5rem, 12vh, 8rem);
  overflow: hidden;
}

.dc-field-row {
  display: flex;
  gap: 1.2rem;
  width: max-content;
  will-change: transform;
}

.dc-field-row[data-drift="1"] {
  margin-left: -30vw;
}

.dc-field img {
  height: clamp(200px, 32vh, 360px);
  width: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.6s;
}

.dc-field img:hover {
  filter: none;
}


/* --- Reduced motion ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js .dc-loader {
    display: none;
  }

  .js .dc-letterbox {
    height: 6vh;
  }

  .dc-rec {
    animation: none;
  }

  .dc-work-frame,
  .dc-index-name,
  .dc-chapter img {
    transition: none;
  }
}

/* --- Type overrides ---------------------------------------------------- */

.dc-hero-title,
.dc-statement-text,
.dc-work-title {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.dc-work-title em,
.dc-statement-text em {
  font-weight: 400;
}

.dc-index-name,
.dc-service h3,
.dc-chapter h3 {
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.02em;
}

.dc-index a.is-active .dc-index-name {
  font-family: var(--display-em);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
}

.dc-service h3 em {
  font-size: 1.05em;
}

.dc-kicker,
.dc-hero-meta {
  font-family: var(--mono);
}

.dc-loader-tc {
  font-weight: 400;
}

.dc-index-no,
.dc-index-role,
.dc-chapter-no,
.dc-hero-meta {
  font-size: 12px;
}

.dc-index-no,
.dc-index-role,
.dc-hero-meta {
  color: rgba(236, 232, 223, 0.72);
}

.dc-kicker {
  font-size: 13px;
  color: rgba(236, 232, 223, 0.85);
}

.dc-work-head {
  display: block;
}

.dc-work-title {
  max-width: 22ch;
  font-size: clamp(2.2rem, 4.6vw, 4.4rem);
}

.dc-chapter-intro .dc-h2 {
  font-size: clamp(2.6rem, 5.2vw, 5.4rem);
}

@media (min-width: 900px) {
  .dc-anim .dc-chapter {
    width: min(24vw, 44vh);
  }

  .dc-anim .dc-chapter:nth-child(odd) {
    margin-top: 8vh;
  }

  .dc-anim .dc-chapters-progress {
    bottom: 3vh;
  }
}