/* ================================================================== *
 *  Letters to the Sea — restyle of Salient toward a literary journal.
 *  Loaded after Salient's CSS so these rules win.
 * ================================================================== */

:root {
	--lts-heading-font: "Fraunces", Georgia, "Times New Roman", serif;
	--lts-body-font:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---- Paper ground + ink text ------------------------------------- */
body,
body.material,
#ajax-content-wrap,
.container-wrap,
.main-content {
	background-color: var(--lts-cream);
	color: var(--lts-ink);
}
body { font-family: var(--lts-body-font); font-weight: 300; letter-spacing: 0.01em; }
#ajax-content-wrap, .container-wrap { overflow-x: hidden; } /* contain full-bleed hero */

/* ---- Headings: editorial serif, unhurried ------------------------ */
h1, h2, h3, h4, h5, h6,
.nectar-flip-box h3, .heading-title h1, .heading-title h2,
.span_12 h1, .span_12 h2, .post-area h2, .single-letters h1 {
	font-family: var(--lts-heading-font) !important;
	color: var(--lts-ink);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.1;
}
h1 { font-weight: 360; font-size: clamp(2.6rem, 5vw, 4.4rem); }
h2 { font-weight: 380; font-size: clamp(1.9rem, 3vw, 2.8rem); margin-top: 1.6em; }

/* ---- Body copy rhythm -------------------------------------------- */
p { line-height: 1.8; font-size: 1.05rem; max-width: 42rem; }
.lts-tagline { font-family: var(--lts-heading-font); font-style: italic; font-size: 1.4rem; color: var(--lts-river-green-d); margin-top: -0.4em; }

/* ---- Links / accents toward oxidised brass ----------------------- */
a { color: var(--lts-brass); text-underline-offset: 3px; }
a:hover { color: var(--lts-river-green-d); }

/* ================================================================== *
 *  Header — logo left, quiet paper bar, letterpress masthead
 * ================================================================== */
#header-outer, #header-outer .row, #header-outer #social-in-menu,
#header-outer[data-transparent-header="true"] {
	background-color: var(--lts-cream) !important;
	box-shadow: none !important;
	border-bottom: 1px solid var(--lts-haze);
}
#header-outer .logo-text, #top .logo-text {
	font-family: var(--lts-heading-font) !important;
	font-weight: 400; letter-spacing: 0.01em; color: var(--lts-ink) !important;
}
#header-outer #top nav > ul > li > a {
	font-family: var(--lts-body-font);
	font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; font-size: 12px;
	color: var(--lts-ink) !important;
}
#header-outer #top nav > ul > li > a:hover { color: var(--lts-brass) !important; }

/* ================================================================== *
 *  Cinematic hero — full-bleed placeholder with the masthead overlaid
 * ================================================================== */
.lts-hero {
	position: relative;
	width: 100vw;
	left: 50%; right: 50%;
	margin-left: -50vw; margin-right: -50vw;
	min-height: 72vh;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: 0 8vw 7vh;
	background: linear-gradient(to top, rgba(25,22,20,0.55), rgba(25,22,20,0.12) 55%, rgba(25,22,20,0.28)),
	            url("img/placeholder.svg") center/cover no-repeat;
	box-sizing: border-box;
	margin-top: -40px; /* sit beneath the header */
}
.lts-hero h1 { color: var(--lts-cream); margin: 0; }
.lts-hero .lts-tagline { color: rgba(244,236,226,0.92); }
.lts-hero::after {
	content: "a photograph, to come";
	position: absolute; top: 18px; right: 22px;
	font-family: var(--lts-body-font); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
	color: rgba(244,236,226,0.7); border: 1px solid rgba(244,236,226,0.4); padding: 3px 8px;
}

/* ---- Generic image placeholder block (Fleet card, inline) -------- */
a.lts-img-placeholder, .lts-img-placeholder {
	display: block !important; width: 100%; min-height: 300px; aspect-ratio: 3 / 2;
	background-image: url("img/placeholder.svg") !important;
	background-size: cover !important; background-position: center !important;
	background-repeat: no-repeat !important;
	border: 1px solid var(--lts-haze); text-decoration: none !important;
	margin: 0.5em 0 1em;
}

/* ================================================================== *
 *  Letters journal — warm the native featured-image placeholders
 * ================================================================== */
.letters .post-featured-img-wrap,
.post-type-archive-letters .post-featured-img-wrap,
.single-letters .post-featured-img-wrap {
	background-image: url("img/placeholder.svg") !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-color: var(--lts-haze) !important;
	min-height: 280px;
}
/* hide Salient's grey camera-icon glyph over our placeholder */
.letters .post-featured-img-wrap::before,
.post-type-archive-letters .post-featured-img-wrap::before { display: none !important; }

/* ================================================================== *
 *  Motifs — wax-seal rose on CTAs, postage perforation, river rule
 * ================================================================== */
.lts-cta a {
	display: inline-block; font-family: var(--lts-heading-font); font-style: italic;
	font-size: 1.25rem; color: var(--lts-river-green-d); text-decoration: none;
	border-bottom: 1px solid var(--lts-brass); padding-bottom: 2px;
}
.lts-cta a::before {
	content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 0.55em;
	border-radius: 50%; background: var(--lts-rose); vertical-align: 1px;
	box-shadow: inset 0 0 0 2px rgba(244,236,226,0.6); /* wax-seal dot */
}

/* postage-stamp perforation divider */
hr, .divider-border, .nectar-divider {
	border: none !important; height: 2px;
	background-image: radial-gradient(circle, var(--lts-haze) 1.5px, transparent 1.6px);
	background-size: 12px 2px; background-repeat: repeat-x;
	margin: 2.4em 0; max-width: 42rem;
}

/* river-line: a quiet brass rule under section headings */
.lts-rule { border: none; height: 1px; background: var(--lts-brass); opacity: 0.5; width: 4rem; margin: 1.2em 0; }

/* tuxedo-cat silhouette — Romie's calling card */
.lts-cat { display: block; width: 100%; height: 56px; margin: 2.4em 0 1.6em;
	background: url("img/cat.svg") center/contain no-repeat; opacity: 0.9; }

/* a letter's closing signature */
.lts-signoff { font-family: var(--lts-heading-font); font-style: italic;
	font-size: 1.3rem; line-height: 1.4; color: var(--lts-ink); margin-top: 1.4em; }

/* ---- Footer: quiet single line ----------------------------------- */
#footer-outer, #footer-outer #copyright {
	background-color: var(--lts-ink) !important;
}
#footer-outer #copyright, #footer-outer #copyright p {
	color: rgba(244,236,226,0.7) !important; font-family: var(--lts-body-font);
	font-size: 12px; letter-spacing: 0.08em;
}

/*
 *  When licensed fonts (Tiempos / Canela / Editorial New) are added,
 *  drop their @font-face here and update --lts-heading-font above —
 *  no other rule needs to change.
 */