/* SHIHUI XU — editorial portfolio. Single source of truth for layout and theme. */
/* Local, OFL-licensed Space Grotesk: only digit glyphs override the existing
   type system, including numbers inside headings and dynamically added text. */
@font-face {
  font-family:'Portfolio Digits';
  src:url('../fonts/SpaceGrotesk-variable.ttf') format('truetype');
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0030-0039;
}
@font-face {
  font-family:'Portfolio Digits';
  src:url('../fonts/SpaceGrotesk-variable.ttf') format('truetype');
  font-weight:300 700;
  font-style:italic;
  font-display:swap;
  unicode-range:U+0030-0039;
}
/* If the local font cannot load, digits still cannot fall through to a serif. */
@font-face {
  font-family:'Portfolio Digit Fallback';
  src:local('Arial'),local('Liberation Sans'),local('Noto Sans');
  font-weight:100 900;
  unicode-range:U+0030-0039;
}
:root {
  --cream:#F8F7EF; --paper:#FFFDF7; --ink:#29251F; --ink-soft:#625C54;
  --orange:#F46B3B; --orange-ink:#AA3B18; --butter:#F4D77A; --sage:#AFC7B3;
  --sky:#BCD9E8; --blush:#E9B8A6; --peach:#F3C99E; --burgundy:#773E45;
  --sage-tint:#EBEFE7; --blush-tint:#F4E6DF; --peach-tint:#F5DBC5;
  --line:rgba(41,37,31,.20); --bg:var(--cream); --bg-2:var(--butter);
  --ink-2:var(--ink-soft); --ink-3:#70695F; --accent:var(--orange-ink); --signal:var(--butter);
  --digits:'Portfolio Digits','Portfolio Digit Fallback';
  --sans:var(--digits),'Noto Sans SC','Inter','Microsoft YaHei',sans-serif;
  --serif:var(--digits),'Noto Serif SC','Songti SC','SimSun',serif;
  --editorial:var(--digits),'Cormorant Garamond',Georgia,serif;
  --number-font:var(--digits),'Inter','Noto Sans SC','Arial',sans-serif;
  --body-size:16px; --gutter:clamp(20px,4.2vw,64px); --section-space:100px;
  --content:1360px; --radius:14px; --pill:999px; --header:88px;
  --ease:cubic-bezier(.22,.75,.25,1); --motion:800ms; --hover:700ms; --tab-motion:420ms;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 28px)}
body{background:var(--cream);color:var(--ink);font:400 var(--body-size)/1.85 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit} button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer} a{color:inherit;text-decoration:none} img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,h5{font-weight:500;line-height:1.4;text-wrap:pretty}
p{color:var(--ink-soft)} strong{color:var(--ink);font-weight:600}
[hidden]{display:none!important} :focus-visible{outline:2px solid var(--orange-ink);outline-offset:5px}
::selection{background:var(--peach);color:var(--ink)}
section[id], [role=tabpanel]{scroll-margin-top:calc(var(--header) + 24px)}
section{width:100%;max-width:var(--content);margin-inline:auto;padding:var(--section-space) var(--gutter)}
section section{width:auto;max-width:none;margin:0;padding:0}
.skip-link{position:fixed;top:10px;left:10px;z-index:300;padding:12px 20px;background:var(--ink);color:var(--cream);transform:translateY(-160%)}
.skip-link:focus{transform:none}
.eyebrow,.num,.project-kicker,.project-chapter-no,.pc-tag{font:500 12px/1.7 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.eyebrow{color:var(--ink-soft)}
.section-head{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:46px}
.section-head .num{color:var(--orange-ink)}
.section-head h2{font:500 clamp(42px,4.7vw,70px)/1.22 var(--serif);letter-spacing:-.045em}
.section-head h2 em{display:inline-block;margin-left:24px;font:italic 400 .82em/1.15 var(--editorial);letter-spacing:-.025em;color:var(--ink-soft)}
.dot-ind{display:none}
.section-subhead{margin-top:52px;margin-bottom:22px}
.section-subhead h2{font-size:30px}
.arrow{display:inline-block;transition:transform .3s var(--ease)}
a:hover .arrow,button:hover .arrow{transform:translate(4px,-2px)}
/* Navigation: balanced wordmark, quiet links, a single contact action. */
#header{position:fixed;inset:0 0 auto;z-index:100;background:rgba(248,247,239,.8);border-bottom:1px solid transparent;transition:background .4s,border-color .4s;backdrop-filter:blur(12px)}
#header.scrolled{background:rgba(248,247,239,.96);border-color:var(--line)}
.nav{position:relative;max-width:1480px;min-height:var(--header);margin:auto;padding:18px var(--gutter);display:flex;align-items:center}
.logo{position:absolute;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;text-align:center;line-height:1.3}
.logo>span{font:500 25px var(--serif);letter-spacing:.15em}
.logo small{font:500 10px/2 var(--sans);letter-spacing:.18em}
.nav-menu{width:100%;display:flex;align-items:center;gap:24px;list-style:none}
.nav-menu li:nth-child(4){margin-left:auto}
.nav-menu a{font-size:13px;white-space:nowrap;transition:color .3s}
.nav-menu a:hover{color:var(--orange-ink)}
.nav-cta{display:inline-flex;gap:16px;align-items:center;padding:10px 19px;background:var(--peach);border:1px solid transparent;border-radius:var(--pill)}
.nav-cta:hover{background:var(--butter)}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);background:transparent;border-radius:50%}
.nav-toggle svg{stroke:currentColor}
.btn,.btn-pdf{display:inline-flex;align-items:center;justify-content:center;gap:25px;min-height:48px;padding:12px 24px;border:1px solid var(--ink);border-radius:var(--pill);font-size:14px;line-height:1.5;transition:background .3s,color .3s,transform .3s}
.btn:hover,.btn-pdf:hover{transform:translateY(-1px)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--orange-ink);border-color:var(--orange-ink)}
.btn-ghost,.btn-pdf{background:transparent;color:var(--ink)}
.btn-ghost:hover,.btn-pdf:hover{background:var(--ink);color:var(--paper)}
/* A typographic opening; portrait stays secondary. */
/* Keep the breathing background inside the hero, including during viewport changes. */
.hero{min-height:95svh;position:relative;isolation:isolate;overflow:clip;display:grid;grid-template-columns:minmax(0,1fr) 260px;column-gap:7%;row-gap:40px;align-content:center;align-items:center;padding-top:calc(var(--header) + 54px);padding-bottom:38px}
.hero::before{content:"";position:absolute;z-index:-1;width:clamp(420px,46vw,650px);aspect-ratio:1;right:7%;top:9%;border-radius:50%;background:radial-gradient(circle at 38% 42%,#f2d2b9 0%,#f2dab8 45%,#f1e4bc 75%,#f4ecd9 100%);opacity:.63;animation:breathe 11s ease-in-out infinite}
.hero-label{font:500 11px/1.6 var(--sans);letter-spacing:.14em;margin-bottom:20px}
.hero-name{font:500 clamp(64px,7.4vw,106px)/1.15 var(--serif);letter-spacing:.06em}
.hero-english{font:400 clamp(32px,3.8vw,58px)/1.04 var(--editorial);letter-spacing:-.03em;color:var(--ink);margin:20px 0 24px}
.hero-english em{font-weight:400}
.hero-role{font-size:22px;color:var(--ink);font-weight:500;line-height:1.55}
.hero-role-divider{margin:0 10px;color:var(--orange-ink)}
.hero-role-focus{font-size:16px;font-weight:400}
.hero-intro{font-size:18px;margin:18px 0 25px;color:var(--ink)}
.hero-intro>span{font-size:15px;color:var(--ink-soft)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero-right{align-self:center;position:relative}
.hero-index{font-size:10px;letter-spacing:.1em;margin-bottom:12px}
.avatar-ring{border-radius:140px 140px 12px 12px;overflow:hidden;background:var(--paper);border:1px solid var(--line)}
.avatar-img{width:100%;height:auto;object-fit:contain;aspect-ratio:3/4}
.hero-metrics{grid-column:1/-1;display:grid;grid-template-columns:160px minmax(0,1fr);align-items:center;gap:24px;padding-top:24px;border-top:1px solid var(--line)}
.hero-cue{font-size:10px;letter-spacing:.1em;display:flex;flex-direction:column;gap:8px}
.hero-cue span{font-size:25px}
.hero-stats{display:grid;grid-template-columns:1fr 1.35fr 1fr 1fr;gap:22px}
.hero-stat strong{display:block;font:500 clamp(28px,2.6vw,40px)/1.2 var(--editorial);white-space:nowrap;letter-spacing:-.03em}
.hero-stat span{display:block;margin-top:7px;font-size:12px;color:var(--ink-soft)}
.portfolio-ticker{position:relative;overflow:hidden;background:var(--ink);color:var(--cream);height:54px;display:flex;align-items:center}
.portfolio-ticker-track{display:flex;width:max-content;animation:marquee 36s linear infinite}
.portfolio-ticker-track>div{display:flex;align-items:center;gap:36px;padding-right:36px;flex:none}
.portfolio-ticker span{font-size:14px;white-space:nowrap}
.portfolio-ticker b{font-size:16px;color:var(--peach)}
.portfolio-ticker:hover .portfolio-ticker-track,.portfolio-ticker.is-paused .portfolio-ticker-track{animation-play-state:paused}
.ticker-toggle{position:absolute;right:0;top:0;height:54px;width:46px;background:var(--ink);color:var(--cream);border:0;border-left:1px solid #ffffff40}
.hero-context{max-width:var(--content);padding:54px var(--gutter) 0;margin:auto;display:grid;grid-template-columns:1fr 3fr;gap:40px}
.hero-summary p+p{margin-top:14px}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.pill{font-size:12px;padding:4px 12px;border:1px solid var(--line);border-radius:var(--pill)}
/* Experience is a readable publication, not a set of cards. */
#experience{padding-bottom:70px}
.accordion{border-top:1px solid var(--line)}
.acc-item{display:grid;grid-template-columns:34% minmax(0,1fr);gap:40px;border-bottom:1px solid var(--line);padding:34px 0;align-items:start}
#experience>.accordion:first-of-type .acc-item:first-child{background:var(--sage-tint);padding:34px 28px}
.acc-head{display:flex;flex-wrap:wrap;align-content:start;gap:16px;background:none;border:0;text-align:left;width:100%;position:relative}
.acc-main{display:flex;flex-direction:column;gap:12px;width:100%;padding-right:22px}
.acc-title{font:500 25px/1.5 var(--serif)}
.acc-sub{font-size:14px;color:var(--ink-soft)}
.acc-year{font:500 22px/1.4 var(--editorial)}
.acc-icon{position:absolute;right:0;top:0;font-size:22px}
.acc-body{min-width:0;overflow:hidden;transition:max-height .5s var(--ease)}
.acc-body-inner{padding-bottom:2px}
.exp-summary{margin-bottom:20px}
.exp-work-label{font-size:14px;letter-spacing:.08em;margin-bottom:16px}
.exp-points{list-style:none}
.exp-points li{padding-left:18px;position:relative;color:var(--ink-soft)}
.exp-points li+li{margin-top:14px}
.exp-points li::before{content:"–";position:absolute;left:0;color:var(--orange-ink)}
.experience-number{font:400 64px/1 var(--editorial);color:var(--orange-ink);display:block;width:100%;margin-top:14px}
.experience-metrics{display:flex;flex-wrap:wrap;gap:24px;margin:24px 0;padding-top:18px;border-top:1px solid var(--line)}
.experience-metrics div{display:flex;flex-direction:column}
.experience-metrics strong{font:500 30px/1.2 var(--editorial)}
.experience-metrics span{font-size:12px}
/* Selected work opens with imagery, then makes room for long-form reading. */
#projects{padding-top:60px}
.selected-projects{display:grid;grid-template-columns:1.45fr 1fr;gap:44px;margin-bottom:76px;align-items:start}
.project-cover{display:block;transition:transform .6s var(--ease)}
.project-cover:hover{transform:translateY(-4px)}
.cover-money{padding-top:100px}
.cover-image{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--sage-tint)}
.cover-nailong .cover-image{aspect-ratio:5/4}
.cover-nailong img{width:100%;height:100%;object-fit:cover}
.cover-money .cover-image{aspect-ratio:4/3;background:var(--blush-tint);padding:20px}
.cover-money img{width:100%;height:100%;object-fit:contain}
.cover-image img{transition:transform var(--hover) var(--ease)}
.project-cover:hover img{transform:scale(1.025)}
.cover-badge{position:absolute;bottom:20px;left:20px;background:var(--paper);padding:7px 14px;border-radius:var(--pill);font-size:12px}
.cover-caption{padding:20px 0}
.cover-caption h3{font:500 30px/1.45 var(--serif);margin:8px 0}
.cover-caption h3 .arrow{float:right}
.cover-caption>p:last-child{font-size:14px}
.project-tabs,.works-tabs,.sub-tabs{display:flex;gap:30px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:40px}
.project-tab,.works-tab,.sub-tab{position:relative;border:0;border-bottom:2px solid transparent;background:transparent;padding:12px 0;min-height:48px;text-align:left;color:var(--ink-soft);font-size:16px}
.project-tab.active,.works-tab.active,.sub-tab.active{color:var(--ink);border-bottom-color:var(--orange)}
.project-tab.active::before,.works-tab.active::before{content:"";display:inline-block;width:6px;height:6px;background:var(--orange);border-radius:50%;margin-right:9px;vertical-align:middle}
.project-panel,.works-panel{display:none}
.project-panel.active,.works-panel.active{display:block}
.sub-tabs{display:none;margin-top:-18px}.sub-tabs.show{display:flex}
.sub-tab{font-size:14px}
.project-kicker{color:var(--orange-ink);margin-bottom:18px}
.project-overview h3{font:500 clamp(32px,4vw,58px)/1.4 var(--serif);letter-spacing:-.035em;max-width:1100px;margin-bottom:36px}
.project-intro-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(180px,.7fr);gap:70px}
.project-overview-copy p+p{margin-top:16px}
.project-role-aside{border-top:1px solid var(--line);padding-top:16px}
.project-role-aside ul{list-style:none;margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:14px}
.project-overview-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:#F2E7C0;margin-top:34px;padding:26px 12px}
.project-overview-stat{padding:0 20px;border-right:1px solid var(--line)}
.project-overview-stat:last-child{border:0}
.project-overview-stat strong{display:block;font:500 clamp(28px,3.2vw,44px)/1.2 var(--editorial);letter-spacing:-.04em}
.project-overview-stat span{display:block;font-size:12px;margin-top:8px}
.project-tertiary-nav{position:sticky;top:var(--header);z-index:50;display:flex;gap:30px;padding:12px 0 0;margin:35px 0 0;background:rgba(248,247,239,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.project-tertiary-nav a{padding:10px 0 14px;border-bottom:2px solid transparent;font-size:14px;white-space:nowrap}
.project-tertiary-nav a.active{border-color:var(--orange);color:var(--orange-ink)}
.project-tertiary-index{display:none}
section.project-chapter{margin-top:64px;scroll-margin-top:calc(var(--header) + 90px)}
.project-chapter-heading{display:flex;align-items:baseline;gap:26px;margin-bottom:30px}
.project-chapter-no{color:var(--orange-ink);flex-shrink:0}
.project-chapter h4{font:500 clamp(28px,3.1vw,43px)/1.4 var(--serif)}
.case-gallery,.project-overview-gallery{display:grid;gap:24px}
.project-role-gallery{grid-template-columns:1.45fr 1fr;align-items:start;margin-bottom:44px}
.project-role-gallery figure:nth-child(2){padding-top:58px}
.case-gallery figure,.case-photo figure{overflow:hidden}
.case-gallery img,.case-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px;transition:transform var(--hover) var(--ease)}
.case-gallery figure:hover img,.case-photo figure:hover img{transform:scale(1.025)}
figcaption{font-size:12px;color:var(--ink-soft);padding-top:12px;letter-spacing:.025em}
.project-role-grid{display:block}
.project-role-card{display:grid;grid-template-columns:70px minmax(190px,.65fr) minmax(0,1.6fr);gap:30px;padding:34px 0;border-top:1px solid var(--line)}
.role-no{font:400 58px/1 var(--editorial);color:var(--orange-ink)}
.project-role-card h5{font:500 24px/1.6 var(--serif)}
.role-body{min-width:0}
.role-body>*+*{margin-top:16px}
.role-body p{font-size:16px}
.role-callout{border-left:2px solid var(--orange);padding:12px 18px;background:#F2EEE0}
.role-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.role-group{padding:12px 0;border-block:1px solid var(--line);font-size:13px}
.role-group b,.role-group span{display:block}
.role-group b{margin-bottom:8px;font-weight:500}
.role-group span{color:var(--ink-soft)}
.role-inline-list,.flow-sequence,.coordination-flow{display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center;font-size:14px}
.role-inline-list span{padding:4px 10px;border:1px solid var(--line)}
.flow-sequence b,.coordination-flow b{font-weight:400;color:var(--orange-ink)}
.role-card-04 .role-inline-list{background:var(--sage-tint);padding:14px}
/* Decisions deserve more prominence than duties. */
.coordination-case{display:grid;grid-template-columns:70px minmax(0,1.2fr) minmax(0,.85fr);gap:30px;border-top:1px solid var(--line);padding:36px 0;margin-top:18px;align-items:start}
.coordination-label>span{display:block;font-size:10px;letter-spacing:.08em}
.coordination-label>b{font:400 70px/1.25 var(--editorial);color:var(--orange-ink)}
.coordination-content h5{font:500 clamp(26px,2.7vw,36px)/1.55 var(--serif);margin-bottom:26px}
.coordination-content h5 i{color:var(--orange-ink);font-style:normal;white-space:nowrap}
.coordination-block{display:grid;grid-template-columns:75px minmax(0,1fr);gap:16px}
.coordination-block+.coordination-block{margin-top:22px}
.coordination-block>span{font-size:12px;letter-spacing:.04em;font-weight:500;padding-top:4px}
.coordination-block p{font-size:15px}
.coordination-flow{font-size:15px}
.coordination-split{display:grid;gap:15px}
.coordination-split div{border-top:1px solid var(--line);padding-top:10px}
.coordination-split b,.coordination-split span{display:block;font-size:14px}
.coordination-split span{margin-top:5px;color:var(--ink-soft)}
.case-photo{padding-top:12px}
.case-photo img{aspect-ratio:4/5}
.case-02{background:var(--sage-tint);padding:30px 24px;grid-template-columns:70px minmax(0,.85fr) minmax(0,1.2fr)}
.case-02 .coordination-content{grid-column:3;grid-row:1}
.case-02 .case-photo{grid-column:2;grid-row:1}
.case-03{grid-template-columns:70px minmax(0,1fr);background:var(--peach-tint);padding:30px 24px}
.case-03 .case-photo{grid-column:1/-1;grid-row:1}
.case-03 .case-photo img{aspect-ratio:2.8/1}
.case-03 .coordination-label{grid-column:1}
.case-03 .coordination-content{grid-column:2}
.case-03 .coordination-content h5{max-width:none}
.case-03 .coordination-block{grid-template-columns:90px minmax(0,1fr)}
.project-card{display:grid;grid-template-columns:1fr 1.1fr;gap:36px}
.project-img{min-width:0}
.project-img img{width:100%;height:auto;border-radius:var(--radius)}
.project-scene-card .project-img img{aspect-ratio:4/5;object-fit:cover;object-position:50% 35%}
.project-info{min-width:0}
.pc-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:20px}
.pc-year{font-size:14px}
.project-name{font:500 32px/1.5 var(--serif);margin-bottom:22px}
.project-desc{margin-bottom:20px}
.project-points{padding-left:20px;color:var(--ink-soft)}
.project-points li+li{margin-top:14px}
.project-meta{border-top:1px solid var(--line);padding-top:18px;margin-top:24px;font-size:12px;color:var(--ink-soft)}
.coverage-display{display:flex;flex-wrap:wrap;gap:32px;margin-bottom:22px}
.coverage-display>span{font:400 clamp(44px,5vw,72px)/1.2 var(--editorial)}
.coverage-display em{font-size:.65em}
.city-overview-note{margin:16px 0 26px}
.city-map-shell{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(290px,.9fr);position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.city-map-canvas{height:610px;min-width:0;background:var(--cream)}
.city-map-controls{position:absolute;top:18px;right:calc(36% + 18px);display:flex;flex-direction:column;z-index:3;background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.city-map-control{width:44px;height:44px;background:transparent;border:0;border-bottom:1px solid var(--line);font-size:22px}
.city-map-control:last-child{border:0}.city-map-control:hover{background:var(--peach)}
.city-map-detail{border-left:1px solid var(--line);padding:28px}
.city-detail-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.detail-kicker{font-size:11px;letter-spacing:.14em;color:var(--ink-soft);margin:22px 0 8px}
.city-map-detail h5{font:500 34px/1.5 var(--serif);margin-bottom:22px}
.detail-events.is-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.detail-event{padding-top:14px;border-top:1px solid var(--line);font-size:14px}
.detail-date{font-weight:500}.detail-place{color:var(--ink-soft);margin-top:8px}
.city-map-fallback{padding:30px}
.city-picker-label{display:inline-block;font-size:14px;margin:18px 12px 0 0}
#cityPicker{margin-top:18px;padding:9px 30px 9px 14px;border:1px solid var(--line);border-radius:5px;background:var(--paper);min-height:44px}
/* Money: complete artwork and compact prose, no stretching text to image height. */
.money-project-card{padding:32px;background:var(--blush-tint);grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);align-items:start;gap:38px;border-radius:var(--radius)}
.money-project-card .project-img{position:sticky;top:calc(var(--header) + 24px)}
.money-project-card .project-img img{width:100%;height:auto;object-fit:contain}
.money-project-card .project-name{font-size:clamp(28px,3vw,40px);color:var(--burgundy)}
.money-project-card .project-name small{display:block;font:500 .65em/1.6 var(--serif);margin-top:8px}
.money-project-subtitle{font:500 22px/1.6 var(--serif);margin-bottom:18px;color:var(--ink)}
.money-project-summary p+p{margin-top:14px}
.money-role-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:20px 0}
.money-role-tags li{font-size:12px;border:1px solid #773e4540;border-radius:var(--pill);padding:4px 12px;color:var(--burgundy)}
.money-project-metric{display:flex;align-items:baseline;gap:20px;border-block:1px solid #773e4530;padding:16px 0;margin:20px 0}
.money-project-metric strong{font:500 56px/1.1 var(--editorial);color:var(--burgundy)}
.money-project-metric span{font-size:13px;color:var(--burgundy)}
.money-project-section+.money-project-section{margin-top:22px;padding-top:20px;border-top:1px solid #773e4530}
.money-project-section h4{font:500 24px/1.5 var(--serif);margin-bottom:12px}
.money-project-section ul{padding-left:20px;color:var(--ink-soft)}
.money-project-section p+p{margin-top:12px}
.money-project-section li+li{margin-top:8px}
/* Expertise: numbered capabilities with the complete original six descriptions. */
#skills{max-width:none;background:var(--sage-tint);padding-inline:max(var(--gutter),calc((100vw - var(--content))/2 + var(--gutter)))}
.skills-grid{border-top:1px solid var(--line)}
.skill-card{display:grid;grid-template-columns:90px minmax(210px,.9fr) minmax(0,1.5fr);gap:30px;padding:30px 0;border-bottom:1px solid var(--line);align-items:baseline}
.skill-icon{display:none}
.skill-number{font:400 58px/1 var(--editorial);transition:transform .4s var(--ease)}
.skill-name{font:500 26px/1.5 var(--serif);transition:color .3s}
.skill-desc{color:var(--ink-soft)}
.skill-card:hover .skill-name{color:var(--orange-ink)}
.skill-card:hover .skill-number{transform:translateX(5px);font-style:italic}
/* Number-only labels use sans-serif punctuation too. Mixed Chinese/English
   copy retains its existing typeface through the digit-only font above. */
.experience-number,.role-no,.coordination-label>b,.skill-number,.acc-year,
.detail-date,#works .gallery-count,.works-lightbox .lightbox-count {
  font-family:var(--number-font);
  font-variant-numeric:lining-nums tabular-nums;
}
/* Scoped artwork exhibition: artwork supplies the color, not decorated cards. */
#works{padding-bottom:clamp(28px,3vw,44px)}
#works .works-intro{max-width:960px;margin:-10px 0 30px}
#works .gallery-exhibition{min-width:0}
#works .gallery-stage{position:relative;padding-inline:60px;outline-offset:5px}
#works .gallery-viewport{position:relative;height:610px;overflow:hidden;touch-action:pan-y}
#works .gallery-artwork{position:absolute;left:50%;top:50%;width:min(34%,390px);height:calc(100% - 76px);padding:0;border:0;background:transparent;opacity:0;transform:translate(-50%,-50%);transform-origin:center;cursor:pointer;will-change:transform,opacity}
#works .gallery-artwork-inner{position:relative;display:grid;min-height:0;width:100%;height:100%;place-items:center;transition:transform 320ms var(--ease)}
#works .gallery-image{display:block;min-height:0;width:100%;height:100%;max-height:100%;object-fit:contain;pointer-events:none;user-select:none}
#works .gallery-view{position:absolute;left:50%;bottom:20px;transform:translate(-50%,8px);opacity:0;background:var(--paper);color:var(--ink);padding:9px 17px;border-radius:30px;font:500 12px/1.5 var(--sans);white-space:nowrap;box-shadow:0 3px 20px #29251f10;transition:opacity 300ms,transform 300ms}
#works .gallery-artwork:focus-visible .gallery-view{opacity:1;transform:translate(-50%,0)}
#works .gallery-artwork:focus-visible{outline:2px solid var(--orange);outline-offset:5px}
.gallery-arrow{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;padding:0;background:var(--paper);color:var(--ink);cursor:pointer;transition:background 300ms,color 300ms,border-color 300ms}
.gallery-arrow svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform 300ms var(--ease)}
#works .gallery-arrow{position:absolute;top:calc(50% - 23px);z-index:5}
#works .gallery-arrow.prev{left:0}#works .gallery-arrow.next{right:0}
#works .gallery-instruction{margin:2px 0 23px;text-align:center;font-size:11px;letter-spacing:.09em;color:var(--ink-soft)}
#works .gallery-info{display:grid;grid-template-columns:100px minmax(0,1fr) minmax(230px,.65fr);gap:28px;align-items:start;border-top:1px solid var(--line);padding:26px 0 22px;min-height:135px}
#works .gallery-count{font-size:12px;letter-spacing:.13em;padding-top:8px;white-space:nowrap}
#works .gallery-title{font:500 clamp(25px,2.5vw,34px)/1.45 var(--serif);letter-spacing:-.025em;overflow-wrap:anywhere}
#works .gallery-category{font-size:12px;color:var(--ink-soft);margin-top:6px}
#works .gallery-detail{text-align:right;padding-top:3px}
#works .gallery-likes{display:flex;align-items:baseline;justify-content:flex-end;gap:13px}
#works .gallery-likes span{font-size:12px;white-space:nowrap}
#works .gallery-likes strong{font:500 38px/1.05 var(--editorial);color:var(--orange-ink);white-space:nowrap;letter-spacing:-.03em}
#works .gallery-detail-label{display:block;font-size:9px;letter-spacing:.16em;margin-top:8px;color:var(--ink-soft)}
#works .gallery-caption{font-size:13px;line-height:1.8}
#works .gallery-thumbs{position:relative;display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;padding:5px 2px 13px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#works .gallery-thumb{flex:0 0 45px;width:45px;height:59px;border:1px solid transparent;padding:4px;background:transparent;opacity:.52;cursor:pointer;transition:opacity 300ms,border-color 300ms}
#works .gallery-thumb img{width:100%;height:100%;object-fit:contain;pointer-events:none}
#works .gallery-thumb[aria-pressed=true]{opacity:1;border-color:var(--orange-ink)}
#works .gallery-thumb:hover,#works .gallery-thumb:focus-visible{opacity:1}
#works .gallery-data-note{font-size:11px;color:var(--ink-soft);margin-top:9px}
#works .gallery-context{font-size:14px;max-width:860px;margin:26px 0 0}
/* Dialog is intentionally outside #works to escape tab overflow and transforms. */
.works-lightbox{position:fixed;inset:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#29251f;color:#fffdf7;overflow:hidden}
.works-lightbox::backdrop{background:rgba(29,25,20,.92)}
.works-lightbox .lightbox-shell{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:24px clamp(20px,4vw,64px) 28px}
.works-lightbox .lightbox-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;position:static;background:none;border:0}
.works-lightbox .lightbox-series{font:400 12px/1.7 var(--sans);letter-spacing:.07em;color:#d0c9bd}
.works-lightbox .lightbox-close{color:inherit;background:none;border:1px solid #ffffff40;border-radius:30px;min-height:44px;padding:6px 18px;font:400 12px/1.5 var(--sans);display:flex;align-items:center;gap:20px}
.works-lightbox .lightbox-close span{font-size:24px;font-weight:300}
.works-lightbox .lightbox-close:hover{background:#ffffff12}
.works-lightbox .lightbox-stage{position:relative;display:grid;place-items:center;min-height:0;padding:22px 70px;touch-action:pan-y}
.works-lightbox .lightbox-image{width:100%;height:100%;min-height:0;object-fit:contain;user-select:none}
.works-lightbox .gallery-arrow{position:absolute;top:calc(50% - 23px);background:none;color:#fffdf7;border-color:#ffffff40;z-index:2}
.works-lightbox .gallery-arrow.prev{left:0}.works-lightbox .gallery-arrow.next{right:0}
.works-lightbox .lightbox-info{display:grid;grid-template-columns:85px minmax(0,1fr) auto;align-items:baseline;gap:22px;border-top:1px solid #ffffff30;padding-top:20px}
.works-lightbox .lightbox-count{font-size:12px;letter-spacing:.1em;white-space:nowrap}
.works-lightbox #lightboxTitle{font:500 25px/1.5 var(--serif);color:#fffdf7}
.works-lightbox .lightbox-caption{font-size:14px;color:#f3c99e;margin-top:4px}
.works-lightbox .lightbox-note{font-size:10px;color:#c5bfb4;display:block;margin-top:5px}
.works-lightbox .lightbox-note:empty{display:none}
.works-lightbox .lightbox-hint{font-size:10px;color:#c5bfb4}
@media(hover:hover){
  #works .gallery-artwork:hover .gallery-artwork-inner{transform:scale(1.025)}
  #works .gallery-artwork:hover .gallery-view{opacity:1;transform:translate(-50%,0)}
  .gallery-arrow:hover{background:var(--orange);border-color:var(--orange);color:var(--paper)}
  .gallery-arrow.prev:hover svg{transform:translateX(-3px)}
  .gallery-arrow.next:hover svg{transform:translateX(3px)}
}
@media(max-width:1100px){
  #works .gallery-viewport{height:550px}
  #works .gallery-artwork{width:46%}
  #works .gallery-info{grid-template-columns:72px minmax(0,1fr) minmax(180px,.7fr);gap:20px}
  #works .gallery-likes{display:block}
  #works .gallery-likes strong{display:block;margin-top:6px}
}
@media(max-width:800px){
  #works .gallery-stage{padding-inline:50px}
  #works .gallery-viewport{height:500px}
  #works .gallery-artwork{width:54%}
  .works-lightbox .lightbox-hint{display:none}
}
@media(max-width:600px){
  #works .gallery-stage{padding-inline:0}
  #works .gallery-viewport{height:420px}
  #works .gallery-artwork{width:76%;height:calc(100% - 84px);top:calc(50% - 10px)}
  #works .gallery-arrow{top:auto;bottom:3px;width:44px;height:44px}
  #works .gallery-instruction{font-size:10px;margin:-33px 50px 29px;position:relative;pointer-events:none;height:22px}
  #works .gallery-info{grid-template-columns:1fr;gap:6px;padding:22px 0 15px;min-height:0}
  #works .gallery-count{padding-top:0;font-size:10px}
  #works .gallery-title{font-size:27px}
  #works .gallery-category{font-size:11px}
  #works .gallery-detail{text-align:left;padding-top:7px}
  #works .gallery-likes{display:flex;justify-content:flex-start;gap:10px}
  #works .gallery-likes strong{display:inline;margin:0;font-size:31px}
  #works .gallery-detail-label{display:none}
  #works .gallery-thumbs{gap:8px}
  #works .gallery-thumb{flex-basis:40px;width:40px;height:53px}
  #works .gallery-data-note{font-size:10px}
  #works .gallery-context{font-size:13px;margin-top:18px}
  .works-lightbox .lightbox-shell{padding:12px 16px 18px}
  .works-lightbox .lightbox-series{font-size:10px;max-width:65%}
  .works-lightbox .lightbox-close{padding-inline:12px;gap:12px}
  .works-lightbox .lightbox-stage{padding:12px 0 58px}
  .works-lightbox .gallery-arrow{top:auto;bottom:8px;width:44px;height:44px}
  .works-lightbox .lightbox-info{grid-template-columns:54px minmax(0,1fr);gap:12px;padding-top:15px}
  .works-lightbox #lightboxTitle{font-size:21px}
  .works-lightbox .lightbox-caption{font-size:12px}
  .works-lightbox .lightbox-count{font-size:10px}
}
/* About: a personal photograph alongside a grounded professional narrative. */
#about{border-top:1px solid var(--line);padding-top:clamp(32px,3vw,44px);padding-bottom:clamp(48px,5vw,72px)}
.about-statement{font:500 clamp(34px,4.3vw,62px)/1.55 var(--serif);margin-bottom:42px;letter-spacing:-.04em}
.about-statement span{color:var(--orange-ink)}
.about-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);gap:56px;align-items:start}
.about-portrait{position:sticky;top:calc(var(--header) + 30px);padding:24px;background:var(--peach-tint);border-radius:220px 220px 12px 12px}
.about-portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center;border-radius:200px 200px 6px 6px}
.about-portrait figcaption{text-align:center;font-size:11px}
.about-story p+p{margin-top:18px}
.about-strength{border-block:1px solid var(--line);padding:23px 0;margin:24px 0}
.about-strength p{font-size:14px;margin-bottom:12px}
.about-strength strong{display:block;font:500 24px/1.65 var(--serif);text-wrap:pretty}
.about-priorities{list-style:none;margin:18px 0;display:flex;flex-wrap:wrap;gap:8px}
.about-priorities li{font-size:14px;padding:6px 12px;background:var(--peach-tint)}
.about-tools{display:flex;flex-wrap:wrap;gap:22px;border-top:1px solid var(--line);padding-top:20px;margin-top:24px;font-size:14px}
.about-tools h4{font-size:14px}
.about-tools ul{display:flex;flex-wrap:wrap;gap:18px;list-style:none}
/* Peach conclusion: contact details remain readable and directly actionable. */
.contact-section{max-width:none;background:var(--peach);padding-block:clamp(48px,5vw,72px);padding-inline:max(var(--gutter),calc((100vw - var(--content))/2 + var(--gutter)))}
.contact-section .section-head{margin-bottom:36px}
.contact-section .section-head h2{font-size:36px}
.contact-section .section-head h2 em{font-size:32px}
.contact-card-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px 36px}
.contact-card-main{grid-column:1/-1}
.contact-card-title{font:500 22px/1.6 var(--serif);margin-bottom:14px}
.contact-card-sub{max-width:820px}
.contact-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.copy-status{font-size:13px;flex-basis:100%}
.btn-pdf{align-self:start}
.contact-highlights{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:40px;border-top:1px solid var(--line);padding-top:28px}
.contact-highlights h4{font-size:13px;margin-bottom:14px}
.contact-directions{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.contact-directions li{font-size:13px;border:1px solid var(--line);border-radius:var(--pill);padding:6px 12px}
.contact-track-record p{font-size:19px}
.contact-info{grid-column:1/-1;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;border-top:1px solid var(--line);padding-top:26px}
.ci-item{display:flex;flex-direction:column;gap:7px}
.ci-label{font-size:12px}
.ci-value{font-size:18px;overflow-wrap:anywhere}
.footer-bar{max-width:var(--content);padding:30px var(--gutter);margin:auto;display:flex;justify-content:space-between;align-items:center;gap:20px}
.footer-copy{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 25px}
.footer-copy strong{font:500 24px var(--editorial)}
.footer-copy span,.footer-copy small{font-size:11px;color:var(--ink-soft)}
.footer-top{background:transparent;border:0;min-height:44px;font-size:13px;white-space:nowrap}
/* One slow, soft motion language; visible by default if JavaScript is unavailable. */
.reveal{opacity:1;transform:none}
.reveal.motion-pending{opacity:0;transform:translateY(26px)}
.reveal.motion-pending.in{opacity:1;transform:none}
.reveal.motion-pending{transition:opacity var(--motion) var(--ease),transform var(--motion) var(--ease);transition-delay:var(--reveal-delay,0ms)}
.hero-left>*{animation:enter var(--motion) var(--ease) both}
.hero-left>:nth-child(2){animation-delay:80ms}.hero-left>:nth-child(3){animation-delay:160ms}.hero-left>:nth-child(4){animation-delay:240ms}.hero-left>:nth-child(5){animation-delay:320ms}.hero-left>:nth-child(6){animation-delay:400ms}
@keyframes enter{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@media(min-width:1600px){.hero{min-height:850px}}
@media(max-width:1150px){
  .nav-menu{gap:16px}.nav-menu a{font-size:12px}
  .hero{grid-template-columns:minmax(0,1fr) 220px;column-gap:35px}
  .hero-role-focus{display:block;margin-top:6px}.hero-role-divider{display:none}
  .hero-metrics{grid-template-columns:130px minmax(0,1fr)}
  .project-role-card{grid-template-columns:55px minmax(150px,.65fr) minmax(0,1.6fr);gap:22px}
  .coordination-case{grid-template-columns:50px minmax(0,1.2fr) minmax(0,.8fr);gap:20px}
  .coordination-label>b{font-size:56px}.coordination-block{grid-template-columns:1fr;gap:5px}
  .case-03{grid-template-columns:50px minmax(0,1fr)}
  .skill-card{grid-template-columns:65px minmax(180px,1fr) minmax(0,1.4fr)}
}
@media(max-width:950px){
  :root{--header:76px;--section-space:76px}
  .logo{position:static;transform:none;text-align:left}
  .logo>span{font-size:21px}.logo small{font-size:9px}
  .nav{justify-content:space-between;padding-block:12px}
  .nav-toggle{display:grid;place-items:center}
  .nav-menu{display:none}
  .nav-menu.open{display:flex;position:fixed;top:var(--header);left:0;right:0;height:calc(100dvh - var(--header));overflow:auto;flex-direction:column;align-items:stretch;gap:0;padding:24px var(--gutter) 50px;background:var(--cream)}
  .nav-menu li:nth-child(4){margin-left:0}
  .nav-menu a{display:flex;font:500 28px/1.6 var(--serif);padding:14px 0;border-bottom:1px solid var(--line)}
  .nav-menu .nav-cta{padding:12px 24px;margin-top:20px;justify-content:space-between}
  body.menu-open{overflow:hidden}
  .hero-metrics{grid-template-columns:1fr}
  .hero-cue{flex-direction:row;align-items:center;gap:20px}
  .hero-context{grid-template-columns:1fr;gap:20px}
  .selected-projects{gap:26px}
  .cover-money{padding-top:70px}
  .acc-item{grid-template-columns:1fr;gap:24px}
  .acc-main{max-width:75%}.acc-year{margin-left:auto;padding-right:35px}
  .experience-number{display:none}
  .project-intro-layout{gap:30px}
  .project-overview-stat{padding:0 12px}
  .project-tertiary-nav{gap:22px;overflow-x:auto}
  .project-tertiary-nav a{font-size:13px}
  .project-role-card{grid-template-columns:60px minmax(0,1fr)}
  .project-role-card h5{align-self:center}
  .role-body{grid-column:2}
  .coordination-case,.case-02,.case-03{grid-template-columns:55px minmax(0,1fr)}
  .case-02 .coordination-content{grid-column:2;grid-row:auto}
  .case-photo,.case-02 .case-photo,.case-03 .case-photo{grid-column:2;grid-row:auto}
  .case-photo img{aspect-ratio:3/2}
  .project-card{grid-template-columns:1fr;gap:26px}
  .project-scene-card .project-img img{aspect-ratio:16/9}
  .money-project-card{grid-template-columns:minmax(0,.7fr) minmax(0,1fr);padding:24px;gap:26px}
  .city-map-shell{grid-template-columns:1fr}
  .city-map-canvas{height:510px}
  .city-map-controls{right:18px}
  .city-map-detail{border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:.8fr 1fr;gap:12px 24px}
  .city-detail-photo{grid-column:1;grid-row:1/4}
  .city-map-detail h5{margin:0}.detail-kicker{margin:0}
  .detail-events{grid-column:2}
  .skill-card{grid-template-columns:60px minmax(0,1fr)}.skill-desc{grid-column:2}
  .about-layout{gap:30px;grid-template-columns:.65fr 1fr}
  .about-portrait{padding:14px}
  .contact-info{gap:20px}.ci-value{font-size:16px}
}
@media(max-width:600px){
  :root{--section-space:64px;--gutter:20px;--body-size:15px}
  .section-head{gap:14px;margin-bottom:30px}
  .section-head h2{font-size:38px;letter-spacing:-.045em}
  .section-head h2 em{display:block;margin:12px 0 0;font-size:30px}
  .section-subhead h2{font-size:27px}
  .hero{min-height:0;grid-template-columns:minmax(0,1fr);padding-top:110px;padding-bottom:30px;gap:30px}
  .hero::before{width:320px;right:0;top:110px;opacity:.42;animation:none}
  .hero-label{font-size:9px;letter-spacing:.1em;margin-bottom:20px}
  .hero-name{font-size:56px;letter-spacing:.03em}
  .hero-english{font-size:39px;margin:18px 0 22px}
  .hero-role{font-size:21px}.hero-role-focus{font-size:15px}
  .hero-intro{font-size:17px}.hero-intro span{font-size:14px}
  .hero-right{display:grid;grid-template-columns:100px minmax(0,1fr);gap:20px;align-items:center}
  .hero-index{grid-column:2;grid-row:1;margin:0;font-size:9px}
  .avatar-ring{grid-column:1;grid-row:1;border-radius:60px 60px 8px 8px}
  .hero-metrics{gap:18px;padding-top:20px}
  .hero-stats{grid-template-columns:1fr 1.25fr;gap:20px}
  .hero-stat strong{font-size:29px}.hero-stat span{font-size:12px}
  .hero-cue{font-size:9px}
  .hero-context{padding-top:34px;gap:18px}
  .hero-context>.eyebrow{font-size:10px}
  .pill{font-size:12px}
  .portfolio-ticker span{font-size:13px}.portfolio-ticker-track>div{gap:26px;padding-right:26px}
  #experience>.accordion:first-of-type .acc-item:first-child{padding:24px 18px}
  .acc-item{padding:26px 0;gap:22px}
  .acc-main{max-width:none}.acc-title{font-size:23px}
  .acc-year{margin-left:0;font-size:21px}
  .acc-sub{font-size:13px}
  .experience-metrics{gap:20px}.experience-metrics strong{font-size:28px}
  .selected-projects{grid-template-columns:1fr;gap:30px;margin-bottom:38px}
  .cover-money{padding-top:0}
  .cover-nailong .cover-image{aspect-ratio:4/3}
  .cover-money .cover-image{aspect-ratio:4/3}
  .cover-caption h3{font-size:27px}
  .cover-caption{padding:16px 0}
  .cover-caption>p:last-child{font-size:13px}
  .project-tabs,.works-tabs,.sub-tabs{gap:18px;margin-bottom:28px}
  .project-tab{font-size:14px;max-width:100%;line-height:1.8}
  .works-tab{font-size:14px}.sub-tab{font-size:13px}
  .project-kicker{font-size:11px}
  .project-overview h3{font-size:30px;line-height:1.5;margin-bottom:25px}
  .project-intro-layout{grid-template-columns:1fr;gap:25px}
  .project-role-aside ul{grid-template-columns:repeat(3,1fr);font-size:13px;margin-top:12px}
  .project-overview-stats{grid-template-columns:1fr 1fr;gap:24px 0;padding:24px 8px}
  .project-overview-stat:nth-child(even){border:0}
  .project-overview-stat:last-child{grid-column:1/-1}
  .project-overview-stat strong{font-size:34px}
  .project-tertiary-nav{margin-top:24px;gap:22px;padding-top:0}
  .project-tertiary-nav a{font-size:12px;min-height:48px;padding-block:13px}
  section.project-chapter{margin-top:40px}
  .project-chapter-heading{display:block;margin-bottom:24px}
  .project-chapter-no{display:block;font-size:11px;margin-bottom:10px}
  .project-chapter h4{font-size:28px}
  .project-role-gallery{grid-template-columns:1fr;gap:22px;margin-bottom:26px}
  .project-role-gallery figure:nth-child(2){padding-top:0}
  .project-role-card{grid-template-columns:42px minmax(0,1fr);gap:14px;padding:26px 0}
  .role-no{font-size:43px}.project-role-card h5{font-size:22px}
  .role-body{grid-column:1/-1}
  .role-body p{font-size:15px}
  .role-groups{grid-template-columns:1fr;gap:8px}
  .role-group{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:9px 0}
  .role-group b{margin:0}
  .role-callout{padding:12px 14px}
  .coordination-case,.case-02,.case-03{grid-template-columns:1fr;gap:18px;padding:24px 0}
  .case-02,.case-03{padding:24px 18px}
  .coordination-label{display:flex;align-items:center;gap:14px}
  .coordination-label>b{font-size:48px;order:-1}
  .coordination-label>span{font-size:10px}
  .coordination-case .coordination-content,.coordination-case .case-photo,.coordination-case .coordination-label{grid-column:1;grid-row:auto}
  .coordination-content h5{font-size:25px;line-height:1.5;margin-bottom:20px}
  .coordination-block,.case-03 .coordination-block{grid-template-columns:1fr;gap:8px}
  .coordination-block>span{font-size:12px;color:var(--orange-ink)}
  .case-photo img{aspect-ratio:4/3}
  .pc-head{flex-wrap:wrap}
  .project-name{font-size:27px}
  .coverage-display{gap:10px 24px}.coverage-display>span{font-size:44px}
  .city-map-canvas{height:390px}
  .city-map-detail{display:block;padding:22px}
  .city-detail-photo img{max-height:260px}
  .detail-kicker{margin:20px 0 8px}
  .city-map-detail h5{margin-bottom:18px;font-size:28px}
  .money-project-card{grid-template-columns:1fr;padding:20px;gap:24px}
  .money-project-card .project-img{position:static;max-width:320px;margin:auto}
  .money-project-card .project-name{font-size:27px}
  .money-project-subtitle{font-size:20px}
  .money-project-metric{gap:15px}
  .money-project-metric strong{font-size:46px}
  .money-project-metric span{font-size:12px}
  .money-project-section h4{font-size:23px}
  .skill-card{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:24px 0}
  .skill-number{font-size:40px}.skill-name{font-size:22px}
  .skill-desc{grid-column:1/-1}
  .about-statement{font-size:32px;line-height:1.6;margin-bottom:28px}
  .about-layout{grid-template-columns:1fr;gap:28px}
  .about-portrait{position:static;max-width:300px;margin:auto;padding:20px}
  .about-strength strong{font-size:23px}
  .contact-section .section-head h2{font-size:32px}
  .contact-section .section-head h2 em{font-size:28px}
  .contact-card-inner{grid-template-columns:1fr;gap:24px}
  .contact-card-title{font-size:21px}
  .btn-pdf{justify-self:start}
  .contact-highlights{grid-template-columns:1fr;gap:25px}
  .contact-info{grid-template-columns:1fr;gap:22px}
  .ci-item{flex-direction:row;gap:22px;align-items:baseline}
  .ci-label{min-width:32px}.ci-value{font-size:17px}
  .footer-bar{align-items:start}.footer-copy{max-width:70%;display:flex;flex-direction:column;gap:6px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal.motion-pending{opacity:1;transform:none}
}