.gcs-tl {
  --gcs-primary: #0C1929;
  --gcs-secondary: #B8893A;
  --gcs-muted: #6B7280;
  --gcs-border: #E8EAEE;
  --gcs-bg: #ffffff;
  --ease: cubic-bezier(.22,.61,.36,1);
  color: var(--gcs-primary);
}
.gcs-tl * { box-sizing: border-box; }
.gcs-tl-head { margin: 0 0 4px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.gcs-tl-sub { margin: 0 0 36px; color: var(--gcs-muted); font-size: 15px; }
.gcs-tl .gcs-timeline { display: grid; grid-template-columns: 190px 1fr; gap: 44px; align-items: start; }
.gcs-tl .gcs-tl-rail { display: flex; flex-direction: column; position: relative; max-height: 640px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; background: none !important; padding: 4px 4px 4px 8px !important; margin: 0 !important; list-style: none !important; }
.gcs-tl-rail::-webkit-scrollbar { width: 4px; }
.gcs-tl-rail::-webkit-scrollbar-thumb { background: var(--gcs-border); border-radius: 4px; }
.gcs-tl-spine { position: absolute; left: 43px; top: 0; width: 2px; height: 100%; z-index: 0; pointer-events: none; }
.gcs-tl-spine line { stroke: var(--gcs-border); stroke-width: 2; }
.gcs-tl-spine .draw { stroke: var(--gcs-secondary); stroke-width: 2; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: gcsDraw 1.1s var(--ease) .2s forwards; }
@keyframes gcsDraw { to { stroke-dashoffset: 0; } }

.gcs-tl .gcs-tl-year { position: relative; background: none !important; background-color: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; text-align: left; display: flex; align-items: center; gap: 16px; padding: 10px 6px 10px 0 !important; margin: 0 !important; min-height: 86px; height: auto !important; width: 100% !important; max-width: none !important; cursor: pointer; font-family: inherit; text-transform: none; letter-spacing: normal; line-height: normal; opacity: 0; transform: translateX(-8px); animation: gcsNodeIn .5s var(--ease) forwards; }
.gcs-tl .gcs-tl-year:hover, .gcs-tl .gcs-tl-year:focus, .gcs-tl .gcs-tl-year:active { background: none !important; background-color: transparent !important; box-shadow: none !important; outline: none; }
@keyframes gcsNodeIn { to { opacity: 1; transform: none; } }
.gcs-tl .gcs-tl-node { position: relative; z-index: 1; flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; background: var(--gcs-bg); border: 2px solid var(--gcs-border); display: flex; align-items: center; justify-content: center; transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.gcs-tl .gcs-tl-node .y { font-size: 20px !important; font-weight: 700; color: var(--gcs-primary); letter-spacing: -.01em; transition: color .3s var(--ease); }
.gcs-tl .gcs-tl-labelwrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; }
.gcs-tl .gcs-tl-month { font-size: 11px !important; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gcs-secondary) !important; }
.gcs-tl .gcs-tl-label { font-size: 13px !important; font-weight: 500; color: var(--gcs-muted) !important; line-height: 1.3; transition: color .2s var(--ease); white-space: normal; overflow-wrap: anywhere; }
.gcs-tl .gcs-tl-year:hover .gcs-tl-node { border-color: var(--gcs-secondary); transform: scale(1.05); }
.gcs-tl .gcs-tl-year:hover .gcs-tl-label { color: var(--gcs-primary) !important; }
.gcs-tl .gcs-tl-year.is-active .gcs-tl-node { background: var(--gcs-secondary); border-color: var(--gcs-secondary); box-shadow: 0 0 0 6px rgba(184,137,58,.15); transform: scale(1.05); }
.gcs-tl .gcs-tl-year.is-active .gcs-tl-node .y { color: #fff; }
.gcs-tl .gcs-tl-year.is-active .gcs-tl-label { color: var(--gcs-primary) !important; font-weight: 600; }

/* Right panel: full-bleed hero */
.gcs-tl-panel { position: relative; }
.gcs-tl-entry { display: none; }
.gcs-tl-entry.is-active { display: block; }
.gcs-tl-hero { position: relative; border-radius: 18px; overflow: hidden; min-height: 460px; display: flex; align-items: flex-end; box-shadow: 0 12px 40px rgba(12,25,41,.18); background: #0f1b2d; }
.gcs-tl-hero-media { position: absolute; inset: 0; z-index: 0; }
.gcs-tl-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.is-active .gcs-tl-hero-img { animation: gcsKen 12s ease-out both; }
@keyframes gcsKen { from { transform: scale(1.12); } to { transform: scale(1); } }
/* strong bottom scrim: fully opaque under text, fading up through mid, clear at top */
.gcs-tl-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(9,17,30,.96) 0%, rgba(9,17,30,.9) 22%, rgba(9,17,30,.55) 45%, rgba(9,17,30,.12) 70%, rgba(9,17,30,0) 100%); }
.gcs-tl-ghost { position: absolute; top: 8px; right: 22px; z-index: 1; font-size: 150px; font-weight: 800; letter-spacing: -.04em; color: rgba(255,255,255,.1); line-height: 1; user-select: none; pointer-events: none; }
.is-active .gcs-tl-ghost { animation: gcsGhost .8s var(--ease) both; }
@keyframes gcsGhost { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.gcs-tl-content { position: relative; z-index: 2; padding: 40px; color: #fff; width: 100%; }
.is-active .gcs-tl-date { animation: gcsUp .5s var(--ease) .15s both; }
.is-active .gcs-tl-title { animation: gcsUp .5s var(--ease) .24s both; }
.is-active .gcs-tl-desc  { animation: gcsUp .5s var(--ease) .34s both; }
.is-active .gcs-tl-meta  { animation: gcsUp .5s var(--ease) .44s both; }
@keyframes gcsUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.gcs-tl-date { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--gcs-secondary); padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; }
.gcs-tl .gcs-tl-title { margin: 0 0 12px; font-size: 28px; font-weight: 800; line-height: 1.22; letter-spacing: -.02em; color: #B8893A !important; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.gcs-tl-desc { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.92); max-width: 94%; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.gcs-tl-meta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.gcs-tl-meta span { font-size: 13px; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); padding: 7px 13px; border-radius: 8px; backdrop-filter: blur(3px); }
.gcs-tl-meta span strong { color: var(--gcs-secondary); font-weight: 700; }
.gcs-tl-empty { color: var(--gcs-muted); padding: 1.5rem 0; }

@media (max-width: 900px) {
  .gcs-tl .gcs-timeline { grid-template-columns: 1fr !important; gap: 22px; }
  .gcs-tl .gcs-tl-spine { display: none; }
  .gcs-tl .gcs-tl-rail { flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; padding: 4px 4px 12px !important; gap: 0 !important; position: relative; }
  .gcs-tl .gcs-tl-year { flex-direction: column; min-height: 0; gap: 10px; padding: 6px 22px 12px !important; width: auto !important; flex-shrink: 0; align-items: center; position: relative; z-index: 1; }
  /* connector segment: line from this node's centre to the next node's centre */
  .gcs-tl .gcs-tl-year::after {
    content: ''; position: absolute; z-index: 0; top: 46px; height: 2px;
    background: var(--gcs-border); left: 50%; width: 100%;
  }
  .gcs-tl .gcs-tl-year:last-child::after { display: none; }
  .gcs-tl .gcs-tl-labelwrap { align-items: center; }
  .gcs-tl .gcs-tl-label { text-align: center; white-space: nowrap; font-size: 12px !important; }
  .gcs-tl-hero { min-height: 420px; }
  .gcs-tl-ghost { font-size: 88px; top: 4px; right: 16px; }
  .gcs-tl-title { font-size: 22px; }
  .gcs-tl-desc { max-width: 100%; font-size: 15px; }
  .gcs-tl-content { padding: 26px 22px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .gcs-tl-year, .gcs-tl-spine .draw, .is-active * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .gcs-tl-spine .draw { stroke-dashoffset: 0 !important; }
}