/* Measured from 关于.jpg, 1920 × 3952. */
.about-page { color-scheme: light; background: #fff; color: #131313; }
.about-page .brand { display: none; }
.about-content { position: relative; min-height: 182.885417vw; }
.about-word { position: absolute; inset: 1.875vw 0 auto; width: 100%; height: 57.291667vw; overflow: visible; }
.about-glyph { cursor: pointer; outline: none; }
.about-glyph text { pointer-events: none; user-select: none; }
.about-glyph-hit { pointer-events: all; }
.about-glyph:focus-visible .about-glyph-hit { stroke: #131313; stroke-width: 2; stroke-dasharray: 6 6; }
.about-titles { position: absolute; top: 58.854167vw; left: 3.125%; right: 3.072917%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.177083vw; align-items: start; }
.about-heading { margin: 0; font: 500 8.097166vw / 1 "HONOR Sans Brand"; letter-spacing: -0.065em; }
.about-role { margin: 0; font: 400 8.333333vw / 0.96875 "Helvetica Now Display"; letter-spacing: 0; }
.about-role-line { display: block; white-space: nowrap; }
.about-copy { position: absolute; top: 83.75vw; left: 3.125%; right: 3.072917%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.177083vw; color: #ccc; }
.about-copy-english { font: 400 1.041667vw / 1.25 "Helvetica Now Display"; letter-spacing: -0.005em; }
.about-copy-chinese { font: 500 1.041667vw / 1.25 "HONOR Sans Brand"; }
.about-copy p { margin: 0; }
.about-copy p + p { margin-top: 1.25em; }
.about-visuals { position: absolute; top: 104.947917vw; left: 51.614583%; width: 45.3125%; display: grid; gap: 1.354167vw; }
.layout-artwork { display: block; width: 100%; height: auto; background: #131313; }
.artwork-labels { font: 400 16px "Helvetica Now Display"; font-variant-numeric: tabular-nums; fill: #131313; }
.artwork-type { font: 400 70px "Helvetica Now Display"; fill: #131313; letter-spacing: -0.025em; }
.about-page .site-footer { background: #131313; }

@media (max-width: 600px) {
  .about-page .navigation { width: calc(100% - 24px); }
  .about-content { min-height: 0; padding: 84px 18px 76px; }
  .about-word { position: relative; inset: auto; display: block; width: calc(100% + 36px); height: 57.291667vw; margin-left: -18px; }
  .about-titles { position: static; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 30px; }
  .about-heading { font-size: clamp(38px, 10vw, 60px); line-height: 1; }
  .about-role { font-size: clamp(34px, 9vw, 54px); }
  .about-copy { position: static; display: flex; flex-direction: column; gap: 32px; margin-top: 38px; }
  .about-copy-english, .about-copy-chinese { font-size: 13px; line-height: 1.45; }
  .about-visuals { position: static; width: 100%; margin-top: 36px; gap: 12px; }
}