/* ==========================================================================
   SASC design system
   Palette and typography are taken from docs/branding/brand-system.md §5.
   Single stylesheet, no framework, no webfont requests: the brand specifies a
   system Didone stack for display and a system monospace for UI/data, so the
   page renders with zero font round-trips.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	/* ---- Core palette -------------------------------------------------
	   Dark underground club x acid neon. The club stays near-black; colour
	   arrives as light (glow, edge, accent), never as a filled surface.
	   Hierarchy: black -> cream -> acid -> violet/cyan atmosphere -> red.  */
	--sasc-black:         #070809;
	--sasc-black-soft:    #0D0F12;
	--sasc-panel:         #12151A;
	--sasc-cream:         #F3EBDD;

	--sasc-acid:          #C8FF38; /* primary electric accent */
	--sasc-violet:        #8F5CFF; /* secondary glow */
	--sasc-cyan:          #45E4FF; /* atmospheric only, used twice */

	/* Ink variants. #8F5CFF measures 4.48:1 on --sasc-panel and #5E0B1E is
	   far below AA, so the glow colours never carry text; these do.
	   --sasc-violet-ink 7.59:1, --sasc-danger-ink 6.12:1 on --sasc-panel. */
	--sasc-violet-ink:    #B894FF;
	--sasc-danger:        #E0455F; /* Unforgivables / destructive edge */
	--sasc-danger-ink:    #FF5C72;
	--sasc-oxblood:       #5E0B1E; /* Velvet Oxblood, deep red atmosphere */
	--sasc-brass:         #D8B25A; /* Tab Gold, kept for the entry-stamp motif */

	/* ---- Legacy token names, remapped ---------------------------------
	   The design system is variable-driven, so re-pointing these re-skins
	   links, buttons, rules, focus rings and tier accents in one place.   */
	--sasc-bg:            var(--sasc-black);
	--sasc-bg-deep:       #040506;
	--sasc-surface:       var(--sasc-panel);
	--sasc-surface-2:     #171B21;
	--sasc-plum:          #1B1030;

	--sasc-text:          var(--sasc-cream);
	--sasc-muted:         #A7A39B; /* 7.28:1 on --sasc-panel */
	--sasc-faint:         #8A857D; /* 4.99:1 on --sasc-panel, still AA */

	--sasc-accent:        var(--sasc-acid);
	--sasc-accent-dim:    #7FA022;
	--sasc-lilac:         var(--sasc-violet-ink);
	--sasc-neon:          var(--sasc-acid);

	/* Hairlines: the ledger/guest-list motif, now neutral so the acid stays
	   an event rather than a constant. */
	--sasc-rule:          rgba(243, 235, 221, 0.12);
	--sasc-rule-soft:     rgba(243, 235, 221, 0.07);
	--sasc-glass:         rgba(13, 15, 18, 0.72);

	/* Typography */
	--sasc-font-display:  "Didot", "Didot LT STD", "Bodoni MT", "Hoefler Text", Garamond, "Times New Roman", Georgia, serif;
	--sasc-font-body:     ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--sasc-font-mono:     ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	/* Type scale (fluid, 390px -> 1440px) */
	--sasc-step--1: clamp(0.78rem, 0.75rem + 0.12vw, 0.85rem);
	--sasc-step-0:  clamp(0.95rem, 0.90rem + 0.22vw, 1.08rem);
	--sasc-step-1:  clamp(1.15rem, 1.05rem + 0.45vw, 1.45rem);
	--sasc-step-2:  clamp(1.45rem, 1.25rem + 0.90vw, 2.10rem);
	--sasc-step-3:  clamp(1.95rem, 1.55rem + 1.75vw, 3.20rem);
	--sasc-step-4:  clamp(2.60rem, 1.85rem + 3.20vw, 4.80rem);
	--sasc-step-5:  clamp(3.20rem, 1.90rem + 5.60vw, 7.50rem);

	/* Spacing scale */
	--sasc-space-3xs: 0.25rem;
	--sasc-space-2xs: 0.5rem;
	--sasc-space-xs:  0.75rem;
	--sasc-space-s:   1rem;
	--sasc-space-m:   1.5rem;
	--sasc-space-l:   2.5rem;
	--sasc-space-xl:  4rem;
	--sasc-space-2xl: 6rem;
	--sasc-space-3xl: clamp(3.5rem, 1.6rem + 6.5vw, 6.5rem);

	/* Structure */
	--sasc-max-width:     1440px;
	--sasc-measure:       68ch;
	--sasc-gutter:        clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);
	--sasc-radius:        2px;
	--sasc-radius-lg:     4px;
	--sasc-header-h:      68px;
	--sasc-status-h:      30px;

	--sasc-ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
	--sasc-dur:           220ms;

	/* Pointer parallax offsets, written by experience.js on desktop only.
	   Declared here so the hero transforms resolve to 0 without JS. */
	--hero-x: 0px;
	--hero-y: 0px;

	color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	background: var(--sasc-bg);
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--sasc-header-h) + var(--sasc-status-h) + 1rem);
}

body {
	margin: 0;
	background: transparent; /* see .sasc-atmos: html carries the base colour */
	color: var(--sasc-text);
	font-family: var(--sasc-font-body);
	font-size: var(--sasc-step-0);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
img { background-color: var(--sasc-surface); }

h1, h2, h3, h4 {
	font-family: var(--sasc-font-display);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 0 0 var(--sasc-space-m);
	text-wrap: balance;
}
h1 { font-size: var(--sasc-step-4); }
h2 { font-size: var(--sasc-step-3); }
h3 { font-size: var(--sasc-step-2); letter-spacing: -0.01em; }
h4 { font-size: var(--sasc-step-1); }

p { margin: 0 0 var(--sasc-space-m); max-width: var(--sasc-measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--sasc-accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--sasc-text); }

ul, ol { padding-left: 1.15rem; margin: 0 0 var(--sasc-space-m); max-width: var(--sasc-measure); }
li { margin-bottom: var(--sasc-space-2xs); }

strong { color: #fff; font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--sasc-rule); margin: var(--sasc-space-xl) 0; }

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

::selection { background: var(--sasc-accent); color: var(--sasc-bg); }

.sasc-sr-only {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sasc-skip-link {
	position: absolute; left: var(--sasc-space-s); top: -100px; z-index: 200;
	background: var(--sasc-accent); color: var(--sasc-bg);
	padding: var(--sasc-space-2xs) var(--sasc-space-s);
	font: 600 var(--sasc-step--1)/1 var(--sasc-font-mono);
	letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
	transition: top var(--sasc-dur) var(--sasc-ease);
}
.sasc-skip-link:focus { top: var(--sasc-space-s); color: var(--sasc-bg); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.sasc-shell {
	width: 100%;
	max-width: var(--sasc-max-width);
	margin-inline: auto;
	padding-inline: var(--sasc-gutter);
}
.sasc-shell--narrow { max-width: 900px; }

.sasc-section { padding-block: var(--sasc-space-3xl); position: relative; }
.sasc-section + .sasc-section { padding-top: 0; }
/* No border here: .sasc-sechead already draws the hairline directly above the
   section numeral, and having both produced two rules ~20px apart. */
.sasc-section--ruled { padding-top: var(--sasc-space-2xl); }
.sasc-section--tint { background: linear-gradient(180deg, var(--sasc-bg) 0%, var(--sasc-bg-deep) 100%); }

/* Editorial section head: mono index numeral + display title, ruled */
.sasc-sechead {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sasc-space-m);
	align-items: start;
	margin-bottom: var(--sasc-space-xl);
	padding-top: var(--sasc-space-s);
	border-top: 1px solid var(--sasc-rule);
}
.sasc-sechead__num {
	font: 400 var(--sasc-step--1)/1.6 var(--sasc-font-mono);
	color: var(--sasc-accent);
	letter-spacing: 0.14em;
	padding-top: 0.55em;
}
.sasc-sechead__title { margin: 0; }
.sasc-sechead__lede {
	grid-column: 2;
	color: var(--sasc-muted);
	font-size: var(--sasc-step-1);
	margin: var(--sasc-space-s) 0 0;
	max-width: 56ch;
}
@media (max-width: 640px) {
	.sasc-sechead { grid-template-columns: 1fr; gap: var(--sasc-space-2xs); }
	.sasc-sechead__num { padding-top: 0; }
	.sasc-sechead__lede { grid-column: 1; }
}

/* Mono eyebrow label */
.sasc-eyebrow {
	display: inline-flex; align-items: center; gap: 0.6em;
	font: 400 var(--sasc-step--1)/1 var(--sasc-font-mono);
	text-transform: uppercase; letter-spacing: 0.18em;
	color: var(--sasc-muted);
	margin: 0 0 var(--sasc-space-s);
}
.sasc-eyebrow::before {
	content: ""; width: 1.6rem; height: 1px;
	background: var(--sasc-accent); flex: none;
}

/* --------------------------------------------------------------------------
   4. Status pills — the honesty layer. Nothing on this site may imply a live
      mint, so every state is rendered through these.
   -------------------------------------------------------------------------- */
.sasc-pill {
	display: inline-flex; align-items: center; gap: 0.55em;
	font: 500 var(--sasc-step--1)/1 var(--sasc-font-mono);
	text-transform: uppercase; letter-spacing: 0.12em;
	padding: 0.55em 0.85em;
	border: 1px solid var(--sasc-rule);
	border-radius: var(--sasc-radius);
	background: color-mix(in srgb, var(--sasc-surface) 70%, transparent);
	color: var(--sasc-text);
	white-space: nowrap;
}
.sasc-pill__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; }
.sasc-pill--pending { color: var(--sasc-accent); border-color: color-mix(in srgb, var(--sasc-accent) 40%, transparent); }
.sasc-pill--blocked { color: #E88E8E; border-color: color-mix(in srgb, #E88E8E 35%, transparent); }
.sasc-pill--done    { color: var(--sasc-neon); border-color: color-mix(in srgb, var(--sasc-neon) 30%, transparent); }
.sasc-pill--vip     { color: var(--sasc-lilac); border-color: color-mix(in srgb, var(--sasc-lilac) 35%, transparent); }

/* Entry-stamp motif (logo-system.md mark F) */
.sasc-stamp {
	display: inline-block;
	border: 2px solid var(--sasc-oxblood);
	color: #C96A78;
	font: 600 var(--sasc-step-1)/1 var(--sasc-font-mono);
	text-transform: uppercase; letter-spacing: 0.16em;
	padding: 0.6em 1em;
	transform: rotate(-4deg);
	opacity: 0.92;
	border-radius: var(--sasc-radius);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.sasc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
	font: 500 var(--sasc-step--1)/1 var(--sasc-font-mono);
	text-transform: uppercase; letter-spacing: 0.14em;
	padding: 1.05em 1.8em;
	border: 1px solid var(--sasc-accent);
	border-radius: var(--sasc-radius);
	background: var(--sasc-accent);
	color: var(--sasc-bg);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--sasc-dur) var(--sasc-ease),
	            color var(--sasc-dur) var(--sasc-ease),
	            border-color var(--sasc-dur) var(--sasc-ease);
}
.sasc-btn:hover { background: var(--sasc-text); border-color: var(--sasc-text); color: var(--sasc-bg); }

.sasc-btn--ghost { background: transparent; color: var(--sasc-accent); }
.sasc-btn--ghost:hover { background: color-mix(in srgb, var(--sasc-accent) 14%, transparent); color: var(--sasc-text); border-color: var(--sasc-text); }

.sasc-btn--quiet { background: transparent; border-color: var(--sasc-rule-soft); color: var(--sasc-text); }
.sasc-btn--quiet:hover { border-color: var(--sasc-accent); color: var(--sasc-accent); background: transparent; }

.sasc-btn[aria-disabled="true"],
.sasc-btn:disabled {
	background: transparent; color: var(--sasc-faint);
	border-color: var(--sasc-rule-soft); cursor: not-allowed;
}
.sasc-btn[aria-disabled="true"]:hover,
.sasc-btn:disabled:hover { background: transparent; color: var(--sasc-faint); border-color: var(--sasc-rule-soft); }

.sasc-btn-row { display: flex; flex-wrap: wrap; gap: var(--sasc-space-s); align-items: center; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.sasc-header {
	position: sticky; top: 0; z-index: 100;
	/* 88% let large display type read straight through the bar while scrolling,
	   and backdrop-filter is not guaranteed. 96% keeps the glass feel legible. */
	background: color-mix(in srgb, var(--sasc-bg) 96%, transparent);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid var(--sasc-rule);
}
.sasc-header__inner {
	min-height: var(--sasc-header-h);
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--sasc-space-m);
}

.sasc-brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--sasc-text); }
.sasc-brand__badge { width: 30px; height: 30px; flex: none; }
.sasc-brand__mark {
	font-family: var(--sasc-font-display);
	font-size: 1.32rem; letter-spacing: 0.12em; line-height: 1;
}
.sasc-brand__sub {
	display: block;
	font: 400 0.52rem/1 var(--sasc-font-mono);
	letter-spacing: 0.28em; text-transform: uppercase;
	color: var(--sasc-muted); margin-top: 0.38em;
}
.sasc-brand:hover .sasc-brand__mark { color: var(--sasc-accent); }

.sasc-nav__list {
	display: flex; align-items: center; gap: clamp(0.9rem, 1.6vw, 1.9rem);
	list-style: none; margin: 0; padding: 0;
	max-width: none;   /* not prose: the reading-measure cap pushed a 7th item off-screen */
}
.sasc-nav__disclosure { position: relative; }
.sasc-filterchips, .sasc-jumpnav ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; max-width: none; }
.sasc-filterchip { min-height: 44px; background: var(--sasc-bg-deep); color: var(--sasc-text); border: 1px solid var(--sasc-rule); border-radius: var(--sasc-radius); padding: 0.5rem 0.75rem; cursor: pointer; }
.sasc-jumpnav a { display: grid; place-items: center; min-width: 44px; min-height: 44px; border: 1px solid var(--sasc-rule); text-decoration: none; }
.sasc-one__notes summary { min-height: 44px; cursor: pointer; }
.sasc-filtersearch { margin-block: 1rem; }
.sasc-filtersearch[hidden], .sasc-filters .sasc-field[hidden] { display: none; }
.sasc-mobile-filterbar { display: none; }
.sasc-filters > noscript { display: contents; }
.sasc-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 0; list-style: none; max-width: none; }
.sasc-progress li { border-top: 1px solid var(--sasc-rule); padding-block: 1rem; }
.sasc-progress strong, .sasc-progress span { display: block; }
.sasc-progress span { color: var(--sasc-muted); }
@media (max-width: 760px) { .sasc-progress { grid-template-columns: 1fr 1fr; } }
.sasc-hash, .sasc-code, [data-sasc-hash] { overflow-wrap: anywhere; font-family: var(--sasc-font-mono); }
.sasc-copy { display: block; min-height: 44px; }
.sasc-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1rem; }
@media (max-width: 860px) { .sasc-one .sasc-one__fig { order: -1 !important; } }
@media (max-width: 760px) {
	.sasc-mobile-filterbar { display: flex; position: sticky; top: calc(var(--sasc-header-h) + var(--sasc-status-h)); background: var(--sasc-bg-deep); z-index: 5; padding: 0.5rem 1rem; border: 1px solid var(--sasc-rule); margin-bottom: 1rem; }
	.sasc-mobile-filterbar a { min-height: 44px; display: flex; align-items: center; }
}
.sasc-nav__disclosure summary { cursor: pointer; }
.sasc-nav__submenu { position: absolute; right: 0; min-width: 200px; margin: 0; padding: 0.7rem 1rem; list-style: none; background: var(--sasc-bg-deep); border: 1px solid var(--sasc-rule); }
.sasc-nav__submenu .sasc-nav__link { display: flex; align-items: center; min-height: 44px; }
.sasc-nav__link, .sasc-navtoggle { min-height: 44px; }
.sasc-nav__link {
	font: 400 var(--sasc-step--1)/1 var(--sasc-font-mono);
	text-transform: uppercase; letter-spacing: 0.1em;
	color: var(--sasc-text); text-decoration: none;
	padding: 0.5em 0; position: relative; white-space: nowrap;
}
.sasc-nav__link::after {
	content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
	height: 1px; background: var(--sasc-accent);
	transition: right var(--sasc-dur) var(--sasc-ease);
}
.sasc-nav__link:hover { color: var(--sasc-accent); }
.sasc-nav__link:hover::after, .sasc-nav__item--current .sasc-nav__link::after { right: 0; }
.sasc-nav__item--current .sasc-nav__link { color: var(--sasc-accent); }

.sasc-nav__soon {
	font-size: 0.72em; letter-spacing: 0.1em;
	color: var(--sasc-faint); margin-left: 0.45em;
}
.sasc-nav__item--mint .sasc-nav__link {
	border: 1px solid var(--sasc-rule);
	border-radius: var(--sasc-radius);
	padding: 0.62em 0.9em;
}
.sasc-nav__item--mint .sasc-nav__link::after { display: none; }
.sasc-nav__item--mint .sasc-nav__link:hover { border-color: var(--sasc-accent); }

/* Mobile nav toggle */
.sasc-navtoggle {
	display: none;
	align-items: center; gap: 0.55em;
	background: transparent; border: 1px solid var(--sasc-rule);
	border-radius: var(--sasc-radius);
	color: var(--sasc-text); cursor: pointer;
	font: 500 var(--sasc-step--1)/1 var(--sasc-font-mono);
	text-transform: uppercase; letter-spacing: 0.12em;
	padding: 0.7em 0.85em;
}
.sasc-navtoggle__bars { display: grid; gap: 3px; width: 15px; }
.sasc-navtoggle__bars span { display: block; height: 1.5px; background: currentColor; transition: transform var(--sasc-dur) var(--sasc-ease), opacity var(--sasc-dur); }
.sasc-navtoggle[aria-expanded="true"] .sasc-navtoggle__bars span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.sasc-navtoggle[aria-expanded="true"] .sasc-navtoggle__bars span:nth-child(2) { opacity: 0; }
.sasc-navtoggle[aria-expanded="true"] .sasc-navtoggle__bars span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* The collapsed menu needs JavaScript to open, so it only collapses when the
   script is running (html.sasc-js, set before first paint). Without JS the
   links wrap under the brand instead of disappearing. */
@media (max-width: 900px) {
	html:not(.sasc-js) .sasc-header__inner { flex-wrap: wrap; padding-block: 0.5rem; }
	html:not(.sasc-js) .sasc-nav__list { flex-wrap: wrap; gap: 0 1.1rem; }
	html:not(.sasc-js) .sasc-nav__link { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 900px) {
	html.sasc-js .sasc-navtoggle { display: inline-flex; }
	html.sasc-js .sasc-nav {
		position: absolute; left: 0; right: 0; top: 100%;
		height: calc(100dvh - var(--sasc-header-h) - var(--sasc-status-h)); overflow-y: auto;
		background: var(--sasc-bg-deep);
		border-bottom: 1px solid var(--sasc-rule);
		padding: var(--sasc-space-s) var(--sasc-gutter) var(--sasc-space-l);
		display: none;
	}
	html.sasc-js .sasc-nav[data-open="true"] { display: block; }
	html.sasc-js .sasc-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	html.sasc-js .sasc-nav__item { border-bottom: 1px solid var(--sasc-rule-soft); }
	html.sasc-js .sasc-nav__link { display: block; padding: 1.05em 0; font-size: var(--sasc-step-0); letter-spacing: 0.14em; }
	.sasc-nav__link::after { display: none; }
	html.sasc-js .sasc-nav__item--mint .sasc-nav__link { border: 0; padding: 1.05em 0; }
	.sasc-nav__submenu { position: static; border: 0; padding-inline: 1rem; }
	html.sasc-menu-open { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.sasc-hero {
	position: relative;
	padding-block: clamp(3.5rem, 1.5rem + 9vw, 8rem) var(--sasc-space-3xl);
	overflow: hidden;
	isolation: isolate;
}
/* Afterhours wash: violet above, oxblood dragged along the floor. */
.sasc-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background:
		radial-gradient(120% 90% at 78% 4%, color-mix(in srgb, var(--sasc-plum) 85%, transparent) 0%, transparent 60%),
		radial-gradient(90% 70% at 6% 102%, color-mix(in srgb, var(--sasc-oxblood) 34%, transparent) 0%, transparent 58%);
}
/* CRT scanlines, static. The club has bad lighting on purpose. */
.sasc-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: repeating-linear-gradient(180deg, rgba(255,255,255,0.028) 0 1px, transparent 1px 3px);
	mix-blend-mode: overlay;
}

.sasc-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: clamp(2rem, 4vw, 4.5rem);
	align-items: center;
}
@media (max-width: 900px) { .sasc-hero__grid { grid-template-columns: 1fr; } }

.sasc-hero__title {
	font-size: var(--sasc-step-5);
	line-height: 0.92;
	letter-spacing: -0.035em;
	margin: 0 0 var(--sasc-space-m);
	text-wrap: balance;
}
/* The one place acid behaves like ink rather than light: 17:1 on the hero. */
.sasc-hero__title em {
	font-style: italic;
	color: var(--sasc-acid);
	text-shadow: 0 0 38px color-mix(in srgb, var(--sasc-acid) 32%, transparent);
}
.sasc-hero__lede {
	font-size: var(--sasc-step-1);
	color: var(--sasc-muted);
	max-width: 48ch;
	margin-bottom: var(--sasc-space-l);
}
.sasc-hero__status { margin-bottom: var(--sasc-space-l); display: flex; flex-wrap: wrap; gap: var(--sasc-space-2xs); }

/* Hero stat rail */
.sasc-statrail {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: 1px;
	background: var(--sasc-rule);
	border: 1px solid var(--sasc-rule);
	border-radius: var(--sasc-radius);
	margin-top: var(--sasc-space-xl);
	overflow: hidden;
}
.sasc-stat {
	background: color-mix(in srgb, var(--sasc-panel) 86%, transparent);
	padding: var(--sasc-space-m) var(--sasc-space-s);
	transition: background var(--sasc-dur) var(--sasc-ease);
}
.sasc-stat:hover { background: var(--sasc-surface-2); }
.sasc-stat__v {
	display: block;
	font-family: var(--sasc-font-display);
	font-size: var(--sasc-step-2);
	line-height: 1; color: var(--sasc-text);
}
.sasc-stat__k {
	display: block; margin-top: 0.6em;
	font: 400 var(--sasc-step--1)/1.3 var(--sasc-font-mono);
	text-transform: uppercase; letter-spacing: 0.12em;
	color: var(--sasc-muted);
}

/* --------------------------------------------------------------------------
   7b. Hero artwork + hero motion

   Composition rather than a row: one lead character held large and sharp in
   the foreground, two members standing back at reduced scale and opacity.
   Depth comes from three independent transform layers, which is also why the
   markup nests:

     .sasc-heroart__slot  -> absolute placement + pointer parallax
     .sasc-heroart__fig   -> idle float keyframes
     img                  -> nothing, so the art itself never resamples

   Keeping parallax and float on separate elements means neither animation
   has to know about the other; a single element cannot hold two competing
   transform values.
   -------------------------------------------------------------------------- */
.sasc-hero__art { position: relative; }

.sasc-heroart {
	position: relative;
	aspect-ratio: 1 / 1;          /* reserves height up front: no layout shift */
	max-width: 560px;
	margin-inline: auto;
	isolation: isolate;
}

/* Aurora. Soft radial stops rather than filter: blur(), which would force a
   large offscreen buffer on every frame; a gradient is blurry for free. */
.sasc-hero__aurora {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	will-change: transform, opacity;
}
.sasc-hero__aurora--acid {
	inset: 6% -14% 18% 10%;
	background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--sasc-acid) 26%, transparent) 0%, transparent 62%);
	animation: sasc-aurora-a 17s var(--sasc-ease) infinite alternate;
}
.sasc-hero__aurora--violet {
	inset: 20% 8% 2% -16%;
	background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--sasc-violet) 40%, transparent) 0%, transparent 64%);
	animation: sasc-aurora-b 13s var(--sasc-ease) infinite alternate;
}

@keyframes sasc-aurora-a {
	from { transform: translate3d(-18px, 10px, 0) scale(0.9);  opacity: 0.35; }
	to   { transform: translate3d(22px, -16px, 0) scale(1.08); opacity: 0.55; }
}
@keyframes sasc-aurora-b {
	from { transform: translate3d(14px, -12px, 0) scale(1.06); opacity: 0.38; }
	to   { transform: translate3d(-20px, 18px, 0) scale(0.92); opacity: 0.55; }
}

/* Placement. The lead sits right-of-centre; the two members stand back left. */
.sasc-heroart__slot { position: absolute; z-index: 2; }
.sasc-heroart__slot--lead {
	width: 62%; right: 2%; top: 14%; z-index: 4;
	transform: translate3d(0, var(--hero-y), 0);
}
.sasc-heroart__slot--back-a {
	width: 40%; left: 0; top: 0; z-index: 3;
	transform: translate3d(var(--hero-x), calc(var(--hero-y) * 0.5), 0);
}
.sasc-heroart__slot--back-b {
	width: 36%; left: 9%; bottom: 2%; z-index: 3;
	transform: translate3d(calc(var(--hero-x) * -0.7), calc(var(--hero-y) * 0.35), 0);
}

.sasc-heroart__fig {
	position: relative;
	margin: 0;
	border: 1px solid color-mix(in srgb, var(--sasc-cream) 16%, transparent);
	border-radius: var(--sasc-radius);
	overflow: hidden;
	background: var(--sasc-surface);
	box-shadow:
		0 30px 70px -26px rgba(0, 0, 0, 0.95),
		0 0 0 1px rgba(0, 0, 0, 0.5);
	transition: border-color var(--sasc-dur) var(--sasc-ease), box-shadow var(--sasc-dur) var(--sasc-ease);
}
.sasc-heroart__fig img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

/* The lead is the only piece at full strength and full colour. */
.sasc-heroart__slot--lead .sasc-heroart__fig {
	border-color: color-mix(in srgb, var(--sasc-acid) 42%, transparent);
	box-shadow:
		0 40px 90px -30px rgba(0, 0, 0, 0.98),
		0 0 60px -14px color-mix(in srgb, var(--sasc-acid) 30%, transparent);
}
.sasc-heroart__slot--back-a .sasc-heroart__fig,
.sasc-heroart__slot--back-b .sasc-heroart__fig {
	opacity: 0.74;
	filter: saturate(0.8);
	border-color: color-mix(in srgb, var(--sasc-violet) 38%, transparent);
}

/* Idle float. Desynced duration and delay per slot so the three never line up
   into a single pulsing block. */
@keyframes sasc-float {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
	50%      { transform: translate3d(0, -12px, 0) rotate(1deg); }
}
.sasc-heroart__fig { animation: sasc-float 7.5s ease-in-out infinite; }
.sasc-heroart__slot--lead   .sasc-heroart__fig { animation-duration: 9s;   animation-delay: -1.2s; }
.sasc-heroart__slot--back-a .sasc-heroart__fig { animation-duration: 6.5s; animation-delay: -3.4s; }
.sasc-heroart__slot--back-b .sasc-heroart__fig { animation-duration: 8.2s; animation-delay: -5.1s; }

/* Hover lifts light, not geometry: a transform here would fight the float. */
.sasc-heroart__fig:hover {
	border-color: color-mix(in srgb, var(--sasc-acid) 70%, transparent);
	box-shadow:
		0 40px 90px -28px rgba(0, 0, 0, 0.98),
		0 0 70px -10px color-mix(in srgb, var(--sasc-acid) 42%, transparent);
}

.sasc-heroart__id {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 0.5em 0.6em;
	font: 500 0.66rem/1 var(--sasc-font-mono);
	letter-spacing: 0.12em;
	color: var(--sasc-text);
	background: linear-gradient(0deg, rgba(7, 8, 9, 0.92) 40%, transparent 100%);
}
.sasc-heroart__slot--lead .sasc-heroart__id { color: var(--sasc-acid); }

.sasc-heroart__cap {
	display: block;
	margin-top: var(--sasc-space-l);
	font: 400 var(--sasc-step--1)/1.5 var(--sasc-font-mono);
	letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--sasc-muted);
	text-align: center;
}
.sasc-heroart__cap::before {
	content: ""; display: block; width: 2rem; height: 1px;
	background: var(--sasc-acid); margin: 0 auto var(--sasc-space-s);
}

/* Mobile: text first, art second, nothing clipped, no parallax (JS never
   attaches below 901px) and a smaller composition so the floor glow does not
   eat the viewport. */
@media (max-width: 900px) {
	.sasc-heroart { max-width: 380px; }
	.sasc-hero__aurora--acid   { inset: 10% -6% 20% 6%; }
	.sasc-hero__aurora--violet { inset: 22% 6% 4% -8%; }
}
@media (max-width: 480px) {
	.sasc-heroart { max-width: 300px; }
}

/* --------------------------------------------------------------------------
   8. Cards, grids, prose
   -------------------------------------------------------------------------- */
.sasc-grid { display: grid; gap: var(--sasc-space-m); }
.sasc-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sasc-grid--3 {
	/* At most three columns: the floor grows to a third of the row, so six
	   cards land 3+3 instead of leaving a 4+2 orphan row on wide screens. */
	grid-template-columns: repeat(auto-fit, minmax(max(250px, calc((100% - 2 * var(--sasc-space-m)) / 3)), 1fr));
}

.sasc-card {
	background: var(--sasc-surface);
	border: 1px solid var(--sasc-rule-soft);
	border-radius: var(--sasc-radius);
	padding: var(--sasc-space-l);
	transition: border-color var(--sasc-dur) var(--sasc-ease), background var(--sasc-dur) var(--sasc-ease);
}
.sasc-card:hover { border-color: color-mix(in srgb, var(--sasc-accent) 45%, transparent); background: var(--sasc-surface-2); }
.sasc-card__num {
	font: 400 var(--sasc-step--1)/1 var(--sasc-font-mono);
	color: var(--sasc-accent); letter-spacing: 0.14em;
	display: block; margin-bottom: var(--sasc-space-s);
}
.sasc-card h3 { font-size: var(--sasc-step-1); margin-bottom: var(--sasc-space-2xs); }
.sasc-card p { color: var(--sasc-muted); margin-bottom: 0; font-size: var(--sasc-step-0); }

/* Definition rows: the "spec sheet" component used for mechanics + mint config */
.sasc-spec { border-top: 1px solid var(--sasc-rule); margin: 0; }
.sasc-spec__row {
	display: grid;
	grid-template-columns: minmax(150px, 0.4fr) 1fr;
	gap: var(--sasc-space-m);
	padding: var(--sasc-space-m) 0;
	border-bottom: 1px solid var(--sasc-rule-soft);
	align-items: baseline;
}
.sasc-spec__k {
	font: 400 var(--sasc-step--1)/1.4 var(--sasc-font-mono);
	text-transform: uppercase; letter-spacing: 0.12em;
	color: var(--sasc-muted); margin: 0;
}
.sasc-spec__v { margin: 0; color: var(--sasc-text); font-size: var(--sasc-step-0); }
.sasc-spec__v .sasc-note { display: block; color: var(--sasc-faint); font-size: var(--sasc-step--1); margin-top: 0.35em; }
.sasc-spec__v--num { font-family: var(--sasc-font-display); font-size: var(--sasc-step-2); line-height: 1; }
@media (max-width: 560px) {
	.sasc-spec__row { grid-template-columns: 1fr; gap: var(--sasc-space-3xs); }
}

/* Tier distribution: the text carries the number, the bar only shows the
   share of the run. Bars use the same tier colours as the token cards. */
.sasc-spec--dist .sasc-spec__row { align-items: center; }
.sasc-dist {
	display: block; height: 6px; margin-top: var(--sasc-space-2xs);
	max-width: 36rem;
	background: var(--sasc-rule-soft); border-radius: 3px; overflow: hidden;
}
.sasc-dist__bar {
	display: block; height: 100%;
	width: max(var(--sasc-share, 0%), 4px);   /* 3 of 333 still reads as a mark */
	background: var(--sasc-tier-colour, var(--sasc-muted));
	border-radius: inherit;
}
.sasc-spec--dist .sasc-tier--common    { --sasc-tier-colour: var(--sasc-muted); }
.sasc-spec--dist .sasc-tier--uncommon  { --sasc-tier-colour: #7FA8C9; }
.sasc-spec--dist .sasc-tier--rare      { --sasc-tier-colour: #6FC5A8; }
.sasc-spec--dist .sasc-tier--epic      { --sasc-tier-colour: var(--sasc-accent); }
.sasc-spec--dist .sasc-tier--legendary { --sasc-tier-colour: #E8903B; }
.sasc-spec--dist .sasc-tier--mythic    { --sasc-tier-colour: var(--sasc-lilac); }
.sasc-spec--dist .sasc-spec__k { color: var(--sasc-tier-colour); }

/* Long-form prose */
.sasc-prose { max-width: var(--sasc-measure); }
.sasc-prose, .sasc-milestone__note { overflow-wrap: break-word; }   /* long unbroken strings (contract addresses) wrap on narrow screens */
.sasc-prose h2 { margin-top: var(--sasc-space-xl); }
.sasc-prose h3 { margin-top: var(--sasc-space-l); }
.sasc-prose > *:first-child { margin-top: 0; }
.sasc-prose code, .sasc-code {
	font-family: var(--sasc-font-mono);
	font-size: 0.88em;
	background: var(--sasc-surface-2);
	border: 1px solid var(--sasc-rule-soft);
	border-radius: var(--sasc-radius);
	padding: 0.15em 0.45em;
	overflow-wrap: anywhere;
}
.sasc-hash,
.sasc-prose .sasc-hash {   /* second selector outranks .sasc-prose code (0,1,1) */
	display: block;
	margin: var(--sasc-space-2xs) 0 var(--sasc-space-s);
	font-family: var(--sasc-font-mono);
	font-size: var(--sasc-step--1);
	line-height: 1.7;
	background: var(--sasc-bg-deep);
	border: 1px solid var(--sasc-rule);
	border-left: 2px solid var(--sasc-accent);
	border-radius: var(--sasc-radius);
	padding: var(--sasc-space-s) var(--sasc-space-m);
	color: var(--sasc-accent);
	overflow-wrap: anywhere;
	max-width: none;
}

/* Callout: used for every "this is not production" disclosure */
.sasc-callout {
	border: 1px solid var(--sasc-rule);
	border-left: 2px solid var(--sasc-accent);
	background: color-mix(in srgb, var(--sasc-accent) 5%, transparent);
	border-radius: var(--sasc-radius);
	padding: var(--sasc-space-m) var(--sasc-space-l);
	margin: 0 0 var(--sasc-space-l);
	max-width: none;
}
.sasc-callout .sasc-callout__title {   /* two classes: must outrank .sasc-callout p */
	font: 500 var(--sasc-step--1)/1.45 var(--sasc-font-mono);
	text-transform: uppercase; letter-spacing: 0.14em;
	color: var(--sasc-accent);
	margin: 0 0 var(--sasc-space-2xs);
}
.sasc-callout p { color: var(--sasc-muted); margin-bottom: 0; font-size: var(--sasc-step-0); }
.sasc-callout--vip { border-left-color: var(--sasc-lilac); background: color-mix(in srgb, var(--sasc-lilac) 5%, transparent); }
.sasc-callout--vip .sasc-callout__title { color: var(--sasc-lilac); }

/* --------------------------------------------------------------------------
   9. Token cards + collection explorer
   -------------------------------------------------------------------------- */
.sasc-tokengrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: var(--sasc-space-m);
	list-style: none; margin: 0; padding: 0;
	max-width: none;
}
@media (max-width: 480px) {
	.sasc-tokengrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sasc-space-s); }
}

.sasc-token { margin: 0; }
.sasc-token__btn {
	display: block; width: 100%; padding: 0; text-align: left; cursor: pointer;
	background: var(--sasc-surface);
	border: 1px solid var(--sasc-rule-soft);
	border-radius: var(--sasc-radius);
	color: inherit; font: inherit; text-decoration: none;   /* also rendered as <a> on the homepage */
	overflow: hidden;
	transition: border-color var(--sasc-dur) var(--sasc-ease), transform var(--sasc-dur) var(--sasc-ease);
}
.sasc-token__btn:hover { border-color: color-mix(in srgb, var(--sasc-accent) 55%, transparent); transform: translateY(-2px); }
.sasc-token__fig { position: relative; margin: 0; aspect-ratio: 1 / 1; background: var(--sasc-surface-2); }
.sasc-token__fig img { width: 100%; height: 100%; object-fit: cover; }
.sasc-token__meta {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
	gap: var(--sasc-space-3xs) var(--sasc-space-2xs);
	padding: var(--sasc-space-xs) var(--sasc-space-s) var(--sasc-space-s);
	border-top: 1px solid var(--sasc-rule-soft);
}
.sasc-token__id {
	white-space: nowrap;
	font: 500 var(--sasc-step-0)/1 var(--sasc-font-mono);
	letter-spacing: 0.06em; color: var(--sasc-text);
}
.sasc-token__tier {
	font: 400 0.66rem/1 var(--sasc-font-mono);
	text-transform: uppercase; letter-spacing: 0.12em;
	color: var(--sasc-muted);
}
.sasc-token__flag {
	position: absolute; top: var(--sasc-space-2xs); left: var(--sasc-space-2xs);
	font: 500 0.62rem/1 var(--sasc-font-mono);
	text-transform: uppercase; letter-spacing: 0.12em;
	background: color-mix(in srgb, var(--sasc-bg) 82%, transparent);
	border: 1px solid color-mix(in srgb, var(--sasc-lilac) 55%, transparent);
	color: var(--sasc-lilac);
	padding: 0.4em 0.55em; border-radius: var(--sasc-radius);
	backdrop-filter: blur(4px);
}

/* Tier accents, quiet: a 2px top edge rather than a coloured card */
.sasc-token--uncommon  .sasc-token__btn { box-shadow: inset 0 2px 0 0 #7FA8C9; }
.sasc-token--rare      .sasc-token__btn { box-shadow: inset 0 2px 0 0 #6FC5A8; }
.sasc-token--epic      .sasc-token__btn { box-shadow: inset 0 2px 0 0 var(--sasc-accent); }
.sasc-token--legendary .sasc-token__btn { box-shadow: inset 0 2px 0 0 #E8903B; }
.sasc-token--mythic    .sasc-token__btn { box-shadow: inset 0 2px 0 0 var(--sasc-lilac); }
.sasc-token--uncommon  .sasc-token__tier { color: #7FA8C9; }
.sasc-token--rare      .sasc-token__tier { color: #6FC5A8; }
.sasc-token--epic      .sasc-token__tier { color: var(--sasc-accent); }
.sasc-token--legendary .sasc-token__tier { color: #E8903B; }
.sasc-token--mythic    .sasc-token__tier { color: var(--sasc-lilac); }

/* Explorer toolbar */
.sasc-toolbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--sasc-space-m);
	align-items: end;
	padding-block: var(--sasc-space-m);
	border-top: 1px solid var(--sasc-rule);
	border-bottom: 1px solid var(--sasc-rule);
	margin-bottom: var(--sasc-space-l);
}
@media (max-width: 760px) { .sasc-toolbar { grid-template-columns: 1fr; align-items: stretch; } }

.sasc-field { display: grid; gap: 0.45em; }
.sasc-field__label {
	font: 400 var(--sasc-step--1)/1 var(--sasc-font-mono);
	text-transform: uppercase; letter-spacing: 0.14em;
	color: var(--sasc-muted);
}
.sasc-input, .sasc-select {
	font: 400 var(--sasc-step-0)/1.2 var(--sasc-font-mono);
	background: var(--sasc-bg-deep);
	border: 1px solid var(--sasc-rule-soft);
	border-radius: var(--sasc-radius);
	color: var(--sasc-text);
	padding: 0.78em 0.9em;
	width: 100%;
	appearance: none;
}
.sasc-select {
	background-image: linear-gradient(45deg, transparent 50%, var(--sasc-muted) 50%), linear-gradient(135deg, var(--sasc-muted) 50%, transparent 50%);
	background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2.4em;
}
.sasc-input:hover, .sasc-select:hover { border-color: var(--sasc-rule); }
.sasc-input::placeholder { color: var(--sasc-faint); }

.sasc-filters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: var(--sasc-space-s);
	margin-bottom: var(--sasc-space-m);
}

.sasc-resultbar {
	display: flex; flex-wrap: wrap; gap: var(--sasc-space-s);
	align-items: center; justify-content: space-between;
	font: 400 var(--sasc-step--1)/1.5 var(--sasc-font-mono);
	text-transform: uppercase; letter-spacing: 0.12em;
	color: var(--sasc-muted);
	margin-bottom: var(--sasc-space-m);
}
.sasc-linkbtn {
	background: none; border: 0; padding: 0; cursor: pointer;
	font: inherit; color: var(--sasc-accent);
	text-decoration: underline; text-underline-offset: 0.25em;
}
.sasc-linkbtn:hover { color: var(--sasc-text); }

.sasc-loadmore { display: flex; justify-content: center; margin-top: var(--sasc-space-xl); }
.sasc-empty {
	padding: var(--sasc-space-2xl) var(--sasc-space-m);
	text-align: center; color: var(--sasc-muted);
	border: 1px dashed var(--sasc-rule); border-radius: var(--sasc-radius);
}
.sasc-noscript { border-color: var(--sasc-rule); }

/* Token detail dialog */
.sasc-dialog {
	width: min(100% - 2rem, 940px);
	max-height: min(92dvh, 900px);
	padding: 0;
	border: 1px solid var(--sasc-rule);
	border-radius: var(--sasc-radius-lg);
	background: var(--sasc-bg-deep);
	color: var(--sasc-text);
	overflow: hidden;
}
.sasc-dialog::backdrop { background: rgba(3,2,5,0.82); backdrop-filter: blur(6px); }
.sasc-dialog__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	max-height: inherit;
}
@media (max-width: 760px) { .sasc-dialog__inner { grid-template-columns: 1fr; overflow-y: auto; } }
/* The artwork is square but the trait list is taller, which left a block of
   void under the image. The figure now fills the column and centres the square
   inside it, so the panel reads as a deliberate frame rather than a gap. */
.sasc-dialog__fig {
	margin: 0;
	background: var(--sasc-surface);
	display: grid; place-items: center;
	padding: var(--sasc-space-m);
	border-right: 1px solid var(--sasc-rule-soft);
}
.sasc-dialog__fig img {
	width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
	border-radius: var(--sasc-radius);
}
@media (max-width: 760px) {
	.sasc-dialog__fig { padding: 0; border-right: 0; border-bottom: 1px solid var(--sasc-rule-soft); }
	.sasc-dialog__fig img { border-radius: 0; }
}
.sasc-dialog__body { padding: var(--sasc-space-l); overflow-y: auto; }
.sasc-dialog__head {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: var(--sasc-space-s); margin-bottom: var(--sasc-space-m);
}
.sasc-dialog__title { font-size: var(--sasc-step-2); margin: 0; }
.sasc-dialog__close {
	flex: none; width: 2.4rem; height: 2.4rem;
	display: grid; place-items: center;
	background: transparent; border: 1px solid var(--sasc-rule);
	border-radius: var(--sasc-radius);
	color: var(--sasc-text); cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.sasc-dialog__close:hover { border-color: var(--sasc-accent); color: var(--sasc-accent); }

.sasc-traits { display: grid; gap: 1px; background: var(--sasc-rule-soft); border: 1px solid var(--sasc-rule-soft); border-radius: var(--sasc-radius); margin: 0; }
.sasc-trait { background: var(--sasc-bg); padding: var(--sasc-space-xs) var(--sasc-space-s); display: flex; justify-content: space-between; gap: var(--sasc-space-s); align-items: baseline; }
.sasc-trait__k { font: 400 var(--sasc-step--1)/1.4 var(--sasc-font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--sasc-muted); }
.sasc-trait__v { font-size: var(--sasc-step-0); text-align: right; }

/* --------------------------------------------------------------------------
   10. The Unforgivables
   Editorial two-column rows: artwork holds one side, the character holds the
   other, and the side alternates down the page so it reads as a spread rather
   than a list. Before the artwork existed this was a single text column with a
   small image underneath, which left half the page empty once all 15 had art.
   -------------------------------------------------------------------------- */
.sasc-ones { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; max-width: none; }

.sasc-one {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr);
	gap: clamp(2rem, 4vw, 4.5rem);
	align-items: center;
	padding: clamp(2.5rem, 4vw, 4.5rem) 0;
	border-top: 1px solid var(--sasc-rule-soft);
	margin: 0;
}
/* The placement spec block above already closes with a rule; a second one
   here read as a doubled hairline. */
.sasc-one:first-child { border-top: 0; }

/* Alternate the artwork side for editorial rhythm. */
.sasc-one:nth-child(even) .sasc-one__fig { order: -1; }

.sasc-one__head {
	display: flex; flex-wrap: wrap; align-items: baseline;
	gap: var(--sasc-space-s) var(--sasc-space-m);
	margin-bottom: var(--sasc-space-s);
}
.sasc-one__num {
	font: 400 var(--sasc-step--1)/1 var(--sasc-font-mono);
	letter-spacing: 0.16em; color: var(--sasc-lilac);
	flex: none;
}
.sasc-one__name {
	font-size: var(--sasc-step-3);
	line-height: 1.02;
	margin: 0 0 0.3em;
	text-wrap: balance;
}
.sasc-one__title {
	font: 400 var(--sasc-step--1)/1.4 var(--sasc-font-mono);
	text-transform: uppercase; letter-spacing: 0.16em;
	color: var(--sasc-accent); margin: 0 0 var(--sasc-space-m);
}
.sasc-one__desc {
	color: var(--sasc-text);
	font-size: var(--sasc-step-1);
	margin: 0 0 var(--sasc-space-m);
	max-width: 46ch;
}
.sasc-one__notes {
	font-size: var(--sasc-step--1); color: var(--sasc-muted);
	border-left: 1px solid var(--sasc-rule);
	padding-left: var(--sasc-space-m); margin: 0 0 var(--sasc-space-m);
	max-width: 52ch;
}
.sasc-one__notes b { color: var(--sasc-text); font-weight: 500; }

.sasc-one__fig { margin: 0; }
.sasc-one__fig img {
	width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
	border: 1px solid var(--sasc-rule);
	border-radius: var(--sasc-radius);
	background: var(--sasc-surface);
}
.sasc-one__cap {
	display: block; margin-top: var(--sasc-space-s);
	font: 400 var(--sasc-step--1)/1.5 var(--sasc-font-mono);
	text-transform: uppercase; letter-spacing: 0.12em;
	color: var(--sasc-faint);
}
.sasc-one__pending {
	display: grid; place-items: center;
	aspect-ratio: 1 / 1;
	border: 1px dashed var(--sasc-rule);
	border-radius: var(--sasc-radius);
	background: color-mix(in srgb, var(--sasc-lilac) 4%, transparent);
	color: var(--sasc-muted);
	font: 400 var(--sasc-step--1)/1.6 var(--sasc-font-mono);
	text-transform: uppercase; letter-spacing: 0.14em;
	text-align: center; padding: var(--sasc-space-m);
}

@media (max-width: 860px) {
	.sasc-one { grid-template-columns: 1fr; gap: var(--sasc-space-l); }
	.sasc-one:nth-child(even) .sasc-one__fig { order: 0; }
	.sasc-one__fig { max-width: 420px; }
	.sasc-one__name { font-size: var(--sasc-step-2); }
	.sasc-one__desc { font-size: var(--sasc-step-0); }
}

/* --------------------------------------------------------------------------
   11. Development status / milestones
   -------------------------------------------------------------------------- */
.sasc-milestones { list-style: none; margin: 0; padding: 0; max-width: none; border-top: 1px solid var(--sasc-rule); }
.sasc-milestone {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--sasc-space-m);
	align-items: baseline;
	padding: var(--sasc-space-m) 0;
	border-bottom: 1px solid var(--sasc-rule-soft);
	margin: 0;
}
.sasc-milestone__num { font: 400 var(--sasc-step--1)/1.5 var(--sasc-font-mono); letter-spacing: 0.14em; color: var(--sasc-faint); }
.sasc-milestone__name { font-size: var(--sasc-step-1); font-family: var(--sasc-font-display); margin: 0 0 0.2em; }
.sasc-milestone__note { color: var(--sasc-muted); font-size: var(--sasc-step--1); margin: 0; max-width: 62ch; }
.sasc-milestone__state { flex: none; justify-self: end; }
@media (max-width: 680px) {
	.sasc-milestone { grid-template-columns: auto minmax(0, 1fr); }
	.sasc-milestone__state { grid-column: 2; justify-self: start; margin-top: var(--sasc-space-2xs); }
}

/* --------------------------------------------------------------------------
   12. Mint (pre-launch scaffold — no transaction path exists)
   -------------------------------------------------------------------------- */
.sasc-mint {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}
@media (max-width: 900px) { .sasc-mint { grid-template-columns: 1fr; } }

.sasc-mintpanel {
	background: var(--sasc-surface);
	border: 1px solid var(--sasc-rule);
	border-radius: var(--sasc-radius-lg);
	padding: var(--sasc-space-l);
	position: relative;
	overflow: hidden;
}
.sasc-mintpanel__head {
	display: flex; flex-wrap: wrap; gap: var(--sasc-space-s);
	align-items: center; justify-content: space-between;
	padding-bottom: var(--sasc-space-m);
	border-bottom: 1px solid var(--sasc-rule-soft);
	margin-bottom: var(--sasc-space-m);
}
.sasc-mintpanel__title { font-size: var(--sasc-step-1); margin: 0; }

/* Quantity stepper — present, wired to nothing, and explicitly disabled */
.sasc-qty { display: flex; align-items: stretch; gap: 0; width: fit-content; }
.sasc-qty__btn {
	width: 3rem; display: grid; place-items: center;
	background: transparent; color: var(--sasc-faint);
	border: 1px solid var(--sasc-rule-soft);
	font: 400 1.2rem/1 var(--sasc-font-mono); cursor: not-allowed;
}
.sasc-qty__val {
	width: 4.5rem; text-align: center;
	background: var(--sasc-bg-deep); color: var(--sasc-faint);
	border: 1px solid var(--sasc-rule-soft); border-inline: 0;
	font: 400 var(--sasc-step-1)/1 var(--sasc-font-mono);
	padding: 0.7em 0;
}
.sasc-supplybar {
	height: 6px; background: var(--sasc-surface-2);
	border: 1px solid var(--sasc-rule-soft); border-radius: 99px;
	overflow: hidden; margin-top: var(--sasc-space-2xs);
}
.sasc-supplybar__fill { height: 100%; width: 0%; background: var(--sasc-accent); }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.sasc-footer {
	border-top: 1px solid var(--sasc-rule);
	background: var(--sasc-bg-deep);
	padding-block: var(--sasc-space-2xl) var(--sasc-space-l);
	margin-top: var(--sasc-space-3xl);
}
.sasc-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--sasc-space-l);
	padding-bottom: var(--sasc-space-xl);
	border-bottom: 1px solid var(--sasc-rule-soft);
}
.sasc-footer__statement { color: var(--sasc-muted); max-width: 40ch; margin: var(--sasc-space-s) 0 var(--sasc-space-m); }
.sasc-footer__h {
	font: 400 var(--sasc-step--1)/1 var(--sasc-font-mono);
	text-transform: uppercase; letter-spacing: 0.16em;
	color: var(--sasc-accent); margin: 0 0 var(--sasc-space-s);
}
.sasc-footer__list { list-style: none; margin: 0; padding: 0; }
.sasc-footer__list li { margin-bottom: var(--sasc-space-2xs); }
.sasc-footer__list a { color: var(--sasc-text); text-decoration: none; font-size: var(--sasc-step-0); }
.sasc-footer__list a:hover { color: var(--sasc-accent); text-decoration: underline; text-underline-offset: 0.22em; }
.sasc-footer__pending { color: var(--sasc-faint); font-size: var(--sasc-step-0); }
.sasc-footer__bottom {
	display: flex; flex-wrap: wrap; gap: var(--sasc-space-s) var(--sasc-space-l);
	align-items: center; justify-content: space-between;
	padding-top: var(--sasc-space-m);
	font: 400 var(--sasc-step--1)/1.6 var(--sasc-font-mono);
	letter-spacing: 0.08em; color: var(--sasc-faint);
}
.sasc-footer__status { display: flex; flex-wrap: wrap; gap: var(--sasc-space-2xs); }

/* --------------------------------------------------------------------------
   14. Atmosphere

   The club is one continuous dark room, not a stack of black boxes. Two fixed
   layers behind everything: glow (drifting) and texture (static). Both are
   pure CSS - no raster files, no canvas - and both animate transform/opacity
   only, so they stay on the compositor and never repaint on scroll.

   Negative z-index on a body pseudo-element paints above the <html>
   background and below page content, which is why --sasc-bg moved to <html>.
   -------------------------------------------------------------------------- */
body::before { /* 1-2. radial lime + violet glow, 6. slow drift */
	content: ""; position: fixed; inset: -12%; z-index: -2; pointer-events: none;
	background:
		radial-gradient(circle at 20% 15%, rgba(200, 255, 56, 0.10), transparent 34%),
		radial-gradient(circle at 80% 35%, rgba(143, 92, 255, 0.10), transparent 38%),
		radial-gradient(circle at 52% 92%, rgba(69, 228, 255, 0.05), transparent 40%);
	animation: sasc-drift 38s ease-in-out infinite alternate;
}

body::after { /* 3. grain, 4. club-light structure, 5. edge vignette */
	content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
	background-image:
		repeating-linear-gradient(90deg, rgba(243, 235, 221, 0.022) 0 1px, transparent 1px 148px),
		radial-gradient(130% 105% at 50% 46%, transparent 48%, rgba(3, 4, 5, 0.88) 100%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
	background-size: auto, auto, 120px 120px;
	background-repeat: repeat;
	opacity: 0.55;
}

@keyframes sasc-drift {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
}

/* --------------------------------------------------------------------------
   15. Section transitions

   No hard black-to-black cuts: a violet veil bleeds across each boundary so
   sections read as one room with the lights changing.
   -------------------------------------------------------------------------- */
.sasc-section--ruled::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0;
	height: 240px; pointer-events: none; z-index: 0;
	background: linear-gradient(to bottom, transparent, rgba(143, 92, 255, 0.05), transparent);
}
.sasc-section > .sasc-shell { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   16. Reveal system

   One IntersectionObserver in experience.js drives every opt-in element.

   The hidden state is scoped to html.sasc-motion, a class set by a tiny inline
   head script. That ordering matters: without JS, or if experience.js fails to
   load, the class is never added and nothing is ever hidden - content can
   never be trapped at opacity 0 by a broken script.
   -------------------------------------------------------------------------- */
html.sasc-motion [data-sasc-reveal],
html.sasc-motion .sasc-reveal {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition:
		opacity 760ms var(--sasc-ease),
		transform 760ms var(--sasc-ease);
	transition-delay: var(--reveal-delay, 0ms);
}
html.sasc-motion [data-sasc-reveal="fade"]        { transform: none; }
html.sasc-motion [data-sasc-reveal="scale"]       { transform: scale(0.965); }
html.sasc-motion [data-sasc-reveal="slide-left"]  { transform: translate3d(-30px, 0, 0); }
html.sasc-motion [data-sasc-reveal="slide-right"] { transform: translate3d(30px, 0, 0); }

html.sasc-motion [data-sasc-reveal].is-in,
html.sasc-motion .sasc-reveal.is-in { opacity: 1; transform: none; }

/* Already on screen at load: shown outright, with no transition to sit through. */
html.sasc-motion [data-sasc-reveal].is-instant,
html.sasc-motion .sasc-reveal.is-instant { transition: none; transition-delay: 0ms; }

/* --------------------------------------------------------------------------
   17. NFT showcase (homepage editorial row)

   Deliberately not the explorer: seven members, hand-offset, tactile. Reuses
   template-parts/card-token.php markup unchanged so the explorer contract and
   the showcase never drift apart.
   -------------------------------------------------------------------------- */
.sasc-showcase { position: relative; margin-top: var(--sasc-space-l); }

.sasc-showcase__track {
	list-style: none; margin: 0; max-width: none;
	padding: 2.75rem 0 3.25rem;
	display: flex;
	align-items: center;
	gap: clamp(0.55rem, 1.1vw, 1rem);
}

/* The <li> carries the editorial offset; the <a> inside carries the hover
   lift. Two elements, so the two transforms never overwrite each other. */
.sasc-showcase__track > .sasc-token {
	flex: 1 1 0;
	min-width: 0;                       /* lets flex items shrink: no overflow */
	margin: 0;
	transform: translateY(var(--sasc-offset, 0px));
}
.sasc-showcase__track > .sasc-token:nth-child(7n + 1) { --sasc-offset: 20px; }
.sasc-showcase__track > .sasc-token:nth-child(7n + 2) { --sasc-offset: -10px; }
.sasc-showcase__track > .sasc-token:nth-child(7n + 3) { --sasc-offset: 30px; }
.sasc-showcase__track > .sasc-token:nth-child(7n + 4) { --sasc-offset: -4px; }
.sasc-showcase__track > .sasc-token:nth-child(7n + 5) { --sasc-offset: 24px; }
.sasc-showcase__track > .sasc-token:nth-child(7n + 6) { --sasc-offset: -14px; }
.sasc-showcase__track > .sasc-token:nth-child(7n + 7) { --sasc-offset: 12px; }

.sasc-showcase__track .sasc-token__btn {
	transition:
		transform 260ms var(--sasc-ease),
		border-color 260ms var(--sasc-ease),
		box-shadow 260ms var(--sasc-ease);
}
.sasc-showcase__track .sasc-token__fig { overflow: hidden; }
/* Desktop rail cards are ~180px: stack position over tier on every card so
   the row reads evenly, rather than wrapping only where the tier is long. */
@media (min-width: 901px) {
	.sasc-showcase__track .sasc-token__meta { flex-direction: column; align-items: flex-start; }
}
.sasc-showcase__track .sasc-token__fig img {
	transition: transform 300ms var(--sasc-ease);
}
.sasc-showcase__track .sasc-token__btn:hover,
.sasc-showcase__track .sasc-token__btn:focus-visible {
	transform: translateY(-6px);
	border-color: color-mix(in srgb, var(--sasc-acid) 45%, transparent);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--sasc-acid) 22%, transparent),
		0 14px 46px -18px color-mix(in srgb, var(--sasc-violet) 55%, transparent);
}
.sasc-showcase__track .sasc-token__btn:hover .sasc-token__fig img,
.sasc-showcase__track .sasc-token__btn:focus-visible .sasc-token__fig img {
	transform: scale(1.035);
}
.sasc-showcase__track .sasc-token__btn:hover .sasc-token__id,
.sasc-showcase__track .sasc-token__btn:focus-visible .sasc-token__id {
	color: var(--sasc-acid);
}

/* Mobile: a real swipe rail. overflow-x on the track means the horizontal
   scroll belongs to this element, never to the page. */
@media (max-width: 900px) {
	.sasc-showcase__track {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		padding: 1.5rem 0 2rem;
		scrollbar-width: thin;
	}
	.sasc-showcase__track > .sasc-token {
		flex: 0 0 56vw;
		max-width: 260px;
		scroll-snap-align: center;
		--sasc-offset: 0px;
	}
}

.sasc-showcase__hint {
	display: none;
	font: 400 var(--sasc-step--1)/1.5 var(--sasc-font-mono);
	text-transform: uppercase; letter-spacing: 0.12em;
	color: var(--sasc-faint);
	margin: 0;
}
@media (max-width: 900px) { .sasc-showcase__hint { display: block; } }

/* --------------------------------------------------------------------------
   18. Neon panels

   Dark translucent glass with a hairline edge. Glow is a hover state only:
   a resting box-shadow on every card would mean dozens of large blur regions
   composited on every frame.
   -------------------------------------------------------------------------- */
.sasc-card,
.sasc-callout,
.sasc-toolbar,
.sasc-mintpanel {
	background: rgba(15, 17, 21, 0.78);
	border-color: rgba(255, 255, 255, 0.08);
	/* No backdrop-filter here on purpose. These components repeat a dozen-plus
	   times per page and each blurred backdrop is its own compositing layer and
	   backdrop read - measured as the bulk of a render-delay regression. The
	   translucent fill gives the same glass read over a near-flat backdrop.
	   .sasc-header keeps its blur: one element, and the nav is the point. */
}
/* Restore the notice edge the hairline reset above would otherwise erase. */
.sasc-callout { border-left-color: var(--sasc-accent); }
.sasc-callout--vip { border-left-color: var(--sasc-lilac); }

.sasc-card {
	transition:
		border-color var(--sasc-dur) var(--sasc-ease),
		box-shadow var(--sasc-dur) var(--sasc-ease),
		transform var(--sasc-dur) var(--sasc-ease);
}
.sasc-card:hover {
	background: rgba(23, 27, 33, 0.86);
	border-color: rgba(200, 255, 56, 0.45);
	box-shadow:
		0 0 0 1px rgba(200, 255, 56, 0.16),
		0 12px 50px -22px rgba(143, 92, 255, 0.55);
}
.sasc-card__num { color: var(--sasc-acid); opacity: 0.75; }

/* A single thin acid line above each section head, the structural accent. */
.sasc-sechead { border-top-color: var(--sasc-rule); }
.sasc-sechead__num { color: var(--sasc-acid); }

/* --------------------------------------------------------------------------
   19. Navigation glass
   -------------------------------------------------------------------------- */
/* At rest the bar is genuinely absent: the blur has to be cancelled too, not
   just the background. The base rule in section 6 sets blur(14px), so leaving
   it alone would blur the hero behind an apparently transparent header and pay
   for a compositing layer the whole time. Glass is switched as a set.
   backdrop-filter is deliberately not transitioned - animating a blur is
   expensive and inconsistently supported; background and border carry the
   change and read as one movement. */
.sasc-header {
	background: transparent;
	border-bottom: 1px solid transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition:
		background var(--sasc-dur) var(--sasc-ease),
		border-color var(--sasc-dur) var(--sasc-ease);
}
html.is-scrolled .sasc-header {
	background: var(--sasc-glass);
	backdrop-filter: blur(10px) saturate(1.1);
	-webkit-backdrop-filter: blur(10px) saturate(1.1);
	border-bottom-color: var(--sasc-rule);
}
/* The mobile panel is opaque, so it never needs the backdrop read. */
.sasc-nav[data-open="true"] { background: var(--sasc-black-soft); }
/* --------------------------------------------------------------------------
   20. Environmental typography

   Oversized outline words behind a section: lighting, not copy. aria-hidden
   on a real element rather than CSS content, because generated content is
   announced by some screen readers. Heading hierarchy is untouched.
   -------------------------------------------------------------------------- */
.sasc-section--env { overflow: clip; }

.sasc-ghost {
	position: absolute;
	left: 50%;
	top: 0.1em;
	transform: translateX(-50%);
	z-index: 0;
	font: 400 clamp(4.5rem, 17vw, 15rem)/0.78 var(--sasc-font-display);
	text-transform: uppercase;
	letter-spacing: -0.035em;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px var(--sasc-cream);
	opacity: 0.055;
	pointer-events: none;
	user-select: none;
}
.sasc-ghost--acid  { -webkit-text-stroke-color: var(--sasc-acid);   opacity: 0.07; }
.sasc-ghost--danger { -webkit-text-stroke-color: var(--sasc-danger); opacity: 0.08; }
.sasc-ghost--bottom { top: auto; bottom: 0.1em; }

@media (max-width: 900px) {
	.sasc-ghost { font-size: clamp(3.5rem, 22vw, 7rem); opacity: 0.045; }
}

/* --------------------------------------------------------------------------
   21. The Unforgivables: red + violet

   A scoped token override: everything inside this container swaps its accent
   from acid to red, while the artwork and metadata underneath stay untouched.

   Every token in the chain has to be re-declared, not just --sasc-acid. A
   custom property whose value is itself a var() - here --sasc-accent and
   --sasc-neon, both declared as var(--sasc-acid) on :root - is substituted
   where it is DECLARED, so it computes to the acid value on :root and
   inherits down already resolved. Re-pointing --sasc-acid further down the
   tree cannot reach back into it. Rules that write var(--sasc-acid) directly,
   such as .sasc-sechead__num, do pick the override up, which is exactly the
   inconsistency this block exists to remove.
   -------------------------------------------------------------------------- */
.sasc-theme-danger {
	--sasc-acid: var(--sasc-danger-ink);
	--sasc-accent: var(--sasc-danger-ink);
	--sasc-neon: var(--sasc-danger-ink);
	--sasc-accent-dim: var(--sasc-oxblood);
	position: relative;
}
.sasc-theme-danger::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(70% 55% at 18% 10%, rgba(224, 69, 95, 0.09), transparent 62%),
		radial-gradient(60% 50% at 88% 78%, rgba(143, 92, 255, 0.09), transparent 60%);
}
.sasc-theme-danger .sasc-card:hover {
	border-color: rgba(255, 92, 114, 0.45);
	box-shadow:
		0 0 0 1px rgba(255, 92, 114, 0.16),
		0 12px 50px -22px rgba(143, 92, 255, 0.5);
}
/* Red halo on the one-of-one portraits. */
.sasc-theme-danger .sasc-one__fig img {
	border-color: color-mix(in srgb, var(--sasc-danger) 40%, transparent);
	box-shadow: 0 0 60px -18px rgba(224, 69, 95, 0.55);
}
.sasc-theme-danger .sasc-one__num { color: var(--sasc-danger-ink); }

/* --------------------------------------------------------------------------
   22. Status indicators

   The honesty layer gets a heartbeat, never a promotion. Only opacity
   animates, and only on the dot - the label text and every disabled control
   keep their inert styling exactly as before.
   -------------------------------------------------------------------------- */
@keyframes sasc-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.25; }
}
.sasc-pill--blocked .sasc-pill__dot,
.sasc-pill--pending .sasc-pill__dot {
	animation: sasc-blink 2.6s ease-in-out infinite;
}
.sasc-pill { background: rgba(15, 17, 21, 0.7); }

/* --------------------------------------------------------------------------
   23. Reduced motion

   Mandatory. Everything decorative stops; nothing becomes unreadable. The
   inline head script also skips adding html.sasc-motion under this setting,
   so reveal elements are never hidden in the first place.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	body::before { animation: none; transform: none; }
	.sasc-hero__aurora { animation: none; opacity: 0.45; }
	.sasc-heroart__fig { animation: none; }
	.sasc-heroart__slot--lead,
	.sasc-heroart__slot--back-a,
	.sasc-heroart__slot--back-b { transform: none; }
	.sasc-pill--blocked .sasc-pill__dot,
	.sasc-pill--pending .sasc-pill__dot { animation: none; }
	html.sasc-motion [data-sasc-reveal],
	html.sasc-motion .sasc-reveal,
	[data-sasc-reveal],
	.sasc-reveal { opacity: 1 !important; transform: none !important; }
	.sasc-showcase__track { scroll-snap-type: none; }
}

/* --------------------------------------------------------------------------
   24. Print
   -------------------------------------------------------------------------- */
@media print {
	html.sasc-motion [data-sasc-reveal], html.sasc-motion .sasc-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.sasc-header, .sasc-footer, .sasc-toolbar, .sasc-loadmore, .sasc-ghost { display: none; }
	body::before, body::after, .sasc-hero__aurora { display: none; }
	body { background: #fff; color: #000; }
}


/* --------------------------------------------------------------------------
   Site audit 2026-10-01 additions
   -------------------------------------------------------------------------- */

/* Persistent pre-launch status. Lives inside the sticky header so it can
   never overlap it, and the mobile nav still drops from the header's base. */
.sasc-statusbar {
	margin: 0;
	min-height: var(--sasc-status-h);
	display: flex; align-items: center; justify-content: center;
	padding: 0.35rem var(--sasc-gutter);
	font: 500 max(0.75rem, 12px)/1.3 var(--sasc-font-mono);
	letter-spacing: 0.16em; text-transform: uppercase; text-align: center;
	color: var(--sasc-text);
	background: color-mix(in srgb, var(--sasc-oxblood) 70%, var(--sasc-bg));
	border-bottom: 1px solid color-mix(in srgb, var(--sasc-danger) 35%, transparent);
}
@media (max-width: 600px) { .sasc-statusbar { letter-spacing: 0.05em; } }

.sasc-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Explorer controls */
.sasc-explorer__form { margin-bottom: var(--sasc-space-l); }
.sasc-explorer__form .sasc-toolbar {
	grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(150px, 1fr)) auto;
	margin-bottom: var(--sasc-space-s);
	padding-inline: var(--sasc-space-s);
	border: 1px solid var(--sasc-rule);
	border-radius: var(--sasc-radius);
}
@media (max-width: 1100px) {
	.sasc-explorer__form .sasc-toolbar { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
	.sasc-field--search { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
	.sasc-explorer__form .sasc-toolbar { grid-template-columns: 1fr; }
}
.sasc-input, .sasc-select { min-height: 44px; }
.sasc-field--check {
	display: flex; align-items: center; gap: 0.6rem;
	min-height: 44px; white-space: nowrap;
	font: 400 var(--sasc-step--1)/1.2 var(--sasc-font-mono);
	text-transform: uppercase; letter-spacing: 0.12em; color: var(--sasc-text);
}
.sasc-field--check label { cursor: pointer; padding-block: 0.6rem; }
.sasc-check {
	width: 22px; height: 22px; margin: 0; flex: none;
	accent-color: var(--sasc-lilac); cursor: pointer;
}

.sasc-morefilters {
	border: 1px solid var(--sasc-rule-soft);
	border-radius: var(--sasc-radius);
	margin-bottom: var(--sasc-space-s);
}
.sasc-morefilters > summary {
	cursor: pointer; list-style: none;
	display: flex; align-items: center; gap: 0.6rem;
	min-height: 44px; padding: 0.5rem var(--sasc-space-s);
	font: 400 var(--sasc-step--1)/1.2 var(--sasc-font-mono);
	text-transform: uppercase; letter-spacing: 0.14em; color: var(--sasc-muted);
}
.sasc-morefilters > summary::-webkit-details-marker { display: none; }
.sasc-morefilters > summary::before {
	content: ""; width: 0.5em; height: 0.5em; flex: none;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg); transition: transform var(--sasc-dur) var(--sasc-ease);
}
.sasc-morefilters[open] > summary::before { transform: rotate(45deg); }
.sasc-morefilters > summary:hover { color: var(--sasc-text); }
.sasc-morefilters__n { color: var(--sasc-accent); }
.sasc-morefilters .sasc-filters { padding: 0 var(--sasc-space-s) var(--sasc-space-s); margin: 0; }

.sasc-resultbar { margin: var(--sasc-space-s) 0 0; }
.sasc-resultbar__count { margin: 0; }
.sasc-resultbar__actions { display: flex; align-items: center; gap: var(--sasc-space-s); }
.sasc-linkbtn { display: inline-flex; align-items: center; min-height: 44px; }
.sasc-linkbtn[hidden] { display: none; }

.sasc-token__id abbr { text-decoration: none; cursor: help; }
.sasc-trait__v { margin: 0; }
.sasc-dialog__close { width: 44px; height: 44px; }
.sasc-dialog[open] { overscroll-behavior: contain; }

/* Touch targets: at least 44px tall for every control (audit 2026-10-01). */
.sasc-btn { min-height: 44px; }
.sasc-navtoggle { min-height: 44px; }
.sasc-brand { min-height: 44px; }
.sasc-check { width: 24px; height: 24px; }

/* Smallest readable label size: 12px. */
.sasc-nav__soon,
.sasc-heroart__id,
.sasc-token__id,
.sasc-token__tier,
.sasc-token__flag { font-size: max(0.75rem, 12px); }
@media (min-width: 901px) {
	/* Full-height hit area in the 68px bar without changing the type. */
	.sasc-nav__link { display: inline-flex; align-items: center; min-height: 44px; }
	.sasc-nav__link::after { bottom: 9px; }
}

.sasc-callout .sasc-note { color: var(--sasc-muted); font-size: var(--sasc-step--1); }
.sasc-callout .sasc-note a { color: var(--sasc-accent); }

/* The global paragraph measure must not apply to the full-bleed status bar. */
.sasc-statusbar { max-width: none; width: 100%; }

/* Explorer hidden states (live audit 2026-10-02). These components set their
   own display, which beats the browser's [hidden] { display: none }, so an
   exhausted "Load more", an empty grid or a cleared reset link kept rendering
   (and stayed focusable). Scoped per component rather than a blanket
   [hidden] rule, so hidden="until-found" elsewhere keeps its behaviour. */
.sasc-loadmore[hidden],
.sasc-tokengrid[hidden],
.sasc-empty[hidden],
.sasc-linkbtn[hidden] { display: none; }

/* Explorer toolbar: search gets its own row, controls share the next one with
   enough width that default labels ("Position, ascending", "Any personality")
   are never clipped (live audit 2026-10-02). */
.sasc-explorer__form .sasc-toolbar { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sasc-explorer__form .sasc-field--search { grid-column: 1 / -1; }
@media (max-width: 520px) {
	.sasc-explorer__form .sasc-toolbar { grid-template-columns: 1fr; }
}

/* Interior page rhythm (live audit 2026-10-02). The page header has no bottom
   padding and the following section none on top, so intro callouts sat flush
   against the lede. One consistent gap instead. */
.sasc-pagehead + .sasc-section { padding-top: var(--sasc-space-l); }

/* Long prose pages: reading column stays at the measure; the "On this page"
   list uses the otherwise empty right column on wide screens. */
.sasc-docgrid { display: grid; gap: var(--sasc-space-l); }
.sasc-toc {
	border: 1px solid var(--sasc-rule);
	border-radius: var(--sasc-radius);
	padding: var(--sasc-space-s) var(--sasc-space-m);
	background: rgba(15, 17, 21, 0.78);
}
.sasc-toc__title {
	margin: 0 0 var(--sasc-space-2xs);
	font: 400 var(--sasc-step--1)/1.3 var(--sasc-font-mono);
	text-transform: uppercase; letter-spacing: 0.14em; color: var(--sasc-muted);
}
.sasc-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.sasc-toc__list li { counter-increment: toc; }
.sasc-toc__list a {
	display: flex; gap: 0.75rem; align-items: baseline;
	min-height: 44px; padding-block: 0.6rem;
	color: var(--sasc-text); text-decoration: none;
	border-top: 1px solid var(--sasc-rule-soft);
}
.sasc-toc__list li:first-child a { border-top: 0; }
.sasc-toc__list a::before {
	content: counter(toc, decimal-leading-zero);
	font: 400 max(0.75rem, 12px)/1 var(--sasc-font-mono); color: var(--sasc-accent);
}
.sasc-toc__list a:hover { color: var(--sasc-accent); }
@media (min-width: 1100px) {
	.sasc-docgrid {
		grid-template-columns: minmax(0, var(--sasc-measure)) minmax(240px, 300px);
		justify-content: space-between;
		align-items: start;
		column-gap: var(--sasc-space-xl);
	}
	.sasc-docgrid > .sasc-toc {
		grid-column: 2; grid-row: 1;
		position: sticky;
		top: calc(var(--sasc-header-h) + var(--sasc-status-h) + var(--sasc-space-m));
		max-height: calc(100vh - var(--sasc-header-h) - var(--sasc-status-h) - 2 * var(--sasc-space-m));
		overflow-y: auto;
	}
	.sasc-docgrid > .sasc-prose,
	.sasc-docgrid > .sasc-faq { grid-column: 1; grid-row: 1; }
}

/* FAQ: grouped answers beside the shared "On this page" list. Each question
   carries its own anchor; the "#" link shows on hover or keyboard focus. */
.sasc-faq { min-width: 0; }
.sasc-faq__group { margin-bottom: var(--sasc-space-xl); }
.sasc-faq__group .sasc-sechead { margin-bottom: var(--sasc-space-m); }
.sasc-faq__q { font-size: var(--sasc-step-1); margin-top: var(--sasc-space-l); scroll-margin-top: var(--sasc-space-m); }
.sasc-faq__a { color: var(--sasc-muted); }
.sasc-faq__anchor {
	margin-left: 0.35em;
	font: 400 0.8em/1 var(--sasc-font-mono);
	color: var(--sasc-faint); text-decoration: none;
	opacity: 0; transition: opacity var(--sasc-dur) var(--sasc-ease);
}
.sasc-faq__q:hover .sasc-faq__anchor,
.sasc-faq__anchor:focus-visible,
.sasc-faq__q:target .sasc-faq__anchor { opacity: 1; color: var(--sasc-accent); }
@media (hover: none) { .sasc-faq__anchor { opacity: 1; } }

/* 404: send a lost visitor into the explorer instead of a dead end. */
.sasc-lost { margin-top: var(--sasc-space-xl); max-width: 36rem; }
.sasc-lost__row { display: flex; gap: var(--sasc-space-2xs); }
.sasc-lost__row .sasc-input { flex: 1 1 auto; min-width: 0; }

/* Breadcrumb: small, quiet, matches the BreadcrumbList schema. */
.sasc-crumbs { margin: 0 0 var(--sasc-space-s); }
.sasc-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; max-width: none;
	font: 400 max(0.75rem, 12px)/1.4 var(--sasc-font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--sasc-muted); }
.sasc-crumbs li { margin: 0; }
.sasc-crumbs li + li::before { content: "/"; margin-right: 0.5em; color: var(--sasc-faint); }
.sasc-crumbs a { color: var(--sasc-muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
.sasc-crumbs a:hover, .sasc-crumbs a:focus-visible { color: var(--sasc-accent); }

/* Top bar links to the full status; footer status is one line. */
.sasc-statusbar a { color: inherit; text-decoration: none; }
.sasc-statusbar a:hover, .sasc-statusbar a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
.sasc-footer__statusline { margin: 0; color: var(--sasc-muted); font-size: var(--sasc-step--1); max-width: 34ch; }
.sasc-footer__statusline a { color: var(--sasc-accent); white-space: nowrap; }

/* Official channels: one compact block (verified links, gated signup, scam note). */
.sasc-channels { display: grid; gap: var(--sasc-space-m); max-width: 46rem; }
.sasc-channels__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sasc-space-2xs); max-width: none; }
.sasc-channels__links li { margin: 0; }
.sasc-channels__scam { margin: 0; color: var(--sasc-muted); border-left: 2px solid var(--sasc-danger); padding-left: var(--sasc-space-s); }
.sasc-channels__scam strong { color: var(--sasc-text); }
.sasc-channels__scam a { color: var(--sasc-accent); white-space: nowrap; }
.sasc-signup { border: 1px solid var(--sasc-rule); border-radius: var(--sasc-radius); padding: var(--sasc-space-m); background: rgba(15, 17, 21, 0.78); }
.sasc-signup__title { margin: 0 0 var(--sasc-space-2xs); font-size: var(--sasc-step-1); }
.sasc-signup__note, .sasc-signup__consent { color: var(--sasc-muted); font-size: var(--sasc-step--1); }
.sasc-signup__row { display: flex; gap: var(--sasc-space-2xs); flex-wrap: wrap; }
.sasc-signup__row .sasc-input { flex: 1 1 14rem; min-width: 0; }

/* Stat rail: value above label while the label stays the <dt> (read first). */
.sasc-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.sasc-stat .sasc-stat__v { margin: 0; }
.sasc-stat .sasc-stat__k { margin: 0.6em 0 0; }

/* Small "Candidate artwork" label on an image group, linking to the page's explanation. */
.sasc-artpill {
	display: inline-flex; align-items: center; min-height: 24px; padding: 0.2em 0.7em;
	font: 400 max(0.75rem, 12px)/1.2 var(--sasc-font-mono); text-transform: uppercase; letter-spacing: 0.12em;
	color: var(--sasc-muted); text-decoration: none;
	border: 1px solid var(--sasc-rule); border-radius: 999px;
}
.sasc-artpill:hover, .sasc-artpill:focus-visible { color: var(--sasc-accent); border-color: var(--sasc-accent); }