/* ============================================================
   THE ABOVE AVERAGE LIFE — v4
   Dark base · geometry throughout · condensed caps type
   ============================================================ */
:root {
	--bg:        #0B1F14;
	--bg-1:      #0F2318;
	--bg-2:      #162B1E;
	--bg-3:      #1D3526;
	--line:      rgba(255,255,255,0.08);
	--line-gold: rgba(201,160,40,0.35);

	--text:      #F2EFE4;
	--text-soft: rgba(242,239,228,0.6);
	--text-faint:rgba(242,239,228,0.35);

	--gold:      #C9A028;
	--gold-bright:#F0CC72;
	--gold-glow: rgba(201,160,40,0.18);
	--emerald:   #0E9E60;
	--emerald-bright:#1DC070;
	--coral:     #D94020;

	--font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--font-body:    'Inter', -apple-system, sans-serif;
	--font-mono:    'Space Mono', monospace;

	--wrap:   1160px;
	--r:      12px;
	--ease:   cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.screen-reader-text{position:absolute;left:-9999px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 2rem}

/* ── TYPOGRAPHY ── */
.display{font-family:var(--font-display);font-weight:800;line-height:1;letter-spacing:0.01em;text-transform:uppercase}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;color:var(--gold);font-weight:700;text-transform:uppercase;margin:0 0 .8em}
.section-label{display:flex;align-items:center;gap:.7rem;margin-bottom:2rem}
.section-label::before{content:"";width:32px;height:2px;background:var(--gold);flex-shrink:0}
.section-label span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.15em;color:var(--gold);text-transform:uppercase}

/* ── GLOBAL GEOMETRY LAYER (SVG pattern on body) ── */
body::before{
	content:"";
	position:fixed;
	inset:0;
	background-image:
		linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
		linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
	background-size:60px 60px;
	z-index:0;
	pointer-events:none;
}
body::after{
	content:"";
	position:fixed;
	inset:0;
	background:
		radial-gradient(ellipse 80% 50% at 20% 0%,rgba(14,158,96,0.12) 0%,transparent 60%),
		radial-gradient(ellipse 60% 40% at 80% 100%,rgba(201,160,40,0.08) 0%,transparent 60%);
	z-index:0;
	pointer-events:none;
}
.site-header,.site-wrap{position:relative;z-index:1}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.75em 1.6em;border-radius:4px;font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:transform .2s var(--ease),box-shadow .2s var(--ease);cursor:pointer;border:none}
.btn--gold{background:var(--gold);color:#000;box-shadow:0 4px 20px rgba(201,160,40,0.35)}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(201,160,40,0.55)}
.btn--outline{border:1.5px solid rgba(255,255,255,0.25);color:var(--text);background:transparent}
.btn--outline:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
	position:sticky;top:0;z-index:200;
	background:rgba(13,20,16,0.85);
	backdrop-filter:blur(16px);
	-webkit-backdrop-filter:blur(16px);
	border-bottom:1px solid var(--line);
	padding:.9rem 2rem;
}
.site-header__inner{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.site-brand{display:flex;align-items:center;gap:.7rem}
.site-brand__wordmark{font-family:var(--font-display);font-size:1.3rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text)}
.site-brand__wordmark span{color:var(--gold)}
.nav-menu{display:flex;gap:.2rem}
.nav-menu a{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);padding:.5em 1em;border-radius:4px;transition:color .2s,background .2s}
.nav-menu a:hover{color:var(--text);background:rgba(255,255,255,0.06)}
.nav-toggle{display:none;background:none;border:none;padding:6px;flex-direction:column;gap:5px}
.nav-toggle span{width:22px;height:2px;background:var(--text);display:block}
.site-wrap{position:relative;z-index:1}

/* ============================================================
   HERO — left-aligned, massive type
   ============================================================ */
.hero{
	position:relative;
	padding:6rem 2rem 5rem;
	overflow:hidden;
}
/* hero-specific geometry */
.hero__geo{
	position:absolute;
	inset:0;
	pointer-events:none;
	overflow:hidden;
}
.hero__geo-ring{
	position:absolute;
	border-radius:50%;
	border:1px solid rgba(255,255,255,0.06);
}
.hero__geo-ring--1{width:700px;height:700px;top:-200px;right:-200px}
.hero__geo-ring--2{width:400px;height:400px;top:-80px;right:50px;border-color:rgba(201,160,40,0.08)}
.hero__geo-ring--3{width:200px;height:200px;top:60px;right:210px;border-color:rgba(201,160,40,0.12)}
.hero__geo-glow{
	position:absolute;
	width:600px;height:400px;
	top:0;right:-100px;
	background:radial-gradient(ellipse,rgba(14,158,96,0.16) 0%,transparent 70%);
}
.hero__geo-line{
	position:absolute;
	bottom:0;left:0;right:0;
	height:1px;
	background:linear-gradient(90deg,transparent,var(--gold) 30%,rgba(201,160,40,0.3) 70%,transparent);
}
.hero__inner{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1fr 380px;gap:4rem;align-items:center}
.hero__left{}
.hero__eyebrow{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.hero__eyebrow-line{width:40px;height:2px;background:var(--gold)}
.hero__eyebrow-text{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.hero__title{font-family:var(--font-display);font-weight:800;font-size:clamp(4rem,8vw,7rem);line-height:.95;text-transform:uppercase;letter-spacing:.01em;color:var(--text);margin:0 0 .5em}
.hero__title .em{color:var(--gold)}
.hero__title .br{display:block}
.hero__sub{font-size:1.05rem;color:var(--text-soft);max-width:480px;margin:0 0 2rem;line-height:1.7}
.hero__actions{display:flex;gap:.8rem;flex-wrap:wrap}

/* hero stat box */
.hero__panel{
	background:rgba(255,255,255,0.04);
	border:1px solid var(--line);
	border-radius:var(--r);
	padding:2rem;
	position:relative;
	overflow:hidden;
}
.hero__panel::before{
	content:"";position:absolute;
	top:-40px;right:-40px;
	width:200px;height:200px;
	border-radius:50%;
	background:radial-gradient(circle,rgba(201,160,40,0.12),transparent 70%);
}
.hero__panel-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1.4rem;display:flex;align-items:center;gap:.5rem}
.hero__panel-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.hero__stat{padding:1.1rem 0;border-bottom:1px solid var(--line)}
.hero__stat:last-child{border-bottom:none}
.hero__stat-num{font-family:var(--font-display);font-size:2.4rem;font-weight:800;line-height:1;color:var(--text);text-transform:uppercase;letter-spacing:.01em}
.hero__stat-desc{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-top:.2em}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-strip{background:var(--gold);padding:.8rem 0;overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;animation:marquee 32s linear infinite}
.marquee-item{display:inline-flex;align-items:center;gap:1rem;padding:0 2rem;font-family:var(--font-display);font-size:.95rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#000}
.marquee-dot{width:5px;height:5px;background:rgba(0,0,0,0.35);border-radius:50%;flex-shrink:0}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   GAP SECTION — two-col, dark panel right
   ============================================================ */
.section--gap{
	padding:5rem 2rem;
	border-top:1px solid var(--line);
	position:relative;
}
.section--gap .inner{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.gap__text h2{font-family:var(--font-display);font-size:clamp(2.4rem,4vw,3.4rem);font-weight:800;text-transform:uppercase;line-height:1.05;color:var(--text);margin:0 0 1rem}
.gap__text p{color:var(--text-soft);font-size:1rem}
.gap__card{
	background:var(--bg-2);
	border:1px solid var(--line);
	border-left:3px solid var(--gold);
	border-radius:var(--r);
	padding:2rem 1.8rem;
	position:relative;
	overflow:hidden;
}
.gap__card::after{
	content:"";position:absolute;
	bottom:-60px;right:-60px;
	width:180px;height:180px;
	border-radius:50%;
	background:radial-gradient(circle,rgba(201,160,40,0.1),transparent 70%);
}
.gap__card-tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:.8rem}
.gap__card-quote{font-family:var(--font-display);font-size:1.55rem;font-weight:700;text-transform:uppercase;line-height:1.15;color:var(--text);margin-bottom:1rem}
.gap__card-source{font-family:var(--font-mono);font-size:.7rem;color:var(--text-faint)}

/* ============================================================
   QUOTE GRID — dark section, geometric bg
   ============================================================ */
.section--quotes{
	padding:5rem 2rem;
	background:var(--bg-1);
	border-top:1px solid var(--line);
	border-bottom:1px solid var(--line);
	position:relative;
	overflow:hidden;
}
.section--quotes::before{
	content:"";position:absolute;
	width:800px;height:800px;
	top:50%;left:50%;transform:translate(-50%,-50%);
	border-radius:50%;
	border:1px solid rgba(255,255,255,0.04);
	pointer-events:none;
}
.section--quotes::after{
	content:"";position:absolute;
	width:400px;height:400px;
	top:50%;left:50%;transform:translate(-50%,-50%);
	border-radius:50%;
	border:1px solid rgba(201,160,40,0.06);
	pointer-events:none;
}
.section--quotes .inner{max-width:var(--wrap);margin:0 auto;position:relative;z-index:1}
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.quote-card{
	background:var(--bg-1);
	padding:2.2rem 2rem;
	position:relative;
	transition:background .25s var(--ease);
}
.quote-card:hover{background:var(--bg-2)}
.quote-card::before{
	content:"\201C";
	position:absolute;top:1rem;right:1.2rem;
	font-family:var(--font-display);
	font-size:5rem;font-weight:800;
	color:rgba(255,255,255,0.04);
	line-height:1;
}
.quote-card__accent{width:24px;height:3px;background:var(--gold);margin-bottom:1.2rem;border-radius:2px}
.quote-card--2 .quote-card__accent{background:var(--emerald-bright)}
.quote-card--3 .quote-card__accent{background:var(--coral)}
.quote-card__text{font-family:var(--font-display);font-size:1.2rem;font-weight:700;text-transform:uppercase;line-height:1.25;color:var(--text);margin-bottom:1rem}
.quote-card__source{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;color:var(--text-faint)}
.quote-grid-footer{margin-top:2.5rem;display:flex;justify-content:center}

/* ============================================================
   PRINCIPLES — horizontal box grid
   ============================================================ */
.section--principles{
	padding:5rem 2rem;
	position:relative;
	overflow:hidden;
}
/* diagonal stripe texture */
.section--principles::before{
	content:"";position:absolute;inset:0;
	background-image:repeating-linear-gradient(
		-45deg,
		rgba(255,255,255,0.012) 0px,
		rgba(255,255,255,0.012) 1px,
		transparent 1px,
		transparent 12px
	);
	pointer-events:none;
}
.section--principles .inner{max-width:var(--wrap);margin:0 auto;position:relative;z-index:1}
.principles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.principle-card{
	background:var(--bg-2);
	padding:2.2rem 1.8rem;
	position:relative;
	transition:background .25s var(--ease);
}
.principle-card:hover{background:var(--bg-3)}
.principle-card__num{font-family:var(--font-display);font-size:5rem;font-weight:800;text-transform:uppercase;line-height:1;color:rgba(255,255,255,0.04);position:absolute;top:.5rem;right:1rem}
.principle-card__tag{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.principle-card h3{font-family:var(--font-display);font-size:1.5rem;font-weight:800;text-transform:uppercase;line-height:1.05;color:var(--text);margin:0 0 .7rem}
.principle-card p{color:var(--text-soft);font-size:.92rem;margin:0;line-height:1.6}
.principle-card::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:transparent;transition:background .25s}
.principle-card:nth-child(1)::after{background:var(--gold)}
.principle-card:nth-child(2)::after{background:var(--emerald-bright)}
.principle-card:nth-child(3)::after{background:var(--coral)}
.principle-card:nth-child(4)::after{background:var(--gold-bright)}

/* ============================================================
   JOURNAL — two big + two small card layout
   ============================================================ */
.section--journal{
	padding:5rem 2rem;
	background:var(--bg-1);
	border-top:1px solid var(--line);
	position:relative;
}
.section--journal .inner{max-width:var(--wrap);margin:0 auto}
.article-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.article-card{background:var(--bg-2);position:relative;overflow:hidden;transition:background .25s var(--ease)}
.article-card:hover{background:var(--bg-3)}
.article-card:nth-child(1){grid-column:span 2}
.article-card:nth-child(2){grid-column:span 2}
.article-card__art{height:200px;position:relative;overflow:hidden}
.article-card:nth-child(3) .article-card__art,
.article-card:nth-child(4) .article-card__art{height:140px}
.article-card--1 .article-card__art{background:linear-gradient(135deg,var(--emerald) 0%,var(--bg) 100%)}
.article-card--2 .article-card__art{background:linear-gradient(135deg,#7A2210 0%,var(--bg) 100%)}
.article-card--3 .article-card__art{background:linear-gradient(135deg,#4A3A08 0%,var(--bg) 100%)}
.article-card--4 .article-card__art{background:linear-gradient(135deg,#0B2A1A 0%,var(--bg) 100%)}
/* circle inside art */
.article-card__art::before{
	content:"";position:absolute;
	width:160px;height:160px;
	border-radius:50%;
	border:1px solid rgba(255,255,255,0.08);
	bottom:-60px;right:-40px;
}
.article-card__art::after{
	content:"";position:absolute;
	width:80px;height:80px;
	border-radius:50%;
	border:1px solid rgba(255,255,255,0.06);
	top:20px;left:20px;
}
.article-card__body{padding:1.6rem 1.8rem 2rem}
.article-card__eyebrow{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-bottom:.5rem}
.article-card__title{font-family:var(--font-display);font-size:1.5rem;font-weight:800;text-transform:uppercase;line-height:1.05;color:var(--text);margin:0 0 .5rem;transition:color .2s}
.article-card:hover .article-card__title{color:var(--gold)}
.article-card__excerpt{color:var(--text-soft);font-size:.9rem;margin-bottom:.8rem}
.article-card__cta{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:700}
.article-card__link{display:block}

/* ============================================================
   CLOSING — full-bleed dark with centered large quote
   ============================================================ */
.section--closing{
	padding:7rem 2rem;
	background:var(--bg-1);
	border-top:1px solid var(--line);
	text-align:center;
	position:relative;
	overflow:hidden;
}
.section--closing::before{
	content:"";position:absolute;
	width:900px;height:500px;
	top:50%;left:50%;transform:translate(-50%,-50%);
	background:radial-gradient(ellipse,rgba(201,160,40,0.07) 0%,transparent 70%);
	pointer-events:none;
}
.closing-quote{
	font-family:var(--font-display);
	font-size:clamp(2rem,4.5vw,3.4rem);
	font-weight:800;
	text-transform:uppercase;
	line-height:1.05;
	color:var(--text);
	max-width:880px;
	margin:0 auto .5em;
	position:relative;z-index:1;
}
.closing-quote .em{color:var(--gold)}
.closing-source{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-bottom:3rem;position:relative;z-index:1}
.newsletter-form{display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap;position:relative;z-index:1;margin-bottom:.8rem}
.newsletter-form input{
	background:rgba(255,255,255,0.06);
	border:1px solid var(--line);
	border-radius:4px;
	padding:.8em 1.4em;
	color:var(--text);
	font-family:var(--font-body);
	min-width:260px;
	transition:border-color .2s;
}
.newsletter-form input:focus{border-color:var(--gold);outline:none}
.newsletter-form input::placeholder{color:var(--text-faint)}
.newsletter-note{font-size:.78rem;color:var(--text-faint);position:relative;z-index:1}

/* ============================================================
   SINGLE / PAGE / ARCHIVE
   ============================================================ */
.single-article{max-width:760px;margin:0 auto;padding:4rem 2rem 5rem}
.single-article__header{margin-bottom:2.5rem;border-bottom:1px solid var(--line);padding-bottom:2rem}
.single-article__title{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;text-transform:uppercase;line-height:1;color:var(--text);margin:.5rem 0 0}
.single-article__thumb{border-radius:var(--r);overflow:hidden;margin-bottom:2rem}
.single-article__body{color:var(--text-soft);font-size:1.05rem;line-height:1.8}
.single-article__body p{margin-bottom:1.4em}
.single-article__footer{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--line)}
.comments-area{max-width:760px;margin:0 auto;padding:0 2rem 5rem}

.section--journal-archive,.section--quotes-archive{padding:4rem 2rem 5rem}
.section--journal-archive h1,.section--quotes-archive h1{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,4rem);font-weight:800;text-transform:uppercase;color:var(--text);margin-bottom:2rem}
.quote-grid--archive{grid-template-columns:repeat(3,1fr)}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
	background:var(--bg-2);
	border-top:1px solid var(--line);
	padding:3rem 2rem 1.5rem;
}
.site-footer__inner{max-width:var(--wrap);margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap}
.site-footer__brand .site-brand__wordmark{font-size:1.2rem}
.site-footer__tagline{font-size:.88rem;color:var(--text-faint);margin-top:.5rem;max-width:280px}
.footer-nav-menu{display:flex;gap:.2rem;flex-wrap:wrap}
.footer-nav-menu a{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);padding:.4em .9em;border-radius:4px;transition:color .2s,background .2s}
.footer-nav-menu a:hover{background:rgba(255,255,255,0.06);color:var(--text)}
.site-footer__bottom{max-width:var(--wrap);margin:2rem auto 0;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.74rem;color:var(--text-faint)}

/* 404 */
.section--404{padding:8rem 2rem;text-align:center}
.section--404 h1{font-family:var(--font-display);font-size:4rem;font-weight:800;text-transform:uppercase;color:var(--text);margin-bottom:.5rem}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1000px){
	.hero__inner{grid-template-columns:1fr;gap:2rem}
	.hero__panel{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
	.hero__stat{border-bottom:none;border-right:1px solid var(--line);padding:1rem 1.2rem}
	.hero__stat:last-child{border-right:none}
	.section--gap .inner{grid-template-columns:1fr}
	.principles-grid{grid-template-columns:repeat(2,1fr)}
	.article-grid{grid-template-columns:repeat(2,1fr)}
	.article-card:nth-child(1),.article-card:nth-child(2){grid-column:span 1}
}
@media(max-width:680px){
	.site-nav{position:fixed;inset:0;background:rgba(13,20,16,0.98);backdrop-filter:blur(16px);z-index:200;display:flex;align-items:center;justify-content:center;transform:translateY(-100%);transition:transform .35s var(--ease)}
	.site-nav.is-open{transform:translateY(0)}
	.nav-menu{flex-direction:column;text-align:center;gap:1.5rem}
	.nav-menu a{font-size:1.2rem}
	.nav-toggle{display:flex;z-index:300}
	.quote-grid,.principles-grid,.article-grid,.quote-grid--archive{grid-template-columns:1fr}
	.hero__panel{grid-template-columns:1fr}
	.hero__stat{border-right:none;border-bottom:1px solid var(--line)}
	.site-footer__inner{flex-direction:column}
}

/* ============================================================
   V4.1 — VISIBLE GEOMETRY OVERRIDES
   ============================================================ */

/* kill the subtle grid — replace with visible layered geometry */
body::before {
	background-image:
		linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
	background-size: 80px 80px;
}

/* stronger ambient glows */
body::after {
	background:
		radial-gradient(ellipse 70% 45% at 15% 10%, rgba(14,158,96,0.20) 0%, transparent 65%),
		radial-gradient(ellipse 55% 35% at 85% 85%, rgba(201,160,40,0.16) 0%, transparent 60%),
		radial-gradient(ellipse 50% 40% at 75% 20%, rgba(14,158,96,0.10) 0%, transparent 60%);
}

/* ── LARGE FIXED GEOMETRY RINGS (scroll behind everything) ── */
.geo-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.geo-bg__ring {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.07);
}
.geo-bg__ring--1 { width: 900px; height: 900px; top: -350px; left: -300px; border-color: rgba(14,158,96,0.16); }
.geo-bg__ring--2 { width: 600px; height: 600px; top: -200px; left: -150px; border-color: rgba(14,158,96,0.10); }
.geo-bg__ring--3 { width: 800px; height: 800px; bottom: 20%; right: -350px; border-color: rgba(201,160,40,0.12); }
.geo-bg__ring--4 { width: 500px; height: 500px; bottom: 22%; right: -200px; border-color: rgba(201,160,40,0.08); }
.geo-bg__ring--5 { width: 700px; height: 700px; top: 45%; left: 50%; transform: translateX(-50%); border-color: rgba(255,255,255,0.04); }
.geo-bg__diag {
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		-55deg,
		rgba(255,255,255,0.025) 0px,
		rgba(255,255,255,0.025) 1px,
		transparent 1px,
		transparent 60px
	);
}
.geo-bg__glow-mid {
	position: absolute;
	width: 1000px; height: 600px;
	top: 40%; left: 50%; transform: translate(-50%, -50%);
	background: radial-gradient(ellipse, rgba(14,158,96,0.12) 0%, transparent 70%);
}

/* hero — remove its own rings now that geo-bg handles it */
.hero::before, .hero::after { display: none; }
.hero__geo { display: none; }

/* each section gets a subtle top gradient wash so transitions read clearly */
.section--gap::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(201,160,40,0.06) 0%, transparent 40%);
	pointer-events: none;
}
.section--quotes::before {
	background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(201,160,40,0.08) 0%, transparent 70%);
	width: 100%; height: 100%;
	left: 0; top: 0;
	border-radius: 0;
	border: none;
}
.section--quotes::after { display: none; }
.section--principles::before {
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(255,255,255,0.03) 0px,
		rgba(255,255,255,0.03) 1px,
		transparent 1px,
		transparent 20px
	);
}
.section--closing::before {
	background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(201,160,40,0.1) 0%, transparent 70%);
}

/* hero stat panel — hide it */
.hero__panel { display: none; }
.hero__inner { grid-template-columns: 1fr; max-width: 780px; }
.hero__title { font-size: clamp(4rem, 9vw, 7.5rem); }

/* ============================================================
   V4.2 — HERO QUOTE CARDS + FONT FIXES
   ============================================================ */

/* Restore two-col hero now that panel is back */
.hero__panel { display: none; } /* keep hidden override for old stat panel */
.hero__inner {
	grid-template-columns: 1fr 380px !important;
	max-width: var(--wrap) !important;
	gap: 4rem;
}

/* Hero quote cards */
.hero__quotes { display: flex; flex-direction: column; gap: 1rem; }
.hero__quote-card {
	background: rgba(255,255,255,0.05);
	border: 1px solid var(--line);
	border-left: 3px solid var(--gold);
	border-radius: var(--r);
	padding: 1.5rem 1.4rem;
	position: relative;
	overflow: hidden;
}
.hero__quote-card::after {
	content: "\201C";
	position: absolute;
	top: -0.2em; right: 0.3rem;
	font-family: var(--font-display);
	font-size: 6rem;
	font-weight: 800;
	color: rgba(255,255,255,0.04);
	line-height: 1;
	pointer-events: none;
}
.hero__quote-tag {
	font-family: var(--font-mono);
	font-size: .64rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 .6rem;
}
.hero__quote-text {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--text);
	margin: 0 0 .7rem;
}
.hero__quote-source {
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .06em;
	color: var(--text-faint);
	margin: 0;
}

/* ── FONT SIZE THRESHOLDS ──
   Barlow Condensed only at display sizes.
   Body copy, labels, source lines → Inter.
*/
.gap__text p,
.gap__card-source,
.principle-card p,
.article-card__excerpt,
.article-card__eyebrow,
.quote-card__source,
.closing-source,
.newsletter-note,
.hero__sub,
.hero__quote-source,
.single-article__body,
.site-footer__tagline {
	font-family: var(--font-body) !important;
}

/* Condensed font: keep only on headings and display sizes */
.gap__card-quote,
.quote-card__text,
.article-card__title,
.closing-quote,
.principle-card h3 {
	font-family: var(--font-display);
	text-transform: uppercase;
}

/* Quote cards in grid — bump size slightly, they can handle it */
.quote-card__text { font-size: 1.05rem; }

/* Responsive: stack hero on smaller screens */
@media (max-width: 900px) {
	.hero__inner { grid-template-columns: 1fr !important; }
	.hero__quotes { flex-direction: row; }
	.hero__quote-card { flex: 1; }
}
@media (max-width: 600px) {
	.hero__quotes { flex-direction: column; }
}

/* ============================================================
   V4.3 — QUOTE FONT FIX + HERO 4-CARD OFFSET LAYOUT
   ============================================================ */

/* Force Inter on ALL quote text — grid and hero cards */
.quote-card__text,
.hero__quote-text {
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	text-transform: none !important;
	font-size: 1.05rem !important;
	line-height: 1.5 !important;
}

/* Hero quote column — 4 cards, alternating offset */
.hero__quotes {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	position: relative;
}
.hero__quote-card {
	position: relative;
	background: rgba(255,255,255,0.05);
	border: 1px solid var(--line);
	border-left: 3px solid var(--gold);
	border-radius: var(--r);
	padding: 1.3rem 1.4rem;
	transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
	cursor: default;
}
/* alternating indent — even cards shift right */
.hero__quote-card:nth-child(even) {
	margin-left: 1.4rem;
	border-left-color: var(--emerald-bright);
}
.hero__quote-card:nth-child(3) { border-left-color: var(--coral); }
.hero__quote-card:nth-child(4) { border-left-color: var(--gold-bright); }

/* hover */
.hero__quote-card:hover {
	transform: translateX(6px);
	background: rgba(255,255,255,0.09);
	border-left-width: 4px;
	box-shadow: 0 8px 28px rgba(0,0,0,0.3);
}
.hero__quote-card:nth-child(even):hover {
	transform: translateX(-6px);
}

.hero__quote-text {
	font-size: .95rem !important;
	margin-bottom: .5rem;
}
.hero__quote-source {
	font-size: .65rem;
}

/* ============================================================
   V4.4 — HERO QUOTES: DRAMATIC STAGGER + EQUAL HEIGHT
   ============================================================ */
.hero__quotes {
	display: grid !important;
	grid-template-columns: 1fr !important;
	grid-template-rows: repeat(4, 1fr);
	gap: .7rem !important;
	align-items: stretch;
	height: 100%;
}
.hero__quote-card {
	margin-left: 0 !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 0;
}
/* dramatic alternating stagger */
.hero__quote-card:nth-child(1) { transform: translateX(0); }
.hero__quote-card:nth-child(2) { transform: translateX(2.8rem); }
.hero__quote-card:nth-child(3) { transform: translateX(0); }
.hero__quote-card:nth-child(4) { transform: translateX(2.8rem); }

/* hover overrides that respect the offset */
.hero__quote-card:hover { transform: translateX(8px) !important; }
.hero__quote-card:nth-child(2):hover { transform: translateX(calc(2.8rem + 8px)) !important; }
.hero__quote-card:nth-child(4):hover { transform: translateX(calc(2.8rem + 8px)) !important; }

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

/* ── quote bar ── */
.footer-quote-bar {
	background: var(--bg-3);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 1.4rem 2rem;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	overflow: hidden;
}
.footer-quote-bar__text {
	font-family: var(--font-body);
	font-size: .92rem;
	font-style: italic;
	color: var(--text-soft);
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.footer-quote-bar__rule {
	flex-shrink: 0;
	width: 40px;
	height: 1px;
	background: var(--gold);
}
.footer-quote-bar__cta {
	font-family: var(--font-mono);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gold);
	white-space: nowrap;
	transition: color .2s;
}
.footer-quote-bar__cta:hover { color: var(--gold-bright); }

/* ── main footer body ── */
.footer-body {
	background: var(--bg-2);
	padding: 3.5rem 2rem;
	position: relative;
	overflow: hidden;
}
/* corner geometry */
.footer-body::before {
	content: "";
	position: absolute;
	width: 500px; height: 500px;
	bottom: -220px; right: -180px;
	border-radius: 50%;
	border: 1px solid rgba(201,160,40,0.1);
	pointer-events: none;
}
.footer-body::after {
	content: "";
	position: absolute;
	width: 280px; height: 280px;
	bottom: -120px; right: -80px;
	border-radius: 50%;
	border: 1px solid rgba(201,160,40,0.07);
	pointer-events: none;
}
.footer-body__inner {
	max-width: var(--wrap);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.8fr 1fr 1fr 1.4fr;
	gap: 3rem;
	position: relative;
	z-index: 1;
}
.footer-tagline {
	font-size: .9rem;
	color: var(--text-soft);
	margin: .8rem 0 1.2rem;
	line-height: 1.55;
}
.footer-principles {
	display: flex;
	flex-direction: column;
	gap: .4rem;
}
.footer-principles span {
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-faint);
	padding-left: .8rem;
	border-left: 2px solid var(--gold);
	line-height: 1.4;
}
.footer-col__heading {
	font-family: var(--font-mono);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 1.1rem;
}
.footer-links { display: flex; flex-direction: column; gap: .5rem; }
.footer-links a {
	font-size: .9rem;
	color: var(--text-soft);
	transition: color .2s, padding-left .2s;
	display: inline-block;
}
.footer-links a:hover { color: var(--text); padding-left: .4rem; }

.footer-newsletter-desc {
	font-size: .88rem;
	color: var(--text-soft);
	margin: 0 0 1rem;
	line-height: 1.5;
}
.footer-newsletter-form {
	display: flex;
	gap: .5rem;
}
.footer-newsletter-form input {
	flex: 1;
	background: rgba(255,255,255,0.06);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: .65em 1em;
	color: var(--text);
	font-family: var(--font-body);
	font-size: .88rem;
	transition: border-color .2s;
	min-width: 0;
}
.footer-newsletter-form input:focus { border-color: var(--gold); outline: none; }
.footer-newsletter-form input::placeholder { color: var(--text-faint); }
.footer-newsletter-form .btn { padding: .65em 1.1em; font-size: .82rem; }

/* ── bottom bar ── */
.footer-bottom {
	background: var(--bg);
	border-top: 1px solid var(--line);
	padding: 1.1rem 2rem;
}
.footer-bottom__inner {
	max-width: var(--wrap);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 1.2rem;
	font-family: var(--font-mono);
	font-size: .7rem;
	letter-spacing: .06em;
	color: var(--text-faint);
}
.footer-bottom__divider {
	width: 4px; height: 4px;
	border-radius: 50%;
	background: var(--gold);
	flex-shrink: 0;
}
.footer-bottom__motto { color: var(--gold); }

/* responsive */
@media (max-width: 900px) {
	.footer-body__inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
	.footer-col--brand { grid-column: span 2; }
}
@media (max-width: 580px) {
	.footer-body__inner { grid-template-columns: 1fr; }
	.footer-col--brand { grid-column: span 1; }
	.footer-quote-bar { flex-direction: column; align-items: flex-start; gap: .8rem; }
	.footer-quote-bar__text { white-space: normal; }
	.footer-bottom__inner { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* ============================================================
   V4.5 — UNIFIED BACKGROUND: strip all per-section treatments
   ============================================================ */

/* Every section: transparent, geometry layer shows through */
.section--gap,
.section--quotes,
.section--principles,
.section--journal,
.section--closing,
.section--journal-archive,
.section--quotes-archive,
.footer-body {
	background: transparent !important;
}

/* Remove all per-section pseudo-element backgrounds */
.section--gap::before,
.section--quotes::before,
.section--quotes::after,
.section--principles::before,
.section--closing::before,
.footer-body::before,
.footer-body::after { display: none !important; }

/* Sections separated by a single hairline only */
.section--gap,
.section--quotes,
.section--principles,
.section--journal,
.section--closing { border-top: 1px solid var(--line) !important; }

/* Quote cards and principle cards: consistent single panel treatment */
.quote-card { background: rgba(255,255,255,0.04) !important; }
.quote-card:hover { background: rgba(255,255,255,0.07) !important; }
.principle-card { background: rgba(255,255,255,0.04) !important; }
.principle-card:hover { background: rgba(255,255,255,0.07) !important; }
.article-card { background: rgba(255,255,255,0.04) !important; }
.article-card:hover { background: rgba(255,255,255,0.07) !important; }
.gap__card { background: rgba(255,255,255,0.05) !important; }
.hero__quote-card { background: rgba(255,255,255,0.05) !important; }
.hero__quote-card:hover { background: rgba(255,255,255,0.09) !important; }

/* Footer: consistent with body */
.footer-quote-bar { background: rgba(255,255,255,0.04) !important; }
.footer-bottom { background: rgba(0,0,0,0.25) !important; }

/* Closing section quote: remove italic, keep gold */
.closing-quote em { font-style: normal; }

/* ============================================================
   V4.6 — FONT SCOPE: Barlow only on hero title
   ============================================================ */
.article-card__title,
.gap__text h2,
.section--quotes h2,
.section--principles h2,
.section--journal h2,
.section--closing .closing-quote,
.principle-card h3,
.gap__card-quote,
.single-article__title,
.section--journal-archive h1,
.section--quotes-archive h1 {
	font-family: var(--font-body) !important;
	font-weight: 700 !important;
	text-transform: none !important;
	letter-spacing: -0.02em !important;
}

/* Section headings: keep bold but Inter */
.section-label span { font-family: var(--font-mono) !important; }

/* V4.7 — full white body text on single posts */
.single-article__body,
.single-article__body p { color: var(--text) !important; }

/* ============================================================
   V4.8 — SINGLE POST DESIGN
   ============================================================ */

/* Title area — left gold bar + underline sweep */
.single-article__header {
	position: relative;
	padding-left: 1.4rem;
	border-left: 4px solid var(--gold);
	margin-bottom: 2.5rem;
}
.single-article__title {
	position: relative;
	display: inline;
}
.single-article__title::after {
	content: "";
	display: block;
	width: 80px;
	height: 3px;
	background: linear-gradient(90deg, var(--gold), transparent);
	margin-top: .5rem;
	border-radius: 2px;
}

/* Inline blockquotes in post body — gold treatment */
.single-article__body blockquote {
	margin: 2rem 0;
	padding: 1.4rem 1.6rem;
	background: rgba(201,160,40,0.07);
	border-left: 4px solid var(--gold);
	border-radius: 0 var(--r) var(--r) 0;
}
.single-article__body blockquote p {
	font-family: var(--font-body);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--gold-bright) !important;
	font-style: italic;
	margin: 0;
	line-height: 1.6;
}

/* The pull-quote card injected below each post */
.pull-quote {
	margin: 2.5rem 0 0;
	padding: 1.6rem 1.8rem;
	background: rgba(201,160,40,0.08);
	border: 1px solid rgba(201,160,40,0.25);
	border-left: 4px solid var(--gold);
	border-radius: 0 var(--r) var(--r) 0;
}
.pull-quote .pull-quote__eyebrow {
	font-family: var(--font-mono);
	font-size: .64rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 .6rem;
}
.pull-quote p:not(.pull-quote__eyebrow) {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--gold-bright) !important;
	font-style: italic;
	line-height: 1.6;
	margin: 0 0 .5rem;
}
.pull-quote cite {
	font-family: var(--font-mono);
	font-size: .68rem;
	color: var(--text-faint);
	font-style: normal;
}

/* Reading progress indicator at top of post */
.single-article::before {
	content: "";
	position: fixed;
	top: 64px; left: 0;
	height: 2px;
	width: var(--scroll-pct, 0%);
	background: linear-gradient(90deg, var(--emerald-bright), var(--gold));
	z-index: 150;
	transition: width .1s linear;
}

/* ============================================================
   V4.9 — COMMENTS + FOOTER QUOTE + FONT CLEANUP
   ============================================================ */

/* ── COMMENT FORM ── */
.comments-area {
	border-top: 1px solid var(--line);
	padding-top: 2.5rem;
	margin-top: 2.5rem;
}
.comments-title,
#reply-title {
	font-family: var(--font-body) !important;
	font-weight: 700;
	font-size: 1.3rem;
	color: var(--text);
	margin-bottom: 1.2rem;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
#reply-title small { font-size: .75rem; margin-left: .6rem; }
#reply-title small a { color: var(--gold); font-weight: 400; }

.comment-form p { margin-bottom: 1rem; }
.comment-form label {
	display: block;
	font-family: var(--font-mono);
	font-size: .66rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: .4rem;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100% !important;
	background: rgba(255,255,255,0.05) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--r) !important;
	padding: .75em 1em !important;
	color: var(--text) !important;
	font-family: var(--font-body) !important;
	font-size: .95rem !important;
	box-shadow: none !important;
	outline: none !important;
	transition: border-color .2s !important;
	resize: vertical;
}
.comment-form textarea { min-height: 140px; }
.comment-form input:focus,
.comment-form textarea:focus {
	border-color: var(--gold) !important;
	box-shadow: 0 0 0 3px rgba(201,160,40,0.12) !important;
}
.comment-form input::placeholder,
.comment-form textarea::placeholder { color: var(--text-faint) !important; }
.comment-form .submit { margin-top: .5rem; }
.comment-form input[type="submit"] {
	background: var(--gold) !important;
	border: none !important;
	border-radius: 4px !important;
	color: #000 !important;
	font-family: var(--font-mono) !important;
	font-size: .8rem !important;
	font-weight: 700 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	padding: .75em 1.8em !important;
	cursor: pointer !important;
	transition: box-shadow .2s, transform .2s !important;
	box-shadow: 0 4px 16px rgba(201,160,40,0.3) !important;
	width: auto !important;
}
.comment-form input[type="submit"]:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 24px rgba(201,160,40,0.45) !important;
}
/* logged-in note */
.comment-notes, .logged-in-as {
	font-size: .85rem;
	color: var(--text-faint);
	margin-bottom: 1.2rem;
}
.logged-in-as a { color: var(--gold); }

/* existing comments */
.comment-list { margin: 0 0 2rem; }
.comment-body {
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 1.2rem 1.4rem;
	margin-bottom: 1rem;
}
.comment-author .fn { font-weight: 600; color: var(--text); }
.comment-metadata { font-size: .75rem; color: var(--text-faint); margin-bottom: .6rem; }
.comment-metadata a { color: var(--text-faint); }
.comment-content p { color: var(--text-soft); font-size: .95rem; margin: 0; }
.reply { margin-top: .6rem; }
.reply a {
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gold);
}

/* ── FOOTER QUOTE BAR — replace with a full gold band ── */
.footer-quote-bar {
	background: var(--gold) !important;
	border: none !important;
	padding: 1.2rem 2rem !important;
}
.footer-quote-bar__text {
	color: #000 !important;
	font-style: normal !important;
	font-weight: 600 !important;
	font-size: .92rem !important;
}
.footer-quote-bar__rule { background: rgba(0,0,0,0.25) !important; }
.footer-quote-bar__cta {
	color: #000 !important;
	opacity: .7;
}
.footer-quote-bar__cta:hover { color: #000 !important; opacity: 1; }

/* ── FONT CONSOLIDATION ──
   One display font (Inter 700) for all headings, no Barlow except hero h1.
   One mono font for all labels/eyebrows.
   Kill any stray font-family overrides on small UI elements.
*/
.nav-menu a,
.footer-links a,
.footer-col__heading,
.footer-newsletter-desc,
.footer-tagline,
.footer-principles span,
.article-card__excerpt,
.article-card__eyebrow,
.principle-card p,
.gap__text p,
.hero__sub,
.closing-source,
.newsletter-note,
.marquee-item { font-family: var(--font-body) !important; }

/* ── SECTION HEADING UNDERLINES ── */
.section--gap .gap__text h2,
.section--quotes h2,
.section--principles h2,
.section--journal h2,
.section--closing .closing-quote {
	display: inline;
	background-image: linear-gradient(var(--gold), var(--gold));
	background-repeat: no-repeat;
	background-size: 100% 3px;
	background-position: 0 100%;
	padding-bottom: .15em;
}

/* ============================================================
   V4.10
   ============================================================ */

/* ── FOOTER COLUMN HEADINGS: underline ── */
.footer-col__heading {
	position: relative;
	display: inline-block;
	padding-bottom: .4em;
}
.footer-col__heading::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: linear-gradient(90deg, var(--gold), transparent);
}

/* ── FOOTER QUOTE BAR: contained card, not full-width band ── */
.footer-quote-bar {
	background: none !important;
	border: none !important;
	padding: 2rem 2rem 0 !important;
}
.footer-quote-bar__inner {
	max-width: var(--wrap);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: 1.4rem 2rem;
	background: linear-gradient(90deg, rgba(201,160,40,0.18) 0%, rgba(201,160,40,0.06) 60%, transparent 100%);
	border-left: 3px solid var(--gold);
	border-radius: 0 var(--r) var(--r) 0;
}
.footer-quote-bar__text {
	color: var(--text) !important;
	font-style: italic !important;
	font-weight: 400 !important;
	font-size: 1rem !important;
	flex: 1;
}
.footer-quote-bar__rule { background: var(--gold) !important; flex-shrink: 0; }
.footer-quote-bar__cta {
	color: var(--gold) !important;
	opacity: 1 !important;
	white-space: nowrap;
}
.footer-quote-bar__cta:hover { color: var(--gold-bright) !important; }

/* ── GLOBAL LINK HOVER: gold + animated underline swipe ── */
/* scope to content areas only — not nav/buttons/cards which have their own states */
.single-article__body a,
.comments-area a,
.gap__text a,
.footer-links a {
	position: relative;
	color: var(--text-soft);
	text-decoration: none;
	transition: color .2s;
}
.single-article__body a::after,
.comments-area a:not(.comment-reply-link)::after,
.gap__text a::after,
.footer-links a::after {
	content: "";
	position: absolute;
	left: 0; bottom: -1px;
	width: 0; height: 1px;
	background: var(--gold);
	transition: width .28s var(--ease);
}
.single-article__body a:hover,
.comments-area a:hover,
.gap__text a:hover,
.footer-links a:hover { color: var(--gold); }
.single-article__body a:hover::after,
.comments-area a:not(.comment-reply-link):hover::after,
.gap__text a:hover::after,
.footer-links a:hover::after { width: 100%; }

/* Nav links — same treatment */
.nav-menu a {
	position: relative;
}
.nav-menu a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 1px;
	background: var(--gold);
	transition: width .25s var(--ease);
}
.nav-menu a:hover { color: var(--text) !important; background: none !important; }
.nav-menu a:hover::after { width: 100%; }

/* ── BLOG POST TITLE: wide gold underline swipe on hover, fades right ── */
.article-card__title {
	position: relative;
	display: inline;
	background-image: linear-gradient(90deg, var(--gold) 0%, rgba(201,160,40,0) 100%);
	background-repeat: no-repeat;
	background-size: 0% 2px;
	background-position: 0 100%;
	transition: background-size .35s var(--ease), color .2s;
	padding-bottom: .1em;
}
.article-card__link:hover .article-card__title {
	color: var(--text) !important;
	background-size: 95% 2px;
}

/* ============================================================
   V4.11 — TICKER + UNDERLINES + QUOTES + PRINCIPLES
   ============================================================ */

/* ── TICKER: double row, counter-scroll, slash separators, edge fade ── */
.marquee-strip {
	background: transparent !important;
	padding: 0 !important;
	overflow: hidden;
	position: relative;
}
.marquee-strip::before,
.marquee-strip::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	width: 120px;
	z-index: 2;
	pointer-events: none;
}
.marquee-strip::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee-strip::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }

.marquee-row {
	display: flex;
	overflow: hidden;
	padding: .45rem 0;
	border-top: 1px solid var(--line);
}
.marquee-row:last-child { border-bottom: 1px solid var(--line); }
.marquee-row--reverse .marquee-track { animation-direction: reverse; }
.marquee-item {
	font-family: var(--font-mono) !important;
	font-size: .72rem !important;
	font-weight: 700 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	color: var(--text-soft) !important;
	padding: 0 1.6rem !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 1.6rem !important;
}
.marquee-slash {
	display: inline-block;
	width: 1px;
	height: 12px;
	background: var(--gold);
	transform: skewX(-20deg);
	flex-shrink: 0;
	opacity: 0.7;
}
.marquee-dot { display: none !important; }

/* ── SECTION HEADING UNDERLINES: use border-bottom, not background-image ──
   background-image underline breaks on multi-line wrapped headings.
   border-bottom on a block element works correctly every time.
*/
.section--gap .gap__text h2,
.section--quotes h2,
.section--principles h2,
.section--journal h2,
.section--closing .closing-quote {
	background-image: none !important;
	background-size: unset !important;
	display: block !important;
	border-bottom: 2px solid var(--gold) !important;
	padding-bottom: .35em !important;
	width: fit-content;
}

/* ── QUOTE CARDS: drop attribution, bigger decorative quote mark ── */
.quote-card__source { display: none !important; }
.quote-card { padding: 2.2rem 1.8rem 1.8rem !important; }
.quote-card::before {
	font-size: 9rem !important;
	color: rgba(201,160,40,0.12) !important;
	top: -.3em !important;
	right: .6rem !important;
	font-family: Georgia, serif !important; /* real curly quote, not condensed */
}
.quote-card__text {
	font-size: 1rem !important;
	line-height: 1.55 !important;
}
/* remove the quote marks we were adding in PHP — handled by ::before now */

/* also kill attribution in the gap card and hero cards */
.gap__card-source { display: none !important; }
.hero__quote-source { display: none !important; }

/* ── PRINCIPLES: heading up and larger, card titles body-sized ── */
.section--principles { padding-top: 3rem !important; }
.section--principles h2 {
	font-size: clamp(2.6rem, 5vw, 4rem) !important;
	margin-bottom: 2.5rem !important;
}
.principle-card h3 {
	font-size: 1.4rem !important;
	font-weight: 700 !important;
	margin-bottom: .6rem !important;
	color: var(--text) !important;
}
.principle-card__tag {
	font-family: var(--font-mono) !important;
	font-size: .64rem !important;
	letter-spacing: .14em !important;
	color: var(--gold) !important;
	margin-bottom: .4rem !important;
}
.principle-card p { font-size: .95rem !important; color: var(--text-soft) !important; }

/* ============================================================
   V4.12 — TICKER: Option C — Tall athletic ribbon
   ============================================================ */
.marquee-strip {
	background: var(--bg-2) !important;
	border-top: 1px solid var(--line) !important;
	border-bottom: 1px solid var(--line) !important;
	padding: 0 !important;
	overflow: hidden !important;
	position: relative !important;
}
.marquee-strip::before,
.marquee-strip::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	width: 100px;
	z-index: 2;
	pointer-events: none;
}
.marquee-strip::before { left: 0; background: linear-gradient(90deg, var(--bg-2), transparent); }
.marquee-strip::after  { right: 0; background: linear-gradient(270deg, var(--bg-2), transparent); }

/* single row only — hide the second row we added */
.marquee-row { display: block; padding: 0; border: none !important; }
.marquee-row--reverse { display: none !important; }

.marquee-track {
	display: inline-flex;
	align-items: center;
	animation: marquee 36s linear infinite;
	padding: .9rem 0;
}
.marquee-item {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0 !important;
	padding: 0 !important;
	font-family: var(--font-display) !important;
	font-size: 1.3rem !important;
	font-weight: 400 !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	color: var(--text-soft) !important;
	font-style: italic !important;
}
/* alternate bold/light by targeting odd items via JS class — fallback: bold every other word via CSS nth */
.marquee-item:nth-child(odd)  { font-weight: 800 !important; color: var(--text) !important; font-style: normal !important; }
.marquee-item:nth-child(even) { font-weight: 300 !important; color: var(--text-soft) !important; font-style: italic !important; }

.marquee-slash {
	display: inline-block !important;
	width: 2px !important;
	height: 28px !important;
	background: var(--gold) !important;
	transform: skewX(-18deg) !important;
	margin: 0 1.8rem !important;
	opacity: 0.8 !important;
	flex-shrink: 0 !important;
}

/* ============================================================
   V4.13 — UNIFIED QUOTE CARD = HERO CARD STYLE EVERYWHERE
   ============================================================ */

/* Reset the grid quote card to match hero card exactly */
.quote-card {
	background: rgba(255,255,255,0.05) !important;
	border: 1px solid var(--line) !important;
	border-left: 3px solid var(--gold) !important;
	border-radius: var(--r) !important;
	padding: 1.6rem 1.6rem 1.4rem !important;
	position: relative !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease) !important;
}
.quote-card--2 { border-left-color: var(--emerald-bright) !important; }
.quote-card--3 { border-left-color: var(--coral) !important; }
.quote-card:hover {
	background: rgba(255,255,255,0.08) !important;
	box-shadow: 0 8px 28px rgba(0,0,0,0.3) !important;
}

/* Kill the big decorative " — was cluttering, not helping */
.quote-card::before { display: none !important; }

/* accent line — same as hero card tag color indicator */
.quote-card__accent { display: none !important; }

/* Label: reuse hero__quote-tag style */
.quote-card__label {
	font-family: var(--font-mono);
	font-size: .64rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 .7rem;
}
.quote-card--2 .quote-card__label { color: var(--emerald-bright); }
.quote-card--3 .quote-card__label { color: var(--coral); }

/* Quote text — Inter 600, natural case, no serif */
.quote-card__text {
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	line-height: 1.55 !important;
	color: var(--text) !important;
	text-transform: none !important;
	margin: 0 !important;
	flex: 1;
}

/* Attribution stays hidden */
.quote-card__source { display: none !important; }

/* Grid: remove the 1px border background trick, just use gap */
.quote-grid { background: transparent !important; gap: 1.1rem !important; }
.quote-grid--archive { background: transparent !important; gap: 1.1rem !important; }

/* ============================================================
   V4.14 — TICKER CONTROLS + SECTION HEADER STYLE
   ============================================================ */

/* Slow ticker down */
.marquee-track { animation-duration: 55s !important; }

/* Pause on hover — JS handles drag, CSS handles pause */
.marquee-strip.is-paused .marquee-track { animation-play-state: paused !important; }
.marquee-strip { cursor: grab; }
.marquee-strip.is-dragging { cursor: grabbing; }

/* ── SECTION HEADINGS: replace border-bottom with left bar like post header ── */
.section--gap .gap__text h2,
.section--quotes h2,
.section--principles h2,
.section--journal h2,
.section--closing .closing-quote {
	border-bottom: none !important;
	padding-bottom: 0 !important;
	padding-left: 1.1rem !important;
	border-left: 4px solid var(--gold) !important;
	display: block !important;
	background-image: none !important;
}

/* ============================================================
   V4.15 — SITE BRAND / HEADER
   ============================================================ */
.site-brand__wordmark {
	font-size: 1.5rem !important;
	display: flex;
	align-items: center;
	gap: .5rem;
}
.site-brand__emoji {
	font-size: 1.2rem;
	line-height: 1;
}
.site-brand__text-wrap {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	line-height: 1;
}
.site-brand__line1 {
	font-size: .65rem;
	letter-spacing: .22em;
	color: var(--text-faint);
	font-family: var(--font-mono);
	font-weight: 400;
	text-transform: uppercase;
	padding-left: .9rem;
	position: relative;
}
/* vertical gold bar before "THE" */
.site-brand__line1::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 2px;
	background: var(--gold);
	border-radius: 1px;
}
.site-brand__line2 {
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--text);
	position: relative;
	padding-bottom: 2px;
}
.site-brand__line2 span { color: var(--gold); }

/* fading underline on the wordmark */
.site-brand__line2::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, var(--gold), transparent 80%);
	border-radius: 1px;
}

/* glow + pulse on the gold accent words */
.site-brand__line2 span {
	text-shadow: 0 0 12px rgba(201,160,40,0.5);
	animation: brand-pulse 3s ease-in-out infinite;
}
@keyframes brand-pulse {
	0%, 100% { text-shadow: 0 0 10px rgba(201,160,40,0.4); }
	50%       { text-shadow: 0 0 22px rgba(201,160,40,0.85), 0 0 40px rgba(201,160,40,0.3); }
}

/* ============================================================
   V4.16 — QUOTE ARCHIVE: reveal on scroll
   ============================================================ */
.reveal-card {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.reveal-card.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================================
   V4.17 — SITE BRAND: bold, half hero size, Barlow, gold accent
   ============================================================ */
.site-brand { gap: .6rem !important; }
.site-brand__emoji { font-size: 1.4rem !important; }

.site-brand__line1 {
	font-family: var(--font-mono) !important;
	font-size: .62rem !important;
	letter-spacing: .22em !important;
	color: var(--text-faint) !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	padding-left: .85rem !important;
}
.site-brand__line1::before {
	background: var(--gold) !important;
	width: 2px !important;
}

/* Half of hero (clamp ~3.5-4rem) = ~1.75-2rem */
.site-brand__line2 {
	font-family: var(--font-display) !important;
	font-size: clamp(1.6rem, 2.5vw, 2rem) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: .02em !important;
	color: var(--text) !important;
	line-height: 1 !important;
}
.site-brand__line2 span {
	color: var(--gold) !important;
	text-shadow: 0 0 12px rgba(201,160,40,0.5) !important;
	animation: brand-pulse 3s ease-in-out infinite !important;
}
.site-brand__line2::after {
	background: linear-gradient(90deg, var(--gold), transparent 80%) !important;
	height: 1px !important;
}

/* ============================================================
   V4.18 — HEADER: single line, rotated bullhorn, no "THE" line
   ============================================================ */
.site-brand__line1 { display: none !important; }
.site-brand__text-wrap { flex-direction: row !important; align-items: baseline !important; }
.site-brand__line2 {
	font-size: clamp(1.6rem, 2.5vw, 2rem) !important;
}
.site-brand__line2::before {
	content: "THE ";
	color: var(--text-soft) !important;
	font-size: .75em !important;
}
.site-brand__emoji {
	font-size: 2.2rem !important;
	display: inline-block !important;
	transform: rotate(-20deg) !important;
	filter: grayscale(1) brightness(10) !important; /* white */
	line-height: 1 !important;
}

/* ============================================================
   V4.19 — HEADER LOGO REFINEMENT
   ============================================================ */
.site-brand__emoji {
	font-size: 2.8rem !important;
	transform: rotate(-20deg) !important;
}
.site-brand__line2 { font-size: clamp(1.9rem, 3vw, 2.4rem) !important; }

/* "THE" — rotated 90deg, gold, sits beside bullhorn */
.site-brand__line2::before {
	content: "THE" !important;
	color: var(--gold) !important;
	font-size: .45em !important;
	writing-mode: vertical-rl !important;
	text-orientation: mixed !important;
	transform: rotate(180deg) !important;
	letter-spacing: .15em !important;
	margin-right: .4rem !important;
	vertical-align: middle !important;
	opacity: 1 !important;
}

/* ============================================================
   V4.20 — HEADER LOGO: clean single line, no broken vertical THE
   ============================================================ */
.site-brand__line2::before {
	content: "THE " !important;
	color: var(--gold) !important;
	font-size: .6em !important;
	writing-mode: initial !important;
	text-orientation: initial !important;
	transform: none !important;
	letter-spacing: .12em !important;
	margin-right: 0 !important;
	vertical-align: baseline !important;
	opacity: .75 !important;
}
.site-brand__line2::after { display: none !important; }
.site-brand__emoji {
	font-size: 2.4rem !important;
	transform: rotate(-20deg) !important;
	align-self: center !important;
}
.site-brand__text-wrap {
	flex-direction: row !important;
	align-items: center !important;
}
.site-brand__line2 {
	font-size: clamp(1.9rem, 3vw, 2.4rem) !important;
	line-height: 1 !important;
}

/* V4.21 — bullhorn gold, THE white */
.site-brand__emoji {
	filter: none !important;
	color: var(--gold) !important;
}
.site-brand__line2::before {
	color: var(--text) !important;
	opacity: 1 !important;
}

/* V4.22 — SVG megaphone: gold fill via currentColor */
.site-brand__emoji { color: var(--gold) !important; filter: none !important; }