/* ==========================================================================
   KRATU AI Labs — blog.kratuailabs.com
   Premium dark + gold theme layer for Kadence (free) + Kadence Blocks.

   Loaded by the mu-plugin (blog/branding/mu-plugins/kratu-blog.php) as the LAST
   front-end stylesheet, so it cleanly overrides the theme without editing it.

   Design language (matches the main site — docs/website/KRATU_AI_WEBSITE_PLAN.md):
     - Ink #0e0c08 / gold #c9a35b / light #efeae0
     - Fraunces (display serif) headings, Hanken Grotesk body, JetBrains Mono labels
     - Fine gold hairlines, generous space, subtle grain, restrained/"engineered"
     - Deliberately NOT the purple-gradient AI cliche

   REVERSIBLE: remove the mu-plugin (rollback.sh) and every rule here is gone.
   NON-DESTRUCTIVE: styles only; never touches posts, permalinks or indexability.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --kr-ink:        #0e0c08;   /* base background */
  --kr-ink-2:      #16130c;   /* raised surface (cards, code, TOC) */
  --kr-ink-3:      #1e1a11;   /* hover / elevated surface */
  --kr-gold:       #c9a35b;   /* primary accent */
  --kr-gold-soft:  #d9b878;   /* accent hover / highlight */
  --kr-gold-deep:  #a8823f;   /* pressed / borders */
  --kr-light:      #efeae0;   /* primary text + headings */
  --kr-body:       #d8d1c4;   /* body copy (a touch softer than headings) */
  --kr-muted:      #a99f8c;   /* secondary / meta text */
  --kr-hairline:   rgba(201, 163, 91, 0.22);  /* gold hairline */
  --kr-hairline-2: rgba(239, 234, 224, 0.10); /* neutral hairline */

  --kr-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --kr-sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --kr-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --kr-measure: 44rem;        /* comfortable reading measure (~72ch) */
  --kr-radius:  14px;
  --kr-shadow:  0 18px 48px -24px rgba(0, 0, 0, 0.85);

  /* --- Remap Kadence's global palette so buttons/links/accents recolor
         cohesively wherever the theme uses them (version-safe approach). --- */
  --global-palette1: var(--kr-gold);       /* primary accent */
  --global-palette2: var(--kr-gold-soft);  /* accent hover */
  --global-palette3: var(--kr-light);      /* was darkest text -> now light */
  --global-palette4: var(--kr-body);       /* body text */
  --global-palette5: var(--kr-muted);      /* muted text */
  --global-palette6: #2a2418;              /* subtle borders */
  --global-palette7: var(--kr-ink-2);      /* subtle background */
  --global-palette8: #100d08;              /* deep background */
  --global-palette9: var(--kr-ink);        /* base background (was white) */

  --global-palette-btn:          var(--kr-ink);       /* button text = ink */
  --global-palette-btn-hover:    var(--kr-ink);
  --global-palette-btn-bg:       var(--kr-gold);       /* button bg = gold */
  --global-palette-btn-bg-hover: var(--kr-gold-soft);
}

/* --------------------------------------------------------------------------
   2. Base — background, body type, subtle grain
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body,
.wp-site-blocks,
#wrapper,
.content-wrap,
.site,
.site-container,
.content-area,
.site-main,
#colophon,
.site-footer {
  background-color: var(--kr-ink);
}

body {
  color: var(--kr-body);
  font-family: var(--kr-sans);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle grain + a faint gold glow at the top — restrained, "engineered". */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 520px at 50% -8%, rgba(201, 163, 91, 0.06), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}
/* Keep real content above the grain layer. */
.wp-site-blocks,
#wrapper,
.site { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   3. Typography — Fraunces headings, gold accents, readable measure
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.widget-title,
.comment-reply-title {
  font-family: var(--kr-serif);
  color: var(--kr-light);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
}

.entry-content h2 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.15rem); margin: 2.4em 0 0.7em; }
.entry-content h3 { font-size: clamp(1.3rem, 1.0rem + 1.1vw, 1.6rem);  margin: 1.9em 0 0.6em; }
.entry-content h4 { font-size: 1.2rem; margin: 1.6em 0 0.5em; }

/* A hairline under H2s to structure long reads. */
.entry-content h2 {
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--kr-hairline);
}

.entry-content p,
.entry-content li { color: var(--kr-body); }
.entry-content { font-size: 1.075rem; }

/* Constrain the reading measure on single posts for premium legibility. */
.single .entry-content > p,
.single .entry-content > ul,
.single .entry-content > ol,
.single .entry-content > h2,
.single .entry-content > h3,
.single .entry-content > h4,
.single .entry-content > figure,
.single .entry-content > blockquote,
.single .entry-content > pre {
  max-width: var(--kr-measure);
  margin-left: auto;
  margin-right: auto;
}

/* Links — gold, refined underline on hover. */
a { color: var(--kr-gold); text-decoration: none; transition: color 0.18s ease; }
a:hover, a:focus { color: var(--kr-gold-soft); }
.entry-content a {
  text-decoration: underline;
  text-decoration-color: var(--kr-hairline);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.entry-content a:hover { text-decoration-color: var(--kr-gold); }

/* Selection + strong emphasis. */
::selection { background: rgba(201, 163, 91, 0.28); color: var(--kr-light); }
.entry-content strong, .entry-content b { color: var(--kr-light); font-weight: 600; }

/* --------------------------------------------------------------------------
   4. Buttons (WP core + Kadence) — gold on ink, restrained hover
   -------------------------------------------------------------------------- */
.wp-block-button__link,
.kb-button,
.button,
button,
input[type="submit"],
.kadence-btn {
  background-color: var(--kr-gold);
  color: var(--kr-ink);
  font-family: var(--kr-sans);
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 8px;
  border: 0;
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.wp-block-button__link:hover,
.button:hover,
button:hover,
input[type="submit"]:hover {
  background-color: var(--kr-gold-soft);
  color: var(--kr-ink);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -14px rgba(201, 163, 91, 0.7);
}
/* Outline button variant stays gold-on-transparent. */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--kr-gold);
  border: 1px solid var(--kr-gold);
}

/* PROTECT the publisher's injected CTA (.kratu-cta uses inline styles).
   Inline styles already win; these rules only guarantee spacing/centering
   so the theme never collapses or fights it. */
.entry-content .kratu-cta { max-width: var(--kr-measure); margin-left: auto; margin-right: auto; }
.entry-content .kratu-cta a { text-decoration: none; }
.entry-content .kratu-cta a:hover { transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   5. Header + footer
   -------------------------------------------------------------------------- */
.site-header,
#masthead,
.site-header-wrap,
.site-header-row {
  background-color: rgba(14, 12, 8, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--kr-hairline);
}
/* Header logo + site title balanced: larger mark, tighter title, aligned. */
.site-branding img,
.custom-logo-link img,
.site-header-item img.custom-logo { max-height: 62px !important; width: auto; }
.site-branding .site-title,
.site-header .site-title,
.site-title { font-size: 1.5rem !important; line-height: 1.15; letter-spacing: -0.01em; }
.site-title a { color: var(--kr-light); }
/* Vertically centre the mark with the title text. */
.site-branding, .site-header-item .site-branding { display: flex; align-items: center; gap: 14px; }

.main-navigation a,
.header-navigation a { color: var(--kr-light); font-family: var(--kr-sans); font-weight: 500; }
.main-navigation a:hover { color: var(--kr-gold); }

#colophon,
.site-footer {
  border-top: 1px solid var(--kr-hairline);
  color: var(--kr-muted);
}
.site-footer a { color: var(--kr-muted); }
.site-footer a:hover { color: var(--kr-gold); }

/* --------------------------------------------------------------------------
   6. Single post — meta, blockquote, code, figures, lists
   -------------------------------------------------------------------------- */
.single .entry-header { text-align: center; margin: 2.5rem auto 2rem; max-width: 52rem; }
.single .entry-title { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.4rem); font-weight: 700; }

/* Meta row + our category "kicker" in mono. */
.entry-meta,
.single .entry-meta {
  font-family: var(--kr-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--kr-muted);
}
.entry-meta a { color: var(--kr-muted); }
.entry-meta a:hover { color: var(--kr-gold); }
.kr-kicker {
  display: inline-block;
  font-family: var(--kr-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--kr-gold);
  margin-bottom: 1rem;
}

/* Blockquote — gold rule, serif italic. */
.entry-content blockquote {
  border-left: 3px solid var(--kr-gold);
  background: linear-gradient(90deg, rgba(201, 163, 91, 0.06), transparent);
  margin: 2em auto;
  padding: 0.6em 1.4em;
  font-family: var(--kr-serif);
  font-style: italic;
  font-size: 1.22rem;
  color: var(--kr-light);
}
.entry-content blockquote cite { display: block; margin-top: 0.6em; font-size: 0.9rem; font-style: normal; font-family: var(--kr-mono); color: var(--kr-muted); }

/* Inline code + code blocks. */
.entry-content code,
.entry-content kbd {
  font-family: var(--kr-mono);
  font-size: 0.9em;
  background: var(--kr-ink-2);
  color: var(--kr-gold-soft);
  padding: 0.15em 0.4em;
  border-radius: 5px;
  border: 1px solid var(--kr-hairline-2);
}
.entry-content pre,
.wp-block-code {
  font-family: var(--kr-mono);
  background: var(--kr-ink-2);
  color: var(--kr-body);
  border: 1px solid var(--kr-hairline);
  border-radius: var(--kr-radius);
  padding: 1.15rem 1.3rem;
  overflow-x: auto;
  line-height: 1.6;
  font-size: 0.92rem;
}
.entry-content pre code { background: none; border: 0; padding: 0; color: inherit; }

/* Figures + images. */
.entry-content img,
.wp-block-image img { border-radius: var(--kr-radius); }
.wp-block-image figcaption,
.entry-content figcaption {
  font-family: var(--kr-mono);
  font-size: 0.78rem;
  color: var(--kr-muted);
  text-align: center;
  margin-top: 0.6rem;
  letter-spacing: 0.03em;
}

/* Lists — gold markers. */
.entry-content ul li::marker { color: var(--kr-gold); }
.entry-content ol li::marker { color: var(--kr-gold); font-family: var(--kr-mono); }
.entry-content hr,
.wp-block-separator {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kr-hairline), transparent);
  margin: 3rem auto;
  max-width: var(--kr-measure);
}

/* Tables. */
.entry-content table { border-collapse: collapse; width: 100%; font-size: 0.98rem; }
.entry-content th, .entry-content td { border: 1px solid var(--kr-hairline-2); padding: 0.7em 0.9em; }
.entry-content thead th { background: var(--kr-ink-2); color: var(--kr-light); font-family: var(--kr-sans); }

/* --------------------------------------------------------------------------
   7. Auto Table of Contents (rendered by the mu-plugin)
   -------------------------------------------------------------------------- */
.kr-toc {
  max-width: var(--kr-measure);
  margin: 2.2rem auto 2.6rem;
  padding: 1.3rem 1.5rem;
  background: var(--kr-ink-2);
  border: 1px solid var(--kr-hairline);
  border-radius: var(--kr-radius);
}
.kr-toc__title {
  font-family: var(--kr-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--kr-gold);
  margin: 0 0 0.85rem;
}
.kr-toc ol { list-style: none; counter-reset: kr-toc; margin: 0; padding: 0; }
.kr-toc li { counter-increment: kr-toc; margin: 0.35rem 0; line-height: 1.5; }
.kr-toc li::before {
  content: counter(kr-toc, decimal-leading-zero);
  font-family: var(--kr-mono);
  font-size: 0.78rem;
  color: var(--kr-gold);
  margin-right: 0.7rem;
}
.kr-toc li.kr-toc__sub { margin-left: 1.6rem; }
.kr-toc li.kr-toc__sub::before { content: "—"; }
.kr-toc a { color: var(--kr-body); text-decoration: none; }
.kr-toc a:hover { color: var(--kr-gold); }
/* Offset anchor jumps so headings aren't hidden under the sticky header. */
.entry-content h2[id],
.entry-content h3[id] { scroll-margin-top: 90px; }

/* --------------------------------------------------------------------------
   8. Author box + related posts (rendered by the mu-plugin)
   -------------------------------------------------------------------------- */
.kr-authorbox {
  max-width: var(--kr-measure);
  margin: 3rem auto 0;
  padding: 1.6rem 0 0;
  border-top: 1px solid var(--kr-hairline);
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}
.kr-authorbox__avatar img { border-radius: 50%; width: 64px; height: 64px; border: 1px solid var(--kr-hairline); }
.kr-authorbox__name { font-family: var(--kr-serif); color: var(--kr-light); font-size: 1.2rem; margin: 0 0 0.2rem; }
.kr-authorbox__role { font-family: var(--kr-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--kr-gold); margin: 0 0 0.5rem; }
.kr-authorbox__bio { color: var(--kr-muted); font-size: 0.96rem; margin: 0; }

.kr-related { max-width: 62rem; margin: 3.5rem auto 0; }
.kr-related__title {
  font-family: var(--kr-mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--kr-gold);
  text-align: center;
  margin: 0 0 1.4rem;
}
.kr-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.kr-related__card {
  background: var(--kr-ink-2);
  border: 1px solid var(--kr-hairline-2);
  border-radius: var(--kr-radius);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.kr-related__card:hover { transform: translateY(-3px); border-color: var(--kr-hairline); box-shadow: var(--kr-shadow); }
.kr-related__thumb { display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #14110a, #241d10); background-size: cover; background-position: center; }
.kr-related__body { padding: 0.95rem 1.05rem 1.15rem; }
.kr-related__card h4 { font-family: var(--kr-serif); font-size: 1.02rem; line-height: 1.3; margin: 0; }
.kr-related__card h4 a { color: var(--kr-light); }
.kr-related__card h4 a:hover { color: var(--kr-gold); }
.kr-related__date { font-family: var(--kr-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--kr-muted); margin: 0.5rem 0 0; }

/* --------------------------------------------------------------------------
   9. Archive / blog index — card grid + hero
   -------------------------------------------------------------------------- */
/* Kadence loop entries as premium cards. */
.loop-entry.content-bg,
.loop-entry article,
article.loop-entry {
  background: var(--kr-ink-2);
  border: 1px solid var(--kr-hairline-2);
  border-radius: var(--kr-radius);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.loop-entry.content-bg:hover,
article.loop-entry:hover {
  transform: translateY(-3px);
  border-color: var(--kr-hairline);
  box-shadow: var(--kr-shadow);
}
.loop-entry .entry-title { font-size: 1.35rem; }
.loop-entry .entry-title a { color: var(--kr-light); }
.loop-entry .entry-title a:hover { color: var(--kr-gold); }

/* Branded placeholder for cards WITHOUT a featured image (the current 4 posts).
   Kadence adds .loop-entry.no-thumbnail (or omits .has-post-thumbnail); we paint
   a subtle ink->gold gradient block so text-only cards still look intentional. */
.loop-entry.no-thumbnail .entry-content-wrap::before,
.loop-entry:not(.has-post-thumbnail) .entry-content-wrap::before {
  content: "";
  display: block;
  height: 6px;
  margin-bottom: 1.1rem;
  background: linear-gradient(90deg, var(--kr-gold), var(--kr-gold-deep));
  border-radius: 3px;
}

/* Category chips + read-more. */
.entry-taxonomies a,
.loop-entry .entry-taxonomies a {
  font-family: var(--kr-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--kr-gold);
  border: 1px solid var(--kr-hairline);
  padding: 0.15em 0.6em;
  border-radius: 100px;
}
.more-link, .read-more {
  font-family: var(--kr-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--kr-gold);
}
.more-link::after { content: " \2192"; }

/* ── KRATU hero on the blog index (mu-plugin) — refined, filled & animated ── */
.kr-hero {
  text-align: center;
  padding: clamp(1.75rem, 1.25rem + 3vw, 3.4rem) 1.25rem clamp(2.25rem, 1.5rem + 2.5vw, 3.25rem);
  border-bottom: 1px solid var(--kr-hairline);
  position: relative;
  overflow: hidden;
}
/* Soft brand glow that gently breathes behind the hero (very subtle). */
.kr-hero::before {
  content: "";
  position: absolute;
  top: -22%; left: 50%;
  width: min(700px, 82vw); height: min(700px, 82vw);
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(201, 163, 91, 0.11), transparent 62%);
  pointer-events: none;
  animation: kr-breathe 9s ease-in-out infinite;
}
.kr-hero > * { position: relative; z-index: 1; }

/* Mark + slowly rotating compass ring (echoes the logo's compass motif). */
.kr-hero__mark-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2.6rem; /* clears the rotating ring + breathing room above the eyebrow */
  animation: kr-fade-up 0.7s ease both;
}
.kr-hero__mark { width: clamp(172px, 15vw, 228px); height: auto; display: block; opacity: 0.98; }
.kr-hero__ring {
  position: absolute;
  width: calc(100% + 56px);
  height: calc(100% + 56px);
  border: 1px dashed rgba(201, 163, 91, 0.34);
  border-radius: 50%;
  animation: kr-spin 52s linear infinite;
  pointer-events: none;
}
.kr-hero__ring::after {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid rgba(201, 163, 91, 0.13);
  border-radius: 50%;
}

.kr-hero__eyebrow {
  font-family: var(--kr-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--kr-gold);
  margin: 0 0 1.2rem;
  animation: kr-fade-up 0.7s ease 0.06s both;
}
.kr-hero__title {
  font-family: var(--kr-serif);
  font-weight: 600;
  color: var(--kr-light);
  font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.5rem);
  line-height: 1.1;
  margin: 0 auto 0.7rem;
  max-width: 18ch;
  animation: kr-fade-up 0.7s ease 0.12s both;
}
.kr-hero__tagline {
  font-family: var(--kr-serif);
  font-style: italic;
  color: var(--kr-gold-soft);
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.4rem);
  margin: 0 auto 1.3rem;
  max-width: 40ch;
  animation: kr-fade-up 0.7s ease 0.18s both;
}
.kr-hero__intro {
  font-family: var(--kr-sans);
  color: var(--kr-muted);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0 auto 1.6rem;
  max-width: 54ch;
  animation: kr-fade-up 0.7s ease 0.24s both;
}

/* Topic chips (real post categories, linked). */
.kr-hero__chips {
  display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center;
  margin: 0 auto; max-width: 46rem;
  animation: kr-fade-up 0.7s ease 0.3s both;
}
.kr-hero__chips a {
  font-family: var(--kr-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--kr-body);
  border: 1px solid var(--kr-hairline);
  border-radius: 100px;
  padding: 0.4em 0.9em;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.kr-hero__chips a:hover { color: var(--kr-ink); background: var(--kr-gold); border-color: var(--kr-gold); transform: translateY(-1px); }

/* Scroll cue at the foot of the hero. */
.kr-hero__scroll {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.55rem;
  margin-top: 1.9rem;
  font-family: var(--kr-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.24em;
  color: var(--kr-muted);
  animation: kr-fade-up 0.7s ease 0.36s both;
}
.kr-hero__scroll i {
  width: 18px; height: 18px;
  border-right: 1.5px solid var(--kr-gold);
  border-bottom: 1.5px solid var(--kr-gold);
  transform: rotate(45deg);
  animation: kr-bob 1.8s ease-in-out infinite;
}

/* Hero animation keyframes (disabled under reduced-motion, see §11). */
@keyframes kr-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes kr-spin { to { transform: rotate(360deg); } }
@keyframes kr-breathe { 0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.06); } }
@keyframes kr-bob { 0%, 100% { transform: rotate(45deg) translate(0, 0); } 50% { transform: rotate(45deg) translate(3px, 3px); } }

/* --------------------------------------------------------------------------
   10. Pagination, comments, widgets, misc
   -------------------------------------------------------------------------- */
.pagination a, .pagination .current, .page-numbers {
  font-family: var(--kr-mono);
  color: var(--kr-body);
  border: 1px solid var(--kr-hairline-2);
  border-radius: 8px;
}
.pagination .current, .page-numbers.current { background: var(--kr-gold); color: var(--kr-ink); border-color: var(--kr-gold); }

.widget-area .widget, .widget { color: var(--kr-body); }
.widget-title { color: var(--kr-light); }

input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea, select {
  background: var(--kr-ink-2);
  color: var(--kr-light);
  border: 1px solid var(--kr-hairline-2);
  border-radius: 8px;
}
input:focus, textarea:focus, select:focus { border-color: var(--kr-gold); outline: none; }

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .kr-related__grid { grid-template-columns: 1fr; }
  .kr-authorbox { flex-direction: column; }
  body { font-size: 1.02rem; }
}

/* Respect reduced motion — no transitions and no hero animations. */
@media (prefers-reduced-motion: reduce) {
  *, .kr-hero::before, .kr-hero__ring, .kr-hero__scroll i,
  .kr-hero__mark-wrap, .kr-hero__eyebrow, .kr-hero__title,
  .kr-hero__tagline, .kr-hero__intro, .kr-hero__chips, .kr-hero__scroll {
    transition: none !important;
    animation: none !important;
  }
}