/* Inkundla Connect visual identity, version 1 (October 2026). Mirrors www.apea.international/afsi.html.
   Palette: night #171717, deep #1C1C1C, panel #212121, ivory #F3EEE3, AFSI gold #D4AF37, turquoise #19C3C8, green #2DB36B, ember #E07A4F.
   Type: Montserrat (headlines), Source Sans 3 (text), Cormorant Garamond italic (the inkundla voice). */
:root{--deep:#1C1C1C;--emb:#E07A4F;--f-acc:"Cormorant Garamond",Georgia,serif;--day:var(--turq);--r:6px}
body{background:radial-gradient(120% 60% at 50% -10%,#2A2622 0,var(--night) 55%) fixed}
.top{background:rgba(23,23,23,.9)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='4'%3E%3Cpath d='M0 4 6 0l6 4 6-4 6 4' fill='none' stroke='%23D4AF37' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x;opacity:.55}
.brand b{letter-spacing:.06em;text-transform:none}
.tabs{background:rgba(16,16,16,.97)}
.tabs a{position:relative}
.tabs a.on::before{content:"";position:absolute;top:0;left:50%;width:26px;height:3px;margin-left:-13px;border-radius:0 0 3px 3px;background:var(--gold)}
.btn{border-radius:var(--r);font-weight:800;letter-spacing:.03em;padding:12px 18px}
.btn.line{border-color:rgba(243,238,227,.35)}
.card,.tile,details.q,.s,.search,.in{border-radius:var(--r)}
.sec>h2,.daytitle{font-weight:800;letter-spacing:-.005em}
.acc{font-family:var(--f-acc);font-style:italic;font-weight:600;letter-spacing:0}

/* photography */
.ph{position:relative;overflow:hidden;background:var(--deep)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,23,23,.15) 0,rgba(23,23,23,.55) 45%,rgba(23,23,23,.96) 100%)}
.ph>.cap{position:relative;z-index:1}
.lite .ph img{display:none}
.lite .ph{background:linear-gradient(135deg,var(--panel),var(--night))}

/* home hero */
.xhero{margin:-16px -16px 0;padding:0}
.xhero img{height:330px;bottom:auto;object-position:center 30%;filter:saturate(.85)}
.xhero::after{height:330px;bottom:auto;background:linear-gradient(180deg,rgba(23,23,23,.25) 0,rgba(23,23,23,.6) 55%,var(--night) 100%)}
.xhero .cap{padding:200px 20px 24px;width:100%}
.xhero .when{font-family:var(--f-head);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--gold)}
.xhero h1{font-size:40px;line-height:1.02;margin:10px 0 0;font-weight:800;letter-spacing:-.01em;text-shadow:0 2px 18px rgba(23,23,23,.8)}
.xhero h1 .acc{font-size:50px;color:var(--gold);display:block}
.xhero p{color:#D3D9E6;margin:12px 0 0;max-width:34em}
.lite .xhero .cap{padding-top:24px}
.lite .xhero::after,.lite .dayban::after,.lite .vhero::after{display:none}
.lite .dayban,.lite .vhero{height:auto}
.lite .dcard,.lite .hcard{height:auto;min-height:120px}
@media (min-width:700px){.xhero{margin:-16px 0 0;border-radius:0 0 var(--r) var(--r)}.xhero h1{font-size:52px}.xhero h1 .acc{font-size:60px}}

/* the inkundla ring: countdown */
.ring{display:flex;align-items:center;gap:16px;margin-top:20px}
.ring svg{width:92px;height:92px;flex:none}
.ring .num{font-family:var(--f-head);font-weight:800;font-size:26px;fill:var(--ivory)}
.ring .lab{font-size:9px;fill:var(--mist);letter-spacing:.1em}
.ring dl{margin:0;display:grid;grid-template-columns:auto auto;gap:2px 12px;font-size:14px}
.ring dt{font-family:var(--f-head);font-weight:800;color:var(--gold);text-align:right}
.ring dd{margin:0;color:var(--mist)}
.ring .dot{fill:rgba(243,238,227,.28)}
.word .dot{fill:var(--gold)}
.word circle[r="27"]{opacity:.9}
.ring .dot.on{fill:var(--gold)}

/* the four days */
.strip{display:flex;gap:10px;overflow-x:auto;margin:0 -16px;padding:2px 16px 8px;scroll-snap-type:x mandatory;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.dcard{flex:none;width:230px;height:250px;border-radius:var(--r);display:flex;align-items:flex-end;text-decoration:none;color:var(--ivory);scroll-snap-align:start;border-top:4px solid var(--day)}
.dcard .cap{padding:14px}
.dcard small{display:block;font-family:var(--f-head);font-weight:700;font-size:12px;color:var(--day)}
.dcard b{display:block;font-family:var(--f-acc);font-style:italic;font-weight:600;font-size:30px;line-height:1.05;margin-top:2px}
.dcard span{display:block;font-size:13px;color:#C9D1E0;margin-top:6px}
.hcard{flex:none;width:280px;height:190px;border-radius:var(--r);display:flex;align-items:flex-end;text-decoration:none;color:var(--ivory);scroll-snap-align:start}
.hcard .cap{padding:14px}
.hcard small{font-size:12.5px;color:var(--gold);font-weight:600}
.hcard b{display:block;font-family:var(--f-head);font-size:16px;line-height:1.2;margin-top:3px}

/* actions */
.acts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.acts a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);text-decoration:none;color:var(--ivory);font-size:12.5px;font-weight:600;text-align:center;line-height:1.2}
.acts .ic{width:26px;height:26px;color:var(--gold)}
.acts em{font-style:normal;font-family:var(--f-head);font-weight:800;font-size:11px;color:var(--night);background:var(--gold);border-radius:9px;padding:0 6px;margin-top:-4px}
.ic-ticket{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18v4a2 2 0 0 0 0 4v4H3v-4a2 2 0 0 0 0-4zm11 1v2h1.6V7zm0 4v2h1.6v-2zm0 4v2h1.6v-2z' fill-rule='evenodd'/%3E%3C/svg%3E")}
.ic-live{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M6.3 6.3a8 8 0 0 0 0 11.4l1.4-1.4a6 6 0 0 1 0-8.6zm11.4 0-1.4 1.4a6 6 0 0 1 0 8.6l1.4 1.4a8 8 0 0 0 0-11.4z'/%3E%3C/svg%3E")}

/* quote: the meaning of inkundla */
.word{position:relative;padding:22px 20px 20px 96px;border-radius:var(--r);background:linear-gradient(135deg,rgba(212,175,55,.10),rgba(25,195,200,.06));border:1px solid rgba(212,175,55,.3)}
.word svg{position:absolute;left:18px;top:22px;width:62px;height:62px}
.word q{display:block;font-family:var(--f-acc);font-style:italic;font-size:22px;line-height:1.25;quotes:none}
.word p{margin:8px 0 0;font-size:14px;color:var(--mist)}

/* programme */
.dayban{margin:0 -16px 14px;height:180px;display:flex;align-items:flex-end;border-bottom:3px solid var(--day)}
.dayban .cap{padding:16px}
.dayban small{font-family:var(--f-head);font-weight:700;font-size:12px;color:var(--day)}
.dayban h2{font-size:15px;font-weight:700;color:#D3D9E6;margin-top:2px}
.dayban h2 .acc{display:block;font-size:34px;line-height:1.05;color:var(--ivory)}
@media (min-width:700px){.dayban{margin:0 0 14px;border-radius:var(--r)}}
.days button{border-radius:var(--r);border-top:3px solid var(--dc,var(--line))}
.days button.on{background:var(--dc,var(--gold));border-color:var(--dc,var(--gold))}
.s{border-left-color:var(--day)}
.s.k-closed,.s.k-invite{border-left-color:var(--gold)}
.s .th{grid-column:1/-1;margin:-12px -12px 10px;height:110px;border-radius:var(--r) var(--r) 0 0}
.s .th::after{background:linear-gradient(180deg,rgba(23,23,23,0) 30%,rgba(33,33,33,.95) 100%)}
.lite .s .th{display:none}

/* venue, more */
.vhero{margin:-16px -16px 14px;height:230px;display:flex;align-items:flex-end}
.vhero .cap{padding:16px}
.vhero h2{font-size:26px}
@media (min-width:700px){.vhero{margin:0 0 14px;border-radius:var(--r)}}
.rooms{counter-reset:r}
.rooms .card{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start}
.rooms .card::before{counter-increment:r;content:counter(r);width:28px;height:28px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);font-family:var(--f-head);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.ptiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ptile{height:120px;border-radius:var(--r);display:flex;align-items:flex-end;text-decoration:none;color:var(--ivory)}
.ptile .cap{padding:10px 12px}
.ptile b{font-family:var(--f-head);font-size:14.5px}
.ptile.plain{height:64px;background:var(--panel);border:1px solid var(--line)}
.ptile.plain::after{display:none}
.mono{width:44px;height:44px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-weight:800;font-size:15px;color:var(--night);background:var(--gold);box-shadow:0 0 0 2px var(--night),0 0 0 3px var(--gold)}
.spk{display:flex;gap:12px;align-items:flex-start}

/* tiles across the app get pictures where a place or programme is named */
a.tile[href="#live"],a.tile[href="#live/sessions"],a.tile[href="#live/pathfinders"],a.tile[href="#live/commit"],a.tile[href="#live/charrette"],a.tile[href="#live/checkin"],a.tile[href="#live/console"],a.tile[href="#live/cert"],a.tile[href="#me/sessions"],a.tile[href="#me/evenings"],a.tile[href="#me/press"]{min-height:96px;display:flex;align-items:flex-end;background-size:cover;background-position:center;position:relative;overflow:hidden}
a.tile[href^="#live"] b,a.tile[href^="#me/"] b{position:relative;z-index:1}
a.tile[href="#live"]{background-image:linear-gradient(180deg,rgba(23,23,23,.2),rgba(23,23,23,.92)),url(../img/hero-plenary.jpg)}
a.tile[href="#live/sessions"]{background-image:linear-gradient(180deg,rgba(23,23,23,.2),rgba(23,23,23,.92)),url(../img/closing.jpg)}
a.tile[href="#live/pathfinders"]{background-image:linear-gradient(180deg,rgba(23,23,23,.2),rgba(23,23,23,.92)),url(../img/pitch.jpg)}
a.tile[href="#live/commit"]{background-image:linear-gradient(180deg,rgba(23,23,23,.2),rgba(23,23,23,.92)),url(../img/roadmap.jpg)}
a.tile[href="#live/charrette"]{background-image:linear-gradient(180deg,rgba(23,23,23,.2),rgba(23,23,23,.92)),url(../img/charrette.jpg)}
a.tile[href="#live/checkin"]{background-image:linear-gradient(180deg,rgba(23,23,23,.2),rgba(23,23,23,.92)),url(../img/courtyard.jpg)}
a.tile[href="#live/console"]{background-image:linear-gradient(180deg,rgba(23,23,23,.2),rgba(23,23,23,.92)),url(../img/consult.jpg)}
a.tile[href="#live/cert"]{background-image:linear-gradient(180deg,rgba(23,23,23,.2),rgba(23,23,23,.92)),url(../img/graduates.jpg)}
a.tile[href="#me/sessions"]{background-image:linear-gradient(180deg,rgba(23,23,23,.2),rgba(23,23,23,.92)),url(../img/energy-forum.jpg)}
a.tile[href="#me/evenings"]{background-image:linear-gradient(180deg,rgba(23,23,23,.2),rgba(23,23,23,.92)),url(../img/gala.jpg)}
a.tile[href="#me/press"]{background-image:linear-gradient(180deg,rgba(23,23,23,.2),rgba(23,23,23,.92)),url(../img/digital.jpg)}
.lite a.tile{background-image:none!important;min-height:0}

/* badge: gold foil, woven band, phoenix watermark */
.badgecard{position:relative;border-radius:10px;box-shadow:0 0 0 1px rgba(212,175,55,.6),0 18px 40px rgba(0,0,0,.45)}
.badgecard .top2{height:22px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='22'%3E%3Cpath d='M0 16 6 6l6 10 6-10 6 10' fill='none' stroke='%23F3EEE3' stroke-opacity='.55' stroke-width='1.5'/%3E%3C/svg%3E")!important;background-repeat:repeat-x}
.badgecard .bd{position:relative}
.badgecard .bd::before{content:"";position:absolute;right:-30px;bottom:-30px;width:190px;height:190px;background:url(../img/logo-phoenix.png) center/contain no-repeat;opacity:.08;pointer-events:none}
.badgecard h2{font-size:26px}
.lite .badgecard .bd::before{display:none}

/* empty states carry the ring */
.empty::before{content:"";display:block;width:72px;height:72px;margin:0 auto 12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg fill='%23D4AF37'%3E%3Ccircle cx='0' cy='-38' r='5'/%3E%3Ccircle cx='22.3' cy='-30.7' r='5'/%3E%3Ccircle cx='36.1' cy='-11.7' r='5'/%3E%3Ccircle cx='36.1' cy='11.7' r='5'/%3E%3Ccircle cx='22.3' cy='30.7' r='5'/%3E%3Ccircle cx='0' cy='38' r='5'/%3E%3Ccircle cx='-22.3' cy='30.7' r='5'/%3E%3Ccircle cx='-36.1' cy='11.7' r='5'/%3E%3Ccircle cx='-36.1' cy='-11.7' r='5'/%3E%3Ccircle cx='-22.3' cy='-30.7' r='5'/%3E%3C/g%3E%3Ccircle r='13' fill='%2319C3C8'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.85}

/* splash: the phoenix rises from the ashes of the continent */
.splash{position:fixed;inset:0;z-index:20;background:var(--night);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .45s}
.splash.out{opacity:0;pointer-events:none}
.splash .rise{position:relative;width:150px;height:190px}
.splash .rise img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.splash .rise img{opacity:0}
.splash.go .ash{animation:ash-in 1.1s ease-out both}
.splash .bird.whole{transform-origin:50% 50%}
.splash .bird{transform-origin:50% 85%}
.splash.go .bird{animation:bird-rise 1.4s .6s cubic-bezier(.2,.8,.2,1) both,bird-glow 1.2s 2s ease-in-out infinite alternate}
.splash .embers i{position:absolute;bottom:14%;width:4px;height:4px;border-radius:50%;background:#F08A24;box-shadow:0 0 6px #F08A24;opacity:0}
.splash.go .embers i{animation:ember 1.4s ease-out both}
.splash .embers i:nth-child(3n){background:#D4AF37;box-shadow:0 0 6px #D4AF37;width:3px;height:3px}
.splash b,.splash span{opacity:0}
.splash.go b,.splash.go span{animation:fade-up .6s 1.5s ease-out both}
@keyframes ash-in{from{opacity:0;clip-path:inset(100% 0 0 0);filter:brightness(.3) blur(2px)}to{opacity:.85;clip-path:inset(0);filter:none}}
@keyframes bird-rise{0%{opacity:0;transform:translateY(30%) scale(.6,.4)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes bird-glow{from{filter:drop-shadow(0 0 0 rgba(240,138,36,0))}to{filter:drop-shadow(0 0 12px rgba(240,138,36,.8))}}
@keyframes ember{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(calc(var(--d) * -1)) translateX(6px)}}
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.splash b{font-family:var(--f-head);font-size:18px;letter-spacing:.08em}
.splash span{font-family:var(--f-acc);font-style:italic;font-size:19px;color:var(--gold);margin-top:-10px}
@keyframes gather{from{transform:translate(var(--x),var(--y));opacity:0}to{transform:none;opacity:1}}
@keyframes glow{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.splash.go .ash,.splash.go .bird,.splash.go b,.splash.go span{animation:none;opacity:1}.splash .embers{display:none}.splash{transition:none}}