/* =============================================================
   ICMAICT 2026 — stylesheet  (revision 2)

   Brand colours sampled from the official logo and banner:
     #3E3049  aubergine   — the ICMAICT wordmark
     #6090A8  steel blue  — the circuit motif in the logo
     #E88020  orange      — "5th International Conference"
     #700828  maroon      — Gulf College mark and the date line

   Revision 2, from review notes:
     · every small uppercase label enlarged, weighted, darkened
     · section headings centred, running prose justified
     · new vertical schedule for important dates
     · agenda, chairs, committees and contact restructured
     · For authors moved onto a steel band so the tabs read
     · organiser and partner logos enlarged
   ============================================================= */

:root{
  --plum:        #3E3049;
  --plum-dk:     #2B2033;
  --plum-mid:    #574766;
  --plum-pale:   #EFECF2;

  --steel:       #6090A8;
  --steel-dk:    #3F6D86;
  --steel-deep:  #34586D;
  --steel-lt:    #A9C6D5;
  --steel-pale:  #EAF2F6;

  --orange:      #E88020;
  --orange-dk:   #B85F0C;
  --orange-pale: #FDF1E4;

  --maroon:      #700828;
  --maroon-pale: #F7E9ED;

  --white:  #FFFFFF;
  --paper:  #FAFAFB;
  --mist:   #F1F2F4;
  --silver: #E8E8EA;

  --ink:       #2B2033;
  --ink-soft:  #5C5568;
  --ink-faint: #837C90;
  --line:      rgba(62,48,73,.14);
  --line-mid:  rgba(62,48,73,.24);

  --display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1240px;
  --gut:  clamp(20px, 5vw, 60px);
  --r:    16px;
  --r-sm: 9px;
  --curve: 56px;
  --shadow-sm: 0 1px 2px rgba(43,32,51,.05), 0 6px 16px rgba(43,32,51,.05);
  --shadow:    0 2px 4px rgba(43,32,51,.05), 0 16px 40px rgba(43,32,51,.09);
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important }
}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--body); font-size:16.5px; line-height:1.68;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block }
a{ color:inherit }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:700; line-height:1.15; letter-spacing:-.022em }
p{ margin:0 0 1em } p:last-child{ margin-bottom:0 }
code{ font-family:var(--mono); font-size:.86em; background:var(--plum-pale); padding:2px 7px; border-radius:5px; color:var(--plum) }

.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut) }
.skip{ position:absolute; left:-9999px; background:var(--orange); color:#fff; padding:12px 18px; z-index:999; font-weight:600; border-radius:var(--r-sm) }
.skip:focus{ left:12px; top:12px }
:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; border-radius:4px }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* =============================================================
   LABELS — enlarged and darkened after review
   ============================================================= */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--body); font-size:13.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--steel-dk); margin:0 0 20px;
}
.eyebrow::before,.eyebrow::after{ content:""; width:30px; height:3px; background:var(--orange); border-radius:2px }
.band--dark .eyebrow{ color:var(--steel-lt) }

.sec-head{ text-align:center; margin-bottom:6px }
.sec-title{ font-size:clamp(31px,4.4vw,50px); font-weight:800; max-width:22ch; margin-inline:auto }
.sec-title.wide{ max-width:28ch }
.sec-intro{ max-width:66ch; color:var(--ink-soft); margin:16px auto 0; font-size:17px }
.band--dark .sec-title{ color:#fff }
.band--dark .sec-intro{ color:rgba(255,255,255,.80) }

.prose p, .justify{ text-align:justify; text-justify:inter-word; hyphens:auto }
@media (max-width:600px){ .prose p, .justify{ text-align:left; hyphens:none } }

section{ scroll-margin-top:84px }
.band{ padding:clamp(62px,8.5vw,110px) 0 }
.band--white{ background:var(--white) }
.band--paper{ background:var(--paper) }
.band--mist{ background:var(--mist) }
.band--plum{ background:var(--plum); color:#fff }
.band--steel{ background:var(--steel-deep); color:#fff }
.anchor{ display:block; position:relative; top:-84px; visibility:hidden }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--body); font-size:15px; font-weight:600;
  text-decoration:none; cursor:pointer;
  padding:13px 26px; border-radius:100px; border:1.5px solid transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn--orange{ background:var(--orange); color:#fff; border-color:var(--orange) }
.btn--orange:hover{ background:var(--orange-dk); border-color:var(--orange-dk); transform:translateY(-2px); box-shadow:0 10px 24px rgba(232,128,32,.30) }
.btn--plum{ background:var(--plum); color:#fff; border-color:var(--plum) }
.btn--plum:hover{ background:var(--plum-mid); border-color:var(--plum-mid); transform:translateY(-2px) }
.btn--outline{ border-color:var(--line-mid); color:var(--ink); background:transparent }
.btn--outline:hover{ border-color:var(--plum); background:var(--plum); color:#fff }
.btn--light{ border-color:rgba(255,255,255,.42); color:#fff; background:transparent }
.btn--light:hover{ border-color:#fff; background:#fff; color:var(--plum) }
.btn--sm{ padding:10px 20px; font-size:14px }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px }
.btn-row.center{ justify-content:center }

/* =============================================================
   IMAGE SLOTS
   ============================================================= */
.slot{ position:relative; overflow:hidden; background:var(--mist) }
.slot-hint{
  position:absolute; inset:0; display:grid; place-content:center; gap:6px; text-align:center;
  padding:14px; border:2px dashed var(--steel-lt); color:var(--ink-faint); border-radius:inherit;
}
.slot-hint b{ font-family:var(--mono); font-size:12.5px; color:var(--steel-dk); font-weight:500; word-break:break-all }
.slot-hint span{ font-size:11.5px; letter-spacing:.09em; text-transform:uppercase }
.slot > img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover }

/* =============================================================
   TOP STRIP + HEADER
   ============================================================= */
.strip{ background:var(--plum); color:rgba(255,255,255,.9); font-size:13.5px }
.strip-in{ max-width:var(--wrap); margin:0 auto; padding:10px var(--gut); display:flex; flex-wrap:wrap; gap:7px 24px; align-items:center }
.strip b{ color:#fff; font-weight:600 }
.strip .dot{ width:5px; height:5px; border-radius:50%; background:var(--orange); flex:none }
.strip a{ margin-left:auto; color:#fff; text-decoration:none; font-weight:600 }
.strip a:hover{ color:var(--orange) }
@media (max-width:760px){ .strip a{ margin-left:0 } }

.hdr{ position:sticky; top:0; z-index:200; background:rgba(255,255,255,.95); backdrop-filter:blur(14px); border-bottom:1px solid var(--line) }
.hdr-in{ display:flex; align-items:center; gap:18px; height:78px; max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut) }
.brand{ display:flex; align-items:center; text-decoration:none; flex:none }
.brand img{ height:42px; width:auto }
.brand-fallback{ font-family:var(--display); font-size:21px; font-weight:800; color:var(--plum); letter-spacing:-.02em; display:none }

.nav{ display:flex; align-items:center; gap:1px; margin-left:auto; list-style:none; margin-block:0; padding:0 }
.nav > li{ position:relative }
.nav-link{
  display:flex; align-items:center; gap:6px; padding:10px 13px;
  font-size:14.5px; font-weight:500; color:var(--ink-soft); font-family:var(--body);
  text-decoration:none; background:none; border:0; cursor:pointer;
  border-radius:var(--r-sm); transition:color .16s ease, background .16s ease; white-space:nowrap;
}
.nav-link:hover, .nav > li:hover > .nav-link, .nav-link[aria-expanded="true"]{ color:var(--plum); background:var(--plum-pale) }
.nav-link.is-current{ color:var(--plum); font-weight:700 }
.caret{ width:9px; height:9px; stroke:currentColor; stroke-width:2.4; fill:none; transition:transform .2s ease }
.nav > li:hover .caret, .nav-link[aria-expanded="true"] .caret{ transform:rotate(180deg) }

.submenu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:272px; margin:0; padding:8px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); list-style:none;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav > li:hover > .submenu, .submenu.open{ opacity:1; visibility:visible; transform:translateY(0) }
.submenu a{
  display:block; padding:10px 14px; font-size:14.5px; color:var(--ink-soft);
  text-decoration:none; border-radius:var(--r-sm);
  border-left:2px solid transparent; transition:all .14s ease;
}
.submenu a:hover{ background:var(--plum-pale); color:var(--plum); border-left-color:var(--orange) }
.submenu .grp{ font-family:var(--body); font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--steel-dk); padding:13px 14px 6px; display:block }
.submenu li:first-child .grp{ padding-top:6px }

.burger{ display:none; margin-left:auto; background:none; border:1px solid var(--line-mid); border-radius:var(--r-sm); padding:9px 11px; cursor:pointer }
.burger span{ display:block; width:19px; height:2px; background:var(--plum); margin:4px 0; border-radius:2px }

@media (max-width:1180px){
  .nav{
    display:none; position:absolute; top:78px; left:0; right:0; max-height:calc(100vh - 78px);
    overflow-y:auto; background:var(--white); flex-direction:column; align-items:stretch;
    gap:0; padding:8px 0 22px; border-bottom:1px solid var(--line); box-shadow:var(--shadow);
  }
  .nav.open{ display:flex }
  .nav > li{ width:100% }
  .nav-link{ width:100%; padding:14px var(--gut); border-radius:0; justify-content:space-between }
  .submenu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; border-radius:0; background:var(--paper); padding:4px 0 10px; display:none; min-width:0 }
  .submenu.open{ display:block }
  .submenu a{ padding:11px var(--gut); padding-left:calc(var(--gut) + 14px) }
  .submenu .grp{ padding-left:var(--gut) }
  .burger{ display:block }
  .hdr .btn{ display:none }
}

/* =============================================================
   BANNER
   ============================================================= */
.banner{ padding:clamp(16px,2.6vw,28px) 0 0 }
.banner .slot{ aspect-ratio:2832/1272; border:1px solid var(--line); border-radius:var(--r) var(--curve) var(--r) var(--r) }
.banner .slot > img{ object-fit:contain; background:var(--white) }

/* =============================================================
   HERO
   ============================================================= */
.hero{ padding:clamp(44px,6vw,74px) 0 clamp(50px,6.5vw,80px) }
.hero-in{ display:grid; grid-template-columns:1.28fr .92fr; gap:clamp(30px,4.6vw,60px); align-items:start }
@media (max-width:920px){ .hero-in{ grid-template-columns:1fr } }
.hero-badge{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--body); font-size:13px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--maroon); background:var(--maroon-pale);
  border-radius:100px; padding:9px 19px; margin-bottom:22px;
}
.hero h1{ font-size:clamp(35px,5.4vw,64px); line-height:1.06; letter-spacing:-.035em; font-weight:800 }
.hero h1 .a{ color:var(--plum) }
.hero h1 .b{ color:var(--steel-dk) }
.hero-sub{ margin-top:22px; max-width:56ch; color:var(--ink-soft); font-size:17.5px }

.vitals{ background:var(--white); border:1px solid var(--line-mid); box-shadow:var(--shadow); overflow:hidden; border-radius:var(--r) var(--curve) var(--r) var(--r) }
.vital{ padding:20px 24px; border-bottom:1px solid var(--line); display:flex; gap:15px; align-items:flex-start }
.vital:last-child{ border-bottom:0 }
.vital .ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex:none; margin-top:1px }
.vital .ic svg{ width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor }
.ic--plum{ background:var(--plum-pale); color:var(--plum) }
.ic--steel{ background:var(--steel-pale); color:var(--steel-dk) }
.ic--maroon{ background:var(--maroon-pale); color:var(--maroon) }
.vital dt{ font-family:var(--body); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--steel-dk); margin-bottom:6px }
.vital dd{ margin:0; font-size:18.5px; font-weight:700; line-height:1.3; color:var(--ink) }
.vital dd small{ display:block; font-weight:500; color:var(--ink-soft); font-size:15px; margin-top:5px; line-height:1.45 }
.cd{ background:var(--orange-pale); border-top:1px solid rgba(232,128,32,.3) }
.cd dt{ color:var(--orange-dk) }
.cd-clock{ display:flex; gap:22px; margin-top:10px }
.cd-num{ font-family:var(--mono); font-size:30px; font-weight:500; color:var(--orange-dk); line-height:1; font-variant-numeric:tabular-nums }
.cd-lbl{ font-family:var(--body); font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-top:7px }

/* =============================================================
   ABOUT — full width, two justified columns
   ============================================================= */
.about-cols{ margin-top:42px; column-count:2; column-gap:clamp(30px,4vw,62px) }
.about-cols p{ margin:0 0 1.1em; text-align:justify; text-justify:inter-word; hyphens:auto; color:var(--ink-soft); font-size:16.5px }
.about-cols p:first-child::first-letter{
  float:left; font-family:var(--display); font-weight:800; font-size:58px; line-height:.86;
  padding:6px 13px 0 0; color:var(--plum);
}
@media (max-width:820px){ .about-cols{ column-count:1 } .about-cols p{ text-align:left; hyphens:none } }

.figures{
  display:grid; grid-template-columns:repeat(4,1fr); margin-top:48px;
  border-top:3px solid var(--plum); border-bottom:1px solid var(--line);
}
.figure{ padding:28px 20px; text-align:center; border-left:1px solid var(--line) }
.figure:first-child{ border-left:0 }
.figure b{ font-family:var(--display); font-size:44px; font-weight:800; display:block; line-height:1; color:var(--plum) }
.figure:nth-child(2) b{ color:var(--steel-dk) }
.figure:nth-child(3) b{ color:var(--orange-dk) }
.figure:nth-child(4) b{ color:var(--maroon) }
.figure span{ font-family:var(--body); font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-top:12px }
@media (max-width:760px){
  .figures{ grid-template-columns:1fr 1fr }
  .figure:nth-child(3){ border-left:0 }
  .figure:nth-child(n+3){ border-top:1px solid var(--line) }
}

/* =============================================================
   ORGANISER + PARTNER LOGOS — enlarged
   ============================================================= */
.sub-head{ text-align:center; margin:64px 0 26px }
.sub-head h3{ font-size:27px }
.sub-head p{ color:var(--ink-soft); font-size:15.5px; margin-top:9px }

.host-card{
  display:grid; grid-template-columns:260px 1fr; gap:clamp(24px,4vw,52px); align-items:center;
  background:var(--white); border:1px solid var(--line-mid); border-radius:var(--r) var(--curve) var(--r) var(--r);
  padding:clamp(26px,3.4vw,42px); box-shadow:var(--shadow-sm); text-decoration:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.host-card:hover{ border-color:var(--maroon); box-shadow:var(--shadow) }
.host-card .slot{ height:160px; background:var(--paper); border-radius:var(--r-sm) }
.host-card .slot > img{ object-fit:contain; padding:12px }
.host-card .rl{ font-family:var(--body); font-size:12.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--orange-dk); display:block; margin-bottom:10px }
.host-card h4{ font-size:28px; margin-bottom:11px }
.host-card p{ color:var(--ink-soft); font-size:15.5px; margin:0 }
@media (max-width:760px){ .host-card{ grid-template-columns:1fr; text-align:center } }

.logo-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:24px }
@media (max-width:900px){ .logo-row{ grid-template-columns:1fr 1fr } }
.logo-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:24px 18px;
  text-align:center; text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:15px;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.logo-card:hover{ border-color:var(--steel); transform:translateY(-3px); box-shadow:var(--shadow-sm) }
.logo-card .slot{ width:100%; height:120px; background:var(--paper); border-radius:var(--r-sm) }
.logo-card .slot > img{ object-fit:contain; padding:8px }
.logo-card .slot-hint b{ font-size:11px } .logo-card .slot-hint span{ display:none }
.logo-card .nm{ font-size:15.5px; font-weight:700; line-height:1.35; color:var(--ink); font-family:var(--display) }
.logo-card .rl{ font-family:var(--body); font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--steel-dk) }

/* =============================================================
   IMPORTANT DATES — vertical schedule
   ============================================================= */
.tl{ list-style:none; margin:46px auto 0; padding:0; max-width:920px }
.tl-item{
  display:grid; grid-template-columns:176px 36px 1fr auto;
  gap:22px; align-items:center; padding:20px 26px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r); margin-bottom:12px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.tl-item:hover{ border-color:var(--steel); box-shadow:var(--shadow-sm) }
.tl-item.is-now{ border-color:var(--orange); border-width:2px; box-shadow:0 6px 22px rgba(232,128,32,.16) }
.tl-date{ font-family:var(--mono); font-size:17px; font-weight:500; color:var(--plum); white-space:nowrap }
.tl-item.is-now .tl-date{ color:var(--orange-dk); font-weight:700 }
.tl-item.is-done .tl-date{ color:var(--steel-dk) }
.tl-mark{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--mist); color:var(--ink-faint); font-family:var(--mono); font-size:12.5px; font-weight:500 }
.tl-item.is-done .tl-mark{ background:var(--steel-pale); color:var(--steel-dk) }
.tl-item.is-now .tl-mark{ background:var(--orange); color:#fff }
.tl-body h4{ font-size:18.5px; font-weight:700; margin-bottom:4px }
.tl-body p{ margin:0; font-size:15px; color:var(--ink-soft) }
.tl-status{
  font-family:var(--body); font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  padding:8px 15px; border-radius:100px; white-space:nowrap;
  background:var(--mist); color:var(--ink-soft);
}
.tl-item.is-done .tl-status{ background:var(--steel-pale); color:var(--steel-dk) }
.tl-item.is-now .tl-status{ background:var(--orange); color:#fff }
.rail-note{ margin-top:28px; font-size:14.5px; color:var(--ink-soft); font-style:italic; text-align:center }
@media (max-width:820px){
  .tl-item{ grid-template-columns:36px 1fr; gap:12px 16px; padding:18px 20px }
  .tl-mark{ grid-row:1/4 }
  .tl-date{ grid-column:2; font-size:15px }
  .tl-body{ grid-column:2 }
  .tl-status{ grid-column:2; justify-self:start }
}

/* =============================================================
   TRACKS
   ============================================================= */
.matrix{ position:relative; margin-top:46px; padding:0 clamp(16px,2.4vw,40px) }
.matrix::before,.matrix::after{ content:""; position:absolute; top:0; bottom:0; width:clamp(13px,1.9vw,24px); border:3px solid var(--steel-lt) }
.matrix::before{ left:0; border-right:0; border-radius:10px 0 0 10px }
.matrix::after{ right:0; border-left:0; border-radius:0 10px 10px 0 }
.matrix-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.trk{ border-radius:var(--r); padding:clamp(24px,3vw,38px); background:var(--white); border:1px solid var(--line); border-top:5px solid var(--plum) }
.trk:nth-child(2){ border-top-color:var(--steel) }
.trk:nth-child(3){ border-top-color:var(--orange) }
.trk:nth-child(4){ border-top-color:var(--maroon) }
.trk-code{ display:inline-block; font-family:var(--body); font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--plum); padding:6px 15px; border-radius:100px; margin-bottom:15px }
.trk:nth-child(2) .trk-code{ background:var(--steel-dk) }
.trk:nth-child(3) .trk-code{ background:var(--orange-dk) }
.trk:nth-child(4) .trk-code{ background:var(--maroon) }
.trk h3{ font-size:clamp(20px,2.2vw,25px); margin-bottom:16px }
.trk ul{ margin:0; padding:0; list-style:none }
.trk li{ font-size:15px; color:var(--ink-soft); padding:6px 0 6px 21px; position:relative; line-height:1.45 }
.trk li::before{ content:""; position:absolute; left:0; top:14px; width:10px; height:2px; background:var(--steel); border-radius:2px }
@media (max-width:820px){
  .matrix{ padding:0 }
  .matrix::before,.matrix::after{ display:none }
  .matrix-grid{ grid-template-columns:1fr }
}

/* =============================================================
   VERTICAL TABS
   ============================================================= */
.tabset{ display:grid; grid-template-columns:270px 1fr; gap:clamp(26px,3.8vw,52px); margin-top:46px; align-items:start }
.tablist{ display:flex; flex-direction:column; gap:4px; position:sticky; top:100px }
.tab{
  text-align:left; font-family:var(--body); font-size:15.5px; font-weight:600;
  padding:14px 18px; background:transparent; color:var(--ink-soft);
  border:0; border-left:3px solid transparent; border-radius:0 var(--r-sm) var(--r-sm) 0;
  cursor:pointer; transition:all .16s ease; display:flex; align-items:center; gap:12px;
}
.tab .n{ font-family:var(--mono); font-size:13px; color:var(--ink-faint) }
.tab:hover{ background:var(--white); color:var(--plum) }
.tab[aria-selected="true"]{ background:var(--white); border-left-color:var(--orange); color:var(--plum); font-weight:700; box-shadow:var(--shadow-sm) }
.tab[aria-selected="true"] .n{ color:var(--orange-dk) }
.band--dark .tab{ color:rgba(255,255,255,.78) }
.band--dark .tab .n{ color:rgba(255,255,255,.5) }
.band--dark .tab:hover{ background:rgba(255,255,255,.1); color:#fff }
.band--dark .tab[aria-selected="true"]{ background:rgba(255,255,255,.15); color:#fff; box-shadow:none; border-left-color:var(--orange) }
.band--dark .tab[aria-selected="true"] .n{ color:var(--orange) }
.panel[hidden]{ display:none }
.panel > h3{ font-size:26px; margin-bottom:12px }
.panel-note{ font-size:16px; color:var(--ink-soft); margin-bottom:22px; max-width:74ch }
.band--dark .panel-note{ color:rgba(255,255,255,.78) }
@media (max-width:900px){
  .tabset{ grid-template-columns:1fr; gap:22px }
  .tablist{ position:static; flex-direction:row; overflow-x:auto; gap:8px; padding-bottom:6px }
  .tab{ border-left:0; border:1.5px solid var(--line-mid); border-radius:100px; padding:11px 18px; white-space:nowrap; font-size:14px }
  .tab[aria-selected="true"]{ border-color:var(--plum); background:var(--plum); color:#fff; box-shadow:none }
  .band--dark .tab{ border-color:rgba(255,255,255,.3) }
  .band--dark .tab[aria-selected="true"]{ background:#fff; color:var(--plum); border-color:#fff }
  .tab .n{ display:none }
}

/* =============================================================
   CHECKLIST / STEPS / CALLOUT
   ============================================================= */
.checklist{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line) }
.checklist li{ display:grid; grid-template-columns:auto 1fr; gap:15px; align-items:start; padding:16px 0; border-bottom:1px solid var(--line); font-size:15.5px }
.checklist svg{ width:20px; height:20px; margin-top:3px; flex:none; stroke:var(--steel-dk); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round }
.checklist b{ font-weight:700; color:var(--ink) }
.checklist span{ color:var(--ink-soft) }
.band--dark .checklist{ border-top-color:rgba(255,255,255,.2) }
.band--dark .checklist li{ border-bottom-color:rgba(255,255,255,.2) }
.band--dark .checklist svg{ stroke:var(--orange) }
.band--dark .checklist b{ color:#fff }
.band--dark .checklist span{ color:rgba(255,255,255,.78) }

.steps{ counter-reset:s; margin:0; padding:0; list-style:none }
.steps li{ counter-increment:s; position:relative; padding:0 0 28px 56px; border-left:2px solid var(--line); margin-left:18px }
.steps li:last-child{ border-left-color:transparent; padding-bottom:0 }
.steps li::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:-19px; top:-3px;
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:12px; font-weight:500; background:var(--plum); color:#fff;
}
.steps h4{ font-family:var(--display); font-size:18px; font-weight:700; margin-bottom:5px }
.steps p{ font-size:15px; color:var(--ink-soft); margin:0 }
.band--dark .steps li{ border-left-color:rgba(255,255,255,.22) }
.band--dark .steps li::before{ background:var(--orange) }
.band--dark .steps h4{ color:#fff }
.band--dark .steps p{ color:rgba(255,255,255,.78) }

.callout{ margin-top:28px; padding:24px 28px; border-radius:var(--r); background:var(--orange-pale); border-left:5px solid var(--orange) }
.callout h4{ font-family:var(--display); font-size:16.5px; font-weight:700; margin-bottom:8px; color:var(--ink) }
.callout p{ font-size:15px; color:var(--ink-soft); margin:0 }
.callout--steel{ background:var(--steel-pale); border-left-color:var(--steel) }
.callout--maroon{ background:var(--maroon-pale); border-left-color:var(--maroon) }
.band--dark .callout{ background:rgba(255,255,255,.1); border-left-color:var(--orange) }
.band--dark .callout h4{ color:#fff }
.band--dark .callout p{ color:rgba(255,255,255,.8) }

/* =============================================================
   TABLES
   ============================================================= */
.tbl-wrap{ overflow-x:auto; margin-top:22px; border:1px solid var(--line); border-radius:var(--r); background:var(--white) }
table{ width:100%; border-collapse:collapse; min-width:540px }
th,td{ padding:15px 22px; text-align:left; border-bottom:1px solid var(--line); font-size:15.5px; vertical-align:top }
thead th{ font-family:var(--body); font-size:12.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--plum); background:var(--plum-pale) }
tbody tr:last-child td{ border-bottom:0 }
tbody tr:nth-child(even){ background:var(--paper) }
tbody tr:hover{ background:var(--steel-pale) }
td.num{ font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--maroon) }
td small{ display:block; color:var(--steel-dk); font-size:12.5px; font-weight:700; margin-top:5px; text-transform:uppercase; letter-spacing:.07em }
td a{ color:var(--steel-dk); font-weight:700 }
.band--dark .tbl-wrap{ border-color:rgba(255,255,255,.2) }

/* --- FIX ---------------------------------------------------
   Tables and cards keep a white background even when they sit
   inside a dark band, so their text must be reset to dark ink.
   Without this the body text inherits the band's white and
   disappears against the white row.
   ----------------------------------------------------------- */
.band--dark .tbl-wrap,
.band--dark table,
.band--dark th,
.band--dark td{ color:var(--ink) }
.band--dark thead th{ color:var(--plum) }
.band--dark td small{ color:var(--steel-dk) }
.band--dark td a{ color:var(--steel-dk) }
.band--dark td.num{ color:var(--maroon) }

.band--dark .card{ color:var(--ink) }

/* plain paragraphs sitting directly on a dark band */
.band--dark .on-dark{ color:rgba(255,255,255,.82); font-size:15.5px; line-height:1.7 }
.band--dark .on-dark a{ color:#fff; font-weight:600 }
.band--dark .card h3{ color:var(--ink) }
.band--dark .card p{ color:var(--ink-soft) }
.band--dark .card-tag{ color:var(--orange-dk) }
.band--dark .card .cty{ color:var(--steel-dk) }

/* =============================================================
   CARDS
   ============================================================= */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,28px); margin-top:42px }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,24px); margin-top:42px }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:1fr 1fr } }
@media (max-width:600px){ .grid-3,.grid-4{ grid-template-columns:1fr } }

.card{ background:var(--white); border:1px solid var(--line); overflow:hidden; border-radius:var(--r) var(--curve) var(--r) var(--r); transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column }
.card:hover{ border-color:var(--steel); transform:translateY(-4px); box-shadow:var(--shadow) }
.card .slot{ aspect-ratio:1/1; border-radius:0 }
.card-body{ padding:24px; flex:1 }
.card-tag{ font-family:var(--body); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-dk); margin-bottom:10px }
.card h3{ font-size:18.5px; font-weight:700; margin-bottom:7px }
.card p{ font-size:15px; color:var(--ink-soft); margin:0 }
.card .cty{ font-family:var(--body); font-size:13px; font-weight:700; color:var(--steel-dk); margin-top:11px; letter-spacing:.03em }
.card--plain .card-body{ padding:28px }

.chairs{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:52px }
.chair{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; border-top:4px solid var(--steel) }
.chair:nth-child(4n+1){ border-top-color:var(--plum) }
.chair:nth-child(4n+3){ border-top-color:var(--orange) }
.chair:nth-child(4n){ border-top-color:var(--maroon) }
.chair .rl{ font-family:var(--body); font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--steel-dk); display:block; margin-bottom:13px; line-height:1.45 }
.chair .nm{ font-weight:700; display:block; margin-bottom:7px; font-size:17px; font-family:var(--display); line-height:1.25 }
.chair .af{ color:var(--ink-soft); font-size:14.5px; line-height:1.5 }
@media (max-width:1000px){ .chairs{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .chairs{ grid-template-columns:1fr } }

.ed{ background:var(--white); border:1px solid var(--line); overflow:hidden; text-decoration:none; display:flex; flex-direction:column; border-radius:var(--r) var(--curve) var(--r) var(--r); transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease }
.ed:hover{ border-color:var(--orange); transform:translateY(-4px); box-shadow:var(--shadow) }
/* proceedings covers are portrait — give them a tall slot and show
   the whole cover rather than cropping it to a landscape strip */
.ed .slot{ aspect-ratio:3/4; border-radius:0; background:var(--paper) }
.ed .slot > img{ object-fit:contain; padding:14px }
.ed-body{ padding:24px; display:flex; flex-direction:column; gap:9px; flex:1 }
.ed-yr{ font-family:var(--body); font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--steel-dk) }
.ed h3{ font-size:28px; color:var(--plum) }
.ed p{ font-size:14.5px; color:var(--ink-soft); margin:0; flex:1 }
.ed .go{ font-size:14px; font-weight:700; color:var(--orange-dk) }

/* =============================================================
   AGENDA — restructured
   ============================================================= */
.agenda-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,36px); margin-top:44px }
@media (max-width:900px){ .agenda-grid{ grid-template-columns:1fr } }
.day{ background:var(--white); border:1px solid var(--line); border-radius:var(--r) var(--curve) var(--r) var(--r); overflow:hidden }
.day-hd{ background:var(--plum); color:#fff; padding:24px 28px; text-align:center }
.day--two .day-hd{ background:var(--steel-deep) }
.day-hd .lbl{ font-family:var(--body); font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); display:block; margin-bottom:8px }
.day-hd h3{ font-size:26px; color:#fff; margin-bottom:5px }
.day-hd .dt{ font-size:15.5px; color:rgba(255,255,255,.84) }
.day-body{ padding:8px 28px 26px }
.slot-row{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding:16px 0; border-bottom:1px solid var(--line); align-items:start }
.slot-row:last-child{ border-bottom:0 }
.slot-row .t{
  font-family:var(--mono); font-size:13.5px; font-weight:500; color:var(--plum);
  background:var(--plum-pale); padding:7px 13px; border-radius:100px; white-space:nowrap;
}
.day--two .slot-row .t{ color:var(--steel-dk); background:var(--steel-pale) }
.slot-row .w{ font-weight:700; font-size:16.5px; padding-top:4px }
.slot-row .w small{ display:block; font-weight:400; color:var(--ink-soft); font-size:14.5px; margin-top:4px }
.slot-row.is-key .w{ color:var(--maroon) }

/* =============================================================
   VENUE
   ============================================================= */
.venue-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4.4vw,58px); align-items:start; margin-top:44px }
@media (max-width:900px){ .venue-grid{ grid-template-columns:1fr } }
.facts{ margin:0; padding:0; list-style:none; border-top:1px solid rgba(255,255,255,.2) }
.facts li{ padding:17px 0; border-bottom:1px solid rgba(255,255,255,.2); display:grid; grid-template-columns:138px 1fr; gap:18px; font-size:15.5px }
.facts .k{ font-family:var(--body); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--steel-lt); padding-top:4px }
.facts .v{ font-weight:700; color:#fff }
.facts .v small{ display:block; color:rgba(255,255,255,.78); font-size:14.5px; margin-top:4px; font-weight:400; line-height:1.5 }
@media (max-width:520px){ .facts li{ grid-template-columns:1fr; gap:5px } }
.photos{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.photos .slot{ aspect-ratio:4/3; border-radius:var(--r) }
.photos .slot:first-child{ grid-column:1/-1; aspect-ratio:16/9; border-radius:var(--r) var(--curve) var(--r) var(--r) }
.map{ margin-top:12px; border:1px solid rgba(255,255,255,.24); border-radius:var(--r); overflow:hidden; height:224px }
.map iframe{ width:100%; height:100%; border:0 }

/* =============================================================
   ABOUT PUBLICATION — three routes
   ============================================================= */
.pub-row{ display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:20px; margin-top:46px; align-items:stretch }
@media (max-width:980px){ .pub-row{ grid-template-columns:1fr } }
.pub-card{
  background:var(--white); border:1px solid var(--line); border-top:5px solid var(--steel);
  border-radius:var(--r) var(--curve) var(--r) var(--r); padding:clamp(26px,3vw,36px);
  display:flex; flex-direction:column;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pub-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.pub-card--main{ border-top-color:var(--maroon); background:linear-gradient(180deg,var(--maroon-pale) 0%,var(--white) 30%) }
.pub-badge{
  display:inline-block; align-self:flex-start; font-family:var(--body); font-size:11.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--steel-dk); background:var(--steel-pale);
  padding:6px 14px; border-radius:100px; margin-bottom:15px;
}
.pub-card--main .pub-badge{ color:#fff; background:var(--maroon) }
.pub-card h3{ font-size:24px; margin-bottom:7px }
.pub-card--main h3{ color:var(--maroon) }
.pub-meta{
  font-family:var(--mono); font-size:13px; color:var(--orange-dk);
  margin-bottom:14px; font-weight:500;
}
.pub-card > p{ font-size:15.5px; color:var(--ink-soft); margin-bottom:18px }
.pub-list{ margin:auto 0 0; padding:0; list-style:none; border-top:1px solid var(--line); padding-top:16px }
.pub-list li{ position:relative; padding:7px 0 7px 26px; font-size:14.5px; color:var(--ink-soft) }
.pub-list li::before{
  content:""; position:absolute; left:0; top:14px; width:12px; height:12px;
  border-radius:50%; border:2px solid var(--steel);
}
.pub-card--main .pub-list li::before{ border-color:var(--maroon); background:var(--maroon-pale) }

/* =============================================================
   PHOTO GALLERIES — cards, not small pills
   ============================================================= */
.gal-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:8px }
@media (max-width:900px){ .gal-row{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .gal-row{ grid-template-columns:1fr } }
.gal{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:30px 24px; text-decoration:none; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.gal:hover{ border-color:var(--orange); transform:translateY(-3px); box-shadow:var(--shadow-sm) }
.gal-ic{
  width:60px; height:60px; border-radius:16px; display:grid; place-items:center;
  background:var(--steel-pale); color:var(--steel-dk); transition:all .18s ease;
}
.gal:hover .gal-ic{ background:var(--orange); color:#fff }
.gal-ic svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.gal-yr{ font-family:var(--display); font-size:27px; font-weight:800; color:var(--plum); line-height:1 }
.gal-lbl{ font-family:var(--body); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft) }

/* =============================================================
   CONTACT — one panel, equal columns
   ============================================================= */
.contact-panel{
  margin-top:44px; background:var(--white); border:1px solid var(--line-mid);
  border-radius:var(--r) var(--curve) var(--r) var(--r); box-shadow:var(--shadow-sm);
  display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden;
}
@media (max-width:860px){ .contact-panel{ grid-template-columns:1fr } }
.ctc-col{ padding:clamp(26px,3vw,38px); border-left:1px solid var(--line); display:flex; flex-direction:column }
.ctc-col:first-child{ border-left:0 }
@media (max-width:860px){ .ctc-col{ border-left:0; border-top:1px solid var(--line) } .ctc-col:first-child{ border-top:0 } }
.ctc-ic{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; margin-bottom:20px; flex:none }
.ctc-ic svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
.ctc-ic--plum{ background:var(--plum-pale); color:var(--plum) }
.ctc-ic--steel{ background:var(--steel-pale); color:var(--steel-dk) }
.ctc-ic--maroon{ background:var(--maroon-pale); color:var(--maroon) }
.ctc-col h3{ font-size:20px; margin-bottom:10px }
.ctc-col > p{ font-size:15px; color:var(--ink-soft); margin-bottom:20px }
.ctc-link{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  color:var(--plum); text-decoration:none; font-weight:700; font-size:16.5px;
  border-bottom:2px solid var(--orange); padding-bottom:3px;
}
.ctc-link:hover{ color:var(--orange-dk) }

/* postal address block — fills the column */
.addr{ margin-top:24px; padding-top:22px; border-top:1px solid var(--line) }
.addr-lbl{
  display:block; font-family:var(--body); font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--steel-dk); margin-bottom:10px;
}
.addr address{ font-style:normal; font-size:15px; line-height:1.7; color:var(--ink-soft) }
.addr-map{
  display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  font-size:14.5px; font-weight:700; color:var(--steel-dk); text-decoration:none;
}
.addr-map svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.addr-map:hover{ color:var(--orange-dk) }

/* telegram QR */
.qr{ margin:0 0 22px }
.qr-frame{
  position:relative; width:180px; aspect-ratio:320/394; overflow:hidden;
  background:var(--white); border:1px solid var(--line-mid); border-radius:var(--r);
  padding:10px; box-shadow:var(--shadow-sm);
}
.qr-frame > img{ width:100%; height:100%; object-fit:contain; position:relative; z-index:1 }
.qr-frame .slot-hint{ border-radius:var(--r) }
.qr figcaption{ margin-top:11px; font-size:13.5px; color:var(--ink-soft); max-width:180px; line-height:1.45 }

/* whatsapp numbers as rows */
.wa-list{ display:flex; flex-direction:column; gap:8px }
.wa-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  padding:11px 15px; border:1px solid var(--line); border-radius:100px;
  text-decoration:none; background:var(--white); transition:all .16s ease;
}
.wa-row:hover{ border-color:var(--maroon); background:var(--maroon-pale); transform:translateX(3px) }
.wa-ic{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--maroon-pale); color:var(--maroon); flex:none }
.wa-row:hover .wa-ic{ background:var(--maroon); color:#fff }
.wa-ic svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.wa-no{ font-family:var(--mono); font-size:14px; font-weight:500; color:var(--ink); white-space:nowrap }
.wa-cc{ font-family:var(--body); font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint) }
.ctc-warn{
  margin-top:26px; text-align:center; font-size:15px; color:var(--ink-soft);
  background:var(--maroon-pale); border-radius:var(--r); padding:20px 26px;
}
.ctc-warn b{ color:var(--maroon) }

/* =============================================================
   FOOTER
   ============================================================= */
.ftr{ background:var(--plum); color:rgba(255,255,255,.74); padding:56px 0 32px }
.ftr img{ height:46px; filter:brightness(0) invert(1); opacity:.95 }
.ftr-top{ display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; align-items:start; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.18) }
.ftr-links{ display:flex; flex-wrap:wrap; gap:11px 28px; list-style:none; margin:0; padding:0 }
.ftr-links a{ font-size:14.5px; color:rgba(255,255,255,.74); text-decoration:none }
.ftr-links a:hover{ color:var(--orange) }
.orgs{ display:flex; flex-wrap:wrap; gap:6px 24px; margin-top:14px; font-size:14px }
.orgs strong{ color:#fff }
.ftr-btm{ padding-top:24px; font-size:13px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; line-height:1.6; color:rgba(255,255,255,.58) }

/* reveal + back to top */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease }
.rv.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none } }

.totop{
  position:fixed; right:20px; bottom:20px; z-index:150; width:50px; height:50px; border-radius:50%;
  background:var(--plum); color:#fff; border:0; cursor:pointer; display:grid; place-items:center;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .25s ease, visibility .25s, transform .25s ease, background .18s ease;
  box-shadow:0 8px 22px rgba(43,32,51,.34);
}
.totop.show{ opacity:1; visibility:visible; transform:none }
.totop:hover{ background:var(--orange) }
.totop svg{ width:20px; height:20px; stroke:currentColor; stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round }

@media print{
  .hdr,.strip,.totop,.banner,.map{ display:none }
  .panel[hidden]{ display:block !important }
  .band{ padding:24px 0 }
}