:root {
  --paper: #f3f0e8;
  --ink: #1c1b18;
  --muted: #77736c;
  --line: rgba(28, 27, 24, 0.22);
  --soft-line: rgba(28, 27, 24, 0.1);
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Noto Sans TC", "Noto Sans CJK TC", sans-serif;
  --serif: "Noto Serif TC", "Noto Serif CJK TC", "Songti TC", "PMingLiU", serif;
  --content: 1460px;
  --gutter: clamp(20px, 4vw, 64px);
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.5; letter-spacing: 0.005em; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
img, video { max-width: 100%; }

.site-shell { width: min(100%, var(--content)); margin: 0 auto; padding: 0 var(--gutter); }
.site-header { min-height: 112px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 18px; align-items: end; padding: 30px 0 22px; border-bottom: 1px solid var(--line); }
.brand { grid-column: 1 / span 3; display: flex; align-items: baseline; gap: 18px; }
.brand-cn { font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 2.2vw, 32px); letter-spacing: 0.08em; }
.brand-meta { font-size: 11px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.nav { grid-column: 6 / span 3; display: flex; justify-content: flex-end; gap: clamp(18px, 3vw, 46px); font-size: 14px; }
.nav a { position: relative; padding-bottom: 5px; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; }

.home-hero { min-height: min(78vh, 830px); display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: auto 1fr auto; gap: 18px; padding: 28px 0 36px; border-bottom: 1px solid var(--line); overflow: hidden; }
.home-hero__meta { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .18em; color: var(--muted); }
.home-hero h1 { grid-column: 1 / span 7; align-self: center; margin: 0 0 0 -0.06em; display: flex; font-family: var(--serif); font-weight: 700; font-size: clamp(78px, 13vw, 210px); line-height: .82; letter-spacing: -0.055em; white-space: nowrap; }
.home-hero h1 span:nth-child(3) { transform: translateY(0.08em); }
.home-hero h1 span:nth-child(4) { transform: translateY(-0.04em); }
.home-hero__foot { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 18px; align-items: end; }
.home-hero__foot > p:first-child { grid-column: 1 / span 4; margin: 0; color: var(--muted); font-size: clamp(16px, 1.7vw, 23px); }
.editorial-line { grid-column: 6 / span 3; margin: 0; font-family: var(--serif); font-size: clamp(17px, 1.7vw, 24px); line-height: 1.7; }

.selected-works { padding: 0 0 34px; }
.section-heading { display: grid; grid-template-columns: repeat(8, 1fr); gap: 18px; padding: 44px 0 28px; border-bottom: 1px solid var(--line); }
.section-heading > div { grid-column: 1 / span 4; display: flex; gap: 20px; align-items: baseline; }
.section-heading span, .section-heading a, .section-code { font-size: 11px; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.section-heading h2 { margin: 0; font-family: var(--serif); font-size: clamp(26px, 3vw, 42px); font-weight: 600; }
.section-heading a { grid-column: 7 / span 2; justify-self: end; align-self: end; color: var(--ink); }

.project-row { --project-accent: #777; display: grid; grid-template-columns: repeat(8, 1fr); gap: 18px; padding: 42px 0 56px; border-bottom: 1px solid var(--line); }
.project-row__media { grid-column: 1 / span 5; }
.project-row__copy { grid-column: 6 / span 3; display: flex; flex-direction: column; min-height: 100%; }
.project-row--reverse .project-row__media { grid-column: 4 / span 5; order: 2; }
.project-row--reverse .project-row__copy { grid-column: 1 / span 3; order: 1; }
.media-frame { aspect-ratio: 16/10; overflow: hidden; background: rgba(255,255,255,.2); border: 1px solid var(--soft-line); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-placeholder { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; align-items: end; padding: clamp(22px, 3vw, 42px); position: relative; background: linear-gradient(135deg, color-mix(in srgb, var(--project-accent) 10%, var(--paper)), var(--paper) 74%); }
.media-placeholder::after { content: ""; position: absolute; inset: 9% 7%; border-top: 1px solid color-mix(in srgb, var(--project-accent) 55%, transparent); transform: rotate(-2.2deg); transform-origin: left center; opacity: .55; }
.media-placeholder strong { grid-column: 1 / -1; align-self: center; font-family: var(--serif); font-size: clamp(34px, 5vw, 76px); line-height: .95; font-weight: 600; max-width: 86%; z-index: 1; }
.media-placeholder small { font-size: 10px; letter-spacing: .16em; color: var(--muted); z-index: 1; }
.placeholder-index { align-self: start; justify-self: end; font-family: var(--serif); font-size: clamp(54px, 7vw, 100px); line-height: .8; color: color-mix(in srgb, var(--project-accent) 34%, transparent); }
.project-meta { display: flex; justify-content: space-between; gap: 18px; padding-top: 2px; font-size: 10px; letter-spacing: .11em; color: var(--muted); text-transform: uppercase; }
.project-row h3 { margin: auto 0 12px; font-family: var(--serif); font-size: clamp(31px, 3.35vw, 52px); line-height: 1.04; font-weight: 600; letter-spacing: -.02em; }
.project-row--ocean-memory h3 { font-size: clamp(32px, 3.5vw, 54px); }
.project-row--before-meeting-the-waves h3 { font-size: clamp(32px, 3.6vw, 56px); }
.project-row--ai-human h3 { font-size: clamp(30px, 3.25vw, 50px); }
.project-row--applied-works h3 { font-size: clamp(28px, 3vw, 46px); }
.project-subtitle { margin: 0 0 24px; font-size: 18px; color: var(--muted); }
.project-summary { margin: 0 0 30px; max-width: 36em; color: var(--muted); font-size: 16px; line-height: 1.75; }
.project-link { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .14em; }

.index-head { min-height: 58vh; display: grid; grid-template-columns: repeat(8,1fr); gap:18px; padding: 42px 0 48px; border-bottom: 1px solid var(--line); overflow:hidden; }
.index-head > p { grid-column:1/span 2; margin:0; font-size:11px; letter-spacing:.15em; color:var(--muted); }
.index-head h1 { grid-column:1/span 6; align-self:center; margin:0 0 0 -.04em; font-family:var(--serif); font-size:clamp(70px,11vw,168px); line-height:.82; font-weight:600; letter-spacing:-.055em; }
.index-head__note { grid-column:6/span 3; align-self:end; font-family:var(--serif); font-size:20px; }
.project-list--index { padding-bottom: 20px; }

.about-grid { min-height: 74vh; display:grid; grid-template-columns:repeat(8,1fr); gap:18px; padding:42px 0 60px; }
.about-grid > .section-code { grid-column:1/span 2; margin:0; }
.about-grid h1 { grid-column:1/span 5; margin:55px 0 0 -.04em; font-family:var(--serif); font-size:clamp(72px,10vw,150px); line-height:.84; font-weight:600; }
.about-copy { grid-column:4/span 4; margin-top:40px; font-size:20px; line-height:1.8; }
.placeholder-copy { margin-top:42px; padding-top:16px; border-top:1px solid var(--line); font-size:11px; letter-spacing:.14em; color:var(--muted); }
.about-grid aside { grid-column:8; grid-row:1/span 3; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; writing-mode:vertical-rl; font-size:10px; letter-spacing:.15em; color:var(--muted); }

.chapter-opener { --project-accent:#777; min-height: 86vh; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:auto auto auto 1fr auto; gap:18px; padding:34px 0 46px; border-bottom:1px solid var(--line); overflow:hidden; }
.chapter-opener__meta { grid-column:1/-1; display:grid; grid-template-columns:repeat(8,1fr); gap:18px; font-size:10px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; }
.chapter-opener__meta span:nth-child(2){grid-column:2/span 3}.chapter-opener__meta span:nth-child(3){grid-column:7/span 2;text-align:right}
.chapter-opener h1 { grid-column:1/span 8; margin:35px 0 0 -.04em; font-family:var(--serif); font-size:clamp(62px,8.5vw,130px); line-height:.84; letter-spacing:-.045em; font-weight:600; position:relative; z-index:2; }
.project-ocean-memory .chapter-opener { min-height: 76vh; }
.project-ocean-memory .chapter-opener h1 { font-size:clamp(62px,7.8vw,118px); }
.project-before-meeting-the-waves .chapter-opener h1 { font-size:clamp(64px,9.2vw,142px); }
.project-ai-human .chapter-opener h1 { font-size:clamp(60px,8.1vw,124px); }
.project-applied-works .chapter-opener h1 { font-size:clamp(54px,6.9vw,106px); }
.chapter-subtitle { grid-column:1/span 4; margin:20px 0 0; font-size:clamp(21px,2.35vw,34px); font-family:var(--serif); }
.chapter-summary { grid-column:6/span 3; margin:18px 0 0; align-self:end; color:var(--muted); font-size:16px; line-height:1.75; }
.chapter-opener__media { grid-column:2/span 6; margin-top:28px; position:relative; }
.media-frame--detail { aspect-ratio:16/7; }
.chapter-opener__media .media-placeholder strong { font-size:clamp(44px,7vw,100px); }
.chapter-rail { grid-column:1/-1; margin:10px 0 0; padding:18px 0 0; border-top:1px solid var(--line); list-style:none; display:flex; flex-wrap:wrap; gap:10px 28px; }
.chapter-rail li { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.chapter-rail li span { margin-right:8px; color:var(--ink); }

.research-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:18px; padding:70px 0; border-bottom:1px solid var(--line); }
.research-grid__intro { grid-column:1/span 3; }
.research-grid h2,.film-layout h2,.ai-statement h2,.archive-head h2 { margin:18px 0 28px; font-family:var(--serif); font-size:clamp(34px,4.1vw,60px); line-height:1.08; font-weight:600; }
.body-copy { color:var(--muted); font-size:17px; line-height:1.8; }
.system-map { grid-column:5/span 4; display:grid; gap:18px; align-content:center; }
.system-node { border:1px solid var(--line); padding:24px; font-family:var(--serif); font-size:23px; text-align:center; background:rgba(255,255,255,.15); }
.system-node small { display:block; margin-top:7px; font-family:var(--sans); font-size:9px; letter-spacing:.13em; color:var(--muted); }
.system-branches { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.system-node--root { background:color-mix(in srgb, var(--project-accent) 14%, var(--paper)); transform:translateX(-3%); }
.system-node--analysis { transform:translateX(3%); }
.evidence-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-bottom:1px solid var(--line); }
.evidence-grid article { background:var(--paper); padding:38px; min-height:250px; }
.evidence-grid article > span { font-family:var(--serif); font-size:42px; color:var(--project-accent); opacity:.7; }
.evidence-grid h3 { margin:44px 0 12px; font-family:var(--serif); font-size:26px; }
.evidence-grid p { margin:0; color:var(--muted); font-size:12px; letter-spacing:.06em; }

.film-layout { padding:70px 0 50px; display:grid; grid-template-columns:repeat(8,1fr); gap:18px; }
.film-layout__lead { grid-column:1/span 3; }
.film-video,.film-frame--wide { grid-column:4/span 5; width:100%; aspect-ratio:16/9; }
.film-frame { border:1px solid var(--line); background:#e8e4da; display:grid; place-items:center; min-height:220px; overflow:hidden; }
.film-frame span { font-size:10px; letter-spacing:.14em; color:var(--muted); }
.film-frame--wide { min-height:0; }
.film-strip { grid-column:1/-1; display:grid; grid-template-columns:2fr 1fr 2fr; gap:18px; margin-top:28px; }
.film-strip .film-frame:nth-child(2) { transform:translateY(26px); }

.ai-layout { padding:70px 0 50px; }
.ai-statement { display:grid; grid-template-columns:repeat(8,1fr); gap:18px; align-items:end; }
.ai-statement .section-code { grid-column:1/span 2; }
.ai-statement h2 { grid-column:3/span 6; margin-top:0; font-size:clamp(40px,5.4vw,80px); }
.triptych { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:55px; }
.triptych-panel { position:relative; }
.triptych-panel > span { position:absolute; right:8px; top:-43px; font-family:var(--serif); font-size:80px; line-height:1; color:var(--project-accent); opacity:.35; }
.triptych-image { aspect-ratio:3/4; display:grid; place-items:center; border:1px solid var(--line); font-size:10px; letter-spacing:.14em; color:var(--muted); background:rgba(255,255,255,.13); }
.triptych-panel--2 { transform:translateY(54px); }
.triptych-panel--3 .triptych-image { border-color:color-mix(in srgb, var(--project-accent2) 50%, var(--line)); }
.triptych h3 { margin:14px 0 0; font-family:var(--serif); font-size:25px; }
.ai-note { max-width:760px; margin:100px 0 10px auto; font-family:var(--serif); font-size:22px; line-height:1.7; }

.archive-layout { padding:70px 0 50px; display:grid; grid-template-columns:repeat(8,1fr); gap:18px; }
.archive-head { grid-column:1/span 3; }
.archive-grid { grid-column:4/span 5; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.archive-grid article { border-top:1px solid var(--line); padding-top:9px; }
.archive-thumb { aspect-ratio:1/1; display:grid; place-items:center; background:rgba(255,255,255,.14); border:1px solid var(--soft-line); font-size:10px; letter-spacing:.12em; color:var(--muted); }
.archive-grid p { margin:9px 0 0; font-size:11px; color:var(--muted); }

.recovery-note { margin:48px 0 0; padding:16px 0 42px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:30px; font-size:10px; letter-spacing:.09em; color:var(--muted); }
.recovery-note strong { color:var(--ink); }
.site-footer { min-height:170px; display:grid; grid-template-columns:repeat(8,1fr); gap:18px; align-items:end; padding:50px 0 34px; border-top:1px solid var(--line); font-size:10px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; }
.site-footer span:last-child { grid-column:7/span 2; text-align:right; }

@media (max-width: 900px) {
  .site-header { grid-template-columns:1fr auto; min-height:88px; }
  .brand { grid-column:1; }.brand-meta{display:none}.nav{grid-column:2;}
  .home-hero { min-height:68vh; grid-template-columns:repeat(4,1fr); }
  .home-hero h1 { grid-column:1/-1; font-size:clamp(68px,20vw,145px); white-space:normal; flex-wrap:wrap; max-width:4em; }
  .home-hero__foot { grid-column:1/-1; grid-template-columns:repeat(4,1fr); }
  .home-hero__foot > p:first-child { grid-column:1/span 2; }.editorial-line{grid-column:3/span 2;}
  .section-heading,.project-row,.index-head,.about-grid,.chapter-opener,.research-grid,.film-layout,.ai-statement,.archive-layout { grid-template-columns:repeat(4,1fr); }
  .section-heading>div{grid-column:1/span 3}.section-heading a{grid-column:4}
  .project-row__media,.project-row--reverse .project-row__media{grid-column:1/-1;order:1}.project-row__copy,.project-row--reverse .project-row__copy{grid-column:1/-1;order:2;min-height:auto}.project-row h3{margin-top:54px}.project-summary{max-width:48em}
  .index-head h1{grid-column:1/-1}.index-head__note{grid-column:3/span 2}
  .about-grid h1{grid-column:1/-1}.about-copy{grid-column:2/span 3}.about-grid aside{display:none}
  .chapter-opener h1{grid-column:1/-1}.chapter-summary{grid-column:3/span 2}.chapter-opener__media{grid-column:1/-1}.chapter-opener__meta{grid-template-columns:repeat(4,1fr)}.chapter-opener__meta span:nth-child(2){grid-column:2/span 2}.chapter-opener__meta span:nth-child(3){grid-column:4}
  .research-grid__intro{grid-column:1/span 2}.system-map{grid-column:3/span 2}.evidence-grid{grid-template-columns:1fr 1fr}
  .film-layout__lead{grid-column:1/span 2}.film-video,.film-frame--wide{grid-column:3/span 2}.archive-head{grid-column:1/span 2}.archive-grid{grid-column:3/span 2;grid-template-columns:1fr 1fr}
  .ai-statement .section-code{grid-column:1}.ai-statement h2{grid-column:2/span 3}
}

@media (max-width: 620px) {
  :root { --gutter:20px; }
  .site-header { display:flex; min-height:80px; align-items:center; justify-content:space-between; }
  .brand-cn{font-size:20px}.nav{gap:18px;font-size:13px}
  .home-hero { min-height:590px; padding-top:20px; }.home-hero h1{font-size:23vw;line-height:.88}.home-hero__foot{display:block}.home-hero__foot>p:first-child{margin-bottom:28px}.editorial-line{font-size:16px}
  .section-heading { display:flex; justify-content:space-between; }.section-heading>div{display:block}.section-heading span{display:block;margin-bottom:7px}
  .media-frame { aspect-ratio:4/3; }.project-row{padding:30px 0 42px}.project-row h3{margin-top:36px;font-size:34px}.project-row--ocean-memory h3{font-size:36px}.project-row--before-meeting-the-waves h3{font-size:36px}.project-row--ai-human h3{font-size:34px}.project-row--applied-works h3{font-size:32px}.project-summary{font-size:15px}
  .index-head{min-height:460px}.index-head h1{font-size:21vw}.index-head__note{grid-column:2/span 3}
  .about-grid{display:block;min-height:620px}.about-grid h1{margin-top:60px;font-size:24vw}.about-copy{margin-top:70px;font-size:17px}
  .chapter-opener{display:block;min-height:auto;padding-bottom:34px}.chapter-opener__meta{display:flex;justify-content:space-between}.chapter-opener h1{font-size:14vw;margin-top:72px;line-height:.9}.project-ocean-memory .chapter-opener h1{font-size:13vw}.project-before-meeting-the-waves .chapter-opener h1{font-size:15vw}.project-ai-human .chapter-opener h1{font-size:14vw}.project-applied-works .chapter-opener h1{font-size:12.5vw}.chapter-subtitle{font-size:23px}.chapter-summary{margin-top:34px}.chapter-opener__media{margin-top:34px}.media-frame--detail{aspect-ratio:4/3}.chapter-rail{margin-top:30px}
  .research-grid,.film-layout,.archive-layout{display:block;padding:50px 0}.system-map{margin-top:46px}.system-branches{grid-template-columns:1fr}.evidence-grid{grid-template-columns:1fr}.evidence-grid article{min-height:210px}
  .film-frame--wide{margin-top:38px}.film-strip{grid-template-columns:1fr;margin-top:18px}.film-strip .film-frame:nth-child(2){transform:none}
  .ai-layout{padding:50px 0}.ai-statement{display:block}.ai-statement h2{margin-top:26px;font-size:40px}.triptych{grid-template-columns:1fr;margin-top:70px;gap:68px}.triptych-panel--2{transform:none}.ai-note{margin-top:70px;font-size:18px}
  .archive-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:44px}.archive-head h2{font-size:38px}
  .recovery-note{display:block}.recovery-note span{display:block;margin-top:8px;line-height:1.7}.site-footer{display:flex;justify-content:space-between;min-height:140px}.site-footer span:last-child{text-align:right}
}