@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, "Dunben Serif SC", Georgia, serif;
  --sans: DunbenSans, "Dunben Sans SC", 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", "Dunben Sans SC", 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", "Dunben Serif SC", 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; }
}

/* zh phones (2026-10-14 pm): the Works intro matches the About hero title
   on phones (about.css: clamp(40px, 11.5vw, 54px) − 10px). */
@media (max-width: 767px) {
  html[lang="zh-CN"] .dv-works-hero h1 { font-size: calc(clamp(40px, 11.5vw, 54px) - 10px); }
}

/* Horizontal source covers, accessible filters, V7 staggered columns. */
.dv-works-hero { padding-bottom:64px; }
.dv-beyond { padding-top:0; }
.works-filters { display:flex; flex-wrap:wrap; gap:10px; margin-top:48px; }
.works-filter { font:inherit; font-size:14px; line-height:1.3; min-height:44px; padding:10px 22px; border:1px solid #626467; border-radius:999px; color:#f7f5f2; background:transparent; cursor:pointer; }
.works-filter[aria-pressed="true"] { background:#f7f5f2; border-color:#f7f5f2; color:#121314; }
.works-filter:hover { border-color:#f7f5f2; }
.works-filter:focus-visible { outline:2px solid #ff8f29; outline-offset:5px; }
.dv-works-recent .dv-beyond__media { aspect-ratio:16/10; background:#242528; box-shadow:none; }
.dv-works-recent .dv-beyond__img { object-fit:cover; }
.works-card-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:20px; }
.works-tag { display:inline-block; border:1px solid #626467; border-radius:999px; padding:6px 12px; color:#f7f5f2; font-size:12px; line-height:1.3; }
.works-name { color:#b7b8ba; font-size:14px; }
.dv-works-recent .dv-beyond__label { line-height:1.4; margin-top:14px; min-height:0; }
.dv-works-recent { padding-bottom:100px; }
@media (max-width:767px) { .works-filters { margin-top:32px; gap:8px; } .works-filter { padding-inline:16px; } .dv-works-hero { padding-bottom:40px; } }

.dv-works-recent .dv-beyond__label { font-weight:400; }

/* Double the vertical space between works without changing the column gutter. */
.dv-works-recent .dv-beyond__col { gap: clamp(104px, 8.3vw, 160px); }
@media (max-width: 1100px) {
  .dv-works-recent .dv-beyond__grid,
  .dv-works-recent .dv-beyond__col { gap: clamp(108px, 18vw, 192px); }
}
@media (max-width: 767px) {
  .dv-works-recent .dv-beyond__grid,
  .dv-works-recent .dv-beyond__col { gap: 108px; }
}