:root {
	--ink: #171717;
	--muted: #6f6f6f;
	--paper: #f5f3ef;
	--card: rgba(255, 255, 255, .94);
	--line: rgba(20, 20, 20, .13);
	--red: #d90732;
	--dark-red: #aa0628;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--paper); font-family: "DM Sans", sans-serif; overflow-x: hidden; }
body::before { content: ""; position: fixed; z-index: -2; inset: 76px 0 auto; height: 360px; background: linear-gradient(90deg, transparent 31%, rgba(255,255,255,.94) 31% 39%, transparent 39%), linear-gradient(0deg, transparent 42%, rgba(255,255,255,.94) 42% 58%, transparent 58%), var(--red); clip-path: polygon(0 0,100% 0,100% 77%,0 100%); }
.glow { position: fixed; z-index: -1; width: 32rem; height: 32rem; border-radius: 50%; filter: blur(110px); opacity: .28; }
.glow-one { background: #ff7892; top: -18rem; right: -9rem; }
.glow-two { background: #d7d7d7; bottom: -18rem; left: -12rem; }
.site-header { position: sticky; top: 0; z-index: 5; height: 76px; padding: 0 max(24px, calc((100vw - 1080px) / 2)); display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.brand { display: flex; gap: 11px; align-items: center; color: inherit; text-decoration: none; font-weight: 700; line-height: 1.05; }
.brand > span { display: grid; place-items: center; width: 40px; height: 40px; color: white; background: var(--red); border: 2px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); font-family: "Archivo Black", sans-serif; font-size: 11px; }
.brand small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .04em; }
.live { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 8px; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(217,7,50,.13); }
main { width: min(100% - 32px, 660px); margin: 0 auto; padding: 72px 0 190px; }
.feed-heading { position: relative; margin: 0 -24px 42px; padding: 20px 24px 32px; text-align: center; color: white; }
.hero-mic { width: 72px; height: 72px; margin: 0 auto 14px; display: grid; place-items: center; color: var(--red); background: white; border: 3px solid var(--ink); border-radius: 50%; box-shadow: 6px 6px 0 var(--ink); }
.hero-mic svg { width: 38px; height: 38px; }
.eyebrow { margin: 0 0 12px; color: white; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; text-shadow: 1px 1px 0 var(--ink); }
h1 { margin: 0; color: white; font-family: "Archivo Black", sans-serif; font-size: clamp(3rem, 9vw, 5.7rem); line-height: .9; letter-spacing: -.055em; -webkit-text-stroke: 2px var(--ink); text-shadow: 5px 5px 0 var(--ink); }
h1 em { color: white; font-style: normal; }
#quote-total { display: inline-block; margin: 24px 0 0; padding: 7px 12px; color: var(--ink); background: white; border: 2px solid var(--ink); border-radius: 999px; font-size: 11px; font-weight: 700; }
.quote-grid { display: grid; gap: 16px; }
.quote-card { min-height: 215px; padding: 30px 32px 25px; display: flex; flex-direction: column; justify-content: space-between; background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 12px 35px rgba(35,49,40,.045); backdrop-filter: blur(12px); animation: rise .45s ease both; transition: transform .2s ease, border-color .2s ease; }
.quote-card:hover { transform: translateY(-3px); border-color: rgba(217,7,50,.45); box-shadow: 7px 7px 0 rgba(217,7,50,.14); }
.quote-mark { color: var(--red); font-family: Georgia, serif; font-size: 48px; line-height: .65; }
.quote-text { margin: 18px 0 30px; font-size: clamp(18px, 3vw, 22px); line-height: 1.52; letter-spacing: -.015em; overflow-wrap: anywhere; }
.quote-author { padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.quote-author::before { content: "@"; color: var(--muted); font-weight: 400; }
.quote-date { float: right; color: var(--muted); font-weight: 400; }
.empty { padding: 65px 24px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 24px; }
.composer-hud { position: fixed; z-index: 10; left: 50%; bottom: 22px; width: min(calc(100% - 28px), 760px); padding: 10px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; color: white; background: rgba(23,23,23,.96); border: 2px solid white; border-radius: 20px; box-shadow: 0 0 0 3px var(--ink), 0 20px 60px rgba(18,18,18,.3); backdrop-filter: blur(20px); }
.hud-icon { flex: 0 0 44px; height: 44px; display: grid; place-items: center; color: var(--red); background: white; border-radius: 12px; }
.hud-icon svg { width: 24px; height: 24px; }
.hero-mic svg, .hud-icon svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
form { min-width: 0; flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; }
form h2 { margin: 0; font-size: 13px; white-space: nowrap; }
.hud-fields { min-width: 0; position: relative; display: grid; grid-template-columns: 110px 1fr; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.08); border-radius: 13px; }
input, textarea { min-width: 0; height: 44px; padding: 13px; color: white; background: transparent; border: 0; outline: none; font: inherit; font-size: 12px; resize: none; }
input { border-right: 1px solid rgba(255,255,255,.1); }
input::placeholder, textarea::placeholder { color: rgba(255,255,255,.47); }
#character-count { display: none; }
#form-message { position: absolute; left: 20px; bottom: calc(100% + 10px); margin: 0; padding: 7px 11px; color: var(--ink); background: white; border-radius: 8px; font-size: 11px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
#form-message:empty { display: none; }
button { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; color: white; background: var(--red); border: 0; border-radius: 12px; font: inherit; font-size: 20px; font-weight: 700; cursor: pointer; transition: transform .2s, background .2s; }
button:hover { transform: translateY(-2px); background: var(--dark-red); }
button:disabled { opacity: .6; cursor: wait; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 650px) {
	main { padding-top: 54px; }
	.composer-hud { bottom: 10px; align-items: stretch; }
	.hud-icon, form h2 { display: none; }
	form { grid-template-columns: minmax(0, 1fr) auto; }
	.hud-fields { grid-template-columns: 90px 1fr; }
	.quote-card { padding: 26px 24px 22px; }
}
@media (max-width: 420px) {
	.site-header { padding-inline: 16px; }
	main { width: min(100% - 20px, 660px); }
	.composer-hud { width: calc(100% - 16px); }
	.hud-fields { grid-template-columns: 82px 1fr; }
	input, textarea { padding-inline: 10px; }
}