/* The portfolio's own stylesheet, served as /assets/css/site.css on every page: one file per component, in this
   order. The build and the preview server put the files together into one (src/gate-build.ts `readGenerated`), so it is
   still one request. A component's rules, its breakpoints included, live only in its own file.

   Beside it, from the design system: the tokens and the ProjectCard and Tag skin (@zijie/ui portfolio.css, which also
   names the site's variables), the shared nav (the chrome or island bundle) and the access gate. The home page adds
   intro.css; pages with a password gate add tiktok-gate.css. */
/* 自托管字体：Montserrat（标题/正文）+ Inter（等宽数字与代码） */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2?v=a28eb6d3cc) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2?v=c940764593) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/montserrat-latin-ext.woff2?v=920711de9a) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/montserrat-latin.woff2?v=6438d7b8ea) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Base: the reset, element defaults, focus, and the bilingual-copy helpers. The design tokens and the site's
   variable names (--bg, --ink, --pad…) come from the design system's portfolio skin (@zijie/ui portfolio.css). */

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

html.i18n-pending body { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

img { height: auto; }

a { color: inherit; text-decoration: none; }

p, h1, h2, h3, h4, h5, figure, blockquote, dl, dd { margin: 0; }

ul, ol { margin: 0; padding: 0; }

h1, h2, h3, h4, h5 { font-weight: 600; letter-spacing: 0; }

strong { font-weight: 700; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 手机 ---------- */
@media (max-width: 809.98px) {
  body { font-size: 16px; line-height: 26px; }
}

/* ---------- 入场动效 ----------
   对齐原站：初始 opacity .001，滚动进入视口后播放 spring(stiffness 300, damping 60, mass 1)。
   元素从 96px 下方淡入；带动画子项的外壳由 JS 标记为 fx-shell，避免父子双重位移。
   下面的 linear() 就是那条弹簧曲线的采样，浏览器不支持时回落到前一行的 cubic-bezier。 */
:root {
  --fx-dur: .52s;
  --fx-ease: cubic-bezier(.16, 1, .3, 1);
  --fx-spring: linear(0.0000, 0.1272, 0.2981, 0.4411, 0.5556, 0.6467, 0.7191, 0.7767,
    0.8225, 0.8588, 0.8878, 0.9108, 0.9291, 0.9436, 0.9552, 0.9644, 0.9717, 0.9775,
    0.9821, 0.9858, 0.9887, 0.9910, 0.9928, 0.9943, 0.9955, 1);
}

.i18n-inline--zh { display: none; }

html[data-locale="zh"] .i18n-inline--en { display: none; }

html[data-locale="zh"] .i18n-inline--zh { display: inline; }
/* The resume page (/resume/): toolbar, downloads and the paper. */

/* ---------- Resume ---------- */
.page-resume { background: var(--bg); }

.resume-main { padding: 104px 0 112px; }

.resume-main > .wrap { max-width: 1120px; }

.resume-toolbar {
  display: flex; justify-content: flex-end; align-items: center;
  max-width: 960px; margin: 0 auto 18px;
}

.resume-downloads { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.resume-downloads__label {
  margin-right: 4px;
  font-size: 12px;
  line-height: 20px;
  color: var(--z-color-caption);
}

.resume-downloads a {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 40px; padding: 8px 14px; border: 1px solid var(--line);
  border-radius: var(--r-btn); background: #fff; font-size: 13px; line-height: 20px;
  font-weight: 600; white-space: nowrap; transition: border-color .2s, background-color .2s;
}

.resume-downloads a:first-of-type { background: var(--dark); border-color: var(--dark); color: #fff; }

.resume-downloads a:hover { border-color: var(--blue-btn); background: #f3f5ff; }

.resume-downloads a:first-of-type:hover { background: #303030; }

.resume-downloads a span { font-size: 14px; font-weight: 400; }

.resume-paper {
  width: min(100%, 960px); margin-inline: auto; background: #fff;
  box-shadow: 0 16px 48px rgba(26,26,26,.08), 0 1px 2px rgba(26,26,26,.05);
  border-radius: 8px;
  aspect-ratio: 612 / 792;
  padding: 47px;
}

.resume-profile {
  display: flex; justify-content: space-between; align-items: start; gap: 28px;
}

.resume-profile__identity { display: grid; gap: 6px; min-width: 0; }

.resume-profile__identity h1 { font-size: 56.5px; line-height: 69px; font-weight: 700; }

.resume-profile__identity > p { color: var(--ink); font-size: 20.4px; line-height: 25px; letter-spacing: 5.1px; }

.resume-paper--en .resume-profile__identity h1 { white-space: nowrap; }

.resume-contact { display: grid; gap: 0; text-align: right; }

.resume-contact a, .resume-contact span {
  display: flex; align-items: center; justify-content: flex-end; gap: 9px;
  color: var(--ink-2); font-size: 12.55px; line-height: 25px; overflow-wrap: anywhere;
}

.resume-contact a:last-child { text-decoration: underline; text-underline-offset: 2px; }

.resume-contact svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }

.resume-contact a:hover { color: var(--blue-btn); }

.resume-body {
  display: grid; grid-template-columns: minmax(0, 210fr) minmax(0, 312fr);
  gap: 47px; padding-top: 55px;
}

.resume-paper--en .resume-body { padding-top: 47px; }

.resume-column { display: grid; align-content: start; gap: 15px; min-width: 0; }

.resume-paper--en .resume-column { gap: 10px; }

.resume-body > .resume-column:first-child { order: 2; }

.resume-body > .resume-column:last-child { order: 1; }

.resume-body > .resume-column:last-child .resume-section:nth-child(2) { order: 3; }

.resume-body > .resume-column:last-child .resume-section:nth-child(3) { order: 2; }

.resume-section { min-width: 0; }

.resume-section > h2 {
  margin-bottom: 6px; padding-bottom: 8px; border-bottom: 1px dotted #777;
  font-size: 22px; line-height: 27px; font-weight: 700;
}

.resume-entry + .resume-entry { margin-top: 19px; }

.resume-entry__head { display: grid; gap: 0; margin-bottom: 9px; }

.resume-entry__top { display: block; }

.resume-entry h3 { font-size: 12.55px; line-height: 25px; font-weight: 700; }

.resume-entry__date {
  flex: none; color: var(--ink); font-size: 12.55px; line-height: 25px;
  font-weight: 700; white-space: nowrap;
}

.resume-entry__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--ink); font-size: 12.55px; line-height: 25px; }

.resume-entry ul { display: grid; gap: 9px; padding-left: 18px; }

.resume-paper--en .resume-entry ul { gap: 3px; }

.resume-paper--en .resume-entry + .resume-entry { margin-top: 16px; }

.resume-entry li { padding-left: 0; color: var(--ink); font-size: 12.55px; line-height: 19px; }

.resume-paper--en .resume-entry__head { margin-bottom: 0; }

.resume-paper--en .resume-entry li { font-size: 12px; }

.resume-entry li::marker { color: var(--ink); }

.resume-entry strong { color: var(--ink); }

.resume-education { display: grid; gap: 8px; }

.resume-paper--en .resume-education { gap: 3px; }

.resume-education .resume-entry + .resume-entry { margin-top: 0; }

.resume-education .resume-entry__top { display: grid; gap: 0; }

.resume-education .resume-entry__head { margin-bottom: 0; }

.resume-education .resume-entry__date { font-weight: 400; }

.resume-education .resume-entry__meta { display: block; }

.resume-education .resume-entry ul { gap: 0; }

.resume-education .resume-entry li { line-height: 25px; }

.resume-paper--en .resume-education .resume-entry h3,
.resume-paper--en .resume-education .resume-entry__date,
.resume-paper--en .resume-education .resume-entry__meta,
.resume-paper--en .resume-education .resume-entry li { line-height: 24px; }

.resume-body > .resume-column:last-child .resume-section:not(:first-child) { column-count: 2; column-gap: 0; }

.resume-body > .resume-column:last-child .resume-section:not(:first-child) > h2 { column-span: all; }

.resume-skill-group { min-width: 0; break-inside: avoid; margin-bottom: 0; }

.resume-skill-group h3 { margin-bottom: 0; font-size: 12.55px; line-height: 25px; }

.resume-skill-list { display: grid; gap: 0; color: var(--ink-2); font-size: 12.55px; line-height: 25px; }

.resume-paper--en .resume-skill-group h3,
.resume-paper--en .resume-skill-list { line-height: 23.5px; }

.resume-skill-list span { display: block; overflow-wrap: anywhere; }

@media (min-width: 810px) {
  .resume-paper:not(.resume-paper--en) .resume-body > .resume-column:first-child .resume-entry li { font-size: 12px; }
  .resume-paper:not(.resume-paper--en) .resume-body > .resume-column:first-child .resume-entry:last-child li { font-size: 11.8px; }
}

html[data-locale] [data-resume-locale] { display: none; }

html[data-locale="zh"] .resume-paper[data-resume-locale="zh"] { display: block; }

html[data-locale="zh"] .resume-downloads[data-resume-locale="zh"] { display: flex; }

html[data-locale="en"] .resume-paper[data-resume-locale="en"] { display: block; }

html[data-locale="en"] .resume-downloads[data-resume-locale="en"] { display: flex; }

@media (max-width: 809.98px) {
  .resume-main { padding: 104px 0 72px; }
  .resume-main > .wrap { padding-inline: 16px; }
  .resume-toolbar { margin-bottom: 16px; padding-inline: 4px; }
  .resume-downloads { gap: 6px; width: 100%; }
  .resume-downloads a { flex: 1; min-width: 0; padding-inline: 10px; }
  .resume-paper { aspect-ratio: auto; padding: 32px 24px; border-radius: 6px; }
  .resume-profile { align-items: start; flex-direction: column; gap: 18px; }
  .resume-profile__identity h1 { font-size: 42px; line-height: 48px; }
  .resume-profile__identity > p { font-size: 13px; line-height: 21px; letter-spacing: .07em; }
  .resume-paper--en .resume-profile__identity h1 { font-size: clamp(30px, 9vw, 42px); }
  .resume-paper--en .resume-profile__identity > p { letter-spacing: .24em; }
  .resume-contact { display: flex; flex-wrap: wrap; gap: 4px 14px; text-align: left; }
  .resume-contact a, .resume-contact span { justify-content: flex-start; }
  .resume-contact a:first-child { flex-basis: 100%; }
  .resume-body { grid-template-columns: minmax(0,1fr); gap: 34px; padding-top: 36px; }
  .resume-paper--en .resume-body { padding-top: 36px; }
  .resume-body > .resume-column:first-child { order: 1; }
  .resume-body > .resume-column:last-child { order: 2; }
  .resume-entry + .resume-entry { margin-top: 36px; }
  .resume-paper--en .resume-body > .resume-column:first-child .resume-entry + .resume-entry { margin-top: 36px; }
  .resume-paper--en .resume-body > .resume-column:first-child .resume-entry__head { margin-bottom: 9px; }
  .resume-entry__meta { flex-wrap: wrap; gap: 1px 12px; }
  .resume-entry h3 { font-size: 14px; line-height: 22px; }
  .resume-entry li { font-size: 13px; line-height: 21px; }
  .resume-paper--en .resume-entry li { font-size: 13px; line-height: 21px; }
  .resume-skill-list { font-size: 13px; line-height: 21px; }
  .resume-paper--en .resume-skill-list { line-height: 21px; }
  .resume-body > .resume-column:last-child .resume-section:not(:first-child) { column-gap: 12px; }
  .resume-paper--en .resume-body > .resume-column:last-child .resume-section:not(:first-child) { column-count: 1; }
}

@media (max-width: 359.98px) {
  .resume-paper { padding-inline: 18px; }
  .resume-body > .resume-column:last-child .resume-section:not(:first-child) { column-count: 1; }
}

.page-resume .footer__block { max-width: 960px; }
/* Page layout: the container, sections and their heads, the All Projects grid, the skip link. */

.page-all-projects { background: var(--white); }

.skip-link {
  position: absolute; left: 50%; top: 8px; translate: -50% -200%;
  background: var(--dark); color: #fff; padding: 10px 18px;
  border-radius: var(--r-pill); z-index: 100; font-size: 14px; font-weight: 500;
  transition: translate .2s ease;
}

.skip-link:focus { translate: -50% 0; }

/* ---------- 容器 ---------- */
.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--pad); }

/* ---------- 区块 ---------- */
.sec { padding-block: 160px 96px; }

.sec--white { background: var(--white); }

.sec--tight { padding-block: 88px 160px; }

.sec--exp { padding-block: 160px 94px; }

.sec--projects { padding-block: 160px 96px; }

.all-projects { margin-top: 84px; padding-block: 96px; }

.sec__inner { display: flex; flex-direction: column; gap: 64px; }

.sec-head { width: 100%; max-width: 720px; margin-inline: auto; text-align: center; display: grid; gap: 16px; }

.sec-head h2 { font-size: 48px; line-height: 56px; font-weight: 700; }

.sec-head h2.page-title { font-size: 60px; line-height: 72px; font-weight: 600; }

.sec-head p  { color: var(--ink-2); }

.accent { color: var(--blue-btn); }

/* ---------- 项目卡 ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

@media (max-width: 1279.98px) {
  .sec { padding-block: 112px 72px; }
  .sec--projects { padding-block: 160px 72px; }
  .sec--tight { padding-block: 72px 112px; }
  .sec--exp { padding-block: 100px 0; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 809.98px) {
  .sec { padding-block: 72px 56px; }
  .sec--projects { padding-block: 88px 56px; }
  .all-projects { margin-top: 84px; padding-block: 56px; }
  .sec--tight { padding-block: 56px 72px; }
  .sec--exp { padding-block: 64px 0; }
  .sec__inner { gap: 40px; }
  .sec-head h2 { font-size: 32px; line-height: 40px; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}

.sec--catchup { padding-block: 0 120px; }

/* Two white sections in a row read as one band: one section of space between them, not two. */
.sec--white + .sec--white { padding-top: var(--z-space-section); }

@media (max-width: 809.98px) {
  .sec--white + .sec--white { padding-top: var(--z-space-8); }
}
/* Buttons (.btn) and their rolling label (.roll). */

/* Framer 导航文字保持静止；双份标签只用于按钮的滚入动效。 */
.roll { display: block; overflow: hidden; height: 20px; }

.roll__in { display: block; height: 20px; }

.btn .roll__in { transform: none; }

.btn:hover .roll__in { animation: button-label-enter .7s var(--fx-spring); }

@keyframes button-label-enter {
  from { transform: translateY(-20px); }
  to { transform: none; }
}

/* The system's press and feedback timing; the magnet (motion.js) moves the button through --magnet-x/y. */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 20px; border-radius: var(--r-btn);
  font-size: 14px; line-height: 20px; font-weight: 500;
  cursor: pointer;
  translate: var(--magnet-x, 0px) var(--magnet-y, 0px);
  transition:
    translate 250ms var(--z-ease-out),
    box-shadow var(--z-motion-feedback) var(--z-ease-out),
    scale var(--z-motion-feedback) var(--z-ease-out),
    background-color var(--z-motion-feedback) var(--z-ease-out);
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  scale: var(--z-press-scale);
  transition-duration: 250ms, var(--z-motion-feedback), var(--z-motion-press), var(--z-motion-feedback);
}

.btn--blue  { background: var(--blue-btn); color: #fff; }

.btn--light { background: #fff; color: var(--dark); }

.btn--dark  { background: var(--dark); color: #fff; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { box-shadow: 0 8px 24px #4b6bf32b; }
}
/* The home hero, and the card base that About's header shares (.hero--about sets its own size and padding in
   about.css). The home hero is the one without .hero--about.

   One rule at every width: the card hugs its content. Room for the illustration at the top, then the greeting, the
   lede, the credentials and the button, with only the card's own padding under the button. The first screen is at
   least the device's height and grows with the card, keeping 84px above and below it (72/68px on a phone) for the
   nav and the scroll cue, which sits 32px above the screen's bottom edge.
   Until v2.2.1 the card had a fixed height from several later patches (528px; 100svh - 160px under 700px tall;
   430-500px on a phone) with its overflow hidden, so the credentials row pushed the button against the bottom edge. */

/* ---------- 首屏 ---------- */
.hero__card {
  position: relative; overflow: hidden;
  background: var(--dark); color: #fff;
  border-radius: var(--r-block);
  padding: 160px 64px 64px;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 40px;
}

.hero__text { display: grid; gap: 16px; }

.hero__card h1 { font-size: 60px; line-height: 72px; font-weight: 600; max-width: 640px; }

.hero__lede { max-width: 560px; color: var(--ink-3); }

.hero__lede .accent { color: var(--blue); }

.hero__graphic {
  position: absolute; top: 0; right: 0; width: 415px; height: 311px;
  pointer-events: none; user-select: none;
}

.hero:not(.hero--about) {
  position: relative; display: grid; place-items: center; box-sizing: border-box;
  min-height: 100vh; min-height: 100dvh; padding: 84px 0;
}

.hero:not(.hero--about) > .wrap { width: 100%; padding-block: 0; }

.hero:not(.hero--about) .hero__card { min-height: 0; }

/* Three credentials under the lede, a level below it. Glass pills on the dark card, in the design system's pill shape
   and 14/20 interface type; the organisation in white, the role softer. */
.page-home .hero__creds { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }

.page-home .hero__cred {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--z-radius-pill);
  background: rgb(255 255 255 / 7%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%);
  color: rgb(255 255 255 / 72%); font: 500 14px / 20px var(--z-font-interface); white-space: nowrap;
}

.page-home .hero__cred strong { color: #fff; font-weight: 600; }

.page-home .hero__cred i { font-style: normal; opacity: .45; }

/* ---------- 首屏下方的双箭头滚动提示 ---------- */
.scroll-cue {
  position: absolute; inset: auto 0 32px;
  display: grid; place-items: center; height: 24px; color: var(--ink); cursor: pointer;
  border-radius: 999px;
}

.scroll-cue__arrows {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  animation: cue 2.6s ease-in-out infinite;
}

.scroll-cue__arrows svg { display: block; width: 14.4px; height: 7.2px; }

.scroll-cue:hover .scroll-cue__arrows,
.scroll-cue:focus-visible .scroll-cue__arrows { color: var(--blue-btn); animation-duration: 1.35s; }

@keyframes cue {
  0%, 55%, 100% { transform: translateY(0); opacity: .42; }
  78% { transform: translateY(14px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue__arrows { animation: none }
}

/* ---------- 平板 ---------- */
@media (max-width: 1279.98px) {
  .hero__card { padding: 140px 40px 48px; }
  .hero__card h1 { font-size: 48px; line-height: 58px; }
  .hero__graphic { width: 320px; height: 240px; }
}

/* Short desktop and tablet screens: less room above the text and under the button, the illustration stays its size. */
@media (min-width: 810px) and (max-height: 700px) {
  .hero:not(.hero--about) .hero__card {
    padding: clamp(104px, 20svh, 140px) 48px clamp(32px, 8svh, 56px);
    gap: 32px;
  }
}

/* ---------- 手机 ---------- */
@media (max-width: 809.98px) {
  .hero:not(.hero--about) { padding-block: 72px 68px; }
  .hero:not(.hero--about) > .wrap { padding-inline: 16px; }
  .hero:not(.hero--about) .hero__card { padding: 112px 32px 32px; }
  .hero:not(.hero--about) .hero__card h1 { font-size: 36px; line-height: 44px; }
  .hero:not(.hero--about) .hero__lede { font-size: 16px; line-height: 24px; }
  /* The illustration anchored in the corner, not undersized. */
  .hero:not(.hero--about) .hero__graphic { top: -4px; right: -4px; width: min(156px, 46%); height: auto; }
  .hero:not(.hero--about) .btn { width: 100%; justify-content: center; }
  .page-home .hero__cred { padding: 5px 12px; font-size: 13px; }
}

@media (max-width: 809.98px) and (max-height: 720px) {
  .hero:not(.hero--about) .hero__card { gap: 20px; }
}
/* Experience cards: the logos, the role and the dates. */

/* ---------- 经历卡 ---------- */
.exp { background: #fff; border-radius: var(--r-card); padding: 24px; display: grid; gap: 12px; align-content: start; }

.exp__logos { display: flex; gap: 0; overflow: visible; }

.exp__logo {
  position: relative; width: 48px; height: 48px; flex: none; overflow: hidden;
  border: 2px solid var(--line); box-shadow: 0 0 0 2px #fff; border-radius: var(--r-pill);
  padding: 0; display: grid; place-items: center; background: #fff; isolation: isolate;
}

.exp__logo + .exp__logo { margin-left: -16px; }

.exp__logo:nth-child(1) { z-index: 1; }

.exp__logo:nth-child(2) { z-index: 2; }

.exp__logo--dark { background: var(--dark); }

.exp__logo--clear { background: #fff; }

.exp__logo img { display: block; width: 100%; height: 100%; border-radius: var(--r-pill); object-fit: cover; object-position: center; }

.exp__logo--jci img { transform: scale(1.14); }

.exp__body { display: grid; gap: 10px; }

.exp h3 { font-size: 18px; line-height: 24px; font-weight: 600; }

.exp__badge { margin-left: 8px; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--ink); opacity: .7; }

.exp__meta { display: grid; gap: 0; font-size: 14px; line-height: 20px; font-weight: 400; }

.exp__meta strong { font-weight: 700; }

.exp__meta span { font-weight: 400; }
/* The logo strip. */

/* ---------- logo 跑马灯 ---------- */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }

.marquee img { opacity: 1; }

.marquee__track {
  display: flex; align-items: center; gap: 72px; width: max-content;
  will-change: transform; animation: marquee-left 11.78s linear infinite;
}

.js .marquee:not(.is-in) .marquee__track { animation-play-state: paused; }

.marquee__track > * { flex: none; }

.marquee__tts { width: 98px; height: 24px; }

.marquee__tts img { display: block; width: 98px; height: 24px; object-fit: cover; object-position: center; }

.marquee__jci { display: flex; align-items: center; gap: 2px; width: 46px; height: 24px; color: #152ea9; }

.marquee__jci img { width: 16px; height: 16px; border: 2px solid var(--line); object-fit: cover; object-position: center; border-radius: 50%; background: #fff; }

.marquee__jci span { font-size: 6px; line-height: 6.5px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; }

.marquee__samsung { width: 90px; height: 24px; object-fit: fill; }

.marquee__lenovo { width: 72px; height: 24px; object-fit: fill; }

@keyframes marquee-left { to { transform: translateX(calc(-50% - 36px)); } }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ---------- Logo strip: one letter height ---------- */
/* The marks used to sit in fixed 24px boxes, so their letters ranged from 6px (Johnson Controls) to 16px. Each box is
   now sized so the letters come out about 14px tall: the TikTok Shop and Samsung files carry wide padding, cropped by
   object-fit; Lenovo is its red block; Johnson Controls is its two-line wordmark, drawn as a mask. */
.marquee .marquee__logo {
  display: block;
  flex: none;
}

.marquee .marquee__logo--tts { width: 151px; height: 24px; object-fit: cover; object-position: 50% 47%; }

.marquee .marquee__logo--samsung { width: 104px; height: 16px; object-fit: cover; object-position: 50% 50%; }

.marquee .marquee__logo--lenovo { width: auto; height: 26px; }

.marquee .marquee__logo--jci {
  width: 87px;
  height: 42px;
  /* The brand's own colours: the blue wordmark, the swoosh running from blue into green (logo-johnson-controls.png). */
  background: linear-gradient(90deg, #1828a8 0%, #1828a8 58%, #0868f8 74%, #38c898 88%, #58d858 100%);
  -webkit-mask: url("/assets/img/johnson-controls-wordmark.svg?v=bdad20f5d9") center / contain no-repeat;
  mask: url("/assets/img/johnson-controls-wordmark.svg?v=bdad20f5d9") center / contain no-repeat;
}
/* Panels: the large white or dark blocks on the home page and in the case studies. */

/* ---------- 白色大面板 ---------- */
.panel { background: #fff; border-radius: var(--r-block); padding: 32px; display: grid; gap: 32px; }

.panel--dark { background: var(--dark); color: #fff; }

.panel__head { display: flex; gap: 64px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }

.panel__head > div { flex: 1 1 400px; min-width: 0; }

.panel__head h2 { font-size: 36px; line-height: 44px; font-weight: 600; }

.panel__head p { color: var(--ink-2); flex: 0 1 360px; text-align: right; }

.panel .pill { background: #fff; }

:where(.case) .panel p strong,
:where(.case) .panel li strong { color: var(--ink); }

.case .panel { border-radius: var(--r-card); padding: 36px; gap: 20px; }

.case .panel:has(.panel__body) { gap: 36px; }

.panel__body { display: grid; gap: 16px; }

.panel__group { display: grid; gap: 0; }

.case .panel--quotes { border-radius: var(--r-block); padding: 32px; gap: 32px; }

.case .panel > h3 { font-weight: 500; }

@media (max-width: 809.98px) {
  .panel { padding: 24px; }
  .panel__head { gap: 20px; }
  .panel__head h2 { font-size: 28px; line-height: 36px; }
}

@media (max-width: 809.98px) {
  .case .panel {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px;
  }
  .case :is(.tradeoff__card, .block, .panel) > * { min-width: 0; }
}

/* ---------- Alignment and rhythm ---------- */
/* On a phone the panel head stacks, so its lead reads from the left like everything above it. */
@media (max-width: 809.98px) {
  .panel__head p { text-align: left; flex-basis: auto; }
}
/* Recommendations: the quotes and their Read more. */

.sec--rec { padding-block: 80px 160px; }

/* ---------- 推荐语 ---------- */
.quotes { display: grid; gap: 16px; }

.quote { background: var(--bg); border-radius: var(--r-card); padding: 32px; display: grid; gap: 24px; align-content: start; }

.quote__who { display: flex; align-items: center; gap: 12px; }

.quote__who img { width: 44px; height: 44px; flex: none; border: 2px solid var(--line); border-radius: 60px; object-fit: cover; object-position: center; background: #fff; }

.quote__id { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }

.quote__id h3 { font-size: 18px; line-height: 24px; font-weight: 600 !important; }

.quote__id p { font-size: 14px; line-height: 20px; font-weight: 400; }

.quote blockquote { font-size: 12px; line-height: 18px; font-weight: 600; }

.quote details summary { cursor: pointer; margin-top: 10px; font-size: 12px; line-height: 18px; font-weight: 700; color: var(--blue-btn); list-style: none; }

.quote details summary::-webkit-details-marker { display: none }

.quote details p { margin-top: 8px; }

@media (max-width: 1279.98px) {
  .sec--rec { padding-block: 64px 112px; }
}

@media (max-width: 809.98px) {
  .sec--rec { padding-block: 48px 72px; }
  .quote { padding: 24px; }
}

@media (min-width: 810px) {
  .page-home .sec--rec { padding-bottom: 164.84375px; }
}

/* ---------- Recommendations: the long quote rests at a few lines ---------- */
/* Stanley's quote ran nine lines across the panel. It rests at four (eight on a phone) and opens in place; the size
   stays the site's. The button text is blue-ink, which holds AA on the canvas. */
.quote [data-quote-state='clamped'] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

@media (max-width: 809.98px) {
  .quote [data-quote-state='clamped'] { -webkit-line-clamp: 8; line-clamp: 8; }
}

.quote__more {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  margin-top: -16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--z-color-blue-ink);
  font: 600 13px / 18px var(--font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.quote__more[hidden],
.quote__more-label--less,
.quote__more[aria-expanded='true'] .quote__more-label--more { display: none; }

.quote__more[aria-expanded='true'] .quote__more-label--less { display: inline; }

.quote__more .ico { transition: rotate var(--z-motion-control) var(--z-ease-spring); }

.quote__more[aria-expanded='true'] .ico { rotate: 180deg; }

.quote__more:focus-visible { outline: 2px solid var(--z-color-blue); outline-offset: 3px; border-radius: 4px; }

@media (hover: hover) and (pointer: fine) {
  .quote__more:hover { text-decoration: underline; text-underline-offset: 3px; }
}
/* The footer. */

/* ---------- 页脚 ---------- */
.footer { padding: 8px; }

.footer__block { max-width: var(--page); margin-inline: auto; overflow: hidden; background: var(--dark); border-radius: var(--r-block); }

.footer__inner { max-width: var(--page); margin-inline: auto; padding: 64px var(--pad) 32px; display: flex; flex-direction: column; gap: 64px; }

.footer__brand {
  align-self: flex-start;
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  color: #fff;
  transform-origin: 0 100%;
}

.footer__bottom { padding-top: 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.footer__bottom p { font-size: 14px; line-height: 20px; color: var(--muted); }

.footer__social { display: flex; gap: 12px; }

.footer__social a {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: #fff;
  opacity: .8;
  translate: var(--magnet-x, 0px) var(--magnet-y, 0px);
  transition: translate .25s var(--fx-ease), box-shadow .25s ease;
}

.footer__social a:hover { opacity: 1; }

.footer__social svg { width: 20px; height: 20px; fill: currentColor; }

/* Framer 的案例页页脚是白色卡片；主页继续使用深色页脚。 */
.page-case .footer__block { background: #fff; }

.page-case .footer__brand, .page-case .footer__social a { color: var(--ink); }

@media (max-width: 809.98px) {
  .footer__inner { padding: 40px var(--pad) 24px; gap: 40px; }
}
.nda {
  overflow-wrap: anywhere;
  word-break: break-word;
  color: #ffaa93;
  font-weight: 600;
}

.sec-head .pill { justify-self: center; }

.case .grid-3 { gap: 36px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px 6px 14px; border-radius: var(--r-pill);
  background: #fff; border: 0; box-shadow: inset 0 0 0 1px #e6e6e6;
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); text-align: center;
  width: max-content; max-width: 100%;
}

/* ---------- 案例页 ---------- */
/* 首屏：整屏循环视频 + 白色叠层文字 */
.case-hero {
  position: relative; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden;
  padding-inline: 64px; color: #fff; background: var(--dark);
}

.case-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transform-origin: 50% 50%;
}

.case-hero__inner { position: relative; z-index: 2; width: 100%; height: 100%; }

.case-hero__identity {
  position: absolute; left: 50%; top: 47.8%; transform: translate(-50%, -50%);
  display: grid; gap: 0; justify-items: center; width: 100%; min-width: 0;
}

.case-hero__logo { max-width: 467px; width: min(467px, 70%); height: auto; }

.case-hero h1 { width: 100%; font-size: 24px; line-height: 32px; font-weight: 500; text-align: center; }

.case-hero--amazon::after,
.case-hero--element::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(14,18,32,.28); pointer-events: none; }

.case-hero--amazon .case-hero__logo { width: 280px; max-width: 70%; }

.case-hero--amazon h1 { width: 487px; max-width: 100%; margin-top: 25px; }

.case-hero__jci { display: block; width: 270px; height: 130px; object-fit: contain; }

.case-hero--element .case-hero__identity { top: 48.65%; }

.case-meta {
  position: absolute; inset: auto 0 clamp(40px, 8.9dvh, 80px); width: 100%; margin: 0; border-radius: var(--r-card);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  font-size: 18px; line-height: 28px;
}

.case-meta strong { font-weight: 700; }

.case-meta p { color: #fff; }

.case { padding-bottom: 96px; }

.case > section { padding-block: 96px 0; display: grid; gap: 32px; }

.case > section:first-child { padding-top: 79px; }

.case > section > .wrap, .case section.wrap { display: grid; gap: 32px; }

.case-head { width: 100%; min-width: 0; text-align: center; display: grid; gap: 16px; max-width: 720px; margin-inline: auto; }

.case-head .pill {
  justify-self: center;
  text-align: center;
  background: #fff;
}

/* 左对齐变体：pill 仍居中，小标题和大标题靠左通栏 */
.case-head--left { max-width: none; text-align: left; }

.case-head--left .case-title, .case-head--left .case-sub {
  text-align: left;
  width: 100%;
}

.case-head--left .case-sub--pill { width: max-content; max-width: 100%; text-align: left !important; }

/* 原站的两栏对照：列宽 498，间距 156 */
.two-col { display: grid; grid-template-columns: 498px 498px; justify-content: space-between; gap: 156px 156px; }

.two-col .block, .col-group .block { background: none; border-radius: 0; padding: 0; gap: 16px; }

.two-col .block h3 { color: var(--ink-2); }

.two-col .kicker { text-align: center; }

@media (max-width: 1279.98px) {
  .two-col { grid-template-columns: minmax(0,1fr); gap: 24px; }
}

.case-title { font-size: 48px; line-height: 56px; font-weight: 700; width: 100%; }

/* 用 :where() 写通用排版，特指度为 0，组件类永远能盖过它 */
:where(.case) :where(h2) { font-size: 36px; line-height: 44px; font-weight: 600; }

:where(.case) :where(h3) { font-size: 24px; line-height: 32px; font-weight: 500; }

:where(.case) :where(h4) { font-size: 18px; line-height: 24px; font-weight: 600; }

:where(.case) :where(p)  { color: var(--ink-2); }

/* 原站列表不缩进，项目符号挂在文字左侧的留白里 */
:where(.case) :where(ul) { display: grid; gap: 0; padding-left: 0; list-style: disc outside; color: #212121; }

.case ol { margin: 0; padding-left: 23px; color: #212121; }

:where(.case) :where(.two-col ul, .block ul) { color: var(--ink-2); }

:where(.case) :where(.step p, .block p) { color: #212121; }

:where(.case) .plain-block p strong { color: var(--ink); }

.case li::marker { color: var(--muted); }

.kicker { color: var(--ink); font-weight: 600; }

/* 三组 trade-off：编号 + 小标题 + 陈述 + 左右两栏中间一个箭头 */
.tradeoff { display: grid; gap: 16px; padding: 16px; border-radius: var(--r-card); background: var(--bg); }

.tradeoff__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.tradeoff__head .num { width: 48px; height: 48px; font-size: 18px; line-height: 24px; }

.tradeoff__pill {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 2px 16px; border: 2px solid var(--dark); border-radius: var(--r-pill);
  width: max-content; max-width: 100%; text-align: center;
  font-size: 18px; line-height: 24px; color: var(--ink);
}

.tradeoff__pill strong { font-weight: 700; }

.impact__pill {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 2px 16px; border: 2px solid var(--dark); border-radius: var(--r-pill);
  width: max-content; max-width: 100%; text-align: center;
  font-size: 18px; line-height: 24px; color: var(--ink);
}

.impact__pill strong { font-weight: 700; }

.tradeoff h3 { font-size: 24px; line-height: 32px; font-weight: 600; }

.tradeoff__pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: stretch; }

.tradeoff__card { display: grid; gap: 20px; align-content: center; background: #fff; border-radius: var(--r-card); padding: 24px; }

.tradeoff__arrow { align-self: center; font-size: 48px; line-height: 1; color: var(--ink); }

@media (max-width: 809.98px) {
  .tradeoff__pair { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .tradeoff__card { padding: 20px; }
  .tradeoff__arrow { justify-self: center; }
}

.two-groups { display: grid; grid-template-columns: 534px 534px; gap: 84px; justify-content: space-between; }

.col-group { display: grid; gap: 16px; align-content: start; }

.col-group h2 { margin-bottom: 8px; }

@media (max-width: 1279.98px) {
  .two-groups { grid-template-columns: minmax(0,1fr); gap: 32px; }
}

.split { display: grid; grid-template-columns: 1fr 522px; gap: 72px; align-items: start; }

.split__body { display: grid; gap: 12px; }

@media (max-width: 1279.98px) {
  .split { grid-template-columns: minmax(0,1fr); gap: 20px; }
}

/* 原站问题卡内部为 1080px：346 / 346 / 356，列间距 16。 */
.tri { display: grid; grid-template-columns: 346px 346px 356px; gap: 16px; }

.tri img { width: 100%; border-radius: var(--r-card); }

@media (max-width: 1279.98px) {
  .tri { grid-template-columns: minmax(0,1fr); gap: 32px; }
}

.plain-stack { display: grid; gap: 44px; }

.plain-block { display: grid; gap: 12px; }

.plain-block h3 { font-size: 24px; line-height: 32px; font-weight: 500; }

.stack-blocks {
  display: grid;
  gap: 16px;
  padding: 36px;
  border-radius: var(--r-card);
  background: #fff;
}

.block { background: #fff; border-radius: var(--r-card); padding: 24px; display: grid; gap: 12px; align-content: start; }

.block h3 { font-size: 24px; line-height: 32px; font-weight: 500; }

.step { background: transparent; border-radius: 0; padding: 0; display: grid; gap: 12px; align-content: start; }

.step h3 { font-size: 24px; line-height: 32px; font-weight: 700; }

.case .step h3 { font-weight: 500; }

.page-case .step h3 { font-weight: 700; }

.num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--dark); color: #fff; font-size: 16px; font-weight: 700; }

.notice {
  background: var(--bg); border-radius: var(--r-card);
  padding: 16px 16px 16px 36px; display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: nowrap;
}

.notice::before { content: "⚠️"; width: 24px; flex: 0 0 24px; font-size: 20px; line-height: 24px; }

.notice p { min-width: 0; font-size: 18px; line-height: 26px; font-weight: 600; color: var(--ink-2); flex: 1 1 0; }

.notice .btn { flex: none; margin-left: auto; }

.notice--dark { background: var(--ink-2); }

.notice--dark p { color: #fff; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
  background: #fff; border-radius: var(--r-block); padding: 64px; }

.stat { display: grid; gap: 4px; text-align: left; }

.stat b {
  font-size: 48px;
  line-height: 56px;
  font-weight: 700;
  display: block;
  transform-origin: 50% 100%;
}

.stat span { font-size: 18px; line-height: 28px; color: var(--muted); text-align: center; }

.figure { display: grid; gap: 12px; }

.figure img { border-radius: var(--r-card); background: #fff; width: 100%; }

.figure figcaption { text-align: center; font-size: 14px; line-height: 20px; color: var(--muted); }

.overview-grid {
  width: 100%; max-width: 1152px; margin-inline: auto; padding: 36px;
  display: grid; grid-template-columns: repeat(2, 522px); gap: 36px; align-items: start;
  background: #fff; border-radius: var(--r-card);
}

.overview-grid .figure img { width: 522px; object-fit: cover; }

.overview-grid--amazon .figure img { height: 412px; }

.overview-grid--element .figure img { height: 700px; }

.overview-grid .split__body { padding-top: 0; }

.figure--scroll {
  width: 100vw;
  width: 100cqw;
  margin-left: calc(50% - 50vw);
  margin-left: calc(50% - 50cqw);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: auto;
  scrollbar-color: #8e8e8e #e6e6e6;
  display: block;
  position: relative;
  height: 100dvh;
  min-height: 0;
  padding-bottom: 10px;
  background: #fff;
}

.figure--scroll img,
.figure--panorama img {
  display: block; width: auto; height: calc(100vh - 15px); height: calc(100dvh - 15px);
  max-width: none; min-width: 100vw; border-radius: 0;
  object-fit: contain; object-position: left center; background: #fff;
}

.figure--scroll figcaption {
  position: sticky; z-index: 2; left: 16px; bottom: 24px; width: max-content;
  max-width: calc(100vw - 32px); margin: -56px 16px 18px; padding: 8px 12px;
  border: 1px solid rgba(0,0,0,.08); border-radius: 999px;
  background: rgba(255,255,255,.9); color: var(--ink-2); backdrop-filter: blur(12px);
}

.figure--scroll::-webkit-scrollbar { height: 10px; }

.figure--scroll::-webkit-scrollbar-track { background: #e6e6e6; }

.figure--scroll::-webkit-scrollbar-thumb { background: #8e8e8e; border: 2px solid #e6e6e6; border-radius: 999px; }

.current-flow-stack { display: grid; gap: 12px; }

.current-flow-stack .figure { width: 100%; }

.current-flow-stack img { width: 100%; height: auto; }

/* Framer 的研究段落以整屏白底承接，其他项目段落保持浅灰页面底色。 */
.page-case { overflow-x: clip; container-type: inline-size; }

.stack-blocks .block { padding: 0; border-radius: 0; background: transparent; }

.fragmented-pill {
  width: max-content; max-width: 100%; margin-inline: auto; padding: 8px 36px; border-radius: 999px;
  background: var(--dark); color: #fff; text-align: center; white-space: nowrap;
}

.fragmented-pill span:not(.i18n-inline) { color: #ffaa93; }

@media (max-width: 809.98px) {
  .fragmented-pill { width: min(613px, 100%); white-space: normal; }
}

.case-sub--pill {
  width: max-content; max-width: 100%; padding: 6px 16px; border-radius: 999px;
  background: var(--bg); color: var(--ink); text-align: left !important; font-size: 24px; line-height: 32px; font-weight: 500;
}

.case-lead-title { font-size: 36px !important; line-height: 44px !important; font-weight: 600 !important; }

.deep-dive-callout {
  width: 100vw; width: 100cqw; margin-left: calc(50% - 50vw); margin-left: calc(50% - 50cqw);
  padding: 36px max(24px, calc((100% - 952px) / 2)) 64px;
  display: grid; justify-items: center; gap: 16px; background: #ccddff;
}

.deep-dive-callout h2 { width: min(952px, 100%); font-size: 24px; line-height: 32px; font-weight: 500; text-align: center; }

.mouse-cue {
  position: relative; display: grid; place-items: center; width: 24px; height: 40px;
  border: 2px solid rgba(26,26,26,.5); border-radius: 20px;
}

.mouse-cue i { width: 6px; height: 6px; border-radius: 50%; background: var(--dark); }

.deep-dive-callout .mouse-cue i {
  animation: mouse-wheel 1.6s ease-in-out infinite;
}

@keyframes mouse-wheel {
  0%, 100% { transform: translateY(2px); opacity: 1; }
  60% { transform: translateY(16px); opacity: 0; }
}

.hmw-group { display: grid; gap: 64px; width: 100%; }

.hmw-quote { font-size: 48px; line-height: 56px; font-weight: 600; }

.hmw-quote--end { text-align: right; }

.hmw-item { display: grid; gap: 16px; }

.hmw-n {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--dark); color: #fff; font-size: 24px; line-height: 32px; font-weight: 500;
}

.hmw-item h3 { font-size: 24px; line-height: 32px; font-weight: 600; text-align: left; }

.pullquote { text-align: center; font-size: 36px; line-height: 44px; font-weight: 600; color: var(--ink); width: 100%; max-width: 800px; margin-inline: auto; }

.pullquote::before, .pullquote::after { content: '"'; color: var(--blue); }

/* 成果段落：文字 510 / 配图 558 左右交错，与原站一致 */
.zigzag { display: grid; grid-template-columns: 558px 558px; gap: 36px; align-items: start; padding: 0; }

.zigzag--flip { grid-template-columns: 558px 558px; padding: 0; }

.zigzag__text { display: grid; gap: 12px; align-content: center; padding: 24px; background: #fff; border-radius: var(--r-card); }

.zigzag__text h3 { font-size: 24px; line-height: 32px; font-weight: 500; }

.zigzag figure, .zigzag img { margin: 0; }

.zigzag img { width: 100%; border-radius: var(--r-card); }

/* 成果区：两张文字卡一组、两张图一组，与原站一样左右成行并垂直居中 */
.work-pair {
  display: grid; grid-template-columns: 558px 558px; gap: 36px;
  align-items: center; justify-content: center; padding: 0;
}

.work-pair__text { display: grid; gap: 36px; }

.work-pair__media { display: grid; gap: 16px; align-content: center; }

.work-pair__media--flush { gap: 0; }

.work-pair__media figure, .work-pair__media img { margin: 0; }

.work-pair__media img { width: 100%; border-radius: 0; }

.work-pair .zigzag__text { width: 100%; padding: 24px; background: #fff; border-radius: var(--r-card); }

.work-pair .zigzag__text h3 { font-weight: 700; color: var(--ink-2); }

.work-pair .zigzag__text p { color: var(--ink-2); }

@media (max-width: 1279.98px) {
  .work-pair { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 809.98px) {
  .work-pair--flip .work-pair__media { order: 1; }
  .work-pair--flip .work-pair__text { order: 2; }
}

@media (max-width: 1279.98px) {
  .zigzag, .zigzag--flip { grid-template-columns: minmax(0,1fr); gap: 24px; padding: 0; }
  .zigzag--flip .zigzag__text { order: -1; }
}

.muted-lead { color: var(--ink-2) !important; }

/* 案例图注：原站是 18/26 semibold，且颜色保留 muted */
.page-case .figure figcaption { font-size: 18px; line-height: 26px; font-weight: 600; }

@media (max-width: 1279.98px) {
  .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-meta { margin: 0; }
  .case-hero { padding-top: 0; }
  .case-title { font-size: 40px; line-height: 48px; }
  .overview-grid { max-width: none; grid-template-columns: minmax(0,1fr); gap: 24px; }
  .overview-grid .figure img { width: 100%; height: auto; object-fit: contain; }
}

@media (max-width: 809.98px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .case-hero { height: 100vh; height: 100dvh; min-height: 0; padding: 0 24px; }
  .case-hero__inner { display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 84px 0 32px; }
  .case-hero__identity,
  .case-hero--element .case-hero__identity {
    position: static; align-self: center; transform: none; width: 100%;
  }
  .case-hero__logo { width: min(360px, 90%); }
  .case-hero--amazon .case-hero__logo { width: 230px; }
  .case-hero--amazon h1 { width: 100%; max-width: 100%; margin-top: 16px; font-size: 24px; line-height: 32px; }
  .case-hero__jci { width: 230px; height: auto; }
  .case-meta { position: static; margin: 0; grid-template-columns: minmax(0,1fr); gap: 8px; font-size: 16px; line-height: 24px; }
  .case-title { font-size: 30px; line-height: 38px; }
  .notice {
    gap: 16px;
    flex-wrap: wrap;
    /* Keep the disclosure readable: its action no longer competes with copy. */
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-areas:
      "icon copy"
      "action action";
    align-items: start;
    padding: 20px;
  }
  .stat b { font-size: 36px; line-height: 44px; }
  .case-hero h1 { font-size: 32px; line-height: 40px; }
  .case h2 { font-size: 28px; line-height: 36px; }
  .case > section { padding-block: 40px; }
  .overview-grid { padding: 24px; border-radius: var(--r-card); }
  .stack-blocks { padding: 24px; }
  .case-sub--pill { font-size: 18px; line-height: 28px; }
  .case-head--left .case-sub--pill { width: 100%; }
  .deep-dive-callout { padding: 32px 24px 48px; }
  .hmw-group { gap: 40px; }
  .figure--scroll { min-height: 0; }
  .pullquote { font-size: 20px; line-height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .mouse-cue i { animation: none; }
}

@keyframes cue {
  0%, 55%, 100% { transform: translateY(0); opacity: .42; }
  78% { transform: translateY(14px); opacity: 1; }
}

/* ---------- pill 里的图标 ---------- */
.pill .ico { flex: none; color: #212121; }

/* ---------- 案例页小标题 ---------- */
.case-sub { font-size: 24px; line-height: 32px; font-weight: 600; color: var(--ink-2); }

@media (max-width: 809.98px) and (max-height: 720px) {
  .case-hero__inner { padding-top: 72px; padding-bottom: 24px; }
  .case-hero h1 { font-size: 24px; line-height: 32px; }
  .case-hero__logo { width: min(300px, 82%); }
  .case-hero--amazon .case-hero__logo { width: 190px; }
  .case-hero__jci { width: 200px; height: auto; }
  .case-meta { font-size: 14px; line-height: 20px; gap: 6px; }
}

/* ---------- Case studies: mobile container contract ----------
   Several desktop full-bleed sections deliberately remove their inline padding.
   On a phone that made their cards touch the viewport edge, and intrinsic grid
   sizing could grow beyond the clipped page. Keep every case section on the
   same 24px rhythm and make its grid track explicitly shrinkable. */
@media (max-width: 809.98px) {
  .case > section.wrap {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }
  .case > section.wrap > * { min-width: 0; }
  .case .block {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }
  .case .tradeoff { grid-template-columns: minmax(0, 1fr); }
  .case .tradeoff__pair {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
  }
  .case .tradeoff__card { width: auto; min-width: 0; }
  /* Card-in-card labels carry meaning, so give their copy a full readable line
     instead of letting an intrinsic-width pill squeeze it into narrow columns. */
  .case :is(.impact__pill, .tradeoff__pill, .amz-card-pill) {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .notice::before { grid-area: icon; margin-top: 1px; }
  .notice p { grid-area: copy; width: 100%; }
  .notice .btn {
    grid-area: action;
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }
  /* Paired desktop cards become a top-to-bottom causal sequence on phone. */
  .case .tradeoff__arrow {
    display: grid;
    place-items: center;
    width: auto;
    height: auto;
    padding-block: 4px;
    font-size: 0;
    line-height: 1;
    transform: none;
  }
  .case .tradeoff__arrow::after {
    content: "↓";
    font-size: 48px;
    line-height: 1;
  }
}

/* ---------- Contrast: captions read at AA ---------- */
/* `--muted` (#8e8e8e) is 3.3:1 on the canvas; the system keeps it for decoration. Words take the caption grey. */
.stat span,
.figure figcaption { color: var(--z-color-caption); }
/* TikTok Shop case: what only that page needs (its full content lives in tiktok-gate.css). */

.page-case-tiktok ol {
  list-style: none;
  padding-left: 0;
  counter-reset: tiktok-step;
}

.page-case-tiktok ol li {
  position: relative;
  list-style: none;
  padding-left: 23.832px;
  counter-increment: tiktok-step;
}

.page-case-tiktok ol li::before {
  content: counter(tiktok-step) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ink-2);
}

.page-case-tiktok .footer {
  margin-top: -58px;
}

.page-case-tiktok .case > section:nth-child(2) .step {
  padding: 24px; border-radius: var(--r-card); background: #fff;
}

.page-case-tiktok .notice--dark .btn,
.page-case-tiktok .notice--dark .btn--blue { background: var(--blue-btn); }
/* Amazon Checkout case: what only that page needs. */

.page-case-amazon .amazon-deep {
  background: #fff;
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax);
  padding-top: 128px;
  padding-bottom: 64px;
  gap: 36px;
  margin-top: 80px;
  /* From the Framer original, the later sections of Amazon and Element ran 1200px wide (Amazon's research block 1248px)
   while the overview and process above them sit in the 1152px column, so the left edge stepped out by 24px. Every
   section now keeps the page's padding, and the side-by-side grids that were sized for 1200 share what is there. */
  max-width: var(--page);
}

.page-case-amazon .case > section:nth-child(2) .step {
  padding: 24px; border-radius: var(--r-card); background: #fff;
}

.page-case-amazon .case > section:nth-child(2) { padding-top: 36px; }

.page-case-amazon .case { padding-bottom: 0; }

.page-case-amazon .footer {
  padding-top: 48px;
  padding-bottom: 8px;
  padding-inline: 8px;
}

.page-case-amazon .amazon-deep .plain-stack .plain-block,
.page-case-amazon .amazon-deep .two-col .block {
  padding: 24px; border-radius: var(--r-card); background: var(--bg);
}

.page-case-amazon .amazon-deep .two-col { grid-template-columns: 546px 36px 546px; gap: 36px; }

.page-case-amazon .amazon-deep .problem-cards { margin-top: -16px; }

.page-case-amazon .amazon-deep .impact-cards-row {
  margin-top: -20px;
  margin-bottom: 52px;
}

.page-case-amazon .amazon-deep .impact-title {
  margin-top: -32px;
}

.page-case-amazon .amazon-deep .amz-pair-arrow {
  display: grid;
  place-items: center;
  align-self: center;
  font-size: 48px;
  line-height: 1;
  font-weight: 600;
  color: var(--ink);
}

.page-case-amazon .amazon-deep .problem-cards .amz-pair-arrow {
  margin-top: -41px;
}

.page-case-amazon .amazon-deep .two-groups { grid-template-columns: 582px 582px; gap: 36px; }

.page-case-amazon .amazon-deep .col-group .block {
  padding: 24px; border-radius: var(--r-card); background: #ccddff;
}

@media (max-width: 1279.98px) {
  .page-case-amazon .amazon-deep .two-col {
    width: 100%; grid-template-columns: minmax(0,1fr); gap: 24px;
  }
  .page-case-amazon .amazon-deep .amz-pair-arrow {
    justify-self: center;
    transform: rotate(90deg);
  }
  .page-case-amazon .amazon-deep .two-groups {
    width: 100%; grid-template-columns: minmax(0,1fr); gap: 32px;
  }
}

/* Amazon Research 段落原版是 #1a1a1a */
.page-case-amazon .amazon-deep .plain-block,
.page-case-amazon .amazon-deep .plain-block p,
.page-case-amazon .amazon-deep .plain-block strong {
  color: var(--ink);
}

/* Amazon Context 的 Brief / Focus 是 18px 正文小节，不是 24px 小标题 */
.page-case-amazon .overview-grid--amazon .split__body {
  gap: 16px;
}

.page-case-amazon .amz-overview-copy {
  display: grid;
  gap: 0;
}

.page-case-amazon .amz-overview-copy p {
  font-size: 18px;
  line-height: 28px;
  color: var(--ink-2);
}

.page-case-amazon .amz-overview-copy p:first-child strong {
  color: var(--ink);
}

/* Amazon Research 三张洞察卡：原版有 48px 编号圆点，卡间距 16 */
.page-case-amazon .amazon-deep .plain-stack {
  gap: 16px;
}

.page-case-amazon .amazon-deep .plain-stack .plain-block {
  gap: 16px;
}

.page-case-amazon .amazon-deep .plain-stack .plain-block .num {
  width: 48px;
  height: 48px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  padding: 2px;
}

.page-case-amazon .amazon-deep .plain-stack .plain-block p {
  margin: 0;
  color: var(--ink-2);
}

/* Amazon Problem 双卡：标签是 2px outline pill，标题整体加粗 */
.page-case-amazon .amazon-deep .two-col .block .amz-card-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  min-height: 48px;
  padding: 2px 16px;
  border: 2px solid var(--dark);
  border-radius: 999px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: var(--ink);
}

.page-case-amazon .amazon-deep .two-col .block h3 strong {
  color: var(--ink-2);
}

.page-case-amazon .amazon-deep .two-col .block ul {
  list-style: none;
  padding-left: 0;
}

.page-case-amazon .amazon-deep .two-col .block li {
  position: relative;
  list-style: none;
  padding-left: 23.832px;
}

.page-case-amazon .amazon-deep .two-col .block li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ink-2);
}

/* Amazon Opportunity / Goal：一列一整张蓝卡，卡片等高 476px */
.page-case-amazon .amazon-deep .col-group {
  gap: 12px;
}

.page-case-amazon .amazon-deep .col-group h2 {
  margin-bottom: 0;
}

.page-case-amazon .amazon-deep .col-group .amazon-blue {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 16px;
  height: 476px;
  min-height: 476px;
  overflow: hidden;
  padding: 24px;
  border-radius: 24px;
  background: #ccddff;
}

.page-case-amazon .amazon-deep .col-group .amazon-blue h3 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--ink);
}

.page-case-amazon .amazon-deep .col-group .amazon-blue p {
  color: var(--ink-2);
  position: relative;
  padding-left: 23.832px;
}

.page-case-amazon .amazon-deep .col-group .amazon-blue p::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ink-2);
}

.page-case-amazon .amazon-deep .amz-hmw {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 24px 24px 8px;
  margin-top: -48px;
  margin-bottom: 0;
}

.page-case-amazon .amazon-deep .amz-hmw-mark {
  width: min(800px, 100%);
  font-size: 60px;
  line-height: 72px;
  font-weight: 600;
  text-align: left;
  color: var(--ink);
}

.page-case-amazon .amazon-deep .amz-hmw-mark--end {
  text-align: right;
}

.page-case-amazon .amazon-deep .amz-hmw-question {
  width: min(800px, 100%);
  font-size: 36px;
  line-height: 44px;
  font-weight: 600;
  text-align: center;
  color: var(--ink);
}

.page-case-amazon .case > section:nth-child(4) {
  padding-top: 64px;
}

.page-case-amazon .figure--wide-amazon + section {
  margin-top: 34px;
}

.page-case-amazon .case > section:nth-of-type(5) {
  padding-top: 64px;
  padding-bottom: 64px;
  gap: 12px;
}

.page-case-amazon .case > section:nth-of-type(5) .plain-stack {
  gap: 20px;
}

.page-case-amazon .case > section:nth-of-type(4) {
  gap: 20px;
  margin-top: 12px;
}

.page-case-amazon .case > section:nth-of-type(4) .plain-stack {
  gap: 8px;
}

.page-case-amazon .figure--wide-amazon {
  margin-top: 72px;
}

@media (max-width: 809.98px) {
  .page-case-amazon .amazon-deep {
    padding-top: 64px;
    padding-bottom: 48px;
  }
}

@media (max-width: 809.98px) {
  .page-case-amazon .amazon-deep .problem-cards,
  .page-case-amazon .amazon-deep .impact-cards-row {
    margin-top: 0;
    margin-bottom: 0;
  }
  .page-case-amazon .amazon-deep .impact-title {
    margin-top: 0;
  }
  .page-case-amazon .amazon-deep .amz-hmw {
    margin-top: 0;
  }
  .page-case-amazon .amazon-deep .amz-pair-arrow {
    transform: none;
    font-size: 0;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
  }
  .page-case-amazon .amazon-deep .problem-cards .amz-pair-arrow {
    margin-top: 0;
  }
  .page-case-amazon .amazon-deep .amz-pair-arrow::after {
    content: "↓";
    font-size: 48px;
    line-height: 1;
    color: var(--ink);
  }
}

/* The strip always shows the marks' own colours. Pointing at it eases the scroll down to a third of its speed
   (client.tsx `mountMarqueeEase`) rather than stopping it. */
/* ---------- Case pages: one column ---------- */

.page-case-amazon .case > section:nth-child(n+4) { padding-inline: var(--pad); }

@media (min-width: 1280px) {
  .page-case-amazon .amazon-deep .two-col { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); }
  .page-case-amazon .amazon-deep .two-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Element Design System case: what only that page needs. */

.tri__col { display: grid; gap: 16px; align-content: start; }

.tri__block { display: grid; gap: 10px; padding: 24px; border-radius: var(--r-card); background: var(--bg); }

.tri__col:nth-child(2) .tri__block { background: #e1f5fe; }

.auth-row {
  width: calc(100% - 24px); max-width: 1128px; margin-inline: auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: center;
}

.auth-row .block { background: transparent; padding: 0; gap: 16px; }

.auth-row .figure img { width: 100%; }

.page-case-element .case > section:nth-child(4),
.page-case-element .case > section:nth-child(5),
.page-case-element .case > section:nth-child(6) {
  background: #fff; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax);
}

.page-case-element .case > section:nth-child(4) {
  padding-top: 128px;
  /* 深潜条后的白色 Research 区需要给底部入场元素多留 96px 可裁剪空间，
   否则 Current Log in Flow 说明会一直停在 opacity:.001 */
  clip-path: inset(0 -100vmax -96px);
  padding-bottom: 36px;
}

.page-case-element .case > section:nth-child(6) {
  padding-bottom: 64px;
  /* Opportunity / Goal：标题到卡片 12px，两卡都保持 Framer 的 496px 等高 */
  padding-top: 36px;
}

.page-case-element .case > section:nth-child(2) > .panel { border-radius: var(--r-block); }

.page-case-element .case > section:nth-child(2) .case-title { font-size: 36px; line-height: 44px; font-weight: 600; }

.page-case-element .panel--problem { gap: 64px; }

.page-case-element .panel--problem .problem-intro {
  display: grid; grid-template-columns: 508px 508px; gap: 64px; align-items: start; width: 100%;
}

.page-case-element .panel--problem .split__body p,
.page-case-element .panel--problem .split__body p strong { color: var(--ink-2); }

@media (max-width: 809.98px) {
  .page-case-element .panel--problem .problem-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

.page-case-element .case > section:nth-child(5) .two-col .block {
  padding: 24px; border-radius: var(--r-card); background: var(--bg);
}

.page-case-element .case > section:nth-child(5) .two-col {
  width: 100%; max-width: 1200px; margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px;
}

.page-case-element .case > section:nth-child(6) .col-group .block {
  padding: 24px; border-radius: var(--r-card); background: #ccddff;
}

.page-case-element .case > section:nth-child(6) .two-groups {
  width: 100%; max-width: 1200px; margin-inline: auto;
  grid-template-columns: 582px 582px; gap: 36px;
}

@media (max-width: 1279.98px) {
  .page-case-element .case > section:nth-child(5) .two-col {
    width: 100%; grid-template-columns: minmax(0,1fr); gap: 24px;
  }
  .page-case-element .case > section:nth-child(6) .two-groups {
    width: 100%; grid-template-columns: minmax(0,1fr); gap: 32px;
  }
}

/* Element adoption benefits: the Framer page uses one white card with a two-column body. */
.benefits-card {
  display: grid; gap: 32px; padding: 36px; border-radius: var(--r-card); background: #fff;
}

.benefits-card__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); gap: 36px; align-items: start; }

.benefits-card__list { display: grid; gap: 24px; }

.benefit-item { display: grid; gap: 8px; }

.benefit-item h3 { font-size: 18px; line-height: 28px; font-weight: 700; color: var(--ink-2); }

.benefit-item ul { padding-left: 18px; color: var(--ink-2); }

.benefits-card__visual { align-self: center; }

.benefits-card__visual img { width: 100%; border-radius: 0; }

/* EDS Problem 三栏里的文字是 Framer 的 14/20 小字卡片 */
.page-case-element .tri__block { font-size: 14px; line-height: 20px; }

.page-case-element .tri__block p { font-size: 14px; line-height: 20px; color: var(--ink); }

.page-case-element .tri__block h4 { font-size: 18px; line-height: 24px; }

.page-case-element .tri__block p strong { color: var(--ink); }

.page-case-element .tri__block--inconsist img {
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  aspect-ratio: 2.08;
}

.page-case-element .tri__block--media {
  background: #efedff;
  padding: 24px;
  gap: 0;
  align-content: stretch;
}

.page-case-element .tri__block--media img {
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
  aspect-ratio: 1.6495049504950494;
}

.page-case-element .tri__block--goal {
  gap: 20px;
  align-content: start;
}

.page-case-element .tri__block--goal img { width: 100%; height: 180px; object-fit: cover; border-radius: 8px; }

/* EDS 深潜与方案段的正文原版以 #1a1a1a 为主 */
.page-case-element .case > section:nth-child(n+4) :where(p, li) { color: var(--ink); }

.page-case-element .case > section:nth-child(5) :where(p, li) { color: var(--ink-2); }

.page-case-element .tradeoff__card p strong { color: var(--ink-2); }

.page-case-element .case-sub.case-sub--pill { color: var(--ink); }

.page-case-element .flow-caption {
  text-align: center;
  color: var(--muted) !important;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  /* Current Log in Flow 与下方 Impact 之间留出原版的 36px */
  margin-top: -36px;
  height: 26px;
}

/* EDS Context 栏的原站是 18/26 medium，Responsibility 列表同款 */
.page-case-element .overview-grid .split__body,
.page-case-element .overview-grid .split__body p,
.page-case-element .overview-grid .split__body li {
  font-size: 18px; line-height: 26px; font-weight: 500;
}

.page-case-element .plain-stack .plain-block strong { color: var(--ink); }

/* Framer 里部分 24px 加粗标题是 #383838，不是 #1a1a1a */
.page-case-element .tradeoff h3 strong { color: var(--ink-2); }

/* ============ EDS 精修 2：对齐 Framer 导出里的卡片/列表细节 ============ */
/* Framer 的 Benefits 卡紧跟在 Problem 白卡后面（间距 36，不是新 section 的 96） */
.page-case-element .case > section:nth-child(3) { padding-top: 36px; }

/* Problem 三栏固定 548 高；左灰卡与右 Goal 卡撑满整列 */
.page-case-element .tri { grid-template-rows: minmax(548px, auto); }

.page-case-element .tri__col { align-content: stretch; }

.page-case-element .tri__col:nth-child(1),
.page-case-element .tri__col:nth-child(3) { grid-template-rows: minmax(0, 1fr); }

.page-case-element .tri__col:nth-child(2) { grid-template-rows: 303px minmax(229px, 1fr); }

.page-case-element .tri__block--grouped { gap: 36px; align-content: start; }

.page-case-element .tri__unit {
  display: grid;
  align-content: start;
  /* Problem 左卡是富文本：段与段之间 0 间距，只有标题到正文留 10px */
  gap: 0;
}

.page-case-element .tri__block--inconsist { gap: 16px; align-content: start; }

.page-case-element .tri__block__intro { display: grid; gap: 8px; align-content: start; }

.page-case-element .tri__col:nth-child(2) .tri__block--media { background: #efedff; }

/* Impact 两灰卡 + 中间横向箭头（Framer 行 gap 36，卡片 flex:1） */
.page-case-element .impact-cards {
  display: flex;
  align-items: center;
  gap: 36px;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  margin-top: -20px;
}

.page-case-element .impact-cards .block {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  align-self: stretch;
  display: grid;
  align-content: start;
  justify-items: stretch;
  padding: 24px;
  border-radius: 24px;
  background: #f5f4f6;
  /* Impact 两卡：内部用 16px 行距，标题与卡片间距 12px，卡片后到 HMW 为 36px */
  gap: 16px;
}

.page-case-element .impact-cards .block h3 {
  font-size: 24px; line-height: 32px; font-weight: 700; color: var(--ink-2);
}

.page-case-element .impact-cards__arrow {
  display: flex; align-items: center; justify-content: center;
  flex: none; align-self: center; width: 36px;
  font-size: 60px; line-height: 72px; font-weight: 600; color: var(--ink);
  text-align: center; white-space: nowrap;
}

/* Impact 下的 HMW：圆点 48、引用 60/72、行距 64、外层上下间距 36 */
.page-case-element .hmw-group {
  padding: 24px 24px 8px;
  gap: 36px;
  margin-top: 4px;
}

.page-case-element .hmw-items { display: grid; gap: 64px; width: 100%; }

.page-case-element .hmw-item { display: grid; gap: 16px; align-content: start; }

.page-case-element .hmw-n {
  width: 48px; height: 48px; border-radius: 999px;
  font-size: 24px; line-height: 32px; font-weight: 700;
}

.page-case-element .hmw-quote {
  font-size: 60px; line-height: 72px; font-weight: 600; color: var(--ink);
  text-align: left;
}

.page-case-element .hmw-quote--end { text-align: right; }

/* Opportunity / Goal：每列一整张 #ccddff 卡，内部三小节按 Framer 行距 */
.page-case-element .case > section:nth-child(6) .col-group__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 24px;
  background: #ccddff;
  height: 496px;
  min-height: 496px;
  overflow: hidden;
  justify-content: flex-start;
}

.page-case-element .case > section:nth-child(6) .col-group__card .block {
  display: flex; flex-direction: column; gap: 16px;
  padding: 0; border-radius: 0; background: none;
}

.page-case-element .case > section:nth-child(6) .col-group__card .block h3 {
  font-size: 24px; line-height: 32px; font-weight: 700; color: var(--ink);
}

.page-case-element .case > section:nth-child(6) .col-group__card .block ul,
.page-case-element .case > section:nth-child(6) .col-group__card .block li {
  color: var(--ink);
}

.page-case-element .case > section:nth-child(6) .col-group__card .block ul {
  padding-inline-start: 0;
}

.page-case-element .case > section:nth-child(6) .col-group__card .block li {
  padding-inline-start: 24px;
}

/* Research 头部 Badge：Framer 是 24/32 semibold */
.page-case-element .case > section:nth-child(4) .case-sub--pill {
  font-weight: 600;
}

/* Benefits：一张白卡 16 间距、左右 530/530、列表像 Framer 一样紧凑 */
.page-case-element .benefits-card { gap: 16px; }

.page-case-element .benefits-card__body {
  grid-template-columns: 530px 530px; gap: 20px;
}

.page-case-element .benefit-item ul {
  padding-left: 0;
  margin-top: 0;
}

.page-case-element .benefits-card__visual img {
  width: 530px; height: 352px; border-radius: 12px; object-fit: cover;
}

/* “Without Design System” 是 36px 标题，居中 */
.page-case-element .without-label {
  font-size: 36px;
  line-height: 44px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  margin-top: 99px;
}

/* 案例列表圆点：Framer 用 “•” 挂 24px 缩进左侧，不用浏览器默认 disc */
.page-case-element .case ul { list-style: none; }

.page-case-element .case ul li { position: relative; padding-inline-start: 24px; }

.page-case-element .case ul li::before {
  content: "•"; position: absolute; left: 0; top: 0; color: inherit;
}

.page-case-element .case li::marker { color: inherit; }

/* ============ EDS 精修 3：标签/卡片/说明文字的对齐与颜色 ============ */
/* 四个指标的数值与标签在 Framer 里都居中 */
.page-case-element .stat { text-align: center; }

/* Overview 右栏：正文/列表 #212121，Context 下方两个加粗小标题 #383838 */
.page-case-element .overview-grid .split__body { color: #212121; }

.page-case-element .overview-grid .split__body h2 { color: var(--ink); }

.page-case-element .overview-grid .split__body > p strong { color: var(--ink-2); }

.page-case-element .tri__unit h4 { margin-bottom: 10px; }

/* NDA 卡的 Contact Me 按钮在 Framer 原版里是品牌蓝 #4b6bf3（EDS/TikTok 共用组件） */
.page-case-element .notice--dark .btn,
.page-case-element .notice--dark .btn--blue { background: var(--blue-btn); }

/* Benefits 列表正文 #383838 */
.page-case-element .benefits-card__list li { color: var(--ink-2); }

/* Research 区截图说明 18/26 semibold 灰色居中（Current Log in & off screens） */
.page-case-element .case > section:nth-child(4) .figure figcaption {
  font-size: 18px; line-height: 26px; font-weight: 600; color: var(--muted); text-align: center;
}

/* Solution 区大图下的说明 18/28 bold #1a1a1a 左对齐（Focused / Marketing Billboard） */
.page-case-element .case > section:nth-child(7) .panel figcaption {
  font-size: 18px; line-height: 28px; font-weight: 700; color: var(--ink); text-align: left;
}

/* Research tradeoff 卡片正文 #383838；“Currently…”引导行 24/600 */
.page-case-element .case > section:nth-child(4) .tradeoff__card p { color: var(--ink-2); }

.page-case-element .case > section:nth-child(4) > h3.fx {
  font-size: 24px; line-height: 32px; font-weight: 600; color: var(--ink);
}

/* Solution 三张白卡内部行距按 Framer 为 16 */
.page-case-element .case > section:nth-child(7) .panel { gap: 16px; }

/* ============ EDS 精修 4：标签/卡片对齐、间距、等高细节 ============ */
/* Problem 左栏的 High-level Intro 胶囊靠左（原版 Header 是左对齐） */
.page-case-element .problem-intro .case-head--left .pill {
  justify-self: start;
}

/* Benefits：三组内容按原版富文本连续排版，组与组之间不加额外间隙 */
.page-case-element .benefits-card__list { gap: 0; }

.page-case-element .benefit-item { gap: 0; margin: 0; }

.page-case-element .benefit-item + .benefit-item { margin-top: 0; }

.page-case-element .benefit-item h3 { margin-bottom: 0; }

/* “Without Design System”分段前的留白 + 蓝色深潜条内部行距（Framer 原版结构） */
.page-case-element .case { padding-bottom: 0; }

.page-case-element .deep-dive-callout {
  gap: 26px;
  margin-top: 96px;
}

/* 大截图保持直角，不裁掉图像内容（与原版 Framer 一致） */
.page-case-element .case > section:nth-child(4) .figure img,
.page-case-element .case > section:nth-child(7) .panel .figure img {
  border-radius: 0;
}

.page-case-element .case > section:nth-child(7) .auth-row .figure img {
  border-radius: 16px;
}

.page-case-element .figure--login-flow { margin-top: 32px; }

/* 末尾 Solution Impacts 区块与 footer 之间补出呼吸空间 */
.page-case-element .case > section:nth-child(8) {
  padding-top: 76px;
  padding-bottom: 104px;
}

.page-case-element .case > section:nth-child(8) > p {
  margin-top: -20px;
}

.page-case-element .case > section:nth-child(8) > .plain-stack {
  margin-top: -16px;
  gap: 20px;
}

/* Trade-off：左右卡 550px，中间箭头通道 68px，卡片内部段落不另加 20px 空距 */
.page-case-element .tradeoff__pair {
  grid-template-columns: minmax(0, 550px) 68px minmax(0, 550px);
  gap: 0;
}

.page-case-element .tradeoff__card {
  width: 550px;
  max-width: 100%;
  gap: 0;
  align-content: center;
}

.page-case-element .tradeoff__card p { margin: 0; }

.page-case-element .tradeoff__arrow { justify-self: center; }

/* Solution 编号行：圆点 + 标签横向一行；数字 01/02/03 是 24/32 的字号 */
.page-case-element .case > section:nth-child(7) .panel-chip-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.page-case-element .panel-chip-row .kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  min-height: 48px;
  padding: 2px 16px;
  border: 2px solid var(--dark);
  border-radius: 999px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--ink);
}

.page-case-element .panel-chip-row .kicker strong { font-weight: 700; }

.page-case-element .tradeoff__head .num,
.page-case-element .panel-chip-row .num {
  font-size: 24px;
  line-height: 32px;
  padding: 2px;
}

/* Solution 里的 auth 图文行：右侧截图列 556px，与 Framer 原图尺寸一致 */
.page-case-element .auth-row {
  width: 100%;
  max-width: 1128px;
  grid-template-columns: 556px 556px;
  gap: 16px;
}

/* Design Solution 下的 Problem 副标题 + 说明（Framer 原版每个 section 都有一份） */
.page-case-element .solution-problem {
  display: grid;
  gap: 36px;
  width: 100%;
}

.page-case-element .solution-problem h2 {
  font-size: 36px;
  line-height: 44px;
  font-weight: 600;
  color: var(--ink);
}

.page-case-element .solution-problem p {
  font-size: 18px;
  line-height: 28px;
  color: var(--ink);
}

/* Solution 顶部对齐与首卡位置（桌面 1440 按 Framer 实测） */
@media (min-width: 1280px) {
  .page-case-element .case > section:nth-child(7) {
    padding-top: 64px;
    gap: 36px;
  }
  .page-case-element .case > section:nth-child(7) > .panel--first { margin-top: 0; }
  .page-case-element .case > section:nth-child(7) > .panel--last { min-height: 1525px; }
  .page-case-element .case > section:nth-child(5) {
    padding-top: 0;
    margin-top: -10px;
  }
}

.page-case-element .case > section:nth-child(6) .col-group { gap: 12px; }

.page-case-element .case > section:nth-child(6) .col-group h2 { margin-bottom: 0; }

.page-case-element .case > section:nth-child(6) .col-group__card .block:nth-child(3) {
  margin-top: -4px;
  gap: 12px;
}

@media (max-width: 809.98px) {
  .auth-row { width: 100%; grid-template-columns: minmax(0,1fr); gap: 20px; }
  .page-case-element .case > section:nth-child(4) { padding-top: 64px; }
  .benefits-card { padding: 24px; gap: 28px; }
  .benefits-card__body { grid-template-columns: minmax(0,1fr); gap: 28px; }
}

/* EDS 精修 2 的响应式回退（放最后，覆盖上面的桌面规则） */
@media (max-width: 1279.98px) {
  .page-case-element .case > section:nth-child(3) { padding-top: 40px; }
  .page-case-element .tri { grid-template-rows: none; }
  .page-case-element .tri__col:nth-child(1),
  .page-case-element .tri__col:nth-child(2),
  .page-case-element .tri__col:nth-child(3) { grid-template-rows: none; }
  .page-case-element .impact-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 0;
  }
  .page-case-element .hmw-group { margin-top: 0; }
  .page-case-element .tradeoff__pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .page-case-element .tradeoff__card { width: 100%; }
  .page-case-element .case > section:nth-child(6) .col-group__card {
    height: auto;
    min-height: 0;
  }
  .page-case-element .case > section:nth-child(6) .col-group__card .block:nth-child(3) {
    margin-top: 0;
    gap: 16px;
  }
  .page-case-element .impact-cards__arrow {
    width: auto; font-size: 48px; line-height: 60px;
    transform: rotate(90deg); justify-self: center; padding-block: 4px;
  }
  .page-case-element .benefits-card__body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .page-case-element .benefits-card__visual img { width: 100%; height: auto; }
  .page-case-element .hmw-quote { font-size: 48px; line-height: 60px; }
  .page-case-element .auth-row {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }
  .page-case-element .case > section:nth-child(7) { padding-top: 96px; }
  .page-case-element .case > section:nth-child(7) > .panel--first {
    margin-top: 0;
  }
  .page-case-element .case > section:nth-child(7) > .panel--last {
    min-height: 0;
  }
}

@media (max-width: 809.98px) {
  .page-case-element .benefits-card { gap: 16px; }
  .page-case-element .hmw-group { padding: 16px; gap: 24px; }
  .page-case-element .hmw-items { gap: 40px; }
  .page-case-element .col-group__card { padding: 20px; }
  .page-case-element .tradeoff__pair { gap: 12px; }
  .page-case-element .case > section:nth-child(6) {
    padding-bottom: 48px;
    padding-top: 52px;
  }
}

@media (max-width: 809.98px) {
  .page-case-element .panel-chip-row .kicker {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .page-case-element .impact-cards__arrow {
    display: grid;
    place-items: center;
    width: auto;
    height: auto;
    padding-block: 4px;
    font-size: 0;
    line-height: 1;
    transform: none;
  }
  .page-case-element .impact-cards__arrow::after {
    content: "↓";
    font-size: 48px;
    line-height: 1;
  }
}

.page-case-element .flow-caption,
.page-case-element .case > section:nth-child(4) .figure figcaption { color: var(--z-color-caption) !important; }

.page-case-element .case > section.wrap:nth-child(n+4) {
  padding-inline: var(--pad);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1280px) {
  .page-case-element .case > section:nth-child(6) .two-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Element's sign-in rows (text beside a screen) were two fixed 556px columns, 1128px in all: wider than the 1080px
     inside their panel, so the rows and the 3.1 picture above them ran 48px past the panel's right edge. */
  .page-case-element .auth-row { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The About page: its header, gallery and sections. */

/* 生活相册：三行，每行一张双宽 —— 与原站的 2:1:1 / 1:2:1 / 1:1:2 排布一致 */
.gallery { display: grid; gap: 36px; }

.gallery__row { display: flex; gap: 36px; }

.gallery img { flex: 1 1 0; min-width: 0; height: 272px; object-fit: cover; border-radius: var(--r-card); }

.gallery img.is-wide { flex: 2 1 0; }

.gallery__row > .photo-fx:nth-child(2) { --photo-delay: 70ms; }

.gallery__row > .photo-fx:nth-child(3) { --photo-delay: 140ms; }

@media (max-width: 809.98px) {
  .gallery { gap: 16px; }
  .gallery__row { gap: 16px; flex-wrap: wrap; }
  .gallery img { height: 180px; flex: 1 1 40%; }
  .gallery img.is-wide { flex: 1 1 100%; }
}

/* ---------- About 细节 ---------- */
/* About 首屏：卡片 1152x416、内边距 36，与原站一致 */
.hero--about { padding: 108px 0 0; }

@media (min-width: 810px) {
  .hero--about + .sec { padding-block: 36px 24px; }
  .hero--about + .sec + .sec--exp { padding-block: 88px; }
  .hero--about + .sec + .sec--exp + .sec--rec { padding-block: 88px 90px; }
  .hero--about ~ .sec--tight { padding-block: 88px; }
  .hero--about ~ .sec--tight .sec__inner { gap: 36px; }
  .hero--about ~ .sec--tight .sec-head { max-width: none; }
  .hero--about ~ .sec--tight .gallery { padding-block: 21px; }
}

.hero--about .hero__card { padding: 36px; min-height: 416px; gap: 0; justify-content: flex-start; }

.hero--about .hero__text { gap: 0; }

.about-portrait { width: 84px; height: 84px; border: 2px solid var(--line); border-radius: 999px; object-fit: cover; object-position: center; background: #fff; margin-bottom: 34px; }

.hero__card h1.about-title { font-size: 36px; line-height: 44px; font-weight: 600; max-width: none; margin-bottom: 16px; }

.about-bullets {
  margin-bottom: 32px;
  display: grid;
  gap: 0;
  color: #fff;
  font-size: 18px;
  line-height: 28px;
  list-style: none;
  padding-left: 0;
}

.about-panel { padding: 36px; gap: 0; }

.about-label { font-size: 18px; line-height: 26px; font-weight: 600; color: #212121; }

.about-panel p { color: var(--ink-2); }

.about-panel .about-label {
  color: #212121;
  margin-bottom: 24px;
}

.about-panel p:not(.about-label) + p { margin-top: 28px; }

.about-impact-list {
  display: grid; gap: 16px; margin: 18px 0 28px; padding-left: 24px;
  color: var(--ink-2); list-style: disc outside;
}

.about-impact-list li { padding-left: 4px; }

.about-impact-list strong { color: var(--ink); }

.about-bullets a { color: var(--blue); text-decoration: none; }

.about-bullets a:hover { text-decoration: underline; }

.about-bullets li { position: relative; list-style: none; padding-left: 23.832px; }

.about-bullets li::before { content: "•"; position: absolute; left: 0; top: 0; color: currentColor; }

.catchup { display: grid; justify-items: center; gap: 16px; text-align: center; }

.catchup h2 { font-size: 24px; line-height: 32px; font-weight: 600; color: var(--ink-2); }

.catchup__links { display: flex; gap: 12px; }

.catchup__links a { display: grid; place-items: center; width: 20px; height: 20px; color: var(--ink); }

@media (max-width: 809.98px) {
  .hero__card h1.about-title { font-size: 36px; line-height: 44px; margin-bottom: 16px; }
  .hero--about { padding: 108px 0 0; }
  .hero--about .hero__card { height: 692px; min-height: 692px; padding: 64px 32px; }
  .hero--about .about-portrait { margin-bottom: 132px; }
  .hero--about .about-bullets { margin-bottom: 0; font-size: 16px; line-height: 24px; }
  .hero--about .fx-up { display: none; }
  .hero--about + .sec { padding-block: 16px 56px; }
  .hero--about + .sec .about-panel { padding: 64px 32px; }
  .hero--about + .sec .about-panel p:not(.about-label) { line-height: 24px; }
  .hero--about + .sec .about-panel p:not(.about-label) + p { margin-top: 24px; }
  .hero--about ~ .sec--exp .wrap { padding-inline: 16px; }
  .hero--about ~ .sec--exp .sec-head h2 { font-size: 36px; line-height: 44px; }
  .hero--about ~ .sec--exp .sec-head p { line-height: 24px; }
  .hero--about ~ .sec--exp .sec__inner { gap: 64px; }
  .hero--about ~ .sec--exp { padding-bottom: 64px; }
  .hero--about ~ .sec--exp .exp:nth-child(2) { min-height: 248px; }
  .hero--about ~ .sec--exp .exp:nth-child(3) { min-height: 222px; }
  .hero--about ~ .sec--rec { padding-block: 64px 96px; }
  .hero--about ~ .sec--rec > .wrap { padding-inline: 16px; }
  .hero--about ~ .sec--rec .panel { padding: 16px; gap: 36px; }
  .hero--about ~ .sec--rec .panel__head { display: grid; gap: 16px; }
  .hero--about ~ .sec--rec .panel__head h2 { font-size: 36px; line-height: 44px; }
  .hero--about ~ .sec--rec .panel__head p { text-align: left; line-height: 24px; }
  .hero--about ~ .sec--rec .quote { padding: 32px; }
  .hero--about ~ .sec--tight { padding-block: 64px 120px; }
  .hero--about ~ .sec--tight .sec__inner { gap: 60px; }
  .hero--about ~ .sec--tight .sec-head { width: calc(100% + 48px); max-width: none; margin-inline: -24px; }
  .hero--about ~ .sec--tight .sec-head h2 { font-size: 36px; line-height: 44px; }
  .hero--about ~ .sec--tight .gallery { gap: 36px; }
  .hero--about ~ .sec--tight .gallery__row { display: contents; }
  .hero--about ~ .sec--tight .gallery img { width: 100%; height: 270px; flex: none; }
  .hero--about ~ .sec--tight .gallery img.is-wide { height: 163.5px; }
  .hero--about ~ .sec--catchup .catchup h2 { max-width: 231px; }
  .page-about .footer__inner { padding-bottom: 84px; }
}
/* Entrance motion: elements that rise in as they scroll into view (driven by motion.js). */

/* 照片按列错峰进入；进入后保留很轻的悬停呼吸感。 */
.fx.photo-fx {
  transition: opacity .58s var(--fx-spring) var(--photo-delay, 0ms),
    transform .72s var(--fx-spring) var(--photo-delay, 0ms),
    filter .45s ease;
  will-change: opacity, transform;
}

@media (hover: hover) {
  .photo-fx.is-in:hover { transform: translateY(-4px) scale(1.018); filter: saturate(1.06); transition-delay: 0ms; }
}

.fx, .fx-up {
  transition: opacity var(--fx-dur) var(--fx-ease), transform var(--fx-dur) var(--fx-ease);
  transition-timing-function: var(--fx-spring);
  will-change: opacity, transform;
}

.fx.is-in, .fx-up.is-in { opacity: 1; transform: none; will-change: auto; }

.fx-shell, .js .fx-shell { opacity: 1; transform: none; transition: none; will-change: auto; }

/* 没有 JS 时上面两条不生效，内容直接可见，不会白屏 */
@media (prefers-reduced-motion: reduce) {
  .fx, .fx-up { opacity: 1; transform: none; transition: none; }
  .fx.photo-fx { transition: none; filter: none; }
}

/* Expressive portfolio motion. Finite entrances live in motion.js;
   source layout, text, image resolution and native scrolling stay intact. */
.fx, .fx-up, .fx.photo-fx { will-change: auto; }

@media (hover: hover) and (pointer: fine) {
  .photo-fx.is-in:hover { transform: translateY(-2px) scale(1.01); filter: none; }
}
/* The full-size image viewer (zoomable figures, site.js). */

/* ---------- 原图放大查看 ---------- */
.is-zoomable { cursor: zoom-in; }

.is-zoomable:focus-visible { outline: 3px solid var(--blue-btn); outline-offset: 4px; }

.image-viewer[hidden] { display: none; }

.image-viewer {
  position: fixed; z-index: 1000; inset: 0; display: grid; grid-template-rows: auto minmax(0,1fr);
  padding: 16px; background: rgba(12,12,12,.94); color: #fff; backdrop-filter: blur(16px);
}

.image-viewer__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 0 4px 12px; }

.image-viewer__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,.72); font-size: 13px; }

.image-viewer__actions { display: flex; align-items: center; gap: 8px; }

.image-viewer button {
  min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font: inherit; cursor: pointer;
}

.image-viewer button:hover, .image-viewer button:focus-visible { background: #fff; color: #111; outline: none; }

.image-viewer__close { margin-left: 4px; font-size: 25px !important; line-height: 1; }

.image-viewer__stage {
  min-width: 0; min-height: 0; overflow: auto; display: block; padding: 12px;
  border-radius: 14px; text-align: center; scrollbar-color: #777 #252525;
}

.image-viewer__stage img {
  display: block; max-width: none; max-height: none; margin: 0 auto; border-radius: 0; background: #fff;
  box-shadow: 0 18px 80px rgba(0,0,0,.4); cursor: zoom-in;
}

@media (max-width: 639.98px) {
  .image-viewer { padding: 10px; }
  .image-viewer__toolbar { align-items: flex-start; }
  .image-viewer__meta { display: none; }
  .image-viewer__actions { width: 100%; justify-content: flex-end; }
  .image-viewer button { min-width: 36px; height: 36px; padding: 0 10px; }
}
/* Motion preferences for the whole site. A component's own details stay with it (the card's in @zijie/ui
   portfolio.css, the nav's in site-nav.css, the entrance motion's in entrance.css); these are the site-wide rules. */

/* Loops pause while the page is in the background (motion.js sets .motion-background). */
.motion-background .marquee__track, .motion-background .scroll-cue__arrows, .motion-background .mouse-cue i { animation-play-state: paused; }

/* "Reduced motion only removes the travel": nothing moves, travels or loops; colour, focus and shadow still answer, at
   once and without movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html :is(a, button, .btn, .card, .tag, .pill) {
    transition: color var(--z-motion-feedback) linear, background-color var(--z-motion-feedback) linear,
      box-shadow var(--z-motion-feedback) linear, opacity var(--z-motion-feedback) linear !important;
  }
  .hero__card, .hero__text, .hero__card > .fx-up, .hero__graphic, .case-hero__bg, .case-hero__identity, .case-meta, .btn, .footer__social a { translate: none !important; scale: none !important; }
  .photo-fx.is-in:hover { transform: none; }
}

@media print {
  .hero__card, .hero__text, .hero__graphic, .case-hero__bg, .case-hero__identity, .case-meta { translate: none; scale: none; }
}