:root {
  color-scheme: light;
  --canvas: #f7f9fc;
  --surface: #ffffff;
  --surface-soft: #f2f7fd;
  --ink: #142033;
  --ink-soft: #0f2747;
  --muted: #66758a;
  --line: #e6ecf3;
  --brand: #1677ff;
  --brand-strong: #0f2747;
  --brand-soft: #eaf4ff;
  --accent: #15b8d1;
  --highlight: #ffd34e;
  --success: #20a779;
  --shadow-sm: 0 10px 30px rgba(15, 39, 71, 0.08);
  --shadow-lg: 0 24px 64px rgba(15, 39, 71, 0.16);
  --radius-sm: 8px;
  --radius-md: 12px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-height: 72px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #08111e;
  --surface: #0d1828;
  --surface-soft: #112238;
  --ink: #f3f7fc;
  --ink-soft: #e2eaf5;
  --muted: #9cabc0;
  --line: #263b55;
  --brand: #65aaff;
  --brand-strong: #0b3f7a;
  --brand-soft: #102944;
  --accent: #49c8dc;
  --highlight: #f2cc52;
  --success: #51c598;
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; overflow-x: hidden; background: var(--canvas); color: var(--ink); font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; font-size: 16px; line-height: 1.75; letter-spacing: 0; }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--brand); color: #fff; }
.skip-link { position: fixed; z-index: 200; left: 20px; top: -60px; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--ink); color: var(--surface); }
.skip-link:focus { top: 12px; }
.shell { width: min(1280px, calc(100% - 64px)); margin-inline: auto; }
main { display: flex; flex-direction: column; }

.site-header { position: sticky; z-index: 80; top: 0; height: var(--header-height); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--canvas) 94%, transparent); backdrop-filter: blur(16px); transition: box-shadow 180ms ease, background 180ms ease; }
.site-header.scrolled { background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 8px 26px rgba(15, 39, 71, .06); }
.nav-wrap { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; }
.brand-mark { display: grid; place-items: center; width: 38px; aspect-ratio: 1; border-radius: 50%; background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; }
.brand-copy { display: grid; line-height: 1.2; }
.brand-copy strong { font-size: 14px; font-weight: 800; }
.brand-copy small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.site-nav { height: 100%; display: flex; align-items: center; justify-content: center; gap: 30px; }
.site-nav a { position: relative; height: 100%; display: inline-flex; align-items: center; color: var(--ink-soft); font-size: 13px; font-weight: 650; transition: color 180ms ease; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: center; transition: transform 180ms ease; }
.site-nav a:hover, .site-nav a.active { color: var(--brand); }
.site-nav a:hover::after, .site-nav a.active::after { transform: scaleX(1); }
.site-nav svg { display: none; }
.icon-button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); cursor: pointer; transition: border-color 180ms ease, color 180ms ease, transform 180ms ease; }
.icon-button:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.icon-button svg { width: 18px; height: 18px; }
.theme-toggle { justify-self: end; }
.menu-toggle { display: none; }

.hero { padding-block: 0; }
.hero-grid { min-height: 372px; display: grid; grid-template-columns: minmax(400px, 1.05fr) minmax(300px, .72fr) minmax(330px, .83fr); align-items: center; gap: 36px; }
.hero-primary { align-self: center; }
.eyebrow, .section-kicker { margin: 0 0 18px; color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hero .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.hero .eyebrow::before { content: ""; width: 3px; height: 18px; background: var(--brand); }
.hero h1 { margin: 0; color: var(--brand); font-size: 156px; line-height: .86; font-weight: 900; letter-spacing: 0; }
.hero-lede { margin: 24px 0 0; color: var(--ink-soft); font-size: 38px; font-weight: 800; line-height: 1.18; }
.hero-lede::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 7px; border-radius: 50%; background: var(--brand); }
.hero-intro { align-self: center; padding-top: 42px; }
.hero-summary { max-width: 390px; margin: 0; color: var(--muted); font-size: 15px; line-height: 2; }
.hero-detail { max-width: 390px; margin: 12px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.85; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.resume-actions { display: grid; grid-template-columns: repeat(2, minmax(82px, 1fr)); }
.resume-actions .button { min-width: 0; border-radius: 0; }
.resume-actions .button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.resume-actions .button:last-child { margin-left: -1px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 9px 19px; border: 1px solid var(--brand); border-radius: 10px; font-size: 13px; font-weight: 750; transition: transform 180ms var(--ease), box-shadow 180ms ease, background 180ms ease; }
.button:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.button svg { width: 16px; height: 16px; }
.button-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.button-primary:hover { background: #0568ec; }
.button-secondary { background: var(--surface); color: var(--brand); }
.button-secondary:hover { background: var(--brand-soft); }

.resume-page { padding-block: 64px 96px; }
.resume-viewer-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 36px; margin-bottom: 36px; }
.resume-viewer-head h1 { margin: 0; color: var(--ink-soft); font-size: 48px; line-height: 1.08; }
.resume-viewer-head .section-kicker { margin-bottom: 12px; }
.resume-viewer-meta { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.resume-viewer-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.resume-document { width: min(920px, calc(100% - 64px)); display: grid; gap: 28px; }
.resume-sheet { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #fff; box-shadow: var(--shadow-sm); }
.resume-sheet img { width: 100%; height: auto; }
.resume-sheet figcaption { padding: 10px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; text-align: right; }
.resume-footer-actions { display: flex; justify-content: center; padding-top: 8px; }

.hero-profile { min-width: 0; }
.portrait-stage { position: relative; width: 100%; max-width: 385px; min-height: 324px; margin-left: auto; }
.portrait-wrap { position: absolute; z-index: 3; left: 22px; top: 14px; width: 238px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; background: var(--brand-soft); box-shadow: var(--shadow-sm); }
.portrait-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.shape { position: absolute; display: block; }
.shape-blue { z-index: 1; left: 244px; top: 66px; width: 44px; height: 122px; background: var(--brand); }
.shape-cyan { z-index: 2; left: 0; top: 226px; width: 54px; height: 68px; background: #bff3f4; }
.shape-line { z-index: 4; left: 255px; top: 4px; width: 6px; height: 54px; background: var(--brand-soft); }
.portrait-signature { position: absolute; left: 292px; top: 190px; display: grid; gap: 10px; color: var(--brand); }
.portrait-signature strong { font-family: "Segoe Script", "Bradley Hand", cursive; font-size: 27px; font-weight: 500; white-space: nowrap; transform: rotate(-6deg); }
.portrait-signature small { color: var(--muted); font-size: 9px; font-weight: 700; line-height: 1.5; letter-spacing: .12em; }
.portrait-signature::after { content: ""; width: 38px; height: 1px; margin-top: 2px; background: var(--brand); }

.principles { border-block: 1px solid var(--line); background: var(--surface-soft); }
.principle-grid { min-height: 98px; display: grid; grid-template-columns: 1.22fr repeat(7, auto); align-items: center; gap: 34px; }
.principle-grid .section-kicker { display: grid; gap: 4px; margin: 0; padding-left: 18px; border-left: 3px solid var(--brand); }
.principle-grid p { margin: 0; }
.principle-grid p:not(.section-kicker) { display: grid; gap: 3px; min-width: 128px; }
.principle-grid strong { color: var(--ink-soft); font-size: 27px; line-height: 1.15; }
.principle-grid .direction-value { font-size: 18px; white-space: nowrap; }
.principle-grid small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.principle-grid span { width: 1px; height: 44px; background: var(--line); }

.section { padding-block: 88px; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .65fr); align-items: end; gap: 48px; margin-bottom: 40px; }
.section-head h2 { margin: 0; color: var(--ink-soft); font-size: 48px; line-height: 1.08; letter-spacing: 0; }
.section-head > p { margin: 0; color: var(--muted); }

.content-pillars { order: initial; }
.pillar-list { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.pillar-list article { min-width: 0; display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 26px 20px 28px 0; }
.pillar-list article + article { padding-left: 20px; border-left: 1px solid var(--line); }
.pillar-list span { padding-top: 3px; color: var(--brand); font-size: 10px; font-weight: 850; }
.pillar-list h3 { margin: 0 0 9px; font-size: 17px; }
.pillar-list p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }

.writing-section { background: var(--surface); }
.writing-section .section-head { grid-template-columns: 1fr auto; gap: 20px 48px; }
.writing-section .section-head > div { grid-row: span 2; }
.writing-section .section-head > p { align-self: start; max-width: 430px; font-size: 14px; }
.section-more { align-self: end; justify-self: end; display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-size: 12px; font-weight: 750; }
.section-more svg { width: 15px; height: 15px; transition: transform 180ms ease; }
.section-more:hover svg { transform: translateX(5px); }
.article-list { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(360px, 1fr); grid-template-rows: 1fr 1fr; column-gap: 38px; }
.article-item { position: relative; min-width: 0; display: grid; grid-template-columns: 30px 1fr 46px; align-items: start; gap: 12px; padding: 24px 0; border-bottom: 1px solid var(--line); transition: border-color 250ms ease; }
.article-item:first-child { grid-row: span 2; grid-template-columns: 1fr 48px; align-content: end; min-height: 470px; padding: 250px 28px 28px; overflow: hidden; border: 0; border-radius: 12px; background: #0f2747; color: #fff; }
.article-item:first-child::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 25, 48, .04) 28%, rgba(8, 25, 48, .9) 100%), url("./assets/projects/shark-ops.webp") center / cover no-repeat; transition: transform 250ms ease, filter 250ms ease; }
.article-item:first-child:hover::before { transform: scale(1.02); filter: saturate(1.08); }
.article-item:first-child::after { content: ""; position: absolute; inset: 0; background: rgba(10, 32, 58, 0); pointer-events: none; transition: background 250ms ease; }
.article-item:first-child:hover::after { background: rgba(10, 32, 58, .08); }
.article-item:first-child .article-number { position: absolute; z-index: 2; left: 18px; top: 18px; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border-radius: 8px; background: var(--highlight); color: #17201c; }
.article-item:first-child > div:nth-child(2) { z-index: 2; grid-column: 1; }
.article-item:first-child .article-open { z-index: 2; grid-column: 2; align-self: end; border-color: rgba(255,255,255,.7); color: #fff; }
.article-item:first-child .article-meta { color: #c7e1ff; }
.article-item:first-child h3 { max-width: 620px; font-size: 30px; }
.article-item:first-child div > p:last-child { max-width: 600px; color: rgba(255,255,255,.74); }
.article-number { padding-top: 4px; color: var(--brand); font-size: 11px; font-weight: 850; }
.article-meta { margin: 0 0 8px; color: var(--brand); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.article-item h3 { margin: 0 0 9px; color: inherit; font-size: 24px; line-height: 1.35; transition: color 250ms ease; }
.article-item div > p:last-child { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.article-item:not(:first-child):hover { border-color: var(--brand); }
.article-item:not(:first-child):hover h3 { color: var(--brand); }
.article-open { display: grid; place-items: center; width: 42px; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; transition: background 250ms ease, color 250ms ease, border-color 250ms ease, transform 250ms ease; }
.article-open:hover, .article-item:hover .article-open { border-color: var(--brand); color: var(--brand); transform: translate(5px, -2px); }
.article-item:first-child:hover .article-open { border-color: #fff; color: #fff; }
.article-open svg { width: 18px; height: 18px; }

#work .section-head { grid-template-columns: minmax(0, 1fr) minmax(300px, .65fr); }
#work.section { padding-top: 88px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 38px; }
.filter-button { min-height: 38px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 700; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; }
.filter-button:hover, .filter-button.active { border-color: var(--brand); background: var(--brand); color: #fff; }
.project-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 56px 24px; }
.project-card { grid-column: span 6; min-width: 0; }
.project-card[hidden] { display: none; }
.project-featured { grid-column: span 12; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .5fr); align-items: end; gap: 32px; }
.project-featured:last-child { grid-template-columns: minmax(280px, .5fr) minmax(0, 1.5fr); }
.project-featured:last-child .project-visual { order: 2; }
.project-visual { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-soft); box-shadow: var(--shadow-sm); }
.project-visual::after { content: "查看线上项目"; position: absolute; right: 12px; bottom: 12px; padding: 7px 10px; border-radius: var(--radius-sm); background: rgba(20,32,51,.88); color: #fff; font-size: 10px; font-weight: 750; opacity: 0; transform: translateY(6px); transition: opacity 180ms ease, transform 180ms ease; }
.project-visual:hover::after { opacity: 1; transform: translateY(0); }
.project-visual[data-preview-label]::after { content: attr(data-preview-label); }
.project-visual img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 420ms var(--ease); }
.project-card:hover .project-visual img { transform: scale(1.025); }
.project-index { position: absolute; z-index: 2; left: 12px; top: 12px; display: grid; place-items: center; width: 36px; aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); font-size: 10px; font-weight: 850; }
.project-body { padding-top: 20px; }
.project-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; color: var(--brand); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.project-meta::before { content: ""; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.project-body h3 { margin: 10px 0 8px; font-size: 30px; line-height: 1.3; }
.project-body h2 { margin: 10px 0 8px; font-size: 27px; line-height: 1.3; }
.project-body p { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.project-positioning { line-height: 1.8; }
.project-role { padding-top: 13px; border-top: 1px solid var(--line); font-size: 13px !important; }
.project-role strong { margin-right: 8px; color: var(--ink-soft); }
.project-details { display: grid; gap: 10px; margin: 20px 0 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.project-details div { display: grid; grid-template-columns: 64px 1fr; gap: 12px; }
.project-details dt { color: var(--brand); font-size: 11px; font-weight: 800; }
.project-details dd { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.text-link { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; border-bottom: 1px solid var(--ink); font-size: 12px; font-weight: 800; }
.text-link svg { width: 15px; height: 15px; transition: transform 180ms ease; }
.text-link:hover svg { transform: translate(3px, -3px); }

.about-section { display: grid; grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr); gap: 96px; }
.about-intro { position: sticky; top: 110px; align-self: start; }
.about-intro h2 { margin: 0; font-size: 48px; line-height: 1.2; }
.about-lede { margin: 0 0 48px; padding-left: 20px; border-left: 4px solid var(--brand); color: var(--ink-soft); font-size: 21px; line-height: 1.75; }
.capability-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--ink); }
.capability-grid > div { min-height: 188px; padding: 24px 22px 24px 0; border-bottom: 1px solid var(--line); }
.capability-grid > div:nth-child(even) { padding-left: 22px; border-left: 1px solid var(--line); }
.capability-grid span { color: var(--brand); font-size: 10px; font-weight: 850; }
.capability-grid h3 { margin: 20px 0 7px; font-size: 18px; }
.capability-grid p { margin: 0; color: var(--muted); font-size: 13px; }
.experience { margin-top: 60px; }
.experience > h3 { margin: 0 0 12px; color: var(--brand); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.experience-row { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.experience-row:last-child { border-bottom: 1px solid var(--line); }
.experience-row time { color: var(--muted); font-size: 12px; }
.experience-row div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 18px; }
.experience-row strong { font-size: 14px; }
.experience-row span { color: var(--muted); font-size: 12px; text-align: right; }
.experience-row p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.education { margin-top: 36px; }
.education > h3 { margin: 0 0 12px; color: var(--brand); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.education > div { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.education time { color: var(--muted); font-size: 12px; }
.education p { display: grid; gap: 5px; margin: 0; }
.education strong { font-size: 14px; }
.education span { color: var(--muted); font-size: 12px; }
.about-note { margin: -24px 0 0; color: var(--muted); font-size: 14px; line-height: 1.9; }

.contact-section { padding-block: 96px; background: var(--brand-strong); color: #f6f9fd; }
.contact-section .section-kicker { color: #8bc0ff; }
.contact-inner { display: grid; grid-template-columns: 1fr .82fr; gap: 70px; align-items: end; }
.contact-inner h2 { margin: 0; font-size: 58px; line-height: 1.18; }
.contact-links { border-top: 1px solid rgba(255,255,255,.65); }
.contact-links a { display: grid; grid-template-columns: 64px 1fr 22px; align-items: center; gap: 14px; padding: 21px 0; border-bottom: 1px solid rgba(255,255,255,.35); }
.contact-links span { font-size: 11px; opacity: .7; }
.contact-links strong { overflow-wrap: anywhere; font-size: 14px; }
.contact-links svg { width: 17px; height: 17px; }

.site-footer { padding: 22px 0; background: #091b30; color: #dbe8f8; font-size: 11px; }
.site-footer .shell { display: flex; justify-content: space-between; gap: 24px; }
.site-footer p { margin: 0; }
.site-footer .shell > div { display: flex; flex-wrap: wrap; gap: 18px; }
.site-footer a:hover { color: #fff; }

.problem-section { border-bottom: 1px solid var(--line); }
.problem-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.problem-grid article { min-width: 0; padding: 28px 22px 30px 0; }
.problem-grid article + article { padding-left: 22px; border-left: 1px solid var(--line); }
.problem-grid span { color: var(--brand); font-size: 10px; font-weight: 850; }
.problem-grid h3 { margin: 22px 0 10px; font-size: 19px; }
.problem-grid p { min-height: 88px; margin: 0 0 22px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.problem-grid small { color: var(--ink-soft); font-size: 10px; font-weight: 750; }

.featured-work { background: var(--surface); }
.selected-case-list { border-top: 1px solid var(--ink); }
.selected-case { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: 54px; align-items: center; padding: 54px 0; border-bottom: 1px solid var(--line); }
.selected-case:nth-child(even) { grid-template-columns: minmax(360px, .92fr) minmax(0, 1.08fr); }
.selected-case:nth-child(even) .case-visual { order: 2; }
.case-visual { position: relative; display: block; min-width: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-soft); }
.case-visual img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 360ms var(--ease); }
.selected-case:hover .case-visual img { transform: scale(1.02); }
.case-visual > span { position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 38px; aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); font-size: 10px; font-weight: 850; }
.case-copy h3 { margin: 12px 0 10px; font-size: 34px; line-height: 1.25; }
.case-positioning { margin: 0 0 22px; color: var(--muted); line-height: 1.85; }
.case-brief { display: grid; gap: 12px; margin: 0 0 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.case-brief div { display: grid; grid-template-columns: 70px 1fr; gap: 14px; }
.case-brief dt { color: var(--brand); font-size: 11px; font-weight: 800; }
.case-brief dd { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.case-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.section-end-link { display: flex; justify-content: flex-end; padding-top: 28px; }
.section-end-link a { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-size: 13px; font-weight: 800; }
.section-end-link svg { width: 16px; height: 16px; transition: transform 180ms ease; }
.section-end-link a:hover svg { transform: translateX(4px); }

.workflow-section { border-bottom: 1px solid var(--line); }
.workflow-list { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; border-top: 1px solid var(--ink); list-style: none; }
.workflow-list li { min-width: 0; padding: 28px 22px 30px 0; }
.workflow-list li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.workflow-list span { color: var(--brand); font-size: 11px; font-weight: 850; }
.workflow-list h3 { margin: 34px 0 8px; font-size: 20px; }
.workflow-list p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }

.subpage-main, .case-page { display: block; }
.page-hero { padding-block: 92px 64px; border-bottom: 1px solid var(--line); }
.page-hero h1 { margin: 0; color: var(--ink-soft); font-size: 72px; line-height: 1; }
.page-hero > p:last-child { max-width: 660px; margin: 24px 0 0; color: var(--muted); font-size: 17px; line-height: 1.85; }
.work-library { padding-top: 54px; }
.work-library .project-grid { row-gap: 64px; }

.case-hero { padding-block: 88px 64px; }
.case-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: 86px; align-items: end; }
.case-hero h1 { margin: 0; color: var(--ink-soft); font-size: 72px; line-height: 1.06; }
.case-hero-grid > div > p { max-width: 640px; margin: 28px 0 0; color: var(--muted); font-size: 17px; line-height: 1.9; }
.case-overview { margin: 0; border-top: 1px solid var(--ink); }
.case-overview div { display: grid; grid-template-columns: 86px 1fr; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.case-overview dt { color: var(--brand); font-size: 11px; font-weight: 800; }
.case-overview dd { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.case-cover { margin-bottom: 92px; }
.case-cover img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: top center; border-radius: var(--radius-sm); background: var(--surface-soft); }
.case-cover figcaption { margin-top: 12px; color: var(--muted); font-size: 11px; }
.case-content { width: min(780px, calc(100% - 64px)); }
.case-content > section { padding: 0 0 72px; }
.case-content > section + section { padding-top: 72px; border-top: 1px solid var(--line); }
.case-number { margin: 0 0 14px !important; color: var(--brand) !important; font-size: 11px !important; font-weight: 850; letter-spacing: .06em; }
.case-content h2 { margin: 0 0 20px; color: var(--ink-soft); font-size: 38px; line-height: 1.28; }
.case-content section > p { margin: 0; color: var(--muted); line-height: 2; }
.problem-chain { display: grid; gap: 0; margin: 32px 0 0; padding: 0; list-style: none; counter-reset: problem; }
.problem-chain li { position: relative; padding: 18px 18px 18px 58px; border-top: 1px solid var(--line); color: var(--ink-soft); counter-increment: problem; }
.problem-chain li:last-child { border-bottom: 1px solid var(--line); }
.problem-chain li::before { content: counter(problem, decimal-leading-zero); position: absolute; left: 14px; color: var(--brand); font-size: 10px; font-weight: 850; }
.problem-chain li + li::after { content: "↓"; position: absolute; left: 20px; top: -14px; padding: 0 4px; background: var(--canvas); color: var(--brand); font-size: 12px; }
.responsibility-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.responsibility-list li { padding: 14px 0 14px 22px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; }
.responsibility-list li:nth-child(odd) { padding-left: 0; }
.responsibility-list li:nth-child(even) { border-left: 1px solid var(--line); }
.responsibility-list li::before { content: "✓"; margin-right: 10px; color: var(--brand); font-weight: 850; }
.solution-grid, .key-page-list { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 30px; border-top: 1px solid var(--ink); }
.solution-grid > div, .key-page-list > div { padding: 24px 20px 24px 0; }
.solution-grid > div + div, .key-page-list > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.solution-grid strong, .key-page-list strong { color: var(--ink-soft); font-size: 14px; }
.solution-grid p, .key-page-list p { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.key-page-list { grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid var(--line); }
.key-page-list > div:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
.key-page-list > div:nth-child(4) { border-top: 1px solid var(--line); }
.scenario-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 30px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.scenario-grid article { padding: 24px 20px 24px 0; }
.scenario-grid article + article { padding-left: 20px; border-left: 1px solid var(--line); }
.scenario-grid strong { display: block; color: var(--ink-soft); font-size: 14px; }
.scenario-grid span { display: block; margin-top: 8px; color: var(--brand); font-size: 10px; font-weight: 800; }
.scenario-grid p { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.decision-list, .challenge-list { display: grid; margin-top: 30px; border-top: 1px solid var(--ink); }
.decision-list article, .challenge-list article { display: grid; grid-template-columns: minmax(180px, .75fr) minmax(0, 1.6fr); gap: 30px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.decision-list strong, .challenge-list strong { color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.decision-list p, .challenge-list p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.85; }
.evidence-note { margin: 0 0 28px !important; color: var(--muted); font-size: 11px !important; line-height: 1.8 !important; }
.evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 28px; margin-top: 32px; }
.evidence-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.evidence-item { min-width: 0; margin: 0; }
.evidence-item img { display: block; width: auto; max-width: 100%; height: 560px; margin: 0 auto; object-fit: contain; object-position: top center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.evidence-item figcaption { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.evidence-item figcaption > strong { display: block; color: var(--ink-soft); font-size: 15px; }
.evidence-item figcaption > span { display: block; margin-top: 14px; color: var(--brand); font-size: 10px; font-weight: 850; }
.evidence-item figcaption > p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.flow-list { display: grid; grid-template-columns: repeat(4, 1fr); margin: 30px 0 0; padding: 0; list-style: none; }
.flow-list li { position: relative; min-width: 0; padding: 22px 18px; border: 1px solid var(--line); }
.flow-list li + li { border-left: 0; }
.flow-list li + li::before { content: "→"; position: absolute; z-index: 2; left: -9px; top: 22px; color: var(--brand); background: var(--canvas); }
.flow-list span { color: var(--brand); font-size: 10px; font-weight: 850; }
.flow-list strong { display: block; margin-top: 26px; font-size: 14px; }
.flow-list p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.flow-list--service { grid-template-columns: repeat(5, 1fr); }
.flow-list--compact { grid-template-columns: repeat(3, 1fr); }
.flow-list--compact li:nth-child(4), .flow-list--compact li:nth-child(7) { border-left: 1px solid var(--line); }
.flow-list--compact li:nth-child(n+4) { border-top: 0; }
.flow-list--compact li:nth-child(4)::before, .flow-list--compact li:nth-child(7)::before { display: none; }
.evidence-item--wide { grid-column: span 2; }
.evidence-item--wide img { width: 100%; height: auto; max-height: 620px; aspect-ratio: 1.44 / 1; object-fit: contain; }
.case-jianzhi .case-cover img, .case-jianzhi .evidence-item--wide img { height: auto; aspect-ratio: auto; object-fit: contain; }
.case-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.related-content { margin: 0 0 64px; padding: 32px; border-left: 4px solid var(--brand); background: var(--surface-soft); }
.related-content h2 { margin-bottom: 14px; font-size: 26px; }
.related-content a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); font-weight: 750; }
.related-content a:hover { color: var(--brand); }
.related-content svg { width: 16px; height: 16px; }
.case-pagination { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 92px; }
.case-pagination a { display: grid; gap: 6px; min-height: 106px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.case-pagination a:hover { border-color: var(--brand); }
.case-pagination span { color: var(--brand); font-size: 10px; font-weight: 800; }
.case-pagination strong { color: var(--ink-soft); font-size: 14px; }
.reading-progress { position: fixed; z-index: 120; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; }
.reading-progress span { display: block; width: 100%; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; }

.article-dialog { width: min(780px, calc(100% - 32px)); max-height: calc(100svh - 40px); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
.article-dialog::backdrop { background: rgba(7, 19, 35, .72); backdrop-filter: blur(6px); }
.dialog-reading-progress { position: sticky; z-index: 4; top: 0; height: 3px; background: var(--line); }
.dialog-reading-progress span { display: block; width: 100%; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; }
.dialog-close { position: sticky; z-index: 2; top: 16px; float: right; margin: 16px 16px 0 0; background: var(--surface); }
#dialog-content { padding: 68px 72px; }
#dialog-content .article-meta { margin-bottom: 12px; }
#dialog-content h2 { margin: 0 0 28px; font-size: 44px; line-height: 1.22; }
#dialog-content h3 { margin: 34px 0 8px; font-size: 21px; }
#dialog-content p, #dialog-content li { color: var(--muted); line-height: 1.95; }
#dialog-content strong { color: var(--ink); }
.article-byline { display: grid; grid-template-columns: repeat(4, 1fr); margin: -8px 0 30px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.article-byline div { min-width: 0; padding-right: 12px; }
.article-byline dt { color: var(--brand); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.article-byline dd { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.article-summary { margin: 0 0 28px; padding-left: 18px; border-left: 3px solid var(--brand); color: var(--ink-soft) !important; font-size: 15px; }
#dialog-content blockquote { margin: 30px 0; padding: 18px 22px; border-left: 4px solid var(--brand); background: var(--surface-soft); color: var(--ink); font-size: 18px; }
.article-toc { margin: 28px 0 36px; padding: 20px 22px; border-left: 3px solid var(--brand); background: var(--surface-soft); }
.article-toc > strong { display: block; margin-bottom: 8px; color: var(--ink-soft); font-size: 12px; }
.article-toc ol { margin: 0; padding-left: 20px; }
.article-toc li { padding: 3px 0; font-size: 12px; }
.article-toc a:hover { color: var(--brand); }
.article-related { margin-top: 44px; padding: 26px; background: var(--surface-soft); }
.article-related .section-kicker { margin-bottom: 6px; }
#dialog-content .article-related h3 { margin: 0 0 14px; }
.article-related > div { display: grid; gap: 8px; }
.article-related a { display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.article-related a strong { font-size: 13px; }
.article-related a span { color: var(--muted); font-size: 11px; }
.article-related a svg { grid-column: 2; grid-row: 1 / span 2; width: 16px; height: 16px; color: var(--brand); }
.article-actions { display: grid; gap: 24px; margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--line); }
.article-actions .button { cursor: pointer; color: var(--ink); }
.article-actions > .button { justify-self: start; }
.article-pagination { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.article-pagination button { display: grid; gap: 5px; min-height: 92px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.article-pagination button:hover { border-color: var(--brand); }
.article-pagination span { color: var(--brand); font-size: 10px; font-weight: 800; }
.article-pagination strong { font-size: 12px; line-height: 1.55; }
.toast { position: fixed; z-index: 160; left: 50%; bottom: 28px; padding: 10px 15px; border-radius: var(--radius-sm); background: var(--ink); color: var(--surface); box-shadow: var(--shadow-lg); font-size: 12px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.reveal, .reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: minmax(350px, 1fr) minmax(270px, .78fr) minmax(280px, .75fr); gap: 24px; }
  .hero h1 { font-size: 126px; }
  .hero-lede { font-size: 32px; }
  .portrait-stage { max-width: 320px; }
  .portrait-wrap { width: 210px; }
  .shape-blue { left: 216px; }
  .portrait-signature { left: 252px; }
  .principle-grid { gap: 18px; }
  .principle-grid p:not(.section-kicker) { min-width: 112px; }
  .principle-grid strong { font-size: 24px; }
  .article-list { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); }
}

@media (max-width: 960px) {
  :root { --header-height: 68px; }
  .shell { width: min(100% - 40px, 760px); }
  .nav-wrap { grid-template-columns: 1fr auto auto; gap: 10px; }
  .menu-toggle { display: grid; order: 2; }
  .theme-toggle { order: 3; }
  .site-nav { position: absolute; top: calc(100% + 8px); left: 20px; right: 20px; height: auto; display: none; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg); }
  .site-nav.open { display: grid; grid-template-columns: repeat(4, 1fr); }
  .site-nav a { min-height: 44px; justify-content: center; border-radius: 8px; }
  .site-nav a::after { left: 18px; right: 18px; bottom: 4px; }
  .hero { padding-block: 56px 62px; }
  .hero-grid { min-height: auto; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); gap: 46px 28px; }
  .hero-primary { align-self: end; }
  .hero h1 { font-size: 116px; }
  .hero-lede { font-size: 32px; }
  .hero-intro { align-self: end; padding-top: 0; }
  .hero-profile { grid-column: 1 / -1; }
  .portrait-stage { max-width: 460px; min-height: 330px; margin: 0 auto; }
  .portrait-wrap { left: 54px; width: 220px; }
  .shape-blue { left: 264px; }
  .shape-cyan { left: 30px; }
  .shape-line { left: 275px; }
  .portrait-signature { left: 312px; }
  .principle-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; padding-block: 22px; }
  .principle-grid .section-kicker { grid-column: 1 / -1; }
  .principle-grid span { display: none; }
  .problem-grid, .workflow-list { grid-template-columns: repeat(2, 1fr); }
  .problem-grid article:nth-child(3), .workflow-list li:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .problem-grid article:nth-child(4), .workflow-list li:nth-child(4) { border-top: 1px solid var(--line); }
  .selected-case, .selected-case:nth-child(even) { grid-template-columns: 1fr; gap: 28px; }
  .selected-case:nth-child(even) .case-visual { order: initial; }
  .case-copy { max-width: 680px; }
  .case-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .case-overview { max-width: 660px; }
  .case-cover { margin-bottom: 72px; }
  .evidence-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-list, .flow-list--service, .flow-list--compact { grid-template-columns: repeat(2, 1fr); }
  .flow-list li:nth-child(3) { border-left: 1px solid var(--line); }
  .flow-list li:nth-child(n+3) { border-top: 0; }
  .flow-list li:nth-child(3)::before { display: none; }
  .flow-list--service li:nth-child(odd):not(:first-child), .flow-list--compact li:nth-child(odd):not(:first-child) { border-left: 1px solid var(--line); }
  .flow-list--service li:nth-child(odd):not(:first-child)::before, .flow-list--compact li:nth-child(odd):not(:first-child)::before { display: none; }
  .flow-list--service li:nth-child(even), .flow-list--compact li:nth-child(even) { border-left: 0; }
  .flow-list--service li:nth-child(even)::before, .flow-list--compact li:nth-child(even)::before { display: block; }
  .section { padding-block: 82px; }
  .article-list { grid-template-columns: 1fr; grid-template-rows: auto; gap: 0; }
  .article-item:first-child { grid-row: auto; min-height: 460px; margin-bottom: 20px; }
  .pillar-list { grid-template-columns: repeat(2, 1fr); }
  .pillar-list article { border-bottom: 1px solid var(--line); }
  .pillar-list article:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pillar-list article:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
  .pillar-list article:last-child { grid-column: 1 / -1; }
  .about-section { grid-template-columns: 1fr; gap: 48px; }
  .about-intro { position: static; max-width: 650px; }
  .contact-inner { grid-template-columns: 1fr; gap: 46px; }
}

@media (max-width: 680px) {
  .shell { width: calc(100% - 28px); }
  .brand-copy small { display: none; }
  .site-nav { left: 14px; right: 14px; grid-template-columns: 1fr 1fr !important; }
  .site-nav a { gap: 7px; }
  .site-nav svg { display: block; width: 16px; height: 16px; }
  .hero { padding-block: 42px 52px; }
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero-primary { order: 1; }
  .hero h1 { font-size: 84px; }
  .hero-lede { margin-top: 22px; font-size: 30px; }
  .hero-intro { order: 2; margin-top: 28px; }
  .hero-summary { font-size: 14px; line-height: 1.85; }
  .hero-detail { font-size: 13px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 24px; }
  .resume-actions { min-width: 0; }
  .button { min-width: 0; padding-inline: 10px; font-size: 12px; }
  .resume-page { padding-block: 38px 64px; }
  .resume-viewer-head { grid-template-columns: 1fr; align-items: start; gap: 22px; margin-bottom: 24px; }
  .resume-viewer-head h1 { font-size: 34px; }
  .resume-viewer-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .resume-document { width: calc(100% - 20px); gap: 16px; }
  .resume-sheet figcaption { padding-block: 7px; }
  .hero-profile { order: 3; margin-top: 42px; }
  .portrait-stage { width: min(100%, 350px); min-height: 310px; }
  .portrait-wrap { left: 20px; width: 202px; }
  .shape-blue { left: 210px; top: 58px; width: 38px; height: 104px; }
  .shape-cyan { left: 0; top: 206px; }
  .shape-line { left: 218px; }
  .portrait-signature { left: 252px; top: 170px; }
  .portrait-signature strong { font-size: 21px; }
  .principle-grid { grid-template-columns: 1fr 1fr; row-gap: 24px; padding-block: 26px; }
  .principle-grid .section-kicker { grid-column: 1 / -1; }
  .principle-grid p:not(.section-kicker) { min-width: 0; }
  .principle-grid strong { font-size: 24px; }
  .principle-grid .direction-value { font-size: 16px; }
  .section { padding-block: 72px; }
  .section-head, .writing-section .section-head, #work .section-head { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 30px; }
  .writing-section .section-head > div { grid-row: auto; }
  .section-head h2 { font-size: 40px; }
  .section-head > p { font-size: 14px; }
  .section-more { justify-self: start; margin-top: 6px; }
  .article-item:first-child { min-height: 430px; padding: 248px 20px 22px; }
  .article-item:first-child h3 { font-size: 25px; }
  .article-item { grid-template-columns: 28px 1fr 40px; gap: 9px; padding-block: 22px; }
  .article-item h3 { font-size: 21px; }
  .article-item div > p:last-child { display: none; }
  .problem-grid, .workflow-list { grid-template-columns: 1fr; }
  .problem-grid article, .problem-grid article + article, .problem-grid article:nth-child(3), .workflow-list li, .workflow-list li + li, .workflow-list li:nth-child(3) { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); }
  .problem-grid article:first-child, .workflow-list li:first-child { border-top: 0; }
  .problem-grid p { min-height: auto; }
  .workflow-list h3 { margin-top: 20px; }
  .selected-case { padding: 40px 0; }
  .case-copy h3 { font-size: 27px; }
  .case-brief div { grid-template-columns: 1fr; gap: 3px; }
  .case-actions { align-items: stretch; }
  .case-actions .button { flex: 1 1 auto; }
  .pillar-list { grid-template-columns: 1fr; }
  .pillar-list article, .pillar-list article:nth-child(even), .pillar-list article:last-child { grid-column: auto; padding: 20px 0; border-left: 0; }
  .pillar-list article + article { border-top: 1px solid var(--line); }
  .filter-bar { flex-wrap: nowrap; overflow-x: auto; margin-inline: -14px; padding-inline: 14px; scrollbar-width: none; }
  .filter-button { flex: 0 0 auto; }
  .project-grid { grid-template-columns: 1fr; gap: 46px; }
  .project-card, .project-featured { grid-column: auto; display: block; }
  .project-featured:last-child .project-visual { order: initial; }
  .project-body h3 { font-size: 25px; }
  .project-body h2 { font-size: 24px; }
  .about-intro h2 { font-size: 38px; }
  .about-lede { font-size: 18px; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-grid > div, .capability-grid > div:nth-child(even) { min-height: auto; padding: 22px 0; border-left: 0; }
  .experience-row { grid-template-columns: 1fr; gap: 5px; }
  .experience-row div { display: grid; gap: 3px; }
  .experience-row span { text-align: left; }
  .experience-row div { grid-template-columns: 1fr; }
  .experience-row p { grid-column: auto; }
  .education > div { grid-template-columns: 1fr; gap: 5px; }
  .about-note { margin-top: -26px; }
  .contact-section { padding-block: 72px; }
  .contact-inner h2 { font-size: 40px; }
  .contact-links a { grid-template-columns: 54px 1fr 20px; }
  .site-footer .shell { display: grid; }
  .page-hero { padding-block: 64px 48px; }
  .page-hero h1, .case-hero h1 { font-size: 48px; }
  .page-hero > p:last-child, .case-hero-grid > div > p { font-size: 15px; }
  .work-library { padding-top: 42px; }
  .case-hero { padding-block: 62px 48px; }
  .case-cover { width: 100%; margin-bottom: 62px; }
  .case-cover img { border-radius: 0; aspect-ratio: 4 / 3; }
  .case-cover figcaption { width: calc(100% - 28px); margin-inline: auto; }
  .case-content { width: calc(100% - 28px); }
  .case-content > section { padding-bottom: 54px; }
  .case-content > section + section { padding-top: 54px; }
  .case-content h2 { font-size: 29px; }
  .responsibility-list, .solution-grid, .key-page-list, .flow-list, .scenario-grid { grid-template-columns: 1fr; }
  .responsibility-list li, .responsibility-list li:nth-child(even), .responsibility-list li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .solution-grid > div, .solution-grid > div + div, .key-page-list > div, .key-page-list > div + div, .key-page-list > div:nth-child(3), .key-page-list > div:nth-child(4) { padding: 20px 0; border-left: 0; border-top: 1px solid var(--line); }
  .solution-grid > div:first-child, .key-page-list > div:first-child { border-top: 0; }
  .scenario-grid article, .scenario-grid article + article { padding: 20px 0; border-left: 0; border-top: 1px solid var(--line); }
  .scenario-grid article:first-child { border-top: 0; }
  .decision-list article, .challenge-list article { grid-template-columns: 1fr; gap: 8px; }
  .evidence-grid, .evidence-grid--three { grid-template-columns: 1fr; gap: 46px; }
  .evidence-item--wide { grid-column: auto; }
  .evidence-item img { height: min(620px, 158vw); }
  .flow-list li, .flow-list li + li, .flow-list li:nth-child(3), .flow-list li:nth-child(n+3) { border: 1px solid var(--line); border-top: 0; }
  .flow-list li:first-child { border-top: 1px solid var(--line); }
  .flow-list li + li::before { content: "↓"; left: 20px; top: -13px; padding-inline: 4px; background: var(--canvas); }
  .flow-list li:nth-child(3)::before { display: block; }
  .flow-list--service li:nth-child(n+2)::before, .flow-list--compact li:nth-child(n+2)::before { display: block; }
  .related-content { padding: 24px 20px; }
  .case-pagination { grid-template-columns: 1fr; margin-bottom: 70px; }
  .article-dialog { width: calc(100% - 16px); max-height: calc(100svh - 16px); }
  #dialog-content { padding: 62px 22px 42px; }
  #dialog-content h2 { font-size: 32px; }
  .article-byline { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
  .article-pagination { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .hero h1 { font-size: 76px; }
  .hero-lede { font-size: 27px; }
  .portrait-stage { transform: scale(.94); transform-origin: left top; margin-bottom: -18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}