/* irobot-th-2026 · history · css เฉพาะหน้า · สร้างโดย content/theme-export/export_pages.py (30.09.2026) จาก irobot-web/history/preview.html — ห้ามแก้ด้วยมือ */
.hi-section { padding: clamp(48px, 7vw, 88px) 0; }
.hi-eyebrow {
    font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--brand-color-clover);

}
.hi-h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 600; line-height: 1.28; text-wrap: balance; }
.hi-p { font-size: 17px; line-height: 1.75; color: rgba(var(--brand-color-black-rgb), .78); max-width: 62ch; }
.hi-crumb { padding-top: 20px; padding-bottom: 8px; }
.hi-crumb ol { display: flex; flex-wrap: wrap; list-style: none; font-size: 14px; }
.hi-crumb li { display: flex; align-items: center; }
.hi-crumb li:not(:last-child)::after { content: "/"; margin: 0 8px; color: var(--brand-color-border); }
.hi-crumb a { color: var(--brand-color-gray); text-decoration: none; }
.hi-crumb a:hover { color: var(--brand-color-black); text-decoration: underline; }
.hi-crumb li[aria-current] { color: var(--brand-color-black); font-weight: 600; }
.hi-top {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 64px); align-items: center;
    padding: clamp(16px, 2.5vw, 28px) 0 clamp(40px, 6vw, 64px);

}
.hi-head { max-width: 76ch; }
.hi-head-media { display: flex; flex-direction: column; }
.hi-photo { display: contents; }
.hi-photo img {
    order: 1; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 40%;
    border-radius: var(--irb-radius-card);

}
.hi-photo-credit { order: 3; margin: 12px 4px 0; font-size: 12px; line-height: 1.5; color: var(--brand-color-gray); }
.hi-photo-credit a { color: var(--brand-color-gray); text-decoration: underline; text-underline-offset: 2px; }
.hi-photo-credit a:hover { color: var(--brand-color-black); }
.hi-quote {
    order: 2; position: relative; z-index: 1; margin: -56px 20px 0;
    padding: 20px 22px 18px; background: var(--brand-color-white); border-radius: 16px;
    border-left: 4px solid var(--brand-color-clover);
    box-shadow: 0 14px 34px rgba(var(--brand-color-hunter-rgb), .14);

}
.hi-quote blockquote { margin: 0; }
.hi-quote-main { font-size: 17px; font-weight: 600; line-height: 1.55; color: var(--brand-color-hunter); text-wrap: balance; }
.hi-quote-src { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--brand-color-gray); }
.hi-quote figcaption { margin-top: 10px; font-size: 13px; font-weight: 600; color: rgba(var(--brand-color-black-rgb), .72); }
.hi-head h1 { font-size: clamp(32px, 4.4vw, 50px); font-weight: 600; line-height: 1.16; text-wrap: balance; }
.hi-lead { margin-top: 14px; font-size: clamp(18px, 2vw, 21px); font-weight: 600; line-height: 1.5; color: var(--brand-color-hunter); text-wrap: balance; }
.hi-intro { margin-top: 16px; font-size: 17px; line-height: 1.8; color: rgba(var(--brand-color-black-rgb), .8); }
.hi-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hi-jump a {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px;
    border-radius: var(--irb-radius-pill); border: 1.5px solid rgba(var(--brand-color-black-rgb), .25);
    font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--brand-color-black); text-decoration: none;
    transition: border-color .15s ease, background .15s ease;

}
.hi-jump a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-color-clover); flex-shrink: 0; }
.hi-jump a:hover { border-color: var(--brand-color-black); background: var(--brand-color-sand); }
.hi-road-band { background: var(--brand-color-mint); overflow: hidden; scroll-margin-top: 16px; }
.hi-road-head { display: flex; flex-direction: column; gap: 10px; max-width: 60ch; margin-bottom: clamp(24px, 3vw, 40px); }
.hi-road-stage { position: relative; max-width: 1200px; margin: 0 auto; aspect-ratio: 1200 / 820; --hi-r: 10.67%; }
.hi-road-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: none; }
.hi-road-svg.is-wide { display: block; }
.hi-road-path { fill: none; stroke: var(--brand-color-hunter); stroke-linecap: round; stroke-linejoin: round; }
.hi-road-svg.is-wide .hi-road-path { stroke-width: 30; }
.hi-road-svg.is-mid .hi-road-path { stroke-width: 26; }
.hi-road-svg.is-narrow .hi-road-path { stroke-width: 22; }
.hi-stations { list-style: none; }
.hi-st {
    position: absolute; left: var(--wx); top: var(--wy); width: var(--hi-r); aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);

}
.hi-st img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 12px 14px rgba(var(--brand-color-hunter-rgb), .28)); }
.hi-st-label {
    position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    width: max-content; max-width: 190px;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 6px; row-gap: 2px;
    text-align: center; line-height: 1.3;

}
.hi-st-year { order: 0; font-size: 22px; font-weight: 700; color: var(--brand-color-black); font-variant-numeric: tabular-nums; }
.hi-st-chip {
    order: 1; padding: 3px 8px; border-radius: 6px; white-space: nowrap;
    background: var(--brand-color-periwinkle); color: var(--brand-color-white);
    font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: .02em;

}
.hi-st-name { order: 2; flex-basis: 100%; font-size: 15px; font-weight: 500; line-height: 1.3; color: rgba(var(--brand-color-black-rgb), .82); text-wrap: balance; }
.hi-st-more { order: 3; flex-basis: 100%; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--brand-color-hunter); text-decoration: underline; text-underline-offset: 3px; }
.hi-st-end a { position: relative; display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; }
.hi-st-disc {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%;
    background: var(--brand-color-clover); color: var(--brand-color-white);
    box-shadow: 0 12px 20px rgba(var(--brand-color-hunter-rgb), .25);
    transition: transform .2s ease;

}
.hi-st-disc svg { width: 44%; height: 44%; }
.hi-st-end a:hover .hi-st-disc { transform: scale(1.06); }
.hi-st-end a:hover .hi-st-more { text-decoration-thickness: 2px; }
.hi-st-end a:focus-visible { outline: 3px solid var(--brand-color-hunter); outline-offset: 6px; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
html.hi-js .hi-road-path {
      stroke-dasharray: 1 1.1;
      stroke-dashoffset: calc(1.05 - 1.05 * var(--hi-road-p, 1));
      transition: stroke-dashoffset .25s linear;

}
html.hi-js .hi-st { transition: opacity .55s ease, transform .55s ease; }
html.hi-js .hi-st:not(.is-in) { opacity: 0; transform: translate(-50%, -42%) scale(.94); }
}
.hi-ms-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: clamp(20px, 3vw, 28px); }
.hi-ms-index {
    position: sticky; top: 0; z-index: 5; padding: 10px 0;
    background: rgba(var(--brand-color-white-rgb), .94); backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(var(--brand-color-border-rgb), .35);

}
.hi-ms-index ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hi-ms-index-label { font-size: 14px; font-weight: 600; color: var(--brand-color-gray); margin-right: 6px; }
.hi-ms-index a {
    display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: var(--irb-radius-pill);
    background: var(--brand-color-sand); color: rgba(var(--brand-color-black-rgb), .82);
    font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none; white-space: nowrap;
    transition: background .15s ease, color .15s ease;

}
.hi-ms-index a:hover { background: rgba(var(--brand-color-mint-rgb), .8); color: var(--brand-color-hunter); }
.hi-decade {
    display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: clamp(24px, 4vw, 64px);
    padding: clamp(28px, 4vw, 44px) 0; border-top: 1px solid rgba(var(--brand-color-border-rgb), .35);
    scroll-margin-top: 64px;

}
.hi-decade:first-of-type { border-top: 0; }
.hi-decade-h { position: sticky; top: 68px; align-self: start; }
.hi-decade-h h3 { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; }
.hi-decade-word { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-color-gray); }
.hi-decade-num { font-size: clamp(34px, 3.4vw, 44px); font-weight: 700; color: var(--brand-color-hunter); font-variant-numeric: tabular-nums; }
.hi-years { list-style: none; }
.hi-year {
    display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px 20px; align-items: start;
    padding: 18px 0; border-top: 1px solid rgba(var(--brand-color-border-rgb), .22);
    scroll-margin-top: 72px;

}
.hi-year:first-child { border-top: 0; padding-top: 0; }
.hi-year h4 {
    display: flex; align-items: center; gap: 10px;
    font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--brand-color-hunter); font-variant-numeric: tabular-nums;

}
.hi-year-thumb { width: 34px; height: 34px; flex-shrink: 0; }
.hi-year-thumb img { width: 100%; height: 100%; display: block; }
.hi-events { list-style: none; display: flex; flex-direction: column; gap: 8px; max-width: 70ch; }
.hi-events li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.7; color: rgba(var(--brand-color-black-rgb), .84); }
.hi-events li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-color-clover); }
.hi-cta {
    position: relative; overflow: hidden; border-radius: var(--irb-radius-card);
    background: var(--brand-color-background-hunter); color: var(--brand-color-white);
    padding: clamp(36px, 5vw, 64px);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center;

}
.hi-cta-road { position: absolute; right: -6%; top: -30%; width: 58%; height: 160%; pointer-events: none; }
.hi-cta-road path { fill: none; stroke: var(--brand-color-hunter); stroke-width: 34; stroke-linecap: round; }
.hi-cta-copy { position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.hi-cta .hi-eyebrow { color: var(--brand-color-mint); }
.hi-cta h2 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 600; line-height: 1.22; text-wrap: balance; }
.hi-cta p { font-size: 17px; line-height: 1.65; color: rgba(var(--brand-color-white-rgb), .82); }
.hi-cta-btns { position: relative; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 999px) {
.hi-road-stage { max-width: 800px; aspect-ratio: 800 / 1058; --hi-r: 15.00%; }
.hi-road-svg.is-wide { display: none; }
.hi-road-svg.is-mid { display: block; }
.hi-st { left: var(--mx); top: var(--my); }
.hi-st-label { max-width: min(136px, 16.5vw); }
.hi-st-year { font-size: 20px; }
.hi-st-chip { font-size: 10px; padding: 2px 6px; }
.hi-st-name { font-size: 14px; }
.hi-st-more { font-size: 12px; }
}
@media (max-width: 860px) {
.hi-top { grid-template-columns: 1fr; gap: 24px; }
.hi-photo img { aspect-ratio: 16 / 10; object-position: 50% 20%; }
.hi-quote { margin: 14px 0 0; box-shadow: none; border: 1px solid rgba(var(--brand-color-border-rgb), .35); border-left: 4px solid var(--brand-color-clover); }
.hi-decade { grid-template-columns: 1fr; row-gap: 14px; }
.hi-decade-h { position: static; }
.hi-decade-h h3 { flex-direction: row; align-items: baseline; gap: 10px; }
.hi-year { grid-template-columns: 1fr; gap: 6px; }
.hi-cta { grid-template-columns: 1fr; }
.hi-cta-road { right: -20%; top: auto; bottom: -40%; width: 90%; height: 120%; }
}
@media (max-width: 560px) {
.hi-road-stage { max-width: none; aspect-ratio: 390 / 1069; --hi-r: 23.08%; }
.hi-road-svg.is-mid { display: none; }
.hi-road-svg.is-narrow { display: block; }
.hi-st { left: var(--nx); top: var(--ny); }
.hi-st-label { max-width: calc(26vw - 6px); column-gap: 5px; }
.hi-st.hi-st-end .hi-st-label { max-width: calc(32vw - 6px); }
.hi-st-more { white-space: nowrap; }
.hi-st-year { font-size: 18px; }
.hi-st-name { font-size: 13px; }
.hi-jump a { flex: 1 1 auto; justify-content: center; }
.hi-ms-index a { min-height: 34px; padding: 5px 12px; font-size: 13px; }
.hi-cta-btns .btn { width: 100%; }
}