:root {
      --brand: #EF7D00;
      --text: #1f2937;
      --muted: #6b7280;
      --container: 1200px;
      --header-h: 72px;
    }
    main{
       background: linear-gradient( 180deg, #F1F5F9 0%, #FFFFFF 100%), #FFFFFF;
    }
    /* 让主体不被固定导航覆盖 */
    .with-header-offset {
      padding-top: calc(var(--header-h) + 16px);
    }

    /* 通用容器和区块 */
    .container {
      width: min(var(--container), 92vw);
      margin-inline: auto;
    }

    .section {
      padding: clamp(36px, 7vw, 72px) 0;
    }

    /* 顶部大图（握手背景） */
    .about-hero {
      position: relative;
      min-height: 560px;
      background: url('./img/Mask\ group@2x.png') center/cover no-repeat;
      display: flex;
      align-items: center;
    }

    .about-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .35));
    }

    .about-hero .hero-inner {
      position: relative;
      z-index: 1;
    }

    .about-hero h1 {
      color: #fff;
      font-weight: 800;
      font-size: clamp(32px, 6vw, 56px);
      letter-spacing: .02em;
      text-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    }

    /* 标题与下划线 */
    .about-intro h2,
    .history h3 {
      text-align: center;
      color: var(--text);
      font-weight: 800;
      font-size: clamp(24px, 4vw, 36px);
    }

    .title-underline {
      width: 56px;
      height: 4px;
      background: var(--brand);
      border-radius: 999px;
      margin: 12px auto 28px;
    }

    /* 简介段落 */
    .about-intro p {
      color: #374151;
      line-height: 1.9;
      text-align: center;
      font-size: clamp(14px, 1.9vw, 16px);
    }

    /* 时间轴 */
    .timeline {
      position: relative;
      margin-top: 24px;
      padding-top: 0;
      /* spacing is handled by li */
      --line-y: 48px;
      /* vertical center for both the line and dots */
    }

    .timeline::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: var(--line-y);
      height: 0;
      /* use border to avoid anti-alias blur */
      border-top: 2px solid #d1d5db;
      z-index: 0;
      /* stay behind dots */
      pointer-events: none;
    }

    /* Timeline end arrows */
    .timeline .tl-arrow{
      position:absolute;
      top: var(--line-y);
      width:12px; height:12px;
      border-top: 2px solid #d1d5db;
      border-right: 2px solid #d1d5db;
      background: transparent;
      z-index: 3; /* above line, below dots */
      pointer-events: none;
    }
    .timeline .tl-left{
      left: 0;  /* at the start of the line */
      transform: translate(-50%, -50%) rotate(-135deg);
    }
    .timeline .tl-right{
      right: 0; /* at the end of the line */
      transform: translate(50%, -50%) rotate(45deg);
    }

    .timeline ul {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start; /* was space-between -> causes no overflow */
      align-items: flex-start;
      margin: 0;
      padding: 0 16px; /* give some side breathing space so overflow is visible */
      list-style: none;
      gap: clamp(24px, 6vw, 64px); /* consistent spacing between items */
      overflow-x: auto;               /* enable horizontal scroll */
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      /* scrollbar-color: #d1d5db transparent;  Removed since scrollbar is hidden */
      width: 100%;
      max-width: 100%;
      touch-action: pan-x;
      overscroll-behavior-x: contain;
    }
    .timeline ul::-webkit-scrollbar{ display:none; }
    .timeline ul::-webkit-scrollbar-track{ background:transparent; }
    .timeline ul::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:999px; }

    .timeline ul.dragging, .timeline ul.dragging *{ user-select:none; cursor:grabbing; }

    /* Make arrows clickable on desktop */
    .timeline .tl-arrow{ pointer-events:auto; cursor:pointer; }
    .timeline:not(.has-overflow) .tl-arrow{ display:none; }

    .timeline li {
      position: relative;
      flex: 0 0 auto;              /* do not stretch; allow overflow */
      min-width: 160px;            /* base width per item */
      text-align: center;
      padding-top: calc(var(--line-y) + 16px);
      scroll-snap-align: center;   /* snap per item */
    }

    .timeline .year {
      font-size: 16px;
      line-height: 1;
      /* consistent metrics */
      color: #111827;
      font-weight: 600;
      margin: 0 0 16px;
      /* fixed margin under the year */
    }

    .timeline .dot {
      position: absolute;
      left: 50%;
      top: calc(var(--line-y) - 7px);
      transform: translateX(-50%);
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 3px solid #fff;
      background: #d1d5db;
      box-shadow: 0 0 0 3px #d1d5db;
      z-index: 2;
    }

    .timeline li.active .dot {
      background: var(--brand);
      box-shadow: 0 0 0 4px rgba(239,125,0,.35);
      transform: translateX(-50%) scale(1.25);
    }

    .timeline li .muted {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 10px;
      background: transparent;
      border: 2px solid transparent;
      transition: all .2s ease;
    }
    .timeline li.active .muted {
      color: var(--brand);
      background: #fff;
    }

    .timeline .muted {
      margin-top: 12px;
      color: var(--muted);
      font-size: 13px;
    }

    .timeline li.active .year{
      color:#111;
      font-weight:700;
    }

    /* 历史卡片 */
    .history-card {
      margin-top: 28px;
      background: #EBEBEB;
      padding: clamp(16px, 3vw, 28px);
      border-radius: 10px;
      display: grid;
      grid-template-columns: 380px 1fr;
      gap: clamp(16px, 3vw, 28px);
      align-items: center;
      position: relative;
    }
    .history-card{ transition: opacity .18s ease; }

    .history-card img{
      width:100%;
      height:240px;
      object-fit:cover;
      border-radius:0;
      box-shadow:none;
      display:block;
    }

    .history-card h4 {
      margin: 0 0 8px;
      color: var(--brand);
      font-weight: 700;
      font-size: 18px;
    }

    .history-card p {
      color: #4b5563;
      line-height: 1.8;
      margin-top: 10px;
    }

    .year-watermark {
      position: absolute;
      right: 18px;
      bottom: 16px;
      font-size: clamp(40px, 9vw, 64px);
      color: rgba(0, 0, 0, .08);
      font-weight: 800;
      pointer-events: none;
      user-select: none;
    }

    /* 自适应 */
    @media (max-width: 768px) {
      .history-card {
        grid-template-columns: 1fr;
      }

      .history-card img {
        height: 180px;
      }

      .timeline ul {
        justify-content: flex-start; /* keep items left-aligned so it can scroll */
        flex-wrap: nowrap;
        gap: 20px;
        padding: 0 8px;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
      }

      .timeline li { min-width: 120px; }
      .timeline .tl-arrow{ display: none; }
    }

    /* === Mobile/Tablet responsive tweaks === */
    @media (max-width: 1024px){
      :root{ --header-h: 64px; }
      .container{ width:min(var(--container), 94vw); }
      .about-hero{ min-height: 440px; }
      .history-card{ grid-template-columns: 1fr; }
      .history-card img{ height: 200px; }
    }

    @media (max-width: 768px){
      :root{ --header-h: 60px; }
      .with-header-offset{ padding-top: calc(var(--header-h) + 12px); }
      .container{ width:min(var(--container), 94vw); }

      /* Hero */
      .about-hero{ min-height: 380px; }
      .about-hero h1{ font-size: clamp(28px, 7vw, 36px); }

      /* About paragraph */
      .about-intro p{ font-size: 14px; line-height: 1.85; padding: 0 6px; }

      /* Timeline: tighter geometry & touch scroll if overflow */
      .timeline{ --line-y: 40px; }
      .timeline ul{ overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 8px; gap: 20px; touch-action: pan-x; overscroll-behavior-x: contain; }
      .timeline li{ min-width: 120px; padding-top: calc(var(--line-y) + 14px); }
      .timeline .year{ font-size: 15px; }
      .timeline .muted{ margin-top: 10px; font-size: 12px; }
      /* Hide end arrows on small screens to avoid overlap */
      .timeline .tl-arrow{ display: none; }

      /* History card */
      .history-card{ padding: 16px; gap: 14px; }
      .history-card img{ height: 180px; }
      .history-card h4{ font-size: 16px; }
      .history-card p{ font-size: 14px; line-height: 1.7; }
      .year-watermark{ right: 12px; bottom: 10px; font-size: clamp(32px, 12vw, 44px); }
    }

    @media (max-width: 480px){
      :root{ --header-h: 56px; }
      .about-hero{ min-height: 340px; }
      .about-hero h1{ font-size: clamp(24px, 8vw, 32px); }
      .timeline{ --line-y: 36px; }
      .timeline li{ min-width: 80px; }
      .history-card img{ height: 160px; }
    }