/* =========================================
SEOFlow Vancouver — Grotesk Edition
Modern, big, and brutally clean.
========================================= */
/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Inter:wght@400;500&display=swap');
:root {     /* Colors — minimalist + Vancouver blue */
--bg: #f8f9fa; --fg: #111; --accent: #a90828;     /* Vancouver ocean blue */ --accent-light: #03121e; --muted: #555; --border: #ddd;     /* Typography scale — bold and fluid */ --font-base: clamp(1.15rem, 1vw + 1rem, 1.6rem); --font-small: clamp(1rem, 0.7vw + 0.8rem, 1.25rem); --font-large: clamp(2rem, 3vw + 1rem, 3rem); --font-xl: clamp(3rem, 6vw + 1rem, 5rem);     /* Layout spacing */ --space-xs: 0.25rem; --space-sm: 0.75rem; --space-md: 1.5rem; --space-lg: 3rem; --space-xl: 6rem; --radius: 0.5rem; --max-width: 80ch; }
/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: var(--font-base); line-height: 1.6; background: var(--bg); color: var(--fg); scroll-behavior: smooth; text-rendering: optimizeLegibility; }
body { display: flex; flex-direction: column; min-height: 100vh; }
/* ======================
TYPOGRAPHY
====================== */
main { flex: 1; width: 100%; max-width: var(--max-width); margin: auto; padding: var(--space-lg) var(--space-md); font-family: "Inter", sans-serif; }
h1, h2, h3, h4 { font-family: "Space Grotesk", sans-serif; font-weight: 700; line-height: 1.15; margin-top: var(--space-lg); margin-bottom: var(--space-md); }
h1 { font-size: var(--font-xl); color: var(--accent); text-transform: uppercase; letter-spacing: -0.03em; }
h2 { font-size: var(--font-large); border-bottom: 3px solid var(--border); padding-bottom: var(--space-xs); }
h3 { font-size: clamp(1.5rem, 1.5vw + 1rem, 2.2rem); }
p { margin-bottom: var(--space-md); font-size: var(--font-base); color: var(--fg); line-height: 1.7; }
ul, ol { padding-left: var(--space-lg); margin-bottom: var(--space-md); }
li { margin-bottom: var(--space-sm); }
/* ======================
HEADER + NAV
====================== */
header { background: linear-gradient(135deg, #6f0313, #6a0909); color: white; text-align: center; padding: var(--space-lg) var(--space-md); border-bottom: 4px solid var(--accent-light); }
header h1 { color: white; font-size: var(--font-xl); letter-spacing: -0.02em; }
nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-md); }
nav a { color: white; text-decoration: none; background: rgba(255, 255, 255, 0.15); padding: var(--space-sm) var(--space-md); border-radius: var(--radius); font-size: var(--font-small); text-transform: uppercase; letter-spacing: 0.05em; transition: background 0.3s ease, transform 0.2s ease; }
nav a:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); }
/* ======================
LINKS + ELEMENTS
====================== */
a { color: var(--accent); text-decoration: none; border-bottom: 2px solid transparent; transition: all 0.3s ease; }
a:hover { border-bottom: 2px solid var(--accent-light); color: var(--accent-light); }
blockquote { margin: var(--space-lg) 0; padding: var(--space-md) var(--space-lg); background: #e3f2fd; border-left: 6px solid var(--accent); font-style: italic; font-size: clamp(1.1rem, 1vw + 0.8rem, 1.4rem); color: #222; }
/* ======================
CODE
====================== */
code { background: #f2f2f2; padding: 0.3em 0.5em; border-radius: var(--radius); font-family: "Courier New", monospace; font-size: var(--font-small); }
/* ======================
FOOTER
====================== */
footer { background: #f0f0f0; padding: var(--space-lg) var(--space-md); text-align: center; border-top: 2px solid var(--border); font-size: var(--font-small); color: var(--muted); }
footer a { color: var(--accent); font-weight: 500; }
/* ======================
RESPONSIVE GRID
====================== */
section { display: grid; gap: var(--space-md); }
/* ======================
FORMS
====================== */
input, textarea, button { font: inherit; padding: var(--space-sm); border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: var(--space-md); width: 100%; }
button { background: var(--accent); color: white; border: none; cursor: pointer; font-family: "Space Grotesk", sans-serif; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; padding: var(--space-sm) var(--space-md); transition: background 0.3s ease; }
button:hover { background: var(--accent-light); }
/* ======================
ACCESSIBILITY
====================== */
:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 4px; }