/* ==========================================================================
   Twilight Keep - Dragon Nest Origins news & patch notes
   Design tokens mirror src/theme/tokens.js on dnorigins.com.
   ========================================================================== */

/* ----- Fonts (self-hosted, no external requests) ------------------------- */
@font-face {
  font-family: 'Marcellus SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/marcellus-sc-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
}

/* ----- Tokens ------------------------------------------------------------ */
:root {
  --canvas: #09090E;
  --sunken: #050509;
  --raised: #14141B;
  --card: #1E1E28;
  --card-hover: #252532;
  --overlay: #14141B;

  --gold: #F7AB00;
  --gold-dark: #C68D00;
  --gold-bright: #FFC248;
  --gold-soft: rgba(247, 171, 0, 0.14);
  --gold-strong: rgba(247, 171, 0, 0.28);
  --gold-border: rgba(247, 171, 0, 0.55);

  --purple: #BB86FC;
  --purple-soft: rgba(187, 134, 252, 0.14);
  --purple-strong: rgba(187, 134, 252, 0.28);
  --purple-border: rgba(187, 134, 252, 0.55);

  --text-primary: #EEF0F5;
  --text-secondary: #A8A3B3;
  --text-muted: #6B6775;
  --text-inverse: #09090E;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-muted: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.24);

  --success: #30A46C;
  --success-soft: rgba(48, 164, 108, 0.14);
  --success-border: rgba(48, 164, 108, 0.40);
  --danger: #E5484D;
  --danger-soft: rgba(229, 72, 77, 0.14);
  --danger-border: rgba(229, 72, 77, 0.50);
  --warning: #F59F0B;
  --warning-soft: rgba(245, 159, 11, 0.14);
  --warning-border: rgba(245, 159, 11, 0.40);
  --info: #5EB0EF;
  --info-soft: rgba(94, 176, 239, 0.14);
  --info-border: rgba(94, 176, 239, 0.40);

  /* Falls back to the bundled faces; Ghost injects --gh-font-* if the admin
     picks custom fonts under Settings > Design. */
  --font-display: var(--gh-font-heading, 'Marcellus SC', 'Times New Roman', serif);
  --font-body: var(--gh-font-body, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --ease: cubic-bezier(0.32, 0.72, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.22, 1.36, 0.36, 1);
  --dur: 220ms;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --shadow-lg: 0 12px 24px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.2);

  --gold-rail: 0 0 12px rgba(247, 171, 0, 0.45);
  --content-width: 760px;
  --wide-width: 1120px;

  /* right-pointing chevron, recolored via mask + currentColor */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");

  /* Dragon Nest class colors, for ability callouts */
  --cls-warrior: #E5686A;
  --cls-archer: #6FCF97;
  --cls-sorceress: #B98BE0;
  --cls-cleric: #F2C14E;
  --cls-academic: #E08C57;
  --cls-kali: #C264C9;
  --cls-assassin: #7C8CF0;
  --cls-lencea: #4FB3C6;
  --cls-machina: #9AA6B2;
}

/* ----- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: hidden; max-width: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-secondary);
  background-color: var(--canvas);
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(187,134,252,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 0%, rgba(247,171,0,0.05) 0%, transparent 45%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--purple); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--gold); }
h1, h2, h3, h4, h5, h6 { color: var(--text-primary); font-weight: 600; }
::selection { background: var(--purple-strong); color: #fff; }

.wrap { width: 100%; max-width: var(--wide-width); margin: 0 auto; padding: 0 24px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--text-inverse); padding: 10px 16px;
  border-radius: 0 0 var(--radius-md) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--overlay);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header::after {
  content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
  width: 45%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-border), transparent);
}
.header-inner { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; padding: 4px 8px; margin-left: -8px; border-radius: var(--radius-md); }
.brand:hover { background: rgba(255,255,255,0.04); }
.brand img { width: 40px; height: 40px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)); }
.brand-mark { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.06em; color: var(--text-primary); }
.brand-sub { font-size: 0.6rem; letter-spacing: 0.34em; text-transform: uppercase; font-weight: 700; color: var(--gold); margin-top: 3px; }
.header-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.header-nav a {
  color: var(--text-secondary); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.03em;
  padding: 9px 13px; border-radius: var(--radius-md); position: relative;
}
.header-nav a::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 5px; height: 1.5px; border-radius: 1px;
  background: var(--gold); opacity: 0; transition: opacity var(--dur) var(--ease);
}
.header-nav a:hover { color: var(--text-primary); }
.header-nav a:hover::after, .header-nav a.is-active::after { opacity: 1; }
.header-nav a.is-active { color: var(--text-primary); }
.header-cta {
  margin-left: 6px; padding: 8px 16px !important; border-radius: var(--radius-md);
  background: var(--gold); color: var(--text-inverse) !important; font-weight: 700 !important;
}
.header-cta::after { display: none; }
.header-cta:hover { background: var(--gold-bright); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; color: var(--text-primary); cursor: pointer; padding: 8px; }
.nav-toggle svg { width: 26px; height: 26px; }

@media (max-width: 800px) {
  .header-nav {
    position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--overlay); border-bottom: 1px solid var(--border-muted);
    padding: 8px; box-shadow: var(--shadow-lg);
    /* clear the 68px top offset too, so nothing peeks when closed */
    transform: translateY(calc(-100% - 80px));
    visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .header-nav.open {
    transform: translateY(0); visibility: visible;
    transition: transform var(--dur) var(--ease);
  }
  .header-nav a { padding: 14px; }
  .header-nav a::after { display: none; }
  .header-cta { margin: 6px; text-align: center; }
  .nav-toggle { display: inline-flex; }
}

/* ==========================================================================
   Page hero (listing)
   ========================================================================== */
.keep-hero { position: relative; padding: 60px 0 40px; text-align: center; overflow: hidden; }
.keep-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(187,134,252,0.16) 0%, transparent 60%);
  pointer-events: none;
}
.keep-hero .kicker {
  font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 700;
  color: var(--gold); margin: 0 0 14px;
}
.keep-hero h1 {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.08; margin: 0; letter-spacing: 0.01em;
}
.keep-hero p { max-width: 560px; margin: 16px auto 0; color: var(--text-secondary); font-size: 1.02rem; }
.keep-hero .rail { width: 56px; height: 2px; background: var(--gold); border-radius: 2px; margin: 22px auto 0; box-shadow: var(--gold-rail); }

/* ==========================================================================
   Patch feed (listing)
   ========================================================================== */
.feed { padding: 8px 0 72px; }
.feed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.feed-grid.single { grid-template-columns: minmax(0, 1fr); }

/* the newest post spans full width as a feature plate */
.post-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.post-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10) 18%, rgba(255,255,255,0.10) 82%, transparent);
}
.post-card:hover { transform: translateY(-3px); border-color: var(--purple-border); box-shadow: var(--shadow-md); }
.post-card:hover .post-card-cta { color: var(--gold); }
.post-card--feature { grid-column: 1 / -1; }
.post-card--feature::before { height: 2px; background: linear-gradient(90deg, rgba(247,171,0,0.85), rgba(247,171,0,0.30) 55%, transparent); }
.post-card--feature:hover { border-color: var(--gold-border); }

.post-card-media {
  display: block; aspect-ratio: 16 / 7; background: var(--sunken) center/cover no-repeat; position: relative;
}
.post-card--feature .post-card-media { aspect-ratio: 21 / 7; }
.post-card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,5,9,0) 45%, rgba(5,5,9,0.6));
}
.post-card-media.no-image {
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(187,134,252,0.12), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(247,171,0,0.10), transparent 55%),
    var(--sunken);
}
.post-card-media.no-image::before {
  content: ""; width: 68px; height: 68px; opacity: 0.28;
  background: url('../images/logo.png') center/contain no-repeat;
  filter: grayscale(0.2) drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
.post-card-body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 22px 24px 24px; }
.post-card-title, .post-card-excerpt { overflow-wrap: anywhere; }
.post-card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.post-card-date {
  color: var(--gold); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.post-card-title {
  font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; color: var(--text-primary);
  margin: 0; font-size: 1.3rem; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card--feature .post-card-title { font-size: 1.9rem; -webkit-line-clamp: 3; }
.post-card-title a { color: inherit; }
.post-card-title a:hover { color: var(--gold); }
.post-card-excerpt {
  margin: 12px 0 0; color: var(--text-secondary); font-size: 0.94rem; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-secondary); transition: color var(--dur) var(--ease);
}
.post-card-cta svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.post-card:hover .post-card-cta svg { transform: translateX(4px); }

/* patch-type tag chips (derived from Ghost tags) */
.tag-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--border-muted); color: var(--text-secondary); background: rgba(255,255,255,0.02);
}
.tag-chip--gold { color: var(--gold); border-color: var(--gold-border); background: var(--gold-soft); }
.tag-chip--purple { color: var(--purple); border-color: var(--purple-border); background: var(--purple-soft); }
.tag-chip--green { color: var(--success); border-color: var(--success-border); background: var(--success-soft); }
.tag-chip--red { color: var(--danger); border-color: var(--danger-border); background: var(--danger-soft); }

@media (max-width: 720px) {
  .feed-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .post-card--feature .post-card-title { font-size: 1.5rem; }
  .keep-hero h1 { font-size: clamp(1.7rem, 8vw, 2.4rem); overflow-wrap: anywhere; }
}

/* pagination */
.pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 44px; }
.pagination a, .pagination .page-number {
  padding: 10px 18px; border-radius: var(--radius-md); border: 1px solid var(--border-muted);
  color: var(--text-secondary); font-weight: 600; font-size: 0.85rem; background: var(--raised);
}
.pagination a:hover { border-color: var(--gold-border); color: var(--gold); }
.pagination .page-number { border-color: transparent; background: transparent; }

/* ==========================================================================
   Single post
   ========================================================================== */
.post-hero { position: relative; padding: 52px 0 24px; }
.post-hero .back-link {
  display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary);
}
.post-hero .back-link:hover { color: var(--gold); }
.post-hero .back-link svg { width: 15px; height: 15px; }
.post-head { max-width: var(--content-width); margin: 0 auto; text-align: center; padding-top: 26px; }
.post-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.post-title {
  font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em;
  font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.1; margin: 0; color: var(--text-primary);
}
.post-meta {
  display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; color: var(--text-muted); font-size: 0.8rem; letter-spacing: 0.04em;
}
.post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); }
.post-meta time, .post-meta .reading { color: var(--text-secondary); font-weight: 600; }
.post-feature-image {
  max-width: var(--wide-width); margin: 34px auto 0; padding: 0 24px;
}
.post-feature-image img {
  width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg);
}

/* content column */
.post-content { max-width: var(--content-width); margin: 40px auto 0; padding: 0 24px 40px; font-size: 1.06rem; line-height: 1.6; }
/* Tight vertical rhythm so consecutive lines read as single breaks, not doubles.
   Headings keep their larger margin-top, so section breaks still breathe. */
.post-content > * { margin-top: 0; margin-bottom: 1em; }
.post-content p { color: var(--text-secondary); margin-bottom: 0.9em; }
/* a paragraph right before a list belongs with it */
.post-content p:has(+ ul), .post-content p:has(+ ol) { margin-bottom: 0.5em; }
.post-content a { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--purple-strong); }
.post-content a:hover { color: var(--gold); text-decoration-color: var(--gold); }

.post-content h2, .post-content h3, .post-content h4 { color: var(--text-primary); line-height: 1.25; scroll-margin-top: 90px; }
/* stray empty headings (a blank line left in the editor) shouldn't render */
.post-content .heading-empty { display: none; }
.post-content h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; letter-spacing: 0.01em;
  margin-top: 2.4em; padding-bottom: 10px; position: relative;
}
.post-content h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 2px;
  background: var(--gold); border-radius: 2px; box-shadow: var(--gold-rail);
}
.post-content h3 {
  font-size: 1.28rem; font-weight: 600; margin-top: 2em; padding-left: 14px; border-left: 3px solid var(--purple);
}
.post-content h4 { font-size: 1.08rem; font-weight: 700; margin-top: 1.5em; color: var(--text-primary); }
.post-content ul, .post-content ol { padding-left: 1.4em; }
.post-content li { margin-bottom: 0.35em; color: var(--text-secondary); }
.post-content li:last-child { margin-bottom: 0; }
.post-content li::marker { color: var(--gold); }
.post-content strong { color: var(--text-primary); font-weight: 700; }
.post-content hr {
  border: 0; height: 1px; margin: 2.5em 0; position: relative;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.post-content hr::after {
  content: "\2666"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: var(--gold); background: var(--canvas); padding: 0 12px; font-size: 0.8rem;
}
.post-content blockquote {
  margin: 1.6em 0; padding: 4px 22px; border-left: 3px solid var(--gold);
  color: var(--text-primary); font-style: italic; background: var(--gold-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.post-content blockquote p { color: var(--text-primary); }
.post-content img, .post-content video, .post-content iframe { border-radius: var(--radius-lg); }
.post-content figcaption { text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; }
.post-content code {
  font-family: var(--font-mono); font-size: 0.86em; background: var(--sunken);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 2px 6px; color: var(--gold-bright);
}
.post-content pre {
  background: var(--sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: 18px 20px; overflow-x: auto; font-family: var(--font-mono); font-size: 0.88rem; color: var(--text-primary);
}
.post-content pre code { background: none; border: 0; padding: 0; color: inherit; }

/* tables become stat tables */
.post-content table {
  width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 0.94rem;
  border: 1px solid var(--border-muted); border-radius: var(--radius-md); overflow: hidden;
}
.post-content thead { background: var(--raised); }
.post-content th {
  text-align: left; padding: 11px 14px; color: var(--text-primary); font-weight: 700;
  font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--border-muted);
}
.post-content td { padding: 11px 14px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }
.post-content tbody tr:nth-child(even) { background: rgba(255,255,255,0.015); }
.post-content tbody tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   Reading aids - table of contents, heading anchors, collapsibles, back-to-top
   (TOC + anchors are injected by main.js; everything degrades without JS)
   ========================================================================== */
/* Auto table of contents, a collapsible plate at the top of a long patch */
.post-toc {
  margin: 0 0 2em; border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--raised); overflow: hidden;
}
.post-toc > details > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 10px; padding: 13px 16px; flex-wrap: wrap;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold);
}
.post-toc-label { white-space: nowrap; }
.post-toc > details > summary::-webkit-details-marker { display: none; }
.post-toc > details > summary::before {
  content: ""; width: 13px; height: 13px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--chevron) center/contain no-repeat; mask: var(--chevron) center/contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.post-toc > details[open] > summary::before { transform: rotate(90deg); }
.post-toc-count { margin-left: auto; color: var(--text-muted); letter-spacing: 0.06em; white-space: nowrap; }
.post-toc ol { margin: 0; padding: 4px 8px 12px; list-style: none; counter-reset: toc; }
.post-toc li { margin: 0; }
.post-toc a {
  display: block; padding: 7px 12px 7px 34px; border-radius: var(--radius-sm); position: relative;
  color: var(--text-secondary); font-size: 0.92rem; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere;
  border-left: 2px solid transparent; transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.post-toc a::before {
  counter-increment: toc; content: counter(toc, decimal-leading-zero);
  position: absolute; left: 12px; color: var(--text-muted); font-size: 0.7rem; font-variant-numeric: tabular-nums; top: 9px;
}
.post-toc a.sub { padding-left: 48px; font-size: 0.86rem; color: var(--text-muted); }
.post-toc a.sub::before { content: ""; counter-increment: none; }
.post-toc a:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
.post-toc a.active { color: var(--gold); background: var(--gold-soft); border-left-color: var(--gold); }

/* Wide screens: float the TOC in the far-left gutter, clear of the 1120px
   content wrap (feature image + back link), fixed and always visible while
   reading. It fades out once you scroll past the article. Below this width
   there isn't room beside the content, so it stays the inline block. */
@media (min-width: 1800px) {
  .post-toc {
    position: fixed; top: 100px; left: max(24px, calc(50% - 884px));
    width: 272px; margin: 0; max-height: calc(100vh - 140px); overflow: hidden auto;
    z-index: 30;
    transition: opacity var(--dur) var(--ease), visibility 0s linear 0s;
  }
  .post-toc.toc-hide {
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  /* it's a reference panel now, not a toggle */
  .post-toc > details > summary { pointer-events: none; }
  .post-toc > details > summary::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .post-toc { transition: none !important; }
}

/* Heading anchors: a # that fades in on hover of the heading */
.post-content .anchor-link {
  opacity: 0; margin-left: 0.4em; color: var(--text-muted); text-decoration: none; font-weight: 400;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.post-content h2:hover .anchor-link, .post-content h3:hover .anchor-link,
.post-content .anchor-link:focus-visible { opacity: 1; }
.post-content .anchor-link:hover { color: var(--gold); }
/* touch devices have no hover, so keep anchors faintly visible */
@media (hover: none) { .post-content .anchor-link { opacity: 0.45; } }
.anchor-copied::after {
  content: "Link copied"; position: absolute; margin-left: 8px; font-size: 0.7rem; font-weight: 600;
  color: var(--success); letter-spacing: 0.04em; text-transform: none;
}

/* Collapsible sections: author drops <details> via an HTML card.
   :not(.toc-details) keeps this card styling off the table-of-contents, which
   is also a <details> living inside .post-content. */
.post-content details:not(.toc-details) {
  border: 1px solid var(--border-muted); border-radius: var(--radius-md); background: var(--card);
  padding: 0 18px; margin: 1.2em 0;
}
.post-content details:not(.toc-details) > summary {
  list-style: none; cursor: pointer; padding: 14px 0; margin: 0 -18px; padding-left: 18px; padding-right: 18px;
  color: var(--text-primary); font-weight: 700; display: flex; align-items: center; gap: 10px;
}
.post-content details:not(.toc-details) > summary::-webkit-details-marker { display: none; }
.post-content details:not(.toc-details) > summary::before {
  content: ""; width: 12px; height: 12px; flex-shrink: 0; background: var(--gold);
  -webkit-mask: var(--chevron) center/contain no-repeat; mask: var(--chevron) center/contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.post-content details:not(.toc-details)[open] > summary::before { transform: rotate(90deg); }
.post-content details:not(.toc-details)[open] > summary { border-bottom: 1px solid var(--border-subtle); margin-bottom: 14px; }
.post-content details:not(.toc-details) > summary:hover { color: var(--gold); }

/* Back to top */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 50;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-muted);
  background: var(--overlay); color: var(--text-secondary); cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none; visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.to-top:hover { color: var(--gold); border-color: var(--gold-border); }
.to-top:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.to-top svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .post-toc > details > summary::before,
  .post-content details > summary::before,
  .to-top { transition: none; }
}

/* ==========================================================================
   Koenig callout cards - themed as patch "notes"
   Authors pick a color in the editor; each color reads as a patch meaning.
   ========================================================================== */
.kg-callout-card {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin: 1.6em 0;
  border-radius: var(--radius-md); border: 1px solid var(--border-muted); background: var(--raised);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.kg-callout-emoji { font-size: 1.15rem; line-height: 1.5; flex-shrink: 0; }
.kg-callout-text { color: var(--text-secondary); font-size: 0.96rem; }
.kg-callout-text strong { color: var(--text-primary); }
.kg-callout-card-green { background: var(--success-soft); border-color: var(--success-border); }
.kg-callout-card-green .kg-callout-text { color: #b9e6cd; }
.kg-callout-card-red { background: var(--danger-soft); border-color: var(--danger-border); }
.kg-callout-card-red .kg-callout-text { color: #f3c0c2; }
.kg-callout-card-yellow { background: var(--warning-soft); border-color: var(--warning-border); }
.kg-callout-card-yellow .kg-callout-text { color: #f5d59b; }
.kg-callout-card-blue { background: var(--info-soft); border-color: var(--info-border); }
.kg-callout-card-blue .kg-callout-text { color: #bfe0f7; }
.kg-callout-card-purple, .kg-callout-card-pink { background: var(--purple-soft); border-color: var(--purple-border); }
.kg-callout-card-purple .kg-callout-text, .kg-callout-card-pink .kg-callout-text { color: #d9c4fb; }
.kg-callout-card-accent { background: var(--gold-soft); border-color: var(--gold-border); }
.kg-callout-card-accent .kg-callout-text { color: #f5d59b; }
.kg-callout-card-grey, .kg-callout-card-white { background: var(--raised); border-color: var(--border-muted); }

/* Koenig button card */
.kg-btn {
  display: inline-block; padding: 12px 26px; border-radius: var(--radius-md); font-weight: 700;
  background: var(--gold); color: var(--text-inverse);
}
.kg-btn:hover { background: var(--gold-bright); color: var(--text-inverse); }
.kg-btn-accent { background: var(--gold); color: var(--text-inverse); }

/* Koenig bookmark card */
.kg-bookmark-card { margin: 1.6em 0; }
.kg-bookmark-container {
  display: flex; border: 1px solid var(--border-muted); border-radius: var(--radius-md);
  background: var(--card); overflow: hidden; color: inherit;
}
.kg-bookmark-container:hover { border-color: var(--gold-border); }
.kg-bookmark-content { flex: 1; padding: 18px 20px; }
.kg-bookmark-title { color: var(--text-primary); font-weight: 700; }
.kg-bookmark-description { color: var(--text-secondary); font-size: 0.9rem; }
.kg-bookmark-thumbnail { max-width: 180px; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

/* Koenig width variants inside the narrow column */
.post-content .kg-width-wide { width: min(100%, var(--wide-width)); margin-left: 50%; transform: translateX(-50%); }
.post-content .kg-width-full { width: 100vw; margin-left: 50%; transform: translateX(-50%); border-radius: 0; }
.post-content .kg-card-hascaption { display: flex; flex-direction: column; }

/* ==========================================================================
   Patch-note helper components (for HTML cards - see AUTHORING guide)
   ========================================================================== */
/* Section band with an icon + label, e.g. Additions / Balance / Fixes */
.pn-section {
  display: flex; align-items: center; gap: 12px; margin: 2em 0 1em;
  font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; color: var(--text-primary);
}
.pn-section .pn-ico {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-md);
  background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold-border); flex-shrink: 0;
  font-size: 1.1rem;
}
.pn-section--buff .pn-ico { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.pn-section--nerf .pn-ico { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }
.pn-section--fix .pn-ico { background: var(--info-soft); color: var(--info); border-color: var(--info-border); }
.pn-section--new .pn-ico { background: var(--purple-soft); color: var(--purple); border-color: var(--purple-border); }

/* Change list - each row is a tweak with a +/- indicator */
.pn-changes { list-style: none; margin: 1.4em 0; padding: 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-subtle); }
.pn-changes li {
  display: flex; gap: 12px; align-items: baseline; margin: 0; padding: 12px 16px;
  background: var(--card); border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary);
}
.pn-changes li:last-child { border-bottom: 0; }
.pn-changes li::before {
  content: "\2022"; color: var(--text-muted); font-weight: 700; flex-shrink: 0; width: 1em;
}
.pn-changes li.up::before { content: "\25B2"; color: var(--success); font-size: 0.7em; }
.pn-changes li.down::before { content: "\25BC"; color: var(--danger); font-size: 0.7em; }
.pn-changes li.new::before { content: "\002B"; color: var(--purple); }
.pn-changes li.fix::before { content: "\2713"; color: var(--info); }
.pn-changes b, .pn-changes strong { color: var(--text-primary); }

/* class-colored inline tag for ability/skill references */
.cls { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.82em; font-weight: 700; border: 1px solid currentColor; }
.cls-warrior { color: var(--cls-warrior); } .cls-archer { color: var(--cls-archer); }
.cls-sorceress { color: var(--cls-sorceress); } .cls-cleric { color: var(--cls-cleric); }
.cls-academic { color: var(--cls-academic); } .cls-kali { color: var(--cls-kali); }
.cls-assassin { color: var(--cls-assassin); } .cls-lencea { color: var(--cls-lencea); }
.cls-machina { color: var(--cls-machina); }

/* before -> after stat pill */
.pn-stat { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.9em; }
.pn-stat .from { color: var(--text-muted); text-decoration: line-through; }
.pn-stat .arrow { color: var(--text-muted); }
.pn-stat .to { color: var(--text-primary); font-weight: 700; }
.pn-stat.up .to { color: var(--success); }
.pn-stat.down .to { color: var(--danger); }

/* key facts strip at the top of a patch */
.pn-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.4em 0; padding: 0; }
.pn-facts .fact {
  flex: 1 1 140px; padding: 12px 14px; background: var(--card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); position: relative;
}
.pn-facts .fact::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--gold), transparent 70%); }
.pn-facts .fact .k { display: block; font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.pn-facts .fact .v { display: block; margin-top: 3px; color: var(--text-primary); font-weight: 700; font-size: 1.05rem; }

/* ==========================================================================
   Post footer - tags, share, prev/next
   ========================================================================== */
.post-footer { max-width: var(--content-width); margin: 0 auto; padding: 24px 24px 0; }
.post-footer-tags { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 24px; border-top: 1px solid var(--border-subtle); }
.read-more { padding: 60px 0 80px; border-top: 1px solid var(--border-subtle); margin-top: 40px; }
.read-more h3 { text-align: center; font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; margin: 0 0 28px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { border-top: 1px solid var(--border-subtle); background: var(--sunken); padding: 48px 0 40px; margin-top: auto; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: center; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand img { width: 52px; height: 52px; }
.footer-brand .t { font-family: var(--font-display); color: var(--text-primary); font-size: 1rem; }
.footer-brand .s { color: var(--text-muted); font-size: 0.8rem; margin-top: 2px; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { color: var(--text-secondary); font-weight: 600; font-size: 0.9rem; }
.footer-links a:hover { color: var(--gold); }
.footer-legal { width: 100%; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 0.78rem; line-height: 1.6; }

/* layout scaffolding to keep footer at the bottom */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }

/* reading progress bar */
.read-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--gold), var(--purple)); z-index: 60; transition: width 80ms linear; }

/* empty + error states */
.state { text-align: center; padding: 80px 24px; max-width: 520px; margin: 0 auto; }
.state h1 { font-family: var(--font-display); font-weight: 400; font-size: 4rem; color: var(--gold); margin: 0; }
.state h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; margin: 8px 0 12px; }
.state p { color: var(--text-secondary); }
.state .btn {
  display: inline-block; margin-top: 22px; padding: 12px 24px; border-radius: var(--radius-md);
  background: var(--gold); color: var(--text-inverse); font-weight: 700;
}
.state .btn:hover { background: var(--gold-bright); color: var(--text-inverse); }

@media (max-width: 600px) {
  body { font-size: 16px; }
  .keep-hero { padding: 40px 0 28px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
}