/* ============================================================
   360SPACE — Premium Editorial Stylesheet
   Aesthetic: Luxury Magazine · Refined Ink · Authoritative
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=DM+Mono:wght@400;500&display=swap');

   /* ===== DESIGN TOKENS ===== */
   :root {
       /* Brand palette — ink, parchment, gold */
       --ink:           #0d0d0e;
       --ink-80:        #1c1c20;
       --ink-60:        #3a3a42;
       --ink-40:        #6b6b78;
       --ink-20:        #a8a8b4;
       --ink-10:        #d4d4dc;
       --ink-05:        #eeeef2;
       --ink-02:        #f7f7f9;
   
       --parchment:     #faf8f4;
       --parchment-mid: #f2ede4;
       --parchment-deep:#e6ddd0;
   
       --gold:          #b8922a;
       --gold-light:    #d4a93c;
       --gold-pale:     #f5edda;
   
       --accent:        #1a3a5c;
       --accent-mid:    #2d5986;
       --accent-pale:   #e8eef5;
   
       --success:       #2d6a4f;
       --danger:        #c0392b;
       --warning:       #b8922a;
   
       /* Functional aliases (keep dashboard compat) */
       --primary-color:     var(--accent);
       --primary-dark:      #0f2540;
       --secondary-color:   var(--gold);
       --text-color:        var(--ink);
       --text-light:        var(--ink-40);
       --bg-color:          #ffffff;
       --bg-light:          var(--parchment);
       --bg-dark:           var(--ink);
       --border-color:      var(--ink-10);
       --success-color:     var(--success);
       --danger-color:      var(--danger);
       --warning-color:     var(--warning);
   
       /* Typography */
       --font-display: 'Cormorant Garamond', 'Georgia', serif;
       --font-body:    'DM Sans', 'Helvetica Neue', sans-serif;
       --font-mono:    'DM Mono', 'Courier New', monospace;
   
       /* Elevation */
       --shadow-sm:  0 1px 3px rgba(13,13,14,.06), 0 1px 2px rgba(13,13,14,.04);
       --shadow:     0 4px 12px rgba(13,13,14,.08), 0 2px 6px rgba(13,13,14,.05);
       --shadow-lg:  0 12px 32px rgba(13,13,14,.10), 0 4px 12px rgba(13,13,14,.06);
       --shadow-xl:  0 24px 56px rgba(13,13,14,.12), 0 8px 20px rgba(13,13,14,.07);
       --glow-gold:  0 0 0 3px rgba(184,146,42,.18);
   
       /* Layout */
       --radius-sm:  4px;
       --radius-md:  8px;
       --radius-lg:  14px;
       --radius-xl:  22px;
       --transition: all 0.22s cubic-bezier(.4,0,.2,1);
   
       /* Dashboard compat aliases */
       --border-radius-sm:  var(--radius-sm);
       --border-radius-md:  var(--radius-md);
       --border-radius-lg:  var(--radius-lg);
       --border-radius-xl:  var(--radius-xl);
       --gradient-primary:  linear-gradient(135deg, var(--accent) 0%, var(--accent-mid) 100%);
       --gradient-error:    linear-gradient(135deg, #c0392b 0%, #96281b 100%);
       --gradient-success:  linear-gradient(135deg, #2d6a4f 0%, #1b4332 100%);
   }
   
   /* ===== RESET ===== */
   *, *::before, *::after {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
   
   body {
       font-family: var(--font-body);
       font-size: 16px;
       font-weight: 400;
       line-height: 1.65;
       color: var(--ink);
       background-color: var(--parchment);
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
   }
   
   .container {
       max-width: 1180px;
       margin: 0 auto;
       padding: 0 24px;
   }
   
   /* ===== HEADER ===== */
   .header {
       background: var(--ink);
       color: white;
       padding: 0;
       position: sticky;
       top: 0;
       z-index: 1000;
       transition: var(--transition);
       border-bottom: 1px solid rgba(255,255,255,.06);
   }
   
   .header::after {
       content: '';
       display: block;
       height: 2px;
       background: linear-gradient(90deg, var(--gold) 0%, var(--accent-mid) 60%, transparent 100%);
   }
   
   .header.scrolled {
       background: rgba(13,13,14,.97);
       backdrop-filter: blur(16px);
       -webkit-backdrop-filter: blur(16px);
       padding: 0;
   }
   
   .header .container {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 0 24px;
       height: 68px;
   }
   
   /* Logo */
   .logo {
       font-family: var(--font-display);
       font-size: 1.75rem;
       font-weight: 600;
       letter-spacing: .02em;
       color: white;
       text-decoration: none;
       display: inline-flex;
       align-items: center;
       transition: color .2s ease;
       position: relative;
   }
   
   .logo::before {
       content: '';
       display: inline-block;
       width: 7px;
       height: 7px;
       border-radius: 50%;
       background: var(--gold);
       margin-right: 10px;
       flex-shrink: 0;
       box-shadow: 0 0 10px rgba(184,146,42,.55);
   }
   
   .logo::after { display: none; }
   
   .logo:hover { color: var(--gold-light); transform: none; }
   
   /* Nav */
   nav {
       display: flex;
       align-items: center;
       gap: 2px;
   }
   
   .nav-link {
       font-family: var(--font-body);
       font-size: 0.8rem;
       font-weight: 500;
       letter-spacing: .08em;
       text-transform: uppercase;
       color: rgba(255,255,255,.65);
       text-decoration: none;
       padding: 6px 14px;
       border-radius: var(--radius-sm);
       position: relative;
       transition: color .18s ease, background .18s ease;
   }
   
   .nav-link::before,
   .nav-link::after { display: none; }
   
   .nav-link:hover {
       color: white;
       background: rgba(255,255,255,.08);
       transform: none;
       text-shadow: none;
   }
   
   .nav-link.active {
       color: var(--gold-light);
       background: rgba(184,146,42,.12);
       box-shadow: none;
   }
   
   .nav-link:last-child {
       animation: none;
       color: var(--gold-light);
       border: 1px solid rgba(184,146,42,.3);
   }
   
   .nav-link:last-child:hover {
       background: rgba(184,146,42,.12);
       border-color: rgba(184,146,42,.55);
   }
   
   /* Mobile toggle */
   .menu-toggle {
       display: none;
       background: none;
       border: 1px solid rgba(255,255,255,.15);
       color: white;
       font-size: 1.2rem;
       cursor: pointer;
       padding: 6px 10px;
       border-radius: var(--radius-sm);
       transition: background .18s ease;
   }
   
   .menu-toggle:hover { background: rgba(255,255,255,.1); }
   
   /* ===== MAIN ===== */
   .main-content {
       min-height: calc(100vh - 200px);
       padding: 3.5rem 0;
   }
   
   /* ===== HERO ===== */
   .hero {
       text-align: center;
       margin-bottom: 3.5rem;
       padding: 4rem 3rem;
       background: var(--bg-color);
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-sm);
       border: 1px solid var(--border-color);
       position: relative;
       overflow: hidden;
   }
   
   .hero::before {
       content: '';
       position: absolute;
       top: 0; left: 0; right: 0;
       height: 3px;
       background: linear-gradient(90deg, var(--gold) 0%, var(--accent-mid) 70%, transparent 100%);
   }
   
   .hero::after {
       content: '';
       position: absolute;
       bottom: -80px; right: -80px;
       width: 220px; height: 220px;
       border-radius: 50%;
       background: radial-gradient(circle, rgba(184,146,42,.055) 0%, transparent 70%);
       pointer-events: none;
   }
   
   .hero h2 {
       font-family: var(--font-display);
       font-size: 3rem;
       font-weight: 500;
       letter-spacing: -.015em;
       line-height: 1.15;
       margin-bottom: 0.875rem;
       color: var(--ink);
       background: none;
       -webkit-text-fill-color: initial;
   }
   
   .hero p {
       font-size: 1.0625rem;
       color: var(--ink-40);
       font-weight: 300;
       max-width: 520px;
       margin: 0 auto;
       line-height: 1.75;
   }
   
   /* ===== BLOG POSTS LIST ===== */
   .blog-posts {
       display: grid;
       gap: 1.5rem;
       margin-top: 1.5rem;
   }
   
   .blog-post {
       background: var(--bg-color);
       border-radius: var(--radius-lg);
       padding: 2.25rem 2.5rem;
       box-shadow: var(--shadow-sm);
       border: 1px solid var(--border-color);
       position: relative;
       overflow: hidden;
       transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
   }
   
   .blog-post::before {
       content: '';
       position: absolute;
       top: 0; left: 0; bottom: 0;
       width: 3px;
       background: linear-gradient(180deg, var(--gold) 0%, var(--accent) 100%);
       transform: scaleY(0);
       transform-origin: top;
       transition: transform .3s cubic-bezier(.4,0,.2,1);
       border-radius: 0;
   }
   
   .blog-post:hover {
       transform: translateY(-3px);
       box-shadow: var(--shadow-lg);
       border-color: var(--ink-10);
   }
   
   .blog-post:hover::before { transform: scaleY(1); }
   
   .blog-post h2 {
       font-family: var(--font-display);
       font-size: 1.75rem;
       font-weight: 500;
       letter-spacing: -.01em;
       line-height: 1.25;
       margin-bottom: 0.625rem;
       color: var(--ink);
   }
   
   .blog-post-meta {
       display: flex;
       gap: 1.25rem;
       margin-bottom: 1rem;
       font-size: 0.775rem;
       color: var(--ink-40);
       flex-wrap: wrap;
       letter-spacing: .04em;
       font-family: var(--font-body);
   }
   
   .blog-post-meta span {
       display: flex;
       align-items: center;
       gap: 5px;
   }
   
   .blog-post-content {
       color: var(--ink-60);
       line-height: 1.8;
       font-size: 0.9375rem;
       margin-bottom: 1rem;
   }
   
   .blog-post-content p { margin-bottom: .75rem; }
   
   /* Read More */
   .read-more {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       color: var(--accent);
       text-decoration: none;
       font-size: 0.8rem;
       font-weight: 600;
       letter-spacing: .07em;
       text-transform: uppercase;
       margin-top: 1.125rem;
       padding: 0;
       background: none;
       border: none;
       transition: gap .2s ease, color .2s ease;
   }
   
   .read-more::after {
       content: '→';
       font-size: 1rem;
       font-weight: 300;
       transition: transform .2s ease;
       font-family: var(--font-body);
   }
   
   .read-more:hover {
       color: var(--gold);
       gap: 13px;
       background: none;
       border-color: transparent;
       transform: none;
   }
   
   .read-more:hover::after { transform: translateX(2px); }
   
   /* States */
   .no-posts {
       text-align: center;
       padding: 5rem 2rem;
       color: var(--ink-40);
       background: var(--bg-color);
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-sm);
       border: 1px solid var(--border-color);
       font-family: var(--font-display);
       font-style: italic;
       font-size: 1.25rem;
   }
   
   .loading-posts {
       text-align: center;
       padding: 5rem 2rem;
       color: var(--ink-40);
       font-size: 0.8rem;
       letter-spacing: .08em;
       text-transform: uppercase;
       font-family: var(--font-body);
   }
   
   .loading-posts::after {
       content: '';
       display: block;
       width: 34px;
       height: 34px;
       margin: 1.25rem auto 0;
       border: 2px solid var(--parchment-deep);
       border-top-color: var(--gold);
       border-radius: 50%;
       animation: spin 0.9s linear infinite;
   }
   
   @keyframes spin { to { transform: rotate(360deg); } }
   
   /* Error */
   .error-message {
       text-align: center;
       padding: 2rem;
       color: var(--danger);
       background: var(--bg-color);
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-sm);
       border: 1px solid rgba(192,57,43,.15);
   }
   
   .error-message button {
       margin-top: 1rem;
       padding: 0.7rem 1.5rem;
       background: var(--accent);
       color: white;
       border: none;
       border-radius: var(--radius-md);
       font-size: 0.8125rem;
       font-weight: 500;
       cursor: pointer;
       letter-spacing: .05em;
       text-transform: uppercase;
       transition: var(--transition);
       font-family: var(--font-body);
   }
   
   .error-message button:hover {
       background: var(--primary-dark);
       transform: translateY(-1px);
       box-shadow: var(--shadow);
   }
   
   /* ===== LOGIN PAGE ===== */
   .login-container {
       min-height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       background: var(--ink);
       padding: 2rem;
       position: relative;
       overflow: hidden;
   }
   
   .login-container::before {
       content: '';
       position: absolute;
       top: -200px; right: -200px;
       width: 600px; height: 600px;
       border-radius: 50%;
       background: radial-gradient(circle, rgba(184,146,42,.07) 0%, transparent 60%);
       pointer-events: none;
   }
   
   .login-container::after {
       content: '';
       position: absolute;
       bottom: -150px; left: -150px;
       width: 500px; height: 500px;
       border-radius: 50%;
       background: radial-gradient(circle, rgba(26,58,92,.28) 0%, transparent 60%);
       pointer-events: none;
   }
   
   .login-card {
       background: var(--bg-color);
       border-radius: var(--radius-xl);
       padding: 3.25rem 3rem;
       box-shadow: var(--shadow-xl);
       width: 100%;
       max-width: 420px;
       position: relative;
       z-index: 1;
       animation: slideUp 0.4s cubic-bezier(.4,0,.2,1);
       border-top: 3px solid var(--gold);
   }
   
   @keyframes slideUp {
       from { opacity: 0; transform: translateY(22px); }
       to   { opacity: 1; transform: translateY(0); }
   }
   
   .login-card h2 {
       font-family: var(--font-display);
       text-align: center;
       margin-bottom: 2rem;
       color: var(--ink);
       font-size: 2rem;
       font-weight: 500;
       letter-spacing: -.01em;
   }
   
   /* ===== FORMS ===== */
   .form-group { margin-bottom: 1.375rem; }
   
   .form-group label {
       display: block;
       margin-bottom: 6px;
       font-weight: 500;
       color: var(--ink-60);
       font-size: 0.775rem;
       letter-spacing: .06em;
       text-transform: uppercase;
       font-family: var(--font-body);
   }
   
   .form-group input,
   .form-group textarea {
       width: 100%;
       padding: 0.75rem 1rem;
       border: 1.5px solid var(--ink-10);
       border-radius: var(--radius-md);
       font-size: 0.9375rem;
       transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
       font-family: var(--font-body);
       background: var(--parchment);
       color: var(--ink);
   }
   
   .form-group input:focus,
   .form-group textarea:focus {
       outline: none;
       border-color: var(--gold);
       background: var(--bg-color);
       box-shadow: var(--glow-gold);
   }
   
   .form-group textarea {
       resize: vertical;
       min-height: 150px;
       line-height: 1.65;
   }
   
   .login-hint {
       text-align: center;
       margin-top: 1.5rem;
       font-size: 0.8rem;
       color: var(--ink-40);
       padding: 0.75rem 1rem;
       background: var(--parchment);
       border-radius: var(--radius-md);
       border: 1px solid var(--border-color);
       font-style: italic;
   }
   
   /* ===== BUTTONS ===== */
   .btn {
       padding: 0.75rem 1.75rem;
       border: none;
       border-radius: var(--radius-md);
       font-size: 0.8125rem;
       font-weight: 600;
       letter-spacing: .07em;
       text-transform: uppercase;
       cursor: pointer;
       transition: var(--transition);
       text-decoration: none;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       font-family: var(--font-body);
   }
   
   .btn-primary {
       background: var(--ink);
       color: white;
       width: 100%;
       position: relative;
       overflow: hidden;
       border: 1.5px solid var(--ink);
   }
   
   .btn-primary::before {
       content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg, var(--gold) 0%, var(--accent) 100%);
       opacity: 0;
       transition: opacity .28s ease;
       z-index: 0;
   }
   
   .btn-primary > * { position: relative; z-index: 1; }
   
   .btn-primary:hover::before { opacity: 1; }
   .btn-primary:hover {
       transform: translateY(-1px);
       box-shadow: var(--shadow-lg);
       border-color: var(--gold);
   }
   
   .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
   
   .btn-danger {
       background: var(--danger);
       color: white;
       border: 1.5px solid var(--danger);
   }
   
   .btn-danger:hover {
       background: #96281b;
       transform: translateY(-1px);
       box-shadow: var(--shadow);
   }
   
   .btn-sm { padding: 0.45rem 1rem; font-size: 0.75rem; }
   
   /* ===== DASHBOARD ===== */
   .dashboard-header { margin-bottom: 2.25rem; }
   
   .dashboard-header h2 {
       font-family: var(--font-display);
       font-size: 2.25rem;
       font-weight: 500;
       letter-spacing: -.01em;
       color: var(--ink);
       margin-bottom: 0.35rem;
       background: none;
       -webkit-text-fill-color: initial;
   }
   
   .post-form-container {
       background: var(--bg-color);
       border-radius: var(--radius-lg);
       padding: 2.25rem;
       box-shadow: var(--shadow-sm);
       margin-bottom: 3rem;
       border: 1px solid var(--border-color);
   }
   
   .post-form { max-width: 100%; }
   
   /* SEO Section */
   .seo-section {
       background: var(--parchment);
       border-radius: var(--radius-md);
       padding: 2rem;
       margin-top: 2rem;
       border: 1px solid var(--parchment-deep);
   }
   
   .seo-section h3 {
       font-size: 0.8rem;
       font-weight: 600;
       letter-spacing: .07em;
       text-transform: uppercase;
       margin-bottom: 1.5rem;
       color: var(--ink-60);
       display: flex;
       align-items: center;
       gap: 8px;
   }
   
   .seo-section h3::before {
       content: "◎";
       font-style: normal;
       color: var(--gold);
       font-size: 0.9rem;
   }
   
   .seo-preview {
       background: white;
       border-radius: var(--radius-md);
       padding: 1.5rem;
       margin-top: 1.5rem;
       border: 1px solid var(--border-color);
       box-shadow: var(--shadow-sm);
   }
   
   .seo-preview h4 {
       font-size: 0.7rem;
       color: var(--ink-40);
       margin-bottom: 1rem;
       text-transform: uppercase;
       letter-spacing: .08em;
       font-weight: 600;
   }
   
   .seo-preview-title {
       color: #1558d6;
       font-size: 1.125rem;
       margin-bottom: .25rem;
       cursor: pointer;
       font-weight: 400;
   }
   
   .seo-preview-title:hover { text-decoration: underline; }
   .seo-preview-url { color: #1a7f37; font-size: .8rem; margin-bottom: .5rem; }
   .seo-preview-description { color: #444; font-size: .875rem; line-height: 1.5; }
   
   .char-count { font-size: .7rem; color: var(--ink-20); margin-top: .2rem; text-align: right; }
   .char-count.warning { color: var(--warning-color); font-weight: 600; }
   .char-count.error   { color: var(--danger-color); font-weight: 700; }
   
   /* Existing posts */
   .existing-posts {
       background: var(--bg-color);
       border-radius: var(--radius-lg);
       padding: 2.25rem;
       box-shadow: var(--shadow-sm);
       border: 1px solid var(--border-color);
   }
   
   .existing-posts h2 {
       font-family: var(--font-display);
       font-size: 1.625rem;
       font-weight: 500;
       letter-spacing: -.01em;
       margin-bottom: 1.5rem;
       color: var(--ink);
   }
   
   .posts-list { display: grid; gap: 0.75rem; }
   
   .post-item {
       padding: 1.25rem 1.5rem;
       background: var(--parchment);
       border-radius: var(--radius-md);
       border: 1px solid var(--border-color);
       display: flex;
       justify-content: space-between;
       align-items: start;
       transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
   }
   
   .post-item:hover {
       transform: none;
       border-color: var(--gold);
       box-shadow: var(--shadow-sm);
       background: var(--gold-pale);
   }
   
   .post-item h3 {
       font-family: var(--font-display);
       font-size: 1.125rem;
       font-weight: 500;
       margin-bottom: 4px;
       color: var(--ink);
   }
   
   .post-meta {
       font-size: .8rem;
       color: var(--ink-40);
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: .75rem;
   }
   
   .no-posts-text {
       text-align: center;
       color: var(--ink-40);
       padding: 2.5rem;
       font-style: italic;
       font-family: var(--font-display);
       font-size: 1.125rem;
   }
   
   /* ===== SINGLE POST PAGE ===== */
   .single-post {
       max-width: 760px;
       margin: 0 auto;
       padding: 2.5rem 0;
   }
   
   .full-post {
       background: var(--bg-color);
       border-radius: var(--radius-lg);
       padding: 3.5rem 4rem;
       box-shadow: var(--shadow);
       border: 1px solid var(--border-color);
       animation: fadeIn 0.4s cubic-bezier(.4,0,.2,1);
   }
   
   @keyframes fadeIn {
       from { opacity: 0; transform: translateY(14px); }
       to   { opacity: 1; transform: translateY(0); }
   }
   
   .post-header {
       margin-bottom: 2.5rem;
       padding-bottom: 2rem;
       border-bottom: 1px solid var(--parchment-deep);
       position: relative;
   }
   
   .post-header::after {
       content: '';
       position: absolute;
       bottom: -1px; left: 0;
       width: 56px; height: 2px;
       background: var(--gold);
   }
   
   .post-title {
       font-family: var(--font-display);
       font-size: 2.75rem;
       font-weight: 500;
       letter-spacing: -.02em;
       line-height: 1.15;
       color: var(--ink);
       margin-bottom: 1.25rem;
   }
   
   .post-meta {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 1rem;
       color: var(--ink-40);
       font-size: .8125rem;
       font-family: var(--font-body);
   }
   
   .post-author {
       font-weight: 600;
       color: var(--accent);
       background: var(--accent-pale);
       padding: 3px 12px;
       border-radius: 2rem;
       border: 1px solid rgba(26,58,92,.12);
       font-size: .78rem;
   }
   
   .post-date {
       color: var(--ink-40);
       display: flex;
       align-items: center;
       gap: 5px;
       font-size: .78rem;
   }
   
   .post-date::before { content: '·'; color: var(--ink-20); }
   
   .post-tags {
       display: flex;
       flex-wrap: wrap;
       gap: 6px;
       margin-top: .75rem;
   }
   
   .tag {
       background: var(--parchment);
       color: var(--ink-60);
       padding: 3px 12px;
       border-radius: 2rem;
       font-size: .75rem;
       letter-spacing: .04em;
       border: 1px solid var(--parchment-deep);
       transition: background .18s ease, color .18s ease, border-color .18s ease;
       font-family: var(--font-body);
       font-weight: 500;
       text-decoration: none;
   }
   
   .tag:hover { background: var(--ink); color: white; border-color: var(--ink); }
   
   /* ===== POST CONTENT ===== */
   .post-content {
       font-family: var(--font-display);
       font-size: 1.0625rem;
       font-weight: 300;
       line-height: 1.88;
       color: var(--ink-80);
   }
   
   .post-content p { margin-bottom: 1.625rem; }
   
   .post-content h2 {
       font-family: var(--font-display);
       font-size: 2rem;
       font-weight: 500;
       letter-spacing: -.01em;
       line-height: 1.2;
       margin: 2.5rem 0 1rem;
       color: var(--ink);
   }
   
   .post-content h3 {
       font-family: var(--font-display);
       font-size: 1.5rem;
       font-weight: 500;
       margin: 2rem 0 .875rem;
       color: var(--ink);
   }
   
   .post-content h4 {
       font-family: var(--font-body);
       font-size: .9rem;
       font-weight: 600;
       letter-spacing: .07em;
       text-transform: uppercase;
       margin: 1.75rem 0 .75rem;
       color: var(--ink-60);
   }
   
   .post-content ul,
   .post-content ol {
       margin-bottom: 1.625rem;
       padding-left: 1.75rem;
   }
   
   .post-content li { margin-bottom: .5rem; }
   .post-content ul li::marker { color: var(--gold); }
   
   .post-content blockquote {
       border-left: 3px solid var(--gold);
       padding: 1.25rem 1.75rem;
       margin: 2rem 0;
       font-style: italic;
       font-family: var(--font-display);
       font-size: 1.2rem;
       font-weight: 400;
       line-height: 1.7;
       color: var(--ink-60);
       background: var(--gold-pale);
       border-radius: 0 var(--radius-md) var(--radius-md) 0;
   }
   
   .post-content code {
       background: var(--parchment-mid);
       padding: 2px 7px;
       border-radius: 4px;
       font-size: .875em;
       font-family: var(--font-mono);
       border: 1px solid var(--parchment-deep);
       color: var(--accent);
   }
   
   .post-content pre {
       background: var(--ink);
       color: #e2ddd4;
       padding: 1.5rem;
       border-radius: var(--radius-md);
       overflow-x: auto;
       margin-bottom: 2rem;
       border: 1px solid rgba(255,255,255,.05);
   }
   
   .post-content pre code {
       background: none;
       color: inherit;
       border: none;
       padding: 0;
       font-size: .875rem;
       line-height: 1.7;
   }
   
   .post-content img {
       max-width: 100%;
       height: auto;
       border-radius: var(--radius-md);
       margin: 2rem 0;
       box-shadow: var(--shadow);
       border: 1px solid var(--border-color);
       display: block;
   }
   
   .post-content a {
       color: var(--accent);
       text-decoration: none;
       border-bottom: 1px solid rgba(26,58,92,.3);
       transition: border-color .18s ease, color .18s ease;
   }
   
   .post-content a:hover { color: var(--gold); border-bottom-color: var(--gold); }
   
   /* ===== POST FOOTER ===== */
   .post-footer {
       margin-top: 3.5rem;
       padding-top: 2rem;
       border-top: 1px solid var(--parchment-deep);
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-wrap: wrap;
       gap: 1rem;
   }
   
   /* ===== SHARE BUTTONS ===== */
   .share-buttons {
       display: flex;
       gap: 8px;
       align-items: center;
       flex-wrap: wrap;
   }
   
   .share-buttons h3 {
       font-size: .75rem;
       color: var(--ink-40);
       font-weight: 600;
       letter-spacing: .07em;
       text-transform: uppercase;
       margin-right: 4px;
   }
   
   .share-btn {
       padding: 6px 14px;
       border-radius: var(--radius-sm);
       font-size: .75rem;
       font-weight: 600;
       letter-spacing: .04em;
       color: white;
       text-decoration: none;
       transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
       display: inline-flex;
       align-items: center;
       gap: 5px;
       font-family: var(--font-body);
   }
   
   .share-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: white; }
   .share-btn.twitter  { background: #1a1a1a; }
   .share-btn.twitter:hover  { background: #333; }
   .share-btn.facebook { background: #1877f2; }
   .share-btn.facebook:hover { background: #0d65d9; }
   .share-btn.linkedin { background: #0a66c2; }
   .share-btn.linkedin:hover { background: #084d9a; }
   
   /* ===== ERROR CONTAINER ===== */
   .error-container { text-align: center; padding: 4rem 2rem; }
   
   .error-message {
       max-width: 500px;
       margin: 0 auto;
       padding: 3rem;
       background: var(--bg-color);
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow);
       border: 1px solid var(--border-color);
   }
   
   .error-message h2 {
       font-family: var(--font-display);
       font-size: 2rem;
       font-weight: 500;
       color: var(--ink);
       margin-bottom: 1rem;
   }
   
   .error-message p { color: var(--ink-40); margin-bottom: 2rem; }
   
   /* Loading post */
   .loading-post {
       text-align: center;
       padding: 5rem 2rem;
       color: var(--ink-40);
       font-size: .8rem;
       letter-spacing: .07em;
       text-transform: uppercase;
       font-family: var(--font-body);
   }
   
   .loading-post::after {
       content: '';
       display: block;
       width: 34px;
       height: 34px;
       margin: 1.25rem auto 0;
       border: 2px solid var(--parchment-deep);
       border-top-color: var(--gold);
       border-radius: 50%;
       animation: spin 0.9s linear infinite;
   }
   
   /* ===== FOOTER ===== */
   .footer {
       background: var(--ink);
       color: rgba(255,255,255,.45);
       text-align: center;
       padding: 2.5rem 0;
       margin-top: 5rem;
       font-size: .8125rem;
       letter-spacing: .04em;
       border-top: none;
       position: relative;
   }
   
   .footer::before {
       content: '';
       display: block;
       height: 2px;
       background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
       position: absolute;
       top: 0; left: 0; right: 0;
   }
   
   /* ===== SCROLLBAR ===== */
   ::-webkit-scrollbar { width: 8px; }
   ::-webkit-scrollbar-track { background: var(--parchment); }
   ::-webkit-scrollbar-thumb {
       background: var(--parchment-deep);
       border-radius: 4px;
       border: 2px solid var(--parchment);
   }
   ::-webkit-scrollbar-thumb:hover { background: var(--ink-20); }
   
   /* ===== FOCUS ===== */
   :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
   
   /* ===== RESPONSIVE ===== */
   @media (max-width: 1024px) { .container { max-width: 92%; } }
   
   @media (max-width: 768px) {
       .menu-toggle { display: block; }
       .header .container { height: 60px; }
   
       nav {
           position: fixed;
           top: 60px;
           left: 0; right: 0;
           background: var(--ink-80);
           flex-direction: column;
           padding: 1rem 1.25rem;
           gap: 4px;
           transform: translateY(-110%);
           opacity: 0;
           transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .22s ease;
           box-shadow: 0 10px 36px rgba(0,0,0,.4);
           z-index: 999;
           border-bottom: 1px solid rgba(255,255,255,.06);
       }
   
       nav.open { transform: translateY(0); opacity: 1; }
   
       .nav-link {
           width: 100%;
           text-align: center;
           padding: .9rem;
       }
   
       .nav-link::before { display: none; }
       .nav-link:hover { background: rgba(255,255,255,.08); transform: none; }
       .nav-link::after { display: none; }
       .header .container { padding: 0 1rem; }
   
       .hero { padding: 2.5rem 1.5rem; }
       .hero h2 { font-size: 2rem; }
       .hero p { font-size: .9375rem; }
   
       .blog-post { padding: 1.75rem 1.5rem; }
       .blog-post h2 { font-size: 1.375rem; }
   
       .full-post { padding: 2rem 1.75rem; }
       .post-title { font-size: 2rem; }
       .post-footer { flex-direction: column; align-items: flex-start; }
       .share-buttons { width: 100%; justify-content: flex-start; }
       .post-item { flex-direction: column; gap: .75rem; }
       .login-card { padding: 2.25rem 1.75rem; }
       .seo-section { padding: 1.5rem; }
   }
   
   @media (max-width: 480px) {
       .logo { font-size: 1.375rem; }
       .hero h2 { font-size: 1.625rem; }
       .blog-post-meta { flex-direction: column; gap: 3px; }
       .share-buttons { flex-direction: column; align-items: stretch; }
       .share-btn { text-align: center; justify-content: center; }
       .post-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
       .full-post { padding: 1.5rem 1.25rem; }
       .post-title { font-size: 1.75rem; }
   }
   
   /* ===== PRINT ===== */
   @media print {
       .header, .footer, .post-footer, .share-buttons, .read-more { display: none !important; }
       .full-post { box-shadow: none; padding: 0; border: none; }
       .post-content { font-size: 11pt; color: #000; }
       body { background: white; }
   }
   
   /* ===== REDUCED MOTION ===== */
   @media (prefers-reduced-motion: reduce) {
       *, *::before, *::after {
           animation-duration: 0.01ms !important;
           animation-iteration-count: 1 !important;
           transition-duration: 0.01ms !important;
           scroll-behavior: auto !important;
       }
   }