/* ================================================================
   MTNBRK Ghost Theme
   Mountain Brook. Abbreviated.
   A luxury minimal newsletter theme for Ghost CMS.
   ================================================================ */

/* -- Design Tokens ------------------------------------------------ */

:root {
  /* Backgrounds */
  --color-bg-primary: #FAFAF7;
  --color-bg-secondary: #F2F0EB;
  --color-bg-tertiary: #E9E6DF;

  /* Text */
  --color-text-primary: #2C2C2C;
  --color-text-secondary: #6B6B63;
  --color-text-tertiary: #9B968C;

  /* Accents */
  --color-accent: #8B7D6B;
  --color-accent-hover: #7A6C5A;

  /* Borders & Dividers */
  --color-border: #E4E1DB;
  --color-border-subtle: #EDEBE6;
  --color-divider: #D4D0C8;

  /* Typography */
  --font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;

  /* Type Scale */
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.75rem;

  /* Letter Spacing */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.12em;
  --tracking-wider: 0.2em;
  --tracking-widest: 0.35em;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container-max: 640px;
  --container-wide: 720px;
  --page-padding: 1.5rem;

  /* Borders */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Transitions */
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;
}

/* -- Dark Theme --------------------------------------------------- */

[data-theme="dark"] {
  --color-bg-primary: #1A1A18;
  --color-bg-secondary: #222220;
  --color-bg-tertiary: #2A2A27;
  --color-text-primary: #E8E6E1;
  --color-text-secondary: #A09B91;
  --color-text-tertiary: #706B62;
  --color-accent: #B8A994;
  --color-accent-hover: #C9BBAA;
  --color-border: #333330;
  --color-border-subtle: #2A2A27;
  --color-divider: #3D3D38;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-primary: #1A1A18;
    --color-bg-secondary: #222220;
    --color-bg-tertiary: #2A2A27;
    --color-text-primary: #E8E6E1;
    --color-text-secondary: #A09B91;
    --color-text-tertiary: #706B62;
    --color-accent: #B8A994;
    --color-accent-hover: #C9BBAA;
    --color-border: #333330;
    --color-border-subtle: #2A2A27;
    --color-divider: #3D3D38;
  }
}

/* -- Reset & Base ------------------------------------------------- */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-weight: var(--font-light);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  transition: background-color var(--transition-base), color var(--transition-base);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

/* -- Skip Link ---------------------------------------------------- */

.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text-primary);
  color: var(--color-bg-primary);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wide);
  z-index: 200;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: var(--space-2);
}

/* -- Layout ------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--page-padding);
}

.site-content {
  min-height: 60vh;
}

/* -- Site Header -------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--color-border-subtle);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.site-logo {
  display: block;
  height: 20px;
  width: auto;
}

.site-logo-img {
  height: 100%;
  width: auto;
  display: block;
}

/* Dark mode logo inversion */
[data-theme="dark"] .site-logo-img {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-logo-img {
    filter: invert(1);
  }
}

@media (min-width: 768px) {
  .site-logo {
    height: 24px;
  }
}

.site-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Header Subscribe Button */
.header-subscribe-btn {
  font-family: var(--font-family);
  font-weight: var(--font-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  background: none;
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  display: inline-block;
}

.header-subscribe-btn:hover {
  color: var(--color-text-primary);
  border-color: var(--color-divider);
  background: var(--color-bg-secondary);
}

/* -- Theme Toggle ------------------------------------------------- */

.theme-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 3px;
}

.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: all var(--transition-base);
  line-height: 1;
}

.theme-toggle-btn:hover {
  color: var(--color-text-primary);
}

.theme-toggle-btn.active {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.theme-toggle-btn svg {
  width: 14px;
  height: 14px;
}

/* -- Home Subscribe ----------------------------------------------- */

.home-subscribe {
  text-align: center;
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.home-description {
  font-weight: var(--font-light);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* -- Issue Feed --------------------------------------------------- */

.issue-feed {
  padding: var(--space-12) 0;
}

.issue-feed .section-label {
  margin-bottom: var(--space-8);
}

/* -- Section Label ------------------------------------------------ */

.section-label {
  font-weight: var(--font-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* -- Issue Card --------------------------------------------------- */

.issue-card {
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.issue-card:first-of-type {
  padding-top: 0;
}

.issue-card:last-of-type {
  border-bottom: none;
}

.issue-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.issue-card-date {
  display: block;
  font-weight: var(--font-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
}

.issue-card-title {
  font-weight: var(--font-extralight);
  font-size: var(--text-2xl);
  line-height: 1.35;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  transition: color var(--transition-base);
}

@media (min-width: 768px) {
  .issue-card-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-thin);
  }
}

.issue-card-link:hover .issue-card-title {
  color: var(--color-accent);
}

.issue-card-excerpt {
  font-weight: var(--font-light);
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-text-secondary);
  max-width: 520px;
}

/* -- Single Issue ------------------------------------------------- */

.issue-header {
  padding-top: var(--space-12);
  padding-bottom: var(--space-8);
}

.issue-meta {
  margin-bottom: var(--space-4);
}

.issue-date {
  font-weight: var(--font-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.issue-title {
  font-weight: var(--font-extralight);
  font-size: var(--text-2xl);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

@media (min-width: 768px) {
  .issue-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-thin);
  }
}

.issue-excerpt {
  font-weight: var(--font-light);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-top: var(--space-4);
  max-width: 520px;
}

/* Issue Hero Image */
.issue-hero {
  margin-bottom: var(--space-10);
}

.issue-hero img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.issue-hero figcaption {
  font-weight: var(--font-light);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-tertiary);
  text-align: center;
  margin-top: var(--space-3);
}

/* Issue Content */
.issue-content {
  padding-bottom: var(--space-12);
}

/* Issue Footer */
.issue-footer {
  padding-bottom: var(--space-16);
}

/* Issue Navigation */
.issue-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border-subtle);
  margin-top: var(--space-12);
}

.issue-nav-link {
  display: block;
  text-decoration: none;
  color: inherit;
  max-width: 50%;
}

.issue-nav-next {
  text-align: right;
  margin-left: auto;
}

.issue-nav-label {
  display: block;
  font-weight: var(--font-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-2);
}

.issue-nav-title {
  display: block;
  font-weight: var(--font-light);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  transition: color var(--transition-base);
}

.issue-nav-link:hover .issue-nav-title {
  color: var(--color-accent);
}

/* -- Post Content ------------------------------------------------- */

.post-content p {
  font-weight: var(--font-light);
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .post-content p {
    font-size: var(--text-lg);
  }
}

.post-content strong {
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.post-content em {
  font-style: italic;
}

.post-content a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-base);
}

.post-content a:hover {
  border-bottom-color: var(--color-accent);
}

/* Headings */
.post-content h2 {
  font-weight: var(--font-extralight);
  font-size: var(--text-xl);
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-top: var(--space-12);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .post-content h2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-thin);
  }
}

/* H3 = section label style */
.post-content h3 {
  font-weight: var(--font-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-top: var(--space-10);
  margin-bottom: var(--space-6);
}

/* Horizontal Rule */
.post-content hr {
  border: none;
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-8) 0;
}

/* Blockquote -- centered pull quote */
.post-content blockquote {
  font-weight: var(--font-thin);
  font-size: var(--text-xl);
  line-height: 1.6;
  color: var(--color-text-primary);
  text-align: center;
  border: none;
  padding: var(--space-8) var(--space-4);
  margin: var(--space-10) auto;
  max-width: 520px;
}

@media (min-width: 768px) {
  .post-content blockquote {
    font-size: var(--text-2xl);
    padding: var(--space-10) var(--space-8);
  }
}

.post-content blockquote p {
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin-bottom: 0;
}

.post-content blockquote::before,
.post-content blockquote::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: var(--color-divider);
  margin: 0 auto;
}

.post-content blockquote::before {
  margin-bottom: var(--space-6);
}

.post-content blockquote::after {
  margin-top: var(--space-6);
}

/* Lists */
.post-content ul,
.post-content ol {
  font-weight: var(--font-light);
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  padding-left: var(--space-6);
}

@media (min-width: 768px) {
  .post-content ul,
  .post-content ol {
    font-size: var(--text-lg);
  }
}

.post-content li {
  margin-bottom: var(--space-2);
}

.post-content ul li::marker {
  color: var(--color-divider);
}

.post-content ol li::marker {
  color: var(--color-text-tertiary);
  font-weight: var(--font-medium);
}

/* Images */
.post-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--space-8) auto;
  border-radius: var(--radius-md);
}

.post-content figcaption,
.post-content .kg-image-card figcaption,
.post-content .kg-gallery-card figcaption {
  font-weight: var(--font-light);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-tertiary);
  text-align: center;
  margin-top: var(--space-3);
}

/* Ghost cards */
.post-content .kg-card {
  margin: var(--space-8) 0;
}

.post-content .kg-image-card img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.post-content .kg-bookmark-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--space-8) 0;
  transition: border-color var(--transition-base);
}

.post-content .kg-bookmark-card:hover {
  border-color: var(--color-divider);
}

.post-content .kg-bookmark-container {
  display: flex;
  text-decoration: none;
  color: inherit;
}

.post-content .kg-bookmark-content {
  padding: var(--space-4) var(--space-5);
  flex: 1;
}

.post-content .kg-bookmark-title {
  font-weight: var(--font-regular);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.post-content .kg-bookmark-description {
  font-weight: var(--font-light);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-content .kg-bookmark-metadata {
  font-weight: var(--font-light);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-3);
}

.post-content .kg-embed-card {
  margin: var(--space-8) 0;
  display: flex;
  justify-content: center;
}

.post-content .kg-gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-8) 0;
}

.post-content .kg-gallery-image img {
  margin: 0;
  border-radius: var(--radius-sm);
}

/* -- Subscribe CTA ------------------------------------------------ */

.subscribe-cta {
  text-align: center;
  padding: var(--space-16) 0;
  margin: var(--space-8) 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

.subscribe-cta-headline {
  font-weight: var(--font-extralight);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .subscribe-cta-headline {
    font-size: var(--text-2xl);
    font-weight: var(--font-thin);
  }
}

.subscribe-cta-description {
  font-weight: var(--font-light);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.subscribe-cta-button {
  display: inline-block;
  font-family: var(--font-family);
  font-weight: var(--font-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-bg-primary);
  background: var(--color-text-primary);
  border: none;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
}

.subscribe-cta-button:hover {
  background: var(--color-accent-hover);
  color: var(--color-bg-primary);
}

/* -- Static Pages ------------------------------------------------- */

.page-header {
  padding-top: var(--space-12);
  padding-bottom: var(--space-8);
}

.page-title {
  font-weight: var(--font-extralight);
  font-size: var(--text-2xl);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

@media (min-width: 768px) {
  .page-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-thin);
  }
}

.page-content {
  padding-bottom: var(--space-16);
}

/* -- Archive Pages ------------------------------------------------ */

.archive-header {
  padding: var(--space-12) 0 var(--space-8);
}

.archive-description {
  font-weight: var(--font-light);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-top: var(--space-4);
}

/* -- Pagination --------------------------------------------------- */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-border-subtle);
  margin-top: var(--space-4);
}

.pagination-link {
  font-weight: var(--font-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-base);
}

.pagination-link:hover {
  color: var(--color-text-primary);
}

.pagination-info {
  font-weight: var(--font-light);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-tertiary);
}

/* -- Footer ------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--color-border-subtle);
}

.site-footer-inner {
  text-align: center;
  padding-top: var(--space-16);
  padding-bottom: var(--space-8);
}

.footer-logo {
  display: block;
  height: 18px;
  width: auto;
  margin: 0 auto var(--space-3);
}

.footer-logo img {
  height: 100%;
  width: auto;
  display: block;
  margin: 0 auto;
}

/* Dark mode footer logo */
[data-theme="dark"] .footer-logo img {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .footer-logo img {
    filter: invert(1);
  }
}

.footer-tagline {
  font-weight: var(--font-extralight);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-3);
}

.footer-description {
  font-weight: var(--font-light);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-8);
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.footer-divider {
  width: 48px;
  height: 1px;
  background: var(--color-divider);
  margin: 0 auto var(--space-8);
}

.footer-villages {
  margin-bottom: var(--space-8);
}

.footer-village-list {
  font-weight: var(--font-light);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
  line-height: 2;
}

.footer-dot {
  color: var(--color-divider);
  margin: 0 var(--space-2);
}

/* Social Links */
.social-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  transition: color var(--transition-base);
}

.social-links a:hover {
  color: var(--color-text-primary);
}

.social-links svg {
  width: 16px;
  height: 16px;
}

.footer-contact {
  font-weight: var(--font-light);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
}

.footer-contact a {
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: color var(--transition-base);
}

.footer-contact a:hover {
  color: var(--color-text-secondary);
}

.footer-legal {
  font-weight: var(--font-light);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-tertiary);
  line-height: 1.8;
}

/* -- Error Page --------------------------------------------------- */

.error-page {
  text-align: center;
  padding: var(--space-32) 0;
}

.error-code {
  font-weight: var(--font-thin);
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
}

.error-message {
  font-weight: var(--font-light);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}

.error-link {
  font-weight: var(--font-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  border: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  display: inline-block;
}

.error-link:hover {
  color: var(--color-text-primary);
  border-color: var(--color-divider);
}

/* -- Dark Mode Adjustments ---------------------------------------- */

[data-theme="dark"] .post-content img,
[data-theme="dark"] .issue-hero img {
  filter: brightness(0.92);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .post-content img,
  :root:not([data-theme="light"]) .issue-hero img {
    filter: brightness(0.92);
  }
}

/* -- Ghost Card Width Overrides ----------------------------------- */

.post-content .kg-width-wide {
  max-width: min(1040px, calc(100vw - var(--space-lg)));
  margin-left: calc(50% - min(520px, calc(50vw - var(--space-md))));
  width: auto;
}

.post-content .kg-width-full {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.post-content .kg-gallery-row {
  display: flex;
  gap: var(--space-xs);
}

.post-content .kg-gallery-row:not(:first-of-type) {
  margin-top: var(--space-xs);
}

.post-content .kg-bookmark-icon {
  width: 22px;
  height: 22px;
  margin-right: var(--space-xs);
}

.post-content .kg-bookmark-author {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.post-content .kg-bookmark-publisher {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.post-content .kg-bookmark-publisher::before {
  content: "•";
  margin: 0 var(--space-xs);
}

.post-content .kg-bookmark-thumbnail {
  flex-shrink: 0;
  width: 180px;
}

.post-content .kg-bookmark-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -- Focus Styles ------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
  outline: none;
}

/* -- Reduced Motion ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}