/* 隐藏入口不改变首页构图，阅读面板沿用纸白、衬线标题和品牌蓝。 */
.brand-story-trigger{display:block;width:min(100%,320px);padding:0;margin:0;border:0;border-radius:12px;background:transparent;color:inherit;box-shadow:none;appearance:none;cursor:pointer;touch-action:manipulation}
.brand-story-trigger:disabled{cursor:default;opacity:1}
.brand-story-trigger:focus-visible{outline:2px solid #1c2e6f;outline-offset:12px}
html.brand-story-open{overflow:hidden}
.brand-story-dialog{position:fixed;inset:0;width:min(960px,calc(100% - 48px));max-width:none;max-height:calc(100dvh - 64px);margin:auto;padding:0;border:1px solid var(--site-line,#dcd8cf);border-radius:16px;background:var(--site-paper,#faf9f5);color:var(--site-ink,#141413);font:400 15px/1.85 var(--site-sans);text-align:left;box-shadow:0 24px 80px #14141326;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.brand-story-dialog:not([open]){display:none}
.brand-story-dialog::backdrop{background:#14141366}
.brand-story-topline{position:sticky;top:0;z-index:1;transform:translateZ(0);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px 12px;background:var(--site-paper,#faf9f5)}
.brand-story-topline>span{font-size:12px;letter-spacing:.08em;color:var(--site-muted,#5e5d59)}
.brand-story-close{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--site-line,#dcd8cf);border-radius:50%;background:transparent;color:var(--site-ink,#141413);cursor:pointer;transition:background .16s}
.brand-story-close:hover{background:var(--site-surface,#efebe3)}
.brand-story-close:focus-visible{outline:2px solid #1c2e6f;outline-offset:3px}
.brand-story-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.brand-story-content{padding:0 40px 32px}
.brand-story-content h2{margin:4px 0 20px;color:var(--site-ink,#141413);font:400 36px/1.4 var(--site-serif);letter-spacing:-.025em;text-wrap:balance}
.brand-story-content h2:focus{outline:none}
.brand-story-intro{max-width:43em;margin:0;color:var(--site-muted,#5e5d59);font-size:15px;line-height:1.9}
.brand-story-stages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;list-style:none;margin:28px 0 0;padding:0}
.brand-story-stages>li{display:grid;grid-template-columns:156px minmax(0,1fr);align-items:center;gap:20px;margin:0;padding:20px 0;border-top:1px solid var(--site-line,#dcd8cf)}
.brand-story-keyframe{width:156px;height:auto;aspect-ratio:326/344;margin:0;align-self:center;pointer-events:none}
.brand-story-keyframe svg{display:block;width:100%;height:100%;overflow:visible}
.brand-story-keyframe .outline{stroke-width:2.2}
.brand-story-keyframe .white-heart{fill:var(--site-paper,#faf9f5)}
.brand-story-stage-number{font-size:11px;line-height:1.5;letter-spacing:.08em;color:var(--site-muted,#5e5d59)}
.brand-story-stages h3{font:400 20px/1.5 var(--site-serif);margin:4px 0 8px;color:var(--site-ink,#141413)}
.brand-story-stages p{font-size:14px;line-height:1.85;margin:0;color:var(--site-muted,#5e5d59);text-wrap:balance}
.brand-story-stages>li[data-current]{border-top-color:#1c2e6f}
.brand-story-stages>li[data-current] :is(h3,.brand-story-stage-number){color:#1c2e6f}
.brand-story-closing{padding-top:24px;margin:12px 0 0;border-top:1px solid var(--site-line,#dcd8cf);font:400 22px/1.6 var(--site-serif);color:#1c2e6f}
.brand-story-mobile-break{display:none}
@media(max-width:850px){.brand-story-stages{grid-template-columns:1fr}.brand-story-stages>li{gap:28px}}
@media(max-width:600px){
  .brand-story-trigger{width:268px;max-width:100%}
  .brand-story-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px);border-radius:14px}
  .brand-story-topline{padding:12px 16px 10px}
  .brand-story-content{padding:0 24px 28px}
  .brand-story-content h2{font-size:28px;margin:8px 0 16px}
  .brand-story-intro{font-size:14px}
  .brand-story-stages{grid-template-columns:1fr;margin-top:24px}
  .brand-story-stages>li{grid-template-columns:128px minmax(0,1fr);gap:18px;padding:20px 0}
  .brand-story-keyframe{width:128px}
  .brand-story-stages h3{font-size:19px}
  .brand-story-closing{font-size:21px;margin-top:4px}
  .brand-story-mobile-break{display:initial}
}
@media(max-width:360px){.brand-story-trigger{width:228px}.brand-story-content{padding-inline:20px}.brand-story-content h2{font-size:25px}.brand-story-stages>li{grid-template-columns:108px minmax(0,1fr);gap:14px}.brand-story-keyframe{width:108px}}
@media(prefers-reduced-motion:reduce){.brand-story-close{transition:none}}