/* Production layer: one visual system for every language and both page families. */
html.flow-site {
  --display: "Cheese Foam Oolong Song CJK", "Amstelvar Web", serif;
  --body: "Cheese Foam Oolong Song CJK", "Amstelvar Web", serif;
  scroll-behavior: smooth;
}
.flow-site body { font-family: var(--body); letter-spacing: .012em; }
.flow-site :is(h1,h2,h3,p,a,button,span) { overflow-wrap: break-word; }
.flow-site :is(p, h2, h3) { hyphens: auto; }
.flow-site .record-slide > * { min-width: 0; }
.flow-site .site-header { gap: 20px; }
.flow-site .language-switcher { display: flex; position: static; margin-left: auto; gap: 12px; flex-shrink: 0; background: transparent; color: var(--ink); border: 0; }
.flow-site .language-option { padding: 10px 2px; font-size: 17px; color: inherit; border: 0; background: transparent; }
.flow-site .language-option[aria-current] { text-decoration: underline; text-underline-offset: .4em; text-decoration-color: var(--bronze); }
.flow-site .nav-toggle { display: none; }
.flow-site .site-nav { display: flex; position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; background: transparent; flex-direction: row; flex-wrap: wrap; padding: 0; gap: 0; }
.flow-site .nav-pill { font-size: 15px; padding: 10px 8px; }
html.flow-site .hero__name-line--first > span { font-family: var(--display); }
html.flow-site .hero__name { font-size: clamp(56px, 8vw, 145px); }
html.flow-site .hero__name-line { max-width: 47%; }
html.flow-site .hero__name-line--second { font-size: .82em; }
/* Requested Latin-name lockup; the Chinese composition stays unchanged. */
html.flow-site:is([lang="en"], [lang="de"]) .hero__name {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .05em;
}
html.flow-site:is([lang="en"], [lang="de"]) .hero__name-line {
  max-width: 100%;
  padding-block: .025em;
  margin: 0;
  line-height: 1.18;
  text-align: left;
  align-self: flex-start;
}
html.flow-site:is([lang="en"], [lang="de"]) .hero__name-line--second { font-size: .62em; }
html.flow-site:is([lang="en"], [lang="de"]) .hero__name-line--surname {
  position: absolute;
  top: 0;
  right: 0;
  font-size: .96em;
  text-align: right;
}
@media (min-width: 641px) and (max-width: 1050px) {
  html.flow-site:is([lang="en"], [lang="de"]) .hero__name { font-size: 6vw; }
}
@media (min-width: 1051px) and (max-height: 800px) {
  html.flow-site:is([lang="en"], [lang="de"]) .hero__name { top: 27%; }
}
html.flow-site .display-title,
html.flow-site .display-title[data-preserve-lines],
html.flow-site .record-slide h2,
html.flow-site .record-slide h2[data-preserve-lines] {
  font-size: clamp(42px, 5.7vw, 98px); line-height: 1.25; letter-spacing: .015em;
}
.flow-site .title-phrase { white-space: normal; overflow: visible; }
.flow-site :is(.record-slide__body, .about__grid, .creative__layout) > * { min-width: 0; }
.flow-site :is(.service h3, .creative-card h3, .degree h3) { line-height: 1.4; letter-spacing: .015em; }
html.flow-site #track-record .track-intro__copy { white-space: normal; text-wrap: pretty; }
.flow-site .record-slide__type { text-transform: none; color: var(--blue); }
.flow-site .record-slide--dark .record-slide__type { color: var(--accent-light); }
.flow-site .record-slide__summary { max-width: none; }
.flow-site .chapter-gallery__header { align-items: center; }
.flow-site .chapter-gallery__heading { flex: 1 1 130px; line-height: 1.5; }
.flow-site .chapter-gallery__controls { margin-left: auto; }
.flow-site .chapter-gallery__controls button { min-width: 44px; min-height: 44px; }
.flow-site .portfolio-page { --portfolio-edge: var(--page-x); }
.flow-site .portfolio-progress { display: none; }
.flow-site .portfolio-reveal { opacity: 1; transform: none; transition: none; }
.flow-site :is(.portfolio-hero, .portfolio-index, .portfolio-chapter, .portfolio-end) { padding: 120px var(--page-x) 155px; overflow: visible; }
.flow-site .portfolio-hero { background: var(--paper); color: var(--ink); gap: 45px; }
.flow-site .portfolio-hero::after { border: 2px solid var(--bronze); border-radius: 47% 53% 45% 55%; opacity: .55; }
.flow-site .portfolio-index { background: var(--fog); }
.flow-site .portfolio-chapter--ink { background: var(--moss); color: var(--paper); }
.flow-site .portfolio-end { background: var(--moss); color: var(--paper); gap: 50px; }
html.flow-site .portfolio-hero__title { font: 700 clamp(60px, 8.5vw, 150px)/1.18 var(--display); letter-spacing: .015em; text-transform: none; color: inherit; }
html.flow-site .portfolio-hero__title > span { padding: .07em 0; margin: 0; overflow: visible; }
html.flow-site .portfolio-hero__title > span:nth-child(2) { padding-left: 18vw; }
html.flow-site[lang="zh-CN"] .portfolio-hero__title > span:nth-child(2) {
  position: relative;
  top: clamp(24px, 7vh, 80px);
  padding-left: 0;
  padding-right: 3vw;
  text-align: right;
}
@media (max-width: 640px) {
  html.flow-site[lang="zh-CN"] .portfolio-hero__title > span:nth-child(2) { top: 24px; padding-right: 0; }
}
@media (min-width: 641px) and (max-height: 800px) {
  html.flow-site[lang="zh-CN"] .portfolio-hero__title > span:nth-child(2) { top: 16px; }
}
html.flow-site .portfolio-hero__title > span > span { transform: none; transition: none; }
html.flow-site :is(.portfolio-display, .portfolio-end__title) { font: 700 clamp(42px, 5.7vw, 98px)/1.25 var(--display); letter-spacing: .015em; }
.flow-site :is(.portfolio-hero__meta, .portfolio-kicker) { border: 0; font-size: 16px; text-transform: none; letter-spacing: .02em; }
.flow-site :is(.portfolio-hero__footer, .portfolio-footer) { font-size: 15px; line-height: 1.6; text-transform: none; }
.flow-site :is(.portfolio-index__lead, .portfolio-chapter__header) { grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 50px 6vw; margin-top: 60px; }
.flow-site :is(.portfolio-index__intro, .portfolio-chapter__intro) { font-size: clamp(18px,1.45vw,24px); line-height: 1.85; }
.flow-site .portfolio-index__list { margin-top: 65px; border: 0; }
.flow-site .portfolio-index__list li { border: 0; position: relative; }
.flow-site .portfolio-index__list li::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 18px; background: var(--bronze); opacity: .55;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 28' preserveAspectRatio='none'%3E%3Cpath d='M2 19 C190 -8 295 35 505 15 S820 2 998 18' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.flow-site .portfolio-index__list a { padding: 30px 0; }
html.flow-site .portfolio-index__list strong { font: 700 clamp(24px,3vw,48px)/1.4 var(--display); letter-spacing: .015em; overflow-wrap: break-word; }
.flow-site .portfolio-projects { margin-top: 80px; gap: 70px 5vw; }
.flow-site :is(.portfolio-project, .portfolio-project__gallery-bar, .portfolio-project__meta, .portfolio-project__links a, .portfolio-end__links, .portfolio-end__links a) { border: 0; }
.flow-site .portfolio-project__gallery { display: block; position: relative; aspect-ratio: 16/10; overflow: hidden; background: transparent; scroll-behavior: auto; }
.flow-site .portfolio-project__gallery .portfolio-project__frame { position: absolute; inset: 0; margin: 0; height: 100%; aspect-ratio: auto; background: transparent; pointer-events: none; overflow: visible; opacity: 0; transition: opacity 280ms var(--ease-out); }
.flow-site .portfolio-project__gallery .portfolio-project__frame.is-active { opacity: 1; }
.flow-site .portfolio-project__gallery img { width: 100%; max-width: 100%; height: 100%; object-fit: contain; object-position: left center; border-radius: 35% 45% 30% 18% / 23% 32% 38% 30%; }
/* Portrait-led social project: taller, gentler silhouette, inset to the right. */
.flow-site [data-project="zheng-qinwen-winter-training"] .portfolio-project__gallery {
  aspect-ratio: auto;
  height: clamp(360px, 36vw, 560px);
}
.flow-site [data-project="zheng-qinwen-winter-training"] .portfolio-project__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 10%;
}
.flow-site [data-project="zheng-qinwen-winter-training"] .portfolio-project__gallery img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-position: center;
  border-radius: 22% 28% 24% 18% / 10% 12% 11% 9%;
}
.flow-site .portfolio-project__gallery-bar { font-size: 13px; letter-spacing: .02em; text-transform: none; flex-wrap: wrap; }
.flow-site .portfolio-project__gallery-controls { display: flex; align-items: center; gap: 10px; }
.flow-site .portfolio-project__gallery-controls button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; color: inherit; background: transparent; opacity: .45; }
.flow-site .portfolio-project__gallery-controls button[hidden] { display: none; }
.flow-site .portfolio-project__meta { font-size: 14px; text-transform: none; letter-spacing: .015em; }
html.flow-site .portfolio-project h3 { font: 700 clamp(26px,2.6vw,43px)/1.4 var(--display); letter-spacing: .015em; max-width: none; }
.flow-site .portfolio-project p { font-size: 15px; line-height: 1.7; letter-spacing: .015em; text-transform: none; }
.flow-site .portfolio-project__links a { padding: 12px 0; font-size: 17px; text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: .35em; }
.flow-site .portfolio-end__links { gap: 30px; }
.flow-site .portfolio-end__links a { padding-inline: 0; background: transparent; }
.flow-site .portfolio-chapter--ink .flow-speedlines, .flow-site .portfolio-end .flow-speedlines { color: var(--bronze-light); }
@media (hover: hover) and (pointer: fine) {
  .flow-site .portfolio-project__gallery-controls button:hover { background: transparent; color: inherit; opacity: 1; }
  .flow-site :is(.portfolio-index__list a, .portfolio-project__links a):hover { padding-inline: 0; }
  .flow-site .portfolio-end__links a:hover { background: transparent; color: var(--bronze-light); }
  .flow-site .portfolio-project:hover img { transform: none; }
}
@media (min-width: 1051px) {
  html.flow-site #tilta .display-title { font-size: clamp(30px,3.3vw,60px); }
  html.flow-site .record-slide--student.has-chapter-gallery h2 { font-size: clamp(36px,4.2vw,72px); }
  html.flow-site .record-slide--student .chapter-side .record-slide__summary--details { font-size: clamp(14px,1.15vw,19px); line-height: 1.65; }
}
@media (max-width: 1280px) {
  .flow-site .site-header { position: sticky; top: 0; flex-wrap: wrap; padding: 8px 24px; gap: 0 15px; }
  .flow-site .site-nav { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .flow-site .site-nav .nav-pill { white-space: nowrap; font-size: 14px; }
  .flow-site .language-switcher { margin-left: auto; }
  .flow-site .portfolio-header .portfolio-home { display: inline-flex; }
}
@media (max-width: 920px) {
  .flow-site :is(.portfolio-index__lead, .portfolio-chapter__header) { grid-template-columns: 1fr; }
  .flow-site .portfolio-chapter__header > * { grid-column: 1; grid-row: auto; }
}
@media (max-width: 640px) {
  html.flow-site .record-slide--student.has-chapter-gallery h2 { font-size: clamp(30px, 8.7vw, 52px); }
  .flow-site .tilta__services { grid-template-columns: minmax(0, 1fr); }
  .flow-site .site-header { padding-inline: 16px; }
  .flow-site .language-option { font-size: 15px; }
  html.flow-site .hero__name { font-size: 10.5vw; }
  html.flow-site .hero__name-line { max-width: 100%; }
  html.flow-site .hero__name-line--second { font-size: 1.05em; }
  html.flow-site .display-title, html.flow-site .display-title[data-preserve-lines], html.flow-site .record-slide h2, html.flow-site .record-slide h2[data-preserve-lines], html.flow-site #tilta .display-title { font-size: clamp(30px,8.7vw,52px); }
  .flow-site :is(.portfolio-hero, .portfolio-index, .portfolio-chapter, .portfolio-end) { padding: 70px 24px 110px; }
  html.flow-site .portfolio-hero__title { font-size: clamp(40px,11vw,70px); }
  html.flow-site :is(.portfolio-display, .portfolio-end__title) { font-size: clamp(30px,8.7vw,52px); }
  .flow-site .portfolio-hero__footer { grid-template-columns: 1fr; gap: 25px; }
  .flow-site .portfolio-hero__footer a { border: 0; }
  .flow-site :is(.portfolio-hero__meta, .portfolio-kicker) { font-size: 14px; flex-wrap: wrap; }
  html.flow-site .portfolio-project h3 { font-size: 28px; }
  .flow-site .portfolio-project__gallery-bar { gap: 4px; }
  .flow-site .portfolio-index__list a { grid-template-columns: 25px minmax(0,1fr) 36px; gap: 8px; }
  .flow-site .portfolio-index__list .flow-arrow { width: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  html.flow-site { scroll-behavior: auto; }
  .flow-site :is(.portfolio-project__frame, .portfolio-project img) { transform: none !important; transition: opacity 150ms ease; }
}
@media (min-width: 641px) and (max-width: 1050px) {
  html.flow-site #tilta { grid-template-columns: minmax(0, 1fr); }
  .flow-site #tilta > *, .flow-site .service { min-width: 0; }
  .flow-site .tilta__services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}