@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: DunbenSerif;
  src: url("../assets/fonts/LibertinusSans-Bold.ttf") format("truetype");
  font-weight: 700;
  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 {
  --about-paper: #ffffff;
  --about-dark: #121314;
  --about-warm: #f7f5f2;
  --about-muted: #929497;
  --about-line: rgba(247, 245, 242, .25);
  --about-blue: #164cdf;
  --about-serif: DunbenSerif, "Libertinus Sans", "Dunben Serif SC", Georgia, serif;
  --about-sans: DunbenSans, "DM Sans", "Dunben Sans SC", Helvetica, Arial, sans-serif;
  --about-ease: cubic-bezier(.16, 1, .3, 1);
  --about-hero-title-size: clamp(48px, 5vw, 76px);
  --about-now-measure: 60rem;
  --about-now-column-gap: clamp(32px, 4vw, 64px);
  --about-now-label-gap: clamp(8px, .8vw, 12px);
}

html {
  background: var(--about-dark);
  scroll-behavior: smooth;
}

body.dv-about-page {
  margin: 0;
  overflow-x: hidden;
  background: var(--about-dark);
  color: var(--about-warm);
  font-family: var(--about-sans);
  font-size: 16px;
  line-height: 1.5;
}

.about-main,
.about-main *,
.about-main *::before,
.about-main *::after {
  box-sizing: border-box;
}

.about-main h1,
.about-main h2,
.about-main p,
.about-main figure,
.about-main dl,
.about-main dd {
  margin: 0;
}

.about-main button,
.about-main a {
  font: inherit;
}

.about-skip-link {
  position: fixed;
  z-index: 10040;
  top: 12px;
  left: 12px;
  padding: 9px 13px;
  color: #fff;
  background: var(--about-blue);
  font-family: var(--about-sans);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform .25s ease;
}

.about-skip-link:focus { transform: translateY(0); }

.about-bg-color-transition {
  --about-field-bg: var(--about-paper);
  background: var(--about-field-bg);
  transition: background-color .72s cubic-bezier(.22, 1, .36, 1);
  will-change: background-color;
}

.about-bg-color-transition.is-engaged { --about-field-bg: #ffffff; }
.about-bg-color-transition.is-dark { --about-field-bg: var(--about-dark); }

.about-hero {
  position: relative;
  min-height: min(78svh, 760px);
  display: flex;
  align-items: center;
  padding: clamp(142px, 14vw, 190px) 0 clamp(110px, 10vw, 150px);
  color: #18191c;
  background: transparent;
}

.about-hero__inner {
  width: min(1200px, calc(100% - 12vw));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 260px);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: clamp(56px, 10vw, 160px);
  row-gap: 0;
}

.about-hero__copy {
  grid-column: 1;
  grid-row: 1;
  max-width: 700px;
}

.about-eyebrow {
  color: currentColor;
  font-family: var(--about-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.about-hero__title {
  max-width: 680px;
  margin-top: clamp(24px, 2.5vw, 36px);
  font-family: var(--about-serif);
  font-size: var(--about-hero-title-size);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.035em;
}

.about-hero__br-mobile {
  display: none;
}

.about-hero__br-mobile + .dv-main-title-animation__word {
  margin-left: .28em;
}

.about-hero__title em,
.about-remains__statement em,
.about-now-card h2 em {
  color: var(--about-blue);
  font-style: normal;
}

.about-main .about-hero__intro {
  grid-column: 1;
  grid-row: 2;
  max-width: 530px;
  margin-top: 36px;
  font-size: clamp(17px, calc(1.3vw + 2px), 20px);
  line-height: 1.65;
}

.about-hero__portrait {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: start;
  width: min(18vw, 250px);
  min-width: 180px;
  aspect-ratio: 1;
  overflow: hidden;
}

.about-main .about-hero__portrait {
  align-self: start;
  /* Match the heading's optical cap edge after the global figure reset. */
  margin-top: calc(var(--about-hero-title-size) * .12);
}

.about-hero__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero__scroll-hint {
  display: none;
}

.about-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .65s ease var(--about-delay, 0ms), transform .85s var(--about-ease) var(--about-delay, 0ms);
}

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

.about-transition {
  position: relative;
  height: clamp(150px, 17vw, 250px);
  overflow: hidden;
  background: transparent;
}

.about-dark-field {
  position: relative;
  background: transparent;
  color: var(--about-warm);
}

.about-section {
  width: min(1200px, calc(100% - 12vw));
  margin: 0 auto;
}

.about-path {
  display: grid;
  grid-template-columns: minmax(220px, .34fr) minmax(0, .66fr);
  gap: clamp(56px, 8vw, 128px);
  padding-top: clamp(54px, 5vw, 78px);
}

.about-path__intro h2 {
  max-width: 260px;
  margin-top: 0;
  font-family: var(--about-serif);
  font-size: clamp(34px, 3vw, 48px);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -.025em;
}

.about-accordion { min-width: 0; }

.about-chapter {
  border-bottom: 1px solid var(--about-line);
}

.about-chapter:first-child { border-top: 1px solid var(--about-line); }

.about-chapter__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 32px;
  gap: 0;
  align-items: start;
  padding: 22px 0 24px;
  color: var(--about-warm);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.about-chapter__trigger:hover .about-chapter__number,
.about-chapter__trigger:focus-visible .about-chapter__number,
.about-chapter.is-open .about-chapter__number { color: var(--about-blue); }

.about-chapter__trigger:focus-visible,
.about-now-card:focus-visible {
  outline: 1px solid var(--about-blue);
  outline-offset: 7px;
}

.about-chapter__number {
  color: var(--about-blue);
  font-family: var(--about-serif);
  font-size: 36px;
  line-height: 1;
  transition: color .22s ease;
}

.about-chapter__heading { min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.about-chapter__heading strong {
  font-size: 23px;
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
}

.about-chapter__heading small {
  color: rgba(247, 245, 242, .82);
  font-size: 21px;
  line-height: 1.45;
}

.about-chapter__toggle {
  justify-self: end;
  color: var(--about-warm);
  font-family: var(--about-serif);
  font-size: 28px;
  font-weight: 400;
  line-height: .8;
  transition: transform .28s var(--about-ease), color .22s ease;
}

.about-chapter__trigger:hover .about-chapter__toggle,
.about-chapter__trigger:focus-visible .about-chapter__toggle { color: var(--about-blue); }

.about-chapter__panel {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: max-height .42s var(--about-ease), opacity .28s ease, visibility 0s linear .42s;
}

.about-chapter.is-open .about-chapter__panel {
  max-height: 420px;
  visibility: visible;
  opacity: 1;
  transition: max-height .42s var(--about-ease), opacity .28s ease, visibility 0s linear 0s;
}

.about-chapter__panel-inner {
  max-width: 100%;
  padding: 9px 56px 30px;
  color: rgba(247, 245, 242, .84);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.7;
  transform: translateY(-8px);
  transition: transform .42s var(--about-ease);
}

.about-chapter.is-open .about-chapter__panel-inner { transform: translateY(0); }

.about-remains {
  padding-top: clamp(250px, 24vw, 360px);
}

.about-remains__statement {
  max-width: 780px;
  margin-top: 0;
  font-family: var(--about-serif);
  font-size: clamp(34px, 3.1vw, 50px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -.025em;
}

.about-now { padding-top: clamp(76px, 8vw, 120px); }

.about-now-card {
  position: relative;
  width: min(100%, var(--about-now-measure));
  min-height: 500px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--about-now-column-gap);
  align-items: center;
  margin: 0 auto;
  padding: clamp(54px, 6vw, 86px) clamp(38px, 5vw, 72px);
  overflow: hidden;
  border: 1px solid rgba(92, 127, 246, .6);
  border-radius: 25px;
  background:
    radial-gradient(circle at var(--about-pointer-x, 74%) var(--about-pointer-y, 2%), rgba(53, 71, 255, .85), transparent 34%),
    linear-gradient(135deg, #111a29 0%, #131722 45%, #12131a 100%);
  box-shadow: 0 24px 75px rgba(0, 0, 0, .18);
}

.about-now-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background: radial-gradient(circle at 88% 0%, rgba(69, 50, 255, .42), transparent 34%);
}

.about-now-card__title,
.about-now-card__details { position: relative; z-index: 1; }

.about-now-card__title .about-eyebrow { margin-bottom: 28px; }

.about-now-card h2 {
  font-family: var(--about-serif);
  font-size: clamp(42px, 4.3vw, 66px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.035em;
}

.about-now-card__details { display: grid; gap: 32px; }

.about-now-card__details.about-reveal {
  opacity: 0;
  transform: translateY(100px);
  will-change: opacity, transform;
  transition:
    transform 1000ms cubic-bezier(0.26, 0.1, 0, 1) 0.26s,
    opacity 1000ms ease-in 0.26s;
}

.about-now-card__details.about-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.about-now-card__details > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--about-now-label-gap);
  align-items: start;
}

.about-now-card__details dt {
  color: var(--about-warm);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.about-now-card__details dd {
  color: rgba(247, 245, 242, .86);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
}

.about-dark-field > .main-footer {
  margin-top: clamp(220px, 23vw, 300px);
}

@media (max-width: 1100px) {
  .about-hero__inner,
  .about-section { width: 88vw; }
  .about-hero__inner { grid-template-columns: minmax(0, 1fr) 210px; column-gap: 64px; row-gap: 0; }
  .about-path { grid-template-columns: 1fr; gap: 56px; }
  .about-path__intro h2 { max-width: 480px; }
  .about-now-card { min-height: 430px; }
}

@media (max-width: 767px) {
  .about-hero {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    padding: clamp(86px, 19.7vw, 96px) 0 38px;
    box-sizing: border-box;
  }
  .about-hero__inner,
  .about-section { width: calc(100% - 34px); }
  .about-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    flex: 1 0 auto;
  }
  .about-main .about-hero__portrait {
    order: 1;
    width: clamp(118px, 31.2vw, 148px);
    aspect-ratio: 1;
    min-width: 0;
    align-self: flex-end;
    margin: 0 0 clamp(64px, 22.5vw, 105px) 0;
    overflow: hidden;
  }
  .about-hero__copy {
    order: 2;
    width: 100%;
    max-width: 100%;
  }
  .about-hero__title {
    max-width: 100%;
    margin-top: 0;
    font-size: clamp(40px, 11.5vw, 54px);
    line-height: 1.02;
    letter-spacing: -.035em;
    font-weight: 400;
  }
  .about-hero__title br.about-hero__br-mobile {
    display: inline;
  }
  .about-hero__title .about-hero__br-mobile + .dv-main-title-animation__word {
    margin-left: 0;
  }
  .about-main .about-hero__intro {
    order: 3;
    margin-top: clamp(28px, 7.5vw, 36px);
    font-size: clamp(15px, 3.6vw, 17px);
    line-height: 1.62;
    max-width: 100%;
    color: #18191c;
  }
  .about-hero__scroll-hint {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: clamp(32px, 5vh, 40px);
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    pointer-events: none;
    transition: opacity .35s cubic-bezier(.16, 1, .3, 1), transform .35s cubic-bezier(.16, 1, .3, 1);
    z-index: 2;
  }
  .about-hero__scroll-hint.is-scrolled {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  .about-hero__scroll-hint img {
    display: block;
    width: clamp(28px, 6.8vw, 33px);
    height: auto;
    animation: about-arrow-bob 2s ease-in-out infinite;
  }
  .about-transition { height: 145px; }
  .about-path { padding-top: 52px; gap: 44px; }
  .about-path__intro h2 { margin-top: 0; font-size: clamp(34px, 10vw, 48px); }
  .about-chapter__trigger { grid-template-columns: 48px minmax(0, 1fr) 28px; padding: 21px 0 22px; }
  .about-chapter__number { font-size: 33px; }
  .about-chapter__heading { gap: 6px; }
  .about-chapter__heading strong { font-size: 22px; }
  .about-chapter__heading small { font-size: 20px; }
  .about-chapter__panel-inner { padding: 8px 0 30px 48px; font-size: 15px; line-height: 1.65; }
  .about-remains { padding-top: 145px; }
  .about-remains__statement { margin-top: 24px; font-size: clamp(30px, 8.3vw, 42px); line-height: 1.22; }
  .about-now { padding-top: 68px; }
  .about-now-card { min-height: 0; grid-template-columns: 1fr; gap: 64px; padding: 42px 28px 46px; border-radius: 20px; }
  .about-now-card__title .about-eyebrow { margin-bottom: 25px; }
  .about-now-card h2 { font-size: calc(clamp(42px, 12vw, 60px) - 2px); }
  .about-now-card__details { gap: 28px; }
  .about-now-card__details > div { grid-template-columns: 1fr; gap: 8px; align-items: start; }
  .about-now-card__details dt { font-size: calc(12px + 2px); }
  .about-now-card__details dd { font-size: calc(15px + 2px); }
  .about-dark-field > .main-footer { margin-top: 160px; }
}

@keyframes about-arrow-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .about-bg-color-transition { transition: none !important; }
  .about-reveal,
  .about-reveal.is-visible,
  .about-chapter__panel,
  .about-chapter__panel-inner,
  .about-chapter__toggle,
  .about-now-card { transition: none !important; transform: none !important; opacity: 1 !important; }
  .about-hero__scroll-hint img { animation: none !important; }
}

/* zh optical left alignment (2026-10-13). Title and intro share one left
   edge, but at display size the CJK serif glyphs carry ~0.15em of left side
   bearing (measured: stems of 以 / 商 at 132px vs the intro's ink at 121px,
   1440 wide, 72px title), so the title read as indented. `translate` (not
   margin / text-indent) moves the ink without changing the line box, so the
   line breaks stay exactly as before and the reveal transform is untouched.
   Re-measure if the Chinese title copy or font changes. */
html[lang="zh-CN"] .about-hero__title {
  translate: -0.15em 0;
}

/* zh: 「三段经历，形成了 / 我现在的工作方式」 always exactly two lines.
   Each line is a [data-nobreak] span (never wraps); the 260px cap (sized for
   the English three-line title) is lifted, and the font size is capped by the
   column width (8 glyphs ≈ 7.8em, so 12cqi always fits) — on wide columns the
   normal clamp() size still applies. (2026-10-13) */
html[lang="zh-CN"] .about-path__intro {
  container-type: inline-size;
}

html[lang="zh-CN"] .about-path__intro h2 {
  max-width: none;
  font-size: min(clamp(34px, 3vw, 48px), 12cqi);
}

@media (max-width: 767px) {
  html[lang="zh-CN"] .about-path__intro h2 {
    font-size: min(clamp(34px, 10vw, 48px), 12cqi);
  }
}

/* zh「下一章，进行时」card (2026-10-13): the right column read as empty —
   details text +4px and the column starts further left (title column
   1.1fr → .8fr). Desktop/tablet only; ≤767px keeps the stacked layout. */
@media (min-width: 768px) {
  html[lang="zh-CN"] .about-now-card {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  }

  html[lang="zh-CN"] .about-now-card__details dt {
    font-size: 17px;
  }

  html[lang="zh-CN"] .about-now-card__details dd {
    font-size: clamp(19px, calc(1.2vw + 4px), 22px);
  }
}

/* zh「角色在变……」statement: same size as the「三段经历……」title above
   (clamp(34px, 3vw, 48px); mobile clamp(34px, 10vw, 48px)). (2026-10-13) */
html[lang="zh-CN"] .about-remains__statement {
  font-size: clamp(34px, 3vw, 48px);
}

@media (max-width: 767px) {
  html[lang="zh-CN"] .about-remains__statement {
    font-size: clamp(34px, 10vw, 48px);
  }
}

/* zh (2026-10-14): hero title 4px smaller at every width, and the
   「角色在变……」statement in one colour — the blue phrase reads white. */
html[lang="zh-CN"] .about-hero__title {
  font-size: calc(var(--about-hero-title-size) - 4px);
}

@media (max-width: 767px) {
  html[lang="zh-CN"] .about-hero__title {
    font-size: calc(clamp(40px, 11.5vw, 54px) - 10px); /* −4, then −2, then −4 on phones */
  }
}

html[lang="zh-CN"] .about-remains__statement em {
  color: inherit;
}

/* zh desktop (2026-10-14): the hero title is always the two 9-glyph lines
   「以设计为起点，结合 / 商业与技术持续创造」, and the intro below runs to the
   title's right edge. Measured: each 9-glyph line spans 8.68em of ink and
   the intro starts 0.15em right of the title (its optical translate above),
   so 8.53em of the title size. Phones keep the natural wrap (break hidden, intro full width). */
.about-hero__br-zh { display: none; }
@media (min-width: 768px) {
  html[lang="zh-CN"] .about-hero__br-zh { display: inline; }
  html[lang="zh-CN"] .about-hero__title { max-width: none; }
  html[lang="zh-CN"] .about-main .about-hero__intro {
    max-width: calc(8.53 * (var(--about-hero-title-size) - 4px));
  }
}

/* EN desktop (2026-10-14): same idea as zh — the title is always the three
   lines「A designer shaped by / design, business, and / building.」and the
   intro runs to its right edge. Measured: the longest line spans 8.17em of
   the title size (intro and title share the same left edge in English). */
.about-hero__br-desktop { display: none; }
@media (min-width: 768px) {
  html:not([lang="zh-CN"]) .about-hero__br-desktop { display: inline; }
  html:not([lang="zh-CN"]) .about-main .about-hero__intro {
    max-width: calc(8.17 * var(--about-hero-title-size));
  }
}

/* zh phones (2026-10-14 pm): 「角色在变……」6px smaller;「下一章进行时」2px
   smaller on one line, with a tighter gap to the details below. */
@media (max-width: 767px) {
  html[lang="zh-CN"] .about-remains__statement { font-size: calc(clamp(34px, 10vw, 48px) - 8px); }
  html[lang="zh-CN"] .about-now-card h2 { font-size: calc(clamp(42px, 12vw, 60px) - 6px); }
  html[lang="zh-CN"] .about-now-card h2 br { display: none; }
  html[lang="zh-CN"] .about-now-card { gap: 40px; }
}

/* 「下一章，进行时」: the comma only shows on phones, where the title is one line. */
.about-now-card__sep { display: none; }
@media (max-width: 767px) { html[lang="zh-CN"] .about-now-card__sep { display: inline; } }

/* Phones, both languages (2026-10-14): the「三段经历……/ path」title takes the
   same size as the「角色在变……/ remains」statement further down. */
@media (max-width: 767px) {
  .about-path__intro h2 { font-size: clamp(30px, 8.3vw, 42px); }
  html[lang="zh-CN"] .about-path__intro h2 { font-size: calc(clamp(34px, 10vw, 48px) - 8px); }
}