/* Homepage layout layer. Loads after styles.css and overrides it; colors, fonts and the type scale come from styles.css tokens.
   Every size here is one of --t-xs .72rem · --t-sm .8rem · --t-base .9rem · --t-md 1rem · --t-lg 1.2rem · --t-xl 1.5rem · --t-2xl 2.25rem · --t-3xl hero. */
[hidden] { display:none !important; }
body::before { display:none; }
.mobile-break { display:none; }

/* Header */
.site-header { min-height:76px; background:color-mix(in srgb, var(--paper) 94%, transparent); }
.wordmark span { font-size:var(--t-xl); }
.wordmark small { font-size:var(--t-xs); }
.site-nav { gap:1.8rem; }
.site-nav a, .theme-toggle { font-family:var(--sans); font-size:var(--t-sm); letter-spacing:.01em; text-transform:none; }
.theme-toggle { min-height:44px; }
.header-tools { display:flex; align-items:center; justify-self:end; gap:1.4rem; }
.lang-toggle { display:flex; align-items:center; gap:.35rem; min-height:44px; padding:0; border:0; background:none; color:var(--muted); font-family:var(--sans); font-size:var(--t-sm); cursor:pointer; }
.lang-toggle span[lang] { padding-bottom:.1rem; border-bottom:2px solid transparent; }
.lang-toggle[data-active="en"] span[lang="en"], .lang-toggle[data-active="zh"] span[lang="zh-Hans"] { color:var(--ink); border-bottom-color:var(--signal); }
@media (hover:hover) { .lang-toggle:hover { color:var(--signal); } }

/* Shared type */
.eyebrow, .section-label, .item-meta, .profile-block span, .media-cue, .ways-row-footer > span, .ways-footnote, .modal-close, .modal-subtitle, .motion-card p, .site-footer--minimal small, .archive-disclosure__cue, .series-title, .index-row__kind { font-size:var(--t-xs); letter-spacing:.08em; }
.item-meta { display:block; margin:0; }
.button, .underlink, .item-links a, .text-link, .motion-link, .profile-links a, .site-footer--minimal a, .ways-footnote a { font-family:var(--sans); font-size:var(--t-sm); font-weight:500; letter-spacing:0; text-transform:none; }
.item-links a, .text-link, .motion-link { display:inline-flex; align-items:center; min-height:32px; }
.item-links { gap:.4rem 1.1rem; margin-top:.5rem; }
.button { min-height:46px; min-width:170px; padding:.75rem 1rem; }
.button span { color:var(--paper); }
.tags { display:flex; flex-wrap:wrap; gap:.35rem; margin:.7rem 0 0; padding:0; list-style:none; }
.tags li { padding:.22rem .5rem; border:1px solid var(--line); color:var(--muted); font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.02em; line-height:1.3; }

/* Sections */
.section, .section--visualizations, .section--photography { padding-top:4.5rem; scroll-margin-top:5.5rem; }
.section-heading { margin-bottom:1.6rem; padding-bottom:.8rem; }
.section-heading h2 { font-size:var(--t-2xl); letter-spacing:-.03em; line-height:1.1; margin-top:.35rem; }
.section-heading__note { max-width:26rem; font-size:var(--t-base); line-height:1.55; }

/* Hero */
.hero--portrait-home { --portrait-w:240px; grid-template-areas:"eyebrow portrait" "copy portrait" "profile profile"; grid-template-columns:minmax(0,1fr) var(--portrait-w); column-gap:4.5rem; row-gap:1.25rem; padding-top:3rem; padding-bottom:2.25rem; }
.hero--portrait-home .hero__portrait { align-self:center; }
.hero--portrait-home .portrait-slot { border:0; }
.hero--portrait-home .hero__copy { max-width:680px; }
.hero--portrait-home .hero__copy h1 { font-size:var(--t-3xl); line-height:1.02; letter-spacing:-.035em; white-space:normal; margin-bottom:1.2rem; }
.hero__intro { font-size:var(--t-md); line-height:1.65; max-width:37rem; }
.hero__availability { margin:1.1rem 0 0; color:var(--muted); font-size:var(--t-sm); }
.hero__links { margin-top:1.2rem; gap:1.6rem; }
.hero--portrait-home .hero__aside { padding-top:1.25rem; margin-top:.75rem; border-top:1px solid var(--line); }
.hero__profile { grid-template-columns:1.5fr 1.2fr 1fr var(--portrait-w); gap:1.6rem; align-items:start; }
.profile-block strong { font-size:var(--t-sm); line-height:1.5; text-wrap:balance; }
.profile-links { padding:0; border:0; gap:.4rem 1.2rem; align-self:start; }

/* Capabilities */
.capability-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--ink); }
.capability { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr) minmax(0,1.1fr); gap:1rem 2rem; align-items:baseline; padding:.95rem 0; border-bottom:1px solid var(--line); }
.capability h3 { margin:0; font-family:var(--serif); font-size:var(--t-lg); font-weight:400; letter-spacing:-.015em; line-height:1.25; }
.capability p { margin:0; color:var(--muted); font-size:var(--t-base); line-height:1.5; }
.capability__links { display:flex; flex-wrap:wrap; gap:.3rem .9rem; }
.capability__links a { color:var(--ink); font-size:var(--t-sm); font-weight:500; text-decoration:underline; text-decoration-color:var(--signal); text-underline-offset:.25rem; }
.capability__links a:hover { color:var(--signal); }

/* Selected work */
.work-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.2rem 1.4rem; }
.work-card { display:flex; flex-direction:column; min-width:0; scroll-margin-top:6rem; }
.work-card__media { position:relative; display:block; width:100%; aspect-ratio:16/9; margin:0 0 .8rem; padding:0; overflow:hidden; border:0; background:var(--paper-deep); cursor:pointer; }
.work-card__media img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.work-card__media:hover img { transform:scale(1.025); }
.work-card__media--triptych { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.25rem; background:#182220; }
.work-card__media--triptych img { min-width:0; }
.work-card h3 { margin:.4rem 0 0; font-family:var(--serif); font-size:var(--t-xl); font-weight:400; letter-spacing:-.025em; line-height:1.15; }
.work-card > p:not(.item-meta) { margin:.5rem 0 0; color:var(--muted); font-size:var(--t-base); line-height:1.55; }
.work-card .item-links { margin-top:auto; padding-top:.5rem; }

/* Archive */
.archive-block + .archive-block { margin-top:2.2rem; }
.archive-block__title { display:flex; align-items:baseline; gap:.6rem; margin:0 0 .2rem; padding-bottom:.5rem; border-bottom:1px solid var(--ink); font-family:var(--serif); font-size:var(--t-lg); font-weight:400; letter-spacing:-.015em; }
.archive-block__title span { color:var(--muted); font-family:var(--mono); font-size:var(--t-xs); }
.index-list { margin:0; padding:0; list-style:none; }
.index-row { display:grid; grid-template-columns:5.5rem minmax(0,1fr) auto; gap:.5rem 1.25rem; align-items:baseline; padding:.7rem 0; border-bottom:1px solid var(--line); scroll-margin-top:6rem; }
.index-row__kind { color:var(--muted); font-family:var(--mono); text-transform:uppercase; }
.index-row__main > a, .index-row__main > .text-link { min-height:0; color:var(--ink); font-family:var(--serif); font-size:var(--t-md); font-weight:400; letter-spacing:-.01em; line-height:1.3; text-decoration:none; text-align:left; }
.index-row__main > a:hover, .index-row__main > .text-link:hover { color:var(--signal); text-decoration:underline; text-decoration-color:var(--signal); text-underline-offset:.25rem; }
.index-row__main small { display:block; margin-top:.15rem; color:var(--muted); font-size:var(--t-sm); line-height:1.5; }
.index-row__main small a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--signal); text-underline-offset:.2rem; }
.index-row__links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.2rem .9rem; white-space:nowrap; }
.index-row__links a, .index-row__links .text-link { min-height:0; }
.index-list--thumbs .index-row { grid-template-columns:5.5rem minmax(0,1fr) auto; align-items:center; }
.index-row__thumb { display:block; width:5.5rem; aspect-ratio:16/10; padding:0; overflow:hidden; border:0; background:var(--paper-deep); cursor:pointer; }
.index-row__thumb img { display:block; width:100%; height:100%; object-fit:cover; }

/* Ways of looking (visual archive disclosure) */
.archive-disclosure { margin-top:2.2rem; border-top:1px solid var(--ink); border-bottom:1px solid var(--line); scroll-margin-top:6rem; }
.archive-disclosure > summary { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0; cursor:pointer; list-style:none; }
.archive-disclosure > summary::-webkit-details-marker { display:none; }
.archive-disclosure summary .section-label { display:block; margin-bottom:.3rem; }
.archive-disclosure summary strong { font-family:var(--serif); font-size:var(--t-xl); line-height:1.15; font-weight:400; letter-spacing:-.02em; }
.archive-disclosure__cue { color:var(--muted); }
.archive-disclosure__cue b { display:inline-block; margin-left:.8rem; color:var(--signal); font-size:var(--t-xl); font-weight:400; }
.archive-disclosure[open] .archive-disclosure__cue b { transform:rotate(45deg); }
.archive-disclosure__content { padding:.75rem 0 1.5rem; }
.series-title { font-family:var(--mono); font-weight:500; color:var(--muted); margin:1rem 0 .6rem; text-transform:uppercase; }
.ways-image-group + .ways-image-group { margin-top:2rem; }
.blender-series-heading { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:.8rem; }
.blender-series-heading .series-title { flex:0 0 auto; margin-bottom:0; }
.blender-series-heading p { max-width:34rem; margin:0; color:var(--muted); font-size:var(--t-sm); line-height:1.5; }
.blender-method { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin:0 0 1.2rem; padding:0; list-style:none; }
.blender-method li { padding-top:.5rem; border-top:1px solid var(--line); color:var(--muted); font-size:var(--t-sm); line-height:1.5; }
.blender-method span { display:block; color:var(--signal); font-family:var(--mono); font-size:var(--t-xs); }
.blender-method strong { display:block; margin:.15rem 0 .1rem; color:var(--ink); font-family:var(--serif); font-size:var(--t-md); font-weight:400; }
.blender-map-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1.4rem .7rem; align-items:start; }
.blender-map { min-width:0; margin:0; }
.blender-map--china { grid-column:span 7; }
.blender-map--strait { grid-column:span 5; }
.blender-map--shengsi { grid-column:span 8; }
.blender-map--leizhou { grid-column:span 4; }
.blender-map a { display:block; background:var(--paper-deep); overflow:hidden; }
.blender-map img { display:block; width:100%; height:auto; transition:transform .45s ease; }
.blender-map a:hover img { transform:scale(1.012); }
.blender-map figcaption { display:flex; justify-content:space-between; gap:1rem; margin-top:.5rem; padding-top:.4rem; border-top:1px solid var(--line); }
.blender-map figcaption strong { font-family:var(--serif); font-size:var(--t-md); font-weight:400; }
.blender-map figcaption span { color:var(--muted); font-size:var(--t-xs); line-height:1.4; text-align:right; }
.ways-gallery__item span, .city-contact-sheet span { font-size:var(--t-xs); }
.city-motion-index > div > p:not(.item-meta) { font-size:var(--t-sm); }

/* Photography */
.photography-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:.6rem; }
.city-photo-card { height:190px; }
.city-photo-card span { font-size:var(--t-lg); bottom:1.5rem; }
.city-photo-card small { font-size:var(--t-xs); bottom:.7rem; }
.photography-more { display:flex; flex-wrap:wrap; align-items:center; gap:.2rem 1.1rem; margin:.7rem 0 0; }
.photography-more > span { color:var(--muted); font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase; }

/* Footer, modals */
.site-footer--minimal { margin-top:3.5rem; }
.modal-close { min-height:44px; }
/* English preview modal: one reading column, figure on top, title only in the header. */
.translation-modal { width:min(calc(100% - 2rem), 860px); padding:1.5rem clamp(1.25rem,4vw,3rem) 2rem; }
.translation-modal .modal-header { align-items:start; margin-bottom:1.4rem; }
.translation-modal .modal-header h2 { max-width:30ch; font-size:var(--t-2xl); letter-spacing:-.03em; line-height:1.1; }
.translation-modal .modal-subtitle { font-family:var(--sans); font-size:var(--t-sm); letter-spacing:0; text-transform:none; }
.translation-layout { grid-template-columns:1fr; gap:1.4rem; }
.translation-figure img { width:100%; max-height:52vh; object-fit:contain; background:var(--paper-deep); }
.translation-figure figcaption { font-size:var(--t-sm); }
.translation-copy { max-width:none; }
.translation-copy h3 { display:none; }
.translation-tags { gap:.35rem .5rem; margin-bottom:1.4rem; }
.translation-tags span { width:auto; margin-right:.4rem; color:var(--muted); font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.08em; }
.translation-tags b { padding:.22rem .5rem; color:var(--muted); font-family:var(--mono); font-size:var(--t-xs); font-weight:500; letter-spacing:.02em; }
.translation-copy h4 { margin:1.2rem 0 .3rem; color:var(--muted); font-family:var(--mono); font-size:var(--t-xs); font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.translation-copy h4:first-of-type { margin-top:0; }
.translation-copy p { max-width:62ch; margin:0; color:var(--ink); font-size:var(--t-md); line-height:1.65; }
.translation-copy h4:last-of-type + p { padding-left:.9rem; border-left:2px solid var(--signal); }
.translation-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line); }
/* Video modal: a single vertical video sits beside its note instead of above it. */
.video-group__intro > p:not(.item-meta) { font-size:var(--t-base); }
.video-modal--single { width:min(calc(100% - 2rem), 1000px); }
.video-group--single { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:2rem 3rem; align-items:center; }
.video-group--single .video-group__intro { order:2; margin:0; }
.video-group--single .motion-grid { order:1; grid-template-columns:1fr; }
.video-group--single .motion-card video { width:auto; max-width:100%; height:min(72vh, 900px); margin:0 auto; }
.video-group--single .motion-card { border-top:0; }
.video-group--single .motion-card p { text-align:center; }
.motion-card video { max-height:70vh; }
/* landscape films: 16:9 video on top, intro below */
.video-group--wide { display:grid; grid-template-columns:1fr; gap:1.1rem; }
.video-group--wide .motion-grid { grid-template-columns:1fr; }
.video-group--wide .motion-card { border-top:0; }
.video-group--wide .motion-card video { aspect-ratio:16 / 9; width:min(100%, calc(70vh * 16 / 9)); height:auto; margin:0 auto; }
.video-group--wide .video-group__intro { max-width:46rem; margin:0; }
body.theme-dark .hero--portrait-home .portrait-slot img { filter:brightness(.88); }
#top { scroll-margin-top:90px; }

@media (max-width:1050px) {
 .hero--portrait-home { grid-template-columns:minmax(0,1fr) 210px; column-gap:2.5rem; row-gap:1rem; }
 .hero--portrait-home .hero__portrait, .hero--portrait-home .hero__aside { width:100%; }
 .hero__profile { grid-template-columns:1fr 1fr; }
 .work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .capability { grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); }
 .capability__links { grid-column:1 / -1; }
 .photography-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:820px) {
 .site-header, .layout-wide { width:calc(100% - 2.5rem); }
 .site-header { grid-template-columns:1fr auto; padding-top:.9rem; row-gap:.5rem; }
 .site-nav { display:flex; justify-content:space-between; grid-row:2; grid-column:1/-1; gap:.7rem; width:100%; padding:.4rem 0 .75rem; }
 .site-nav a { min-height:32px; display:flex; align-items:center; }
 .header-tools { grid-column:2; grid-row:1; gap:1rem; }
 .hero--portrait-home { padding-top:2.5rem; grid-template-columns:minmax(0,1fr) 170px; column-gap:1.5rem; }
 .hero--portrait-home > .eyebrow { white-space:normal; }
 .section, .section--visualizations, .section--photography { padding-top:3.5rem; scroll-margin-top:8rem; }
 .section-heading__note { max-width:34rem; }
 .blender-series-heading { align-items:start; flex-direction:column; gap:.65rem; }
 .index-row { grid-template-columns:minmax(0,1fr); gap:.3rem; }
 .index-row__kind { order:-1; }
 .index-row__links { justify-content:flex-start; white-space:normal; }
 .index-list--thumbs .index-row { grid-template-columns:4.5rem minmax(0,1fr); align-items:start; }
 .index-list--thumbs .index-row__links { grid-column:2; }
 .index-row__thumb { width:4.5rem; }
 .site-footer--minimal { display:flex; flex-wrap:wrap; }
 .video-group--single { grid-template-columns:1fr; }
 .video-group--single .video-group__intro { order:1; }
 .video-group--single .motion-grid { order:2; }
 .video-group--single .motion-card video { height:auto; width:100%; max-height:70vh; }
 #top { scroll-margin-top:130px; }
}
@media (max-width:600px) {
 .mobile-break { display:inline; }
 .hero--portrait-home { grid-template-areas:"eyebrow portrait" "copy copy" "profile profile"; grid-template-columns:minmax(0,1fr) 92px; row-gap:1.5rem; }
 .hero--portrait-home .hero__portrait { width:92px; }
 .hero--portrait-home > .eyebrow { align-self:center; line-height:1.8; }
 .hero--portrait-home .hero__copy h1 { font-size:2.9rem; }
 .hero__profile { gap:1.1rem; }
 .profile-links { grid-column:1/-1; }
 .hero__links { gap:1.2rem; }
 .site-nav a { font-size:var(--t-xs); }
 .section-heading { gap:.85rem; }
 .capability { grid-template-columns:1fr; gap:.35rem; }
 .work-grid { grid-template-columns:1fr; gap:2rem; }
 .archive-disclosure > summary { align-items:start; flex-direction:column; }
 .blender-method { grid-template-columns:1fr 1fr; }
 .blender-map-grid { grid-template-columns:1fr; gap:1.6rem; }
 .blender-map--china, .blender-map--strait, .blender-map--shengsi, .blender-map--leizhou { grid-column:auto; }
 .blender-map figcaption { align-items:start; flex-direction:column; gap:.2rem; }
 .blender-map figcaption span { text-align:left; }
 .photography-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .city-photo-card { height:150px; }
 .translation-modal .modal-header h2 { font-size:var(--t-xl); }
 .translation-modal { padding-top:1.1rem; }
}
/* Map plates: condensed map-title display type, a double neatline, and an off-register second plate. */
.hero--portrait-home .hero__copy h1, .section-heading h2, .modal-header h2, .site-footer h2 { font-stretch:68%; font-weight:700; letter-spacing:.005em; line-height:.94; text-transform:uppercase; }
.hero h1 em, .section-heading h2 em { color:var(--signal); font-style:normal; text-shadow:-3px 2px 0 var(--plate); }
.capability h3, .work-card h3, .research-card h3, .visual-project h3, .video-group__intro h3, .translation-copy h3, .archive-block__title, .index-row__main > a, .index-row__main > .text-link, .archive-disclosure summary strong, .blender-method strong, .blender-map figcaption strong { font-stretch:85%; font-weight:600; letter-spacing:0; }
.wordmark span { font-stretch:125%; font-weight:800; letter-spacing:.04em; }
.site-header { border-bottom:3px double var(--ink); }
.underlink, .item-links a, .text-link, .profile-links a, .motion-link, .capability__links a, .index-row__main small a, .index-row__links a, .ways-footnote a { text-decoration-color:var(--plate); text-decoration-thickness:3px; }