:root{
  --black:#000;
  --panel:#0b0b0d;
  --panel-2:#121216;
  --line:rgba(255,255,255,.09);
  --gold:#e3b04b;
  --gold-hi:#ffd98a;
  --text:#f2ede2;
  --muted:#8f8a80;
  --display:"Anton","Impact",sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --nav-h:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;background:var(--black);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--black);color:var(--text);font-family:var(--sans);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1240px;margin:0 auto;padding:0 16px}

.field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main,footer{position:relative;z-index:1}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;height:var(--nav-h);background:rgba(0,0,0,.93);border-bottom:1px solid var(--line);transition:height .35s ease,background .35s ease}
.nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav .brand{position:relative;display:block}
.nav .brand img{height:38px;width:auto;transition:height .35s ease}
.nav.scrolled{height:52px;background:rgba(0,0,0,.6)}
.nav.scrolled .brand img{height:28px}
.nav.spark .brand::after{content:"";position:absolute;top:50%;left:-10%;width:30%;height:140%;transform:translateY(-50%) skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,225,150,.9),transparent);animation:glint .9s ease-out forwards;pointer-events:none;mix-blend-mode:screen}
@keyframes glint{from{left:-20%;opacity:1}to{left:110%;opacity:0}}
.nav .links{position:relative;display:flex;gap:26px;list-style:none}
.nav .links a{display:block;font-weight:600;font-size:14px;letter-spacing:.02em;color:#e9e4d8;padding:8px 0;transition:color .2s}
.nav .links a:hover,.nav .links a[aria-current="page"]{color:#fff}
.nav .ink{position:absolute;left:0;bottom:0;height:2px;width:0;opacity:0;background:linear-gradient(90deg,var(--gold),var(--gold-hi));box-shadow:0 0 10px rgba(255,200,90,.8),0 2px 14px rgba(255,200,90,.5);transition:transform .35s cubic-bezier(.3,.7,.2,1),width .35s cubic-bezier(.3,.7,.2,1),opacity .2s;pointer-events:none}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;position:relative;z-index:80}
.burger span,.burger span::before,.burger span::after{display:block;width:24px;height:2px;background:#fff;position:relative;transition:transform .3s,background .3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-8px}.burger span::after{top:8px}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{transform:translateY(8px) rotate(45deg);background:var(--gold-hi)}
.menu-open .burger span::after{transform:translateY(-8px) rotate(-45deg);background:var(--gold-hi)}

/* language switch: rounded pills, same pattern as gibwork.com */
.lang{display:flex;gap:6px;margin-left:20px}
.lang button{background:rgba(255,255,255,.08);border:1px solid rgba(227,176,75,.35);color:#f2ede2;font:600 12px var(--sans);padding:6px 12px;border-radius:999px;cursor:pointer;transition:.2s}
.lang button:hover{background:rgba(227,176,75,.2)}
.lang button.on{background:linear-gradient(var(--gold-hi),var(--gold));border-color:var(--gold-hi);color:#140c02}
.menu .lang{position:relative;margin:26px 0 0;align-self:flex-start}
.menu .lang button{font-size:14px;padding:9px 18px}
@media (max-width:860px){.nav .lang{margin-left:auto;gap:4px}.nav .lang button{font-size:10.5px;padding:4px 8px}.nav .burger{margin-left:4px}}
@media (max-width:360px){.nav .brand img{height:30px}.nav .lang button{padding:3px 6px}}

/* full-screen menu */
.menu{position:fixed;inset:0;z-index:70;overflow:hidden;background:#000;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + 10px) 22px 30px;opacity:0;visibility:hidden;clip-path:circle(0% at calc(100% - 38px) 32px);transition:clip-path .6s cubic-bezier(.7,0,.2,1),opacity .3s,visibility 0s .6s}
.menu-open .menu{opacity:1;visibility:visible;clip-path:circle(150% at calc(100% - 38px) 32px);transition:clip-path .7s cubic-bezier(.7,0,.2,1),opacity .2s}
.menu-open{overflow:hidden}
.menu-open .nav .lang{visibility:hidden;opacity:0}
.nav .lang{transition:opacity .25s}
.menu-open .nav{z-index:75;background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.menu-lattice{position:absolute;inset:0;opacity:.35;pointer-events:none;background:
  radial-gradient(circle at 70% 20%,rgba(227,176,75,.25),transparent 55%),
  repeating-linear-gradient(45deg,transparent 0 38px,rgba(227,176,75,.14) 38px 39px),
  repeating-linear-gradient(-45deg,transparent 0 38px,rgba(227,176,75,.14) 38px 39px)}
.menu ol{list-style:none;position:relative;display:flex;flex-direction:column;gap:6px}
.menu li{opacity:0;transform:translateX(40px);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.menu-open .menu li{opacity:1;transform:none;transition-delay:calc(.18s + var(--i) * .06s)}
.menu a{display:flex;align-items:center;gap:16px;padding:8px 0;font-family:var(--display);text-transform:uppercase;font-size:clamp(34px,9vw,58px);line-height:1;color:#fff}
.menu a img{width:54px;height:54px;object-fit:cover;object-position:50% 15%;transform:skewX(-10deg);border:1px solid rgba(227,176,75,.4)}
.menu a[aria-current="page"],.menu a:active{color:var(--gold-hi)}
.menu a[aria-current="page"] img{box-shadow:0 0 18px rgba(255,200,90,.6)}
.menu-foot{position:relative;margin-top:28px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

/* bottom tab bar on phones */
.tabbar{display:none}
@media (max-width:860px){
  .burger{display:flex}
  .nav .links{display:none}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;justify-content:space-around;background:rgba(0,0,0,.95);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:#9a9488;padding:4px 0;transition:color .2s,transform .2s}
  .tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
  .tabbar a.on{color:var(--gold-hi)}
  .tabbar a.on svg{filter:drop-shadow(0 0 6px rgba(255,200,90,.7))}
  .tabbar a:active{transform:scale(.92)}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}

/* mini player */
.mini{position:fixed;left:50%;bottom:18px;z-index:56;width:min(460px,calc(100% - 24px));transform:translate(-50%,140%);display:flex;align-items:center;gap:12px;padding:8px 10px 8px 8px;background:rgba(14,12,10,.97);border:1px solid rgba(227,176,75,.45);box-shadow:0 10px 40px rgba(0,0,0,.7),0 0 24px rgba(227,176,75,.15);overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.mini.show{transform:translate(-50%,0)}
.mini .m-play{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:linear-gradient(var(--gold-hi),var(--gold));display:flex;align-items:center;justify-content:center}
.mini .m-play svg{width:13px;height:13px;fill:#140c02}
.mini .m-txt{flex:1;min-width:0;line-height:1.25}
.mini .m-k{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mini b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .m-x{font-size:24px;color:#aaa;width:32px}
.mini .m-prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold-hi);box-shadow:0 0 8px var(--gold)}
@media (max-width:860px){.mini{bottom:calc(72px + env(safe-area-inset-bottom))}}

/* ---------- headings ---------- */
.h-display{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1}
.sec{padding:44px 0 8px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.sec-head h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4vw,44px);text-transform:uppercase;line-height:1}
.see-all{font-size:14px;font-weight:600;color:#e9e4d8;white-space:nowrap}
.see-all:hover{color:var(--gold-hi)}
.see-all::after{content:" \2192"}
.page-head{padding:40px 0 10px}
.page-head h1{font-family:var(--display);font-weight:400;font-size:clamp(44px,8vw,96px);text-transform:uppercase;line-height:.95}
.page-head p{color:var(--muted);max-width:none;margin-top:12px;font-size:17px;text-wrap:pretty}
.crumb{font-size:14px;color:var(--muted);padding-top:22px}
.crumb a:hover{color:var(--gold-hi)}

/* ---------- banner ---------- */
.banner{position:relative;overflow:hidden;background:#000}
.banner img{width:100%;height:auto;aspect-ratio:2.7/1;object-fit:cover;object-position:50% 50%}   /* the full-cast banner, shown whole (18 Oct) */
.banner::after{content:"";position:absolute;inset:auto 0 0 0;height:28%;background:linear-gradient(transparent,#000)}

.sorcery{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:screen}
.banner-cta{position:absolute;left:0;right:0;bottom:clamp(14px,1.8vw,30px);z-index:3;display:flex;justify-content:center;gap:16px;padding:0 16px}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);text-transform:uppercase;font-size:clamp(17px,1.8vw,22px);letter-spacing:.06em;padding:13px 30px;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:transform .25s ease,box-shadow .25s,background .25s,color .25s}
.btn span{font-size:.7em}
.btn.gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#140c02;box-shadow:0 0 30px rgba(227,176,75,.45)}
.btn.gold:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 0 46px rgba(255,200,90,.75)}
.btn{position:relative;isolation:isolate}
.btn.ghost{background:rgba(255,255,255,.85);color:#fff}
.btn.ghost::before{content:"";position:absolute;inset:2px;z-index:-1;background:rgba(0,0,0,.82);clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%);transition:background .25s}
.btn.ghost:hover{transform:translateY(-3px) scale(1.04);background:#ff5a5f}
.btn.ghost:hover::before{background:rgba(212,35,45,.85)}
@media (max-width:560px){.banner img{height:auto;aspect-ratio:2.7/1}.banner::after{height:18%}.banner-cta{position:relative;bottom:auto;padding:14px 16px 4px;gap:10px}.btn{padding:11px 22px;font-size:17px}}

/* ---------- feature panels (movies / comics) ---------- */
.features{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:-24px;position:relative;z-index:2}
.feature{display:block;background:var(--panel);border:1px solid var(--line);overflow:hidden;transition:transform .35s ease,border-color .35s,box-shadow .35s}
.feature .art{height:340px;overflow:hidden;position:relative}
.feature .art img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.feature .meta{padding:16px 18px 18px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.feature h3{font-family:var(--display);font-weight:400;font-size:30px;text-transform:uppercase;line-height:1}
.feature .sub{font-weight:600;margin-top:6px}
.feature .status{font-size:13px;color:var(--muted)}
.feature .arrow{font-size:22px;color:var(--gold)}
.feature:hover{transform:translateY(-4px);border-color:rgba(227,176,75,.6);box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 30px rgba(227,176,75,.15)}
.feature:hover .art img{transform:scale(1.05)}
.feature.movie .art{background:#0a0203}
.feature.movie .art img.bg{position:absolute;inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);object-fit:cover;object-position:50% 40%;filter:blur(18px) brightness(.45) saturate(1.3)}
.feature.movie .art img.fg{position:relative;height:92%;width:auto;margin:4% auto 0;object-fit:contain;box-shadow:0 18px 40px rgba(0,0,0,.7),0 0 50px rgba(212,35,45,.35)}
.feature.movie:hover .art img.fg{transform:scale(1.03)}
.feature.movie:hover .art img.bg{transform:none}
.feature.comic .art{background:#f1e2b8 radial-gradient(rgba(0,0,0,.22) 1px,transparent 1.6px) 0 0/7px 7px}
.feature.comic .art img{width:auto;height:88%;margin:5% auto 0;transform:rotate(-5deg);box-shadow:0 14px 30px rgba(0,0,0,.55);object-fit:contain}
.feature.comic:hover .art img{transform:rotate(-3deg) scale(1.04)}
@media (max-width:720px){.features{grid-template-columns:1fr;margin-top:0}.feature .art{height:300px}}

/* ---------- slanted marvel-style rows ---------- */
.slants{display:flex;height:300px;gap:0;padding:0 26px;--skew:-14deg}
.slants.tall{height:340px}
.slant{position:relative;flex:1 1 0;min-width:0;transform:skewX(var(--skew));overflow:hidden;margin:0 3px;border:1px solid rgba(255,255,255,.12);background:#080808;transition:flex-grow .45s cubic-bezier(.2,.7,.2,1),filter .35s,border-color .35s,box-shadow .35s,transform .35s;outline:none}
.slant img{position:absolute;top:0;left:-30%;width:160%;max-width:none;height:100%;object-fit:cover;transform:skewX(calc(var(--skew) * -1));transition:transform .6s ease}
.slant::after{content:"";position:absolute;inset:50% 0 0 0;background:linear-gradient(transparent,rgba(0,0,0,.9))}
.slant .label{position:absolute;left:22px;bottom:14px;z-index:2;transform:skewX(calc(var(--skew) * -1));font-weight:700;font-size:16px;text-shadow:0 2px 8px #000}
.slants:hover .slant,.slants:focus-within .slant{filter:brightness(.62) saturate(.85)}
.slants .slant:hover,.slants .slant:focus-visible,.slant.pop{flex-grow:1.9;filter:none !important;border-color:var(--glow,var(--gold));box-shadow:0 0 0 2px var(--glow,var(--gold)),0 0 34px color-mix(in srgb,var(--glow,var(--gold)) 55%,transparent);z-index:3}
.slant:hover img,.slant.pop img{transform:skewX(calc(var(--skew) * -1)) scale(1.06)}
@media (max-width:720px){
  .slants,.slants.tall{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 22px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .slants::-webkit-scrollbar{display:none}
  .slant{flex:0 0 46%;height:250px;scroll-snap-align:center}
  .slants:hover .slant{filter:none}
  .slants .slant:hover{flex-grow:0}
  .slant.pop{transform:skewX(var(--skew)) scale(1.05)}
}

/* ---------- square cards (characters, music, news) ---------- */
.grid{display:grid;gap:14px}
.grid.six{grid-template-columns:repeat(6,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.grid.six{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid.six{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three,.grid.four{grid-template-columns:1fr}}
.card{display:block;background:var(--panel);border:1px solid var(--line);overflow:hidden;transition:transform .3s ease,border-color .3s,box-shadow .3s}
a.card:hover,.card.pop{transform:translateY(-4px) scale(1.02);border-color:rgba(227,176,75,.55);box-shadow:0 14px 30px rgba(0,0,0,.6)}
.card .thumb{aspect-ratio:1/1;overflow:hidden;position:relative;background:#0d0d10}
.card .thumb.wide{aspect-ratio:16/9}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease}
a.card:hover .thumb img{transform:scale(1.05)}
.card .body{padding:12px 14px 14px}
.card .name{font-weight:700;font-size:15px}
.card .role{font-size:13px;color:var(--muted)}
.pill{display:inline-block;margin-top:8px;font-size:11px;font-weight:600;letter-spacing:.04em;padding:3px 10px;border-radius:99px;background:#24242a;color:#cfc9bd}
.date{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.card .title{font-weight:700;font-size:17px;line-height:1.3;margin-top:4px}

/* person placeholder: initials on lattice */
.initials{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:clamp(34px,5vw,54px);color:var(--gold);
  background:
    radial-gradient(circle at 50% 45%,rgba(227,176,75,.18),transparent 62%),
    repeating-linear-gradient(45deg,transparent 0 22px,rgba(227,176,75,.08) 22px 23px),
    repeating-linear-gradient(-45deg,transparent 0 22px,rgba(227,176,75,.08) 22px 23px),#07070a}

/* characters tile on home */
.people-row{display:grid;grid-template-columns:1.4fr repeat(6,minmax(0,1fr));gap:12px}
.people-row .lead{position:relative;overflow:hidden;border:1px solid var(--line);min-height:180px}
.people-row .lead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.people-row .lead span{position:absolute;left:14px;bottom:12px;font-weight:700;text-shadow:0 2px 8px #000}
@media (max-width:1000px){.people-row{grid-template-columns:repeat(3,minmax(0,1fr))}.people-row .lead{grid-column:1/-1;min-height:220px}}
@media (max-width:860px){.people-row{grid-template-columns:1fr}.people-row .card{display:none}.people-row .lead{grid-column:auto;min-height:0;aspect-ratio:16/9}}

/* ---------- music ---------- */
.track{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);padding:10px;transition:border-color .3s}
.track.playing{border-color:rgba(227,176,75,.6)}
.track img{width:96px;height:96px;object-fit:cover;background:#000}
.track .t-name{font-weight:700}
.track .t-len{font-size:12px;color:var(--muted)}
.track .ctrl{display:flex;align-items:center;gap:10px;margin-top:8px}
.play{width:40px;height:40px;flex:0 0 40px;border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;transition:background .2s}
.play:hover{background:rgba(227,176,75,.15)}
.play svg{width:14px;height:14px;fill:var(--gold-hi)}
.bar{position:relative;flex:1;height:26px;cursor:pointer;
  background:repeating-linear-gradient(90deg,rgba(227,176,75,.35) 0 2px,transparent 2px 5px);
  -webkit-mask:linear-gradient(#000,#000);mask:linear-gradient(#000,#000)}
.bar i{position:absolute;inset:0 auto 0 0;width:0;background:repeating-linear-gradient(90deg,var(--gold-hi) 0 2px,transparent 2px 5px)}
.bar::before{content:"";position:absolute;inset:0;background:inherit;clip-path:polygon(0 40%,4% 20%,8% 55%,12% 10%,16% 45%,20% 25%,24% 60%,28% 15%,32% 50%,36% 30%,40% 65%,44% 20%,48% 40%,52% 10%,56% 55%,60% 25%,64% 45%,68% 15%,72% 60%,76% 30%,80% 50%,84% 20%,88% 45%,92% 30%,96% 55%,100% 35%,100% 100%,0 100%)}

/* ---------- character page ---------- */
.ch-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:34px;align-items:start;padding:20px 0 30px}
.ch-portrait{aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line);box-shadow:0 0 60px color-mix(in srgb,var(--accent) 22%,transparent)}
.ch-portrait img{width:100%;height:100%;object-fit:cover}
.ch-title{max-width:520px;margin-bottom:16px;filter:drop-shadow(0 0 22px color-mix(in srgb,var(--accent) 40%,transparent))}
.ch-desc{font-family:var(--display);text-transform:uppercase;font-size:20px;color:var(--accent);margin:-4px 0 12px;letter-spacing:.02em}
.stats{width:100%;border-collapse:collapse}
.stats th,.stats td{text-align:left;padding:11px 0;border-top:1px solid var(--line);vertical-align:top;font-size:15px}
.stats th{color:var(--muted);font-weight:500;width:38%;padding-right:14px}
.gauges{display:grid;grid-template-columns:1fr 1fr;gap:18px 40px;padding:26px 0 34px;border-top:1px solid var(--line)}
.gauge .g-name{font-weight:700;font-size:14px;margin-bottom:6px;display:flex;justify-content:space-between}
.gauge .g-val{color:var(--muted);font-weight:600}
.g-track{position:relative;height:14px;display:flex;gap:3px}
.g-track b{flex:1;background:#1f1f24;transform:skewX(-18deg)}
.g-track b.on{background:linear-gradient(var(--gold-hi),var(--gold));box-shadow:0 0 8px rgba(227,176,75,.5)}
.gauge.max .g-track{margin-right:110px}
.gauges{overflow:hidden}
@media (max-width:560px){.gauge.max .g-track{margin-right:70px}.gauge.max .g-track::after{right:-70px;width:80px}}
.gauge.max .g-track::after{content:"";position:absolute;right:-110px;top:50%;width:120px;height:4px;transform:translateY(-50%);background:linear-gradient(90deg,var(--gold-hi),rgba(255,217,138,0));box-shadow:0 0 18px 6px rgba(255,200,90,.55);animation:burst 1.6s ease-in-out infinite}
.gauge.max .g-val{color:var(--gold-hi);font-family:var(--display);font-weight:400;letter-spacing:.04em;text-shadow:0 0 12px rgba(255,200,90,.7)}
.gauge.unknown .g-track b{background:repeating-linear-gradient(45deg,#2a2a30 0 4px,#16161a 4px 8px)}
@keyframes burst{0%,100%{opacity:.75;width:100px}50%{opacity:1;width:130px}}
.story{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:34px;padding:32px 0;border-top:1px solid var(--line)}
.story.solo{grid-template-columns:1fr}
.story h2{font-family:var(--display);font-weight:400;font-size:40px;text-transform:uppercase;margin-bottom:14px}
.story h3{font-size:18px;margin:18px 0 4px;color:#fff}
.story h3:first-of-type{margin-top:0}
.story p{color:#d9d3c6;font-size:16.5px}
.story .pic{border:1px solid var(--line);overflow:hidden;align-self:start}
.story .pic img{width:100%}
.story .pull{grid-column:1/-1;font-family:Georgia,serif;font-size:clamp(26px,4vw,42px);line-height:1.2;color:var(--gold-hi);margin-top:8px}
.relations{display:flex;flex-wrap:wrap;gap:12px;padding:26px 0;border-top:1px solid var(--line)}
.relations h2,.seen h2{width:100%;font-family:var(--display);font-weight:400;font-size:28px;text-transform:uppercase}
.relations .rel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%}
.rel{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start;background:var(--panel);border:1px solid var(--line);padding:10px;transition:border-color .25s}
.rel:hover{border-color:var(--glow,var(--gold));box-shadow:0 0 22px color-mix(in srgb,var(--glow,var(--gold)) 30%,transparent)}
.rel .d{font-size:14px;color:#cfc8ba;margin-top:4px;line-height:1.5}
@media (max-width:720px){.relations .rel-grid{grid-template-columns:1fr}}
.rel .thumb{width:96px;height:96px;transform:skewX(-8deg);overflow:hidden;border:1px solid var(--line);transition:transform .25s,border-color .25s}
.rel:hover .thumb{transform:translateY(-3px);border-color:var(--gold)}
.rel img{width:100%;height:100%;object-fit:cover;transform:skewX(8deg) scale(1.18)}
.rel .n{font-weight:700;font-size:15px}
.rel .k{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-left:6px}
.seen{display:flex;flex-wrap:wrap;gap:14px;padding:26px 0 40px;border-top:1px solid var(--line)}
.seen a{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);padding:8px;min-width:300px;flex:1;transition:border-color .25s}
.seen a:hover{border-color:var(--gold)}
.seen img{width:150px;height:96px;object-fit:cover}
.seen .k{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
@media (max-width:820px){.ch-top,.story{grid-template-columns:minmax(0,1fr)}.ch-title{width:100%}.gauges{grid-template-columns:1fr}.seen a{min-width:0}}

/* background: text wraps beside the poster, then runs full width below it */
.story.flow{display:block;padding:32px 0;border-top:1px solid var(--line)}
.story.flow::after{content:"";display:block;clear:both}
.story.flow .pic{float:right;width:min(42%,460px);margin:6px 0 18px 32px;border:1px solid var(--line);overflow:hidden;box-shadow:0 0 50px color-mix(in srgb,var(--accent) 22%,transparent)}
.story.flow .pic img{width:100%;max-height:none;aspect-ratio:2/3;object-fit:cover;object-position:50% 15%}
.story.flow h3{font-size:19px;margin:22px 0 6px;color:#fff}
.story.flow h3:first-of-type{margin-top:6px}
.story.flow p{font-size:17px;line-height:1.75;color:#d9d3c6;max-width:none}
.story.flow .pull{clear:both;margin-top:26px}
@media (max-width:720px){.story.flow .pic{float:none;width:100%;margin:0 0 18px}}

/* character page: entrance, browse controls */
.topline{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mini-steps{display:flex;gap:8px;padding-top:18px}
.mini-steps a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);font-size:18px;color:var(--gold-hi);transition:border-color .2s,background .2s}
.mini-steps a:hover{border-color:var(--accent,var(--gold));background:rgba(255,255,255,.04)}
.ch-portrait{position:relative}
.ch-portrait img{transition:transform .25s ease-out;will-change:transform}
.enter .ch-portrait{animation:seam 1s cubic-bezier(.7,0,.2,1) both}
.enter .ch-portrait::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);background:linear-gradient(transparent,var(--gold-hi),transparent);box-shadow:0 0 22px 6px rgba(255,200,90,.7);animation:seamline 1s ease forwards;pointer-events:none}
@keyframes seam{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes seamline{0%{opacity:1;width:3px}70%{opacity:1;width:100%;background:linear-gradient(90deg,transparent,rgba(255,220,150,.25),transparent)}100%{opacity:0;width:100%}}
.enter .ch-title{animation:slam .7s cubic-bezier(.2,1.4,.4,1) .55s both}
@keyframes slam{0%{opacity:0;transform:scale(1.8);filter:blur(10px)}60%{opacity:1;transform:scale(.96);filter:blur(0)}80%{transform:scale(1.02) translateX(-3px)}100%{transform:none}}
.enter .ch-desc,.enter .stats{animation:fadeup .6s ease 1s both}
@keyframes fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.gauges.in .g-track b.on{animation:segon .35s ease both;animation-delay:calc(var(--gi) * .18s + var(--si) * .05s)}
@keyframes segon{from{background:#1f1f24;box-shadow:none;transform:skewX(-18deg) scaleY(.4)}}
.gauges .gauge.max .g-track::after{opacity:0}
.gauges.in .gauge.max .g-track::after{opacity:1;animation:burstin .5s ease both,burst 1.6s ease-in-out infinite;animation-delay:calc(var(--gi) * .18s + .55s),calc(var(--gi) * .18s + 1.05s)}
@keyframes burstin{from{opacity:0;width:0}to{opacity:1;width:100px}}
.leave-l{transform:translateX(-40px);opacity:0;transition:transform .22s ease,opacity .22s ease}
.leave-r{transform:translateX(40px);opacity:0;transition:transform .22s ease,opacity .22s ease}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:10px 0 40px}
.step{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);transition:border-color .25s,box-shadow .25s,transform .25s}
.step.next{align-items:flex-end;text-align:right}
.step:hover{transform:translateY(-3px);border-color:var(--glow);box-shadow:0 0 26px color-mix(in srgb,var(--glow) 30%,transparent)}
.step .s-k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.step .s-n{display:flex;align-items:center;gap:12px;font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,3vw,32px);line-height:1}
.step.next .s-n{flex-direction:row-reverse}
.step img{width:58px;height:58px;object-fit:cover;object-position:50% 0;transform:skewX(-8deg);border:1px solid rgba(255,255,255,.15)}
@media (max-width:560px){.step .s-n{font-size:20px}.step img{width:44px;height:44px}}
@media (prefers-reduced-motion:reduce){.enter .ch-portrait,.enter .ch-portrait::after,.enter .ch-title,.enter .ch-desc,.enter .stats,.gauges.in .g-track b.on{animation:none}}

/* phones: character name sits above the portrait, at half size */
.ch-title-m{display:none}
@media (max-width:820px){
  .ch-title-m{display:block;width:50%;max-width:260px;margin:0 auto 4px;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 40%,transparent))}
  .enter .ch-title-m{animation:slam .7s cubic-bezier(.2,1.4,.4,1) .55s both}
  .ch-info .ch-title{display:none}
}

/* gallery + lightbox */
.gallery{padding:26px 0;border-top:1px solid var(--line)}
.gallery h2{font-family:var(--display);font-weight:400;font-size:28px;text-transform:uppercase;margin-bottom:14px}
.g-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.g-item{flex:0 0 auto;width:170px;text-align:left;scroll-snap-align:start}
.g-item img{width:170px;height:240px;object-fit:cover;border:1px solid var(--line);transition:transform .3s,border-color .3s}
.g-item:hover img{transform:translateY(-3px);border-color:var(--accent,var(--gold))}
.g-item span{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 0 60px rgba(0,0,0,.8)}
.lightbox button{position:absolute;top:12px;right:18px;font-size:38px;line-height:1;color:#fff}
.story .pic img{max-height:620px;width:100%;object-fit:cover;object-position:50% 20%}

/* ---------- movies / comics ---------- */
.letterbox{position:fixed;inset:0;z-index:58;pointer-events:none}
.letterbox i{position:absolute;left:0;right:0;height:50vh;background:#000;animation:barsout 1.5s cubic-bezier(.7,0,.2,1) .35s forwards}
.letterbox i:first-child{top:0;transform-origin:top}
.letterbox i:last-child{bottom:0;transform-origin:bottom}
@keyframes barsout{0%{transform:scaleY(1)}45%{transform:scaleY(.24)}75%{transform:scaleY(.24)}100%{transform:scaleY(0)}}
.movie-hero h1{animation:trailer 1.4s ease .5s both}
@keyframes trailer{from{opacity:0;letter-spacing:.3em;filter:blur(6px)}to{opacity:1;letter-spacing:.01em;filter:none}}
.movie-hero.flicker h1,.movie-hero.flicker .lead-p,.movie-hero.flicker ~ #f-story{animation:softfade .6s ease both}
@keyframes softfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.letterbox{display:none}.movie-hero h1{animation:none}}

.movie-hero{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:34px;align-items:center;padding:20px 0 34px}
.movie-hero .poster{border:1px solid var(--line);box-shadow:0 0 70px rgba(212,35,45,.25)}
.badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border:1px solid var(--gold);color:var(--gold-hi)}
.lead-p{font-size:18px;color:#ddd6c8;margin-top:16px}
.trilogy{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.trilogy div,.trilogy button{background:var(--panel);border:1px solid var(--line);padding:14px;text-align:left;cursor:pointer;transition:border-color .25s,transform .25s}
.trilogy button:hover{transform:translateY(-3px);border-color:rgba(227,176,75,.5)}
.trilogy b{font-family:var(--display);font-weight:400;font-size:22px;text-transform:uppercase;display:block}
.trilogy span{font-size:12px;color:var(--muted)}
.trilogy .now{border-color:rgba(227,176,75,.6)}
@media (max-width:760px){.movie-hero{grid-template-columns:minmax(0,1fr)}.movie-hero .poster{width:100%}.movie-hero .poster{max-width:380px}.trilogy{grid-template-columns:1fr}}

.reader{display:flex;flex-direction:column;align-items:center;padding:16px 0 40px}
.book{width:min(100%,1000px);margin:0 auto}
.book .page{background:#f4ead0}
.book .page img{width:100%;height:100%;object-fit:contain;background:#000}
.reader-ctrl{display:flex;align-items:center;gap:16px;margin-top:16px}
.reader-ctrl button{border:1px solid var(--gold);color:var(--gold-hi);padding:8px 18px;font-weight:700}
.reader-ctrl button:disabled{opacity:.35;cursor:default}
.reader-ctrl .count{font-size:14px;color:var(--muted);min-width:120px;text-align:center}
.reader-note{font-size:13px;color:var(--muted);margin-top:10px;text-align:center}
.single{position:relative;width:min(100%,560px);aspect-ratio:2/3;perspective:1600px}
.single img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform .5s ease,opacity .5s ease;backface-visibility:hidden}
.single img.out-l{transform:rotateY(-80deg);transform-origin:left center;opacity:0}
.single img.out-r{transform:rotateY(80deg);transform-origin:right center;opacity:0}

/* ---------- news ---------- */
.post{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:28px;padding:28px 0;border-top:1px solid var(--line);align-items:center}
.post .pic{border:1px solid var(--line);overflow:hidden}
.post .pic img{width:100%;aspect-ratio:16/9;object-fit:cover}
.post p{color:#d9d3c6;font-size:16.5px}
@media (max-width:720px){.post{grid-template-columns:1fr}}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- footer ---------- */
footer{margin-top:50px;border-top:1px solid var(--line);padding:28px 0 34px;font-size:13px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
footer .links{display:flex;gap:20px;flex-wrap:wrap}
footer a:hover{color:var(--gold-hi)}
.a2h{border:1px solid rgba(227,176,75,.45);color:var(--gold);padding:7px 14px;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase}

/* ---------- intro ident ---------- */
.intro{position:fixed;inset:0;z-index:100;background:#000;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .7s ease}
.intro canvas{position:absolute;inset:0;width:100%;height:100%}
.intro img{position:relative;width:min(760px,86vw);opacity:0;filter:blur(8px) brightness(1.4);transform:scale(.96);transition:opacity 1s ease,filter 1.2s ease,transform 1.6s ease}
.intro.logo img{opacity:1;filter:none;transform:scale(1)}
.intro.out{opacity:0;pointer-events:none}
.intro .skip{position:absolute;bottom:22px;right:22px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6d675c}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .slant,.slant img,.feature,.card,.feature .art img{transition:none}
  .gauge.max .g-track::after{animation:none}
}

/* ===== "Played by" card in Seen in (character pages): actor photo or IMDb badge, name, link to IMDb ===== */
.seen a.cast{grid-template-columns:150px 1fr auto}
.seen .imdb{width:150px;height:96px;display:flex;align-items:center;justify-content:center;background:#0b0b0d;border:1px solid rgba(255,255,255,.08);font-size:0}
.seen .imdb::before{content:"IMDb";font:900 26px/1 Arial,Helvetica,sans-serif;letter-spacing:-.5px;color:#000;background:#f5c518;border-radius:5px;padding:7px 10px}
.seen .cast b{font-size:18px}
.seen .cast .via{font-size:12px;color:var(--muted);margin-top:2px}
.seen .cast .ext{color:var(--gold-hi);font-size:20px;padding-right:10px}

/* ===== Movies: cast strip under the three film tabs, same width, scrolls sideways with arrows ===== */
.cast-wrap{position:relative;margin-top:22px}
.cast-h{font-family:var(--display);font-weight:400;font-size:22px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:10px}
.cast-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.cast-strip::-webkit-scrollbar{display:none}
.cast-card{flex:0 0 142px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:var(--panel);border:1px solid var(--line);padding:8px;transition:border-radius .7s ease}
.cast-card .cc-img{width:72px;height:72px;overflow:hidden;background:#0b0b0d;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;margin-bottom:8px;position:relative;transition:border-radius .7s ease}
.cast-card .cc-img img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.cast-card .cc-img svg{width:44px;height:44px;fill:rgba(227,176,75,.45)}
.cast-card b{font-size:14px;line-height:1.25}
.cast-card span{font-size:12px;color:var(--muted)}
.cc-btn{display:block;margin-top:9px;width:100%;text-align:center;font:900 13px/1 Arial,Helvetica,sans-serif;letter-spacing:.02em;color:#000 !important;background:#f5c518;border-radius:5px;padding:7px 0;transition:filter .2s}
a.cc-btn:hover{filter:brightness(1.1)}
.cc-btn.soon{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
.cast-arrow{position:absolute;top:50%;width:38px;height:38px;border-radius:50%;border:1px solid rgba(227,176,75,.6);background:rgba(0,0,0,.82);color:var(--gold-hi);font-size:26px;line-height:1;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s;z-index:2}
.cast-arrow.next{right:-12px}.cast-arrow.prev{left:-12px}
.cast-arrow.on{opacity:1;pointer-events:auto}
.cast-arrow:hover{background:rgba(227,176,75,.2)}
@media (max-width:640px){.cast-card{flex-basis:132px}.cast-arrow.next{right:-4px}.cast-arrow.prev{left:-4px}}

/* ===== softer hover on the hero and villain boxes: slower, gentler widening and zoom ===== */
.slant{transition:flex-grow .9s cubic-bezier(.33,0,.2,1),filter .7s ease,border-color .7s ease,box-shadow .8s ease,transform .7s ease,border-radius .7s ease}
.slants .slant:hover,.slants .slant:focus-visible,.slant.pop{flex-grow:1.55}
.slant img{transition:transform 1.4s cubic-bezier(.33,0,.2,1)}
.slant:hover img,.slant.pop img{transform:skewX(calc(var(--skew) * -1)) scale(1.035)}
.slants:hover .slant,.slants:focus-within .slant{filter:brightness(.72) saturate(.9)}

/* ===== 1985 mode: the site as an old CRT television. Remembered per visitor (fu-1985). Fades only, nothing flickers.
   Costs nothing when it is off: the grain, glare and tube shadows are only painted inside .mode-1985. ===== */
.retro{background:rgba(255,255,255,.08);border:1px solid rgba(227,176,75,.35);color:#f2ede2;font:700 12px var(--sans);letter-spacing:.08em;padding:6px 12px;border-radius:4px;cursor:pointer;margin-left:18px;transition:background .2s,color .2s,opacity .25s}
.retro:hover{background:rgba(227,176,75,.2)}
.retro.on{background:linear-gradient(var(--gold-hi),var(--gold));border-color:var(--gold-hi);color:#140c02}
.nav .retro + .lang{margin-left:10px}
.menu-open .nav .retro{visibility:hidden;opacity:0}
.menu-opts{position:relative;display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:26px;align-self:flex-start}
.menu .menu-opts .lang{margin:0}
.menu .retro{font-size:14px;padding:9px 18px;margin:0}
@media (max-width:860px){.nav .retro{margin-left:auto;font-size:10.5px;letter-spacing:.04em;padding:4px 7px}.nav .retro + .lang{margin-left:6px}}
@media (max-width:360px){.nav .retro{padding:3px 5px;font-size:10px}}
/* the screen: a fixed overlay with rounded tube corners, a dark glass edge, fine grain and faint scanlines */
.crt{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:0;transition:opacity .7s ease;border-radius:34px}
.mode-1985 .crt{opacity:1;box-shadow:0 0 0 80px #000,inset 0 0 90px 30px rgba(0,0,0,.85);
  background:url(../img/grain.png) repeat,repeating-linear-gradient(to bottom,rgba(0,0,0,.2) 0 1px,transparent 1px 3px)}
h1,h2,h3{transition:text-shadow .7s ease}
.mode-1985 h1,.mode-1985 h2,.mode-1985 h3{text-shadow:0 0 14px rgba(255,190,90,.45)}
/* every picture box becomes a little screen: curved corners (diagonal boxes too), tube edge and a small glare */
.card{transition:transform .3s ease,border-color .3s,box-shadow .3s,border-radius .7s ease}
.feature{transition:transform .35s ease,border-color .35s,box-shadow .35s,border-radius .7s ease}
.rel .thumb{transition:transform .25s,border-color .25s,border-radius .7s ease}
.card .thumb,.ch-portrait,.story .pic,.banner,.seen img,.seen .imdb,.step img,.menu a img,.track img,.post img,.poster,.feature .art{transition:border-radius .7s ease}
.story .pic,.rel .thumb{position:relative}
/* 19 Oct, Jonathan: a Workplace button on each character's long picture, to the place they work */
.story .pic .wp-btn{position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1px solid color-mix(in srgb,var(--accent,#d4a857) 70%,transparent);border-radius:999px;background:rgba(8,8,10,.74);color:#f5efe6;font:600 12px/1 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;backdrop-filter:blur(6px);transition:background .25s ease,color .25s ease}
.story .pic .wp-btn:hover,.story .pic .wp-btn:focus-visible{background:var(--accent,#d4a857);color:#0b0b0d}
.mode-1985 .slant,.mode-1985 .card,.mode-1985 .card .thumb,.mode-1985 .ch-portrait,.mode-1985 .story .pic,.mode-1985 .rel .thumb,.mode-1985 .seen img,.mode-1985 .seen .imdb,.mode-1985 .post img,.mode-1985 .poster,.mode-1985 .feature,.mode-1985 .feature .art{border-radius:22px}
.mode-1985 .poster{overflow:hidden}
.mode-1985 .banner{border-radius:0 0 26px 26px}
.mode-1985 .step img,.mode-1985 .menu a img,.mode-1985 .track img,.mode-1985 .cast-card{border-radius:10px}
.mode-1985 .cast-card .cc-img{border-radius:12px}
.slant::before,.card .thumb::before,.ch-portrait::before,.story .pic::before,.rel .thumb::before,.feature .art::before,.cast-card .cc-img::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .7s ease}
.mode-1985 .slant::before,.mode-1985 .card .thumb::before,.mode-1985 .ch-portrait::before,.mode-1985 .story .pic::before,.mode-1985 .rel .thumb::before,.mode-1985 .feature .art::before,.mode-1985 .cast-card .cc-img::before{opacity:1;
  background:url(../img/grain.png) repeat,repeating-linear-gradient(to bottom,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),linear-gradient(135deg,rgba(255,255,255,.09) 0%,transparent 22%);
  box-shadow:inset 0 0 26px 10px rgba(0,0,0,.88),inset 0 0 6px 3px #000}
.mode-1985 .rel .thumb::before,.mode-1985 .cast-card .cc-img::before{box-shadow:inset 0 0 12px 5px rgba(0,0,0,.85)}
.slant .label{z-index:2}

/* film tabs: the chosen film's name goes gold; on phones the three sit in one row as squares showing just the part, the chosen one shows its name */
.trilogy span i,.trilogy span em{font-style:normal}
.trilogy .now b{color:var(--gold-hi)}
@media (max-width:760px){
  .trilogy{grid-template-columns:repeat(3,1fr);gap:8px}
  .trilogy button{aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8px 6px;gap:5px}
  .trilogy button:hover{transform:none}
  .trilogy button b{display:none;font-size:clamp(14px,4.6vw,19px);line-height:1.05}
  .trilogy button.now b{display:block}
  .trilogy span{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
  .trilogy span em{display:none}
}

/* roster rows of four, every box a quarter of the row wide and tall enough for the full figure (15 Oct) */
.slant-rows{container-type:inline-size}
.slant-rows .slants{width:calc((100% - 52px) * var(--n,4) / 4 + 52px);margin-left:auto;margin-right:auto;height:clamp(340px,calc((100cqw - 52px) / 4 * 1.5),480px)}
.slant-rows .slants+.slants{margin-top:6px}
@media (max-width:720px){
  /* phones: two per row on the page, no sideways scroll (Jonathan, 15 Oct) */
  .slant-rows .slants{width:auto;height:auto;flex-wrap:wrap;overflow:visible;scroll-snap-type:none;justify-content:center;row-gap:6px;padding:4px 22px 0}
  .slant-rows .slant{flex:0 0 calc(50% - 6px);height:250px}
  .slant-rows .slants+.slants{margin-top:6px}
}

/* character page: the quick info always ends on the bottom edge of the profile picture; a logo shrinks to fit if it must but never grows past 520px wide (Jonathan, 15 Oct) */
@media (min-width:821px){
  .ch-top{align-items:stretch}
  .ch-info{height:0;min-height:100%;display:flex;flex-direction:column}
  .ch-info>*{flex:none}
  .ch-info .ch-title{flex:1 1 0;min-height:0;width:100%;max-width:min(520px,100%);object-fit:contain;object-position:left bottom}
}

/* quick info: Nemesis row links (15 Oct) */
.stats .nem a{color:var(--glow,var(--gold-hi));text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--glow,var(--gold)) 45%,transparent)}
.stats .nem a:hover{border-bottom-color:var(--glow,var(--gold-hi))}

/* character page: fallback when the quick info is too long to fit beside the portrait (15 Oct) */
@media (min-width:821px){
  .ch-top.tall{align-items:start}
  .ch-top.tall .ch-info{height:auto;min-height:0}
  .ch-top.tall .ch-info .ch-title{flex:none;height:auto;max-height:120px;width:auto;max-width:min(520px,100%)}
}

/* homepage on phones: the three heroes and three villains sit in one row of three (Jonathan, 15 Oct) */
@media (max-width:720px){
  #heroes .slant,#villains .slant{flex:0 0 calc(33.333% - 6px);height:200px}
  #heroes .slant .label,#villains .slant .label{left:12px;bottom:10px;font-size:13px}
  #heroes.slant-rows .slants,#villains.slant-rows .slants{padding:4px 16px 0}
}

/* Music page: one section per film soundtrack (15 Oct): cover left, words right, tracks open underneath */
.album{margin:10px 0 40px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:linear-gradient(180deg,rgba(227,176,75,.14),rgba(227,176,75,0) 70%)}
.al-head{display:flex;align-items:center;gap:32px;padding:28px}
.al-cover{flex:none;width:min(240px,34vw);aspect-ratio:1/1;object-fit:cover;background:#000;box-shadow:0 18px 50px rgba(0,0,0,.6);border-radius:6px}
.al-meta{flex:1;min-width:0}
.al-k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi)}
.al-meta h2{font-family:var(--display);font-size:clamp(46px,7vw,90px);line-height:.95;margin:6px 0 12px;text-transform:uppercase}
.al-desc{font-size:16px;line-height:1.6;margin:0 0 12px;max-width:62ch}
.al-info{color:var(--muted);font-size:13px;margin:0 0 18px}
.al-acts{display:flex;gap:12px;flex-wrap:wrap}
.al-play{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(var(--gold-hi),var(--gold));color:#140c02;border:0;border-radius:999px;padding:12px 24px 12px 18px;font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.al-play svg{width:16px;height:16px;fill:currentColor}
.al-view{background:none;border:1px solid rgba(227,176,75,.55);color:var(--gold-hi);border-radius:999px;padding:12px 22px;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.al-list{list-style:none;margin:0;padding:6px 14px 16px;border-top:1px solid var(--line)}
.al-row{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;padding:12px 14px;border-radius:8px;cursor:pointer;transition:background .25s}
.al-row:hover,.al-row:focus-visible{background:rgba(255,255,255,.06);outline:none}
.al-n{text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
.al-t{display:flex;flex-direction:column;min-width:0}
.al-t b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al-t small{color:var(--muted);font-size:13px;margin-top:2px}
.al-prog{display:block;height:2px;background:rgba(255,255,255,.08);margin-top:8px;opacity:0;transition:opacity .3s}
.al-prog i{display:block;height:100%;width:0;background:var(--gold-hi)}
.al-len{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.al-row.on .al-t b{color:var(--gold-hi)}
.al-row.on .al-prog{opacity:1}
.al-eq{display:none;align-items:flex-end;justify-content:center;gap:2px;height:14px}
.al-eq i{width:3px;background:var(--gold-hi);animation:aleq 1s ease-in-out infinite}
.al-eq i:nth-child(2){animation-delay:.2s}
.al-eq i:nth-child(3){animation-delay:.4s}
@keyframes aleq{0%,100%{height:4px}50%{height:14px}}
.al-row.playing .al-n b{display:none}
.al-row.playing .al-eq{display:flex}
@media (prefers-reduced-motion:reduce){.al-eq i{animation:none;height:10px}}
@media (max-width:640px){
  .al-head{flex-direction:column;align-items:center;text-align:center;padding:22px 16px}
  .al-cover{width:62vw}
  .al-desc{font-size:15px}
  .al-acts{justify-content:center}
  .al-list{padding:4px 6px 12px}
  .al-row{grid-template-columns:30px 1fr auto;padding:12px 8px;gap:10px}
}

/* Arcade teaser: a 1985 CRT television, screen centred, controls underneath (15 Oct) */
.arcade{max-width:980px;margin:6px auto 0}
.tv{padding:26px 26px 18px;border-radius:30px;background:linear-gradient(160deg,#3a3430,#1c1916 55%,#120f0d);box-shadow:inset 0 2px 0 rgba(255,255,255,.08),inset 0 -6px 18px rgba(0,0,0,.6),0 30px 60px rgba(0,0,0,.6)}
.tv-glass{padding:16px;border-radius:26px;background:#0a0908;box-shadow:inset 0 0 0 3px #2b2622,inset 0 8px 24px rgba(0,0,0,.9)}
.arc-screen{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:38px/30px;background:#000;box-shadow:inset 0 0 60px rgba(0,0,0,.85),0 0 40px rgba(227,176,75,.12)}
.arc-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(255,255,255,.035);animation:crtflick 4s steps(1) infinite}
@keyframes crtflick{0%,100%{opacity:0}3%{opacity:1}4%{opacity:0}41%{opacity:.6}42%{opacity:0}77%{opacity:1}78%{opacity:.3}79%{opacity:0}}
.arc-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;filter:saturate(1.1) contrast(1.05);animation:crtjitter 6s steps(1) infinite}
@keyframes crtjitter{0%,100%{transform:none}50%{transform:translateX(1px)}51%{transform:none}}
.arc-title{position:absolute;left:0;right:0;top:9%;text-align:center;font-family:'Press Start 2P',monospace;color:#ffd75e;text-shadow:4px 4px 0 #b3261e,8px 8px 0 #000}
.arc-title .t1{display:block;font-size:clamp(26px,6.4vw,62px);letter-spacing:.04em}
.arc-title .t2{display:block;margin-top:12px;font-size:clamp(10px,2vw,20px);color:#fff;text-shadow:3px 3px 0 #000;letter-spacing:.3em}
.arc-soon{position:absolute;left:0;right:0;bottom:16%;text-align:center;font-family:'Press Start 2P',monospace;font-size:clamp(12px,2.6vw,26px);color:#fff;text-shadow:3px 3px 0 #b3261e,6px 6px 0 #000;animation:arcblink 1.1s steps(1) infinite}
.arc-coin{position:absolute;left:0;right:0;bottom:7%;text-align:center;font-family:'Press Start 2P',monospace;font-size:clamp(8px,1.4vw,13px);color:#ffd75e;text-shadow:2px 2px 0 #000;letter-spacing:.2em}
@keyframes arcblink{50%{opacity:0}}
.arc-scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 4px),radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.07),transparent 55%),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.55));mix-blend-mode:multiply}
.tv-panel{display:flex;align-items:center;justify-content:center;gap:28px;padding:16px 8px 2px}
.tv-panel .knob{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#6a625a,#2a2521 70%);box-shadow:0 4px 10px rgba(0,0,0,.6),inset 0 0 0 4px #1a1714;position:relative}
.tv-panel .knob::after{content:"";position:absolute;left:50%;top:5px;width:4px;height:14px;margin-left:-2px;background:#d8cdb8;border-radius:2px}
.tv-panel .grille{display:flex;gap:7px}
.tv-panel .grille i{display:block;width:5px;height:30px;border-radius:3px;background:#0c0a09;box-shadow:inset 0 1px 2px rgba(0,0,0,.9)}
.tv-panel .led{width:10px;height:10px;border-radius:50%;background:#ff3b30;box-shadow:0 0 10px #ff3b30}
.tv-foot{width:58%;height:22px;margin:0 auto;background:linear-gradient(#1c1916,#0d0b0a);border-radius:0 0 16px 16px;box-shadow:0 14px 30px rgba(0,0,0,.6)}
.arc-about{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:40px;align-items:center;margin-top:56px}
.arc-box{width:100%;display:block;filter:drop-shadow(0 24px 40px rgba(0,0,0,.6))}
.arc-k{font-family:'Press Start 2P',monospace;font-size:11px;color:var(--gold-hi);letter-spacing:.1em}
.arc-about h2{font-family:var(--display);font-size:clamp(38px,5vw,60px);text-transform:uppercase;line-height:1;margin:12px 0 16px}
.arc-about p{font-size:16px;line-height:1.7;margin:0 0 12px;color:var(--text)}
.arc-stages{margin-top:50px}
.arc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.arc-grid figure{margin:0;position:relative;border:1px solid var(--line);overflow:hidden}
.arc-grid img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;image-rendering:pixelated}
.arc-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;font-family:'Press Start 2P',monospace;font-size:10px;color:#ffd75e;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.arc-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:34px 0 10px}
.arc-feats b{font-family:'Press Start 2P',monospace;font-size:11px;color:var(--gold-hi);display:block;margin-bottom:10px;line-height:1.5}
.arc-feats p{margin:0;color:var(--muted);font-size:14px}
@media (prefers-reduced-motion:reduce){.arc-soon,.arc-screen::after,.arc-art{animation:none}}
@media (max-width:760px){
  .tv{padding:12px 12px 8px;border-radius:20px}
  .tv-glass{padding:8px;border-radius:16px}
  .arc-screen{border-radius:20px/16px}
  .tv-panel{gap:16px;padding:10px 4px 0}
  .tv-panel .knob{width:30px;height:30px}
  .tv-panel .knob::after{top:4px;height:9px;width:3px;margin-left:-1.5px}
  .tv-panel .grille i{height:20px;width:4px}
  .tv-foot{width:70%;height:14px}
  .arc-about{grid-template-columns:1fr;gap:20px;margin-top:36px}
  .arc-box{max-width:320px;margin:0 auto}
  .arc-grid,.arc-feats{grid-template-columns:1fr 1fr}
}

/* phone menu: with eight items the list can be taller than the screen; never slide under the logo (15 Oct) */
.menu{overflow-y:auto;justify-content:safe center;-webkit-overflow-scrolling:touch}
@media (max-height:860px){.menu a{font-size:clamp(28px,7.6vw,46px);padding:5px 0}.menu a img{width:44px;height:44px}.menu ol{gap:4px}}

/* Character page downloads: desktop and phone images at the SAME height, side by side (15 Oct, Jonathan) */
.dl{--h:340px;padding-top:22px;border-top:1px solid var(--line);margin-top:30px}
.dl h2{font-family:var(--display);font-size:30px;text-transform:uppercase;margin:0 0 16px}
.dl-grid{display:flex;gap:18px;align-items:flex-start}
.dl-card{flex:0 0 auto;display:block;text-decoration:none;color:var(--text);border:1px solid var(--line);background:rgba(255,255,255,.02);transition:border-color .25s,box-shadow .25s,transform .25s}
.dl-card:hover{border-color:var(--accent,var(--gold));box-shadow:0 0 30px color-mix(in srgb,var(--accent,#e3b04b) 35%,transparent);transform:translateY(-2px)}
.dl-img{display:block;overflow:hidden;height:var(--h);width:calc(var(--h) * 16 / 9)}
.dl-card.ph .dl-img{width:calc(var(--h) * 1290 / 2796)}
.dl-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.dl-card:hover .dl-img img{transform:scale(1.04)}
.dl-meta{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px}
.dl-k{font-weight:600;font-size:15px}
.dl-s{color:var(--muted);font-size:13px}
.dl-b{margin-top:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--accent,var(--gold));color:var(--accent,var(--gold))}
.dl-card:hover .dl-b{background:var(--accent,var(--gold));color:#0b0b0b}
@media (max-width:760px){
  .dl{--h:calc((100vw - 32px - 12px) / 2.24)}
  .dl-grid{gap:12px}
  .dl-card{width:min-content}
  .dl-meta{padding:8px 0 10px;align-items:center}
  .dl-k,.dl-s{display:none}
  .dl-b{margin-top:0;font-size:9px;padding:6px 6px;letter-spacing:.04em;white-space:nowrap}
}

/* the 11:51 moment: gold web over the whole screen, fades in, holds, fades out (no flashing) */
.web1151{position:fixed;inset:0;z-index:9000;pointer-events:none;animation:web1151 7s ease-in-out forwards}
.web1151 canvas{width:100%;height:100%;display:block;mix-blend-mode:screen;filter:drop-shadow(0 0 6px rgba(255,190,80,.6))}
.web1151 span{position:absolute;left:0;right:0;bottom:12%;text-align:center;font-family:var(--display);font-size:clamp(28px,5vw,56px);letter-spacing:.2em;color:#ffd98a;text-shadow:0 0 24px rgba(255,190,80,.8);width:max-content;margin:0 auto;padding:6px 28px;background:radial-gradient(ellipse at center,rgba(0,0,0,.75) 30%,transparent 72%)}
@keyframes web1151{0%{opacity:0}30%{opacity:1}65%{opacity:1}100%{opacity:0}}

/* Versus mode (16 Oct) */
.pl-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;border-top:1px solid var(--line)}
.vs-link{font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:9px 16px;border:1px solid var(--accent,var(--gold));color:var(--accent,var(--gold));text-decoration:none;white-space:nowrap}
.vs-link:hover{background:var(--accent,var(--gold));color:#0b0b0b}
.vs-stage{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;margin-top:6px}
.vs-f{position:relative;display:block;text-decoration:none;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s}
.vs-logo{display:flex;align-items:flex-end;justify-content:center;height:clamp(54px,9vw,120px);margin-bottom:12px}
.vs-logo img{max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(0,0,0,.8))}
.vs-img{display:block;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line);box-shadow:0 0 50px color-mix(in srgb,var(--glow) 30%,transparent)}
.vs-img img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.vs-f.l{transform:translateX(-40px);opacity:0}.vs-f.r{transform:translateX(40px);opacity:0}
.go .vs-f{transform:none;opacity:1}
.vs-mid{font-family:var(--display);font-size:clamp(40px,7vw,96px);color:var(--gold-hi);text-shadow:0 0 30px rgba(255,190,80,.6);transform:scale(.4);opacity:0;transition:transform .5s .25s cubic-bezier(.2,1.6,.4,1),opacity .4s .25s}
.go .vs-mid{transform:none;opacity:1}
.vs-names{display:flex;justify-content:space-between;font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,3vw,32px);margin:14px 0 8px}
.vs-table{display:grid;gap:12px;margin:10px 0 40px}
.vs-row{display:grid;grid-template-columns:1fr minmax(110px,180px) 1fr;align-items:center;gap:14px}
.vs-name{text-align:center;font-weight:600;font-size:14px}
.vs-bar{display:flex;align-items:center;gap:10px;height:18px}
.vs-bar.l{justify-content:flex-end}
.vs-bar b{display:block;height:100%;width:0;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 55%,transparent),var(--c));opacity:.55;transition:width .9s calc(.35s + var(--i)*.08s) cubic-bezier(.2,.8,.2,1)}
.vs-bar.l b{background:linear-gradient(270deg,color-mix(in srgb,var(--c) 55%,transparent),var(--c))}
.go .vs-bar b{width:calc(var(--w) * .82)}
.vs-bar.edge b{opacity:1;box-shadow:0 0 14px var(--c)}
.vs-bar .v{font-size:13px;color:var(--muted);min-width:34px;text-align:center}
.vs-bar.edge .v{color:var(--text);font-weight:700}
.vs-key{text-align:center;color:var(--muted);font-size:13px;margin:-26px 0 34px}
.vs-pickers{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding-top:22px;border-top:1px solid var(--line)}
.vs-pickers h2{font-family:var(--display);text-transform:uppercase;font-size:24px;margin:0 0 12px}
.vs-pick{display:flex;flex-wrap:wrap;gap:10px}
.vs-pick button{background:none;border:1px solid var(--line);padding:0;width:78px;cursor:pointer;color:var(--text);transition:border-color .2s,box-shadow .2s}
.vs-pick button img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 0}
.vs-pick button span{display:block;font-size:11px;padding:4px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-pick button.on,.vs-pick button:hover{border-color:var(--glow);box-shadow:0 0 18px color-mix(in srgb,var(--glow) 45%,transparent)}
@media (max-width:760px){
  .vs-stage{gap:8px}.vs-logo{height:44px;margin-bottom:8px}.vs-row{grid-template-columns:1fr 92px 1fr;gap:6px}.vs-name{font-size:11px}.vs-bar .v{font-size:11px;min-width:26px}
  .vs-pickers{grid-template-columns:1fr;gap:20px}.vs-pick button{width:64px}
}
@media (prefers-reduced-motion:reduce){.vs-f,.vs-mid,.vs-bar b{transition:none}}

/* Universe timeline (16 Oct) */
.tl{list-style:none;margin:10px 0 40px;padding:0 0 0 34px;position:relative;max-width:860px}
.tl::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--gold-hi),var(--gold) 70%,transparent);box-shadow:0 0 12px rgba(255,190,80,.5)}
.tl-item{position:relative;margin:0 0 26px}
.tl-dot{position:absolute;left:-31px;top:18px;width:14px;height:14px;border-radius:50%;background:#0b0b0b;border:2px solid var(--gold-hi);box-shadow:0 0 14px rgba(255,190,80,.7)}
.tl-item.film .tl-dot{width:18px;height:18px;left:-33px;top:16px;background:var(--gold-hi)}
.tl-card{border:1px solid var(--line);background:rgba(255,255,255,.02);padding:18px 20px}
.tl-item.film .tl-card{border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}
.tl-k{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hi);margin-bottom:6px}
.tl-card h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(24px,3vw,34px);line-height:1.05;margin:0 0 8px}
.tl-card h2 a{color:inherit;text-decoration:none}.tl-card h2 a:hover{color:var(--gold-hi)}
.tl-card p{margin:8px 0 0;color:var(--text);line-height:1.65}
.tl-sub{margin:16px 0 8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tl-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.tl-chip{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border:1px solid var(--line);border-radius:30px;color:var(--text);text-decoration:none;font-size:14px;transition:border-color .2s,box-shadow .2s}
.tl-chip img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:50% 0}
.tl-chip:hover{border-color:var(--glow);box-shadow:0 0 16px color-mix(in srgb,var(--glow) 45%,transparent)}
@media (max-width:760px){.tl{padding-left:28px}.tl::before{left:7px}.tl-dot{left:-27px}.tl-item.film .tl-dot{left:-29px}.tl-card{padding:14px 14px}}

/* Condensed menu with drop-downs (16 Oct) */
.nav .links{gap:30px;align-items:center}
.nav .links > li{position:relative}
.nav .dd-t{display:flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;font:inherit;font-weight:600;font-size:14px;letter-spacing:.02em;color:#e9e4d8;padding:8px 0}
.nav .dd-t:hover,.nav .dd-t[aria-current="page"],.nav .dd.open .dd-t{color:#fff}
.nav .dd-t i{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.nav .dd:hover .dd-t i,.nav .dd.open .dd-t i,.nav .dd:focus-within .dd-t i{transform:translateY(1px) rotate(225deg)}
.nav .dd-m{position:absolute;top:100%;left:50%;min-width:230px;padding:10px;margin-top:10px;background:rgba(8,8,8,.97);border:1px solid rgba(227,176,75,.28);box-shadow:0 20px 50px rgba(0,0,0,.7),0 0 30px rgba(227,176,75,.08);display:grid;gap:2px;opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .2s,transform .2s,visibility 0s .2s;z-index:50}
.nav .dd-m::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav .dd:hover .dd-m,.nav .dd.open .dd-m,.nav .dd:focus-within .dd-m{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s,transform .2s}
.nav .dd-m a{display:flex;align-items:center;gap:12px;padding:8px 10px;font-size:14px;color:#e9e4d8;white-space:nowrap}
.nav .dd-m a img{width:34px;height:34px;object-fit:cover;object-position:50% 15%;transform:skewX(-10deg);border:1px solid rgba(227,176,75,.35)}
.nav .dd-m a:hover{background:rgba(227,176,75,.1);color:#fff}
.nav .dd-m a[aria-current="page"]{color:var(--gold-hi)}
.menu li.mh{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-hi);margin:14px 0 2px;font-weight:600}
.menu li.mh:first-child{margin-top:0}
.menu li.sub a{font-size:clamp(28px,7.4vw,46px);padding:5px 0}
.menu li.sub a img{width:44px;height:44px}
.menu li.solo{margin-top:16px}

/* Restyled entrance (16 Oct): CRT switch-on, web-knit logo, typed caption, picture opens like doors */
.intro{background:transparent;transition:none}
.intro-door{position:absolute;top:0;bottom:0;width:50.5%;background:radial-gradient(ellipse at 100% 50%,#120d05 0,#000 70%);transition:transform 1s cubic-bezier(.7,0,.25,1)}
.intro-door.l{left:0}.intro-door.r{right:0;transform-origin:right;background:radial-gradient(ellipse at 0% 50%,#120d05 0,#000 70%)}
.intro-crt{position:absolute;left:50%;top:50%;width:100%;height:2px;background:#fff;box-shadow:0 0 30px 6px rgba(255,230,180,.8);transform:translate(-50%,-50%) scaleX(0);opacity:0;pointer-events:none}
.intro.on .intro-crt{animation:introcrt .55s ease-out forwards}
@keyframes introcrt{0%{opacity:1;transform:translate(-50%,-50%) scaleX(0)}45%{opacity:1;transform:translate(-50%,-50%) scaleX(1)}100%{opacity:0;transform:translate(-50%,-50%) scaleX(1) scaleY(60)}}
.intro canvas{z-index:1}
.intro-mark{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px}
.intro-mark img{position:relative;width:min(760px,86vw);opacity:0;filter:blur(8px) brightness(1.4);transform:scale(.96);transition:opacity 1s ease,filter 1.2s ease,transform 1.6s ease}
.intro.logo .intro-mark img{opacity:1;filter:none;transform:scale(1)}
.intro-cap{min-height:1.4em;font-size:clamp(12px,1.6vw,16px);letter-spacing:.5em;color:#e9d3a0;text-shadow:0 0 12px rgba(255,190,80,.6);font-family:ui-monospace,Menlo,Consolas,monospace}
.intro-cap::after{content:"";display:inline-block;width:.6em;height:1em;margin-left:.2em;vertical-align:-2px;background:#e9d3a0;animation:introcur .7s steps(1) infinite}
@keyframes introcur{50%{opacity:0}}
.intro .skip{z-index:3}
.intro.out{opacity:1;pointer-events:none}
.intro.out .intro-door.l{transform:translateX(-101%)}
.intro.out .intro-door.r{transform:translateX(101%)}
.intro.out canvas,.intro.out .intro-mark,.intro.out .skip,.intro.out .intro-crt{opacity:0;transform:scale(1.06);transition:opacity .45s ease,transform .8s ease}

/* 1985 mode: hero buttons go square, and stay square on hover (16 Oct) */
.mode-1985 .btn,.mode-1985 .btn:hover{clip-path:none;border-radius:10px}
.mode-1985 .btn.ghost::before,.mode-1985 .btn.ghost:hover::before{clip-path:none;border-radius:8px}

/* Timeline phases, Marvel-style strips (16 Oct) */
.phase{position:relative;margin:30px 0 56px}
.ph-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),1fr);column-gap:8px;height:380px;position:relative;z-index:1}
.ph-film{position:relative;height:100%}
.ph-film > a,.ph-film > div{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--text);text-decoration:none;height:calc(50% - 22px)}
.ph-film.up > a,.ph-film.up > div{top:0;justify-content:flex-end}
.ph-film.dn > a,.ph-film.dn > div{bottom:0;justify-content:flex-start}
.ph-film.dn .ph-stem{order:-2}.ph-film.dn .ph-when{order:-1}
.ph-logo{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}
.ph-logo img{width:92%;height:clamp(46px,6vw,82px);object-fit:contain;filter:drop-shadow(0 4px 14px rgba(0,0,0,.8));transition:transform .3s,filter .3s}
.ph-film a:hover .ph-logo img{transform:scale(1.06);filter:drop-shadow(0 0 18px color-mix(in srgb,var(--glow,#e3b04b) 70%,transparent))}
.ph-sub{font-family:var(--display);text-transform:uppercase;letter-spacing:.32em;font-size:clamp(11px,1.1vw,14px);color:var(--gold-hi)}
.ph-text{font-family:var(--display);text-transform:uppercase;letter-spacing:.2em;font-size:clamp(18px,2vw,26px);color:var(--muted);border:1px dashed var(--line);padding:10px 14px}
.ph-when{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#e9e4d8;white-space:nowrap;margin:8px 0}
.ph-stem{width:2px;height:44px;flex:none;margin-top:8px;background:linear-gradient(rgba(227,176,75,.25),var(--gold-hi))}
.ph-film.dn .ph-stem{margin:0 0 8px;background:linear-gradient(var(--gold-hi),rgba(227,176,75,.25))}
.ph-bar{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px;display:flex;align-items:center;justify-content:center;gap:18px;pointer-events:none;z-index:0;
  border-top:2px solid rgba(255,220,150,.8);border-bottom:2px solid rgba(255,220,150,.8);box-shadow:0 0 18px rgba(255,190,80,.45),inset 0 0 18px rgba(255,190,80,.2);background:rgba(0,0,0,.55)}
.ph-bar span{font-family:var(--display);text-transform:uppercase;letter-spacing:.6em;font-size:clamp(16px,2vw,24px);color:#fff}
.ph-bar em{font-style:normal;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-hi)}
@media (max-width:860px){
  .phase{margin:20px 0 34px;display:flex;flex-direction:column-reverse}
  .ph-bar{position:static;transform:none;margin-bottom:14px;height:40px}
  .ph-row{grid-template-columns:1fr 1fr;height:auto;row-gap:18px}
  .ph-film{height:auto}
  .ph-film > a,.ph-film > div{position:static;height:auto}
  .ph-stem{display:none}
  .ph-film.dn .ph-when{order:1}
  .ph-when{margin:6px 0 0}
}
.keydates{margin-top:10px}
@media (max-width:860px){
  .phase{margin:20px 0 34px;padding:0}
  .ph-bar{position:static;transform:none;margin-bottom:14px;height:40px}
  .phase{display:flex;flex-direction:column-reverse}
  .ph-row{grid-template-columns:1fr 1fr;grid-template-rows:none;row-gap:18px}
  .ph-film,.ph-film > a,.ph-film > div{grid-row:auto;display:flex;flex-direction:column;align-items:center}
  .ph-stem{display:none}
  .ph-film .ph-when{margin:6px 0 0 !important}
  .ph-film.dn .ph-logo{order:0}
}

/* Timeline phase bars: the gold lines wave very gently (16 Oct) */
.ph-bar{border-top:0;border-bottom:0}
.ph-bar::before,.ph-bar::after{content:"";position:absolute;left:0;right:0;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'%3E%3Cpath d='M0 4 Q30 1.2 60 4 T120 4' fill='none' stroke='%23ffdc96' stroke-width='2'/%3E%3C/svg%3E") repeat-x 0 0/120px 8px;filter:drop-shadow(0 0 6px rgba(255,190,80,.7));animation:phwave 6s linear infinite}
.ph-bar::before{top:-4px}
.ph-bar::after{bottom:-4px;animation-direction:reverse}
@keyframes phwave{to{background-position:120px 0}}
@media (prefers-reduced-motion:reduce){.ph-bar::before,.ph-bar::after{animation:none}}

/* Timeline: every film logo glows faintly in its own colour (16 Oct) */
.ph-logo img{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--glow,#e3b04b) 28%,transparent))}
.ph-film > a:hover .ph-logo img,.ph-film > div:hover .ph-logo img{transform:scale(1.04);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--glow,#e3b04b) 28%,transparent))}

/* Timeline: small Framework badge above each film logo, like a studio mark (16 Oct) */
.ph-logo img.ph-brand{width:auto;height:clamp(20px,2vw,30px);margin-bottom:4px;filter:none;opacity:.95;transform:none}
.ph-film > a:hover .ph-logo img.ph-brand,.ph-film > div:hover .ph-logo img.ph-brand{transform:none;filter:none}

/* civilians with portraits, Fusion Laboratories (17 Oct) */
/* homepage Civilians: four in one row down to tablet width, two by two on phones (19 Oct) */
@media (max-width:1000px){.grid.four.civ-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.grid.four.civ-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card .thumb.fusion-thumb{background:#fff}
.card .thumb.fusion-thumb img{object-fit:contain;padding:12%}
.fusion-strip{display:flex;align-items:center;gap:22px;margin-top:22px;padding:18px 22px;border:1px solid var(--line);background:var(--panel);transition:border-color .25s}
.fusion-strip:hover{border-color:var(--gold)}
.fusion-strip img{width:110px;height:110px;object-fit:contain;background:#fff;padding:10px;flex:none}
.fusion-strip .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.fusion-strip .t{font-family:var(--display);font-size:clamp(26px,3.4vw,38px);text-transform:uppercase;line-height:1.05;margin-top:2px}
.fusion-strip p{color:var(--muted);margin-top:6px}
.fusion-top{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:28px;align-items:center;margin:18px 0 10px}
.fusion-logo{background:#fff;border:1px solid var(--line)}
.fusion-logo img{display:block;width:100%;height:auto}
.fusion-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
.fusion-facts div{border:1px solid var(--line);background:var(--panel);padding:16px 18px}
.fusion-facts dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.fusion-facts dd{margin:6px 0 0;font-size:18px;font-weight:600}
.fusion-sec{margin-top:34px}
.fusion-sec h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.6vw,40px);text-transform:uppercase;line-height:1}
.fusion-sec p{color:#d9d3c7;font-size:17px;line-height:1.65;margin-top:12px;max-width:820px;text-wrap:pretty}
.fusion-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px;max-width:820px}
.fusion-people figure{margin:0;border:1px solid var(--line);background:var(--panel)}
.fusion-people img{display:block;width:100%;height:auto}
.fusion-people figcaption{padding:10px 14px;font-weight:700}
@media (max-width:760px){.fusion-top{grid-template-columns:1fr}.fusion-logo{max-width:300px}.fusion-strip{flex-direction:column;align-items:flex-start}}
@media (max-width:480px){.fusion-facts{grid-template-columns:1fr}}

/* civilian character pages: the name in type instead of a title logo (17 Oct) */
.ch-name{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.95;font-size:clamp(40px,5.4vw,76px);margin:0 0 14px;color:var(--text);text-shadow:0 0 26px color-mix(in srgb,var(--accent) 45%,transparent)}
.ch-name-m{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.enter .ch-info .ch-name{animation:slam .7s cubic-bezier(.2,1.4,.4,1) .55s both}
@media (max-width:820px){
  .ch-name-m{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;text-align:center;font-size:clamp(34px,9vw,52px);margin:0 auto 6px}
  .ch-info .ch-name{display:none}
}
.fusion-people a{color:inherit;text-decoration:none}
.fusion-people a:hover figure{border-color:var(--gold)}
.fusion-people{max-width:560px}

/* Fusion page: the 1983 print and the timeline (17 Oct) */
.fusion-sec p+p{margin-top:10px}
.fusion-photo{margin:22px auto 0;max-width:1100px}
.fusion-photo img{display:block;width:100%;height:auto}
.fusion-photo figcaption{margin-top:10px;text-align:center;color:var(--muted);font-size:14px;font-style:italic}
.fusion-tl{list-style:none;margin:16px 0 0;padding:0;max-width:820px;border-left:1px solid var(--line)}
.fusion-tl li{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:9px 0 9px 18px;position:relative}
.fusion-tl li::before{content:"";position:absolute;left:-4px;top:16px;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.fusion-tl .y{font-family:var(--display);font-size:20px;color:var(--gold);line-height:1.2}
.fusion-tl .t{color:#d9d3c7;line-height:1.5}
@media (max-width:480px){.fusion-tl li{grid-template-columns:52px 1fr;gap:10px}}
.fusion-photo.narrow{max-width:520px}
.fusion-photo img{box-shadow:0 14px 40px rgba(0,0,0,.55)}

/* Fusion page in one centred column, the record sheet floated right with the text wrapping round it (17 Oct) */
.fusion-page{max-width:980px;margin:0 auto}
.fusion-page .page-head p,.fusion-page .fusion-sec p,.fusion-page .fusion-tl{max-width:none}
.fusion-page .fusion-photo{max-width:none;margin:22px 0 0}
.fusion-page .fusion-photo img[src*="staff"]{box-shadow:none}
.fusion-page .fusion-photo img[src*="-print"]{box-shadow:none}
.fusion-page .fusion-photo.side{float:right;width:40%;margin:4px 0 18px 32px}
.fusion-page .fusion-photo.side figcaption{text-align:left}
/* a section with a side photo holds it, so the next heading never wraps beside it (Red Phoenix, 19 Oct) */
.fusion-page .fusion-sec.wrap-fig{display:flow-root}
.fusion-page .fusion-clear{clear:both;padding-top:4px}
.fusion-page .fusion-people{max-width:640px}
@media (max-width:760px){.fusion-page .fusion-photo.side{float:none;width:auto;max-width:440px;margin:18px auto 0}.fusion-page .fusion-photo.side figcaption{text-align:center}}

/* character page extras: a link out (scientists to Fusion) and a prop image under the story (Bonavia's badge) (17 Oct) */
.ch-info .ch-link{display:inline-flex;margin-top:18px}
.story.flow .ch-extra{float:left;clear:left;width:min(36%,380px);margin:8px 32px 16px 0;border:1px solid var(--line)}
.story.flow .ch-extra img{display:block;width:100%;height:auto}
.story.flow .ch-extra figcaption{padding:8px 12px;color:var(--muted);font-size:13px;font-style:italic;background:var(--panel)}
@media (max-width:720px){.story.flow .ch-extra{float:none;width:100%;margin:6px 0 18px}}
.stats .st-link{color:var(--gold);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.stats .st-link:hover{color:var(--gold-hi);border-bottom-color:var(--gold-hi)}

/* World pages: people cards with a role line, and a dark photo in the top box (Meridian badge) (17 Oct) */
.fusion-people figcaption .r{display:block;margin-top:3px;font-weight:400;font-size:13px;color:var(--muted)}
.fusion-people{grid-template-columns:repeat(auto-fill,minmax(180px,220px))}
.fusion-logo.dark{background:var(--panel);overflow:hidden}
.fusion-logo.dark img{aspect-ratio:1/1;object-fit:cover}
.fusion-logo.dark.natural img{aspect-ratio:auto;object-fit:contain}

/* Gibraltar, 1985: the map with its pins and a short history beside it, then the nine places full width (18 Oct) */
.map-top{display:grid;grid-template-columns:460px minmax(0,1fr);gap:40px;align-items:start;margin-top:24px}
.map-wrap{margin:0}
.map-box{position:relative;border:1px solid rgba(227,176,75,.35);box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 40px rgba(227,176,75,.1);overflow:hidden}
.map-box img{display:block;width:100%;height:auto}
.map-wrap figcaption{margin-top:10px;text-align:center;color:var(--muted);font-size:13.5px;font-style:italic}
.map-pin{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;padding:0;border-radius:50%;border:2px solid var(--gold);background:rgba(8,8,10,.86);color:var(--gold-hi);font:600 12.5px/1 var(--sans);display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 2px rgba(0,0,0,.45),0 0 14px rgba(227,176,75,.55);transition:transform .2s ease,background .2s ease,color .2s ease;z-index:1}
.map-pin:hover,.map-pin:focus-visible{transform:scale(1.15);outline:none}
.map-pin.on{background:var(--gold);color:#000;transform:scale(1.18);z-index:2}
.map-pin.on::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--gold);animation:map-ping 1.6s ease-out infinite}
@keyframes map-ping{from{opacity:.9;transform:scale(.7)}to{opacity:0;transform:scale(1.5)}}
.map-pin .lb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.map-history summary{list-style:none;cursor:default}
.map-history summary::-webkit-details-marker{display:none}
.map-history h2,.map-list h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.6vw,40px);text-transform:uppercase;line-height:1;margin:0}
.map-history p{color:#d9d3c7;font-size:16.5px;line-height:1.65;margin:12px 0 0;text-wrap:pretty}
.map-history .fusion-facts{margin-top:20px}
.map-list{margin-top:46px}
.map-list h2{margin-bottom:18px}
.map-places{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.map-places li{display:flex;flex-direction:column;padding:18px 18px 16px;border:1px solid var(--line);background:var(--panel);transition:border-color .3s ease,box-shadow .3s ease;scroll-margin-top:18px}
.map-places li.on{border-color:rgba(227,176,75,.7);box-shadow:0 0 28px rgba(227,176,75,.16)}
.map-places li.on.flash{animation:map-flash 1.3s ease-out .45s}
@keyframes map-flash{0%{border-color:var(--gold-hi);box-shadow:0 0 0 2px var(--gold-hi),0 0 46px rgba(255,217,138,.55)}100%{border-color:rgba(227,176,75,.7);box-shadow:0 0 28px rgba(227,176,75,.16)}}
.map-places .hd{display:flex;align-items:center;gap:12px}
.map-places .n{flex:none;width:30px;height:30px;padding:0;border-radius:50%;border:2px solid var(--gold);background:none;color:var(--gold-hi);display:grid;place-items:center;font:600 13.5px/1 var(--sans);cursor:pointer;transition:background .3s ease,color .3s ease}
.map-places .n:hover,.map-places .n:focus-visible,.map-places li.on .n{background:var(--gold);color:#000;outline:none}
.map-places h3{font-family:var(--display);font-weight:400;font-size:24px;text-transform:uppercase;line-height:1;margin:0}
.map-places p{color:#d9d3c7;font-size:15.5px;line-height:1.6;margin:10px 0 0;text-wrap:pretty}
.map-places .k{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:2px}
.map-places .go{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:auto;padding-top:12px}
.map-places .go a{color:var(--gold-hi);font-weight:600;font-size:15px;text-decoration:none;border-bottom:1px solid transparent}
.map-places .go a::after{content:" \2192"}
.map-places .go a:hover{border-bottom-color:var(--gold-hi)}
@media (min-width:600px){.map-pin .lb{left:calc(100% + 6px);top:50%;transform:translateY(-50%);width:auto;height:auto;overflow:visible;clip:auto;color:#fff;font:700 12.5px/1 var(--sans);text-shadow:0 1px 3px #000,0 0 8px #000,0 0 2px #000;cursor:pointer}}
@media (max-width:900px){
  .map-top{grid-template-columns:minmax(0,1fr);gap:22px}
  .map-wrap{width:100%;max-width:520px;margin:0 auto}
  .map-history{border:1px solid var(--line);background:var(--panel)}
  .map-history summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px}
  .map-history summary::after{content:"";flex:none;width:9px;height:9px;margin-top:-4px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .3s ease,margin .3s ease}
  .map-history[open] summary::after{transform:rotate(225deg);margin-top:4px}
  .map-history h2{font-size:26px}
  .mh-body{padding:0 18px 18px}
  .mh-body p:first-child{margin-top:0}
  .map-list{margin-top:32px}
  .map-places{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){.map-places{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.map-pin{width:24px;height:24px;margin:-12px 0 0 -12px;font-size:12px}.map-places li{padding:16px 16px 14px}.map-places h3{font-size:23px}}
@media (prefers-reduced-motion:reduce){.map-pin.on::after,.map-places li.on.flash{animation:none}}
/* end Gibraltar, 1985 *//* Beacon archive: front pages filed by month on the editor's desk, and a newsprint reader pop-up (18 Oct) */
.arch-page{max-width:1100px;margin:0 auto}
.arch-hero{text-align:center;padding:34px 0 8px}
.arch-mast{display:block;width:min(560px,86%);height:auto;margin:0 auto;border-radius:3px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.arch-kicker{margin-top:18px;font:600 12.5px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.arch-intro{max-width:640px;margin:14px auto 0;color:#d9d3c7;font-size:17px;line-height:1.6;text-wrap:pretty}
.arch-months{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:22px auto 0;max-width:760px}
.arch-months a{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi);text-decoration:none;padding:9px 12px;border:1px solid rgba(227,176,75,.35);border-radius:3px 3px 0 0;background:rgba(227,176,75,.05);transition:background .2s,color .2s}
.arch-months a:hover,.arch-months a:focus-visible{background:var(--gold);color:#000;outline:none}
.arch-keys-wrap{margin:24px auto 0;max-width:900px}
.arch-keys-h{font:600 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.arch-keys{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:12px}
.arch-key{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:11px 15px 12px;border:1px solid rgba(227,176,75,.45);background:linear-gradient(180deg,rgba(227,176,75,.12),rgba(227,176,75,.03));color:var(--text);cursor:pointer;text-align:left;transition:background .2s,border-color .2s,transform .2s}
.arch-key:hover,.arch-key:focus-visible{background:var(--gold);border-color:var(--gold);color:#000;outline:none;transform:translateY(-2px)}
.arch-key .d{font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.arch-key:hover .d,.arch-key:focus-visible .d{color:#000}
.arch-key .h{font-family:var(--display);font-size:17px;line-height:1;text-transform:uppercase}
.arch-paper .pic{position:relative}
.arch-paper .flag{position:absolute;top:10px;left:-6px;z-index:1;padding:6px 10px 6px 12px;background:var(--gold);color:#000;font:700 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.arch-paper .flag::after{content:"";position:absolute;left:0;bottom:-6px;border-top:6px solid #8a6420;border-left:6px solid transparent}
.arch-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;margin:34px 0 0;padding:26px;border:1px solid rgba(227,176,75,.25);background:radial-gradient(80% 120% at 0% 0%,rgba(227,176,75,.12),transparent 60%),#0d0b08}
.arch-feat-pic{display:block;padding:0;border:0;background:none;cursor:pointer;transform:rotate(-1.2deg);transition:transform .35s ease}
.arch-feat-pic:hover,.arch-feat-pic:focus-visible{transform:rotate(0) scale(1.015);outline:none}
.arch-feat-pic img{display:block;width:100%;height:auto;box-shadow:0 22px 50px rgba(0,0,0,.7)}
.arch-feat-text .k{font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.arch-feat-text h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,4.2vw,54px);line-height:.98;text-transform:uppercase;margin:12px 0 0}
.arch-feat-text p{color:#d9d3c7;font-size:16.5px;line-height:1.6;margin:14px 0 0;text-wrap:pretty}
.arch-read{margin-top:20px;font:700 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#000;background:var(--gold);border:0;padding:14px 20px;cursor:pointer;transition:background .2s}
.arch-read:hover,.arch-read:focus-visible{background:var(--gold-hi);outline:none}
.arch-read::after{content:" \2192"}
.arch-desk{margin-top:30px;padding:8px 26px 34px;border-radius:4px;background:radial-gradient(70% 40% at 50% 0%,rgba(255,196,120,.10),transparent 70%),repeating-linear-gradient(91deg,#1a120b 0 7px,#1e150d 7px 15px,#170f09 15px 24px,#1c130c 24px 31px);box-shadow:inset 0 0 80px rgba(0,0,0,.6)}
.arch-desk .arch-pile{padding-top:30px}
.arch-div{scroll-margin-top:24px}
.arch-div .card{aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:flex-end;padding:20px 18px;background:linear-gradient(160deg,#e9dcbc,#d8c59a);color:#2a2116;box-shadow:0 16px 30px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.12);position:relative;border-radius:2px 14px 2px 2px}
.arch-div .card::before{content:"";position:absolute;top:-14px;left:18px;width:42%;height:16px;background:#d8c59a;border-radius:6px 6px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.arch-div .mn{font-family:var(--display);font-size:clamp(30px,3.4vw,44px);line-height:.95;text-transform:uppercase}
.arch-div .yr{margin-top:6px;font:700 12px/1 var(--sans);letter-spacing:.3em;color:#7a5a22}
.arch-div .ct{margin-top:14px;padding-top:10px;border-top:1px solid rgba(42,33,22,.3);font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#4a3b26}
.arch-month{padding-top:30px;scroll-margin-top:20px}
.arch-mh{display:flex;align-items:baseline;gap:12px;margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid rgba(227,176,75,.28)}
.arch-mh span{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.6vw,44px);line-height:1;text-transform:uppercase;color:var(--text)}
.arch-mh em{font-style:normal;font:600 12px/1 var(--sans);letter-spacing:.24em;color:var(--gold)}
.arch-pile{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 22px;align-items:start}
.arch-pile li{transform:rotate(var(--tilt,0deg));transition:transform .35s ease}
.arch-pile li:hover,.arch-pile li:focus-within{transform:rotate(0) translateY(-6px);z-index:2}
.arch-paper{display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.arch-paper .pic{display:block;box-shadow:0 16px 30px rgba(0,0,0,.65),0 2px 6px rgba(0,0,0,.5);transition:box-shadow .35s ease}
.arch-paper:hover .pic,.arch-paper:focus-visible .pic{box-shadow:0 26px 44px rgba(0,0,0,.75),0 0 0 2px rgba(227,176,75,.7)}
.arch-paper:focus-visible{outline:none}
.arch-paper img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.arch-paper.wide img{aspect-ratio:3/2}
.arch-paper .cap{display:block;padding:12px 2px 0}
.arch-paper .d{display:block;font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.arch-paper .h{display:block;margin-top:6px;font-family:var(--display);font-size:18px;line-height:1.05;text-transform:uppercase;color:var(--text)}
.arch-back{margin:26px 0 0;text-align:center}
.arch-back a{color:var(--gold-hi);font-weight:600;text-decoration:none}
.arch-back a::before{content:"\2190  "}
/* reader */
html.rp-open{overflow:hidden}
.rp{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.84);opacity:0;transition:opacity .25s ease}
.rp.on{opacity:1}
.rp[hidden]{display:none}
.rp-card{--paper:#f0e7d6;--ink:#1c1915;width:min(860px,100%);height:min(92vh,920px);display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border-radius:3px;box-shadow:0 40px 120px rgba(0,0,0,.8);overflow:hidden;transform:translateY(14px);transition:transform .3s ease}
.rp.on .rp-card{transform:none}
.rp-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px 10px 22px;border-bottom:3px double var(--ink)}
.rp-mast{height:40px;width:auto;display:block}
.rp-close{width:40px;height:40px;border:1px solid var(--ink);border-radius:50%;background:none;color:var(--ink);font:400 26px/1 Georgia,serif;cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s}
.rp-close:hover,.rp-close:focus-visible{background:var(--ink);color:var(--paper);outline:none}
.rp-scroll{flex:1;overflow:auto;overscroll-behavior:contain}
.rp-grid{padding:30px 48px 10px}
.rp-img{max-width:680px;margin:0 auto 26px}
.rp-zoomer{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.rp-zoomer .zi{position:absolute;right:12px;bottom:12px;width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.6);display:grid;place-items:center;transition:background .2s}
.rp-zoomer:hover .zi,.rp-zoomer:focus-visible .zi{background:rgba(0,0,0,.88)}
.rp-zoomer:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.rp-zoomer .zi svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
.rp-zoom{z-index:98}
.rp-zoom[hidden]{display:none}
.rp-img img{display:block;width:100%;height:auto;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.rp-text{font-family:"Libre Baskerville",Georgia,serif;max-width:680px;margin:0 auto}
.rp-date{font:600 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#6b5f4a;padding:9px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.rp-head{font-family:"Libre Baskerville",Georgia,serif;font-weight:700;font-size:clamp(30px,3.3vw,46px);line-height:1.06;letter-spacing:-.01em;margin:16px 0 0;text-transform:uppercase}
.rp-stand{font-style:italic;font-size:19px;line-height:1.5;color:#3b342b;margin:14px 0 0;text-wrap:pretty}
.rp-by{font:700 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#8a2f1c;margin:18px 0 0;padding-bottom:14px;border-bottom:1px solid rgba(28,25,21,.25)}
.rp-body{margin-top:18px}
.rp-body p{font-size:17px;line-height:1.78;margin:0 0 15px;hyphens:auto;text-wrap:pretty}
.rp-body p.lede{font-size:21px;line-height:1.5;font-weight:700}
.rp-body p.first::first-letter{float:left;font-size:66px;line-height:.86;font-weight:700;padding:6px 10px 0 0}
.rp-briefs{margin-top:28px;padding-top:12px;border-top:3px double var(--ink)}
.rp-briefs h3{font:700 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;margin:6px 0 4px}
.rp-briefs ul{list-style:none;margin:0;padding:0}
.rp-briefs li{padding:14px 0;border-top:1px solid rgba(28,25,21,.2)}
.rp-briefs li:first-child{border-top:0}
.rp-briefs h4{font-family:"Libre Baskerville",Georgia,serif;font-weight:700;font-size:16px;margin:0;text-transform:uppercase;letter-spacing:.02em}
.rp-briefs p{font-size:15.5px;line-height:1.6;margin:6px 0 0}
.rp-nav{display:flex;justify-content:space-between;gap:12px;padding:18px 36px 28px;border-top:1px solid rgba(28,25,21,.2);margin-top:18px}
.rp-nav button{display:flex;flex-direction:column;gap:5px;min-width:150px;font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:none;border:1px solid var(--ink);padding:12px 16px;cursor:pointer;transition:background .2s,color .2s}
.rp-nav .rp-next{align-items:flex-end;text-align:right}
.rp-nav button small{font:400 12px/1 var(--sans);letter-spacing:.04em;text-transform:none;opacity:.75}
.rp-nav button:hover:not(:disabled),.rp-nav button:focus-visible{background:var(--ink);color:var(--paper);outline:none}
.rp-nav button:disabled{opacity:.25;cursor:default}
.rp-prev span::before{content:"\2190  "}
.rp-next span::after{content:"  \2192"}
@media (max-width:1000px){.arch-pile{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){
  .arch-feature{grid-template-columns:minmax(0,1fr);gap:22px;padding:18px}
  .arch-desk{padding:4px 14px 24px}
  .arch-pile{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  .arch-paper .h{font-size:16px}
  .rp{padding:0}
  .rp-card{height:100%;width:100%;border-radius:0}
  .rp-grid{padding:18px 18px 4px}
  .rp-nav{padding:14px 18px 22px}
  .rp-nav button{min-width:0;flex:1}
  .rp-mast{height:30px}
}
@media (prefers-reduced-motion:reduce){.arch-pile li,.arch-feat-pic,.rp,.rp-card{transition:none}}
.arch-link{margin:16px 0 0}
.arch-link a{display:inline-block;font:700 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#000;background:var(--gold);padding:13px 18px;text-decoration:none}
.arch-link a:hover{background:var(--gold-hi)}
.arch-link a::after{content:" \2192"}
/* end Beacon archive */

/* Facebook button (18 Oct): round icon in the top bar (desktop), in the phone menu beside the language and 1985 buttons, and a footer link */
.fb-link{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;margin-left:18px;border-radius:50%;border:1px solid rgba(227,176,75,.35);background:rgba(255,255,255,.08);color:#f2ede2;transition:background .2s,border-color .2s,color .2s}
.fb-link svg{width:17px;height:17px;fill:currentColor}
.fb-link:hover,.fb-link:focus-visible{background:#0866ff;border-color:#0866ff;color:#fff;outline:none}
.nav .fb-link + .retro{margin-left:10px}
.menu-open .nav .fb-link{visibility:hidden;opacity:0}
.menu .menu-opts .fb-link{width:42px;height:42px;margin:0}
.menu .menu-opts .fb-link svg{width:21px;height:21px}
html.uf .fb-link{border-color:rgba(200,190,175,.25);background:rgba(255,255,255,.04)}
@media (max-width:860px){.nav .fb-link{display:none}}
/* end Facebook button */

/* Share this page (18 Oct): a centred strip at the foot of every public page */
.share{margin:64px auto 0;padding:26px 0 6px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.share h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(20px,2.4vw,26px);letter-spacing:.05em;color:#e9e4d8}
.share .sh-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.share a,.share button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;min-width:44px;border-radius:999px;border:1px solid rgba(227,176,75,.35);background:rgba(255,255,255,.06);color:#f2ede2;font:600 13px var(--sans);letter-spacing:.02em;transition:background .2s,border-color .2s,transform .2s,color .2s}
.share a{width:44px}
.share button{padding:0 16px}
.share svg{width:19px;height:19px;fill:currentColor;flex:0 0 auto}
.share a:hover,.share button:hover,.share a:focus-visible,.share button:focus-visible{background:rgba(227,176,75,.18);border-color:var(--gold-hi);transform:translateY(-2px);outline:none}
.share .sh-whatsapp:hover{background:#1f8f4e;border-color:#25d366}
.share .sh-facebook:hover{background:#0866ff;border-color:#0866ff}
.share .sh-copy.ok{background:linear-gradient(var(--gold-hi),var(--gold));color:#140c02;border-color:var(--gold-hi)}
html.uf .share a,html.uf .share button{border-color:rgba(200,190,175,.25);background:rgba(255,255,255,.04)}
html.uf .share h2{font-family:var(--uf-head);text-transform:none}
/* end Share this page */

/* Underframe (18 Oct): entering the page takes over the whole site. The gold drains to ash grey, the Framework's lattice goes dead, cut
   threads hang from the top of the screen and red cracks glow in black glass at the bottom. Switched on by html.uf. */
html.uf{--gold:#9d978d;--gold-hi:#d6d0c4;--text:#d7d2c8;--muted:#857f76;--line:rgba(200,190,175,.08);--uf-red:#b3161c;--uf-head:"IM Fell English SC",Georgia,serif;--uf-mono:"VT323","Courier New",monospace;background:#000}
html.uf body{background:radial-gradient(120% 70% at 50% 112%,#1c0405 0%,#060303 45%,#000 78%) fixed;color:var(--text)}
html.uf ::selection{background:#5c0d10;color:#fff}
html.uf-cover body::after{content:"";position:fixed;inset:0;background:#000;z-index:449;animation:ufUncover 0s linear 4s forwards}
@keyframes ufUncover{to{visibility:hidden}}
.uf-threads,.uf-floor{position:fixed;inset:0;z-index:0;pointer-events:none}
.uf-floor{animation:ufPulse 7s ease-in-out infinite alternate}
@keyframes ufPulse{from{opacity:.65}to{opacity:1}}
html.uf .nav{background:rgba(3,3,3,.94);border-bottom-color:rgba(200,190,175,.10)}
html.uf .nav.scrolled{background:rgba(0,0,0,.72)}
html.uf .nav .brand img{filter:grayscale(1) brightness(.78) contrast(1.1)}
html.uf .nav .links a,html.uf .nav .dd-t{color:#b9b3a8}
html.uf .nav .links a:hover,html.uf .nav .dd-t:hover,html.uf .nav .dd.open .dd-t{color:#efe9dd}
html.uf .nav .ink{background:linear-gradient(90deg,#5a0c0f,var(--uf-red));box-shadow:0 0 10px rgba(190,24,28,.7)}
html.uf .nav .dd-m{background:rgba(4,4,4,.97);border-color:rgba(200,190,175,.16);box-shadow:0 20px 50px rgba(0,0,0,.8)}
html.uf .nav .dd-m a img,html.uf .menu a img{filter:grayscale(1);border-color:rgba(200,190,175,.25)}
html.uf .nav .dd-m a:hover{background:rgba(179,22,28,.12)}
html.uf .lang button:not(.on){border-color:rgba(200,190,175,.25);background:rgba(255,255,255,.04)}
html.uf .menu{background:#030303}
html.uf .menu-lattice{background:repeating-linear-gradient(45deg,transparent 0 38px,rgba(200,190,175,.07) 38px 39px),repeating-linear-gradient(-45deg,transparent 0 38px,rgba(200,190,175,.07) 38px 39px)}
html.uf .tabbar{background:rgba(3,3,3,.96)}
html.uf .tabbar a.on{color:#e8e2d6}
html.uf .tabbar a.on svg{filter:drop-shadow(0 0 6px rgba(190,24,28,.8))}
html.uf .mini{border-color:rgba(200,190,175,.3);box-shadow:0 10px 40px rgba(0,0,0,.8)}
html.uf footer{border-top-color:rgba(200,190,175,.08)}
html.uf .reveal{filter:blur(6px);transform:translateY(10px);transition:opacity 1.6s ease,transform 1.6s ease,filter 1.6s ease}
html.uf .reveal.in{filter:none;transform:none}
.uf-page{max-width:1080px;margin:0 auto;padding-bottom:20px}
.uf-hero{position:relative;margin-top:14px}   /* no picture since 19 Oct (Jonathan: it repeated the Scale); the corridor shows behind */
.uf-hero img{width:100%;height:auto;filter:saturate(.85) contrast(1.05);animation:ufBreathe 16s ease-in-out infinite alternate}
@keyframes ufBreathe{from{transform:scale(1)}to{transform:scale(1.04)}}
.uf-hero-txt{position:relative;z-index:1;padding:clamp(28px,6vw,90px) 0 8px}
.uf-hero.has-img{border:1px solid rgba(200,190,175,.10);background:#000;overflow:hidden}
.uf-hero.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.9) 100%);pointer-events:none}
.uf-hero.has-img .uf-hero-txt{position:absolute;left:0;right:0;bottom:0;padding:22px 26px}
@media (max-width:640px){.uf-hero.has-img .uf-hero-txt{position:relative;padding:18px 16px 4px}.uf-hero.has-img::after{display:none}}
.uf-page h1{font-family:var(--uf-head);font-weight:400;font-size:clamp(46px,8.5vw,100px);line-height:.92;letter-spacing:.02em;color:#ebe5d8;text-shadow:0 0 30px rgba(0,0,0,.95)}
.uf-lead{margin-top:10px;font-size:clamp(16px,1.9vw,19px);color:#c9c3b8;max-width:620px}
.uf-sound{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:8px 16px;border:1px solid rgba(200,190,175,.35);font-family:var(--uf-mono);font-size:21px;letter-spacing:.05em;text-transform:uppercase;color:#e4ded2;background:rgba(0,0,0,.55);transition:border-color .3s,box-shadow .3s}
.uf-sound svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.uf-sound:hover{border-color:rgba(200,190,175,.7)}
.uf-sound[aria-pressed="true"]{border-color:var(--uf-red);box-shadow:0 0 22px rgba(190,24,28,.5)}
.uf-note{display:block;margin-top:8px;font-size:13px;color:#857f76}
.uf-sec{margin-top:clamp(56px,9vw,104px)}
.uf-sec h2{font-family:var(--uf-head);font-weight:400;font-size:clamp(30px,4.6vw,50px);line-height:1.02;letter-spacing:.02em;color:#e4ded2;margin-bottom:14px}
.uf-sec p{font-size:clamp(17.5px,1.5vw,19px);line-height:1.78;color:#bdb7ac;text-wrap:pretty}
.uf-sec p+p{margin-top:14px}
.uf-fig{margin:4px 0 20px;border:1px solid rgba(200,190,175,.10);overflow:hidden;background:#000}
.uf-fig img{width:100%;height:auto}
.uf-sec p + .uf-fig{margin-top:22px}
.uf-fig.full{position:relative;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);height:42vw;max-height:78vh;overflow:hidden;border:0}   /* Death, edge to edge, glowing edges, parallax (19 Oct) */
.uf-fig.full img{position:absolute;left:0;top:0;width:100%;height:auto;will-change:transform}
.uf-fig.full::before,.uf-fig.full::after{content:"";position:absolute;left:0;right:0;height:2px;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent,#a3141a 18%,#ff3b30 50%,#a3141a 82%,transparent);box-shadow:0 0 16px 3px rgba(210,28,34,.65);animation:ufEdge 4.5s ease-in-out infinite alternate}
.uf-fig.full::before{top:0}
.uf-fig.full::after{bottom:0}
@keyframes ufEdge{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.uf-fig.full{height:auto;max-height:none}.uf-fig.full img{position:static}.uf-fig.full::before,.uf-fig.full::after{animation:none}}
.uf-fig + .uf-btn{margin-top:4px}
.uf-fig img,.uf-hero img{cursor:zoom-in}
.uf-lightbox{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.95);display:flex;align-items:center;justify-content:center;padding:3vmin;opacity:0;transition:opacity .3s ease;cursor:zoom-out}
.uf-lightbox.on{opacity:1}
.uf-lightbox img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 0 70px rgba(120,10,14,.35)}
.uf-lb-x{position:absolute;top:12px;right:16px;width:44px;height:44px;font-size:34px;line-height:1;color:#d6d0c4}
.uf-lb-x:hover{color:#fff}
.uf-term{margin-top:24px;background:#020202;border:1px solid rgba(200,190,175,.14);box-shadow:inset 0 0 60px rgba(0,0,0,.9),0 0 40px rgba(120,10,14,.16);padding:18px 20px;font-family:var(--uf-mono);font-size:clamp(17px,2.4vw,22px);line-height:1.35;color:#c9c2b4;min-height:10.4em;white-space:pre;overflow:hidden;position:relative}
.uf-term::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);pointer-events:none}
.uf-term .r{color:#e0262d;text-shadow:0 0 8px rgba(224,38,45,.6)}
.uf-term .cur{display:inline-block;width:.55em;height:.95em;background:#c9c2b4;vertical-align:-.1em;animation:ufBlink 1s steps(1) infinite}
@keyframes ufBlink{50%{opacity:0}}
.uf-ledger{margin-top:26px;border-top:1px solid rgba(200,190,175,.12)}
.uf-ledger div{display:grid;grid-template-columns:190px 1fr;gap:18px;padding:15px 2px;border-bottom:1px solid rgba(200,190,175,.12)}
.uf-ledger dt{font-family:var(--uf-mono);font-size:23px;line-height:1.1;color:#e0262d;letter-spacing:.04em;text-transform:uppercase}
.uf-ledger dd{color:#bdb7ac;font-size:16.5px;line-height:1.65}
.uf-names{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 22px;font-family:var(--uf-head);font-size:clamp(18px,2.4vw,24px);color:#a8a196}
.uf-names span{transition:opacity 2.4s ease,filter 2.4s ease}
.uf-names span.gone{opacity:.06;filter:blur(3px)}
.uf-rules{list-style:none;margin-top:12px;counter-reset:r}
.uf-rules li{counter-increment:r;position:relative;padding:12px 0 12px 50px;border-bottom:1px solid rgba(200,190,175,.10);color:#bdb7ac;font-size:17px;line-height:1.6}
.uf-rules li::before{content:counter(r,upper-roman);position:absolute;left:0;top:11px;font-family:var(--uf-head);color:#e0262d;font-size:20px}
.uf-btn{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:10px 22px;border:1px solid rgba(200,190,175,.35);font-family:var(--uf-mono);font-size:22px;letter-spacing:.06em;text-transform:uppercase;color:#e4ded2;background:rgba(0,0,0,.6);transition:border-color .3s,color .3s,box-shadow .3s}
.uf-btn:hover{border-color:var(--uf-red);color:#fff;box-shadow:0 0 24px rgba(190,24,28,.45)}
.uf-end{margin-top:clamp(70px,10vw,130px);text-align:center}
.uf-end p{font-family:var(--uf-head);font-size:clamp(20px,2.6vw,27px);line-height:1.55;color:#a39d92;max-width:720px;margin:0 auto}
.uf-boot{position:fixed;inset:0;z-index:450;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:20px;transition:opacity .9s ease}
.uf-boot pre{font-family:var(--uf-mono);font-size:clamp(16px,2.6vw,24px);line-height:1.45;color:#c9c2b4;white-space:pre;min-width:min(520px,90vw);min-height:9em;margin:0}
.uf-boot.out{opacity:0;pointer-events:none}
.uf-gate{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.uf-gate[hidden]{display:none}
.uf-gate button{font-family:var(--uf-mono);font-size:clamp(18px,2.4vw,24px);letter-spacing:.06em;text-transform:uppercase;padding:10px 20px;border:1px solid rgba(200,190,175,.4);color:#e4ded2;transition:border-color .3s,box-shadow .3s,color .3s}
.uf-gate button:hover,.uf-gate button:focus-visible{border-color:#b3161c;color:#fff;box-shadow:0 0 24px rgba(190,24,28,.5);outline:none}
@media (max-width:640px){
  .uf-hero-txt{position:relative;padding:18px 16px 4px}
  .uf-hero::after{display:none}
  .uf-ledger div{grid-template-columns:1fr;gap:4px}
}
.uf-tunnel{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#000}
.uf-walls{position:absolute;inset:0;transform-origin:50% 48%;animation:ufDolly 46s ease-in-out infinite alternate}
.uf-walls i{position:absolute;top:0;bottom:0;width:50%;background-size:cover;background-repeat:no-repeat;background-position:right center;filter:grayscale(1) brightness(1.3) contrast(1.2)}
.uf-walls .l{left:0}
.uf-walls .r{right:0;transform:scaleX(-1)}
.uf-walls .full{position:absolute;inset:0;width:auto;background-size:cover;background-position:50% 57%}
@media (max-width:700px){.uf-walls .l{width:100%;background-position:20% center}.uf-walls .r{display:none}}   /* phones: just the left wall, so the big near mirrors show (Jonathan, 18 Oct) */
.uf-tint{position:absolute;inset:0;background:#e0221c;mix-blend-mode:multiply}
.uf-shade{position:absolute;inset:0;width:100%;height:100%}
@keyframes ufDolly{from{transform:scale(1)}to{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.uf-walls{animation:none}}
/* the door at the foot of the Villains page, and the fall through it */
.uf-under{margin-top:clamp(50px,8vw,90px)}
.uf-under h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(28px,4vw,44px);color:#cfc9bd;margin-bottom:14px}
.uf-door{position:relative;display:block;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#000}
.uf-door img{width:100%;height:auto;filter:grayscale(.55) brightness(.62);transition:filter .8s ease,transform 1.6s ease}
.uf-door:hover img{filter:grayscale(.1) brightness(.82);transform:scale(1.03)}
.uf-door-txt{position:absolute;left:0;right:0;bottom:0;padding:24px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.92));display:grid;gap:6px}
.uf-door-txt b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(34px,6vw,72px);line-height:.95;color:#efe9dd}
.uf-door-txt span{color:#bdb7ac;font-size:16px}
.uf-door-txt em{font-style:normal;justify-self:start;margin-top:8px;padding:9px 18px;border:1px solid rgba(190,24,28,.75);color:#fff;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:13px;box-shadow:0 0 20px rgba(190,24,28,.35);transition:box-shadow .3s,background .3s}
.uf-door:hover .uf-door-txt em{background:rgba(179,22,28,.25);box-shadow:0 0 30px rgba(190,24,28,.6)}
@media (max-width:640px){.uf-door-txt{position:static;background:#050505}}
.uf-fall{position:fixed;inset:0;z-index:500;pointer-events:none}
.uf-fall i{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%,#1a0405,#000 70%);opacity:0;transition:opacity .9s ease .45s}
.uf-fall svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 3px rgba(230,30,36,.95))}
.uf-fall path{fill:none;stroke:#d11a22;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:ufCrack .6s cubic-bezier(.2,.7,.3,1) forwards}
html.uf-falling .uf-fall i{opacity:1}
html.uf-falling main,html.uf-falling .nav,html.uf-falling footer,html.uf-falling .tabbar,html.uf-falling canvas.field{filter:grayscale(1) brightness(.6);transition:filter .5s ease}
@keyframes ufCrack{to{stroke-dashoffset:0}}
/* end Underframe */