/* ==========================================================================
   ABISMO — visual layer on top of Attila
   Loaded after style.css. Overrides palette, type and adds the
   carta list / letter / Postdata ledger treatments.
   Base scale: html font-size 62.5% → 1rem = 10px.
   ========================================================================== */

/* --- Type + colour tokens ------------------------------------------------ */
:root {
	--gh-font-heading: 'Spectral', Georgia, 'Times New Roman', serif;
	--gh-font-body: 'Spectral', Georgia, 'Times New Roman', serif;
	--font-label: 'Space Grotesk', system-ui, -apple-system, sans-serif;

	/* Bosque green — also set this as the Accent colour in Ghost admin */
	--ghost-accent-color: #3B5341;

	/* Bone paper */
	--color-background-main: #F5F1E7;
	--color-background-secondary: #EFE9DD;
	--color-background-contrast: #E4DCCB;
	--color-background-overlay: rgba(28, 26, 23, 0.92);
	--color-content-lead: #1C1A17;
	--color-content-main: #26231E;
	--color-content-secondary: #6E675C;

	--color-faint: #C4BBA6;
}

.theme-dark:root {
	--ghost-accent-color: #7FA487;
	--color-background-main: #1B1C17;
	--color-background-secondary: #23241E;
	--color-background-contrast: #34352D;
	--color-background-overlay: rgba(10, 11, 8, 0.92);
	--color-content-lead: #F3EFE4;
	--color-content-main: #D8D3C6;
	--color-content-secondary: #8F8A7D;
	--color-faint: #55564C;
}
@media (prefers-color-scheme: dark) {
	html:not(.theme-light):root {
		--ghost-accent-color: #7FA487;
		--color-background-main: #1B1C17;
		--color-background-secondary: #23241E;
		--color-background-contrast: #34352D;
		--color-background-overlay: rgba(10, 11, 8, 0.92);
		--color-content-lead: #F3EFE4;
		--color-content-main: #D8D3C6;
		--color-content-secondary: #8F8A7D;
		--color-faint: #55564C;
	}
}

body {
	font-weight: 400;
	letter-spacing: -0.002em;
}

/* --- Navigation wordmark ------------------------------------------------- */
.site-mark {
	margin-right: 3rem;
	font-family: var(--font-label);
	font-weight: 600;
	font-size: 1.2em;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}
.site-mark a {
	color: var(--color-content-lead);
	text-decoration: none;
	padding: 1rem 0;
	display: block;
}
@media only screen and (max-width: 640px) {
	.site-mark { display: none; }
}

/* Nav links + buttons → Space Grotesk, quiet */
.nav-header ul,
.nav-header a.nav-button-secondary,
.nav-header a.nav-button-primary {
	font-family: var(--font-label);
}
.nav-header li a {
	font-size: 1.15em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 500;
}
.nav-header a.nav-button-primary {
	font-size: 1.05em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	box-shadow: none;
	border-radius: 2px;
}
.nav-header a.nav-button-secondary {
	font-size: 1.05em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 2px;
}
.nav-header li.active a:before { border-radius: 0; }

/* --- Masthead ------------------------------------------------------------ */
.blog-header {
	padding-top: calc(9rem + 3vw);
}
.blog-header.has-cover {
	padding-top: calc(16rem + 6vw);
}
.blog-header .blog-box {
	padding-bottom: calc(3rem + 1.5vw);
}
.blog-name {
	font-size: 4.4em;
	font-weight: 500;
	letter-spacing: -0.015em;
}
.blog-description {
	margin-top: 1.4rem;
	font-size: 1.9em;
	font-weight: 400;
	color: var(--color-content-secondary);
}

/* ==========================================================================
   CARTA LIST (index / tag / author) — number · title · date
   ========================================================================== */
.container .post.carta-item .post-box {
	padding: 0;
	border-bottom: 0;
}
.carta-row {
	display: grid;
	grid-template-columns: 6.4rem 1fr auto;
	gap: 0.4rem 3rem;
	align-items: baseline;
	padding: 3rem 0;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid var(--color-background-contrast);
}
.carta-item:first-of-type .carta-row { border-top: 1px solid var(--color-background-contrast); }

.carta-kicker {
	display: none;
	grid-column: 2;
	font-family: var(--font-label);
	font-size: 1em;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ghost-accent-color);
	margin-bottom: 1.2rem;
}
.carta-number {
	grid-row: 1 / span 3;
	font-family: var(--gh-font-heading);
	font-size: 3rem;
	font-weight: 500;
	line-height: 1;
	color: var(--color-faint);
	letter-spacing: -0.02em;
}
.carta-number.is-empty { visibility: hidden; }
.carta-title {
	grid-column: 2;
	margin: 0;
	font-family: var(--gh-font-heading);
	font-size: 2.6rem;
	font-weight: 500;
	line-height: 1.22;
	color: var(--color-content-lead);
}
.carta-title a { color: inherit; text-decoration: none; font-weight: inherit; }
.carta-excerpt {
	grid-column: 2;
	margin: 0.8rem 0 0;
	font-size: 1.7rem;
	line-height: 1.55;
	color: var(--color-content-secondary);
	max-width: 52rem;
}
.carta-date {
	grid-column: 3;
	grid-row: 1;
	font-family: var(--font-label);
	font-size: 1.1rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-faint);
	white-space: nowrap;
	text-align: right;
}
.carta-lang {
	display: block;
	margin-top: 0.4rem;
	color: var(--ghost-accent-color);
}
.carta-row:hover .carta-title { color: var(--ghost-accent-color); }

/* Graceful fallback when a letter has no #n- number tag */
.carta-row.no-number { grid-template-columns: 1fr auto; }
.carta-row.no-number .carta-number { display: none; }
.carta-row.no-number .carta-kicker,
.carta-row.no-number .carta-title,
.carta-row.no-number .carta-excerpt { grid-column: 1; }
.carta-row.no-number .carta-date { grid-column: 2; grid-row: 1; }
.home-template:not(.paged) .carta-item:first-of-type .carta-row.no-number { grid-template-columns: 1fr; }
.home-template:not(.paged) .carta-item:first-of-type .carta-row.no-number .carta-date { grid-column: 1; }

/* Hero: newest letter, home page 1 only */
.home-template:not(.paged) .carta-item:first-of-type .carta-row {
	grid-template-columns: auto 1fr;
	gap: 0 5rem;
	align-items: center;
	padding: calc(4rem + 2vw) 0 calc(4rem + 2vw);
}
.home-template:not(.paged) .carta-item:first-of-type .carta-kicker { display: block; grid-column: 2; }
.home-template:not(.paged) .carta-item:first-of-type .carta-number {
	grid-row: 1 / span 4;
	font-size: clamp(9rem, 4rem + 8vw, 16rem);
	color: var(--color-content-lead);
}
.home-template:not(.paged) .carta-item:first-of-type .carta-title { grid-column: 2; font-size: clamp(3.2rem, 2rem + 2.4vw, 5rem); line-height: 1.06; }
.home-template:not(.paged) .carta-item:first-of-type .carta-excerpt { grid-column: 2; font-size: 2rem; max-width: 46rem; margin-top: 1.6rem; }
.home-template:not(.paged) .carta-item:first-of-type .carta-date { grid-row: auto; grid-column: 2; text-align: left; margin-top: 1.8rem; }

@media only screen and (max-width: 640px) {
	.carta-row { grid-template-columns: 4.4rem 1fr; }
	.carta-date { grid-column: 2; grid-row: auto; text-align: left; margin-top: 0.8rem; }
	.home-template:not(.paged) .carta-item:first-of-type .carta-row { grid-template-columns: 1fr; }
	.home-template:not(.paged) .carta-item:first-of-type .carta-number,
	.home-template:not(.paged) .carta-item:first-of-type .carta-kicker,
	.home-template:not(.paged) .carta-item:first-of-type .carta-title,
	.home-template:not(.paged) .carta-item:first-of-type .carta-excerpt,
	.home-template:not(.paged) .carta-item:first-of-type .carta-date { grid-column: 1; }
}

/* ==========================================================================
   LETTER (single post) header
   ========================================================================== */
.letter-head {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 4rem;
	align-items: baseline;
	padding-bottom: 3rem;
	border-bottom: 1px solid var(--color-background-contrast);
}
.letter-number {
	font-family: var(--gh-font-heading);
	font-size: clamp(5rem, 3rem + 3vw, 7.6rem);
	font-weight: 500;
	line-height: 0.9;
	color: var(--color-content-lead);
}
.letter-number.is-empty { display: none; }
.letter-number.is-empty + .letter-head-body { grid-column: 1 / -1; }
.letter-kicker {
	font-family: var(--font-label);
	font-size: 1.1rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ghost-accent-color);
	margin-bottom: 1.4rem;
}
.post-header .letter-head .post-title,
.post-header .pd-post-head .post-title {
	margin: 0;
	font-size: clamp(3rem, 2rem + 2.2vw, 4.4rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
}
.letter-salutation {
	margin: 3.5rem 0 0;
	font-size: 1.9rem;
	color: var(--color-content-secondary);
}
@media only screen and (max-width: 640px) {
	.letter-head { grid-template-columns: 1fr; gap: 1.4rem 0; }
	.letter-number { font-size: 5.4rem; }
}

/* No-italic serif: keep emphasis as weight, not slant, site-wide feel */
.post-content blockquote { font-style: normal; font-size: 1.25em; }

/* ==========================================================================
   POSTDATA — ledger of book & film notes
   ========================================================================== */
.pd-header {
	padding-top: calc(9rem + 3vw);
}
.pd-kicker {
	font-family: var(--font-label);
	font-size: 1.1rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ghost-accent-color);
	margin-bottom: 1.2rem;
}
.pd-title {
	margin: 0;
	font-family: var(--gh-font-heading);
	font-size: 4.6rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--color-content-lead);
}
.pd-description {
	margin: 1.6rem 0 0;
	font-size: 1.9rem;
	line-height: 1.55;
	color: var(--color-content-secondary);
	max-width: 44rem;
}
.pd-filters {
	display: flex;
	gap: 1rem;
	margin-top: 2.6rem;
	font-family: var(--font-label);
	font-size: 1.1rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.pd-filters a {
	padding: 0.7rem 1.5rem;
	border: 1px solid var(--color-background-contrast);
	border-radius: 2px;
	color: var(--color-content-secondary);
	text-decoration: none;
	transition: all ease-out 0.15s;
}
.pd-filters a.is-active {
	background: var(--ghost-accent-color);
	border-color: var(--ghost-accent-color);
	color: #F5F1E7;
}
.pd-filters a:hover { border-color: var(--ghost-accent-color); }

.pd-ledger { margin-top: 1rem; }
.pd-row {
	display: grid;
	grid-template-columns: 10rem 1fr 7rem;
	gap: 0.6rem 2.6rem;
	align-items: baseline;
	padding: 2.6rem 0;
	border-top: 1px solid var(--color-background-contrast);
	text-decoration: none;
	color: inherit;
}
.pd-ledger .pd-row:last-child { border-bottom: 1px solid var(--color-background-contrast); }
.pd-medium {
	grid-row: 1 / span 2;
	font-family: var(--font-label);
	font-size: 1.05rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.9;
}
.pd-medium.pd-libro { color: var(--ghost-accent-color); }
.pd-medium.pd-pelicula { color: var(--color-content-secondary); }
.pd-work {
	grid-column: 2;
	margin: 0;
	font-family: var(--gh-font-heading);
	font-size: 2.3rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--color-content-lead);
}
.pd-note {
	grid-column: 2;
	margin: 0.6rem 0 0;
	font-size: 1.6rem;
	line-height: 1.55;
	color: var(--color-content-secondary);
	max-width: 50rem;
}
.pd-when {
	grid-column: 3;
	grid-row: 1;
	font-family: var(--font-label);
	font-size: 1.05rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-faint);
	text-align: right;
	white-space: nowrap;
}
.pd-row:hover .pd-work { color: var(--ghost-accent-color); }
@media only screen and (max-width: 640px) {
	.pd-row { grid-template-columns: 8rem 1fr; }
	.pd-when { grid-column: 2; grid-row: auto; text-align: left; margin-top: 0.6rem; }
}

/* Single Postdata note: lighter header than a letter */
.pd-post-head {
	padding-bottom: 3rem;
	border-bottom: 1px solid var(--color-background-contrast);
}
.pd-post-head .letter-kicker { color: var(--ghost-accent-color); }

/* ==========================================================================
   PAGES (About / Acerca de, etc.)
   ========================================================================== */
.page-template .post-header { padding-top: calc(9rem + 3vw); padding-bottom: 0; }
.page-template .post-header .inner { text-align: center; max-width: 74rem; }
.page-template .post-header .post-title {
	margin: 0;
	font-size: clamp(3.4rem, 2.4rem + 2.4vw, 5.2rem);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.06;
}
.page-template .post-header .inner::after {
	content: '';
	display: block;
	width: 5.6rem;
	height: 1px;
	background: var(--color-background-contrast);
	margin: 2.8rem auto 0;
}
/* Bespoke kicker on the About page (slug = about) */
.page-about .post-header .inner::before {
	content: 'Acerca de';
	display: block;
	font-family: var(--font-label);
	font-size: 1.1rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ghost-accent-color);
	margin-bottom: 1.6rem;
}
/* Narrower, more intimate reading measure for pages */
.page-template .content .inner { max-width: 72rem; }
.page-template .post-content { font-size: 1.9em; }

/* ==========================================================================
   SUBSCRIBE box (green band) — shows to logged-out visitors
   ========================================================================== */
.post-subscribe {
	margin: 8rem 0 0;
	padding: calc(4rem + 2vw) 4rem;
	background: var(--ghost-accent-color);
	text-align: center;
	border: 0;
}
.post-subscribe .subscribe-inner { max-width: 44rem; margin: 0 auto; }
.post-subscribe .subscribe-title {
	margin: 0 0 2.6rem;
	font-family: var(--gh-font-heading);
	font-size: 2.4rem;
	line-height: 1.35;
	font-weight: 500;
	color: #F5F1E7;
}
.post-subscribe .subscribe-button {
	display: inline-block;
	padding: 1.3rem 3rem;
	background: transparent;
	border: 1px solid rgba(245, 241, 231, 0.55);
	color: #F5F1E7;
	font-family: var(--font-label);
	font-size: 1.2rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 500;
	text-decoration: none;
	border-radius: 2px;
	cursor: pointer;
	transition: background ease-out 0.15s;
}
.post-subscribe .subscribe-button:hover { background: rgba(245, 241, 231, 0.12); }

/* ==========================================================================
   FOOTER — dark band with newsletter + RSS
   ========================================================================== */
.nav-footer {
	margin-top: calc(8rem + 4vw);
	padding-top: calc(4rem + 2vw);
	padding-bottom: calc(4rem + 2vw);
	background: #1C1A17;
	color: #B7AE99;
	font-family: var(--font-label);
	font-size: 1.15rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.theme-dark .nav-footer { background: #111208; }
.nav-footer .nav-wrapper { align-items: center; }
.nav-footer .nav-copy { color: #B7AE99; }
.nav-footer a { color: #B7AE99; }
.nav-footer a:hover { color: #F5F1E7; }
.nav-footer .nav-center { gap: 2.6rem; align-items: center; }
.nav-footer .nav-publish { color: #6E675C; }
.nav-footer .nav-publish a { color: #8A8271; }
.nav-footer .nav-publish a:hover { color: #F5F1E7; }
.nav-footer .theme-icon { border-color: #6E675C; }
.nav-footer .theme-text { letter-spacing: 0.06em; }

/* ==========================================================================
   PAGINATION — "Más cartas" / "Más notas" (rectangular, no pill)
   ========================================================================== */
.pag {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	padding: calc(4rem + 2vw) 0 0;
	text-align: center;
}
.pag-more {
	display: inline-block;
	padding: 1.4rem 3.2rem;
	border: 1.5px solid var(--color-content-lead);
	border-radius: 0;
	font-family: var(--font-label);
	font-size: 1.15rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--color-content-lead);
	text-decoration: none;
	transition: all ease-out 0.15s;
}
.pag-more:hover {
	background: var(--color-content-lead);
	color: var(--color-background-main);
}
.pag-meta {
	display: flex;
	gap: 2rem;
	align-items: center;
	font-family: var(--font-label);
	font-size: 1.05rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-faint);
}
.pag-meta a { color: var(--color-content-secondary); text-decoration: none; }
.pag-meta a:hover { color: var(--ghost-accent-color); }