/* RVLS/OS mockup chrome: tokens per SHARED-BRIEF */
:root {
  --chrome:#c8c8c8; --hi:#ededed; --lo:#0b0b0b; --mid:#7c7c7c; --paper:#f4f4f2; --ink:#0b0b0b;
  --f-ui:"VT323", monospace; --f-disp:"Russo One", sans-serif; --f-read:"JetBrains Mono", monospace;
  --bar:44px; --wall:url(/assets/wall/bonfire-v4-2048.webp);
}
@media (max-width:767px) { :root { --wall:url(/assets/wall/bonfire-v4-1024.webp); } }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:#9a9a9a; color:var(--ink); }
body { font:15px/1.55 var(--f-read); }

/* ---------- no-JS / pre-enhancement document ---------- */
#doc { max-width:46rem; margin:0 auto; padding:24px 16px 64px; }
.paper { background:var(--paper); color:var(--ink); padding:20px 22px; border:2px solid var(--lo); }
.paper h1 { font:400 30px/1.1 var(--f-disp); margin:6px 0 10px; }
.paper h2, .paper h3 { font:400 20px/1.2 var(--f-disp); }
.paper a { color:var(--ink); }
.synopsis { font-size:16px; } .tags { font:18px var(--f-ui); color:#444; } .crumb { font:18px var(--f-ui); margin:0; }
.docsigil { display:block; }
html.os-on #doc { display:none; }
/* while the desktop boots, show the plate's average colour instead of flashing the no-js page; failsafe after 4 s */
html.js-boot:not(.os-on) body { background:#2d2739; }
html.js-boot:not(.os-on) #doc { visibility:hidden; animation:doc-failsafe 0s 4s forwards; }
@keyframes doc-failsafe { to { visibility:visible; } }
/* boot strip: sits where the taskbar will be, so the early icons stay visible; gone at os-on or the 4 s failsafe */
html.js-boot:not(.os-on) body::after { content:"rvls/os · waking the fire"; position:fixed; left:0; right:0; bottom:0; height:40px; z-index:2;
  display:flex; align-items:center; padding:0 14px; font:400 15px/1 "RVLS Thorn", monospace; color:#d8d0e8; letter-spacing:.04em;
  background:linear-gradient(90deg,#8e7cc3,#8e7cc3) 0 0/0 2px no-repeat, #1d1828; border-top:1px solid #4a405e;
  animation:boot-load 3.2s cubic-bezier(.2,.7,.3,1) forwards, boot-gone 0s 4s forwards; }
@keyframes boot-load { to { background-size:92% 2px, auto; } }
@keyframes boot-gone { to { visibility:hidden; } }
@media (prefers-reduced-motion: reduce) { html.js-boot:not(.os-on) body::after { animation:boot-gone 0s 4s forwards; background-size:60% 2px, auto; } }

/* ---------- shell ---------- */
#os { position:fixed; inset:0; overflow:hidden; background:#2d2739 var(--wall) var(--wall-pos, center)/cover no-repeat; font-family:var(--f-ui); font-size:20px; }
html:not(.js-boot):not(.os-on) #os { display:none; }
html.js-boot:not(.os-on) #os { pointer-events:none; }   /* server-rendered icons paint early but wait for the boot */
.bevel { background:var(--chrome); border:2px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi); }
.sunk  { background:var(--chrome); border:2px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
button { font:inherit; color:inherit; cursor:pointer; }
:focus-visible { outline:2px dotted var(--lo); outline-offset:2px; }

/* desktop icons */
.icons { position:absolute; top:12px; left:12px; bottom:calc(var(--bar) + 12px); display:grid; grid-auto-flow:column;
  grid-template-rows:repeat(auto-fill, 96px); gap:6px 14px; align-content:start; }
.icon { width:84px; display:flex; flex-direction:column; align-items:center; gap:2px; background:none; border:0; padding:4px; }
.icon .glyph { width:48px; height:48px; display:grid; place-items:center; }
.icon .glyph img { width:48px; height:48px; image-rendering:pixelated; filter:drop-shadow(1px 1px 0 var(--hi)); }
.icon .lbl { font-size:19px; line-height:1; padding:1px 3px; color:var(--ink); background:rgba(200,200,200,.75); }
.icon.sel .lbl, .icon:focus-visible .lbl { background:var(--lo); color:var(--hi); }
.icon:focus-visible { outline:2px dotted var(--lo); }
.icon .glyph svg { width:40px; height:40px; }

/* windows */
.win { position:absolute; display:flex; flex-direction:column; min-width:280px; min-height:180px; }
.win.min { display:none; }
.win .tb { display:flex; align-items:center; gap:6px; height:32px; padding:0 4px 0 6px; background:var(--mid); color:var(--hi);
  user-select:none; touch-action:none; }
.win.active .tb { background:var(--acc, #4a4a4a); }
.win .tb img { width:22px; height:22px; filter:invert(1); }
.win .tb .t { flex:1; font-size:22px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.win .ctl { width:26px; height:24px; padding:0; display:grid; place-items:center; }
.win .ctl svg { width:16px; height:16px; }
.win .body { flex:1; overflow:auto; margin:4px; background:var(--paper); color:var(--ink); font:15px/1.55 var(--f-read); }
.win .body .paper { border:0; }
.win.max { inset:0 0 var(--bar) 0 !important; width:auto !important; height:auto !important; }
.win .grip { position:absolute; right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize; touch-action:none;
  background:linear-gradient(135deg, transparent 50%, var(--mid) 50% 60%, transparent 60% 70%, var(--mid) 70% 80%, transparent 80%); }

/* folder tabs */
.tabs { display:flex; gap:2px; padding:6px 6px 0; background:var(--chrome); border-bottom:2px solid var(--lo); }
.tabs button { font:20px var(--f-ui); padding:2px 12px 0; background:#b4b4b4; border:2px solid; border-color:var(--hi) var(--lo) transparent var(--hi);
  border-radius:6px 10px 0 0; position:relative; top:2px; }
.tabs button[aria-selected="true"] { background:var(--paper); top:2px; padding-bottom:2px; border-bottom:2px solid var(--paper); }

/* taskbar */
.taskbar { position:absolute; left:0; right:0; bottom:0; height:var(--bar); display:flex; align-items:center; gap:4px; padding:3px 4px; z-index:9000; }
.start { height:36px; padding:0 10px; display:flex; align-items:center; gap:6px; font-size:24px; }
.start img { width:22px; height:22px; }
.tasks { flex:1; display:flex; gap:4px; overflow:hidden; }
.task { height:36px; max-width:200px; flex:1; display:flex; align-items:center; gap:6px; padding:0 8px; font-size:20px; white-space:nowrap; overflow:hidden; }
.task img { width:18px; height:18px; }
.task.on { border-color:var(--lo) var(--hi) var(--hi) var(--lo); background:#b4b4b4; }
.tray { height:36px; display:flex; align-items:center; gap:10px; padding:0 10px; font-size:20px; }
.tray button { background:none; border:0; padding:0 2px; font-size:20px; }
.startmenu { position:absolute; left:4px; bottom:calc(var(--bar) + 2px); width:260px; z-index:9500; display:flex; }
.startmenu .side { width:30px; background:var(--lo); color:var(--chrome); writing-mode:vertical-rl; transform:rotate(180deg);
  font:24px var(--f-disp); padding:8px 2px; }
.startmenu ul { list-style:none; margin:0; padding:4px; flex:1; }
.startmenu li button, .startmenu li a { display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none; border:0;
  padding:5px 8px; font-size:21px; color:var(--ink); text-decoration:none; }
.startmenu li button:hover, .startmenu li a:hover, .startmenu li button:focus-visible { background:var(--lo); color:var(--hi); }
.startmenu .sep { border-top:2px solid var(--mid); margin:4px 0; }
.startmenu .grp { font-size:16px; color:#555; padding:4px 8px 0; letter-spacing:2px; }

/* apps */
.gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:12px; padding:12px; }
.gallery button { background:none; border:0; text-align:center; font:16px var(--f-ui); }
.gallery img { width:100%; aspect-ratio:1; object-fit:cover; border:2px solid var(--lo); }
.viewer { display:flex; flex-direction:column; height:100%; }
.viewer .stage { flex:1; display:grid; place-items:center; background:#2a2a2a; min-height:0; overflow:hidden; }
.viewer .stage img { max-width:100%; max-height:100%; object-fit:contain; }
.viewer .props { font:14px var(--f-read); padding:8px 12px; border-top:2px solid var(--lo); background:var(--paper); flex:none; }
.display { padding:12px; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px; }
.display button { background:none; border:2px solid transparent; padding:2px; font:17px var(--f-ui); }
.display button[aria-pressed="true"] { border-color:var(--lo); }
.display img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.player { padding:10px; font-family:var(--f-ui); }
.player .lcd { background:#101410; color:#7dff9a; font-size:26px; padding:6px 10px; border:2px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.player .row { display:flex; gap:6px; margin-top:8px; }
.player .row button { padding:2px 12px; font-size:20px; }
.player ol { font:15px var(--f-read); margin:10px 0 0; padding-left:22px; }
.loading { padding:24px; font:20px var(--f-ui); }

/* ---------- tablet: maximized, one at a time ---------- */
html[data-mode="tablet"] .win { inset:0 0 var(--bar) 0 !important; width:auto !important; height:auto !important; }
html[data-mode="tablet"] #os > .win:not(.active) { display:none; }
html[data-mode="tablet"] .grip, html[data-mode="tablet"] .ctl.max { display:none; }

/* ---------- phone: handheld ---------- */
/* phone uses the chosen wallpaper too (was a fixed collage plate until 2026-10-20) */
html[data-mode="phone"] .taskbar { display:none; }
html[data-mode="phone"] .status { position:absolute; top:0; left:0; right:0; height:36px; display:flex; align-items:center; gap:8px;
  padding:0 8px; z-index:9000; font-size:20px; }
html:not([data-mode="phone"]) .status { display:none; }
html[data-mode="phone"] .status .back { height:28px; padding:0 10px; }
html[data-mode="phone"] .status .ttl { flex:1; text-align:center; }
html[data-mode="phone"] .icons { top:52px; left:0; right:0; bottom:16px; grid-auto-flow:row; grid-template-columns:repeat(4, 1fr);
  grid-template-rows:none; justify-items:center; padding:0 8px; }
html[data-mode="phone"] .icon { width:76px; min-height:44px; }
html[data-mode="phone"] .win { inset:36px 0 0 0 !important; width:auto !important; height:auto !important; border:0; }
html[data-mode="phone"] #os > .win:not(.active) { display:none; }
html[data-mode="phone"] .win .tb, html[data-mode="phone"] .grip { display:none; }
html[data-mode="phone"] .win .body { margin:0; font-size:16px; }
.startmenu[hidden] { display:none; }

/* ---------- era skins (display › skin). Same layout, different chrome: period-shaped, our own drawing ---------- */
/* QNX Photon: cool grey-blue, gradient title bars, rounded controls */
html[data-skin="photon"] { --chrome:#d4d9e2; --hi:#ffffff; --lo:#39414f; --mid:#8a94a6; --paper:#fbfbfd; }
html[data-skin="photon"] .win .tb { background:linear-gradient(#b9c3d4,#8a97ad); color:#1d2430; }
html[data-skin="photon"] .win.active .tb { background:linear-gradient(#7d96c2, var(--acc,#47608c)); color:#fff; }
html[data-skin="photon"] .win .ctl { border-radius:4px; }
html[data-skin="photon"] .win .tb .t { font:600 15px "DejaVu Sans", sans-serif; letter-spacing:.3px; }
html[data-skin="photon"] .taskbar { background:linear-gradient(#e3e7ee,#c2c9d6); }
/* CDE / Motif: sand + teal, thick 3px bevels, centred title */
html[data-skin="cde"] { --chrome:#c9bf9f; --hi:#efe7cc; --lo:#4c4632; --mid:#8f866a; --paper:#f3efe2; }
html[data-skin="cde"] .bevel, html[data-skin="cde"] .sunk { border-width:3px; }
html[data-skin="cde"] .win .tb { background:#9e9576; color:#2c281c; justify-content:center; }
html[data-skin="cde"] .win.active .tb { background:#4f8a8b; color:#f3efe2; }
html[data-skin="cde"] .win .tb .t { text-align:center; }
html[data-skin="cde"] .taskbar { height:52px; }
/* BeOS: yellow tab title only as wide as its text, sitting on the frame */
html[data-skin="beos"] { --chrome:#dadada; --hi:#ffffff; --lo:#555; --mid:#b0b0b0; }
html[data-skin="beos"] .win { margin-top:28px; }
html[data-skin="beos"] .win .tb { position:absolute; top:-30px; left:-2px; width:auto; max-width:70%; height:28px; background:#e8e8e8;
  border:2px solid; border-color:var(--hi) var(--lo) transparent var(--hi); color:#333; }
html[data-skin="beos"] .win.active .tb { background:#ffcb00; color:#000; }
html[data-skin="beos"] .win .tb .t { flex:none; font:bold 14px "DejaVu Sans", sans-serif; padding-right:8px; }
/* Noir: the gothic night mode - black chrome, bone paper, accent glows */
html[data-skin="noir"] { --chrome:#1c1c1e; --hi:#4a4a50; --lo:#000; --mid:#2c2c30; --paper:#e9e5da; --ink:#0b0b0b; }

html[data-skin="noir"] .win .tb, html[data-skin="noir"] .taskbar, html[data-skin="noir"] .startmenu, html[data-skin="noir"] .status { color:#d8d4c8; }
html[data-skin="noir"] .win.active .tb { box-shadow:0 0 12px var(--acc); }
html[data-skin="noir"] .icon .lbl { background:rgba(0,0,0,.7); color:#d8d4c8; }
html[data-skin="noir"] .icon .glyph img { filter:invert(1) drop-shadow(0 0 4px #000); }
html[data-skin="noir"] .startmenu li button, html[data-skin="noir"] .startmenu li a, html[data-skin="noir"] .tray button, html[data-skin="noir"] .start, html[data-skin="noir"] .task { color:#d8d4c8; }
html[data-skin="noir"] .tabs button { background:#2c2c30; color:#d8d4c8; }
html[data-skin="noir"] .tabs button[aria-selected="true"] { background:var(--paper); color:var(--ink); }
html[data-skin="noir"] .ctl { color:#d8d4c8; }
.display[hidden] { display:none; }
html[data-skin="noir"] #os { background-color:#2a2a2e; background-blend-mode:multiply; }
html[data-skin="cde"] #os { background-color:#b8ae8c; background-blend-mode:multiply; }
html[data-skin="photon"] #os { background-color:#c3cbe0; background-blend-mode:multiply; }

/* ---------- era voice (all skins): Flash preloader, content ratings, imageboard file lines ---------- */
.pre { display:grid; gap:8px; place-content:center; justify-items:center; height:100%; font:18px "Anton", sans-serif; letter-spacing:2px; }
.pre-bar { width:180px; height:6px; border:1px solid currentColor; } .pre-bar i { display:block; height:100%; width:0; background:currentColor; }
.rate { font:15px/1 "Anton", sans-serif; text-decoration:none; padding:3px 5px; border:2px solid currentColor; margin-right:4px; }
.r-E { color:#7fd36b; } .r-T { color:#f1c40f; } .r-M { color:#ff7a1a; } .r-A { color:#ff2a2a; }
.fline { font:13px var(--f-read); } .fline a { color:#2a4fd0; } .pno { font:13px var(--f-read); color:#555; }
.green { color:#5f7a1a; font:14px/1.5 var(--f-read); margin:8px 0; }

/* ---------- Blog house skin: black flyer chrome, ONE loud face (Anton, impact-style caps) everywhere in the chrome,
   all caps, Jacquard only for the wordmark. Reading text stays JetBrains Mono. ---------- */
html[data-skin="blog"] { --chrome:#0a0a0a; --hi:#2b2b2b; --lo:#000; --mid:#151515; --paper:#efefea; --ink:#0a0a0a; --neon:#ff2e88;
  --f-ui:"Anton", sans-serif; }
html[data-skin="blog"] #os { background-color:#111; background-blend-mode:luminosity; font-family:var(--f-ui); }
/* one loud face (Anton) across the chrome, all lowercase */
@font-face { font-family:"RVLS Thorn"; src:url(/fonts/rvls-thorn-temple-os13b-s2.woff2) format("woff2"); font-display:swap; }
/* RVLS Thorn (type-forge temple-os13b s2: TempleOS 8x8 font, EPX-upscaled then resampled to a 13-row OS grid, thorned).
   Real system-font size: crisp at 13px only. Lowercase everywhere. */
html[data-skin="blog"] #os :is(.tb .t, .lbl, .start, .task, .startmenu, .startmenu *, .tray, .tray *, .status, .status *, .tabs button, .display button, .gallery button, .loading, .pre-t) {
  font-family:"RVLS Thorn", "Anton", sans-serif; text-transform:lowercase; letter-spacing:0; font-weight:400; font-size:13px; line-height:1.15; -webkit-font-smoothing:none; }
/* 32px (2px cells) for the loud parts: window titles, start-menu apps, taskbar buttons */
html[data-skin="blog"] #os :is(.tb .t, .startmenu li button, .task) { font-size:13px; }
html[data-skin="blog"] #os .taskbar button.start.bevel { font-size:0; }
html[data-skin="blog"] #os .gallery button.x, html[data-skin="blog"] #os .gallery button { line-height:1.2; }
html[data-skin="blog"][data-mode="phone"] .icon { width:84px; }

html[data-skin="blog"] .bevel { border:1px solid #2b2b2b; box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }
html[data-skin="blog"] .sunk { border:1px solid #000; }
html[data-skin="blog"] .win { box-shadow:6px 6px 0 #000; }
html[data-skin="blog"] .win .tb { background:#0a0a0a; color:#efefea; border-bottom:3px solid #222; height:26px; }
html[data-skin="blog"] .win.active .tb { border-bottom-color:var(--acc); }

html[data-skin="blog"] .win .tb img { filter:invert(1); }
html[data-skin="blog"] .ctl, html[data-skin="blog"] .taskbar, html[data-skin="blog"] .startmenu, html[data-skin="blog"] .status,
html[data-skin="blog"] .tray button, html[data-skin="blog"] .start, html[data-skin="blog"] .task,
html[data-skin="blog"] .startmenu li button, html[data-skin="blog"] .startmenu li a { color:#efefea; }

html[data-skin="blog"] .icon .lbl { line-height:1; background:#000; color:#efefea; padding:2px 6px; }
html[data-skin="blog"] .icon .glyph img { filter:invert(1) drop-shadow(0 0 3px #000); }
html[data-skin="blog"] .start { font-size:0; } html[data-skin="blog"] .start::after { content:"RV†S"; font:30px/1 "Jacquard 24", serif; text-transform:none; }
html[data-skin="blog"] .task.on { box-shadow:inset 0 -3px 0 var(--neon); }
html[data-skin="blog"] .tabs button { background:#151515; color:#efefea; }
html[data-skin="blog"] .tabs button[aria-selected="true"] { background:var(--paper); color:var(--ink); }
html[data-skin="blog"] .pre { color:#efefea; background:#0a0a0a; }
html[data-skin="blog"] .startmenu .side { font:26px "Jacquard 24", serif; color:var(--neon); text-transform:none; }
html[data-skin="blog"] .startmenu img, html[data-skin="blog"] .task img, html[data-skin="blog"] .start img { filter:invert(1); }
html[data-skin="blog"][data-mode="phone"] #os .icon .lbl { font-size:13px; padding:2px 3px; white-space:nowrap; }
html[data-skin="blog"] #os :is(.lbl, .gallery button, .startmenu .grp, .startmenu h3) { font-size:13px; }
html[data-skin="blog"] #os .icon .lbl { font-size:13px; }
html[data-skin="blog"]:not([data-mode="phone"]) .icon { width:88px; }

/* Logical closure is immediate; only inert visuals remain in this layer. */
#os-outgoing { position:absolute; inset:0; z-index:8999; pointer-events:none; }
#os-outgoing * { pointer-events:none !important; }
#os-status { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* live status: what the desk announces also shows for a moment above the tray (desktop/tablet; phones keep it for readers only) */
html:not([data-mode="phone"]) #os-status.show { width:auto; height:auto; clip-path:none; overflow:visible; right:8px; bottom:calc(var(--bar) + 8px); z-index:9001;
  padding:4px 10px; font-size:14px; background:#1d1828e6; color:#e8e2f2; border:1px solid #4a405e; transition:opacity .3s; }
html:not([data-mode="phone"]) #os-status.show.fade { opacity:0; }
.win { min-width:min(280px, 100%); min-height:min(180px, 100%); }
.display .opt { font-size:20px; padding:14px 6px; }

/* live layer over the bonfire wallpaper (js/os/backdrop-live.js): under icons and windows */
#os > .backdrop-live { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
#os > .backdrop-live > canvas { position:absolute; }
#os > .backdrop-live > .bl-bloom, #os > .backdrop-live > .bl-glass, #os > .backdrop-live .bl-stars i { mix-blend-mode:screen; }
@supports (mix-blend-mode:plus-lighter) { #os > .backdrop-live > .bl-bloom, #os > .backdrop-live > .bl-glass, #os > .backdrop-live .bl-stars i { mix-blend-mode:plus-lighter; } }
/* stars: a thin cross, twinkling on the compositor (opacity only). curve ~ max(0, sin)^3 */
#os > .backdrop-live > .bl-bloom { opacity:.6; }
#os > .backdrop-live .bl-stars i { position:absolute; opacity:0; will-change:opacity; animation:bl-twinkle linear infinite;
  background:linear-gradient(#ece8ff,#ece8ff) center/100% 1px no-repeat, linear-gradient(#ece8ff,#ece8ff) center/1px 100% no-repeat; }
@keyframes bl-twinkle { 0% { opacity:0; } 12% { opacity:.12; } 25% { opacity:.85; } 38% { opacity:.12; } 50%, 100% { opacity:0; } }
/* title mark: lowered into the sky like a title screen; phone: under the icon grid, over the fire */
#os > .desk-wordmark { position:absolute; top:clamp(96px, 17vh, 190px); left:46%; transform:translateX(-50%); width:min(540px, 42vw);
  pointer-events:none; }
#os > .desk-wordmark[hidden] { display:none; }
#os > .desk-wordmark img { width:100%; height:auto; display:block; user-select:none; filter:drop-shadow(0 3px 8px rgba(6,4,12,.75)); }
html[data-mode="phone"] #os > .desk-wordmark { top:max(340px, 41svh); left:50%; width:min(300px, 78vw); }

/* sponsored strip + sponsor window (js/os/ads.js). Under every window, over the wallpaper. */
.adstrip { position:absolute; right:12px; bottom:calc(var(--bar) + 8px); z-index:5; display:flex; align-items:center; gap:6px; padding:3px 4px 3px 3px; }
html:not([data-mode="desktop"]) .adstrip, html[data-motion="still"] .adstrip { display:none; }
.adstrip img { display:block; image-rendering:pixelated; }
.adstrip .ad-tag { writing-mode:vertical-rl; transform:rotate(180deg); font-size:12px; line-height:1; color:var(--lo); letter-spacing:1px; }
.adstrip .ad-lead { padding:0; border:0; background:#000; width:486px; height:60px; display:grid; place-items:center; overflow:hidden; }
.adstrip .ad-lead img { max-width:486px; height:60px; width:auto; }
.adstrip .ad-lead img[src*="728x90"] { image-rendering:auto; }   /* 728x90 shown at 2/3: smooth, not nearest */
.adstrip .ad-small img { width:120px; height:60px; }
.adstrip .ad-btns { display:grid; grid-template-columns:repeat(3, 88px); grid-auto-rows:31px; gap:0 2px; height:62px; overflow:hidden; }
.adstrip .ad-btns img { width:88px; height:31px; }
.adstrip .ad-x { align-self:flex-start; width:20px; height:20px; padding:0; line-height:14px; font-size:16px; }
.sponsor-box { display:flex; justify-content:center; gap:20px; height:100%; background:#000; cursor:pointer; }
.sponsor-box img { width:auto; height:100%; max-height:600px; image-rendering:pixelated; }