/*
Theme Name: BlogRealm
Theme URI: https://blogrealm.com
Author: BlogRealm
Description: A gold-standard, editorial home for a multi-author blogging network. Aggregates the latest and most-loved stories from every blogger on the network.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: blogrealm
*/

/* ============================================================
   Design tokens
   ============================================================ */
:root {
	--ink:        #17130E;
	--ink-soft:   #4A423A;
	--ink-faint:  #8A8078;
	--paper:      #FBF8F1;
	--paper-2:    #F3ECDD;
	--card:       #FFFFFF;
	--line:       #ECE4D5;
	--gold:       #C8A02A;
	--gold-deep:  #9A7A16;
	--gold-lite:  #F4E4B0;
	--radius:     18px;
	--radius-sm:  12px;
	--shadow:     0 1px 2px rgba(23,19,14,.04), 0 10px 30px -12px rgba(23,19,14,.18);
	--shadow-lg:  0 30px 60px -24px rgba(23,19,14,.34);
	--maxw:       1180px;
	--font-serif: "Fraunces", Georgia, "Times New Roman", serif;
	--font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ease:       cubic-bezier(.22,1,.36,1);
}

@media (prefers-color-scheme: dark) {
	:root {
		--ink:#F2EBDD; --ink-soft:#C9C0B2; --ink-faint:#8E8676;
		--paper:#141110; --paper-2:#1C1815; --card:#1E1A17;
		--line:#2C2621; --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px -14px rgba(0,0,0,.7);
		--shadow-lg:0 34px 70px -24px rgba(0,0,0,.8);
	}
}

/* ============================================================
   Reset & base
   ============================================================ */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
	margin:0; background:var(--paper); color:var(--ink);
	font-family:var(--font-sans); font-size:17px; line-height:1.65;
	-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { font-family:var(--font-serif); font-weight:600; line-height:1.1; letter-spacing:-.01em; margin:0 0 .5em; }
p { margin:0 0 1em; }
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.gold-text { color:var(--gold-deep); }
.serif { font-family:var(--font-serif); }

/* ============================================================
   Buttons
   ============================================================ */
.btn { display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:15px;
	padding:13px 24px; border-radius:999px; border:1px solid transparent; cursor:pointer;
	transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; white-space:nowrap; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--ink); color:var(--paper); }
.btn-primary:hover { box-shadow:0 14px 30px -12px rgba(23,19,14,.6); }
.btn-gold { background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#fff;
	box-shadow:0 10px 26px -10px rgba(154,122,22,.7); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--ink); }
.btn svg { width:18px; height:18px; }

/* ============================================================
   Header
   ============================================================ */
.site-header { position:sticky; top:0; z-index:50;
	backdrop-filter:saturate(180%) blur(14px);
	background:color-mix(in srgb, var(--paper) 82%, transparent);
	border-bottom:1px solid var(--line); }
.site-header .container { display:flex; align-items:center; justify-content:space-between; height:70px; gap:20px; }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--font-serif); font-weight:600; font-size:23px; letter-spacing:-.02em; }
.brand .mark { width:32px; height:32px; border-radius:9px;
	background:linear-gradient(135deg,var(--gold-lite),var(--gold) 45%,var(--gold-deep));
	display:grid; place-items:center; color:#3a2d05; font-weight:800; font-family:var(--font-sans); box-shadow:var(--shadow); }
.nav { display:flex; align-items:center; gap:26px; }
.nav a.link { font-size:15px; font-weight:500; color:var(--ink-soft); transition:color .2s; }
.nav a.link:hover { color:var(--ink); }
.header-cta { display:flex; align-items:center; gap:12px; }
.menu-toggle { display:none; background:none; border:0; cursor:pointer; }

/* ============================================================
   Hero
   ============================================================ */
.hero { position:relative; overflow:hidden; padding:84px 0 68px; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1;
	background:
	radial-gradient(1100px 460px at 78% -8%, color-mix(in srgb,var(--gold-lite) 60%, transparent), transparent 60%),
	radial-gradient(820px 420px at 8% 4%, color-mix(in srgb,var(--gold) 16%, transparent), transparent 55%); }
.hero-inner { max-width:820px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; letter-spacing:.14em;
	text-transform:uppercase; color:var(--gold-deep); background:color-mix(in srgb,var(--gold-lite) 55%, transparent);
	padding:7px 14px; border-radius:999px; border:1px solid color-mix(in srgb,var(--gold) 40%, transparent); }
.hero h1 { font-size:clamp(40px,6.4vw,76px); margin:22px 0 18px; letter-spacing:-.025em; }
.hero h1 .accent { background:linear-gradient(120deg,var(--gold-deep),var(--gold) 55%,var(--gold-deep));
	-webkit-background-clip:text; background-clip:text; color:transparent; font-style:italic; }
.hero .lede { font-size:clamp(18px,2.2vw,22px); color:var(--ink-soft); max-width:620px; margin-bottom:30px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero-stats { display:flex; gap:38px; margin-top:44px; flex-wrap:wrap; }
.hero-stats .stat b { font-family:var(--font-serif); font-size:34px; display:block; line-height:1; }
.hero-stats .stat span { font-size:13.5px; color:var(--ink-faint); letter-spacing:.04em; text-transform:uppercase; }

/* ============================================================
   Section scaffolding
   ============================================================ */
.section { padding:56px 0; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:30px; }
.section-head h2 { font-size:clamp(26px,3.4vw,38px); }
.section-head .kicker { font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:6px; }
.section-head p { color:var(--ink-faint); margin:0; }

/* ============================================================
   Card grid (latest)
   ============================================================ */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.grid.feature { grid-template-columns:1.7fr 1fr 1fr; grid-auto-rows:1fr; }
.card { position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
	overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow);
	transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb,var(--gold) 40%, var(--line)); }
.card .thumb { aspect-ratio:16/10; background:linear-gradient(135deg,var(--paper-2),var(--line)); overflow:hidden; position:relative; }
.card .thumb img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.card:hover .thumb img { transform:scale(1.05); }
.card .thumb.placeholder::after { content:""; position:absolute; inset:0;
	background:radial-gradient(400px 200px at 30% 20%, color-mix(in srgb,var(--gold-lite) 70%, transparent), transparent 70%); }
.card .body { padding:22px; display:flex; flex-direction:column; gap:12px; flex:1; }
.blogchip { display:inline-flex; align-items:center; gap:7px; align-self:flex-start; font-size:12.5px; font-weight:600;
	color:var(--gold-deep); background:color-mix(in srgb,var(--gold-lite) 45%, transparent); padding:5px 11px; border-radius:999px; }
.card h3 { font-size:22px; line-height:1.2; margin:0; }
.card:hover h3 { color:var(--gold-deep); }
.card .excerpt { color:var(--ink-soft); font-size:15px; margin:0; }
.card .meta { display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:8px; font-size:13.5px; color:var(--ink-faint); }
.card .meta img { width:28px; height:28px; border-radius:50%; }
.card .meta .dot { width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.5; }
/* feature card (first, large) */
.grid.feature .card:first-child h3 { font-size:30px; }
.grid.feature .card:first-child .thumb { aspect-ratio:16/11; }

/* ============================================================
   Popular (ranked, horizontal)
   ============================================================ */
.popular-band { background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(300px,1fr); gap:22px;
	overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:thin; }
.rail::-webkit-scrollbar { height:8px; }
.rail::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; }
.pop { scroll-snap-align:start; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
	padding:22px; display:flex; gap:16px; align-items:flex-start; box-shadow:var(--shadow);
	transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.pop:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.pop .rank { font-family:var(--font-serif); font-size:40px; line-height:.8; color:transparent;
	-webkit-text-stroke:1.5px var(--gold); background:linear-gradient(var(--gold-lite),var(--gold)); -webkit-background-clip:text; background-clip:text; min-width:38px; }
.pop .pop-body h3 { font-size:19px; margin:0 0 6px; }
.pop:hover .pop-body h3 { color:var(--gold-deep); }
.pop .pop-meta { font-size:13px; color:var(--ink-faint); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.views { display:inline-flex; align-items:center; gap:5px; font-weight:600; color:var(--gold-deep); }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band { position:relative; overflow:hidden; margin:20px auto; }
.cta-inner { background:linear-gradient(135deg,var(--ink),#2a231b);
	border-radius:28px; padding:64px 48px; text-align:center; position:relative; overflow:hidden; }
.cta-inner::before { content:""; position:absolute; inset:0;
	background:radial-gradient(600px 300px at 80% -20%, color-mix(in srgb,var(--gold) 45%, transparent), transparent 60%); }
.cta-inner h2 { color:var(--paper); font-size:clamp(28px,4vw,44px); position:relative; }
.cta-inner p { color:color-mix(in srgb,var(--paper) 78%, transparent); position:relative; max-width:520px; margin:0 auto 26px; }
.cta-inner .hero-actions { justify-content:center; position:relative; }

/* ============================================================
   Empty state
   ============================================================ */
.empty { text-align:center; padding:60px 20px; border:1.5px dashed var(--line); border-radius:var(--radius); color:var(--ink-faint); }
.empty h3 { color:var(--ink); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { border-top:1px solid var(--line); background:var(--paper-2); margin-top:40px; }
.site-footer .container { display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; padding-top:44px; padding-bottom:44px; }
.site-footer .brand { font-size:20px; }
.site-footer .cols { display:flex; gap:56px; flex-wrap:wrap; }
.site-footer h4 { font-family:var(--font-sans); font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); margin:0 0 12px; }
.site-footer a.link { display:block; color:var(--ink-soft); font-size:15px; padding:4px 0; }
.site-footer a.link:hover { color:var(--gold-deep); }
.copyright { border-top:1px solid var(--line); text-align:center; padding:20px; color:var(--ink-faint); font-size:13.5px; }

/* ============================================================
   Single post / generic content
   ============================================================ */
.post-hero { padding:56px 0 20px; }
.post-hero .container { max-width:760px; }
.post-hero h1 { font-size:clamp(32px,5vw,52px); margin:14px 0 18px; }
.article { max-width:740px; margin:0 auto; padding:20px 24px 60px; font-size:18.5px; line-height:1.8; }
.article img { border-radius:var(--radius-sm); margin:28px 0; }
.article h2 { font-size:30px; margin:44px 0 14px; }
.article h3 { font-size:24px; margin:34px 0 12px; }
.article blockquote { border-left:3px solid var(--gold); margin:28px 0; padding:6px 22px; font-family:var(--font-serif); font-size:22px; font-style:italic; color:var(--ink-soft); }
.article a { color:var(--gold-deep); text-decoration:underline; text-underline-offset:3px; }
.article pre { background:var(--paper-2); padding:18px; border-radius:var(--radius-sm); overflow:auto; font-size:14.5px; }
.post-byline { display:flex; align-items:center; gap:12px; color:var(--ink-faint); font-size:15px; }
.post-byline img { width:44px; height:44px; border-radius:50%; }

/* reveal-on-scroll */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px){
	.grid, .grid.feature { grid-template-columns:repeat(2,1fr); }
	.grid.feature .card:first-child { grid-column:span 2; }
}
@media (max-width:760px){
	.nav .link, .header-cta .btn-ghost { display:none; }
	.menu-toggle { display:inline-flex; }
	.grid, .grid.feature { grid-template-columns:1fr; }
	.grid.feature .card:first-child { grid-column:auto; }
	.hero-stats { gap:24px; }
	.cta-inner { padding:44px 24px; }
	.section { padding:40px 0; }
}