/* Round 3 shared: the banner-mock's fonts, river, years, and milestone layout.
   Both designs use everything here; only .scene image presentation differs per design. */
::selection{background:var(--brand);color:#fff}
html{scrollbar-color:var(--brand) var(--stripe)}

/* Page head: centered serif, as in the mock */
.history-title{display:block;text-align:center;padding-block:80px 10px}
.history-title h1{margin:0;font:600 clamp(34px,5vw,56px)/1.3 var(--mincho);color:var(--anchor)}
.head-sub{margin:4px 0 0;color:var(--muted);letter-spacing:.2em;font-size:13px}
html[data-lang="en"] .head-sub{display:none}
.jump-today{display:inline-flex;gap:12px;align-items:center;min-height:44px;margin-top:2px;font-size:13px;letter-spacing:.08em;text-decoration:none;color:var(--brand);white-space:nowrap}

.journey{position:relative;isolation:isolate}
.river{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:visible}
.river path{fill:none;stroke-width:4;stroke-linecap:round}
.river-base{stroke:#E3E8ED}
.river-live{stroke:var(--brand)}

/* Milestones alternate around the central route, as in the mock */
.milestones{margin:0;padding:0;list-style:none}
.milestone{position:relative}
.milestone-copy{position:relative;width:min(100% - 48px,1100px);margin:0 auto;padding:50px 0;display:grid;grid-template-columns:1fr 1fr;gap:0 120px}
.milestone-copy .date,.milestone-copy .milestone-text{grid-column:1;text-align:right;justify-self:end}
.milestone:nth-child(even) .milestone-copy .date,.milestone:nth-child(even) .milestone-copy .milestone-text{grid-column:2;text-align:left;justify-self:start}
.date{font:800 clamp(52px,7vw,92px)/1 var(--mincho);margin:0;color:transparent;-webkit-text-stroke:1.5px var(--brand);transition:color .6s ease;font-feature-settings:"palt"}
.milestone.is-past .date{color:var(--brand)}
.date time{display:block}
.year-range{display:inline-block;font-size:.52em}
.now-label{display:block;margin-top:12px;color:var(--brand);-webkit-text-stroke:0;font:700 14px/1.5 var(--sans);letter-spacing:0}
.milestone-text{margin:12px 0 0;max-width:420px;background:var(--surface);font-size:16px;line-height:1.8;text-wrap:pretty}
html[data-lang="en"] .milestone-text{line-height:1.7}
.subperiod{display:block;margin-top:10px}

/* Route dots: white with a brand ring, gold once passed */
.route-node{position:absolute;display:block;width:14px;height:14px;background:#fff;border:2px solid var(--brand);border-radius:50%;z-index:2;transform:translate(-50%,-50%);transition:background .3s,border-color .3s}
.is-past .route-node{background:var(--accent);border-color:var(--accent)}
.milestone-copy .route-node{left:calc(50% + 24px);top:50%}
.milestone:nth-child(even) .milestone-copy .route-node{left:calc(50% - 24px)}

/* Origin: centered island with the pulsing office dot, then the founding year */
.milestone.origin .milestone-copy{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 0 44px}
.origin-place{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted);font-size:12px;letter-spacing:.25em}
.origin-place svg{width:clamp(90px,10vw,130px);height:auto;display:block;overflow:visible}
.origin-place .coast{fill:var(--brand)}
.origin-place .pin{fill:var(--accent);r:16}
.origin-place .ping{fill:none;stroke:var(--accent);stroke-width:6;r:22;transform-box:fill-box;transform-origin:center;animation:ping 2.4s ease-out infinite}
@keyframes ping{from{transform:scale(.4);opacity:1}to{transform:scale(2.2);opacity:0}}
.origin .date{margin-top:18px;color:var(--brand);-webkit-text-stroke:0;font-size:clamp(64px,9vw,110px);text-align:center;justify-self:auto}
.origin .milestone-text{text-align:center;justify-self:auto;max-width:620px;font-size:18px;text-wrap:balance}
.milestone.origin .milestone-copy .route-node{left:50%;top:auto;bottom:20px}

/* 2026: a centered arrival */
.milestone.today .milestone-copy{display:flex;flex-direction:column;align-items:center;text-align:center}
.today .date{background:var(--surface);padding-inline:20px;text-align:center;justify-self:auto}
.today .milestone-text{text-align:center;justify-self:auto;max-width:620px}
.today .milestone-copy .route-node{left:50%;top:6px}

/* Photographs: full 2:3 composition, division artwork top right */
.scene{position:relative;margin:0}
.photo-frame{position:relative;isolation:isolate}
.scene-image{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:contain}
.division-logo{position:absolute;z-index:2;right:24px;top:24px;width:clamp(144px,27%,200px);height:auto;max-height:none;object-fit:contain;border-radius:0}
.geography-title{position:absolute;left:6%;top:5%;color:#fff;font:500 clamp(26px,4vw,40px)/1.15 var(--mincho);letter-spacing:.01em}
/* Approximate Taipei basin on this conceptual terrain image, not an office pin. */
.geography-city{position:absolute;left:66%;top:14%;display:flex;align-items:center;gap:7px;transform:translate(-6px,-50%);color:var(--brand);background:#fff;padding:5px 9px 5px 5px;font:700 12.5px/1.4 var(--sans);white-space:nowrap}
.geography-dot{width:10px;height:10px;flex:none;border-radius:50%;background:var(--brand)}

/* Concept label: the mock's small bordered chip, with the disclosure beside it */
.concept-caption{position:relative;font:400 11px/1.9 var(--sans);color:#C9D6E4;letter-spacing:.02em}
.concept-caption > .t-ja,.concept-caption > .t-en{border:1px solid rgba(255,255,255,.5);padding:1px 8px;border-radius:3px;white-space:nowrap}
.concept-detail{opacity:.85;margin-left:14px}

.today-divisions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:center;max-width:900px;margin:48px auto 0;padding:24px;background:var(--surface)}
.today-divisions img{display:block;width:100%;height:auto;object-fit:contain}
.journey-end{height:120px;position:relative}
.journey-end .route-node{left:50%;top:70px;width:16px;height:16px;background:var(--brand)}

@media(max-width:720px){
  .history-title{padding-block:48px 6px}
  .milestone-copy{display:block;width:auto;margin:0 24px 0 0;padding:34px 0 34px 64px}
  .milestone-copy .date,.milestone-copy .milestone-text,.milestone:nth-child(even) .milestone-copy .date,.milestone:nth-child(even) .milestone-copy .milestone-text{text-align:left;justify-self:auto}
  .date{font-size:52px}
  .milestone-text{font-size:15px;max-width:none}
  .milestone-copy .route-node,.milestone:nth-child(even) .milestone-copy .route-node{left:24px;top:60px}
  .milestone.origin .milestone-copy{display:flex;margin:0 24px;padding:16px 0 44px;align-items:center;text-align:center}
  .origin .date{font-size:72px}
  .origin .milestone-text{font-size:16px}
  .milestone.origin .milestone-copy .route-node{left:50%;top:auto;bottom:14px}
  .milestone.today .milestone-copy{display:flex;align-items:center;text-align:center}
  .today .milestone-copy .route-node{left:50%;top:6px}
  .division-logo{right:16px;top:16px;width:144px;max-width:45%}
  .today-divisions{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:16px}
  .journey-end .route-node{left:50%}
}
/* The inherited shell needs slightly more room for both language buttons on phones. */
@media(max-width:440px){
  .header-row{column-gap:10px}
  .logo img{width:clamp(100px,33vw,145px)}
  .lang-switch{gap:2px;padding:3px}
  .lang-switch button{padding-inline:7px;gap:5px;font-size:12.5px}
  .nav{column-gap:0;margin-left:-4px;flex-wrap:nowrap}
  .nav a,.nav button{font-size:12.5px;padding-inline:4px;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  .river-live{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .date,.route-node{transition:none}
  .origin-place .ping{animation:none;display:none}
}