/* Six clear routes; retain SANTOO's established scene, typography and restraint. */
body[data-page="practice"] { --page-bg: url("assets/works-bg.jpg"); }
body[data-page="works"] { --page-bg: url("assets/works-bg.jpg"); }
.immersive-directory-item { text-decoration:none; }
body[data-page="exhibitions"] { --page-bg: url("assets/project-bg.jpg"); }
.site-nav { grid-template-columns: repeat(6, minmax(0,1fr)); }
.site-nav > a, .home-nav > a { width: auto !important; flex-basis: auto !important; }
.site-nav > .language-menu, .home-nav > .language-menu { width:auto !important; flex-basis:auto !important; }
.site-utility { position:fixed; bottom:10px; left:50%; transform:translateX(-50%); z-index:65; color:#6d6d66; font:7px/1.6 "Michroma",sans-serif; white-space:nowrap; text-shadow:0 0 5px #fff; }
.site-utility a { text-decoration:none; }
.record-note { color:#77776f; font-size:12px !important; }
.project-copy .project-focus { margin:6px 0 24px; font-size:16px; font-weight:500; line-height:1.65; }
.project-copy > p:not(.lead):not(.record-note) { max-width:700px; line-height:1.9; }
.project-record { max-width:700px; margin:26px 0; padding:18px 0; border-top:1px solid rgba(17,17,17,.18); border-bottom:1px solid rgba(17,17,17,.18); }
.project-record h4 { margin:0 0 12px; font-size:12px; font-weight:500; color:#77776f; }
.project-record p { margin:0 0 14px; font-size:13px; line-height:1.85; }
.project-record a { font-size:12px; text-underline-offset:4px; }
.activity-heading { margin:36px 0 18px; font-size:14px; font-weight:500; line-height:1.6; }
.activity-updates a { font-size:12px; text-underline-offset:4px; }
.section-body .evidence-source { margin:8px 0 0; color:#77776f; font-size:11px; line-height:1.7; }
.record .record-source { margin-top:10px; font-size:11px; }
.section-actions { display:flex; gap:20px; flex-wrap:wrap; }
.plain-links { display:flex; flex-direction:column; gap:22px; padding-top:8px; font-size:13px; }
.plain-links a { text-underline-offset:5px; }
.contact-email { font-size:clamp(20px,3vw,34px); text-decoration:none; }
.gallery-filters { display:flex; gap:26px; margin-top:24px; }
.gallery-filters button { padding:5px 0; border:0; border-bottom:1px solid transparent; color:#85857d; background:transparent; font:10px/1.7 "Noto Sans",sans-serif; cursor:pointer; }
.gallery-filters button[aria-pressed="true"] { color:#111; border-bottom-color:#111; }
.artwork-card[hidden] { display:none !important; }
.artwork-gallery-page .artwork-grid { margin-top:24px; }
.gallery-edition > [data-gallery-years], .gallery-edition > [data-gallery-count] { padding:0; color:inherit; }
@media(min-width:981px) {
  .immersive-page .site-nav, .home-nav { width:min(850px,calc(100vw - 180px)); }
}
@media(max-width:980px) {
  .immersive-page .site-nav { width:210px; }
}
@media(max-width:820px) {
  .home-nav { width:100%; align-items:start; }
  .home-nav > .language-menu { justify-content:flex-start; }
  .home-nav .language-options { right:auto; left:0; z-index:6; }
  .immersive-page .brand { max-width:48vw; font-size:8px; }
  .site-utility { left:auto; right:20px; bottom:19px; transform:none; font-size:6px; }
  .gallery-filters { gap:24px; }
}
@media(max-width:640px) {
  .gallery-filters { gap:20px; margin-top:19px; }
  .gallery-filters button { font-size:10px; }
  .gallery-footer { flex-wrap:wrap; }
}

/* Literature introduction: a short text beside the original edition cover. */
.book-feature { display:grid; grid-template-columns:minmax(0,1fr) 196px; gap:64px; align-items:center; }
.book-feature-copy { min-width:0; }
.book-feature-title { margin:0 0 22px; font-family:"Noto Serif",serif; font-size:clamp(22px,2.5vw,30px); line-height:1.5; font-weight:400; }
.book-feature-summary { margin:0 0 30px; max-width:440px; line-height:1.95; }
.book-feature-links { display:flex; flex-direction:column; align-items:flex-start; gap:18px; font-size:13px; line-height:1.8; }
.book-feature-links a { text-underline-offset:5px; }
.book-feature-cover { margin:0; }
.book-feature-cover img { display:block; width:100%; height:auto; cursor:default; filter:grayscale(1); transition:filter .35s ease; }
.book-feature-cover img:hover { filter:grayscale(0); }
@media(prefers-reduced-motion:reduce) { .book-feature-cover img { transition:none; } }
@media(max-width:640px) {
  .book-feature { grid-template-columns:minmax(0,1fr); gap:32px; align-items:start; }
  .book-feature-title { font-size:24px; }
  .book-feature-cover { width:156px; justify-self:end; }
}

/* Preserve the artist-provided analytics screenshot and its original aspect ratio. */
.sound-feature { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:48px; align-items:center; }
.sound-feature-copy { min-width:0; }
.sound-feature-copy > :first-child { margin-top:0; }
.sound-feature-copy > :last-child { margin-bottom:0; }
.sound-reach { margin:0; }
.sound-reach img { display:block; width:100%; height:auto; cursor:default; filter:grayscale(1); transition:filter .35s ease; }
.sound-reach img:hover { filter:grayscale(0); }
@media(prefers-reduced-motion:reduce) { .sound-reach img { transition:none; } }
.sound-reach figcaption { margin-top:12px; color:#6d6d66; font-size:11px; line-height:1.8; }
.sound-reach figcaption span { display:block; }
.sound-reach-source { margin-top:4px; font-size:10px; }
@media(max-width:640px) {
  .sound-feature { grid-template-columns:minmax(0,1fr); gap:30px; }
  .sound-reach { width:min(100%,280px); justify-self:end; }
}

/* Emphasize page categories while preserving the quiet primary navigation. */
.immersive-directory-primary {
  display:inline-block;
  color:#111;
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.06em;
  -webkit-text-fill-color:currentColor;
  -webkit-text-stroke:.15px transparent;
  transform:scale(1);
  transform-origin:right center;
  transition:color .6s ease, -webkit-text-fill-color .6s ease, -webkit-text-stroke .6s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.immersive-directory-item { padding:10px 0; }
.immersive-directory-item:hover .immersive-directory-primary,
.immersive-directory-item:focus-visible .immersive-directory-primary {
  color:transparent;
  -webkit-text-fill-color:transparent;
  font-synthesis:none;
  -webkit-text-stroke:.15px #111;
  text-shadow:none;
  transform:scale(1.2);
}
:lang(zh) .immersive-directory-primary,
:lang(ja) .immersive-directory-primary { font-size:14px; }
@media(prefers-reduced-motion:reduce) {
  .immersive-directory-primary { transition:none; }
}

/* About: the artist's words and portrait, with one studio photograph. */
.artist-profile { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:52px; align-items:start; }
.artist-profile-copy, .santoo-profile-copy { min-width:0; }
.artist-profile-copy > :first-child, .santoo-profile-copy > :first-child { margin-top:0; }
.artist-profile-copy .lead, .santoo-profile-copy .lead { margin-bottom:22px; }
.artist-portrait { margin:0; }
.artist-portrait img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; object-position:66% 50%; }
.santoo-profile { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:44px; align-items:start; }
.santoo-studio-photo { margin:0; }
.santoo-studio-photo img { display:block; width:100%; height:auto; }
.santoo-studio-photo figcaption { margin-top:12px; color:#77776f; font-size:11px; line-height:1.6; }
/* Studio choices lead to a single detail view in the existing dialog. */
.studio-selector[hidden], .studio-detail[hidden] { display:none !important; }
.studio-selector-intro { margin:0 0 32px; }
.studio-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.studio-choice { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:15px; min-width:0; padding:24px 24px 28px 0; border:0; border-top:1px solid rgba(17,17,17,.25); border-bottom:1px solid rgba(17,17,17,.12); background:transparent; color:#111; text-align:left; cursor:pointer; }
.studio-choice-year { color:#77776f; font:10px/1.5 "Michroma",sans-serif; }
.studio-choice-title { font:400 17px/1.8 "Michroma","Noto Sans",sans-serif; }
.studio-choice-note { color:#77776f; font:12px/1.8 "Noto Sans",sans-serif; }
.studio-choice-arrow { position:absolute; right:0; top:24px; font-size:18px; transition:transform .25s ease; }
.studio-choice:hover, .studio-choice:focus-visible { border-color:#111; }
.studio-choice:hover .studio-choice-arrow { transform:translateX(3px); }
.studio-back { display:inline-block; margin:0 0 26px; padding:0; border:0; background:transparent; color:#55554e; font:12px/1.7 "Noto Sans",sans-serif; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.studio-detail-title { margin:0 0 12px; font:400 clamp(22px,2.5vw,30px)/1.5 "Michroma","Noto Sans",sans-serif; overflow-wrap:anywhere; }
.studio-detail-title:focus { outline:none; }
.studio-established { margin:0 0 24px; color:#77776f; font-size:11px !important; }
.studio-photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:30px; }
.studio-photo { display:grid; place-items:center; min-width:0; margin:0; background:rgba(17,17,17,.025); }
.studio-photo img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; cursor:default; }
.section-body .studio-photo-source { margin:14px 0 0; color:#77776f; font-size:10px; line-height:1.6; }
@media(max-width:640px) {
  .artist-profile, .santoo-profile { grid-template-columns:minmax(0,1fr); gap:28px; }
  .artist-portrait { width:190px; justify-self:end; }
  .santoo-studio-photo { width:100%; }
  .studio-choices, .studio-photo-grid { grid-template-columns:minmax(0,1fr); gap:22px; }
  .studio-choice-title { font-size:17px; }
  .studio-detail-title { font-size:22px; }
  .studio-photo img { height:auto; max-height:none; aspect-ratio:16/10; object-fit:cover; }
}
@media(prefers-reduced-motion:reduce) { .studio-choice-arrow { transition:none; } }

.immersive-dialog:has([data-studio-browser] .studio-detail:not([hidden])) > .immersive-dialog-title { display:none; }

@media(min-width:641px) { .studio-photo-grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* Crop only the display frame; keep all source photographs intact. */
.studio-photo img[src$="wenzhe-wujiang-frames.jpg"] { object-position:50% 65%; }
.studio-photo img[src$="wenzhe-wujiang-interior.jpg"] { object-position:50% 40%; }
.studio-photo img[src$="santoo-studio-signs.jpg"] { object-position:50% 58%; }

/* Artist selection belongs inside About; the scene keeps only two entrances. */
[data-artist-selector][hidden], [data-artist-panel][hidden], [data-artist-content][hidden] { display:none !important; }
.artist-selector { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
.artist-choice { display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; padding:30px 0; border:0; border-top:1px solid rgba(17,17,17,.25); border-bottom:1px solid rgba(17,17,17,.12); color:#111; background:transparent; text-align:left; cursor:pointer; }
.artist-choice-title { font:400 22px/1.7 "Michroma","Noto Sans",sans-serif; }
.artist-choice:hover, .artist-choice:focus-visible { border-color:#111; }
.artist-view-nav { display:flex; flex-wrap:wrap; gap:26px; margin:26px 0 34px; }
.artist-view-nav button { padding:4px 0 7px; border:0; border-bottom:1px solid transparent; background:transparent; color:#77776f; font:12px/1.8 "Noto Sans",sans-serif; cursor:pointer; }
.artist-view-nav button[aria-pressed="true"] { color:#111; border-bottom-color:#111; }
.artist-work-links { display:flex; flex-direction:column; align-items:flex-start; gap:28px; }
.artist-work-links a { font:400 19px/1.8 "Michroma","Noto Sans",sans-serif; text-decoration:none; }
.artist-work-links a:hover { text-decoration:underline; text-underline-offset:6px; }
.artist-detail--portrait:has(> [data-artist-content="bio"]:not([hidden])) {
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  column-gap:48px;
  align-items:start;
}
.artist-detail--portrait > [data-artist-back] { grid-column:1/-1; grid-row:1; justify-self:start; }
.artist-detail--portrait > [data-artist-title] { grid-column:1; grid-row:2; }
.artist-detail--portrait > .artist-portrait { grid-column:2; grid-row:2/5; width:100%; }
.artist-detail--portrait > .artist-view-nav { grid-column:1; grid-row:3; min-width:0; }
.artist-detail--portrait > [data-artist-content="bio"] { grid-column:1; grid-row:4; min-width:0; }
.artist-detail--portrait .artist-profile { display:block; }
.artist-detail--portrait:not(:has(> [data-artist-content="bio"]:not([hidden]))) > .artist-portrait { display:none; }
.artist-portrait img[src$="chang-bin-portrait.jpg"] { object-position:50% 50%; }
.career-photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 22px; margin:28px 0 36px; }
.career-photo { min-width:0; margin:0; }
.career-photo img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; cursor:default; filter:grayscale(1); transition:filter .35s ease; }
.career-photo img:hover { filter:grayscale(0); }
.career-photo figcaption { margin-top:10px; font:11px/1.8 "Noto Sans",sans-serif; color:#77776f; }
@media(max-width:640px) {
  .artist-selector { grid-template-columns:minmax(0,1fr); gap:24px; }
  .artist-choice-title { font-size:20px; }
  .artist-view-nav { gap:20px; margin:22px 0 28px; }
  .artist-work-links a { font-size:17px; }
  .artist-detail--portrait:has(> [data-artist-content="bio"]:not([hidden])) { grid-template-columns:minmax(0,1fr) 136px; column-gap:22px; }
  .artist-detail--portrait > .artist-portrait { grid-row:2/4; }
  .artist-detail--portrait > [data-artist-content="bio"] { grid-column:1/-1; }
  .artist-detail--portrait .artist-view-nav { gap:12px 18px; }
  .career-photo-grid { grid-template-columns:minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce) { .career-photo img { transition:none; } }

/* Email remains usable without a configured system mail handler. */
.contact-compose { margin-top:30px; padding-top:23px; border-top:1px solid rgba(17,17,17,.16); }
.contact-address-row { display:flex; align-items:baseline; flex-wrap:wrap; gap:14px 24px; }
.contact-address-row .contact-email { font-size:clamp(20px,2.5vw,28px); overflow-wrap:anywhere; }
.contact-address-row button { padding:3px 0; border:0; background:transparent; color:inherit; font:12px/1.8 "Noto Sans",sans-serif; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.contact-compose-links { display:flex; flex-wrap:wrap; gap:15px 25px; margin:24px 0 16px; }
.contact-compose-links a { font-size:12px; line-height:1.8; text-underline-offset:4px; }
.section-body .contact-compose-note { max-width:660px; margin:0; color:#77776f; font-size:11px; line-height:1.8; }
.section-body .contact-copy-status { margin:10px 0 0; color:#55554f; font-size:11px; line-height:1.8; }
.contact-copy-status:empty { display:none; }