/* Portfolio Studio tokens. Loaded only by pages that have migrated. */
:root {
  --color-bg: #f3f0ea;
  --color-surface: #fff;
  --color-text: #131210;
  --color-body: var(--color-text);
  --color-muted: #68655f;
  --color-accent: #e6552f;
  --color-on-accent: #131210;
  --color-border: #d8d3c9;
  --color-control-border: #716e68;
  --color-success: #176f31;
  --color-error: #b3261e;
  --font-display: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-display-zh: Inter, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-body: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-label: "JetBrains Mono", ui-monospace, monospace;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --content-wide: 1120px;
  --content-reading: 720px;
  --page-gutter: 48px;
  --leading-body: 1.75;
  --bg: var(--color-bg);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --border: var(--color-border);
  --edge-gutter: var(--page-gutter);
}
/* English body copy sets slightly tighter than Chinese (Design.md 4.2). */
:root:lang(en) { --leading-body: 1.65; }

* { box-sizing: border-box; }
html { scroll-padding-top: 6rem; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 1rem; line-height: var(--leading-body); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: 5px; }
button { cursor: pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible, video:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; }
img, video { display: block; max-width: 100%; }
h1, h2, p, figure { margin: 0; }
.studio-wrap { width: min(calc(100% - 2 * var(--page-gutter)), var(--content-wide)); margin-inline: auto; }
.nowrap { white-space: nowrap; }
.latin-display { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; }
.mono { font-family: var(--font-label); font-size: .875rem; letter-spacing: .06em; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 2000; transform: translateY(-200%); background: var(--color-text); color: var(--color-surface); padding: 12px 20px; border-radius: var(--radius-md); }
.skip-link:focus { transform: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.home-hero { padding-block: 48px 56px; }
.hero-greeting { margin-bottom: 16px; font-size: 1.125rem; }
.hero-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: start; }
.hero-title { max-width: 13em; font-family: var(--font-display-zh); font-size: clamp(2.25rem, 4.65vw, 4.5rem); font-weight: 900; line-height: 1.16; letter-spacing: .01em; text-wrap: balance; }
/* The English statement is longer; a smaller size keeps it to three lines beside the timeline. */
.hero-title:lang(en) { font-size: clamp(3rem, 3.75vw, 3.5rem); letter-spacing: -.02em; }
/* Career timeline beside the hero title: every entry is visible on first paint; only the connector line animates. */
.hero-career { --career-row: 36px; --career-year: 68px; --career-gap: 12px; --career-end: 10px; position: relative; display: grid; row-gap: 14px; margin: 0; padding: 0 0 var(--career-end); list-style: none; font-size: .875rem; line-height: 1.5; }
.hero-career::before { content: ""; position: absolute; top: calc(var(--career-row) / 2); bottom: calc(var(--career-end) + var(--career-row) / 2); left: calc(var(--career-year) + var(--career-gap) + var(--career-row) / 2 - .5px); width: 1px; background: var(--color-border); transform-origin: top; }
.hero-career li { display: grid; grid-template-columns: var(--career-year) var(--career-row) minmax(0, 1fr); column-gap: var(--career-gap); align-items: center; }
.hero-career .mono { color: var(--color-muted); }
.hero-career-logo { position: relative; z-index: 1; width: var(--career-row); height: var(--career-row); padding: 1px; object-fit: contain; background: var(--color-bg); }
.hero-career-logo--square { padding: 2px; }
.hero-career p { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.hero-career strong { font-family: var(--font-display-zh); font-size: 1rem; font-weight: 700; white-space: nowrap; }
.hero-career-role { color: var(--color-muted); white-space: nowrap; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; border-top: 1px solid var(--color-border); padding-top: 24px; margin-bottom: 32px; }
.section-heading h2 { font-family: var(--font-display-zh); font-size: 1rem; font-weight: 700; }
.section-heading .mono { color: var(--color-muted); }

.project { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.3fr); grid-template-areas: "heading media" "description media"; column-gap: 48px; row-gap: 20px; align-content: start; margin-bottom: 80px; }
.project + .project { border-top: 1px solid var(--color-border); padding-top: 48px; }
.project-heading { grid-area: heading; align-self: end; min-width: 0; }
.project-category { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; color: var(--color-muted); font-size: .875rem; }
/* Short English labels use the label face; Chinese labels stay in body Hei. */
.project-category:lang(en) { font-family: var(--font-label); letter-spacing: .06em; }
.project-title { font-family: var(--font-display-zh); font-size: clamp(1.5rem, 2.25vw, 2rem); font-weight: 700; line-height: 1.35; text-wrap: balance; }
.project-title a { text-decoration: none; }
.project-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.project-title .title-detail { display: block; margin-top: 8px; }
.project-description { grid-area: description; min-width: 0; align-self: start; }
.project-description p { font-size: 1rem; line-height: var(--leading-body); }
.project-description .project-role { margin-bottom: 12px; font-size: .875rem; color: var(--color-muted); }
.case-link { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; margin-top: 20px; padding-block: 8px; font-size: .875rem; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; }
.case-link:hover { text-decoration-thickness: 2px; }
.project-media { grid-area: media; min-width: 0; align-self: start; }
.media-panel { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; padding: 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
a.media-panel { text-decoration: none; }
a.media-panel:hover { border-color: var(--color-control-border); }
.media-panel img { width: 100%; height: 100%; object-fit: contain; }
.media-panel--screen { padding: 16px; }
.media-panel--screen img { border-radius: var(--radius-sm); }
/* Muted previews stack on top of the still cover and fade in once playing (scripts/portfolio-home.js). */
.media-panel[data-preview-src] { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.media-panel[data-preview-src] > img, .media-preview { grid-area: 1 / 1; }
.media-preview { width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.media-preview.is-ready { opacity: 1; }
.media-panel--screen .media-preview { border-radius: var(--radius-sm); }
.media-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-top: 8px; color: var(--color-muted); font-size: .875rem; line-height: 1.5; }
.demo-trigger, .preview-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--color-text); padding: 8px 0; font-size: .875rem; text-decoration: underline; text-underline-offset: 4px; }
.demo-trigger:hover, .preview-toggle:hover { text-decoration-thickness: 2px; }
.demo-trigger[hidden], .preview-toggle[hidden] { display: none; }
/* Two bars while playing; the same ▷ glyph as the demo buttons while paused. */
.preview-icon { width: 9px; height: 10px; border-inline: 2px solid currentColor; }
.preview-toggle[data-state="paused"] .preview-icon { width: auto; height: auto; border: 0; }
.preview-toggle[data-state="paused"] .preview-icon::before { content: "▷"; }

.experience-intro { max-width: var(--content-reading); font-size: 1.125rem; }

.demo-dialog { width: min(960px, calc(100% - 48px)); max-height: calc(100dvh - 48px); padding: 24px; border: 1px solid var(--color-control-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); }
.demo-dialog::backdrop { background: rgb(19 18 16 / .65); }
.demo-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.demo-dialog h2 { font-family: var(--font-display-zh); font-size: 1.25rem; line-height: 1.4; font-weight: 700; }
.dialog-close { flex: none; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--color-control-border); border-radius: var(--radius-md); background: transparent; color: inherit; font-size: .875rem; }
.dialog-close:hover { background: var(--color-bg); }
.demo-dialog video { width: 100%; max-height: 65dvh; background: var(--color-text); }
.demo-status { color: var(--color-muted); margin-top: 12px; font-size: .875rem; }
.demo-status a { color: var(--color-text); }

@media (max-width: 1023px) {
  :root { --page-gutter: 32px; }
  .hero-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hero-title { max-width: 13em; font-size: clamp(2.25rem, 5.4vw, 4rem); }
  .hero-title:lang(en) { font-size: clamp(2.25rem, 5vw, 3rem); }
  .project { column-gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

@media (max-width: 767px) {
  :root { --page-gutter: 24px; }
  .home-hero { padding-block: 32px; }
  .hero-greeting { font-size: 1rem; margin-bottom: 12px; }
  .hero-layout { gap: 16px; }
  .hero-title, .hero-title:lang(en) { font-size: clamp(2.25rem, 7.6vw, 2.75rem); line-height: 1.2; }
  .hero-career { --career-year: 60px; --career-gap: 10px; --career-end: 0px; row-gap: 10px; margin-top: 8px; }
  .hero-career .mono { letter-spacing: .02em; }
  .section-heading { padding-top: 20px; margin-bottom: 24px; }
  .project { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "media" "description"; gap: 20px; margin-bottom: 48px; }
  .project + .project { padding-top: 32px; }
  .project-category { margin-bottom: 12px; }
  .project-title { font-size: 1.5rem; }
  .project-title .title-detail { margin-top: 4px; }
  .media-panel { padding: 16px; }
  .media-panel--screen { padding: 12px; }
  .project-description p { font-size: 1rem; }
  .case-link { margin-top: 12px; }
  .experience-intro { font-size: 1rem; }
  .demo-dialog { width: calc(100% - 32px); padding: 16px; }
}
/* Below 382px the content column is under 334px, where "A product designer" no longer fits on one
   line at 36px; 34px keeps the English statement at four lines instead of five (covers 375 and 360). */
@media (max-width: 381px) {
  .hero-title:lang(en) { font-size: 2.125rem; }
}
@media (max-width: 360px) {
  :root { --page-gutter: 20px; }
  .hero-title { font-size: 2.25rem; }
  .hero-career { --career-gap: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  a, button { transition: border-color 160ms ease, background-color 160ms ease; }
  .hero-career::before { animation: career-line 600ms ease-out both; }
  .media-preview { transition: opacity 300ms ease; }
}
@keyframes career-line { from { transform: scaleY(0); } }