Refresh site with magazine styling

public/css/site.css

@@ -1,44 +1,63 @@
 :root {
-  --brand-dark: #1a1a2e;
-  --text-muted-soft: #6c757d;
+  --brand-dark: #121826;
+  --brand-accent: #b48a5a;
+  --paper: #fcfbf7;
+  --paper-2: #f4efe7;
+  --ink: #1e2430;
+  --text-muted-soft: #6b7280;
 }
 
 body {
-  background-color: #f8f9fa;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  color: #212529;
+  background:
+    radial-gradient(circle at top left, rgba(180, 138, 90, 0.09), transparent 28%),
+    radial-gradient(circle at top right, rgba(18, 24, 38, 0.05), transparent 24%),
+    linear-gradient(180deg, #ffffff 0%, var(--paper) 24%, #f8f4ee 100%);
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  color: var(--ink);
+  line-height: 1.65;
 }
 
 /* Navbar */
+.site-topbar {
+  height: 6px;
+  background: linear-gradient(90deg, var(--brand-accent), #d6b186 40%, #7c5c3a 100%);
+}
+
 .navbar.bg-dark {
   background-color: var(--brand-dark) !important;
 }
 
+.navbar {
+  backdrop-filter: blur(8px);
+}
+
 .brand {
-  font-size: 1.25rem;
-  font-weight: 700;
-  letter-spacing: -0.01em;
+  font-size: 1.35rem;
+  font-weight: 800;
+  letter-spacing: -0.03em;
   color: #fff !important;
+  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
 }
 
 .brand-tagline {
   display: inline-block;
-  font-size: 0.65rem;
-  font-weight: 400;
-  color: rgba(255,255,255,0.45);
+  font-size: 0.72rem;
+  font-weight: 700;
+  color: rgba(255,255,255,0.55);
   text-transform: uppercase;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.18em;
   margin-left: 0.5rem;
   vertical-align: middle;
 }
 
 .navbar .nav-link {
   font-size: 0.9rem;
-  font-weight: 500;
-  color: rgba(255,255,255,0.7) !important;
+  font-weight: 600;
+  color: rgba(255,255,255,0.72) !important;
   padding-left: 1rem !important;
   padding-right: 1rem !important;
   transition: color 0.15s;
+  position: relative;
 }
 
 .navbar .nav-link:hover,
@@ -46,36 +65,159 @@ body {
   color: #fff !important;
 }
 
+.navbar .nav-link.active::after {
+  content: "";
+  position: absolute;
+  left: 1rem;
+  right: 1rem;
+  bottom: 0.2rem;
+  height: 2px;
+  background: var(--brand-accent);
+  border-radius: 999px;
+}
+
 /* Main content */
 .site-main {
-  padding-top: 2.5rem;
-  padding-bottom: 3rem;
+  padding-top: 2rem;
+  padding-bottom: 3.5rem;
   min-height: calc(100vh - 60px);
 }
 
 /* Hero */
 .hero {
-  border-bottom: 1px solid #e9ecef;
+  border: 1px solid rgba(18, 24, 38, 0.08);
+  border-radius: 1.5rem;
+  background:
+    linear-gradient(135deg, rgba(255,255,255,0.88), rgba(255,255,255,0.72)),
+    radial-gradient(circle at top right, rgba(180, 138, 90, 0.12), transparent 36%);
+  box-shadow: 0 20px 60px rgba(18, 24, 38, 0.08);
+  padding: 3rem 2rem;
+}
+
+.hero .display-5,
+.page-title,
+.card h1,
+.card h2,
+.card h3 {
+  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
+  letter-spacing: -0.02em;
+}
+
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--brand-accent);
+}
+
+.eyebrow::before {
+  content: "";
+  width: 2rem;
+  height: 1px;
+  background: currentColor;
+}
+
+.lede {
+  max-width: 42rem;
+  font-size: 1.08rem;
+  color: var(--text-muted-soft);
 }
 
 /* Cards */
 .card {
-  border: 1px solid rgba(0,0,0,0.07);
-  border-radius: 0.5rem;
+  border: 1px solid rgba(18, 24, 38, 0.08);
+  border-radius: 1.1rem;
+  background: rgba(255,255,255,0.9);
+  overflow: hidden;
 }
 
 .card.shadow-sm {
-  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
+  box-shadow: 0 10px 32px rgba(18, 24, 38, 0.07) !important;
+}
+
+.card-body {
+  padding: 1.35rem 1.35rem;
 }
 
 /* Alerts (flash messages) */
 .alert {
-  border-radius: 0.5rem;
+  border-radius: 1rem;
   font-size: 0.9rem;
+  box-shadow: 0 8px 24px rgba(18, 24, 38, 0.04);
 }
 
 /* Post/article cards */
 article.card:hover {
-  box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
-  transition: box-shadow 0.2s;
+  box-shadow: 0 16px 40px rgba(18, 24, 38, 0.12) !important;
+  transition: box-shadow 0.2s, transform 0.2s;
+  transform: translateY(-1px);
+}
+
+.article-meta,
+.small.text-muted {
+  color: var(--text-muted-soft) !important;
+}
+
+.prose {
+  max-width: 70ch;
+  font-size: 1.07rem;
+}
+
+.prose p:last-child {
+  margin-bottom: 0;
+}
+
+.magazine-label {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.7rem;
+  border-radius: 999px;
+  background: rgba(180, 138, 90, 0.12);
+  color: #8b653f;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.magazine-list .card {
+  border-left: 4px solid transparent;
+}
+
+.magazine-list .card:hover {
+  border-left-color: var(--brand-accent);
+}
+
+.btn {
+  border-radius: 999px;
+  font-weight: 600;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #27324a, #1b2436);
+  border-color: #1b2436;
+}
+
+.btn-outline-primary {
+  border-color: rgba(27, 36, 54, 0.2);
+  color: #1b2436;
+}
+
+.btn-outline-primary:hover {
+  background: #1b2436;
+  border-color: #1b2436;
+}
+
+.btn-outline-secondary {
+  border-color: rgba(18, 24, 38, 0.18);
+  color: var(--ink);
+}
+
+.btn-outline-secondary:hover {
+  background: rgba(18, 24, 38, 0.06);
+  color: var(--ink);
 }