
:root{
  --bg: #ffffff;
  --ink:#0b1220;
  --muted:#4b5563;
  --muted2:#6b7280;
  --line:#e5e7eb;
  --soft:#f8fafc;
  --accent:#1d4ed8;
  --accent2:#0ea5e9;
  --max:1140px;
  --radius:18px;
  --shadow: 0 18px 45px rgba(15, 23, 42, .10);
  --shadow2: 0 10px 24px rgba(15, 23, 42, .08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 500px at 12% 6%, rgba(14,165,233,.10), transparent 55%),
    radial-gradient(800px 460px at 88% 10%, rgba(29,78,216,.08), transparent 55%),
    linear-gradient(180deg, #ffffff, #fbfdff);
}
a{color:inherit; text-decoration:none}
.container{width:min(var(--max), calc(100% - 56px)); margin:0 auto}
.skip{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:20px;top:20px;width:auto;height:auto;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:12px;z-index:999}
.topbar{
  position:sticky; top:0; z-index:20;
  background: rgba(255,255,255,.78);
  border-bottom:1px solid rgba(229,231,235,.85);
  backdrop-filter: blur(10px);
}
.topbar .inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}
.brand{display:flex;flex-direction:column;line-height:1.1}
.brand .name{font-weight:850;letter-spacing:.2px}
.brand .meta{font-size:12.8px;color:var(--muted);margin-top:2px}
.nav{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:4px;background: rgba(248,250,252,.7);
  border: 1px solid rgba(229,231,235,.9);
  border-radius: 999px;
}
.nav a{
  font-size:13.4px;color:var(--muted);
  padding:8px 12px;border-radius:999px;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.nav a:hover{background:#fff;color:var(--ink);transform: translateY(-1px)}
.nav a.active{
  background: linear-gradient(180deg, rgba(29,78,216,.10), rgba(14,165,233,.08));
  color: var(--ink);
  border: 1px solid rgba(29,78,216,.18);
}
.actions{display:flex;gap:10px;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 12px;border-radius:12px;
  border:1px solid rgba(229,231,235,.95);
  background: rgba(255,255,255,.85);
  font-size:13.4px;color:var(--ink);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.btn:hover{transform: translateY(-1px);box-shadow: var(--shadow2);border-color:#d1d5db;background:#fff}
.btn.primary{
  background: linear-gradient(180deg, #1d4ed8, #1e40af);
  border-color:#1e40af;color:#fff;
  box-shadow: 0 16px 34px rgba(29,78,216,.18);
}
.btn.primary:hover{box-shadow: 0 18px 42px rgba(29,78,216,.24)}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  background: rgba(248,250,252,.75);
  border:1px solid rgba(229,231,235,.95);
  font-size:12px;color:var(--muted);
}
.badge .dot{width:8px;height:8px;border-radius:99px;background: linear-gradient(180deg, var(--accent2), var(--accent));box-shadow:0 0 18px rgba(14,165,233,.20)}
.page{padding:26px 0 26px}
.hero{padding:22px 0 12px}
.hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:22px;align-items:start}
.panel{
  border:1px solid rgba(229,231,235,.92);
  border-radius: var(--radius);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow);
}
.panel.pad{padding:22px}
.h1{margin:12px 0 8px;font-size: clamp(30px, 3.2vw, 44px);line-height:1.05;letter-spacing:-0.7px}
.sub{margin:0;color:var(--muted);line-height:1.7;font-size:14.9px;max-width:70ch}
.kpi{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.kpi .badge{background:#fff}
.avatar{overflow:hidden;border-radius: var(--radius);border:1px solid rgba(229,231,235,.92);background: var(--soft);aspect-ratio:1/1}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.side-meta{padding:16px 18px;border-top:1px solid rgba(229,231,235,.92)}
.side-meta .row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid rgba(229,231,235,.92)}
.side-meta .row:last-child{border-bottom:none}
.side-meta .k{color:var(--muted2);font-size:12.5px}
.side-meta .v{font-weight:680;font-size:12.9px}
.section{padding:16px 0}
.section .head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 12px}
.section h2{margin:0;font-size:16px;letter-spacing:.2px}
.section .hint{margin:0;color:var(--muted);font-size:13px}
.block{padding:18px 18px}
.block + .block{border-top:1px solid rgba(229,231,235,.92)}
.list{margin:10px 0 0;padding-left:18px;color:var(--muted);line-height:1.65;font-size:14.2px}
.timeline{display:flex;flex-direction:column;gap:12px}
.item{
  border:1px solid rgba(229,231,235,.92);
  border-radius:14px;
  padding:14px 14px;
  background: rgba(255,255,255,.92);
  transition: transform .16s ease, box-shadow .16s ease;
}
.item:hover{transform: translateY(-1px);box-shadow: var(--shadow2)}
.item .top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.item .role{font-weight:780}
.item .org{color:var(--muted);font-size:13px;margin-top:2px}
.item .date{color:var(--muted2);font-size:12.5px;white-space:nowrap}
.item .desc{margin-top:8px;color:var(--muted);font-size:13.8px;line-height:1.6}
.table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13.6px}
.table th,.table td{padding:10px 10px;border-bottom:1px solid rgba(229,231,235,.92);text-align:left;vertical-align:top}
.table th{font-size:12px;color:var(--muted2);font-weight:760;letter-spacing:.25px;text-transform:uppercase}
.table td .mini{display:block;color:var(--muted);font-size:12.6px;margin-top:4px;line-height:1.5}
.pill{display:inline-flex;align-items:center;justify-content:center;padding:7px 10px;border-radius:999px;border:1px solid rgba(229,231,235,.92);background: rgba(248,250,252,.9);font-size:12.6px;white-space:nowrap}
.row-actions{display:flex;gap:8px;align-items:center}
.thumbgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.thumb{border:1px solid rgba(229,231,235,.92);border-radius:14px;overflow:hidden;background:var(--soft);transition:transform .16s ease, box-shadow .16s ease}
.thumb:hover{transform: translateY(-2px);box-shadow: var(--shadow2)}
.thumb img{width:100%;height:120px;object-fit:cover;display:block}
.footer{margin-top:22px;border-top:1px solid rgba(229,231,235,.92);padding:18px 0 28px;color:var(--muted);font-size:12.9px}
.reveal{opacity:0;transform: translateY(10px);transition: opacity .55s ease, transform .55s ease}
.reveal.show{opacity:1;transform:none}
.pagefade{opacity:0;transform: translateY(8px);animation: pageIn .42s ease forwards}
@keyframes pageIn{to{opacity:1;transform:none}}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}.thumbgrid{grid-template-columns:1fr 1fr}.nav{display:none}}

/* --- Premium polish additions --- */
:root{
  --ring: rgba(29, 78, 216, .18);
  --ring2: rgba(14, 165, 233, .18);
}

a:focus-visible, button:focus-visible, .btn:focus-visible, .nav a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--ring), 0 10px 24px rgba(15,23,42,.08);
}

.btn{
  gap:10px;
  letter-spacing: .15px;
  position: relative;
}
.btn.primary{
  background: linear-gradient(180deg, #1e40af 0%, #1d4ed8 55%, #0ea5e9 140%);
  border-color: rgba(29,78,216,.65);
}
.btn.primary::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius: 11px;
  pointer-events:none;
  background: radial-gradient(600px 140px at 20% 0%, rgba(255,255,255,.35), transparent 55%);
  opacity:.75;
}

.btn:hover{
  box-shadow: 0 16px 38px rgba(15,23,42,.10);
}

.nav a{letter-spacing:.15px}
.nav a.active{box-shadow: 0 14px 26px rgba(29,78,216,.10)}

@media (prefers-reduced-motion: reduce){
  .reveal, .pagefade, .btn, .nav a, .item, .thumb{transition:none !important; animation:none !important;}
}


/* Home highlights responsive grid */
@media (max-width: 1100px){
  .block[style*="grid-template-columns: repeat(4"]{grid-template-columns: repeat(2, 1fr) !important;}
}
@media (max-width: 640px){
  .block[style*="grid-template-columns: repeat(4"]{grid-template-columns: 1fr !important;}
}
