/* ============================================================
   The Fall of Rome — a Ghost theme
   Imperial gold & oxblood on dark marble. Cinzel + EB Garamond.
   ============================================================ */

:root {
  --void:    #0f0b0a;
  --void-2:  #171110;
  --panel:   #1c1512;
  --line:    rgba(200, 162, 74, 0.16);
  --line-2:  rgba(200, 162, 74, 0.34);
  --parch:   #ece2cf;   /* parchment text */
  --muted:   #a99a80;
  --faint:   #766a58;
  --gold:    #c8a24a;
  --gold-lt: #e0c274;
  --oxblood: #a1372f;
  --ember:   #e0894c;

  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --serif:   "EB Garamond", Georgia, "Times New Roman", serif;

  --wrap: 720px;
  --wrap-wide: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--void);
  color: var(--parch);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(60% 40% at 82% 0%, rgba(161, 55, 47, 0.10), transparent 60%),
    radial-gradient(55% 45% at 10% 100%, rgba(200, 162, 74, 0.07), transparent 62%);
  background-attachment: fixed;
}

.ash { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ash canvas { width: 100%; height: 100%; }
.site-header, .site-main, .site-footer { position: relative; z-index: 1; }

a { color: var(--gold); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--gold-lt); }

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

/* ---- laurel rule: a gold hairline with a central diamond ---- */
.laurel-rule { display: flex; align-items: center; justify-content: center; height: 1px; margin: 0 auto; max-width: 240px; position: relative; }
.laurel-rule::before, .laurel-rule::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--line-2));
}
.laurel-rule::after { background: linear-gradient(90deg, var(--line-2), transparent); }
.laurel-rule span {
  width: 7px; height: 7px; margin: 0 12px; transform: rotate(45deg);
  border: 1px solid var(--gold); flex: none;
}

/* =====================  HEADER  ===================== */
.site-header { padding: clamp(40px, 7vw, 72px) 24px clamp(28px, 4vw, 40px); text-align: center; }
.site-header .inner { max-width: var(--wrap-wide); margin: 0 auto; }
.site-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.6rem, 4.5vw, 2.6rem); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); display: inline-block;
}
.site-title:hover { color: var(--gold-lt); }
.site-desc { margin-top: 12px; font-style: italic; font-size: 1.1rem; color: var(--muted); }
.site-nav { margin-top: 22px; }
.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; }
.site-nav a {
  font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.site-nav a:hover { color: var(--gold); }

/* =====================  HERO (home)  ===================== */
.hero { text-align: center; padding: clamp(24px, 5vw, 56px) 24px clamp(32px, 6vw, 64px); max-width: var(--wrap); margin: 0 auto; }
.hero-title {
  font-family: var(--display); font-weight: 600; font-size: clamp(2.2rem, 7vw, 4rem);
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.1;
  color: var(--parch);
  text-shadow: 0 0 40px rgba(200, 162, 74, 0.2);
}
.hero-desc { margin-top: 18px; font-style: italic; font-size: 1.25rem; color: var(--muted); }

/* =====================  POST FEED  ===================== */
.feed-wrap { max-width: var(--wrap-wide); margin: 0 auto; padding: 0 24px clamp(48px, 8vw, 96px); }
.post-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 28px; }
.post-card {
  background: var(--void-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.post-card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.post-card-link { display: block; color: inherit; }
.post-card-link:hover { color: inherit; }
.post-card-image { aspect-ratio: 16 / 9; background-size: cover; background-position: center; border-bottom: 1px solid var(--line); filter: saturate(0.85) contrast(1.02); }
.post-card-body { padding: 26px 26px 28px; }
.post-card-meta { font-family: var(--display); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.post-card-meta .dot { margin: 0 8px; color: var(--faint); }
.post-card-title { font-family: var(--display); font-weight: 600; font-size: 1.5rem; line-height: 1.2; margin: 12px 0 10px; color: var(--parch); }
.post-card-excerpt { color: var(--muted); font-size: 1rem; line-height: 1.6; }
.post-card-more { display: inline-block; margin-top: 16px; font-family: var(--display); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }

/* pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 56px; font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.pagination a { color: var(--gold); }
.pagination .page-number { color: var(--muted); }

/* =====================  ARTICLE  ===================== */
.article { max-width: var(--wrap); margin: 0 auto; padding: clamp(24px, 5vw, 56px) 24px clamp(56px, 9vw, 104px); }
.article-header { text-align: center; margin-bottom: 40px; }
.article-meta { font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.article-meta .dot { margin: 0 8px; color: var(--faint); }
.article-title {
  font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 5.5vw, 3.2rem);
  letter-spacing: 0.02em; line-height: 1.15; margin: 18px 0; color: var(--parch);
  text-shadow: 0 0 44px rgba(200, 162, 74, 0.18);
}
.article-excerpt { font-style: italic; font-size: 1.28rem; color: var(--muted); max-width: 34ch; margin: 0 auto; }
.article-byline { margin-top: 20px; font-family: var(--display); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }

.article-image { margin: 40px 0; }
.article-image img { width: 100%; border: 1px solid var(--line); border-radius: 3px; }
.article-image figcaption { text-align: center; margin-top: 12px; font-style: italic; font-size: 0.95rem; color: var(--faint); }

/* ---- reading prose ---- */
.gh-content { font-size: 1.18rem; line-height: 1.8; color: var(--parch); }
.gh-content > * + * { margin-top: 1.5em; }
.gh-content p { color: #e2d8c5; }

/* drop cap on the opening paragraph */
.gh-content > p:first-of-type::first-letter {
  font-family: var(--display); font-weight: 700;
  float: left; font-size: 4.4rem; line-height: 0.82;
  padding: 6px 14px 0 0; color: var(--gold);
}

.gh-content h2, .gh-content h3, .gh-content h4 {
  font-family: var(--display); color: var(--parch); line-height: 1.25;
  margin-top: 1.8em; letter-spacing: 0.01em;
}
.gh-content h2 { font-size: 1.7rem; font-weight: 600; }
.gh-content h3 { font-size: 1.35rem; font-weight: 500; }
.gh-content a { color: var(--gold); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.gh-content a:hover { color: var(--gold-lt); text-decoration-color: var(--gold); }

.gh-content blockquote {
  border-left: 2px solid var(--gold);
  margin-left: 0; padding: 6px 0 6px 28px;
  font-style: italic; font-size: 1.3rem; color: var(--gold-lt);
}
.gh-content ul, .gh-content ol { padding-left: 1.4em; color: #e2d8c5; }
.gh-content li { margin-top: 0.5em; }
.gh-content li::marker { color: var(--gold); }

.gh-content img, .gh-content .kg-image { border: 1px solid var(--line); border-radius: 3px; }
.gh-content figcaption { text-align: center; font-style: italic; font-size: 0.95rem; color: var(--faint); margin-top: 10px; }

.gh-content hr {
  border: 0; height: 1px; margin: 2.4em auto; max-width: 220px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
  position: relative;
}
.gh-content hr::after {
  content: "❦"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--void); padding: 0 14px; color: var(--gold); font-size: 1rem;
}

.gh-content pre {
  background: #0a0706; border: 1px solid var(--line); border-radius: 4px;
  padding: 18px 20px; overflow-x: auto; font-size: 0.92rem; line-height: 1.6;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: #e2d8c5;
}
.gh-content :not(pre) > code {
  background: var(--void-2); border: 1px solid var(--line); border-radius: 3px;
  padding: 1px 6px; font-size: 0.88em; color: var(--gold-lt);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* wide/full-width Koenig cards */
.gh-content .kg-width-wide { max-width: var(--wrap-wide); margin-left: 50%; transform: translateX(-50%); }
.gh-content .kg-width-full { max-width: 100vw; margin-left: 50%; transform: translateX(-50%); }

.article-tags { margin-top: 48px; text-align: center; font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.article-tags a { color: var(--gold); }

/* =====================  FOOTER  ===================== */
.site-footer { text-align: center; padding: clamp(40px, 6vw, 72px) 24px 60px; }
.site-footer .motto { font-family: var(--display); font-size: 0.86rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-top: 26px; }
.site-footer .small { margin-top: 10px; font-size: 0.9rem; color: var(--faint); font-style: italic; }

/* =====================  MOTION / RESPONSIVE  ===================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
@media (max-width: 640px) {
  body { font-size: 18px; }
  .gh-content { font-size: 1.1rem; }
  .gh-content > p:first-of-type::first-letter { font-size: 3.6rem; }
}

a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }