/* =========================================================================
   ABSENT SUBJECT — global child theme styles
   Theme: Bone (light) · Accent: Crimson · Featured/Archive: Noir
   ========================================================================= */

:root {
	--bg:       #f4f1ec;
	--ink:      #14110d;
	--line:     rgba(20, 17, 13, .14);
	--line-2:   rgba(20, 17, 13, .20);
	--muted:    #756d62;
	--paper:    #e9e3da;
	--accent:   #c8102e; /* Crimson */
	--noir:     #0c0b0a;
	--noir-ink: #efe9df;
	--noir-line:rgba(239, 233, 223, .16);

	--serif: "Bodoni Moda", Georgia, serif;
	--mono:  "Space Mono", ui-monospace, monospace;
	--sans:  "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---- base -------------------------------------------------------------- */

body.absent-front {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
html { scroll-behavior: smooth; }
.absent-front ::selection { background: var(--ink); color: var(--bg); }

.absent-front #theme-main { overflow: clip; }

.as-root { position: relative; }

/* shared italic helper (Bodoni italic) */
.as-i  { font-style: italic; }
.as-dim { opacity: .6; }

/* shared mono eyebrow */
.as-eyebrow {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .30em;
	text-transform: uppercase;
	opacity: .6;
}
.as-kicker {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .30em;
	text-transform: uppercase;
	opacity: .55;
	display: flex;
	gap: 16px;
	align-items: center;
}
.as-kicker__rule { width: 42px; height: 1px; background: currentColor; opacity: .5; }

/* =========================================================================
   CUSTOM CURSOR
   ========================================================================= */

.as-cursor-ring,
.as-cursor-dot {
	position: fixed;
	top: 0; left: 0;
	border-radius: 50%;
	mix-blend-mode: difference;
	pointer-events: none;
	z-index: 9999;
	transform: translate(-50%, -50%);
	will-change: transform;
	display: none;
}
.as-cursor-ring { width: 42px; height: 42px; border: 1px solid #fff; }
.as-cursor-dot  { width: 5px;  height: 5px;  background: #fff; }

@media (hover: hover) and (pointer: fine) {
	.as-cursor-ring, .as-cursor-dot { display: block; }
}

/* =========================================================================
   NAV
   ========================================================================= */

.as-nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 36px;
	background: color-mix(in srgb, var(--bg) 72%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line);
}
.as-brand {
	text-decoration: none;
	color: inherit;
	font-family: var(--serif);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: .02em;
	line-height: 1;
	display: flex;
	flex-direction: column;
}
.as-brand__kicker {
	font-family: var(--mono);
	font-size: 8.5px;
	letter-spacing: .42em;
	font-weight: 400;
	opacity: .6;
	margin-top: 3px;
	padding-left: 2px;
}
.as-nav__links {
	display: flex;
	align-items: center;
	gap: 30px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.as-nav__link {
	text-decoration: none;
	color: inherit;
	opacity: .7;
	transition: opacity .3s;
}
.as-nav__link:hover { opacity: 1; }
.as-nav__cta {
	text-decoration: none;
	color: var(--bg);
	background: var(--ink);
	padding: 9px 18px;
	border-radius: 999px;
	letter-spacing: .16em;
	transition: opacity .3s;
}
.as-nav__cta:hover { opacity: .85; }

/* =========================================================================
   HERO
   ========================================================================= */

.as-hero {
	position: relative;
	height: 100vh;
	min-height: 680px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
}
.as-hero__bg {
	position: absolute;
	inset: -8% 0;
	z-index: 0;
	will-change: transform;
}
.as-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(8,7,6,.55) 0%, rgba(8,7,6,.12) 32%, rgba(8,7,6,.18) 62%, rgba(8,7,6,.82) 100%);
}
.as-hero__meta {
	position: absolute;
	top: 108px;
	right: 36px;
	z-index: 3;
	text-align: right;
	font-family: var(--mono);
	color: var(--bg);
	font-size: 11px;
	letter-spacing: .2em;
	line-height: 2;
	mix-blend-mode: difference;
}
.as-hero__fg {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 0 36px 52px;
	color: var(--bg);
	will-change: transform;
}
.as-hero__eyebrow {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .34em;
	text-transform: uppercase;
	margin-bottom: 18px;
	opacity: .85;
}
.as-hero__title {
	margin: 0;
	font-family: var(--serif);
	font-weight: 500;
	line-height: .82;
	letter-spacing: -.01em;
	font-size: clamp(64px, 15.5vw, 250px);
}
.as-hero__title span { display: block; }
.as-hero__title .as-i { font-weight: 400; padding-left: .06em; }
.as-hero__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-top: 26px;
	gap: 28px;
	flex-wrap: wrap;
}
.as-hero__lede {
	margin: 0;
	max-width: 440px;
	font-size: 15px;
	line-height: 1.55;
	opacity: .9;
	font-weight: 300;
}
.as-scroll {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: .3em;
}
.as-scroll__line {
	display: inline-block;
	width: 1px;
	height: 34px;
	background: var(--bg);
	transform-origin: center top;
	animation: asScroll 2.4s ease-in-out infinite;
}
@keyframes asScroll {
	0%   { transform: translateY(0);    opacity: .25; }
	50%  { transform: translateY(10px); opacity: 1; }
	100% { transform: translateY(0);    opacity: .25; }
}

/* =========================================================================
   MARQUEE
   ========================================================================= */

.as-marquee {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	overflow: hidden;
	padding: 14px 0;
	background: var(--bg);
}
.as-marquee__track {
	display: flex;
	width: max-content;
	animation: asMarquee 32s linear infinite;
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(28px, 4vw, 52px);
	line-height: 1;
	white-space: nowrap;
	opacity: .9;
}
.as-marquee__word { padding: 0 .5em; }
.as-marquee__star { opacity: .4; padding: 0 .2em; }
@keyframes asMarquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* =========================================================================
   MANIFESTO
   ========================================================================= */

.as-manifesto {
	padding: clamp(80px, 12vh, 160px) 36px;
	max-width: 1200px;
	margin: 0 auto;
}
.as-manifesto .as-kicker { margin-bottom: 38px; }
.as-manifesto__lead {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(30px, 5.4vw, 76px);
	line-height: 1.04;
	letter-spacing: -.015em;
	text-wrap: balance;
}
.as-manifesto__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 40px;
	margin-top: 64px;
}
.as-manifesto__cols p {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	font-weight: 300;
	opacity: .85;
}

/* =========================================================================
   FEATURED (noir)
   ========================================================================= */

.as-featured {
	background: var(--noir);
	color: var(--noir-ink);
	padding: clamp(72px, 9vh, 120px) 36px;
}
.as-featured__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}
.as-featured__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}
.as-featured__plate {
	position: absolute;
	left: 18px; bottom: 16px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .22em;
	color: var(--bg);
	mix-blend-mode: difference;
}
.as-featured__body { }
.as-featured .as-eyebrow { margin-bottom: 26px; }
.as-featured__title {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(34px, 4.6vw, 68px);
	line-height: 1.02;
	letter-spacing: -.015em;
}
.as-featured__copy {
	margin: 28px 0 0;
	font-size: 15.5px;
	line-height: 1.75;
	font-weight: 300;
	opacity: .82;
	max-width: 46ch;
}
.as-featured__credits {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-top: 34px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .6;
}
.as-featured__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 36px;
	text-decoration: none;
	color: var(--noir-ink);
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .22em;
	text-transform: uppercase;
	border-bottom: 1px solid;
	padding-bottom: 6px;
	transition: gap .3s;
}
.as-featured__link:hover { gap: 20px; }

/* =========================================================================
   COLLECTION
   ========================================================================= */

.as-collection { padding: clamp(80px, 12vh, 150px) 36px; }
.as-collection__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.as-collection__title {
	margin: 0;
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(40px, 8vw, 116px);
	line-height: .92;
	letter-spacing: -.02em;
}
.as-collection__count {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	opacity: .55;
	padding-bottom: 10px;
}
.as-filters {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding: 24px 0 44px;
	border-top: 1px solid var(--line);
}
.as-filter {
	background: transparent;
	color: inherit;
	border: 1px solid var(--line-2);
	opacity: .85;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding: 9px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: .3s;
}
.as-filter:hover { opacity: 1; }
.as-filter.is-active {
	background: var(--accent);
	color: var(--bg);
	border-color: var(--accent);
	opacity: 1;
}

.as-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 14px;
	grid-auto-flow: dense;
}
.as-plate {
	margin: 0;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	background: var(--paper);
}
.as-plate__media {
	position: absolute;
	inset: 0;
	transform: scale(1);
	transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
	will-change: transform;
}
.as-plate:hover .as-plate__media { transform: scale(1.06); }
.as-plate__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(8,7,6,0) 45%, rgba(8,7,6,.72) 100%);
	pointer-events: none;
}
.as-plate__cap {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 20px;
	color: var(--bg);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s, transform .6s cubic-bezier(.16, 1, .3, 1);
	pointer-events: none;
}
.as-plate:hover .as-plate__cap { opacity: 1; transform: translateY(0); }
.as-plate__no {
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	opacity: .75;
	margin-bottom: 8px;
}
.as-plate__name {
	font-family: var(--serif);
	font-style: italic;
	font-size: 24px;
	line-height: 1.05;
}
.as-plate__subject {
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .65;
	margin-top: 10px;
}
.as-plate.is-hidden { display: none; }

/* =========================================================================
   ON THE STANDS / ARCHIVE (noir)
   ========================================================================= */

.as-stands {
	background: var(--noir);
	color: var(--noir-ink);
	padding: clamp(80px, 12vh, 150px) 36px;
}
.as-stands__inner { max-width: 1320px; margin: 0 auto; }
.as-stands__feature {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	margin-bottom: clamp(56px, 8vh, 96px);
}
.as-stands__cover {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	position: relative;
}
.as-stands .as-eyebrow { margin-bottom: 22px; }
.as-stands__title {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(36px, 5.2vw, 74px);
	line-height: 1;
	letter-spacing: -.015em;
}
.as-stands__specs {
	display: flex;
	gap: 40px;
	margin-top: 34px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .7;
}
.as-stands__specs > div > span { display: block; opacity: .5; margin-bottom: 6px; }
.as-stands__cta {
	display: inline-block;
	margin-top: 38px;
	text-decoration: none;
	color: var(--noir);
	background: var(--noir-ink);
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: 15px 30px;
	border-radius: 999px;
	transition: opacity .3s;
}
.as-stands__cta:hover { opacity: .85; }

.as-archive__label {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .3em;
	text-transform: uppercase;
	opacity: .55;
	margin-bottom: 24px;
	border-top: 1px solid var(--noir-line);
	padding-top: 24px;
}
.as-archive__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.as-archive__item { text-decoration: none; color: inherit; display: block; }
.as-archive__cover {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	position: relative;
	background: #161412;
}
.as-archive__cover .as-slot__img { transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
.as-archive__item:hover .as-slot__img { transform: scale(1.05); }
.as-archive__meta {
	display: flex;
	justify-content: space-between;
	margin-top: 12px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .7;
}
.as-archive__name {
	font-family: var(--serif);
	font-style: italic;
	font-size: 19px;
	margin-top: 4px;
}

/* =========================================================================
   SUBSCRIBE
   ========================================================================= */

.as-subscribe {
	padding: clamp(90px, 14vh, 180px) 36px;
	text-align: center;
	max-width: 920px;
	margin: 0 auto;
}
.as-subscribe__eyebrow { margin-bottom: 32px; opacity: .55; }
.as-subscribe__title {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(42px, 7vw, 104px);
	line-height: .96;
	letter-spacing: -.02em;
}
.as-subscribe__copy {
	margin: 26px auto 0;
	max-width: 46ch;
	font-size: 15px;
	line-height: 1.7;
	font-weight: 300;
	opacity: .8;
}
.as-subscribe__form {
	display: flex;
	gap: 10px;
	max-width: 520px;
	margin: 44px auto 0;
	border-bottom: 1.5px solid var(--ink);
	padding-bottom: 12px;
}
.as-subscribe__form input {
	flex: 1;
	border: none;
	background: transparent;
	outline: none;
	color: inherit;
	font-family: var(--mono);
	font-size: 15px;
	letter-spacing: .04em;
	padding: 6px 2px;
}
.as-subscribe__form button {
	border: none;
	background: transparent;
	cursor: pointer;
	color: inherit;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .22em;
	text-transform: uppercase;
	transition: opacity .3s;
}
.as-subscribe__form button:hover { opacity: .6; }
.as-subscribe__done {
	margin: 44px auto 0;
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .7;
}

/* =========================================================================
   FOOTER
   ========================================================================= */

.as-footer { border-top: 1px solid var(--line); padding: 48px 36px 40px; background: var(--bg); }
.as-footer__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 30px;
	flex-wrap: wrap;
}
.as-footer__wordmark {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(40px, 9vw, 120px);
	line-height: .85;
	letter-spacing: -.02em;
}
.as-footer__wordmark .as-i { font-weight: 400; }
.as-footer__cols {
	display: flex;
	gap: 54px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.as-footer__col { display: flex; flex-direction: column; gap: 12px; }
.as-footer__head { opacity: .45; }
.as-footer .as-nav__link { opacity: .8; }
.as-footer__legal {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 48px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .55;
}

/* =========================================================================
   IMAGE SLOTS (placeholder when no image set)
   ========================================================================= */

.as-slot {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--paper);
	overflow: hidden;
}
.as-slot__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.as-slot__label {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--muted);
	opacity: .8;
	text-align: center;
	padding: 12px;
}
.as-slot--cover { position: absolute; }
.as-slot--noir { background: #161412; }
.as-slot--noir .as-slot__label { color: rgba(239, 233, 223, .5); }

/* =========================================================================
   SCROLL REVEAL
   ========================================================================= */

[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
}
[data-reveal].is-shown { opacity: 1; transform: none; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 900px) {
	.as-nav { padding: 14px 20px; }
	.as-nav__links { gap: 16px; }
	.as-nav__link[href="#manifesto"], .as-nav__link[href="#archive"] { display: none; }

	.as-hero__fg, .as-hero__meta, .as-manifesto,
	.as-featured, .as-collection, .as-stands, .as-subscribe,
	.as-footer { padding-left: 20px; padding-right: 20px; }
	.as-hero__meta { right: 20px; }

	.as-featured__inner,
	.as-stands__feature { grid-template-columns: 1fr; }

	/* collapse 12-col editorial grid to a simple 2-col mosaic */
	.as-grid { grid-template-columns: repeat(2, 1fr); }
	.as-plate { grid-column: span 1 !important; aspect-ratio: 4 / 5 !important; }
	.as-plate:nth-child(6), .as-plate:nth-child(8) { grid-column: span 2 !important; aspect-ratio: 16 / 10 !important; }

	.as-archive__grid { grid-template-columns: repeat(2, 1fr); }

	/* captions always visible on touch */
	.as-plate__cap { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
	.as-grid { grid-template-columns: 1fr; }
	.as-plate, .as-plate:nth-child(6), .as-plate:nth-child(8) { grid-column: span 1 !important; aspect-ratio: 4 / 5 !important; }
	.as-archive__grid { grid-template-columns: 1fr; }
	.as-footer__top { flex-direction: column; align-items: flex-start; }
	.as-stands__specs { gap: 24px; flex-wrap: wrap; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
	.as-marquee__track, .as-scroll__line { animation: none; }
	[data-reveal] { opacity: 1; transform: none; transition: none; }
}