/* Loudspeakers.ca — Speaker black / tube amber / brushed aluminum */
:root {
    --black: #111111;
    --black-deep: #0A0A0A;
    --charcoal: #1A1A1A;
    --amber: #C87941;
    --amber-bright: #D4944F;
    --aluminum: #E5E7EB;
    --aluminum-dark: #9CA3AF;
    --white: #FAFAFA;
    --ink: #1F2937;
    --rule: rgba(17,17,17,0.12);
}

body {
    font-family: 'Spectral', Georgia, serif;
    color: var(--ink);
    background: var(--white);
}

h1, h2, h3, h4, h5, h6,
#logo, #nav ul li a,
.box.page-content header h2,
.box.page-content header p,
.meta li, #copyright,
input[type="submit"], .button {
    font-family: 'Urbanist', system-ui, sans-serif;
}

/* Header */
#header {
    background: var(--black);
    border-bottom: 3px solid var(--amber);
}
#header .logo h1 a { color: var(--white); font-weight: 700; }
#header .logo h1 a span { color: var(--amber); }
#header .logo p { color: var(--aluminum-dark); }

/* Nav */
#nav {
    background: var(--charcoal);
}
#nav ul li a {
    color: rgba(255,255,255,0.7);
    font-weight: 500;
    font-size: 0.9rem;
}
#nav ul li a:hover, #nav ul li.current a {
    color: var(--white);
}
#nav ul li ul {
    background: var(--charcoal);
    border: 1px solid rgba(255,255,255,0.08);
}
#nav ul li ul li a {
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
}
#nav ul li ul li a:hover { color: var(--amber); }

/* Article content */
.box.page-content header h2 {
    font-weight: 700;
    color: var(--black);
}
.box.page-content header p {
    color: var(--aluminum-dark);
}
.box.page-content .meta li {
    color: var(--amber);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.content p, .content li, .content dd {
    font-family: 'Spectral', Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--ink);
}

.content h3 {
    font-family: 'Urbanist', system-ui, sans-serif;
    font-weight: 700;
    color: var(--black);
    margin-top: 1.8em;
    padding-bottom: 0.3em;
    border-bottom: 2px solid var(--rule);
}

.content a {
    color: var(--black);
    border-bottom: 1px solid var(--amber);
}
.content a:hover { color: var(--amber); }

.content blockquote {
    border-left: 4px solid var(--amber);
    background: #F9FAFB;
    padding: 1em 1.4em;
    font-style: italic;
    color: var(--ink);
}

.content strong { font-weight: 700; color: var(--black); }

.content .image.featured img {
    border-radius: 4px;
    border: 1px solid var(--rule);
}

/* Spec box — dark highlight */
.spec-box {
    background: var(--black);
    color: var(--white);
    padding: 20px 24px;
    border-radius: 6px;
    margin: 24px 0;
    border-left: 4px solid var(--amber);
}
.spec-box strong { color: var(--amber-bright); }
.spec-box p { color: rgba(255,255,255,0.85); margin-bottom: 6px; }
.spec-box p:last-child { margin-bottom: 0; }

/* Sidebar */
.sidepanel .box {
    background: #F3F4F6;
    border: 1px solid var(--rule);
}
.sidepanel .box h3 {
    font-family: 'Urbanist', system-ui, sans-serif;
    font-weight: 700;
    color: var(--black);
    font-size: 0.95rem;
}
.sidepanel .box a { color: var(--black); }
.sidepanel .box a:hover { color: var(--amber); }

/* Footer */
#footer {
    background: var(--black);
    color: rgba(255,255,255,0.6);
    border-top: 3px solid var(--amber);
}
#footer h2 {
    color: var(--amber);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
#footer a { color: rgba(255,255,255,0.6); }
#footer a:hover { color: var(--amber-bright); }
#footer ul.divided li { border-top-color: rgba(255,255,255,0.06); }
#copyright { color: rgba(255,255,255,0.25); }
#copyright a { color: rgba(255,255,255,0.3); }

/* Buttons */
.button, input[type="submit"] {
    background: var(--black);
    color: var(--white);
    font-weight: 600;
}
.button:hover, input[type="submit"]:hover {
    background: var(--amber);
    color: var(--black);
}