/* 01. Design tokens */
:root {
  color-scheme: light;
  --paper:#f7f6f2; --paper-strong:#eeede7; --ink:#202522; --body:#414943;
  --muted:#626b64; --faint:#788079; --line:#d9ded7; --accent:#315c57;
  --accent-on-dark:#93bdb2; --accent-soft:#dce6e1; --surface:#fbfaf6;
  --font-sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --weight-regular:400; --weight-medium:520; --weight-semibold:620;
  --type-display:clamp(2.5rem,1.97rem + 2.27vw,4rem);
  --type-title:clamp(1.875rem,1.41rem + 2vw,3.25rem);
  --type-heading-1:clamp(1.5rem,1.16rem + 1.22vw,2.25rem);
  --type-heading-2:clamp(1.375rem,1.16rem + .82vw,1.875rem);
  --type-heading-3:clamp(1.125rem,1.04rem + .32vw,1.375rem);
  --type-lead:clamp(1.0625rem,1.01rem + .24vw,1.1875rem);
  --type-body:1rem;
  --type-small:.875rem;
  --type-context-label:.8125rem;
  --type-section-label:clamp(1rem,.94rem + .2vw,1.125rem);
  --type-label:.75rem;
  --type-title-en:clamp(1.0625rem,.94rem + .56vw,1.5rem);
  --type-heading-en:clamp(1rem,.94rem + .2vw,1.125rem);
  --type-translation-body:.875rem;
  --type-caption:.8125rem;
  --type-micro:.75rem;
  --type-fine:.6875rem;
  --leading-display:1.08; --leading-title:1.18; --leading-heading:1.32;
  --leading-lead:1.65; --leading-body:1.75; --leading-translation:1.6;
  --tracking-display:-.035em; --tracking-title:-.024em; --tracking-heading:-.012em; --tracking-label:.04em;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:2.5rem; --space-8:3rem;
  --space-9:4rem; --space-10:6rem; --space-11:8rem;
  --content-max:72rem; --reading-max:42rem; --gutter:3rem;
  --section-space:5rem; --section-space-compact:3.5rem; --card-space:5.5rem; --radius:.625rem;
  --header-height:4.5rem; --anchor-offset:calc(var(--header-height) + 6rem);
}
/* 02. Theme tokens */
:root[data-theme="dark"] {
  color-scheme:dark; --paper:#151816; --paper-strong:#1e2420; --ink:#f0f3ed;
  --body:#d4ddd4; --muted:#aab7ae; --faint:#91a097; --line:#343e36;
  --accent:#93bdb2; --accent-soft:#263d38; --surface:#171814;
}
/* 03. Reset and document */
* { box-sizing:border-box; }

html { scroll-behavior:smooth; scroll-padding-top:var(--anchor-offset); }

body {
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-sans);
  font-size:var(--type-body); font-weight:var(--weight-regular); line-height:var(--leading-body);
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
  transition:background-color .3s ease,color .3s ease;
}

body.menu-open { overflow:hidden; }

img,svg { display:block; max-width:100%; }

img { height:auto; }

a { color:inherit; text-decoration:none; }

button { font:inherit; }

::selection { background:var(--accent-soft); color:var(--ink); }

:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }

.skip-link { position:fixed; top:var(--space-3); left:var(--space-5); z-index:200; padding:var(--space-2) var(--space-3); background:var(--ink); color:var(--surface); transform:translateY(-160%); }

.skip-link .translation { color:inherit; }
.skip-link:focus { transform:translateY(0); }
/* 04. Typography system */
.display,.page-title,.section-title,.card-title,.case-copy h2,.research-content h2 { text-wrap:balance; }

.display { max-width:51.25rem; margin:0; font-size:var(--type-display); font-weight:var(--weight-medium); letter-spacing:var(--tracking-display); line-height:var(--leading-display); }

.page-title { max-width:51.25rem; margin:0; font-size:var(--type-title); font-weight:var(--weight-medium); letter-spacing:var(--tracking-title); line-height:var(--leading-title); }

.section-title { margin:0; font-size:var(--type-heading-1); font-weight:var(--weight-medium); letter-spacing:var(--tracking-heading); line-height:var(--leading-heading); }

.card-title { margin:0; font-size:var(--type-heading-2); font-weight:var(--weight-medium); letter-spacing:var(--tracking-heading); line-height:var(--leading-heading); }

.body-large { font-size:var(--type-lead); line-height:var(--leading-lead); letter-spacing:-.012em; }

.body-medium { font-size:var(--type-body); line-height:var(--leading-body); }

.kicker,.eyebrow,.meta-label,.project-index,.note-date,.note-kind,.asset-label,.asset-ratio { font-size:var(--type-label); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-label); line-height:1.45; text-transform:uppercase; }

.kicker,.meta-label,.project-index,.note-date,.note-kind,.asset-ratio { color:var(--muted); }

.eyebrow { margin:0 0 var(--space-4); color:var(--accent); font-size:var(--type-context-label); letter-spacing:.08em; }

.section-label,.case-label { font-size:var(--type-section-label); font-weight:var(--weight-semibold); letter-spacing:.07em; line-height:1.45; text-transform:uppercase; }

.muted { color:var(--muted); }

.faint { color:var(--faint); }
/* 05. Bilingual system */
.translation { color:var(--muted); font-weight:var(--weight-regular); letter-spacing:0; text-transform:none; }

.translation-block { display:block; margin-top:.45em; font-size:var(--type-translation-body); line-height:var(--leading-translation); }

.translation-inline { display:inline; margin-left:.38em; font-size:inherit; line-height:inherit; }
/* Display bilingual: Chinese leads on the left; English annotates on the right. */
.display-pair,
.page-title:has(> .translation-block),
.section-title:has(> .translation-block),
.research-content > h2:has(> .translation-block),
.case-copy > h2:has(> .translation-block),
.error-box h1:has(> .translation-block) {
  display:flex; flex-wrap:wrap; width:fit-content; max-width:100%; align-items:baseline;
  gap:var(--space-2) clamp(var(--space-3),1.4vw,var(--space-5));
}

.display-pair > .translation,
.page-title > .translation-block,.page-title .title-translation,
.section-title > .translation-block,.research-content > h2 > .translation-block,.case-copy > h2 > .translation-block,
.error-box h1 > .translation-block {
  flex:0 1 auto; align-self:baseline; max-width:28ch; margin:0; padding:0; border:0; line-height:1.28;
}

.display-pair > .translation { color:var(--muted); font-size:var(--type-title-en); font-weight:var(--weight-regular); letter-spacing:var(--tracking-title); }

.page-title > .translation-block,.page-title .title-translation { font-size:var(--type-title-en); }

.section-title > .translation-block,.research-content > h2 > .translation-block,.case-copy h2 > .translation-block,.section-intro h2 > .translation-block,.da-section-heading h2 > .translation-block { font-size:var(--type-heading-en); line-height:1.45; }
/* Compact bilingual: the whole component may wrap; the two languages stay together. */
.work-tile h2 > .translation-block,.timeline-entry h3 > .translation-block,
.lab-item h2 > .translation-block,.case-copy h3 > .translation-block,.evidence-item h3 > .translation-block,
.case-label > .translation-block,.research-year > .translation-block {
  display:inline; margin:0; font-size:inherit; line-height:inherit;
}

.work-tile h2 > .translation-block,.timeline-entry h3 > .translation-block,
.lab-item h2 > .translation-block,.case-copy h3 > .translation-block,.evidence-item h3 > .translation-block {
  margin-left:.55em; font-size:var(--type-translation-body);
}

.work-tile h2 > .translation-block[lang="en"]::before,.timeline-entry h3 > .translation-block[lang="en"]::before,
.lab-item h2 > .translation-block[lang="en"]::before,.case-copy h3 > .translation-block[lang="en"]::before,
.evidence-item h3 > .translation-block[lang="en"]::before { content:none; margin-right:.55em; opacity:.55; }

.case-label > .translation-block[lang="zh-CN"]::after { content:none; margin:0 .55em; opacity:.55; }

.card-title .translation-inline,.card-title > .translation-block { display:inline; margin-left:.55em; color:var(--muted); font-size:var(--type-small); font-weight:var(--weight-regular); line-height:1.4; }

.body-large > .translation-block,.page-deck > .translation-block,.project-subtitle > .translation-block,.research-question > .translation-block { margin-top:var(--space-3); font-size:var(--type-body); line-height:1.62; }

.eyebrow .translation,.kicker .translation,.meta-label .translation,.project-index .translation,.note-date .translation,.note-kind .translation,.asset-label .translation,.asset-ratio .translation { color:inherit; font-size:inherit; opacity:.76; }

.asset-copy .translation { color:inherit; opacity:.8; }

.text-link .translation { color:inherit; font-size:inherit; opacity:.78; }

.metric .translation { font-size:inherit; }
/* 06. Shared layout */
.container { width:min(calc(100% - (var(--gutter) * 2)),var(--content-max)); margin-inline:auto; }

.reading { width:min(100%,var(--reading-max)); }

.reading.centered { margin-inline:auto; }

.section { padding:var(--section-space) 0; }

.section.compact { padding:var(--section-space-compact) 0; }

.section-rule { border-top:1px solid var(--line); }

.section-more { margin-top:var(--space-8); }

.notes-intro { margin-top:var(--space-9); }

.outcome-copy { margin-top:var(--space-6) !important; }

.text-link { display:inline-flex; align-items:center; gap:var(--space-2); width:fit-content; min-height:2.75rem; padding:.45rem 0; border-bottom:1px solid currentColor; font-size:var(--type-small); font-weight:var(--weight-semibold); line-height:1.4; }

.text-link .arrow { transition:transform .2s ease; }

.text-link:hover .arrow { transform:translateX(4px); }

.external::after { content:none; margin-left:var(--space-1); }

.link-cluster { display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5); }

.meta-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }

.section-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(16rem,27rem); align-items:end; gap:var(--space-8); margin-bottom:var(--space-8); }

.section-head > p { margin:0; color:var(--muted); font-size:var(--type-body); }
/* 08. Home */
.home-hero { min-height:clamp(24rem,52svh,32rem); display:grid; align-items:center; padding:clamp(3rem,6vw,5rem) 0; }

.home-hero .eyebrow { margin-bottom:var(--space-8); }

.hero-layout { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(20rem,.96fr); align-items:start; gap:clamp(var(--space-9),9vw,8.5rem); }

.hero-identity,.hero-summary { min-width:0; }

.hero-summary { padding-top:.4rem; }

.hero-role { margin:var(--space-5) 0 0; color:var(--accent); font-size:var(--type-lead); font-weight:570; letter-spacing:-.02em; }

.hero-line { margin:var(--space-1) 0 0; color:var(--muted); font-size:var(--type-body); }

.hero-intro { max-width:42rem; margin:0; font-size:var(--type-lead); line-height:var(--leading-lead); letter-spacing:-.012em; }

.hero-actions { max-width:42rem; margin:var(--space-6) 0 0; display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5); }

.project-index-list { border-top:1px solid var(--line); }

.project-index-row { position:relative; display:grid; grid-template-columns:8.5rem minmax(0,1fr) max-content; align-items:start; gap:clamp(var(--space-5),3.25vw,var(--space-8)); padding:var(--space-8) 0; border-bottom:1px solid var(--line); isolation:isolate; }

.project-index-row::before { content:""; position:absolute; z-index:-1; inset:0 calc(-1 * var(--space-4)); background:var(--accent-soft); opacity:0; transform:scaleX(.985); transition:opacity .2s ease,transform .24s ease; }

.project-index-row:hover::before,.project-index-row:focus-visible::before { opacity:.58; transform:scaleX(1); }

.project-index-row:focus-visible { outline-offset:calc(-1 * var(--space-1)); }

.project-index-meta { display:grid; align-content:start; gap:var(--space-2); }

.project-index-no { color:var(--accent); font-size:var(--type-heading-2); font-weight:var(--weight-medium); letter-spacing:var(--tracking-heading); line-height:1; }

.project-index-period { color:var(--muted); font-size:var(--type-caption); font-variant-numeric:tabular-nums; }

.project-index-copy { max-width:48rem; }

.project-index-copy .card-title { transition:color .2s ease; }

.project-index-copy > p { margin:var(--space-3) 0 0; color:var(--muted); font-size:var(--type-body); }

.project-index-row:hover .project-index-copy .card-title,.project-index-row:focus-visible .project-index-copy .card-title { color:var(--accent); }

.media-placeholder { position:relative; isolation:isolate; display:flex; min-height:24.375rem; overflow:hidden; border:1px solid rgba(23,24,22,.11); border-radius:var(--radius); transform:scale(1); transition:transform .4s ease; }

.media-placeholder::before,.media-placeholder::after { content:""; position:absolute; z-index:-1; border:1px solid rgba(255,255,255,.5); border-radius:50%; }

.media-placeholder::before { width:58%; aspect-ratio:1; top:-22%; right:-12%; }

.media-placeholder::after { width:42%; aspect-ratio:1; bottom:-26%; left:-12%; }

.media-placeholder .asset-copy { align-self:flex-end; width:100%; padding:clamp(1.5rem,4vw,3rem); color:rgba(255,255,255,.94); }

.media-placeholder .asset-label { margin:0 0 var(--space-2); color:inherit; opacity:.72; }

.media-placeholder .asset-title { max-width:40rem; margin:0; font-size:var(--type-heading-1); font-weight:var(--weight-medium); letter-spacing:var(--tracking-heading); line-height:1.08; }

.media-placeholder .asset-ratio { margin:var(--space-4) 0 0; color:inherit; opacity:.7; }

.media-placeholder.zhipu { background:linear-gradient(145deg,#172e39,#57737a 72%,#84999b); }

.media-placeholder.dataarc { background:linear-gradient(145deg,#352f56,#706d92 70%,#9d9ab0); }

.media-placeholder.tea { background:linear-gradient(145deg,#5d3c31,#b67154 68%,#d5a07c); }

.media-placeholder.zhijing { background:linear-gradient(145deg,#31493c,#70836a 68%,#a2aa8f); }

.media-placeholder.research { background:linear-gradient(145deg,#263a4b,#6c7f8a 70%,#a3a9a7); }

.media-placeholder.neutral { background:linear-gradient(145deg,#343431,#74736d 70%,#aaa79d); }

.media-placeholder.aspect-wide { min-height:0; aspect-ratio:16 / 9; }

.media-placeholder.aspect-landscape { min-height:0; aspect-ratio:3 / 2; }

.media-placeholder.aspect-square { min-height:0; aspect-ratio:1; }

.media-placeholder.aspect-portrait { min-height:0; aspect-ratio:4 / 5; }

.metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:var(--space-8); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.metrics--two { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:var(--space-6); }

.metrics--three { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:var(--space-6); }

.metrics--four { grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:var(--space-8); }

.metric { min-width:0; padding:1.75rem 1.25rem 1.625rem 0; }

.metric + .metric { padding-left:1.5rem; border-left:1px solid var(--line); }

.metric strong { display:block; font-size:var(--type-heading-1); font-weight:var(--weight-medium); letter-spacing:var(--tracking-heading); line-height:1; }

.metric > span { display:block; margin-top:.625rem; color:var(--muted); font-size:var(--type-label); letter-spacing:.07em; line-height:1.5; text-transform:uppercase; }

.research-steps { margin-top:var(--space-8); border-top:1px solid var(--line); }

.research-step { display:grid; grid-template-columns:8.125rem 1fr 1.1fr; gap:var(--space-7); padding:var(--space-7) 0; border-bottom:1px solid var(--line); }

.research-step .year { color:var(--accent); font-size:var(--type-small); font-weight:var(--weight-semibold); }

.research-step h3 { margin:0; font-size:var(--type-heading-3); font-weight:var(--weight-medium); letter-spacing:-.02em; }

.research-step p { margin:0; color:var(--muted); }

.notes-list { border-top:1px solid var(--line); }

.note-row { display:grid; grid-template-columns:5.75rem 7rem 1fr 1.625rem; align-items:start; gap:var(--space-4); padding:1.4rem 0; border-bottom:1px solid var(--line); transition:padding-left .2s ease; }

.note-row:hover { padding-left:var(--space-2); }

.note-row h3 { margin:-.25rem 0 var(--space-1); font-size:var(--type-heading-3); font-weight:var(--weight-medium); letter-spacing:-.02em; }

.note-row p { margin:0; color:var(--muted); font-size:var(--type-small); }

.note-row .row-arrow { color:var(--accent); }

.note-row--external { cursor:pointer; }

.note-row--external h3,.note-row--external .status-pill { transition:color .2s ease,border-color .2s ease; }

.note-row--external:hover h3,.note-row--external:hover .status-pill { color:var(--accent); border-color:var(--accent); }

.notes-page-list .note-row:target {  animation:target-wash 1.8s ease-out; }

.about-band { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(3.375rem,10vw,8.75rem); align-items:start; }

.about-band p { margin:0 0 var(--space-6); }
.project-open-cue { display:inline-flex; align-items:center; gap:1rem; min-height:44px; padding:.25rem 0; color:var(--accent); align-self:center; }
.project-open-label { font-size:.875rem; font-weight:520; }
.project-open-label [lang="en"] { display:block; margin-top:.2rem; color:var(--muted); font-size:.75rem; font-weight:400; }
.project-open-cue .ui-icon { transition:transform .2s ease; }
.project-index-row:hover .project-open-cue .ui-icon { transform:translateX(3px); }
@media(max-width:48rem) {
  .project-index-row { grid-template-columns:1fr; }
  .project-index-copy { grid-column:1; }
  .project-open-cue { grid-column:1; grid-row:auto; justify-self:start; }
  .project-open-label { display:flex; gap:.5rem; align-items:baseline; }
  .project-open-label [lang="en"] { margin:0; }
}
/* 09. Index pages */
.page-hero { padding:clamp(4.75rem,8vw,7.5rem) 0 var(--space-8); }

.page-deck { max-width:var(--reading-max); margin:var(--space-6) 0 0; color:var(--muted); font-size:var(--type-lead); line-height:var(--leading-lead); }

.page-actions { display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5); margin-top:var(--space-6); }

.work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3.75rem 1.75rem; }

.work-tile .media-placeholder { min-height:0; aspect-ratio:4 / 3; }

.work-tile-image { overflow:hidden; aspect-ratio:4 / 3; background:var(--surface); }

.work-tile-image img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }

.work-tile a:hover .work-tile-image img,.work-tile a:focus-visible .work-tile-image img { transform:scale(1.012); }

.work-tile h2 { margin:var(--space-4) 0 var(--space-2); font-size:var(--type-heading-2); font-weight:var(--weight-medium); letter-spacing:var(--tracking-heading); }

.work-tile p { margin:0; color:var(--muted); }

.work-tile .meta-row { margin-top:var(--space-4); }
/* 10. Project detail */
.project-hero { padding:clamp(3rem,6vw,5rem) 0 var(--space-8); }

.selected-products { padding-bottom:var(--section-space); }
.project-title-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-4) var(--space-7); }
.project-title-row .page-title { margin:0; }
.project-identity { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem; color:var(--muted); font-size:var(--type-small); }
.project-identity time { font-variant-numeric:tabular-nums; white-space:nowrap; }
.project-identity > span > span { display:block; font-size:var(--type-caption); }
.project-affiliation { display:flex; flex-wrap:wrap; gap:.25rem .75rem; margin:var(--space-3) 0 0; color:var(--muted); font-size:var(--type-small); }
.project-affiliation [lang=en] { font-size:var(--type-caption); }
.project-intro-copy { max-width:var(--reading-max); margin:var(--space-5) 0 0; color:var(--muted); font-size:var(--type-lead); line-height:var(--leading-lead); }
.project-intro-copy p { margin:0 0 .5rem; font-size:inherit; line-height:inherit; }
.project-intro-copy strong { font-weight:var(--weight-medium); color:var(--ink); }
.project-intro-copy > .translation { display:block; margin:var(--space-3) 0 0; font-size:var(--type-body); line-height:1.62; color:var(--muted); }
.project-intro-with-media { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(16rem,.65fr); gap:var(--space-8); align-items:center; }
@media(max-width:48rem) { .project-intro-with-media { grid-template-columns:1fr; gap:var(--space-6); } }

.project-heading { max-width:51.25rem; }

.project-subtitle { max-width:var(--reading-max); margin:var(--space-5) 0 0; color:var(--muted); font-size:var(--type-lead); line-height:var(--leading-lead); }

.project-visual { padding-bottom:var(--section-space); }

.project-visual .media-placeholder { min-height:0; aspect-ratio:16 / 9; }

.case-body { padding-bottom:var(--section-space); }

.case-section { display:grid; grid-template-columns:8rem minmax(0,46rem); justify-content:space-between; gap:var(--space-7); padding:4.75rem 0; border-top:1px solid var(--line); }

.case-section .case-label { margin:.25rem 0 0; color:var(--accent); }

.case-copy { min-width:0; }

.case-copy h2 { margin:0 0 var(--space-4); font-size:var(--type-heading-1); font-weight:var(--weight-medium); letter-spacing:var(--tracking-heading); line-height:var(--leading-heading); }

.case-copy h3 { margin:var(--space-7) 0 var(--space-2); font-size:var(--type-heading-3); font-weight:var(--weight-semibold); }

.case-copy p { margin:0 0 var(--space-4); color:var(--body); font-size:var(--type-body); }

.case-copy blockquote { margin:var(--space-6) 0; padding-left:var(--space-4); border-left:2px solid var(--accent); font-size:var(--type-lead); line-height:var(--leading-lead); letter-spacing:-.015em; }

.case-copy ul { margin:var(--space-5) 0; padding-left:var(--space-5); }

.case-copy li { margin:.45rem 0; }

.artifact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5); margin-top:var(--space-6); }

.artifact-grid .artifact:nth-child(3n) { grid-column:1 / -1; }

.artifact .media-placeholder { min-height:0; aspect-ratio:4 / 3; }

.artifact:nth-child(3n) .media-placeholder { aspect-ratio:16 / 8; }

.artifact p { margin:var(--space-2) 0 0; color:var(--muted); font-size:var(--type-small); }

.scenario-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:var(--space-7); background:var(--line); border:1px solid var(--line); }

.scenario { padding:var(--space-5); background:var(--paper); }

.scenario .scenario-index { color:var(--accent); font-size:var(--type-label); font-weight:var(--weight-semibold); letter-spacing:.1em; }

.scenario h3 { margin:var(--space-7) 0 var(--space-2); font-size:var(--type-heading-3); }

.scenario p { margin:0; font-size:var(--type-small); }

.evidence-list { margin-top:var(--space-7); border-top:1px solid var(--line); }

.evidence-item { display:grid; grid-template-columns:6rem 1fr auto; gap:var(--space-5); align-items:center; padding:1.2rem 0; border-bottom:1px solid var(--line); }

.evidence-type { color:var(--accent); font-size:var(--type-label); font-weight:var(--weight-semibold); letter-spacing:.1em; text-transform:uppercase; }

.evidence-item h3 { margin:0; font-size:var(--type-small); font-weight:var(--weight-medium); }

.evidence-status { color:var(--muted); font-size:var(--type-caption); }
/* 11.1 Project narrative components */
.project-photo { margin:0; }

.project-photo img,.field-photo img { width:100%; height:100%; object-fit:cover; }

.project-photo--hero { width:min(calc(100% - 2 * var(--gutter)),82rem); margin:0 auto var(--section-space); }

.project-photo--hero img { aspect-ratio:16 / 9; border-radius:var(--radius); }

.project-photo figcaption,.field-photo figcaption { display:flex; justify-content:space-between; gap:var(--space-4); margin-top:var(--space-2); color:var(--muted); font-size:var(--type-micro); line-height:1.45; }

.case-section--wide { grid-template-columns:8rem minmax(0,1fr); }

.section-intro { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(15rem,.65fr); align-items:end; gap:var(--space-7); margin-bottom:var(--space-7); }

.section-intro h2,.section-intro p { margin:0; }

.panel-kicker { display:block; color:var(--accent); font-size:var(--type-label); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-label); line-height:1.45; text-transform:uppercase; }

.panel-foot { display:flex; justify-content:space-between; gap:var(--space-4); margin-top:auto; padding-top:var(--space-6); color:var(--muted); font-size:var(--type-micro); line-height:1.45; }

.panel-foot span:last-child { color:var(--ink); font-weight:var(--weight-semibold); }

.section-intro--compact { grid-template-columns:minmax(0,1.4fr) minmax(14rem,.6fr); }

.section-intro--product { align-items:start; }

.video-poster-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5); }

.video-poster { position:relative; display:flex; min-width:0; flex-direction:column; background:var(--surface); transition:transform .2s ease; }

.video-poster:hover,.video-poster:focus-visible { transform:translateY(-3px); }

.video-poster-media { position:relative; display:block; overflow:hidden; aspect-ratio:16 / 9; background:#090909; }

.video-poster-media img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease,opacity .2s ease; }

.video-poster:hover .video-poster-media img { transform:scale(1.015); opacity:.88; }

.video-play,.mini-play { position:absolute; top:50%; left:50%; width:4.25rem; height:4.25rem; border-radius:50%; background:rgba(255,255,255,.94); box-shadow:0 .5rem 2rem rgba(0,0,0,.2); transform:translate(-50%,-50%); }

.video-play::after,.mini-play::after { position:absolute; top:50%; left:53%; width:0; height:0; border-top:.65rem solid transparent; border-bottom:.65rem solid transparent; border-left:1rem solid #111; content:""; transform:translate(-50%,-50%); }

.video-platform { position:absolute; right:var(--space-3); bottom:var(--space-3); padding:.35rem .55rem; background:rgba(0,0,0,.78); color:#fff; font-size:var(--type-micro); letter-spacing:.04em; }

.video-poster-copy { display:flex; flex-direction:column; gap:.35rem; padding:var(--space-5) var(--space-5) var(--space-4); }

.video-poster-copy strong { font-size:var(--type-heading-3); font-weight:var(--weight-semibold); line-height:1.4; }

.video-poster-copy > span { color:var(--muted); font-size:var(--type-small); }

.video-poster-copy small { margin-top:var(--space-2); color:var(--muted); font-size:var(--type-micro); }

.video-open { margin-top:auto; padding:0 var(--space-5) var(--space-5); color:var(--accent); font-size:var(--type-caption); font-weight:var(--weight-semibold); }

.destination-panel,.external-panel { display:block; padding:clamp(1.5rem,4vw,3rem); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(90deg,var(--accent-soft),transparent 70%); transition:border-color .2s ease,background-color .2s ease; }

.destination-panel:hover,.external-panel:hover { border-color:var(--accent); }

.destination-main { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--space-6); margin-top:var(--space-7); }

.destination-main h2,.external-panel h2 { margin:0 0 var(--space-3); font-size:var(--type-heading-1); font-weight:var(--weight-medium); letter-spacing:var(--tracking-heading); line-height:var(--leading-heading); }

.destination-main h3 { margin:0 0 var(--space-3); font-size:var(--type-heading-2); font-weight:var(--weight-medium); letter-spacing:var(--tracking-heading); line-height:var(--leading-heading); }

.destination-main p,.external-panel p { max-width:40rem; margin:0; color:var(--muted); }

.destination-arrow { color:var(--accent); font-size:clamp(2.75rem,6vw,5.5rem); font-weight:300; line-height:1; transition:transform .2s ease; }

.destination-panel:hover .destination-arrow { transform:translateX(.3rem); }

.destination-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); margin:var(--space-8) 0 0; padding:var(--space-5) 0 0; border-top:1px solid color-mix(in srgb,var(--line) 72%,transparent); }

.destination-facts div { min-width:0; }

.destination-facts dt { font-size:var(--type-small); font-weight:var(--weight-semibold); }

.destination-facts dd { margin:.2rem 0 0; color:var(--muted); font-size:var(--type-micro); }

.research-evidence-bridge { display:grid; grid-template-columns:minmax(18rem,.9fr) minmax(18rem,1.1fr); min-height:24rem; overflow:hidden; background:var(--surface); }

.research-evidence-image { overflow:hidden; min-height:100%; }

.research-evidence-image img { width:100%; height:100%; object-fit:cover; object-position:top left; transition:transform .35s ease; }

.research-evidence-bridge:hover .research-evidence-image img { transform:scale(1.015); }

.research-evidence-copy { display:flex; flex-direction:column; justify-content:center; gap:var(--space-4); padding:clamp(1.75rem,4vw,3.25rem); }

.research-evidence-copy small { color:var(--accent); font-size:var(--type-label); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-label); text-transform:uppercase; }

.research-evidence-copy strong { font-size:var(--type-heading-2); font-weight:var(--weight-medium); line-height:1.35; }

.research-evidence-copy strong span { display:block; margin-top:.4rem; color:var(--muted); font-size:var(--type-heading-en); font-weight:var(--weight-regular); }

.research-evidence-copy > span { color:var(--muted); font-size:var(--type-small); }

.research-evidence-copy b { margin-top:var(--space-4); font-size:var(--type-caption); }

.research-paper-feature { grid-template-columns:minmax(18rem,.82fr) minmax(20rem,1.18fr); }

.research-paper-cover { display:flex; min-height:100%; flex-direction:column; padding:clamp(1.75rem,4vw,3.5rem); background:#f2f0e9; color:#151714; }

.paper-publisher { font-size:var(--type-fine); font-weight:var(--weight-semibold); letter-spacing:.16em; }

.paper-journal { margin-top:clamp(2rem,6vw,5rem); color:#184f46; font-size:clamp(3rem,7vw,6.5rem); font-weight:var(--weight-medium); letter-spacing:-.065em; line-height:.85; }

.paper-volume { margin-top:var(--space-3); color:#6e756e; font-size:var(--type-micro); }

.paper-rule { width:100%; height:1px; margin:var(--space-6) 0; background:#184f46; }

.paper-cover-title { max-width:22rem; font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.2rem,2.3vw,2rem); line-height:1.18; }

.paper-doi { margin-top:auto; padding-top:var(--space-7); color:#6e756e; font-size:var(--type-fine); }

.source-links--quiet { margin-top:var(--space-4); }

.field-archive { padding:var(--section-space) 0 0; background:#0b0b0a; color:#f5f3ec; }

.field-archive-heading { display:grid; grid-template-columns:8rem minmax(0,1fr); gap:var(--space-7); padding-bottom:var(--space-8); }

.field-archive-heading .case-label { margin:.25rem 0 0; color:#a9a287; }

.field-archive-heading h2 { margin:0; font-size:var(--type-heading-1); font-weight:var(--weight-medium); letter-spacing:var(--tracking-heading); line-height:var(--leading-heading); }

.field-archive-heading p:not(.case-label) { margin:var(--space-3) 0 0; color:#9b9b97; font-size:var(--type-small); }

.evidence-photo-wall { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; width:100%; align-items:start; background:#090909; }

.photo-column { display:flex; min-width:0; flex-direction:column; }

.photo-tile,.photo-tile--square,.photo-tile--wide,.photo-tile--portrait,.photo-tile--panorama { position:relative; display:block; break-inside:avoid; width:100%; min-width:0; overflow:hidden; margin:0; border:0; border-radius:0; background:#111; }

.photo-tile img { display:block; width:100%; height:auto; border:0; border-radius:0; }

.photo-tile figcaption { position:absolute; right:0; bottom:0; left:0; display:flex; justify-content:space-between; gap:var(--space-3); padding:2.6rem var(--space-4) var(--space-3); background:linear-gradient(transparent,rgba(0,0,0,.74)); color:#fff; font-size:var(--type-micro); opacity:0; transform:translateY(.3rem); transition:opacity .2s ease,transform .2s ease; }

.photo-tile:hover figcaption,.photo-tile:focus-within figcaption { opacity:1; transform:none; }

.photo-tile figcaption span { color:rgba(255,255,255,.66); }

.case-body--after-wall { padding-top:var(--section-space); }

.co-research-photos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-bottom:var(--space-8); }

.co-research-photos img { display:block; width:100%; height:18rem; object-fit:cover; }

.proof-sequence { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5); }

.proof-card { display:flex; min-width:0; flex-direction:column; background:var(--surface); transition:transform .2s ease; }

.proof-card:hover,.proof-card:focus-visible { transform:translateY(-3px); }

.proof-image { display:block; overflow:hidden; aspect-ratio:4 / 3; background:#fff; }

.proof-image img { width:100%; height:100%; object-fit:cover; object-position:top left; }

.proof-image--document img { object-fit:contain; object-position:center; }

.proof-copy { display:flex; flex:1; flex-direction:column; gap:var(--space-2); padding:var(--space-5); }

.proof-copy small { color:var(--accent); font-size:var(--type-micro); }

.proof-copy strong { font-size:var(--type-heading-3); }

.proof-copy > span { color:var(--muted); font-size:var(--type-caption); line-height:1.55; }

.proof-copy b { margin-top:auto; padding-top:var(--space-5); font-size:var(--type-micro); }

.public-link-wall { columns:3 17rem; column-gap:var(--space-4); }

.public-link { display:flex; break-inside:avoid; min-width:0; flex-direction:column; gap:var(--space-2); margin:0 0 var(--space-4); padding:var(--space-4); background:var(--surface); transition:background-color .2s ease,transform .2s ease; }

.public-link:hover,.public-link:focus-visible { background:var(--accent-soft); transform:translateY(-2px); }

.public-link--visual { padding:0 0 var(--space-4); }

.public-link--visual > :not(.public-shot) { margin-right:var(--space-4); margin-left:var(--space-4); }

.public-shot { position:relative; display:block; overflow:hidden; aspect-ratio:16 / 9; margin-bottom:var(--space-3); background:#e7e5dd; color:#161616; }

.public-shot img { width:100%; height:100%; object-fit:cover; object-position:top left; }

.public-shot--text { display:grid; place-content:center; padding:var(--space-5); font-size:var(--type-heading-2); font-weight:var(--weight-semibold); line-height:1.15; text-align:center; }

.public-shot--text em { margin-top:var(--space-2); font-size:var(--type-translation-body); font-style:normal; font-weight:var(--weight-regular); letter-spacing:.08em; }

.mini-play { width:3rem; height:3rem; }

.mini-play::after { border-top-width:.45rem; border-bottom-width:.45rem; border-left-width:.7rem; }

.public-link small { color:var(--accent); font-size:var(--type-fine); font-weight:var(--weight-semibold); letter-spacing:.05em; text-transform:uppercase; }

.public-link strong { font-size:var(--type-small); line-height:1.5; }

.public-link > span:not(.public-shot) { color:var(--muted); font-size:var(--type-micro); line-height:1.5; }

.public-link b { margin-top:var(--space-3); color:var(--muted); font-size:var(--type-fine); font-weight:var(--weight-regular); }

.public-link--text { min-height:12rem; justify-content:flex-end; }

.media-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5); }

.media-feature-grid .public-link { margin:0; }

.media-feature-grid .public-shot { aspect-ratio:16 / 10; }

.media-feature-grid .public-link strong span { display:block; margin-top:.3rem; color:var(--muted); font-size:var(--type-micro); font-weight:var(--weight-regular); }

.media-index-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(14rem,.55fr); align-items:end; gap:var(--space-7); margin:var(--space-9) 0 var(--space-4); padding-bottom:var(--space-4); border-bottom:1px solid var(--line); }

.media-index-heading h3,.media-index-heading p { margin:0; }

.media-index-heading h3 { font-size:var(--type-heading-2); font-weight:var(--weight-medium); line-height:var(--leading-heading); }

.media-index-heading p { color:var(--muted); font-size:var(--type-small); }

.media-index { margin:0; padding:0; list-style:none; border-bottom:1px solid var(--line); }

.media-index li { margin:0; border-top:1px solid var(--line); }

.media-index li:first-child { border-top:0; }

.media-index a { display:grid; grid-template-columns:5.75rem 10.5rem minmax(0,1fr); align-items:start; gap:var(--space-4); padding:.9rem 0; transition:color .2s ease; }

.media-index a:hover,.media-index a:focus-visible { color:var(--accent); }

.media-index time,.media-source { color:var(--muted); font-size:var(--type-micro); line-height:1.55; }

.media-index strong { min-width:0; font-size:var(--type-caption); font-weight:var(--weight-medium); line-height:1.5; }

.media-index strong span { display:block; margin-top:.15rem; color:var(--muted); font-size:var(--type-micro); font-weight:var(--weight-regular); }

.project-publication-list { margin-top:var(--space-8); border-top:1px solid var(--line); }

.project-publication { display:grid; grid-template-columns:5.75rem minmax(0,1fr) 5.5rem; align-items:start; gap:var(--space-5); padding:var(--space-4) 0; border-bottom:1px solid var(--line); transition:color .2s ease,transform .2s ease; }

.project-publication:hover,.project-publication:focus-visible { color:var(--accent); transform:translateX(.3rem); }

.project-publication-list time { color:var(--accent); font-size:var(--type-micro); font-weight:var(--weight-semibold); }

.project-publication-list h3,.project-publication-list p { margin:0; }

.project-publication-list h3 { font-size:var(--type-small); font-weight:var(--weight-medium); line-height:1.5; }

.project-publication-list h3 span { display:block; margin-top:.2rem; color:var(--muted); font-size:var(--type-micro); font-weight:var(--weight-regular); }

.project-publication-list p { margin-top:.25rem; color:var(--muted); font-size:var(--type-micro); }

.publication-jump { justify-self:end; color:var(--muted); font-size:var(--type-micro); opacity:0; transform:translateX(-.35rem); transition:opacity .2s ease,transform .2s ease; }

.project-publication:hover .publication-jump,.project-publication:focus-visible .publication-jump { opacity:1; transform:none; }

.research-more-link { display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); margin-top:var(--space-6); padding:var(--space-5) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.research-more-link span { display:flex; flex-direction:column; gap:.25rem; }

.research-more-link strong { font-size:var(--type-small); }

.research-more-link small,.research-more-link b { color:var(--muted); font-size:var(--type-micro); font-weight:var(--weight-regular); }

.research-more-link:hover b,.research-more-link:focus-visible b { color:var(--accent); }

.research-more-link .research-ellipsis { display:block; flex:0 0 auto; color:var(--accent); font-family:Georgia,"Times New Roman",serif; font-size:2rem; letter-spacing:.12em; line-height:.5; }

.website-preview { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(17rem,.6fr); overflow:hidden; background:#080909; color:#f6f4ed; }

.website-preview-image { display:block; overflow:hidden; aspect-ratio:16 / 9; }

.website-preview-image img { width:100%; height:100%; object-fit:cover; object-position:top left; transition:transform .35s ease; }

.website-preview:hover .website-preview-image img { transform:scale(1.012); }

.website-preview-copy { display:flex; flex-direction:column; justify-content:center; gap:var(--space-4); padding:clamp(1.5rem,3vw,2.5rem); }

.website-preview-copy small { color:#9d9d97; font-size:var(--type-micro); }

.website-preview-copy strong { font-size:var(--type-heading-2); font-weight:var(--weight-medium); line-height:1.35; }

.website-preview-copy strong span { display:block; margin-top:.4rem; color:#9d9d97; font-size:var(--type-heading-en); font-weight:var(--weight-regular); }

.website-preview-copy > span { color:#9d9d97; font-size:var(--type-caption); }

.website-preview-copy b { margin-top:var(--space-5); font-size:var(--type-micro); }

@keyframes target-wash { 0%,35%{background:var(--accent-soft)} 100%{background:transparent} }

/* 11. Research, notes, about, lab and error */
.notes-page-list { padding-bottom:var(--section-space); }

.notes-page-list .note-row { grid-template-columns:5.75rem 7rem 1fr 6.5rem; }

.status-pill { justify-self:end; padding:.22rem .5rem; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:var(--type-label); }

.about-intro { padding-bottom:var(--space-10); }

.about-copy { max-width:var(--reading-max); }

.about-copy p { margin:0 0 var(--space-5); font-size:var(--type-lead); }

.timeline-list { border-top:1px solid var(--line); }

.timeline-entry { display:grid; grid-template-columns:8.75rem 13.75rem 1fr; gap:var(--space-6); padding:var(--space-5) 0; border-bottom:1px solid var(--line); }

.timeline-entry time { color:var(--accent); font-size:var(--type-small); font-weight:var(--weight-semibold); }

.timeline-entry h3 { margin:0; font-size:var(--type-body); font-weight:var(--weight-semibold); }

.timeline-entry p { margin:0; color:var(--muted); font-size:var(--type-small); }

.lab-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-8) var(--space-6); padding-bottom:var(--section-space); }

.lab-item { padding-top:var(--space-4); border-top:1px solid var(--line); }

.lab-item .status-pill { display:inline-flex; justify-self:auto; }

.lab-item h2 { margin:var(--space-6) 0 var(--space-2); font-size:var(--type-heading-3); font-weight:var(--weight-medium); }

.lab-item p { margin:0; color:var(--muted); font-size:var(--type-small); }

.error-page { min-height:calc(100vh - 4.75rem); display:grid; place-items:center; padding:var(--space-9) 0; }

.error-box { max-width:var(--reading-max); }

.error-code { margin:0; color:var(--accent); font-size:var(--type-label); font-weight:var(--weight-semibold); letter-spacing:.14em; }

.error-box h1 { margin:var(--space-4) 0; font-size:var(--type-display); font-weight:var(--weight-medium); letter-spacing:var(--tracking-display); line-height:1; }

.error-box p { max-width:32.5rem; color:var(--muted); font-size:var(--type-lead); }
/* 12. Evidence-led product cases */
.project-hero--evidence { padding-bottom:var(--space-8); }

.evidence-caption { display:flex; justify-content:space-between; gap:var(--space-4); margin-top:var(--space-2); color:var(--muted); font-size:var(--type-micro); line-height:1.45; }

.decision-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:var(--space-6); background:var(--line); border:1px solid var(--line); }

.decision-grid article { min-height:13.5rem; padding:var(--space-5); background:var(--paper); }

.decision-grid small,.story-index { color:var(--accent); font-size:var(--type-micro); font-weight:var(--weight-semibold); letter-spacing:.08em; text-transform:uppercase; }

.decision-grid h3 { margin:var(--space-6) 0 var(--space-2); font-size:var(--type-heading-3); font-weight:var(--weight-medium); }

.decision-grid h3 span,.evidence-story-copy h3 span,.proof-copy strong span { display:block; margin-top:.25rem; color:var(--muted); font-size:var(--type-translation-body); font-weight:var(--weight-regular); }

.decision-grid p { margin:0; color:var(--muted); font-size:var(--type-small); }

.feature-map { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:var(--space-6); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.feature-map a { display:flex; min-height:9rem; flex-direction:column; justify-content:space-between; gap:var(--space-5); padding:var(--space-4); border-left:1px solid var(--line); transition:background .2s ease,color .2s ease; }

.feature-map a:first-child { border-left:0; }

.feature-map a:hover,.feature-map a:focus-visible { background:var(--accent-soft); color:var(--accent); }

.feature-map a > span { color:var(--muted); font-size:var(--type-micro); }

.feature-map strong { font-size:var(--type-small); font-weight:var(--weight-semibold); }

.feature-map strong span { display:block; margin-top:.25rem; color:var(--muted); font-size:var(--type-micro); font-weight:var(--weight-regular); }

.evidence-story { display:grid; grid-template-columns:minmax(16rem,.68fr) minmax(24rem,1.32fr); align-items:center; gap:clamp(2rem,6vw,5.5rem); padding:var(--space-9) 0; border-top:1px solid var(--line);  }

.evidence-story--reverse { grid-template-columns:minmax(24rem,1.32fr) minmax(16rem,.68fr); }

.evidence-story--reverse .evidence-story-copy { order:2; }

.evidence-story-copy h3 { margin:var(--space-4) 0 var(--space-3); font-size:var(--type-heading-2); font-weight:var(--weight-medium); line-height:var(--leading-heading); }

.evidence-story-copy p { margin:0; color:var(--muted); font-size:var(--type-small); }

.evidence-frame { position:relative; display:block; overflow:hidden; width:100%; background:#fff; box-shadow:0 1.25rem 4rem rgba(21,22,19,.08); }

.evidence-frame img { display:block; width:100%; height:auto; transition:transform .35s ease; }

.evidence-frame:hover img,.evidence-frame:focus-visible img { transform:scale(1.012); }

.evidence-frame > span { position:absolute; right:var(--space-3); bottom:var(--space-3); padding:.42rem .62rem; background:rgba(9,10,9,.82); color:#fff; font-size:var(--type-micro); }

.evidence-frame--portrait { width:min(100%,33rem); justify-self:center; }

.product-surface { padding:var(--section-space) 0; background:#10110f; color:#f3f1ea; }

.product-surface-heading { display:grid; grid-template-columns:8rem minmax(0,1fr); gap:var(--space-7); margin-bottom:var(--space-8); }

.product-surface-heading .case-label { margin:.25rem 0 0; color:#91a6ff; }

.product-surface-heading h2 { margin:0; font-size:var(--type-heading-1); font-weight:var(--weight-medium); }

.product-surface-heading p { max-width:42rem; margin:var(--space-3) 0 0; color:#a9aaa5; }

.product-gallery { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(16rem,.45fr); grid-template-rows:auto auto; gap:1px; width:100%; background:#353633; }

.gallery-shot { position:relative; display:block; overflow:hidden; width:100%; min-height:0; background:#050605; }

.gallery-shot img { display:block; width:100%; height:100%; object-fit:cover; transition:opacity .25s ease,transform .4s ease; }

.gallery-shot:hover img,.gallery-shot:focus-visible img { opacity:.86; transform:scale(1.01); }

.gallery-shot--wide { aspect-ratio:16 / 9; }

.gallery-shot--phone { grid-column:2; grid-row:1 / span 2; }

.gallery-shot--phone img { object-fit:contain; }

.gallery-shot--media { aspect-ratio:16 / 8.5; }

.gallery-shot > span { position:absolute; right:0; bottom:0; left:0; padding:3rem var(--space-4) var(--space-3); background:linear-gradient(transparent,rgba(0,0,0,.82)); color:#fff; font-size:var(--type-micro); }

.artifact-timeline { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }

.artifact-timeline li { display:grid; grid-template-columns:7rem minmax(0,1fr) 7rem; gap:var(--space-5); align-items:start; padding:var(--space-5) 0; border-bottom:1px solid var(--line); }

.artifact-timeline time { color:var(--accent); font-size:var(--type-caption); font-weight:var(--weight-semibold); }

.artifact-timeline strong,.artifact-timeline span { display:block; }

.artifact-timeline strong { font-size:var(--type-small); }

.artifact-timeline div > span { margin-top:.3rem; color:var(--muted); font-size:var(--type-caption); }

.artifact-timeline div > span span { margin-top:.2rem; }

.artifact-timeline small { color:var(--muted); font-size:var(--type-micro); text-align:right; }

.source-note { margin-top:var(--space-6) !important; padding-top:var(--space-4); border-top:1px solid var(--line); color:var(--muted) !important; font-size:var(--type-caption) !important; }

.evidence-metrics { margin-top:0; }
/* DataArc · evidence narrative */
.da-hero .project-subtitle { max-width:49rem; }

.dataarc-page .section-intro--compact { align-items:start; }

.da-section-title { min-width:0; }

.section-intro .da-section-kicker { margin:var(--space-4) 0 0; color:var(--accent); font-size:var(--type-caption); font-weight:var(--weight-medium); }

.da-section-kicker .translation { margin-top:.35rem; color:var(--muted); font-size:var(--type-micro); font-weight:var(--weight-regular); }

.da-origin-stage { display:grid; grid-template-columns:minmax(0,1.42fr) minmax(15rem,.58fr); gap:var(--space-6); margin-top:var(--space-7); }

.da-site-preview { position:relative; display:block; overflow:hidden; min-height:25rem; background:#090a0a; color:#fff; }

.da-site-preview img { display:block; width:100%; height:100%; min-height:25rem; object-fit:cover; object-position:center top; opacity:.88; transition:opacity .25s ease,transform .45s ease; }

.da-site-preview:hover img,.da-site-preview:focus-visible img { opacity:.72; transform:scale(1.008); }

.da-site-preview > span { position:absolute; right:0; bottom:0; left:0; padding:5rem var(--space-5) var(--space-5); background:linear-gradient(transparent,rgba(0,0,0,.9)); }

.da-site-preview small,.da-site-preview strong,.da-site-preview b,.da-site-preview strong span { display:block; }

.da-site-preview small { color:#aeb1ae; font-size:var(--type-micro); }

.da-site-preview strong { margin-top:var(--space-2); font-size:var(--type-heading-3); font-weight:var(--weight-medium); }

.da-site-preview strong span { margin-top:.2rem; color:#aeb1ae; font-size:var(--type-translation-body); font-weight:var(--weight-regular); }

.da-site-preview b { margin-top:var(--space-4); color:#d6d8d5; font-size:var(--type-micro); font-weight:var(--weight-regular); }

.da-origin-facts { display:grid; grid-template-rows:repeat(3,1fr); border-top:1px solid var(--line); }

.da-origin-facts article { display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-3); padding:var(--space-4) 0; border-bottom:1px solid var(--line); }

.da-origin-facts small,.da-origin-facts strong,.da-origin-facts span { display:block; }

.da-origin-facts small { color:var(--muted); font-size:var(--type-micro); }

.da-origin-facts strong { font-size:var(--type-small); font-weight:var(--weight-medium); }

.da-origin-facts span { color:var(--muted); font-size:var(--type-micro); }

.da-role-band { display:grid; grid-template-columns:9rem minmax(15rem,.85fr) minmax(18rem,1.15fr); gap:var(--space-5); align-items:start; margin-top:var(--space-8); padding:var(--space-6); background:#315c57; color:#fff; }

.da-role-band > span { font-size:var(--type-micro); letter-spacing:.08em; text-transform:uppercase; }

.da-role-band > strong { font-size:var(--type-heading-3); font-weight:var(--weight-medium); line-height:var(--leading-heading); }

.da-role-band > strong .translation { margin-top:.5rem; font-size:var(--type-translation-body); font-weight:var(--weight-regular); }

.da-role-band p { margin:0; color:rgba(255,255,255,.72); font-size:var(--type-small); }

.da-role-band .translation { color:rgba(255,255,255,.56); }

.da-growth { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:var(--space-8); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.da-growth > div { min-width:0; padding:var(--space-5); border-left:1px solid var(--line); }

.da-growth > div:first-child { padding-left:0; border-left:0; }

.da-growth time,.da-growth strong,.da-growth span { display:block; }

.da-growth time { color:var(--accent); font-size:var(--type-micro); font-weight:var(--weight-semibold); }

.da-growth strong { margin:var(--space-6) 0 var(--space-2); font-size:var(--type-heading-3); font-weight:var(--weight-medium); }

.da-growth span { color:var(--muted); font-size:var(--type-caption); }

.da-growth i { font-style:normal; opacity:.72; }

.da-source-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:var(--space-6); background:var(--line); border:1px solid var(--line); }

.da-source-links a { display:flex; min-width:0; min-height:12rem; flex-direction:column; justify-content:space-between; gap:var(--space-3); padding:var(--space-4); background:var(--paper); transition:background .2s ease; }

.da-source-links a:hover,.da-source-links a:focus-visible { background:var(--accent-soft); }

.da-source-links small,.da-source-links strong,.da-source-links span { display:block; }

.da-source-links small,.da-source-links span { color:var(--muted); font-size:var(--type-micro); }

.da-source-links strong { font-size:var(--type-small); font-weight:var(--weight-medium); }

.da-source-links a > span span { margin:.3rem 0; opacity:.72; }

.da-living { padding:var(--section-space) 0; background:#0d0f10; color:#f1f2ef; }

.da-living .case-label,.da-living .story-index { color:var(--accent-on-dark); }

.da-section-heading { display:grid; grid-template-columns:8rem minmax(0,1fr); gap:var(--space-7); }

.da-section-heading .case-label { margin:.25rem 0 0; }

.da-section-heading h2 { max-width:48rem; margin:0; font-size:var(--type-heading-1); font-weight:var(--weight-medium); line-height:var(--leading-heading); }

.da-section-heading p { max-width:48rem; margin:var(--space-4) 0 0; color:#aaaead; }

.da-market-proof { margin-top:var(--space-7); padding:var(--space-5) 0; border-top:1px solid #343738; border-bottom:1px solid #343738; }

.da-logo-row { display:grid; grid-template-columns:repeat(11,minmax(0,1fr)); gap:clamp(.75rem,1.8vw,1.75rem); align-items:center; }

.da-logo-row figure { display:grid; min-width:0; height:3.5rem; place-items:center; margin:0; }

.da-logo-row img { display:block; width:100%; max-height:2.3rem; object-fit:contain; filter:grayscale(1) brightness(0) invert(1); opacity:.62; transition:opacity .2s ease; }

.da-logo-row img:hover { opacity:1; }

.da-market-proof > p { max-width:50rem; margin:var(--space-4) 0 0; color:#aaaead; font-size:var(--type-body); }

.da-architecture { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(14rem,.45fr); gap:var(--space-7); align-items:end; margin:var(--space-9) 0 0; }

.da-architecture button { display:block; width:100%; overflow:hidden; background:#fff; }

.da-architecture img { display:block; width:100%; }

.da-architecture figcaption small,.da-architecture figcaption strong,.da-architecture figcaption strong span { display:block; }

.da-architecture figcaption small { color:var(--accent-on-dark); font-size:var(--type-micro); }

.da-architecture figcaption strong { margin-top:var(--space-5); font-size:var(--type-heading-2); font-weight:var(--weight-medium); line-height:var(--leading-heading); }

.da-architecture figcaption strong span { margin-top:.4rem; color:#888d8b; font-size:var(--type-heading-en); font-weight:var(--weight-regular); }

.da-capability-line { margin-top:var(--space-7); padding:var(--space-5) 0; border-top:1px solid #343738; border-bottom:1px solid #343738; }

.da-capability-line > p { display:flex; justify-content:space-between; gap:var(--space-5); margin:0 0 var(--space-4); color:#838987; font-size:var(--type-micro); }

.da-capability-line > p span { color:#646a68; }

.da-capability-line > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.15fr); gap:1px; background:#343738; }

.da-capability-line > div > span,.da-capability-line > div > strong { display:flex; min-height:7.5rem; flex-direction:column; justify-content:space-between; padding:var(--space-4); background:#141718; font-size:var(--type-small); font-weight:var(--weight-medium); }

.da-capability-line > div > strong { position:relative; background:#315c57; color:#fff; }

.da-capability-line > div > strong::before { content:none; position:absolute; top:var(--space-4); right:var(--space-4); font-size:1rem; font-weight:var(--weight-regular); }

.da-capability-line small { display:block; color:#747a78; font-size:var(--type-micro); font-weight:var(--weight-regular); }

.da-capability-line strong small { color:rgba(255,255,255,.66); }

.da-decision-quote { margin:var(--space-8) 0; padding:var(--space-8) 0; border-top:1px solid #343738; border-bottom:1px solid #343738; }

.da-decision-quote span,.da-decision-quote footer { color:var(--accent-on-dark); font-size:var(--type-micro); font-style:normal; letter-spacing:.08em; text-transform:uppercase; }

.da-decision-quote p { max-width:62rem; margin:var(--space-6) 0; font-size:var(--type-heading-1); font-weight:var(--weight-regular); line-height:1.28; }

.da-decision-quote p .translation { margin-top:var(--space-4); color:#888d8b; font-size:var(--type-heading-en); letter-spacing:0; line-height:1.55; text-transform:none; }

.da-video-block { display:grid; grid-template-columns:minmax(14rem,.42fr) minmax(0,1.58fr); gap:var(--space-7); align-items:end; }

.da-video-copy h3 { margin:var(--space-4) 0 var(--space-3); font-size:var(--type-heading-2); font-weight:var(--weight-medium); line-height:var(--leading-heading); }

.da-video-copy h3 span { display:block; margin-top:.25rem; color:#888d8b; font-size:var(--type-heading-en); font-weight:var(--weight-regular); }

.da-video-copy p { color:#aaaead; font-size:var(--type-body); }

.da-video-copy > small { display:block; margin-top:var(--space-5); color:#99a7a0; font-size:var(--type-micro); }

.da-video-block video { display:block; width:100%; aspect-ratio:1570 / 1080; background:#050606; object-fit:contain; }

.da-signal-strip { display:grid; grid-template-columns:repeat(3,9rem) minmax(0,1fr); gap:0; align-items:stretch; margin-top:var(--space-8); border-top:1px solid #343738; border-bottom:1px solid #343738; }

.da-signal-strip > div { padding:var(--space-5); border-right:1px solid #343738; }

.da-signal-strip strong,.da-signal-strip span { display:block; }

.da-signal-strip strong { font-size:var(--type-heading-2); font-weight:var(--weight-medium); }

.da-signal-strip span { margin-top:.25rem; color:#7f8583; font-size:var(--type-micro); }

.da-signal-strip p { align-self:center; margin:0; padding:var(--space-5); color:#aaaead; font-size:var(--type-caption); }

.da-poc-brief { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:var(--space-7); background:var(--line); border:1px solid var(--line); }

.da-poc-brief > div { min-height:12rem; padding:var(--space-4); background:var(--paper); }

.da-poc-brief span,.da-poc-brief strong { display:block; }

.da-poc-brief span { color:var(--accent); font-size:var(--type-micro); }

.da-poc-brief strong { margin-top:var(--space-6); font-size:var(--type-small); font-weight:var(--weight-medium); line-height:1.55; }

.da-poc-brief strong .translation { margin-top:.45rem; font-size:var(--type-micro); font-weight:var(--weight-regular); }

.da-case-path { margin:var(--space-8) 0 0; padding:0; list-style:none; border-top:1px solid var(--line); }

.da-case-path > li { display:grid; grid-template-columns:4rem minmax(0,1fr); gap:var(--space-5); padding:var(--space-7) 0; border-bottom:1px solid var(--line); }

.da-case-path > li > span { color:var(--accent); font-size:var(--type-caption); font-weight:var(--weight-semibold); }

.da-case-path small { color:var(--accent); font-size:var(--type-micro); }

.da-case-path h3 { margin:var(--space-3) 0; font-size:var(--type-heading-2); font-weight:var(--weight-medium); line-height:var(--leading-heading); }

.da-case-path h3 span { display:block; margin-top:.25rem; color:var(--muted); font-size:var(--type-heading-en); font-weight:var(--weight-regular); }

.da-case-path p { max-width:44rem; color:var(--body); font-size:var(--type-body); }

.da-case-path--visual .evidence-frame { margin-top:var(--space-6); }

.da-results { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:var(--space-8); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.da-results > div { padding:var(--space-5); border-left:1px solid var(--line); }

.da-results > div:first-child { padding-left:0; border-left:0; }

.da-results strong,.da-results span { display:block; }

.da-results strong { font-size:var(--type-heading-2); font-weight:var(--weight-medium); }

.da-results span { margin-top:.4rem; color:var(--muted); font-size:var(--type-micro); }

.da-learning { margin-top:var(--space-8); padding:var(--space-7); background:var(--accent-soft); }

.da-learning > span { color:var(--accent); }

.da-learning h3 { margin:var(--space-4) 0 var(--space-3); font-size:var(--type-heading-2); font-weight:var(--weight-medium); line-height:var(--leading-heading); }

.da-learning h3 span { display:block; margin-top:.25rem; color:var(--muted); font-size:var(--type-heading-en); font-weight:var(--weight-regular); }

.da-learning p { max-width:46rem; margin:0; color:var(--body); font-size:var(--type-body); }

.da-product-definition { display:grid; grid-template-columns:minmax(0,1fr) minmax(20rem,.8fr); gap:var(--space-7); align-items:end; margin:var(--space-8) 0; }

.da-product-definition > div > small { color:var(--accent-on-dark); font-size:var(--type-micro); }

.da-product-definition h3 { margin:var(--space-3) 0; font-size:var(--type-heading-2); font-weight:var(--weight-medium); line-height:var(--leading-heading); }

.da-product-definition h3 span { display:block; margin-top:.25rem; color:#888d8b; font-size:var(--type-heading-en); font-weight:var(--weight-regular); }

.da-product-definition p { max-width:42rem; color:#aaaead; font-size:var(--type-small); }

.da-product-definition ol { display:grid; grid-template-columns:repeat(3,1fr); margin:0; padding:0; list-style:none; border-top:1px solid #343738; border-bottom:1px solid #343738; }

.da-product-definition li { padding:var(--space-4); border-left:1px solid #343738; }

.da-product-definition li:first-child { border-left:0; }

.da-product-definition li > span,.da-product-definition li strong,.da-product-definition li small { display:block; }

.da-product-definition li > span { color:var(--accent-on-dark); font-size:var(--type-micro); }

.da-product-definition li strong { margin-top:var(--space-6); font-size:var(--type-caption); font-weight:var(--weight-medium); }

.da-product-definition li small { margin-top:.2rem; color:#747a78; font-size:var(--type-micro); }

.da-reuse-map { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:var(--space-8); background:var(--line); border:1px solid var(--line); }

.da-reuse-map article { min-width:0; padding:var(--space-6); background:var(--paper); }

.da-reuse-map article:last-child { background:var(--accent-soft); }

.da-reuse-map small,.da-reuse-map h3 span,.da-reuse-map li span { display:block; }

.da-reuse-map > article > small { color:var(--accent); font-size:var(--type-micro); font-weight:var(--weight-semibold); }

.da-reuse-map h3 { margin:var(--space-5) 0 var(--space-6); font-size:var(--type-heading-2); font-weight:var(--weight-medium); line-height:var(--leading-heading); }

.da-reuse-map h3 span { margin-top:.35rem; color:var(--muted); font-size:var(--type-heading-en); font-weight:var(--weight-regular); }

.da-reuse-map ul { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }

.da-reuse-map li { padding:var(--space-3) 0; border-bottom:1px solid var(--line); font-size:var(--type-small); }

.da-reuse-map li span { margin-top:.15rem; color:var(--muted); font-size:var(--type-micro); }

.da-poc-visuals { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--space-6); margin-top:var(--space-8); }

.da-poc-visuals figure { min-width:0; margin:0; }

.da-poc-visuals button { position:relative; display:block; width:100%; aspect-ratio:4 / 3; overflow:hidden; background:#fff; }

.da-poc-visuals img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }

.da-poc-visuals figcaption { display:grid; grid-template-columns:1fr; gap:var(--space-2); align-items:start; padding:var(--space-4) 0; border-bottom:1px solid var(--line); }

.da-poc-visuals figcaption small,.da-poc-visuals figcaption strong,.da-poc-visuals figcaption strong span { display:block; }

.da-poc-visuals figcaption small { color:var(--accent); font-size:var(--type-micro); }

.da-poc-visuals figcaption strong { font-size:var(--type-small); font-weight:var(--weight-medium); line-height:1.45; }

.da-poc-visuals figcaption strong span { margin-top:.2rem; color:var(--muted); font-size:var(--type-micro); font-weight:var(--weight-regular); }

.da-case-path--compact > li { padding:var(--space-6) 0; }

.da-case-path--compact h3 { font-size:var(--type-heading-3); }

.da-results--compact { margin-top:var(--space-6); }

.da-results--compact strong { font-size:var(--type-heading-3); }

body.lightbox-open { overflow:hidden; }
/* 27. Zhipu Qingyan PM · market, evidence, and product thinking */
.zp-case { --zp-blue:var(--accent); --zp-blue-soft:var(--accent-soft); --zp-blue-ink:var(--ink); overflow:clip; }

:root[data-theme="dark"] .zp-case { --zp-blue:var(--accent); --zp-blue-soft:var(--accent-soft); --zp-blue-ink:var(--ink); }

.zp-case h1,.zp-case h2,.zp-case h3 { text-wrap:balance; }

.zp-case h2 { letter-spacing:var(--tracking-heading); }

.zp-case h2 > span,.zp-case h3 > span,.zp-case strong > span {
  display:block; margin-top:.28em; color:var(--muted); font-weight:var(--weight-regular); letter-spacing:0; line-height:1.35;
}

.zp-case h2 > span { font-size:var(--type-heading-en); }

.zp-case h3 > span,.zp-case strong > span { font-size:var(--type-translation-body); }

.zp-research,.zp-strategy,.zp-experiment,.zp-other { padding:var(--section-space) 0; border-top:1px solid var(--line); }

.zp-section-intro { display:grid; grid-template-columns:10rem minmax(0,1fr); gap:clamp(2.5rem,7vw,7rem); margin-bottom:var(--space-9); }

.zp-section-intro .case-label { margin:0; color:var(--accent); }

.zp-section-intro h2 { max-width:47rem; margin:0; font-size:var(--type-heading-1); font-weight:var(--weight-medium); line-height:1.2; }

.zp-section-intro h2 span { font-size:var(--type-heading-en); }

.zp-section-intro div > p { max-width:45rem; margin:var(--space-4) 0 0; color:var(--body); }

.zp-section-intro div > .translation { color:var(--muted); font-size:var(--type-small); }

.zp-research-brief { max-width:59rem; margin-left:auto; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }

.zp-research-routes article { display:grid; grid-template-columns:14rem minmax(0,1fr); gap:var(--space-6); padding:var(--space-6) 0; }

.zp-research-routes article + article { border-top:1px solid var(--line); }

.zp-research-routes header > span,.zp-research-conclusion > span { color:var(--zp-blue); font-size:var(--type-label); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-label); text-transform:uppercase; }

.zp-research-routes h3 { margin:var(--space-3) 0 var(--space-2); font-size:var(--type-heading-3); font-weight:var(--weight-medium); }

.zp-research-routes h3 small { display:block; margin-top:.25rem; color:var(--muted); font-size:var(--type-translation-body); font-weight:var(--weight-regular); }

.zp-research-routes header p { margin:0; color:var(--muted); font-size:var(--type-micro); }

.zp-research-routes ul { display:flex; align-content:flex-start; align-items:center; flex-wrap:wrap; gap:var(--space-4) var(--space-6); margin:0; padding:var(--space-2) 0 0; list-style:none; }

.zp-research-routes li { display:grid; grid-template-columns:1.7rem auto auto; align-items:center; gap:.55rem; min-width:8.5rem; }

.zp-research-routes li b { font-size:var(--type-caption); font-weight:var(--weight-medium); white-space:nowrap; }

.zp-research-routes li small { color:var(--muted); font-size:var(--type-micro); font-variant-numeric:tabular-nums; }

.zp-research-routes .is-self b { color:var(--zp-blue-ink); }

.zp-logo { display:grid; flex:0 0 1.7rem; width:1.7rem; height:1.7rem; place-items:center; border-radius:50%; background:var(--paper-strong); color:var(--ink); font-size:.54rem; font-weight:var(--weight-semibold); letter-spacing:-.04em; }

.zp-logo--360 { background:#ffb64b; color:#171816; }

.zp-logo--p { background:#20818a; color:#fff; }

.zp-logo--kimi { background:#111; color:#fff; }

.zp-logo--dou { background:#ff6b65; color:#fff; }

.zp-logo--tong { background:#6558d9; color:#fff; }

.zp-logo--meta { background:#315fdf; color:#fff; }

.zp-logo--tian { background:#eef2ff; color:#4263eb; }

.zp-logo--hailuo { background:#23296f; color:#fff; }

.zp-logo--zhipu { background:linear-gradient(145deg,#24306b,#28d7c6); color:#fff; }

.zp-research-facts { margin:0; border-top:1px solid var(--line); }

.zp-research-facts > div { display:grid; grid-template-columns:14rem minmax(0,1fr); gap:var(--space-6); padding:var(--space-4) 0; }

.zp-research-facts > div + div { border-top:1px solid var(--line); }

.zp-research-facts dt { color:var(--muted); font-size:var(--type-micro); }

.zp-research-facts dd { margin:0; color:var(--body); font-size:var(--type-small); }

.zp-research-facts dd small,.zp-research-conclusion > small { display:block; margin-top:.35rem; color:var(--muted); font-size:var(--type-micro); line-height:1.5; }

.zp-research-conclusion { display:grid; grid-template-columns:14rem minmax(0,1fr); gap:var(--space-2) var(--space-6); padding:var(--space-6) 0; border-top:1px solid var(--line); }

.zp-research-conclusion p { margin:0; font-size:var(--type-heading-3); line-height:1.48; }

.zp-research-conclusion p strong { color:var(--zp-blue-ink); font-weight:var(--weight-medium); }

.zp-research-conclusion > small { grid-column:2; max-width:42rem; }

.zp-afterthought small,.zp-experiment-story blockquote small { display:block; max-width:44rem; margin-top:var(--space-5); color:var(--muted); font-size:var(--type-translation-body); font-weight:var(--weight-regular); line-height:1.55; }

.zp-strategy { background:color-mix(in srgb,var(--surface) 62%,var(--paper)); }

.zp-decisions { border-bottom:1px solid var(--line); }

.zp-decision { border-top:1px solid var(--line); }

.zp-decision summary { display:grid; grid-template-columns:3.5rem minmax(0,1fr) 1.5rem; align-items:center; gap:var(--space-5); padding:var(--space-6) 0; cursor:pointer; list-style:none; }

.zp-decision summary::-webkit-details-marker { display:none; }

.zp-decision summary > span { color:var(--zp-blue); font-size:var(--type-micro); font-weight:var(--weight-semibold); }

.zp-decision summary small { color:var(--muted); font-size:var(--type-label); letter-spacing:var(--tracking-label); text-transform:uppercase; }

.zp-decision summary h3 { margin:var(--space-2) 0 0; font-size:var(--type-heading-2); font-weight:var(--weight-medium); }

.zp-decision summary h3 span { display:inline; margin-left:.65em; font-size:var(--type-heading-en); }

.zp-decision summary > b { position:relative; width:1.25rem; height:1.25rem; }

.zp-decision summary > b::before,.zp-decision summary > b::after { content:""; position:absolute; top:50%; left:0; width:100%; height:1px; background:currentColor; transition:transform .2s ease; }

.zp-decision summary > b::after { transform:rotate(90deg); }

.zp-decision[open] summary > b::after { transform:rotate(0); }

.zp-decision-content { display:grid; grid-template-columns:minmax(16rem,.8fr) minmax(26rem,1.2fr); align-items:start; gap:clamp(2.5rem,7vw,6rem); padding:var(--space-4) 0 var(--space-9) 5rem; }

.zp-decision-copy dl { margin:0; }

.zp-decision-copy dl > div { display:grid; grid-template-columns:5.25rem minmax(0,1fr); gap:var(--space-4); padding:var(--space-4) 0; border-top:1px solid var(--line); }

.zp-decision-copy dt { color:var(--zp-blue); font-size:var(--type-small); font-weight:var(--weight-semibold); }

.zp-decision-copy dd { margin:0; color:var(--body); font-size:var(--type-body); }

.zp-decision-copy dd > span,.zp-experiment-story li p > span,.zp-other-grid p > span { display:block; margin-top:.42rem; color:var(--muted); font-size:var(--type-translation-body); line-height:var(--leading-translation); }

.zp-decision-copy > .translation { margin:var(--space-5) 0 0; font-size:var(--type-translation-body); }

.zp-artifact { position:relative; display:block; width:100%; padding:0; overflow:hidden; border:0; background:#fff; color:#111; cursor:zoom-in; text-align:left; }

.zp-artifact img { width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center; transition:transform .35s ease; }

.zp-artifact:hover img { transform:scale(1.012); }

.zp-artifact > span { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:.8rem 0 0; background:var(--paper); color:var(--ink); font-size:var(--type-micro); font-weight:var(--weight-semibold); }

:root[data-theme="dark"] .zp-artifact > span { background:var(--surface); }

.zp-artifact > span small { color:var(--muted); font-size:var(--type-micro); font-weight:var(--weight-regular); }

.zp-product-film { margin:var(--space-10) 0 0; }

.zp-product-film figcaption { display:flex; align-items:end; justify-content:space-between; gap:var(--space-7); margin-bottom:var(--space-4); }

.zp-product-film figcaption span { color:var(--zp-blue); font-size:var(--type-label); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-label); text-transform:uppercase; }

.zp-product-film figcaption strong { display:block; margin-top:var(--space-2); font-size:var(--type-heading-3); font-weight:var(--weight-medium); }

.zp-product-film figcaption > p { max-width:20rem; margin:0; color:var(--muted); font-size:var(--type-micro); text-align:right; }

.zp-product-film figcaption > p span { display:block; color:inherit; font-size:inherit; font-weight:var(--weight-regular); letter-spacing:0; text-transform:none; }

.zp-product-film video { display:block; width:100%; aspect-ratio:16/9; background:#fff; object-fit:cover; }

.zp-afterthought { max-width:var(--reading-max); margin:var(--space-8) 0 0 auto; padding:var(--space-6) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:var(--type-lead); line-height:var(--leading-lead); }

.zp-experiment-grid { display:grid; grid-template-columns:minmax(18rem,.72fr) minmax(24rem,1.28fr); align-items:start; gap:clamp(3rem,8vw,7rem); }

.zp-artifact--portrait img { aspect-ratio:1/1; object-fit:contain; }

.zp-experiment-story ol { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }

.zp-experiment-story li { display:grid; grid-template-columns:2.5rem minmax(0,1fr); gap:var(--space-4); padding:var(--space-5) 0; border-bottom:1px solid var(--line); }

.zp-experiment-story li > b { color:var(--zp-blue); font-size:var(--type-micro); }

.zp-experiment-story li strong { font-size:var(--type-small); }

.zp-experiment-story li strong small { display:inline; margin-left:.65em; font-size:var(--type-micro); }

.zp-experiment-story li p { margin:.35rem 0 0; color:var(--body); font-size:var(--type-small); }

.zp-experiment-story em { color:var(--zp-blue-ink); font-style:normal; font-weight:var(--weight-semibold); }

.zp-signal-compare { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3); margin:var(--space-4) 0 var(--space-3); padding:var(--space-3) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.zp-signal-compare > span { display:flex; align-items:baseline; gap:.45rem; }

.zp-signal-compare em { font-size:var(--type-small); }

.zp-signal-compare small { color:var(--muted); font-size:var(--type-micro); line-height:1.35; }

.zp-signal-compare > i { color:var(--muted); font-size:var(--type-micro); font-style:normal; }

.zp-experiment-story .zp-signal-note { margin-top:0; color:var(--muted); font-size:var(--type-micro); }

.zp-experiment-story .zp-signal-note > span { font-size:var(--type-micro); }

.zp-experiment-story blockquote { margin:var(--space-8) 0 0; padding:var(--space-6) 0 0; border-top:2px solid var(--zp-blue); font-size:var(--type-heading-3); line-height:1.48; }

.zp-planning { padding:var(--section-space) 0; border-top:1px solid var(--line); }

.zp-plan-sheet { max-width:59rem; margin-left:auto; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }

.zp-plan-meta { display:grid; grid-template-columns:8rem minmax(0,1fr); gap:.2rem var(--space-6); margin:0; padding:var(--space-4) 0; color:var(--body); font-size:var(--type-small); }

.zp-plan-meta strong { grid-row:1 / 3; font-weight:var(--weight-medium); }

.zp-plan-meta small { grid-column:2; color:var(--muted); font-size:var(--type-micro); }

.zp-plan-item { display:grid; grid-template-columns:14rem minmax(0,1fr); gap:var(--space-6); padding:var(--space-7) 0; border-top:1px solid var(--line); }

.zp-plan-item header > span { color:var(--zp-blue); font-size:var(--type-label); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-label); text-transform:uppercase; }

.zp-plan-reflection > span { color:var(--zp-blue); }

.zp-plan-item h3 { margin:var(--space-4) 0 0; font-size:var(--type-heading-3); font-weight:var(--weight-medium); }

.zp-plan-item h3 small { display:block; margin-top:.25rem; color:var(--muted); font-size:var(--type-translation-body); font-weight:var(--weight-regular); }

.zp-plan-item div p { margin:0; color:var(--body); font-size:var(--type-body); }

.zp-plan-item div p + p { margin-top:var(--space-4); }

.zp-plan-item div p strong { font-weight:var(--weight-semibold); }

.zp-plan-item div > small,.zp-plan-reflection > small { display:block; margin-top:var(--space-3); color:var(--muted); font-size:var(--type-translation-body); line-height:var(--leading-translation); }

.zp-plan-reflection { display:grid; grid-template-columns:14rem minmax(0,1fr); gap:var(--space-2) var(--space-6); padding:var(--space-7) 0; border-top:1px solid var(--line); }

.zp-plan-reflection p { margin:0; font-size:var(--type-body); line-height:var(--leading-body); }

.zp-plan-reflection > small { grid-column:2; max-width:42rem; }

.zp-other-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }

.zp-other-grid article { min-height:15rem; padding:var(--space-6); background:var(--surface); }

.zp-other-grid article > span { color:var(--zp-blue); font-size:var(--type-label); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-label); text-transform:uppercase; }

.zp-other-grid h3 { margin:var(--space-8) 0 var(--space-4); font-size:var(--type-heading-3); font-weight:var(--weight-medium); }

.zp-other-grid p { margin:0; color:var(--muted); font-size:var(--type-small); }

@media (max-width:900px) {

.zp-section-intro { grid-template-columns:7rem minmax(0,1fr); gap:var(--space-7); }

.zp-decision-content { grid-template-columns:1fr; padding-left:4.75rem; }

.zp-experiment-grid { grid-template-columns:1fr; }

.zp-artifact--portrait { max-width:32rem; }

.zp-other-grid { grid-template-columns:1fr; }

.zp-other-grid article { min-height:0; }
}

@media (max-width:640px) {

.zp-section-intro { grid-template-columns:1fr; gap:var(--space-5); }

.zp-research-routes article,.zp-research-facts > div,.zp-research-conclusion { grid-template-columns:1fr; gap:var(--space-4); }

.zp-research-conclusion > small { grid-column:1; }

.zp-decision summary { grid-template-columns:2rem minmax(0,1fr) 1.25rem; gap:var(--space-3); }

.zp-decision summary h3 span { display:block; margin:.3em 0 0; }

.zp-decision-content { padding-left:0; }

.zp-decision-copy dl > div { grid-template-columns:1fr; gap:var(--space-2); }

.zp-product-film figcaption { display:block; }

.zp-product-film figcaption > p { margin-top:var(--space-3); text-align:left; }

.zp-plan-meta,.zp-plan-item,.zp-plan-reflection { grid-template-columns:1fr; gap:var(--space-4); }

.zp-plan-meta strong { grid-row:auto; }

.zp-plan-meta small,.zp-plan-reflection > small { grid-column:1; }
}
/* 13. Responsive layouts */
@media (max-width:64rem) {

:root { --gutter:2rem; --section-space:5.5rem; --section-space-compact:4rem; --card-space:5.25rem; }

.section-head { gap:var(--space-7); }

.project-index-row { grid-template-columns:7rem minmax(0,1fr) max-content; }

.media-placeholder { min-height:27.5rem; }

.metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }

.metrics--two { grid-template-columns:repeat(2,minmax(0,1fr)); }

.metrics--three { grid-template-columns:repeat(3,minmax(0,1fr)); }

.metrics--four { grid-template-columns:repeat(4,minmax(0,1fr)); }

.metrics:not(.metrics--two):not(.metrics--four) .metric:nth-child(4) { border-left:0; }

.metrics:not(.metrics--two):not(.metrics--four) .metric:nth-child(n+4) { border-top:1px solid var(--line); }

.research-step { grid-template-columns:5.625rem 1fr; }

.research-step p { grid-column:2; }

.case-section { grid-template-columns:7rem minmax(0,1fr); gap:var(--space-7); }

.case-section--wide { grid-template-columns:7rem minmax(0,1fr); }

.section-intro { grid-template-columns:1fr; align-items:start; }

.proof-sequence { grid-template-columns:1fr; }

.proof-card { display:grid; grid-template-columns:minmax(16rem,.8fr) minmax(18rem,1.2fr); }

.proof-image { aspect-ratio:16 / 10; }

.website-preview { grid-template-columns:1fr; }

.timeline-entry { grid-template-columns:6.875rem 11.25rem 1fr; gap:var(--space-5); }

.da-role-band { grid-template-columns:7rem minmax(0,1fr); }

.da-role-band p { grid-column:2; }

.da-video-block { grid-template-columns:1fr; align-items:start; }

.da-video-copy { max-width:40rem; }

.da-signal-strip { grid-template-columns:repeat(3,1fr); }

.da-signal-strip p { grid-column:1 / -1; border-top:1px solid #343738; }

.da-product-definition { grid-template-columns:1fr; align-items:start; }

.da-architecture { grid-template-columns:1fr; align-items:start; }

.da-architecture figcaption { max-width:42rem; }
}

@media (max-width:48rem) {

:root {
    --gutter:1.5rem; --section-space:4rem; --section-space-compact:3rem; --card-space:4rem;
    --header-height:4.125rem;
  }

.display-pair,
  .page-title:has(> .translation-block),
  .section-title:has(> .translation-block),
  .research-content > h2:has(> .translation-block),
  .case-copy > h2:has(> .translation-block),
  .error-box h1:has(> .translation-block) { gap:var(--space-3); }

.home-hero { min-height:0; padding:var(--space-8) 0 var(--section-space); }

.home-hero .eyebrow { margin-bottom:var(--space-6); }

.hero-layout { grid-template-columns:1fr; gap:var(--space-7); }

.hero-summary { padding-top:0; }

.hero-actions { margin-top:var(--space-5); }

.section-head { grid-template-columns:1fr; gap:var(--space-5); margin-bottom:var(--space-8); }

.project-index-row { grid-template-columns:minmax(0,1fr) max-content; gap:var(--space-5) var(--space-4); padding:var(--space-7) 0; }

.project-index-meta { grid-column:1; display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-2) var(--space-4); }

.project-index-meta .kicker { width:100%; }

.project-index-copy { grid-column:1 / -1; }

.media-placeholder { min-height:0; aspect-ratio:4 / 3; }

.metrics,.metrics--three,.metrics--four { grid-template-columns:repeat(2,minmax(0,1fr)); }

.metric { padding:var(--space-5) var(--space-3) var(--space-5) 0; }

.metric + .metric { padding-left:var(--space-4); }

.metrics .metric:nth-child(odd) { border-left:0; }

.metrics .metric:nth-child(n+3) { border-top:1px solid var(--line); }

.research-steps { margin-top:var(--space-8); }

.research-step { grid-template-columns:1fr; gap:var(--space-2); padding:var(--space-5) 0; }

.research-step p { grid-column:auto; }

.note-row,.notes-page-list .note-row { grid-template-columns:1fr auto; gap:.3rem var(--space-4); padding:var(--space-5) 0; }

.note-date { grid-column:1; grid-row:1; }

.note-kind { grid-column:1; grid-row:2; }

.note-row > div:nth-child(3) { grid-column:1 / -1; grid-row:3; margin-top:var(--space-2); }

.note-row .row-arrow { grid-column:2; grid-row:1 / span 2; }

.status-pill { grid-column:2; grid-row:1 / span 2; align-self:start; justify-self:end; margin:0; }

.about-band { grid-template-columns:1fr; gap:var(--space-7); }

.page-hero { padding:var(--space-8) 0 var(--space-7); }

.work-grid { grid-template-columns:1fr; gap:var(--space-9); }

.project-hero { padding-top:var(--space-8); }

.project-visual { padding-bottom:var(--section-space); }

.case-body { padding-bottom:var(--section-space); }

.case-section { grid-template-columns:1fr; gap:var(--space-4); padding:var(--section-space-compact) 0; }

.project-photo--hero { width:calc(100% - 2 * var(--gutter)); }

.project-photo figcaption,.field-photo figcaption { flex-direction:column; gap:.15rem; }

.video-poster-grid { grid-template-columns:1fr; }

.research-evidence-bridge { grid-template-columns:1fr; }

.research-evidence-image { min-height:18rem; }

.destination-main { grid-template-columns:1fr; }

.destination-arrow { justify-self:end; }

.destination-facts { grid-template-columns:1fr; gap:var(--space-3); }

.destination-facts div { display:grid; grid-template-columns:7rem 1fr; gap:var(--space-3); }

.destination-facts dd { margin:0; }

.panel-foot { flex-direction:column; }

.field-archive-heading { grid-template-columns:1fr; gap:var(--space-4); }

.evidence-photo-wall { grid-template-columns:repeat(2,minmax(0,1fr)); }

.photo-tile figcaption { padding:2.4rem var(--space-3) var(--space-2); opacity:1; transform:none; }

.photo-tile figcaption span { display:none; }

.co-research-photos { grid-template-columns:1fr 1fr; }

.co-research-photos img { height:12rem; }

.co-research-photos img:first-child { grid-column:1 / -1; height:18rem; }

.proof-card { display:flex; }

.public-link-wall { columns:1; }

.media-feature-grid { grid-template-columns:1fr; }

.media-index-heading { grid-template-columns:1fr; gap:var(--space-3); }

.media-index a { grid-template-columns:4.75rem minmax(0,1fr); gap:var(--space-3); }

.media-index strong { grid-column:2; }

.research-paper-feature { grid-template-columns:1fr; }

.research-paper-cover { min-height:25rem; }

.project-publication { grid-template-columns:4.25rem minmax(0,1fr); }

.publication-jump { display:none; }

.research-more-link { align-items:flex-start; flex-direction:column; }

.website-preview-image { aspect-ratio:4 / 3; }

.artifact-grid { grid-template-columns:1fr; }

.artifact-grid .artifact:nth-child(3n) { grid-column:auto; }

.artifact:nth-child(3n) .media-placeholder { aspect-ratio:4 / 3; }

.scenario-grid { grid-template-columns:1fr; }

.evidence-item { grid-template-columns:4.75rem 1fr; gap:var(--space-3); }

.evidence-status { grid-column:2; }

.about-intro { padding-bottom:var(--section-space); }

.timeline-entry { grid-template-columns:1fr; gap:.45rem; padding:var(--space-5) 0; }

.lab-list { grid-template-columns:1fr; gap:var(--space-9); padding-bottom:var(--section-space); }

.da-origin-stage { grid-template-columns:1fr; gap:var(--space-6); }

.da-site-preview,.da-site-preview img { min-height:19rem; }

.da-role-band { grid-template-columns:1fr; gap:var(--space-4); padding:var(--space-5); }

.da-role-band p { grid-column:auto; }

.da-growth,.da-source-links,.da-poc-brief { grid-template-columns:1fr; }

.da-growth > div { padding:var(--space-5) 0; border-top:1px solid var(--line); border-left:0; }

.da-growth > div:first-child { border-top:0; }

.da-logo-row { display:flex; gap:var(--space-6); margin-right:calc(-1 * var(--gutter)); padding-right:var(--gutter); overflow-x:auto; scrollbar-width:thin; }

.da-logo-row figure { flex:0 0 6.5rem; }

.da-capability-line > div { grid-template-columns:repeat(2,minmax(0,1fr)); }

.da-capability-line > div > span,.da-capability-line > div > strong { min-height:6.5rem; }

.da-reuse-map,.da-poc-visuals { grid-template-columns:1fr; }

.da-poc-visuals button { aspect-ratio:16 / 11; }

.da-poc-visuals figcaption { grid-template-columns:1fr; gap:var(--space-2); }

.da-results { grid-template-columns:repeat(2,minmax(0,1fr)); }

.da-results > div { padding:var(--space-4); border-top:1px solid var(--line); }

.da-results > div:nth-child(odd) { padding-left:0; border-left:0; }

.da-results > div:nth-child(-n+2) { border-top:0; }

.da-source-links a,.da-poc-brief > div { min-height:0; }

.da-section-heading { grid-template-columns:1fr; gap:var(--space-4); }

.da-decision-quote { margin:var(--space-8) 0; padding:var(--space-7) 0; }

.da-product-definition ol { grid-template-columns:1fr; }

.da-product-definition li { display:grid; grid-template-columns:2rem 1fr; gap:var(--space-3); padding:var(--space-3) 0; border-top:1px solid #343738; border-left:0; }

.da-product-definition li:first-child { border-top:0; }

.da-product-definition li strong { margin-top:0; }

.da-signal-strip { grid-template-columns:repeat(3,1fr); }

.da-signal-strip > div { padding:var(--space-4) var(--space-3); }

.da-case-path > li { grid-template-columns:2.5rem minmax(0,1fr); gap:var(--space-3); }

.da-learning { padding:var(--space-5); }
}

@media (max-width:30rem) {

.display:not(.display-pair) { max-width:16rem; }

.meta-row { align-items:flex-start; }

.metrics--two { grid-template-columns:repeat(2,minmax(0,1fr)); }

.evidence-item { grid-template-columns:1fr; }

.evidence-status { grid-column:1; }

.da-capability-line > p { display:block; }

.da-capability-line > p span { display:block; margin-top:.2rem; }

.da-capability-line > div { grid-template-columns:1fr; }
}

@media (max-width:64rem) {

.feature-map { grid-template-columns:repeat(2,minmax(0,1fr)); }

.feature-map a:nth-child(3) { border-left:0; border-top:1px solid var(--line); }

.feature-map a:nth-child(4) { border-top:1px solid var(--line); }

.evidence-story,.evidence-story--reverse { grid-template-columns:1fr; gap:var(--space-6); }

.evidence-story--reverse .evidence-story-copy { order:initial; }

.evidence-frame--portrait { justify-self:start; }
}

@media (max-width:48rem) {

.evidence-caption { align-items:flex-start; flex-direction:column; gap:.15rem; }

.decision-grid,.feature-map { grid-template-columns:1fr; }

.decision-grid article { min-height:0; }

.feature-map a,.feature-map a:nth-child(3),.feature-map a:nth-child(4) { min-height:0; padding:var(--space-4) 0; border-top:1px solid var(--line); border-left:0; }

.feature-map a:first-child { border-top:0; }

.product-surface-heading { grid-template-columns:1fr; gap:var(--space-4); }

.product-gallery { grid-template-columns:1fr; grid-template-rows:auto; }

.gallery-shot--phone { grid-column:auto; grid-row:auto; max-height:42rem; }

.gallery-shot--phone img { object-fit:contain; }

.gallery-shot--media { aspect-ratio:4 / 3; }

.artifact-timeline li { grid-template-columns:5.5rem minmax(0,1fr); gap:var(--space-3); }

.artifact-timeline small { grid-column:2; text-align:left; }
}

/* 14. Accessibility */
@media (prefers-reduced-motion:reduce) {

html { scroll-behavior:auto; }

*,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}