/* Shared reading sizes for the portfolio, independent of the artwork/UI demos. */
:root {
  --portfolio-body: var(--nz-body, 17px);
  --portfolio-small: var(--nz-small, 15px);
  --portfolio-ui: var(--nz-ui, 14px);
  --portfolio-caption: var(--nz-caption, 13px);
  --portfolio-label: var(--nz-label, 12px);
}

/* Homepage: keep the display titles, give supporting information more weight. */
#ning-water-garden .ng-section-head { gap: 32px; }
#ning-water-garden .ng-section-head p {
  font-size: var(--portfolio-small);
  line-height: 1.7;
  max-width: 270px;
}
#ning-water-garden .ng-project-toggle .ng-type {
  font-size: var(--portfolio-small);
  line-height: 1.65;
}
#ning-water-garden .ng-project-toggle .ng-index { font-size: var(--portfolio-caption); }
#ning-water-garden .ng-project-copy,
#ning-water-garden .ng-practice p,
#ning-water-garden .ng-about p { font-size: var(--portfolio-body); line-height: 1.8; }
#ning-water-garden .ng-practice p { max-width: 470px; }
#ning-water-garden .ng-about p { max-width: 610px; }
#ning-water-garden .ng-about-title-line { display: block; text-wrap: balance; }
html[lang="zh-CN"] #ning-water-garden .ng-about h2 {
  font-size: clamp(36px, 6vw, 86px);
  max-width: 1100px;
}
#ning-water-garden .ng-eyebrow { font-size: var(--portfolio-caption); letter-spacing: .12em; }
#ning-water-garden .ng-work-end,
#ning-water-garden .ng-footer { font-size: var(--portfolio-caption); line-height: 1.7; }
#ning-water-garden .ng-process,
#ning-water-garden .ng-contacts a { font-size: var(--portfolio-ui); }
#ning-water-garden .ng-material-tag { font-size: var(--portfolio-label); line-height: 1.6; }
.index-toggle { font-size: var(--portfolio-caption); letter-spacing: .09em; }
.chapter-rail button { font-size: var(--portfolio-caption); min-height: 44px; }
.chapter-rail b { font-size: var(--portfolio-caption); }
.motion-control button { font-size: var(--portfolio-label); }
.work-book-hint,
.work-lamp-hint,
.bf-label { font-size: var(--portfolio-caption); }
.work-hover-caption { font-size: var(--portfolio-ui); line-height: 1.5; }
.work-hover-caption span:last-child { font-size: var(--portfolio-label); }
.opening-bottom button { font-size: var(--portfolio-ui); }
.scene-step { font-size: var(--portfolio-caption); }
.curtain-enter-en { font-size: var(--portfolio-label); }
.flower-label { font-size: var(--portfolio-label); }
.preview-index,
.profile-date,
.profile-pagination { font-size: var(--portfolio-label); }
#ning-water-garden #flower-preview-description { font-size: 16px; line-height: 1.85; }
#ning-water-garden .profile-details h4 { font-size: var(--portfolio-small); line-height: 1.6; }
#ning-water-garden .profile-details p { font-size: var(--portfolio-small); line-height: 1.8; }
#ning-water-garden .profile-links a { font-size: var(--portfolio-ui); }

/* Use explicit locale-aware stacks throughout the homepage. The higher
   specificity also wins over the original ID-scoped display styles. */
html #ning-water-garden { font-family:var(--nz-sans); }
html #ning-water-garden :is(.ng-serif,.entry-name,.curtain-signature,.preview-copy h3) { font-family:var(--nz-serif); }
html #ning-water-garden :is(.moon-eyebrow,.curtain-enter,.curtain-enter-en,.flower-label,.preview-index,.preview-close,.profile-date,.profile-details h4,.profile-details p,.profile-links a,.profile-pagination,.opening-bottom button,.work-lamp-hint,.work-book-hint,.work-hover-caption,.work-cover-missing small) { font-family:var(--nz-sans); }
html #ning-water-garden #flower-preview-description { font-family:var(--nz-sans); }
html #ning-water-garden .moon-stage .moon-eyebrow { font-family:var(--nz-sans); }
html #ning-water-garden .preview-type { font-family:var(--nz-sans)!important; }
html #ning-water-garden .ng-system-motion>span { font-family:var(--nz-serif); }
html :is(.index-toggle,.chapter-rail,.bf-label,.skip-link) { font-family:var(--nz-sans); }
/* English names are display lettering in either language, rather than CJK text. */
html #ning-water-garden :is(.shore-intro h2,.water-intro h1,.ng-project-toggle .ng-title) { font-family:var(--site-display,var(--nz-serif)); }
html[lang="zh-CN"] #ning-water-garden :is(.ng-section-head h2,.ng-practice h2,.ng-about h2,.preview-copy h3) {
  font-family:var(--nz-serif);letter-spacing:0;line-height:1.35;word-break:normal;
}
html[lang="zh-CN"] #ning-water-garden :is(.curtain-signature,.entry-name) { font-family:var(--nz-serif);font-style:normal;letter-spacing:.04em;line-height:1.35; }
html[lang="zh-CN"] #ning-water-garden .ng-system-motion>span { font-style:normal;letter-spacing:0; }
html[lang="zh-CN"] #ning-water-garden :is(.moon-eyebrow,.ng-eyebrow,.curtain-enter,.curtain-enter-en,.flower-label,.preview-index,.profile-date) { letter-spacing:.04em;line-height:1.7; }

/* Case-study navigation, metadata and captions use the same readable hierarchy. */
.case-page .case-nav > a:first-child,
.case-page .case-discover,
.case-page .case-resources a,
.case-page[data-case] .case-intro > .case-resources a,
.case-page .case-footer > a:first-child { font-size: var(--portfolio-ui); }
.case-page .case-eyebrow,
.case-page .case-number { font-size: var(--portfolio-label); letter-spacing: .12em; }
.case-page .case-description { font-size: 18px; line-height: 1.8; }
.case-page :is(.case-facts, .nexo-team) dt { font-size: var(--portfolio-label); }
.case-page :is(.case-facts, .nexo-team) dd { font-size: var(--portfolio-small); line-height: 1.75; }
.case-page figcaption { font-size: var(--portfolio-caption); line-height: 1.65; gap: 14px; }
.case-page .case-footer span { font-size: var(--portfolio-label); }
.case-page .case-archive-note { font-size: var(--portfolio-caption); }
.case-page :is(.fellou-index, .study-index, .msu-index) a {
  font-size: var(--portfolio-ui);
  line-height: 1.5;
  gap: 12px;
}
.case-page :is(.fellou-index, .study-index, .msu-index) a span { font-size: var(--portfolio-label); }
.case-page .fellou-detail > span { font-size: var(--portfolio-label); }

/* Keep the enlarged quotes and the product screens at their own designed scale. */
:is(.fellou-story, .nexo-story, .study-story, .msu-story) p:not(.case-eyebrow):where(:not(.mood-device *, .mood-premise p, .msu-margin-note)) {
  font-size: var(--portfolio-body);
  line-height: 1.8;
}
.case-page .nexo-flow p:not(.case-eyebrow),
.case-page .nexo-screen-heading p:not(.case-eyebrow),
.case-page .study-note p:not(.case-eyebrow) { font-size: var(--portfolio-small); }
.case-page .study-steps p,
.case-page .study-comparison p { font-size: var(--portfolio-small) !important; line-height: 1.8; }
.case-page .study-steps p { max-width: 250px; }
.case-page .study-steps li > span,
.case-page .study-narrative article > span { font-size: var(--portfolio-label); }
.case-page .study-taskline,
.case-page .study-tools > div,
.case-page .study-atlas summary { font-size: var(--portfolio-ui); }
.case-page .nexo-screen figcaption small,
.case-page .nexo-prototype-link small,
.case-page .nexo-film-kicker > span,
.case-page .nexo-film-play small,
.case-page .nexo-film-chapters time,
.case-page .nexo-resources small { font-size: var(--portfolio-label); }
.case-page .nexo-film-play,
.case-page .nexo-film-navigation summary,
.case-page .nexo-film-chapters button { font-size: var(--portfolio-ui); }
.case-page .nexo-film-copy .nexo-film-status { font-size: var(--portfolio-ui) !important; }
.case-page .nexo-endmatter .nexo-concept-note { font-size: var(--portfolio-caption) !important; }
.case-page .nexo-resources .case-resources a { font-size: var(--portfolio-small); }
.case-page .study-story .mood-handoff p { font-size: var(--portfolio-caption); }
.case-page .study-story .mood-demo-guide > p:not(.case-eyebrow) { font-size: var(--portfolio-small); }
.case-page .mood-demo-steps li { font-size: var(--portfolio-ui); line-height: 1.6; }
.case-page .mood-demo-steps li > span { font-size: var(--portfolio-label); flex-shrink: 0; }
.case-page .study-story .mood-demo-rule p:not(.case-eyebrow) { font-size: var(--portfolio-ui); }
.case-page .mood-restart { font-size: var(--portfolio-ui); }
.case-page .study-story .mood-demo-guide .mood-demo-disclaimer,
.case-page .study-story .mood-demo-status { font-size: var(--portfolio-caption); }
.case-page .mood-branches span,
.case-page .mood-palette span { font-size: var(--portfolio-caption); }
.case-page .study-story .mood-branches p,
.case-page .mood-rules dd { font-size: var(--portfolio-small); }

/* The separate collection uses the same supporting type, without larger covers. */
.return-link,
.cover-action,
.dialog-close { font-size: var(--portfolio-ui); }
.collection-intro .eyebrow,
.catalog-count,
.card-number,
.dialog-bar { font-size: var(--portfolio-label); }
.collection-intro .intro-bottom p { font-size: var(--portfolio-body); }
.card-caption p,
.site-footer,
.project-pages figcaption { font-size: var(--portfolio-caption); line-height: 1.7; }
#project-description { font-size: var(--portfolio-body); }

@media (min-width: 761px) {
  .chapter-rail, body.reading-projects .chapter-rail { width: 108px; }
  body.reading-projects .chapter-rail { top: 34%; }
  #ning-water-garden .ng-project-toggle { grid-template-columns: 42px minmax(0, 1fr) minmax(210px, 27%) 24px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  #ning-water-garden .ng-project-toggle { grid-template-columns: 28px minmax(0, 1fr) minmax(170px, 29%) 20px; }
  body.reading-projects .chapter-rail { right: 12px; width: 94px; }
  .chapter-rail b { font-size: var(--portfolio-label); }
}
@media (max-width: 1000px) {
  #ning-water-garden .ng-section-head { display: block; }
  #ning-water-garden .ng-section-head p { max-width: 420px; margin-top: 20px; }
}
@media (max-width: 760px) {
  :root { --portfolio-body: var(--nz-body, 16px); --portfolio-small: var(--nz-small, 14px); }
  .case-page .case-description { font-size: 17px; }
  .case-page .case-resources { min-width: 0; }
  .case-page .case-intro > .case-resources { gap: 8px 22px; }
  .case-page figcaption { flex-wrap: wrap; row-gap: 6px; }
  .case-page .case-footer { flex-wrap: wrap; }
  .case-page .case-facts { gap: 26px 20px; }
  .case-page .study-index { gap: 12px 20px; }
  .case-page .mood-demo-steps { flex-wrap: wrap; }
  body.reading-projects.index-open .chapter-rail { width: 118px; }
  .opening-bottom .follow-reflection { font-size: var(--portfolio-caption) !important; }
  .opening-bottom .skip-opening { font-size: var(--portfolio-caption) !important; }
  .opening-bottom .scene-step { font-size: 11px; }
}