/*
 * RolnRock theme: CSS used only on the homepage.
 * Moved unchanged from style.css in Q1 stage 7 (2026-10-16). Loaded after style.css on those pages only (rolnrock_scripts() in functions.php).
 */

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding-block:64px 56px;
  background:
    radial-gradient(680px 340px at 18% -10%, rgba(226,35,26,.16), transparent 60%),
    radial-gradient(560px 300px at 88% 10%, rgba(53,228,224,.10), transparent 60%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;}
.hero h1{font-size:clamp(38px,5.6vw,66px); line-height:.98;}
.hero h1 .hl{color:var(--red); -webkit-text-stroke:1px rgba(255,255,255,.08);}
.hero p.lede{font-size:17px; line-height:1.6; color:var(--chrome); max-width:46ch; margin-top:18px;}
.hero-actions{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
.hero-art{position:relative; display:flex; align-items:center; justify-content:center;}
.hero-art img{width:100%; max-width:480px; filter:drop-shadow(0 20px 40px rgba(0,0,0,.55));}

/* ---------- tagline strip ---------- */
.tagline-strip{border-bottom:1px solid var(--line); background:var(--bg-raised); overflow:hidden;}
.tagline-strip .track{
  display:flex; align-items:center; gap:100px; padding-block:16px; white-space:nowrap; overflow:hidden;
}
.tagline-strip .track span{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--dotc,var(--red));}
.tagline-strip .track span:nth-child(5n+2){--dotc:var(--cyan);}
.tagline-strip .track span:nth-child(5n+3){--dotc:var(--magenta);}
.tagline-strip .track span:nth-child(5n+4){--dotc:#ffd23f;}
.tagline-strip .track span:nth-child(5n){--dotc:var(--cyan);}

/* ---------- card grid ---------- */
.card-media .glyph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.16; font-size:64px; z-index:0;}

/* ---------- community ---------- */
.community-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:28px;}
.contrib-card{background:var(--bg-raised); border:1px solid var(--line); border-radius:6px; padding:28px; display:flex; gap:18px;}
.avatar-inner{width:calc(100% - 4px); height:calc(100% - 4px); border-radius:50%; background:var(--bg-raised); display:flex; align-items:center; justify-content:center; color:var(--text); overflow:hidden;}
.avatar-inner img{width:100%;height:100%;object-fit:cover;}
.contrib-card h3{font-size:17px; margin-bottom:4px;}
.contrib-card .role{font-family:'Space Mono'; font-size:11px; color:var(--cyan); letter-spacing:.08em; text-transform:uppercase;}
.contrib-card p{font-size:14px; color:var(--chrome-dim); line-height:1.6; margin-top:10px;}

/* ---------- footer ---------- */
@media (max-width:920px) {
	.hero-grid{grid-template-columns:1fr;}
	.hero-art{order:-1;}
	.community-grid{grid-template-columns:1fr;}
}
@media (max-width:620px) {
	.hero h1{font-size:13vw;}
}

/* ---- Crate Digest: MailPoet signup form, restyled to match .sub-row ---- */
.crate-digest-form .mailpoet_form { margin: 0; }
.crate-digest-form form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.crate-digest-form .mailpoet_paragraph { margin: 0 !important; flex: 1 1 160px; }
.crate-digest-form .mailpoet_paragraph:has(.mailpoet_submit) { flex: 0 0 auto; }
.crate-digest-form .mailpoet_text {
	background: var(--bg) !important;
	border: 1px solid var(--line) !important;
	border-radius: 2px !important;
	padding: 12px !important;
	color: var(--text) !important;
	font-family: 'Archivo', sans-serif !important;
	font-size: 13px !important;
	height: auto !important;
	box-sizing: border-box !important;
}
.crate-digest-form .mailpoet_text::placeholder { color: var(--steel); opacity: 1; }
.crate-digest-form .mailpoet_submit {
	background: var(--text) !important;
	color: var(--bg) !important;
	border: none !important;
	border-radius: 2px !important;
	padding: 12px 18px !important;
	height: auto !important;
	font-family: 'Space Mono', monospace !important;
	font-size: 11px !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	width: auto !important;
	box-sizing: border-box !important;
}
.crate-digest-form .mailpoet_submit:hover { background: var(--chrome); }
.crate-digest-form .mailpoet_message { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--cyan); margin-top: 10px; }
.crate-digest-form .mailpoet_validate_error { color: var(--red); font-size: 11px; margin-top: 6px; }

/* ---------- founding member callout ---------- */
.hero .rr-founding{margin-top:22px; max-width:560px;}

/* CR7: Pick something for me */
.rr-pick-num{font-family:'Space Mono',monospace;font-size:12px}

/* CR9: Crate of the Week */
.rr-cotw{display:flex;gap:32px;padding:28px;margin:0 0 28px;border:1px solid rgba(var(--red-rgb),.45);border-radius:8px;background:var(--bg-raised)}
.rr-cotw-who{width:300px;flex:0 0 300px;display:flex;flex-direction:column;gap:12px}
.rr-cotw-kicker{margin:0;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.rr-cotw-member{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.rr-cotw-member img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.rr-cotw-name{display:block;font-family:'Anton',sans-serif;font-size:28px;line-height:1;text-transform:uppercase}
.rr-cotw-since{display:block;font-size:13px;color:var(--chrome-dim);margin-top:4px}
.rr-cotw-stats{margin:0;font-family:'Space Mono',monospace;font-size:12px;color:var(--text-dim)}
.rr-cotw-genres{margin:0;font-size:14px;color:var(--text-dim)}
.rr-cotw-cta{align-self:flex-start;margin-top:auto}
.rr-cotw-recs{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.rr-cotw-label{margin:0;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--chrome-dim)}
.rr-cotw-top{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.rr-cotw-top a{display:block;text-decoration:none;color:inherit}
.rr-cotw-top img,.rr-cotw-top .rr-rec-cover{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:4px;display:block}
.rr-cotw-t{display:block;font-size:14px;font-weight:700;line-height:1.25;margin-top:8px}
.rr-cotw-a{display:block;font-size:12px;color:var(--chrome-dim)}
.rr-cotw-recent{display:flex;flex-wrap:wrap;gap:10px}
.rr-cotw-recent img,.rr-cotw-recent .rr-rec-cover{width:52px;height:52px;object-fit:cover;border-radius:3px;display:block}
@media (max-width:860px) {
	.rr-cotw{flex-direction:column;padding:20px}
	.rr-cotw-who{width:auto;flex:none}
}
@media (max-width:560px) {
	.rr-cotw-top{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* On Our Turntable tabs (Now playing / Album of the Week / Crate of the Week) */
.rr-tt-bar-row{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);margin-bottom:20px}
.rr-tt-tabs{display:flex;gap:4px;flex:1;min-width:0}
.rr-tt-dot{width:8px;height:8px;border-radius:50%;background:var(--line)}
.rr-tt-tab.is-on .rr-tt-dot{background:var(--red)}
.rr-aotw-cover{flex:0 0 360px}
.rr-aotw-cover img,.rr-aotw-cover .rr-rec-cover{width:360px;height:360px;object-fit:cover;border-radius:6px;display:block;box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.rr-aotw-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.rr-aotw-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:14px}
.rr-aotw-meta .rr-pick-stars{font-size:22px}
.rr-aotw-n{color:var(--chrome-dim)}
.rr-aotw-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:4px}
.rr-aotw-listen{display:contents}
.rr-tt-panel .rr-cotw{margin:0;padding:0;border:0;background:none}
@media (max-width:900px) {
	.rr-aotw-cover{flex:none}
	.rr-aotw-cover img,.rr-aotw-cover .rr-rec-cover{width:100%;height:auto;aspect-ratio:1;max-width:360px}
}
@media (max-width:640px) {
	.rr-tt-bar-row{flex-wrap:wrap;border-bottom:0;gap:8px}
	.rr-tt-tabs{flex-basis:100%;gap:6px}
	.rr-tt-tab .rr-tt-dot{display:none}
}

/* Homepage: tighter spacing between sections */
body.home main > section.hero{padding-bottom:44px}
body.home .sec-head{margin-bottom:24px}

/* K8 (2026-10-15): images now carry width and height so the page doesn't jump while they load; these keep their CSS size */
.hero-art img{height:auto}

/* Founders on the homepage (2026-10-15): photo links to the member profile, plus an author page link */
.contrib-card a.avatar{text-decoration:none}
.contrib-card a.avatar:hover,.contrib-card a.avatar:focus-visible{filter:brightness(1.15)}
.contrib-card .contrib-author{display:block; margin-top:6px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--red) !important; text-decoration:none !important}
.contrib-card .contrib-author:hover{text-decoration:underline !important}

/* Founder photos match the member profile picture size (120px, 88px on phones) */
.contrib-card .avatar{width:120px; height:120px; font-size:40px}
@media (max-width:800px) {
	.contrib-card .avatar{width:88px; height:88px; font-size:30px}
}