@font-face {
  font-family: "DunbenSerif";
  src: url("../assets/fonts/LibertinusSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DunbenSans";
  src: url("../assets/fonts/DMSans-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --works-bg: #121314;
  --works-ink: #f7f5f2;
  --works-muted: #8e8f91;
  --works-accent: #164cdf;
  --works-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --works-content-width: min(78.39vw, 1505px);
  /* Works Playground tuning — formal page source of truth. */
  --works-eyebrow-size: 24px;
  --works-hero-size: 48px;
  --works-hero-top: 240px;
  --works-label-gap: 30px;
  --works-label-size: 26px;
  --works-right-column-offset: clamp(180px, 17.5vw, 360px);
  --serif: DunbenSerif, Georgia, serif;
  --sans: DunbenSans, Helvetica, Arial, sans-serif;
  --orange: #ff8f29;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

html.dv-works-page {
  background: var(--works-bg);
  scroll-behavior: smooth;
}

body.dv-works-page {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--works-bg);
  color: var(--works-ink);
  font-family: "DunbenSans", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.dv-works-page *,
.dv-works-page *::before,
.dv-works-page *::after {
  box-sizing: border-box;
}

.dv-works-page a {
  color: inherit;
  text-decoration: none;
}

.dv-works-page h1,
.dv-works-page h2,
.dv-works-page h3,
.dv-works-page p {
  margin: 0;
}

.dv-works-main {
  position: relative;
  z-index: 1;
  overflow: clip;
}

.dv-works-hero {
  width: var(--works-content-width);
  margin: 0 auto;
  padding: var(--works-hero-top) 0 clamp(104px, 12vw, 190px);
}

.dv-works-eyebrow {
  color: var(--works-muted);
  font-size: var(--works-eyebrow-size);
  font-weight: 650;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.dv-works-hero h1 {
  max-width: 1180px;
  margin-top: clamp(30px, 4vw, 58px);
  font-family: "DunbenSerif", Georgia, serif;
  font-size: var(--works-hero-size);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.038em;
  color: #fff;
  text-wrap: pretty;
}

.dv-works-recent {
  background: var(--works-bg);
}

@media (min-width: 1101px) {
  .dv-works-recent .dv-beyond__col:nth-child(2) {
    margin-top: var(--works-right-column-offset);
  }
}

.dv-works-recent .dv-beyond__label {
  margin-top: var(--works-label-gap);
  font-size: var(--works-label-size);
}

.dv-works-reveal {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity .9s ease, transform 1s var(--works-ease);
}

.dv-works-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 760px) {
  .dv-works-hero { padding-top: 130px; }
  .dv-works-eyebrow { font-size: 12px; }
  .dv-works-hero h1 { font-size: clamp(40px, 10vw, 64px); line-height: 1.02; }
}

@media (max-width: 1100px) {
  .dv-works-hero { width: 88vw; }
}

@media (max-width: 767px) {
  .dv-works-hero { width: calc(100% - 40px); }
  .dv-works-recent .dv-beyond__label {
    margin-top: 17px;
    font-size: clamp(18px, 4.4vw, 26px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.dv-works-page { scroll-behavior: auto; }
  .dv-works-reveal { opacity: 1; transform: none; transition: none; }
}