/*
 * East Change detail consistency layer.
 *
 * This file is loaded after style.css by the detail bundle. It scopes the
 * corrections to the Who poster and Works index so the ordinary work pages
 * keep their existing image and reading layouts.
 */

/* Who keeps one exact blue field and one exact yellow foreground. */
.page-who-am-i .who-poster,
.page-projects .who-poster,
.page-index .layer-who {
  isolation: isolate;
  background: #22306B;
  color: #FFEE6F;
}

.page-who-am-i .who-poster .who-project-label,
.page-who-am-i .who-poster .who-project-title,
.page-who-am-i .who-poster .who-project-note,
.page-who-am-i .who-poster .who-project-note p,
.page-who-am-i .who-poster .who-credit,
.page-projects .who-poster .who-project-label,
.page-projects .who-poster .who-project-title,
.page-projects .who-poster .who-project-note,
.page-projects .who-poster .who-project-note p,
.page-projects .who-poster .who-credit,
.page-index .layer-who .who-project-label,
.page-index .layer-who .who-project-title,
.page-index .layer-who .who-project-note,
.page-index .layer-who .who-project-note p,
.page-index .layer-who .who-credit {
  color: #FFEE6F !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
}

.page-who-am-i .who-poster .who-project-action,
.page-who-am-i .who-poster .who-project-action *,
.page-projects .who-poster .who-project-action,
.page-projects .who-poster .who-project-action *,
.page-index .layer-who .who-project-action,
.page-index .layer-who .who-project-action * {
  background: #FFEE6F;
  color: #22306B !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
}

/* The complete project title uses the homepage role in every language. */
.page-who-am-i .who-poster .who-project-title,
.page-projects .who-poster .who-project-title,
.page-index .layer-who .who-project-title {
  font-family: inherit;
  font-size: clamp(44px, 6.5vw, 102px);
  font-weight: 500;
  line-height: .99;
  letter-spacing: -.045em;
}

/* The motion layer supplies this context while the blue poster is visible. */
.site-header[data-nav-context="who-home"] {
  background: transparent !important;
  color: #FFEE6F !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
}

.site-header[data-nav-context="who-home"] a,
.site-header[data-nav-context="who-home"] button,
.site-header[data-nav-context="who-home"] .header-note,
.site-header[data-nav-context="who-home"] .language,
.site-header[data-nav-context="who-home"] #site-nav a:after {
  color: #FFEE6F !important;
  text-shadow: none !important;
}

.site-header[data-nav-context="who-home"] #site-nav a:after {
  background-color: currentColor;
}

.site-header[data-nav-context="who-home"] .menu-toggle span {
  background: #FFEE6F !important;
}

/* An open mobile menu has its own paper field and readable ink. */
.site-header[data-nav-context="who-home"].menu-open,
.site-header[data-nav-context="who-home"].menu-open #site-nav,
.site-header[data-nav-context="who-home"].menu-open #site-nav a,
.site-header[data-nav-context="who-home"].menu-open .language,
.site-header[data-nav-context="who-home"].menu-open .menu-toggle {
  background: var(--paper) !important;
  color: var(--ink) !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
}

.site-header[data-nav-context="who-home"].menu-open .menu-toggle span,
.site-header[data-nav-context="who-home"].menu-open #site-nav a:after {
  background: var(--ink) !important;
}

/*
 * Works keeps its existing semantic h1. The class is only a reusable
 * accessibility utility elsewhere, so reset it here instead of fabricating
 * a second title with a pseudo-element.
 */
.page-works #main > h1.visually-hidden {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  width: auto;
  height: auto;
  min-height: clamp(210px, 26svh, 320px);
  margin: 0;
  padding: clamp(112px, 14vh, 156px) 0 clamp(34px, 4vw, 58px);
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  color: var(--ink);
  font-size: clamp(36px, 5.2vw, 76px);
  line-height: 1;
  letter-spacing: -.045em;
  text-shadow: none;
}

.page-works #main > h1.visually-hidden > span {
  grid-column: 2 / 5;
  display: block;
  padding: 0 var(--pad);
}

/* Free and Easy Wandering keeps the supplied 2313:3064 portrait complete. */
.page-works .scene-carefree .project-stage {
  row-gap: clamp(24px, 3vw, 42px);
  padding-top: clamp(38px, 5vw, 76px);
}

.page-works .scene-carefree .project-visual {
  grid-column: 2 / 4;
  width: 100%;
  aspect-ratio: 2313 / 3064;
  background: var(--paper);
}

.page-works .scene-carefree .project-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.page-works .scene-carefree .project-meta {
  grid-column: 1 / 6;
  padding: 0 var(--pad);
}

@media (min-width: 701px) {
  .page-who-am-i .who-poster,
  .page-projects .who-poster {
    min-height: 100svh;
  }
}

@media (max-width: 700px) {
  /* English and Chinese share one compact title scale; neither gets a
     separate oversized question treatment. */
  .page-who-am-i .who-poster .who-project-title,
  .page-projects .who-poster .who-project-title,
  .page-index .layer-who .who-project-title {
    font-size: clamp(38px, 10vw, 58px);
    line-height: 1.05;
    letter-spacing: -.035em;
  }

  .page-who-am-i .who-poster,
  .page-projects .who-poster,
  .page-index .layer-who {
    min-height: 0 !important;
  }

  .page-works #main > h1.visually-hidden {
    display: block !important;
    min-height: 0;
    padding: 108px 20px 38px;
    font-size: clamp(36px, 10vw, 54px);
    line-height: 1.04;
  }

  .page-works #main > h1.visually-hidden > span {
    padding: 0;
  }

  .page-works .scene-carefree .project-stage {
    display: block;
    padding: 44px 20px 74px;
  }

  .page-works .scene-carefree .project-visual {
    width: min(100%, 430px);
    aspect-ratio: 2313 / 3064;
    margin: 0 auto;
  }

  .page-works .scene-carefree .project-meta {
    padding: 28px 0 0;
  }

  .page-works .scene-carefree .project-copy {
    display: block;
    padding-top: 0;
    border-top: 0;
  }
}