/* ============ foundation ============ */
*, *::before, *::after {
	box-sizing: border-box; margin: 0; padding: 0;
	transition: background-color .45s ease, border-color .45s ease, color .45s ease;
}
html { background: #F2F0E9; transition: background-color .5s ease; scrollbar-gutter: stable; }
html:has(#invert:checked) { background: #131210; }
body {
	background: #F2F0E9; transition: background-color .5s ease;
	font-family: 'Space Mono', 'Courier New', monospace;
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body:has(#invert:checked) { background: #131210; }

/* the master "negative" toggle lives outside the page so it can re-skin everything */
#invert { position: fixed; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

.page {
	--paper: #F2F0E9;
	--ink:   #191712;
	--card:  #FBFAF5;
	--sh-rest: 0 1px 2px rgba(25,23,18,.10), 0 12px 28px -16px rgba(25,23,18,.35);
	--sh-lift: 0 2px 5px rgba(25,23,18,.16), 0 38px 72px -26px rgba(25,23,18,.50);
	max-width: 1300px; margin: 0 auto;
	padding: 0 clamp(18px, 4.5vw, 46px);
	color: var(--ink); font-size: 16px;
}
#invert:checked ~ .page {
	--paper: #131210;
	--ink:   #ECE9DF;
	--card:  #1B1A17;
	--sh-rest: 0 1px 2px rgba(0,0,0,.55), 0 12px 28px -16px rgba(0,0,0,.8);
	--sh-lift: 0 2px 5px rgba(0,0,0,.65), 0 38px 72px -26px rgba(0,0,0,.95);
}
.page ::selection { background: var(--ink); color: var(--paper); }

/* ============ top bar & invert control ============ */
.topbar {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: 16px 0; border-bottom: 1px solid var(--ink);
	font-size: 11px; letter-spacing: .2em;
}
.invert-btn { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.invert-btn:hover { text-decoration: underline; text-underline-offset: 5px; }
.inv-ico {
	position: relative; width: 13px; height: 13px; flex: none;
	border: 1.5px solid currentColor; border-radius: 50%; overflow: hidden;
}
.inv-ico::after {
	content: ""; position: absolute; inset: 0; background: currentColor;
	clip-path: inset(0 50% 0 0); transition: clip-path .4s ease;
}
.t-b { display: none; }
#invert:checked ~ .page .t-a { display: none; }
#invert:checked ~ .page .t-b { display: inline; }
#invert:checked ~ .page .inv-ico::after { clip-path: inset(0 0 0 0); }
#invert:focus-visible ~ .page .invert-btn { outline: 2px solid var(--ink); outline-offset: 4px; }

/* ============ masthead ============ */
.mast {
	display: grid; grid-template-columns: 1.25fr .75fr;
	gap: clamp(28px, 5vw, 70px); align-items: center;
	padding: clamp(40px, 6vw, 78px) 0 clamp(44px, 6vw, 84px);
}
.logo {
	font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
	font-size: clamp(4.4rem, 14.5vw, 11.6rem); line-height: .84; letter-spacing: -.015em;
	display: flex; align-items: baseline; cursor: default; user-select: none;
}
.dotmark {
	position: relative; flex: none; width: .125em; height: .125em;
	margin-left: .055em; border-radius: 50%; background: var(--ink);
}
.dotmark::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	width: 28%; height: 28%; border-radius: 50%; background: var(--paper);
	transform: translate(-50%,-50%) scale(0);
	transition: transform .5s cubic-bezier(.3,1.4,.4,1);
}
.logo:hover .dotmark::after { transform: translate(-50%,-50%) scale(1); }
.manifesto {
	font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
	font-size: clamp(1.25rem, 1.9vw, 1.38rem); line-height: 1.45;
	max-width: 32ch; margin-top: clamp(22px, 3vw, 36px);
}
.mast-meta { margin-top: 20px; font-size: 10px; letter-spacing: .2em; }
.hint {
	margin-top: 28px; display: flex; align-items: center; gap: 12px;
	font-size: 10px; letter-spacing: .2em; opacity: .7;
}
.hint::before { content: ""; width: 36px; height: 1px; background: var(--ink); }
.mast-right { display: flex; flex-direction: column; align-items: center; }
.mast-right .cardwrap { width: min(100%, 280px); }
.cap { margin-top: 22px; text-align: center; font-size: 12px; letter-spacing: .22em; line-height: 2.1; }
.cap span { opacity: .6; }

/* ============ card and lightbox ============ */
.cardwrap {
	position: relative;
	transform: translateY(var(--dy, 0px)) rotate(var(--tilt, 0deg));
	transition: transform .55s cubic-bezier(.2,.85,.25,1);
}
.cardwrap:hover, .cardwrap:focus-within { transform: translateY(-4%) rotate(0deg); z-index: 6; }
.cardwrap:has(input.lb:checked) { transform: none; transition: none; z-index: 1000; }
.cardwrap:has(input.lb:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; }

.card {
	position: relative; display: block;
	aspect-ratio: 5 / 7;
	border: 1px solid var(--ink);
	background: var(--card);              /* shows only while the image loads */
	box-shadow: var(--sh-rest);
	overflow: hidden;
	transition: box-shadow .5s ease, border-color .45s ease, background-color .45s ease;
}
.cardwrap:hover .card, .cardwrap:focus-within .card { box-shadow: var(--sh-lift); }
.card img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	-webkit-user-drag: none;
}

/* the invisible toggle — keyboard-focusable, so spacebar opens & closes too */
.lb { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hit {
	position: absolute; inset: 0; display: block;
	cursor: zoom-in; user-select: none; -webkit-user-select: none;
	-webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.nftlink { color:#d3d3d3; text-decoration:none; }

/* ---- lightbox ---- */
.lightbox { display: none; }
.lb:checked ~ .lightbox { display: block; }
html:has(.lb:checked) { overflow: hidden; }   /* lock page scroll while viewing */

.lightbox .stage {
	position: fixed; inset: 0; z-index: 1;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 4vh 4vw;
	background: color-mix(in srgb, var(--ink) 86%, transparent);
	backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
	cursor: zoom-out;
	animation: lb-fade .3s ease both;
}
.lightbox .big {
	display: block; width: auto; height: auto;
	max-width: 98vw; max-height: 80vh;
	box-shadow: 0 30px 90px -25px rgba(0,0,0,.55);
	-webkit-user-drag: none; user-select: none;
	animation: lb-in .45s ease both;
}
.lightbox .cap {
	margin-top: 20px; display: flex; flex-direction: column; gap: 7px; text-align: center;
	color: var(--paper);
	animation: lb-in .45s ease .07s both;
}
.lightbox .c1 { font-size: 11px; letter-spacing: .26em; }
.lightbox .c2 { font-size: 11px;  letter-spacing: .3em; opacity: .55; }
.lightbox .x {
	position: fixed; top: max(14px, 2.5vh); right: max(16px, 3vw); z-index: 2;
	width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
	color: var(--paper); font-size: 26px; line-height: 1;
	cursor: pointer; opacity: .75;
	transition: opacity .25s ease, transform .4s ease, color .45s ease;
}
.lightbox .x:hover { opacity: 1; transform: rotate(90deg); }

@keyframes lb-fade { from { opacity: 0; } }
@keyframes lb-in   { from { opacity: 0; } }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 62px 28px; padding: 66px 0 26px; }

/* cards - a stagger and a different tilt for each */
.grid .cardwrap:nth-child(even) { --dy: 20px; }
.grid .cardwrap:nth-child(12n+1)  { --tilt: -1.7deg; }
.grid .cardwrap:nth-child(12n+2)  { --tilt:  1.2deg; }
.grid .cardwrap:nth-child(12n+3)  { --tilt:  -0.8deg; }
.grid .cardwrap:nth-child(12n+4)  { --tilt:  2.1deg; }
.grid .cardwrap:nth-child(12n+5)  { --tilt: -1.2deg; }
.grid .cardwrap:nth-child(12n+6)  { --tilt: -2.0deg; }
.grid .cardwrap:nth-child(12n+7)  { --tilt:  0.9deg; }
.grid .cardwrap:nth-child(12n+8)  { --tilt: -1.4deg; }
.grid .cardwrap:nth-child(12n+9) { --tilt:  1.8deg; }

/* ============ set register — the deck's index ============ */
.register { max-width: 680px; margin: clamp(70px, 10vw, 116px) auto 0; }
.reg-head { text-align: center; margin-bottom: 36px; }
.reg-head .label { font-size: 10px; letter-spacing: .26em; }
.reg-head h2 {
	font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-style: italic;
	font-size: clamp(1.55rem, 3.6vw, 2.15rem); line-height: 1.2; margin-top: 14px;
}
.rows { border-top: 1px solid var(--ink); counter-reset: held; }
.row {
	position: relative; display: grid;
	grid-template-columns: 2.6rem minmax(0,1fr) 5.4rem 1.2rem 1.2rem;
	align-items: center; gap: 12px; padding: 10px 14px;
	border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .45s ease;
}
.row:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.held { position: absolute; opacity: 0; width: 1px; height: 1px; }
.row:has(.held:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); counter-increment: held; }
.row:has(.held:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.r-no { font-size: 10px; letter-spacing: .12em; opacity: .6; }
.r-name { font-family: 'Instrument Serif', Georgia, serif; font-size: 19px; line-height: 1.1; }
.r-type { font-size: 9px; letter-spacing: .22em; opacity: .6; }
.row .rar { justify-self: center; }
.box { position: relative; justify-self: end; width: 13px; height: 13px; border: 1px solid currentColor; }
.box::after {
	content: ""; position: absolute; inset: 3px; background: currentColor; transform: scale(0);
	transition: transform .3s cubic-bezier(.3,1.4,.5,1), background-color .45s ease;
}
.row:has(.held:checked) .box::after { transform: scale(1); }
.reg-count {
	display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap;
	gap: 8px; margin-top: 18px; font-size: 10px; letter-spacing: .2em;
}
.cnt::after { content: counter(held, decimal-leading-zero); font-weight: 700; }
.all { display: none; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 15px; letter-spacing: 0; }
.register:not(:has(.row:not(:has(.held:checked)))) .all { display: inline; }

footer {
	margin-top: clamp(70px, 10vw, 110px); border-top: 1px solid var(--ink);
	padding: 22px 0 46px; display: flex; justify-content: space-between; flex-wrap: wrap;
	gap: 8px 28px; font-size: 11px; letter-spacing: .18em;
}
footer .c3 {
    font-size: 11px; letter-spacing: 0; 
}

/* ============ responsive ============
	 3 across by default → 2 across on tablets → 1 across on phones */
@media (max-width: 1020px) {
	.grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.setbar-mid { display: none; }
}
@media (max-width: 880px)  { .mast { grid-template-columns: 1fr; } .mast-right { margin-top: 8px; } }
@media (max-width: 640px) {
	.grid { grid-template-columns: 1fr; gap: 44px 0; padding-top: 52px; }
	.grid .cardwrap:nth-child(even) { --dy: 0px; } /* single column: even vertical rhythm, tilts remain */
	.r-type { display: none; }
	.row { grid-template-columns: 2.2rem minmax(0,1fr) 1.2rem 1.2rem; gap: 10px; }
	.lightbox .big { max-height: 72vh; }
	.lightbox .cap { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}