/* Our Story: shared site styles, with layouts for the history and group. */
.story-links { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:34px; }
.story-links .btn { margin:0; }
.story-intro { max-width:980px; margin:0 auto; gap:64px; }
.story-intro h3 { font-size:1.5rem; color:var(--white); margin-bottom:18px; }
.story-intro p { color:var(--grey); }
.story-timeline { list-style:none; }
.story-timeline .t-item { grid-template-columns:170px minmax(0,1fr); }
.story-timeline .year { color:var(--accent); }
.story-timeline .t-item-avatar .year { grid-row:auto; }
.story-timeline .t-item[id] { scroll-margin-top:140px; }
.timeline-milestone { display:grid; grid-template-columns:minmax(0,1fr) 160px; align-items:start; gap:28px; }
.timeline-avatar { margin:0; }
.timeline-avatar img { display:block; width:160px; height:200px; object-fit:cover; object-position:center top; border-radius:18px; border:1px solid var(--stroke-2); }
.timeline-avatar-original img { height:160px; object-fit:contain; padding:10px; background:var(--card); }
.timeline-avatar figcaption { margin-top:12px; color:var(--grey); font-size:.78rem; line-height:1.5; }
.story-origin { display:flex; align-items:center; gap:26px; max-width:980px; margin:48px auto 0; padding:32px; border:1px solid var(--stroke-2); border-radius:var(--radius); background:var(--card); }
.story-origin img { width:64px; height:64px; object-fit:contain; flex-shrink:0; }
.story-origin h3 { font-size:1.35rem; color:var(--white); margin-bottom:10px; }
.story-origin p { color:var(--grey); margin-bottom:8px; }
.company-table-wrap { position:relative; z-index:2; }
.company-table { width:100%; border-collapse:collapse; text-align:left; font-size:.98rem; }
.company-table caption { text-align:left; font-size:1.2rem; color:var(--white); margin-bottom:24px; }
.company-table th, .company-table td { padding:26px 24px; vertical-align:top; border-bottom:1px solid var(--stroke-2); }
.company-table thead th { background:var(--card); color:var(--grey); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
.company-table thead th:first-child { width:39%; border-radius:16px 0 0 0; }
.company-table thead th:last-child { width:24%; border-radius:0 16px 0 0; }
.company-table tbody th { color:var(--white); font-weight:500; line-height:1.5; }
.company-table tbody td { color:var(--grey); }
.company-year { display:block; margin-top:9px; font-size:.8rem; color:var(--accent); font-weight:400; }
.group-platforms { position:relative; z-index:2; max-width:760px; margin:56px auto 0; text-align:center; }
.group-platforms h3 { font-size:1.6rem; margin-bottom:18px; color:var(--white); }
.group-platforms p { color:var(--grey); margin-bottom:24px; }
.story-links a:focus-visible, .company-table-wrap a:focus-visible, .story-origin a:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
@media (max-width:680px) {
  .story-intro { gap:32px; }
  .story-timeline .t-item { grid-template-columns:1fr; }
  .timeline-milestone { grid-template-columns:1fr; gap:24px; }
  .timeline-avatar { max-width:200px; }
  .story-origin { align-items:flex-start; gap:18px; padding:24px; }
  .story-origin img { width:48px; height:48px; }
  .company-table, .company-table tbody { display:block; }
  .company-table thead { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .company-table caption { display:block; }
  .company-table tr { display:block; padding:24px; margin-bottom:16px; border:1px solid var(--stroke-2); border-radius:18px; background:var(--card); }
  .company-table tbody th, .company-table td { display:block; width:100%; padding:0; border:0; }
  .company-table tbody th { font-size:1.15rem; }
  .company-table td { margin-top:20px; }
  .company-table td::before { content:attr(data-label); display:block; font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; color:var(--grey-2); }
}