.portfolio-page { background: var(--color-bg); }
.portfolio-page .site-header { border-color: var(--color-line); background: rgba(12,13,14,.92); backdrop-filter: blur(18px); }
.portfolio-article { width: min(calc(100% - (var(--page-gutter) * 2)), var(--content-max)); margin: 0 auto; padding: calc(var(--header-height) + 64px) 0 140px; }
.portfolio-back { display: inline-flex; align-items: center; gap: 10px; color: var(--color-muted); font-size: 12px; }
.portfolio-back:hover { color: var(--color-text); }
.portfolio-hero .section-kicker { color: var(--color-accent); text-transform: uppercase; }
.portfolio-hero { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr); gap: clamp(56px, 8vw, 120px); align-items: center; }
.portfolio-hero h1 { max-width: 720px; margin-top: 22px; font-family: var(--font-display); font-size: clamp(64px, 8vw, 112px); font-weight: 500; letter-spacing: -.065em; line-height: 1; text-transform: uppercase; }
.portfolio-lead { max-width: 620px; margin-top: 36px; color: var(--color-muted); font-size: 17px; line-height: 1.8; }
.portfolio-lead + .portfolio-lead { margin-top: 18px; }
.portfolio-hero-media { margin: 0; }
.portfolio-hero-media img { width: 100%; height: 320px; border-radius: var(--radius-poster); object-fit: cover; }
.portfolio-hero-media figcaption { margin-top: 12px; color: #77736d; font-size: 11px; }
.portfolio-pillars { margin-top: 140px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.portfolio-pillars article { min-height: 230px; padding: 28px; background: var(--color-surface); border-radius: var(--radius-poster); }
.portfolio-pillars article > span { color: var(--color-accent); font-family: var(--font-display); font-size: 13px; }
.portfolio-pillars h2 { margin-top: 54px; font-size: clamp(24px, 2.2vw, 34px); font-weight: 500; letter-spacing: -.04em; line-height: 1.05; }
.portfolio-pillars p { margin-top: 16px; color: var(--color-muted); font-size: 14px; line-height: 1.65; }
.portfolio-footer { width: min(calc(100% - (var(--page-gutter) * 2)), var(--content-max)); margin: 0 auto; padding: 28px 0 42px; display: flex; justify-content: space-between; gap: 32px; border-top: 1px solid var(--color-line); color: var(--color-muted); }
.portfolio-footer-brand { color: var(--color-text); font-size: 13px; font-weight: 700; letter-spacing: .14em; }
.portfolio-footer p { max-width: 760px; font-size: 11px; line-height: 1.6; }
html[lang="zh-Hant"] .portfolio-hero h1,
html[lang="zh-Hant"] .portfolio-pillars h2 { font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; letter-spacing: -.035em; line-height: 1.08; }
html[lang="zh-Hant"] .portfolio-hero h1 { text-transform: none; }
@media (max-width: 900px) {
  .portfolio-hero { grid-template-columns: 1fr; gap: 54px; }
  .portfolio-hero-media { max-width: 620px; justify-self: end; }
  .portfolio-pillars { grid-template-columns: 1fr; margin-top: 96px; }
  .portfolio-pillars article { min-height: auto; }
}
@media (max-width: 767px) {
  .portfolio-article { width: calc(100% - 32px); padding-top: calc(var(--header-height) + 42px); padding-bottom: 90px; }
  .portfolio-hero-media img { height: 240px; }
  .portfolio-hero { margin-top: 52px; }
  .portfolio-hero h1 { font-size: clamp(52px, 15vw, 74px); }
  .portfolio-lead { font-size: 16px; }
  .portfolio-pillars { margin-top: 72px; }
  .portfolio-footer { width: calc(100% - 32px); display: block; }
  .portfolio-footer p { margin-top: 22px; }
}