/* 随轩 · 改版预览 · base
   One page root .yh per artboard. The root is a size container, so the same markup
   switches to the phone layout inside a narrow frame (container queries, not media queries).
   A page sets its world with one class on the root: .house (首页、主题页) or .w-phil … .w-site. */

.yh {
  --bg: #E9EBE5;
  --paper: #F6F7F3;
  --ink: #1F1B17;
  --muted: #5B5650;
  --line: rgba(31, 27, 23, .16);
  --acc: #3F6E64;
  --acc-ink: #FFFFFF;
  --seal: #C23A2E;
  --wood: #4A3426;
  --f-ui: "YH Gu Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, sans-serif;
  --f-serif: "YH Gu Serif", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --f-brush: "YH Gu Brush", "Zhi Mang Xing", "YH Gu Serif", "Noto Serif SC", serif;
  --f-disp: "YH Gu XiaoWei", "ZCOOL XiaoWei", "YH Gu Serif", "Noto Serif SC", serif;
  --f-pixel: "YH Pixel", "YH Gu Sans", "Noto Sans SC", monospace;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-body: var(--f-ui);
  container: yh / inline-size;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* English pages: Chinese fonts draw ‘ ’ “ ” full width (“philosopher’ s”); take those few marks from a Latin face */
@font-face { font-family: "YH Latin Marks"; src: local("Georgia"), local("Times New Roman"), local("Noto Serif"), local("DejaVu Serif"), local("Liberation Serif"); unicode-range: U+2018-201F, U+2026; }
@font-face { font-family: "YH Latin Marks Sans"; src: local("Helvetica Neue"), local("Arial"), local("Segoe UI"), local("Roboto"), local("Noto Sans"), local("DejaVu Sans"), local("Liberation Sans"); unicode-range: U+2018-201F, U+2026; }
.yh:lang(en) {
  --f-ui: "YH Latin Marks Sans", "YH Gu Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, sans-serif;
  --f-serif: "YH Latin Marks", "YH Gu Serif", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --f-brush: "YH Latin Marks", "YH Gu Brush", "Zhi Mang Xing", "YH Gu Serif", "Noto Serif SC", serif;
  --f-disp: "YH Latin Marks", "YH Gu XiaoWei", "ZCOOL XiaoWei", "YH Gu Serif", "Noto Serif SC", serif;
}
/* resets carry zero specificity so any component class wins over them */
.yh *, .yh *::before, .yh *::after { box-sizing: border-box; }
:where(.yh) img { display: block; max-width: 100%; }
:where(.yh) a { color: inherit; }
:where(.yh) button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
.yh :focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
:where(.yh) :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
:where(.yh) :where(ul, ol) { padding: 0; }
:where(.yh) li { list-style: none; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }

/* ---------- the house: hall, topics and every page that is not a room ---------- */
.house {
  --bg: #E9EBE5; --paper: #F6F7F3; --ink: #1F1B17; --muted: #57534D; --line: rgba(31, 27, 23, .15);
  --acc: #3F6E64; --acc-ink: #FFFFFF; --seal: #C23A2E; --wood: #4A3426;
  background: #E9EBE5 url("../img/tex-plaster.png");
}
.house .bar__nav .nav__a[aria-current="page"] { border-bottom-color: var(--seal); }


/* ---------- header bar (shared by every page; each world restyles it) ---------- */
.bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 30px;
  height: 64px; padding-inline: max(32px, calc((100% - 1240px) / 2));
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.bar__logo { flex: none; display: block; width: 40px; height: 40px; text-decoration: none; }
.bar__logo img { width: 40px; height: 40px; mix-blend-mode: multiply; }
.bar__nav { display: flex; gap: 24px; font-size: 15px; }
.bar__nav .nav__a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .2s; }
.bar__nav .nav__a:hover, .bar__nav .nav__a[aria-current="page"] { border-bottom-color: currentColor; }
.bar__tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.bar__btn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 19px; font-size: 14px; text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}
.bar__btn:hover { border-color: currentColor; }
.bar__btn svg { width: 16px; height: 16px; flex: none; }
.bar__btn kbd { font-family: var(--f-mono); font-size: 11px; line-height: 16px; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; }
.bar__btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.bar__menu { display: none; }
.bar__en { font-family: var(--f-ui); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 22px; border-radius: 23px;
  border: 1.5px solid var(--ink); font-size: 15px; font-weight: 500; text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--ink { background: var(--ink); color: var(--bg); }
.btn--ink:hover { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.btn--line:hover { background: var(--ink); color: var(--bg); }
.btn:active { transform: translateY(1px); }

/* ---------- reading progress (CSS scroll timeline; static where unsupported) ---------- */
.prog { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
.prog i { display: block; height: 100%; background: var(--acc); transform-origin: 0 50%; transform: scaleX(0); animation: yh-prog linear both; animation-timeline: scroll(root); }
@keyframes yh-prog { to { transform: scaleX(1); } }

/* ---------- footer ---------- */
.ft { margin-top: 120px; border-top: 1px solid var(--line); padding: 44px 0 52px; font-size: 14px; color: var(--muted); }
.ft__in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; }
.ft__brand { display: flex; gap: 14px; align-items: flex-start; }
.ft__brand img { width: 44px; height: 44px; mix-blend-mode: multiply; }
.ft__brand b { display: block; font-family: var(--f-brush); font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--ink); }
.ft h4 { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.ft ul { display: grid; gap: 4px; }
.ft a { text-decoration: none; }
.ft a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ft__rooms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.ft__rooms a:hover { text-decoration: none; filter: brightness(1.08); }
.ft__sub { display: flex; gap: 8px; margin-top: 8px; }
.ft__sub input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: transparent; font: inherit; color: var(--ink); }
.ft__sub button { height: 40px; padding: 0 16px; border-radius: 8px; background: var(--ink); color: var(--bg); }
.ft__legal { margin-top: 32px; display: flex; justify-content: space-between; gap: 16px; font-size: 13px; }

/* ---------- section heads ---------- */
.sec { margin-top: 88px; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.sec-h h2 { font-family: var(--f-disp); font-weight: 400; font-size: 34px; letter-spacing: .06em; }
.sec-h p { color: var(--muted); font-size: 15px; }
.sec-h a { font-size: 15px; text-decoration: none; border-bottom: 1px solid currentColor; }
.sec-h a:hover { color: var(--acc); }


/* ---------- phone ---------- */
@container yh (max-width: 760px) {
  .wrap { width: calc(100% - 32px); }
  .bar { gap: 12px; padding-inline: 16px; height: 56px; }
  .bar__nav { display: none; }
  .bar__btn span, .bar__btn kbd { display: none; }
  .bar__en span { display: inline; font-size: 13px; }
  .bar__btn { width: 40px; padding: 0; justify-content: center; }
  .bar__menu { display: inline-flex; }
  .ft { margin-top: 80px; }
  .ft__in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ft__legal { flex-direction: column; }
  .sec { margin-top: 64px; }
  .sec-h { flex-direction: column; gap: 4px; margin-bottom: 18px; }
  .sec-h h2 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .yh *, .yh *::before, .yh *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    animation-delay: 0s !important; transition-duration: .01ms !important;
  }
}