/* Attic Capital — design tokens + sitewide chrome (header/footer/nav). */

:root {
	/* Pristine white / near-black — high-contrast editorial minimalism, per feadship.nl. */
	--ac-bg: #ffffff;
	--ac-ink: #0a0a0a;
	--ac-brass: #b08d57;
	--ac-line: rgba(10, 10, 10, 0.12);

	--ac-font-display: 'Fraunces', Georgia, serif;
	--ac-font-label: 'Inter', -apple-system, sans-serif;

	--ac-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* power4.out approximation for CSS-only fallback */

	--ac-space: 1rem;
	/* Fixed header bar (padding + logo). Used so later sections can pin
	   below the frosted glass instead of sliding up into it. */
	--ac-header-pad-y: 0.5rem;
	--ac-header-logo: 81.6px;
	--ac-header-bar: calc(var(--ac-header-pad-y) + var(--ac-header-logo) + var(--ac-header-pad-y));
	--ac-header-clearance: calc(env(safe-area-inset-top, 0px) + var(--ac-header-bar));
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	background: var(--ac-bg);
	overflow-x: clip;
	overscroll-behavior-y: none;
}

body {
	margin: 0;
	background: var(--ac-bg);
	color: var(--ac-ink);
	font-family: var(--ac-font-label);
	-webkit-font-smoothing: antialiased;
	/* Never let the browser fake a bold/thin weight when the exact one
	   isn't available yet — show the closest real weight instead. */
	font-synthesis: none;
	overflow-x: clip;
	overscroll-behavior-x: none;
	overscroll-behavior-y: none;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

/* Zero border radius, hard or absent shadows only — never rounded-md style corners. */
button,
input,
textarea {
	border-radius: 0;
}

.ac-label {
	font-family: var(--ac-font-label);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.ac-display {
	font-family: var(--ac-font-display);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.01em;
}

/* Site header */

.ac-site-header {
	position: fixed;
	/* Starts below the iPhone notch/Dynamic Island + status bar strip
	   (env(safe-area-inset-top), only nonzero when viewport-fit=cover is
	   set — see the <meta name="viewport"> in header.php) instead of at
	   the very top of the physical screen. This is what actually keeps
	   that strip clear: the header's own background (whatever it is —
	   transparent, or the frosted .is-glass fill below) only ever paints
	   from this point down, so page content bleeding edge-to-edge behind
	   it stays genuinely visible through the notch/status bar area rather
	   than being covered by the header. The 0px fallback is for browsers
	   that don't support env() at all, where this is just equivalent to
	   top: 0. */
	top: env(safe-area-inset-top, 0px);
	left: 0;
	right: 0;
	z-index: 100;
	/* Transparent throughout, by request — reverted from a solid-white
	   default (which was added to stop body text colliding with the logo
	   at some scroll positions) because the fully transparent look was
	   preferred despite that trade-off. z-index + position:fixed still
	   keep the logo/menu circle themselves rendered on top of whatever's
	   scrolled underneath, regardless of background. */
	background: transparent;
	border-bottom: none;
	transition: background 0.6s var(--ac-ease-out);
}

/* Frosted-glass header — a thin, faintly sparkling pane rather than a solid
   bar: whatever scrolls underneath (image, video, body copy) stays visible
   but softly blurred through it, while the header's own content (logo, "A"
   circle) sits on top and stays perfectly sharp, since backdrop-filter only
   blurs what's behind the element, never the element's own children. Toggled
   once the first large media has fully scrolled past — not from page load,
   so the header still reads as fully transparent over the hero/darken
   sequence. Home: assets/js/home-scroll.js after the Attic Feature video.
   Category / market pages and Attic Print: on from load (header.php).
   Other title+reveal pages: assets/js/page-scroll.js after .ac-page-reveal.
   Showcase posts: assets/js/showcase-scroll.js after .ac-showcase-reveal. */
.ac-site-header.is-glass {
	/* Vertical fade instead of a flat tint — the bottom edge (closest to
	   the content passing underneath) is the softer/more transparent end:
	   25% more transparent than the top (0.027 * 0.75 = 0.020). Tint and
	   blur both eased back so type and images behind the bar read a
	   little more clearly. */
	background: linear-gradient(to top, rgba(255, 255, 255, 0.020) 0%, rgba(255, 255, 255, 0.027) 100%);
	backdrop-filter: blur(5px) saturate(160%);
	-webkit-backdrop-filter: blur(5px) saturate(160%);
}

/* Home page only — the header's own top-left logo stays hidden ("white
   out") for as long as the much larger centered home logo is anywhere on
   screen, revealing only once the "Attic Feature" video is about half
   scrolled into view (see home-scroll.js, which toggles .is-brand-visible
   on .ac-site-header). The "A" menu circle is deliberately not included —
   navigation stays reachable the whole time.

   Hidden is the CSS default here (body.ac-home, see the ac_body_class_home
   filter in functions.php), not something JS applies after the fact: JS
   only ever adds .is-brand-visible to reveal it, never a class to hide it.
   home-scroll.js is enqueued in the footer and so only runs after first
   paint — if hidden depended on a JS-added class instead, the logo would
   flash briefly visible on every load before JS caught up, worse on
   mobile's slower execution. Every other page never has body.ac-home at
   all, so the logo there is just visible, full stop, no JS involved. */
body.ac-home .ac-site-header__logo {
	opacity: 0;
	pointer-events: none;
	/* 1.05s = 0.7s * 1.5 — a further 50% slower/more gradual reappear fade-in. */
	transition: opacity 1.05s var(--ac-ease-out);
}

body.ac-home .ac-site-header.is-brand-visible .ac-site-header__logo {
	opacity: 1;
	pointer-events: auto;
}

.ac-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Vertical padding cut further (0.9rem → 0.5rem) — the header's height
	   is also the frosted-glass strip's height (.is-glass in base.css), so
	   a shorter bar means less of the page reads as blurred behind it. */
	padding: 0.5rem 3rem;
}

.ac-site-header__logo {
	display: flex;
	align-items: center;
}

.ac-site-header__logo img {
	/* Width follows the logo's own aspect ratio. +20% over the previous 68px. */
	height: 81.6px;
	width: auto;
	/* Flips black artwork to white when the header is scrolled over a dark
	   photo — invert() on solid black produces solid white, and the
	   transparent background is untouched (alpha isn't affected by
	   filters). Toggled via .is-on-dark, set by ScrollTrigger in
	   assets/js/showcase-scroll.js while the reveal image is behind the
	   fixed header. Transition uses the brand's approved easing, not a
	   default CSS ease. */
	transition: filter 0.4s var(--ac-ease-out);
}

.ac-site-header.is-on-dark .ac-site-header__logo img,
.ac-site-header.is-on-dark .ac-menu-toggle__mark {
	filter: invert(1);
}

/* Menu trigger — no circle/border anymore, just the "A" mark itself,
   sized in CSS/JS to whatever it needs rather than fit inside a fixed
   footprint. No open/close behavior wired up yet (see header.php). */
.ac-menu-toggle {
	flex-shrink: 0;
	background: transparent;
	border: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
}

.ac-menu-toggle__line {
	width: 22px;
	border-top: 1px dashed var(--ac-ink);
	transition: border-color 0.4s var(--ac-ease-out);
}

.ac-site-header.is-on-dark .ac-menu-toggle__line {
	border-top-color: var(--ac-bg);
}

.ac-menu-toggle__mark {
	/* 66.096px = 73.44px * 0.9 — 10% smaller than the previous mark. */
	height: 66.096px;
	width: auto;
	max-width: none;
}

/* Custom "A" cursor over click/drag surfaces (galleries, coin plates).
   OS hand is hidden; the mark is a clone of the top-right menu A, dim at
   rest, dark on press, opacity waved in JS from travel distance. */
html.ac-has-drag-cursor .ac-home-gallery,
html.ac-has-drag-cursor .ac-showcase-gallery,
html.ac-has-drag-cursor .ac-coin-index__hit {
	cursor: none;
}

html.ac-drag-cursor-on,
html.ac-drag-cursor-on * {
	cursor: none !important;
}

html.ac-drag-cursor-on .ac-coin-index__explore,
html.ac-drag-cursor-on .ac-coin-index__explore * {
	cursor: pointer !important;
}

.ac-drag-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	pointer-events: none;
	visibility: hidden;
}

.ac-drag-cursor.is-visible {
	visibility: visible;
}

.ac-drag-cursor__mark {
	display: block;
	height: 66.096px;
	width: auto;
	max-width: none;
	/* Invert to white over dark photos/video (.is-on-dark, set in
	   drag-cursor.js from the pixel under the pointer). Same filter as
	   the header mark; opacity stays high there so the A reads almost
	   white, not a gray blend. */
	transition: filter 0.25s var(--ac-ease-out);
}

.ac-drag-cursor__mark--letter {
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: 4.13rem;
	line-height: 1;
	color: var(--ac-ink);
	height: auto;
}

.ac-drag-cursor.is-on-dark .ac-drag-cursor__mark {
	filter: invert(1);
}

/* Menu panel — pops out from beneath the "A" circle when it's clicked
   (assets/js/site-menu.js toggles .is-open). Fixed + high z-index (99, one
   below the header's 100) so it sits above whatever's scrolled underneath
   while still rendering behind the header's own logo/"A" circle, which
   stay untouched on top. Right edge aligns with the circle's own right
   edge (both inherit the header's 3rem horizontal padding).

   Starts at top:0 (not below the header) with a tall padding-top instead,
   so its own frosted-glass background — the same tint/blur as
   .ac-site-header.is-glass — extends the header's glass effect down the
   full height of the panel, filling the screen from the very top down to
   the bottom of the last menu item ("About"). This is independent of
   whether the header itself is currently showing that effect (e.g. before
   the home page's video has been scrolled past) — opening the menu always
   gets the glass treatment. The link color itself still swaps dark/light
   over dark media (.is-on-dark below), same as the header logo/menu icon. */
.ac-menu-panel {
	position: fixed;
	top: 0;
	right: 3rem;
	z-index: 99;
	background: linear-gradient(to top, rgba(255, 255, 255, 0.061) 0%, rgba(255, 255, 255, 0.049) 100%);
	backdrop-filter: blur(7px) saturate(160%);
	-webkit-backdrop-filter: blur(7px) saturate(160%);
	min-width: 240px;
	padding: 9.5rem 2.5rem 2.5rem;
	text-align: right;
	opacity: 0;
	transform: translateY(-12px);
	pointer-events: none;
	transition: opacity 0.4s var(--ac-ease-out), transform 0.4s var(--ac-ease-out);
}

.ac-menu-panel.is-open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* On mobile the glass fill itself spans the full screen width, edge to
   edge — no left/right margins — rather than staying boxed to the panel's
   own (right-aligned, min-width:240px) content width. The menu links stay
   right-aligned exactly as before; only the background/blur extends. */
@media (max-width: 600px) {
	.ac-menu-panel {
		left: 0;
		right: 0;
	}
}

.ac-menu-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Extra breathing room before Creators Podcast, separating the four
   category pages from Creators Podcast, Attic Print, and About — a
   deliberate gap, not a rule/divider line. */
.ac-menu-panel__list .ac-menu-break {
	/* Total space above this item = the list's 1.5rem flex gap + this
	   margin (3rem) = 4.5rem. */
	margin-top: 3rem;
}

.ac-menu-panel__list a {
	/* Matches the footer nav's typographic treatment (.ac-nav-list a below)
	   — tracked-out uppercase label sans, not the serif display face —
	   just carried at a larger size for this panel. */
	font-family: var(--ac-font-label);
	font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--ac-ink);
	transition: opacity 0.3s var(--ac-ease-out), color 0.4s var(--ac-ease-out);
}

.ac-menu-panel__list a:hover {
	opacity: 0.55;
}

/* Panel has no background of its own to guarantee contrast against, so when
   it's scrolled over dark media (a showcase reveal photo, the home page
   video) the links themselves go light instead — same trigger that already
   inverts the header logo/menu icon to white in that situation. */
.ac-menu-panel.is-on-dark .ac-menu-panel__list a {
	color: var(--ac-bg);
}

.ac-nav-list {
	display: flex;
	gap: 2.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ac-nav-list a {
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Default content wrapper for standard (non-showcase) templates. */

.ac-site-content {
	padding-top: 6rem;
	min-height: 60vh;
}

/* Standard WordPress Pages (page.php) — pinned title darken then lighten,
   matching the home page center logo sequence (.ac-home-pin/.ac-home-logo
   below, driven there by home-scroll.js; here by assets/js/page-scroll.js):
   the title is barely visible at page load, sits sticky (.ac-page-hero)
   while the user scrolls through .ac-page-pin's extra height, darkens to
   fully opaque, then lightens back to fully transparent in place. The pin
   then releases straight into .ac-page-reveal (or .ac-page-next), so the
   first image starts expanding once the words have gone. Typography matches
   .ac-showcase-hero__title on single-showcase.php and .ac-home-print__title
   on the home page (all Inter weight 100, same clamp scale), so every
   template reads as one system.

   Rest opacity lives in CSS (and an inline style on the first title)
   matching page-scroll.js MIN_OPACITY, so the words never paint full-ink
   before the footer script runs. JS then takes over on scroll. margin-top
   cancels .ac-site-content's padding-top (6rem), same reasoning as
   .ac-home-pin below. Extra height comes from --ac-page-pin
   (page-scroll.js: 1520 darken + 1520 lighten, 5% tighter than the
   original 1600+1600). */
.ac-page-pin {
	position: relative;
	height: calc(100vh + var(--ac-page-pin, 3040px));
	height: calc(100svh + var(--ac-page-pin, 3040px));
	margin-top: -6rem;
}

/* Later title+image chapters on a page that already used one pin
   (Creators Podcast) — same pin fade, no negative margin or they
   overlap the section above. */
.ac-page-pin--chapter {
	margin-top: 0;
}

/* Attic Print issue lines — always stacked, including on the phone
   (chapter titles otherwise flow as one sentence under 600px). */
.ac-page-pin--issue .ac-page-hero__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
}

.ac-page-pin--issue .ac-page-hero__title-line {
	display: block;
	white-space: nowrap;
}

.ac-page-pin--issue .ac-page-hero__title-line + .ac-page-hero__title-line::before {
	content: none;
}

.ac-page-hero__vol {
	display: block;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(1.05rem, 2.2vw, 1.85rem);
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

@media (min-width: 601px) {
	.ac-page-pin--chapter .ac-page-hero__title {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

/* Stays sticky-pinned at top:0 for the section's whole scroll range, same
   as .ac-home-logo — only opacity changes (applied inline by
   page-scroll.js): dim at load, darken, then lighten. No transform exit.
   The image reveal below takes over as soon as the pin releases. */
.ac-page-hero {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 4rem 3rem;
}

.ac-page-hero__title {
	margin: 0;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(2.55rem, 7.65vw, 7.225rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--ac-ink);
	/* Rest state matches page-scroll.js MIN_OPACITY. Set here (not only in
	   JS) so the title never paints full-ink before the script runs. */
	opacity: 0.08;
}

/* About — two title lines occupy the same center. Each gets its own
   3040px light→dark→light (see --ac-page-pin in page-scroll.js when
   .ac-page-hero__title--follow is present). */
.ac-page-pin--stack {
	height: calc(100vh + var(--ac-page-pin, 6080px));
	height: calc(100svh + var(--ac-page-pin, 6080px));
}

.ac-page-pin--stack .ac-page-hero__title {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(42rem, 90%);
}

.ac-page-pin--stack .ac-page-hero__title--follow {
	opacity: 0;
	line-height: 1.2;
}

/* Mobile: one flowing sentence. Desktop: two centered lines. */
.ac-page-hero__title-line + .ac-page-hero__title-line::before {
	content: ' ';
}

@media (min-width: 601px) {
	.ac-page-pin--stack .ac-page-hero__title--follow {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: max-content;
		max-width: 92%;
		gap: 0.45em;
		line-height: 0.95;
	}

	.ac-page-hero__title-line {
		display: block;
		white-space: nowrap;
	}

	.ac-page-hero__title-line + .ac-page-hero__title-line::before {
		content: none;
	}
}

/* Per-page scroll-driven image reveal (e.g. page-rare-coins.php) — exact
   settings match .ac-showcase-reveal/__pin/__frame on single-showcase.php
   (the "Pagani" page): a normal (non-sticky) 142.5vh section that scrolls
   with the page like any other content, and a background-image frame (the
   photo itself never scales — only what's visible of it changes) clip-path'd
   down to a small centered box at rest, growing to the full frame as the
   section scrolls into view. The clip-path values themselves are applied
   inline by JS (assets/js/page-scroll.js), not here — same reasoning as the
   opacity rules above. */
.ac-page-reveal {
	position: relative;
	background: var(--ac-bg);
}

.ac-page-reveal__pin {
	position: relative;
	height: 142.5vh;
	width: 100%;
	overflow: hidden;
}

/* --ac-reveal-image/--ac-reveal-image-mobile are set inline per-page (see
   page-rare-coins.php, page-sports-cards.php) rather than a class, since
   each page has its own photo. The mobile custom property is optional — the
   fallback here means a page that only sets --ac-reveal-image (no mobile
   crop) just keeps using that same image on mobile too, same as before this
   existed. */
.ac-page-reveal__frame {
	width: 100%;
	height: 100%;
	background-color: var(--ac-ink);
	background-image: var(--ac-reveal-image);
	background-size: cover;
	background-position: center;
}

@media (min-width: 601px) {
	.ac-page-reveal__frame {
		background-image: var(--ac-reveal-image);
	}
}

@media (max-width: 600px) {
	.ac-page-reveal {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

	.ac-page-reveal__pin {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ac-page-reveal__frame {
		background-image: var(--ac-reveal-image-mobile, var(--ac-reveal-image));
		width: 100%;
		max-width: 920px;
		height: auto;
		aspect-ratio: 920 / 1350;
		max-height: 1350px;
	}
}

/* Creators Podcast chapters — 920×1350 mobile crop on every viewport. */
.ac-page-reveal--mobile {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

.ac-page-reveal--mobile .ac-page-reveal__pin {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ac-page-reveal--mobile .ac-page-reveal__frame {
	width: 100%;
	max-width: 920px;
	height: auto;
	aspect-ratio: 920 / 1350;
	max-height: 1350px;
	background-image: var(--ac-reveal-image-mobile, var(--ac-reveal-image));
}

/* Attic Print — 16:9 on desktop only. Phone keeps the 920×1350 portrait
   crop and --ac-reveal-image-mobile from the block above. */
@media (min-width: 601px) {
	.ac-page-reveal--desktop-wide .ac-page-reveal__pin {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.ac-page-reveal--desktop-wide .ac-page-reveal__frame {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

/* Attic Print — photo then type on the phone; cover left, type right
   from 601px. Pin is the photo's own box, not the 142.5vh reveal well. */
.ac-page-reveal--print .ac-page-reveal__pin {
	height: auto;
}

.ac-page-reveal--print .ac-page-reveal__split {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4.5rem;
}

@media (min-width: 601px) {
	.ac-page-reveal--print .ac-page-reveal__split {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 6rem;
		padding: 6rem 4.5rem;
		box-sizing: border-box;
	}

	.ac-page-reveal--print .ac-page-reveal__pin {
		flex: 1 1 58%;
		min-width: 0;
		width: auto;
	}

	.ac-page-reveal--print .ac-page-reveal__captions {
		flex: 1 1 32%;
		min-width: 0;
		width: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.ac-page-reveal--print .ac-page-reveal__captions .ac-page-reveal__caption {
		padding: 0;
		align-items: center;
		text-align: center;
		width: 100%;
	}

	.ac-page-reveal--print .ac-page-reveal__order {
		align-items: center;
	}
}

@media (max-width: 600px) {
	.ac-page-reveal--print .ac-page-reveal__split {
		padding: 0 0 4.5rem;
		box-sizing: border-box;
	}

	.ac-page-reveal--print .ac-page-reveal__pin {
		position: relative;
		top: auto;
		width: 100%;
		justify-content: center;
	}
}

.ac-page-reveal__stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.ac-page-reveal--captioned .ac-page-reveal__frame {
	background-color: var(--ac-bg);
	background-repeat: no-repeat;
}

.ac-page-reveal__hold {
	position: relative;
}

.ac-page-reveal__hold-spacer {
	display: none;
}

/* Phone: magazine stops 10% into the header; Spring / Vol 1 / Order stay
   under it and darken with the extra scroll, then the pin releases.
   Desktop keeps the image in normal flow. Attic Print (--print) stacks
   the full photo then type instead. */
@media (max-width: 600px) {
	.ac-page-reveal--captioned:not(.ac-page-reveal--print) .ac-page-reveal__pin {
		position: sticky;
		top: calc( var(--ac-header-clearance) - ( var(--ac-header-bar) * 0.10 ) );
		justify-content: flex-start;
		width: 100%;
	}

	.ac-page-reveal--captioned:not(.ac-page-reveal--print) .ac-page-reveal__hold-spacer {
		display: block;
		height: var(--ac-print-pin, 1600px);
	}
}

.ac-page-reveal__order {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	margin-top: 0.4rem;
	color: inherit;
	text-decoration: none;
}

.ac-page-reveal__order-arrow {
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	opacity: 0.5;
	animation: ac-home-scroll-bounce 1.8s var(--ac-ease-out) infinite;
}

.ac-page-reveal__order-label {
	opacity: 0.6;
}

.ac-page-reveal__order:hover .ac-page-reveal__order-label,
.ac-page-reveal__order:focus-visible .ac-page-reveal__order-label {
	opacity: 1;
}

.ac-page-reveal__captions {
	width: 100%;
}

.ac-page-reveal__caption {
	margin: 0;
	padding: 1.125rem 3rem 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	scroll-margin-top: var(--ac-header-clearance);
}

.ac-page-reveal__caption--next {
	padding-top: 6rem;
}

@media (min-width: 601px) {
	.ac-page-reveal__caption--next {
		padding-top: 9rem;
	}
}

.ac-page-reveal__caption-title {
	margin: 0;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(2.55rem, 7.65vw, 7.225rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--ac-ink);
}

.ac-page-reveal__soon {
	display: block;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(1.05rem, 2.2vw, 1.85rem);
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

@media (max-width: 600px) {
	.ac-page-reveal__caption {
		padding: 1.125rem 1.5rem 0;
	}

	.ac-page-reveal__caption-title {
		font-size: clamp(3.57rem, 10.71vw, 10.115rem);
	}
}

/* Where each category's own items will live — currently just the page's
   own content (if any, via .ac-page-content), given genuine room to
   breathe below the title-pin above rather than butting straight into the
   footer. */
.ac-page-next {
	width: 100%;
	min-height: 60vh;
	background: var(--ac-bg);
}

/* Creators Podcast — episode plates pin under each category photo
   while Explore darkens, then release. Extra height is set by
   page-scroll.js (--ac-coin-index-pin). */
.ac-coin-index-pin {
	position: relative;
	height: calc(100vh + var(--ac-coin-index-pin, 1710px));
	height: calc(100svh + var(--ac-coin-index-pin, 1710px));
	background: var(--ac-bg);
}

.ac-coin-index-pin__stage {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	height: 100svh;
}

.ac-coin-index-pin .ac-coin-index {
	height: 100%;
}

.ac-coin-index.is-scroll-sliding,
.ac-coin-index.is-user-sliding {
	overflow-x: hidden;
	scroll-snap-type: none;
}

.ac-coin-index--podcast .ac-coin-index__hit {
	padding: 3.4rem 14vw;
	max-width: min(56rem, 96%);
}

.ac-coin-index--podcast .ac-coin-index__explore {
	position: relative;
	z-index: 2;
	opacity: 0.08;
	pointer-events: auto;
}

.ac-coin-index--podcast .ac-coin-index__explore-link {
	cursor: pointer;
}

.ac-coin-index--podcast .ac-coin-index__item {
	position: relative;
}

.ac-podcast-listen {
	position: relative;
	width: 100%;
	height: calc( 100vh + var( --ac-podcast-listen-pin, 1805px ) );
	height: calc( 100svh + var( --ac-podcast-listen-pin, 1805px ) );
	background: var(--ac-bg);
}

.ac-podcast-listen__stage {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 6rem 3rem;
	box-sizing: border-box;
	text-align: center;
}

.ac-podcast-listen__copy {
	opacity: 0.08;
	transform: translateY( var( --ac-podcast-listen-field-shift, 0px ) );
}

.ac-podcast-listen.is-locked .ac-podcast-listen__copy {
	position: fixed;
	top: var( --ac-podcast-listen-shift, 50vh );
	left: 50%;
	transform: translate3d( -50%, 0, 0 );
	z-index: 3;
	width: 100%;
	padding: 0 3rem;
	box-sizing: border-box;
}

.ac-podcast-listen__title {
	margin: 0 0 4.5rem;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(2.55rem, 7.65vw, 7.225rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--ac-ink);
}

.ac-podcast-listen__links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.25rem;
}

.ac-podcast-listen__link:hover,
.ac-podcast-listen__link:focus-visible {
	opacity: 0.55;
}

/* Attic Print closer — same pin / field / lock as Listen above; type is
   the existing Fall / Vol 2 / Coming Soon caption, not the Listen title. */
.ac-print-soon .ac-podcast-listen__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ac-print-soon .ac-print-soon__caption {
	padding: 0;
}

.ac-print-soon .ac-print-soon__join {
	margin-top: 2.25rem;
	color: var(--ac-ink);
	transition: none;
}

.ac-coin-index--podcast .ac-coin-index__slide-hint {
	position: absolute;
	right: clamp( 3.5rem, 8vw, 7.5rem );
	top: 50%;
	width: 1rem;
	height: 1rem;
	margin-top: -0.5rem;
	pointer-events: none;
	z-index: 2;
	opacity: 0.08;
	animation: ac-slide-hint-bounce 1.8s var(--ac-ease-out) infinite;
}

.ac-coin-index--podcast .ac-coin-index__slide-hint::after {
	content: "";
	display: block;
	width: 1rem;
	height: 1rem;
	border-right: 2px solid var(--ac-ink);
	border-bottom: 2px solid var(--ac-ink);
	transform: rotate( -45deg );
}

@keyframes ac-slide-hint-bounce {
	0%,
	100% {
		transform: translateX( 0 );
	}
	50% {
		transform: translateX( 0.9rem );
	}
}

.ac-page-content {
	max-width: 42rem;
	margin: 0 auto;
	padding: 4rem 3rem 8rem;
}

/* Rare Coins — second feature under the reveal image. Horizontal strip of
   full-viewport white plates (year, name, one-line summary). Clicking the
   type slides to the next coin — same snap-off-while-moving idea as the
   home drag galleries. No cards, radius, rules, or images. */
.ac-coin-index {
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow-x: auto;
	overflow-y: hidden;
	background: var(--ac-bg);
	scrollbar-width: none;
	/* Snap-to-center is done in page-scroll.js on release — native
	   mandatory snap was leaving plates off-center after a drag. */
	scroll-snap-type: none;
	overflow-anchor: none;
	/* Vertical page scroll stays native (pan-y). Horizontal plate changes
	   are owned in page-scroll.js once the swipe is clearly sideways —
	   touch-action:none plus preventDefault on pointerdown was locking
	   iOS/Android so the page could not scroll off these full-screen plates. */
	touch-action: pan-y;
}

.ac-coin-index::-webkit-scrollbar {
	display: none;
}

.ac-coin-index.is-interacting {
	scroll-snap-type: none;
}

.ac-coin-index.is-dragging {
	user-select: none;
}

.ac-coin-index__track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	height: 100%;
}

.ac-coin-index__item {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.ac-coin-index__hit {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: max-content;
	max-width: min(42rem, 92%);
	height: auto;
	/* Title letters carry the A drag cursor; padding is still the
	   click/drag hit. Year and note keep the default arrow. */
	padding: 2.3rem 12vw;
	margin: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: default;
	appearance: none;
	font: inherit;
	border-radius: 0;
	touch-action: pan-y;
}

a.ac-coin-index__hit {
	text-decoration: none;
}

.ac-coin-index__year {
	display: block;
	margin: 0 0 1.75rem;
	color: var(--ac-ink);
	opacity: 0.45;
	/* 1.125rem = 0.75rem (.ac-label) * 1.5 */
	font-size: 1.125rem;
}

.ac-coin-index__name {
	display: block;
	margin: 0;
	max-width: 22ch;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(2rem, 5.4vw, 5.2rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--ac-ink);
}

.ac-coin-index__name--line2 {
	margin-top: 0.12em;
}

/* Art page, desktop: titles stay one line except the two works that are
   explicitly split in page-art.php (Portrait of Elisabeth Lederer, Les
   Femmes d'Alger). Cars page, desktop: Mercedes-Benz is split to three
   lines in page-collector-cars.php. Mobile keeps the shared wrap. */
@media (min-width: 601px) {
	.ac-coin-index--art .ac-coin-index__name,
	.ac-coin-index--cars .ac-coin-index__name,
	.ac-coin-index--cards .ac-coin-index__name,
	.ac-coin-index--coins .ac-coin-index__name,
	.ac-coin-index--podcast .ac-coin-index__name {
		max-width: none;
		white-space: nowrap;
	}
}

.ac-coin-index__note {
	display: block;
	margin: 2rem 0 0;
	max-width: 34rem;
	font-family: var(--ac-font-label);
	font-weight: 400;
	font-size: 0.8125rem;
	line-height: 1.55;
	letter-spacing: 0.01em;
	color: var(--ac-ink);
	opacity: 0.55;
}

.ac-coin-index__stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.ac-coin-index__explore {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	margin-top: 2.25rem;
}

.ac-coin-index__explore-arrow {
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1px solid var(--ac-ink);
	border-bottom: 1px solid var(--ac-ink);
	opacity: 0.5;
	animation: ac-home-scroll-bounce 1.8s var(--ac-ease-out) infinite;
}

.ac-coin-index__explore-link {
	display: inline-block;
	padding: 0.6rem 0;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	opacity: 0.6;
	border-radius: 0;
}

.ac-coin-index__explore-link:hover,
.ac-coin-index__explore-link:focus-visible {
	opacity: 1;
}

.ac-explore {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--ac-bg);
	color: var(--ac-ink);
	overflow: auto;
	opacity: 0;
	transition: opacity 0.8s var(--ac-ease-out);
}

.ac-explore.is-open {
	opacity: 1;
}

.ac-explore::backdrop {
	background: var(--ac-bg);
	opacity: 1;
}

.ac-explore__close {
	position: absolute;
	top: calc(env(safe-area-inset-top, 0px) + 1.35rem);
	right: 3rem;
	z-index: 2;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: inherit;
	cursor: pointer;
	opacity: 0.55;
}

.ac-explore__close:hover,
.ac-explore__close:focus-visible {
	opacity: 1;
}

.ac-explore__layout {
	min-height: 100%;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	grid-template-rows: minmax(100svh, auto) auto;
}

.ac-explore__media {
	grid-row: 1;
	min-height: 100svh;
}

.ac-explore__media {
	overflow: hidden;
	background: var(--ac-ink);
	clip-path: inset(0% 18% 28% 18%);
	transition: clip-path 1.05s var(--ac-ease-out);
}

.ac-explore.is-open .ac-explore__media {
	clip-path: inset(0%);
}

.ac-explore__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ac-explore__copy {
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 8rem 4.5rem;
}

.ac-explore__year {
	margin: 0 0 1.75rem;
	opacity: 0.45;
}

.ac-explore__title {
	margin: 0;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(2.2rem, 4.2vw, 4.4rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
}

.ac-explore__title-line {
	display: block;
	white-space: nowrap;
}

.ac-explore__lede {
	margin: 2.25rem 0 0;
	max-width: 34rem;
	font-family: var(--ac-font-label);
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.65;
	letter-spacing: 0.01em;
	opacity: 0.7;
}

.ac-explore__specs {
	margin: 3.5rem 0 0;
	max-width: 28rem;
}

.ac-explore__spec {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 2rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--ac-line);
}

.ac-explore__spec:first-child {
	border-top: 1px solid var(--ac-line);
}

.ac-explore__spec dt {
	margin: 0;
	font-family: var(--ac-font-label);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	opacity: 0.55;
}

.ac-explore__spec dd {
	margin: 0;
	font-family: var(--ac-font-display);
	font-size: 1.05rem;
	text-align: right;
}

.ac-explore__news {
	grid-column: 1 / -1;
	margin: 0;
	padding: 6.5rem 4.5rem 8rem;
	border-top: 1px solid var(--ac-line);
}

.ac-explore__news-label {
	margin: 0 0 3rem;
	opacity: 0.45;
}

.ac-explore__news-list {
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 52rem;
}

.ac-explore__news-item {
	padding: 2.4rem 0;
	border-bottom: 1px solid var(--ac-line);
}

.ac-explore__news-item:first-child {
	border-top: 1px solid var(--ac-line);
}

.ac-explore__news-date {
	margin: 0 0 1rem;
	opacity: 0.45;
}

.ac-explore__news-link {
	display: block;
	color: inherit;
}

.ac-explore__news-title {
	display: block;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(1.6rem, 2.4vw, 2.35rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.ac-explore__news-dek {
	margin: 1.15rem 0 0;
	max-width: 42rem;
	font-family: var(--ac-font-label);
	font-size: 0.875rem;
	line-height: 1.6;
	letter-spacing: 0.01em;
	opacity: 0.62;
}

.ac-explore__news-source {
	margin: 1.35rem 0 0;
	opacity: 0.4;
}

@media (max-width: 900px) {
	.ac-explore__layout {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}

	.ac-explore__media {
		grid-row: auto;
		min-height: 0;
		height: 50svh;
	}

	.ac-explore__copy {
		grid-row: auto;
		padding: 4.5rem 1.5rem 4rem;
	}

	.ac-explore__title-line {
		white-space: normal;
	}

	.ac-explore__spec {
		gap: 1rem;
		padding-left: 0.25rem;
		padding-right: 0.25rem;
	}

	.ac-explore__spec dt {
		letter-spacing: 0.1em;
		max-width: 42%;
	}

	.ac-explore__spec dd {
		min-width: 0;
		overflow-wrap: break-word;
	}

	.ac-explore__news {
		padding: 4rem 1.5rem 6rem;
	}

	.ac-explore__news-item {
		padding: 2.1rem 0.35rem;
	}

	.ac-explore__news-dek,
	.ac-explore__news-date,
	.ac-explore__news-source {
		max-width: 100%;
		overflow-wrap: break-word;
	}

	.ac-explore__close {
		right: 1.5rem;
	}

	.ac-explore__title-line {
		white-space: normal;
	}
}

@media (max-width: 600px) {
	.ac-coin-index__hit {
		width: 100%;
		max-width: 100%;
		padding: 2rem 1.5rem;
	}

	.ac-coin-index__note {
		max-width: 100%;
		padding: 0 0.75rem;
		overflow-wrap: break-word;
	}

	.ac-coin-index__name {
		font-size: clamp(2.2rem, 11vw, 3.6rem);
	}

	.ac-coin-index__explore {
		margin-top: 1.5rem;
	}

	.ac-site-header.is-over-plates {
		/* Empty header space doesn't swallow taps/drags on the type sitting
		   underneath; the logo and menu A stay clickable. Frost comes from
		   .is-glass, same as home. */
		pointer-events: none;
	}

	.ac-site-header.is-over-plates .ac-site-header__logo,
	.ac-site-header.is-over-plates .ac-menu-toggle {
		pointer-events: auto;
	}
}

@media (max-width: 600px) {
	.ac-page-hero {
		padding: 3rem 1.5rem;
	}

	.ac-page-hero__title {
		font-size: clamp(3.57rem, 10.71vw, 10.115rem);
	}
}

/* Home page — pinned logo reveal. .ac-home-pin is taller than one viewport
   on purpose: that extra height is the scroll distance the section "spends"
   on the darken animation while .ac-home-logo sits sticky at the top of the
   viewport (visually static — position never changes, only opacity does).
   Once the user has scrolled through that extra height, the section runs
   out and releases normally, letting the page continue scrolling to
   whatever comes next. The exact distance must match PIN_DISTANCE in
   assets/js/home-scroll.js. */
.ac-home-pin {
	position: relative;
	/* Extra height comes from --ac-home-pin (home-scroll.js), 5% tighter
	   than the original 2000 + 800 + 1600. 100svh, not 100vh, and
	   deliberately declared twice: mobile browsers
	   resize the viewport (and everything measured in vh) when their
	   address bar collapses on the first scroll, which — since this height
	   drives the whole page's scrollable length — visibly jerked/jumped
	   the page right as scrolling began. svh ("small viewport height")
	   always uses the viewport size with the address bar shown, so it
	   doesn't change out from under the page mid-scroll. The plain vh
	   version stays first as a fallback for the small number of browsers
	   that don't support svh yet — they simply never see the second,
	   overriding declaration. */
	height: calc(100vh + var(--ac-home-pin, 4180px));
	height: calc(100svh + var(--ac-home-pin, 4180px));
	/* Cancels out .ac-site-content's padding-top (6rem) so this section's
	   static (pre-stick) position starts flush at the very top of the
	   viewport. Without this the page had to scroll ~96px before the
	   sticky logo even reached the top and started pinning, reading as an
	   unwanted little pre-scroll before the darken animation kicked in. */
	margin-top: -6rem;
}

.ac-home-logo {
	position: sticky;
	top: 0;
	/* See the svh comment on .ac-home-pin above — same reasoning. */
	height: 100vh;
	height: 100svh;
	width: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4rem 2rem;
	text-align: center;
	overflow-x: clip;
	/* Vertical page scroll only — a sideways finger flick was panning the
	   whole home document (later galleries / off-screen Markets names
	   wider than the viewport) so this logo appeared to slide left/right. */
	touch-action: pan-y;
}

.ac-home-logo__wordmark,
.ac-home-logo__tagline-img {
	/* Rest state matches home-scroll.js MIN_OPACITY. Set here (not only in
	   JS) so the mark never paints full-ink before the script runs. */
	opacity: 0.08;
}

.ac-home-logo__wordmark {
	width: min(80vw, 34rem);
	height: auto;
}

.ac-home-logo__tagline-img {
	/* Matches the wordmark's own proportions (both cropped from the same
	   source file), so the tagline reads at the same relative scale. */
	width: min(80vw, 34rem);
	height: auto;
	/* Approximates the original file's own spacing between the two
	   (~5.7% of the wordmark's width, scaled to the same rendered size). */
	margin-top: 1.75rem;
}

.ac-home-logo__mark {
	width: min(80vw, 34rem);
	height: auto;
}

.ac-home-logo__mark--text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.ac-home-logo__title {
	font-family: var(--ac-font-display);
	font-weight: 400;
	font-size: clamp(3rem, 8vw, 6rem);
	line-height: 1;
	opacity: 0.08;
}

.ac-home-logo__tagline {
	font-family: var(--ac-font-label);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.6;
}

/* Home page — video reveal ("Attic Feature" clip), mirroring
   .ac-showcase-reveal on single-showcase.php: a tall pin with overflow
   hidden, containing a full-size frame whose clip-path is animated by
   assets/js/home-scroll.js from a small centered box out to the full
   frame. */
.ac-home-feature {
	position: relative;
	background: var(--ac-bg);
}

.ac-home-feature__pin {
	/* See the svh comment on .ac-home-pin above — same reasoning. */
	height: 142.5vh;
	height: 142.5svh;
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ac-home-feature__picture {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.ac-home-feature__frame {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	background-color: var(--ac-ink);
}

.ac-home-feature__picture .ac-home-feature__frame {
	height: 100%;
	aspect-ratio: auto;
}

@media (max-width: 600px) {
	.ac-home-feature__pin {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 0.75rem;
		padding-right: 0.75rem;
		box-sizing: border-box;
	}

	.ac-home-feature__picture,
	.ac-home-feature__frame {
		width: 100%;
		max-width: 920px;
		height: auto;
		aspect-ratio: 920 / 1350;
		max-height: 1350px;
	}
}

/* Home page — "Attic Print" title/subtitle beside a drag gallery. Title/
   subtitle typography is an exact match of the hero title/subtitle on
   single-showcase.php (.ac-showcase-hero__title/__subtitle in
   showcase-editorial.css), which isn't loaded on the home page, so the same
   rules are duplicated here rather than shared across a stylesheet that's
   conditionally enqueued. */
.ac-home-print {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: calc(100vh + var(--ac-print-pin, 2660px));
	height: calc(100svh + var(--ac-print-pin, 2660px));
	background: var(--ac-bg);
	margin-top: 50vh;
	margin-top: 50svh;
}

.ac-home-print__stage {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	height: 100svh;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 4rem;
	background: var(--ac-bg);
	padding: 4.2rem;
	box-sizing: border-box;
	overflow-x: clip;
}

.ac-home-print__text {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	text-align: center;
}

.ac-home-print__title {
	margin: 0 0 1.5rem;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(2.55rem, 7.65vw, 7.225rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--ac-ink);
	opacity: 0.08;
	max-width: 100%;
}

/* Mobile only. 40% larger than the desktop clamp above — same breakpoint as
   the other mobile-only rules in this file. Covers both "Attic Print" and
   "Creators" (.ac-home-print__title is shared by both sections). */
@media (max-width: 600px) {
	.ac-home-print__stage {
		flex-wrap: wrap;
		padding-left: 25px;
		padding-right: 25px;
		/* Sit below the frosted header, plus 1.5rem so the title/gallery
		   never touch the glass. Height shrinks by the same amount so the
		   stage still fills the remaining viewport. */
		top: calc(var(--ac-header-clearance) + 1.5rem);
		height: calc(100vh - var(--ac-header-clearance) - 1.5rem);
		height: calc(100svh - var(--ac-header-clearance) - 1.5rem);
		padding-top: 0;
	}

	.ac-home-print__title {
		font-size: clamp(3.57rem, 10.71vw, 10.115rem);
	}
}

.ac-home-print__subtitle {
	margin: 0;
	font-family: var(--ac-font-label);
	font-size: 0.77rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ac-ink);
	opacity: 0.6;
}

a.ac-home-print__subtitle--link {
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	z-index: 2;
}

a.ac-home-print__subtitle--link:hover,
a.ac-home-print__subtitle--link:focus-visible {
	opacity: 1;
}

/* "Order" subtitle, below the scroll arrow. */
.ac-home-print__scroll + .ac-home-print__subtitle {
	margin-top: 2rem;
}

/* Scroll-cue arrow — exact match of .ac-showcase-hero__scroll/__scroll-arrow
   on single-showcase.php (CSS-only bounce, no default easing), duplicated
   here (own keyframes name, ac-home-scroll-bounce) since
   showcase-editorial.css isn't loaded on the home page. */
.ac-home-print__scroll {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	margin: 2rem 0 0;
}

.ac-home-print__scroll-arrow {
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1px solid var(--ac-ink);
	border-bottom: 1px solid var(--ac-ink);
	opacity: 0.5;
	animation: ac-home-scroll-bounce 1.8s var(--ac-ease-out) infinite;
}

@keyframes ac-home-scroll-bounce {
	0%,
	100% {
		opacity: 0.3;
		transform: rotate(45deg) translateY(0);
	}
	50% {
		opacity: 0.7;
		transform: rotate(45deg) translateY(0.5rem);
	}
}

/* Drag gallery to the right of the title/subtitle — same drag/throw/snap
   mechanics as .ac-showcase-gallery on single-showcase.php, reimplemented
   for the home page in assets/js/home-scroll.js (showcase-scroll.js isn't
   enqueued here). */
.ac-home-gallery {
	flex: 1 1 320px;
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	/* Item widths are set by JS once each image/video finishes loading
	   (assets/js/home-scroll.js), which happens asynchronously and at
	   different times per item — each one is a layout change within this
	   scroll container. Chrome's default scroll anchoring tries to
	   preserve visual continuity across layout changes like that by
	   silently adjusting scrollLeft, which on mobile was landing the
	   gallery on a later item instead of showing the first one on load.
	   Turning it off keeps scrollLeft exactly where it's actually set
	   (0, at rest) regardless of how/when the items resize. */
	overflow-anchor: none;
}

.ac-home-gallery::-webkit-scrollbar {
	display: none;
}

.ac-home-gallery.is-dragging {
	user-select: none;
}

/* See .ac-showcase-gallery.is-interacting in showcase-editorial.css for why
   snapping has to be switched off for the whole drag+throw. */
.ac-home-gallery.is-interacting {
	scroll-snap-type: none;
}

/* Vertical scroll owns the gallery while Creators is still pinned. A
   sideways swipe on mobile claims the gallery (is-user-sliding) so later
   plates can be reached without waiting for the pin to release. */
.ac-home-gallery.is-scroll-sliding,
.ac-home-gallery.is-user-sliding {
	overflow-x: hidden;
	scroll-snap-type: none;
}

.ac-home-gallery--podcast {
	touch-action: pan-y;
}

.ac-home-gallery__track {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 2rem;
	width: max-content;
}

/* Creators Podcast section only. 5.2rem = 2.6rem * 2 — doubled from the
   previous 30%-more-than-default gap. */
.ac-home-gallery--podcast .ac-home-gallery__track {
	gap: 5.2rem;
}

/* Mobile only — the desktop 5.2rem gap would eat up over a fifth of a
   typical phone screen's width on its own, leaving no room for the "one
   image plus a peek of the next" sizing home-scroll.js computes for this
   gallery at this breakpoint (it reads this gap's actual computed value at
   runtime, so the two stay in sync automatically). */
@media (max-width: 600px) {
	.ac-home-gallery--podcast .ac-home-gallery__track {
		gap: 1rem;
	}
}

/* Fixed height (matches .ac-showcase-parallax's fixed-height container),
   explicit JS-computed width (assets/js/home-scroll.js — the media inside
   is absolutely positioned/oversized so its own natural width can't size
   this box automatically the way a normal-flow <img> would), overflow
   hidden so the oversized/drifting media below never exposes empty space
   at the edges. */
.ac-home-gallery__item {
	margin: 0;
	flex: 0 0 auto;
	height: 60vh;
	scroll-snap-align: start;
	position: relative;
	overflow: hidden;
}

@media (min-width: 601px) {
	.ac-home-print:not(.ac-home-print--podcast) .ac-home-print__stage {
		justify-content: flex-start;
		padding-right: 0;
	}

	.ac-home-print:not(.ac-home-print--podcast) .ac-home-gallery {
		flex: 1 1 0;
		align-self: stretch;
		max-width: none;
	}

	.ac-home-print:not(.ac-home-print--podcast) .ac-home-gallery__track {
		width: 100%;
		height: 100%;
	}

	.ac-home-print:not(.ac-home-print--podcast) .ac-home-gallery__item {
		width: 100%;
		height: 100%;
	}
}

/* Same ratios as .ac-showcase-parallax__inner on single-showcase.php (124%
   size, -12% offset) — rotated onto the horizontal axis to match this
   section's horizontal slider, instead of the showcase's vertical scroll
   parallax. object-fit:cover replicates that version's background-size:
   cover, since these are real <img>/<video> elements rather than
   background-image divs. The ±9%-of-own-width drift itself (matching the
   showcase's ±9% yPercent range) is applied on top of this static -12%
   center offset via transform:translateX in home-scroll.js. */
.ac-home-gallery__picture {
	display: block;
	position: absolute;
	inset: 0;
}

.ac-home-gallery__image {
	position: absolute;
	top: 0;
	left: -12%;
	width: 124%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
	border-radius: 0;
	box-shadow: none;
}

/* Creators Podcast section only — the 124%/-12% bleed above (needed to give
   the horizontal parallax room to pan without ever exposing empty space)
   was permanently cropping ~12% off each side of these particular images,
   cutting off content that needs to stay fully visible. Rendered at a
   plain 100%/0% here instead: full image, no crop, exactly matching the
   item box's own aspect ratio (see applyWidth() in home-scroll.js) — and
   the parallax pan itself is skipped for this gallery entirely (same file)
   so nothing tries to shift a full-width image off its own box. */
.ac-home-gallery--podcast .ac-home-gallery__image {
	left: 0;
	width: 100%;
}

@media (max-width: 600px) {
	.ac-home-print:not(.ac-home-print--podcast) .ac-home-print__stage {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		gap: 1.5rem;
		overflow-x: clip;
		overflow-y: visible;
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

	.ac-home-print:not(.ac-home-print--podcast) .ac-home-print__text {
		flex: 0 0 auto;
	}

	.ac-home-print:not(.ac-home-print--podcast) .ac-home-gallery {
		flex: 0 0 auto;
		width: 100%;
		max-width: 920px;
		align-self: center;
		overflow: visible;
	}

	.ac-home-print:not(.ac-home-print--podcast) .ac-home-gallery__track {
		width: 100%;
		height: auto;
		display: block;
	}

	.ac-home-print:not(.ac-home-print--podcast) .ac-home-gallery__item {
		width: 100%;
		height: auto;
		aspect-ratio: 920 / 1350;
		max-width: 920px;
		max-height: 1350px;
	}

	.ac-home-print:not(.ac-home-print--podcast) .ac-home-gallery__image {
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* Home page — Markets. Pinned stage: title darkens on scroll, then each
   category name appears in place (dim → dark) with an Explore cue.
   Extra height must match PIN_DISTANCE in home-scroll.js
   (set as --ac-markets-pin). */
.ac-home-markets {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: calc(100vh + var(--ac-markets-pin, 14440px));
	height: calc(100svh + var(--ac-markets-pin, 14440px));
	background: var(--ac-bg);
}

.ac-home-markets__stage {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 4rem 3rem;
	box-sizing: border-box;
	overflow-x: clip;
}

.ac-home-markets__title {
	flex: 0 0 auto;
	margin: 0 0 4.5rem;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(2.55rem, 7.65vw, 7.225rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--ac-ink);
	opacity: 0.08;
}

.ac-home-markets__items {
	position: relative;
	width: 100%;
	max-width: 92%;
	height: 5.2em;
	font-size: clamp(2rem, 5.4vw, 5.2rem);
	line-height: 0.95;
}

.ac-home-markets__item {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: none;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.ac-home-markets__name {
	margin: 0;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: -0.02em;
	color: var(--ac-ink);
	opacity: 0;
	white-space: nowrap;
}

.ac-home-markets__explore {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	margin-top: 2rem;
	opacity: 0;
	pointer-events: none;
}

.ac-home-markets__explore.is-live {
	pointer-events: auto;
	position: relative;
	z-index: 5;
}

.ac-home-markets__explore-arrow {
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1px solid var(--ac-ink);
	border-bottom: 1px solid var(--ac-ink);
	opacity: 0.5;
	animation: ac-home-scroll-bounce 1.8s var(--ac-ease-out) infinite;
}

.ac-home-markets__explore-link {
	display: inline-block;
	padding: 0.6rem 0;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	opacity: 0.6;
	border-radius: 0;
}

.ac-home-markets__explore-link:hover,
.ac-home-markets__explore-link:focus-visible {
	opacity: 1;
}

@media (max-width: 600px) {
	.ac-home-markets__title {
		margin-bottom: 3rem;
		font-size: clamp(3.57rem, 10.71vw, 10.115rem);
	}

	.ac-home-markets__items {
		height: 6.4em;
	}

	.ac-home-markets__name {
		white-space: normal;
		max-width: 90vw;
	}
}

/* Home page — Subscribe sits in the remaining field (below the header,
   above the reserved footer band) from the first frame. A spacer is the
   dim→dark distance; then the footer rolls up into that reserved band
   without moving the word. */
.ac-home-subscribe {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	height: 100svh;
	background: var(--ac-bg);
}

.ac-home-subscribe__stage {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6rem 3rem;
	box-sizing: border-box;
}

.ac-home-subscribe__cue {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	appearance: none;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(1.55rem, 4vw, 3.6rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--ac-ink);
	opacity: 0.08;
	cursor: pointer;
	transform: translateY( var( --ac-subscribe-field-shift, 0px ) );
}

.ac-home-subscribe__cue.is-parked {
	position: fixed;
	left: 50%;
	transform: translate3d( -50%, 0, 0 );
	z-index: 3;
}

.ac-home-subscribe__scroll {
	height: var(--ac-subscribe-pin, 2660px);
	pointer-events: none;
}

/* Site footer — solid stop over the last pin, same as home. */

.ac-site-footer {
	position: relative;
	z-index: 1;
	background: var(--ac-bg);
	border-top: 1px solid var(--ac-line);
}

.ac-site-footer__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 3rem;
	padding: 3rem;
}

.ac-site-footer__columns {
	display: flex;
	gap: 5rem;
}

.ac-site-footer__meta {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

.ac-site-footer__copy {
	text-align: center;
}

.ac-site-footer__x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.35rem 0;
	color: var(--ac-ink);
	line-height: 0;
	transition: opacity 0.3s var(--ac-ease-out);
}

.ac-site-footer__x:hover,
.ac-site-footer__x:focus-visible {
	opacity: 0.55;
}

.ac-site-footer__x svg {
	display: block;
	width: 1rem;
	height: 1rem;
}

.ac-nav-list--footer-col {
	flex-direction: column;
	gap: 0.85rem;
}

/* Markets antechamber. */

.ac-ms-kicker {
	margin: 0 0 1.5rem;
	opacity: 0.45;
}

.ac-ms-display {
	margin: 0;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(2.55rem, 7.65vw, 7.225rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--ac-ink);
}

/* Opening Markets titles (and later heading groups). Club Join keeps
   its own rest state — do not inherit this onto .ac-ms-pin--club. */
.ac-ms-heading-group,
.ac-ms-pin:not(.ac-ms-pin--club) .ac-ms-pin__stage > .ac-ms-display {
	opacity: 0.08;
}

.ac-ms-display--stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45em;
}

.ac-ms-pin--club .ac-ms-display--stack {
	font-size: clamp(3.4rem, 10vw, 9.2rem);
	/* Nudge so the Attic wordmark sits on the field midpoint; Join hangs below. */
	transform: translateY( calc( var( --ac-ms-logo-nudge, 0px ) + var( --ac-ms-field-shift, 0px ) ) );
}

.ac-ms-pin--club.is-locked .ac-ms-display--stack {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translate3d( -50%, var( --ac-ms-club-shift, 50vh ), 0 );
	z-index: 4;
	width: 100%;
	margin: 0;
	padding: 0 3rem;
	box-sizing: border-box;
	will-change: transform;
}

.ac-ms-display__logo {
	width: min(72vw, 30rem);
	height: auto;
	display: block;
}

.ac-ms-display__line {
	display: block;
	opacity: 0.08;
}

.ac-ms-display__line--unveil {
	font-size: clamp(1.55rem, 4vw, 3.6rem);
}

.ac-ms-club-cue {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	outline: none;
}

.ac-ms-display__join {
	display: block;
	margin: 2.25rem 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	appearance: none;
	font-family: var(--ac-font-label);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #ffffff;
	cursor: pointer;
	transition: color 5.5s var(--ac-ease-out);
}

.ac-ms-club-cue:hover .ac-ms-display__join,
.ac-ms-club-cue:focus .ac-ms-display__join,
.ac-ms-club-cue.is-join .ac-ms-display__join {
	color: var(--ac-ink);
}

@media (hover: none) {
	.ac-ms-display__join {
		transition: none;
	}
}

.ac-ms-pin {
	position: relative;
	height: calc(100vh + var(--ac-ms-pin, 1615px));
	height: calc(100svh + var(--ac-ms-pin, 1615px));
	margin-top: -6rem;
	background: var(--ac-bg);
}

.ac-ms-pin + .ac-ms-pin,
.ac-ms-pin + .ac-ms-seq,
.ac-ms-pin + .ac-ms-intro,
.ac-ms-seq + .ac-ms-seq,
.ac-ms-seq + .ac-ms-pin,
.ac-ms-intro + .ac-ms-pin {
	margin-top: 0;
}

.ac-market-sample .ac-ms-pin:first-child {
	margin-top: -6rem;
}

.ac-market-sample .ac-ms-pin:not(:first-child) {
	margin-top: 0;
}

.ac-ms-pin__stage {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6rem 3rem;
	box-sizing: border-box;
}

.ac-ms-remark {
	margin: 0;
	max-width: 22em;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(1.6rem, 3.4vw, 2.8rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--ac-ink);
}

.ac-ms-remark__line {
	display: block;
	opacity: 0.08;
}

.ac-ms-intro {
	position: relative;
	/* Same column as .ac-showcase-body__content (Pagani): 70ch at 1.25rem,
	   not at the large quote size, plus the same side padding. */
	max-width: 70ch;
	margin: 0 auto;
	padding: 9rem 2rem;
	font-family: var(--ac-font-display);
	font-size: 1.25rem;
	background: var(--ac-bg);
	box-sizing: border-box;
}

.ac-market-sample--depth .ac-ms-intro:has(+ .ac-ms-pin--club),
.ac-market-sample--depth .ac-ms-intro:has(+ dialog + .ac-ms-pin--club) {
	padding-bottom: 4rem;
}

.ac-ms-intro__quote {
	margin: 0;
	font-family: var(--ac-font-display);
	font-size: clamp(1.925rem, 3.3vw, 3.025rem);
	font-weight: 300;
	line-height: 1.45;
	letter-spacing: -0.01em;
	color: var(--ac-ink);
}

.ac-ms-intro__block + .ac-ms-intro__block,
.ac-ms-intro__quote + .ac-ms-intro__quote {
	margin-top: 2.8em;
}

.ac-ms-more {
	display: inline-flex;
	margin: 2rem 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	appearance: none;
	color: inherit;
	cursor: pointer;
	opacity: 0.6;
}

.ac-ms-more:hover,
.ac-ms-more:focus-visible {
	opacity: 1;
}

@media (max-width: 600px) {
	.ac-ms-intro {
		padding: 12rem 1.5rem 6rem;
	}

	.ac-market-sample--depth .ac-ms-intro:has(+ .ac-ms-pin--club),
	.ac-market-sample--depth .ac-ms-intro:has(+ dialog + .ac-ms-pin--club) {
		padding-bottom: 3rem;
	}

	.ac-ms-intro__quote {
		font-size: 1.5rem;
	}
}

.ac-ms-seq {
	position: relative;
	height: calc(100vh + var(--ac-ms-seq-pin, 11400px));
	height: calc(100svh + var(--ac-ms-seq-pin, 11400px));
	background: var(--ac-bg);
}

.ac-ms-seq__stage {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	height: 100svh;
	text-align: center;
	padding: 6rem 3rem;
	box-sizing: border-box;
}

.ac-ms-seq__title {
	position: absolute;
	left: 3rem;
	right: 3rem;
	bottom: 50%;
	margin: 0 0 4.5rem;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(2.55rem, 7.65vw, 7.225rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--ac-ink);
	opacity: 0.08;
}

.ac-ms-seq__items {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -0.475em);
	width: 92%;
	max-width: 92%;
	height: 7.2em;
	font-size: clamp(2rem, 5.4vw, 5.2rem);
	line-height: 0.95;
}

.ac-ms-seq__item {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ac-ms-seq__name {
	margin: 0;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: -0.02em;
	color: var(--ac-ink);
	opacity: 0;
}

.ac-ms-seq__note {
	margin: 1.5rem 0 0;
	opacity: 0;
}

.ac-ms-seq__explore {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	margin-top: 2rem;
	opacity: 0;
	pointer-events: none;
	color: inherit;
}

.ac-ms-seq__explore.is-live {
	pointer-events: auto;
	position: relative;
	z-index: 5;
}

.ac-ms-seq__explore-hit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.ac-ms-seq__explore-arrow {
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1px solid var(--ac-ink);
	border-bottom: 1px solid var(--ac-ink);
	opacity: 0.5;
	animation: ac-home-scroll-bounce 1.8s var(--ac-ease-out) infinite;
}

.ac-ms-seq__explore-link,
.ac-ms-seq__stories {
	opacity: 0.6;
	text-align: center;
}

a.ac-ms-seq__stories {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

a.ac-ms-seq__stories:hover,
a.ac-ms-seq__stories:focus-visible {
	opacity: 1;
}

.ac-ms-seq--insights .ac-ms-seq__explore {
	/* Three lines of .ac-label (0.75rem × 1.5) under the report cue. */
	gap: 3.375rem;
}

.ac-ms-seq--insights .ac-ms-seq__title {
	margin-bottom: 8.5rem;
}

.ac-ms-seq--insights .ac-ms-seq__items {
	height: auto;
	max-width: min(22em, 88vw);
	font-size: clamp(1.35rem, 2.5vw, 2.2rem);
	line-height: 1.15;
	transform: translate(-50%, -50%);
}

.ac-ms-seq--insights .ac-ms-seq__name {
	max-width: 100%;
}

.ac-ms-seq--numbers .ac-ms-seq__title {
	margin-bottom: 8.5rem;
}

.ac-ms-seq--numbers .ac-ms-seq__items {
	height: auto;
	max-width: min(18em, 88vw);
	font-size: clamp(1.8rem, 4.8vw, 4.4rem);
	line-height: 1.05;
	transform: translate(-50%, -50%);
}

.ac-ms-seq--numbers .ac-ms-seq__name {
	max-width: 100%;
	font-variant-numeric: tabular-nums lining-nums;
}

@media (max-width: 600px) {
	.ac-ms-pin__stage,
	.ac-ms-seq__stage {
		padding-left: 25px;
		padding-right: 25px;
	}

	.ac-market-sample .ac-ms-pin__stage,
	.ac-market-sample .ac-ms-seq__stage {
		padding-top: 0;
		padding-bottom: 0;
	}

	.ac-ms-seq__title,
	.ac-ms-display {
		font-size: clamp(3.2rem, 10vw, 9rem);
	}

	.ac-ms-seq__title {
		left: 25px;
		right: 25px;
	}

	.ac-ms-pin--club .ac-ms-display--stack {
		font-size: clamp(4rem, 12vw, 11rem);
	}

	.ac-ms-display__logo {
		width: min(78vw, 30rem);
	}

	.ac-ms-seq__name {
		max-width: 90vw;
	}

	.ac-ms-seq--insights .ac-ms-seq__title {
		margin-bottom: 6rem;
	}

	.ac-ms-seq--insights .ac-ms-seq__items {
		max-width: 88vw;
	}

	.ac-ms-seq--numbers .ac-ms-seq__title {
		margin-bottom: 6rem;
	}

	.ac-ms-seq--numbers .ac-ms-seq__items {
		max-width: 88vw;
	}
}

.ac-visually-hidden,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ac-club-join {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--ac-bg);
	color: var(--ac-ink);
	opacity: 0;
	transition: opacity 0.8s var(--ac-ease-out);
}

.ac-club-join.is-open {
	opacity: 1;
}

html.ac-overlay-open {
	overflow: hidden;
}

html.ac-overlay-open body {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
}

.ac-club-join.ac-roster {
	overscroll-behavior: contain;
}

.ac-club-join::backdrop {
	background: var(--ac-bg);
}

.ac-club-join__close {
	position: absolute;
	top: calc(env(safe-area-inset-top, 0px) + 1.5rem);
	right: 3rem;
	z-index: 2;
	padding: 0.6rem 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	opacity: 0.45;
}

.ac-club-join__close:hover,
.ac-club-join__close:focus-visible {
	opacity: 1;
}

.ac-club-join__close--foot {
	position: static;
	top: auto;
	right: auto;
	display: block;
	width: min(70ch, 100%);
	margin: 6rem auto 0;
	text-align: center;
}

.ac-club-join__form {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	padding: 8rem 2rem;
	text-align: center;
}

.ac-club-join__kicker {
	margin: 0 0 2.5rem;
	opacity: 0.45;
}

.ac-club-join__line {
	margin: 0 0 4.5rem;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(1.6rem, 3.4vw, 2.8rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.ac-club-join__input {
	width: min(28rem, 82vw);
	margin: 0 0 3rem;
	padding: 0.85rem 0;
	border: 0;
	border-bottom: 1px solid var(--ac-ink);
	border-radius: 0;
	background: transparent;
	color: var(--ac-ink);
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: 1.35rem;
	letter-spacing: 0.04em;
	text-align: center;
	outline: none;
	box-shadow: none;
	appearance: none;
}

.ac-club-join__form.is-invalid .ac-club-join__input {
	border-bottom-color: var(--ac-ink);
	opacity: 0.45;
}

.ac-club-join__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ac-club-join__submit {
	padding: 0.6rem 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	opacity: 0.55;
}

.ac-club-join__submit:hover,
.ac-club-join__submit:focus-visible {
	opacity: 1;
}

.ac-club-join__held {
	margin: 0;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: 1.15rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.55;
}

.ac-club-join__held--note {
	max-width: 14em;
	font-size: clamp(1.6rem, 3.4vw, 2.8rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-transform: none;
	opacity: 1;
}

.ac-club-join__form.is-held .ac-club-join__input,
.ac-club-join__form.is-held .ac-club-join__line,
.ac-club-join__form.is-held .ac-club-join__submit {
	opacity: 0.2;
	pointer-events: none;
}

.ac-club-join__form--note.is-held .ac-club-join__input,
.ac-club-join__form--note.is-held .ac-club-join__line,
.ac-club-join__form--note.is-held .ac-club-join__submit {
	opacity: 0;
}

@media (max-width: 600px) {
	.ac-club-join__close {
		right: 25px;
	}

	.ac-club-join__form {
		padding: 7rem 25px;
	}
}

.ac-ms-heading-group {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ac-ms-heading-note {
	margin: 3.4rem 0 0;
	max-width: 18em;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(1.15rem, 2.2vw, 1.7rem);
	line-height: 1.35;
	letter-spacing: -0.02em;
	color: var(--ac-ink);
}

.ac-ms-heading-note__line {
	display: block;
}

.ac-ms-display__open {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	appearance: none;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	color: inherit;
	cursor: pointer;
}

.ac-ms-expand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	margin-top: 2rem;
}

.ac-ms-expand__arrow {
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1px solid var(--ac-ink);
	border-bottom: 1px solid var(--ac-ink);
	opacity: 0.5;
	animation: ac-home-scroll-bounce 1.8s var(--ac-ease-out) infinite;
}

.ac-ms-expand__link {
	opacity: 0.6;
}

.ac-roster__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	padding: 9rem 2rem 8rem;
	text-align: center;
	box-sizing: border-box;
	overflow-y: auto;
}

.ac-roster__kicker {
	margin: 0 0 5.4rem;
	opacity: 0.45;
}

.ac-roster__list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: min(34rem, 88vw);
}

.ac-roster__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 0 5.6rem;
}

.ac-roster__item:last-child {
	margin-bottom: 0;
}

.ac-roster__index {
	display: block;
	margin: 0 0 1.7rem;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(1rem, 2.1vw, 1.6rem);
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	color: var(--ac-ink);
}

.ac-roster__name {
	margin: 0;
	max-width: 18em;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(1.8rem, 4.2vw, 3.6rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--ac-ink);
}

.ac-roster__note {
	display: block;
	margin: 1.85rem 0 0;
	max-width: 22em;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(1.05rem, 1.9vw, 1.35rem);
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--ac-ink);
	opacity: 0.55;
}

@media (max-width: 600px) {
	.ac-roster__stage {
		padding: 8rem 25px 7rem;
	}

	.ac-roster__kicker {
		margin-bottom: 4.2rem;
	}

	.ac-roster__item {
		margin-bottom: 4.8rem;
	}
}

.ac-roster--essay {
	overflow-y: auto;
}

.ac-roster--essay .ac-roster__stage {
	justify-content: flex-start;
	text-align: left;
	overflow: visible;
	padding-bottom: 60vh;
}

.ac-roster--essay .ac-roster__kicker {
	text-align: center;
	width: 100%;
}

.ac-roster--essay .ac-roster__essay {
	width: min(70ch, 100%);
}

.ac-roster--essay .ac-word {
	opacity: 0.15;
}