/* Blog Posting Pipeline - fabricated demo. Self-contained, no external calls. */

@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/space-grotesk.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}

/*
  Palette and component patterns below match the real, live public design
  system read directly off davonex.com's own CSS and rendered blog-post pages
  (:root tokens, .card/.btn/.eyebrow components, and the full article template:
  breadcrumb, article-head, prose, citations, references, author-line, final
  CTA band), since this pipeline publishes to that exact site. Colors, radii,
  shadows, and layout patterns are copied 1:1; nothing here is invented. This
  is public visual design language (what every visitor's browser already
  renders), not the site's private server code or API integration, which stays
  out of this repo entirely. The demo's own outer shell (nav, hero) uses an
  original fictional "Nordkast Coffee Supply" brand mark, not davonex's actual
  logo or name, to avoid impersonating the real client site; only the reusable
  layout/CSS patterns are shared.
*/
:root {
  --bg: #FAFBFE;
  --bg-alt: #EFF4FD;
  --paper: #FFFFFF;
  --blue: #136BEE;
  --blue-deep: #0C4497;
  --navy: #062757;
  --tint: #A9C9F8;
  --ink: #08152B;
  --ink-soft: #46597A;
  --good: #15803D;
  --bad: #C0362C;
  --line: rgba(6, 39, 87, .12);
  --line-strong: rgba(6, 39, 87, .22);
  --r-lg: 26px;
  --r-md: 16px;
  --r-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(8, 21, 43, .06), 0 6px 18px rgba(8, 21, 43, .05);
  --shadow-md: 0 10px 30px rgba(12, 68, 151, .12), 0 2px 8px rgba(8, 21, 43, .06);
  --shadow-blue: 0 18px 40px rgba(19, 107, 238, .28);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* kept for the fabrication-disclosure banner, deliberately not brand-blue so it reads as a system notice, not site content */
  --warn: #FFD93D;
  --warn-line: #16130E;
  --wrap: 880px;
}

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

html { height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: 'Space Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 600px at 88% -8%, rgba(19, 107, 238, .12), transparent 60%),
    radial-gradient(700px 520px at -6% 12%, rgba(169, 201, 248, .18), transparent 55%),
    var(--bg);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .4;
  background-image: repeating-linear-gradient(-22deg, rgba(6, 39, 87, .03) 0 1px, transparent 1px 38px);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.1) 55%, transparent);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

code, pre { font-family: var(--mono); }

/* Disclosure banner: permanent, non-dismissable. Deliberately not brand-blue,
   so it reads as a system notice sitting on top of the template, not as part
   of the site's own content. */
.demo-banner {
  background: var(--warn);
  border-bottom: 3px solid var(--warn-line);
  color: var(--warn-line);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 0;
  text-align: center;
  position: relative;
  z-index: 5;
}
.demo-banner strong { text-decoration: underline; }

/* ============================ Eyebrow ============================ */
.eyebrow {
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); font-weight: 700; display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--blue); display: inline-block; }

/* ============================ Buttons ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: inherit; font-weight: 700; font-size: 15px; line-height: 1;
  padding: 14px 24px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer;
  background: none; color: inherit;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  min-height: 46px; white-space: nowrap;
}
.btn .arr { transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.btn:hover .arr { transform: translateX(3px); }
.btn--primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); }
.btn--primary:hover:not(:disabled) { transform: translateY(-2px); background: #0f5fdd; box-shadow: 0 20px 40px rgba(19,107,238,.34); }
.btn--ghost { background: var(--paper); color: var(--navy); border-color: var(--line-strong); }
.btn--ghost:hover:not(:disabled) { border-color: var(--navy); transform: translateY(-2px); background: rgba(6,39,87,.04); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: translateY(0); }

/* ============================ Nav (fictional Nordkast brand) ============================ */
.demo-nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250, 251, 254, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.demo-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 14px; }
.demo-nav__brand { display: flex; align-items: center; gap: 11px; }
.demo-nav__mark {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; box-shadow: 0 6px 16px rgba(19,107,238,.3);
}
.demo-nav__name { font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em; color: var(--navy); }
.demo-nav__links { display: flex; align-items: center; gap: 24px; }
.demo-nav__links a { font-weight: 600; font-size: .9rem; color: var(--ink-soft); transition: color .2s; }
.demo-nav__links a:hover { color: var(--navy); }
.demo-nav__tag {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); background: rgba(19,107,238,.08); padding: 5px 11px; border-radius: 999px;
}

/* ============================ Hero ============================ */
header.hero { padding: 56px 0 32px; position: relative; }
h1 { font-family: inherit; font-weight: 700; letter-spacing: -.02em; color: var(--navy); font-size: clamp(30px, 4.4vw, 44px); line-height: 1.06; margin: 0 0 14px; }
.lede { font-size: 16px; color: var(--ink-soft); max-width: 660px; margin: 0 0 26px; }

/* ============================ Tabs ============================ */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab {
  border: 1px solid var(--line); background: var(--paper); border-radius: 999px;
  padding: 10px 20px; font-weight: 700; font-size: 13.5px; cursor: pointer; color: var(--ink-soft);
  box-shadow: var(--shadow-sm); transition: background .2s, color .2s, border-color .2s;
}
.tab.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.tab:not(.is-active):hover { border-color: var(--blue); color: var(--navy); }
.panel { display: none; }
.panel.is-active { display: block; }

/* ============================ Progress rail ============================ */
.rail { display: flex; gap: 6px; margin: 0 0 0; flex-wrap: wrap; }
.rail__dot {
  flex: 1 1 0; min-width: 84px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 10px; font-size: 12px; font-weight: 700;
  background: var(--paper); color: var(--ink-soft); opacity: .55;
  box-shadow: var(--shadow-sm); transition: opacity .25s, background .25s, color .25s;
}
.rail__dot.is-active { opacity: 1; background: var(--tint); color: var(--navy); }
.rail__dot.is-done { opacity: 1; background: var(--bg-alt); color: var(--blue-deep); }
.rail__dot.is-done::after { content: " \2713"; }

main { padding: 40px 0 80px; flex: 1 0 auto; width: 100%; }

/* ============================ Brief autofill card ============================ */
.brief-card {
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  background: var(--paper); padding: 26px 28px; margin-bottom: 28px;
}
.section-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700; margin: 0 0 14px;
}
.preset-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.preset-chip {
  border: 1px solid var(--line-strong); background: var(--bg-alt); color: var(--ink-soft);
  border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: 13px; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.preset-chip:hover:not(:disabled) { border-color: var(--blue); color: var(--navy); }
.preset-chip.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.preset-chip:disabled { opacity: .55; cursor: not-allowed; }
.entity-grid { display: grid; gap: 12px; }
.entity { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; background: var(--bg-alt); }
.entity .k { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); font-weight: 700; margin-bottom: 4px; }
.entity .v { font-size: 14px; font-weight: 700; color: var(--navy); }
.modeled-after { font-size: 12.5px; color: var(--ink-soft); margin-top: 14px; }
.modeled-after a { color: var(--blue); font-weight: 600; }

/* ============================ Real hero photo (replaces the old SVG placeholder) ============================ */
.hero-photo { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--bg-alt); }
.hero-photo img { width: 100%; height: 280px; object-fit: cover; }
.hero-photo__caption {
  display: block; padding: 10px 14px; font-size: 12.5px; color: var(--ink-soft);
  background: var(--paper); border-top: 1px solid var(--line);
}
.image-prompt { margin-top: 14px; font-style: italic; color: var(--ink-soft); font-size: 14px; }

/* ============================ Step cards ============================ */
.step {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  background: var(--paper);
  margin: 0 0 28px; padding: 28px;
  display: none; position: relative; overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
}
.step::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: var(--blue); transition: width .5s ease;
}
.step.is-visible { display: block; }
.step.is-visible::before { width: 100%; }
.step__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 16px; border-bottom: 1px solid var(--line); padding-bottom: 12px;
}
.step__num { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--blue); }
.step__title { font-size: 21px; margin: 2px 0 0; color: var(--navy); font-weight: 700; letter-spacing: -.01em; }
.step__model {
  font-family: var(--mono); font-size: 12px; color: var(--blue-deep);
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px;
}

.json-panel {
  background: var(--navy); color: var(--tint); border-radius: var(--r-md);
  padding: 18px; overflow-x: auto; font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}

.article { font-size: 15.5px; }
.article h3 { font-size: 18px; margin: 22px 0 8px; color: var(--navy); font-weight: 700; }
.article table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.article th, .article td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.article thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: var(--bg-alt); color: var(--ink-soft); }
.article .faq dt { font-weight: 700; margin-top: 12px; color: var(--navy); }
.article .faq dd { margin: 4px 0 0; color: var(--ink-soft); }
.article sup.citation a { color: var(--blue); font-weight: 700; text-decoration: none; }
.article .refs { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); }
.article .refs ol { padding-left: 20px; margin-top: 8px; }
.article .refs li { margin-bottom: 6px; }

.publish-card { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; margin-bottom: 16px; }
.publish-card__url { font-family: var(--mono); font-size: 14px; color: var(--blue-deep); }

.cost-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.cost-table th, .cost-table td { border-bottom: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.cost-table thead th { font-family: var(--mono); font-size: 11px; text-transform: uppercase; background: var(--bg-alt); color: var(--ink-soft); }
.cost-total { font-size: 24px; font-weight: 700; margin: 14px 0 4px; color: var(--navy); }
.cost-note { font-size: 12px; color: var(--ink-soft); }

.controls { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

footer.site-foot { border-top: 1px solid var(--line); padding: 40px 0 34px; font-size: 13px; color: var(--ink-soft); }
.foot-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.foot-brand .demo-nav__mark { width: 26px; height: 26px; font-size: 12px; }
.foot-brand strong { font-size: 1.05rem; color: var(--navy); }
.foot-tag { max-width: 340px; }
.foot-right { text-align: right; }
footer a.underline { text-decoration: underline; color: var(--blue-deep); }

/*
  Live-template post preview, shown in the Publish step. This is a faithful,
  bounded recreation of the real davonex.com article template (nav, breadcrumb,
  article-head, prose, citations, references, author-line, final CTA band),
  built from its own live rendered CSS, using only the fabricated example
  content. It shows what the pipeline's output actually looks like once
  published on the real template, without running any of the real site's code,
  and without using the real site's actual brand name or logo (an original
  "Nordkast Coffee Supply" mark is used throughout instead).
*/
.post-preview {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--paper); box-shadow: var(--shadow-md); margin-bottom: 20px;
}
.post-preview__browser-bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--bg-alt); border-bottom: 1px solid var(--line);
}
.post-preview__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.post-preview__url {
  margin-left: 8px; font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* mini real-site nav inside the preview frame */
.pv-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.pv-nav .demo-nav__mark { width: 28px; height: 28px; font-size: 12px; }
.pv-nav .demo-nav__name { font-size: .98rem; }
.pv-nav__links { display: flex; align-items: center; gap: 16px; }
.pv-nav__links a { font-weight: 600; font-size: .82rem; color: var(--ink-soft); }
.pv-nav .btn { padding: 8px 16px; font-size: 12.5px; min-height: 34px; }

.pv-article { max-width: 680px; margin: 0 auto; padding: 32px 24px 0; }
.pv-breadcrumb { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: 12px; color: var(--ink-soft); margin-bottom: 20px; }
.pv-breadcrumb .sep { opacity: .45; }
.pv-breadcrumb [aria-current] { color: var(--navy); font-weight: 600; }

.pv-post-tag {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); background: rgba(19,107,238,.08); padding: 5px 11px; border-radius: 999px; margin-bottom: 12px;
}
.pv-article h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.1; margin: 0 0 14px; }
.pv-meta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); margin-bottom: 24px; }
.pv-meta-row .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-soft); opacity: .5; }

.pv-figure { margin: 0 0 8px; }
.pv-figure img { width: 100%; height: 260px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-alt); }
.pv-figure__caption { margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); text-align: center; }

.pv-prose { padding: 8px 0 4px; }
.pv-prose p { margin-top: 13px; font-size: 1rem; color: var(--ink-soft); line-height: 1.7; }
.pv-prose h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.15; margin-top: 34px; color: var(--navy); }
.pv-prose ul { margin-top: 13px; display: grid; gap: 8px; list-style: none; }
.pv-prose ul li { position: relative; padding-left: 22px; color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
.pv-prose ul li::before { content: ""; position: absolute; left: 5px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.pv-prose ol { margin-top: 13px; padding-left: 22px; display: grid; gap: 8px; }
.pv-prose ol li { color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
.pv-prose table { width: 100%; border-collapse: collapse; font-size: .92rem; margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.pv-prose th, .pv-prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.pv-prose thead th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; background: var(--bg-alt); }
.pv-prose sup.citation a { color: var(--blue); font-weight: 700; }

.pv-refs { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); }
.pv-refs h2 { font-size: 1.05rem; color: var(--navy); margin-bottom: 10px; }
.pv-refs ol { padding-left: 20px; display: grid; gap: 6px; }
.pv-refs li { font-size: .85rem; color: var(--ink-soft); }
.pv-refs a { color: var(--blue); font-weight: 600; }
.pv-refs .ref-date { opacity: .7; }

.pv-author {
  margin-top: 30px; margin-bottom: 30px; display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-md);
}
.pv-author .av {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1rem;
}
.pv-author .a-name { font-weight: 700; color: var(--navy); font-size: .92rem; }
.pv-author .a-desc { font-size: .82rem; color: var(--ink-soft); margin-top: 2px; }

.pv-final-wrap { padding: 8px 24px 32px; }
.pv-final {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 60%, var(--navy) 100%);
  border-radius: var(--r-md); padding: 40px 24px; box-shadow: var(--shadow-blue);
}
.pv-final::before {
  content: ""; position: absolute; inset: 0; opacity: .4;
  background-image: repeating-linear-gradient(-22deg, rgba(255,255,255,.08) 0 1px, transparent 1px 40px);
}
.pv-final h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 1.9rem); position: relative; }
.pv-final p { color: rgba(255,255,255,.86); font-size: .95rem; margin: 12px auto 0; max-width: 420px; position: relative; }
.pv-final .btn { background: #fff; color: var(--navy); margin-top: 20px; position: relative; }

.pv-foot {
  border-top: 1px solid var(--line); padding: 24px; display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--ink-soft);
}
.pv-foot .demo-nav__brand { gap: 8px; }
.pv-foot .demo-nav__mark { width: 22px; height: 22px; font-size: 10px; }

/*
  Blog Library. Real-post cards mirror davonex.com's own .post-card layout
  (image, h3, excerpt, post-meta, read-link), built from its live CSS,
  populated with the real, live, public post list stored in REAL_DAVONEX_POSTS
  in demo-data.js, real images, full body text, and references, fetched and
  stored locally once so this page works fully offline. Clicking a card opens
  the full real article in-page via the reader panel below.
*/
.library-intro { font-size: 14px; color: var(--ink-soft); max-width: 720px; margin: 0 0 26px; }
.library-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px) { .library-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .library-grid { grid-template-columns: 1fr; } }

.post-card {
  display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 20px 18px; box-shadow: var(--shadow-sm); position: relative;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, border-color .28s;
  cursor: pointer;
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(19,107,238,.3); }
.post-card__img {
  width: 100%; aspect-ratio: 16/9; border-radius: 10px; border: 1px solid var(--line);
  overflow: hidden; background: var(--bg-alt);
}
.post-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card h3 { margin: 15px 0 0; font-size: 1.02rem; line-height: 1.3; color: var(--navy); }
.post-card .excerpt { margin-top: 10px; font-size: .92rem; color: var(--ink-soft); flex: 1; }
.post-card .post-meta {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px;
}
.post-card .post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-soft); opacity: .5; }
.post-card .read-link { margin-top: 12px; font-weight: 700; font-size: 13px; color: var(--blue); display: inline-flex; align-items: center; gap: 6px; }
.post-card .read-link .arr { transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.post-card:hover .read-link .arr { transform: translateX(3px); }

.post-card--demo { border: 1.5px solid var(--blue); box-shadow: var(--shadow-md); }
.demo-ribbon {
  display: inline-block; margin-top: 12px; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; color: #fff; background: var(--blue); padding: 4px 10px; border-radius: 999px;
}

/* ============================ In-page article reader (real davonex posts) ============================ */
.reader {
  max-width: 720px; margin: 20px auto 0; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 0 0 30px; overflow: hidden;
}
.reader__hero { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-alt); }
.reader__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reader__body { padding: 26px 32px 0; }
.reader__body h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 12px; color: var(--navy); }
.reader__meta { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); margin-bottom: 22px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.reader__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-soft); opacity: .5; }
.reader__prose p { margin-top: 14px; font-size: 1rem; color: var(--ink-soft); line-height: 1.72; }
.reader__prose h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.15; margin-top: 34px; color: var(--navy); }
.reader__prose h3 { font-size: 1.1rem; margin-top: 22px; color: var(--navy); }
.reader__prose ul, .reader__prose ol { margin-top: 13px; padding-left: 22px; display: grid; gap: 8px; }
.reader__prose li { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
.reader__prose table { width: 100%; border-collapse: collapse; font-size: .92rem; margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.reader__prose th, .reader__prose td { text-align: left; padding: 10px 13px; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.reader__prose thead th, .reader__prose th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; background: var(--bg-alt); }
.reader__prose sup.citation a { color: var(--blue); font-weight: 700; text-decoration: none; }
.reader__refs { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); }
.reader__refs h2 { font-size: 1.05rem; color: var(--navy); margin-bottom: 10px; }
.reader__refs ol { padding-left: 20px; display: grid; gap: 6px; }
.reader__refs li { font-size: .85rem; color: var(--ink-soft); }
.reader__refs a { color: var(--blue); font-weight: 600; }
.reader__provenance { margin-top: 26px; padding: 14px 16px; background: var(--bg-alt); border-radius: var(--r-sm); font-size: 12px; color: var(--ink-soft); }
.reader__provenance a { color: var(--blue); font-weight: 600; }