:root {
      --bg: #0b1020;
      --fg: #0f172a;
      --card: #ffffff;
      --ink: #0b1324;
      --muted: #4b5563;
      --accent: #2563eb;
      --accent-2: #22c55e;
      --ring: rgba(37, 99, 235, 0.25);
      --maxw: 1100px;
    }
    html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--ink); background: #f6f8fb; }
    a { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; }

    /* Banner */
    .banner { position: relative; overflow: hidden; background: linear-gradient(135deg, #0b1020 0%, #0d2468 40%, #0e3a6d 60%, #0b614d 100%); color: #e8f1ff; margin-bottom: 15px}
    .banner-inner { max-width: var(--maxw); margin: 0 auto; padding: 10px 20px 10px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; }
    .kicker { letter-spacing: .1em; text-transform: uppercase; font-weight: 700; opacity: .85; font-size: 12px; }
    h1 { margin: 6px 0 12px; font-size: clamp(26px, 3.8vw, 40px); line-height: 1.15; }
    .subtitle { font-size: clamp(14px, 1.6vw, 18px); opacity: .9; }
    .badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,0.08); backdrop-filter: blur(6px); margin-top: 14px; font-size: 14px; }
    .badge svg { width: 18px; height: 18px; }

    .hero-graphic { display: grid; place-items: center; }
    .hero-graphic svg { width: min(500px, 88%); height: auto; filter: drop-shadow(0 12px 30px rgba(0,0,0,.35)); }

    /* Main */
    main { max-width: var(--maxw); margin: -40px auto 60px; padding: 0 20px; }
    .card { background: var(--card); border-radius: 16px; box-shadow: 0 6px 30px rgba(16,24,40,.08); border: 1px solid #e5e7eb; }
    .card .pad { padding: 28px; }
    .meta { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 14px; color: var(--muted); margin-top: 6px; }

    .grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
    @media (min-width: 900px) { .grid { grid-template-columns: 1fr 1fr; } }

    h2 { font-size: 22px; margin: 0 0 8px; }
    h3 { font-size: 18px; margin: 18px 0 6px; }
    p { line-height: 1.6; }

    /* Contents styling (keeps text unchanged, just typeset) */
    .contents { list-style: none; padding: 0; margin: 0; }
    .contents li { padding: 6px 0; border-bottom: 1px solid #eef2f7; }
    .contents li:last-child { border-bottom: 0; }
    .contents .sub { margin-left: 16px; list-style: disc; }

    /* Organizers */
    .org { display: grid; grid-template-columns: 1fr; gap: 16px; }
    @media (min-width: 780px) { .org { grid-template-columns: 1fr 1fr; } }
    .org .person { border: 1px solid #e5e7eb; border-radius: 14px; padding: 18px; }
    .person h4 { margin: 0 0 6px; font-size: 18px; }
    .person .contact { font-size: 14px; color: var(--muted); margin-bottom: 10px; }

    .person img.photo {
        width: 120px;
        height: 120px;
        object-fit: cover;
        border-radius: 50%;
        display: block;
        margin: 0 auto 10px;
        border: 2px solid #e5e7eb;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        transition: transform 0.2s ease-in-out;
    }


    .person img.photo:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    /* Footer */
    footer { max-width: var(--maxw); margin: 30px auto 60px; padding: 0 20px; color: #64748b; font-size: 14px; }

    /* Print */
    @media print {
      .banner { background: #0b1020; color: #fff; }
      .hero-graphic { display: none; }
      main { margin: 0 auto; }
      .card, .person { box-shadow: none; }
      a { color: #0b4fe3; text-decoration: underline; }
    }