{} *{} /*endBaseStyles*/
     


      #IE-warning {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: white;
      }
      .IE-warning-message {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
      }
    



 :root{ --sky:#7FD8F7; --sky-deep:#2BAEDD; --sun:#FFD429; --punch:#FF3B7B; --grape:#7B4BF0; --mint:#3DE0B0; --ink:#14103B; --cream:#FFF9EC; --paper:#FFFFFF; --display:"Bungee",system-ui,sans-serif; --body:"Rubik",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace; --max:1200px; --shadow:6px 6px 0 var(--ink); } *{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}} body{ margin:0;background:var(--cream);color:var(--ink); font-family:var(--body);font-size:17px;line-height:1.62; -webkit-font-smoothing:antialiased;overflow-x:hidden; } .wrap{max-width:var(--max);margin:0 auto;padding:0 24px} a{color:inherit} :focus-visible{outline:4px solid var(--punch);outline-offset:3px} /* ---- ticker ---- */ .ticker{background:var(--ink);color:var(--sun);overflow:hidden;border-bottom:4px solid var(--ink)} .ticker__track{ display:flex;white-space:nowrap;padding:10px 0;gap:0; font-family:var(--display);font-size:13px;letter-spacing:.05em; animation:slide 30s linear infinite;will-change:transform; } .ticker__track span{padding:0 26px;display:inline-flex;align-items:center;gap:26px} .ticker__track span::after{content:"★";color:var(--punch);font-size:11px} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---- nav ---- */ .nav{background:var(--punch);color:var(--cream);border-bottom:4px solid var(--ink);position:sticky;top:0;z-index:50} .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px} .logo{font-family:var(--display);font-size:15px;letter-spacing:.02em} .logo b{color:var(--sun);font-weight:400} .nav nav{display:flex;gap:8px;flex-wrap:wrap} .nav nav a{ font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase; text-decoration:none;background:var(--cream);color:var(--ink); padding:6px 12px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink); transition:transform .12s ease,box-shadow .12s ease,background .12s ease; } .nav nav a:hover{background:var(--sun);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)} /* ---- hero ---- */ .hero{ position:relative;overflow:hidden; background: radial-gradient(circle at 50% 120%, var(--sun) 0 6%, transparent 6.5%), linear-gradient(180deg,var(--sky) 0%,#B9EBFB 62%,var(--cream) 100%); border-bottom:5px solid var(--ink); padding:70px 0 84px; } .hero::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(circle,var(--ink) 1.2px,transparent 1.3px) 0 0/16px 16px; opacity:.10; } .orb{ position:absolute;border-radius:50%;pointer-events:none; border:5px solid var(--ink); } .orb--1{width:230px;height:230px;background:var(--grape);right:-58px;top:34px;box-shadow:inset -22px -16px 0 rgba(0,0,0,.18)} .orb--1::after{ content:"";position:absolute;left:50%;top:50%;width:330px;height:74px; transform:translate(-50%,-50%) rotate(-19deg); border:5px solid var(--ink);border-radius:50%; border-top-color:transparent; } .orb--2{width:96px;height:96px;background:var(--mint);left:-30px;bottom:56px;box-shadow:inset -10px -8px 0 rgba(0,0,0,.16)} .orb--3{width:44px;height:44px;background:var(--punch);right:200px;bottom:44px} .hero .wrap{position:relative;z-index:2} .kicker{ display:inline-block;font-family:var(--mono);font-weight:700; font-size:12px;letter-spacing:.16em;text-transform:uppercase; background:var(--ink);color:var(--sun);padding:7px 14px; border:3px solid var(--ink);box-shadow:var(--shadow); transform:rotate(-2deg);margin-bottom:28px; } .hero h1{ font-family:var(--display);font-weight:400; font-size:clamp(2.6rem,8.4vw,6.2rem);line-height:.94;letter-spacing:-.01em; margin:0 0 8px;max-width:16ch; color:var(--cream); text-shadow: 5px 5px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink); } .hero h1 .pop{color:var(--sun)} .hero h1 .pop2{color:var(--punch)} .hero .lede{ max-width:52ch;font-size:clamp(1.02rem,2vw,1.22rem);font-weight:500; margin:22px 0 30px;color:var(--ink); } .chips{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:0} .chips li{ font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase; background:var(--paper);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink); padding:9px 14px; } .chips li b{display:block;font-family:var(--display);font-size:15px;letter-spacing:0;font-weight:400;margin-top:3px} /* ---- section chrome ---- */ section{padding:78px 0;position:relative} .sec-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:44px} .sec-head h2{ font-family:var(--display);font-weight:400; font-size:clamp(1.9rem,5.2vw,3.4rem);line-height:1;margin:0; color:var(--ink); } .sec-head .tag{ font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase; background:var(--sun);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink); padding:6px 12px;transform:rotate(2deg); } .rule{height:6px;background: repeating-linear-gradient(90deg,var(--ink) 0 18px,transparent 18px 30px); margin-bottom:44px} /* ---- author grid ---- */ .authors{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:30px} .card{ background:var(--paper);border:4px solid var(--ink);box-shadow:var(--shadow); display:flex;flex-direction:column;position:relative; transition:transform .16s ease,box-shadow .16s ease; } .card:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--ink)} .card:nth-child(6n+1){--accent:var(--punch)} .card:nth-child(6n+2){--accent:var(--sky-deep)} .card:nth-child(6n+3){--accent:var(--grape)} .card:nth-child(6n+4){--accent:var(--mint)} .card:nth-child(6n+5){--accent:var(--sun)} .card:nth-child(6n+6){--accent:var(--punch)} .card__photo{ position:relative;aspect-ratio:1/1;border-bottom:4px solid var(--ink); background:var(--accent); display:flex;align-items:center;justify-content:center;overflow:hidden; } .card__photo::before{ content:"";position:absolute;inset:0; background:radial-gradient(circle,rgba(20,16,59,.30) 1.6px,transparent 1.7px) 0 0/11px 11px; } .card__photo img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:2} .card__photo .ph{ position:relative;z-index:2;font-family:var(--mono);font-weight:700; font-size:10px;letter-spacing:.16em;text-transform:uppercase;text-align:center; color:var(--ink);background:var(--cream);border:3px solid var(--ink); padding:8px 12px;box-shadow:3px 3px 0 var(--ink); } .card__num{ position:absolute;top:-4px;left:-4px;z-index:3; font-family:var(--display);font-size:15px; background:var(--ink);color:var(--sun);padding:6px 11px; } .card__body{padding:22px 20px 24px;display:flex;flex-direction:column;flex:1} .card__name{font-family:var(--display);font-weight:400;font-size:1.34rem;line-height:1.1;margin:0 0 6px} .card__legal{ font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:#6a6690;margin:0 0 14px; } .genres{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0;list-style:none} .genres li{ font-family:var(--mono);font-weight:700;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase; background:var(--accent);border:2px solid var(--ink);padding:3px 8px;color:var(--ink); } .card__blurb{font-size:14.5px;color:#3b3766;margin:0 0 18px;flex:1} .card__links{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap} .card__links a{ font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase; text-decoration:none;background:var(--cream);border:2px solid var(--ink); padding:6px 10px;box-shadow:3px 3px 0 var(--ink); transition:transform .12s ease,box-shadow .12s ease,background .12s ease; } .card__links a:hover{background:var(--sun);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)} .card__links a[aria-disabled="true"]{opacity:.4;box-shadow:none;pointer-events:none;border-style:dashed} /* ---- schedule ---- */ .sched{background:var(--grape);border-top:5px solid var(--ink);border-bottom:5px solid var(--ink);color:var(--cream)} .sched .sec-head h2{color:var(--cream);text-shadow:4px 4px 0 var(--ink)} .sched .rule{background:repeating-linear-gradient(90deg,var(--sun) 0 18px,transparent 18px 30px)} .days{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:26px} .day{background:var(--cream);color:var(--ink);border:4px solid var(--ink);box-shadow:var(--shadow);padding:0} .day__hd{background:var(--sun);border-bottom:4px solid var(--ink);padding:16px 20px} .day__hd h3{font-family:var(--display);font-weight:400;font-size:1.5rem;margin:0;line-height:1} .day__hd p{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin:6px 0 0} .day__body{padding:8px 20px 18px} .slot{display:flex;gap:14px;padding:12px 0;border-bottom:2px dashed rgba(20,16,59,.22);font-size:14.5px} .slot:last-child{border-bottom:0} .slot time{font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.08em;flex:0 0 74px;padding-top:2px;color:var(--grape)} .slot .tbd{color:#6a6690;font-style:italic} /* ---- footer ---- */ footer{background:var(--ink);color:var(--cream);padding:56px 0 40px} footer .cols{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap} footer h4{font-family:var(--display);font-weight:400;font-size:14px;color:var(--sun);margin:0 0 14px} footer a{color:var(--sky);text-decoration:none;display:block;margin-bottom:8px;font-size:14.5px} footer a:hover{color:var(--sun)} .colophon{ margin-top:38px;padding-top:20px;border-top:3px dashed rgba(255,249,236,.28); font-family:var(--mono);font-size:11.5px;color:rgba(255,249,236,.55); } @media (max-width:780px){ .orb--1{width:150px;height:150px;right:-46px;top:14px} .orb--1::after{width:210px;height:50px} section{padding:54px 0} .hero{padding:52px 0 64px} }