/* Keep the original red/gold headers, portraits, timeline artwork and columns.
   Text is visible without JavaScript; scroll effects are progressive enhancement. */
[data-tcc-timeline] { padding-top: 0; }
[data-tcc-timeline] .tcc-timeline-nav {
    display: flex; justify-content: center; gap: 26px; flex-wrap: wrap;
    position: absolute; z-index: 1200; margin: 10px 20px 20px;
    font-family: PSLDisplay, sans-serif; font-size: 25px; line-height: 1.3;
}
/* Keep the original page spacing. Keyboard users can still reveal the period
   shortcuts by tabbing to them, without adding another visible heading row. */
[data-tcc-timeline] .tcc-timeline-nav:not(:focus-within) {
    width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}
[data-tcc-timeline] .tcc-timeline-nav:focus-within { background: #f8edcf; padding: 8px 16px; }
[data-tcc-timeline] .tcc-timeline-nav a,
[data-tcc-timeline] .tcc-timeline-nav a:visited { color: #713b18; border-bottom: 1px solid #bd9e2f; padding: 4px 0; }
[data-tcc-timeline] .tcc-timeline-nav a:hover,
[data-tcc-timeline] .tcc-timeline-nav a:focus { color: #981b1e; }
[data-tcc-timeline] .items-history .year,
[data-tcc-timeline] .items-history .details { display: block; opacity: 1; }
/* The red box-title already contains each period heading. The original active
   layout leaves these repeated artwork captions hidden. Make that deliberate. */
[data-tcc-timeline] #grownup-box #grownup-topic,
[data-tcc-timeline] #proliferate-box #proliferate-topic,
[data-tcc-timeline] #startup-box #startup-topic { display: none; }
[data-tcc-timeline] .items-history .year,
[data-tcc-timeline] .items-history .details { line-height: inherit; }
[data-tcc-timeline] .items-history .details p { margin: 0; padding: 3px; }
[data-tcc-timeline] [id^="timeline-event-"],
[data-tcc-timeline] #timeline-legacy-2530,
[data-tcc-timeline] #grownup-box,
[data-tcc-timeline] #proliferate-box,
[data-tcc-timeline] #startup-box { scroll-margin-top: 145px; }
[data-tcc-timeline] [id^="timeline-event-"]:target,
[data-tcc-timeline] #timeline-legacy-2530:target { background: #f8edcf; outline: 2px solid #bd9e2f; outline-offset: 4px; }
/* Match the original ancestor IDs: ui.css uses two-ID selectors for some
   artwork. We must win after the short Web Animation has finished, too. */
[data-tcc-timeline] #grownup-box #grownup-img-transition1 { opacity: 1; transform: none; -webkit-transform: none; }
[data-tcc-timeline] #proliferate-box .img-transition { pointer-events: none; }
[data-tcc-timeline] #proliferate-box #proliferate-ceo,
[data-tcc-timeline] #proliferate-box #proliferate-goldline-1,
[data-tcc-timeline] #proliferate-box #proliferate-goldline-2 { opacity: 1; }
[data-tcc-timeline] #startup-box #startup-img-trasition,
[data-tcc-timeline] #startup-box #startup-goldline { opacity: 1; }
/* Thai keeps every authored position and dimension from ui.css. English uses
   the same artwork and columns, with room for translated text to wrap. */
html[lang="en"] [data-tcc-timeline] .items-history {
    position: relative; top: auto; left: auto; float: none; margin: 0;
    width: 300px; align-self: start;
}
html[lang="en"] [data-tcc-timeline] #grownup-box { height: auto; min-height: 600px; }
html[lang="en"] [data-tcc-timeline] #grownup-box .contents-box {
    display: grid; grid-template-columns: 520px 380px 300px; gap: 30px 0;
    width: 1200px; padding-top: 72px;
}
html[lang="en"] [data-tcc-timeline] #grownup-box .potion2,
html[lang="en"] [data-tcc-timeline] #grownup-box .potion4,
html[lang="en"] [data-tcc-timeline] #grownup-box .potion6,
html[lang="en"] [data-tcc-timeline] #grownup-box .potion8,
html[lang="en"] [data-tcc-timeline] #grownup-box .potion10 { margin-top: 30px; }
html[lang="en"] [data-tcc-timeline] #grownup-box .potion5 { left: -30px; }
html[lang="en"] [data-tcc-timeline] #grownup-box .potion6 { left: -20px; }
html[lang="en"] [data-tcc-timeline] #grownup-box .potion7 { left: -100px; }
html[lang="en"] [data-tcc-timeline] #grownup-box .potion8 { left: -120px; }
html[lang="en"] [data-tcc-timeline] #grownup-box .potion9 { left: -220px; }
html[lang="en"] [data-tcc-timeline] #grownup-box .potion10 { left: -200px; }
html[lang="en"] [data-tcc-timeline] #proliferate-box { height: auto; min-height: 700px; }
html[lang="en"] [data-tcc-timeline] #proliferate-box .contents-box {
    display: grid; grid-template-columns: 330px 330px; gap: 30px 0;
    height: auto; min-height: 570px;
}
html[lang="en"] [data-tcc-timeline] #startup-box { height: auto; }
html[lang="en"] [data-tcc-timeline] #startup-box .bottom-section {
    display: grid; grid-template-columns: repeat(4, 240px); gap: 38px 30px;
    height: auto; padding-top: 50px; padding-bottom: 50px;
}
html[lang="en"] [data-tcc-timeline] #startup-box .bottom-section .items-history { width: 240px; }
html[lang="en"] [data-tcc-timeline] #startup-box #startup-items-pt5 { width: 450px; grid-column: 1 / 3 !important; }
@media (prefers-reduced-motion: reduce) {
    [data-tcc-timeline] *, [data-tcc-timeline] *::before, [data-tcc-timeline] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}