/* The One 一体. A gallery neutral that lets the four faces be seen side by side, each in its own material. */
body { --k-cn: #2F5D7C; --k-jp: #A8842F; --k-west: #D13A26; --k-film: #141414; }
body[data-theme="dark"] { --k-cn: #6F95B2; --k-jp: #D2AE57; --k-west: #D9573F; --k-film: #D8D8D4; }
.page-one .sh h2, .page-one h2 { font-family: "Hanken Grotesk", var(--sys-zh); font-weight: 300; letter-spacing: -.02em; }
.wrap-sh { max-width: 1320px; margin-left: auto; margin-right: auto; padding: 0 clamp(18px, 4vw, 56px); }
.wrap-sh p { max-width: 46rem; }

/* hero */
.one-hero { padding: 6vh clamp(18px, 4vw, 56px) 40px; max-width: 1560px; margin: 0 auto; }
.oh-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 24px 60px; align-items: end; margin-bottom: 5vh; }
.oh-head h1 { font-family: "Hanken Grotesk", var(--sys-zh); font-weight: 300; font-size: clamp(44px, 6.4vw, 104px); line-height: .98; letter-spacing: -.035em; }
html[lang="zh-CN"] .oh-head h1 { letter-spacing: 0; line-height: 1.12; font-size: clamp(40px, 5.2vw, 84px); word-break: keep-all; }
html[lang="zh-CN"] .voice[data-face="cn"] h4 { font-family: "LXGW WenKai", serif; }
.oh-thesis { font-size: 17px; color: var(--dim); margin: 0; max-width: 36ch; }
.quad { display: flex; gap: 12px; height: min(68vh, 700px); min-height: 440px; }
.qp { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--fg); background: var(--bg); overflow: hidden; transition: flex-grow .9s var(--ease); }
.quad.has-open .qp { flex-grow: .8; }
.quad.has-open .qp.open { flex-grow: 1.9; }
.qp-pic { position: relative; flex: 1; min-height: 0; }
.qp-plate { position: absolute !important; inset: 0; }
.qp-cap { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; padding: 16px 18px 18px; font-family: var(--f-body); align-items: baseline; }
.qp-mark { font-size: 40px !important; grid-row: span 2; line-height: 1; }
.qp-name { font-family: var(--f-disp); font-size: 21px; line-height: 1.1; display: grid; }
.qp-name small { font-family: var(--f-body); font-size: 13px; color: var(--dim); margin-top: 3px; }
.qp-head { grid-column: 2; font-size: 15px; line-height: 1.35; margin-top: 8px; }
.qp-body { grid-column: 1 / -1; font-size: 14.5px; line-height: 1.5; color: var(--dim); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .8s var(--ease), opacity .6s; }
.qp.open .qp-body { max-height: 200px; opacity: 1; margin-top: 8px; }
.qp[data-face="west"] .qp-name { font-family: "Cinzel", "Noto Serif SC", serif; }
.qp[data-face="film"] .qp-name { letter-spacing: .2em; text-transform: uppercase; font-weight: 300; }
.oh-note { margin: 16px 0 0; font-size: 14px; color: var(--dim); }
@media (max-width: 900px) {
  .oh-head { grid-template-columns: 1fr; }
  .quad { overflow-x: auto; height: auto; scroll-snap-type: x mandatory; }
  .qp { flex: 0 0 78vw; height: 70vh; scroll-snap-align: center; }
  .qp-body { max-height: none; opacity: 1; margin-top: 8px; }
}

/* thesis */
.one-thesis { max-width: 1320px; margin: 0 auto; padding: 120px clamp(18px, 4vw, 56px) 40px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px 70px; }
.ot-side h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.04; position: sticky; top: calc(var(--bar-h) + 30px); }
.ot-body p { font-size: 1.04em; }
@media (max-width: 860px) { .one-thesis { grid-template-columns: 1fr; } }

/* six questions */
.six { max-width: 1440px; margin: 0 auto; padding: 120px clamp(18px, 4vw, 56px) 40px; }
.six-h { max-width: 46rem; margin-bottom: 34px; }
.six-h h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.04; margin-bottom: 14px; }
.six-h p { color: var(--dim); }
.six-tabs { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--fg); }
.six-tabs button { display: grid; gap: 6px; align-content: start; padding: 14px 16px 16px 0; border-right: 1px solid var(--rule); font-size: 14.5px; line-height: 1.35; color: var(--dim); transition: color .25s; }
.six-tabs button + button { padding-left: 16px; }
.six-tabs button:last-child { border-right: 0; }
.six-tabs .n { font-size: 30px; font-weight: 300; line-height: 1; color: var(--faint); transition: color .25s; }
.six-tabs button:hover, .six-tabs button[aria-selected="true"] { color: var(--fg); }
.six-tabs button[aria-selected="true"] .n { color: var(--fg); }
.six-tabs button[aria-selected="true"] { box-shadow: inset 0 3px 0 var(--fg); }
@media (max-width: 900px) { .six-tabs { grid-template-columns: repeat(3, 1fr); } .six-tabs button:nth-child(3n) { border-right: 0; } .six-tabs button:nth-child(n+4) { border-top: 1px solid var(--rule); } }
@media (max-width: 560px) { .six-tabs { grid-template-columns: repeat(2, 1fr); } }
.six-panel { margin-top: 46px; }
.sp-q { display: grid; grid-template-columns: auto 1fr; gap: 6px 26px; max-width: 64rem; margin-bottom: 36px; }
.sp-n { font-size: clamp(60px, 7vw, 100px); font-weight: 200; line-height: .85; grid-row: span 2; }
.sp-q h3 { font-family: "Hanken Grotesk", var(--sys-zh); font-weight: 300; font-size: clamp(26px, 3vw, 40px); line-height: 1.15; letter-spacing: -.015em; }
.sp-q p { color: var(--dim); margin: 6px 0 0; max-width: 48rem; }
.voices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1180px) { .voices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .voices { grid-template-columns: 1fr; } }
.voice { background: var(--bg); color: var(--fg); padding: 22px 22px 24px; font-family: var(--f-body); font-size: 15.5px; line-height: 1.6; display: flex; flex-direction: column; gap: 12px; animation: voiceIn .7s var(--ease) both; }
.voice:nth-child(2) { animation-delay: .06s; } .voice:nth-child(3) { animation-delay: .12s; } .voice:nth-child(4) { animation-delay: .18s; }
@keyframes voiceIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.voice header { display: flex; gap: 10px; align-items: baseline; font-size: 14px; color: var(--dim); }
.voice header .fm { font-size: 30px; color: var(--fg); }
.voice h4 { font-family: var(--f-disp); font-size: 22px; line-height: 1.22; font-weight: 400; }
.voice[data-face="west"] h4 { font-family: "Libre Caslon Text", "Noto Serif SC", serif; font-weight: 700; font-size: 20px; }
.voice[data-face="film"] h4 { font-weight: 300; }
.voice[data-face="jp"] h4 { font-weight: 700; }
.voice .vb p { margin: 0 0 .7em; }
.voice blockquote.q { margin: 4px 0; font-size: 14.5px; border-top: 1px solid var(--rule); padding-top: 12px; }
.voice .q-orig { font-size: 1.35em; }
.vn { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.vn button { font-size: 13px; padding: 3px 10px; border: 1px solid var(--rule); border-radius: 999px; }
.vn button:hover { border-color: var(--fg); }
.meet { max-width: 54rem; margin: 30px 0 0; display: grid; gap: 4px; }
.meet-k { font-size: 14px; color: var(--dim); }
.meet-x { margin-top: 10px; font-size: 14px; color: var(--dim); text-decoration: underline; text-underline-offset: .2em; }

/* the whole picture */
.braid { padding: 130px 0 40px; }
.br-wrap { position: relative; margin-top: 10px; }
.br-labels { position: absolute; left: 0; top: 0; bottom: 0; width: clamp(80px, 9vw, 120px); z-index: 2; pointer-events: none; background: linear-gradient(90deg, var(--bg) 70%, transparent); }
.br-labels span { position: absolute; left: clamp(14px, 3vw, 40px); display: flex; gap: 8px; align-items: baseline; font-size: 14px; color: var(--dim); }
.br-labels .fm { font-size: 22px; color: var(--fg); }
.br-scroll { overflow-x: auto; cursor: grab; padding: 0 0 10px clamp(80px, 9vw, 120px); scrollbar-width: thin; }
.br-scroll.dragging { cursor: grabbing; }
.br-svg { display: block; }
.br-ticks line { stroke: var(--rule); stroke-width: 1; }
.br-ticks text { fill: var(--dim); font: 11.5px "Hanken Grotesk", var(--sys-zh); text-anchor: middle; }
.br-era { fill: color-mix(in srgb, var(--k) 7%, transparent); }
.br-era.odd { fill: color-mix(in srgb, var(--k) 13%, transparent); }
.br-axis { stroke: var(--k); stroke-width: 1.4; }
.k-cn { --k: var(--k-cn); } .k-jp { --k: var(--k-jp); } .k-west { --k: var(--k-west); } .k-film { --k: var(--k-film); }
.br-dot { fill: var(--bg); stroke: var(--k); stroke-width: 2; cursor: pointer; transition: r .2s; }
.br-dot:hover { fill: var(--k); r: 7; }
.br-arc { fill: none; stroke: var(--fg); stroke-opacity: .2; stroke-width: 1.1; cursor: pointer; transition: stroke-opacity .25s, stroke-width .25s; }
.br-arc.comp { stroke-dasharray: 3 5; stroke-opacity: .13; }
.br-svg.lit .br-arc { stroke-opacity: .05; }
.br-svg.lit .br-arc.hl, .br-arc:hover { stroke-opacity: 1; stroke-width: 2.2; }
.br-legend { display: flex; gap: 24px; font-size: 13.5px; color: var(--dim); padding: 14px clamp(18px, 4vw, 56px) 0; max-width: 1320px; margin: 0 auto; }
.br-legend .ln { display: inline-block; width: 28px; height: 0; border-top: 1.5px solid var(--fg); vertical-align: middle; margin-right: 8px; }
.br-legend .ln.comp { border-top-style: dashed; }
.xlist { max-width: 1320px; margin: 30px auto 0; padding: 0 clamp(18px, 4vw, 56px); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 0 40px; }
.xrow { display: grid; grid-template-columns: 54px 1fr; gap: 2px 12px; padding: 12px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.xrow:hover .xt { text-decoration: underline; text-underline-offset: .2em; }
.xm { display: flex; gap: 4px; } .xm .fm { font-size: 20px; }
.xt { font-size: 15.5px; line-height: 1.35; }
.xk { grid-column: 2; font-size: 12.5px; color: var(--dim); }

/* doors */
.doors { padding: 130px 0 30px; }
.door-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1560px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 56px); }
.door { background: var(--bg); color: var(--fg); text-decoration: none; padding: 26px 24px 26px; min-height: 420px; display: flex; flex-direction: column; gap: 8px; font-family: var(--f-body); transition: transform .6s var(--ease); }
.door:hover { transform: translateY(-6px); }
.d-mark { font-size: 96px !important; line-height: 1.05; margin-bottom: 8px; }
.d-name { font-family: var(--f-disp); font-size: 30px; line-height: 1.05; }
.door[data-face="west"] .d-name { font-family: "Cinzel", serif; }
.door[data-face="film"] .d-name { letter-spacing: .24em; text-transform: uppercase; font-weight: 300; }
.d-long { color: var(--dim); font-size: 14px; }
.d-motto { font-size: 17px; margin-top: 16px; line-height: 1.4; }
.d-sees { font-size: 14.5px; color: var(--dim); line-height: 1.55; }
.d-count { margin-top: auto; font-size: 13px; color: var(--dim); padding-top: 14px; border-top: 1px solid var(--rule); }
@media (max-width: 1100px) { .door-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .door-row { grid-template-columns: 1fr; } .door { min-height: 0; } }

/* other faces, elsewhere */
.others { padding: 120px clamp(18px, 4vw, 56px) 20px; }
.oo-in { max-width: 46rem; margin: 0 auto; }
.oo-in h2 { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 18px; }
.oo-in ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.oo-in li { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--rule); }
.oo-in li span { color: var(--dim); font-size: .94em; }
.elsewhere { max-width: 1320px; margin: 110px auto 0; padding: 0 clamp(18px, 4vw, 56px) 110px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; border-top: 1px solid var(--fg); }
.elsewhere a { display: grid; gap: 6px; padding-top: 22px; text-decoration: none; }
.elsewhere b { font-weight: 300; font-size: 30px; letter-spacing: -.01em; }
.elsewhere span { color: var(--dim); font-size: 15.5px; }
.elsewhere a:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
@media (max-width: 760px) { .elsewhere { grid-template-columns: 1fr; gap: 10px; } }
.d-orig { font-family: "Zen Old Mincho", "Noto Serif SC", serif; font-size: 18px; margin-top: 16px; line-height: 1.5; }
.d-orig + .d-motto { margin-top: 2px; }
.d-src { font-size: 13px; color: var(--dim); }