/*
	Mark Sibly - A Softography (/Home/marksibly.php).

	Every rule is scoped under .sibly. The --sb-* tokens start as the
	default skin's IDE palette; the .skin-<name> blocks after them re-colour
	the page for the other skins (marksibly.php puts the active skin's class
	on the wrapper), so the tribute always matches the chrome around it.
*/

.sibly{
	--sb-text: #EEEEEE;
	--sb-muted: #C4DCEA;
	--sb-bright: #FFFFFF;
	--sb-heading: #00FF66;				/* section headings */
	--sb-kicker: #00FF66;				/* the hero's tagline */
	--sb-sub: #AAFFFF;					/* years, labels, card details */
	--sb-score: #00FF66;				/* review scores */
	--sb-score-bg: rgba(0, 255, 102, 0.07);
	--sb-gold: #FFEE00;					/* awards, ribbons, Top 100 ranks */
	--sb-gold-line: rgba(255, 238, 0, 0.42);
	--sb-card: rgba(24, 70, 114, 0.55);
	--sb-card-hover: rgba(45, 110, 159, 0.62);
	--sb-band: rgba(14, 42, 64, 0.5);
	--sb-inset: rgba(14, 42, 64, 0.75);
	--sb-line: rgba(112, 173, 209, 0.3);
	--sb-line-strong: rgba(112, 173, 209, 0.55);
	--sb-glow: rgba(0, 255, 102, 0.35);
	--sb-glow-sub: rgba(51, 255, 221, 0.3);
	--sb-glow-gold: rgba(255, 238, 0, 0.3);
	--sb-shadow: rgba(0, 0, 0, 0.35);
	--sb-sticker: #FFEE00;				/* score stickers on the magazine pages */
	--sb-sticker-text: #1d1a00;
	--sb-track-a: #33FFDD;				/* the at-a-glance line, start to end */
	--sb-track-b: #00FF66;
	--sb-dot: #12344F;
	--sb-radius: 8px;
	--sb-font-display: 'Rajdhani', 'Segoe UI', Tahoma, sans-serif;
	--sb-display-weight: 700;
	--sb-case: uppercase;
	--sb-tracking: 0.05em;
	color: var(--sb-text);
}

.sibly.skin-alternative{
	--sb-text: #d9ecf3;
	--sb-muted: #9dc2cf;
	--sb-bright: #f2fbfe;
	--sb-heading: #f2fbfe;
	--sb-kicker: #52e5f7;
	--sb-sub: #52e5f7;
	--sb-score: #52ff9a;
	--sb-score-bg: rgba(82, 255, 154, 0.07);
	--sb-gold: #ffd94a;
	--sb-gold-line: rgba(255, 217, 74, 0.42);
	--sb-card: rgba(5, 38, 54, 0.75);
	--sb-card-hover: rgba(14, 74, 100, 0.75);
	--sb-band: rgba(3, 24, 34, 0.55);
	--sb-inset: rgba(3, 24, 34, 0.85);
	--sb-line: rgba(64, 200, 224, 0.22);
	--sb-line-strong: rgba(64, 200, 224, 0.45);
	--sb-glow: rgba(82, 229, 247, 0.28);
	--sb-glow-sub: rgba(82, 229, 247, 0.28);
	--sb-glow-gold: rgba(255, 217, 74, 0.3);
	--sb-shadow: rgba(0, 0, 0, 0.4);
	--sb-sticker: #ffd94a;
	--sb-sticker-text: #2a1f00;
	--sb-track-a: #22c8dd;
	--sb-track-b: #52ff9a;
	--sb-dot: #04222f;
	--sb-font-display: 'Chakra Petch', 'Trebuchet MS', sans-serif;
	--sb-display-weight: 600;
	--sb-case: none;
	--sb-tracking: 0.02em;
}

.sibly.skin-light{
	--sb-text: #1d1d1f;
	--sb-muted: #54545c;
	--sb-bright: #101012;
	--sb-heading: #101012;
	--sb-kicker: #0b6a80;
	--sb-sub: #0b6a80;
	--sb-score: #007a3d;
	--sb-score-bg: #eef7f1;
	--sb-gold: #8a5c00;
	--sb-gold-line: rgba(154, 103, 0, 0.35);
	--sb-card: #ffffff;
	--sb-card-hover: #f7f7f8;
	--sb-band: #f7f7f8;
	--sb-inset: #f4f5f7;
	--sb-line: #dcdce1;
	--sb-line-strong: #c6c6cd;
	--sb-glow: transparent;
	--sb-glow-sub: transparent;
	--sb-glow-gold: transparent;
	--sb-shadow: rgba(16, 16, 18, 0.12);
	--sb-sticker: #ffd43b;
	--sb-sticker-text: #2b2100;
	--sb-track-a: #0b6a80;
	--sb-track-b: #007a3d;
	--sb-dot: #ffffff;
	--sb-font-display: 'Inter', 'Segoe UI', Tahoma, Verdana, sans-serif;
	--sb-display-weight: 700;
	--sb-case: none;
	--sb-tracking: -0.01em;
}

.sibly.skin-dark{
	--sb-text: #dcdcde;
	--sb-muted: #a3a3ab;
	--sb-bright: #f2f2f4;
	--sb-heading: #f2f2f4;
	--sb-kicker: #7db3f2;
	--sb-sub: #7db3f2;
	--sb-score: #6fd394;
	--sb-score-bg: rgba(111, 211, 148, 0.08);
	--sb-gold: #e6b450;
	--sb-gold-line: rgba(230, 180, 80, 0.4);
	--sb-card: #1c1c20;
	--sb-card-hover: #232329;
	--sb-band: #141417;
	--sb-inset: #121215;
	--sb-line: #2a2a30;
	--sb-line-strong: #3b3b43;
	--sb-glow: transparent;
	--sb-glow-sub: transparent;
	--sb-glow-gold: transparent;
	--sb-shadow: rgba(0, 0, 0, 0.5);
	--sb-sticker: #e6b450;
	--sb-sticker-text: #1d1600;
	--sb-track-a: #7db3f2;
	--sb-track-b: #6fd394;
	--sb-dot: #17171a;
	--sb-font-display: 'Inter', 'Segoe UI', Tahoma, Verdana, sans-serif;
	--sb-display-weight: 700;
	--sb-case: none;
	--sb-tracking: -0.01em;
}

.sibly *{ box-sizing: border-box; }
.sibly [id]{ scroll-margin-top: 16px; }
.sibly p{ margin: 0 0 12px 0; }
.sibly b{ color: var(--sb-bright); }

/* the skins' link hovers paint a background and an underline - the
   picture and card links here have hovers of their own */
.sibly a.sb-photo:hover, .sibly a.sb-media:hover, .sibly a.sb-clip:hover,
.sibly a.sb-score:hover, .sibly a.sb-sample:hover, .sibly a.sb-btn:hover,
.sibly .sb-track a:hover, .sibly .sb-made a:hover{
	text-decoration: none;
	text-shadow: none;
}
.sibly a:focus-visible{
	outline: 2px solid var(--sb-sub);
	outline-offset: 2px;
}

/* the site marks external links with an arrow - keep it on links in the
   text, not on the pictures, chips and buttons */
.sibly a.ext-link-warned::after{ content: none; }
.sibly p a.ext-link-warned::after{ content: ' \2197'; }

/* ---------------------------------------------- hero */
.sibly .sb-hero{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 290px;
	gap: 36px;
	align-items: center;
	margin: 6px 0 34px 0;
}
.sibly .sb-eyebrow{
	display: inline-block;
	font: 700 12px var(--sb-font-display);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sb-sub);
	border: 1px solid var(--sb-line-strong);
	border-radius: 999px;
	padding: 5px 14px;
	background: var(--sb-inset);
	text-shadow: 0 0 10px var(--sb-glow-sub);
	margin-bottom: 16px;
}
.sibly .sb-hero h1{
	font: var(--sb-display-weight) clamp(40px, 6vw, 60px)/1 var(--sb-font-display);
	color: var(--sb-bright);
	text-transform: var(--sb-case);
	letter-spacing: var(--sb-tracking);
	margin: 0 0 8px 0;
	padding: 0;
	border: 0;				/* the skins underline h1 - not here */
	border-image: none;
	text-shadow: none;
}
.sibly .sb-kicker{
	font: var(--sb-display-weight) 21px/1.3 var(--sb-font-display);
	color: var(--sb-kicker);
	text-transform: var(--sb-case);
	letter-spacing: 0.06em;
	text-shadow: 0 0 18px var(--sb-glow);
	margin: 0 0 18px 0;
}
.sibly .sb-lead{
	font-size: 16px;
	line-height: 1.65;
	max-width: 62ch;
}
.sibly .sb-lead2{
	color: var(--sb-muted);
	font-size: 14.5px;
	max-width: 62ch;
}
.sibly .sb-stats{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-top: 22px;
}
.sibly .sb-stat{
	padding: 12px 10px;
	text-align: center;
	background: var(--sb-card);
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius);
}
.sibly .sb-stat b{
	display: block;
	font: var(--sb-display-weight) clamp(19px, 2.2vw, 25px)/1.1 var(--sb-font-display);
	color: var(--sb-heading);
	text-shadow: 0 0 16px var(--sb-glow);
	white-space: nowrap;
}
.sibly .sb-stat span{
	display: block;
	margin-top: 5px;
	font-size: 11.5px;
	line-height: 1.35;
	color: var(--sb-muted);
}

/* the portrait - the tribute video's still, which plays it */
.sibly .sb-portrait{
	margin: 0;
}
.sibly a.sb-photo{
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #000;
	border: 1px solid var(--sb-line-strong);
	border-radius: 12px;
	box-shadow: 0 20px 44px var(--sb-shadow), 0 0 0 6px var(--sb-band);
}
.sibly a.sb-photo img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.sibly a.sb-photo:hover img{ transform: scale(1.025); }
.sibly a.sb-photo .sb-play{
	left: auto;
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	margin: 0;
}
.sibly a.sb-photo .sb-play svg{ width: 15px; height: 15px; }
.sibly .sb-portrait figcaption{
	margin-top: 14px;
	font-size: 12px;
	text-align: center;
	color: var(--sb-muted);
}

/* ---------------------------------------------- at a glance */
.sibly .sb-track{
	margin: 0 0 42px 0;
	overflow-x: auto;
	scrollbar-width: thin;
}
.sibly .sb-track ol{
	display: flex;
	min-width: 760px;
	margin: 0;
	padding: 0 0 6px 0;
	list-style: none;
}
.sibly .sb-track li{
	position: relative;
	flex: 1 1 0;
	text-align: center;
}
.sibly .sb-track li::before{
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--sb-track-a), var(--sb-track-b));
	opacity: 0.75;
}
.sibly .sb-track li:first-child::before{ left: 50%; }
.sibly .sb-track li:last-child::before{ right: 50%; }
.sibly .sb-track a{
	position: relative;
	display: block;
	padding: 24px 2px 4px 2px;
	color: var(--sb-text);
	text-decoration: none;
	border-radius: 6px;
}
.sibly .sb-track a::before{
	content: "";
	position: absolute;
	top: 2px;
	left: 50%;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	border-radius: 50%;
	background: var(--sb-dot);
	border: 2px solid var(--sb-track-a);
	box-shadow: 0 0 10px var(--sb-glow-sub);
	transition: background 0.15s ease, border-color 0.15s ease;
}
.sibly .sb-track a:hover{ background: transparent; }
.sibly .sb-track a:hover::before{
	background: var(--sb-track-b);
	border-color: var(--sb-track-b);
}
.sibly .sb-track b{
	display: block;
	font: var(--sb-display-weight) 15px/1.2 var(--sb-font-display);
	letter-spacing: 0.04em;
	color: var(--sb-sub);
}
.sibly .sb-track span{
	display: block;
	font-size: 11.5px;
	white-space: nowrap;
	color: var(--sb-muted);
}
.sibly .sb-track a:hover span{ color: var(--sb-bright); }

/* ---------------------------------------------- chapters */
.sibly section.sb-chapter{ margin: 0 0 48px 0; }
.sibly .sb-head{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0 0 12px 0;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--sb-line);
}
.sibly h2{
	margin: 0;
	font: var(--sb-display-weight) 27px/1.2 var(--sb-font-display);
	color: var(--sb-heading);
	text-transform: var(--sb-case);
	letter-spacing: var(--sb-tracking);
	text-shadow: 0 0 18px var(--sb-glow);
}
.sibly .sb-era{
	font: 700 12px var(--sb-font-display);
	letter-spacing: 0.14em;
	color: var(--sb-sub);
	border: 1px solid var(--sb-line-strong);
	border-radius: 4px;
	padding: 2px 8px;
}
.sibly .sb-chapter > p, .sibly .sb-split p{ max-width: 84ch; }
.sibly p.sb-intro{ font-size: 15px; }
.sibly h3.sb-sub{
	margin: 26px 0 4px 0;
	font: var(--sb-display-weight) 16px var(--sb-font-display);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sb-sub);
	text-shadow: 0 0 12px var(--sb-glow-sub);
}
.sibly p.sb-small{
	font-size: 12px;
	color: var(--sb-muted);
	margin: 0;
}

/* Mark's own words, beside the text */
.sibly .sb-quote{
	padding: 18px 20px 16px 20px;
	background: var(--sb-band);
	border: 1px solid var(--sb-line);
	border-left: 3px solid var(--sb-gold);
	border-radius: 0 10px 10px 0;
}
.sibly .sb-quote blockquote{
	margin: 0 0 10px 0;
	font: var(--sb-display-weight) 23px/1.25 var(--sb-font-display);
	color: var(--sb-bright);
}
.sibly .sb-quote blockquote::before,
.sibly .sb-quote blockquote::after{
	color: var(--sb-gold);
	text-shadow: 0 0 12px var(--sb-glow-gold);
}
.sibly .sb-quote blockquote::before{ content: "\201C"; }
.sibly .sb-quote blockquote::after{ content: "\201D"; }
.sibly .sb-quote p{
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--sb-muted);
}

/* ---------------------------------------------- pictures */
.sibly .sb-figs{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 20px 0 0 0;
}
.sibly figure.sb-fig{
	margin: 0;
	padding: 8px;
	background: var(--sb-card);
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius);
}
.sibly .sb-frame{
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #000;
	border-radius: 5px;
}
.sibly .sb-frame img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sibly .sb-frame-art{ background: var(--sb-inset); }
.sibly .sb-frame-art img{ object-fit: contain; padding: 6px; }
.sibly .sb-pixel img{
	object-fit: contain;
	image-rendering: pixelated;
}
.sibly figure.sb-fig figcaption{
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--sb-muted);
}
.sibly figure.sb-fig-plain{ padding: 0; background: none; border: 0; }

.sibly a.sb-btn{
	display: inline-block;
	margin: 6px 0 0 0;
	font: 700 11px var(--sb-font-display);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sb-sub);
	background: var(--sb-inset);
	border: 1px solid var(--sb-line-strong);
	border-radius: 999px;
	padding: 4px 12px;
	white-space: nowrap;
}
.sibly a.sb-btn:hover{
	color: var(--sb-bright);
	background: var(--sb-card-hover);
	border-color: var(--sb-sub);
}

/* a video still that plays its video */
.sibly a.sb-media{
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #000;
	border: 1px solid var(--sb-line-strong);
	border-radius: var(--sb-radius);
}
.sibly a.sb-media img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease, filter 0.35s ease;
}
.sibly a.sb-media:hover img{
	transform: scale(1.04);
	filter: brightness(1.08);
}
.sibly .sb-play{
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin: -29px 0 0 -29px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	border: 2px solid rgba(255, 255, 255, 0.85);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
	transition: transform 0.2s ease, background 0.2s ease;
}
.sibly .sb-play svg{
	width: 22px;
	height: 22px;
	margin-left: 3px;
	fill: #fff;
}
.sibly a.sb-media:hover .sb-play, .sibly a.sb-photo:hover .sb-play{
	transform: scale(1.1);
	background: rgba(0, 0, 0, 0.78);
}
.sibly .sb-media-label{
	position: absolute;
	left: 8px;
	bottom: 8px;
	max-width: calc(100% - 16px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	background: rgba(0, 0, 0, 0.66);
	border-radius: 4px;
	padding: 3px 8px;
}
.sibly p.sb-credit{
	margin: 6px 0 0 0;
	font-size: 11px;
	color: var(--sb-muted);
}

/* ---------------------------------------------- Top 100 honours */
.sibly .sb-honours{
	margin: 20px 0 22px 0;
	padding: 16px 18px 14px 18px;
	background: var(--sb-band);
	border: 1px solid var(--sb-gold-line);
	border-radius: 10px;
}
.sibly .sb-honours h3{
	margin: 0 0 12px 0;
	font: 700 13px var(--sb-font-display);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sb-gold);
	text-shadow: 0 0 12px var(--sb-glow-gold);
}
.sibly .sb-honours ol{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px 16px;
	margin: 0 0 10px 0;
	padding: 0;
	list-style: none;
}
.sibly .sb-honours li{
	display: flex;
	align-items: center;
	gap: 10px;
}
.sibly .sb-honours .rank{
	flex: none;
	min-width: 58px;
	font: var(--sb-display-weight) 25px/1 var(--sb-font-display);
	color: var(--sb-gold);
	text-shadow: 0 0 14px var(--sb-glow-gold);
	white-space: nowrap;
}
.sibly .sb-honours .what b{ display: block; line-height: 1.25; }
.sibly .sb-honours .what small{ font-size: 11.5px; color: var(--sb-muted); }

/* ---------------------------------------------- game cards */
.sibly article.sb-game{
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 22px;
	align-items: start;
	margin: 0 0 16px 0;
	padding: 18px;
	background: var(--sb-card);
	border: 1px solid var(--sb-line);
	border-radius: 10px;
}
.sibly article.sb-game.sb-star{
	grid-template-columns: 340px minmax(0, 1fr);
	border-color: var(--sb-gold-line);
	box-shadow: 0 14px 40px var(--sb-shadow);
}
.sibly .sb-game-media{ min-width: 0; }
.sibly .sb-game-body{ min-width: 0; }
.sibly .sb-game h3{
	margin: 0;
	font: var(--sb-display-weight) 23px/1.2 var(--sb-font-display);
	color: var(--sb-bright);
	text-transform: var(--sb-case);
	letter-spacing: var(--sb-tracking);
}
.sibly p.sb-meta{
	margin: 3px 0 10px 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--sb-sub);
}
.sibly .sb-ribbon{
	display: inline-block;
	margin: 0 0 8px 0;
	font: 700 11px var(--sb-font-display);
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--sb-gold);
	background: var(--sb-inset);
	border: 1px solid var(--sb-gold-line);
	border-radius: 999px;
	padding: 3px 11px;
	text-shadow: 0 0 10px var(--sb-glow-gold);
}

/* ---------------------------------------------- review scores */
.sibly ul.sb-scores{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0 0;
	padding: 0;
	list-style: none;
}
.sibly .sb-score{
	display: flex;
	align-items: stretch;
	min-height: 44px;
	overflow: hidden;
	color: var(--sb-text);
	background: var(--sb-inset);
	border: 1px solid var(--sb-line-strong);
	border-radius: var(--sb-radius);
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.sibly .sb-score .pct{
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 60px;
	padding: 4px 10px;
	font: var(--sb-display-weight) 21px/1 var(--sb-font-display);
	color: var(--sb-score);
	background: var(--sb-score-bg);
	border-right: 1px solid var(--sb-line);
	text-shadow: 0 0 12px var(--sb-glow);
}
.sibly .sb-score .mag{
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4px 12px 4px 10px;
	line-height: 1.25;
}
.sibly .sb-score .mag b{
	font-size: 12.5px;
	font-weight: 600;
}
.sibly .sb-score .mag small{
	font-size: 11px;
	color: var(--sb-muted);
}
.sibly .sb-score .award{
	font-weight: 700;
	color: var(--sb-gold);
}
.sibly .sb-score .scan{
	display: flex;
	align-items: center;
	padding: 0 10px 0 0;
	color: var(--sb-muted);
}
.sibly .sb-score .scan svg{
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.3;
	stroke-linejoin: round;
}
.sibly a.sb-score:hover{
	color: var(--sb-text);
	background: var(--sb-card-hover);
	border-color: var(--sb-sub);
	transform: translateY(-1px);
}
.sibly a.sb-score:hover .scan{ color: var(--sb-sub); }

/* ---------------------------------------------- magazine pages */
.sibly .sb-clippings{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px 34px;
	margin: 22px 0 0 0;
	padding: 4px 14px 0 14px;
}
.sibly a.sb-clip{
	position: relative;
	display: block;
	color: var(--sb-text);
	text-decoration: none;
	transform: rotate(-1.6deg);
	transition: transform 0.2s ease;
}
.sibly a.sb-clip:nth-child(even){ transform: rotate(1.4deg); }
.sibly a.sb-clip:nth-child(3n){ transform: rotate(-0.6deg); }
.sibly a.sb-clip:hover{ transform: rotate(0deg) translateY(-4px) scale(1.04); }
.sibly a.sb-clip img{
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: top;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 10px 24px var(--sb-shadow), 0 0 0 1px var(--sb-line);
}
.sibly a.sb-clip .badge{
	position: absolute;
	top: -9px;
	right: -8px;
	font: 700 15px/1 var(--sb-font-display);
	color: var(--sb-sticker-text);
	background: var(--sb-sticker);
	border-radius: 999px;
	padding: 6px 9px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
	transform: rotate(8deg);
}
.sibly a.sb-clip .cap{
	display: block;
	margin-top: 10px;
	font-size: 11.5px;
	line-height: 1.35;
	text-align: center;
	color: var(--sb-muted);
}
.sibly a.sb-clip .cap b{ display: block; font-size: 12.5px; }

/* ---------------------------------------------- Blitz Basic */
.sibly .sb-split{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 26px;
	align-items: start;
}
.sibly .sb-split-side{
	display: grid;
	gap: 16px;
}

/* ---------------------------------------------- PC era */
.sibly .sb-shelf{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 18px 0 20px 0;
}
.sibly figure.sb-product{
	margin: 0;
	padding: 8px 8px 6px 8px;
	text-align: center;
	background: var(--sb-card);
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius);
}
.sibly figure.sb-product .sb-frame{ aspect-ratio: 5 / 4; }
.sibly figure.sb-product .sb-frame img{ object-fit: contain; }
.sibly figure.sb-product figcaption{
	margin-top: 6px;
	font-size: 12px;
	color: var(--sb-muted);
}
.sibly figure.sb-product figcaption b{ margin-right: 4px; }

.sibly ul.sb-made{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0 0;
	padding: 0;
	list-style: none;
}
.sibly .sb-made a{
	display: block;
	padding: 7px 14px;
	color: var(--sb-text);
	background: var(--sb-inset);
	border: 1px solid var(--sb-line-strong);
	border-radius: var(--sb-radius);
	transition: border-color 0.15s ease, background 0.15s ease;
}
.sibly .sb-made a:hover{
	color: var(--sb-text);
	background: var(--sb-card-hover);
	border-color: var(--sb-sub);
}
.sibly .sb-made b{ display: block; font-size: 13px; }
.sibly .sb-made small{ display: block; font-size: 11px; color: var(--sb-muted); }

/* ---------------------------------------------- Mark's samples */
.sibly .sb-samples{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 16px 0 0 0;
}
.sibly a.sb-sample{
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 12px 14px;
	color: var(--sb-text);
	background: var(--sb-card);
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius);
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.sibly a.sb-sample img.ide-rocket{
	flex: none;
	margin-top: 1px;
	transition: transform 0.15s ease;
}
.sibly a.sb-sample b{ display: block; font-size: 14px; }
.sibly a.sb-sample small{
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--sb-muted);
}
.sibly a.sb-sample:hover{
	color: var(--sb-text);
	background: var(--sb-card-hover);
	border-color: var(--sb-sub);
	transform: translateY(-2px);
}
.sibly a.sb-sample:hover img.ide-rocket{ transform: translate(2px, -2px); }

/* ---------------------------------------------- thank you */
.sibly section.sb-thanks{
	margin: 8px 0 0 0;
	padding: 30px 28px 24px 28px;
	text-align: center;
	background: var(--sb-band);
	border: 1px solid var(--sb-line);
	border-radius: 12px;
}
.sibly .sb-thanks h2{ margin-bottom: 14px; }
.sibly .sb-thanks p{
	max-width: 66ch;
	margin-left: auto;
	margin-right: auto;
}
.sibly .sb-thanks p.sb-sign{
	margin: 18px auto 16px auto;
	font: var(--sb-display-weight) 30px/1.2 var(--sb-font-display);
	color: var(--sb-gold);
	text-shadow: 0 0 20px var(--sb-glow-gold);
}
.sibly p.sb-credits{
	max-width: none;
	margin: 22px 2px 0 2px;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--sb-muted);
}

/* ---------------------------------------------- video player */
.sibly dialog.sb-player{
	width: min(960px, 94vw);
	max-width: none;
	padding: 0;
	color: #e8e8ea;
	background: transparent;
	border: 0;
	overflow: visible;
}
.sibly dialog.sb-player::backdrop{
	background: rgba(0, 0, 0, 0.82);
}
.sibly .sb-player-frame{
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
	border-radius: 10px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.sibly .sb-player-frame iframe{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.sibly .sb-player-bar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 14px;
	padding: 10px 2px 0 2px;
	font-size: 13px;
}
.sibly .sb-player-bar a{ color: #ffffff; text-decoration: underline; background: none; }
.sibly .sb-player-close{
	margin-left: 12px;
	width: 34px;
	height: 34px;
	padding: 0;
	font: 400 24px/1 sans-serif;
	letter-spacing: 0;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: none;
	vertical-align: middle;
}
.sibly .sb-player-close:hover{
	color: #ffffff;
	background: rgba(255, 255, 255, 0.25);
	box-shadow: none;
}

/* ---------------------------------------------- smaller screens */
@media (max-width: 980px){
	.sibly .sb-clippings{ gap: 26px 22px; padding: 4px 6px 0 6px; }
	.sibly .sb-samples{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px){
	.sibly .sb-hero{ grid-template-columns: 1fr; gap: 24px; }
	.sibly .sb-portrait{ order: -1; width: 100%; max-width: 250px; margin: 0 auto; }
	.sibly .sb-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sibly .sb-figs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sibly .sb-honours ol{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sibly article.sb-game, .sibly article.sb-game.sb-star{ grid-template-columns: 1fr; }
	.sibly article.sb-game .sb-game-media{ max-width: 480px; }
	.sibly .sb-split{ grid-template-columns: 1fr; }
	.sibly .sb-split-side{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sibly .sb-shelf{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
	.sibly .sb-figs{ grid-template-columns: 1fr 1fr; gap: 10px; }
	.sibly .sb-split-side{ grid-template-columns: 1fr; }
	.sibly .sb-clippings{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 22px; }
	.sibly .sb-samples{ grid-template-columns: 1fr; }
	.sibly article.sb-game{ padding: 14px; }
	.sibly section.sb-thanks{ padding: 24px 16px 20px 16px; }
	.sibly h2{ font-size: 23px; }
}
@media (prefers-reduced-motion: reduce){
	.sibly *, .sibly *::before{ transition: none !important; }
	.sibly a.sb-clip, .sibly a.sb-clip:hover{ transform: none; }
}