/* The security pre-event "AI Security 2027" with ERNW (templates/pre_event/security.html, 2026-10-26), on top of
   pre_event.css: the team's draft is the first pre-event's draft plus this block ("ERNW pre-event"), ported
   unchanged except that rules for parts the page does not have (venue row, training box, the draft's own footer)
   and two unused colour variables are left out. Loaded on this page only, so the first page keeps its look. */
.wrap { padding-left: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left, 0px)); padding-right: max(clamp(16px, 4vw, 40px), env(safe-area-inset-right, 0px)); }

/* Brand: AICon × ERNW */
.brand { gap: 12px; }
.brand-x { color: var(--muted); font-size: 14px; }
.brand .brand-ernw { height: 26px; }
@media (max-width: 640px) { .brand .brand-ernw { height: 20px; } }

.host-badge { display: inline-flex; align-items: center; gap: 16px; margin-top: 24px; padding: 10px 20px; border: 1px solid rgba(251,251,251,.3); border-radius: 999px; background: rgba(17,17,17,.6); }
.host-badge span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #CFCFCF; }
.host-badge img { height: 44px; width: auto; }
@media (max-width: 520px) { .host-badge img { height: 34px; } }
.hero h1 { margin-top: 18px; }
.hero .wrap { padding-block: 130px 48px; }
.pl-ernw { height: 36px; }
@media (max-width: 520px) { .pl-ernw { height: 28px; } }

.sec-lede { max-width: 62ch; margin: -14px auto 36px; text-align: center; color: #E2E2E2; font-weight: 300; font-size: clamp(1.02rem, 1.4vw, 1.15rem); }
.sec-lede strong { font-weight: 600; color: var(--fg); }
#speaker .sec-head { margin-bottom: 40px; }

/* Panel grid */
.sp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sp-grid .sp { display: flex; flex-direction: column; }
.sp-grid .sp-pic { aspect-ratio: 4 / 3; min-height: 0; }
.sp-grid .sp-pic img { object-position: 50% 25%; }
.sp-grid .sp-body p { font-size: 15.5px; margin: 6px 0 0; }
.sp.tbd { border: 1px dashed #4A4A4A; background: transparent; }
.sp.tbd .sp-pic { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #1A1A1A 0 12px, #222 12px 24px); }
.sp.tbd .q { font-weight: 900; font-size: 4.5rem; color: #3A3A3A; }
.sp.tbd h3 { color: #CFCFCF; }
@media (max-width: 900px) { .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sp-grid { grid-template-columns: minmax(0, 1fr); } }

/* Live hacking */
.talks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.talk { gap: 12px; }
.talk-who { display: flex; align-items: center; gap: 12px; }
.talk-who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.talk-who > span { display: flex; flex-direction: column; line-height: 1.25; }
.talk-who > span span { font-family: var(--f-mono); font-size: 12px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.talk h3 { font-size: 1.45rem; }
@media (max-width: 860px) { .talks { grid-template-columns: minmax(0, 1fr); } }

/* Timeline as one horizontal strip */
.tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--lime); }
.tl li { padding: 16px 14px 18px 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; position: relative; }
.tl li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--lime); }
.tl li.hl::before { background: var(--lime); }
.tl time { font-weight: 900; font-size: 1.9rem; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tl li.hl time { color: var(--lime); }
.tl b { font-weight: 700; }
.tl span { font-size: 14px; color: #BDBDBD; }
@media (max-width: 760px) { .tl { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 2px solid var(--lime); } .tl li { padding: 6px 0 14px 22px; } .tl li::before { top: 14px; left: -7px; } .tl time { font-size: 1.5rem; } }

.apply-copy p { max-width: 46ch; }

@media (max-width: 480px) { .nav-act > .btn { display: none; } .brand-x { display: none; } }