/*==== Reset ====*/
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/*==== Design Tokens ====*/
:root {
	/* Fallback Fonts */
	--fallbackSans: system-ui, -apple-system, "Segoe UI", Roboto, BlinkMacSystemFont,
	"Helvetica Neue", Arial, sans-serif;

	--bgPrimary: #101014;
	--bgSecondary: #191921;
	--bgTertiary: #23232e;
	--bgCard: #282834;
	--bgInput: #2c2c39;
	--textPrimary: #ffffff;
	--textSecondary: #dbdbdb;
	--textMuted: #b4b4b4;
	--accent: #00e676;
	--accentSecondary: #00d16b;
	--accentDim: #00aa55;
	--accentDark: #007f3f;
	--accentGold: #ffd740;
	--accentPink: #ff33ce;
	--accentOrange: #f1833b;
	--danger: #ff2a2a;
	--dangerDeep: #dc143c;
	--ssGreen: #26cd8a;
	--ssPink: #f32d6f;
	--ssBg: #0d0f0e;
	--ssBorder: #1f2422;
	--borderColor: #3f3f55;
	--borderHover: #5e5e7a;
	--radius: 12px;
	--radiusSm: 8px;
	--shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	--shadowHover: 0 14px 40px rgba(0, 0, 0, 0.45);
	--transition: 200ms linear;
	--transitionSlow: 350ms ease;
	--fontBody: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	sans-serif;
	--fontDisplay: "Breathe Karma", system-ui, sans-serif;
	--fontAccent: "ClapHand", cursive;
	--baseSize: 20px;
	--fontSizeH1: clamp(2rem, 1.85rem + 1.2vw, 3.25rem);
	--fontSizeH2: clamp(1.5rem, 1.45rem + 0.8vw, 2.5rem);
	--fontSizeH3: clamp(1.25rem, 1.22rem + 0.65vw, 2rem);
	--fontSizeH4: clamp(1.rem, 1rem + 0.45vw, 1.5rem);
	--fontSizeXs: 0.85rem;
	--fontSizeSm: 1rem;
	--fontSizeBase: 1.25rem;
	--fontSizeMd: 1.36rem;
	--fontSizeLg: 1.45rem;
	--fontSizeXl: 1.67rem;
}

/*==== Fonts ====*/
@font-face {
	font-family: "Breathe Karma";
	src: url("/assets/fonts/Breathe-Karma.ttf") format("truetype");
	font-display: swap;
}
@font-face {
	font-family: "ClapHand";
	src: url("/assets/fonts/ClapHand.otf") format("opentype");
	font-display: swap;
}
@font-face {
	font-family: "Gallazzi";
	src: url("/assets/fonts/Gallazzi.otf") format("opentype");
	font-display: swap;
}

@font-face {
	font-family: "SourceCodePro";
	src: url("/assets/fonts/SourceCodePro-ExtraLight.ttf") format("truetype");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "SourceCodePro";
	src: url("/assets/fonts/SourceCodePro-Light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "SourceCodePro";
	src: url("/assets/fonts/SourceCodePro-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "SourceCodePro";
	src: url("/assets/fonts/SourceCodePro-Semibold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "SourceCodePro";
	src: url("/assets/fonts/SourceCodePro-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "SourceCodePro";
	src: url("/assets/fonts/SourceCodePro-Black.ttf") format("truetype");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "NimbusSans";
	src: url("/assets/fonts/NimbusSanL-Reg.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "NimbusSans";
	src: url("/assets/fonts/NimbusSanL-RegIta.otf") format("opentype");
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "NimbusSans";
	src: url("/assets/fonts/NimbusSanL-Bol.otf") format("opentype");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}


@font-face {
	font-family: "NotoSans";
	src: url("/assets/fonts/NotoSans[wdth,wght].ttf") format("truetype-variations");
	font-weight: 100 900;
	font-stretch: 75% 100%;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Firjar";
	src: url("/assets/fonts/Firjar[wdth,wght].ttf") format("truetype-variations");
	font-weight: 100 900;
	font-stretch: 75% 100%;
	font-style: normal;
	font-display: swap;
}

/*==== Base ====*/
html {
	font-size: var(--fontSizeBase);
	background: var(--bgPrimary);
	color: var(--textPrimary);
	font-family: var(--fontBody);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	scroll-behavior: smooth;
}
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--bgPrimary);
}
a {
	color: var(--accentGold);
	text-decoration: none;
	transition: color var(--transition);
}
a:hover,
a:focus-visible {
	color: var(--textPrimary);
	text-decoration: underline;
}

::selection{
	background-color: var(--ssPink);
	text-shadow:
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px  1px 0 #000,
			1px  1px 0 #000,
			0   -1.5px 0 #000,
			0    1.5px 0 #000,
			-1.5px 0  0 #000,
			1.5px 0  0 #000,
			-0.75px -0.75px 0 var(--textPrimary),
			0.75px -0.75px 0 var(--textPrimary),
			-0.75px  0.75px 0 var(--textPrimary),
			0.75px  0.75px 0 var(--textPrimary);
}
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}
h1,
h2,
h3,
h4 {
	line-height: 1.25;
	font-weight: 700;
}

h1{
	font-size: var(--fontSizeH1);
}
h2{
	font-size: var(--fontSizeH2);
}
h3{
	font-size: var(--fontSizeH3);
}
h4{
	font-size: var(--fontSizeH4);
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/*==== Layout ====*/
.container {
	width: 100%;
	max-width: 80vw;
	margin-inline: auto;
	padding-inline: 1.5rem;
}
main {
	flex: 1;
	padding-block: 2rem;
}
.gridContainer {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 2rem;
}

/*==== Header ====*/
.siteHeader {
	position: sticky;
	top: 0;
	z-index: 100;
	width: fit-content;
	min-width: min-content;
	margin-inline: auto;
	text-align: center;
	border-radius: 16px;
	background: rgba(25, 25, 33, 0.42);
	border: 2px solid var(--borderColor);
	backdrop-filter: blur(16px);
}

.headerContainer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: 1400px;
	margin-inline: auto;
	padding: 0.75rem 1.5rem;
}
.headerBrand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--textPrimary);
	text-decoration: none;
}
.headerBrand:hover {
	color: var(--textPrimary);
	text-decoration: none;
}
.headerLogo {
	height: 52px;
	width: auto;
	display: block;
}
.headerTagline {
	font-family: var(--fontDisplay);
	font-size: var(--fontSizeLg);
	font-weight: 700;
	letter-spacing: 0.02em;
}
.headerNav {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.headerLink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: var(--bgCard);
	border: 1px solid var(--borderColor);
	border-radius: var(--radiusSm);
	transition: all 125ms linear;
	text-decoration: none;
}

.headerLink:hover {
	background: radial-gradient(ellipse at center, color-mix(in oklch, var(--bgCard) 80%, var(--ssPink)) 67%, var(--accentDim) 100%);
	border-color: var(--accent);
	box-shadow: 0 0 6px 3px rgba(0, 230, 118, 0.67);
	text-decoration: none;
}
.headerLink img {
	width: 24px;
	height: 24px;
	opacity: 0.86;
	transition: opacity var(--transition);
}
.headerLink:hover img {
	opacity: 1;
}

.headerDrawer {
	display: none;
	position: absolute;
	top: 100%;
	right: 1.5rem;
	z-index: 99;
	width: 320px;
}
#accessibility:target .headerDrawer {
	display: block;
}
.headerDrawerPanel {
	background: var(--bgTertiary);
	border: 1px solid var(--borderColor);
	border-top: 2px solid var(--accent);
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: var(--shadowHover);
	padding: 1rem;
}
#accessibility:target .headerDrawerPanel {
	animation: drawerSlide 250ms ease;
}
@keyframes drawerSlide {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.headerDrawerHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
	gap: 16px;
}
.headerDrawerLabel {
	font-size: var(--fontSizeSm);
	font-weight: 600;
	color: var(--textPrimary);
}
.headerDrawerClose {
	display: inline-flex;
	align-items: center;
	font-family: "SourceCodePro", Roboto, Hack, var(--fallbackSans);
	justify-content: center;
	font-weight: 100;
	width: 32px;
	height: 32px;
	padding: 4px;
	background: color-mix(in oklab, var(--bgTertiary) 60%, var(--ssPink));
	color: var(--textSecondary);
	border-radius: var(--radiusSm);
	font-size: var(--fontSizeXl);
	border: 2px solid transparent;
	text-decoration: none;
	transition: all var(--transition);
}
.headerDrawerClose:hover {
	background: color-mix(in oklab, crimson 32%, var(--ssPink));
	color: var(--bgTertiary);
	font-weight: 900;
	border: 2px solid var(--ssPink);
	box-shadow: 0 0 2px 2px crimson;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}
.headerForm {
	display: inline-flex;
	align-items: center;
	justify-items: center;
	place-items: center;
	gap: 0.5rem;
}
.headerInput {
	background: var(--bgInput);
	color: var(--textPrimary);
	border: 2px inset var(--borderColor);
	border-radius: var(--radiusSm);
	padding: 0.5rem 0.75rem;
	font-size: var(--fontSizeBase);
	font-family: inherit;
	outline: none;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.headerInput:focus {
	border-color: var(--accentDim);
	box-shadow: 0 0 3px 2px rgba(0, 230, 118, 0.32);
}
.headerSubmit {
	width: 96px;
	height: 64px;
}

/*==== Footer ====*/

.toggleFooter:before{
	content: "▼";
	transition: transform 250ms linear, color 250ms linear;
}

.toggleFooter{
	display: flex;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	position: relative;
	top: 24px;
	left: 50%;
	width: 48px;
	height: 48px;
	border: 2px solid var(--accent);
	background-color: black;
	border-radius: 128px;
	margin-left: -24px;
	transition: border 100ms linear;
}

.siteFooter {
	max-height: 82px;
	overflow: hidden;
	margin-top: auto;
	display: grid;
	grid-template-columns: 1fr minmax(0, 640px);
	grid-template-rows: auto;
	column-gap: 3rem;
	align-items: start;
	padding: 1.5rem 2rem;
	color: var(--textSecondary);
	font-size: var(--fontSizeBase);
	line-height: 1.6;
	border-top: 2px solid var(--accent);
	background: var(--bgSecondary);
}

.siteFooter:has(#expandFooter:checked){
	max-height: fit-content;
}

.siteFooter:has(#expandFooter:checked) .hideWithFooter{
	display: block;
}

.toggleFooter:has(+ footer #expandFooter:checked):before {
	transform: rotateZ(180deg);
	color: var(--accent)
}

.toggleFooter:hover{
	border: 4px solid var(--accent);
}

.toggleFooter:has(+ footer #expandFooter:checked) {
	border: 4px solid var(--accent);
}

.siteFooter .hideWithFooter{
	display: none;
}

.siteFooter strong {
	color: var(--textPrimary);
}

.footerInfo {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
}

.footerInfo > p {
	margin: 0;
	text-align: left;
	font-size: var(--fontSizeSm);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.footerInfo > h2 {
	max-width: 55ch;
	margin: 0;
	text-align: left;
	font-size: var(--fontSizeBase);
	font-weight: 400;
	color: var(--textMuted);
}

.siteFooter > .expandHide {
	grid-column: 2;
	grid-row: 1;
}


.siteFooter:has(#expandFooter:checked) > .expandHide:not(.hideWithFooter) {
	display: none;
}

/*==== Donate ====*/
.donateBox {
	display: flex;
	flex-direction: column;
}

.donateHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: var(--bgSecondary);
	border-bottom: 1px solid var(--borderColor);
}

.donateTitle {
	display: inline-block;
	margin: 0;
	font-family: var(--fontAccent);
	font-size: 42px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--textPrimary);
	vertical-align: middle;
}

.donateTitleAccent {
	display: inline-block;
	height: 64px;
	width: auto;
	vertical-align: middle;
}

.donateBadge {
	flex-shrink: 0;
	padding: 0.25rem 0.7rem;
	background: color-mix(in srgb, var(--accent) 18%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
	border-radius: var(--radiusSm);
	color: var(--accent);
	font-size: var(--fontSizeXs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.donateBody {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem;
	font-family: var(--fontBody);
	font-size: var(--fontSizeSm);
	color: var(--textSecondary);
}

.donateProud {
	margin: 0;
	font-size: var(--fontSizeSm);
	color: var(--textSecondary);
}

.donateNote {
	margin: 0;
	font-size: var(--fontSizeXs);
	color: var(--textMuted);
}

.donateAddress {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.donateLabel {
	flex-shrink: 0;
	padding: 0.35rem 0.7rem;
	background: color-mix(in srgb, var(--accent) 18%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
	border-radius: var(--radiusSm);
	color: var(--accent);
	font-size: var(--fontSizeXs);
	font-weight: 700;
	letter-spacing: 0.08em;
}

.siteFooter xmr {
	flex: 1;
	min-width: 0;
	display: inline-block;
	overflow-x: auto;
	white-space: nowrap;
	vertical-align: bottom;
	scrollbar-width: thin;
	user-select: all;
	padding: 0.5rem 0.75rem;
	background: var(--bgInput);
	border: 1px solid var(--borderColor);
	border-radius: var(--radiusSm);
	font-family: "SourceCodePro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.8em;
	color: var(--textSecondary);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.siteFooter xmr:hover {
	border-color: var(--accentDim);
}

.siteFooter xmr:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.donateLinks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.25rem;
}

/* --- Buttons: byte-identical, skew wipe preserved --- */
.donateBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 1.1rem;
	border-radius: var(--radiusSm);
	font-family: var(--fontBody);
	font-size: var(--fontSizeSm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: all var(--transition);
}
.donateBtnPrimary {
	isolation: isolate;
	background: var(--ssGreen);
	color: #0d0f0e;
	border: 1px solid var(--ssGreen);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
	transition: color 700ms ease, border-color 700ms ease,
	transform var(--transition), box-shadow var(--transition);
}
.donateBtnPrimary::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -30%;
	bottom: -30%;
	left: -40%;
	width: 180%;
	background: var(--ssPink);
	transform: skewX(-20deg) scaleX(0);
	transform-origin: left center;
	transition: transform 700ms ease;
}
.donateBtnPrimary::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 40%;
	background: linear-gradient(
			100deg,
			transparent,
			rgba(255, 255, 255, 0.45),
			transparent
	);
	transform: translateX(-120%) skewX(-20deg);
	transition: transform 700ms ease;
	pointer-events: none;
}
.donateBtnPrimary:hover {
	border-color: var(--ssPink);
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
	0 8px 24px rgba(243, 45, 111, 0.35);
	text-decoration: none;
}
.donateBtnPrimary:hover::before {
	transform: skewX(-20deg) scaleX(1);
}
.donateBtnPrimary:hover::after {
	transform: translateX(320%) skewX(-20deg);
}
.donateBtnPink {
	background: transparent;
	color: var(--ssPink);
	border: 1px solid rgba(243, 45, 111, 0.5);
}
.donateBtnPink:hover {
	background: rgba(243, 45, 111, 0.12);
	border-color: var(--ssPink);
	box-shadow: 0 0 16px rgba(243, 45, 111, 0.25);
	text-decoration: none;
}
.donateBtnGhost {
	background: transparent;
	color: var(--ssGreen);
	border: 1px solid rgba(38, 205, 138, 0.5);
}
.donateBtnGhost:hover {
	background: rgba(38, 205, 138, 0.12);
	border-color: var(--ssGreen);
	box-shadow: 0 0 16px rgba(38, 205, 138, 0.25);
	text-decoration: none;
}

/*==== Buttons, Links, Tags ====*/
.button {
	--btnColor: var(--accent);
	--btnBg: color-mix(in oklab, var(--bgTertiary) 86%, var(--btnColor));
	--btnColorHover: color-mix(in srgb, var(--bgTertiary) 69%, var(--btnColor));
	--btnColorHoverEdges: color-mix(in srgb, var(--bgTertiary) 50%, var(--btnColor));
	--btnBorder: 2px solid color-mix(in oklab, var(--btnColor) 40%, transparent);
	--btnText: var(--textPrimary);
	--btnPadding: 0.75rem 1.25rem;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: var(--btnPadding);
	background: var(--btnBg);
	color: var(--btnText);
	border: var(--btnBorder);
	border-radius: var(--radius);
	font-size: var(--fontSizeLg);
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--transition), border var(--transition), text-shadow var(--transitionSlow);
}

.button:hover,
.button:focus-visible {
	background:
			linear-gradient(to top,    var(--btnColorHoverEdges), transparent 20%),
			linear-gradient(to bottom, var(--btnColorHoverEdges), transparent 20%),
			linear-gradient(to right,  var(--btnColorHoverEdges), transparent 5%),
			linear-gradient(to left,   var(--btnColorHoverEdges), transparent 5%),
			var(--btnColorHover);
	border-color: var(--btnColor);
	color: #fff;
	text-decoration: none;
	text-shadow: 2px 2px 1px black,
	-2px -2px 1px black;
}

.buttonSolid {
	--btnColor: var(--accent);
	--btnBg: color-mix(in srgb, var(--btnColor) 32%, transparent);
	--btnColorHover: color-mix(in srgb, var(--btnColor) 64%, transparent);
	--btnBorder: 2px solid color-mix(in srgb, var(--btnColor) 40%, transparent);
}


.link {
	color: var(--accentGold);
	text-decoration: underline;
	font-weight: 700;
}
.link:hover {
	text-decoration: none;
}


.ssLogo{
	font-family: "NimbusSans", "NotoSans", var(--fallbackSans);
	font-weight: 700;
	font-style: italic;
	text-decoration: none !important;
	border-bottom: 0px solid transparent;
	transition: border 75ms ease-in-out;
}

.ssLogo:hover{
	border-bottom: 2px solid transparent;
	border-image: linear-gradient(90deg, var(--ssGreen) 25%, #B54087 43%, var(--ssPink) 60%) 1;
}

.ssLogo::before{
	content: 'Shota';
	color: var(--ssGreen);
	margin-right: 4px;
}

.ssLogo::after{
	content: 'Services';
	color: var(--ssPink);
	margin-left: 4px;
}

.icon {
	width: 24px;
	height: 24px;
	display: inline-block;
	vertical-align: middle;
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	max-height: 360px;
	height: fit-content;
	width: fit-content;
	overflow: scroll;
	transition: max-height var(--transitionSlow);
}
.card:hover .tags,
.card:focus-within .tags {
	max-height: 16rem;
}
.tag {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.85rem;
	background: var(--bgTertiary);
	color: var(--textSecondary);
	font-size: var(--fontSizeSm);
	font-weight: 500;
	border-radius: var(--radiusSm);
	border: 1px solid transparent;
	transition: background var(--transition), color var(--transition),
	border-color var(--transition), transform var(--transition);
	cursor: default;
}
.tag:hover {
	background: var(--accentDim);
	color: #fff;
	border-color: var(--accent);
	transform: translateY(-2px);
}

/*==== Cards ====*/
.cardWrapper {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none !important;
}
.card {
	background: var(--bgCard);
	border: 4px solid var(--borderColor);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: box-shadow var(--transition), border-color var(--transition);
}
.card:hover,
.card:focus-within {
	box-shadow: var(--shadowHover);
	border-color: var(--accentDim);
}
.card:focus-within {
	outline: 4px solid var(--accent);
	outline-offset: 2px;
}

.cardMedia {
	position: relative;
	width: 100%;
	aspect-ratio: 2 / 3;
	background: var(--bgSecondary);
	overflow: hidden;
}

.cardMedia img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: var(--cardOpacity, 1);
	transition: filter var(--transition);
}

.cardBadge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(6px);
	color: #fff;
	padding: 0.45rem 0.9rem;
	border-radius: var(--radiusSm);
	font-size: var(--fontSizeSm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.cardBody {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1;
}
.cardTitle {
	font-size: var(--fontSizeLg);
	text-align: center;
	font-weight: 700;
	line-height: 1.25;
	color: var(--textPrimary);
	transition: color var(--transition);
}
.card:hover .cardTitle {
	color: var(--accent);
}
.cardMeta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 0.75rem;
	border-top: 1px solid var(--borderColor);
	font-size: var(--fontSizeSm);
	color: var(--textSecondary);
}
.cardMetaItem {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: bold;
	font-size: var(--fontSizeXl);
}
.cardLangs {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}
.cardMetaItem img,
.langFlag {
	width: auto;
	height: 32px;
	border-radius: 3px;
}

/*==== Search ====*/
.searchForm {
	max-width: 720px;
	margin-inline: auto;
	background: var(--bgCard);
	border: 1px solid var(--borderColor);
	border-radius: var(--radius);
	padding: 1.5rem;
}
.searchTitle {
	font-family: var(--fontAccent);
	font-size: var(--fontSizeH2);
	text-align: center;
	margin-bottom: 1.25rem;
}
.searchGroup {
	margin-bottom: 1.25rem;
}
.searchGroupTitle {
	font-size: var(--fontSizeMd);
	margin-bottom: 0.75rem;
	color: var(--textSecondary);
}
.searchTags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.searchTag {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.85rem;
	background: var(--bgTertiary);
	outline: 2px solid var(--borderColor);
	border-radius: var(--radiusSm);
	color: var(--textSecondary);
	font-size: var(--fontSizeSm);
	cursor: pointer;
	user-select: none;
	transition: all 175ms linear;
}

.searchTag:hover {
	outline: 2px solid color-mix(in oklch, var(--borderHover) 67%, var(--ssPink));
}

.searchTag:has(input:checked) {
	background-color: color-mix(in oklch, var(--bgTertiary) 67%, var(--ssPink));
	outline: 2px solid color-mix(in oklch, var(--borderHover) 67%, var(--ssPink));
	box-shadow: 0 0 6px 0.5px color-mix(in oklch, var(--borderHover) 67%, var(--ssPink));

}


.searchTag::before {
	content: "";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border: 2px inset var(--borderHover);
	border-radius: 6px;
	background-color: color-mix(in oklch, var(--bgTertiary) 85%, var(--ssPink));
	color: transparent;
	font-size: 16px;
	line-height: 1;
	font-weight: 700;
	transition: background-color var(--transition), border-color var(--transition),
	color var(--transition), box-shadow var(--transition);
}

.searchTag:hover::before {
	border: 2px inset color-mix(in oklch, var(--borderHover) 67%, var(--ssPink));
	box-shadow: 0 0 3px 0px color-mix(in oklch, var(--borderHover) 67%, var(--ssPink));
}

.searchTag:has(input:checked)::before {
	content: "✓";
	font-size: 32pt;
	background-color: color-mix(in oklch, var(--bgTertiary) 32%, var(--ssPink));
	border: 2px double color-mix(in oklch, var(--borderColor) 32%, var(--ssPink));
	color: #111111;
	box-shadow: 0 0 6px 2px color-mix(in oklch, var(--bgTertiary) 32%, var(--ssPink));
	animation: checkPop 367ms cubic-bezier(0.43, -0.5, 0.15, 1.56) both;
}

.searchTag:has(input:not(:checked)):hover::before {
	background-color: color-mix(in oklch, var(--bgTertiary) 78%, var(--ssPink));
	box-shadow: 0 0 4px 0px color-mix(in oklch, var(--bgTertiary) 78%, var(--ssPink));
}

.searchCheck {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@keyframes checkPop {
	0% {
		transform: scale(0.8);
	}
	50% {
		transform: scale(1.12);
	}
	100% {
		transform: scale(1);
	}
}
.switchToggle {
	--notchWidth: 52px;
	position: relative;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	gap: 0.5rem;
	padding: 0.4rem 0.85rem;
	background: var(--bgTertiary);
	outline: 2px solid var(--borderColor);
	border-radius: var(--radiusSm);
	color: var(--textSecondary);
	font-size: var(--fontSizeSm);
	user-select: none;
	cursor: pointer;
	transition: all 175ms linear;
}

.switchToggle input {
	appearance: none;
	box-sizing: border-box;
	width: calc(var(--notchWidth) * 1.25);
	height: calc(var(--notchWidth)/2);
	background-color: color-mix(in oklch, var(--bgTertiary) 85%, var(--ssPink));
	outline: 2px solid var(--borderColor);
	border-radius: 999px;
	cursor: pointer;
}

.switchToggle input::before {
	content: '';
	box-sizing: border-box;
	position: absolute;
	left: 0.8567rem;
	border-radius: 999px;
	width: calc(var(--notchWidth)/2);
	height: calc(var(--notchWidth)/2);
	background-color: color-mix(in oklch, var(--bgTertiary) 32%, var(--ssPink));
	transition: all var(--transition);
}

.switchToggle input:hover {
	outline: 2px solid color-mix(in oklch, var(--borderHover) 67%, var(--ssPink));
}

.switchToggle input:checked {
	background-color: color-mix(in oklch, var(--bgTertiary) 32%, var(--ssPink));
	outline: 2px double color-mix(in oklch, var(--borderColor) 32%, var(--ssPink));
}

.switchToggle:hover {
	outline: 2px solid color-mix(in oklch, var(--borderHover) 67%, var(--ssPink));
}

.switchToggle input:checked::before{
	left: calc(var(--notchWidth) + 0.175rem);
	background-color: var(--ssPink);
	box-shadow: -2px 0 6px 0 var(--bgCard);
}

.switchToggle:has(input:checked) {
	background-color: color-mix(in oklch, var(--bgTertiary) 67%, var(--ssPink));
	outline: 2px solid color-mix(in oklch, var(--borderHover) 67%, var(--ssPink));
	box-shadow: 0 0 6px 0.5px color-mix(in oklch, var(--borderHover) 67%, var(--ssPink));
}

.searchFlag {
	height: 32px;
	width: auto;
	border-radius: 3px;
}
.searchSubmit {
	display: block;
	margin-inline: auto;
	min-width: 160px;
}
.searchResults {
	margin-top: 2rem;
}

/*==== Doujin Detail ====*/
.doujinGrid {
	display: grid;
	grid-template-columns: minmax(300px, 380px) 1fr;
	gap: 2.5rem;
	align-items: start;
	padding-top: 1rem;
}
.doujinCoverWrap {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--borderColor);
	background: var(--bgSecondary);
}
.doujinCover {
	width: 100%;
	height: auto;
	display: block;
	opacity: var(--cardOpacity, 1);
}

.previewPages{
	width: 100%;
	overflow: hidden;
	display: inline-flex;
	flex-direction: row;
	gap: 4px;
}

.pagePreview {
	width: calc(100%/3);
	height: auto;
	opacity: var(--cardOpacity, 1);
}

.cardLegend {
	position: relative;
	z-index: 3;
	display: block;
	width: 100%;
	margin-top: 0.2rem;
	padding-top: 0.36rem;
	font-family: var(--fontAccent);
	font-size: var(--fontSizeMd);
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
	background: linear-gradient(135deg, var(--ssPink), crimson);
	border: 1px solid rgba(218, 165, 32, 0.35);
	border-radius: 6px;              /* subtle rounding, not pill-shaped */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

	/* Clip the sides inward so the top resembles a ribbon's neck */
	clip-path: polygon(
			6% 0,  94% 0,
			100% 50%,  94% 100%,
			6% 100%,  0 50%
	);
}

/* ---- Ribbon tails ---- */
.cardLegend::before,
.cardLegend::after {
	content: "";
	position: absolute;
	top: 100%;
	width: 24px;
	height: 18px;
	background: var(--ssPink);
	clip-path: polygon(0 0, 100% 0, 70% 100%, 35% 100%);
	pointer-events: none;
}

/* Left tail — peeks out slightly behind the badge */
.cardLegend::before {
	left: 6%;
	margin-left: -12px;
	z-index: -1;
}

/* Right tail */
.cardLegend::after {
	right: 6%;
	margin-right: -12px;
	z-index: -1;
}


.doujinTitle {
	font-family: var(--fontAccent);
	font-size: var(--fontSizeXl);
	font-weight: 800;
	color: var(--textPrimary);
	margin: 1.25rem 0 0.75rem;
	line-height: 1.2;
	text-align: center;
}
.doujinMeta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fontSizeMd);
	color: var(--textSecondary);
	margin-bottom: 0.5rem;
	flex-wrap: wrap;
}
.doujinMetaLabel {
	font-weight: 700;
	color: var(--textPrimary);
}
.doujinMetaIcon {
	width: 24px;
	height: 24px;
	opacity: 0.9;
}

.doujinActions {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.actionGroup {
	background: var(--bgCard);
	border: 1px solid var(--borderColor);
	border-radius: var(--radius);
	padding: 1.25rem;
}
.actionTitle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fontSizeMd);
	font-weight: 700;
	color: var(--textPrimary);
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--borderColor);
}
.actionTitleSpaced {
	margin-top: 1.25rem;
}
.actionIcon {
	width: 28px;
	height: 28px;
	opacity: 0.95;
}
.langGrid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.langButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.6rem 1.2rem;
	background: var(--bgTertiary);
	border: 1px solid var(--borderColor);
	border-radius: var(--radiusSm);
	color: var(--textPrimary);
	font-weight: 600;
	font-size: var(--fontSizeBase);
	transition: all var(--transition);
	text-decoration: none;
}
.langButton:hover {
	background: var(--accentDim);
	border-color: var(--accent);
	transform: translateY(-2px);
	text-decoration: none;
}
.langButton .langFlag {
	width: 64px;
	height: auto;
	border-radius: 3px;
}
.releaseTag {
	display: inline-block;
	border: 2px solid var(--accent);
	border-radius: var(--radiusSm);
	padding: 0.6rem 1rem;
	font-size: var(--fontSizeMd);
	font-weight: 600;
	color: var(--textPrimary);
}
.purchaseButton {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 2rem;
	background: linear-gradient(135deg, var(--danger), var(--dangerDeep));
	color: #fff;
	border-radius: var(--radiusSm);
	font-size: var(--fontSizeLg);
	font-weight: 700;
	text-decoration: none;
	transition: all var(--transition);
	box-shadow: 0 4px 16px rgba(255, 42, 42, 0.3);
}
.purchaseButton:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 24px rgba(255, 42, 42, 0.45);
	text-decoration: none;
}
.purchasePerks {
	display: flex;
	gap: 0.5rem;
}
.purchasePerks img {
	width: 24px;
	height: 24px;
}
.downloadGrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(322px, 1fr));
	gap: 0.75rem;
}
.downloadLink {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0.9rem;
	background: var(--bgTertiary);
	border: 1px solid var(--borderColor);
	border-radius: var(--radiusSm);
	color: var(--textPrimary);
	font-weight: 600;
	text-decoration: none;
	transition: all var(--transition);
}
.downloadLink:hover {
	background: var(--accentDim);
	border-color: var(--accent);
	text-decoration: none;
}
.downloadThumb {
	width: 64px;
	height: auto;
	border-radius: 3px;
}
.comingSoon {
	text-align: center;
	padding: 4rem 1rem;
}

/*==== Purchase Modal ====*/
.modalOverlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(6px);
	align-items: center;
	justify-content: center;
	padding: 2rem;
}
.modalOverlay:target {
	display: flex;
}
.modalContent {
	background: var(--bgCard);
	border: 1px solid var(--borderColor);
	border-radius: var(--radius);
	max-width: 720px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: var(--shadowHover);
}
.modalHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--borderColor);
}
.modalTitle {
	font-family: var(--fontDisplay);
	font-size: var(--fontSizeXl);
	font-weight: 700;
	color: var(--textPrimary);
	margin: 0;
}
.modalClose {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--bgTertiary);
	color: var(--textSecondary);
	border-radius: var(--radiusSm);
	font-size: var(--fontSizeMd);
	text-decoration: none;
	transition: all var(--transition);
}
.modalClose:hover {
	background: var(--dangerDeep);
	color: #fff;
	text-decoration: none;
}
.modalBody {
	padding: 1.5rem;
}
.modalBody p {
	margin-bottom: 1rem;
	line-height: 1.6;
	color: var(--textSecondary);
}
.perkList {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 1.25rem 0;
}
.perkItem {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: var(--fontSizeSm);
	color: var(--textSecondary);
}
.perkIcon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}
.purchaseForm {
	margin: 1.5rem 0 1rem;
}
.purchaseSubmit {
	display: block;
	width: 100%;
	padding: 1rem;
	background: var(--accentDim);
	color: #fff;
	border: 2px solid var(--accent);
	border-radius: var(--radiusSm);
	font-size: var(--fontSizeMd);
	font-weight: 700;
	cursor: pointer;
	transition: background var(--transition);
	font-family: inherit;
}
.purchaseSubmit:hover {
	background: var(--accent);
}
.modalCloseLink {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: var(--fontSizeSm);
	color: var(--textMuted);
}

/*==== Reader ====*/
.readerControls {
	padding-bottom: 2.5rem;
	text-align: center;
}
.readerControls h2 {
	font-size: var(--fontSizeH3);
	margin-bottom: 0.75rem;
}
.transparency {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
}
.transparencyInput {
	background: var(--bgInput);
	color: var(--textPrimary);
	border: 1px solid var(--borderColor);
	border-radius: var(--radiusSm);
	padding: 0.5rem 0.75rem;
	font-size: var(--fontSizeBase);
	font-family: inherit;
	outline: none;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.transparencyInput:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.15);
}
.pages {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
}
.page {
	display: block;
	opacity: var(--pageOpacity, 1);
}
.page > img {
	display: block;
	max-height: 1620px;
	max-width: min(1080px, 90vw);
	width: auto;
	height: auto;
	margin-inline: auto;
}

.backContainer {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 50;
}
.back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--bgTertiary);
	border: 1px solid var(--borderColor);
	border-radius: var(--radiusSm);
	transition: all var(--transition);
}
.back:hover {
	border-color: var(--accent);
	text-decoration: none;
}
.back img {
	width: 24px;
	height: 24px;
}
.readerNotice {
	text-align: center;
	padding: 4rem 1rem;
}

/*==== About ====*/
.disclaimer {
	display: none;
	background: var(--bgCard);
	border: 1px solid var(--borderColor);
	border-left: 4px solid var(--danger);
	border-radius: var(--radius);
	padding: 1.5rem;
	margin-bottom: 2.5rem;
	position: relative;
}
.disclaimer:target {
	display: block;
}
.disclaimerClose {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--dangerDeep);
	color: #fff;
	border-radius: var(--radiusSm);
	font-weight: 700;
	text-decoration: none;
}
.disclaimerClose:hover {
	background: var(--danger);
	color: #fff;
	text-decoration: none;
}
.disclaimer h3 {
	margin-bottom: 0.75rem;
}
.disclaimer p {
	margin-bottom: 0.75rem;
	color: var(--textSecondary);
}
.disclaimer p:last-of-type {
	margin-bottom: 0;
}
.disclaimerCloseLink {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: var(--fontSizeSm);
	color: var(--textMuted);
}
.prose {
	max-width: 85ch;
	margin-inline: auto;
}

.prose p {
	margin: 0 0 1.4rem;
	color: var(--textSecondary);
	font-size: var(--fontSizeBase);
	line-height: 1.7;
	max-width: 70ch;
	text-wrap: pretty;
	overflow-wrap: break-word;
}

.prose p:last-child {
	margin-bottom: 0;
}


.perkLegend {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 1rem 0;
}
.perkLegend li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--textSecondary);
}
.perkLegend img {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
}

/*==== Utility ====*/
.divMobileOnly {
	display: none;
	margin-top: 3rem;
	padding: 1.5rem;
	background: var(--bgCard);
	border: 1px solid var(--borderColor);
	border-radius: var(--radius);
	text-align: center;
}
.divMobileOnly h2 {
	font-size: var(--fontSizeH3);
	margin-bottom: 0.5rem;
}
.divMobileOnly p {
	color: var(--textSecondary);
}
.divDesktopOnly {
	display: block;
}
hide {
	display: none;
}

.page { display: block; position: relative; }


/*==== Age Gate ====*/

@property --magentaStrength {
	syntax: '<percentage>';
	initial-value: 0%;
	inherits: false;
}

@property --greenMix {
	syntax: '<percentage>';
	initial-value: 75%;
	inherits: false;
}

.popoutBoxBackground {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(0.75rem, 3vh, 2.5rem) clamp(0.75rem, 3vw, 2.5rem);
	z-index: 9;
	background:
			radial-gradient(
					100% 24% at 50% 0%,
					color-mix(in xyz, #F32D6F, #111111 var(--magentaStrength)),
					color-mix(in oklab, #26CD8A, #111111 var(--greenMix)) 46%
			);
	animation: backgroundBreathe 4.67s ease-in-out infinite;
}

@keyframes backgroundBreathe {
	0%, 100% {
		--magentaStrength: 46%;
		--greenMix: 96.7%;
	}
	50% {
		--magentaStrength: 100%;
		--greenMix: 86%;
	}
}

.popoutOverlay {
	position: absolute;
	z-index: 10;
	background-color: #111111;
	opacity: 0.367;
	pointer-events: none;
}

.popoutBoxInner {
	position: relative;
	inset: -12px 0;
	z-index: 11;
	width: min(100%, 62rem);
	max-height: calc(100vh - 12px);
	margin: auto;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.32) transparent;
	background: linear-gradient(90deg, var(--bgSecondary) 0%, var(--bgTertiary) 100%);
	border: 1px solid var(--borderColor);
	border-radius: 28px;
	box-shadow:
			var(--shadowHover),
			inset 0 0 0 1px rgba(255, 255, 255, 0.167),
			0 0 38px rgba(255, 255, 255, 0.32);
	animation: popIn 650ms cubic-bezier(0.43, -0.5, 0.15, 1.56) both;
}

@keyframes popIn {
	from {
		opacity: 0;
		transform: translateY(18px) scale(0.67);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.ageGateContent {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.75rem 3rem 0.75rem;
	text-align: left;
}

.ageGateBadge {
	--animeSpeed: 5s;
	display: grid;
	place-items: center;
	width: 6rem;
	aspect-ratio: 1;
	margin-bottom: 1.25rem;
	border-radius: 50%;
	font-family: "Firjar", "Hack", monospace;
	font-size: 2.4rem;
	font-weight: 650;
	letter-spacing: 0.04em;
	color: #ff7ba6;
	background: radial-gradient(circle, color-mix(in oklab, #F32D6F 20%, #111111) 45%, color-mix(in oklab, var(--ssPink) 58%, #111111) 100%);
	border: 2px solid color-mix(in oklab, var(--ssPink) 75%, #ffffff);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	animation: badgeGlow var(--animeSpeed) ease-in-out infinite alternate;
}

@keyframes badgeGlow {
	0%, 100% {
		box-shadow:
				0 0 0 0 color-mix(in oklab, var(--ssPink) 55%, transparent),
				inset 0 0 18px rgba(0, 0, 0, 0.55);
	}
	50% {
		box-shadow:
				0 0 26px 8px color-mix(in oklab, var(--ssPink) 45%, transparent),
				inset 0 0 18px rgba(0, 0, 0, 0.55);
	}
}

.ageGateHeading {
	margin: 0 0 0.85rem;
	font-family: "NimbusSans", var(--f);
	font-size: var(--fontSizeXl);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--textPrimary);
	text-align: center;
}

.ageGateIntro {
	width: 100%;
	margin: 0 0 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	text-wrap: pretty;
}

.ageGateIntro p {
	margin: 0;
	color: var(--textSecondary);
	font-size: var(--fontSizeMd);
}

.ageGateIntro strong {
	color: var(--textPrimary);
	font-weight: 600;
}

.ageGateTerms {
	width: fit-content;
	margin: 0 0 1.5rem;
	justify-content: center;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	text-align: left;
}

.ageGateTerms p {
	margin: 0;
	color: var(--textSecondary);
	font-size: var(--fontSizeMd);
	line-height: 1.25;
	text-wrap: pretty;
}

.ageGateLead {
	color: var(--textPrimary);
	font-weight: 600;
}

.ageGateTerms ul {
	margin: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	color: var(--textSecondary);
	font-size: var(--fontSizeMd);
	line-height: 1.5;
	text-wrap: pretty;
}

.ageGateTerms li {
	position: relative;
	padding-left: 1.6rem;
}

.ageGateTerms li::before {
	content: "";
	position: absolute;
	left: 0.15rem;
	top: 0.6em;
	width: 0.4em;
	height: 0.4em;
	border-radius: 50%;
	background: var(--ssPink);
	box-shadow: 0 0 4px 2px color-mix(in oklab, var(--ssPink) 55%, transparent);
}

.ageGateFinePrint {
	width: 100%;
	margin: 0 0 1.75rem;
	padding-top: 1rem;
	border-top: 2px dashed var(--borderColor);
	color: var(--textSecondary);
	font-size: var(--fontSizeBase);
	line-height: 1.25;
	text-align: center;
	text-wrap: pretty;
}

.ageGateForm {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	width: 100%;
}

.ageGateForm .button {
	flex: 1 1 auto;
	min-width: 12rem;
	text-align: center;
}

.ageGateEnter {
	--btnColor: var(--accent);
	--btnBg: color-mix(in oklab, var(--bgTertiary) 86%, var(--btnColor));
	--btnColorHover: color-mix(in srgb, var(--bgTertiary) 69%, var(--btnColor));
	--btnColorHoverEdges: color-mix(in srgb, var(--bgTertiary) 50%, var(--btnColor));
	--btnBorder: 2px solid color-mix(in oklab, var(--btnColor) 40%, transparent);
}

.ageGateExit {
	--btnColor: var(--ssPink);
	--btnBg: color-mix(in oklab, var(--bgTertiary) 86%, var(--btnColor));
	--btnColorHover: color-mix(in srgb, var(--bgTertiary) 69%, var(--btnColor));
	--btnColorHoverEdges: color-mix(in srgb, var(--bgTertiary) 50%, var(--btnColor));
	--btnBorder: 2px solid color-mix(in oklab, var(--btnColor) 40%, transparent);
}

@media (max-width: 560px) {
	.popoutBoxInner {
		border-radius: 22px;
	}

	.ageGateContent {
		padding: 1.75rem 1.25rem 1.5rem;
	}

	.ageGateBadge {
		width: 72px;
		font-size: 1.75rem;
		margin-bottom: 1rem;
	}

	.ageGateIntro,
	.ageGateTerms,
	.ageGateFinePrint {
		margin-bottom: 1.25rem;
	}

	.ageGateFinePrint {
		padding-top: 1rem;
		text-wrap: pretty;
	}

	.ageGateForm {
		flex-direction: column;
	}

	.ageGateForm .button {
		width: 100%;
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.popoutBoxBackground,
	.ageGateBadge,
	.popoutBoxInner {
		animation: none;
	}
}

/*==== Responsive ====*/
@media (max-width: 900px) {
	.doujinGrid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}
@media (max-width: 768px) {
	.siteHeader {
		position: relative;
		backdrop-filter: none;
		background: var(--bgSecondary);
	}
	.headerContainer {
		flex-direction: column;
		align-items: center;
		gap: 0.75rem;
		padding: 1rem;
	}
	.headerLogo {
		height: 44px;
	}
	.headerTagline {
		font-size: var(--fontSizeMd);
	}
	.headerLink {
		width: 52px;
		height: 52px;
	}
	.headerLink img {
		width: 28px;
		height: 28px;
	}
	.headerDrawer {
		position: static;
		width: 100%;
		margin-top: 0.5rem;
	}
	.headerDrawerPanel {
		border-radius: var(--radiusSm);
		border-top: 1px solid var(--borderColor);
		box-shadow: none;
		animation: none;
	}
	.siteFooter {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		text-align: center;
	}
	.siteFooter > .footerInfo,
	.siteFooter > .expandHide {
		grid-column: 1;
		grid-row: auto;
		max-width: 100%;
	}
	.footerInfo {
		text-align: center;
		align-items: center;
	}
	.footerInfo > h2 {
		margin-inline: auto;
	}
	.donateTitle {
		font-size: 32px;
	}
	.donateTitleAccent {
		height: 44px;
	}
	.donateHeader,
	.donateAddress,
	.donateLinks {
		justify-content: center;
	}
	.donateBody {
		text-align: left;
	}

}
@media (max-width: 640px) {
	.gridContainer {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.doujinTitle {
		font-size: var(--fontSizeXl);
	}
	.actionTitle {
		font-size: var(--fontSizeBase);
	}
	.purchaseButton {
		font-size: var(--fontSizeMd);
		padding: 0.85rem 1.5rem;
	}
	.downloadGrid {
		grid-template-columns: 1fr;
	}
	.modalContent {
		border-radius: var(--radiusSm);
	}
	.container {
		max-width: 100%;
		padding-inline: 1rem;
	}
	.divMobileOnly {
		display: block;
	}
}

/*==== Reduced Motion ====*/
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	html {
		scroll-behavior: auto;
	}
}