/**
 * Member-content card styles — distinctive per-type designs.
 *
 *   .knack-content-card--poetry  → "Verse Manuscript" — cream paper, serif,
 *                                   fleuron, signature attribution.
 *   .knack-content-card--article → "Editorial Column" — image strip, dateline,
 *                                   bold sans headline, reading-time stamp.
 *   .knack-content-card--generic → Clean fallback for everything else.
 *
 * Loaded on the homepage so the unified-search overlay can render these,
 * and on the member-content archive when one exists.
 *
 * @package Knack
 */

/* ──────────────────────────────────────────────────────────
   Shared
   ────────────────────────────────────────────────────────── */

.knack-content-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid var(--knack-border, rgba(15, 23, 42, 0.1));
	background: var(--knack-surface, #fff);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 22px -14px rgba(15, 23, 42, 0.16);
	transition: transform .3s cubic-bezier(.34, 1.1, .4, 1), box-shadow .3s ease, border-color .25s ease;
}

.knack-content-card__link {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.knack-content-card:hover {
	transform: translateY(-6px);
	border-color: color-mix(in srgb, var(--knack-accent, #60335e) 35%, var(--knack-border, rgba(15, 23, 42, 0.1)));
	box-shadow: 0 26px 44px -18px rgba(15, 23, 42, 0.28), 0 10px 20px -10px rgba(15, 23, 42, 0.12);
}

/* "Read →" affordance — hidden at rest, slides in on hover. Mirrors the
   music / event cards' "View →" so the whole homepage feed feels cohesive. */
.knack-content-card__read-more {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-family: -apple-system, "Segoe UI", Inter, system-ui, sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--knack-accent, #60335e);
	opacity: 0;
	transform: translateX(-5px);
	transition: opacity .25s ease, transform .25s ease;
	flex-shrink: 0;
	white-space: nowrap;
}
.knack-content-card:hover .knack-content-card__read-more,
.knack-content-card:focus-within .knack-content-card__read-more {
	opacity: 1;
	transform: translateX(0);
}
.knack-content-card__read-more svg {
	width: 13px;
	height: 13px;
}

/* ──────────────────────────────────────────────────────────
   Poetry / Lyrics — "Modernist Editorial / Bookcover"
   ──────────────────────────────────────────────────────────
   Single strong signature: a thin colored band at the very top
   of the card (like the spine band on a Penguin Modern Classics)
   plus a centered fleuron rule between title and verse. The title
   is the hero — treat each piece like a book whose name carries
   the brand. Verse is excerpted in italic serif beneath, byline
   in tracked caps + slash separator + italic date. No vertical
   rails, no watermarks fighting the text — every glyph is
   intentional.

   Anatomy:
     ╞═══════════════════════════════╡  ← 3-px accent band (::before)
     │                                │
     │  POETRY               №410     │  ← eyebrow row, justified
     │                                │
     │  TEST HAIKU POEM               │  ← title, big serif
     │                                │
     │  ──────  ❦  ──────             │  ← centered ornament
     │                                │
     │  An old silent pond, a frog    │
     │  jumps into the pond, splash   │  ← verse, italic serif
     │  silence again.                │
     │                                │
     │  KNACK / Mar 20, 2026          │  ← byline
     └────────────────────────────────┘
   ────────────────────────────────────────────────────────── */

.knack-content-card--poetry {
	position: relative;
	/* Subtle off-white "paper" tone — barely warm, never yellow. The
	   diagonal gradient adds a faint paper grain so the card doesn't
	   read as the same flat white surface as the article + generic
	   cards next to it. */
	background:
		linear-gradient(135deg, #fdfcf7 0%, #f9f7ef 100%);
	border: 1px solid #ece7d8;
	padding: 22px 22px 18px;
	min-height: 250px;
	display: flex;
	flex-direction: column;
	font-family: Georgia, "Cormorant Garamond", "Playfair Display", "Times New Roman", serif;
	color: var(--knack-text-primary, #1f2937);
	overflow: hidden;
	/* Layered shadow — a hairline edge below + a softer ambient drop.
	   Reads as a piece of paper sitting on a surface rather than a
	   filled rectangle. */
	box-shadow:
		0 1px 0 rgba(60, 50, 30, 0.04),
		0 6px 16px rgba(60, 50, 30, 0.05);
	transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

/* Dog-eared corner fold in the top-right. A single linear-gradient
   paints three regions stacked along the 225° diagonal:
     • lower-left half → transparent (the card background shows through)
     • a 1-px crease line at the diagonal → the visible "fold edge"
     • upper-right half → a slightly darker paper tone (the back of
       the page that's now showing because it's folded forward)
   Replaces the top accent band as the card's signature physical
   detail without competing with the typography. */
.knack-content-card--poetry::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 26px;
	height: 26px;
	background: linear-gradient(225deg,
		#ebe3cc 0%,
		#ebe3cc 49%,
		rgba(60, 50, 30, 0.22) 49.5%,
		rgba(60, 50, 30, 0.22) 50.5%,
		transparent 51%,
		transparent 100%);
	pointer-events: none;
}

.knack-content-card--poetry .knack-content-card__link {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
	position: relative;
	z-index: 1;
}

.knack-content-card--poetry:hover {
	transform: translateY(-6px);
	box-shadow:
		0 1px 0 rgba(60, 50, 30, 0.05),
		0 26px 44px -18px rgba(60, 50, 30, 0.22),
		0 10px 20px -10px rgba(60, 50, 30, 0.12);
	border-color: color-mix(in srgb, var(--knack-accent, #60335e) 30%, #ddd5be);
}

/* Eyebrow row — type label on the left, manuscript number on the
   right, justified so the row spans the card width. */
.knack-content-card__eyebrow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-family: Georgia, serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-top: 2px;
}

.knack-content-card__eyebrow-type {
	color: var(--knack-accent, #60335e);
}

.knack-content-card__eyebrow-no {
	color: var(--knack-text-muted, #9ca3af);
	font-style: normal;
}

/* Title — the hero. Big serif, slight negative tracking, line-clamped
   to keep card heights consistent in a multi-card grid. */
.knack-content-card__verse-title {
	font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.01em;
	color: var(--knack-text-primary, #111);
	margin: 4px 0 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Centered ornament row — thin rule, fleuron, thin rule. The single
   most "literary" detail on the card and the only horizontal break
   between sections. */
.knack-content-card__ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 4px 0 6px;
	color: var(--knack-accent, #60335e);
}

.knack-content-card__ornament-rule {
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--knack-border, #d4ccd1), transparent);
	max-width: 60px;
}

.knack-content-card__ornament-mark {
	font-size: 14px;
	line-height: 1;
	opacity: 0.85;
}

/* Verse excerpt — italic serif, secondary to the title. Line-clamped
   to 3 lines so cards stay uniform height in a grid. */
.knack-content-card__verse {
	font-style: italic;
	font-size: 14px;
	line-height: 1.55;
	color: var(--knack-text-secondary, #555);
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1 1 auto;
	text-align: center;
}

.knack-content-card__verse::before,
.knack-content-card__verse::after {
	content: none;
}

/* Byline footer — author in tracked caps, slash separator in accent,
   date in italic. Sits at the very bottom thanks to the title's
   `flex: 1 1 auto`. */
.knack-content-card__verse-byline {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	font-family: Georgia, serif;
	font-size: 11px;
	color: var(--knack-text-muted, #9ca3af);
	margin-top: auto;
	padding-top: 8px;
}

.knack-content-card__verse-author {
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--knack-text-secondary, #555);
}

.knack-content-card__verse-byline-sep {
	color: var(--knack-accent, #60335e);
	opacity: 0.7;
}

.knack-content-card__verse-date {
	font-style: italic;
	letter-spacing: 0.04em;
}

/* ──────────────────────────────────────────────────────────
   Article / Prose / Tutorial — "Editorial Column"
   ──────────────────────────────────────────────────────────
   Magazine-style: image strip up top, big bold sans headline,
   2-line lede, reading-time + byline footer.
   ────────────────────────────────────────────────────────── */

/* The article card is a NEWSPAPER CLIPPING — cool newsprint surface, ink
   serif type, a grayscale press photo that warms to colour on hover, a
   masthead double-rule and a drop-cap lede. A distinct physical metaphor
   from the poetry manuscript (which is warm + centred); this one is cool,
   left-aligned and journalistic. */
.knack-content-card--article {
	display: flex;
	flex-direction: column;
	background: #f6f5f1;
	border-color: #dcdbd3;
}
.knack-content-card--article .knack-content-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Press photo — runs grayscale, develops to colour + a slow zoom on hover. */
.knack-content-card__news-photo {
	position: relative;
	aspect-ratio: 20 / 9;
	overflow: hidden;
	background: #e7e6df;
	border-bottom: 1px solid #d8d7cf;
}
.knack-content-card__news-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(1) contrast(1.04);
	transition: filter .5s ease, transform .6s cubic-bezier(.2, 0, .2, 1);
}
.knack-content-card:hover .knack-content-card__news-img {
	filter: grayscale(0) contrast(1);
	transform: scale(1.04);
}
.knack-content-card__news-photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.025) 0 1px, transparent 1px 4px),
		#e7e6df;
}
.knack-content-card__news-glyph { width: 40px; height: 40px; color: #b3b1a6; }

/* Body — ink on newsprint, left-aligned. */
.knack-content-card__news-body {
	padding: 12px 16px 13px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	color: #1c1a15;
}

/* Masthead — rubric · dotted leader · dateline, under a double rule. */
.knack-content-card__news-masthead {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 6px;
	margin-bottom: 9px;
	border-bottom: 3px double #2a271f;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.knack-content-card__news-rubric { color: var(--knack-accent, #60335e); white-space: nowrap; }
.knack-content-card__news-leader {
	flex: 1 1 auto;
	height: 0;
	border-bottom: 1px dotted #b3b1a6;
}
.knack-content-card__news-date { color: #8a877c; white-space: nowrap; letter-spacing: 0.08em; }

/* Headline — bold serif, the story's masthead. */
.knack-content-card__news-headline {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.005em;
	color: #16140f;
	margin: 0 0 7px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Lede — drop-cap excerpt that reads like a newsprint column. max-height
   (not -webkit-box) so the floated drop cap keeps working. */
.knack-content-card__news-lede {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 13px;
	line-height: 1.5;
	color: #46443c;
	margin: 0;
	max-height: 3.9em;
	overflow: hidden;
}
.knack-content-card__news-lede::first-letter {
	float: left;
	font-size: 2.7em;
	line-height: 0.72;
	font-weight: 700;
	padding: 3px 6px 0 0;
	color: var(--knack-accent, #60335e);
}

/* Byline — italic serif under a hairline, with the "Read →" affordance. */
.knack-content-card__news-byline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 9px;
	border-top: 1px solid #d8d7cf;
	font-family: Georgia, serif;
	font-size: 11.5px;
	font-style: italic;
	color: #6b6960;
}
.knack-content-card__news-author {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.knack-content-card__byline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--knack-text-secondary, #555);
}

.knack-content-card__byline img {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.knack-content-card__reading-time {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.knack-content-card__reading-time svg {
	opacity: 0.7;
}

/* ──────────────────────────────────────────────────────────
   Generic fallback — Visual Art, Audio, Video, Live Session, etc.
   ────────────────────────────────────────────────────────── */

.knack-content-card--generic {
	display: flex;
	flex-direction: column;
}

.knack-content-card__generic-media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--knack-bg-secondary, #f3f4f6);
}

.knack-content-card__generic-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s cubic-bezier(.2, 0, .2, 1);
}
.knack-content-card:hover .knack-content-card__generic-img { transform: scale(1.05); }

.knack-content-card__generic-media--placeholder {
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--knack-accent, #60335e) 14%, #fff),
		color-mix(in srgb, var(--knack-accent, #60335e) 30%, #fff));
}

.knack-content-card__generic-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--knack-accent, #60335e) 92%, #000);
	color: #fff;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.knack-content-card__generic-body {
	padding: 14px 16px 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
}

.knack-content-card__generic-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--knack-text-primary, #111);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.knack-content-card__generic-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 11px;
	border-top: 1px solid var(--knack-border-soft, rgba(0, 0, 0, 0.06));
}

.knack-content-card__generic-meta {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: var(--knack-text-muted, #888);
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.knack-content-card__dot {
	opacity: 0.5;
}

/* ──────────────────────────────────────────────────────────
   Dark mode
   ────────────────────────────────────────────────────────── */

/* Article and generic share a neutral dark surface — the per-type
   personality there is carried by typography. Poetry keeps its paper
   metaphor in dark mode too: a dark warm-grey tone instead of the
   off-white, with the corner fold still visible. */
body.aoty-dark-mode .knack-content-card--poetry {
	background: linear-gradient(135deg, #1f1c14 0%, #2a261c 100%);
	border-color: rgba(235, 227, 204, 0.12);
	box-shadow:
		0 1px 0 rgba(0, 0, 0, 0.4),
		0 6px 16px rgba(0, 0, 0, 0.35);
}

body.aoty-dark-mode .knack-content-card--poetry::before {
	background: linear-gradient(225deg,
		#3a3424 0%,
		#3a3424 49%,
		rgba(235, 227, 204, 0.22) 49.5%,
		rgba(235, 227, 204, 0.22) 50.5%,
		transparent 51%,
		transparent 100%);
}

body.aoty-dark-mode .knack-content-card--generic {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.08);
}

/* Article keeps its newspaper metaphor in dark mode — a dark "evening
   edition" newsprint with light ink. */
body.aoty-dark-mode .knack-content-card--article {
	background: #17150f;
	border-color: rgba(235, 227, 204, 0.12);
}
body.aoty-dark-mode .knack-content-card__news-body { color: #e8e6df; }
body.aoty-dark-mode .knack-content-card__news-headline { color: #f3f1ea; }
body.aoty-dark-mode .knack-content-card__news-lede { color: #b6b3a8; }
body.aoty-dark-mode .knack-content-card__news-date { color: #8f8c81; }
body.aoty-dark-mode .knack-content-card__news-masthead { border-bottom-color: #56503f; }
body.aoty-dark-mode .knack-content-card__news-leader { border-bottom-color: #56503f; }
body.aoty-dark-mode .knack-content-card__news-byline { border-top-color: rgba(235, 227, 204, 0.12); color: #9a978c; }
body.aoty-dark-mode .knack-content-card__news-photo { background: #26241c; border-bottom-color: rgba(235, 227, 204, 0.12); }

/* ──────────────────────────────────────────────────────────
   /reads/ archive — public "Reads" landing (hero + type chips + card grid).
   Reuses the content cards above; this just supplies the page layout.
   ────────────────────────────────────────────────────────── */
.knack-reads-archive {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px 80px;
}
.knack-reads-archive__hero {
	text-align: center;
	padding: 44px 0 18px;
}
.knack-reads-archive__hero h1 {
	margin: 0;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--knack-text-primary, #16140f);
}
.knack-reads-archive__hero p {
	margin: 8px auto 0;
	max-width: 540px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--knack-text-secondary, #555);
}

.knack-reads-archive__search {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 560px;
	margin: 0 auto 18px;
	padding: 11px 16px;
	border-radius: 999px;
	background: var(--knack-bg-secondary, #f3f4f6);
	border: 1px solid var(--knack-border, rgba(15, 23, 42, 0.08));
}
.knack-reads-archive__search svg { color: var(--knack-text-muted, #888); flex-shrink: 0; }
.knack-reads-archive__search input {
	flex: 1 1 auto;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 14px;
	color: var(--knack-text-primary, #16140f);
	outline: none;
}

.knack-reads-archive__types {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 28px;
}
.knack-reads-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 15px;
	border-radius: 999px;
	border: 1px solid var(--knack-border, rgba(15, 23, 42, 0.12));
	background: var(--knack-surface, #fff);
	color: var(--knack-text-secondary, #555);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.knack-reads-chip svg { width: 15px; height: 15px; }
.knack-reads-chip:hover {
	border-color: color-mix(in srgb, var(--knack-accent, #60335e) 45%, var(--knack-border, rgba(15, 23, 42, 0.12)));
	color: var(--knack-text-primary, #16140f);
	transform: translateY(-1px);
}
.knack-reads-chip.is-active {
	background: var(--knack-accent, #60335e);
	border-color: var(--knack-accent, #60335e);
	color: #fff;
}

.knack-reads-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 22px;
	align-items: stretch;
}

.knack-reads-archive__pagination {
	margin: 36px 0 0;
	display: flex;
	justify-content: center;
}
.knack-reads-archive__pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.knack-reads-archive__pagination a,
.knack-reads-archive__pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border-radius: 10px;
	border: 1px solid var(--knack-border, rgba(15, 23, 42, 0.1));
	background: var(--knack-surface, #fff);
	color: var(--knack-text-secondary, #555);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.knack-reads-archive__pagination a:hover {
	border-color: var(--knack-accent, #60335e);
	color: var(--knack-accent, #60335e);
}
.knack-reads-archive__pagination .current {
	background: var(--knack-accent, #60335e);
	border-color: var(--knack-accent, #60335e);
	color: #fff;
}

.knack-reads-archive__empty {
	text-align: center;
	padding: 64px 24px;
	max-width: 460px;
	margin: 0 auto;
}
.knack-reads-archive__empty svg { color: var(--knack-accent, #60335e); margin-bottom: 14px; }
.knack-reads-archive__empty h2 { margin: 0 0 6px; font-size: 20px; color: var(--knack-text-primary, #16140f); }
.knack-reads-archive__empty p { margin: 0 0 18px; color: var(--knack-text-secondary, #555); }

@media (max-width: 600px) {
	.knack-reads-archive { padding: 0 16px 48px; }
	.knack-reads-archive__grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
}

body.aoty-dark-mode .knack-reads-archive__hero h1,
body.aoty-dark-mode .knack-reads-chip.is-active { color: #fff; }
body.aoty-dark-mode .knack-reads-chip {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.12);
	color: var(--knack-text-secondary, #cbd5e1);
}