/* Chapter 04 only — complete historical objects, changing editorial compositions. */
.tea-history-section { width:min(calc(100% - var(--page-margin)*2),1536px); margin:auto; padding-top:clamp(88px,8vw,128px); border-top:1px solid var(--line); scroll-margin-top:calc(var(--header-height) + 24px); }
.history-opening { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:40px 24px; }
.history-section-number { grid-column:1/3; padding-top:8px; font-size:clamp(72px,10vw,152px); font-weight:300; line-height:1; letter-spacing:-.065em; }
.history-opening > div { grid-column:4/-1; min-width:0; }
.history-kicker { font-size:11px; letter-spacing:.12em; color:var(--secondary); margin:0 0 24px; }
.history-display { font:clamp(56px,7.3vw,128px)/1 var(--english-serif); letter-spacing:-.045em; margin:0; }
.history-opening h2 { font:400 clamp(30px,3vw,44px)/1.5 var(--serif); letter-spacing:.05em; margin:28px 0 8px; }
.history-subtitle { margin:0; font-size:13px; color:var(--secondary); }
.history-intro { grid-column:8/-1; font-size:15px; line-height:2; color:var(--secondary); margin:0; }
.history-guide-note { font-size:11px; line-height:1.9; color:var(--secondary); margin:clamp(80px,10vw,150px) 0 44px; }
.history-timeline { --history-indent:clamp(24px,3.5vw,56px); border-left:1px solid var(--line); padding-left:var(--history-indent); }
.history-era { position:relative; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; row-gap:52px; padding-block:32px 64px; margin-bottom:clamp(100px,13vw,208px); scroll-margin-top:calc(var(--header-height) + 32px); }
.history-era::before { content:''; position:absolute; left:calc(-1 * var(--history-indent) - 1px); top:0; bottom:0; width:2px; background:var(--accent); opacity:0; transition:opacity 300ms ease; }
.history-era.is-current-era::before { opacity:1; }
.era-heading { grid-column:1/5; min-width:0; }
.era-english { font:clamp(26px,4vw,64px)/1.2 var(--english-serif); letter-spacing:-.025em; margin:0 0 18px; overflow-wrap:anywhere; }
.era-heading h2 { font:400 clamp(96px,13.5vw,208px)/1.25 var(--serif); margin:0 0 30px; }
.era-period { font-size:12px; line-height:1.8; color:var(--secondary); margin:0 0 24px; }
.era-theme { font:clamp(20px,2vw,29px)/1.7 var(--serif); margin:0; }
.era-theme[lang] { font-family:var(--english-serif); font-size:clamp(26px,3vw,44px); letter-spacing:-.02em; }
.era-copy { grid-column:7/-1; min-width:0; align-self:end; }
.era-copy > p:first-child { margin:0; max-width:33em; font-size:15px; line-height:2.15; }
.history-claim-sources { font-size:11px; line-height:1.9; color:var(--secondary); margin:24px 0 0; }
.history-claim-sources a { text-underline-offset:3px; }
.history-figure { min-width:0; margin:0; align-self:start; }
.history-main-image { grid-column:5/-1; }
.history-secondary-image { grid-column:2/6; }
.history-view { display:block; text-decoration:none; }
.history-view img { width:100%; height:auto; display:block; }
.history-view-label { display:block; text-align:right; margin-top:12px; font-size:11px; color:var(--secondary); text-decoration:underline; text-underline-offset:4px; }
.history-view:focus-visible { outline:2px solid var(--accent); outline-offset:7px; }
.history-figure figcaption { margin-top:22px; border-top:1px solid var(--line); padding-top:15px; }
.history-figure figcaption p { margin:0 0 7px; font-size:11px; line-height:1.9; overflow-wrap:anywhere; }
.history-figure figcaption .history-object-title { font-family:var(--serif); font-size:20px; color:var(--ink); margin-bottom:12px; }
.history-object-note,.history-image-credit { color:var(--secondary); }
.history-image-credit a { text-underline-offset:3px; }
.era-sources { grid-column:7/-1; min-width:0; }
.history-source-detail { border-top:1px solid var(--line); padding-top:18px; color:var(--secondary); font-size:12px; line-height:1.9; }
.history-source-detail summary { min-height:44px; padding:8px 0; cursor:pointer; color:var(--ink); }
.history-source-detail summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.history-source-detail p { margin:14px 0 20px; }
.history-source-detail ul { list-style:none; margin:0; padding:0; }
.history-source-detail li { margin-bottom:16px; }
.history-source-detail li > span { display:block; font-size:10px; margin-top:4px; }
.history-source-detail a { overflow-wrap:anywhere; text-underline-offset:3px; }
.era-early { padding-block:60px 100px; row-gap:80px; }
.era-early .era-heading { grid-column:1/-1; }
.era-early .era-english { font-size:clamp(90px,15vw,236px); letter-spacing:-.05em; }
.era-early h2 { font-size:clamp(30px,4vw,52px); margin:22px 0 16px; }
.era-early .era-period { margin-bottom:24px; }
.era-early .era-theme { max-width:14em; }
.era-early .era-copy { grid-column:6/12; }
.era-early .era-sources { grid-column:6/12; }
.era-tang .era-heading { grid-column:1/5; grid-row:1; }
.era-tang .era-copy { grid-column:1/5; grid-row:2; align-self:start; }
.era-tang .history-main-image { grid-column:6/-1; grid-row:1/3; padding-top:54px; }
.era-tang .era-sources { grid-column:1/5; grid-row:3; }
.era-song .history-main-image { grid-column:1/-1; }
.era-song .history-secondary-image { grid-column:2/5; }
.era-song .era-sources { grid-column:7/-1; align-self:end; }
.era-ming .era-heading { grid-column:1/6; grid-row:1; }
.era-ming .era-copy { grid-column:1/6; grid-row:2; align-self:start; }
.era-ming .history-main-image { grid-column:7/-1; grid-row:1/4; padding-top:24px; }
.history-portrait img { width:min(100%,420px); height:auto; aspect-ratio:1280/2986; margin:auto; }
.era-ming .history-secondary-image { grid-column:1/5; grid-row:3; }
.era-ming .era-sources { grid-column:1/6; grid-row:4; }
.era-qing .history-trade-1 { grid-column:1/7; }
.era-qing .history-trade-2 { grid-column:7/-1; margin-top:140px; }
.era-qing .history-trade-3 { grid-column:3/-1; }
.era-qing .era-sources { grid-column:5/-1; }
.era-modern .era-heading { grid-column:1/6; }
.era-modern h2 { font-size:clamp(72px,8vw,120px); }
.era-modern .modern-teashop { grid-column:3/-1; }
.history-subperiod { margin-bottom:30px; }
.history-subperiod p { margin:0 0 12px; font-size:11px; letter-spacing:.08em; color:var(--secondary); }
.history-subperiod h3 { font:400 clamp(21px,2.3vw,32px)/1.7 var(--serif); margin:0; }
.era-modern .modern-equipment { grid-column:7/12; margin-top:40px; }
.era-modern .era-sources { grid-column:1/6; grid-row:3; align-self:end; }
.era-contemporary { margin-bottom:0; }
.era-contemporary .era-heading { grid-column:1/7; }
.era-contemporary h2 { font-size:clamp(78px,10vw,150px); }
.era-contemporary .era-english { font-size:clamp(30px,3.8vw,58px); }
.era-contemporary .history-main-image { grid-column:1/-1; }
.era-contemporary .history-secondary-image { grid-column:2/7; }
.era-contemporary .era-sources { grid-column:8/-1; align-self:end; }
.history-closing { padding-block:clamp(120px,16vw,256px); display:grid; grid-template-columns:1fr 2fr; gap:40px; align-items:end; }
.history-closing > p:first-child { font:clamp(17px,2vw,27px)/1.5 var(--english-serif); letter-spacing:-.015em; margin:0; color:var(--secondary); }
.history-closing > p:last-child { margin:0; font:clamp(32px,3.8vw,58px)/1.9 var(--serif); max-width:13em; }
.history-end-preview { border-top:1px solid var(--line); padding-block:28px 48px; }
.history-end-preview > p { color:var(--secondary); font-size:11px; line-height:1.9; margin:0; }
.history-end-preview ul { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; padding:0; margin:32px 0; }
.history-end-preview li { display:grid; gap:12px; min-width:0; }
.history-end-preview li span:first-child { font:clamp(17px,2vw,28px)/1.4 var(--english-serif); letter-spacing:-.02em; }
.history-end-preview li span:last-child { font-size:13px; color:var(--secondary); }
.history-detail { color:var(--ink); background:var(--ivory); border:0; padding:28px; width:min(1280px,calc(100vw - 64px)); max-width:none; max-height:calc(100dvh - 48px); overflow:auto; }
.history-detail::backdrop { background:rgba(15,24,19,.72); }
.history-detail:not([open]) { display:none; }
.history-detail-header { display:flex; gap:20px; justify-content:space-between; align-items:center; padding-bottom:20px; }
.history-detail-header h2 { font:400 20px/1.5 var(--serif); margin:0; }
#history-detail-close { background:none; min-width:88px; min-height:44px; padding:8px 0; display:flex; align-items:center; justify-content:flex-end; gap:18px; font-size:12px; }
#history-detail-close span { font-size:24px; }
.history-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:28px; align-items:start; }
.history-detail-stage { min-width:0; display:flex; align-items:center; justify-content:center; min-height:240px; }
.history-detail-stage img { width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 180px); object-fit:contain; }
.history-detail-caption { min-width:0; }
.history-detail-caption p { font-size:12px; line-height:1.95; margin:0 0 16px; overflow-wrap:anywhere; }
.history-detail-caption .history-object-title { font:24px/1.7 var(--serif); }
.history-detail-caption .history-image-credit { font-size:10px; }
@media (min-width:768px) and (max-width:1023px) {
 .history-opening > div { grid-column:3/-1; }
 .history-intro { grid-column:5/-1; }
 .history-era { column-gap:20px; row-gap:40px; }
 .era-heading h2 { font-size:116px; }
 .era-early h2 { font-size:36px; }
 .era-modern h2 { font-size:76px; }
 .era-contemporary h2 { font-size:104px; }
 .era-copy > p:first-child { font-size:14px; }
 .era-tang .era-heading,.era-tang .era-copy,.era-tang .era-sources { grid-column:1/6; }
 .era-tang .history-main-image { grid-column:7/-1; }
 .era-qing .history-trade-2 { margin-top:90px; }
 .history-detail { width:calc(100vw - 40px); padding:20px; }
 .history-detail-layout { grid-template-columns:minmax(0,1fr) 220px; gap:20px; }
}
@media (max-width:767px) {
 .tea-history-section { padding-top:80px; }
 .history-opening { grid-template-columns:1fr; gap:30px; }
 .history-section-number,.history-opening > div,.history-intro { grid-column:1; }
 .history-section-number { font-size:80px; padding:0; }
 .history-kicker { font-size:10px; margin-bottom:18px; }
 .history-display { font-size:clamp(37px,9.6vw,54px); }
 .history-opening h2 { font-size:30px; margin-top:26px; }
 .history-intro { font-size:14px; }
 .history-guide-note { font-size:10px; margin-block:80px 28px; }
 .history-timeline { --history-indent:20px; }
 .history-era { display:flex; flex-direction:column; gap:36px; padding-block:24px 40px; margin-bottom:100px; }
 .history-era .era-heading { order:0; }
 .history-era .history-main-image { order:1; }
 .history-era .era-copy { order:2; }
 .history-era .history-secondary-image { order:3; }
 .history-era .era-sources { order:4; }
 .history-era > * { min-width:0; width:100%; }
 .era-english { font-size:36px; margin-bottom:16px; }
 .era-heading h2 { font-size:116px; margin-bottom:24px; }
 .era-period { font-size:11px; margin-bottom:20px; }
 .era-theme { font-size:23px; }
 .era-copy > p:first-child { font-size:14px; line-height:2.05; }
 .history-claim-sources { margin-top:20px; }
 .history-era .history-figure { padding:0; margin:0; }
 .history-figure figcaption { margin-top:18px; padding-top:14px; }
 .history-figure figcaption p { font-size:10px; }
 .history-figure figcaption .history-object-title { font-size:19px; }
 .history-view-label { font-size:10px; min-height:32px; padding-top:8px; margin-top:4px; }
 .era-early { padding-block:36px 60px; gap:44px; }
 .era-early .era-english { font-size:clamp(70px,20vw,96px); }
 .era-early h2 { font-size:32px; margin-top:24px; }
 .era-early .era-theme { font-size:25px; }
 .era-song .history-secondary-image { width:70%; margin:0 auto; }
 .history-portrait img { width:min(100%,291px); }
 .era-ming .history-secondary-image { width:86%; }
 .era-qing .history-trade-1,.era-qing .history-trade-2,.era-qing .history-trade-3 { order:1; }
 .era-qing .history-trade-2,.era-qing .history-trade-3 { margin-top:12px; }
 .era-modern h2 { font-size:76px; }
 .history-subperiod { margin-bottom:24px; }
 .history-subperiod h3 { font-size:23px; }
 .era-modern .modern-equipment { width:84%; align-self:center; }
 .era-contemporary h2 { font-size:104px; }
 .era-contemporary .era-english { font-size:clamp(25px,6.9vw,36px); }
 .era-contemporary .history-main-image { width:calc(100% + 20px); margin-left:-20px; }
 .era-contemporary .history-secondary-image { width:84%; }
 .history-closing { grid-template-columns:1fr; padding-block:100px; gap:32px; }
 .history-closing > p:first-child { font-size:20px; }
 .history-closing > p:last-child { font-size:32px; line-height:2; }
 .history-end-preview ul { grid-template-columns:1fr; gap:26px; }
 .history-end-preview li { grid-template-columns:1fr 86px; align-items:baseline; gap:16px; }
 .history-end-preview li span:first-child { font-size:21px; }
 .history-detail { position:fixed; inset:0; width:100%; height:100dvh; max-height:none; margin:0; padding:0 20px 32px; }
 .history-detail-header { position:sticky; top:0; z-index:1; padding-block:12px; background:var(--ivory); }
 .history-detail-header h2 { font-size:17px; }
 .history-detail-layout { grid-template-columns:1fr; gap:28px; }
 .history-detail-stage { min-height:0; }
 .history-detail-stage img { max-height:68dvh; }
 .history-detail-caption .history-object-title { font-size:23px; }
}
@media (prefers-reduced-motion:reduce) {
 .tea-history-section *, .tea-history-section *::before, .history-detail * { animation:none!important; transition:none!important; }

}

/* Chapter 04: ordinary-language navigation and three levels of exhibit information. */
html:has(.tea-history-section) {scroll-behavior:auto;}
.history-era-nav {display:flex;gap:8px;overflow-x:auto;padding:8px 0 20px;margin:0 0 28px;border-bottom:1px solid var(--line);scrollbar-width:thin;scrollbar-color:var(--accent) transparent;}
.history-era-nav a {display:inline-flex;flex:none;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border-bottom:2px solid transparent;font:16px/1.6 var(--serif);color:var(--secondary);}
.history-era-nav a:hover {color:var(--accent);}
.history-era-nav a[aria-current="location"] {border-color:var(--accent);color:var(--accent);background:rgba(51,79,61,.04);}
.tea-history-section .history-era-nav a:focus-visible {outline:2px solid var(--accent);outline-offset:-3px;}
.history-era:focus {outline:none;}
.era-motion {font:clamp(23px,2.4vw,36px)/1.4 var(--english);letter-spacing:-.02em;margin:0 0 16px;}
.era-copy > p:first-child {font-size:16px;line-height:2.1;color:var(--ink);}
.history-figure figcaption .history-object-meta {font-size:13px;color:var(--ink);}
.history-figure figcaption .history-object-catalogue {font-size:12px;color:var(--secondary);}
.history-figure figcaption .history-image-credit {font-size:11px;line-height:1.9;margin-top:14px;}
.history-source-detail {font-size:13px;}
.history-source-detail li > span {font-size:12px;}
.history-claim-sources {font-size:12px;}
.history-object-context {border-top:1px solid var(--line);margin:20px 0;padding-top:4px;}
.history-object-context > p {margin-bottom:12px;color:var(--ink);}
.history-object-context strong {font-weight:400;color:var(--ink);}
.history-detail-caption .history-object-meta {font-size:14px;}
.history-detail-caption .history-object-catalogue,.history-detail-caption .history-image-credit {font-size:12px;}
@media(max-width:767px){
 .history-era-nav {gap:4px;margin-bottom:12px;}
 .history-era-nav a {padding-inline:12px;font-size:15px;}
 .history-era .era-copy {order:1;}
 .history-era .history-main-image {order:2;}
 .era-qing .history-trade-1,.era-qing .history-trade-2,.era-qing .history-trade-3 {order:2;}
 .era-copy > p:first-child {font-size:16px;line-height:2.05;}
 .history-view-label {font-size:12px;min-height:44px;}
}