/* Form 形 · the West. Byrne's Euclid in light (white, red, yellow, blue, black), Scrovegni lapis and gold in dark.
   A Van de Graaf page for the hero, a ruled line of Books, numbered propositions, margins for glosses. */
.page-west .face-no, .page-west .era-no { font-family: "Cinzel", serif; font-size: 13px; letter-spacing: .14em; color: var(--red); margin: 0 0 14px; }
.page-west .sh h2 { font-family: "Cinzel", "Noto Serif SC", serif; font-weight: 400; letter-spacing: .03em; }
html[lang="zh-CN"] .page-west .sh h2 { font-family: "Noto Serif SC", serif; font-weight: 900; letter-spacing: 0; }
.c-red { --c: var(--red); --on: #fff; } .c-yellow { --c: var(--yel); --on: #111; } .c-blue { --c: var(--blu); --on: #fff; } .c-ink { --c: var(--fg); --on: var(--bg); }

/* hero: a page built on the Van de Graaf canon */
.hero-west { min-height: calc(100vh - var(--bar-h)); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); gap: clamp(30px, 5vw, 90px); align-items: center; padding: 6vh clamp(18px, 6vw, 110px) 8vh; max-width: 1440px; margin: 0 auto; }
.hw-canon { position: absolute !important; inset: 0; opacity: .55; pointer-events: none; }
.hw-page { position: relative; z-index: 1; }
.hw-page h1 { font-family: "Cinzel", "Noto Serif SC", serif; font-size: clamp(84px, 11vw, 168px); line-height: .9; letter-spacing: .04em; margin: 0; }
html[lang="zh-CN"] .hw-page h1 { font-family: "Noto Serif SC", serif; font-weight: 900; letter-spacing: 0; }
.hw-zh { font-family: "Noto Serif SC", "Cinzel", serif; font-weight: 900; font-size: clamp(40px, 5vw, 70px); color: var(--red); margin: 6px 0 26px; line-height: 1; }
html[lang="zh-CN"] .hw-zh { font-family: "Cinzel", serif; font-weight: 400; letter-spacing: .2em; font-size: 30px; }
.hw-page .deck { font-size: clamp(21px, 2.1vw, 28px); line-height: 1.35; max-width: 24ch; margin-bottom: 34px; }
.hw-gloss { max-width: 34ch; font-size: 14.5px; line-height: 1.6; color: var(--dim); border-left: 2px solid var(--blu); padding-left: 16px; }
.hw-fig { position: relative; z-index: 1; }
.hw-plate { width: 100%; aspect-ratio: 4 / 5; max-height: 80vh; }
@media (max-width: 860px) { .hero-west { grid-template-columns: 1fr; } .hw-fig { max-width: 440px; } }

/* intro: a single justified column with a coloured initial, like Byrne */
.intro-west { padding: 80px clamp(18px, 4vw, 56px) 40px; }
.intro-west .intro-in { max-width: 44rem; margin: 0 auto; }
.intro-west .lede > p:first-child::first-letter { float: left; font-family: "Cinzel", serif; font-size: 3.6em; line-height: .86; padding: 10px 12px 6px; margin: 4px 12px 0 0; background: var(--red); color: #fff; }
.intro-west .lede p { text-align: justify; hyphens: auto; }

/* the ruled line of Books */
.tl-west { padding: 80px clamp(18px, 4vw, 56px) 70px; max-width: 1440px; margin: 0 auto; }
.ruler { position: relative; height: 210px; margin-top: 30px; }
.books { position: absolute; left: 0; right: 0; top: 0; height: 64px; }
.book { position: absolute; top: 0; height: 64px; background: var(--c); color: var(--on); text-decoration: none; padding: 7px 9px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; transition: transform .3s var(--ease); border-right: 2px solid var(--bg); }
.book:hover { transform: translateY(-5px); }
.bk-n { font-family: "Cinzel", serif; font-size: 17px; line-height: 1; }
.bk-t { font-size: 12.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ruler .line { position: absolute; left: 0; right: 0; top: 110px; height: 2px; background: var(--fg); }
.pts { position: absolute; left: 0; right: 0; top: 110px; }
.pt { position: absolute; top: 0; transform: translate(-50%, -50%); width: 18px; height: 18px; display: grid; place-items: center; }
.pt i { width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--fg); transition: transform .25s, background-color .25s; }
.pt:hover i, .pt:focus-visible i { transform: scale(1.5); background: var(--red); border-color: var(--red); }
.pt span { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 13px; background: var(--bg); padding: 2px 6px; border: 1px solid var(--fg); opacity: 0; pointer-events: none; transition: opacity .2s; }
.pt:hover span, .pt:focus-visible span { opacity: 1; }
.ticks { position: absolute; left: 0; right: 0; top: 128px; font-size: 12px; color: var(--dim); }
.ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.ticks span::before { content: ""; position: absolute; left: 50%; top: -18px; width: 1px; height: 8px; background: var(--fg); }
@media (max-width: 760px) { .ruler { overflow-x: auto; } .books, .pts, .ticks, .ruler .line { width: 900px; right: auto; } .bk-t { display: none; } }

/* an era: a Book with its plate, its argument and its propositions */
.era-west { max-width: 1180px; margin: 0 auto; padding: 110px clamp(18px, 4vw, 56px) 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 6fr) minmax(0, 2fr); gap: 0 clamp(18px, 3vw, 44px); }
.era-west > * { grid-column: 2 / span 2; }
.ew-head { display: grid; gap: 6px; margin-bottom: 26px; border-top: 2px solid var(--fg); padding-top: 18px; }
.ew-book { font-family: "Cinzel", serif; font-size: 14px; letter-spacing: .16em; color: var(--red); }
.era-west h3 { font-family: "Cinzel", "Noto Serif SC", serif; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12; letter-spacing: .02em; }
html[lang="zh-CN"] .era-west h3 { font-family: "Noto Serif SC", serif; font-weight: 900; letter-spacing: 0; }
.ew-yrs { color: var(--dim); font-size: 15px; }
.ew-plate { margin: 0 0 34px; }
.ew-plate .era-plate { width: 100%; aspect-ratio: 3 / 1; border: 1px solid var(--fg); }
.ew-plate figcaption { font-family: "Cinzel", serif; font-size: 12.5px; letter-spacing: .14em; color: var(--dim); margin-top: 8px; }
.ew-sum { grid-column: 2; }
.era-west .era-sum { font-size: 1.06em; }
.dropcap::first-letter { float: left; font-family: "Cinzel", serif; font-size: 3.3em; line-height: .86; padding: 8px 10px 4px; margin: 5px 12px 0 0; background: var(--c); color: var(--on); }
html[lang="zh-CN"] .dropcap::first-letter { font-family: "Noto Serif SC", serif; font-weight: 900; font-size: 2.6em; }
.props { list-style: none; margin: 30px 0 0; padding: 0; grid-column: 2 / span 2; }
.nc-west { display: grid; grid-template-columns: 96px 72px 1fr; gap: 0 22px; width: 100%; padding: 22px 0; border-top: 1px solid var(--rule); align-items: start; position: relative; }
.nc-west:hover .nc-n { color: var(--red); }
.nc-west .pn { font-family: "Cinzel", serif; font-size: 12.5px; letter-spacing: .1em; color: var(--dim); padding-top: 5px; }
.nc-west .mk { width: 72px; height: 72px; }
.nc-west .nc-body { display: grid; gap: 4px; }
.nc-west .nc-n { font-weight: 700; font-size: 19px; line-height: 1.3; transition: color .2s; }
.nc-west .nc-yr { font-size: 14px; color: var(--dim); }
.nc-west .nc-k { font-size: 15.5px; line-height: 1.55; max-width: 46rem; }
.nc-west.seen .pn::after { content: " \25A0"; color: var(--blu); }
@media (max-width: 760px) { .era-west { grid-template-columns: 1fr; } .era-west > *, .ew-sum, .props { grid-column: 1; } .nc-west { grid-template-columns: 56px 1fr; } .nc-west .pn { grid-column: 1 / -1; } }

/* glossary: Definitions */
.gloss-west, .gal-west { max-width: 1180px; margin: 0 auto; padding: 110px clamp(18px, 4vw, 56px) 0; }
.terms-west { list-style: none; margin: 0; padding: 0; columns: 2 340px; column-gap: 54px; }
.terms-west li { break-inside: avoid; margin-bottom: 26px; }
.terms-west button { display: grid; gap: 3px; }
.terms-west .dn { font-family: "Cinzel", serif; font-size: 12.5px; letter-spacing: .14em; color: var(--red); }
.terms-west b { font-size: 18.5px; }
.terms-west .to { color: var(--dim); font-size: 14.5px; }
.terms-west .tg { font-size: 15px; line-height: 1.55; }
.terms-west button:hover b { color: var(--blu); }

/* gallery: plates with a rule */
.gal-west .gimg { border: 1px solid var(--fg); padding: 8px; background: var(--card); height: 240px; }
.gal-west .gimg img { object-fit: contain; }
.gal-west .gcap b { font-weight: 400; }

/* drawer */
.drawer[data-face="west"] .dw-title { font-family: "Cinzel", "Noto Serif SC", serif; letter-spacing: .02em; }
html[lang="zh-CN"] .drawer[data-face="west"] .dw-title { font-family: "Noto Serif SC", serif; font-weight: 900; letter-spacing: 0; }
.drawer[data-face="west"] .dw-term.han { font-family: "Noto Serif SC", serif; font-weight: 900; }
.drawer[data-face="west"] .dw-key { border-left: 3px solid var(--red); padding-left: 16px; }
.drawer[data-face="west"] .dw-body > p:first-child::first-letter { float: left; font-family: "Cinzel", serif; font-size: 3.1em; line-height: .86; padding: 7px 9px 3px; margin: 5px 10px 0 0; background: var(--blu); color: #fff; }
/* phones: the canon's construction lines would cross the text, and justified lines open rivers */
@media (max-width: 860px) { .hw-canon { display: none; } }
@media (max-width: 600px) { .intro-west .lede p { text-align: left; } }