/* 萨顿 · 桥：1930 年代装饰艺术风格。石灰岩底，墨黑线，青铜与金线；科学一岸是铜绿，人文一岸是青铜。 */
.c-sarton {
  --bg: #e9e6df; --paper: #f6f4ef; --ink: #1a1915; --ink-2: #4a463d; --ink-3: #686258; --rule: rgba(26, 25, 21, .2);
  --acc: #7f5226; --acc-ink: #fbf6ec; --bronze: #8a5a2b; --gold: #b08a4e; --verd: #3f6f66; --night: #1a1915;
  --head: "ZCOOL XiaoWei", "Noto Serif SC", "Songti SC", serif; --body: "Noto Serif SC", "Songti SC", serif;
  --deco: "Federo", "Jost", sans-serif; --sans: "Jost", "Noto Sans SC", "PingFang SC", sans-serif;
  --bar-bg: rgba(233, 230, 223, .94); --chip-bg: rgba(246, 244, 239, .92); --chip-ring: #f6f4ef;
  --nav: 56px;
  background-color: var(--bg);
  background-image: radial-gradient(ellipse 120% 70% at 50% 0%, rgba(255, 255, 255, .5), transparent 70%);
  background-attachment: fixed;
}
.c-sarton .dlg { --dlg-bg: #ebe7df; --dlg-paper: #f8f6f1; --dlg-me: #1a1915; --dlg-me-ink: #f6f2e8; --dlg-acc: #7f5226; }
.c-sarton .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.c-sarton .c3bar { border-bottom: 0; box-shadow: 0 1px 0 var(--ink), 0 4px 0 -2px var(--gold); }
.c-sarton .c3bar__t a { font-family: var(--sans); font-weight: 500; letter-spacing: .14em; }
.c-sarton .c3bar__nav a { font-family: var(--sans); }
.c-sarton .c3bar__prog { background: var(--gold); height: 3px; }
.c-sarton :focus-visible { outline-color: var(--bronze); }
.sa-mk, .sa-k, .sa-pm__k { margin: 0 0 8px; font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: .22em; color: var(--acc); }

/* ---------- 首屏：海报 ---------- */
.c-sarton .c3hero { padding: calc(var(--bar) + 26px) clamp(16px, 4vw, 56px) 40px; }
.sa-hero { position: relative; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-areas: "l c r" "br br br" "cap cap cap" "go go go"; column-gap: 36px; align-items: end; }
.sa-hero > .sa-br { grid-area: br; }
.sa-hero > .sa-br__cap { grid-area: cap; }
.sa-hero > .sa-go { grid-area: go; }
.sa-sun { position: absolute; left: 50%; top: -6px; width: min(860px, 96vw); aspect-ratio: 2 / 1; transform: translateX(-50%); pointer-events: none;
  border-radius: 999px 999px 0 0; overflow: hidden;
  background: radial-gradient(circle at 50% 100%, transparent 0 31%, rgba(176, 138, 78, .5) 31% 31.3%, transparent 31.4% 47%, rgba(176, 138, 78, .35) 47% 47.25%, transparent 47.4%),
    repeating-conic-gradient(from -90deg at 50% 100%, rgba(176, 138, 78, .2) 0 .9deg, transparent .9deg 7.5deg);
  -webkit-mask: linear-gradient(#000 40%, transparent 98%); mask: linear-gradient(#000 40%, transparent 98%); }
.sa-tri__c { position: relative; grid-area: c; text-align: center; padding-bottom: 6px; }
.sa-tri__l { grid-area: l; }
.sa-tri__r { grid-area: r; }
.sa-tri__c h1 { margin: 0; font-family: var(--head); font-weight: 400; font-size: clamp(88px, 10.5vw, 150px); line-height: 1; letter-spacing: .14em; text-indent: .14em; color: var(--ink); }
.sa-en { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; margin: 12px 0 14px; font-family: var(--deco); font-size: 22px; letter-spacing: .14em; text-transform: uppercase; }
.sa-en__y { color: var(--acc); letter-spacing: .1em; }
.sa-who { margin: 0 auto 4px; max-width: 26em; font-size: 18px; font-weight: 600; line-height: 1.6; }
.sa-now { margin: 0; font-size: 14px; color: var(--ink-2); }
.sa-plaque { position: relative; padding: 16px 18px 14px; background: var(--paper); border: 1px solid var(--ink);
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--gold); }
.sa-plaque::before, .sa-plaque::after { content: ""; position: absolute; top: -7px; width: 13px; height: 13px; background: var(--bg); border: 1px solid var(--ink); transform: rotate(45deg); }
.sa-plaque::before { left: calc(50% - 7px); }
.sa-plaque::after { display: none; }
.sa-plaque p { margin: 0; font-size: 14.5px; line-height: 1.8; }
.sa-plaque .sa-mk { text-align: center; margin-bottom: 8px; }
.sa-books { list-style: none; margin: 0; padding: 0; columns: 1; }
.sa-books li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 2px 0; border-bottom: 1px dotted var(--rule); font-size: 14.5px; line-height: 1.6; }
.sa-books a { text-decoration: none; }
.sa-books a:hover { color: var(--acc); text-decoration: underline; }
.sa-books span { font-family: var(--deco); font-size: 14px; color: var(--acc); }

/* 桥 */
.sa-br { --arch: 140px; --deck: 76px; position: relative; height: calc(var(--arch) + var(--deck) + 52px); margin: 22px 0 0; }
.sa-py { position: absolute; z-index: 2; bottom: 0; width: 112px; height: 100%; }
.sa-py--l { left: 0; }
.sa-py--r { right: 0; }
.sa-py__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sa-py__body { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
.sa-py__line { fill: none; stroke: var(--ink); stroke-width: 1; }
.sa-py__flute { fill: none; stroke: var(--gold); stroke-width: 1.2; }
.sa-py__ray { fill: none; stroke: var(--gold); stroke-width: 1.2; }
.sa-py__band { fill: var(--ink); }
.sa-py__portal { fill: var(--night); stroke: var(--ink); }
.sa-py__t { position: absolute; left: 0; right: 0; top: 62.67%; height: 18.67%; margin: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; line-height: 1.1; color: var(--paper); }
.sa-py__t b { display: block; font-family: var(--head); font-weight: 400; font-size: 21px; letter-spacing: .2em; text-indent: .2em; }
.sa-py__t span { display: block; margin-top: 3px; font-family: var(--deco); font-size: 8.5px; letter-spacing: .16em; color: var(--gold); }
.sa-py--l .sa-py__t b { color: #cfe3dd; }
.sa-br__span { position: absolute; left: 104px; right: 104px; bottom: 36px; height: calc(var(--arch) + var(--deck) + 16px); }
.sa-arch { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: var(--arch); overflow: visible; }
.sa-arch path, .sa-arch line { fill: none; vector-effect: non-scaling-stroke; }
.sa-arch__a { stroke: var(--ink); stroke-width: 3; }
.sa-arch__b { stroke: var(--gold); stroke-width: 1.4; }
.sa-arch__h line { stroke: var(--ink); stroke-width: 1; opacity: .75; }
.sa-deckwrap { position: absolute; left: 0; right: 0; top: var(--arch); }
.sa-deck { list-style: none; margin: 0; padding: 0 4px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; background: var(--ink); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.sa-deck li { min-width: 0; }
.sa-deck a { position: relative; display: flex; flex-direction: column; justify-content: center; height: var(--deck); padding: 6px 10px 6px; text-decoration: none; background: var(--paper);
  border-top: 4px solid var(--bronze); transition: transform .25s, background .25s; }
.sa-deck a::before, .sa-deck a::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.sa-deck a::before { left: 5px; } .sa-deck a::after { right: 5px; }
.sa-deck b { font-family: var(--deco); font-weight: 400; font-size: 19px; line-height: 1.1; letter-spacing: .06em; color: var(--acc); }
.sa-deck span { margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--ink); word-break: keep-all; }
.sa-deck a:hover, .sa-deck a:focus-visible { transform: translateY(-5px); background: #fffdf8; }
.sa-deck a:hover span { text-decoration: underline; text-decoration-color: var(--gold); }
.sa-girder { position: absolute; left: 0; right: 0; top: calc(var(--arch) + var(--deck) + 2px); height: 14px; border-bottom: 1.5px solid var(--ink);
  background: repeating-linear-gradient(60deg, transparent 0 7px, var(--ink) 7px 8.2px), repeating-linear-gradient(-60deg, transparent 0 7px, var(--ink) 7px 8.2px); opacity: .9; }
.sa-chasm { position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: var(--night); }
.sa-chasm svg { display: block; }
.sa-br__cap { margin: 14px auto 0; max-width: 46em; text-align: center; font-size: 13.5px; color: var(--ink-3); text-wrap: balance; }
.sa-go { margin: 14px 0 0; text-align: center; }
.c-sarton .c3-btn { border-radius: 0; font-family: var(--body); letter-spacing: .04em; }
.c-sarton .c3-btn--go { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4px var(--gold); }
.c-sarton .c3-btn--deep { background: transparent; color: var(--ink); border-color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .sa-deck li { animation: sa-lay .6s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(var(--k) * .16s + .35s); }
  .sa-arch path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sa-draw 1.4s ease-out .15s forwards; }
  .sa-arch__h { opacity: 0; animation: sa-fade .8s ease-out 1.1s forwards; }
}
@keyframes sa-lay { from { transform: translateY(-34px) rotate(-3deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes sa-draw { to { stroke-dashoffset: 0; } }
@keyframes sa-fade { to { opacity: 1; } }

/* 首屏下方的一条：生平、成就、著作、链接 */
.sa-band { max-width: 1320px; margin: 40px auto 0; padding-top: 22px; display: grid; grid-template-columns: 1.2fr 1fr 1.2fr .9fr; gap: 30px;
  background: linear-gradient(var(--ink), var(--ink)) left top / 100% 1px no-repeat, linear-gradient(var(--gold), var(--gold)) left 4px / 100% 1px no-repeat; }
.sa-band .sa-mk { padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.sa-facts { margin: 0; font-size: 14px; line-height: 1.85; color: var(--ink-2); }
.c-sarton .c3-feats { margin: 0; padding: 0; list-style: none; counter-reset: f; }
.c-sarton .c3-feats li { counter-increment: f; position: relative; padding: 5px 0 5px 30px; font-size: 14px; line-height: 1.65; border-bottom: 1px dotted var(--rule); }
.c-sarton .c3-feats li::before { content: counter(f, upper-roman); position: absolute; left: 0; top: 6px; font-family: var(--deco); font-size: 13px; color: var(--acc); }
.c-sarton .c3-books li, .c-sarton .c3-links li { font-size: 14px; border-bottom-style: dotted; }
.c-sarton .c3-books small, .c-sarton .c3-links small { font-size: 12px; color: var(--ink-3); }

/* ---------- 页面底部常驻的小桥（目录） ---------- */
.c-sarton .c3toc { left: 0; right: 0; top: auto; bottom: 0; transform: none; z-index: 850; display: block; transition: transform .45s cubic-bezier(.3, .8, .3, 1); }
.c-sarton[data-cur="top"] .c3toc { transform: translateY(110%); }
.c-sarton .sa-nav { display: flex; align-items: stretch; height: var(--nav); padding: 0 max(10px, env(safe-area-inset-left)); background: rgba(233, 230, 223, .96);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 -1px 0 var(--ink), 0 -4px 0 -2px var(--gold); }
.c-sarton .c3toc .sa-nav__bank { flex: none; display: grid; place-items: center; justify-content: center; width: 68px; margin: 6px 0 0; padding: 0; text-decoration: none; color: var(--paper); background: var(--ink); font-size: inherit;
  clip-path: polygon(0 100%, 0 26%, 14% 26%, 14% 12%, 30% 12%, 30% 0, 70% 0, 70% 12%, 86% 12%, 86% 26%, 100% 26%, 100% 100%); }
.c-sarton .c3toc .sa-nav__bank::after { display: none; }
.c-sarton .c3toc .sa-nav__bank b { margin-top: 8px; font-family: var(--head); font-weight: 400; font-size: 16px; letter-spacing: .2em; text-indent: .2em; }
.c-sarton .c3toc .sa-nav__bank:first-child b { color: #cfe3dd; }
.c-sarton .c3toc .sa-nav__bank[aria-current="true"] { background: var(--bronze); }
.c-sarton .c3toc ol.sa-nav__deck { flex: 1; min-width: 0; list-style: none; margin: 0 0 6px; padding: 0 3px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; align-self: end; height: 42px;
  background: linear-gradient(var(--ink), var(--ink)) left bottom / 100% 2px no-repeat; }
.c-sarton .c3toc .sa-nav__deck li { position: relative; min-width: 0; }
.c-sarton .c3toc .sa-nav__deck a { display: grid; place-items: center; justify-content: center; gap: 0; height: 40px; padding: 0; text-decoration: none; background: var(--paper); border-top: 3px solid var(--bronze); color: var(--ink); font-size: inherit; transition: background .3s, transform .3s; }
.c-sarton .c3toc .sa-nav__deck a::after { display: none; }
.c-sarton .c3toc .sa-nav__deck a b { font-family: var(--deco); font-weight: 400; font-size: 14px; letter-spacing: .08em; }
.c-sarton .c3toc .sa-nav__deck a span { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); width: max-content; max-width: 15em; padding: 5px 10px;
  background: var(--ink); color: var(--paper); font-size: 13px; line-height: 1.5; white-space: normal; opacity: 0; transition: opacity .2s; pointer-events: none; }
.c-sarton .c3toc .sa-nav__deck a:hover span, .c-sarton .c3toc .sa-nav__deck a:focus-visible span { max-width: 15em; opacity: 1; }
.c-sarton .c3toc .sa-nav__deck li:first-child a span { left: 0; transform: none; }
.c-sarton .c3toc .sa-nav__deck li:last-child a span { left: auto; right: 0; transform: none; }
.sa-js .c3toc .sa-nav__deck a:not(.is-laid) { background: transparent; border: 1px dashed rgba(26, 25, 21, .45); border-top: 3px dashed rgba(138, 90, 43, .55); color: var(--ink-3); }
.c-sarton .c3toc .sa-nav__deck a[aria-current="true"] { background: var(--ink); color: var(--paper); border: 0; border-top: 3px solid var(--gold); transform: translateY(-3px); }

/* ---------- 每一问：一块桥板 ---------- */
.c-sarton .c3q { display: block; padding: calc(var(--bar) + 24px) clamp(16px, 4.5vw, 64px) calc(var(--nav) + 40px); }
.sa-q { max-width: 1260px; margin: 0 auto; }
.sa-q__h { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 26px; }
.sa-q__no { display: flex; align-items: center; gap: 14px; margin: 0; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .3em; text-indent: .3em; color: var(--acc); }
.sa-q__no::before, .sa-q__no::after { content: ""; width: 64px; height: 7px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--gold); }
.sa-q__mini { display: flex; align-items: center; gap: 8px; font-family: var(--head); font-size: 13px; color: var(--ink-3); }
.sa-q__mini span { display: flex; gap: 2px; padding: 0 2px 2px; border-bottom: 2px solid var(--ink); }
.sa-q__mini i { width: 22px; height: 9px; border: 1px dashed rgba(26, 25, 21, .4); }
.sa-q__mini i.is-laid { border: 0; background: var(--ink-2); }
.sa-q__mini i.is-on { border: 0; background: var(--bronze); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--bronze); }
.sa-q__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); grid-template-rows: auto 1fr; grid-template-areas: "a art" "b art"; column-gap: clamp(28px, 4.4vw, 64px); align-items: start; }
.c-sarton .c3q:nth-of-type(even) .sa-q__grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); grid-template-areas: "art a" "art b"; }
.sa-q__a { grid-area: a; }
.sa-q__b { grid-area: b; }
.sa-q__art { grid-area: art; min-width: 0; }
.c-sarton .c3q__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; color: var(--ink-2); font-size: 14px; }
.c-sarton .c3q__when b { font-family: var(--deco); font-weight: 400; font-size: clamp(52px, 5.4vw, 74px); line-height: .95; letter-spacing: .04em; color: var(--bronze); }
.c-sarton .c3q__q { margin: 10px 0 16px; font-family: var(--head); font-weight: 400; font-size: clamp(32px, 3.3vw, 44px); line-height: 1.3; letter-spacing: 0; word-break: keep-all; }
.c-sarton .c3q__lede { font-size: 16.5px; line-height: 1.95; text-align: justify; }
.c-sarton .c3-quote { position: relative; margin: 22px 0; padding: 20px 4px 16px; border: 0; text-align: center;
  background: linear-gradient(var(--ink), var(--ink)) left top / 100% 1px no-repeat, linear-gradient(var(--gold), var(--gold)) left 4px / 100% 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left calc(100% - 4px) / 100% 1px no-repeat, linear-gradient(var(--ink), var(--ink)) left bottom / 100% 1px no-repeat; }
.c-sarton .c3-quote::before { content: ""; position: absolute; left: 50%; top: -6px; width: 11px; height: 11px; margin-left: -6px; background: var(--bg); border: 1px solid var(--ink); transform: rotate(45deg); }
.c-sarton .c3-quote blockquote p { font-weight: 600; font-size: 18.5px; line-height: 1.8; letter-spacing: .02em; text-wrap: pretty; }
.c-sarton .c3-orig { font-family: var(--sans); font-style: normal; font-size: 13.5px; color: var(--ink-2); }
.c-sarton .c3-quote figcaption { font-size: 12.5px; color: var(--ink-3); }
.c-sarton .c3-tags { justify-content: flex-start; }
.c-sarton .c3-tags li { border-radius: 0; border-color: var(--ink); font-size: 12.5px; letter-spacing: .06em; background: var(--paper); }
.c-sarton .c3-works .mk, .c-sarton .c3-talk .mk { font-family: var(--sans); letter-spacing: .22em; color: var(--acc); }
.c-sarton .c3-works li { font-size: 14.5px; }
.c-sarton .talk { border-radius: 0; border-color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px rgba(176, 138, 78, .6); }
.c-sarton .c3-ask { border-radius: 0; border-color: var(--ink-3); }
.c-sarton .c3-deeplink { color: var(--acc); }

/* 配图：装饰艺术的框 */
.sa-fig { margin: 0; }
.sa-frame { position: relative; padding: 14px; background: var(--paper); border: 1px solid var(--ink); box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px var(--gold); }
.sa-frame::before, .sa-frame::after { content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 0 0, var(--gold) 0 3deg, transparent 3deg 15deg); }
.sa-frame::before { left: 2px; top: 2px; }
.sa-frame::after { right: 2px; bottom: 2px; transform: rotate(180deg); }
.sa-frame img { display: block; width: 100%; height: auto; max-height: 74vh; object-fit: contain; }
.sa-fig figcaption { margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.sa-fig--inset { max-width: 340px; margin-top: 24px; }
.sa-fig--inset .sa-frame { padding: 10px; }
.sa-fig--inset img { max-height: 46vh; }
.sa-fig--tree { max-width: 480px; margin-top: 24px; }

/* 可以点名字的扫描页：图不留白边，框才对得上名字；选中时推近 */
.sa-hot__img { position: relative; width: min(100%, calc((100vh - 230px) * var(--ar))); min-width: min(100%, 280px); margin: 0 auto; overflow: hidden; }
.sa-hot__pan { position: relative; transform-origin: 0 0; transition: transform .9s cubic-bezier(.4, .1, .2, 1); }
.sa-hot .sa-frame img { max-height: none; object-fit: fill; }
.sa-hot__b { position: absolute; border: 2px solid transparent; background: transparent; transition: background .25s, border-color .25s, box-shadow .25s; cursor: pointer; }
.sa-hot__b.is-on { border-color: var(--bronze); background: rgba(176, 138, 78, .16); box-shadow: 0 0 0 3000px rgba(246, 244, 239, .55); z-index: 2; border-width: 1px; }
.sa-hot__ctl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sa-hot__ctl button, .sa-pm__ctl button, .sa-hb__ctl button, .sa-dial__stops button { min-height: 40px; padding: 4px 12px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  font: 14px/1.3 var(--body); cursor: pointer; border-radius: 0; transition: background .2s, color .2s; }
.sa-hot__ctl button small { display: block; font-family: var(--sans); font-size: 10.5px; letter-spacing: .04em; color: var(--ink-3); }
.sa-hot__ctl button[aria-pressed="true"], .sa-hb__ctl button[aria-pressed="true"], .sa-dial__stops button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.sa-hot__ctl button[aria-pressed="true"] small { color: var(--gold); }
.sa-hot__ctl button:hover, .sa-pm__ctl button:hover, .sa-hb__ctl button:hover, .sa-dial__stops button:hover { border-color: var(--bronze); }
.sa-hot__out { min-height: 3.4em; margin: 10px 0 0; padding-left: 12px; border-left: 3px solid var(--bronze); font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }

/* 铺板机 */
.sa-pm, .sa-hb, .sa-thm, .sa-dial { position: relative; padding: 16px 18px 14px; background: var(--paper); border: 1px solid var(--ink); box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6px var(--gold), 6px 6px 0 rgba(26, 25, 21, .1); }
.sa-pm__k { text-align: left; }
.sa-pm__wrap { position: relative; margin: 14px 0 28px; }
.sa-pm__svg { display: block; width: 100%; height: auto; overflow: visible; }
.sa-pm__bank { fill: var(--ink); }
.sa-pm__bank--r { fill: var(--bronze); }
.sa-pm__gap { stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 6 6; }
.sa-pm__base { stroke: var(--ink); stroke-width: 1.5; }
.sa-pm__tk line { stroke: var(--ink-3); stroke-width: 1.5; }
.sa-pl { fill: var(--ink-2); transform-box: fill-box; transform-origin: 50% 0; transition: opacity .3s, transform .35s cubic-bezier(.2, .9, .3, 1.2), fill .3s; }
.sa-js .sa-pl { opacity: 0; transform: translateY(-14px); }
.sa-pl--cn { fill: var(--verd); }
.sa-pl--v2 { fill: var(--bronze); }
.sa-pl--v3 { fill: #a8834c; }
.sa-js .sa-pl.is-on { opacity: 1; transform: none; }
.sa-pl.is-cur { fill: #ead7ac; stroke: var(--ink); stroke-width: 2; }
.sa-pm__cur { fill: var(--bronze); transition: transform .35s cubic-bezier(.2, .9, .3, 1); }
.sa-pm__lbs { position: absolute; left: 0; right: 0; top: 100%; height: 22px; margin: 4px 0 0; font-family: var(--sans); font-size: 11px; color: var(--ink-3); }
.sa-pm__lbs span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.sa-pm__lbs .sa-pm__end { color: var(--acc); font-weight: 600; }
.sa-pm__name { margin: 0; min-height: 1.4em; font-family: var(--head); font-size: 22px; line-height: 1.4; letter-spacing: .04em; }
.sa-pm__en { margin: 0 0 6px; min-height: 1.4em; font-family: var(--deco); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--acc); }
.sa-pm__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.sa-pm__go { background: var(--ink) !important; color: var(--paper) !important; }
.sa-pm__range { display: flex; align-items: center; gap: 8px; flex: 1 1 180px; min-height: 40px; font-size: 13px; color: var(--ink-2); }
.sa-pm__range input { flex: 1; min-width: 100px; accent-color: var(--bronze); height: 40px; margin: 0; }
.sa-pm__out { min-height: 5.2em; margin: 10px 0 0; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }
.sa-pm__src { margin: 6px 0 0; font-size: 12px; color: var(--ink-3); }
.sa-pm__key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 2px 0 12px; font-size: 12px; color: var(--ink-2); }
.sa-pm__key i { width: 16px; height: 9px; margin-left: 8px; background: #4a463d; }
.sa-pm__key i:first-child { margin-left: 0; }
.sa-pm__key .k2 { background: var(--bronze); } .sa-pm__key .k3 { background: #a8834c; } .sa-pm__key .kc { background: var(--verd); }
.sa-pm.is-stuck .sa-pm__gap { animation: sa-shake .5s; stroke: var(--bronze); }
@keyframes sa-shake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

/* 新旧人文主义的桥 */
.sa-hb__svg { display: block; width: 100%; height: auto; margin: 6px 0 4px; font-family: var(--head); }
.sa-hb__night { fill: var(--night); }
.sa-hb__cliff { fill: var(--ink-2); }
.sa-hb__cliff--l { fill: var(--verd); }
.sa-hb__cliff--r { fill: var(--bronze); }
.sa-hb__bank { font-size: 26px; fill: var(--paper); letter-spacing: .2em; }
.sa-hb__arch { fill: none; stroke: var(--gold); stroke-width: 3; }
.sa-hb__hang line { stroke: var(--gold); stroke-width: 1.5; }
.sa-hb__slab { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.sa-hb__strut { stroke: var(--gold); stroke-width: 2.5; fill: none; }
.sa-hb__w { fill: var(--verd); stroke: var(--ink); }
.sa-hb__wt { fill: var(--paper); font-size: 15px; }
.sa-hb__man circle, .sa-hb__man path { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }
.sa-hb__man circle { fill: var(--ink); }
.sa-hb__book { fill: var(--gold); }
.sa-hb__deck, .sa-hb__stub, .sa-hb__man, .sa-hb__w, .sa-hb__wt, .sa-hb__arch, .sa-hb__hang { transition: opacity .5s, transform 1.2s cubic-bezier(.4, .1, .3, 1); }
.sa-hb__deck { transform-box: view-box; transform-origin: 320px 156px; }
.sa-hb__man { transform: translate(566px, 150px); }
.sa-hb__piv { fill: var(--ink-3); opacity: 0; transition: opacity .5s; }
.sa-hb[data-mode="old"] .sa-hb__deck { opacity: 0; }
.sa-hb[data-mode="old"] .sa-hb__stub { opacity: 1; }
.sa-hb:not([data-mode="old"]) .sa-hb__stub { opacity: 0; }
.sa-hb[data-mode="new"] .sa-hb__man { transform: translate(92px, 150px); transition-duration: .5s, 2.6s; }
.sa-hb[data-mode="new"] .sa-hb__w, .sa-hb[data-mode="new"] .sa-hb__wt, .sa-hb[data-mode="old"] .sa-hb__w, .sa-hb[data-mode="old"] .sa-hb__wt { opacity: 0; }
.sa-hb[data-mode="liu"] .sa-hb__deck { transform: rotate(-6deg); }
.sa-hb[data-mode="liu"] .sa-hb__arch, .sa-hb[data-mode="liu"] .sa-hb__hang { opacity: 0; }
.sa-hb[data-mode="liu"] .sa-hb__piv { opacity: 1; }
.sa-hb[data-mode="liu"] .sa-hb__man { transform: translate(466.6px, 134.6px) rotate(-6deg); }
.sa-hb__ctl { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-hb__out { min-height: 5.4em; margin: 10px 0 0; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }

/* 定义、定理、推论 */
.sa-thm ol { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.sa-thm li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.sa-thm b { font-family: var(--head); font-weight: 400; font-size: 18px; letter-spacing: .1em; color: var(--acc); text-align: center; padding: 2px 0; border: 1px solid var(--bronze); }
.sa-thm p { margin: 0; font-size: 15px; line-height: 1.75; }
.sa-thm__but b { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sa-thm__n { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* 楼层表 */
.sa-dial__svg { display: block; width: min(100%, 380px); height: auto; margin: 4px auto 0; font-family: var(--deco); }
.sa-dial__face { fill: var(--night); }
.sa-dial__rim { fill: none; stroke: var(--gold); stroke-width: 1.2; }
.sa-dial__rays line { stroke: rgba(176, 138, 78, .32); stroke-width: 1; }
.sa-dial__marks line { stroke: var(--gold); stroke-width: 2; }
.sa-dial__marks text { fill: #efe3c8; font-size: 13px; letter-spacing: .04em; }
.sa-dial__needle { fill: var(--gold); transform-box: view-box; transform-origin: 150px 150px; transform: rotate(-75deg); transition: transform 1.1s cubic-bezier(.3, 1.35, .45, 1); }
.sa-dial__needle circle { fill: var(--bronze); stroke: var(--gold); }
.sa-dial__stops { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 12px 0 0; padding: 0; }
.sa-dial__stops button { font-family: var(--deco); font-size: 15px; letter-spacing: .06em; min-width: 58px; }
.sa-dial__out { min-height: 3.6em; margin: 10px 0 0; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); text-align: center; }
.sa-dial__out b { margin-right: 8px; font-family: var(--deco); font-weight: 400; color: var(--acc); }

/* ---------- 结尾：到了对岸 ---------- */
.c-sarton .c3end { padding-bottom: calc(var(--nav) + 40px); }
.sa-end { max-width: 1120px; margin: 0 auto; }
.sa-end__h { text-align: center; margin-bottom: 26px; }
.c-sarton .c3end h2 { margin: 0 0 14px; font-family: var(--head); font-weight: 400; font-size: clamp(36px, 4.6vw, 54px); letter-spacing: .1em; }
.sa-motto { margin: 0 auto; max-width: 40em; padding: 14px 10px; background: linear-gradient(var(--ink), var(--ink)) left top / 100% 1px no-repeat, linear-gradient(var(--gold), var(--gold)) left 4px / 100% 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left calc(100% - 4px) / 100% 1px no-repeat, linear-gradient(var(--ink), var(--ink)) left bottom / 100% 1px no-repeat; }
.sa-motto span { display: block; font-family: var(--deco); font-size: clamp(15px, 1.8vw, 21px); letter-spacing: .16em; color: var(--ink); }
.sa-motto small { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.c-sarton .c3end h3 { font-family: var(--head); font-weight: 400; font-size: 22px; letter-spacing: .1em; }
.c-sarton .c3-lin li { border-radius: 0; background: var(--paper); border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px rgba(176, 138, 78, .45); }
.c-sarton .c3-lin .rel { border-radius: 0; white-space: nowrap; }

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
  .sa-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "c c" "l r" "br br" "cap cap" "go go"; row-gap: 16px; align-items: stretch; }
  .sa-tri__c h1 { font-size: 96px; }
  .sa-en { margin: 8px 0 8px; font-size: 19px; }
  .sa-who { font-size: 16.5px; }
  .sa-plaque { padding: 12px 14px 10px; }
  .sa-plaque p { font-size: 14px; line-height: 1.7; }
  .sa-books { display: flex; flex-wrap: wrap; gap: 0 12px; }
  .sa-books li { border: 0; padding: 1px 0; gap: 4px; font-size: 14px; }
  .sa-br { --arch: 104px; --deck: 74px; margin-top: 4px; }
  .sa-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-deck span { font-size: 12.5px; }
}
@media (max-width: 960px) {
  .sa-q__grid, .c-sarton .c3q:nth-of-type(even) .sa-q__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "art" "b"; }
  .sa-q__art { margin: 8px 0 18px; }
  .sa-frame img { max-height: 64vh; }
  .sa-deck b { font-size: 16px; }
  .sa-deck span { font-size: 12px; line-height: 1.4; }
  .sa-deck a { padding: 5px 7px; height: 82px; }
}
@media (max-width: 760px) {
  .sa-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "c" "l" "br" "go" "r" "cap"; row-gap: 18px; }
  .sa-books { display: block; }
  .sa-books li { display: flex; border-bottom: 1px dotted var(--rule); }
  .sa-tri__c h1 { font-size: 92px; }
  .sa-en { font-size: 17px; }
  .sa-who { font-size: 16.5px; }
  .sa-sun { top: 0; width: 100%; }
  /* 桥竖过来：从上往下走，科学在上，人文在下 */
  .sa-br { height: auto; margin-top: 22px; }
  .sa-py { position: relative; width: auto; height: 46px; }
  .sa-py__svg { display: none; }
  .sa-py__t { position: static; display: flex; align-items: center; justify-content: center; gap: 12px; height: 46px; background: var(--ink);
    clip-path: polygon(0 100%, 0 30%, 8% 30%, 8% 14%, 20% 14%, 20% 0, 80% 0, 80% 14%, 92% 14%, 92% 30%, 100% 30%, 100% 100%); padding-top: 8px; }
  .sa-py--r .sa-py__t { clip-path: polygon(0 0, 100% 0, 100% 70%, 92% 70%, 92% 86%, 80% 86%, 80% 100%, 20% 100%, 20% 86%, 8% 86%, 8% 70%, 0 70%); padding: 0 0 8px; }
  .sa-py__t b { font-size: 18px; }
  .sa-py__t span { margin: 0; font-size: 9px; }
  .sa-br__span { position: static; height: auto; padding: 0 12px; background: linear-gradient(90deg, var(--night) 0 6px, transparent 6px calc(100% - 6px), var(--night) calc(100% - 6px)); }
  .sa-arch, .sa-girder, .sa-chasm { display: none; }
  .sa-deckwrap { position: static; padding: 6px 0; border-left: 3px double var(--ink); border-right: 3px double var(--ink); }
  .sa-deck { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 3px; }
  .sa-deck a { flex-direction: row; justify-content: flex-start; align-items: center; gap: 14px; height: auto; min-height: 50px; padding: 8px 14px; border-top: 0; border-left: 5px solid var(--bronze); }
  .sa-deck b { flex: none; width: 3.1em; font-size: 18px; }
  .sa-deck span { margin: 0; font-size: 14.5px; }
  .sa-deck a:hover, .sa-deck a:focus-visible { transform: translateX(4px); }
  @media (prefers-reduced-motion: no-preference) { .sa-deck li { animation-name: sa-lay-s; } }
  .sa-band { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .c-sarton .c3toc { display: block; }
  .c-sarton .c3toc .sa-nav__bank { width: 48px; }
  .c-sarton .c3toc .sa-nav__bank b { font-size: 13px; letter-spacing: .1em; text-indent: .1em; }
  .c-sarton .c3toc .sa-nav__deck a b { font-size: 12.5px; letter-spacing: 0; }
  .c-sarton .c3toc ol.sa-nav__deck { gap: 2px; padding: 0 2px; }
  .c-sarton .c3toc .sa-nav__deck a span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; }
  .sa-pm__lbs .sa-pm__opt { display: none; }
  .sa-q__no::before, .sa-q__no::after { width: 34px; }
}
@keyframes sa-lay-s { from { transform: translateX(-26px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 560px) {
  .c-sarton .c3q__lede { text-align: left; }
  .sa-pm, .sa-hb, .sa-thm, .sa-dial { padding: 14px 12px 12px; }
  .sa-fig--inset { max-width: none; }
  .sa-hot__ctl button { flex: 1 1 auto; }
  .sa-motto span { letter-spacing: .08em; }
}