/* =========================================================
   DESIGN SYSTEM — Orchestration / GAFA 2026
   One job per tool: Georgia (serif) for display headlines only.
   Helvetica (sans) for everything else — nav, labels, body, CN text.
   No monospace anywhere. Two container widths. One radius. One accent.
   Spacing on an 8px rhythm: 8 / 16 / 24 / 32 / 48 / 64 / 96.
   ========================================================= */

:root{
  --ink:#111111;
  --dim:#5f5f5f;
  --line:#e6e6e6;
  --bg-soft:#fafafa;
  --lime:#d7f24a;
  --lime-deep:#7c9a00;
  --sans:'Helvetica Neue',Arial,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --radius:10px;
  --measure:740px;   /* reading-width column: hero copy, programme, roundtables */
  --wide:1100px;      /* wide column: double-column keynote */
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:#ffffff;
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ink);}
a:hover{color:var(--lime-deep);}
img{max-width:100%;}

/* ---------- shared label pattern (the ONE tag/eyebrow style, reused everywhere) ---------- */
.eyebrow, .section-label, .chapter-num{
  font-family:var(--sans);
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  color:var(--lime-deep);
  display:block;
}

/* ---------- topbar : full width, bilingual, evenly spaced ---------- */
.topbar2{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar2 .wrap{
  display:flex; align-items:center; gap:32px;
  padding:18px 32px;
  width:100%;
}
.topbar2 .corner-title{
  font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--dim);
  max-width:320px; line-height:1.4; flex:0 0 auto;
}
.topbar2 nav{
  display:flex; flex:1 1 auto; justify-content:space-between; align-items:center;
  gap:16px;
}
.nav-link{
  display:flex; flex-direction:column; gap:1px; text-decoration:none; text-align:center;
}
.nav-link:first-of-type{align-items:flex-start; text-align:left;}
.nav-link:last-of-type{align-items:flex-end; text-align:right;}
.nav-link .nl-en{
  font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--ink);
}
.nav-link .nl-cn{font-size:11px; color:var(--dim);}
.nav-link:hover .nl-en, .nav-link:hover .nl-cn{color:var(--lime-deep);}

/* ---------- generic content containers ---------- */
.khero{max-width:var(--wide); margin:0 auto; padding:64px 32px 32px;}
.keynote-wrap{max-width:var(--wide); margin:0 auto; padding:0 32px 80px;}
.section{max-width:var(--measure); margin:0 auto; padding:80px 32px;}
.section + .section{border-top:1px solid var(--line);}

/* ---------- keynote hero ---------- */
.keynote-hero-img{
  width:100%; border-radius:var(--radius); display:block; margin-bottom:32px;
  border:1px solid var(--line); object-fit:cover; max-height:520px;
}
.khero .eyebrow{margin-bottom:16px;}
.khero h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,6vw,58px); line-height:1.05; margin:0 0 4px;
}
.khero .cn-h1{
  font-size:clamp(19px,3vw,26px); color:var(--dim); font-weight:400; margin:0 0 24px;
}
.khero .sub{font-size:16px; color:#333; max-width:var(--measure); margin:0 0 6px;}
.khero .sub.cn{color:var(--dim); font-size:14.5px; max-width:var(--measure);}
.khero .meta{
  display:flex; gap:32px; flex-wrap:wrap; font-size:13px; color:var(--dim);
  border-top:1px solid var(--line); padding-top:20px; margin-top:32px;
}
.khero .meta b{display:block; color:var(--ink); font-size:11px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:3px; font-weight:700;}

/* ---------- double-column keynote chapters ---------- */
.chapter2{margin-bottom:64px;}
.chapter2 .chapter-num{margin-bottom:12px;}

.title-grid, .oneliner-grid, .body-grid{
  display:grid; grid-template-columns:1fr 1fr; column-gap:48px; row-gap:0;
}
.title-grid .cn, .oneliner-grid .cn{border-left:1px solid var(--line); padding-left:24px;}
.body-grid p.cn{border-left:1px solid var(--line); padding-left:24px;}

.title-grid{margin-bottom:16px;}
.title-grid h3{font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.2; margin:0;}
.title-grid .cn h3{font-family:var(--sans); font-size:18px; font-weight:700; color:var(--ink);}

.oneliner-grid p{
  font-size:14px; font-style:italic; color:var(--dim); margin:0 0 24px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:12px 0;
}
.oneliner-grid .cn p{border-left:none; font-style:normal;}

.body-grid p{font-size:15.5px; color:#222; margin:0 0 16px;}
.body-grid p.cn{color:#333; font-size:15px;}
.body-grid .pointer{color:var(--lime-deep); font-weight:700;}

@media (max-width:760px){
  .title-grid, .oneliner-grid, .body-grid{grid-template-columns:1fr;}
  .title-grid .cn, .oneliner-grid .cn, .body-grid p.cn{
    border-left:none; padding-left:0; border-top:1px dashed var(--line); padding-top:14px; margin-top:-4px; margin-bottom:20px;
  }
  .title-grid h3{margin-bottom:6px;}
}

/* ---------- programme section ---------- */
.section h2{font-family:var(--serif); font-weight:400; font-size:30px; margin:0 0 24px; line-height:1.2;}
.section h2.h2-small{font-size:20px; margin-top:16px;}

.lede{font-size:16px; color:#333; margin:0 0 12px;}
.lede.cn{color:var(--dim); font-size:14.5px; margin:0 0 40px;}

.topic{margin-bottom:48px;}
.time{
  font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.04em;
  background:var(--lime); color:#1a1a00; padding:4px 10px; border-radius:999px;
}
.topic-head{display:flex; align-items:baseline; gap:14px; margin-bottom:16px; flex-wrap:wrap;}
.topic-head h3{font-size:17px; margin:0; font-weight:700;}
.topic-head .cn-t{color:var(--dim); font-size:13.5px; font-weight:400;}

.speaker{padding:16px 0; border-top:1px dashed var(--line);}
.speaker:first-of-type{border-top:none;}
.speaker .name{font-weight:700; font-size:15px;}
.speaker .name .cn{font-weight:400; color:var(--dim); font-size:13px; margin-left:6px;}
.speaker .role{color:var(--dim); font-size:13px; margin:3px 0 6px;}
.speaker .topic-title{font-size:14px; font-style:italic; color:#333;}
.speaker.is-luzius{background:var(--bg-soft); margin:0 -20px; padding:16px 20px; border-radius:var(--radius); border-top:none;}
.speaker.is-luzius .name{color:var(--lime-deep);}

.section-label{margin-bottom:10px;}
.section-label.rt-label{margin-top:32px;}

.roundtable{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; margin-top:16px;
}
.roundtable .time{margin-bottom:12px; display:inline-block;}
.roundtable h4{margin:0 0 4px; font-size:15.5px; font-weight:700;}
.roundtable .cn-t{color:var(--dim); font-size:13px; margin-bottom:14px;}
.roundtable .host-line{font-size:13.5px; margin:0 0 8px; color:#333;}
.roundtable .panelist-list{font-size:13.5px; color:#333; line-height:1.9;}
.roundtable .panelist-list .lz{color:var(--lime-deep); font-weight:700;}

.closing-note{margin-top:40px; font-size:13.5px; color:var(--dim);}

.poster{width:100%; border-radius:var(--radius); display:block; margin-bottom:40px; border:1px solid var(--line);}
.group-photo{width:100%; border-radius:var(--radius); display:block; margin-top:40px; border:1px solid var(--line);}
.photo-caption{font-size:12px; color:var(--dim); margin-top:10px; text-align:center; font-style:italic;}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line); padding:48px 32px 64px; text-align:center;
  color:var(--dim); font-size:12.5px; line-height:1.8;
}
footer .grad{height:3px; background:var(--lime); width:56px; margin:0 auto 24px;}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .topbar2 .wrap{padding:16px 20px; flex-wrap:wrap; gap:16px;}
  .topbar2 .corner-title{max-width:none; order:-1; flex:1 0 100%;}
  .topbar2 nav{gap:20px 28px; flex-wrap:wrap; justify-content:flex-start;}
  .nav-link, .nav-link:first-of-type, .nav-link:last-of-type{align-items:flex-start; text-align:left;}
  .khero{padding:40px 20px 24px;}
  .keynote-wrap{padding:0 20px 56px;}
  .section{padding:56px 20px;}
}