:root {
  --surface: #fcf9f8;
  --surface-low: #f6f3f2;
  --surface-container: #f0eded;
  --yase-paper: #f9f3e3;
  --primary: #162839;
  --primary-container: #2c3e50;
  --on-surface: #1b1c1c;
  --on-surface-variant: #43474c;
  --secondary: #635e53;
  --outline: #74777d;
  --outline-variant: #c4c6cd;
  --zhusha: #ae2012;
  --bamboo: #496d5a;
  --bamboo-deep: #243f36;
  --warm-gold: #b08a4b;
  --ink-grey: #808080;
  --max: 1200px;
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --font-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif: var(--font-serif);
  --display-serif: var(--font-serif);
  --font-display: var(--font-serif);
  --kai: var(--font-serif);
  --sans: var(--font-sans);
  /* Lightweight SVG/CSS pattern layer inspired by MIT projects PatternFills / GeoPattern. */
  --pattern-ink: rgba(99,94,83,.14);
  --pattern-ink-soft: rgba(99,94,83,.07);
  --pattern-zhusha-soft: rgba(174,32,18,.055);
  --pattern-paper:
    radial-gradient(circle at 12px 18px, rgba(99,94,83,.07) 0 1px, transparent 1.4px),
    radial-gradient(circle at 42px 34px, rgba(99,94,83,.05) 0 1px, transparent 1.4px),
    linear-gradient(90deg, rgba(116,119,125,.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(116,119,125,.038) 1px, transparent 1px);
  --pattern-lattice:
    linear-gradient(90deg, rgba(99,94,83,.105) 1px, transparent 1px),
    linear-gradient(180deg, rgba(99,94,83,.075) 1px, transparent 1px),
    linear-gradient(45deg, transparent calc(50% - .5px), rgba(99,94,83,.04) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
  --pattern-corner:
    linear-gradient(90deg, rgba(99,94,83,.32), rgba(99,94,83,.32)) left top / 72px 1px no-repeat,
    linear-gradient(180deg, rgba(99,94,83,.32), rgba(99,94,83,.32)) left top / 1px 72px no-repeat,
    linear-gradient(90deg, rgba(99,94,83,.32), rgba(99,94,83,.32)) right top / 72px 1px no-repeat,
    linear-gradient(180deg, rgba(99,94,83,.32), rgba(99,94,83,.32)) right top / 1px 72px no-repeat,
    linear-gradient(90deg, rgba(99,94,83,.32), rgba(99,94,83,.32)) left bottom / 72px 1px no-repeat,
    linear-gradient(180deg, rgba(99,94,83,.32), rgba(99,94,83,.32)) left bottom / 1px 72px no-repeat,
    linear-gradient(90deg, rgba(99,94,83,.32), rgba(99,94,83,.32)) right bottom / 72px 1px no-repeat,
    linear-gradient(180deg, rgba(99,94,83,.32), rgba(99,94,83,.32)) right bottom / 1px 72px no-repeat;
  --mountain-wash:
    radial-gradient(ellipse at 16% 100%, rgba(22,40,57,.18) 0 18%, transparent 19%),
    radial-gradient(ellipse at 36% 100%, rgba(22,40,57,.13) 0 23%, transparent 24%),
    radial-gradient(ellipse at 59% 100%, rgba(36,63,54,.12) 0 20%, transparent 21%),
    radial-gradient(ellipse at 78% 100%, rgba(22,40,57,.16) 0 27%, transparent 28%),
    linear-gradient(180deg, transparent, rgba(22,40,57,.09));
  --frame-window:
    linear-gradient(90deg, rgba(99,94,83,.26), rgba(99,94,83,.26)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(99,94,83,.2), rgba(99,94,83,.2)) 0 50% / 100% 1px no-repeat,
    radial-gradient(circle at 0 0, transparent 0 15px, rgba(99,94,83,.24) 16px 17px, transparent 18px),
    radial-gradient(circle at 100% 0, transparent 0 15px, rgba(99,94,83,.24) 16px 17px, transparent 18px),
    radial-gradient(circle at 0 100%, transparent 0 15px, rgba(99,94,83,.24) 16px 17px, transparent 18px),
    radial-gradient(circle at 100% 100%, transparent 0 15px, rgba(99,94,83,.24) 16px 17px, transparent 18px);
  --frame-scroll:
    linear-gradient(90deg, transparent, rgba(99,94,83,.46) 18%, rgba(99,94,83,.46) 82%, transparent) 50% 0 / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(99,94,83,.28) 22%, rgba(99,94,83,.28) 78%, transparent) 50% 100% / 100% 1px no-repeat,
    radial-gradient(circle at 18px 0, rgba(176,138,75,.7) 0 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 18px) 0, rgba(176,138,75,.7) 0 3px, transparent 4px),
    radial-gradient(circle at 18px 100%, rgba(176,138,75,.45) 0 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 18px) 100%, rgba(176,138,75,.45) 0 3px, transparent 4px);
  --frame-title-slip:
    linear-gradient(90deg, rgba(174,32,18,.74), rgba(174,32,18,.74)) left 22px top 0 / 36px 2px no-repeat,
    linear-gradient(90deg, rgba(174,32,18,.44), transparent) left 22px top 8px / 92px 1px no-repeat,
    linear-gradient(180deg, rgba(99,94,83,.22), rgba(99,94,83,.22)) left 0 top 0 / 1px 100% no-repeat;
  --icon-seal: url("/assets/icons/gx-seal.svg");
  --icon-xiao: url("/assets/icons/gx-xiao.svg");
  --icon-bamboo: url("/assets/icons/gx-bamboo.svg");
  --icon-scroll: url("/assets/icons/gx-scroll.svg");
  --icon-sound: url("/assets/icons/gx-sound.svg");
  --icon-community: url("/assets/icons/gx-community.svg");
  --icon-mountain: url("/assets/icons/gx-mountain.svg");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding-top: 72px;
  color: var(--on-surface);
  background: var(--yase-paper);
  font-family: var(--sans);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .36;
  background:
    var(--pattern-paper),
    radial-gradient(ellipse at 12% 8%, rgba(174,32,18,.04), transparent 24rem),
    radial-gradient(ellipse at 86% 16%, rgba(73,109,90,.05), transparent 25rem);
  background-size: 56px 56px, 56px 56px, 112px 112px, 112px 112px, auto, auto;
}

a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
h1, h2, h3, p, figure { margin-top: 0; }
p { margin-bottom: 0; }

.wrap {
  width: min(100% - 40px, var(--max));
  margin-inline: auto;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background:
    var(--pattern-paper),
    rgba(249, 243, 227, .94);
  background-size: 52px 52px, 52px 52px, 104px 104px, 104px 104px, auto;
  border-bottom: 1px solid rgba(116,119,125,.18);
  backdrop-filter: blur(12px);
}
.nav-inner {
  width: min(100% - 40px, var(--max));
  min-height: 72px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
}
.brand {
  display: block;
  min-width: 0;
}
.brand-logo {
  display: block;
  width: min(100%, 212px);
  height: auto;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nav-links {
  justify-self: center;
  display: flex;
  gap: 26px;
  font-size: 13px;
  white-space: nowrap;
  color: var(--primary);
}
.nav-item {
  position: relative;
}
.nav-item > a {
  min-height: 72px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-bottom: 2px solid transparent;
}
.nav-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  background: currentColor;
  opacity: .72;
  -webkit-mask: var(--nav-icon) center / contain no-repeat;
  mask: var(--nav-icon) center / contain no-repeat;
  transition: opacity .18s ease, transform .18s ease;
}
.nav-icon-seal { --nav-icon: var(--icon-seal); }
.nav-icon-xiao { --nav-icon: var(--icon-xiao); }
.nav-icon-bamboo { --nav-icon: var(--icon-bamboo); }
.nav-icon-community { --nav-icon: var(--icon-community); }
.nav-icon-sound { --nav-icon: var(--icon-sound); }
.nav-icon-mountain { --nav-icon: var(--icon-mountain); }
.nav-item.is-active > a,
.nav-item > a:hover {
  color: var(--zhusha);
  border-color: var(--zhusha);
}
.nav-item.is-active .nav-icon,
.nav-item > a:hover .nav-icon {
  opacity: 1;
  transform: translateY(-1px);
}
.nav-submenu {
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  z-index: 45;
  min-width: 132px;
  padding: 8px 0;
  transform: translateX(-50%) translateY(8px);
  border: 1px solid rgba(116,119,125,.18);
  background: rgba(249, 243, 227, .96);
  box-shadow: 0 18px 38px rgba(22,40,57,.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.nav-submenu a {
  display: block;
  padding: 8px 18px;
  color: var(--primary);
  font-size: 12px;
  line-height: 1.5;
}
.nav-submenu a:hover,
.nav-submenu a:focus-visible {
  color: var(--zhusha);
  background: rgba(174,32,18,.06);
}
.nav-item:hover .nav-submenu,
.nav-item:focus-within .nav-submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-action,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}
.nav-action {
  gap: 7px;
}
.action-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--icon-xiao) center / contain no-repeat;
  mask: var(--icon-xiao) center / contain no-repeat;
}
.button.secondary {
  background: transparent;
  color: var(--primary);
}
.button.seal-button {
  border-color: var(--zhusha);
  background: var(--zhusha);
}

.site-hero {
  position: relative;
  min-height: calc(100dvh - 72px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--primary);
}
.site-hero img {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .82;
}
.site-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(22,40,57,.48), rgba(22,40,57,.68)),
    radial-gradient(circle at 50% 42%, rgba(22,40,57,.08), rgba(22,40,57,.44) 34rem);
}
.hero-content {
  position: relative;
  z-index: 2;
  width: min(100% - 40px, 880px);
  text-align: center;
  color: #fff;
}
.hero-content h1 {
  margin-bottom: 20px;
  font-family: var(--serif);
  font-size: clamp(38px, 7vw, 76px);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: .14em;
}
.hero-content p {
  max-width: 720px;
  margin: 0 auto;
  color: rgba(255,255,255,.86);
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: .08em;
}
.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.hero-actions .button.secondary {
  color: #fff;
  border-color: rgba(255,255,255,.78);
}
.floating-tools {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 24px;
  display: grid;
  gap: 8px;
}
.float-square {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--zhusha);
  color: #fff;
  font-size: 16px;
}
.float-square.light {
  background: #fff;
  color: var(--primary);
  border: 1px solid rgba(116,119,125,.24);
}

.section {
  padding: 96px 0;
}
.section.surface {
  background:
    radial-gradient(ellipse at 86% 0, rgba(73,109,90,.055), transparent 34rem),
    var(--pattern-paper),
    var(--surface);
  background-size: auto, 56px 56px, 56px 56px, 112px 112px, 112px 112px, auto;
}
.section.paper {
  background:
    radial-gradient(ellipse at 10% 8%, rgba(174,32,18,.04), transparent 30rem),
    var(--pattern-paper),
    var(--yase-paper);
  background-size: auto, 56px 56px, 56px 56px, 112px 112px, 112px 112px, auto;
}
.section-title {
  max-width: 760px;
  margin: 0 auto 54px;
  text-align: center;
}
.section-title h2,
.page-hero h1,
.article h2 {
  font-family: var(--serif);
  color: var(--primary);
}
.section-title h2 {
  margin-bottom: 12px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: .1em;
}
.section-title p,
.page-hero p,
.muted {
  color: var(--on-surface-variant);
}
.section-title p {
  font-size: 15px;
  line-height: 1.9;
}

.split-craft {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  gap: 70px;
  align-items: center;
}
.craft-image {
  position: relative;
  min-height: 520px;
}
.craft-image img {
  aspect-ratio: 4 / 5;
}
.year-stamp {
  position: absolute;
  right: -34px;
  bottom: -28px;
  width: 150px;
  height: 130px;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--yase-paper);
  color: var(--primary);
  border: 1px solid rgba(116,119,125,.16);
  font-family: var(--serif);
}
.year-stamp strong {
  display: block;
  font-size: 30px;
  line-height: 1.1;
}
.content-block h2 {
  margin-bottom: 18px;
  font-family: var(--serif);
  color: var(--primary);
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.36;
  letter-spacing: .08em;
}
.content-block p {
  max-width: 620px;
  color: var(--on-surface-variant);
  font-size: 16px;
  line-height: 2;
}
.metric-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 32px;
}
.metric {
  padding-left: 18px;
  border-left: 1px solid var(--zhusha);
}
.metric strong {
  display: block;
  font-family: var(--serif);
  color: var(--primary);
  font-size: 26px;
}
.metric span {
  color: var(--on-surface-variant);
  font-size: 12px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.service-card,
.tile,
.contact-card,
form,
.faq-item {
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(116,119,125,.16);
}
.service-card {
  padding: 34px 32px;
}
.seal {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 26px;
  background: var(--zhusha);
  color: #fff;
  font-family: var(--serif);
  font-size: 16px;
}
.service-card h3,
.tile h3,
.faq-item h3 {
  margin-bottom: 12px;
  font-family: var(--serif);
  color: var(--primary);
  font-size: 24px;
  line-height: 1.35;
  font-weight: 600;
}
.service-card p,
.tile p,
.faq-item p {
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 1.9;
}

.product-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.product-card {
  position: relative;
}
.product-card img {
  aspect-ratio: 3 / 4;
  background: var(--surface-container);
}
.product-card .caption {
  padding-top: 18px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
}
.caption .seal {
  width: 20px;
  height: 20px;
  margin: 4px 0 0;
  font-size: 12px;
}
.caption h3 {
  margin: 0 0 4px;
  font-family: var(--serif);
  color: var(--primary);
  font-size: 19px;
}
.caption p {
  color: var(--on-surface-variant);
  font-size: 12px;
}

.teacher-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px;
}
.teacher-card img {
  aspect-ratio: 4 / 5;
  filter: grayscale(1);
}
.teacher-card h3 {
  margin: 18px 0 6px;
  font-family: var(--serif);
  color: var(--primary);
  font-size: 22px;
}
.teacher-card .role {
  color: var(--zhusha);
  font-size: 12px;
  font-weight: 700;
}

.video-grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(2, minmax(0, .7fr));
  gap: 18px;
}
.video-card {
  position: relative;
  background: var(--primary);
  color: #fff;
}
.video-card img {
  aspect-ratio: 16 / 9;
  opacity: .78;
}
.video-card.large img {
  aspect-ratio: 16 / 10;
}
.play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.play span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.78);
  background: rgba(22,40,57,.34);
}
.video-card h3 {
  padding: 12px 14px 16px;
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
}

.faq-preview {
  max-width: 760px;
  margin-inline: auto;
}
.faq-list {
  max-width: 860px;
  margin-inline: auto;
}
.faq-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  margin-bottom: 12px;
  padding: 0;
}
.faq-item div {
  padding: 20px 24px;
}
.faq-item span {
  display: grid;
  place-items: center;
  min-height: 100%;
  color: var(--primary);
  border-left: 1px solid rgba(116,119,125,.16);
}
.faq-list .faq-item {
  grid-template-columns: 64px minmax(0, 1fr);
}
.faq-list .faq-item > span {
  border-left: 0;
  border-right: 1px solid rgba(116,119,125,.16);
  color: var(--zhusha);
  font-family: var(--serif);
}

.contact-split,
.contact-grid,
.detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .76fr);
  gap: 56px;
  align-items: start;
}
.map-card img,
.contact-image img {
  aspect-ratio: 4 / 3;
}
.info-list {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.info-list li {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(116,119,125,.18);
}
.info-list strong {
  color: var(--primary);
  font-family: var(--serif);
}

.page-hero {
  padding: 76px 0 70px;
  text-align: center;
}
.crumb {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 26px;
  color: var(--on-surface-variant);
  font-size: 12px;
}
.eyebrow {
  margin-bottom: 12px;
  color: var(--zhusha);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
}
.hero-seal {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 22px;
  background: var(--zhusha);
  color: #fff;
  font-family: var(--serif);
  font-size: 18px;
}
.page-hero h1 {
  margin-bottom: 16px;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.24;
  letter-spacing: .14em;
}
.page-hero p {
  max-width: 680px;
  margin-inline: auto;
  font-size: 15px;
  line-height: 1.9;
}

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 22px;
}

.filter-line {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 5vw, 72px);
  width: min(100% - 40px, var(--max));
  margin: -24px auto 62px;
  padding: 18px 0;
  border-top: 1px solid rgba(116,119,125,.18);
  border-bottom: 1px solid rgba(116,119,125,.18);
  color: var(--secondary);
  font-family: var(--serif);
  font-size: 14px;
}
.filter-line a[aria-current="true"],
.filter-line a:hover {
  color: var(--zhusha);
}
.filter-line a[aria-current="true"] {
  text-decoration: underline;
  text-decoration-color: rgba(174,32,18,.48);
  text-underline-offset: 8px;
  text-decoration-thickness: 1px;
}
.filter-anchors {
  position: relative;
  z-index: 0;
}
.filter-anchors span {
  display: block;
  height: 0;
  scroll-margin-top: 96px;
}

.teacher-catalog {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 30px;
}
.teacher-feature,
.teacher-side,
.teacher-note,
.instrument-card,
.course-card,
.image-band,
.contact-panel {
  border: 1px solid rgba(116,119,125,.16);
  background: rgba(255,255,255,.46);
}
.teacher-feature {
  grid-column: span 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .92fr);
}
.teacher-feature img {
  aspect-ratio: 4 / 5;
  filter: grayscale(1);
}
.teacher-feature .copy,
.teacher-side .copy,
.teacher-note {
  padding: 42px;
  align-self: center;
}
.teacher-feature .copy p:last-child,
.teacher-side .copy p:last-child {
  margin-top: 24px;
}
.small-red {
  display: block;
  margin-bottom: 14px;
  color: var(--zhusha);
  font-size: 12px;
  font-weight: 700;
}
.teacher-side {
  grid-column: span 4;
  padding: 24px;
}
.teacher-side img {
  aspect-ratio: 4 / 5;
  filter: grayscale(1);
}
.teacher-note {
  grid-column: span 12;
  position: relative;
  min-height: 220px;
  overflow: hidden;
}
.teacher-note::after {
  content: "箫";
  position: absolute;
  right: 46px;
  bottom: -80px;
  color: rgba(174,32,18,.06);
  font-family: var(--serif);
  font-size: 220px;
  line-height: 1;
}

.collection-tabs {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 7vw, 86px);
  margin: -16px 0 64px;
  color: var(--secondary);
  font-family: var(--serif);
  font-size: 18px;
}
.collection-tabs a[aria-current="true"] {
  color: var(--zhusha);
}
.product-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 84px 64px;
}
.instrument-card:nth-child(even) {
  margin-top: 84px;
}
.product-showcase .teacher-note {
  grid-column: 1 / -1;
}
.instrument-card {
  padding: clamp(26px, 5vw, 48px);
  background: rgba(255,255,255,.78);
}
.instrument-card img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.instrument-card footer {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  margin-top: 20px;
}
.instrument-card .seal {
  width: 34px;
  height: 34px;
  margin: 0;
}
.instrument-card h3 {
  margin: 0 0 2px;
  font-family: var(--serif);
  color: var(--primary);
  font-size: 22px;
}
.instrument-card p {
  color: var(--on-surface-variant);
  font-size: 13px;
  line-height: 1.7;
}
.instrument-meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding-left: 14px;
  border-left: 1px solid var(--primary);
  color: var(--on-surface-variant);
  font-size: 12px;
}
.price {
  color: var(--zhusha);
  font-family: var(--serif);
  font-size: 18px;
  white-space: nowrap;
}

.product-collection-hero {
  position: relative;
  padding-top: 92px;
  padding-bottom: 26px;
  overflow: hidden;
}
.product-collection-hero .cloud-line {
  left: 0;
  right: 0;
}
.product-collection-hero .crumb {
  margin-bottom: 38px;
}
.product-collection-hero .eyebrow {
  font-family: var(--serif);
  letter-spacing: .34em;
}
.product-collection-hero h1 {
  font-size: clamp(34px, 5.4vw, 64px);
  letter-spacing: .05em;
}
.product-collection-hero p {
  max-width: 720px;
}
.product-material-tabs {
  margin-top: 18px;
}
.product-material-tabs a[aria-current="true"] {
  color: var(--zhusha);
  text-decoration: underline;
  text-decoration-color: rgba(174,32,18,.48);
  text-underline-offset: 9px;
  text-decoration-thickness: 1px;
}
.product-museum-section {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(99,94,83,.035) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(0deg, rgba(99,94,83,.03) 0 1px, transparent 1px 20px),
    radial-gradient(ellipse at 50% 0, rgba(255,255,255,.48), transparent 42rem),
    var(--yase-paper);
}
.product-museum-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 96px 70px;
}
.museum-product-card {
  position: relative;
}
.museum-product-card:nth-child(even) {
  margin-top: 92px;
}
.museum-card-frame {
  position: relative;
  padding: clamp(32px, 5vw, 52px);
  border: 1px solid rgba(99,94,83,.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.12)),
    repeating-linear-gradient(90deg, rgba(99,94,83,.035) 0 1px, transparent 1px 18px);
}
.museum-card-frame::before {
  content: "";
  position: absolute;
  inset: 18px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(99,94,83,.3), rgba(99,94,83,.3)) left top / 84px 1px no-repeat,
    linear-gradient(180deg, rgba(99,94,83,.3), rgba(99,94,83,.3)) left top / 1px 84px no-repeat,
    linear-gradient(90deg, rgba(99,94,83,.3), rgba(99,94,83,.3)) right top / 84px 1px no-repeat,
    linear-gradient(180deg, rgba(99,94,83,.3), rgba(99,94,83,.3)) right top / 1px 84px no-repeat,
    linear-gradient(90deg, rgba(99,94,83,.3), rgba(99,94,83,.3)) left bottom / 84px 1px no-repeat,
    linear-gradient(180deg, rgba(99,94,83,.3), rgba(99,94,83,.3)) left bottom / 1px 84px no-repeat,
    linear-gradient(90deg, rgba(99,94,83,.3), rgba(99,94,83,.3)) right bottom / 84px 1px no-repeat,
    linear-gradient(180deg, rgba(99,94,83,.3), rgba(99,94,83,.3)) right bottom / 1px 84px no-repeat;
}
.museum-card-frame::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 30px;
  height: 40px;
  pointer-events: none;
  opacity: .6;
  background:
    radial-gradient(circle at 22px 18px, transparent 0 13px, rgba(99,94,83,.22) 14px 15px, transparent 16px),
    radial-gradient(circle at calc(100% - 22px) 18px, transparent 0 13px, rgba(99,94,83,.22) 14px 15px, transparent 16px),
    linear-gradient(90deg, rgba(99,94,83,.2), transparent 28%, transparent 72%, rgba(99,94,83,.2)) bottom / 100% 1px no-repeat;
}
.museum-product-image {
  position: relative;
  z-index: 1;
  margin-bottom: 26px;
  background:
    radial-gradient(circle at 50% 44%, rgba(176,138,75,.28), rgba(22,40,57,.08) 42%, transparent 68%),
    var(--surface);
}
.museum-product-image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: contrast(1.05) saturate(.9);
}
.museum-product-title {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  width: min(100%, 330px);
  padding: 12px 14px;
  background: rgba(232,224,204,.68);
}
.museum-product-seal {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--zhusha);
  color: #fff;
  font-family: var(--serif);
  font-size: 17px;
}
.museum-product-title small {
  display: block;
  margin-bottom: 4px;
  color: var(--secondary);
  font-size: 11px;
}
.museum-product-title h2 {
  margin: 0;
  color: var(--primary);
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.35;
}
.museum-product-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  margin-top: 20px;
  padding-left: 18px;
  border-left: 1px solid rgba(99,94,83,.54);
}
.museum-product-meta p {
  color: var(--primary);
  font-size: 14px;
  line-height: 1.8;
}
.museum-product-meta span {
  display: block;
  margin-top: 5px;
  color: var(--secondary);
  font-size: 11px;
}
.museum-product-meta strong {
  align-self: start;
  color: var(--zhusha);
  font-family: var(--serif);
  font-size: 19px;
  white-space: nowrap;
}
.museum-product-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  text-indent: -999px;
}

.product-detail-page {
  position: relative;
  overflow: hidden;
  padding: 58px 0 96px;
  background:
    repeating-linear-gradient(90deg, rgba(99,94,83,.035) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(0deg, rgba(99,94,83,.03) 0 1px, transparent 1px 20px),
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 34rem),
    var(--surface);
}
.product-detail-page::before,
.product-detail-page::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 170px;
  pointer-events: none;
  opacity: .42;
  background:
    repeating-linear-gradient(90deg, rgba(99,94,83,.25) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(0deg, rgba(99,94,83,.16) 0 1px, transparent 1px 32px);
}
.product-detail-page::before { top: 0; }
.product-detail-page::after { top: 640px; }
.product-detail-hero,
.product-craft-section,
.product-resonance-panel {
  position: relative;
  z-index: 1;
}
.product-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr);
  gap: 58px;
  align-items: start;
}
.product-detail-gallery .crumb {
  justify-content: flex-start;
  margin-bottom: 34px;
}
.product-name-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  margin-bottom: 28px;
}
.product-name-line .section-kicker {
  grid-column: 1 / -1;
}
.product-name-line h1 {
  margin: 0;
  color: var(--primary);
  font-family: var(--serif);
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.14;
}
.product-name-line p {
  margin-bottom: 12px;
  color: var(--secondary);
  font-family: var(--serif);
  font-size: 18px;
}
.product-primary-image {
  position: relative;
  width: min(100%, 620px);
  min-height: 620px;
  margin: 0;
  background:
    radial-gradient(circle at 44% 38%, rgba(176,138,75,.26), rgba(22,40,57,.08) 46%, transparent 70%),
    var(--yase-paper);
}
.product-primary-image .museum-product-seal {
  position: absolute;
  z-index: 2;
  left: 18px;
  top: 18px;
}
.product-primary-image img {
  aspect-ratio: 1 / 1.16;
  filter: contrast(1.04) saturate(.92);
}
.product-thumb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 620px);
  margin-top: 12px;
}
.product-thumb-grid figure {
  margin: 0;
  background: var(--primary);
}
.product-thumb-grid img {
  aspect-ratio: 1 / .86;
  filter: contrast(1.08) saturate(.88);
}
.product-spec-panel {
  position: sticky;
  top: 100px;
  min-height: 560px;
  padding: 54px 46px;
  overflow: hidden;
  border: 1px solid rgba(99,94,83,.2);
  background:
    repeating-linear-gradient(90deg, rgba(99,94,83,.12) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(99,94,83,.08) 0 1px, transparent 1px 34px),
    rgba(255,255,255,.56);
}
.manuscript-ornament {
  position: absolute;
  right: 20px;
  top: 18px;
  writing-mode: vertical-rl;
  color: rgba(99,94,83,.22);
  font-family: var(--serif);
  font-size: 30px;
  letter-spacing: .2em;
  line-height: 1.6;
}
.product-spec-panel h2,
.sound-character h2,
.product-craft-copy h2,
.product-resonance-panel h2 {
  font-family: var(--serif);
  color: var(--primary);
}
.product-spec-panel h2 {
  margin-bottom: 24px;
  font-size: 24px;
}
.product-spec-panel h2 span,
.sound-character h2 span {
  margin-left: 9px;
  color: var(--secondary);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .08em;
}
.product-spec-panel dl {
  display: grid;
  grid-template-columns: minmax(90px, .55fr) minmax(0, 1fr);
  gap: 0 18px;
  margin: 0 0 38px;
}
.product-spec-panel dt,
.product-spec-panel dd {
  padding: 13px 0;
  border-bottom: 1px solid rgba(99,94,83,.14);
}
.product-spec-panel dt {
  color: var(--secondary);
  font-size: 13px;
}
.product-spec-panel dd {
  margin: 0;
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}
.sound-character {
  margin-top: 22px;
}
.sound-character h2 {
  margin-bottom: 12px;
  font-size: 22px;
}
.sound-character p {
  color: var(--on-surface-variant);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 2;
}
.product-actions {
  display: grid;
  gap: 12px;
  margin-top: 38px;
}
.product-craft-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .52fr);
  gap: 70px;
  align-items: start;
  margin-top: 96px;
}
.product-craft-copy h2 {
  margin-bottom: 28px;
  font-size: clamp(34px, 5vw, 56px);
}
.product-craft-copy .article-body,
.product-craft-copy :is(p, li) {
  color: var(--on-surface-variant);
  font-size: 15px;
  line-height: 2;
}
.product-craft-copy :is(h2, h3) {
  margin: 30px 0 12px;
  color: var(--primary);
  font-family: var(--serif);
}
.craft-maker-card {
  margin-top: 54px;
  padding: 22px 22px 26px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(99,94,83,.16);
}
.craft-maker-card .visual-placeholder {
  min-height: 220px;
  margin-bottom: 18px;
}
.craft-maker-card p {
  color: var(--zhusha);
  font-size: 12px;
  font-weight: 700;
}
.craft-maker-card h3 {
  margin-bottom: 12px;
  color: var(--primary);
  font-family: var(--serif);
  font-size: 24px;
}
.craft-maker-card blockquote {
  margin: 0;
  color: var(--on-surface-variant);
  font-size: 13px;
  line-height: 1.9;
}
.product-resonance-panel {
  margin-top: 96px;
  padding: 86px clamp(24px, 7vw, 96px);
  text-align: center;
  background:
    radial-gradient(circle at 50% 22%, rgba(174,32,18,.18), transparent 18rem),
    var(--primary);
  color: #fff;
}
.resonance-mark {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto 28px;
  background:
    linear-gradient(90deg, transparent 0 9px, var(--zhusha) 9px 13px, transparent 13px 21px, var(--zhusha) 21px 25px, transparent 25px),
    linear-gradient(180deg, transparent 0 8px, rgba(174,32,18,.7) 8px 26px, transparent 26px);
}
.product-resonance-panel h2 {
  margin-bottom: 20px;
  color: #fff;
  font-size: clamp(30px, 5vw, 52px);
}
.product-resonance-panel p {
  max-width: 760px;
  margin-inline: auto;
  color: rgba(255,255,255,.82);
  line-height: 2;
}
.resonance-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 38px;
}
.resonance-links a {
  color: rgba(255,255,255,.82);
  border-bottom: 1px solid rgba(255,255,255,.36);
  font-size: 13px;
}

.course-cards {
  display: grid;
  grid-template-columns: 1fr 1.08fr 1fr;
  gap: 34px;
  align-items: center;
}
.course-card {
  min-height: 410px;
  padding: 44px 40px;
  border-left: 3px solid var(--zhusha);
}
.course-card.featured {
  min-height: 500px;
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.course-card h3 {
  margin: 0 0 28px;
  font-family: var(--serif);
  color: inherit;
  font-size: 28px;
}
.course-card.featured .tag,
.course-card.featured .muted {
  color: rgba(255,255,255,.76);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
}
.course-facts {
  display: grid;
  gap: 18px;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}
.course-facts strong {
  display: block;
  margin-bottom: 4px;
  color: var(--zhusha);
  font-size: 11px;
}
.course-card.featured .course-facts strong {
  color: #fff;
}
.course-price {
  margin-top: auto;
  font-family: var(--serif);
  color: var(--primary);
  font-size: 24px;
}
.course-card.featured .course-price {
  color: #fff;
}
.image-band {
  position: relative;
  min-height: 560px;
  margin-top: 100px;
  overflow: hidden;
}
.image-band img {
  position: absolute;
  inset: 0;
  filter: grayscale(.2);
}
.image-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(249,243,227,.92), rgba(249,243,227,.64) 42%, rgba(22,40,57,.08));
}
.image-band .content-block {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, var(--max));
  margin: 0 auto;
  padding: 150px 0;
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 34px;
}
.spec {
  padding: 18px;
  background: rgba(255,255,255,.52);
  border: 1px solid rgba(116,119,125,.16);
}
.spec strong {
  display: block;
  color: var(--primary);
  font-family: var(--serif);
}
.spec span {
  color: var(--on-surface-variant);
  font-size: 13px;
}

.contact-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.contact-layout > div:first-child {
  grid-row: span 2;
}
.contact-panel {
  padding: 40px;
}
.contact-panel + .contact-panel {
  margin-top: 22px;
}
.qr-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.qr-box {
  display: grid;
  place-items: center;
  min-height: 150px;
  border: 1px solid rgba(116,119,125,.18);
  background: var(--surface);
  color: var(--on-surface-variant);
  text-align: center;
  font-size: 13px;
}
.map-panel img {
  aspect-ratio: 16 / 10;
  filter: grayscale(.65) contrast(1.1);
}
.map-panel {
  grid-column: 2;
}
.tile {
  min-height: 280px;
  padding: 0;
  overflow: hidden;
}
.tile.large { grid-column: span 6; }
.tile.medium { grid-column: span 6; }
.tile.third { grid-column: span 4; }
.tile.half { grid-column: span 6; }
.tile.copy {
  padding: 34px;
}
.tile img {
  aspect-ratio: 4 / 3;
}
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.tag {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid rgba(116,119,125,.18);
  background: var(--surface-container);
  color: var(--primary);
  font-size: 11px;
}

.detail {
  width: min(100% - 40px, var(--max));
  margin: 0 auto 96px;
  padding-top: 24px;
  border-top: 1px solid rgba(116,119,125,.18);
}
.detail-media img {
  aspect-ratio: 4 / 5;
}
.article {
  padding: 8px 0 0;
}
.article h2 {
  margin: 34px 0 14px;
  font-size: 28px;
  line-height: 1.35;
  letter-spacing: .08em;
}
.article h2:first-child { margin-top: 0; }
.article p,
.article li {
  color: var(--on-surface-variant);
  font-size: 15px;
  line-height: 1.95;
}
.article p + p { margin-top: 16px; }
.article ul { padding-left: 1.2em; }

.contact-card,
form {
  padding: 28px;
}
form h2 {
  margin-top: 0;
  font-family: var(--serif);
  color: var(--primary);
  letter-spacing: .08em;
}
.field {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}
.field label {
  color: var(--on-surface-variant);
  font-size: 12px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid rgba(116,119,125,.44);
  background: transparent;
  color: var(--on-surface);
  font: 15px/1.5 var(--sans);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--zhusha);
}
.field textarea { min-height: 120px; resize: vertical; }
.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.contact-honeypot {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.privacy-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 0 18px;
  color: var(--on-surface-variant);
  font-size: .9rem;
  line-height: 1.6;
  cursor: pointer;
}
.privacy-check input { margin-top: 5px; accent-color: var(--zhusha); }
.form-submit-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.form-submit-row .button:disabled { cursor: wait; opacity: .65; }
.form-status { color: var(--on-surface-variant); font-size: .9rem; }
.form-status.success { color: #2d6a42; }
.form-status.error { color: #9e2b25; }
.form-note { margin-top: 12px; color: var(--on-surface-variant); font-size: .9rem; }
.info-list.compact { margin: 18px 0 0; }

.footer {
  padding: 70px 20px 44px;
  text-align: center;
  background: var(--yase-paper);
  color: var(--on-surface-variant);
  font-size: 12px;
}
.footer::before {
  content: none;
}
.footer div + div { margin-top: 8px; }

.site-hero.compact {
  min-height: 560px;
}
.home-hero {
  min-height: 620px;
  place-items: center;
  isolation: isolate;
  background:
    repeating-linear-gradient(90deg, rgba(99,94,83,.04) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(0deg, rgba(99,94,83,.035) 0 1px, transparent 1px 20px),
    radial-gradient(ellipse at 50% 8%, rgba(255,255,255,.68), transparent 32rem),
    var(--yase-paper);
  color: var(--primary);
}
.home-hero .hero-bamboo-watermark {
  inset: auto 0 0;
  height: 54%;
  opacity: .06;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
}
.home-object-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
}
.home-object-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.018);
  opacity: .98;
  filter: contrast(1.03) saturate(.92);
}
.home-object-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(249,243,227,.95) 0%, rgba(249,243,227,.82) 34%, rgba(249,243,227,.26) 62%, rgba(249,243,227,.04) 100%),
    linear-gradient(180deg, rgba(249,243,227,.34), rgba(249,243,227,.06) 48%, rgba(249,243,227,.5));
}
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(255,255,255,.28) 50%, transparent 93%),
    radial-gradient(circle at 16% 16%, rgba(174,32,18,.045), transparent 16rem),
    radial-gradient(circle at 84% 18%, rgba(73,109,90,.055), transparent 18rem);
}
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 2px, transparent 2px 24px),
    repeating-linear-gradient(0deg, rgba(99,94,83,.035) 0 1px, transparent 1px 34px);
}
/* Cinnabar is a material system: seals, action marks and primary red controls
   share pigment grain, a hand-pressed inner edge and an intentional press state. */
:root {
  --cinnabar-pigment:
    radial-gradient(circle at 17% 22%, rgba(255,247,230,.25) 0 1px, transparent 1.8px),
    radial-gradient(circle at 74% 68%, rgba(73,12,8,.26) 0 1px, transparent 1.9px),
    radial-gradient(circle at 42% 84%, rgba(255,247,230,.14) 0 .8px, transparent 1.6px),
    linear-gradient(142deg, #c94a3c 0%, #ad3025 46%, #8e2019 100%);
  --cinnabar-inset: inset 1px 1px 0 rgba(255,249,235,.20), inset -2px -2px 0 rgba(79,13,9,.24);
}
.button.seal-button,
.ink-note > span,
.qa-mark {
  position: relative;
  overflow: hidden;
}
.button.seal-button,
.ink-note > span,
.qa-mark,
.course-home-plate::before,
.contact-split .map-card::after {
  border: 1px solid rgba(109,28,20,.66);
  background: var(--cinnabar-pigment);
  box-shadow: var(--cinnabar-inset), 0 5px 12px rgba(86,23,15,.16);
  text-shadow: 0 1px 2px rgba(64,10,7,.34);
}
.button.seal-button {
  min-height: 42px;
  border-radius: 0;
  letter-spacing: .08em;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.button.seal-button:hover,
.button.seal-button:focus-visible {
  color: #fff9ee;
  filter: saturate(1.08) brightness(1.04);
  transform: translateY(-2px);
  box-shadow: var(--cinnabar-inset), 0 9px 18px rgba(86,23,15,.22);
}
.button.seal-button:active {
  transform: translateY(1px);
  box-shadow: inset 2px 2px 0 rgba(75,13,9,.25), inset -1px -1px 0 rgba(255,249,235,.16);
}
.ink-note > span,
.qa-mark,
.course-home-plate::before,
.contact-split .map-card::after {
  clip-path: polygon(3% 0, 98% 2%, 100% 6%, 99% 96%, 96% 100%, 3% 99%, 0 95%, 1% 4%);
}
.artifact-seal,
.museum-product-seal,
.hero-seal,
.seal {
  background: var(--cinnabar-pigment);
}
.map-navigation-card {
  overflow: hidden;
}
.map-navigation-card::after { display: none; }
.map-navigation-image {
  position: relative;
  display: block;
  overflow: hidden;
}
.map-navigation-image::after {
  content: "点击导航";
  position: absolute;
  right: 16px;
  top: 16px;
  padding: 6px 10px;
  border: 1px solid rgba(255,249,235,.5);
  background: var(--cinnabar-pigment);
  color: #fff9ee;
  font-family: var(--kai);
  font-size: 12px;
  letter-spacing: .08em;
  box-shadow: var(--cinnabar-inset);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
.map-navigation-image:hover::after,
.map-navigation-image:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}
.map-navigation-image img {
  display: block;
  transition: transform .35s ease, filter .35s ease;
}
.map-navigation-image:hover img,
.map-navigation-image:focus-visible img {
  filter: contrast(1.06) saturate(.88);
  transform: scale(1.025);
}
.map-navigation-card figcaption {
  display: grid;
  gap: 4px;
  padding: 16px 6px 4px;
  color: var(--secondary);
  font-size: 12px;
}
.map-navigation-card figcaption strong {
  color: var(--primary);
  font-family: var(--serif);
  font-size: 15px;
}
.map-navigation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.map-navigation-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(174,32,18,.44);
  color: var(--zhusha);
  font-size: 12px;
}
.map-navigation-actions a:first-child {
  border-color: rgba(109,28,20,.66);
  background: var(--cinnabar-pigment);
  color: #fff9ee;
  box-shadow: var(--cinnabar-inset);
}
.map-navigation-actions a:hover,
.map-navigation-actions a:focus-visible {
  transform: translateY(-1px);
}

/* Interaction hierarchy: ink lacquer for primary commands, paper slips for
   supporting actions, and red cinnabar only where a decisive action is needed. */
.nav-action,
.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0;
  letter-spacing: .045em;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.13),
    inset -1px -1px 0 rgba(0,0,0,.22),
    0 4px 10px rgba(22,40,57,.12);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.nav-action,
.button:not(.secondary):not(.seal-button) {
  border-color: rgba(12,27,40,.92);
  background:
    linear-gradient(135deg, rgba(255,255,255,.09), transparent 35%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 11px),
    linear-gradient(145deg, #27465d, #142a3b 58%, #102231);
}
.nav-action::after,
.button:not(.secondary)::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.13);
  pointer-events: none;
}
.nav-action:hover,
.nav-action:focus-visible,
.button:not(.secondary):not(.seal-button):hover,
.button:not(.secondary):not(.seal-button):focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.18),
    inset -1px -1px 0 rgba(0,0,0,.24),
    0 9px 18px rgba(22,40,57,.20);
}
.nav-action:active,
.button:not(.secondary):not(.seal-button):active {
  transform: translateY(1px);
  box-shadow: inset 2px 2px 0 rgba(7,18,28,.38), inset -1px -1px 0 rgba(255,255,255,.09);
}
.button.secondary {
  border-color: rgba(99,94,83,.44);
  background:
    linear-gradient(90deg, rgba(176,138,75,.15), transparent 18% 82%, rgba(176,138,75,.12)),
    repeating-linear-gradient(90deg, rgba(99,94,83,.035) 0 1px, transparent 1px 13px),
    rgba(249,243,227,.72);
  color: var(--primary);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 0 0 4px rgba(176,138,75,.045),
    0 3px 8px rgba(99,94,83,.08);
}
.button.secondary:hover,
.button.secondary:focus-visible {
  border-color: rgba(174,32,18,.52);
  color: var(--zhusha);
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.65),
    inset 0 0 0 4px rgba(174,32,18,.055),
    0 8px 16px rgba(99,94,83,.13);
}
.button.secondary:active { transform: translateY(1px); }
.share-row .button.secondary,
.aside-panel .button.secondary {
  min-height: 34px;
  padding-inline: 12px;
  font-size: 12px;
}
.entry-guide-index i {
  overflow: hidden;
  border: 1px solid rgba(109,28,20,.65);
  background: var(--cinnabar-pigment);
  box-shadow: var(--cinnabar-inset), 0 4px 8px rgba(86,23,15,.14);
  clip-path: polygon(3% 0, 98% 2%, 100% 6%, 99% 96%, 96% 100%, 3% 99%, 0 95%, 1% 4%);
}
.home-text-link,
.entry-guide-card a {
  position: relative;
  padding: 0 2px 5px;
  border-bottom: 1px solid rgba(174,32,18,.34);
  transition: color .18s ease, padding-right .18s ease, border-color .18s ease;
}
.home-text-link:hover,
.home-text-link:focus-visible,
.entry-guide-card a:hover,
.entry-guide-card a:focus-visible {
  padding-right: 8px;
  border-color: var(--zhusha);
}
.media-link {
  backdrop-filter: blur(2px);
  transition: background .2s ease, letter-spacing .2s ease;
}
.media-link:hover,
.media-link:focus-visible {
  background: rgba(174,32,18,.66);
  letter-spacing: .12em;
}
@media (prefers-reduced-motion: reduce) {
  .nav-action,
  .button,
  .home-text-link,
  .entry-guide-card a,
  .map-navigation-image img { transition: none; }
}

/* Quiet Chinese framing: fine paper double-rules and small ruyi joins, kept
   intentionally low-contrast so they support content rather than decorate it. */
.section-title,
.home-curated-rail,
.course-ledger-copy,
.faq-ledger-title {
  position: relative;
}
.section-title::after,
.home-curated-rail::after,
.course-ledger-copy::after,
.faq-ledger-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  width: min(126px, 38%);
  height: 10px;
  opacity: .62;
  background:
    radial-gradient(circle at 8px 5px, transparent 0 3px, rgba(176,138,75,.62) 3.5px 4.5px, transparent 5px) 0 0 / 24px 10px repeat-x,
    linear-gradient(90deg, rgba(99,94,83,.38), rgba(99,94,83,.10)) center / 100% 1px no-repeat;
}
.section-title { padding-bottom: 10px; }

:is(.course-map-panel, .faq-category-rail, .map-navigation-card, .aside-panel, .contact-panel) {
  border-color: rgba(176,138,75,.38) !important;
  outline: 1px solid rgba(99,94,83,.10);
  outline-offset: -7px;
}
:is(.course-map-panel, .faq-category-rail, .map-navigation-card) {
  background-image:
    linear-gradient(90deg, rgba(176,138,75,.44), rgba(176,138,75,.44)) left 15px top 15px / 58px 1px no-repeat,
    linear-gradient(180deg, rgba(176,138,75,.44), rgba(176,138,75,.44)) left 15px top 15px / 1px 58px no-repeat,
    linear-gradient(90deg, rgba(176,138,75,.34), rgba(176,138,75,.34)) right 15px bottom 15px / 42px 1px no-repeat,
    linear-gradient(180deg, rgba(176,138,75,.34), rgba(176,138,75,.34)) right 15px bottom 15px / 1px 42px no-repeat;
  background-repeat: no-repeat;
}
.detail > .article-body,
.product-spec-panel,
.course-ledger-list {
  border-color: rgba(99,94,83,.30);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.38), inset 0 0 0 8px rgba(176,138,75,.028);
}

.home-hero-content {
  width: min(100% - 40px, var(--max));
  padding: 70px 0 64px;
  text-align: left;
}
.hero-kicker,
.section-kicker {
  display: block;
  color: var(--zhusha);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
}
.hero-kicker {
  margin-bottom: 24px;
  color: var(--zhusha);
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: .34em;
}
.hero-kicker::before,
.section-kicker::before,
.small-red::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 9px;
  vertical-align: -3px;
  background: currentColor;
  -webkit-mask: var(--kicker-icon, var(--icon-seal)) center / contain no-repeat;
  mask: var(--kicker-icon, var(--icon-seal)) center / contain no-repeat;
  opacity: .82;
}
.hero-kicker { --kicker-icon: var(--icon-xiao); }
.home-product-section .section-kicker,
.product-collection-hero .eyebrow,
.product-detail-page .section-kicker { --kicker-icon: var(--icon-bamboo); }
.home-media-section .section-kicker,
.sound-title .section-kicker { --kicker-icon: var(--icon-sound); }
.home-course-section .section-kicker { --kicker-icon: var(--icon-scroll); }
.home-contact-section .section-kicker,
.contact-layout .small-red { --kicker-icon: var(--icon-mountain); }
.home-hero-content h1 {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
  padding: 0 .14em 18px 0;
  color: var(--primary);
  font-size: clamp(36px, 6vw, 68px);
  letter-spacing: .08em;
}
.home-hero-content h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(66vw, 420px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(116,119,125,.52), transparent);
}
.home-hero-content .hero-slogan {
  color: var(--primary);
  font-family: var(--serif);
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: .12em;
}
.home-hero-content .hero-summary {
  max-width: 700px;
  margin-top: 26px;
  color: var(--on-surface-variant);
  font-size: 15px;
  letter-spacing: .02em;
}
.home-hero.has-object .hero-content p {
  margin-left: 0;
  margin-right: 0;
}
.hero-vertical {
  position: absolute;
  z-index: 3;
  left: clamp(22px, 5vw, 72px);
  top: 112px;
  writing-mode: vertical-rl;
  color: rgba(249,243,227,.78);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 2.2;
  letter-spacing: .18em;
}
.collection-tabs-home {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: clamp(28px, 7vw, 86px);
  margin-top: 52px;
  color: var(--secondary);
  font-family: var(--serif);
  font-size: 17px;
}
.collection-tabs-home a:first-child,
.collection-tabs-home a:hover {
  color: var(--zhusha);
}
.collection-hero .hero-actions {
  justify-content: flex-start;
  margin-top: 42px;
}
.collection-hero .hero-actions .button.secondary {
  color: var(--primary);
  border-color: rgba(22,40,57,.72);
}
.cloud-line {
  position: absolute;
  z-index: 3;
  left: clamp(20px, 8vw, 96px);
  right: clamp(20px, 8vw, 96px);
  height: 34px;
  pointer-events: none;
}
.cloud-line.top { top: 18px; }
.cloud-line.bottom {
  bottom: 20px;
  transform: rotate(180deg);
}
.cloud-line::before,
.cloud-line::after {
  content: "";
  position: absolute;
  top: 12px;
  width: min(34vw, 260px);
  height: 18px;
  border-top: 1px solid rgba(99,94,83,.42);
  background:
    radial-gradient(circle at 18px 11px, transparent 0 10px, rgba(99,94,83,.34) 10px 11px, transparent 12px),
    radial-gradient(circle at 48px 11px, transparent 0 10px, rgba(99,94,83,.24) 10px 11px, transparent 12px),
    linear-gradient(rgba(99,94,83,.42), rgba(99,94,83,.42)) left top / 100% 1px no-repeat;
}
.cloud-line::before { left: 0; }
.cloud-line::after {
  right: 0;
  transform: scaleX(-1);
}
.hero-vertical::before {
  content: "";
  display: block;
  width: 1px;
  height: 96px;
  margin: 0 auto 20px;
  background: rgba(249,243,227,.45);
}
.hero-bottom-line {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 32px;
  display: flex;
  gap: clamp(18px, 5vw, 78px);
  align-items: center;
  width: min(100% - 40px, 840px);
  padding: 17px 0;
  transform: translateX(-50%);
  border-top: 1px solid rgba(249,243,227,.34);
  border-bottom: 1px solid rgba(249,243,227,.24);
  color: rgba(249,243,227,.86);
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: .16em;
}
.hero-bottom-line span {
  flex: 1;
  text-align: center;
}
.home-stat-band {
  position: relative;
  z-index: 2;
  background: var(--primary);
  color: #fff;
}
.home-stat-band::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176,138,75,.62), transparent);
}
.home-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.home-stat {
  min-height: 116px;
  padding: 24px 28px;
  border-left: 1px solid rgba(249,243,227,.16);
}
.home-stat:last-child {
  border-right: 1px solid rgba(249,243,227,.16);
}
.home-stat strong {
  display: block;
  color: var(--yase-paper);
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
}
.home-stat span {
  display: block;
  margin-top: 9px;
  color: rgba(249,243,227,.68);
  font-size: 12px;
}
.home-intro-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(73,109,90,.07), transparent 34%),
    var(--surface);
}
.home-intro-section::after {
  content: "箫";
  position: absolute;
  right: max(20px, calc((100vw - var(--max)) / 2));
  bottom: -94px;
  color: rgba(174,32,18,.055);
  font-family: var(--serif);
  font-size: 260px;
  line-height: 1;
}
.home-craft {
  position: relative;
  z-index: 1;
}
.home-craft .craft-image {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  grid-template-rows: auto minmax(112px, auto);
  min-height: 560px;
  padding: 18px;
  border: 1px solid rgba(116,119,125,.18);
  background: rgba(249,243,227,.56);
}
.home-craft .craft-image img {
  grid-column: 1 / -1;
  filter: saturate(.88) contrast(1.02);
}
.craft-caption {
  position: static;
  align-self: center;
  padding: 18px 24px 10px 0;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1.8;
}
.home-craft .year-stamp {
  position: static;
  width: auto;
  height: auto;
  min-height: 112px;
  margin: 0 -1px -1px 0;
  align-self: stretch;
}
.intro-copy {
  padding-top: 26px;
}
.intro-copy .section-kicker,
.section-title .section-kicker,
.contact-split .section-kicker {
  margin-bottom: 14px;
}
.intro-copy h2 {
  max-width: 11em;
}
.ink-note {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 20px;
  max-width: 620px;
  margin-top: 34px;
  padding: 24px 0 0;
  border-top: 1px solid rgba(116,119,125,.18);
}
.ink-note span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--zhusha);
  color: #fff;
  font-family: var(--serif);
  font-size: 22px;
}
.ink-note p {
  font-size: 14px;
}
.home-services-section {
  position: relative;
  overflow: hidden;
}
.home-services-section::before,
.home-product-section::before,
.home-media-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background:
    linear-gradient(90deg, rgba(116,119,125,.09) 1px, transparent 1px),
    linear-gradient(180deg, rgba(116,119,125,.07) 1px, transparent 1px);
  background-size: 48px 48px;
}
.home-services-section .wrap,
.home-product-section .wrap,
.home-media-section .wrap {
  position: relative;
  z-index: 1;
}
.ritual-grid {
  counter-reset: ritual;
}
.ritual-card {
  position: relative;
  min-height: 350px;
  padding: 42px 34px 34px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.44)),
    var(--yase-paper);
}
.ritual-card::after {
  content: "";
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 78px;
  height: 1px;
  background: rgba(116,119,125,.16);
}
.ritual-number {
  position: absolute;
  top: 28px;
  right: 28px;
  color: rgba(22,40,57,.14);
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
}
.ritual-card h3 {
  font-size: 28px;
}
.ritual-card a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-top: 44px;
  color: var(--zhusha);
  font-size: 13px;
  font-weight: 700;
}
.teacher-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
  gap: 22px;
}
.teacher-home-card {
  grid-column: auto;
  min-height: 430px;
}
.featured-teacher-home {
  grid-column: auto;
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  gap: 28px;
}
.teacher-home-card .card-media,
.teacher-home-card .visual-placeholder {
  margin: -28px -28px 24px;
  border-width: 0 0 1px;
}
.featured-teacher-home .card-media,
.featured-teacher-home .visual-placeholder {
  min-height: 100%;
  margin: -28px 0 -28px -28px;
  border-width: 0 1px 0 0;
}
.teacher-home-card .card-media img {
  filter: grayscale(.72) contrast(1.06);
}
.home-product-section,
.home-media-section {
  position: relative;
  overflow: hidden;
}
.product-title {
  text-align: center;
  margin-left: auto;
}
.artifact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 88px 62px;
}
.artifact-card {
  position: relative;
  min-height: 660px;
  padding: clamp(34px, 4.8vw, 50px);
  border: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.24)),
    repeating-linear-gradient(90deg, rgba(99,94,83,.032) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(0deg, rgba(99,94,83,.024) 0 1px, transparent 1px 22px),
    rgba(249,243,227,.52);
  box-shadow:
    inset 0 0 0 1px rgba(99,94,83,.24),
    inset 0 0 0 12px rgba(255,255,255,.2),
    inset 0 0 0 13px rgba(99,94,83,.08);
}
.artifact-card:nth-child(even) {
  margin-top: 92px;
}
.artifact-card::before {
  content: "";
  position: absolute;
  inset: 20px;
  pointer-events: none;
  border: 1px solid rgba(99,94,83,.22);
  background:
    linear-gradient(90deg, rgba(99,94,83,.34), rgba(99,94,83,.34)) left -1px top -1px / 82px 1px no-repeat,
    linear-gradient(180deg, rgba(99,94,83,.34), rgba(99,94,83,.34)) left -1px top -1px / 1px 82px no-repeat,
    linear-gradient(90deg, rgba(99,94,83,.34), rgba(99,94,83,.34)) right -1px top -1px / 82px 1px no-repeat,
    linear-gradient(180deg, rgba(99,94,83,.34), rgba(99,94,83,.34)) right -1px top -1px / 1px 82px no-repeat,
    linear-gradient(90deg, rgba(99,94,83,.34), rgba(99,94,83,.34)) left -1px bottom -1px / 82px 1px no-repeat,
    linear-gradient(180deg, rgba(99,94,83,.34), rgba(99,94,83,.34)) left -1px bottom -1px / 1px 82px no-repeat,
    linear-gradient(90deg, rgba(99,94,83,.34), rgba(99,94,83,.34)) right -1px bottom -1px / 82px 1px no-repeat,
    linear-gradient(180deg, rgba(99,94,83,.34), rgba(99,94,83,.34)) right -1px bottom -1px / 1px 82px no-repeat;
}
.artifact-card::after {
  content: "";
  position: absolute;
  inset: 32px;
  pointer-events: none;
  opacity: .5;
  background:
    linear-gradient(90deg, rgba(99,94,83,.22), transparent 40%) left top / 48px 1px no-repeat,
    linear-gradient(180deg, rgba(99,94,83,.22), transparent 40%) left top / 1px 48px no-repeat,
    linear-gradient(270deg, rgba(99,94,83,.22), transparent 40%) right top / 48px 1px no-repeat,
    linear-gradient(180deg, rgba(99,94,83,.22), transparent 40%) right top / 1px 48px no-repeat,
    linear-gradient(90deg, rgba(99,94,83,.22), transparent 40%) left bottom / 48px 1px no-repeat,
    linear-gradient(0deg, rgba(99,94,83,.22), transparent 40%) left bottom / 1px 48px no-repeat,
    linear-gradient(270deg, rgba(99,94,83,.22), transparent 40%) right bottom / 48px 1px no-repeat,
    linear-gradient(0deg, rgba(99,94,83,.22), transparent 40%) right bottom / 1px 48px no-repeat;
}
.artifact-card .card-media,
.artifact-card .visual-placeholder {
  min-height: 318px;
  margin: 0 0 34px;
  border: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(176,138,75,.32), rgba(22,40,57,.07) 42%, transparent 68%),
    var(--surface);
  box-shadow:
    0 0 0 1px rgba(99,94,83,.18),
    0 0 0 12px rgba(249,243,227,.42);
}
.artifact-card .card-media::before,
.artifact-card .card-media::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 54px;
  height: 54px;
  pointer-events: none;
  opacity: .72;
  background:
    linear-gradient(90deg, rgba(249,243,227,.88), rgba(249,243,227,.88)) left top / 54px 10px no-repeat,
    linear-gradient(180deg, rgba(249,243,227,.88), rgba(249,243,227,.88)) left top / 10px 54px no-repeat;
}
.artifact-card .card-media::before {
  left: 0;
  top: 0;
}
.artifact-card .card-media::after {
  right: 0;
  bottom: 0;
  transform: rotate(180deg);
}
.artifact-card .card-media img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: contrast(1.05) saturate(.9);
}
.artifact-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
}
.artifact-title-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.artifact-seal {
  position: static;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: 8px;
  background: rgba(174,32,18,.9);
  color: #fff;
  font-family: var(--kai);
  font-size: 17px;
  box-shadow: 0 0 0 5px rgba(174,32,18,.045);
}
.artifact-card .meta-pills {
  margin: 0 0 16px 52px;
}
.artifact-card h3 {
  margin: 0;
  color: var(--primary);
  font-family: var(--display-serif);
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 600;
  letter-spacing: .025em;
  line-height: 1.24;
}
.artifact-card p {
  position: relative;
  margin: 22px 0 0 52px;
  padding-left: 18px;
  border-left: 1px solid rgba(99,94,83,.42);
  color: var(--on-surface-variant);
  font-size: 15px;
  line-height: 1.9;
}
.artifact-card .button {
  width: max-content;
  margin: 44px 0 0 52px;
  min-height: 44px;
  padding: 0 28px;
  letter-spacing: .08em;
}
.artifact-card .artifact-tags span {
  min-height: 28px;
  padding: 0 12px;
  border-color: rgba(99,94,83,.2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(249,243,227,.5));
  color: var(--primary);
  font-family: var(--kai);
  font-size: 14px;
  font-weight: 600;
}
.course-path-home {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.course-path-home::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(174,32,18,.45), transparent);
}
.course-path-card {
  position: relative;
  padding-top: 92px;
}
.course-step {
  position: absolute;
  top: 24px;
  left: 28px;
  color: var(--zhusha);
  font-family: var(--serif);
  font-size: 18px;
}
.course-step::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 42px;
  height: 1px;
  background: var(--zhusha);
}
.media-home-card .card-media img {
  filter: saturate(.86) contrast(1.02);
}
.faq-preview .faq-item {
  transition: border-color .2s ease, transform .2s ease;
}
.faq-preview .faq-item:hover {
  transform: translateX(6px);
  border-color: rgba(174,32,18,.28);
}
.contact-split .map-card {
  position: relative;
  padding: 14px;
  border: 1px solid rgba(116,119,125,.18);
  background: rgba(255,255,255,.5);
}
.contact-split .map-card::after {
  content: "到";
  position: absolute;
  right: 26px;
  bottom: 26px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--zhusha);
  color: #fff;
  font-family: var(--serif);
  font-size: 20px;
}
/* Homepage museum-aligned sections */
.entry-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.entry-guide-card {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 24px;
  min-height: 326px;
  padding: 38px 32px 34px;
  overflow: hidden;
  border: 1px solid rgba(99,94,83,.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(249,243,227,.44)),
    var(--yase-paper);
}
.home-teacher-card::before,
.course-ledger-list::before,
.article-note-stack::before,
.faq-manuscript-list::before,
.home-contact-panel::before {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(99,94,83,.3), rgba(99,94,83,.3)) left top / 72px 1px no-repeat,
    linear-gradient(180deg, rgba(99,94,83,.3), rgba(99,94,83,.3)) left top / 1px 72px no-repeat,
    linear-gradient(90deg, rgba(99,94,83,.3), rgba(99,94,83,.3)) right top / 72px 1px no-repeat,
    linear-gradient(180deg, rgba(99,94,83,.3), rgba(99,94,83,.3)) right top / 1px 72px no-repeat,
    linear-gradient(90deg, rgba(99,94,83,.3), rgba(99,94,83,.3)) left bottom / 72px 1px no-repeat,
    linear-gradient(180deg, rgba(99,94,83,.3), rgba(99,94,83,.3)) left bottom / 1px 72px no-repeat,
    linear-gradient(90deg, rgba(99,94,83,.3), rgba(99,94,83,.3)) right bottom / 72px 1px no-repeat,
    linear-gradient(180deg, rgba(99,94,83,.3), rgba(99,94,83,.3)) right bottom / 1px 72px no-repeat;
}
.home-teacher-card > *,
.course-ledger-list > *,
.article-note-stack > *,
.faq-manuscript-list > *,
.home-contact-panel > * {
  position: relative;
  z-index: 1;
}
.entry-guide-index {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 18px;
  padding-top: 2px;
  border-right: 1px solid rgba(99,94,83,.18);
}
.entry-guide-index span {
  color: rgba(22,40,57,.28);
  font-family: var(--display-serif);
  font-size: 34px;
  line-height: 1;
  writing-mode: vertical-rl;
}
.entry-guide-index i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--zhusha);
  color: #fff;
  font-family: var(--kai);
  font-size: 17px;
  font-style: normal;
}
.entry-guide-card h3 {
  margin: 8px 0 18px;
  color: var(--primary);
  font-family: var(--display-serif);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.28;
}
.entry-guide-card p {
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 1.9;
}
.entry-guide-card > div:last-child > p:first-child {
  color: var(--zhusha);
  font-family: var(--kai);
  font-weight: 600;
}
.entry-guide-line {
  width: 48px;
  height: 1px;
  margin-bottom: 20px;
  background: rgba(174,32,18,.42);
}
.entry-guide-card a,
.home-text-link {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 32px;
  margin-top: 24px;
  color: var(--zhusha);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}
.home-text-link::after,
.entry-guide-card a::after {
  content: "";
  width: 34px;
  height: 1px;
  margin-left: 10px;
  background: currentColor;
}

.home-curated-layout {
  display: grid;
  grid-template-columns: minmax(220px, .38fr) minmax(0, 1fr);
  gap: clamp(38px, 6vw, 72px);
  align-items: start;
}
.home-curated-rail,
.course-ledger-copy,
.faq-ledger-title {
  padding-top: 28px;
  border-top: 1px solid rgba(99,94,83,.26);
}
.home-curated-rail {
  position: sticky;
  top: 102px;
}
.home-curated-rail h2,
.course-ledger-copy h2,
.faq-ledger-title h2 {
  max-width: 8em;
  margin: 14px 0 18px;
  color: var(--primary);
  font-family: var(--display-serif);
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.24;
}
.home-curated-rail p,
.course-ledger-copy p,
.faq-ledger-title p {
  color: var(--on-surface-variant);
  font-size: 15px;
  line-height: 2;
}
.home-curated-rail .button,
.faq-ledger-title .button {
  margin-top: 30px;
}
.teacher-archive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.home-teacher-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  min-height: 100%;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(99,94,83,.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,.3)),
    repeating-linear-gradient(90deg, rgba(99,94,83,.026) 0 1px, transparent 1px 18px),
    rgba(249,243,227,.38);
}
.home-teacher-card.is-featured {
  grid-column: 1 / -1;
  grid-template-columns: minmax(260px, .78fr) minmax(0, 1fr);
  min-height: 390px;
  padding: 30px;
}
.teacher-archive-portrait {
  position: relative;
  margin: 0;
  min-height: 285px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 36%, rgba(176,138,75,.16), rgba(22,40,57,.05) 50%, transparent 72%),
    var(--surface);
}
.home-teacher-card.is-featured .teacher-archive-portrait {
  min-height: 330px;
}
.teacher-archive-portrait img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(.62) contrast(1.06) saturate(.88);
}
.teacher-archive-portrait span {
  position: absolute;
  left: 16px;
  top: 16px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: rgba(174,32,18,.92);
  color: #fff;
  font-family: var(--kai);
  font-size: 17px;
}
.teacher-archive-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.archive-eyebrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(99,94,83,.16);
}
.archive-eyebrow span {
  color: var(--zhusha);
  font-family: var(--kai);
  font-size: 14px;
  font-weight: 600;
}
.archive-eyebrow p {
  margin: 0;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1.6;
}
.home-teacher-card h3 {
  margin: 0 0 14px;
  color: var(--primary);
  font-family: var(--display-serif);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.24;
}
.home-teacher-card:not(.is-featured) h3 {
  font-size: clamp(24px, 2.6vw, 32px);
}
.home-teacher-card p {
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 1.9;
}
.home-paper-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.home-paper-tags span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(99,94,83,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(249,243,227,.48));
  color: var(--primary);
  font-family: var(--kai);
  font-size: 13px;
  font-weight: 600;
}
.teacher-archive-copy .home-text-link {
  margin-top: auto;
  padding-top: 26px;
}

.course-home-layout {
  display: grid;
  grid-template-columns: minmax(210px, .48fr) minmax(0, 1fr) minmax(250px, .48fr);
  gap: 34px;
  align-items: start;
}
.course-ledger-list {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(99,94,83,.24);
  background:
    repeating-linear-gradient(90deg, rgba(99,94,83,.03) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.3)),
    rgba(249,243,227,.34);
}
.course-ledger-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: start;
  padding: 30px 28px;
  border-bottom: 1px solid rgba(99,94,83,.14);
}
.course-ledger-row:last-child {
  border-bottom: 0;
}
.course-ledger-number {
  color: rgba(174,32,18,.82);
  font-family: var(--display-serif);
  font-size: 28px;
  line-height: 1;
}
.course-ledger-row .home-paper-tags {
  margin: 0 0 12px;
}
.course-ledger-row h3 {
  margin: 0 0 10px;
  color: var(--primary);
  font-family: var(--display-serif);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 600;
  letter-spacing: .035em;
  line-height: 1.3;
}
.course-ledger-row p {
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 1.9;
}
.course-ledger-row .home-text-link {
  margin-top: 8px;
  white-space: nowrap;
}
.course-home-plate {
  position: relative;
  margin: 74px 0 0;
  padding: 16px 16px 42px;
  border: 1px solid rgba(99,94,83,.24);
  background: rgba(255,255,255,.55);
}
.course-home-plate::before {
  content: "习";
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--zhusha);
  color: #fff;
  font-family: var(--kai);
  font-size: 17px;
}
.course-home-plate img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: contrast(1.04) saturate(.88);
}
.course-home-plate figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 15px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1.7;
}

.sound-title {
  text-align: left;
  margin-left: 0;
}
.sound-title p {
  margin-left: 0;
}
.sound-ledger-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .86fr) minmax(280px, .72fr);
  gap: 24px;
  align-items: stretch;
}
.sound-card {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(99,94,83,.24);
  background:
    repeating-linear-gradient(90deg, rgba(99,94,83,.026) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.3));
}
.sound-card.is-featured {
  grid-row: span 2;
}
.sound-card figure {
  position: relative;
  min-height: 220px;
  margin: 0;
  overflow: hidden;
  background: var(--primary);
}
.sound-card.is-featured figure {
  min-height: 420px;
}
.sound-card figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  opacity: .88;
  filter: contrast(1.04) saturate(.84);
}
.sound-card figure span {
  position: absolute;
  left: 16px;
  bottom: 16px;
  min-height: 28px;
  padding: 5px 10px;
  background: rgba(22,40,57,.86);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}
.sound-card-copy {
  padding: 26px;
}
.sound-card-copy .home-paper-tags {
  margin: 0 0 14px;
}
.sound-card h3 {
  margin: 0 0 12px;
  color: var(--primary);
  font-family: var(--display-serif);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 600;
  line-height: 1.32;
}
.sound-card p {
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 1.9;
}
.article-note-stack {
  position: relative;
  grid-column: 3;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(99,94,83,.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,.28)),
    repeating-linear-gradient(0deg, rgba(99,94,83,.04) 0 1px, transparent 1px 34px),
    rgba(249,243,227,.48);
}
.article-note-stack > .section-kicker {
  margin-bottom: 20px;
}
.article-note-stack article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid rgba(99,94,83,.14);
}
.article-note-stack article > span {
  color: var(--zhusha);
  font-family: var(--kai);
  font-size: 14px;
  font-weight: 600;
}
.article-note-stack article p:first-child {
  margin-bottom: 8px;
  color: var(--secondary);
  font-size: 12px;
}
.article-note-stack h3 {
  margin: 0 0 10px;
  color: var(--primary);
  font-family: var(--display-serif);
  font-size: 22px;
  line-height: 1.36;
}
.article-note-stack p {
  color: var(--on-surface-variant);
  font-size: 13px;
  line-height: 1.85;
}
.article-note-stack .button {
  align-self: flex-start;
  margin-top: auto;
}

.faq-ledger-layout {
  display: grid;
  grid-template-columns: minmax(250px, .42fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 72px);
  align-items: start;
}
.faq-manuscript-list {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(99,94,83,.24);
  background:
    repeating-linear-gradient(90deg, rgba(99,94,83,.032) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(0deg, rgba(99,94,83,.026) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.28)),
    rgba(249,243,227,.44);
}
.faq-manuscript-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 22px;
  padding: 30px 32px;
  border-bottom: 1px solid rgba(99,94,83,.14);
}
.faq-manuscript-item:last-child {
  border-bottom: 0;
}
.faq-manuscript-item > span {
  color: var(--zhusha);
  font-family: var(--kai);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.faq-manuscript-item h3 {
  margin: 0 0 12px;
  color: var(--primary);
  font-family: var(--display-serif);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 600;
  line-height: 1.36;
}
.faq-manuscript-item p {
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 1.9;
}

.home-contact-panel {
  position: relative;
  padding: 38px;
  overflow: hidden;
  border: 1px solid rgba(99,94,83,.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.34)),
    repeating-linear-gradient(90deg, rgba(99,94,83,.028) 0 1px, transparent 1px 18px),
    rgba(249,243,227,.42);
}
.home-contact-panel .map-card {
  margin: 0;
  box-shadow:
    0 0 0 1px rgba(99,94,83,.12),
    0 0 0 12px rgba(249,243,227,.28);
}
.home-contact-panel .content-block {
  padding-top: 12px;
}

@media (max-width: 1040px) {
  .home-curated-layout,
  .course-home-layout,
  .sound-ledger-grid,
  .faq-ledger-layout {
    grid-template-columns: 1fr;
  }
  .home-curated-rail {
    position: relative;
    top: auto;
    max-width: 760px;
  }
  .course-home-plate {
    width: min(100%, 520px);
    margin-top: 0;
  }
  .sound-card.is-featured {
    grid-row: auto;
  }
  .article-note-stack {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 720px) {
  .entry-guide-grid,
  .teacher-archive-grid {
    grid-template-columns: 1fr;
  }
  .entry-guide-card,
  .home-teacher-card,
  .home-teacher-card.is-featured {
    grid-template-columns: 1fr;
    padding: 24px;
  }
  .entry-guide-card {
    min-height: auto;
  }
  .entry-guide-index {
    grid-template-columns: auto auto;
    justify-content: start;
    border-right: 0;
    border-bottom: 1px solid rgba(99,94,83,.16);
    padding: 0 0 18px;
  }
  .entry-guide-index span {
    writing-mode: horizontal-tb;
    font-size: 26px;
  }
  .home-teacher-card.is-featured {
    min-height: auto;
  }
  .teacher-archive-portrait,
  .home-teacher-card.is-featured .teacher-archive-portrait {
    min-height: 260px;
  }
  .archive-eyebrow,
  .course-ledger-row,
  .article-note-stack article,
  .faq-manuscript-item {
    grid-template-columns: 1fr;
  }
  .course-ledger-row .home-text-link {
    margin-top: 0;
  }
  .sound-card.is-featured figure,
  .sound-card figure {
    min-height: 260px;
  }
  .home-contact-panel {
    padding: 24px;
  }
}

.hero-facts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.hero-facts span,
.meta-pills span,
.inline-meta span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.36);
  color: inherit;
  font-size: 12px;
}
.directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.directory-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.content-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 28px;
  border: 1px solid rgba(116,119,125,.16);
  background: rgba(255,255,255,.58);
}
.content-card.featured {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 28px;
  align-items: stretch;
}
.content-card h3 {
  margin: 0 0 10px;
  font-family: var(--serif);
  color: var(--primary);
  font-size: 24px;
  line-height: 1.35;
}
.content-card p {
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 1.9;
}
.content-card .button {
  align-self: flex-start;
  margin-top: auto;
}
.card-media,
.visual-placeholder {
  position: relative;
  min-height: 240px;
  overflow: hidden;
  border: 1px solid rgba(116,119,125,.16);
  background: linear-gradient(145deg, rgba(255,255,255,.68), rgba(240,237,237,.42));
}
.card-media img {
  aspect-ratio: 4 / 3;
}
.visual-placeholder {
  display: grid;
  place-items: center;
  color: rgba(174,32,18,.22);
  font-family: var(--serif);
  font-size: clamp(58px, 9vw, 112px);
}
.visual-placeholder.small {
  min-height: 160px;
  font-size: 54px;
}
.meta-pills,
.inline-meta,
.share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  color: var(--secondary);
}
.meta-pills span,
.inline-meta span {
  border-color: rgba(116,119,125,.18);
  background: var(--surface-container);
  color: var(--primary);
}
.detail-header {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(320px, .74fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 44px;
}
.detail-header .detail-media {
  margin: 0;
}
.detail-aside {
  display: grid;
  gap: 14px;
}
.aside-panel {
  padding: 22px;
  border: 1px solid rgba(116,119,125,.16);
  background: rgba(255,255,255,.52);
}
.share-panel .muted {
  color: var(--on-surface-variant);
  font-size: 13px;
  line-height: 1.8;
}
.share-panel .share-row {
  margin: 18px 0 0;
}

.page-share-trigger {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 36;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid rgba(22,40,57,.82);
  border-radius: 2px;
  background: rgba(22,40,57,.94);
  color: var(--yase-paper);
  box-shadow: 0 10px 28px rgba(22,40,57,.2), inset 0 0 0 3px rgba(255,255,255,.06);
  font: 600 13px/1 var(--sans);
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.page-share-trigger > span:first-child {
  font-size: 18px;
  line-height: 1;
}
.page-share-trigger:hover,
.page-share-trigger:focus-visible {
  background: var(--zhusha);
  border-color: rgba(109,28,20,.9);
}
.page-share-dialog {
  width: min(calc(100% - 32px), 520px);
  max-width: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(99,94,83,.34);
  border-radius: 2px;
  background:
    var(--pattern-paper),
    rgba(249,243,227,.98);
  background-size: 56px 56px, 56px 56px, 112px 112px, 112px 112px, auto;
  color: var(--on-surface);
  box-shadow: 0 28px 80px rgba(11,24,36,.28), inset 0 0 0 7px rgba(255,255,255,.28);
}
.page-share-dialog::backdrop {
  background: rgba(8,17,24,.46);
  backdrop-filter: blur(3px);
}
.page-share-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 30px 30px 22px;
  border-bottom: 1px solid rgba(99,94,83,.16);
}
.page-share-heading span {
  display: block;
  margin-bottom: 7px;
  color: var(--zhusha);
  font-family: var(--serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
}
.page-share-heading h2 {
  margin: 0;
  color: var(--primary);
  font-family: var(--display-serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: .08em;
}
.page-share-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid rgba(99,94,83,.24);
  border-radius: 0;
  background: rgba(255,255,255,.44);
  color: var(--primary);
  font: 24px/1 var(--sans);
  cursor: pointer;
}
.page-share-current {
  margin: 0;
  padding: 20px 30px 0;
  color: var(--on-surface-variant);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.7;
}
.page-share-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding: 22px 30px 16px;
}
.page-share-action {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 76px;
  padding: 12px 14px;
  text-align: left;
  border: 1px solid rgba(99,94,83,.24);
  border-radius: 0;
  background: rgba(255,255,255,.48);
  color: var(--primary);
  cursor: pointer;
}
.page-share-action:hover,
.page-share-action:focus-visible,
.page-share-channels button:hover,
.page-share-channels button:focus-visible {
  border-color: rgba(174,32,18,.56);
  color: var(--zhusha);
}
.page-share-action-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(174,32,18,.28);
  color: var(--zhusha);
  font-family: var(--kai);
  font-size: 17px;
}
.page-share-action strong,
.page-share-action small {
  display: block;
}
.page-share-action strong {
  font-size: 14px;
}
.page-share-action small {
  margin-top: 4px;
  color: var(--on-surface-variant);
  font-size: 11px;
  font-weight: 400;
}
.page-share-channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 30px;
}
.page-share-channels button {
  min-height: 40px;
  border: 1px solid rgba(99,94,83,.22);
  border-radius: 0;
  background: rgba(249,243,227,.62);
  color: var(--primary);
  font: 600 13px/1 var(--sans);
  cursor: pointer;
}
.page-share-status {
  min-height: 54px;
  margin: 0;
  padding: 14px 30px 22px;
  color: var(--bamboo-deep);
  font-size: 12px;
  line-height: 1.6;
}
.aside-panel h2,
.aside-panel h3 {
  margin: 0 0 12px;
  font-family: var(--serif);
  color: var(--primary);
  font-size: 18px;
}
.inline-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.inline-list li {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(116,119,125,.14);
  color: var(--on-surface-variant);
  font-size: 13px;
}
.inline-list strong {
  color: var(--primary);
  font-family: var(--serif);
}
.article-body {
  max-width: 820px;
}
.article-body :is(h2, h3) {
  margin: 34px 0 12px;
  font-family: var(--serif);
  color: var(--primary);
  line-height: 1.4;
}
.article-body p,
.article-body li {
  color: var(--on-surface-variant);
  font-size: 15px;
  line-height: 2;
}
.article-body p + p {
  margin-top: 16px;
}
.article-body a {
  color: var(--zhusha);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.detail-gallery {
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid rgba(116,119,125,.18);
}
.detail-gallery-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 16px;
}
.detail-gallery-head span,
.detail-gallery-head i {
  color: var(--zhusha);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .16em;
}
.detail-gallery-head h2 {
  margin: 0;
  color: var(--primary);
  font-family: var(--serif);
  font-size: 22px;
}
.detail-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.detail-gallery-grid a {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(116,119,125,.16);
  background: var(--surface-container);
  aspect-ratio: 1 / 1;
  text-decoration: none;
}
.detail-gallery-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease, filter .35s ease;
}
.detail-gallery-grid a:hover img {
  filter: saturate(1.08) contrast(1.03);
  transform: scale(1.045);
}
.empty-state {
  padding: 40px;
  border: 1px solid rgba(116,119,125,.16);
  background: rgba(255,255,255,.48);
  color: var(--on-surface-variant);
  text-align: center;
}
.qa-block {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(116,119,125,.16);
}
.qa-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  background: var(--zhusha);
  color: #fff;
  font-family: var(--serif);
}
.media-link {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(22,40,57,.32);
  font-family: var(--serif);
}

/* 全站馆藏纸面系统：除首页和产品专属模块外，列表与详情统一使用这套语言。 */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 86px 0 72px;
  background:
    radial-gradient(ellipse at 50% 4%, rgba(255,255,255,.46), transparent 31rem),
    var(--pattern-paper);
  background-size: auto, 56px 56px, 56px 56px, 112px 112px, 112px 112px;
}
.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  top: 30px;
  width: min(28vw, 260px);
  height: 26px;
  opacity: .56;
  pointer-events: none;
  border-top: 1px solid rgba(99,94,83,.34);
  background:
    radial-gradient(circle at 22px 15px, transparent 0 12px, rgba(99,94,83,.28) 13px 14px, transparent 15px),
    radial-gradient(circle at 54px 15px, transparent 0 12px, rgba(99,94,83,.2) 13px 14px, transparent 15px);
}
.page-hero::before { left: 0; }
.page-hero::after {
  right: 0;
  transform: scaleX(-1);
}
.page-hero .crumb {
  margin-bottom: 34px;
}
.page-hero .hero-seal {
  box-shadow: 0 0 0 8px rgba(174,32,18,.055);
}
.page-hero h1 {
  max-width: 12em;
  margin-left: auto;
  margin-right: auto;
}
.directory-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
}
.content-card {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border-color: rgba(99,94,83,.24);
  background:
    var(--pattern-lattice),
    linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.34));
  background-size: 44px 44px, 44px 44px, 88px 88px, auto;
}
.content-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  pointer-events: none;
  opacity: .9;
  background: var(--pattern-corner);
}
.content-card > * {
  position: relative;
  z-index: 1;
}
.content-card.featured {
  grid-column: span 2;
  min-height: 430px;
  background:
    radial-gradient(ellipse at 92% 8%, rgba(174,32,18,.045), transparent 20rem),
    var(--pattern-lattice),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
  background-size: auto, 44px 44px, 44px 44px, 88px 88px, auto;
}
.content-card .card-media,
.content-card .visual-placeholder {
  border-color: rgba(99,94,83,.18);
  background:
    radial-gradient(circle at 50% 42%, rgba(176,138,75,.18), rgba(22,40,57,.04) 48%, transparent 68%),
    var(--surface);
}
.content-card .card-media img {
  filter: contrast(1.04) saturate(.88);
}
.content-card h3 {
  font-size: clamp(22px, 2.6vw, 32px);
}
.content-card .inline-list {
  margin: 18px 0 22px;
}
.content-card .button.secondary,
.aside-panel .button.secondary,
.share-row .button.secondary {
  background: rgba(249,243,227,.44);
}
.filter-line,
.collection-tabs {
  position: relative;
}
.filter-line::before,
.collection-tabs::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -18px;
  width: min(72vw, 520px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(99,94,83,.28), transparent);
}
.detail-header {
  position: relative;
  padding-top: 34px;
}
.detail-header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,94,83,.32), transparent);
}
.detail-media,
.detail-header > .visual-placeholder {
  position: relative;
  padding: 16px;
  border: 1px solid rgba(99,94,83,.2);
  background:
    repeating-linear-gradient(90deg, rgba(99,94,83,.025) 0 1px, transparent 1px 18px),
    rgba(255,255,255,.42);
}
.detail-media::before,
.detail-header > .visual-placeholder::before {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px solid rgba(99,94,83,.13);
}
.detail-media img {
  position: relative;
  z-index: 1;
  filter: contrast(1.04) saturate(.9);
}
.aside-panel,
.contact-panel,
form {
  position: relative;
  overflow: hidden;
  border-color: rgba(99,94,83,.2);
  background:
    repeating-linear-gradient(90deg, rgba(99,94,83,.035) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(0deg, rgba(99,94,83,.025) 0 1px, transparent 1px 24px),
    rgba(255,255,255,.54);
}
.aside-panel::after,
.contact-panel::after,
form::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 16px;
  width: 34px;
  height: 34px;
  opacity: .22;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 12px, rgba(99,94,83,.6) 13px 14px, transparent 15px);
}
.detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .38fr);
  gap: 58px;
  padding-top: 42px;
  border-top-color: rgba(99,94,83,.2);
}
.detail > .article-body:only-child {
  grid-column: 1 / -1;
  max-width: 860px;
  margin-inline: auto;
}
.article-body {
  padding: 0;
}
.article-body img {
  margin: 18px 0 24px;
  border: 1px solid rgba(99,94,83,.16);
}
.qa-block {
  background:
    linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.24));
}
.faq-list section + section {
  margin-top: 70px;
}
.faq-list .section-title {
  margin-bottom: 26px;
}
.faq-item {
  border-color: rgba(99,94,83,.18);
  background:
    repeating-linear-gradient(90deg, rgba(99,94,83,.025) 0 1px, transparent 1px 18px),
    rgba(255,255,255,.48);
}
.contact-layout {
  position: relative;
}
.map-panel img {
  filter: grayscale(.36) contrast(1.04) saturate(.82);
}
.empty-state {
  border-color: rgba(99,94,83,.18);
  background:
    repeating-linear-gradient(90deg, rgba(99,94,83,.035) 0 1px, transparent 1px 18px),
    rgba(255,255,255,.48);
}

.footer-brand {
  margin-bottom: 18px;
}
.footer-logo {
  display: block;
  width: min(100%, 208px);
  height: auto;
  margin: 0 auto;
}
.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-bottom: 18px;
}
.footer-links a {
  color: var(--secondary);
  font-size: 12px;
}
.footer-links a:hover {
  color: var(--zhusha);
}
.social-links {
  margin-top: 18px;
  margin-bottom: 0;
}

.archive-intro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .72fr);
  gap: 42px;
  align-items: stretch;
  margin-top: -20px;
  margin-bottom: 34px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(99,94,83,.2);
  background:
    repeating-linear-gradient(90deg, rgba(99,94,83,.03) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(0deg, rgba(99,94,83,.025) 0 1px, transparent 1px 24px),
    rgba(255,255,255,.46);
}
.archive-intro::before {
  content: "";
  position: absolute;
  inset: 14px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(99,94,83,.26), rgba(99,94,83,.26)) left top / 72px 1px no-repeat,
    linear-gradient(180deg, rgba(99,94,83,.26), rgba(99,94,83,.26)) left top / 1px 72px no-repeat,
    linear-gradient(90deg, rgba(99,94,83,.26), rgba(99,94,83,.26)) right bottom / 72px 1px no-repeat,
    linear-gradient(180deg, rgba(99,94,83,.26), rgba(99,94,83,.26)) right bottom / 1px 72px no-repeat;
}
.archive-copy,
.archive-visual {
  position: relative;
  z-index: 1;
}
.archive-copy {
  padding: clamp(18px, 4vw, 36px);
}
.archive-copy h2,
.course-map-panel h2,
.faq-category-rail h2 {
  margin: 0 0 18px;
  color: var(--primary);
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.32;
  letter-spacing: .08em;
}
.archive-copy p,
.course-map-panel p,
.faq-category-rail p {
  max-width: 650px;
  color: var(--on-surface-variant);
  font-size: 15px;
  line-height: 2;
}
.archive-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.archive-facts li {
  min-height: 96px;
  padding: 18px;
  border-left: 1px solid rgba(174,32,18,.58);
  background: rgba(249,243,227,.44);
}
.archive-facts strong {
  display: block;
  color: var(--primary);
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.1;
}
.archive-facts span {
  display: block;
  margin-top: 8px;
  color: var(--secondary);
  font-size: 12px;
}
.archive-facts.compact {
  grid-template-columns: 1fr;
  gap: 8px;
}
.archive-facts.compact li {
  min-height: 74px;
}
.archive-visual {
  margin: 0;
  min-height: 310px;
  padding: 14px;
  border: 1px solid rgba(99,94,83,.16);
  background: rgba(249,243,227,.5);
}
.archive-visual img {
  aspect-ratio: 4 / 3;
  filter: contrast(1.04) saturate(.88);
}

.teacher-directory .teacher-archive-card .card-media img,
.student-directory .card-media img {
  aspect-ratio: 4 / 4.8;
  filter: grayscale(.6) contrast(1.05) saturate(.82);
}
.teacher-directory .teacher-archive-card.featured {
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
}
.teacher-directory .teacher-archive-card.featured .card-media img {
  aspect-ratio: 4 / 5;
}

.course-archive-layout {
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
  gap: 34px;
  align-items: start;
}
.course-map-panel {
  position: sticky;
  top: 102px;
  padding: 24px;
  border: 1px solid rgba(99,94,83,.2);
  background:
    repeating-linear-gradient(90deg, rgba(99,94,83,.03) 0 1px, transparent 1px 22px),
    rgba(255,255,255,.52);
}
.course-map-panel figure {
  margin: 0 0 26px;
  padding: 12px;
  border: 1px solid rgba(99,94,83,.16);
  background: rgba(249,243,227,.5);
}
.course-map-panel img {
  aspect-ratio: 1 / 1;
  filter: contrast(1.05) saturate(.86);
}
.course-list-flow {
  display: grid;
  gap: 22px;
}
.course-archive-card {
  display: grid;
  grid-template-columns: minmax(180px, .44fr) minmax(0, 1fr);
  gap: 24px;
  min-height: 260px;
}
.course-archive-card .card-media,
.course-archive-card .visual-placeholder {
  min-height: 100%;
}
.course-archive-card .card-media img {
  aspect-ratio: 4 / 5;
}
.course-archive-card:nth-child(even) {
  margin-left: clamp(0px, 4vw, 44px);
}

.media-archive-grid,
.article-archive-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}
.media-archive-card,
.article-archive-card {
  grid-column: span 4;
}
.media-archive-card.featured,
.article-archive-card.featured {
  grid-column: span 8;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr);
  gap: 28px;
}
.media-archive-card.featured .card-media img,
.article-archive-card.featured .card-media img {
  aspect-ratio: 16 / 10;
}
.media-archive-card:not(.featured) .card-media img {
  aspect-ratio: 4 / 3;
}
.article-archive-card:not(.featured) .card-media img {
  aspect-ratio: 4 / 3.1;
}
.media-archive-card .card-media,
.article-archive-card .card-media {
  min-height: 220px;
}
.article-empty-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  min-height: 420px;
  padding: clamp(24px, 5vw, 46px);
  border: 1px solid rgba(99,94,83,.2);
  background:
    repeating-linear-gradient(90deg, rgba(99,94,83,.03) 0 1px, transparent 1px 22px),
    rgba(255,255,255,.5);
}
.article-empty-panel figure {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(99,94,83,.16);
  background: rgba(249,243,227,.52);
}
.article-empty-panel img {
  aspect-ratio: 4 / 3;
  filter: contrast(1.04) saturate(.86);
}
.article-empty-panel h2 {
  margin: 0 0 16px;
  color: var(--primary);
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.32;
  letter-spacing: .08em;
}
.article-empty-panel p {
  max-width: 620px;
  color: var(--on-surface-variant);
  font-size: 15px;
  line-height: 2;
}

.faq-index-layout {
  display: grid;
  grid-template-columns: minmax(280px, .46fr) minmax(0, 1fr);
  gap: 54px;
  align-items: start;
}
.faq-category-rail {
  position: sticky;
  top: 102px;
  padding: 34px 30px;
  border: 1px solid rgba(99,94,83,.2);
  background:
    repeating-linear-gradient(90deg, rgba(99,94,83,.03) 0 1px, transparent 1px 22px),
    rgba(255,255,255,.52);
}
.faq-category-list {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}
.faq-category-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(99,94,83,.16);
}
.faq-category-list strong {
  color: var(--primary);
  font-family: var(--serif);
  font-size: 18px;
}
.faq-category-list span {
  color: var(--zhusha);
  font-size: 12px;
}

/* Subtle ornamental pass: low-contrast geometric pattern + restrained ink-wash mountains. */
.home-services-section,
.home-product-section,
.home-media-section,
.home-faq-section,
.home-contact-section {
  background:
    radial-gradient(ellipse at 12% 8%, rgba(174,32,18,.035), transparent 24rem),
    radial-gradient(ellipse at 84% 12%, rgba(73,109,90,.045), transparent 26rem),
    var(--pattern-paper),
    var(--yase-paper);
  background-size: auto, auto, 56px 56px, 56px 56px, 112px 112px, 112px 112px, auto;
}

.home-intro-section,
.home-teacher-section,
.home-course-section {
  background:
    radial-gradient(ellipse at 80% 4%, rgba(73,109,90,.055), transparent 30rem),
    var(--pattern-paper),
    var(--surface);
  background-size: auto, 56px 56px, 56px 56px, 112px 112px, 112px 112px, auto;
}

.home-contact-section {
  position: relative;
  overflow: hidden;
  padding-bottom: 118px;
}

.home-contact-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(120px, 18vw, 210px);
  pointer-events: none;
  opacity: .42;
  background: var(--mountain-wash);
  mix-blend-mode: multiply;
}

.home-contact-section .wrap {
  position: relative;
  z-index: 1;
}

.archive-intro,
.course-map-panel,
.faq-category-rail,
.article-empty-panel,
.museum-card-frame,
.product-spec-panel,
.craft-maker-card {
  background:
    var(--pattern-lattice),
    linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.32));
  background-size: 44px 44px, 44px 44px, 88px 88px, auto;
}

.home-teacher-card::before,
.course-ledger-list::before,
.article-note-stack::before,
.faq-manuscript-list::before,
.home-contact-panel::before,
.archive-intro::before {
  background: var(--pattern-corner);
}

.aside-panel,
.contact-panel,
form,
.faq-item,
.empty-state {
  background:
    var(--pattern-paper),
    rgba(255,255,255,.55);
  background-size: 56px 56px, 56px 56px, 112px 112px, 112px 112px, auto;
}

.card-media,
.visual-placeholder,
.archive-visual,
.course-map-panel figure,
.article-empty-panel figure,
.contact-split .map-card,
.product-primary-image,
.product-thumb-grid figure {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.42),
    0 0 0 1px rgba(99,94,83,.16);
}

.section-title::after,
.archive-copy h2::after,
.home-curated-rail h2::after,
.course-ledger-copy h2::after,
.faq-ledger-title h2::after {
  content: "";
  display: block;
  width: 78px;
  height: 1px;
  margin: 16px auto 0;
  background: linear-gradient(90deg, transparent, rgba(174,32,18,.62), transparent);
}

.archive-copy h2::after,
.home-curated-rail h2::after,
.course-ledger-copy h2::after,
.faq-ledger-title h2::after {
  margin-left: 0;
}

.footer {
  position: relative;
  overflow: hidden;
  background:
    var(--pattern-paper),
    var(--yase-paper);
  background-size: 56px 56px, 56px 56px, 112px 112px, 112px 112px, auto;
}

.footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -36px;
  height: 140px;
  opacity: .2;
  pointer-events: none;
  background: var(--mountain-wash);
}

/* Border diversity pass: product = museum frame, teacher = portrait mount, course/article = scroll, FAQ = title slip. */
.entry-guide-card {
  border-color: rgba(99,94,83,.28);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.24);
}

.home-teacher-card,
.teacher-archive-card,
.detail-header .detail-media {
  border-color: rgba(99,94,83,.28);
  background:
    linear-gradient(90deg, rgba(176,138,75,.16) 0 12px, transparent 12px calc(100% - 12px), rgba(176,138,75,.12) calc(100% - 12px)),
    var(--pattern-paper),
    rgba(255,255,255,.58);
  background-size: auto, 56px 56px, 56px 56px, 112px 112px, 112px 112px, auto;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.44),
    inset 0 0 0 14px rgba(249,243,227,.22);
}

.artifact-card,
.museum-card-frame,
.product-primary-image,
.product-spec-panel {
  border-color: rgba(99,94,83,.36);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.36),
    inset 0 0 0 14px rgba(176,138,75,.055),
    0 22px 56px -48px rgba(22,40,57,.38);
}

.artifact-card::before,
.museum-card-frame::before {
  background:
    var(--pattern-corner),
    var(--frame-window);
}

.course-ledger-list,
.course-archive-card,
.article-note-stack,
.article-empty-panel,
.article-body {
  position: relative;
}

.course-ledger-list,
.article-note-stack,
.article-empty-panel {
  border-color: rgba(99,94,83,.28);
  box-shadow:
    inset 0 1px 0 rgba(176,138,75,.24),
    inset 0 -1px 0 rgba(176,138,75,.16);
}

.course-ledger-list::after,
.article-note-stack::after,
.article-empty-panel::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 18px;
  bottom: 18px;
  z-index: 0;
  pointer-events: none;
  opacity: .64;
  background: var(--frame-scroll);
}

.course-ledger-row,
.article-note-stack article {
  position: relative;
  z-index: 1;
}

.course-archive-card::after,
.media-archive-card::after,
.article-archive-card::after {
  content: "";
  position: absolute;
  inset: 18px 18px auto;
  height: 28px;
  pointer-events: none;
  opacity: .54;
  background: var(--frame-scroll);
}

.media-archive-card {
  border-color: rgba(22,40,57,.24);
}

.media-archive-card::before {
  background:
    var(--frame-window),
    var(--pattern-corner);
}

.faq-item,
.faq-manuscript-item,
.qa-block {
  position: relative;
  border-left: 3px solid rgba(174,32,18,.62);
}

.faq-item::before,
.faq-manuscript-item::before,
.qa-block::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 14px;
  bottom: 14px;
  width: 120px;
  pointer-events: none;
  opacity: .45;
  background: var(--frame-title-slip);
}

.home-contact-panel,
.contact-panel,
form {
  border-color: rgba(99,94,83,.3);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.4),
    inset 0 0 0 10px rgba(249,243,227,.22);
}

.home-contact-panel::before,
.contact-panel::before,
form::before {
  background:
    var(--pattern-corner),
    radial-gradient(circle at 28px 28px, rgba(174,32,18,.65) 0 5px, transparent 6px),
    radial-gradient(circle at calc(100% - 28px) 28px, rgba(176,138,75,.58) 0 4px, transparent 5px);
}

.button,
.nav-action {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.button.secondary {
  background:
    linear-gradient(90deg, rgba(176,138,75,.14), transparent 28%, transparent 72%, rgba(176,138,75,.1)),
    rgba(249,243,227,.42);
}

/* Entity markers share one carved-cinnabar treatment across every collection. */
:is(.seal, .hero-seal, .museum-product-seal, .artifact-seal) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(100, 27, 19, .58);
  background:
    radial-gradient(circle at 16% 21%, rgba(255, 244, 225, .19) 0 1px, transparent 1.6px),
    radial-gradient(circle at 78% 70%, rgba(74, 13, 9, .22) 0 1px, transparent 1.8px),
    radial-gradient(circle at 38% 82%, rgba(255, 244, 225, .12) 0 .8px, transparent 1.5px),
    linear-gradient(138deg, #c64a3d 0%, #a52d23 44%, #8c2019 100%);
  color: #fff5e7;
  font-family: var(--kai);
  font-weight: 700;
  letter-spacing: .06em;
  text-shadow:
    1px 1px 0 rgba(255,255,255,.16),
    -1px -1px 0 rgba(91,18,12,.26),
    0 1px 4px rgba(63,10,7,.42);
  box-shadow:
    inset 2px 2px 0 rgba(255,250,238,.17),
    inset -2px -2px 0 rgba(73,13,8,.24),
    0 4px 10px rgba(83,22,15,.16);
  clip-path: polygon(2% 0, 98% 1%, 100% 4%, 99% 96%, 96% 100%, 3% 99%, 0 96%, 1% 3%);
}
:is(.seal, .hero-seal, .museum-product-seal, .artifact-seal)::after {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 0;
  border: 1px solid rgba(255, 246, 231, .3);
  box-shadow: inset 0 0 0 1px rgba(85, 18, 12, .11);
  opacity: .8;
  transform: rotate(-.35deg);
  pointer-events: none;
}
.hero-seal {
  width: 52px;
  height: 52px;
  margin-bottom: 26px;
  font-size: 27px;
}
.page-hero .hero-seal {
  box-shadow:
    0 0 0 8px rgba(174,32,18,.055),
    inset 2px 2px 0 rgba(255,250,238,.17),
    inset -2px -2px 0 rgba(73,13,8,.24),
    0 5px 13px rgba(83,22,15,.18);
}
.museum-product-seal {
  width: 40px;
  height: 40px;
  font-size: 20px;
}
.artifact-seal {
  width: 38px;
  height: 38px;
  font-size: 19px;
}

/* Each content family carries its own seal-cut and paper-field, so a teacher,
   course, instrument or listening page never reads as the same template. */
:is(.teacher-hero, .teacher-detail-hero) {
  background:
    linear-gradient(90deg, transparent 0 14%, rgba(24, 93, 84, .10) 14.1% 14.25%, transparent 14.4% 85.6%, rgba(24, 93, 84, .10) 85.75% 85.9%, transparent 86%),
    radial-gradient(ellipse at center, rgba(24, 93, 84, .08), transparent 60%);
}
:is(.teacher-hero, .teacher-detail-hero) .hero-seal {
  width: 50px;
  height: 58px;
  border-radius: 3px 3px 9px 9px;
  background:
    linear-gradient(90deg, transparent 47%, rgba(255,246,230,.25) 48% 52%, transparent 53%),
    radial-gradient(circle at 16% 20%, rgba(255,244,225,.20) 0 1px, transparent 1.6px),
    linear-gradient(145deg, #ba3b30, #8e241d);
  clip-path: polygon(5% 0, 95% 2%, 100% 6%, 98% 97%, 92% 100%, 8% 98%, 0 93%, 2% 5%);
}

:is(.course-hero, .course-detail-hero) {
  background:
    repeating-linear-gradient(90deg, rgba(176,138,75,.12) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, rgba(176,138,75,.08), transparent 72%);
}
:is(.course-hero, .course-detail-hero) .hero-seal {
  width: 68px;
  height: 46px;
  border-radius: 2px;
  letter-spacing: .18em;
  background:
    linear-gradient(90deg, rgba(255,246,230,.30) 0 1px, transparent 1px 22px, rgba(255,246,230,.22) 22px 23px, transparent 23px 45px, rgba(255,246,230,.24) 45px 46px, transparent 46px),
    linear-gradient(140deg, #b94434, #912820);
  clip-path: polygon(4% 0, 96% 0, 100% 11%, 96% 16%, 100% 89%, 96% 100%, 4% 100%, 0 89%, 4% 84%, 0 11%);
}

:is(.media-hero, .media-detail-hero) {
  background:
    repeating-radial-gradient(ellipse at 50% 104%, rgba(39, 83, 107, .12) 0 1px, transparent 1px 23px),
    linear-gradient(180deg, rgba(39, 83, 107, .06), transparent 70%);
}
:is(.media-hero, .media-detail-hero) .hero-seal {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 14px, rgba(255,246,230,.34) 14.5px 15.5px, transparent 16px),
    linear-gradient(135deg, #b54638, #85231d);
  clip-path: polygon(50% 0, 72% 5%, 90% 20%, 100% 48%, 95% 75%, 78% 94%, 50% 100%, 22% 94%, 5% 75%, 0 48%, 10% 20%, 28% 5%);
}

:is(.student-hero, .student-detail-hero, .community-hero) {
  background:
    linear-gradient(45deg, transparent 49.3%, rgba(24, 93, 84, .10) 49.5% 50.5%, transparent 50.7%),
    linear-gradient(-45deg, transparent 49.3%, rgba(24, 93, 84, .08) 49.5% 50.5%, transparent 50.7%);
  background-size: 34px 34px;
}
:is(.student-hero, .student-detail-hero, .community-hero) .hero-seal {
  transform: rotate(45deg);
  border-radius: 7px;
  background:
    linear-gradient(90deg, transparent 47%, rgba(255,246,230,.28) 48% 52%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(255,246,230,.28) 48% 52%, transparent 53%),
    linear-gradient(145deg, #c34a3c, #952820);
}
:is(.student-hero, .student-detail-hero, .community-hero) .hero-seal::after { transform: rotate(-.35deg) rotate(-45deg) scale(.72); }
:is(.student-hero, .student-detail-hero, .community-hero) .hero-seal { font-size: 0; }
:is(.student-hero, .student-detail-hero, .community-hero) .hero-seal::before {
  content: "友";
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: rotate(-45deg);
  font-size: 26px;
}
.student-detail-hero .hero-seal::before { content: "人"; }

:is(.faq-hero, .faq-detail-hero, .contact-hero) {
  background:
    linear-gradient(90deg, transparent 10%, rgba(176,138,75,.14) 10.1% 10.25%, transparent 10.4% 89.6%, rgba(176,138,75,.14) 89.75% 89.9%, transparent 90%),
    linear-gradient(180deg, rgba(176,138,75,.07), transparent 72%);
}
:is(.faq-hero, .faq-detail-hero, .contact-hero) .hero-seal {
  width: 58px;
  height: 50px;
  border-radius: 10px 10px 4px 4px;
  background:
    radial-gradient(circle at 34% 42%, #fff4e2 0 2px, transparent 2.6px),
    radial-gradient(circle at 67% 42%, #fff4e2 0 2px, transparent 2.6px),
    linear-gradient(145deg, #bf4536, #8d241c);
  clip-path: polygon(10% 0, 90% 0, 100% 15%, 96% 100%, 4% 100%, 0 15%);
}
.faq-detail-hero .hero-seal { background: linear-gradient(145deg, #ad4033, #822019); }
.contact-hero .hero-seal::before { content: "问"; }

:is(.article-hero, .article-detail-hero) {
  border-bottom: 1px solid rgba(176,138,75,.30);
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(176,138,75,.16) 8.1% 8.2%, transparent 8.3% 91.7%, rgba(176,138,75,.16) 91.8% 91.9%, transparent 92%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(99,94,83,.08) 28px 29px);
}
:is(.about-hero, .custom-page-hero) {
  background:
    radial-gradient(ellipse at 50% 108%, rgba(24, 93, 84, .12), transparent 56%),
    linear-gradient(90deg, rgba(176,138,75,.10), transparent 18% 82%, rgba(176,138,75,.10));
}
:is(.about-hero, .custom-page-hero) .hero-seal {
  width: 60px;
  height: 60px;
  border-radius: 50% 46% 52% 48%;
  clip-path: polygon(13% 0, 87% 3%, 100% 18%, 96% 84%, 84% 100%, 15% 96%, 0 83%, 4% 15%);
}

.product-detail-page .museum-product-seal {
  width: 44px;
  height: 48px;
  border-radius: 4px 4px 11px 11px;
  background:
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(255,246,230,.20) 10px 11px),
    linear-gradient(145deg, #b94233, #8b231b);
}
.artifact-card .artifact-seal {
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 9px, rgba(255,246,230,.28) 9.5px 10.5px, transparent 11px),
    linear-gradient(145deg, #bd4536, #90251e);
}

/* Section borders are deliberately different by content type: a site catalogue
   should feel like several related artefacts, not one card copied everywhere. */
.page-hero { position: relative; }
:is(.teacher-hero, .teacher-detail-hero, .course-hero, .course-detail-hero, .media-hero, .media-detail-hero, .student-hero, .student-detail-hero, .faq-hero, .faq-detail-hero, .article-hero, .article-detail-hero, .about-hero, .community-hero, .contact-hero, .custom-page-hero)::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: 0;
  left: 8%;
  height: 14px;
  pointer-events: none;
}
:is(.teacher-hero, .teacher-detail-hero)::after {
  background:
    radial-gradient(circle at 8px 7px, rgba(24,93,84,.58) 0 2px, transparent 2.8px) 0 0 / 18px 14px repeat-x,
    linear-gradient(90deg, transparent, rgba(24,93,84,.42) 10% 90%, transparent) center / 100% 1px no-repeat;
}
:is(.course-hero, .course-detail-hero)::after {
  background:
    linear-gradient(90deg, rgba(176,138,75,.48), rgba(176,138,75,.48)) 0 4px / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(176,138,75,.24), rgba(176,138,75,.24)) 0 10px / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(176,138,75,.46) 22px 23px, transparent 23px 44px);
}
:is(.media-hero, .media-detail-hero)::after {
  background:
    radial-gradient(ellipse at 50% 0, transparent 0 8px, rgba(39,83,107,.42) 8.5px 9.5px, transparent 10px) 0 2px / 40px 12px repeat-x;
}
:is(.student-hero, .student-detail-hero, .community-hero)::after {
  background:
    linear-gradient(45deg, transparent 47%, rgba(24,93,84,.42) 48% 52%, transparent 53%) 0 0 / 20px 12px repeat-x,
    linear-gradient(-45deg, transparent 47%, rgba(176,138,75,.36) 48% 52%, transparent 53%) 10px 0 / 20px 12px repeat-x;
}
:is(.faq-hero, .faq-detail-hero, .contact-hero)::after {
  background:
    linear-gradient(90deg, rgba(174,32,18,.52), rgba(174,32,18,.52)) 0 6px / 28% 1px no-repeat,
    linear-gradient(90deg, rgba(174,32,18,.52), rgba(174,32,18,.52)) 72% 6px / 28% 1px no-repeat,
    radial-gradient(circle at 50% 50%, rgba(174,32,18,.66) 0 3px, transparent 3.6px) center / 100% 12px no-repeat;
}
:is(.article-hero, .article-detail-hero)::after {
  background:
    repeating-linear-gradient(90deg, rgba(99,94,83,.42) 0 1px, transparent 1px 28px),
    linear-gradient(90deg, transparent, rgba(99,94,83,.34) 12% 88%, transparent) center / 100% 1px no-repeat;
}
:is(.about-hero, .custom-page-hero)::after {
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(176,138,75,.52) 9% 10%, transparent 10% 90%, rgba(176,138,75,.52) 90% 91%, transparent 91%),
    linear-gradient(90deg, rgba(176,138,75,.42), rgba(176,138,75,.42)) center / 82% 1px no-repeat;
}

.student-directory > .content-card {
  position: relative;
  border: 1px solid rgba(24,93,84,.28);
  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,.28),
    inset 0 0 0 6px rgba(24,93,84,.08);
}
.student-directory > .content-card::before {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  pointer-events: none;
  opacity: .52;
  background:
    linear-gradient(90deg, rgba(24,93,84,.62), rgba(24,93,84,.62)) right top / 42px 1px no-repeat,
    linear-gradient(180deg, rgba(24,93,84,.62), rgba(24,93,84,.62)) right top / 1px 42px no-repeat,
    linear-gradient(90deg, rgba(176,138,75,.55), rgba(176,138,75,.55)) left bottom / 22px 1px no-repeat,
    linear-gradient(180deg, rgba(176,138,75,.55), rgba(176,138,75,.55)) left bottom / 1px 22px no-repeat;
}

.course-archive-card {
  border-color: rgba(176,138,75,.42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.46), inset 0 0 0 10px rgba(176,138,75,.045);
}
.course-archive-card::after {
  right: 18px;
  left: auto;
  width: 28px;
  height: calc(100% - 36px);
  opacity: .48;
  background:
    repeating-linear-gradient(180deg, rgba(176,138,75,.5) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, transparent, rgba(174,32,18,.36) 12% 88%, transparent) center / 1px 100% no-repeat;
}

.media-archive-card {
  border-color: rgba(39,83,107,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), inset 0 0 0 9px rgba(39,83,107,.045);
}
.media-archive-card::after {
  right: 18px;
  left: 18px;
  height: 16px;
  background:
    repeating-linear-gradient(90deg, rgba(39,83,107,.42) 0 2px, transparent 2px 9px),
    linear-gradient(90deg, transparent, rgba(39,83,107,.46) 10% 90%, transparent) center / 100% 1px no-repeat;
}

.article-archive-card {
  border-color: rgba(99,94,83,.34);
  box-shadow: inset 7px 0 0 rgba(174,32,18,.10), inset 8px 0 0 rgba(176,138,75,.16), inset 0 0 0 1px rgba(255,255,255,.4);
}
.article-archive-card::after {
  top: 22px;
  bottom: 22px;
  left: 22px;
  width: 12px;
  height: auto;
  opacity: .58;
  background:
    radial-gradient(circle at 50% 7px, rgba(174,32,18,.6) 0 2px, transparent 2.6px) 0 0 / 12px 18px repeat-y,
    linear-gradient(180deg, rgba(174,32,18,.36), rgba(174,32,18,.36)) center / 1px 100% no-repeat;
}

.faq-category-rail {
  border: 1px solid rgba(174,32,18,.26);
  box-shadow: inset 0 0 0 7px rgba(174,32,18,.035), inset 0 0 0 8px rgba(176,138,75,.15);
}
.faq-list .faq-item {
  border-right: 1px solid rgba(176,138,75,.28);
  border-bottom: 1px solid rgba(176,138,75,.28);
  border-radius: 0;
}
.faq-list .faq-item::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 34px;
  height: 14px;
  opacity: .42;
  background: var(--frame-title-slip);
}

:is(.about-hero, .community-hero, .contact-hero, .custom-page-hero) ~ .detail .article-body {
  padding: clamp(22px, 4vw, 44px);
  border: 1px solid rgba(176,138,75,.32);
  box-shadow: inset 0 0 0 8px rgba(249,243,227,.28), inset 0 0 0 9px rgba(24,93,84,.08);
}

@media (max-width: 900px) {
  .nav-inner {
    grid-template-columns: 1fr auto;
  }
  .nav-links {
    grid-column: 1 / -1;
    justify-self: start;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 12px;
  }
  .nav-item > a { min-height: 32px; }
  .nav-submenu { display: none; }
  .site-hero { min-height: 660px; }
  .home-hero.has-object {
    min-height: 640px;
  }
  .home-object-photo img {
    object-position: 58% center;
  }
  .home-object-photo::after {
    background:
      linear-gradient(90deg, rgba(249,243,227,.94) 0%, rgba(249,243,227,.82) 44%, rgba(249,243,227,.32) 78%, rgba(249,243,227,.12) 100%),
      linear-gradient(180deg, rgba(249,243,227,.62), rgba(249,243,227,.18) 48%, rgba(249,243,227,.76));
  }
  .split-craft,
  .contact-split,
  .contact-grid,
  .detail {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .service-grid,
  .product-row,
  .teacher-grid,
  .video-grid,
  .product-showcase,
  .course-cards,
  .contact-layout,
  .directory-grid,
  .directory-grid.two,
  .content-card.featured,
  .detail-header,
  .home-stat-grid,
  .artifact-grid,
  .course-path-home,
  .product-museum-grid,
  .product-detail-hero,
  .product-craft-section,
  .archive-intro,
  .course-archive-layout,
  .course-archive-card,
  .media-archive-card.featured,
  .article-archive-card.featured,
  .article-empty-panel,
  .faq-index-layout {
    grid-template-columns: 1fr;
  }
  .home-hero-content { padding: 80px 0 112px; }
  .home-hero.has-object .home-hero-content {
    padding: 72px 0 88px;
  }
  .hero-vertical { display: none; }
  .hero-bottom-line {
    gap: 8px;
    font-size: 12px;
  }
  .home-stat { border-right: 1px solid rgba(249,243,227,.16); }
  .home-stat + .home-stat { border-top: 1px solid rgba(249,243,227,.12); }
  .home-craft .craft-image { min-height: auto; }
  .artifact-card:nth-child(even) { margin-top: 0; }
  .museum-product-card:nth-child(even) { margin-top: 0; }
  .product-spec-panel {
    position: relative;
    top: auto;
  }
  .course-map-panel,
  .faq-category-rail {
    position: relative;
    top: auto;
  }
  .course-archive-card:nth-child(even) {
    margin-left: 0;
  }
  .media-archive-card,
  .article-archive-card,
  .media-archive-card.featured,
  .article-archive-card.featured {
    grid-column: 1 / -1;
  }
  .product-primary-image {
    min-height: auto;
  }
  .home-craft .craft-image {
    grid-template-columns: minmax(0, 1fr) 140px;
  }
  .ink-note { grid-template-columns: 1fr; }
  .teacher-home-grid { grid-template-columns: 1fr; }
  .teacher-home-card,
  .featured-teacher-home {
    grid-column: auto;
  }
  .featured-teacher-home {
    grid-template-columns: 1fr;
  }
  .featured-teacher-home .card-media,
  .featured-teacher-home .visual-placeholder,
  .teacher-home-card .card-media,
  .teacher-home-card .visual-placeholder {
    min-height: 240px;
    margin: -28px -28px 24px;
    border-width: 0 0 1px;
  }
  .course-path-home::before { display: none; }
  .teacher-feature,
  .teacher-side,
  .teacher-note { grid-column: span 12; }
  .teacher-feature { grid-template-columns: 1fr; }
  .instrument-card:nth-child(even) { margin-top: 0; }
  .contact-layout > div:first-child,
  .map-panel { grid-column: auto; grid-row: auto; }
  .image-band { min-height: 500px; }
  .tile.large,
  .tile.medium,
  .tile.third,
  .tile.half { grid-column: span 12; }
  .year-stamp {
    right: 18px;
    bottom: -18px;
  }
}

@media (max-width: 620px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .page-share-trigger {
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    min-height: 42px;
    padding: 0 14px;
  }
  .page-share-dialog {
    width: calc(100% - 24px);
  }
  .page-share-heading {
    padding: 24px 22px 18px;
  }
  .page-share-current {
    padding: 18px 22px 0;
    font-size: 14px;
  }
  .page-share-actions {
    grid-template-columns: 1fr;
    padding: 18px 22px 14px;
  }
  .page-share-channels {
    padding: 0 22px;
  }
  .page-share-status {
    padding: 12px 22px 20px;
  }
  .wrap,
  .nav-inner,
  .detail { width: min(100% - 32px, var(--max)); }
  .nav-action { display: none; }
  .hero-content h1 {
    font-size: 38px;
    letter-spacing: .1em;
  }
  .home-hero-content h1 {
    font-size: 52px;
    letter-spacing: .16em;
  }
  .home-hero.has-object {
    min-height: 620px;
  }
  .home-hero.has-object .home-hero-content {
    text-align: center;
    padding: 54px 0 76px;
  }
  .home-hero.has-object .home-hero-content h1 {
    padding-left: .14em;
  }
  .home-hero.has-object .home-hero-content h1::after {
    left: 50%;
    width: min(70vw, 300px);
    transform: translateX(-50%);
  }
  .home-hero-content .hero-slogan {
    font-size: 18px;
    letter-spacing: .1em;
  }
  .home-hero-content .hero-summary {
    font-size: 13px;
    letter-spacing: 0;
  }
  .home-hero.has-object .collection-tabs-home,
  .home-hero.has-object .hero-actions {
    justify-content: center;
  }
  .home-hero.has-object .hero-content p {
    margin-left: auto;
    margin-right: auto;
  }
  .home-hero.has-object .collection-tabs-home {
    gap: 24px;
    margin-top: 38px;
  }
  .home-object-photo img {
    object-position: 62% center;
  }
  .home-object-photo::after {
    background:
      linear-gradient(180deg, rgba(249,243,227,.82), rgba(249,243,227,.5) 46%, rgba(249,243,227,.76)),
      linear-gradient(90deg, rgba(249,243,227,.94), rgba(249,243,227,.58));
  }
  .hero-content p {
    width: min(100%, 20em);
    max-width: 20em;
    font-size: 14px;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    line-break: anywhere;
  }
  .section { padding: 68px 0; }
  .service-card,
  .tile.copy,
  .contact-card,
  form { padding: 24px; }
  .ritual-card,
  .content-card,
  .artifact-card { padding: 24px; }
  .home-stat {
    min-height: 94px;
    padding: 20px 22px;
  }
  .hero-bottom-line { display: none; }
  .home-craft .craft-image {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    padding: 12px;
  }
  .home-craft .craft-image img,
  .home-craft .craft-caption,
  .home-craft .year-stamp {
    grid-column: 1;
  }
  .home-craft .craft-caption {
    padding: 16px 4px;
  }
  .home-craft .year-stamp {
    min-height: 88px;
    margin: 0;
  }
  .year-stamp {
    width: 118px;
    height: 104px;
  }
  .year-stamp strong { font-size: 24px; }
  .artifact-card .card-media,
  .artifact-card .visual-placeholder { min-height: 190px; }
  .product-collection-hero {
    padding-top: 70px;
  }
  .product-museum-grid {
    gap: 58px;
  }
  .museum-card-frame {
    padding: 28px;
  }
  .museum-product-meta {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .product-name-line {
    grid-template-columns: 1fr;
  }
  .product-name-line p {
    margin-bottom: 0;
  }
  .product-thumb-grid {
    gap: 8px;
  }
  .product-spec-panel {
    min-height: auto;
    padding: 32px 24px;
  }
  .manuscript-ornament {
    display: none;
  }
  .product-spec-panel dl {
    grid-template-columns: 1fr;
  }
  .product-spec-panel dd {
    text-align: left;
  }
  .product-craft-section,
  .product-resonance-panel {
    margin-top: 68px;
  }
  .craft-maker-card {
    margin-top: 0;
  }
  .artifact-card {
    min-height: auto;
  }
  .artifact-card::before {
    inset: 14px;
  }
  .artifact-card::after {
    inset: 24px;
  }
  .artifact-card .card-media {
    margin-bottom: 26px;
    box-shadow:
      0 0 0 1px rgba(99,94,83,.16),
      0 0 0 8px rgba(249,243,227,.38);
  }
  .artifact-card .meta-pills,
  .artifact-card p,
  .artifact-card .button {
    margin-left: 0;
  }
  .artifact-title-row {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
  }
  .artifact-seal {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }
  .info-list li { grid-template-columns: 1fr; gap: 4px; }
  .inline-list li,
  .qa-block {
    grid-template-columns: 1fr;
  }
  .archive-facts {
    grid-template-columns: 1fr;
  }
  .footer-links {
    gap: 10px 18px;
  }
  .detail-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.content-source-review-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 11px 24px;
  border-bottom: 1px solid rgba(137, 35, 27, 0.22);
  background: #f3ead8;
  color: #33454d;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.content-source-review-banner strong {
  color: #a72921;
  font-family: var(--font-display);
  font-weight: 600;
}

.brand-content-placeholder {
  width: 176px;
  min-height: 52px;
  display: grid;
  place-items: center;
  padding: 8px 12px;
  border: 1px solid rgba(167, 41, 33, 0.3);
  color: #a72921;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.cms-review-placeholder {
  padding: 20px 22px;
  border-left: 3px solid #a72921;
  background: rgba(243, 234, 216, 0.58);
  color: #a72921;
  font-weight: 600;
}

.cms-review-image-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
  aspect-ratio: 4 / 3;
  padding: 24px;
  border: 1px solid rgba(167, 41, 33, 0.22);
  background:
    repeating-linear-gradient(135deg, rgba(167, 41, 33, 0.035) 0 1px, transparent 1px 16px),
    rgba(243, 234, 216, 0.72);
  color: #a72921;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}

.cms-review-image-placeholder.is-empty {
  color: rgba(51, 69, 77, 0.58);
}

.product-primary-image .cms-review-image-placeholder,
.detail-media .cms-review-image-placeholder,
.teacher-archive-portrait .cms-review-image-placeholder {
  aspect-ratio: 4 / 5;
}

.product-thumb-grid .cms-review-image-placeholder {
  aspect-ratio: 1 / .86;
}

.gx-teacher-roster figure .cms-review-image-placeholder {
  min-height: 100%;
  aspect-ratio: auto;
}

.article-managed-cover {
  margin: 0 0 28px;
}

@media (max-width: 620px) {
  .content-source-review-banner {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;
    text-align: left;
  }
}