/* ==========================================================================
   layout.css — 结构与布局
   分栏系统、章节骨架、画廊墙、影片交替布局
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 页面基础
   -------------------------------------------------------------------------- */
body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  overflow-x: hidden;
}

/* 水粉纸的纤维与凹凸只绘制在背景，不覆盖原画、视频和文字。 */
body,
.section--tint,
.shop,
.footer,
.nav.is-stuck,
.nav__panel {
  background-image: url('../assets/textures/gouache-paper.svg');
  background-size: 360px 360px;
  background-repeat: repeat;
  background-blend-mode: multiply;
}

/* 选中文案样式 */
::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   2. 容器与通用区块
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: var(--container-wide);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tint {
  background-color: var(--paper-warm);
}

.section__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section__inner--wide {
  max-width: var(--container-wide);
}

/* 章节头部：英文小字 + 中文大标题 */
.section__head {
  max-width: var(--measure);
  margin-bottom: var(--block-gap);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-cn-title);
  color: var(--ink);
  margin-top: var(--s-4);
  text-wrap: balance;
}

.section__title--en {
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* 英文／编号小标签 */
.label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-en);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
}

.label::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--rule);
}

.label--plain::before {
  display: none;
}

/* 正文段落 */
.prose {
  max-width: var(--measure);
  color: var(--ink-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.prose p + p {
  margin-top: var(--s-5);
}

.prose--lead {
  font-size: var(--fs-lead);
  line-height: 1.9;
  color: var(--ink-2);
}

.text-accent {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   3. 顶部导航
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease);
}

/* 滚动后：半透明暖白 + 轻毛玻璃 */
.nav.is-stuck {
  background-color: rgba(250, 247, 241, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--rule-soft);
}

.nav__inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}

.nav__brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}

.nav__brand-en {
  font-family: var(--font-en);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
}

.nav__brand-cn {
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.nav__link {
  position: relative;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  letter-spacing: 0.04em;
  padding-block: var(--s-2);
  transition: color var(--dur-fast) var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15rem;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--ink);
}

.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
}

/* 移动端菜单按钮 */
.nav__toggle {
  display: none;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-en);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink);
}

.nav__toggle-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 20px;
}

.nav__toggle-bars span {
  display: block;
  height: 1px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.nav.is-open .nav__toggle-bars span:nth-child(1) {
  transform: translateY(2.5px) rotate(45deg);
}

.nav.is-open .nav__toggle-bars span:nth-child(2) {
  transform: translateY(-2.5px) rotate(-45deg);
}

/* 移动端下拉菜单面板 */
.nav__panel {
  display: none;
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  z-index: 890;
  background-color: rgba(250, 247, 241, 0.97);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--rule-soft);
  padding: var(--s-6) var(--gutter) var(--s-10);
}

.nav.is-open + .nav__panel {
  display: block;
}

.nav__panel a {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   4. 首屏 Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 94vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--nav-h) + 2vh);
  padding-bottom: 6vh;
  overflow: hidden;
}

.hero__inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-6) var(--s-8);
  align-items: center;
}

.hero__text {
  grid-column: 1 / 6;
  max-width: 32rem;
  z-index: 2;
}

.hero__eyebrow {
  margin-bottom: var(--s-6);
}

.hero__title {
  font-family: var(--font-serif);
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-cn-title);
  color: var(--ink);
  margin-bottom: var(--s-6);
}

.hero__sub {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: 1.75;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}

.hero__note {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-sm);
  line-height: 1.95;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* 画室陈列：原画装裱在独立画架上，装饰与作品一同缩放。 */
.hero__stage {
  grid-column: 6 / 13;
  position: relative;
  aspect-ratio: 1 / 1.06;
  width: min(100%, calc((100svh - var(--nav-h) - 7rem) * .9434));
  justify-self: end;
  z-index: 1;
}

.hero__art {
  position: absolute;
  margin: 0;
  aspect-ratio: 600 / 1100;
  isolation: isolate;
}

.hero__art::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 3%;
  right: -6%;
  bottom: 0;
  height: 3%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(84, 59, 33, .23), transparent 70%);
  filter: blur(5px);
}

.easel__wood {
  position: absolute;
  inset: 0;
  background: url('../assets/textures/studio-easel.svg') center / 100% 100% no-repeat;
}

.easel__board {
  position: absolute;
  z-index: 1;
  top: 14%;
  left: 3%;
  width: 94%;
  padding: 2%;
  background: linear-gradient(125deg, #e9c58f, #b9854a 46%, #e5be86 73%, #a56e38);
  box-shadow: inset 1px 1px 1px #f9dfb7, inset -2px -2px 2px #966332,
              3px 5px 4px rgba(82, 52, 28, .18), 9px 15px 24px -9px rgba(67, 46, 25, .22);
}

.hero__art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--art-ratio);
  background: var(--paper-card);
  box-shadow: 0 0 0 1px rgba(77, 46, 23, .25);
}

.easel__clamp,
.easel__tray {
  position: absolute;
  z-index: 2;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #83532218 4px, transparent 5px 7px),
              linear-gradient(0deg, #a66c35, #d4a168 32%, #edc78e 78%, #f5d7a4 80%, #c59256);
  border: 1px solid rgba(134, 86, 39, .3);
  box-shadow: 0 2px 2px rgba(69, 41, 18, .22);
}

.easel__clamp {
  top: 10.8%;
  left: 44%;
  width: 12%;
  height: 3.5%;
  border-radius: 1px;
}

.easel__clamp::after {
  content: "";
  position: absolute;
  width: 25%;
  aspect-ratio: 1;
  left: 38%;
  top: 25%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #dad0b7 0 13%, #645a45 20% 45%, #38352b 50%);
  box-shadow: 0 1px 1px #805b31;
}

.easel__tray {
  top: 75.8%;
  left: 1%;
  width: 98%;
  height: 2.4%;
}

.hero__art--a {
  left: 0;
  top: 0;
  width: 53%;
  z-index: 2;
}

.hero__art--b {
  right: 0;
  top: 16%;
  width: 33%;
  z-index: 1;
}

.hero__art--c {
  left: 48%;
  bottom: 0;
  width: 25%;
  z-index: 3;
}

/* 滚动提示 */
.hero__scroll {
  position: absolute;
  left: var(--gutter);
  bottom: 3.5vh;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease);
}

.hero__scroll:hover {
  color: var(--ink);
}

.hero__scroll-arrow {
  display: inline-block;
  animation: drift-down 2.6s var(--ease) infinite;
  font-size: 1rem;
  line-height: 1;
}

@keyframes drift-down {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(5px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   5. 关于小宇
   -------------------------------------------------------------------------- */
.about__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 5vw, 5rem) var(--s-8);
  align-items: start;
}

.about__text {
  grid-column: 1 / 7;
}

.about__aside {
  grid-column: 8 / 13;
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.about__figure {
  margin: 0;
}

.about__figure img {
  width: 100%;
  height: auto;
  box-shadow: var(--shadow-art);
  background: var(--paper-card);
}

.about__figure figcaption {
  margin-top: var(--s-4);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-wrap: pretty;
}

/* 关于章节的收尾放大句 */
.about__punch {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: var(--s-8);
  border-top: 1px solid var(--rule);
}

.about__punch-text {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--ls-cn-title);
  color: var(--ink);
  max-width: 24em;
}

/* --------------------------------------------------------------------------
   6. 九个世界 —— 美术馆式不规则作品墙
   -------------------------------------------------------------------------- */
.wall {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1.5rem, 3vw, 3.5rem);
  row-gap: clamp(3.5rem, 8vw, 9rem);
  align-items: start;
}

.wall__item {
  position: relative;
  margin-top: var(--lift, 0);
  min-width: 0;
}

/* 错落布局：每件作品的列区间、所在行、垂直偏移 */
.wall__item[data-order="1"] { grid-column: 1 / 8;  grid-row: 1; }
.wall__item[data-order="2"] { grid-column: 9 / 13; grid-row: 1; --lift: clamp(3rem, 7vw, 9rem); }
.wall__item[data-order="3"] { grid-column: 2 / 7;  grid-row: 2; --lift: clamp(1rem, 2.5vw, 3rem); }
.wall__item[data-order="4"] { grid-column: 7 / 13; grid-row: 2; }
.wall__item[data-order="5"] { grid-column: 1 / 5;  grid-row: 3; }
.wall__item[data-order="6"] { grid-column: 6 / 13; grid-row: 3; --lift: clamp(-3rem, -3vw, -1rem); }
.wall__item[data-order="7"] { grid-column: 1 / 7;  grid-row: 4; }
.wall__item[data-order="8"] { grid-column: 8 / 12; grid-row: 4; --lift: clamp(2.5rem, 6vw, 7rem); }
.wall__item[data-order="9"] { grid-column: 4 / 9;  grid-row: 5; }

/* --------------------------------------------------------------------------
   7. 创作影像 —— 视频与文字交替
   -------------------------------------------------------------------------- */
.films {
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 10vw, 11rem);
}

.film {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.film__media {
  grid-column: 1 / 6;
  justify-self: center;
  width: 100%;
  max-width: 26rem;
}

.film__body {
  grid-column: 7 / 13;
  max-width: 30rem;
}

/* 偶数条：左右对调 */
.film--flip .film__media {
  grid-column: 8 / 13;
  order: 2;
}

.film--flip .film__body {
  grid-column: 1 / 7;
  order: 1;
}

.film__index {
  font-family: var(--font-en);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: var(--s-5);
}

.film__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-cn-title);
  color: var(--ink);
  margin-bottom: var(--s-5);
}

.film__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-en);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.film__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   8. 色彩地图
   -------------------------------------------------------------------------- */
.chroma__intro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-8);
  align-items: end;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.chroma__intro-text {
  grid-column: 1 / 7;
}

.chroma__intro-aside {
  grid-column: 8 / 13;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.95;
}

/* 色带 */
.chroma__track {
  display: flex;
  width: 100%;
  height: clamp(6.5rem, 17vw, 14rem);
  border-radius: var(--r-xs);
  overflow: hidden;
}

.chroma__seg {
  position: relative;
  flex: var(--w, 1) 1 0;
  min-width: 0;
  border: 0;
  padding: 0;
  transition: flex-grow var(--dur-slow) var(--ease);
  cursor: pointer;
}

.chroma__seg:hover,
.chroma__seg:focus-visible {
  flex-grow: calc(var(--w, 1) * 2.1);
}

/* 色段上的编号／色名 */
.chroma__seg-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.chroma__seg:hover .chroma__seg-label,
.chroma__seg:focus-visible .chroma__seg-label {
  opacity: 1;
  transform: translateY(0);
}

.chroma__seg-num {
  font-family: var(--font-en);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  opacity: 0.85;
}

.chroma__seg-name {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 色名图例 */
.chroma__legend {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-4) var(--s-5);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule-soft);
}

.chroma__legend-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.chroma__legend-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  flex: none;
}

/* --------------------------------------------------------------------------
   9. 衍生品
   -------------------------------------------------------------------------- */
.shop {
  background-color: var(--paper-deep);
}

.shop__head {
  max-width: var(--measure);
  margin-bottom: var(--block-gap);
}

.shop__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
}

.shop__note {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--s-8);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6) var(--s-10);
  align-items: center;
  justify-content: space-between;
}

.shop__note p {
  max-width: 34rem;
  font-size: var(--fs-sm);
  line-height: 1.95;
  color: var(--ink-2);
}

.shop__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}

/* --------------------------------------------------------------------------
   10. 尾声
   -------------------------------------------------------------------------- */
.finale {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--dusk);
  color: var(--ink-inverse);
  padding-block: clamp(5rem, 12vw, 10rem);
}

.finale__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.finale__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 86%;
}

.finale__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(20, 16, 12, 0.42) 0%, rgba(20, 16, 12, 0.78) 62%, rgba(20, 16, 12, 0.92) 100%);
}

.finale__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: url('../assets/textures/gouache-paper.svg') repeat 0 0 / 360px 360px;
  mix-blend-mode: multiply;
}

.finale__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.finale__inner .label {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.finale__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4.4vw, 3.75rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: var(--ls-cn-title);
  color: #fff;
  max-width: 22em;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.42);
}

.finale__sub {
  margin-top: var(--s-8);
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: 1.9;
  color: rgba(246, 242, 234, 0.82);
}

.finale__actions {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: center;
}

/* --------------------------------------------------------------------------
   11. 页脚
   -------------------------------------------------------------------------- */
.footer {
  background-color: var(--dusk);
  color: rgba(246, 242, 234, 0.6);
  padding-block: var(--s-10) var(--s-12);
  border-top: 1px solid rgba(246, 242, 234, 0.1);
  font-size: var(--fs-xs);
  line-height: 1.9;
}

.footer__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6) var(--s-10);
  justify-content: space-between;
  align-items: flex-start;
}

.footer__brand {
  font-family: var(--font-en);
  font-size: var(--fs-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 242, 234, 0.85);
}

.footer__meta {
  max-width: 36rem;
}

.footer__meta p + p {
  margin-top: var(--s-2);
}